|
|
@@ -0,0 +1,572 @@
|
|
|
+<template>
|
|
|
+ <view class="container">
|
|
|
+ <view class="title">
|
|
|
+ <view class="title-text">{{title}}</view>
|
|
|
+ </view>
|
|
|
+ <view class="header">
|
|
|
+ <view class="query">
|
|
|
+ <u-row customStyle="margin-bottom: 10px" gutter="20">
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ @focus="timeShow = true"
|
|
|
+ v-model="startTimeXd"
|
|
|
+ placeholder="开始日期 ~ 结束日期"
|
|
|
+ prefixIcon="calendar"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="query-btn" @click="timeShow = !timeShow">
|
|
|
+ <view class="query-btn-icon">
|
|
|
+ </view>
|
|
|
+ <view class="query-btn-text">筛选</view>
|
|
|
+ </view>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ </view>
|
|
|
+ <view class="filter">
|
|
|
+ <view class="item-one">
|
|
|
+ <view class="type-icon-hexiao"></view>
|
|
|
+ <view class="type-data">
|
|
|
+ <view class="number">{{hexiaoNumber}}</view>
|
|
|
+ <view class="text">核销</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-one" v-if="type === 2">
|
|
|
+ <view class="type-icon-xundian"></view>
|
|
|
+ <view class="type-data">
|
|
|
+ <view class="number">{{ xundianNumber}}</view>
|
|
|
+ <view class="text">巡店</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-one" v-if="type !== 3">
|
|
|
+ <view class="type-icon-shanghuo"></view>
|
|
|
+ <view class="type-data">
|
|
|
+ <view class="number">{{ shangHuoNumber}}</view>
|
|
|
+ <view class="text">上货</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="item-one" v-if="type === 3">
|
|
|
+ <view class="type-icon-xiadan"></view>
|
|
|
+ <view class="type-data">
|
|
|
+ <view class="number">{{xiaDanNumber}}</view>
|
|
|
+ <view class="text">下单</view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="content">
|
|
|
+ <view class="t-one">
|
|
|
+ <view class="t-text">核销和上货趋势统计</view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts
|
|
|
+ type="line"
|
|
|
+ :opts="opts"
|
|
|
+ :chartData="chartData"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="t-one" v-show=" type == 2">
|
|
|
+ <view class="t-text">巡店统计</view>
|
|
|
+ <view class="charts-box">
|
|
|
+ <qiun-data-charts
|
|
|
+ type="column"
|
|
|
+ :opts="opts"
|
|
|
+ :chartData="chartDataXd"
|
|
|
+ />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ <u-popup :show="show" mode="bottom" @close="show = false" >
|
|
|
+ <view class="popup-content">
|
|
|
+ <view class="popup-text">筛选</view>
|
|
|
+ <u-row customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="explain">选择日期</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ v-model="startTimeXd"
|
|
|
+ placeholder="开始日期 ~ 结束日期"
|
|
|
+ prefixIcon="calendar"
|
|
|
+ prefixIconStyle="font-size: 22px;color: #909399"
|
|
|
+ @focus="timeShow = true"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <u-row customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="explain">门店名称</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ border="surround"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <u-row customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="explain">业务员</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ border="surround"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <u-row customStyle="margin-bottom: 10px">
|
|
|
+ <u-col span="3">
|
|
|
+ <view class="explain">订单编号</view>
|
|
|
+ </u-col>
|
|
|
+ <u-col span="9">
|
|
|
+ <u--input
|
|
|
+ placeholder="请输入内容"
|
|
|
+ border="surround"
|
|
|
+ ></u--input>
|
|
|
+ </u-col>
|
|
|
+ </u-row>
|
|
|
+ <view class="popup-btn">
|
|
|
+ <u-button class="popup-btn-one">搜索</u-button>
|
|
|
+ <u-button class="popup-btn-one" type="primary">重置</u-button>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </u-popup>
|
|
|
+ <u-calendar :minDate="minDate" :monthNumber="6" :show="timeShow" :mode="mode" @confirm="confirm" @close="timeShow = false"></u-calendar>
|
|
|
+
|
|
|
+ </view>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import {getSalesTotal,getSalesTrend,getSalesmanSalesTotal,getSalesmanSalesTrend,getSalesmanVisitTrend,getStoreSalesSummary,getStoreSalesTrend} from "../../../api/hexiao";
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ storeId: 0,
|
|
|
+ ywyId:0,
|
|
|
+ minDate: new Date(new Date().setMonth(new Date().getMonth() - 2)),
|
|
|
+ maxDate: new Date(),
|
|
|
+ hexiaoNumber: 0,
|
|
|
+ xundianNumber: 0,
|
|
|
+ shangHuoNumber: 0,
|
|
|
+ xiaDanNumber: 0,
|
|
|
+ type: 1,
|
|
|
+ title: '',
|
|
|
+ startTime: '',
|
|
|
+ endTime: '',
|
|
|
+ startTimeXd: '',
|
|
|
+ timeShow: false,
|
|
|
+ mode: 'range',
|
|
|
+ show: false,
|
|
|
+ chartDataXd: {},
|
|
|
+ chartData: {},
|
|
|
+ //您可以通过修改 config-ucharts.js 文件中下标为 ['line'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
|
+ opts: {
|
|
|
+ height: 210,
|
|
|
+ color: ["#1890FF","#91CB74","#FAC858","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
|
+ padding: [15,10,0,15],
|
|
|
+ enableScroll: false,
|
|
|
+ legend: {},
|
|
|
+ xAxis: {
|
|
|
+ disableGrid: true
|
|
|
+ },
|
|
|
+ yAxis: {
|
|
|
+ gridType: "dash",
|
|
|
+ dashLength: 2
|
|
|
+ },
|
|
|
+ extra: {
|
|
|
+ line: {
|
|
|
+ type: "straight",
|
|
|
+ width: 2,
|
|
|
+ activeType: "hollow"
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ };
|
|
|
+ },
|
|
|
+ onLoad: function(options) {
|
|
|
+ //门店
|
|
|
+ if (options.type == 1){
|
|
|
+ this.title = '门店销售数据';
|
|
|
+ this.type = 1;
|
|
|
+ this.storeId = options.storeId;
|
|
|
+ this.initMenDian();
|
|
|
+ }
|
|
|
+ //业务员
|
|
|
+ if (options.type == 2){
|
|
|
+ this.title = '业务员销售数据';
|
|
|
+ this.type = 2;
|
|
|
+ this.ywyId = options.ywyId;
|
|
|
+ console.log(this.type);
|
|
|
+ this.initYWY();
|
|
|
+ }
|
|
|
+ //经销商
|
|
|
+ if (options.type == 3){
|
|
|
+ this.title = '经销商销售数据';
|
|
|
+ this.type = 3;
|
|
|
+ this.initJXS();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onReady() {
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ initMenDian() {
|
|
|
+ let that = this;
|
|
|
+ getStoreSalesSummary(this.startTime,this.endTime,this.storeId).then(res => {
|
|
|
+ if (res.code === 0){
|
|
|
+ that.hexiaoNumber = res.data.verificationTotal;
|
|
|
+ that.shangHuoNumber = res.data.activateTotal;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ });
|
|
|
+ getStoreSalesTrend(this.startTime,this.endTime,this.storeId).then(resData => {
|
|
|
+ if (resData.code === 0){
|
|
|
+ let apiResponse = resData.data;
|
|
|
+ // 提取日期列表并排序
|
|
|
+ let categories = apiResponse.map(item => {
|
|
|
+ // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
|
|
|
+ return item.date.split("-")[2]; // 这里提取日期中的日部分
|
|
|
+ });
|
|
|
+
|
|
|
+ // 排序日期列表
|
|
|
+ categories.sort((a, b) => {
|
|
|
+ return a.localeCompare(b);
|
|
|
+ })
|
|
|
+
|
|
|
+ // 按日期排序数据
|
|
|
+ let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
|
+
|
|
|
+ // 提取核销数据和上货数据
|
|
|
+ let verificationData = sortedData.map(item => item.verificationCount);
|
|
|
+ let activateData = sortedData.map(item => item.activateCount);
|
|
|
+ // 构造图表需要的格式
|
|
|
+ let resTb = {
|
|
|
+ categories: categories,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "核销",
|
|
|
+ data: verificationData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "上货",
|
|
|
+ data: activateData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(resTb));
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ initYWY() {
|
|
|
+ let that = this;
|
|
|
+ getSalesmanSalesTotal(this.startTime,this.endTime,this.ywyId).then(res => {
|
|
|
+ if (res.code === 0){
|
|
|
+ console.log(res.data);
|
|
|
+ that.hexiaoNumber = res.data.verificationTotal;
|
|
|
+ that.xundianNumber = res.data.visitTotal;
|
|
|
+ that.shangHuoNumber = res.data.activateTotal;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ });
|
|
|
+ getSalesmanSalesTrend(this.startTime,this.endTime,this.ywyId).then(res => {
|
|
|
+ if (res.code === 0){
|
|
|
+ console.log(res.data);
|
|
|
+ let apiResponse = res.data;
|
|
|
+ // 提取日期列表并排序
|
|
|
+ let categories = apiResponse.map(item => {
|
|
|
+ // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
|
|
|
+ return item.date.split("-")[2]; // 这里提取日期中的日部分
|
|
|
+ });
|
|
|
+
|
|
|
+ // 排序日期
|
|
|
+ categories.sort((a, b) => parseInt(a) - parseInt(b));
|
|
|
+
|
|
|
+ // 按日期排序数据
|
|
|
+ let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
|
+
|
|
|
+ // 提取核销数据和上货数据
|
|
|
+ let verificationData = sortedData.map(item => item.verificationCount);
|
|
|
+ let activateData = sortedData.map(item => item.activateCount);
|
|
|
+
|
|
|
+ // 构造图表需要的格式
|
|
|
+ let resTb = {
|
|
|
+ categories: categories,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "核销",
|
|
|
+ data: verificationData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "上货",
|
|
|
+ data: activateData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(resTb));
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ });
|
|
|
+ getSalesmanVisitTrend(this.startTime,this.endTime,this.ywyId).then(res => {
|
|
|
+ if (res.code === 0){
|
|
|
+ // 处理巡店趋势数据
|
|
|
+ let apiResponse = res.data;
|
|
|
+
|
|
|
+ // 提取日期列表（这里提取日部分）
|
|
|
+ let categories = apiResponse.map(item => {
|
|
|
+ return item.date.split("-")[2]; // 提取日期中的日部分
|
|
|
+ });
|
|
|
+
|
|
|
+ // 按日期排序数据
|
|
|
+ let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
|
+
|
|
|
+ // 提取巡店数据
|
|
|
+ let visitData = sortedData.map(item => item.visitCount || 0);
|
|
|
+
|
|
|
+ // 构造图表需要的格式（与selectedCode中格式一致）
|
|
|
+ let resFormat = {
|
|
|
+ categories: categories,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "巡店",
|
|
|
+ data: visitData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+
|
|
|
+ this.chartDataXd = JSON.parse(JSON.stringify(resFormat));
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ console.error(err);
|
|
|
+ });
|
|
|
+
|
|
|
+ },
|
|
|
+ initJXS() {
|
|
|
+ getSalesTotal(this.startTime,this.endTime).then(res => {
|
|
|
+ if (res.code === 0){
|
|
|
+ this.hexiaoNumber = res.data.orderTotal;
|
|
|
+ this.xiaDanNumber = res.data.verificationTotal;
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+
|
|
|
+ });
|
|
|
+ getSalesTrend(this.startTime,this.endTime).then(data => {
|
|
|
+ if (data.code === 0){
|
|
|
+ let apiResponse = data.data;
|
|
|
+ // 提取日期列表并排序
|
|
|
+ let categories = apiResponse.map(item => {
|
|
|
+ // 从日期中提取月日，例如 "2025-08-01" -> "08-01" -> "8/1" 或者只显示日 "1"
|
|
|
+ return item.date.split("-")[2];
|
|
|
+ })
|
|
|
+ categories.sort((a, b) => parseInt(a) - parseInt(b));
|
|
|
+ // 按日期排序数据
|
|
|
+ let sortedData = apiResponse.sort((a, b) => new Date(a.date) - new Date(b.date));
|
|
|
+ let verificationData = sortedData.map(item => item.verificationCount);
|
|
|
+ let orderCountData = sortedData.map(item => item.orderCount);
|
|
|
+ let res = {
|
|
|
+ categories: categories,
|
|
|
+ series: [
|
|
|
+ {
|
|
|
+ name: "核销",
|
|
|
+ data: verificationData
|
|
|
+ },
|
|
|
+ {
|
|
|
+ name: "下单",
|
|
|
+ data: orderCountData
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ this.chartData = JSON.parse(JSON.stringify(res));
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ },
|
|
|
+ confirm(e) {
|
|
|
+ this.startTime = e[0];
|
|
|
+ this.endTime = e[e.length -1];
|
|
|
+ this.startTimeXd = e[0]+' ~ '+e[e.length -1];
|
|
|
+ this.timeShow = false;
|
|
|
+ if (this.type == 1){
|
|
|
+ this.initMenDian();
|
|
|
+ }
|
|
|
+ if (this.type == 2){
|
|
|
+ this.initYWY();
|
|
|
+ }
|
|
|
+ if (this.type == 3){
|
|
|
+ this.initJXS();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped>
|
|
|
+.container {
|
|
|
+ background-image: url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/bgi_2.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ height: 100vh;
|
|
|
+ padding: 0px 10px;
|
|
|
+}
|
|
|
+.title-text{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #102A3C;
|
|
|
+ text-align: center;
|
|
|
+ height: 12vh;
|
|
|
+ line-height: 16vh;
|
|
|
+}
|
|
|
+ /* 请根据实际需求修改父元素尺寸，组件自动识别宽高 */
|
|
|
+ .charts-box {
|
|
|
+ width: 100%;
|
|
|
+ height: 210px;
|
|
|
+ }
|
|
|
+ .query-btn {
|
|
|
+ background-color: #409eff;
|
|
|
+ color: #fff;
|
|
|
+ padding: 20rpx;
|
|
|
+ border-radius: 10rpx;
|
|
|
+ height: 34rpx;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .query-btn-icon {
|
|
|
+ height: 32rpx;
|
|
|
+ width: 32rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/queryIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .query-btn-text {
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #F5F5F5;
|
|
|
+ }
|
|
|
+ .filter{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ align-items: center;
|
|
|
+ height: 160rpx;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0rpx 10rpx 20rpx 0rpx rgba(168,168,168,0.22);
|
|
|
+ border-radius: 12rpx;
|
|
|
+ border: 2px solid #FFFFFF;
|
|
|
+ }
|
|
|
+ .item-one{
|
|
|
+ display: flex;
|
|
|
+
|
|
|
+ }
|
|
|
+ .type-icon-hexiao {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/hexiaoIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .type-icon-xundian {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/xundianIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .type-icon-shanghuo {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/shanghuoIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .type-icon-xiadan {
|
|
|
+ height: 80rpx;
|
|
|
+ width: 80rpx;
|
|
|
+ background-image:
|
|
|
+ url("https://hyscancode.oss-cn-hangzhou.aliyuncs.com/xiaochengxu/cjx/xiadanIoc.png");
|
|
|
+ background-size: cover;
|
|
|
+ background-position: center;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ }
|
|
|
+ .number{
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #3B3638;
|
|
|
+ }
|
|
|
+ .text{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #84868A;
|
|
|
+ }
|
|
|
+ .type-data{
|
|
|
+ margin-left: 10rpx;
|
|
|
+ }
|
|
|
+ .t-one{
|
|
|
+ margin-top: 10px;
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .t-text {
|
|
|
+ position: relative;
|
|
|
+ padding-left: 10px; /* 为竖杠留出空间 */
|
|
|
+ font-size: 30rpx; /* 根据需要调整字体大小 */
|
|
|
+ color: #3B3638; /* 标题颜色 */
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+
|
|
|
+ .t-text::before {
|
|
|
+ content: ''; /* 必须设置 content 属性 */
|
|
|
+ position: absolute;
|
|
|
+ left: 0;
|
|
|
+ top: 50%;
|
|
|
+ transform: translateY(-50%); /* 垂直居中 */
|
|
|
+ width: 4px; /* 竖杠宽度 */
|
|
|
+ height: 16px; /* 竖杠高度 */
|
|
|
+ background-color: #1890FF; /* 蓝色 */
|
|
|
+ }
|
|
|
+ ::v-deep .u-input{
|
|
|
+ background-color: #fff;
|
|
|
+ }
|
|
|
+ .popup-content{
|
|
|
+ height: 45vh;
|
|
|
+ padding: 10px;
|
|
|
+ }
|
|
|
+ .popup-text{
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ color: #1C1E1D;
|
|
|
+ text-align: center;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ }
|
|
|
+ .popup-btn{
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ .popup-btn-one{
|
|
|
+ width: 275rpx;
|
|
|
+ height: 70rpx;
|
|
|
+ background: linear-gradient(0deg, #6FA4FE, #488CFF);
|
|
|
+ box-shadow: 0rpx 9rpx 16rpx 0rpx rgba(153,153,153,0.35);
|
|
|
+ border-radius: 35rpx;
|
|
|
+ }
|
|
|
+ .explain{
|
|
|
+ font-weight: 400;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #3B3638;
|
|
|
+ }
|
|
|
+</style>
|
