Commit 085ffd1349ba84a6952f215e3f5d8bd2bbeb6347
1 parent
1482b39a
分销首页放在主包
Showing
4 changed files
with
554 additions
and
0 deletions
pages/distribution/distribution.js
0 → 100644
| 1 | +// packageA//pages/distribution/main/main.js | ||
| 2 | +const app = getApp(); | ||
| 3 | +let self = null; | ||
| 4 | + | ||
| 5 | +Page({ | ||
| 6 | + | ||
| 7 | + /** | ||
| 8 | + * 页面的初始数据 | ||
| 9 | + */ | ||
| 10 | + data: { | ||
| 11 | + | ||
| 12 | + }, | ||
| 13 | + | ||
| 14 | + /** | ||
| 15 | + * 生命周期函数--监听页面加载 | ||
| 16 | + */ | ||
| 17 | + onLoad: function (options) { | ||
| 18 | + self = this;//保存全局指针 | ||
| 19 | + | ||
| 20 | + app.isLogin().then(function(data) {//进入页面前已经授权登录成功 | ||
| 21 | + self.setData({ | ||
| 22 | + userInfo: data, | ||
| 23 | + }); | ||
| 24 | + }); | ||
| 25 | + | ||
| 26 | + }, | ||
| 27 | + | ||
| 28 | + /** | ||
| 29 | + * 生命周期函数--监听页面初次渲染完成 | ||
| 30 | + */ | ||
| 31 | + onReady: function () { | ||
| 32 | + | ||
| 33 | + }, | ||
| 34 | + | ||
| 35 | + /** | ||
| 36 | + * 生命周期函数--监听页面显示 | ||
| 37 | + */ | ||
| 38 | + onShow: function () { | ||
| 39 | + console.log('onshow'); | ||
| 40 | + let url = '/api/weshop/users/distribut/getMoney'; | ||
| 41 | + if(app.globalData.userInfo) { | ||
| 42 | + if(!this.data.isLogin) { | ||
| 43 | + this.setData({ | ||
| 44 | + userInfo: app.globalData.userInfo, | ||
| 45 | + imghost: app.globalData.setting.imghost, | ||
| 46 | + isLogin: true, | ||
| 47 | + }); | ||
| 48 | + | ||
| 49 | + // 请求数据 | ||
| 50 | + app.request.get(url + '/' + this.data.userInfo.store_id + '/' + this.data.userInfo.user_id, { | ||
| 51 | + success: function(res) { | ||
| 52 | + console.log('success~~`', self.data.userInfo); | ||
| 53 | + if(res.data.code == 0){ | ||
| 54 | + | ||
| 55 | + self.setData({ | ||
| 56 | + data: res.data.data, | ||
| 57 | + }); | ||
| 58 | + | ||
| 59 | + } else { | ||
| 60 | + // if(!res.data.data.is_distribut) {//如果不是分销商:0不是，1是 | ||
| 61 | + | ||
| 62 | + app.request.promiseGet('/api/weshop/users/distribut/getIsDistribut', { | ||
| 63 | + data: { | ||
| 64 | + storeId: self.data.userInfo.store_id, | ||
| 65 | + userId: self.data.userInfo.user_id, | ||
| 66 | + first_leader: self.data.userInfo.first_leader, | ||
| 67 | + }, | ||
| 68 | + isShowLoading: true, | ||
| 69 | + }).then(function(res) { | ||
| 70 | + console.log('!!!===>', res); | ||
| 71 | + self.setData({ | ||
| 72 | + fenxiao: res.data.data, | ||
| 73 | + }); | ||
| 74 | + }); | ||
| 75 | + | ||
| 76 | + // }; | ||
| 77 | + }; | ||
| 78 | + }, | ||
| 79 | + | ||
| 80 | + }); | ||
| 81 | + | ||
| 82 | + | ||
| 83 | + }; | ||
| 84 | + }; | ||
| 85 | + | ||
| 86 | + | ||
| 87 | + }, | ||
| 88 | + | ||
| 89 | + /** | ||
| 90 | + * 生命周期函数--监听页面隐藏 | ||
| 91 | + */ | ||
| 92 | + onHide: function () { | ||
| 93 | + | ||
| 94 | + }, | ||
| 95 | + | ||
| 96 | + /** | ||
| 97 | + * 生命周期函数--监听页面卸载 | ||
| 98 | + */ | ||
| 99 | + onUnload: function () { | ||
| 100 | + | ||
| 101 | + }, | ||
| 102 | + | ||
| 103 | + /** | ||
| 104 | + * 页面相关事件处理函数--监听用户下拉动作 | ||
| 105 | + */ | ||
| 106 | + onPullDownRefresh: function () { | ||
| 107 | + | ||
| 108 | + }, | ||
| 109 | + | ||
| 110 | + /** | ||
| 111 | + * 页面上拉触底事件的处理函数 | ||
| 112 | + */ | ||
| 113 | + onReachBottom: function () { | ||
| 114 | + | ||
| 115 | + }, | ||
| 116 | + | ||
| 117 | + /** | ||
| 118 | + * 用户点击右上角分享 | ||
| 119 | + */ | ||
| 120 | + onShareAppMessage: function () { | ||
| 121 | + | ||
| 122 | + }, | ||
| 123 | + | ||
| 124 | + /** | ||
| 125 | + * 点击跳转 | ||
| 126 | + */ | ||
| 127 | + goto(e) { | ||
| 128 | + let url = ''; | ||
| 129 | + if(e.target.dataset.url) { | ||
| 130 | + url = e.target.dataset.url; | ||
| 131 | + } else { | ||
| 132 | + url = e.currentTarget.dataset.url; | ||
| 133 | + } | ||
| 134 | + console.log(url); | ||
| 135 | + app.goto(url); | ||
| 136 | + }, | ||
| 137 | + | ||
| 138 | + | ||
| 139 | + | ||
| 140 | + /** | ||
| 141 | + * 获取输入框 | ||
| 142 | + */ | ||
| 143 | + getInput(e) { | ||
| 144 | + this.setData({ | ||
| 145 | + inputValue: e.detail.value, | ||
| 146 | + }); | ||
| 147 | + }, | ||
| 148 | + | ||
| 149 | + | ||
| 150 | + /** | ||
| 151 | + * 验证 | ||
| 152 | + */ | ||
| 153 | + verify(e) { | ||
| 154 | + let pass = e.target.dataset.pass; | ||
| 155 | + let mobile = 0; | ||
| 156 | + if(this.data.inputValue) { | ||
| 157 | + mobile = this.data.inputValue; | ||
| 158 | + if(!pass) { | ||
| 159 | + app.request.put('/api/weshop/users/distribut/updateUserRecommender', { | ||
| 160 | + data: { | ||
| 161 | + storeId: self.data.userInfo.store_id, | ||
| 162 | + userId: self.data.userInfo.user_id, | ||
| 163 | + mobile: mobile, | ||
| 164 | + }, | ||
| 165 | + success: function (res) { | ||
| 166 | + if(res.code = -1) { | ||
| 167 | + wx.showToast({ | ||
| 168 | + title: res.data.msg, | ||
| 169 | + icon: 'none', | ||
| 170 | + duration: 2000 | ||
| 171 | + }); | ||
| 172 | + }; | ||
| 173 | + console.log('!!!===>', res); | ||
| 174 | + | ||
| 175 | + if(res.data.msg == '绑定上下级关系成功！') { | ||
| 176 | + app.request.promiseGet('/api/weshop/users/distribut/getIsDistribut', { | ||
| 177 | + data: { | ||
| 178 | + storeId: self.data.userInfo.store_id, | ||
| 179 | + userId: self.data.userInfo.user_id, | ||
| 180 | + first_leader: self.data.userInfo.first_leader, | ||
| 181 | + }, | ||
| 182 | + isShowLoading: true, | ||
| 183 | + }).then(function(res) { | ||
| 184 | + console.log('!!!===>', res); | ||
| 185 | + self.setData({ | ||
| 186 | + fenxiao: res.data.data, | ||
| 187 | + }); | ||
| 188 | + }); | ||
| 189 | + }; | ||
| 190 | + | ||
| 191 | + } | ||
| 192 | + }); | ||
| 193 | + | ||
| 194 | + } | ||
| 195 | + } else { | ||
| 196 | + wx.showToast({ | ||
| 197 | + title: '手机号码不能为空', | ||
| 198 | + icon: 'none', | ||
| 199 | + duration: 2000 | ||
| 200 | + }); | ||
| 201 | + }; | ||
| 202 | + | ||
| 203 | + }, | ||
| 204 | +}) | ||
| 0 | \ No newline at end of file | 205 | \ No newline at end of file |
pages/distribution/distribution.json
0 → 100644
pages/distribution/distribution.wxml
0 → 100644
| 1 | +<wxs src="../../utils/filter.wxs" module="filter"></wxs> | ||
| 2 | +<view class="main"> | ||
| 3 | + <!-- 头像 --> | ||
| 4 | + <view class="avatar-container t-c pdv40"> | ||
| 5 | + <view class="pdb20"> | ||
| 6 | + <image class="avatar" src="{{userInfo.head_pic}}"/> | ||
| 7 | + </view> | ||
| 8 | + <view class="fs26"><text class="nickname">{{filter.show_default(userInfo.nickname)}}</text></view> | ||
| 9 | + </view> | ||
| 10 | + <!-- 金额 --> | ||
| 11 | + <view> | ||
| 12 | + <view class="flex ai-center jc_sb pd2622 bdb arrow-r" bindtap="goto"> | ||
| 13 | + <view><text class="iconfont icon-jine pdr10 ctb"></text>可提现金额</view> | ||
| 14 | + <view class="ctb money" data-url="/pages/user/member/menber">{{filter.show_default(data.liudong_money)}}</view> | ||
| 15 | + </view> | ||
| 16 | + | ||
| 17 | + <view class="flex jc_sa t-c"> | ||
| 18 | + <view class="pd20 f1"> | ||
| 19 | + <view class="money fs40">{{filter.show_default(data.today_money)}}</view> | ||
| 20 | + <view class="fs24 pdt10 cb">今日收入</view> | ||
| 21 | + </view> | ||
| 22 | + <view class="pd20 f1"> | ||
| 23 | + <view class="money fs40">{{filter.show_default(data.sales_volume)}}</view> | ||
| 24 | + <view class="fs24 pdt10 cb">总销售额</view> | ||
| 25 | + </view> | ||
| 26 | + <view class="pd20 f1"> | ||
| 27 | + <view class="money fs40">{{filter.show_default(data.distribut_money)}}</view> | ||
| 28 | + <view class="fs24 pdt10 cb">累计佣金</view> | ||
| 29 | + </view> | ||
| 30 | + </view> | ||
| 31 | + </view> | ||
| 32 | + <!-- 商品 --> | ||
| 33 | + <view class="flex t-c mgv20 fs30" bindtap="goto"> | ||
| 34 | + <view class="f1 pd20 line" data-url="/packageA/pages/distribution/goods/goods?index=0"><text class="iconfont icon-shangjia pdr10 cf79"></text>上架商品</view> | ||
| 35 | + <view class="f1 pd20" data-url="/packageA/pages/distribution/goods/goods?index=1"><text class="iconfont icon-xiajia pdr10 c29f"></text>下架商品</view> | ||
| 36 | + </view> | ||
| 37 | + <!-- 图标列表 --> | ||
| 38 | + <view class="flex wrap pdv20"> | ||
| 39 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/order/order"> | ||
| 40 | + <view class="circle bgBlue"><text class="iconfont icon-order fs40"></text></view> | ||
| 41 | + <view class="fs24 pdt10">分销订单</view> | ||
| 42 | + </view> | ||
| 43 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/rank/rank"> | ||
| 44 | + <view class="circle bgRed"><text class="iconfont icon-paihangbang fs40"></text></view> | ||
| 45 | + <view class="fs24 pdt10">分销排行</view> | ||
| 46 | + </view> | ||
| 47 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/myteam/myteam"> | ||
| 48 | + <view class="circle bgPink"><text class="iconfont icon-tuandui fs40"></text></view> | ||
| 49 | + <view class="fs24 pdt10">我的团队</view> | ||
| 50 | + </view> | ||
| 51 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/commision/commision"> | ||
| 52 | + <view class="circle bgRed"><text class="iconfont icon-yongjin fs40"></text></view> | ||
| 53 | + <view class="fs24 pdt10">佣金明细</view> | ||
| 54 | + </view> | ||
| 55 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/card/card"> | ||
| 56 | + <view class="circle bgPurple"><text class="iconfont icon-mingpian fs40"></text></view> | ||
| 57 | + <view class="fs24 pdt10">我的名片</view> | ||
| 58 | + </view> | ||
| 59 | + <view class="pd20 t-c w25"> | ||
| 60 | + <view class="circle bgYellow" bindtap="goto" data-url="/pages/user/index/index"><text class="iconfont icon-huiyuan fs40"></text></view> | ||
| 61 | + <view class="fs24 pdt10">会员中心</view> | ||
| 62 | + </view> | ||
| 63 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/shop/shop"> | ||
| 64 | + <view class="circle bgBlue"><text class="iconfont icon-shop fs40"></text></view> | ||
| 65 | + <view class="fs24 pdt10">我的小店</view> | ||
| 66 | + </view> | ||
| 67 | + <view class="pd20 t-c w25" bindtap="goto" data-url="/packageA/pages/distribution/rookie/rookie"> | ||
| 68 | + <view class="circle bgGreen"><text class="iconfont icon-xinshouyindao fs40"></text></view> | ||
| 69 | + <view class="fs24 pdt10">新手必看</view> | ||
| 70 | + </view> | ||
| 71 | + </view> | ||
| 72 | + <!-- 分销商验证 --> | ||
| 73 | + <!-- <view class="popup" wx:if="{{!1}}"> --> | ||
| 74 | + <view class="popup" wx:if="{{!data.is_distribut}}"> | ||
| 75 | + <view class="t-c pd20 title">分销规则说明<text class="iconfont icon-close" bindtap="goto" data-url="/pages/user/index/index"></text></view> | ||
| 76 | + <!-- <view class="t-c pd20 title">分销规则说明</view> --> | ||
| 77 | + <view wx:if="{{fenxiao}}"> | ||
| 78 | + <block wx:for="{{fenxiao}}"> | ||
| 79 | + <view class="item" wx:if="{{item.type == 1}}"> | ||
| 80 | + <view class="left f1"> | ||
| 81 | + <view class="icon-container"><text class="iconfont icon-huiyuan1"></text></view> | ||
| 82 | + <view>仅限PLUS卡({{item.conditonRemark}})的会员, <text class="c-red" bindtap="goto" data-url="/pages/user/cardinfo/cardinfo">立即升级</text></view> | ||
| 83 | + </view> | ||
| 84 | + <text class="iconfont {{item.pass ? 'icon-yes c-red':'icon-yuanquan c-c7'}}"></text> | ||
| 85 | + </view> | ||
| 86 | + <view class="item" wx:if="{{item.type == 2}}"> | ||
| 87 | + <view class="left f1"> | ||
| 88 | + <view class="icon-container"><text class="iconfont icon-renzheng"></text></view> | ||
| 89 | + <view class="flex ali-c"> | ||
| 90 | + <input class="bg-f0 pdh10 input" type="number" value="{{item.inviter ? item.inviter:''}}" placeholder="请输入推荐人手机号码" disabled="{{item.pass}}" bindinput="getInput"/> | ||
| 91 | + <view class="verify" wx:if="{{!item.pass}}" bindtap="verify" data-pass="{{item.pass}}">验证</view> | ||
| 92 | + </view> | ||
| 93 | + </view> | ||
| 94 | + <text class="iconfont {{item.pass ? 'icon-yes c-red':'icon-yuanquan c-c7'}}"></text> | ||
| 95 | + </view> | ||
| 96 | + <view class="item" wx:if="{{item.type == 3}}"> | ||
| 97 | + <view class="left f1"> | ||
| 98 | + <view class="icon-container"><text class="iconfont icon-gouwu"></text></view> | ||
| 99 | + <text>{{item.conditonRemark}}</text> | ||
| 100 | + </view> | ||
| 101 | + <text class="iconfont {{item.pass ? 'icon-yes c-red':'icon-yuanquan c-c7'}}"></text> | ||
| 102 | + </view> | ||
| 103 | + </block> | ||
| 104 | + <view class="item" data-url="1"> | ||
| 105 | + <view class="left f1"> | ||
| 106 | + <view class="icon-container"><text class="iconfont icon-yongjin"></text></view> | ||
| 107 | + <text>成功成为分销商,分享商品给好友即可获得相应收益</text> | ||
| 108 | + </view> | ||
| 109 | + </view> | ||
| 110 | + | ||
| 111 | + </view> | ||
| 112 | + <view class="t-c pd20 fs30 bdt co-red bold" bindtap="goto" data-url="/pages/index/index/index">去购买</view> | ||
| 113 | + <!-- <view class="t-c pd20 fs30 bdt co-red bold">确定</view> --> | ||
| 114 | + </view> | ||
| 115 | + <!-- 遮罩 --> | ||
| 116 | + <!-- <view class="mask" wx:if="{{!1}}"></view> --> | ||
| 117 | + <view class="mask" wx:if="{{!data.is_distribut}}"></view> | ||
| 118 | +</view> | ||
| 119 | + |
pages/distribution/distribution.wxss
0 → 100644
| 1 | +page { | ||
| 2 | + background-color: #f4f4f4; | ||
| 3 | +} | ||
| 4 | + | ||
| 5 | +.main > view { | ||
| 6 | + background-color: white; | ||
| 7 | +} | ||
| 8 | + | ||
| 9 | +.avatar-container { | ||
| 10 | + padding-top: 60rpx; | ||
| 11 | + padding-bottom: 60rpx; | ||
| 12 | + background: url(https://mshopimg.yolipai.net/miniapp/images/user_index_powder.jpg) no-repeat 100% 100%; | ||
| 13 | + /* background-size: 100%; */ | ||
| 14 | +} | ||
| 15 | + | ||
| 16 | +.avatar { | ||
| 17 | + width: 160rpx; | ||
| 18 | + height: 160rpx; | ||
| 19 | + border-radius: 50%; | ||
| 20 | + background-color: #eee; | ||
| 21 | +} | ||
| 22 | + | ||
| 23 | +.nickname { | ||
| 24 | + display: inline-block; | ||
| 25 | + background-color: rgba(0,0,0,.5); | ||
| 26 | + padding: 4rpx 20rpx; | ||
| 27 | + color: white; | ||
| 28 | + border-radius: 24rpx; | ||
| 29 | +} | ||
| 30 | + | ||
| 31 | +.pd2622 { | ||
| 32 | + padding: 20rpx 60rpx 20rpx 20rpx; | ||
| 33 | +} | ||
| 34 | + | ||
| 35 | +.money::before { | ||
| 36 | + content: '￥'; | ||
| 37 | + font-size: 24rpx; | ||
| 38 | +} | ||
| 39 | + | ||
| 40 | +/* .bdb { | ||
| 41 | + border-bottom: 2rpx solid #f8f8f8; | ||
| 42 | +} */ | ||
| 43 | + | ||
| 44 | +.arrow-r { | ||
| 45 | + /* display: relative; */ | ||
| 46 | +} | ||
| 47 | + | ||
| 48 | +.arrow-r::after { | ||
| 49 | + font-family: iconfont; | ||
| 50 | + content: '\e61f'; | ||
| 51 | + position: absolute; | ||
| 52 | + right: 20rpx; | ||
| 53 | + color: #ddd; | ||
| 54 | +} | ||
| 55 | +.line { | ||
| 56 | + position: relative; | ||
| 57 | +} | ||
| 58 | +.line::after { | ||
| 59 | + content: ''; | ||
| 60 | + position: absolute; | ||
| 61 | + right: 0; | ||
| 62 | + background-color: #f8f8f8; | ||
| 63 | + width: 2rpx; | ||
| 64 | + height: 30rpx; | ||
| 65 | + top: 50%; | ||
| 66 | + transform: translateY(-50%); | ||
| 67 | +} | ||
| 68 | + | ||
| 69 | +.circle { | ||
| 70 | + width: 80rpx; | ||
| 71 | + height: 80rpx; | ||
| 72 | + line-height: 80rpx; | ||
| 73 | + border-radius: 50%; | ||
| 74 | + color: white; | ||
| 75 | + margin: 0 auto; | ||
| 76 | + background-color: red; | ||
| 77 | +} | ||
| 78 | + | ||
| 79 | +.fs40 { | ||
| 80 | + font-size: 40rpx; | ||
| 81 | +} | ||
| 82 | + | ||
| 83 | + | ||
| 84 | +.bgBlue { | ||
| 85 | + background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%); | ||
| 86 | +} | ||
| 87 | +.bgPink { | ||
| 88 | + background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%); | ||
| 89 | +} | ||
| 90 | +.bgRed { | ||
| 91 | + background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%); | ||
| 92 | +} | ||
| 93 | +.bgYellow { | ||
| 94 | + background-image: linear-gradient(120deg, #f6d365 0%, #fda085 100%); | ||
| 95 | +} | ||
| 96 | +.bgGreen { | ||
| 97 | + background-image: linear-gradient(120deg, #d4fc79 0%, #96e6a1 100%); | ||
| 98 | +} | ||
| 99 | +.bgPurple { | ||
| 100 | + background-image: linear-gradient(to top, #9795f0 0%, #fbc8d4 100%); | ||
| 101 | +} | ||
| 102 | + | ||
| 103 | +.mask { | ||
| 104 | + position: fixed; | ||
| 105 | + top: 0; | ||
| 106 | + left: 0; | ||
| 107 | + width: 100%; | ||
| 108 | + height: 100%; | ||
| 109 | + background-color: rgba(0,0,0,.5) !important; | ||
| 110 | +} | ||
| 111 | + | ||
| 112 | +.popup { | ||
| 113 | + position: fixed; | ||
| 114 | + z-index: 1; | ||
| 115 | + top: 50%; | ||
| 116 | + left: 50%; | ||
| 117 | + transform: translate(-50%, -50%); | ||
| 118 | + width: 90%; | ||
| 119 | + border-radius: 12rpx; | ||
| 120 | + overflow: hidden; | ||
| 121 | +} | ||
| 122 | + | ||
| 123 | +.icon-container { | ||
| 124 | + border-radius: 50%; | ||
| 125 | + background-color: #FCEA0D; | ||
| 126 | + width: 50rpx; | ||
| 127 | + line-height: 50rpx; | ||
| 128 | + height: 50rpx; | ||
| 129 | + text-align: center; | ||
| 130 | + font-size: 28rpx !important; | ||
| 131 | + margin-right: 10rpx; | ||
| 132 | + flex-shrink: 0; | ||
| 133 | +} | ||
| 134 | + | ||
| 135 | +.item { | ||
| 136 | + padding: 20rpx; | ||
| 137 | + display: flex; | ||
| 138 | + align-items: center; | ||
| 139 | + font-size: 26rpx; | ||
| 140 | + position: relative; | ||
| 141 | +} | ||
| 142 | + | ||
| 143 | +.title { | ||
| 144 | + background-image: linear-gradient( 135deg, #FF6768 10%, #EA5455 100%); | ||
| 145 | + color: white; | ||
| 146 | + font-size: 28rpx; | ||
| 147 | + position: relative; | ||
| 148 | +} | ||
| 149 | + | ||
| 150 | +.icon-close { | ||
| 151 | + position: absolute; | ||
| 152 | + right: 20rpx; | ||
| 153 | + color: white; | ||
| 154 | +} | ||
| 155 | + | ||
| 156 | +.verify { | ||
| 157 | + color: white; | ||
| 158 | + background-color: #FF6768; | ||
| 159 | + padding: 0 20rpx; | ||
| 160 | + border-radius: 6rpx; | ||
| 161 | + display: flex; | ||
| 162 | + align-items: center; | ||
| 163 | + margin-left: 10rpx; | ||
| 164 | +} | ||
| 165 | + | ||
| 166 | +.input { | ||
| 167 | + border-radius: 6rpx; | ||
| 168 | + height: 50rpx; | ||
| 169 | +} | ||
| 170 | + | ||
| 171 | +.item ~ .item .left::before { | ||
| 172 | + content: ''; | ||
| 173 | + position: absolute; | ||
| 174 | + left: 45rpx; | ||
| 175 | + top: -45rpx; | ||
| 176 | + width: 2rpx; | ||
| 177 | + height: 100%; | ||
| 178 | + background: linear-gradient(to bottom, #eee, #eee 8rpx, transparent 8rpx, transparent); | ||
| 179 | + background-size: 100% 16rpx; | ||
| 180 | + z-index: -1; | ||
| 181 | +} | ||
| 182 | + | ||
| 183 | +.left { | ||
| 184 | + display: flex; | ||
| 185 | + align-items: center; | ||
| 186 | + padding-right: 20rpx; | ||
| 187 | +} | ||
| 188 | + | ||
| 189 | + | ||
| 190 | +/*checkbox 整体大小 */ | ||
| 191 | +checkbox { | ||
| 192 | + /* width: 240rpx; | ||
| 193 | + height: 90rpx; */ | ||
| 194 | +} | ||
| 195 | +/*checkbox 选项框大小 */ | ||
| 196 | +checkbox .wx-checkbox-input { | ||
| 197 | + width: 34rpx; | ||
| 198 | + height: 34rpx; | ||
| 199 | + border-radius: 50%; | ||
| 200 | + | ||
| 201 | +} | ||
| 202 | +/*checkbox选中后样式 */ | ||
| 203 | +checkbox .wx-checkbox-input.wx-checkbox-input-checked { | ||
| 204 | + background-color: #FF6768; | ||
| 205 | + border-color: #FF6768; | ||
| 206 | + /* color: white; */ | ||
| 207 | +} | ||
| 208 | +/*checkbox选中后图标样式 */ | ||
| 209 | +checkbox .wx-checkbox-input.wx-checkbox-input-checked::before { | ||
| 210 | + width: 34rpx; | ||
| 211 | + height: 34rpx; | ||
| 212 | + line-height: 34rpx; | ||
| 213 | + text-align: center; | ||
| 214 | + font-size: 24rpx; | ||
| 215 | + color: #fff; | ||
| 216 | + background: transparent; | ||
| 217 | + transform: translate(-50%, -50%) scale(1); | ||
| 218 | + -webkit-transform: translate(-50%, -50%) scale(1); | ||
| 219 | +} | ||
| 220 | + | ||
| 221 | +.item:not(:last-of-type) { | ||
| 222 | + display: flex; | ||
| 223 | + justify-content: space-between; | ||
| 224 | +} | ||
| 225 | + | ||
| 226 | + |