| | |
| | | <text class="nav-title">门店钱包</text> |
| | | </view> |
| | | </view> |
| | | <view class="page-content"> |
| | | <text>钱包页面</text> |
| | | <view class="data"> |
| | | <view class="hezi"> |
| | | <view class="hezi-a"> |
| | | <text style="margin-right: 10rpx; ">账户余额(元)</text> |
| | | <u-icon v-if="showMoney" name="eye" color="#ffffff" size="18" @click="showMoney = !showMoney"></u-icon> |
| | | <u-icon v-if="!showMoney" name="eye-off" color="#eeeeee" size="18" @click="showMoney = !showMoney"></u-icon> |
| | | </view> |
| | | <view class="hezi-b"> |
| | | <view class="hezi-b-price"> |
| | | <text v-if="showMoney">{{(countData.balance / 100 || 0).toFixed(2)}}</text> |
| | | <text v-if="showMoney"></text> |
| | | <text v-if="!showMoney">****</text> |
| | | </view> |
| | | <view class="hezi-b-btn" @click="jumpWithdraw">提现</view> |
| | | </view> |
| | | <view class="hezi-c"> |
| | | <view class="hezi-c-item"> |
| | | <text class="hezi-c-item-title">待结算(元)</text> |
| | | <view class="hezi-c-item-price"> |
| | | <text v-if="showMoney">{{(countData.pendingAmount / 100 || 0).toFixed(2)}}</text> |
| | | <text v-if="showMoney"></text> |
| | | <text v-if="!showMoney">****</text> |
| | | </view> |
| | | </view> |
| | | <view class="hezi-c-item"> |
| | | <text class="hezi-c-item-title">累计提现(元)</text> |
| | | <view class="hezi-c-item-price"> |
| | | <text v-if="showMoney">{{(countData.totalWithdrawn / 100 || 0).toFixed(2)}}</text> |
| | | <text v-if="showMoney"></text> |
| | | <text v-if="!showMoney">****</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view class="tx"> |
| | | <text v-if="showMoney">提现中:¥{{(countData.withdrawingAmount / 100 || 0).toFixed(2)}}</text> |
| | | <text v-if="!showMoney">提现中:****</text> |
| | | </view> |
| | | </view> |
| | | <view class="box-list"> |
| | | <view class="item"> |
| | | <view class="item-date"> |
| | | <view class="item-date-top"> |
| | | <view class="item-date-top-left" @click="show1 = true"> |
| | | <text>{{startDate || defaultStartDate}} 至 {{endDate || defaultEndDate}}</text> |
| | | <u-icon name="arrow-down" color="#222222" size="13"></u-icon> |
| | | </view> |
| | | <view class="sele" :style="'width:'+wordsWidth+'rpx;'" @click="openShow()"> |
| | | <text>{{words}}</text> |
| | | <u-icon name="arrow-down" color="#222222" size="16"></u-icon> |
| | | </view> |
| | | </view> |
| | | <view class="item-date-bottom"> |
| | | <text>收入:¥{{(countDataList.totalIncome || 0).toFixed(2)}}</text> |
| | | <text>支出:¥{{(countDataList.totalExpense || 0).toFixed(2)}}</text> |
| | | </view> |
| | | </view> |
| | | <view class="item-list"> |
| | | <view class="item-list-item" v-for="(item, index) in dataList" :key="index" @click="jumpDetail(item)"> |
| | | <view class="image"> |
| | | <image v-if="item.type === 0" src="/static/icon/ic_shouru@2x.png" mode="widthFix"></image> |
| | | <image v-if="item.type === 1" src="/static/icon/ic_tixian@2x.png" mode="widthFix"></image> |
| | | <image v-if="item.type === 2" src="/static/icon/ic_tuikuan@2x.png" mode="widthFix"></image> |
| | | </view> |
| | | <view class="info"> |
| | | <view class="info"> |
| | | <view class="info-a"> |
| | | <view class="info-a-label"> |
| | | {{item.type === 0 ? '完成订单' : item.type === 1 ? '提现支出' : item.type === 2 ? '提现退回' : ''}} |
| | | <template v-if="item.type === 1"> |
| | | <text style="color: #FF0020;" v-if="item.withdrawStatus == 2">未通过</text> |
| | | <text style="color: #004096" v-else-if="item.withdrawStatus == 1">已通过</text> |
| | | <text style="color: #FF0020;" v-else>审核中</text> |
| | | </template> |
| | | </view> |
| | | <view class="info-a-price"> |
| | | <text>{{item.type==1?'-':'+'}}{{(item.num ||0).toFixed(2)}}</text> |
| | | <text></text> |
| | | </view> |
| | | </view> |
| | | <view class="info-b"> |
| | | <text>订单编号:{{item.orderNo || ''}}</text> |
| | | </view> |
| | | <view class="info-b"> |
| | | <text>{{item.createTime || ''}}</text> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <view v-if="!hasNext" class="nomore">已加载全部</view> |
| | | </view> |
| | | </view> |
| | | </view> |
| | | <!-- 筛选 --> |
| | | <u-popup :show="show" mode="bottom" :safeAreaInsetBottom="false" round="15" :closeable="true" @close="show = false"> |
| | | <view class="sear"> |
| | | <view class="sear-title">筛选</view> |
| | | <view class="sear-item"> |
| | | <view class="sear-item-label">收支类型</view> |
| | | <view class="sear-item-list"> |
| | | <view @click="checkActive(0)" :class="tempActive == 0?'sear-item-list-item active':'sear-item-list-item'">全部</view> |
| | | <view @click="checkActive(1)" :class="tempActive == 1?'sear-item-list-item active':'sear-item-list-item'">收入</view> |
| | | <view @click="checkActive(2)" :class="tempActive == 2?'sear-item-list-item active':'sear-item-list-item'">支出</view> |
| | | <view style="width: 216rpx; height: 0;"></view> |
| | | </view> |
| | | </view> |
| | | <view class="sear-item"> |
| | | <view class="sear-item-label">交易类型</view> |
| | | <view class="sear-item-list"> |
| | | <view @click="checkType(0)" :class="tempType == 0?'sear-item-list-item active':'sear-item-list-item'">全部</view> |
| | | <view @click="checkType(1)" :class="tempType == 1?'sear-item-list-item active':'sear-item-list-item'">订单结算</view> |
| | | <view @click="checkType(2)" :class="tempType == 2?'sear-item-list-item active':'sear-item-list-item'">提现</view> |
| | | <view @click="checkType(4)" :class="tempType == 4?'sear-item-list-item active':'sear-item-list-item'">提现退回</view> |
| | | <view style="width: 216rpx; height: 0;"></view> |
| | | </view> |
| | | </view> |
| | | <view class="sear-footer"> |
| | | <view class="sear-footer-btn1" @click="comfirm(false)">重置</view> |
| | | <view class="sear-footer-btn2" @click="comfirm(true)">确认</view> |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <u-popup :show="show1" mode="bottom" :safeAreaInsetBottom="false" round="15" @close="comfirmDate(false)"> |
| | | <view class="sear" style="min-height: 500rpx;"> |
| | | <view style="display: flex;justify-items: center;align-items: flex-end;text-align: center;"> |
| | | <view style="display: flex; flex-direction: column;text-align: center; flex: 1;"> |
| | | <view class="picker3">开始时间</view> |
| | | <picker :value="tempStartDate" @change="bindChange1" mode="date"> |
| | | <view class="picker2" :class="{ 'picker2-empty': !tempStartDate }"> |
| | | {{ tempStartDate || '请选择开始时间' }} |
| | | </view> |
| | | </picker> |
| | | </view> |
| | | <view style="flex-shrink: 0; width: 50rpx;"> |
| | | <view class="picker3"></view> |
| | | <view class="picker3">至</view> |
| | | </view> |
| | | <view style="display: flex; flex-direction: column;text-align: center; flex: 1;"> |
| | | <view class="picker3">结束时间</view> |
| | | <picker :value="tempEndDate" @change="bindChange2" mode="date"> |
| | | <view class="picker2" :class="{ 'picker2-empty': !tempEndDate }"> |
| | | {{ tempEndDate || '请选择结束时间' }} |
| | | </view> |
| | | </picker> |
| | | </view> |
| | | </view> |
| | | <view class="sear-footer"> |
| | | <view class="sear-footer-btn1" @click="comfirmDate(false)">重置</view> |
| | | <view class="sear-footer-btn2" @click="comfirmDate(true)">确认</view> |
| | | </view> |
| | | </view> |
| | | </u-popup> |
| | | <custom-tabbar></custom-tabbar> |
| | | </view> |
| | | </template> |
| | |
| | | }, |
| | | computed: { |
| | | ...mapState(['statusbarHeight']) |
| | | }, |
| | | data() { |
| | | return { |
| | | currentPage:1, |
| | | total:0, |
| | | active:0, |
| | | wordsWidth:250, |
| | | tempActive :0, |
| | | type:0, |
| | | words:'全部', |
| | | tempType :0, |
| | | dateType :0, |
| | | dataList:[], |
| | | startDate:null, |
| | | endDate:null, |
| | | defaultStartDate:null, |
| | | defaultEndDate:null, |
| | | showMoney:false, |
| | | countData:{}, |
| | | countDataList:{}, |
| | | hasNext:true, |
| | | show: false, |
| | | show1:false, |
| | | year:null, |
| | | tempYear:null, |
| | | month:null, |
| | | tempMonth:null, |
| | | tempStartDate:null, |
| | | tempEndDate:null, |
| | | } |
| | | }, |
| | | onLoad() { |
| | | this.active=0 |
| | | this.wordsWidth=250 |
| | | this.words='全部' |
| | | this.tempActive=0 |
| | | this.dateType=0 |
| | | this.countData={} |
| | | this.tempStartDate=null |
| | | this.tempEndDate=null |
| | | this.countDataList={} |
| | | this.show = false |
| | | this.initDateStr() |
| | | uni.$on('accountListReload', this.getFirstPageData()) |
| | | }, |
| | | methods:{ |
| | | bindChange1 (e) { |
| | | this.tempStartDate = e.detail.value || null |
| | | }, |
| | | bindChange2 (e) { |
| | | this.tempEndDate= e.detail.value || null |
| | | }, |
| | | formatter(type, value) { |
| | | if (type === 'year') { |
| | | return `${value}年` |
| | | } |
| | | if (type === 'month') { |
| | | return `${value}月` |
| | | } |
| | | return value |
| | | }, |
| | | getShopPage() { |
| | | if(this.loading || !this.hasNext){ |
| | | return |
| | | } |
| | | this.loading=true |
| | | if(this.currentPage == 1){ |
| | | this.hasNext = true |
| | | this.dataList=[] |
| | | } |
| | | this.$u.api.shopPage({ |
| | | capacity: 10, |
| | | model: { |
| | | startTime: this.startDate || this.defaultStartDate, |
| | | endTime: this.endDate || this.defaultEndDate, |
| | | type: this.active === 1?0:(this.active===2?1:''), |
| | | objType: this.type === 1?16:( this.type === 2?17:( this.type === 3?25: (this.type === 4?1: ''))), |
| | | }, |
| | | page: this.currentPage |
| | | }).then(res => { |
| | | if (res.code == 200) { |
| | | this.dataList.push(...res.data.records) |
| | | this.total = res.data.total |
| | | this.currentPage = this.currentPage+1 |
| | | if (this.dataList.length >= res.data.total) { |
| | | this.hasNext = false |
| | | } else { |
| | | this.hasNext = true |
| | | } |
| | | } |
| | | }) |
| | | }, |
| | | getShopSummary() { |
| | | this.$u.api.shopSummary({ |
| | | startTime: this.startDate || this.defaultStartDate, |
| | | endTime: this.endDate || this.defaultEndDate, |
| | | type: this.active === 1?0:(this.active===2?1:''), |
| | | objType: this.type === 1?16:( this.type === 2?17:( this.type === 3?25: (this.type === 4?1: ''))), |
| | | }).then(res=>{ |
| | | if(res.code == 200){ |
| | | this.countDataList = res.data |
| | | } |
| | | }) |
| | | }, |
| | | // 获取门店钱包统计 |
| | | getShopStatistics(){ |
| | | this.$u.api.shopStatistics({}).then(res=>{ |
| | | if(res.code == 200){ |
| | | this.countData = res.data |
| | | } |
| | | }) |
| | | }, |
| | | comfirmDate(flag){ |
| | | if (flag) { |
| | | if(new Date(this.tempEndDate+" 00:00:00").getTime() < new Date(this.tempStartDate+" 00:00:00").getTime()){ |
| | | return uni.showToast({ |
| | | title:'日期范围不正确', |
| | | icon:'error' |
| | | }) |
| | | } |
| | | this.startDate =this.tempStartDate |
| | | this.endDate =this.tempEndDate |
| | | } else { |
| | | this.startDate = null |
| | | this.endDate = null |
| | | this.tempStartDate = this.defaultStartDate |
| | | this.tempEndDate = this.defaultEndDate |
| | | } |
| | | this.getFirstPageData() |
| | | this.show1=false |
| | | }, |
| | | openShow(){ |
| | | this.tempActive =this.active |
| | | this.tempType =this.type |
| | | this.show=true |
| | | }, |
| | | comfirm(flag){ |
| | | if(flag){ |
| | | this.active = this.tempActive |
| | | this.type = this.tempType |
| | | this.show = false |
| | | this.wordsWidth = 250 |
| | | if(this.active === 0 && this.type === 0){ |
| | | this.words = '全部' |
| | | }else { |
| | | let t1 = this.active === 1 ? '收入 ':(this.active === 2 ? '支出 ' : ''); |
| | | let t2 = this.type === 1 ? '订单结算' : (this.type === 2 ? '提现': (this.type === 3 ? '订单结算退回' : (this.type === 4 ? '提现退回' : ''))) |
| | | if(t1 !='' && t2 !=''){ |
| | | this.wordsWidth = 350 |
| | | } |
| | | this.words = t1 + t2 |
| | | } |
| | | this.getFirstPageData() |
| | | }else{ |
| | | this.tempActive = 0 |
| | | this.tempType =0 |
| | | } |
| | | }, |
| | | formattedDateTime(currentDate) { |
| | | const year = currentDate.getFullYear(); |
| | | const month = (currentDate.getMonth() + 1).toString().padStart(2, '0'); // 月份从 0 开始,需要加 1,并补齐两位 |
| | | const day = currentDate.getDate().toString().padStart(2, '0'); // 补齐两位 |
| | | const formattedDate = `${year}-${month}-${day}`; |
| | | console.log(formattedDate); // 输出格式化后的日期,例如 "2023-10-24" |
| | | return formattedDate; |
| | | }, |
| | | initDateStr(){ |
| | | const now = new Date() |
| | | const firstDay = new Date(now.getFullYear(), now.getMonth(), 1) |
| | | const defaultStart = this.formattedDateTime(firstDay) |
| | | const defaultEnd = this.formattedDateTime(now) |
| | | |
| | | this.defaultStartDate = defaultStart |
| | | this.defaultEndDate = defaultEnd |
| | | |
| | | this.startDate = null |
| | | this.endDate = null |
| | | |
| | | this.getShopStatistics() |
| | | this.getShopSummary() |
| | | this.getShopPage() |
| | | }, |
| | | checkActive(index){ |
| | | this.tempActive =index |
| | | }, |
| | | checkType(index){ |
| | | this.tempType =index |
| | | }, |
| | | getFirstPageData(){ |
| | | this.currentPage = 0 |
| | | this.hasNext=true |
| | | this.total=0 |
| | | this.dataList=[] |
| | | this.getShopPage() |
| | | }, |
| | | jumpWithdraw(){ |
| | | uni.navigateTo({ |
| | | url: '/shop/pages/withdraw/withdraw' |
| | | }) |
| | | }, |
| | | jumpDetail(item){ |
| | | if(item.objType == 17 ){ |
| | | uni.navigateTo({ |
| | | url: '/shop/pages/withdrawal-details/withdrawal-details?id='+item.objId |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .wallet-page { |
| | | min-height: 100vh; |
| | | background: #f8f8f8; |
| | | <style> |
| | | .picker-view { |
| | | width: 750rpx; |
| | | height: 600rpx; |
| | | margin-top: 20rpx; |
| | | } |
| | | |
| | | .nav-bar { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background: #ffffff; |
| | | z-index: 100; |
| | | .picker-item { |
| | | line-height: 72rpx; |
| | | text-align: center; |
| | | } |
| | | |
| | | .nav-content { |
| | | height: 44px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .picker2{ |
| | | line-height: 72rpx; |
| | | text-align: center; |
| | | background: rgba(0,64,150,0.1) !important; |
| | | border-radius: 8rpx; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #004096 !important; |
| | | } |
| | | |
| | | .nav-title { |
| | | font-size: 34rpx; |
| | | font-weight: 600; |
| | | .picker2-empty{ |
| | | background: #F7F7F7 !important; |
| | | color: #999999 !important; |
| | | } |
| | | .picker3{ |
| | | line-height: 72rpx; |
| | | text-align: center; |
| | | border-radius: 8rpx; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #333333; |
| | | } |
| | | </style> |
| | | |
| | | .page-content { |
| | | padding-top: calc(44px + 44px); |
| | | <style lang="scss" scoped> |
| | | .wallet-page { |
| | | width: 100%; |
| | | min-height: 100vh; |
| | | background: #f8f8f8; |
| | | .nav-bar { |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | right: 0; |
| | | background: #ffffff; |
| | | z-index: 100; |
| | | .nav-content { |
| | | height: 44px; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | .nav-title { |
| | | font-size: 34rpx; |
| | | font-weight: 600; |
| | | color: #333333; |
| | | } |
| | | } |
| | | } |
| | | .sear { |
| | | width: 100%; |
| | | padding: 30rpx; |
| | | box-sizing: border-box; |
| | | .sear-title { |
| | | width: 100%; |
| | | text-align: center; |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #111111; |
| | | } |
| | | .sear-item { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | margin-top: 48rpx; |
| | | .sear-item-label { |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #111111; |
| | | } |
| | | .sear-item-list { |
| | | margin-top: 30rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | flex-wrap: wrap; |
| | | .active { |
| | | background: rgba(0,64,150,0.1) !important; |
| | | color: #004096 !important; |
| | | } |
| | | .active1 { |
| | | border-bottom: 2rpx solid #004096 !important; |
| | | color: #004096 !important; |
| | | } |
| | | .sear-item-list-item { |
| | | width: 216rpx; |
| | | height: 72rpx; |
| | | line-height: 72rpx; |
| | | text-align: center; |
| | | background: #F7F7F7; |
| | | border-radius: 8rpx; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #333333; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | .sear-item-list-item1 { |
| | | width: 216rpx; |
| | | height: 72rpx; |
| | | line-height: 72rpx; |
| | | text-align: center; |
| | | font-weight: 400; |
| | | font-size: 28rpx; |
| | | color: #333333; |
| | | margin-bottom: 20rpx; |
| | | } |
| | | } |
| | | } |
| | | .sear-footer { |
| | | width: 100%; |
| | | height: 88rpx; |
| | | margin-top: 80rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .sear-footer-btn1 { |
| | | width: 334rpx; |
| | | height: 88rpx; |
| | | line-height: 88rpx; |
| | | text-align: center; |
| | | background: #E5E5E5; |
| | | border-radius: 44rpx; |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #333333; |
| | | } |
| | | .sear-footer-btn2 { |
| | | width: 334rpx; |
| | | height: 88rpx; |
| | | line-height: 88rpx; |
| | | text-align: center; |
| | | background: #004096; |
| | | border-radius: 44rpx; |
| | | font-weight: 500; |
| | | font-size: 32rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | } |
| | | } |
| | | .box-list { |
| | | width: 100%; |
| | | display: flex; |
| | | padding-bottom: 30rpx; |
| | | flex-direction: column; |
| | | .item { |
| | | width: 100%; |
| | | .item-date { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 0 30rpx 30rpx 30rpx; |
| | | box-sizing: border-box; |
| | | .item-date-top { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .item-date-top-left { |
| | | display: flex; |
| | | align-items: center; |
| | | image { |
| | | width: 26rpx; |
| | | height: 26rpx; |
| | | margin-left: 12rpx; |
| | | } |
| | | text { |
| | | font-weight: 600; |
| | | font-size: 28rpx; |
| | | color: #222222; |
| | | margin-right: 8rpx; |
| | | } |
| | | } |
| | | .sele { |
| | | width: 200rpx; |
| | | height: 64rpx; |
| | | padding: 0 24rpx; |
| | | box-sizing: border-box; |
| | | background: #FFFFFF; |
| | | border-radius: 32rpx; |
| | | border: 1rpx solid #EEEEEE; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-left: 30rpx; |
| | | text { |
| | | width: auto; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #333333; |
| | | } |
| | | } |
| | | } |
| | | .item-date-bottom { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | margin-top: 20rpx; |
| | | text { |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #777777; |
| | | &:nth-child(2) { |
| | | margin-left: 62rpx; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .item-list { |
| | | width: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | padding: 0 30rpx; |
| | | box-sizing: border-box; |
| | | background-color: #ffffff; |
| | | .nomore { |
| | | text-align: center; |
| | | color: #999999; |
| | | font-size: 30rpx; |
| | | font-weight: 400; |
| | | margin-top: 30rpx; |
| | | } |
| | | .item-list-item { |
| | | width: 100%; |
| | | padding: 30rpx 0; |
| | | box-sizing: border-box; |
| | | border-bottom: 1rpx solid #E5E5E5; |
| | | display: flex; |
| | | align-items: flex-start; |
| | | justify-content: center; |
| | | .image { |
| | | flex-shrink: 0; |
| | | width: 72rpx; |
| | | height: 72rpx; |
| | | border-radius: 50%; |
| | | overflow: hidden; |
| | | margin-right: 20rpx; |
| | | image { |
| | | width: 100%; |
| | | } |
| | | } |
| | | .info { |
| | | flex: 1; |
| | | display: flex; |
| | | flex-direction: column; |
| | | .info-a { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | .info-a-label { |
| | | font-weight: 500; |
| | | font-size: 30rpx; |
| | | color: #222222; |
| | | display: flex; |
| | | text { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | margin-left: 20rpx; |
| | | } |
| | | } |
| | | .info-a-price { |
| | | display: flex; |
| | | align-items: baseline; |
| | | text { |
| | | |
| | | font-weight: 600; |
| | | font-size: 32rpx; |
| | | color: #222222; |
| | | |
| | | } |
| | | } |
| | | } |
| | | .info-b { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-top: 12rpx; |
| | | text { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: #999999; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | // .sele { |
| | | // width: 200rpx; |
| | | // height: 64rpx; |
| | | // padding: 0 24rpx; |
| | | // box-sizing: border-box; |
| | | // background: #FFFFFF; |
| | | // border-radius: 32rpx; |
| | | // border: 1rpx solid #EEEEEE; |
| | | // display: flex; |
| | | // align-items: center; |
| | | // justify-content: space-between; |
| | | // margin-left: 30rpx; |
| | | // text { |
| | | // width: auto; |
| | | // font-weight: 400; |
| | | // font-size: 26rpx; |
| | | // color: #333333; |
| | | // } |
| | | // } |
| | | .data { |
| | | width: 100%; |
| | | // padding: 20rpx 30rpx; |
| | | padding: calc(44px + 44px) 30rpx 0 30rpx; |
| | | box-sizing: border-box; |
| | | .hezi { |
| | | width: 100%; |
| | | height: 304rpx; |
| | | padding: 30rpx; |
| | | box-sizing: border-box; |
| | | background: #004096; |
| | | border-radius: 16rpx; |
| | | .hezi-a { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | text { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: rgba(255,255,255,0.7); |
| | | margin-right: 20rpx; |
| | | } |
| | | } |
| | | .hezi-b { |
| | | width: 100%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: space-between; |
| | | margin-top: 14rpx; |
| | | .hezi-b-price { |
| | | display: flex; |
| | | align-items: baseline; |
| | | text { |
| | | &:nth-child(1) { |
| | | font-weight: 600; |
| | | font-size: 44rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | &:nth-child(2) { |
| | | font-weight: 600; |
| | | font-size: 26rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | } |
| | | } |
| | | .hezi-b-btn { |
| | | width: 100rpx; |
| | | height: 52rpx; |
| | | line-height: 52rpx; |
| | | text-align: center; |
| | | background: #FFFFFF; |
| | | border-radius: 26rpx; |
| | | font-weight: 500; |
| | | font-size: 26rpx; |
| | | color: #004096; |
| | | } |
| | | } |
| | | .hezi-c { |
| | | width: 100%; |
| | | height: 138rpx; |
| | | margin-top: 24rpx; |
| | | display: flex; |
| | | align-items: center; |
| | | border-top: 1rpx solid rgba(255,255,255,0.09); |
| | | .hezi-c-item { |
| | | flex: 1; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | align-items: center; |
| | | justify-content: center; |
| | | &:first-child { |
| | | border-right: 1rpx solid rgba(255,255,255,0.09); |
| | | } |
| | | .hezi-c-item-title { |
| | | font-weight: 400; |
| | | font-size: 24rpx; |
| | | color: rgba(255,255,255,0.7); |
| | | } |
| | | .hezi-c-item-price { |
| | | display: flex; |
| | | align-items: baseline; |
| | | margin-top: 8rpx; |
| | | text { |
| | | &:nth-child(1) { |
| | | font-weight: 600; |
| | | font-size: 30rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | &:nth-child(2) { |
| | | font-weight: 600; |
| | | font-size: 26rpx; |
| | | color: #FFFFFF; |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | .tx { |
| | | width: 100%; |
| | | height: 104rpx; |
| | | background: rgba(0,64,150,0.12); |
| | | border-radius: 16rpx; |
| | | position: relative; |
| | | top: -20rpx; |
| | | font-weight: 400; |
| | | font-size: 26rpx; |
| | | color: #004096; |
| | | padding: 40rpx 30rpx 0 30rpx; |
| | | box-sizing: border-box; |
| | | } |
| | | } |
| | | } |
| | | </style> |