|
@ -4,84 +4,98 @@ page { |
|
|
line-height: 1.6; |
|
|
line-height: 1.6; |
|
|
background: #f7f7f7; |
|
|
background: #f7f7f7; |
|
|
} |
|
|
} |
|
|
.container{ |
|
|
|
|
|
|
|
|
.container { |
|
|
width: 100vw; |
|
|
width: 100vw; |
|
|
} |
|
|
} |
|
|
.page-body{ |
|
|
|
|
|
|
|
|
.page-body { |
|
|
padding-top: 30rpx; |
|
|
padding-top: 30rpx; |
|
|
background: #ffffff; |
|
|
background: #fff; |
|
|
} |
|
|
} |
|
|
.page-section{ |
|
|
|
|
|
|
|
|
.page-section { |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
margin-bottom: 60rpx; |
|
|
margin-bottom: 60rpx; |
|
|
} |
|
|
} |
|
|
.page-section_center{ |
|
|
|
|
|
|
|
|
.page-section_center { |
|
|
display: flex; |
|
|
display: flex; |
|
|
flex-direction: column; |
|
|
flex-direction: column; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
} |
|
|
} |
|
|
.page-section:last-child{ |
|
|
|
|
|
|
|
|
.page-section:last-child { |
|
|
margin-bottom: 0; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
} |
|
|
.page-section-gap{ |
|
|
|
|
|
|
|
|
.page-section-gap { |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
padding: 0 30rpx; |
|
|
padding: 0 30rpx; |
|
|
} |
|
|
} |
|
|
.page-section-spacing{ |
|
|
|
|
|
|
|
|
.page-section-spacing { |
|
|
box-sizing: border-box; |
|
|
box-sizing: border-box; |
|
|
padding: 0 20rpx; |
|
|
padding: 0 20rpx; |
|
|
} |
|
|
} |
|
|
.page-section-title{ |
|
|
|
|
|
|
|
|
.page-section-title { |
|
|
font-size: 28rpx; |
|
|
font-size: 28rpx; |
|
|
color: #999999; |
|
|
color: #999; |
|
|
margin-bottom: 10rpx; |
|
|
margin-bottom: 10rpx; |
|
|
padding-left: 30rpx; |
|
|
padding-left: 30rpx; |
|
|
padding-right: 30rpx; |
|
|
padding-right: 30rpx; |
|
|
} |
|
|
} |
|
|
.page-section-gap .page-section-title{ |
|
|
|
|
|
|
|
|
.page-section-gap .page-section-title { |
|
|
padding-left: 0; |
|
|
padding-left: 0; |
|
|
padding-right: 0; |
|
|
padding-right: 0; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.demo-text-1{ |
|
|
.demo-text-1 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
background-color: #1AAD19; |
|
|
background-color: #1aad19; |
|
|
color: #FFFFFF; |
|
|
color: #fff; |
|
|
font-size: 36rpx; |
|
|
font-size: 36rpx; |
|
|
} |
|
|
} |
|
|
.demo-text-1:before{ |
|
|
|
|
|
|
|
|
.demo-text-1:before { |
|
|
content: 'A'; |
|
|
content: 'A'; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
.demo-text-2{ |
|
|
|
|
|
|
|
|
.demo-text-2 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
background-color: #2782D7; |
|
|
background-color: #2782d7; |
|
|
color: #FFFFFF; |
|
|
color: #fff; |
|
|
font-size: 36rpx; |
|
|
font-size: 36rpx; |
|
|
} |
|
|
} |
|
|
.demo-text-2:before{ |
|
|
|
|
|
|
|
|
.demo-text-2:before { |
|
|
content: 'B'; |
|
|
content: 'B'; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
top: 50%; |
|
|
left: 50%; |
|
|
left: 50%; |
|
|
transform: translate(-50%, -50%); |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
.demo-text-3{ |
|
|
|
|
|
|
|
|
.demo-text-3 { |
|
|
position: relative; |
|
|
position: relative; |
|
|
align-items: center; |
|
|
align-items: center; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
|
background-color: #F1F1F1; |
|
|
background-color: #f1f1f1; |
|
|
color: #353535; |
|
|
color: #353535; |
|
|
font-size: 36rpx; |
|
|
font-size: 36rpx; |
|
|
} |
|
|
} |
|
|
.demo-text-3:before{ |
|
|
|
|
|
|
|
|
.demo-text-3:before { |
|
|
content: 'C'; |
|
|
content: 'C'; |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
top: 50%; |
|
|
top: 50%; |
|
@ -89,20 +103,23 @@ page { |
|
|
transform: translate(-50%, -50%); |
|
|
transform: translate(-50%, -50%); |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
button{ |
|
|
button { |
|
|
margin-bottom: 30rpx; |
|
|
margin-bottom: 30rpx; |
|
|
} |
|
|
} |
|
|
button:last-child{ |
|
|
|
|
|
|
|
|
button:last-child { |
|
|
margin-bottom: 0; |
|
|
margin-bottom: 0; |
|
|
} |
|
|
} |
|
|
.page-section-title{ |
|
|
|
|
|
|
|
|
.page-section-title { |
|
|
padding: 0; |
|
|
padding: 0; |
|
|
} |
|
|
} |
|
|
.swiper-item{ |
|
|
|
|
|
|
|
|
.swiper-item { |
|
|
display: block; |
|
|
display: block; |
|
|
height: 300rpx; |
|
|
height: 300rpx; |
|
|
|
|
|
|
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.banner { |
|
|
.banner { |
|
|
overflow: hidden; |
|
|
overflow: hidden; |
|
|
height: 300rpx; |
|
|
height: 300rpx; |
|
@ -110,6 +127,7 @@ button:last-child{ |
|
|
width: 100%; |
|
|
width: 100%; |
|
|
border-radius: 16rpx; |
|
|
border-radius: 16rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.dots { |
|
|
.dots { |
|
|
display: flex; |
|
|
display: flex; |
|
|
justify-content: center; |
|
|
justify-content: center; |
|
@ -121,76 +139,89 @@ button:last-child{ |
|
|
height: 16rpx; |
|
|
height: 16rpx; |
|
|
border-radius: 8rpx; |
|
|
border-radius: 8rpx; |
|
|
margin-left: 10rpx; |
|
|
margin-left: 10rpx; |
|
|
background: #D2D5DA; |
|
|
background: #d2d5da; |
|
|
transition: all .3s; |
|
|
transition: all 0.3s; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.dots .dot.active { |
|
|
.dots .dot.active { |
|
|
width: 40rpx; |
|
|
width: 40rpx; |
|
|
background-image: linear-gradient(90deg, #FC5555 58%, #FC5555 100%); |
|
|
background-image: linear-gradient(90deg, #fc5555 58%, #fc5555 100%); |
|
|
} |
|
|
} |
|
|
.page-section-title{ |
|
|
|
|
|
|
|
|
.page-section-title { |
|
|
margin-top: 60rpx; |
|
|
margin-top: 60rpx; |
|
|
position: relative; |
|
|
position: relative; |
|
|
} |
|
|
} |
|
|
.info{ |
|
|
|
|
|
|
|
|
.info { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
right: 0; |
|
|
right: 0; |
|
|
color: #353535; |
|
|
color: #353535; |
|
|
font-size: 30rpx; |
|
|
font-size: 30rpx; |
|
|
} |
|
|
} |
|
|
.page-foot{ |
|
|
|
|
|
|
|
|
.page-foot { |
|
|
margin-top: 50rpx; |
|
|
margin-top: 50rpx; |
|
|
} |
|
|
} |
|
|
swiper{ |
|
|
|
|
|
|
|
|
swiper { |
|
|
height: 320rpx; |
|
|
height: 320rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.tab-view { |
|
|
|
|
|
|
|
|
.tab-view{ |
|
|
|
|
|
height: 98rpx; |
|
|
height: 98rpx; |
|
|
width: 100wh; |
|
|
width: 100wh; |
|
|
background-color: #FFFFFF; |
|
|
background-color: #fff; |
|
|
margin-top: 30rpx; |
|
|
margin-top: 30rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.wux-tabs__tab { |
|
|
.wux-tabs__tab { |
|
|
font-size:32rpx!important; |
|
|
font-size: 32rpx !important; |
|
|
color: #8393A0!important; |
|
|
color: #8393a0 !important; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
.wux-tabs__tab--current { |
|
|
.wux-tabs__tab--current { |
|
|
color:#333333!important; |
|
|
color: #333 !important; |
|
|
font-weight: bold; |
|
|
font-weight: bold; |
|
|
font-size: 40rpx!important; |
|
|
font-size: 40rpx !important; |
|
|
} |
|
|
} |
|
|
.wux-tabs__tab-bar{ |
|
|
|
|
|
background: #FB3535!important; |
|
|
.wux-tabs__tab-bar { |
|
|
height: 10rpx!important; |
|
|
background: #fb3535 !important; |
|
|
border-radius: 6rpx!important; |
|
|
height: 10rpx !important; |
|
|
margin-top: -40rpx!important; |
|
|
border-radius: 6rpx !important; |
|
|
width: 80%!important; |
|
|
margin-top: -40rpx !important; |
|
|
margin-left: 10%!important; |
|
|
width: 80% !important; |
|
|
|
|
|
margin-left: 20rpx !important; |
|
|
} |
|
|
} |
|
|
.top{ |
|
|
|
|
|
|
|
|
.top { |
|
|
position: absolute; |
|
|
position: absolute; |
|
|
width: 200rpx; |
|
|
width: 200rpx; |
|
|
height: 80rpx; |
|
|
height: 80rpx; |
|
|
right: 20rpx; |
|
|
right: 20rpx; |
|
|
margin-top: -80rpx; |
|
|
margin-top: -80rpx; |
|
|
} |
|
|
} |
|
|
.toptxt{ |
|
|
|
|
|
color: #8393A0; |
|
|
.toptxt { |
|
|
|
|
|
color: #8393a0; |
|
|
line-height: 80rpx; |
|
|
line-height: 80rpx; |
|
|
} |
|
|
} |
|
|
.imgtop{ |
|
|
|
|
|
|
|
|
.imgtop { |
|
|
width: 44rpx; |
|
|
width: 44rpx; |
|
|
height: 32rpx; |
|
|
height: 32rpx; |
|
|
float: left; |
|
|
float: left; |
|
|
margin-top: 28rpx; |
|
|
margin-top: 28rpx; |
|
|
margin-right: 10rpx; |
|
|
margin-right: 10rpx; |
|
|
} |
|
|
} |
|
|
.topimg{ |
|
|
|
|
|
|
|
|
.topimg { |
|
|
float: left; |
|
|
float: left; |
|
|
width: 44rpx; |
|
|
width: 44rpx; |
|
|
height: 32rpx; |
|
|
height: 32rpx; |
|
|
} |
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
.wux-tabs__tab--horizontal.wux-tabs__tab--scroll { |
|
|
|
|
|
padding: 0 20rpx !important; |
|
|
|
|
|
} |
|
|