fix: 顶栏图标改为VMRack纯圆形 36x36
All checks were successful
continuous-integration/drone/push Build is passing
All checks were successful
continuous-integration/drone/push Build is passing
- 购物车/国旗/用户头像: 统一36x36纯圆形 - 半透明白色背景 + 白色边框 + blur(8px) - 隐藏下拉箭头和分隔竖线 - 按钮间距统一12px
This commit is contained in:
@@ -141,47 +141,87 @@ html, body {
|
|||||||
width: auto;
|
width: auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* ============ 顶栏右侧按钮 ============ */
|
/* ============ 顶栏右侧按钮 — 纯圆形 ============ */
|
||||||
|
/* 购物车按钮 */
|
||||||
.header-right .header-right-item .right-item {
|
.header-right .header-right-item .right-item {
|
||||||
background: rgba(255, 255, 255, 0.5) !important;
|
width: 36px !important;
|
||||||
border: none !important;
|
height: 36px !important;
|
||||||
border-radius: 20px !important;
|
background: rgba(255, 255, 255, 0.55) !important;
|
||||||
padding: 6px 10px !important;
|
border: 1px solid rgba(255, 255, 255, 0.8) !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
backdrop-filter: blur(8px) !important;
|
backdrop-filter: blur(8px) !important;
|
||||||
-webkit-backdrop-filter: blur(8px) !important;
|
-webkit-backdrop-filter: blur(8px) !important;
|
||||||
transition: all 0.2s ease !important;
|
transition: all 0.2s ease !important;
|
||||||
|
cursor: pointer !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right .header-right-item .right-item:hover {
|
.header-right .header-right-item .right-item:hover {
|
||||||
background: rgba(255, 255, 255, 0.8) !important;
|
background: rgba(255, 255, 255, 0.85) !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 国旗/语言下拉 */
|
/* 国旗/语言下拉 — 纯圆形 */
|
||||||
.header-right .header-right-item .el-dropdown-country,
|
.header-right .header-right-item .el-dropdown-country {
|
||||||
.header-right .header-right-item .el-dropdown-header {
|
width: 36px !important;
|
||||||
background: rgba(255, 255, 255, 0.5) !important;
|
height: 36px !important;
|
||||||
border: none !important;
|
background: rgba(255, 255, 255, 0.55) !important;
|
||||||
border-radius: 20px !important;
|
border: 1px solid rgba(255, 255, 255, 0.8) !important;
|
||||||
padding: 4px 10px !important;
|
border-radius: 50% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
backdrop-filter: blur(8px) !important;
|
backdrop-filter: blur(8px) !important;
|
||||||
-webkit-backdrop-filter: blur(8px) !important;
|
-webkit-backdrop-filter: blur(8px) !important;
|
||||||
transition: all 0.2s ease !important;
|
transition: all 0.2s ease !important;
|
||||||
|
overflow: hidden !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.header-right .header-right-item .el-dropdown-country:hover,
|
.header-right .header-right-item .el-dropdown-country:hover {
|
||||||
.header-right .header-right-item .el-dropdown-header:hover {
|
background: rgba(255, 255, 255, 0.85) !important;
|
||||||
background: rgba(255, 255, 255, 0.8) !important;
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 国旗图标缩小圆角 */
|
/* 国旗图标 */
|
||||||
.header-right .header-right-item .el-dropdown-country img {
|
.header-right .header-right-item .el-dropdown-country img {
|
||||||
width: 22px !important;
|
width: 20px !important;
|
||||||
height: 16px !important;
|
height: 20px !important;
|
||||||
border-radius: 3px !important;
|
border-radius: 50% !important;
|
||||||
object-fit: cover !important;
|
object-fit: cover !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 用户头像 */
|
/* 隐藏国旗下拉箭头(纯圆形内不需要箭头) */
|
||||||
|
.header-right .header-right-item .el-dropdown-country .right-icon {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户头像 — 纯圆形 */
|
||||||
|
.header-right .header-right-item .el-dropdown-header {
|
||||||
|
width: 36px !important;
|
||||||
|
height: 36px !important;
|
||||||
|
background: rgba(255, 255, 255, 0.55) !important;
|
||||||
|
border: 1px solid rgba(255, 255, 255, 0.8) !important;
|
||||||
|
border-radius: 50% !important;
|
||||||
|
padding: 0 !important;
|
||||||
|
display: flex !important;
|
||||||
|
align-items: center !important;
|
||||||
|
justify-content: center !important;
|
||||||
|
backdrop-filter: blur(8px) !important;
|
||||||
|
-webkit-backdrop-filter: blur(8px) !important;
|
||||||
|
transition: all 0.2s ease !important;
|
||||||
|
overflow: hidden !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right .header-right-item .el-dropdown-header:hover {
|
||||||
|
background: rgba(255, 255, 255, 0.85) !important;
|
||||||
|
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 用户头像框 */
|
||||||
.header-right .header-right-item .el-dropdown-header .head-box {
|
.header-right .header-right-item .el-dropdown-header .head-box {
|
||||||
width: 28px !important;
|
width: 28px !important;
|
||||||
height: 28px !important;
|
height: 28px !important;
|
||||||
@@ -191,17 +231,24 @@ html, body {
|
|||||||
color: #165DFF !important;
|
color: #165DFF !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 下拉箭头 */
|
/* 隐藏用户下拉箭头 */
|
||||||
.header-right .header-right-item .right-icon {
|
.header-right .header-right-item .el-dropdown-header .right-icon {
|
||||||
opacity: 0.5 !important;
|
display: none !important;
|
||||||
width: 6px !important;
|
|
||||||
margin-left: 4px !important;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* 分隔线变浅 */
|
/* 隐藏分隔竖线 */
|
||||||
.header-right .header-right-item .cloum-line {
|
.header-right .header-right-item .cloum-line {
|
||||||
border-color: rgba(0,0,0,0.08) !important;
|
display: none !important;
|
||||||
opacity: 0.5 !important;
|
}
|
||||||
|
|
||||||
|
/* 按钮间距统一 */
|
||||||
|
.header-right .car-item {
|
||||||
|
margin-right: 12px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right .cloum-line-item {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
margin-right: 12px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
.ali-logo {
|
.ali-logo {
|
||||||
|
|||||||
Reference in New Issue
Block a user