|
@@ -1,572 +0,0 @@
|
|
|
-<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>
|
|
|