2025-03-23 09:29:40 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<view class="seach">
|
|
|
|
|
|
<view class="neibox">
|
|
|
|
|
|
会员编号
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="seach_i">
|
|
|
|
|
|
<u--input class="these" v-model="queryParams.memberCode">
|
|
|
|
|
|
<template slot='suffix'>
|
|
|
|
|
|
<view class="seatch_r">
|
|
|
|
|
|
<u-icon @click="getDataList" name="search" size="22" color="#fff"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
</u--input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="neibox" @click="popShow = true">
|
|
|
|
|
|
筛选
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="mainbox">
|
|
|
|
|
|
<view class="main_top">
|
|
|
|
|
|
<view class="top_flex" v-for="item,index in avaerInfoList" :key="index">
|
|
|
|
|
|
<img class="theimg" :src="item.value" alt="">
|
|
|
|
|
|
<view class="fle2">{{item.name}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="main_bottom">
|
|
|
|
|
|
<view class="scoll_main" ref="scrollMain" @touchstart="handleTouchStart" @touchmove="handleTouchMove"
|
|
|
|
|
|
@touchend="handleTouchEnd">
|
|
|
|
|
|
<TreeChart4 :size="size" :json="data" :class="{ landscape: landscape.length }"
|
|
|
|
|
|
@click-node="clickNode" @click-top='clickTop' />
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<u-popup :show="popShow" mode="right" @close="popShow = false" :closeOnClickOverlay="false">
|
|
|
|
|
|
<view class="rightPopup">
|
|
|
|
|
|
<view class="popup_top">
|
|
|
|
|
|
<view @click="()=>{getDataList(),popShow = false}">筛选</view>
|
2025-04-01 21:35:18 +08:00
|
|
|
|
<view class="top_red" @click="popShow = false">{{'返回'}}</view>
|
2025-03-23 09:29:40 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
<view class="typesBox">
|
|
|
|
|
|
<view class="typeTitle" @click='listShow=true'>
|
|
|
|
|
|
结算期数
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="choiceBox">
|
|
|
|
|
|
<view class="inputbox" @click="listShow=true">
|
|
|
|
|
|
<view class="">
|
|
|
|
|
|
{{settleName?settleName:"请选择"}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<u-icon name="arrow-right" size="24rpx" color="#090000"></u-icon>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="typesBox">
|
|
|
|
|
|
<view class="typeTitle">
|
|
|
|
|
|
代数
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="choiceBox">
|
|
|
|
|
|
<u--input v-model="queryParams.level"
|
|
|
|
|
|
style="background-color: rgba(255, 234, 233, 0.65);border-color:rgba(255, 234, 233, 0.65)!important;"
|
|
|
|
|
|
placeholder="请输入" border="surround" shape='circle'></u--input>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
<view class="popup_bottom">
|
|
|
|
|
|
<view class="bottom_btn thebtn1" @click="clearAll">清空筛选条件</view>
|
2025-04-01 21:35:18 +08:00
|
|
|
|
<view class="bottom_btn thebtn2" @click="()=>{getDataList(),popShow = false}">{{'确定'}}
|
2025-03-23 09:29:40 +08:00
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<u-picker @cancel='listShow=false' :show="listShow" ref="uPicker" :columns="memberSettlePeriodList"
|
|
|
|
|
|
@confirm="confirm" keyName='settleDate'></u-picker>
|
|
|
|
|
|
|
|
|
|
|
|
</u-popup>
|
|
|
|
|
|
<u-popup :show="isPop" closeable mode="center" round='10' @close="isPop=false">
|
|
|
|
|
|
<view class="ispop_box ">
|
|
|
|
|
|
|
|
|
|
|
|
<view class="Poster1">
|
|
|
|
|
|
<view class="pop_top">
|
|
|
|
|
|
<view class="pop_top">
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.avatarUrl"
|
|
|
|
|
|
:src=" 'data:image/png;base64,' + popMould.avatarUrlBase64" mode="aspectFit"
|
|
|
|
|
|
class="poster1"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view>
|
|
|
|
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.countryUrl2"
|
|
|
|
|
|
:src="'data:image/png;base64,' +popMould.countryUrl2Base64" mode="aspectFit"
|
|
|
|
|
|
class="poster2"></image>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="top_right">
|
|
|
|
|
|
<image crossorigin="anonymous" data-etype="image" :data-enode="popMould.settleCountryUrl2"
|
|
|
|
|
|
:src="'data:image/png;base64,' + popMould.settleCountryUrl2Base64" mode="aspectFit"
|
|
|
|
|
|
class="poster2"></image>
|
|
|
|
|
|
<view style="margin-top: 18rpx;">
|
|
|
|
|
|
结算国家
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="pop_center">
|
|
|
|
|
|
<view class="center_flex">
|
|
|
|
|
|
<view class="c1">会员编号</view>
|
|
|
|
|
|
<view class="c2">{{popMould.memberCode}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="center_flex">
|
|
|
|
|
|
<view class="c1">会员姓名</view>
|
|
|
|
|
|
<view class="c2">{{popMould.name}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="center_flex">
|
|
|
|
|
|
<view class="c1">支付时间</view>
|
|
|
|
|
|
<view class="c2">{{popMould.payDate}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="pop_bottom">
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt1">业绩(PV)</view>
|
|
|
|
|
|
<view class="bt1">左区</view>
|
|
|
|
|
|
<view class="bt1">右区</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">真实新增</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftRealNewPv}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightRealNewPv}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">首购新增</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftFirstPurchaseAdd}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightFirstPurchaseAdd}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">复购新增</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">真实累计</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftRealTotal}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightRealTotal}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">首购累计</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftFirstTotal}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightFirstTotal}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">复购累计</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftRepeatPurchaseTotal}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightRepeatPurchaseTotal}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">首购结余</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftFirstSurplus}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightFirstSurplus}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="b_flex">
|
|
|
|
|
|
<view class="bt2">复购结余</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.leftRepeatPurchaseSurplus}}</view>
|
|
|
|
|
|
<view class="bt2">{{popMould.rightRepeatPurchaseSurplus}}</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="btn_box">
|
|
|
|
|
|
<view class="small-btn" @click="downImage('Poster1')">下载图片</view>
|
|
|
|
|
|
<view class="small-text-btn" @click="copyText()">复制文字</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</u-popup>
|
|
|
|
|
|
<Eposter width="750" height="1334" :list="list" backgroundColor="rgb(255, 255, 255)" @on-success="onSuccess"
|
|
|
|
|
|
ref="Eposter">
|
|
|
|
|
|
</Eposter>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import html2canvas from 'html2canvas';
|
|
|
|
|
|
import TreeChart4 from "@/components/architectures/resettleSO4.vue";
|
|
|
|
|
|
import Eposter from '@/components/architectures/Poster.vue';
|
|
|
|
|
|
|
|
|
|
|
|
import * as arc from '@/config/architecture.js'
|
|
|
|
|
|
export default {
|
|
|
|
|
|
components: {
|
|
|
|
|
|
TreeChart4,
|
|
|
|
|
|
Eposter
|
|
|
|
|
|
},
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
avaerInfoList: [],
|
|
|
|
|
|
treeData: [],
|
|
|
|
|
|
queryParams: {
|
|
|
|
|
|
memberSettlePeriodId: "", //期数
|
|
|
|
|
|
memberCode: "", //会员编号
|
|
|
|
|
|
level: 3, //代数
|
|
|
|
|
|
type: 4
|
|
|
|
|
|
},
|
|
|
|
|
|
memberSettlePeriodList: [], //期数
|
|
|
|
|
|
popShow: false,
|
|
|
|
|
|
listShow: false,
|
|
|
|
|
|
settleName: "",
|
|
|
|
|
|
data: {},
|
|
|
|
|
|
size: 0.8,
|
|
|
|
|
|
landscape: [],
|
|
|
|
|
|
popMould: {},
|
|
|
|
|
|
isPop: false,
|
|
|
|
|
|
touchStartPosition1: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
touchStartPosition2: {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
},
|
|
|
|
|
|
initialDistance: 0,
|
|
|
|
|
|
list: []
|
|
|
|
|
|
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
onLoad() {
|
|
|
|
|
|
this.getAvarerInfo();
|
|
|
|
|
|
this.getDataList()
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
//复制文字
|
|
|
|
|
|
copyText() {
|
|
|
|
|
|
let self = this;
|
|
|
|
|
|
let md = self.popMould;
|
|
|
|
|
|
let text =
|
|
|
|
|
|
`会员编号：${md.memberCode} \n会员姓名：${md.name}支付时间：${md.payDate} \n业绩(PV) 左区 右区 \n真实新增 ${md.leftRealNewPv} ${md.rightRealNewPv} \n首购新增 ${md.leftFirstPurchaseAdd} ${md.rightFirstPurchaseAdd} \n复购新增 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n真实累计 ${md.leftRealTotal} ${md.rightRealTotal} \n首购累计 ${md.leftFirstTotal} ${md.rightFirstTotal} \n复购累计 ${md.leftRepeatPurchaseTotal} ${md.rightRepeatPurchaseTotal} \n首购结余 ${md.leftFirstSurplus} ${md.rightFirstSurplus} \n复购结余 ${md.leftRepeatPurchaseSurplus} ${md.rightRepeatPurchaseSurplus} \n`;
|
|
|
|
|
|
uni.setClipboardData({
|
|
|
|
|
|
data: text,
|
|
|
|
|
|
success: function(res) {
|
|
|
|
|
|
uni.getClipboardData({
|
|
|
|
|
|
success: function(res) {
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
title: '复制成功'
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
//下载图片
|
|
|
|
|
|
downImage(elClass) {
|
|
|
|
|
|
this.$refs.Eposter.createForElRect(elClass, false);
|
|
|
|
|
|
},
|
|
|
|
|
|
downloadImg() {
|
|
|
|
|
|
let self = this;
|
|
|
|
|
|
let element = document.querySelector('.Poster1');
|
|
|
|
|
|
uni.showLoading({
|
|
|
|
|
|
title: '图片保存中'
|
|
|
|
|
|
});
|
|
|
|
|
|
html2canvas(element).then(function(canvas) {
|
|
|
|
|
|
let dataURL = canvas.toDataURL('image/jpeg');
|
|
|
|
|
|
let link = document.createElement('a');
|
|
|
|
|
|
link.style.display = 'none';
|
|
|
|
|
|
link.href = dataURL;
|
|
|
|
|
|
link.download = 'image.jpg';
|
|
|
|
|
|
document.body.appendChild(link);
|
|
|
|
|
|
link.click();
|
|
|
|
|
|
document.body.removeChild(link);
|
|
|
|
|
|
uni.showToast({
|
|
|
|
|
|
icon: 'none',
|
|
|
|
|
|
title: '保存成功',
|
|
|
|
|
|
duration: 2000
|
|
|
|
|
|
});
|
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
|
}).catch(function(error) {
|
|
|
|
|
|
uni.hideLoading();
|
|
|
|
|
|
uni.showModal({
|
|
|
|
|
|
title: '保存失败'
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
onSuccess(val) {
|
|
|
|
|
|
this.posterImg = val;
|
|
|
|
|
|
this.downloadImg(this.posterImg);
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
handleTouchStart(event) {
|
|
|
|
|
|
const touch1 = event.touches[0];
|
|
|
|
|
|
const touch2 = event.touches[1];
|
|
|
|
|
|
if (touch2) {
|
|
|
|
|
|
this.touchStartPosition1 = {
|
|
|
|
|
|
x: touch1.pageX,
|
|
|
|
|
|
y: touch1.pageY
|
|
|
|
|
|
};
|
|
|
|
|
|
this.touchStartPosition2 = {
|
|
|
|
|
|
x: touch2.pageX,
|
|
|
|
|
|
y: touch2.pageY
|
|
|
|
|
|
};
|
|
|
|
|
|
this.initialDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
handleTouchMove(event) {
|
|
|
|
|
|
const touch1 = event.touches[0];
|
|
|
|
|
|
const touch2 = event.touches[1];
|
|
|
|
|
|
if (touch2) {
|
|
|
|
|
|
const currentDistance = Math.hypot(touch2.pageX - touch1.pageX, touch2.pageY - touch1.pageY);
|
|
|
|
|
|
const scale = currentDistance / this.initialDistance;
|
|
|
|
|
|
this.size = this.size * scale;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
handleTouchEnd() {
|
|
|
|
|
|
this.touchStartPosition1 = {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
};
|
|
|
|
|
|
this.touchStartPosition2 = {
|
|
|
|
|
|
x: 0,
|
|
|
|
|
|
y: 0
|
|
|
|
|
|
};
|
|
|
|
|
|
this.initialDistance = 0;
|
|
|
|
|
|
},
|
|
|
|
|
|
clickNode(e) {
|
|
|
|
|
|
let self = this;
|
|
|
|
|
|
if (e.memberCode) {
|
|
|
|
|
|
|
|
|
|
|
|
arc.getUrlBase({
|
|
|
|
|
|
countryUrl2: e.countryUrl2,
|
|
|
|
|
|
settleCountryUrl2: e.settleCountryUrl2,
|
|
|
|
|
|
avatarUrl: e.avatarUrl,
|
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
|
self.popMould = e;
|
|
|
|
|
|
self.popMould.countryUrl2Base64 = res.countryUrl2Base64;
|
|
|
|
|
|
self.popMould.settleCountryUrl2Base64 = res.settleCountryUrl2Base64;
|
|
|
|
|
|
self.popMould.avatarUrlBase64 = res.avatarUrlBase64;
|
|
|
|
|
|
self.isPop = true;
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
clickTop(e) {
|
|
|
|
|
|
let that = this;
|
|
|
|
|
|
if (e) {
|
|
|
|
|
|
that.queryParams.memberCode = e.memberCode
|
|
|
|
|
|
that.getDataList()
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
confirm(e) {
|
|
|
|
|
|
this.queryParams.memberSettlePeriodId = e.value[0].pkId
|
|
|
|
|
|
this.settleName = e.value[0].settleDate
|
|
|
|
|
|
this.listShow = false
|
|
|
|
|
|
},
|
|
|
|
|
|
getAvarerInfo() {
|
|
|
|
|
|
arc.getAvarerInfo().then((res) => {
|
|
|
|
|
|
this.avaerInfoList = res.data;
|
|
|
|
|
|
});
|
|
|
|
|
|
arc.getMemberSettlePeriod().then(res => {
|
|
|
|
|
|
this.memberSettlePeriodList = [res.data]
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
getDataList() {
|
|
|
|
|
|
arc.getAzFramework(this.queryParams).then((res) => {
|
|
|
|
|
|
this.data = res.data[0];
|
|
|
|
|
|
});
|
|
|
|
|
|
},
|
|
|
|
|
|
clearAll() {
|
|
|
|
|
|
this.popShow = false
|
|
|
|
|
|
this.settleName = ""
|
|
|
|
|
|
this.queryParams = {
|
|
|
|
|
|
memberSettlePeriodId: "", //期数
|
|
|
|
|
|
memberCode: "", //会员编号
|
|
|
|
|
|
level: 3, //代数
|
|
|
|
|
|
type: 4
|
|
|
|
|
|
}
|
|
|
|
|
|
this.getDataList()
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.ispop_box {
|
|
|
|
|
|
padding: 27rpx;
|
|
|
|
|
|
padding-top: 60rpx;
|
|
|
|
|
|
width: 670rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
|
|
|
|
.pop_top {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
|
|
.poster1 {
|
|
|
|
|
|
height: 88rpx;
|
|
|
|
|
|
width: 88rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.poster2 {
|
|
|
|
|
|
width: 88rpx;
|
|
|
|
|
|
height: 54rpx;
|
|
|
|
|
|
border-radius: 10rpx;
|
|
|
|
|
|
margin-left: 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.top_right {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pop_center {
|
|
|
|
|
|
.center_flex {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.c1 {
|
|
|
|
|
|
width: 20%;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.c2 {
|
|
|
|
|
|
width: 80%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
background: #F3F3F3;
|
|
|
|
|
|
border: 2rpx solid #EEEEEE;
|
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
|
padding: 10rpx 0;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.pop_bottom {
|
|
|
|
|
|
margin: 20rpx 0;
|
|
|
|
|
|
border-top: 2rpx solid #eeeeee;
|
|
|
|
|
|
border-top: 2rpx solid #eeeeee;
|
|
|
|
|
|
|
|
|
|
|
|
.b_flex {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
|
|
|
|
|
|
.bt1 {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 22rpx;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.bt2 {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin-top: 22rpx;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
background: #F3F3F3;
|
|
|
|
|
|
border: 2rpx solid #EEEEEE;
|
|
|
|
|
|
border-radius: 8rpx;
|
|
|
|
|
|
padding: 12rpx 0;
|
|
|
|
|
|
margin: 11rpx 18rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.btn_box {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
|
|
|
|
|
|
.small-btn {
|
|
|
|
|
|
width: 312rpx;
|
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
|
background: #FB3024;
|
|
|
|
|
|
border-radius: 34rpx;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #FFFFFF;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.small-text-btn {
|
|
|
|
|
|
width: 312rpx;
|
|
|
|
|
|
height: 72rpx;
|
|
|
|
|
|
border: 1px solid #FB3024;
|
|
|
|
|
|
border-radius: 34rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
color: #FB3024;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.operate-btnboxs {
|
|
|
|
|
|
padding: 29rpx 26rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
|
|
|
|
|
|
.d-c-c {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
|
|
|
|
|
|
.operate-btn {
|
|
|
|
|
|
width: 64rpx;
|
|
|
|
|
|
height: 64rpx;
|
|
|
|
|
|
margin: 5rpx;
|
|
|
|
|
|
// background: #F2F2F2;
|
|
|
|
|
|
border-radius: 5rpx;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.rightPopup {
|
|
|
|
|
|
width: 645rpx;
|
|
|
|
|
|
height: 100%;
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
|
|
.popup_top {
|
|
|
|
|
|
padding: 25rpx;
|
|
|
|
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
|
|
|
|
|
|
.top_red {
|
|
|
|
|
|
color: #FB3024;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.popup_bottom {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: absolute;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
|
|
|
|
|
|
.bottom_btn {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
padding: 20rpx 0;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.thebtn1 {
|
|
|
|
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.thebtn2 {
|
|
|
|
|
|
background-color: #FB3024;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.typesBox {
|
|
|
|
|
|
margin-top: 40rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.typeTitle {
|
|
|
|
|
|
padding: 0 24rpx;
|
|
|
|
|
|
font-size: 30rpx;
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.choiceBox {
|
|
|
|
|
|
padding: 0 12rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
margin-top: 17rpx;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
|
|
.inputbox {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 20rpx 32rpx;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flex_btn {
|
|
|
|
|
|
background-color: rgba(255, 234, 233, 0.65);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
padding: 14rpx 48rpx;
|
|
|
|
|
|
border-radius: 26rpx;
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #333333;
|
|
|
|
|
|
margin: 17rpx 5rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.timesbtn {
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.selectbtn {
|
|
|
|
|
|
background-color: #C8161D;
|
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.seach {
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
padding: 20rpx 23rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
position: relative;
|
|
|
|
|
|
border-bottom: 2rpx solid #eee;
|
|
|
|
|
|
|
|
|
|
|
|
.these {
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
padding: 10rpx 0 !important;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.seach_i {
|
|
|
|
|
|
padding: 0 20rpx;
|
|
|
|
|
|
border-radius: 34rpx;
|
|
|
|
|
|
background: #fff;
|
|
|
|
|
|
flex: 1;
|
|
|
|
|
|
background: #f5f6f8;
|
|
|
|
|
|
margin: 0 20rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.neibox {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-family: PingFang SC;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.seatch_r {
|
|
|
|
|
|
background: #fb3024;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
padding: 8rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mainbox {
|
|
|
|
|
|
padding: 26rpx 22rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.main_top {
|
|
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
padding: 20rpx 4rpx;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-wrap: wrap;
|
|
|
|
|
|
|
|
|
|
|
|
.top_flex {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
margin: 15rpx 20rpx;
|
|
|
|
|
|
// justify-content: center;
|
|
|
|
|
|
width: 98rpx;
|
|
|
|
|
|
|
|
|
|
|
|
.theimg {
|
|
|
|
|
|
width: 92rpx;
|
|
|
|
|
|
height: 92rpx;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.flex2 {
|
|
|
|
|
|
font-size: 26rpx;
|
|
|
|
|
|
font-family: Source Han Sans CN;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
color: #666666;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.main_bottom {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
height: calc(100vh - 600rpx);
|
|
|
|
|
|
margin-top: 25rpx;
|
|
|
|
|
|
background-color: #ffffff;
|
|
|
|
|
|
padding: 38rpx 0;
|
|
|
|
|
|
|
|
|
|
|
|
border-radius: 20rpx;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.scoll_main {
|
|
|
|
|
|
width: 700rpx;
|
|
|
|
|
|
height: calc(100vh - 600rpx);
|
|
|
|
|
|
overflow: auto;
|
|
|
|
|
|
|
|
|
|
|
|
// overflow: scroll;
|
|
|
|
|
|
// overflow-x: auto;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
