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
Unified 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 { .title-bar {
background-color: #1677ff; background-color: #1677ff;
color: white; color: white;
padding: 12px 15px; padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
position: sticky; position: sticky;
top: 0; top: 0;
z-index: 100; z-index: 100;
flex-wrap: nowrap; display: flex;
flex-direction: column;
gap: 10px; gap: 10px;
} }
.title-bar-top {
display: flex;
justify-content: center;
align-items: center;
}
.title-bar h1 { .title-bar h1 {
margin: 0; margin: 0;
font-size: 18px; font-size: 18px;
font-weight: 500; font-weight: 500;
flex: 1;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} }
.title-bar-actions { .title-bar-bottom {
display: flex; display: flex;
gap: 8px; justify-content: space-between;
align-items: center; align-items: center;
flex-shrink: 0; flex-wrap: nowrap;
gap: 10px;
} }
.title-bar-actions button { .title-bar-left {
background-color: rgba(255, 255, 255, 0.2); display: flex;
color: white; align-items: center;
border: 1px solid rgba(255, 255, 255, 0.3); gap: 10px;
padding: 8px 16px; }
border-radius: 20px;
font-size: 14px; .title-bar-right {
cursor: pointer; display: flex;
transition: all 0.3s ease; align-items: center;
white-space: nowrap; gap: 10px;
backdrop-filter: blur(10px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
flex-shrink: 0;
} }
.title-bar-actions button:hover { /* 按钮悬停效果 */
.title-bar button:hover {
background-color: rgba(255, 255, 255, 0.3); background-color: rgba(255, 255, 255, 0.3);
} }
@ -1299,16 +1297,24 @@
<div class="container"> <div class="container">
<!-- 标题栏 --> <!-- 标题栏 -->
<div class="title-bar"> <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> </button>
<h1 style="margin: 0; flex: 1; text-align: center;">我的货源</h1> </div>
<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 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>
<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> </button>
</div> </div>

Write Preview
Loading…
Cancel
Save