SwtTt29
/
Review2
1
0
Fork 0
Code Issues Pull Requests 1 Projects Releases Wiki Activity
Browse Source

调整标题栏布局，将返回、联系客服和登录信息按钮放在同一行

Boss3
Default User 1 month ago
parent
4af371d80a
commit
0f10c28979
1 changed files with 41 additions and 35 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 72
      supply.html

72
supply.html
View File

@ -28,51 +28,49 @@
.title-bar {
background-color: #1677ff;
color: white;
padding: 12px 15px;
display: flex;
justify-content: space-between;
align-items: center;
padding: 15px;
position: sticky;
top: 0;
z-index: 100;
flex-wrap: nowrap;
display: flex;
flex-direction: column;
gap: 10px;
}
.title-bar-top {
display: flex;
justify-content: center;
align-items: center;
}
.title-bar h1 {
margin: 0;
font-size: 18px;
font-weight: 500;
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.title-bar-actions {
.title-bar-bottom {
display: flex;
gap: 8px;
justify-content: space-between;
align-items: center;
flex-shrink: 0;
flex-wrap: nowrap;
gap: 10px;
}
.title-bar-actions button {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: 1px solid rgba(255, 255, 255, 0.3);
padding: 8px 16px;
border-radius: 20px;
font-size: 14px;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
.title-bar-left {
display: flex;
align-items: center;
gap: 10px;
}
.title-bar-right {
display: flex;
align-items: center;
gap: 10px;
}
.title-bar-actions button:hover {
/* 按钮悬停效果 */
.title-bar button:hover {
background-color: rgba(255, 255, 255, 0.3);
}
@ -1299,16 +1297,24 @@
<div class="container">
<!-- 标题栏 -->
<div class="title-bar">
<div style="display: flex; align-items: center; gap: 10px; width: 100%;">
<button onclick="window.location.href='SupplierReview.html'" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
<!-- 顶部标题 -->
<div class="title-bar-top">
<h1>我的货源</h1>
</div>
<!-- 底部按钮栏 -->
<div class="title-bar-bottom">
<!-- 左侧：返回按钮 -->
<div class="title-bar-left">
<button onclick="window.location.href='SupplierReview.html'" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 15px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
返回
</button>
<h1 style="margin: 0; flex: 1; text-align: center;">我的货源</h1>
<div style="display: flex; align-items: center; gap: 8px;">
<button onclick="contactCustomerService()" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
</div>
<!-- 右侧：联系客服和用户信息 -->
<div class="title-bar-right">
<button onclick="contactCustomerService()" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 15px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
联系客服
</button>
<button class="apply-settlement-btn" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 16px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
<button class="apply-settlement-btn" style="background-color: rgba(255, 255, 255, 0.2); color: white; border: 1px solid rgba(255, 255, 255, 0.3); padding: 6px 12px; border-radius: 15px; font-size: 12px; font-weight: 500; cursor: pointer; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); flex-shrink: 0;">
已入驻
</button>
</div>

Write Preview
Loading…
Cancel
Save