867 lines
20 KiB
Vue
867 lines
20 KiB
Vue
<template>
|
||
<view class="main">
|
||
<status-nav :backgroudColor="backgroudColor" returnColor="#fff" navBarTitle="水卡管理"
|
||
titleColor="#fff"></status-nav>
|
||
<!-- 页面背景 -->
|
||
<image class="page-bg" src="/static/public/blue-bg2.jpg" mode="widthFix"></image>
|
||
<view class="user-spread content">
|
||
<view class="fs14 u-m-b-20 flex tc white" v-if="giftData.code">
|
||
<u-icon name="gift-fill" color="#fff" size="23"></u-icon>
|
||
<view class="u-m-l-10">当前充值金额 <text class="fs12 u-m-l-10">￥</text><text
|
||
class="fs20 bold">{{giftData.money}}</text></view>
|
||
</view>
|
||
<view class="main-boxs u-p-t-30">
|
||
<view v-if="cardList.length > 0">
|
||
<view class="user-vip" v-for="(item,index) in cardList" :key="index"
|
||
:class="item.status != 'normal' ? 'actionType' : ''">
|
||
|
||
<u-skeleton rows="1" :loading="ifLoading" :animate="true">
|
||
<view class="user-assets-box" :class="index == checked ? 'checkSe' : ''">
|
||
<view class="user-assets-header flex row-between">
|
||
<view class="flex nr bold" style="line-height: 80rpx;color: #8F430E;">
|
||
卡号：
|
||
<text style="color: #FF2C3C;font-weight: bold;" class="price-format">
|
||
<text style="font-size: 30rpx;margin-right: 2rpx;">{{item.number}}</text>
|
||
</text>
|
||
</view>
|
||
|
||
<view class="white flex row-center" v-if="giftData.code">
|
||
<u-radio-group v-model="checked" placement="column" @change="groupChange">
|
||
<u-radio :name="index" activeColor="#3d9f3d" size="22" shape="circle"></u-radio>
|
||
</u-radio-group>
|
||
</view>
|
||
|
||
<view v-else>
|
||
<view hover-class="none" class="primary-btn white flex row-center fs12"
|
||
v-if="item.status == 'normal'" @tap="lossTap(index,'lost')">卡片挂失
|
||
</view>
|
||
<view hover-class="none" class="primary-btn white flex row-center fs12"
|
||
v-else-if="item.status == 'lost'" style="background: #999;">卡片已挂失
|
||
</view>
|
||
<view hover-class="none" class="primary-btn white flex row-center fs12"
|
||
v-else-if="item.status == 'cancel'" style="background: #999;">卡片已注销
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="user-assets-content flex flex-wrap">
|
||
<view class="user-item flex-col col-center">
|
||
<tool-tip class="m-t-20" id="today-profit" content="今日预估收益金额"
|
||
style="position: absolute;right: -66rpx;"></tool-tip>
|
||
<view class="nr user-assets-name flex" style="color: #8F430E">
|
||
当前余额
|
||
</view>
|
||
<view class="assets m-l-10">
|
||
<text style="color: #ff5200;font-weight: bold;" class="price-format">
|
||
<text style="font-size: 13px;margin-right: 2rpx;">¥</text>
|
||
<text style="font-size: 16px;margin-left: 4rpx;">{{item.value}}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="user-item flex-col col-center">
|
||
<view class="nr user-assets-name flex" style="color: #8F430E">
|
||
上次刷卡设备号
|
||
</view>
|
||
<view class="assets m-l-10">
|
||
<text style="color: #ff5200;font-weight: bold;" class="price-format">
|
||
<text
|
||
style="font-size: 13px;margin-right: 2rpx;">{{item.shopname || ''}}</text>
|
||
</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="usual-tools-box" v-if="!giftData.code">
|
||
<view class="usual-content flex">
|
||
<view class="usual-item" @tap="cardTap(index,1)">
|
||
<view class="flex-col col-center">
|
||
<image src="/static/distribution/icon_yongjin.png" class="usual-item-img">
|
||
</image>
|
||
<view class="nr normal m-t-18" style="line-height: 40rpx">充值记录</view>
|
||
</view>
|
||
</view>
|
||
<view class="usual-item" @tap="cardTap(index,2)">
|
||
<view class="flex-col col-center">
|
||
<image src="/static/distribution/icon_invite.png" class="usual-item-img">
|
||
</image>
|
||
<view class="nr normal m-t-18" style="line-height: 40rpx">消费记录</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="usual-item" @tap="cardTap(index,3)">
|
||
<view class="flex-col col-center">
|
||
<image src="/static/distribution/icon_delet.png" class="usual-item-img"></image>
|
||
<view class="nr normal m-t-18" style="line-height: 40rpx">删除</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
</u-skeleton>
|
||
</view>
|
||
</view>
|
||
|
||
|
||
<view class="kong" v-else>
|
||
<u-empty mode="list" text="水卡是空的哟~">
|
||
<view class="mt10">
|
||
<u-button size="small" type="success" text="去添加水卡" @tap="goPage('/pagesA/addCard/addCard')">
|
||
</u-button>
|
||
</view>
|
||
</u-empty>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pl50 pr50 u-m-t-60" v-if="giftData.code">
|
||
<view v-if="!disabled">
|
||
<u-button size="large" shape="circle" text="提交充值" @click="submitForm"
|
||
color="linear-gradient(to left, #0aa00a,#11ca11)"></u-button>
|
||
</view>
|
||
|
||
<view class="op" v-else>
|
||
<u-button loadingText="加载中" shape="circle" size="large" loading loadingMode="circle" type="success"
|
||
color="linear-gradient(to left, #0aa00a,#11ca11)"></u-button>
|
||
</view>
|
||
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 记录 -->
|
||
<u-popup :show="popShow" @close="close" :round="10">
|
||
<view class="record">
|
||
<view class="top_title">
|
||
<text class="text" v-if="recordValue == 1">充值记录</text>
|
||
<text class="text" v-if="recordValue == 2">消费记录</text>
|
||
<text class="num">当前卡号：<text class="st">{{cardList[recordIndex].number}}</text></text>
|
||
</view>
|
||
|
||
<scroll-view :scroll-top="0" style="height: 800rpx;" scroll-y="true" @scrolltolower="scrolltolower">
|
||
<view class="pub-tableList" v-if="recordValue == 1">
|
||
<view class="a2">
|
||
<view class="boxs">
|
||
<view class="b1 b1-top">
|
||
<view class="st">充值金额</view>
|
||
<view class="st">充值时间</view>
|
||
<view class="st">实际到账</view>
|
||
<view class="st">操作人</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="boxs">
|
||
<view class="b1" v-for="(item,index) in rechargeList" :key="index">
|
||
<view class="st">{{item.value}}</view>
|
||
<view class="st">{{item.time}}</view>
|
||
<view class="st">{{item.value_afterdiscount}}</view>
|
||
<view class="st">{{item.operater}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="pub-tableList" v-if="recordValue == 2">
|
||
<view class="a2">
|
||
<view class="boxs">
|
||
<view class="b1 b1-top">
|
||
<view class="st">消费时间</view>
|
||
<view class="st">设备地址</view>
|
||
<view class="st">实际扣款</view>
|
||
<view class="st">余额</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="boxs">
|
||
<view class="b1" v-for="(item,index) in userList" :key="index">
|
||
<view class="st">{{item.time}}</view>
|
||
<view class="st">{{item.location}}</view>
|
||
<view class="st">{{item.cost_value}}</view>
|
||
<view class="st">{{item.after_value}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 删除模态框 -->
|
||
<u-modal :show="showDel" @cancel="cancelDel" :content="contentDel" :title="titleDel" @confirm="confirmDel"
|
||
ref="uModal" :asyncClose="true" :showCancelButton="true"></u-modal>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getCardList,
|
||
postCardLost,
|
||
postGiftUse,
|
||
postCardDel
|
||
} from "@/api/index";
|
||
import {
|
||
getaddvalue,
|
||
getconsume,
|
||
getLossreport,
|
||
getCardinfo,
|
||
getproducts,
|
||
postAddvalue
|
||
} from "@/api/water";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
ifLoading: true,
|
||
baseHttps: `${getApp().globalData.hostapi}`, //接口链接
|
||
backgroudColor: 'none', //导航栏背景
|
||
|
||
popShow: false,
|
||
recordValue: 1, //1充值、2消费
|
||
recordIndex: '', //点击的第几个
|
||
otherCardList: [], //循环之后遍历的卡片列表
|
||
cardList: [], //本地存储卡片列表
|
||
|
||
rechargeList: [], //充值记录
|
||
userList: [], //消费记录
|
||
page: 1,
|
||
size: 100,
|
||
total: 0,
|
||
|
||
|
||
giftData: {
|
||
code: '',
|
||
money: '',
|
||
}, //礼品卡信息
|
||
checked: '-1',
|
||
disabled: false,
|
||
|
||
titleDel: '水卡删除',
|
||
showDel: false,
|
||
contentDel: '',
|
||
delCardIndex: '',
|
||
};
|
||
},
|
||
onPageScroll(object) {
|
||
if (object.scrollTop >= 5) {
|
||
this.backgroudColor = '#3a9e3a';
|
||
}
|
||
if (object.scrollTop <= 0) {
|
||
this.backgroudColor = 'none';
|
||
}
|
||
},
|
||
onLoad(op) {
|
||
if (op) {
|
||
this.giftData.code = op.code;
|
||
this.giftData.money = op.money;
|
||
this.getCardData();
|
||
} else {
|
||
this.getCardData();
|
||
}
|
||
},
|
||
onShow(options) {},
|
||
|
||
methods: {
|
||
close() {
|
||
this.popShow = false;
|
||
},
|
||
|
||
// 跳转页面
|
||
goPage(url){
|
||
uni.navigateTo({
|
||
url:url
|
||
})
|
||
},
|
||
// 获取卡片列表
|
||
getCardData() {
|
||
let params = {
|
||
page: this.page,
|
||
size: this.size
|
||
}
|
||
getCardList(params).then(res => {
|
||
this.total = res.data.total;
|
||
let newArray = res.data.list.map(item => ({
|
||
appid: item.appid,
|
||
user: item.saler,
|
||
card: item.number
|
||
}));
|
||
this.fetchAllDataByIds(newArray);
|
||
})
|
||
},
|
||
|
||
async fetchAllDataByIds(array) {
|
||
await array.forEach((item, index) => {
|
||
this.cardListData(item);
|
||
})
|
||
this.ifLoading = false;
|
||
|
||
console.log(this.cardList)
|
||
},
|
||
|
||
// 请求生钛圈水卡详情
|
||
cardListData(data) {
|
||
let params = {
|
||
appid: data.appid,
|
||
user: data.user,
|
||
card: data.card
|
||
}
|
||
getCardinfo(params).then(res => {
|
||
if (res.error == 0) {
|
||
let newData = {
|
||
appid: data.appid,
|
||
...res.data
|
||
}
|
||
if (this.giftData.code) {
|
||
newData.checked = false
|
||
}
|
||
this.cardList.push(newData);
|
||
//会员卡状态 normal（正常） lost（挂失） cancel 已注销（不能使用）
|
||
}
|
||
})
|
||
},
|
||
|
||
//1、充值记录 2、消费记录 3、删除
|
||
cardTap(index, type) {
|
||
this.recordIndex = index;
|
||
let params = {
|
||
appid: this.cardList[index].appid,
|
||
user: this.cardList[index].saler,
|
||
card: this.cardList[index].number,
|
||
}
|
||
this.recordValue = type;
|
||
if (type == 1) {
|
||
getaddvalue(params).then(res => {
|
||
if (res.error == 0) {
|
||
if (res.data.length > 0) {
|
||
this.rechargeList = res.data;
|
||
this.popShow = true;
|
||
} else {
|
||
this.$toolAll.tools.showToast('还没有充值记录~')
|
||
}
|
||
}
|
||
})
|
||
} else if (type == 2) {
|
||
getconsume(params).then(res => {
|
||
if (res.error == 0) {
|
||
if (res.data.length > 0) {
|
||
this.userList = res.data;
|
||
this.popShow = true;
|
||
} else {
|
||
this.$toolAll.tools.showToast('还没有消费记录~')
|
||
}
|
||
}
|
||
})
|
||
} else if (type == 3) {
|
||
this.delCardIndex = index;
|
||
this.contentDel = '您确定要删除' + this.cardList[index].number + '这张水卡？';
|
||
this.showDel = true;
|
||
}
|
||
},
|
||
// 取消删除
|
||
cancelDel() {
|
||
this.showDel = false;
|
||
},
|
||
// 确定删除
|
||
confirmDel() {
|
||
let paramsData = {
|
||
number: this.cardList[this.delCardIndex].number,
|
||
}
|
||
postCardDel(paramsData).then(res => {
|
||
if (res.code == 0) {
|
||
this.showDel = false;
|
||
this.$toolAll.tools.showToast('删除成功');
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: "/pagesA/waterCard/waterCard"
|
||
})
|
||
}, 1000)
|
||
|
||
} else {
|
||
this.$toolAll.tools.showToast(res.msg)
|
||
}
|
||
})
|
||
},
|
||
|
||
|
||
// 卡片挂失
|
||
lossTap(index, type) {
|
||
let params = {
|
||
appid: this.cardList[index].appid,
|
||
saler: this.cardList[index].saler,
|
||
card: this.cardList[index].number,
|
||
action: type
|
||
}
|
||
getLossreport(params).then(res => {
|
||
if (res.code == 0) {
|
||
this.$toolAll.tools.showToast('挂失成功');
|
||
uni.redirectTo({
|
||
url:"/pagesA/waterCard/waterCard"
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
// 选择卡片充值
|
||
groupChange(e) {
|
||
this.checked = e;
|
||
},
|
||
|
||
// 提交充值
|
||
submitForm() {
|
||
if (this.checked >= 0) {
|
||
this.disabled = true;
|
||
setTimeout(() => {
|
||
this.disabled = false;
|
||
}, 2500)
|
||
// 充值
|
||
let params = {
|
||
appid: this.cardList[this.checked].appid,
|
||
user: this.cardList[this.checked].saler,
|
||
card: this.cardList[this.checked].number,
|
||
value: this.giftData.money,
|
||
income: this.giftData.money,
|
||
password: this.cardList[this.checked].saler,
|
||
}
|
||
postAddvalue(params).then(res => {
|
||
if (res.error == 0) {
|
||
let paramsData = {
|
||
code: this.giftData.code
|
||
}
|
||
postGiftUse(paramsData).then(resData => {
|
||
if (resData.code == 0) {
|
||
this.$toolAll.tools.showToast('充值成功');
|
||
setTimeout(() => {
|
||
uni.redirectTo({
|
||
url: "/pagesA/waterCard/waterCard"
|
||
})
|
||
}, 1200)
|
||
}
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast('充值失败')
|
||
}
|
||
})
|
||
} else {
|
||
this.$toolAll.tools.showToast('请选择您要充值的卡号！')
|
||
}
|
||
|
||
},
|
||
|
||
}
|
||
};
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.page-bg {
|
||
width: 100%;
|
||
position: absolute;
|
||
left: 0;
|
||
top: 0;
|
||
z-index: 0;
|
||
}
|
||
|
||
.user-spread {
|
||
|
||
.header {
|
||
justify-content: space-between;
|
||
|
||
.user-info {
|
||
.user-avatar {
|
||
position: relative;
|
||
width: 120rpx;
|
||
height: 120rpx;
|
||
overflow: hidden;
|
||
background-color: #ececec;
|
||
border-radius: 50%;
|
||
|
||
.image {
|
||
width: 110rpx;
|
||
}
|
||
}
|
||
|
||
.avatar-tag {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
line-height: 40rpx;
|
||
}
|
||
|
||
.user-message {
|
||
.write-btn {
|
||
height: 42rpx;
|
||
width: 100rpx;
|
||
background-color: #FF838D;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.main-boxs {
|
||
|
||
.user-vip {
|
||
background: linear-gradient(90deg, #FBEFDB 0%, #FED09E 100%);
|
||
border-radius: 20rpx;
|
||
margin-bottom: 40rpx;
|
||
|
||
&.actionType {
|
||
background: #ddd;
|
||
}
|
||
|
||
.user-assets-box {
|
||
border: 1px solid transparent;
|
||
padding: 14rpx 30rpx;
|
||
border-radius: 10rpx;
|
||
|
||
&.checkSe {
|
||
border: 1px solid #f00;
|
||
}
|
||
|
||
.user-assets-header {
|
||
border-bottom: 1rpx dashed #8F430E;
|
||
padding-bottom: 4rpx;
|
||
|
||
.primary-btn {
|
||
height: 54rpx;
|
||
border-radius: 120rpx;
|
||
width: 144rpx;
|
||
background: linear-gradient(180deg, #FF3067 0%, #FF2C3C 100%);
|
||
}
|
||
}
|
||
|
||
.user-assets-content {
|
||
margin-top: 30rpx;
|
||
|
||
.user-item {
|
||
flex: 1;
|
||
position: relative;
|
||
|
||
.user-assets-name {
|
||
text-align: left;
|
||
align-self: flex-start;
|
||
}
|
||
|
||
.assets {
|
||
margin-top: 6rpx;
|
||
text-align: left;
|
||
align-self: flex-start;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.fans-msg-box {
|
||
border-radius: 10rpx;
|
||
line-height: 42rpx;
|
||
|
||
.my-fans {
|
||
height: 100rpx;
|
||
}
|
||
|
||
.line {
|
||
width: 3rpx;
|
||
height: 60rpx;
|
||
background-color: #E5E5E5;
|
||
}
|
||
|
||
.invite-fans {
|
||
height: 120rpx;
|
||
}
|
||
}
|
||
|
||
.my-invite-box {
|
||
padding: 26rpx 0 57rpx;
|
||
border-radius: 10rpx;
|
||
|
||
.invite-copy-btn {
|
||
line-height: 30rpx;
|
||
padding: 10rpx;
|
||
background: linear-gradient(90deg, #FEE4B4 0%, #FBCB96 100%);
|
||
color: #8F430E;
|
||
border-radius: 4rpx;
|
||
}
|
||
|
||
.my-promote-banner {
|
||
margin-top: 30rpx;
|
||
height: 148rpx;
|
||
width: 542rpx;
|
||
border-radius: 10rpx;
|
||
}
|
||
}
|
||
|
||
.usual-tools-box {
|
||
border-radius: 10rpx;
|
||
padding: 0 25rpx;
|
||
|
||
.usual-tools-header {
|
||
height: 100rpx;
|
||
line-height: 44rpx;
|
||
border-bottom: 1px solid #ececec;
|
||
}
|
||
|
||
.usual-content {
|
||
padding: 40rpx 0;
|
||
|
||
.usual-item {
|
||
flex: 1;
|
||
box-sizing: border-box;
|
||
|
||
.usual-item-img {
|
||
width: 44rpx;
|
||
height: 44rpx;
|
||
flex: none;
|
||
}
|
||
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.user-apply-box {
|
||
.user-apply-vip {
|
||
background-color: white;
|
||
padding: 40rpx 0 0rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.title {
|
||
line-height: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.explain {
|
||
margin-top: 20rpx;
|
||
|
||
image {
|
||
width: 24rpx;
|
||
height: 24rpx;
|
||
flex: none;
|
||
}
|
||
|
||
span {
|
||
font-size: 20rpx;
|
||
line-height: 30rpx;
|
||
}
|
||
}
|
||
|
||
.vip-form {
|
||
width: 100%;
|
||
margin-top: 60rpx;
|
||
|
||
.form-item {
|
||
border: 1px solid #ececec;
|
||
margin: 0 30rpx 30rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
}
|
||
|
||
.user-result-box {
|
||
.user-result {
|
||
background-color: white;
|
||
padding: 36rpx 14rpx 50rpx;
|
||
border-radius: 20rpx;
|
||
|
||
.user-result-header {
|
||
.title {
|
||
line-height: 30rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
}
|
||
|
||
.user-result-content {
|
||
padding: 60rpx 0 22rpx;
|
||
width: 100%;
|
||
border-bottom: 1px solid #ececec;
|
||
|
||
.apply-result-img {
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
}
|
||
}
|
||
|
||
.user-result-info {
|
||
margin-top: 42rpx;
|
||
width: 100%;
|
||
|
||
.info-item {
|
||
margin-left: 60rpx;
|
||
margin-bottom: 28rpx;
|
||
line-height: 30rpx;
|
||
|
||
.label {
|
||
width: 140rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
|
||
.bg-gray {
|
||
background-color: #CCCCCC;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
|
||
.main .user-apply-box .apply-btn {
|
||
line-height: 30rpx;
|
||
height: 82rpx;
|
||
}
|
||
|
||
.main .user-result-box .user-result-content .apply-fail-reason {
|
||
color: #333;
|
||
line-height: 36rpx;
|
||
margin-top: 10rpx;
|
||
}
|
||
|
||
.shareEvm {
|
||
width: 300rpx;
|
||
height: 300rpx;
|
||
background-color: #ececec;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.shareEvm .image {
|
||
width: 100%;
|
||
height: auto;
|
||
}
|
||
|
||
.vip-grade-rule {
|
||
padding: 30rpx 0rpx;
|
||
|
||
.title {
|
||
.line {
|
||
width: 8rpx;
|
||
height: 34rpx;
|
||
background-color: #f79c0c;
|
||
}
|
||
}
|
||
}
|
||
|
||
.price-format {
|
||
line-height: 50rpx;
|
||
}
|
||
|
||
.record {
|
||
padding: 30rpx;
|
||
|
||
.top_title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
border-bottom: 1px solid #ececec;
|
||
padding-bottom: 20rpx;
|
||
|
||
.text {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #3d9f3d;
|
||
}
|
||
|
||
.num {
|
||
font-size: 28rpx;
|
||
color: #ff5200;
|
||
|
||
.st {
|
||
font-size: 32rpx;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.pub-tableList {
|
||
background-color: #fff;
|
||
margin-top: 30rpx;
|
||
|
||
.a1 {
|
||
font-size: 32rpx;
|
||
color: #2ab2ee;
|
||
letter-spacing: 1px;
|
||
}
|
||
|
||
.a2 {
|
||
.boxs {
|
||
.b1 {
|
||
border-bottom: 1px solid #e8e8e8;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 20rpx;
|
||
|
||
.st {
|
||
font-size: 26rpx;
|
||
text-align: center;
|
||
overflow-wrap: break-word;
|
||
padding:0 6rpx;
|
||
box-sizing: border-box;
|
||
&:nth-child(1) {
|
||
width: 25%;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
width: 30%;
|
||
font-size: 24rpx;
|
||
}
|
||
|
||
&:nth-child(3) {
|
||
width: 20%;
|
||
}
|
||
|
||
&:nth-child(4) {
|
||
width: 25%;
|
||
}
|
||
}
|
||
|
||
&.b1-top {
|
||
background-image: linear-gradient(90deg, #3d9f3d, #008b00);
|
||
|
||
.st {
|
||
font-size: 28rpx;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.b2 {
|
||
background-color: #f1f7f7;
|
||
height: 0;
|
||
visibility: hidden;
|
||
opacity: 0;
|
||
transition: opacity .8s ease;
|
||
|
||
&.on {
|
||
height: auto;
|
||
visibility: visible;
|
||
opacity: 1;
|
||
}
|
||
|
||
.td {
|
||
font-size: 24rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
height: 100rpx;
|
||
color: #333;
|
||
border-bottom: 1px solid #e8e8e8;
|
||
}
|
||
|
||
.b2-top {
|
||
font-size: 24rpx;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.st {
|
||
text-align: center;
|
||
flex: 1;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style> |