diff --git a/YJYF/YJYF.vue b/YJYF/YJYF.vue index 4f3197a..5ef1257 100644 --- a/YJYF/YJYF.vue +++ b/YJYF/YJYF.vue @@ -1050,7 +1050,7 @@ /* ---------- 品牌 / 服务主题轮播 ---------- */ .banner-wrap { margin-top: 24rpx; } .banner-swiper { - height: 380rpx; + height: 254rpx; border-radius: 24rpx; overflow: hidden; box-shadow: 0 12rpx 28rpx rgba(236, 110, 12, 0.20); @@ -1060,7 +1060,7 @@ width: 100%; height: 100%; box-sizing: border-box; - padding: 30rpx 30rpx 26rpx; + padding: 22rpx 26rpx 18rpx; overflow: hidden; border-radius: 24rpx; } @@ -1083,31 +1083,32 @@ } .slide-tags { position: relative; z-index: 2; display: flex; } .slide-tag { - padding: 0 14rpx; line-height: 34rpx; border-radius: 17rpx; - font-size: 20rpx; letter-spacing: 1rpx; + padding: 0 12rpx; line-height: 30rpx; border-radius: 15rpx; + font-size: 18rpx; letter-spacing: 1rpx; } .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-service .slide-tag { background: rgba(255,255,255,.22); color: #fff; } .slide-title { - position: relative; z-index: 2; display: block; margin-top: 14rpx; - font-size: 46rpx; font-weight: 800; letter-spacing: 1rpx; line-height: 1.18; + position: relative; z-index: 2; display: block; margin-top: 10rpx; + 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-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-service .slide-sub { color: rgba(255,255,255,.92); } .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; } - .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-service .slide-date { background: rgba(255,255,255,.18); color: #fff; } .slide-cta { - height: 60rpx; padding: 0 26rpx; display: flex; align-items: center; - border-radius: 30rpx; font-size: 24rpx; font-weight: 600; + height: 52rpx; padding: 0 22rpx; display: flex; align-items: center; + border-radius: 26rpx; font-size: 21rpx; font-weight: 600; } .theme-promo .slide-cta { background: linear-gradient(135deg, #FF9E2E 0%, #EE6C05 100%); color: #fff; @@ -1118,29 +1119,29 @@ box-shadow: 0 6rpx 16rpx rgba(0,0,0,.12); } .slide-close { - position: absolute; right: 20rpx; top: 20rpx; z-index: 4; - width: 40rpx; height: 40rpx; line-height: 36rpx; text-align: center; - border-radius: 50%; font-size: 28rpx; + position: absolute; right: 14rpx; top: 14rpx; z-index: 4; + width: 34rpx; height: 34rpx; line-height: 30rpx; text-align: center; + border-radius: 50%; font-size: 24rpx; } .theme-promo .slide-close { background: rgba(0,0,0,.10); color: #B85E2A; } .slide-watermark { - position: absolute; right: 26rpx; bottom: -18rpx; z-index: 1; - font-size: 220rpx; line-height: 1; font-weight: 800; color: rgba(255,255,255,.09); + position: absolute; right: 18rpx; bottom: -12rpx; z-index: 1; + 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-line { width: 6rpx; height: 28rpx; border-radius: 3rpx; background: #FFF0C9; margin-right: 10rpx; } - .brand-title { font-size: 28rpx; 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-line { width: 5rpx; height: 22rpx; border-radius: 3rpx; background: #FFF0C9; margin-right: 8rpx; } + .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: 14rpx; } .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-value { font-size: 48rpx; line-height: 58rpx; font-weight: 800; color: #fff; letter-spacing: 1rpx; } - .brand-label { margin-top: 6rpx; font-size: 22rpx; color: rgba(255,255,255,.85); } + .brand-value { font-size: 36rpx; line-height: 42rpx; font-weight: 800; color: #fff; letter-spacing: 1rpx; } + .brand-label { margin-top: 3rpx; font-size: 19rpx; color: rgba(255,255,255,.85); } .brand-foot { 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-seal { padding: 6rpx 14rpx; border-radius: 8rpx; background: #FFF4E3; color: #E8331B; font-size: 20rpx; font-weight: 700; } + .brand-foot-txt { font-size: 19rpx; color: rgba(255,255,255,.90); } + .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-sub, .banner-slide.has-image .brand-title, @@ -1149,9 +1150,9 @@ .banner-slide.has-image .brand-foot-txt, .banner-slide.has-image .slide-tag, .banner-slide.has-image .slide-date { color: #fff; } - .banner-dots { display: flex; align-items: center; justify-content: center; margin-top: 14rpx; } - .banner-dot { width: 12rpx; height: 6rpx; border-radius: 3rpx; background: #FFD4B5; margin: 0 5rpx; transition: all .25s; } - .banner-dot.on { width: 30rpx; background: #F0710D; } + .banner-dots { display: flex; align-items: center; justify-content: center; margin-top: 10rpx; } + .banner-dot { width: 10rpx; height: 5rpx; border-radius: 2.5rpx; background: #FFD4B5; margin: 0 4rpx; transition: all .25s; } + .banner-dot.on { width: 24rpx; background: #F0710D; } .foot-tip { padding: 36rpx 0 10rpx;