1、关于swiper样式的定制
在普通的业务需求中，总有客户追求个性化。我们可以根据业务的需求来改变样式。
1、wxml
<view class="swiper_box lpr pb20"> <swiper bindchange="swiperChange" indicator-dots="{{false}}" autoplay="true" interval="2000" duration="1000"> <block wx:for="{{result.banner}}" wx:key="key"> <navigator class="swiper" hover-class="none"> <swiper-item> <image bindtap="click" data-type="{{item.type}}" src="{{item.img}}"></image> </swiper-item> </navigator> </block> </swiper> <view class="current df lpa bottom30 right10 aic"> <view class="num df aic j2c fs24">{{index}}</view> <view>|</view> <view class="num df aic j2c fs24">{{result.banner.length}}</view> </view></view>2、
Page({
data:{
index:1
},
swiperChange: function (e) { var that = this; that.setData({ index: e.detail.current + 1 }) },
})1、wxss
.wx-swiper-dot { width: 20rpx !important; height: 6rpx !important; background-color: #35afff !important; border-radius: 60rpx !important;}.wx-swiper-dot-active{ background-color:#DF2C3F !important; }.catetory swiper { height: 320rpx;}.wx-swiper-dots { position: relative; left: unset !important; right: -50rpx;}.wx-swiper-dots.wx-swiper-dots-horizontal { margin-bottom: -5rpx;}2、选项卡吸顶效果
一般商品详情页都会有banner大图的展示，headH: rect[0].height,这个是大图的高度，如果页面滚动的高度大于这个，添加一个class样式。
1、wxml
<view class="tab pt30 pb30 df aic jcsa {{scrollTop>headH?'fixNav':''}}"> <view data-index="0" class="pb10 fs30 fmps {{num==0?'on':''}}" bindtap="clickLabel">详情</view> <view data-index="1" class="pb10 fs30 fmps {{num==1?'on':''}}" bindtap="clickLabel">评价</view> <view data-index="2" class="pb10 fs30 fmps {{num==2?'on':''}}" bindtap="clickLabel">推荐</view></view>2、wxss
.fixNav { position: fixed; top: 0; width: 100%; z-index: 999; background: #fff; height: 80rpx;}3、wxjs
onLoad: function (options) { var that = this; const query = wx.createSelectorQuery(); query.select('.head').boundingClientRect(); query.exec(function (rect) { if (rect[0] === null) return; that.setData({ headH: rect[0].height, sysWidth: wx.getSystemInfoSync().windowWidth }) }); },onPageScroll: function (e) { this.setData({ scrollTop: e.scrollTop }) },3、小程序样式初始化
作为一个比较懒的程序员，我还是比较喜欢写公用的css样式。这些公用的样式,基本能满足我们日常开发的需求。
view,scroll-view{box-sizing: border-box;}button{border:none;outline: none;background: none}button::after{border:none;}/* 字体 */.fs10{font-size:10rpx;}.fs11{font-size:11rpx;}.fs12{font-size:12rpx;}.fs13{font-size:13rpx;}.fs14{font-size:14rpx;}.fs15{font-size:15rpx;}.fs16{font-size:16rpx;}.fs17{font-size:17rpx;}.fs18{font-size:18rpx;}.fs19{font-size:19rpx;}.fs20{font-size:20rpx;}.fs21{font-size:21rpx;}.fs22{font-size:22rpx;}.fs23{font-size:23rpx;}.fs24{font-size:24rpx;}.fs25{font-size:25rpx;}.fs26{font-size:26rpx;}.fs27{font-size:27rpx;}.fs28{font-size:28rpx;}.fs29{font-size:29rpx;}.fs30{font-size:30rpx;}.fs31{font-size:31rpx;}.fs32{font-size:32rpx;}.fs33{font-size:33rpx;}.fs34{font-size:34rpx;}.fs35{font-size:35rpx;}.fs36{font-size:36rpx;}.fs37{font-size:37rpx;}.fs38{font-size:38rpx;}.fs39{font-size:39rpx;}.fs40{font-size:40rpx;}.fs41{font-size:41rpx;}.fs42{font-size:42rpx;}.fs43{font-size:43rpx;}.fs44{font-size:44rpx;}.fs45{font-size:45rpx;}.fs46{font-size:46rpx;}.fs47{font-size:47rpx;}.fs48{font-size:48rpx;}.fs49{font-size:49rpx;}.fs50{font-size:50rpx;}.fs51{font-size:51rpx;}.fs52{font-size:52rpx;}.fs53{font-size:53rpx;}.fs54{font-size:54rpx;}.fs55{font-size:55rpx;}.fs56{font-size:56rpx;}.fs57{font-size:57rpx;}.fs58{font-size:58rpx;}.fs59{font-size:58rpx;}.fs60{font-size:60rpx;}.fs61{font-size:61rpx;}.fs62{font-size:62rpx;}.fs63{font-size:63rpx;}.fs64{font-size:64rpx;}.fs65{font-size:65rpx;}.fs66{font-size:66rpx;}.fs67{font-size:67rpx;}.fs68{font-size:68rpx;}.fs69{font-size:69rpx;}.fs70{font-size:70rpx;}.fmps{font-family:PingFang SC;}.c0{color:#000;}.c3{color:#333;}.c6{color:#666;}.c9{color:#999;}.cf3{color:#F39700;}.c3e{color:#00703e;}.cfff{color:#fff;}.fwb{font-weight:bold;}.fwb5{font-weight:500;}.fwb4{font-weight:400;}.fwb3{font-weight:300;}.fwb2{font-weight:200;}.tar{text-align:right;}.tal{text-align:left;}.tac{text-align:center;}.textOverflow{overflow:hidden;white-space:nowrap;text-overflow: ellipsis;}.textOverflow2{display: -webkit-box;text-overflow: ellipsis;overflow: hidden;-webkit-box-orient: vertical;-webkit-line-clamp:2;}/* 布局 */.w80a{width:80%;margin:0 auto;}.w90a{width:90%;margin:0 auto;}.w92a{width:92%;margin:0 auto;}.w94a{width:94%;margin:0 auto;}.w96a{width:96%;margin:0 auto;}.w98a{width:98%;margin:0 auto;}.lpr{position:relative;}.lpa{position:absolute;}.lpf{position:fixed;}.df{display:flex}.flex1{flex:1}.flex2{flex:2}.flex3{flex:3}.flex4{flex:4}.flex5{flex:5}.flex6{flex:6}.flex7{flex:7}.flex8{flex:8}.flex9{flex:9}.flex10{flex:10}.dib{display:inline-block;}.fdr{flex-direction:row;}.fd2r{flex-direction:row-reverse;}.fdc{flex-direction:column;}.fdcr{flex-direction:column-reverse;}.fwn{flex-wrap:nowrap;}.f2w{flex-wrap:wrap;}.f2wr{flex-wrap:wrap-reverse;}.j2c{justify-content:center;}.jcfs{justify-content:flex-start;}.jcfe{justify-content:flex-end;}.jcsb{justify-content:space-between;}.jcsa{justify-content:space-around;}.aic{align-items:center;}.aifs{align-items:flex-start;}.aife{align-items: flex-end;}.aib{align-items:baseline;}.center {position: absolute; top: 50%; left: 50%; -webkit-transform: translate3d(-50%, -50%, 0); transform: translate3d(-50%, -50%, 0); z-index: 3; }.mt10{margin-top:10rpx;}.mt11{margin-top:11rpx;}.mt12{margin-top:12rpx;}.mt13{margin-top:13rpx;}.mt14{margin-top:14rpx;}.mt15{margin-top:15rpx;}.mt16{margin-top:16rpx;}.mt17{margin-top:17rpx;}.mt18{margin-top:18rpx;}.mt19{margin-top:19rpx;}.mt20{margin-top:20rpx;}.mt21{margin-top:21rpx;}.mt22{margin-top:22rpx;}.mt23{margin-top:23rpx;}.mt24{margin-top:24rpx;}.mt25{margin-top:25rpx;}.mt26{margin-top:26rpx;}.mt27{margin-top:27rpx;}.mt28{margin-top:28rpx;}.mt29{margin-top:29rpx;}.mt30{margin-top:30rpx;}.mt31{margin-top:31rpx;}.mt32{margin-top:32rpx;}.mt33{margin-top:33rpx;}.mt34{margin-top:34rpx;}.mt35{margin-top:35rpx;}.mt36{margin-top:36rpx;}.mt37{margin-top:37rpx;}.mt38{margin-top:38rpx;}.mt39{margin-top:39rpx;}.mt40{margin-top:40rpx;}.mt41{margin-top:41rpx;}.mt42{margin-top:42rpx;}.mt43{margin-top:43rpx;}.mt44{margin-top:44rpx;}.mt45{margin-top:45rpx;}.mt46{margin-top:46rpx;}.mt47{margin-top:47rpx;}.mt48{margin-top:48rpx;}.mt49{margin-top:49rpx;}.mt50{margin-top:50rpx;}.mt51{margin-top:51rpx;}.mt52{margin-top:52rpx;}.mt53{margin-top:53rpx;}.mt54{margin-top:54rpx;}.mt55{margin-top:55rpx;}.mt56{margin-top:56rpx;}.mt57{margin-top:57rpx;}.mt58{margin-top:58rpx;}.mt59{margin-top:58rpx;}.mt60{margin-top:60rpx;}.mt61{margin-top:61rpx;}.mt62{margin-top:62rpx;}.mt63{margin-top:63rpx;}.mt64{margin-top:64rpx;}.mt65{margin-top:65rpx;}.mt66{margin-top:66rpx;}.mt67{margin-top:67rpx;}.mt68{margin-top:68rpx;}.mt69{margin-top:69rpx;}.mt70{margin-top:70rpx;}.mt80{margin-top:80rpx;}.mt100{margin-top:100rpx;}.mb10{margin-bottom:10rpx;}.mb11{margin-bottom:11rpx;}.mb12{margin-bottom:12rpx;}.mb13{margin-bottom:13rpx;}.mb14{margin-bottom:14rpx;}.mb15{margin-bottom:15rpx;}.mb16{margin-bottom:16rpx;}.mb17{margin-bottom:17rpx;}.mb18{margin-bottom:18rpx;}.mb19{margin-bottom:19rpx;}.mb20{margin-bottom:20rpx;}.mb21{margin-bottom:21rpx;}.mb22{margin-bottom:22rpx;}.mb23{margin-bottom:23rpx;}.mb24{margin-bottom:24rpx;}.mb25{margin-bottom:25rpx;}.mb26{margin-bottom:26rpx;}.mb27{margin-bottom:27rpx;}.mb28{margin-bottom:28rpx;}.mb29{margin-bottom:29rpx;}.mb30{margin-bottom:30rpx;}.mb31{margin-bottom:31rpx;}.mb32{margin-bottom:32rpx;}.mb33{margin-bottom:33rpx;}.mb34{margin-bottom:34rpx;}.mb35{margin-bottom:35rpx;}.mb36{margin-bottom:36rpx;}.mb37{margin-bottom:37rpx;}.mb38{margin-bottom:38rpx;}.mb39{margin-bottom:39rpx;}.mb40{margin-bottom:40rpx;}.mb41{margin-bottom:41rpx;}.mb42{margin-bottom:42rpx;}.mb43{margin-bottom:43rpx;}.mb44{margin-bottom:44rpx;}.mb45{margin-bottom:45rpx;}.mb46{margin-bottom:46rpx;}.mb47{margin-bottom:47rpx;}.mb48{margin-bottom:48rpx;}.mb49{margin-bottom:49rpx;}.mb50{margin-bottom:50rpx;}.mb51{margin-bottom:51rpx;}.mb52{margin-bottom:52rpx;}.mb53{margin-bottom:53rpx;}.mb54{margin-bottom:54rpx;}.mb55{margin-bottom:55rpx;}.mb56{margin-bottom:56rpx;}.mb57{margin-bottom:57rpx;}.mb58{margin-bottom:58rpx;}.mb59{margin-bottom:58rpx;}.mb60{margin-bottom:60rpx;}.mb61{margin-bottom:61rpx;}.mb62{margin-bottom:62rpx;}.mb63{margin-bottom:63rpx;}.mb64{margin-bottom:64rpx;}.mb65{margin-bottom:65rpx;}.mb66{margin-bottom:66rpx;}.mb67{margin-bottom:67rpx;}.mb68{margin-bottom:68rpx;}.mb69{margin-bottom:69rpx;}.mb70{margin-bottom:70rpx;}.mr10{margin-right:10rpx;}.mr11{margin-right:11rpx;}.mr12{margin-right:12rpx;}.mr13{margin-right:13rpx;}.mr14{margin-right:14rpx;}.mr15{margin-right:15rpx;}.mr16{margin-right:16rpx;}.mr17{margin-right:17rpx;}.mr18{margin-right:18rpx;}.mr19{margin-right:19rpx;}.mr20{margin-right:20rpx;}.mr21{margin-right:21rpx;}.mr22{margin-right:22rpx;}.mr23{margin-right:23rpx;}.mr24{margin-right:24rpx;}.mr25{margin-right:25rpx;}.mr26{margin-right:26rpx;}.mr27{margin-right:27rpx;}.mr28{margin-right:28rpx;}.mr29{margin-right:29rpx;}.mr30{margin-right:30rpx;}.mr31{margin-right:31rpx;}.mr32{margin-right:32rpx;}.mr33{margin-right:33rpx;}.mr34{margin-right:34rpx;}.mr35{margin-right:35rpx;}.mr36{margin-right:36rpx;}.mr37{margin-right:37rpx;}.mr38{margin-right:38rpx;}.mr39{margin-right:39rpx;}.mr40{margin-right:40rpx;}.mr41{margin-right:41rpx;}.mr42{margin-right:42rpx;}.mr43{margin-right:43rpx;}.mr44{margin-right:44rpx;}.mr45{margin-right:45rpx;}.mr46{margin-right:46rpx;}.mr47{margin-right:47rpx;}.mr48{margin-right:48rpx;}.mr49{margin-right:49rpx;}.mr50{margin-right:50rpx;}.mr51{margin-right:51rpx;}.mr52{margin-right:52rpx;}.mr53{margin-right:53rpx;}.mr54{margin-right:54rpx;}.mr55{margin-right:55rpx;}.mr56{margin-right:56rpx;}.mr57{margin-right:57rpx;}.mr58{margin-right:58rpx;}.mr59{margin-right:58rpx;}.mr60{margin-right:60rpx;}.mr61{margin-right:61rpx;}.mr62{margin-right:62rpx;}.mr63{margin-right:63rpx;}.mr64{margin-right:64rpx;}.mr65{margin-right:65rpx;}.mr66{margin-right:66rpx;}.mr67{margin-right:67rpx;}.mr68{margin-right:68rpx;}.mr69{margin-right:69rpx;}.mr70{margin-right:70rpx;}.ml10{margin-left:10rpx;}.ml11{margin-left:11rpx;}.ml12{margin-left:12rpx;}.ml13{margin-left:13rpx;}.ml14{margin-left:14rpx;}.ml15{margin-left:15rpx;}.ml16{margin-left:16rpx;}.ml17{margin-left:17rpx;}.ml18{margin-left:18rpx;}.ml19{margin-left:19rpx;}.ml20{margin-left:20rpx;}.ml21{margin-left:21rpx;}.ml22{margin-left:22rpx;}.ml23{margin-left:23rpx;}.ml24{margin-left:24rpx;}.ml25{margin-left:25rpx;}.ml26{margin-left:26rpx;}.ml27{margin-left:27rpx;}.ml28{margin-left:28rpx;}.ml29{margin-left:29rpx;}.ml30{margin-left:30rpx;}.ml31{margin-left:31rpx;}.ml32{margin-left:32rpx;}.ml33{margin-left:33rpx;}.ml34{margin-left:34rpx;}.ml35{margin-left:35rpx;}.ml36{margin-left:36rpx;}.ml37{margin-left:37rpx;}.ml38{margin-left:38rpx;}.ml39{margin-left:39rpx;}.ml40{margin-left:40rpx;}.ml41{margin-left:41rpx;}.ml42{margin-left:42rpx;}.ml43{margin-left:43rpx;}.ml44{margin-left:44rpx;}.ml45{margin-left:45rpx;}.ml46{margin-left:46rpx;}.ml47{margin-left:47rpx;}.ml48{margin-left:48rpx;}.ml49{margin-left:49rpx;}.ml50{margin-left:50rpx;}.ml51{margin-left:51rpx;}.ml52{margin-left:52rpx;}.ml53{margin-left:53rpx;}.ml54{margin-left:54rpx;}.ml55{margin-left:55rpx;}.ml56{margin-left:56rpx;}.ml57{margin-left:57rpx;}.ml58{margin-left:58rpx;}.ml59{margin-left:58rpx;}.ml60{margin-left:60rpx;}.ml61{margin-left:61rpx;}.ml62{margin-left:62rpx;}.ml63{margin-left:63rpx;}.ml64{margin-left:64rpx;}.ml65{margin-left:65rpx;}.ml66{margin-left:66rpx;}.ml67{margin-left:67rpx;}.ml68{margin-left:68rpx;}.ml69{margin-left:69rpx;}.ml70{margin-left:70rpx;}.pt10{padding-top:10rpx;}.pt11{padding-top:11rpx;}.pt12{padding-top:12rpx;}.pt13{padding-top:13rpx;}.pt14{padding-top:14rpx;}.pt15{padding-top:15rpx;}.pt16{padding-top:16rpx;}.pt17{padding-top:17rpx;}.pt18{padding-top:18rpx;}.pt19{padding-top:19rpx;}.pt20{padding-top:20rpx;}.pt21{padding-top:21rpx;}.pt22{padding-top:22rpx;}.pt23{padding-top:23rpx;}.pt24{padding-top:24rpx;}.pt25{padding-top:25rpx;}.pt26{padding-top:26rpx;}.pt27{padding-top:27rpx;}.pt28{padding-top:28rpx;}.pt29{padding-top:29rpx;}.pt30{padding-top:30rpx;}.pt31{padding-top:31rpx;}.pt32{padding-top:32rpx;}.pt33{padding-top:33rpx;}.pt34{padding-top:34rpx;}.pt35{padding-top:35rpx;}.pt36{padding-top:36rpx;}.pt37{padding-top:37rpx;}.pt38{padding-top:38rpx;}.pt39{padding-top:39rpx;}.pt40{padding-top:40rpx;}.pt41{padding-top:41rpx;}.pt42{padding-top:42rpx;}.pt43{padding-top:43rpx;}.pt44{padding-top:44rpx;}.pt45{padding-top:45rpx;}.pt46{padding-top:46rpx;}.pt47{padding-top:47rpx;}.pt48{padding-top:48rpx;}.pt49{padding-top:49rpx;}.pt50{padding-top:50rpx;}.pt51{padding-top:51rpx;}.pt52{padding-top:52rpx;}.pt53{padding-top:53rpx;}.pt54{padding-top:54rpx;}.pt55{padding-top:55rpx;}.pt56{padding-top:56rpx;}.pt57{padding-top:57rpx;}.pt58{padding-top:58rpx;}.pt59{padding-top:58rpx;}.pt60{padding-top:60rpx;}.pt61{padding-top:61rpx;}.pt62{padding-top:62rpx;}.pt63{padding-top:63rpx;}.pt64{padding-top:64rpx;}.pt65{padding-top:65rpx;}.pt66{padding-top:66rpx;}.pt67{padding-top:67rpx;}.pt68{padding-top:68rpx;}.pt69{padding-top:69rpx;}.pt70{padding-top:70rpx;}.pt100{padding-top:100rpx;}.pb{padding-bottom:5;}.pb10{padding-bottom:10rpx;}.pb11{padding-bottom:11rpx;}.pb12{padding-bottom:12rpx;}.pb13{padding-bottom:13rpx;}.pb14{padding-bottom:14rpx;}.pb15{padding-bottom:15rpx;}.pb16{padding-bottom:16rpx;}.pb17{padding-bottom:17rpx;}.pb18{padding-bottom:18rpx;}.pb19{padding-bottom:19rpx;}.pb20{padding-bottom:20rpx;}.pb21{padding-bottom:21rpx;}.pb22{padding-bottom:22rpx;}.pb23{padding-bottom:23rpx;}.pb24{padding-bottom:24rpx;}.pb25{padding-bottom:25rpx;}.pb26{padding-bottom:26rpx;}.pb27{padding-bottom:27rpx;}.pb28{padding-bottom:28rpx;}.pb29{padding-bottom:29rpx;}.pb30{padding-bottom:30rpx;}.pb31{padding-bottom:31rpx;}.pb32{padding-bottom:32rpx;}.pb33{padding-bottom:33rpx;}.pb34{padding-bottom:34rpx;}.pb35{padding-bottom:35rpx;}.pb36{padding-bottom:36rpx;}.pb37{padding-bottom:37rpx;}.pb38{padding-bottom:38rpx;}.pb39{padding-bottom:39rpx;}.pb40{padding-bottom:40rpx;}.pb41{padding-bottom:41rpx;}.pb42{padding-bottom:42rpx;}.pb43{padding-bottom:43rpx;}.pb44{padding-bottom:44rpx;}.pb45{padding-bottom:45rpx;}.pb46{padding-bottom:46rpx;}.pb47{padding-bottom:47rpx;}.pb48{padding-bottom:48rpx;}.pb49{padding-bottom:49rpx;}.pb50{padding-bottom:50rpx;}.pb51{padding-bottom:51rpx;}.pb52{padding-bottom:52rpx;}.pb53{padding-bottom:53rpx;}.pb54{padding-bottom:54rpx;}.pb55{padding-bottom:55rpx;}.pb56{padding-bottom:56rpx;}.pb57{padding-bottom:57rpx;}.pb58{padding-bottom:58rpx;}.pb59{padding-bottom:58rpx;}.pb60{padding-bottom:60rpx;}.pb61{padding-bottom:61rpx;}.pb62{padding-bottom:62rpx;}.pb63{padding-bottom:63rpx;}.pb64{padding-bottom:64rpx;}.pb65{padding-bottom:65rpx;}.pb66{padding-bottom:66rpx;}.pb67{padding-bottom:67rpx;}.pb68{padding-bottom:68rpx;}.pb69{padding-bottom:69rpx;}.pb70{padding-bottom:70rpx;}.pr10{padding-right:10rpx;}.pr11{padding-right:11rpx;}.pr12{padding-right:12rpx;}.pr13{padding-right:13rpx;}.pr14{padding-right:14rpx;}.pr15{padding-right:15rpx;}.pr16{padding-right:16rpx;}.pr17{padding-right:17rpx;}.pr18{padding-right:18rpx;}.pr19{padding-right:19rpx;}.pr20{padding-right:20rpx;}.pr21{padding-right:21rpx;}.pr22{padding-right:22rpx;}.pr23{padding-right:23rpx;}.pr24{padding-right:24rpx;}.pr25{padding-right:25rpx;}.pr26{padding-right:26rpx;}.pr27{padding-right:27rpx;}.pr28{padding-right:28rpx;}.pr29{padding-right:29rpx;}.pr30{padding-right:30rpx;}.pr31{padding-right:31rpx;}.pr32{padding-right:32rpx;}.pr33{padding-right:33rpx;}.pr34{padding-right:34rpx;}.pr35{padding-right:35rpx;}.pr36{padding-right:36rpx;}.pr37{padding-right:37rpx;}.pr38{padding-right:38rpx;}.pr39{padding-right:39rpx;}.pr40{padding-right:40rpx;}.pr41{padding-right:41rpx;}.pr42{padding-right:42rpx;}.pr43{padding-right:43rpx;}.pr44{padding-right:44rpx;}.pr45{padding-right:45rpx;}.pr46{padding-right:46rpx;}.pr47{padding-right:47rpx;}.pr48{padding-right:48rpx;}.pr49{padding-right:49rpx;}.pr50{padding-right:50rpx;}.pr51{padding-right:51rpx;}.pr52{padding-right:52rpx;}.pr53{padding-right:53rpx;}.pr54{padding-right:54rpx;}.pr55{padding-right:55rpx;}.pr56{padding-right:56rpx;}.pr57{padding-right:57rpx;}.pr58{padding-right:58rpx;}.pr59{padding-right:58rpx;}.pr60{padding-right:60rpx;}.pr61{padding-right:61rpx;}.pr62{padding-right:62rpx;}.pr63{padding-right:63rpx;}.pr64{padding-right:64rpx;}.pr65{padding-right:65rpx;}.pr66{padding-right:66rpx;}.pr67{padding-right:67rpx;}.pr68{padding-right:68rpx;}.pr69{padding-right:69rpx;}.pr70{padding-right:70rpx;}.pl10{padding-left:10rpx;}.pl11{padding-left:11rpx;}.pl12{padding-left:12rpx;}.pl13{padding-left:13rpx;}.pl14{padding-left:14rpx;}.pl15{padding-left:15rpx;}.pl16{padding-left:16rpx;}.pl17{padding-left:17rpx;}.pl18{padding-left:18rpx;}.pl19{padding-left:19rpx;}.pl20{padding-left:20rpx;}.pl21{padding-left:21rpx;}.pl22{padding-left:22rpx;}.pl23{padding-left:23rpx;}.pl24{padding-left:24rpx;}.pl25{padding-left:25rpx;}.pl26{padding-left:26rpx;}.pl27{padding-left:27rpx;}.pl28{padding-left:28rpx;}.pl29{padding-left:29rpx;}.pl30{padding-left:30rpx;}.pl31{padding-left:31rpx;}.pl32{padding-left:32rpx;}.pl33{padding-left:33rpx;}.pl34{padding-left:34rpx;}.pl35{padding-left:35rpx;}.pl36{padding-left:36rpx;}.pl37{padding-left:37rpx;}.pl38{padding-left:38rpx;}.pl39{padding-left:39rpx;}.pl40{padding-left:40rpx;}.pl41{padding-left:41rpx;}.pl42{padding-left:42rpx;}.pl43{padding-left:43rpx;}.pl44{padding-left:44rpx;}.pl45{padding-left:45rpx;}.pl46{padding-left:46rpx;}.pl47{padding-left:47rpx;}.pl48{padding-left:48rpx;}.pl49{padding-left:49rpx;}.pl50{padding-left:50rpx;}.pl51{padding-left:51rpx;}.pl52{padding-left:52rpx;}.pl53{padding-left:53rpx;}.pl54{padding-left:54rpx;}.pl55{padding-left:55rpx;}.pl56{padding-left:56rpx;}.pl57{padding-left:57rpx;}.pl58{padding-left:58rpx;}.pl59{padding-left:58rpx;}.pl60{padding-left:60rpx;}.pl61{padding-left:61rpx;}.pl62{padding-left:62rpx;}.pl63{padding-left:63rpx;}.pl64{padding-left:64rpx;}.pl65{padding-left:65rpx;}.pl66{padding-left:66rpx;}.pl67{padding-left:67rpx;}.pl68{padding-left:68rpx;}.pl69{padding-left:69rpx;}.pl70{padding-left:70rpx;}.top10{top:10rpx;}.top11{top:11rpx;}.top12{top:12rpx;}.top13{top:13rpx;}.top14{top:14rpx;}.top15{top:15rpx;}.top16{top:16rpx;}.top17{top:17rpx;}.top18{top:18rpx;}.top19{top:19rpx;}.top20{top:20rpx;}.top21{top:21rpx;}.top22{top:22rpx;}.top23{top:23rpx;}.top24{top:24rpx;}.top25{top:25rpx;}.top26{top:26rpx;}.top27{top:27rpx;}.top28{top:28rpx;}.top29{top:29rpx;}.top30{top:30rpx;}.top31{top:31rpx;}.top32{top:32rpx;}.top33{top:33rpx;}.top34{top:34rpx;}.top35{top:35rpx;}.top36{top:36rpx;}.top37{top:37rpx;}.top38{top:38rpx;}.top39{top:39rpx;}.top40{top:40rpx;}.top41{top:41rpx;}.top42{top:42rpx;}.top43{top:43rpx;}.top44{top:44rpx;}.top45{top:45rpx;}.top46{top:46rpx;}.top47{top:47rpx;}.top48{top:48rpx;}.top49{top:49rpx;}.top50{top:50rpx;}.top51{top:51rpx;}.top52{top:52rpx;}.top53{top:53rpx;}.top54{top:54rpx;}.top55{top:55rpx;}.top56{top:56rpx;}.top57{top:57rpx;}.top58{top:58rpx;}.top59{top:58rpx;}.top60{top:60rpx;}.top61{top:61rpx;}.top62{top:62rpx;}.top63{top:63rpx;}.top64{top:64rpx;}.top65{top:65rpx;}.top66{top:66rpx;}.top67{top:67rpx;}.top68{top:68rpx;}.top69{top:69rpx;}.top70{top:70rpx;}.bottom10{bottom:10rpx;}.bottom11{bottom:11rpx;}.bottom12{bottom:12rpx;}.bottom13{bottom:13rpx;}.bottom14{bottom:14rpx;}.bottom15{bottom:15rpx;}.bottom16{bottom:16rpx;}.bottom17{bottom:17rpx;}.bottom18{bottom:18rpx;}.bottom19{bottom:19rpx;}.bottom20{bottom:20rpx;}.bottom21{bottom:21rpx;}.bottom22{bottom:22rpx;}.bottom23{bottom:23rpx;}.bottom24{bottom:24rpx;}.bottom25{bottom:25rpx;}.bottom26{bottom:26rpx;}.bottom27{bottom:27rpx;}.bottom28{bottom:28rpx;}.bottom29{bottom:29rpx;}.bottom30{bottom:30rpx;}.bottom31{bottom:31rpx;}.bottom32{bottom:32rpx;}.bottom33{bottom:33rpx;}.bottom34{bottom:34rpx;}.bottom35{bottom:35rpx;}.bottom36{bottom:36rpx;}.bottom37{bottom:37rpx;}.bottom38{bottom:38rpx;}.bottom39{bottom:39rpx;}.bottom40{bottom:40rpx;}.bottom41{bottom:41rpx;}.bottom42{bottom:42rpx;}.bottom43{bottom:43rpx;}.bottom44{bottom:44rpx;}.bottom45{bottom:45rpx;}.bottom46{bottom:46rpx;}.bottom47{bottom:47rpx;}.bottom48{bottom:48rpx;}.bottom49{bottom:49rpx;}.bottom50{bottom:50rpx;}.bottom51{bottom:51rpx;}.bottom52{bottom:52rpx;}.bottom53{bottom:53rpx;}.bottom54{bottom:54rpx;}.bottom55{bottom:55rpx;}.bottom56{bottom:56rpx;}.bottom57{bottom:57rpx;}.bottom58{bottom:58rpx;}.bottom59{bottom:58rpx;}.bottom60{bottom:60rpx;}.bottom61{bottom:61rpx;}.bottom62{bottom:62rpx;}.bottom63{bottom:63rpx;}.bottom64{bottom:64rpx;}.bottom65{bottom:65rpx;}.bottom66{bottom:66rpx;}.bottom67{bottom:67rpx;}.bottom68{bottom:68rpx;}.bottom69{bottom:69rpx;}.bottom70{bottom:70rpx;}.right10{right:10rpx;}.right11{right:11rpx;}.right12{right:12rpx;}.right13{right:13rpx;}.right14{right:14rpx;}.right15{right:15rpx;}.right16{right:16rpx;}.right17{right:17rpx;}.right18{right:18rpx;}.right19{right:19rpx;}.right20{right:20rpx;}.right21{right:21rpx;}.right22{right:22rpx;}.right23{right:23rpx;}.right24{right:24rpx;}.right25{right:25rpx;}.right26{right:26rpx;}.right27{right:27rpx;}.right28{right:28rpx;}.right29{right:29rpx;}.right30{right:30rpx;}.right31{right:31rpx;}.right32{right:32rpx;}.right33{right:33rpx;}.right34{right:34rpx;}.right35{right:35rpx;}.right36{right:36rpx;}.right37{right:37rpx;}.right38{right:38rpx;}.right39{right:39rpx;}.right40{right:40rpx;}.right41{right:41rpx;}.right42{right:42rpx;}.right43{right:43rpx;}.right44{right:44rpx;}.right45{right:45rpx;}.right46{right:46rpx;}.right47{right:47rpx;}.right48{right:48rpx;}.right49{right:49rpx;}.right50{right:50rpx;}.right51{right:51rpx;}.right52{right:52rpx;}.right53{right:53rpx;}.right54{right:54rpx;}.right55{right:55rpx;}.right56{right:56rpx;}.right57{right:57rpx;}.right58{right:58rpx;}.right59{right:58rpx;}.right60{right:60rpx;}.right61{right:61rpx;}.right62{right:62rpx;}.right63{right:63rpx;}.right64{right:64rpx;}.right65{right:65rpx;}.right66{right:66rpx;}.right67{right:67rpx;}.right68{right:68rpx;}.right69{right:69rpx;}.right70{right:70rpx;}.left10{left:10rpx;}.left11{left:11rpx;}.left12{left:12rpx;}.left13{left:13rpx;}.left14{left:14rpx;}.left15{left:15rpx;}.left16{left:16rpx;}.left17{left:17rpx;}.left18{left:18rpx;}.left19{left:19rpx;}.left20{left:20rpx;}.left21{left:21rpx;}.left22{left:22rpx;}.left23{left:23rpx;}.left24{left:24rpx;}.left25{left:25rpx;}.left26{left:26rpx;}.left27{left:27rpx;}.left28{left:28rpx;}.left29{left:29rpx;}.left30{left:30rpx;}.left31{left:31rpx;}.left32{left:32rpx;}.left33{left:33rpx;}.left34{left:34rpx;}.left35{left:35rpx;}.left36{left:36rpx;}.left37{left:37rpx;}.left38{left:38rpx;}.left39{left:39rpx;}.left40{left:40rpx;}.left41{left:41rpx;}.left42{left:42rpx;}.left43{left:43rpx;}.left44{left:44rpx;}.left45{left:45rpx;}.left46{left:46rpx;}.left47{left:47rpx;}.left48{left:48rpx;}.left49{left:49rpx;}.left50{left:50rpx;}.left51{left:51rpx;}.left52{left:52rpx;}.left53{left:53rpx;}.left54{left:54rpx;}.left55{left:55rpx;}.left56{left:56rpx;}.left57{left:57rpx;}.left58{left:58rpx;}.left59{left:58rpx;}.left60{left:60rpx;}.left61{left:61rpx;}.left62{left:62rpx;}.left63{left:63rpx;}.left64{left:64rpx;}.left65{left:65rpx;}.left66{left:66rpx;}.left67{left:67rpx;}.left68{left:68rpx;}.left69{left:69rpx;}.left70{left:70rpx;}
