990 lines
23 KiB
Vue
990 lines
23 KiB
Vue
<!-- 统计页 -->
|
|
<template>
|
|
<view class="content">
|
|
<view class="c-top">
|
|
<view class="" @click="getback()">
|
|
<uni-icons type="left" size="18"></uni-icons>
|
|
</view>
|
|
<view class="c-title">业务统计</view>
|
|
<view class=""></view>
|
|
</view>
|
|
<view class="ail">
|
|
|
|
<!-- <view class="top-box">
|
|
<view class="t-top">
|
|
<view class="sis">
|
|
<view class="t-title">检测进行中</view>
|
|
<view class="t-num">{{threenum.workingNum}}</view>
|
|
</view>
|
|
<view class="sis">
|
|
<view class="t-title">当日订单</view>
|
|
<view class="t-num" >{{threenum.todayOrderNum}}</view>
|
|
</view>
|
|
<view class="sis">
|
|
<view class="t-title">当日结算订单</view>
|
|
<view class="t-num">{{threenum.workedNum}}</view>
|
|
</view>
|
|
</view>
|
|
</view> -->
|
|
<!-- ↓ 新增 -->
|
|
<view class="ping-bottom" style="margin-top: 2%;">
|
|
<view class="dinga">检测数量统计</view>
|
|
<view class=""></view>
|
|
<!-- <view class="dinga">选择时间</view> -->
|
|
</view>
|
|
<view style="width: 95%; margin: 5px auto;">
|
|
<uni-datetime-picker v-model="ranges" type="daterange" @maskClick="maskClick" />
|
|
</view>
|
|
|
|
|
|
<view class="top-box">
|
|
<view class="t-top">
|
|
<view class="sis">
|
|
<view class="t-title">订单数量</view>
|
|
<view class="t-num">{{data2.allNum || 0}}</view>
|
|
</view>
|
|
<view class="sis">
|
|
<view class="t-title">完成数量</view>
|
|
<view class="t-num" >{{data2.ywcNum || 0}}</view>
|
|
</view>
|
|
<view class="sis">
|
|
<view class="t-title">检测中数量</view>
|
|
<view class="t-num">{{data2.jxzNum || 0}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ping-bottom">
|
|
<view class="dinga">营业额统计</view>
|
|
<view class=""></view>
|
|
<!-- <view class="dinga">选择时间</view> -->
|
|
</view>
|
|
<view style="width: 95%; margin: 5px auto;">
|
|
<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />
|
|
</view>
|
|
|
|
<view class="top-box">
|
|
|
|
<view class="t-top">
|
|
<view class="sys">
|
|
<view class="t-title">公示价格</view>
|
|
<view class="t-num">{{data1.gsAmount || 0}}</view>
|
|
</view>
|
|
<view class="sys">
|
|
<view class="t-title">应收款</view>
|
|
<view class="t-num" >{{data1.ysAmount || 0}}</view>
|
|
</view>
|
|
<view class="sys">
|
|
<view class="t-title">已收款</view>
|
|
<view class="t-num">{{data1.yjsAmount || 0}}</view>
|
|
</view>
|
|
<view class="sys">
|
|
<view class="t-title">待收款</view>
|
|
<view class="t-num">{{data1.ysAmount - data1.yjsAmount || 0}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ping-bottom">
|
|
<view class="dinga">客户来源统计</view>
|
|
<!-- <view class="dinga" @click="goxiangqing(1)">更多<uni-icons type="right" size="12"></uni-icons></view> -->
|
|
</view>
|
|
|
|
<view class="top-box">
|
|
<view class="t-num" style="padding-top: 5%;" v-if="!data3">暂无数据...</view>
|
|
<view class="t-top" v-if="data3" v-for="(item,index) in data3">
|
|
<view class="sys2" @click="goCustomerDetail(item.remark)">
|
|
<view class="t-title">客户来源</view>
|
|
<view class="t-num">{{item.remark || ''}}</view>
|
|
|
|
</view>
|
|
|
|
<view class="sys2">
|
|
<view class="t-title">数量</view>
|
|
<view class="t-num">{{item.theNum || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys2">
|
|
<view class="t-title">公示金额</view>
|
|
<view class="t-num">{{item.theAmount || ''}}</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ping-bottom">
|
|
<view class="dinga">检测车型统计</view>
|
|
<view class="dinga" @click="goxiangqing(2)">更多<uni-icons type="right" size="12"></uni-icons></view>
|
|
</view>
|
|
|
|
<view class="top-box">
|
|
<view class="t-num" style="padding-top: 5%;" v-if="!data4[0]">暂无数据...</view>
|
|
<view class="t-top">
|
|
<view class="sys" v-if="data4[0]">
|
|
<view class="t-title">{{data4[0].goodsTitle || ''}}</view>
|
|
<view class="t-num">{{data4[0].theNum || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data4[1]">
|
|
<view class="t-title">{{data4[1].goodsTitle || ''}}</view>
|
|
<view class="t-num">{{data4[1].theNum || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data4[2]">
|
|
<view class="t-title">{{data4[2].goodsTitle || ''}}</view>
|
|
<view class="t-num">{{data4[2].theNum || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data4[3]">
|
|
<view class="t-title">{{data4[3].goodsTitle || ''}}</view>
|
|
<view class="t-num">{{data4[3].theNum || ''}}</view>
|
|
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ping-bottom">
|
|
<view class="dinga">待收款</view>
|
|
<view class="dinga" @click="goxiangqing(3)">更多<uni-icons type="right" size="12"></uni-icons></view>
|
|
</view>
|
|
|
|
<view class="top-box">
|
|
<view class="t-top">
|
|
<view class="t-num" v-if="!data5[0]">暂无数据...</view>
|
|
<view class="sys" v-if="data5[0]">
|
|
<view class="t-title">{{data5[0].theName || ''}}</view>
|
|
<view class="t-num">{{data5[0].theAmount || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data5[1]">
|
|
<view class="t-title">{{data5[1].theName || ''}}</view>
|
|
<view class="t-num">{{data5[1].theAmount || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data5[2]">
|
|
<view class="t-title">{{data5[2].theName || ''}}</view>
|
|
<view class="t-num">{{data5[2].theAmount || ''}}</view>
|
|
|
|
</view>
|
|
<view class="sys" v-if="data5[3]">
|
|
<view class="t-title">{{data5[3].theName || ''}}</view>
|
|
<view class="t-num">{{data5[3].theAmount || ''}}</view>
|
|
|
|
</view>
|
|
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
|
|
|
|
<view class="cont-box">
|
|
<view class="cont-title">成交金额(已收款)</view>
|
|
<view class="cont-title" style="font-size: 10px; color:#0D2E8D ;">最近7天已收款金额</view>
|
|
<view class="dis-t">
|
|
</view>
|
|
<qiun-data-charts
|
|
:ontouch='true'
|
|
type="line"
|
|
:opts="dopts"
|
|
:chartData="Amount"
|
|
/>
|
|
</view>
|
|
<view class="cont-box">
|
|
<view class="cont-title">检测数量</view>
|
|
<view class="cont-title" style="font-size: 10px; color:#0D2E8D ;">最近7天</view>
|
|
<view class="dis-t">
|
|
</view>
|
|
<qiun-data-charts
|
|
:ontouch='true'
|
|
type="line"
|
|
:opts="dopts"
|
|
:chartData="chartDataNum"
|
|
/>
|
|
</view>
|
|
|
|
<view class="cont-box">
|
|
<view class="cont-title">已收款金额(按车型)</view>
|
|
<view class="dis-t">
|
|
|
|
<view class="lan-you">
|
|
<view class="yi" :class="{'er' : qhindex == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex(index,item.unit)"> {{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
<qiun-data-charts
|
|
:ontouch='true'
|
|
type="column"
|
|
:opts="dopts"
|
|
:chartData="chartData1"
|
|
/>
|
|
</view>
|
|
<view class="cont-box">
|
|
<view class="cont-title">数量统计(按车型)</view>
|
|
<view class="dis-t">
|
|
|
|
<view class="lan-you">
|
|
|
|
<view class="yi" :class="{'er' : qhindex1 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex1(index,item.unit)"> {{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
<qiun-data-charts
|
|
:ontouch='true'
|
|
type="column"
|
|
:opts="dopts"
|
|
:chartData="chartData2"
|
|
/>
|
|
</view>
|
|
<view class="cont-box">
|
|
<view class="cont-title">检测合格率(按车型)</view>
|
|
<view class="dis-t">
|
|
|
|
<view class="lan-you">
|
|
|
|
<view class="yi" :class="{'er' : qhindex2 == index}" v-for="(item,index) in zilist" :key="index" @click="gbindex2(index,item.unit)"> {{item.text}}</view>
|
|
</view>
|
|
</view>
|
|
<qiun-data-charts
|
|
:ontouch='true'
|
|
type="column"
|
|
:opts="dopts1"
|
|
:chartData="chartData3"
|
|
/>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<u-popup :show="xling" @close="closexl" :round="10" @open="openxl">
|
|
<view class="popup-box">
|
|
<view class="sousuo">
|
|
<uni-icons type="search" size="22"></uni-icons>
|
|
<input type="text" v-model="searchValue" placeholder="请输入机构">
|
|
<text @click="getgetPartnerList()" >搜索 </text>
|
|
</view>
|
|
<view class="list-box">
|
|
<scroll-view class="list_scroll" scroll-y="true" >
|
|
<view class="list-qiu" v-for="(item,index) in qubu" :key="index">
|
|
<view class=""> <text class="tel">{{item.partnerName}}</text> </view>
|
|
<view class="banniu">
|
|
<text @click="xinxuanze(item.partnerId,item.partnerName)">选择</text>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</u-popup>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import config from '@/config'
|
|
import request from '../../utils/request';
|
|
|
|
export default{
|
|
data(){
|
|
return{
|
|
data1:'',
|
|
data2:'',
|
|
data3:[],
|
|
data4:'',
|
|
data5:'',
|
|
startTime:'2023-9-28',
|
|
endTime:'2023-9-28',
|
|
name:'全部机构',
|
|
single: '',
|
|
range: ['2023-9-28', '2023-10-7'],
|
|
ranges: ['2023-9-28', '2023-10-7'],
|
|
partnerId:'',
|
|
searchValue:'',
|
|
baseUrl:this.$imgeUrl,
|
|
xling:false,
|
|
earchValue:'',
|
|
countdown: 3,
|
|
qhindex:0,
|
|
qhindex1:0,
|
|
qhindex2:0,
|
|
countNoPass:0,
|
|
countPass:0,
|
|
sum:0,
|
|
qubu:[],
|
|
phb:[],
|
|
threenum:{},
|
|
zilist:[
|
|
{text:'日',unit:'day'},
|
|
{text:'周',unit:'week'},
|
|
{text:'月',unit:'month'},
|
|
{text:'年',unit:'year'},
|
|
|
|
],
|
|
carlist:[],
|
|
|
|
unit:'day',
|
|
unit1:'day',
|
|
unit2:'day',
|
|
chartData: {},
|
|
//您可以通过修改 config-ucharts.js 文件中下标为 ['ring'] 的节点来配置全局默认参数，如都是默认参数，此处可以不传 opts 。实际应用过程中 opts 只需传入与全局默认参数中不一致的【某一个属性】即可实现同类型的图表显示不同的样式，达到页面简洁的需求。
|
|
|
|
// sdada
|
|
chartData1: {},
|
|
chartData2: {},
|
|
chartData3: {},
|
|
chartDataNum:{},
|
|
Amount:{},
|
|
dopts1: {
|
|
fontSize:12,
|
|
|
|
color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
touchMoveLimit: 24,
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true,
|
|
itemCount: 3,
|
|
fontSize:10,
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0,
|
|
max:100,
|
|
unit:'%'
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 35,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
},
|
|
dopts: {
|
|
fontSize:12,
|
|
|
|
color: ["#0D2E8D","#3CBC6F","#FF571A","#EE6666","#73C0DE","#3CA272","#FC8452","#9A60B4","#ea7ccc"],
|
|
padding: [15,15,0,5],
|
|
touchMoveLimit: 24,
|
|
enableScroll: true,
|
|
legend: {},
|
|
xAxis: {
|
|
disableGrid: true,
|
|
scrollShow: true,
|
|
itemCount: 3,
|
|
fontSize:10,
|
|
|
|
},
|
|
yAxis: {
|
|
data: [
|
|
{
|
|
min: 0
|
|
|
|
}
|
|
]
|
|
},
|
|
extra: {
|
|
column: {
|
|
type: "group",
|
|
width: 35,
|
|
activeBgColor: "#000000",
|
|
activeBgOpacity: 0.08
|
|
}
|
|
}
|
|
},
|
|
|
|
}
|
|
},
|
|
|
|
watch: {
|
|
range(newval) {
|
|
this.getfive()
|
|
},
|
|
ranges(newval) {
|
|
this.getfive()
|
|
},
|
|
},
|
|
onLoad() {
|
|
this.gettime()
|
|
this.partnerId = uni.getStorageSync('partnerId')
|
|
// this.getServerData();
|
|
this.getServerData1();
|
|
this.getServerData2();
|
|
this.getServerData3();
|
|
this.chartLineInspectionAmount()
|
|
this.chartLineInspectionNum()
|
|
// this.sanxiang()
|
|
this.getfive()
|
|
|
|
|
|
},
|
|
onShow() {
|
|
// this.getstatisticsTop()
|
|
this.getstatisticsMid()
|
|
this. getgetPartnerList()
|
|
// this.getstatisticsZXT()
|
|
this.getstatisticsOrder()
|
|
},
|
|
methods:{
|
|
goCustomerDetail(remark){
|
|
uni.navigateTo({
|
|
url:'/pages/statistics/statislist?id=1&remark='+remark
|
|
})
|
|
},
|
|
gettime(){
|
|
// 获取当前时间
|
|
var now = new Date();
|
|
|
|
// 获取年份
|
|
var year = now.getFullYear();
|
|
|
|
// 获取月份
|
|
var month = now.getMonth() + 1; // 月份从 0 开始，需要加 1
|
|
if(month<10){
|
|
var month ="0"+month
|
|
}
|
|
|
|
// 获取日期
|
|
var date= now.getDate();
|
|
|
|
// 格式化时间
|
|
var currentTime = year + '-' + month + '-' + date
|
|
this.range[0] = currentTime
|
|
this.range[1] = currentTime
|
|
this.ranges[0] = currentTime
|
|
this.ranges[1] = currentTime
|
|
},
|
|
// 五条
|
|
async getfive(){
|
|
|
|
let data1 = {
|
|
startTime : this.range[0],
|
|
endTime : this.range[1]
|
|
}
|
|
let res1 = await request({
|
|
url:'/partnerOwn/partner/staticsTable1',
|
|
method: 'get',
|
|
params: data1
|
|
})
|
|
this.data1 = res1.data
|
|
// 2
|
|
let data2 = {
|
|
startTime : this.ranges[0],
|
|
endTime : this.ranges[1]
|
|
}
|
|
let res2 = await request({
|
|
url:'/partnerOwn/partner/staticsTable2',
|
|
method: 'get',
|
|
params: data2
|
|
})
|
|
this.data2 = res2.data
|
|
// 3
|
|
let data3 = {
|
|
startTime : '',
|
|
endTime : ''
|
|
}
|
|
let res3 = await request({
|
|
url:'/partnerOwn/partner/staticsTable3',
|
|
method: 'get',
|
|
params: data3
|
|
})
|
|
this.data3 = res3.data
|
|
// 4
|
|
let data4 = {
|
|
startTime : '',
|
|
endTime : ''
|
|
}
|
|
let res4 = await request({
|
|
url:'/partnerOwn/partner/staticsTable4',
|
|
method: 'get',
|
|
params: data4
|
|
})
|
|
this.data4 = res4.data
|
|
// 5
|
|
let data5 = {
|
|
startTime : '',
|
|
endTime : ''
|
|
}
|
|
let res5 = await request({
|
|
url:'/partnerOwn/partner/staticsTable5',
|
|
method: 'get',
|
|
params: data5
|
|
})
|
|
this.data5 = res5.data
|
|
|
|
},
|
|
//
|
|
goxiangqing(id){
|
|
uni.navigateTo({
|
|
url:'/pages/statistics/statislist?id='+id
|
|
})
|
|
},
|
|
maskClick(e){
|
|
},
|
|
// 折线图
|
|
async chartLineInspectionAmount() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
let rex = await request({
|
|
url:'/partnerOwn/partner/chartLineInspectionAmount',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.Amount = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
// 折线图
|
|
async chartLineInspectionNum() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
let rex = await request({
|
|
url:'/partnerOwn/partner/chartLineInspectionNum',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartDataNum = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
|
|
gbindex(index,unit){
|
|
this.qhindex = index
|
|
this.unit = unit
|
|
this.getServerData1()
|
|
},
|
|
gbindex1(index,unit){
|
|
this.qhindex1 = index
|
|
this.unit1 = unit
|
|
this.getServerData2()
|
|
},
|
|
gbindex2(index,unit){
|
|
this.qhindex2 = index
|
|
this.unit2 = unit
|
|
this.getServerData3()
|
|
},
|
|
getback(){
|
|
uni.navigateBack()
|
|
},
|
|
xinxuanze(name){
|
|
this.name = name
|
|
this.xling = false
|
|
this.getServerData1()
|
|
|
|
},
|
|
async sanxiang(){
|
|
let res = await request({
|
|
url:'/partnerOwn/partner/statisticsInfo?partnerId='+this.partnerId,
|
|
method: 'get',
|
|
})
|
|
let nums = {
|
|
orderAmount : Math.trunc(res.data.orderAmount / 100) ,
|
|
orderNum : res.data.orderNum ,
|
|
todayOrderAmount : res.data.todayOrderAmount / 100,
|
|
todayOrderNum : res.data.todayOrderNum ,
|
|
workedNum : res.data.workedNum ,
|
|
workingNum : res.data.workingNum
|
|
}
|
|
this.threenum = nums
|
|
},
|
|
async getstatisticsTop(){
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsTop',
|
|
method: 'get',
|
|
})
|
|
// this.chartData.series[0].data = res.data.list
|
|
},
|
|
async getstatisticsMid(){
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsMid',
|
|
method: 'get',
|
|
})
|
|
this.carlist = res.data
|
|
},
|
|
|
|
|
|
async getgetPartnerList(){
|
|
let data = {
|
|
partnerName : this.searchValue
|
|
}
|
|
let res = await request({
|
|
url:'/appInspection/order/getPartnerList',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
this.qubu = res.data
|
|
|
|
},
|
|
async getstatisticsZXT(){
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
type : this.value
|
|
}
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsZXT',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
|
|
},
|
|
async getstatisticsOrder(){
|
|
let res = await request({
|
|
url:'/appInspection/order/statisticsOrder',
|
|
method: 'get',
|
|
})
|
|
this.phb = res.data
|
|
|
|
},
|
|
// 123123
|
|
closexl(e){
|
|
this.xling = false
|
|
|
|
},
|
|
openxl(e){
|
|
},
|
|
|
|
// 金额
|
|
async getServerData1() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit,
|
|
}
|
|
let rex = await request({
|
|
url:'/partnerOwn/partner/chartInfoAmount',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData1 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
// 数量
|
|
async getServerData2() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit1,
|
|
}
|
|
let rex = await request({
|
|
url:'/partnerOwn/partner/chartInfoNum',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData2 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
// 合格率
|
|
async getServerData3() {
|
|
let data = {
|
|
partnerId:this.partnerId,
|
|
unit:this.unit2,
|
|
}
|
|
let rex = await request({
|
|
url:'/partnerOwn/partner/chartInfoRatio',
|
|
method: 'get',
|
|
params: data
|
|
})
|
|
let res = rex.data
|
|
|
|
this.chartData3 = JSON.parse(JSON.stringify(res));
|
|
|
|
},
|
|
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.content{
|
|
width: 100%;
|
|
height: calc(100vh);
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
// padding-top: 45px;
|
|
}
|
|
.ping-bottom{
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
box-sizing: border-box;
|
|
padding: 0px 15px;
|
|
}
|
|
.c-top{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
padding-top: 55px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
background-color: white;
|
|
}
|
|
.c-title{
|
|
font-size: 18px;
|
|
font-weight: bold
|
|
}
|
|
.ail{
|
|
width: 100%;
|
|
background-color: #F6F6F6;
|
|
box-sizing: border-box;
|
|
padding-bottom: 20px;
|
|
}
|
|
.top-box{
|
|
width: 95%;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
// padding: 18px;
|
|
background-color: white;
|
|
margin: 10px auto;
|
|
}
|
|
.cont-box{
|
|
width: 100%;
|
|
border-radius: 5px;
|
|
box-sizing: border-box;
|
|
padding: 18px;
|
|
background-color: white;
|
|
margin: 10px auto;
|
|
}
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.t-bottom{
|
|
width: 100%;
|
|
height: 130px;
|
|
border-top: 1px solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
// padding: 20px;
|
|
}
|
|
.t-top{
|
|
width: 100%;
|
|
// height: 130px;
|
|
display: flex;
|
|
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
padding-bottom: 0px;
|
|
}
|
|
.sis{
|
|
width: 33%;
|
|
}
|
|
.dinga{
|
|
// margin-left: 25px;
|
|
font-size: 14px;
|
|
font-weight: bold;
|
|
}
|
|
.sys{
|
|
width: 25%;
|
|
}
|
|
.sys2{
|
|
width: 33%;
|
|
}
|
|
.t-title{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
line-height: 14px;
|
|
}
|
|
.t-num{
|
|
width: 100%;
|
|
text-align: center;
|
|
font-size: 22px;
|
|
font-weight: bold;
|
|
color: #0D2E8D;
|
|
line-height: 26px;
|
|
margin: 5px auto;
|
|
}
|
|
.cont-title{
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
}
|
|
.charts-box {
|
|
width: 100%;
|
|
height: 300px;
|
|
}
|
|
.wrap-box{
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
margin: 10px auto;
|
|
}
|
|
.w-box{
|
|
width: 33%;
|
|
box-sizing: border-box;
|
|
text-align: center;
|
|
margin-bottom: 10px;
|
|
}
|
|
.imgicon{
|
|
width: 33px;
|
|
height: 28px;
|
|
margin: 0 auto;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.t-zhong{
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #333333;
|
|
margin: 3px auto;
|
|
}
|
|
.lanbnum{
|
|
font-size: 26px;
|
|
font-weight: bold;
|
|
color: #0D2E8D;
|
|
}
|
|
.b-title{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 14px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
margin-bottom: 10px;
|
|
}
|
|
.b-zuo{
|
|
width: 20%;
|
|
}
|
|
.b-zhong{
|
|
text-align: left;
|
|
width: 60%;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.b-you{
|
|
width: 20%;
|
|
}
|
|
.touxiang{
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 50%;
|
|
background-color: salmon;
|
|
overflow: hidden;
|
|
margin-right: 10px;
|
|
image{
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
.one{
|
|
width: 24px;
|
|
height: 24px;
|
|
border-radius: 50%;
|
|
background: #FEB947;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
|
|
}
|
|
.dis-t{
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin: 10px auto;
|
|
}
|
|
.lank{
|
|
width: 102px;
|
|
height: 27px;
|
|
border-radius: 14px ;
|
|
border: 1px solid #0D2E8D;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #0D2E8D;
|
|
}
|
|
.lan-you{
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
.yi{
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
line-height: 15px;
|
|
margin-right: 15px;
|
|
}
|
|
.er{
|
|
width: 25px;
|
|
height: 25px;
|
|
background: #0D2E8D;
|
|
border-radius: 3px ;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white !important;
|
|
}
|
|
// ----------------------
|
|
.popup-box{
|
|
overflow: hidden;
|
|
border-radius: 8px;
|
|
box-sizing: border-box;
|
|
padding: 15px;
|
|
width: 100%;
|
|
background-color: white;
|
|
}
|
|
.sousuo{
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
margin-left: 0px;
|
|
height: 30px;
|
|
background: #F0F0F0;
|
|
border-radius: 50px;
|
|
color: #999999;
|
|
box-sizing: border-box;
|
|
padding:0 10px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
input{
|
|
width: 80%;
|
|
}
|
|
}
|
|
.list-box{
|
|
width: 100%;
|
|
height: 300px;
|
|
overflow: hidden;
|
|
box-sizing: border-box;
|
|
|
|
}
|
|
.list_scroll{
|
|
height: 100%; // 需设置高度
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
}
|
|
.list-qiu{
|
|
width: 95%;
|
|
border-bottom: 1px solid #EEEEEE;
|
|
box-sizing: border-box;
|
|
padding: 10px 5px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
.tel{
|
|
margin-left: 5px;
|
|
font-size: 15px;
|
|
font-weight: 400;
|
|
color: #666666;
|
|
}
|
|
</style>
|