557 lines
15 KiB
Vue
557 lines
15 KiB
Vue
|
<template>
|
||
|
|
<view class="fullHeight">
|
||
|
|
<view class="" style="position: fixed; top: 0; left: 0; width: 100%; z-index: 10;background-color: #fff;">
|
||
|
|
<headers :showBack="true" :themeType="'white'" style="">
|
||
|
|
<view class="headerName">
|
||
|
|
在岗工人分析
|
||
|
|
</view>
|
||
|
|
</headers>
|
||
|
|
<view class="nav_wrap">
|
||
|
|
<view class="navigation1 flex2" style="background-color: #fff;">
|
||
|
|
<view class="navType" :class="checkNavType==1?'checkNavType':'padding_2'" @click="changeNavType(1)">
|
||
|
|
按单位</view>
|
||
|
|
<view class="navType" :class="checkNavType==2?'checkNavType':'padding_2'" @click="changeNavType(2)">
|
||
|
|
按工种</view>
|
||
|
|
<view class="navType" :class="checkNavType==3?'checkNavType':'padding_2'" @click="changeNavType(3)">
|
||
|
|
按年龄</view>
|
||
|
|
<view class="navType" :class="checkNavType==4?'checkNavType':'padding_2'" @click="changeNavType(4)">
|
||
|
|
按区域</view>
|
||
|
|
</view>
|
||
|
|
<view class="navigation2 flex" style="">
|
||
|
|
<view class="navCharts" :class="navChartsType==1?'navChartsType1':''" @click="changeNavCharts(1)">饼图
|
||
|
|
</view>
|
||
|
|
<view class="navCharts" :class="navChartsType==2?'navChartsType2':''" @click="changeNavCharts(2)">
|
||
|
|
条形图</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="content" :style="{paddingTop: (mobileTopHeight * 2) + 240 + 'rpx'}">
|
||
|
|
|
||
|
|
<!-- 饼图 -->
|
||
|
|
<view class="charts_wrap" v-if="navChartsType==1">
|
||
|
|
<u-charts canvas-id="pieChart" chartType="ring" :cWidth="cWidth" :opts="pieChartData"
|
||
|
|
ref="pieChart" />
|
||
|
|
<view class="data_wrap">
|
||
|
|
<!-- 单位 -->
|
||
|
|
<view class="flex" style="margin: 20rpx 0;" v-if="checkNavType==1" v-for="(item,index) in unitList"
|
||
|
|
:key="index">
|
||
|
|
<view class="name flex">
|
||
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
|
||
|
|
<view>{{item.enterprise_name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="num">{{item.num}} 人</view>
|
||
|
|
<view class="ratio">{{item.ratio}} %</view>
|
||
|
|
</view>
|
||
|
|
<!-- 工种 -->
|
||
|
|
<view class="flex" style="margin: 20rpx 0;" v-if="checkNavType==2"
|
||
|
|
v-for="(item,index) in workerTypeList" :key="index">
|
||
|
|
<view class="name flex">
|
||
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
|
||
|
|
<view>{{item.typeName}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="num">{{item.personNum}} 人</view>
|
||
|
|
<view class="ratio">{{item.ratioNum}} %</view>
|
||
|
|
</view>
|
||
|
|
<!-- 年龄 -->
|
||
|
|
<view class="flex" style="margin: 20rpx 0;" v-if="checkNavType==3"
|
||
|
|
v-for="(item,index) in workercountList" :key="index">
|
||
|
|
<view class="name flex">
|
||
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
|
||
|
|
<view>{{item.typeName}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="num">{{item.personNum}} 人</view>
|
||
|
|
<view class="ratio">{{item.ratioNum}} %</view>
|
||
|
|
</view>
|
||
|
|
<!-- 区域 -->
|
||
|
|
<view class="flex" style="margin: 20rpx 0;" v-if="checkNavType==4"
|
||
|
|
v-for="(item,index) in provinceList" :key="index">
|
||
|
|
<view class="name flex">
|
||
|
|
<view class="bg_color" :style="{'background-color': colorList[index]}"></view>
|
||
|
|
<view>{{item.name}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="num">{{item.count}} 人</view>
|
||
|
|
<view class="ratio">{{item.percent}} %</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<!-- 条形图 -->
|
||
|
|
<view class="bar_wrap" v-else>
|
||
|
|
<!-- 单位 -->
|
||
|
|
<view class="item" v-if="checkNavType==1" v-for="(item,index) in unitList" :key="index">
|
||
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
||
|
|
<view class="flex flex-content">
|
||
|
|
<text class="item_name">{{item.enterprise_name}}</text>
|
||
|
|
<text class="item_ratio">{{item.ratio}}%</text>
|
||
|
|
</view>
|
||
|
|
<view class="item_num">{{item.num}}人</view>
|
||
|
|
</view>
|
||
|
|
<view class="showRatioBar" :style="{width:item.ratio +'%'}"></view>
|
||
|
|
</view>
|
||
|
|
<!-- 工种 -->
|
||
|
|
<view class="item" v-if="checkNavType==2" v-for="(item,index) in workerTypeList" :key="index">
|
||
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
||
|
|
<view class="flex flex-content">
|
||
|
|
<text class="item_name">{{item.typeName}}</text>
|
||
|
|
<text class="item_ratio">{{item.ratioNum}}%</text>
|
||
|
|
</view>
|
||
|
|
<view class="item_num">{{item.personNum}}人</view>
|
||
|
|
</view>
|
||
|
|
<view class="showRatioBar" :style="{width:item.ratioNum+'%'}"></view>
|
||
|
|
</view>
|
||
|
|
<!-- 年龄 -->
|
||
|
|
<view class="item" v-if="checkNavType==3" v-for="(item,index) in workercountList" :key="index">
|
||
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
||
|
|
<view class="flex flex-content">
|
||
|
|
<text class="item_name">{{item.typeName}}</text>
|
||
|
|
<text class="item_ratio">{{item.ratioNum}}%</text>
|
||
|
|
</view>
|
||
|
|
<view class="item_num">{{item.personNum}}人</view>
|
||
|
|
</view>
|
||
|
|
<view class="showRatioBar" :style="{width:item.ratioNum+'%'}"></view>
|
||
|
|
</view>
|
||
|
|
<!-- 区域 -->
|
||
|
|
<view class="item" v-if="checkNavType==4" v-for="(item,index) in provinceList" :key="index">
|
||
|
|
<view class="flex2" style="margin-bottom: 6px;">
|
||
|
|
<view class="flex flex-content">
|
||
|
|
<text class="item_name">{{item.count}}</text>
|
||
|
|
<text class="item_ratio">{{item.percent}}%</text>
|
||
|
|
</view>
|
||
|
|
<view class="item_num">{{item.count}}人</view>
|
||
|
|
</view>
|
||
|
|
<view class="showRatioBar" :style="{width:item.percent+'%'}"></view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import headers from "../../../components/headers/headers.vue"
|
||
|
|
import uCharts from '@/components/u-charts/component.vue';
|
||
|
|
export default {
|
||
|
|
components: {
|
||
|
|
headers,
|
||
|
|
uCharts
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
mobileTopHeight: 0,
|
||
|
|
cWidth: 200,
|
||
|
|
pieChartData: {
|
||
|
|
categories: [],
|
||
|
|
title: {
|
||
|
|
name: "",
|
||
|
|
color: '#7cb5ec',
|
||
|
|
fontSize: 25,
|
||
|
|
offsetY: 0
|
||
|
|
},
|
||
|
|
series: [{
|
||
|
|
"data": 60,
|
||
|
|
color: '#1890FF'
|
||
|
|
},
|
||
|
|
{
|
||
|
|
"data": 50,
|
||
|
|
color: '#E7EDF3'
|
||
|
|
},
|
||
|
|
]
|
||
|
|
},
|
||
|
|
checkNavType: 1, // 工种 年龄 区域
|
||
|
|
navChartsType: 1, //条形 饼图;
|
||
|
|
projectSn: '',
|
||
|
|
unitList: [], //区域数据
|
||
|
|
provinceList: [], //区域数据
|
||
|
|
workerTypeList: [], //工种数据
|
||
|
|
workercount: {}, //年龄数据
|
||
|
|
workercountList: [],
|
||
|
|
colorList: ['#00b0f0', '#0070c0', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#92d050', '#00b050',
|
||
|
|
'#002060', '#7030a0', '#262626',
|
||
|
|
'#a6a6a6', '#660010', '#b21016', '#c00000', '#ff0000', '#ffc000', '#ffff00', '#00b0f0', '#0070c0',
|
||
|
|
'#92d050', '#00b050', '#002060', '#7030a0', '#262626',
|
||
|
|
'#a6a6a6', '#660010', '#b21016'
|
||
|
|
],
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onLoad() {
|
||
|
|
let that = this;
|
||
|
|
// 获取机型屏幕宽度
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success(res) {
|
||
|
|
that.cWidth = res.screenWidth
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
|
||
|
|
// this.projectSn = '52f1b39bac744fb597a1a1b71511362c';
|
||
|
|
this.getListData();
|
||
|
|
this.getUnitListData();
|
||
|
|
this.getCountDeviceUnit();
|
||
|
|
var that = this
|
||
|
|
uni.getSystemInfo({
|
||
|
|
success(res) {
|
||
|
|
that.mobileTopHeight = res.statusBarHeight ? res.statusBarHeight : 0;
|
||
|
|
uni.setStorageSync('systemInfo',res)
|
||
|
|
console.log(res)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
console.log('this.mobileTopHeight',this.mobileTopHeight)
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
//切换 tabs
|
||
|
|
changeNavType(type) {
|
||
|
|
this.checkNavType = type;
|
||
|
|
if (type == 1) {
|
||
|
|
this.pieChartData.title.name = '单位';
|
||
|
|
if (this.unitList.length > 0) {
|
||
|
|
let arr = [];
|
||
|
|
this.unitList.forEach((item, index) => {
|
||
|
|
let json = {
|
||
|
|
"data": item.ratio,
|
||
|
|
color: this.colorList[index]
|
||
|
|
};
|
||
|
|
arr.push(json)
|
||
|
|
});
|
||
|
|
this.pieChartData.series = arr;
|
||
|
|
};
|
||
|
|
} else if (type == 2) {
|
||
|
|
this.pieChartData.title.name = '工种';
|
||
|
|
if (this.workerTypeList.length > 0) {
|
||
|
|
let arr = [];
|
||
|
|
this.workerTypeList.forEach((item, index) => {
|
||
|
|
let json = {
|
||
|
|
"data": item.ratioNum,
|
||
|
|
color: this.colorList[index]
|
||
|
|
};
|
||
|
|
arr.push(json)
|
||
|
|
});
|
||
|
|
this.pieChartData.series = arr;
|
||
|
|
|
||
|
|
};
|
||
|
|
} else if (type == 3) {
|
||
|
|
this.pieChartData.title.name = '年龄';
|
||
|
|
this.workercountList = [{
|
||
|
|
typeName: '18岁以下',
|
||
|
|
personNum: this.workercount.age18,
|
||
|
|
ratioNum: this.workercount.age18ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '18岁至25岁',
|
||
|
|
personNum: this.workercount.age18to25,
|
||
|
|
ratioNum: this.workercount.age18to25ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '25岁至35岁',
|
||
|
|
personNum: this.workercount.age25to35,
|
||
|
|
ratioNum: this.workercount.age25to35ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '35岁至45岁',
|
||
|
|
personNum: this.workercount.age35to45,
|
||
|
|
ratioNum: this.workercount.age35to45ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '45岁至60岁',
|
||
|
|
personNum: this.workercount.age45to60,
|
||
|
|
ratioNum: this.workercount.age45to60ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '60岁以上',
|
||
|
|
personNum: this.workercount.age60,
|
||
|
|
ratioNum: this.workercount.age60ratio
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
} else if (type == 4) {
|
||
|
|
this.pieChartData.title.name = '区域';
|
||
|
|
if (this.provinceList.length > 0) {
|
||
|
|
let arr = [];
|
||
|
|
this.provinceList.forEach((item, index) => {
|
||
|
|
let json = {
|
||
|
|
"data": Number(item.count),
|
||
|
|
color: this.colorList[index]
|
||
|
|
};
|
||
|
|
arr.push(json)
|
||
|
|
});
|
||
|
|
this.pieChartData.series = arr;
|
||
|
|
|
||
|
|
};
|
||
|
|
}
|
||
|
|
|
||
|
|
},
|
||
|
|
|
||
|
|
//切换图形
|
||
|
|
changeNavCharts(type) {
|
||
|
|
this.navChartsType = type;
|
||
|
|
},
|
||
|
|
//获取单位列表数据
|
||
|
|
getUnitListData() {
|
||
|
|
let that = this;
|
||
|
|
this.sendRequest({
|
||
|
|
url: 'xmgl/workerInfo/selectWorkerManageEnterpriseStatistics',
|
||
|
|
method: 'POST',
|
||
|
|
data: {
|
||
|
|
sn: this.projectSn,
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
that.unitList = res.result.enterpriseList; //工种数据
|
||
|
|
that.pieChartData.title.name = '单位';
|
||
|
|
|
||
|
|
//设置显示单位数据
|
||
|
|
if (that.unitList.length > 0) {
|
||
|
|
let arr = [];
|
||
|
|
that.unitList.forEach((item, index) => {
|
||
|
|
let json = {
|
||
|
|
"data": item.ratio,
|
||
|
|
color: that.colorList[index]
|
||
|
|
};
|
||
|
|
arr.push(json)
|
||
|
|
});
|
||
|
|
that.pieChartData.series = arr;
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 获取区域
|
||
|
|
getCountDeviceUnit() {
|
||
|
|
this.sendRequest({
|
||
|
|
url: 'xmgl/workerInfo/countDeviceUnit',
|
||
|
|
method: 'POST',
|
||
|
|
data: {
|
||
|
|
projectSn: this.projectSn,
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
console.log(1111111111, res)
|
||
|
|
if (res.code == 200) {
|
||
|
|
this.provinceList = res.result.data; //区域数据
|
||
|
|
console.log('区域数据--', this.provinceList);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//获取列表数据
|
||
|
|
getListData() {
|
||
|
|
this.sendRequest({
|
||
|
|
url: 'xmgl/workerInfo/selectProjectLabourWorkerCount',
|
||
|
|
method: 'POST',
|
||
|
|
data: {
|
||
|
|
projectSn: this.projectSn,
|
||
|
|
},
|
||
|
|
success: (res) => {
|
||
|
|
if (res.code == 200) {
|
||
|
|
// this.pieChartData.title.name = '工种';
|
||
|
|
// this.provinceList = res.result.provinceList; //区域数据
|
||
|
|
this.workerTypeList = res.result.workerTypeList; //工种数据
|
||
|
|
this.workercount = res.result.workercount; //年龄数据
|
||
|
|
// console.log('区域数据--', this.provinceList);
|
||
|
|
console.log('工种数据--', this.workerTypeList);
|
||
|
|
console.log('年龄数据--', this.workercount);
|
||
|
|
this.workercountList = [{
|
||
|
|
typeName: '18岁以下',
|
||
|
|
personNum: this.workercount.age18,
|
||
|
|
ratioNum: this.workercount.age18ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '18岁至25岁',
|
||
|
|
personNum: this.workercount.age18to25,
|
||
|
|
ratioNum: this.workercount.age18to25ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '25岁至35岁',
|
||
|
|
personNum: this.workercount.age25to35,
|
||
|
|
ratioNum: this.workercount.age25to35ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '35岁至45岁',
|
||
|
|
personNum: this.workercount.age35to45,
|
||
|
|
ratioNum: this.workercount.age35to45ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '45岁至60岁',
|
||
|
|
personNum: this.workercount.age45to60,
|
||
|
|
ratioNum: this.workercount.age45to60ratio
|
||
|
|
},
|
||
|
|
{
|
||
|
|
typeName: '60岁以上',
|
||
|
|
personNum: this.workercount.age60,
|
||
|
|
ratioNum: this.workercount.age60ratio
|
||
|
|
}
|
||
|
|
];
|
||
|
|
|
||
|
|
//设置显示工种数据
|
||
|
|
if (this.workerTypeList.length > 0) {
|
||
|
|
let arr = [];
|
||
|
|
this.workerTypeList.forEach((item, index) => {
|
||
|
|
let json = {
|
||
|
|
"data": item.ratioNum,
|
||
|
|
color: this.colorList[index]
|
||
|
|
};
|
||
|
|
arr.push(json)
|
||
|
|
});
|
||
|
|
this.pieChartData.series = arr;
|
||
|
|
};
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.flex {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex2 {
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: space-between;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content .nav_wrap {
|
||
|
|
width: 100%;
|
||
|
|
height: 100%;
|
||
|
|
padding-bottom: 1px;
|
||
|
|
box-shadow: 0 10rpx 20rpx rgba(236, 236, 236, 1.0);
|
||
|
|
background-color: rgba(236, 236, 236, 0.2);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav_wrap .navType {
|
||
|
|
width: 33%;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 30rpx;
|
||
|
|
line-height: 64rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav_wrap .navType:active {
|
||
|
|
background-color: rgba(43, 141, 243, 0.08);
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav_wrap .navigation1 {
|
||
|
|
height: 64rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation1 .checkNavType {
|
||
|
|
color: #2b8df3;
|
||
|
|
border-bottom: 4rpx solid #2b8df3;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation1 .padding_2 {
|
||
|
|
padding-bottom: 4rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.nav_wrap .navigation2 {
|
||
|
|
margin: 24rpx auto;
|
||
|
|
width: 60%;
|
||
|
|
height: 60rpx;
|
||
|
|
background-color: rgba(43, 141, 243, 0.3);
|
||
|
|
border-radius: 70rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation2 .navCharts {
|
||
|
|
width: 50%;
|
||
|
|
line-height: 60rpx;
|
||
|
|
text-align: center;
|
||
|
|
font-size: 26rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation2 .navChartsType1 {
|
||
|
|
background-color: rgba(43, 141, 243, 0.75);
|
||
|
|
border-top-left-radius: 70rpx;
|
||
|
|
border-bottom-left-radius: 70rpx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.navigation2 .navChartsType2 {
|
||
|
|
background-color: rgba(43, 141, 243, 0.75);
|
||
|
|
border-top-right-radius: 70rpx;
|
||
|
|
border-bottom-right-radius: 70rpx;
|
||
|
|
color: #fff;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content .charts_wrap {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.charts_wrap .data_wrap {
|
||
|
|
width: 100%;
|
||
|
|
padding: 0 36rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
text-align: center;
|
||
|
|
margin-top: 40rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data_wrap .name {
|
||
|
|
width: 45%;
|
||
|
|
|
||
|
|
>view:nth-child(2) {
|
||
|
|
flex: 1;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
text-align: left;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.data_wrap .bg_color {
|
||
|
|
width: 24rpx;
|
||
|
|
height: 24rpx;
|
||
|
|
border-radius: 70rpx;
|
||
|
|
margin: 0 10rpx 0 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data_wrap .num {
|
||
|
|
width: 30%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.data_wrap .ratio {
|
||
|
|
width: 25%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.content .bar_wrap {
|
||
|
|
margin-top: 20rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.bar_wrap .item {
|
||
|
|
width: 100%;
|
||
|
|
padding: 20rpx;
|
||
|
|
margin-bottom: 4px;
|
||
|
|
box-sizing: border-box;
|
||
|
|
font-size: 28rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.showRatioBar {
|
||
|
|
height: 9px;
|
||
|
|
background-color: rgba(43, 141, 243, 0.9);
|
||
|
|
}
|
||
|
|
|
||
|
|
.flex-content {
|
||
|
|
width: 82%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_name {
|
||
|
|
max-width: 90%;
|
||
|
|
overflow: hidden;
|
||
|
|
text-overflow: ellipsis;
|
||
|
|
white-space: nowrap;
|
||
|
|
margin-right: 24rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_num {
|
||
|
|
color: rgba(43, 141, 243, 0.95);
|
||
|
|
}
|
||
|
|
|
||
|
|
.item_ratio {
|
||
|
|
color: rgba(38, 45, 71, 0.7);
|
||
|
|
}
|
||
|
|
</style>
|