style(home): 首页轮播高度压缩三分之一
轮播高度 380rpx → 254rpx,标题/副标题/按钮/平台实力数据卡/关闭按钮/指示点同步紧凑,保持后端 theme、action_text、stats 数据字段不变
这个提交包含在:
@@ -1050,7 +1050,7 @@
|
|||||||
/* ---------- 品牌 / 服务主题轮播 ---------- */
|
/* ---------- 品牌 / 服务主题轮播 ---------- */
|
||||||
.banner-wrap { margin-top: 24rpx; }
|
.banner-wrap { margin-top: 24rpx; }
|
||||||
.banner-swiper {
|
.banner-swiper {
|
||||||
height: 380rpx;
|
height: 254rpx;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
box-shadow: 0 12rpx 28rpx rgba(236, 110, 12, 0.20);
|
box-shadow: 0 12rpx 28rpx rgba(236, 110, 12, 0.20);
|
||||||
@@ -1060,7 +1060,7 @@
|
|||||||
width: 100%;
|
width: 100%;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
padding: 30rpx 30rpx 26rpx;
|
padding: 22rpx 26rpx 18rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
border-radius: 24rpx;
|
border-radius: 24rpx;
|
||||||
}
|
}
|
||||||
@@ -1083,31 +1083,32 @@
|
|||||||
}
|
}
|
||||||
.slide-tags { position: relative; z-index: 2; display: flex; }
|
.slide-tags { position: relative; z-index: 2; display: flex; }
|
||||||
.slide-tag {
|
.slide-tag {
|
||||||
padding: 0 14rpx; line-height: 34rpx; border-radius: 17rpx;
|
padding: 0 12rpx; line-height: 30rpx; border-radius: 15rpx;
|
||||||
font-size: 20rpx; letter-spacing: 1rpx;
|
font-size: 18rpx; letter-spacing: 1rpx;
|
||||||
}
|
}
|
||||||
.theme-promo .slide-tag { background: linear-gradient(135deg, #F5452B 0%, #D92210 100%); color: #FFE9A8; }
|
.theme-promo .slide-tag { background: linear-gradient(135deg, #F5452B 0%, #D92210 100%); color: #FFE9A8; }
|
||||||
.theme-promo .slide-tag.ghost { margin-left: 10rpx; background: rgba(232,51,27,.12); color: #C0392B; }
|
.theme-promo .slide-tag.ghost { margin-left: 10rpx; background: rgba(232,51,27,.12); color: #C0392B; }
|
||||||
.theme-service .slide-tag { background: rgba(255,255,255,.22); color: #fff; }
|
.theme-service .slide-tag { background: rgba(255,255,255,.22); color: #fff; }
|
||||||
.slide-title {
|
.slide-title {
|
||||||
position: relative; z-index: 2; display: block; margin-top: 14rpx;
|
position: relative; z-index: 2; display: block; margin-top: 10rpx;
|
||||||
font-size: 46rpx; font-weight: 800; letter-spacing: 1rpx; line-height: 1.18;
|
font-size: 36rpx; font-weight: 800; letter-spacing: 1rpx; line-height: 1.16;
|
||||||
|
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
.theme-promo .slide-title { color: #E8331B; text-shadow: 0 3rpx 0 #FFE9A8; }
|
.theme-promo .slide-title { color: #E8331B; text-shadow: 0 3rpx 0 #FFE9A8; }
|
||||||
.theme-service .slide-title { color: #fff; }
|
.theme-service .slide-title { color: #fff; }
|
||||||
.slide-sub { position: relative; z-index: 2; display: block; margin-top: 8rpx; font-size: 24rpx; line-height: 1.4; }
|
.slide-sub { position: relative; z-index: 2; display: block; margin-top: 6rpx; font-size: 21rpx; line-height: 1.35; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
|
||||||
.theme-promo .slide-sub { color: #C0392B; }
|
.theme-promo .slide-sub { color: #C0392B; }
|
||||||
.theme-service .slide-sub { color: rgba(255,255,255,.92); }
|
.theme-service .slide-sub { color: rgba(255,255,255,.92); }
|
||||||
.slide-bottom {
|
.slide-bottom {
|
||||||
position: absolute; left: 30rpx; right: 30rpx; bottom: 26rpx; z-index: 3;
|
position: absolute; left: 26rpx; right: 26rpx; bottom: 18rpx; z-index: 3;
|
||||||
display: flex; align-items: center; justify-content: space-between;
|
display: flex; align-items: center; justify-content: space-between;
|
||||||
}
|
}
|
||||||
.slide-date { padding: 0 16rpx; line-height: 34rpx; border-radius: 17rpx; font-size: 21rpx; }
|
.slide-date { padding: 0 14rpx; line-height: 30rpx; border-radius: 15rpx; font-size: 19rpx; }
|
||||||
.theme-promo .slide-date { background: rgba(232,51,27,.10); color: #C0392B; }
|
.theme-promo .slide-date { background: rgba(232,51,27,.10); color: #C0392B; }
|
||||||
.theme-service .slide-date { background: rgba(255,255,255,.18); color: #fff; }
|
.theme-service .slide-date { background: rgba(255,255,255,.18); color: #fff; }
|
||||||
.slide-cta {
|
.slide-cta {
|
||||||
height: 60rpx; padding: 0 26rpx; display: flex; align-items: center;
|
height: 52rpx; padding: 0 22rpx; display: flex; align-items: center;
|
||||||
border-radius: 30rpx; font-size: 24rpx; font-weight: 600;
|
border-radius: 26rpx; font-size: 21rpx; font-weight: 600;
|
||||||
}
|
}
|
||||||
.theme-promo .slide-cta {
|
.theme-promo .slide-cta {
|
||||||
background: linear-gradient(135deg, #FF9E2E 0%, #EE6C05 100%); color: #fff;
|
background: linear-gradient(135deg, #FF9E2E 0%, #EE6C05 100%); color: #fff;
|
||||||
@@ -1118,29 +1119,29 @@
|
|||||||
box-shadow: 0 6rpx 16rpx rgba(0,0,0,.12);
|
box-shadow: 0 6rpx 16rpx rgba(0,0,0,.12);
|
||||||
}
|
}
|
||||||
.slide-close {
|
.slide-close {
|
||||||
position: absolute; right: 20rpx; top: 20rpx; z-index: 4;
|
position: absolute; right: 14rpx; top: 14rpx; z-index: 4;
|
||||||
width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center;
|
width: 34rpx; height: 34rpx; line-height: 30rpx; text-align: center;
|
||||||
border-radius: 50%; font-size: 28rpx;
|
border-radius: 50%; font-size: 24rpx;
|
||||||
}
|
}
|
||||||
.theme-promo .slide-close { background: rgba(0,0,0,.10); color: #B85E2A; }
|
.theme-promo .slide-close { background: rgba(0,0,0,.10); color: #B85E2A; }
|
||||||
.slide-watermark {
|
.slide-watermark {
|
||||||
position: absolute; right: 26rpx; bottom: -18rpx; z-index: 1;
|
position: absolute; right: 18rpx; bottom: -12rpx; z-index: 1;
|
||||||
font-size: 220rpx; line-height: 1; font-weight: 800; color: rgba(255,255,255,.09);
|
font-size: 160rpx; line-height: 1; font-weight: 800; color: rgba(255,255,255,.09);
|
||||||
}
|
}
|
||||||
.brand-head { position: relative; z-index: 2; display: flex; align-items: center; }
|
.brand-head { position: relative; z-index: 2; display: flex; align-items: center; }
|
||||||
.brand-line { width: 6rpx; height: 28rpx; border-radius: 3rpx; background: #FFF0C9; margin-right: 10rpx; }
|
.brand-line { width: 5rpx; height: 22rpx; border-radius: 3rpx; background: #FFF0C9; margin-right: 8rpx; }
|
||||||
.brand-title { font-size: 28rpx; font-weight: 600; color: #FFF3DF; letter-spacing: 1rpx; }
|
.brand-title { font-size: 24rpx; font-weight: 600; color: #FFF3DF; letter-spacing: 1rpx; }
|
||||||
.brand-grid { position: relative; z-index: 2; display: flex; align-items: flex-end; margin-top: 24rpx; }
|
.brand-grid { position: relative; z-index: 2; display: flex; align-items: flex-end; margin-top: 14rpx; }
|
||||||
.brand-cell { flex: 1; display: flex; flex-direction: column; align-items: center; border-left: 2rpx solid rgba(255,255,255,.28); }
|
.brand-cell { flex: 1; display: flex; flex-direction: column; align-items: center; border-left: 2rpx solid rgba(255,255,255,.28); }
|
||||||
.brand-cell:first-child { border-left: none; }
|
.brand-cell:first-child { border-left: none; }
|
||||||
.brand-value { font-size: 48rpx; line-height: 58rpx; font-weight: 800; color: #fff; letter-spacing: 1rpx; }
|
.brand-value { font-size: 36rpx; line-height: 42rpx; font-weight: 800; color: #fff; letter-spacing: 1rpx; }
|
||||||
.brand-label { margin-top: 6rpx; font-size: 22rpx; color: rgba(255,255,255,.85); }
|
.brand-label { margin-top: 3rpx; font-size: 19rpx; color: rgba(255,255,255,.85); }
|
||||||
.brand-foot {
|
.brand-foot {
|
||||||
position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
|
position: relative; z-index: 2; display: flex; align-items: center; justify-content: space-between;
|
||||||
margin-top: 24rpx; padding-top: 18rpx; border-top: 2rpx solid rgba(255,255,255,.22);
|
margin-top: 14rpx; padding-top: 12rpx; border-top: 2rpx solid rgba(255,255,255,.22);
|
||||||
}
|
}
|
||||||
.brand-foot-txt { font-size: 22rpx; color: rgba(255,255,255,.90); }
|
.brand-foot-txt { font-size: 19rpx; color: rgba(255,255,255,.90); }
|
||||||
.brand-seal { padding: 6rpx 14rpx; border-radius: 8rpx; background: #FFF4E3; color: #E8331B; font-size: 20rpx; font-weight: 700; }
|
.brand-seal { padding: 4rpx 12rpx; border-radius: 7rpx; background: #FFF4E3; color: #E8331B; font-size: 18rpx; font-weight: 700; }
|
||||||
.banner-slide.has-image .slide-title,
|
.banner-slide.has-image .slide-title,
|
||||||
.banner-slide.has-image .slide-sub,
|
.banner-slide.has-image .slide-sub,
|
||||||
.banner-slide.has-image .brand-title,
|
.banner-slide.has-image .brand-title,
|
||||||
@@ -1149,9 +1150,9 @@
|
|||||||
.banner-slide.has-image .brand-foot-txt,
|
.banner-slide.has-image .brand-foot-txt,
|
||||||
.banner-slide.has-image .slide-tag,
|
.banner-slide.has-image .slide-tag,
|
||||||
.banner-slide.has-image .slide-date { color: #fff; }
|
.banner-slide.has-image .slide-date { color: #fff; }
|
||||||
.banner-dots { display: flex; align-items: center; justify-content: center; margin-top: 14rpx; }
|
.banner-dots { display: flex; align-items: center; justify-content: center; margin-top: 10rpx; }
|
||||||
.banner-dot { width: 12rpx; height: 6rpx; border-radius: 3rpx; background: #FFD4B5; margin: 0 5rpx; transition: all .25s; }
|
.banner-dot { width: 10rpx; height: 5rpx; border-radius: 2.5rpx; background: #FFD4B5; margin: 0 4rpx; transition: all .25s; }
|
||||||
.banner-dot.on { width: 30rpx; background: #F0710D; }
|
.banner-dot.on { width: 24rpx; background: #F0710D; }
|
||||||
|
|
||||||
.foot-tip {
|
.foot-tip {
|
||||||
padding: 36rpx 0 10rpx;
|
padding: 36rpx 0 10rpx;
|
||||||
|
|||||||
在新工单中引用
屏蔽一个用户