You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 

872 lines
24 KiB

<template>
<view v-show="dirverDetails">
<view class="header">
<image style="position: absolute;width: 100%; height: 403rpx;top: 0;z-index: -1;"
src="https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png"></image>
<view :style="{height:styles.top+'px'}" class="top"></view>
<uni-nav-bar @clickLeft='jump(-1)' color='white' backgroundColor="rgba(0,0,0,0)" left-icon="back"
title="司机详情" />
<view class="dirver_car">
<view class="dirver_car_body">
<swiper :current="current" style="flex: 1;" :vertical="true" :interval="1000" :duration="300">
<swiper-item @touchmove.stop="">
<view class="dirver_car_body_left">
<view class="dirver_car_body_left_id">
<view>ID:{{dirverDetails.customerInfoVo.customerId}}</view>
<view style="display: flex;">
<uni-icons type="compose"></uni-icons>
<view style="font-size: 28rpx;" @click="jump(1)">修改</view>
</view>
</view>
<view class="name" style="position: relative;">
<image v-if="dirverDetails.customerInfoVo.headPhoto != null"
:src="dirverDetails.customerInfoVo.headPhoto"
style="height: 100rpx;width: 100rpx;border-radius: 50px;" mode="">
</image>
<image v-if="dirverDetails.customerInfoVo.headPhoto==null" src="../../static/tx.png"
style="height: 100rpx;width: 100rpx;border-radius: 50px;" mode="">
</image>
<view style="margin-left: 20rpx; font-size: font-size: 28rpx;;">
<view style="display: flex;align-items: center;">
<view style="margin-right: 10rpx;">
{{dirverDetails.customerInfoVo.userName?dirverDetails.customerInfoVo.userName:'暂无设置'}}
</view>
<u-switch :openText='openText' asyncChange activeColor='#17A00E'
inactive-color="#BBBBBB" size='35' v-model="switchOpen"
@change="change"></u-switch>
</view>
<view>
{{dirverDetails.customerInfoVo.phone}}
<view class="copy" v-if="dirverDetails.customerInfoVo.phone" @tap.stop="copy(dirverDetails.customerInfoVo.phone)"></view>
</view>
<view style="font-size: 22rpx;color: #999999;">
{{dirverDetails.customerInfoVo.createTime}}
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item @touchmove.stop="">
<view class="dirver_car_body_left">
<view class="dirver_car_body_left_id">
<view>{{dirverDetails.customerInfoVo.id}}</view>
<view style="display: flex;">
<uni-icons type="compose"></uni-icons>
<view style="font-size: 28rpx;" @click="jump(3)">修改</view>
</view>
</view>
<view class="name" style="position: relative;">
<image v-if="dirverDetails.customerInfoVo.headPhoto != null"
:src="dirverDetails.customerInfoVo.headPhoto"
style="height: 100rpx;width: 100rpx;border-radius: 50px;" mode="">
</image>
<image v-if="dirverDetails.customerInfoVo.headPhoto==null" src="../../static/tx.png"
style="height: 100rpx;width: 100rpx;border-radius: 50px;" mode="">
</image>
<view style="margin-left: 20rpx; font-size: font-size: 28rpx;;">
<view style="display: flex; margin-bottom: 15rpx;">
{{dirverDetails.customerInfoVo.plateNumber?dirverDetails.customerInfoVo.plateNumber:'暂未设置'}}
<text v-if="dirverDetails.customerInfoVo.plateNumber" class="tbb">个人</text>
</view>
<view style="display: flex;">
{{dirverDetails.customerInfoVo.plateNumberCompany?dirverDetails.customerInfoVo.plateNumberCompany:'暂未设置'}}
<text v-if="dirverDetails.customerInfoVo.plateNumberCompany"
style="background-color: #2866FF;" class="tbb">企业</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
<view class="dirver_car_body_right">
<view @click=" dirverIndexFn(0) "
:style="{backgroundColor:dirverIndex == 0? '#FFFFFF':'#F1F1F1'}"
class="dirver_car_body_right_butten">
<view
:class=" dirverIndex==0? 'dirver_car_body_right_butten_seleitem' : 'dirver_car_body_right_butten_item'"
style="">个人</view>
</view>
<view @click=" dirverIndexFn(1) "
:style="{backgroundColor:dirverIndex == 1? '#FFFFFF':'#F1F1F1'}"
class="dirver_car_body_right_butten">
<view
:class=" dirverIndex==1? 'dirver_car_body_right_butten_seleitem' : 'dirver_car_body_right_butten_item'">
车辆</view>
</view>
</view>
</view>
<view class="dirver_car_footer">
<view class="dirver_car_footer_felx">
<view class="dirver_car_footer_felx_top">{{dirverDetails.zyBalance}}</view>
<view class="dirver_car_footer_felx_tip">自营账户余额</view>
</view>
<view class="dirver_car_footer_felx">
<view class="dirver_car_footer_felx_top">
{{dirverDetails.customerAccountVo.balance? Number(dirverDetails.customerAccountVo.balance).toFixed(2) :0.00}}
</view>
<view class="dirver_car_footer_felx_tip">个人账户余额</view>
</view>
<view class="dirver_car_footer_felx">
<view class="dirver_car_footer_felx_top">{{dirverDetails.wqBalance}}</view>
<view class="dirver_car_footer_felx_tip">外请账户余额</view>
</view>
</view>
</view>
</view>
<view class="dirver_account">
<view class="dirver_account_title">
<view :style="{color:titleIndex==1? '' : '#999999'}" @tap="titleIndexFn(1)">企业油卡账户</view>
<view :style="{color:titleIndex==2? '' : '#999999'}" @tap="titleIndexFn(2)">个人油卡账户</view>
<view :class="titleIndex==1?'dirver_account_title_tiao':'dirver_account_sele_title_tiao'"></view>
</view>
<view v-show="titleIndex==1" class="dirver_account_car">
<view class="dirver_account_car_header">
<view class="jiaobiao"></view>
自营企业账户
</view>
<view class="swiper_car">
<swiper style="height: 233rpx;" next-margin="150rpx" :autoplay="false" :duration="500">
<swiper-item @click="jump(0,item,index)" v-for="(item,index) in swiperData.zy" :key='index'>
<view class="swiper_car_item">
<view class="swiper_car_item_title">
<view :class="item.accountState==1?'typeyuan':'seletypeyuan'"></view>
{{item.companyName}}
</view>
<view style="display: flex;justify-content: space-between;">
<view>
<text class="swiper_car_item_name">总余额</text>
<text class="swiper_car_item_price">{{item.balance}}</text>
</view>
<view class="gxtip" v-if="item.shareCompanyQuota==1">
共享
</view>
</view>
<view style="display: flex;">
<view style="flex: 1;">
<view>
<text class="swiper_car_item_name">充值</text>
<text class="swiper_car_item_price">{{item.rechargeBalance}}</text>
</view>
<view class="swiper_car_item_div">
<text class="swiper_car_item_name">赊销</text>
<text class="swiper_car_item_price">{{item.chargeRechargeBalance}}</text>
</view>
</view>
<view style="flex: 1;">
<view>
<text class="swiper_car_item_name">充返</text>
<text class="swiper_car_item_price">{{item.rebateBalance}}</text>
</view>
<view class="swiper_car_item_div">
<text class="swiper_car_item_name">消返</text>
<text class="swiper_car_item_price">{{item.consumeRebateBalance}}</text>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item v-if="swiperData.zy.length==0" @click="jump(4)">
<image style="width: 100%; height: 100%;" src="../../static/add.png"></image>
</swiper-item>
</swiper>
</view>
</view>
<view v-show="titleIndex==2" class="dirver_account_car">
<view class="dirver_account_car_header">
<view class="jiaobiao"></view>
个人油卡账户
</view>
<view class="swiper_car">
<swiper style="height: 250rpx;" next-margin="150rpx" :autoplay="false" :duration="500">
<swiper-item @tap="jump(5,dirverDetails.customerAccountVo)">
<view class="swiper_car_item">
<view class="swiper_car_item_title">
<view class="typeyuan"></view>
{{dirverDetails.customerAccountVo.id}}
</view>
<view>
<text class="swiper_car_item_name">总余额</text>
<text
class="swiper_car_item_price">{{dirverDetails.customerAccountVo.balance}}</text>
</view>
<view style="display: flex;">
<view style="flex: 1;">
<view>
<text class="swiper_car_item_name">账户充值余额</text>
<text
class="swiper_car_item_price">{{dirverDetails.customerAccountVo.rechargeBalance}}</text>
</view>
<view class="swiper_car_item_div">
<text class="swiper_car_item_name">账户充值返利余额</text>
<text
class="swiper_car_item_price">{{dirverDetails.customerAccountVo.rechargeRebateBalance}}</text>
</view>
</view>
</view>
</view>
</swiper-item>
</swiper>
</view>
</view>
</view>
<view v-show="titleIndex==1" class="dirver_account">
<view style="height: 405rpx;" class="dirver_account_car">
<view style="justify-content: space-between; align-items: center;" class="dirver_account_car_header">
<view style="display: flex; align-items: center;">
<view class="jiaobiao"></view>
<text>外请企业账户</text>
<text
style="color: #BBBBBB; font-size: 20rpx; margin-left: 20rpx;">合计{{swiperData.wq.length}}张油卡</text>
</view>
<view @tap="jump(2)" style="color: #2866FF; font-size: 26rpx;">添加</view>
</view>
<view class="navbar">
<view :style="{transform:'translateX(' + xTranslation + 'rpx)'}" class="sele_tiao"></view>
<view @tap="seleFn(0,1)" :class=" seleindex==0? 'navbar_seleItem' :'navbar_item'">启用</view>
<view @tap="seleFn(1,0)" style="margin: 0 60rpx;"
:class=" seleindex==1? 'navbar_seleItem' :'navbar_item'">禁用</view>
<view @tap="seleFn(2,2)" :class=" seleindex==2? 'navbar_seleItem' :'navbar_item'">所有</view>
</view>
<view class="swiper_car">
<swiper :current="currents" style="height: 233rpx;" next-margin="150rpx" :autoplay="false"
:duration="500">
<swiper-item v-if="item.swiperOpen" @click="jump(0,item,index)"
v-for="(item,index) in swiperData.wq" :key='index'>
<view class="swiper_car_item">
<view class="swiper_car_item_title">
<view :class="item.accountState==1?'typeyuan':'seletypeyuan'"></view>
{{item.companyName}}
</view>
<view style="width: 100%;">
<text class="swiper_car_item_name">总余额</text>
<text class="swiper_car_item_price">{{item.balance}}</text>
</view>
<view style="display: flex;width: 100%;">
<view style="flex: 1;">
<view>
<text class="swiper_car_item_name">充值</text>
<text class="swiper_car_item_price">{{item.rechargeBalance}}</text>
</view>
<view class="swiper_car_item_div">
<text class="swiper_car_item_name">赊销</text>
<text class="swiper_car_item_price">{{item.chargeRechargeBalance}}</text>
</view>
</view>
<view style="flex: 1;">
<view>
<text class="swiper_car_item_name">充返</text>
<text class="swiper_car_item_price">{{item.rebateBalance}}</text>
</view>
<view class="swiper_car_item_div">
<text class="swiper_car_item_name">消返</text>
<text class="swiper_car_item_price">{{item.consumeRebateBalance}}</text>
</view>
</view>
</view>
</view>
</swiper-item>
<swiper-item v-if="swiperData.wq.length==0" @click="jump(2)">
<image style="width: 100%; height: 100%;" src="../../static/add.png"></image>
</swiper-item>
</swiper>
</view>
</view>
</view>
</view>
</template>
<script>
import driverManagement from '@/api/driverManagement'
import tool from '@/utils/tool.js'
export default {
data() {
return {
titleIndex: 1,
jsData: null,
swiperOpen: true,
openText: {
one: '启用',
off: '禁用'
},
carList: [],
dirverAccount: {},
switchOpen: "",
dirverDetails: null,
current: 0,
dirverIndex: 0,
xTranslation: 0,
seleindex: 0,
currents: 0,
styles: {},
swiperData: {
zy: [],
wq: []
}
}
},
onLoad(e) {
let that = this
this.styles = uni.getMenuButtonBoundingClientRect()
if (e.jsData) {
this.jsData = JSON.parse(decodeURIComponent(e.jsData))
this.getdirverDetails(this.jsData.id)
}
uni.$on('updateDriver', function(e = that.jsData.id) {
console.log('更新')
that.getdirverDetails(e)
})
console.log('onLoad')
},
onShow() {
if(this.jsData.id){
this.getdirverDetails(this.jsData.id)
}
console.log('show')
// if (this.jsData!==null){
// this.getdirverDetails(this.jsData.id)
// }
},
methods: {
copy(text) {
uni.setClipboardData({
data: text,
});
},
dirverIndexFn(e){
if(e){
this.dirverIndex = 1;this.current=1
}else{
this.dirverIndex = 0;this.current=0
}
},
titleIndexFn(e){
this.titleIndex = e
console.log(e,'------')
},
getdirverDetails(e) {
driverManagement.getdirverDetails(e).then(res => {
this.dirverDetails = res.data
this.switchOpen = this.dirverDetails.customerInfoVo.enableMark ? true : false
if (res.data.customerCardVos.length == 0) return
this.swiperData.wq = []
this.swiperData.zy = []
res.data.customerCardVos.forEach((item) => {
item.swiperOpen = true
if (item.companyNature == 0) {
this.swiperData.wq.push(item)
} else {
this.swiperData.zy.push(item)
}
})
tool.numberSetting([this.swiperData.wq,this.swiperData.zy,this.dirverDetails],['zyBalance','wqBalance','balance','rechargeBalance','chargeRechargeBalance','zyBalance','rebateBalance','consumeRebateBalance'],2)
this.seleFn(0, 1)
})
},
change(e) {
let that = this
uni.showModal({
content: e ? '确定要启用吗' : '确定要禁用吗',
success: (res) => {
if (res.confirm) {
that.dirverDetails.customerInfoVo.enableMark = e ? 1 : 0
driverManagement.updateCustomerEnable({
enableMark: that.dirverDetails.customerInfoVo.enableMark,
customerId:that.dirverDetails.customerInfoVo.customerId,
updateSource:'OMS-MINIAPP'
}).then(res => {
that.getdirverDetails(that.dirverDetails.customerInfoVo.customerId)
setTimeout(()=>{
uni.showToast({
title:'操作成功',
icon:'none'
})
},500)
})
console.log('用户点击确定');
} else if (res.cancel) {
that.switchOpen = !e
console.log('用户点击取消');
}
}
})
},
jump(e, w, j) {
switch (e) {
case -1:
uni.navigateBack()
break
case 0:
uni.navigateTo({
url: "../accountDetails/accountDetails?jsData=" + JSON.stringify(w)
})
break;
case 1:
uni.navigateTo({
url: "InformationModification?jsData=" + JSON.stringify(this.dirverDetails.customerInfoVo)
})
break;
case 2:
let data = {
customerId: this.dirverDetails.customerInfoVo.customerId,
customerCode: this.dirverDetails.customerInfoVo.userCode,
companyId: this.dirverDetails.customerInfoVo.companyId,
nickName: this.dirverDetails.customerInfoVo.userName,
companyName: this.dirverDetails.customerInfoVo.companyName,
companyNature: 0
};
uni.navigateTo({
url: '../addDiver/addOilCard?jsData=' + JSON.stringify(data)
})
break;
case 4:
let datas = {
customerId: this.dirverDetails.customerInfoVo.customerId,
customerCode: this.dirverDetails.customerInfoVo.userCode,
companyId: this.dirverDetails.customerInfoVo.companyId,
nickName: this.dirverDetails.customerInfoVo.userName,
companyName: this.dirverDetails.customerInfoVo.companyName,
companyNature: 1
};
uni.navigateTo({
url: '../addDiver/addOilCard?jsData=' + JSON.stringify(datas)
})
break;
case 3:
uni.navigateTo({
url: "./vehicleModification?jsData=" + JSON.stringify({
plateNumber:this.dirverDetails.customerInfoVo.plateNumber,
plateNumberCompany:this.dirverDetails.customerInfoVo.plateNumberCompany,
customerId:this.dirverDetails.customerInfoVo.customerId,
companyId:this.dirverDetails.customerInfoVo.companyId,
companyName:this.dirverDetails.customerInfoVo.companyName
})
})
break;
case 5:
let that = this
uni.navigateTo({
url: "../accountDetails/accountDetails?gr=" + JSON.stringify(Object.assign(w,{userName:that.dirverDetails.customerInfoVo.userName}))
})
break;
}
console.log('点击')
},
titleSeleFn(e) {
},
seleFn(e, j) {
this.seleindex = e
this.xTranslation = e * (60 + 50)
console.log(j, this.xTranslation)
this.swiperData.wq.forEach(item => {
if (j == 2) {
item.swiperOpen = true
return
}
if (item.accountState == j) {
item.swiperOpen = true
} else {
item.swiperOpen = false
}
})
console.log(this.swiperData.wq)
this.currents = 0
}
}
}
</script>
<style>
.gxtip{
width: 69rpx;
height: 34rpx;
background: #F9C77B;
color: #FFFFFF;
font-size: 24rpx;
display: flex;
align-items: center;
justify-content: center;
}
.typeyuan {
background-color: #17A00E;
width: 14rpx;
height: 14rpx;
border-radius: 50px;
margin-right: 6rpx;
}
.seletypeyuan {
background-color: red;
width: 14rpx;
height: 14rpx;
border-radius: 50px;
margin-right: 6rpx;
}
.tbb {
width: 66rpx;
height: 40rpx;
background: #FD9500;
border-radius: 20rpx 0px 20rpx 2rpx;
font-size: 20rpx;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
margin-left: 16rpx;
}
.uni-navbar__header-btns-right {
padding: 0 !important;
}
.sele_tiao {
width: 52rpx;
position: absolute;
height: 5rpx;
background-color: #2866FF;
bottom: 0;
transition: all .5s;
transform: translateX(0);
}
.navbar_seleItem {
color: #2866FF;
}
.navbar_item {
box-sizing: border-box;
}
.navbar {
display: flex;
margin-top: 20rpx;
font-size: 26rpx;
color: #999999;
margin-left: 22rpx;
border-bottom: 1px solid #F0F0F0;
padding-bottom: 6rpx;
position: relative;
}
.swiper_car_item_div {
/* margin-top: 10rpx; */
}
.swiper_car_item_price {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
margin-left: 20rpx;
}
.swiper_car_item_name {
font-size: 26rpx;
font-family: PingFang SC;
font-weight: 500;
color: #999999;
}
.swiper_car_item_title {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #333333;
width: 100%;
display: flex;
align-items: center;
}
.swiper_car_item {
background: #F5FCFF;
border-radius: 12px;
width: 98%;
height: 100%;
font-size: 26rpx;
padding: 32rpx 20rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
/* flex-wrap: wrap; */
justify-content: space-between;
}
.swiper_car {
margin-top: 23rpx;
width: 100%;
height: 233rpx;
}
.jiaobiao {
width: 8rpx;
height: 32rpx;
background-color: #2866FF;
margin-right: 14rpx;
align-items: center;
}
.dirver_account_car_header {
color: #333333;
font-size: 28rpx;
display: flex;
}
.dirver_account_title_tiao {
--xwidth: calc((100% - 62rpx) / 2);
position: absolute;
bottom: 0;
height: 5rpx;
width: var(--xwidth);
background: #2866FF;
transition: all 0.3s;
}
.dirver_account_sele_title_tiao {
--xwidth: calc((100% - 62rpx) / 2);
--x: calc(100% + 62rpx);
position: absolute;
bottom: 0;
height: 5rpx;
width: var(--xwidth);
background: #2866FF;
transform: translateX(var(--x));
transition: all 0.3s;
}
.dirver_account_car {
margin-top: 26rpx;
background: #FFFFFF;
box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
border-radius: 10rpx;
padding: 26rpx 41rpx;
box-sizing: border-box;
height: 365rpx;
}
.dirver_account_sele_title {
font-size: 32rpx;
font-family: PingFang SC;
font-weight: bold;
color: #999999;
}
.dirver_account_title {
color: #000000;
font-size: 32rpx;
font-weight: 600;
margin-left: 40rpx;
display: flex;
gap: 62rpx;
padding-bottom: 10rpx;
position: relative;
width: fit-content;
transition: all 0.3s;
}
.dirver_account {
margin-top: 40rpx;
width: 100vw;
box-sizing: border-box;
padding: 0 40rpx;
}
.dirver_car_footer_felx_tip {
font-size: 22rpx;
font-family: PingFang SC;
font-weight: 500;
color: #BBBBBB;
margin-top: 6rpx;
}
.dirver_car_footer_felx_top {
font-size: 28rpx;
font-family: PingFang SC;
font-weight: 500;
color: #000000;
}
.dirver_car_footer_felx {
flex: 1;
text-align: center;
}
.dirver_car_body_right_butten_top {
font-size: 24rpx;
color: #BBBBBB;
padding: 9rpx 20rpx;
}
.dirver_car_body_right_selebutten {
font-size: 28rpx;
color: #333333;
height: 97.5rpx;
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
background: #FFFFFF;
width: 127rpx;
box-sizing: border-box;
/* border-left: 2rpx solid #2866FF; */
}
/* .header_tiao{
width: 5rpx;
height: calc((100% / 2) - 10px);
background-color: #2866FF;
position: absolute;
} */
.dirver_car_body_right_butten_seleitem {
/* background: #2866FF; */
box-sizing: border-box;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
border-left: 5rpx solid #2866FF;
color: #333333;
}
.dirver_car_body_right_butten_item {
background: #F1F1F1;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.dirver_car_body_right_butten {
font-size: 28rpx;
color: #BBBBBB;
flex: 1;
display: flex;
box-sizing: border-box;
width: 127rpx;
padding: 20rpx 0;
}
.dirver_car_body_right {
display: flex;
flex-direction: column;
/* justify-content: space-between; */
position: relative;
}
.name {
display: flex;
margin-top: 7rpx;
align-items: center;
}
.dirver_car_body_left_id {
color: #333333;
font-size: 22rpx;
display: flex;
justify-content: space-between;
align-items: center;
}
.dirver_car_body_left {
flex: 1;
box-sizing: border-box;
padding: 20rpx;
}
.dirver_car_body_right {
flex-shrink: 1;
position: relative;
}
.dirver_car_footer {
height: 137rpx;
background: #FFFFFF;
box-shadow: 0px 3px 9px 0px rgba(88, 88, 88, 0.2);
border-radius: 11rpx;
margin-top: 9rpx;
display: flex;
align-items: center;
}
.dirver_car_body {
height: 195rpx;
background: #FFFFFF;
border-radius: 12rpx;
display: flex;
/* padding: 27rpx; */
overflow: hidden;
}
.dirver_car {
padding: 0 40rpx;
color: #333333;
}
.header_seach_butten {
font-size: 24rpx !important;
display: flex !important;
align-items: center !important;
margin: 0 !important;
flex-shrink: 1;
margin-left: 9rpx !important;
background: #FFFFFF !important;
justify-content: center;
}
.uni-easyinput__content {
height: 80rpx;
}
.uni-easyinput {
height: 80rpx;
}
.header_seach_seach {
display: flex;
height: 80rpx;
margin-top: 23rpx;
}
.header_seach_title {
display: flex;
align-items: center;
}
.header_seach {
font-size: 26rpx;
padding: 0 40rpx;
}
.uni-navbar--border {
border: 0px !important;
}
.header {
/* background-color: #007AFF; */
color: white;
/* height: 403rpx; */
/* background-image: url('https://xoi-support.oss-cn-hangzhou.aliyuncs.com/星油admin小程序/sjbj.png'); */
/* background-size: 100% 100%; */
position: relative;
font-size: 28rpx;
}
.copy {
position: relative;
top: 7rpx;
display: inline-block;
margin-left: 15rpx;
width: 32rpx;
height: 32rpx;
background: url('../../static/copy.png') 100%/ 100%;
}
</style>