报工报表接口对接，投料bug修复
sunshine
2 years ago
parent
16f59c10be
commit
226b2d295e
@ -0,0 +1,79 @@
|
|||||||
|
|
||||||
|
const COLOR = [
|
||||||
|
"#EE6A66", "#6BC588", "#FFC300", "#24ABFD"
|
||||||
|
];
|
||||||
|
|
||||||
|
var ISCANVAS2D = true;
|
||||||
|
|
||||||
|
switch (uni.getSystemInfoSync().platform) {
|
||||||
|
case 'android':
|
||||||
|
ISCANVAS2D = true
|
||||||
|
break;
|
||||||
|
case 'ios':
|
||||||
|
ISCANVAS2D = true
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
ISCANVAS2D = false
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
|
||||||
|
const RESPOND = {
|
||||||
|
success: 0,
|
||||||
|
warn: 301,
|
||||||
|
error: 500,
|
||||||
|
};
|
||||||
|
|
||||||
|
const TIMEARRAY = [
|
||||||
|
{
|
||||||
|
text: '当天',
|
||||||
|
value: 'today'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '昨天',
|
||||||
|
value: 'yesterday'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '本周',
|
||||||
|
value: 'week'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '上周',
|
||||||
|
value: 'weeklast'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '本月',
|
||||||
|
value: 'month'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '上月',
|
||||||
|
value: 'monthlast'
|
||||||
|
},
|
||||||
|
{
|
||||||
|
text: '指定日期',
|
||||||
|
value: 'auto'
|
||||||
|
}
|
||||||
|
];
|
||||||
|
const TABLIST = [
|
||||||
|
{name:"企业微信",type:"WECHAT"},
|
||||||
|
{name:"会员运营",type:"OPERATE"},
|
||||||
|
{name:"会员健康",type:"GJJK"},
|
||||||
|
{name:"会员服务",type:"SERVICE"},
|
||||||
|
];
|
||||||
|
|
||||||
|
const CARD_MENU = [
|
||||||
|
{title:"会员报表中心",author:"howcode",img:"https://s1.ax1x.com/2023/03/31/ppRp4iV.jpg",url:"/myPackageA/pages/main/index"},
|
||||||
|
{title:"智慧教育报表中心",author:"howcode",img:"https://s1.ax1x.com/2023/03/31/ppRp5GT.jpg",url:"/myPackageA/pages/school/index"},
|
||||||
|
{title:"差旅报表中心",author:"秋云",img:"https://s1.ax1x.com/2023/03/31/ppRpfI0.jpg",url:""},
|
||||||
|
{title:"运动报表中心",author:"howcode",img:"https://s1.ax1x.com/2023/03/31/ppRpWaq.jpg",url:"/myPackageA/pages/sport/index"},
|
||||||
|
{title:"财务报表中心",author:"howcode",img:"https://s1.ax1x.com/2023/03/31/ppRpozF.jpg",url:"/myPackageA/pages/finance/index"},
|
||||||
|
]
|
||||||
|
|
||||||
|
|
||||||
|
export default {
|
||||||
|
COLOR,
|
||||||
|
TIMEARRAY,
|
||||||
|
TABLIST,
|
||||||
|
RESPOND,
|
||||||
|
ISCANVAS2D,
|
||||||
|
CARD_MENU
|
||||||
|
}
|
||||||
@ -0,0 +1,68 @@
|
|||||||
|
{
|
||||||
|
"expend":{
|
||||||
|
"categories": [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"2月",
|
||||||
|
"4月",
|
||||||
|
"5月"
|
||||||
|
],
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "支出情况",
|
||||||
|
"data": [1201,2501.5,985,1760,2013.85],
|
||||||
|
"type": "line",
|
||||||
|
"style": "curve",
|
||||||
|
"color": "#4ECDB6",
|
||||||
|
"unit":""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"yAxis":[
|
||||||
|
{"calibration":true,"position":"left","title":"单位/元","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"income":{
|
||||||
|
"categories": [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"2月",
|
||||||
|
"4月",
|
||||||
|
"5月"
|
||||||
|
],
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "收入情况",
|
||||||
|
"data": [1601,1840.5,1900,1760,1500.85],
|
||||||
|
"type": "line",
|
||||||
|
"style": "curve",
|
||||||
|
"color": "#4ECDB6",
|
||||||
|
"unit":""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"yAxis":[
|
||||||
|
{"calibration":true,"position":"left","title":"单位/元","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"remaining":{
|
||||||
|
"categories": [
|
||||||
|
"1月",
|
||||||
|
"2月",
|
||||||
|
"2月",
|
||||||
|
"4月",
|
||||||
|
"5月"
|
||||||
|
],
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"name": "结余情况",
|
||||||
|
"data": [815,712.5,378,450,600.85],
|
||||||
|
"type": "line",
|
||||||
|
"style": "curve",
|
||||||
|
"color": "#4ECDB6",
|
||||||
|
"unit":""
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"yAxis":[
|
||||||
|
{"calibration":true,"position":"left","title":"单位/元","titleFontSize":12,"unit":"","tofix":0,"min":0,"disableGrid":true}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,33 @@
|
|||||||
|
{
|
||||||
|
"series": [
|
||||||
|
{
|
||||||
|
"data":[
|
||||||
|
{
|
||||||
|
"name": "住房相关",
|
||||||
|
"value": 3200,
|
||||||
|
"color":"#4DCCB3"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "食品酒水",
|
||||||
|
"value": 1020,
|
||||||
|
"color":"#5A77EC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "娱乐休闲",
|
||||||
|
"value": 500,
|
||||||
|
"color":"#4E94EC"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "交流通讯",
|
||||||
|
"value": 214.5,
|
||||||
|
"color":"#4FD4EB"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"name": "其他",
|
||||||
|
"value": 320.13,
|
||||||
|
"color":"#B5ED21"
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
]
|
||||||
|
}
|
||||||
@ -0,0 +1,125 @@
|
|||||||
|
<template>
|
||||||
|
<view>
|
||||||
|
<view v-if="copyContent.length > 0" class="ranking">
|
||||||
|
<view class="ranking-item" v-for="(content,index) in copyContent" :key="index" :style="{padding:progressPadding+'rpx'}">
|
||||||
|
<view class="name">{{content.name}}</view>
|
||||||
|
<view class="progress" >
|
||||||
|
<text :style="{background:content.background,width:content.width + '%',height:progressWidth+'rpx'}"></text>
|
||||||
|
</view>
|
||||||
|
<view class="num">{{content.num}}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default{
|
||||||
|
name:'ranking-list',
|
||||||
|
props:{
|
||||||
|
content:{
|
||||||
|
type: Array,
|
||||||
|
default() {
|
||||||
|
return []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
isPC:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
},
|
||||||
|
isRank:{
|
||||||
|
type:Boolean,
|
||||||
|
default:false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data(){
|
||||||
|
return{
|
||||||
|
progressWidth:24,
|
||||||
|
progressPadding:10,
|
||||||
|
maxNumber:0,
|
||||||
|
culCount:0,
|
||||||
|
copyContent:[]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
watch:{
|
||||||
|
content(newV){
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods:{
|
||||||
|
init(){
|
||||||
|
this.copyContent = this.deepClone(this.content)
|
||||||
|
if(this.copyContent && this.copyContent.length >0){
|
||||||
|
if(this.isRank){
|
||||||
|
this.copyContent = this.copyContent.sort((a,b) => b.num - a.num);
|
||||||
|
this.maxNumber = this.copyContent[0].num;
|
||||||
|
}else{
|
||||||
|
this.maxNumber = Math.max.apply(Math,this.copyContent.map(item => { return item.num }));
|
||||||
|
}
|
||||||
|
this.copyContent.map((item,index) =>{
|
||||||
|
item.width = this.computeWidth(this.maxNumber,item.num);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computeWidth(max,current){
|
||||||
|
let num = (current / max) * 100;
|
||||||
|
return num.toFixed(2);
|
||||||
|
},
|
||||||
|
deepClone(obj) {
|
||||||
|
var cloneObj = new obj.constructor()
|
||||||
|
if(obj === null) return obj
|
||||||
|
if(obj instanceof Date) return new Date(obj)
|
||||||
|
if(obj instanceof RegExp) return new RegExp(obj)
|
||||||
|
if (typeof obj !== 'object') return obj
|
||||||
|
for (var i in obj) {
|
||||||
|
if (obj.hasOwnProperty(i)) {
|
||||||
|
cloneObj[i] = this.deepClone(obj[i])
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return cloneObj
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if(this.isPC){
|
||||||
|
this.progressWidth = 40;
|
||||||
|
this.progressPadding = 30;
|
||||||
|
}
|
||||||
|
this.init();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.ranking-item{
|
||||||
|
display: flex;
|
||||||
|
margin-bottom: 13rpx;
|
||||||
|
align-content: center;
|
||||||
|
height: 50rpx;
|
||||||
|
|
||||||
|
.name{
|
||||||
|
padding-right: 10rpx;
|
||||||
|
color: #868688;
|
||||||
|
font-size: 20rpx;
|
||||||
|
flex: 1;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
.progress{
|
||||||
|
flex:5;
|
||||||
|
text-align: left;
|
||||||
|
padding-right: 10rpx;
|
||||||
|
|
||||||
|
text{
|
||||||
|
display: inline-block;
|
||||||
|
border-radius: 30rpx;
|
||||||
|
vertical-align:top;
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
.num{
|
||||||
|
font-size: 26rpx;
|
||||||
|
color: #3EB2F5;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,512 @@
|
|||||||
|
<template>
|
||||||
|
<view class="body">
|
||||||
|
<view class="top_head">
|
||||||
|
<view class="text_des">
|
||||||
|
<text class="month_num">{{ nowTime.month }}</text>
|
||||||
|
<text class="month_text">月</text>
|
||||||
|
<text class="month_year">{{ nowTime.year }}</text>
|
||||||
|
<text class="point">.</text>
|
||||||
|
<text class="title">报工报表</text>
|
||||||
|
</view>
|
||||||
|
<view class="top_desc">
|
||||||
|
<view>
|
||||||
|
<view class="text">上月报工汇总</view>
|
||||||
|
<view class="text-gray">总数</view>
|
||||||
|
<view class="remaining">{{ lastMonthSum.sumNumber }}</view>
|
||||||
|
<view class="row head_block">
|
||||||
|
<view class="flex_1">
|
||||||
|
<text class="text-gray">合格数</text>
|
||||||
|
<text class="text_green">{{ lastMonthSum.totalQualityNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex_1">
|
||||||
|
<text class="text-gray">废品数</text>
|
||||||
|
<text class="income">{{ lastMonthSum.totalWasteNumber }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<view class="text">本月报工汇总</view>
|
||||||
|
<view class="text-gray">总数</view>
|
||||||
|
<view class="remaining">{{ thisMonthSum.sumNumber }}</view>
|
||||||
|
<view class="row head_block">
|
||||||
|
<view class="flex_1">
|
||||||
|
<text class="text-gray">合格数</text>
|
||||||
|
<text class="text_green">{{ thisMonthSum.totalQualityNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex_1">
|
||||||
|
<text class="text-gray">废品数</text>
|
||||||
|
<text class="income">{{ thisMonthSum.totalWasteNumber }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="main">
|
||||||
|
<view class="row_block">
|
||||||
|
<view class="the_title" style="justify-content: space-between;">
|
||||||
|
<view class="left_title">
|
||||||
|
<view class="title_icon"></view>
|
||||||
|
<text class="margin_stand-samll font-big wide">30天报工数据</text>
|
||||||
|
</view>
|
||||||
|
<view class="right_btn">
|
||||||
|
<view v-for="(item, index) in historyBtn" :key="index" :class="item.state ? 'active_btn' : ''"
|
||||||
|
@click="changeHistoryBtn(item.type)">{{ item.name }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="charts-box" style="height: 200px;">
|
||||||
|
<qiun-data-charts type="line" canvasId="finance_a" :canvas2d="isCanvas2d" :reshow="delayload"
|
||||||
|
:opts="{ xAxis: { itemCount: 12, disableGrid: true }, yAxis: { disableGrid: true, data: [{ disabled: true }] } }"
|
||||||
|
:chartData="historyData" />
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="row_block">
|
||||||
|
<view class="the_title">
|
||||||
|
<view class="title_icon"></view>
|
||||||
|
<text class="margin_stand-samll font-big wide">最近30天计时列表</text>
|
||||||
|
</view>
|
||||||
|
<view class="detail_list">
|
||||||
|
<view v-for="(item, index) in detailList" :key="index" class="detail_item">
|
||||||
|
<view>
|
||||||
|
<view class="font-middle">报工日期</view>
|
||||||
|
<view class="font-small">{{ item.reportDay }}</view>
|
||||||
|
</view>
|
||||||
|
<view class="right_content">
|
||||||
|
<view class="hour">计时时长</view>
|
||||||
|
<view class="text-gray font-middle">{{ item.reportTime }}</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
<view class="end_block">
|
||||||
|
<view class="the_title" style="margin-bottom: 40rpx;">
|
||||||
|
<view class="title_icon"></view>
|
||||||
|
<text class="margin_stand-samll font-big wide">本月上月计时汇总</text>
|
||||||
|
</view>
|
||||||
|
<view class="flex_wrap">
|
||||||
|
<view>
|
||||||
|
<text class="text-gray" style="margin-right: 10px">上月总计时</text>
|
||||||
|
<text class="text_green">{{ sumReportTime.totalWasteNumber }}</text>
|
||||||
|
</view>
|
||||||
|
<view>
|
||||||
|
<text class="text-gray" style="margin-right: 10px">本月总计时</text>
|
||||||
|
<text class="text_green">{{ sumReportTime.totalQualityNumber }}</text>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup>
|
||||||
|
import dataOne from '@/pages/json/1.json';
|
||||||
|
import expendDetail from '@/pages/json/2.json';
|
||||||
|
import {getDayReportTime, getLastMonthSum, getReportTime, getSumReportTime, getThisMonthSum} from "@/api/mes/report";
|
||||||
|
import useUserStore from "@/store/modules/user";
|
||||||
|
import Config from '@/pages/js/config'
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import { onLoad } from "@dcloudio/uni-app";
|
||||||
|
|
||||||
|
const now = new Date();
|
||||||
|
const nowTime = {
|
||||||
|
year: now.getFullYear(),
|
||||||
|
month: now.getMonth() + 1,
|
||||||
|
day: now.getDate()
|
||||||
|
};
|
||||||
|
|
||||||
|
const useStore = useUserStore()
|
||||||
|
const userId = ref(useStore.userId)
|
||||||
|
const isCanvas2d = ref(Config.ISCANVAS2D)
|
||||||
|
|
||||||
|
let expendCount = 0;
|
||||||
|
let delayload = ref(false);
|
||||||
|
let historyData = ref({});
|
||||||
|
const reportTime = ref({})
|
||||||
|
const lastMonthSum = ref({});
|
||||||
|
const thisMonthSum = ref({});
|
||||||
|
const sumReportTime = ref({})
|
||||||
|
const detailList = ref([]);
|
||||||
|
|
||||||
|
const historyBtn = ref([
|
||||||
|
{
|
||||||
|
name: "总数",
|
||||||
|
state: 1,
|
||||||
|
type: "sumNumber"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "合格数",
|
||||||
|
state: 0,
|
||||||
|
type: "totalQualityNumber"
|
||||||
|
},
|
||||||
|
{
|
||||||
|
name: "废品数",
|
||||||
|
state: 0,
|
||||||
|
type: "totalWasteNumber"
|
||||||
|
}
|
||||||
|
]);
|
||||||
|
|
||||||
|
const filterHistoryData = () => {
|
||||||
|
let type = historyBtn.value.filter(x => x.state == 1)[0].type;
|
||||||
|
switch (type) {
|
||||||
|
case "sumNumber":
|
||||||
|
historyData.value = dataOne.sumNumber;
|
||||||
|
break;
|
||||||
|
case "totalQualityNumber":
|
||||||
|
historyData.value = dataOne.totalQualityNumber;
|
||||||
|
break;
|
||||||
|
case "totalWasteNumber":
|
||||||
|
historyData.value = dataOne.totalWasteNumber;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
const getData =()=> {
|
||||||
|
filterHistoryData();
|
||||||
|
for (let i = 0; i < expendDetail.series.length; i++) {
|
||||||
|
expendDetail.series[i].format = "pieDemo";
|
||||||
|
}
|
||||||
|
let length = expendDetail.series[0].data.length;
|
||||||
|
for (let i = 0; i < length; i++) {
|
||||||
|
expendCount += expendDetail.series[0].data[i].value;
|
||||||
|
}
|
||||||
|
setTimeout(() => {
|
||||||
|
delayload.value = true;
|
||||||
|
}, 1000);
|
||||||
|
}
|
||||||
|
const changeHistoryBtn = (type) => {
|
||||||
|
for (let i = 0; i < historyBtn.value.length; i++) {
|
||||||
|
if (historyBtn.value[i].type === type) {
|
||||||
|
historyBtn.value[i].state = 1;
|
||||||
|
} else {
|
||||||
|
historyBtn.value[i].state = 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
filterHistoryData();
|
||||||
|
}
|
||||||
|
// 30天报工数据
|
||||||
|
const getReportTimeList = ()=>{
|
||||||
|
getReportTime(userId.value).then(response => {
|
||||||
|
reportTime.value = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 上月报工汇总
|
||||||
|
const getLastMonthSumList = ()=>{
|
||||||
|
getLastMonthSum(userId.value).then(response => {
|
||||||
|
lastMonthSum.value = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 本月报工汇总
|
||||||
|
const getThisMonthSumList = ()=>{
|
||||||
|
getThisMonthSum(userId.value).then(response => {
|
||||||
|
thisMonthSum.value = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 本月上月计时汇总
|
||||||
|
const getSumReportTimeList = ()=>{
|
||||||
|
getSumReportTime(userId.value).then(response => {
|
||||||
|
sumReportTime.value = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// 最近30天计时列表
|
||||||
|
const getDayReportTimeList = ()=>{
|
||||||
|
getDayReportTime(userId.value).then(response => {
|
||||||
|
detailList.value = response.data;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
onLoad(() => {
|
||||||
|
getData();
|
||||||
|
getReportTimeList()
|
||||||
|
getLastMonthSumList()
|
||||||
|
getThisMonthSumList()
|
||||||
|
getSumReportTimeList()
|
||||||
|
getDayReportTimeList();
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss">
|
||||||
|
.body {
|
||||||
|
height: 100%;
|
||||||
|
background-color: #f1f1f1;
|
||||||
|
margin: 0;
|
||||||
|
padding-bottom: 20rpx;
|
||||||
|
|
||||||
|
.text_green {
|
||||||
|
color: #4ECDB6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.main {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
.detail_list {
|
||||||
|
height: 700rpx;
|
||||||
|
overflow: auto;
|
||||||
|
color: #9E9E9E;
|
||||||
|
|
||||||
|
.detail_item {
|
||||||
|
display: flex;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
align-items: center;
|
||||||
|
.right_content {
|
||||||
|
width: 75%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.hour {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extend_message {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
color: #ccc;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
text {
|
||||||
|
color: #ff9900;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.level_bar {
|
||||||
|
width: 100%;
|
||||||
|
height: 40rpx;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
display: flex;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 20rpx;
|
||||||
|
text-align: right;
|
||||||
|
line-height: 40rpx;
|
||||||
|
|
||||||
|
view {
|
||||||
|
border-right: 2rpx solid #fff;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
position: absolute;
|
||||||
|
top: -30rpx;
|
||||||
|
right: -40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.range {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 30rpx;
|
||||||
|
right: -40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.default_bar {
|
||||||
|
background-color: #A0DFCD;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_bar {
|
||||||
|
background-color: #02AE7A;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.right_btn {
|
||||||
|
float: right;
|
||||||
|
display: flex;
|
||||||
|
color: #ccc;
|
||||||
|
font-size: 22rpx;
|
||||||
|
|
||||||
|
view {
|
||||||
|
line-height: 50rpx;
|
||||||
|
height: 50rpx;
|
||||||
|
margin: 0 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.active_btn {
|
||||||
|
padding: 0 20rpx;
|
||||||
|
border: 1px solid #ccc;
|
||||||
|
border-radius: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.end_block {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
position: relative;
|
||||||
|
padding: 20rpx;
|
||||||
|
.flex_wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.row_block {
|
||||||
|
width: 100%;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background-color: #fff;
|
||||||
|
border-radius: 12rpx;
|
||||||
|
position: relative;
|
||||||
|
padding: 20rpx;
|
||||||
|
|
||||||
|
&::after {
|
||||||
|
content: "";
|
||||||
|
height: 0;
|
||||||
|
width: 92%;
|
||||||
|
position: absolute;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
left: 50%;
|
||||||
|
bottom: 0;
|
||||||
|
border-top: 1px dashed #ccc;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.the_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.left_title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title_icon {
|
||||||
|
background-color: #7E7E7E;
|
||||||
|
height: 40rpx;
|
||||||
|
width: 10rpx;
|
||||||
|
border-radius: 10rpx;
|
||||||
|
margin-right: 20rpx;
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.extend_rank {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #F5F5F5;
|
||||||
|
box-sizing: border-box;
|
||||||
|
padding: 10rpx;
|
||||||
|
|
||||||
|
.rank_item {
|
||||||
|
width: 100%;
|
||||||
|
margin: 20rpx 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
font-size: 26rpx;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
image {
|
||||||
|
width: 10%;
|
||||||
|
}
|
||||||
|
|
||||||
|
text {
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.name {
|
||||||
|
margin: 0 10rpx;
|
||||||
|
color: #7D7D7D;
|
||||||
|
width: 20%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.desc {
|
||||||
|
width: 50%;
|
||||||
|
color: #ccc;
|
||||||
|
}
|
||||||
|
|
||||||
|
.money {
|
||||||
|
width: 20%;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top_head {
|
||||||
|
height: 495rpx;
|
||||||
|
width: 100%;
|
||||||
|
padding: 110rpx 10rpx 0 10rpx;
|
||||||
|
background: url('@/static/images/icon/background.png') no-repeat center 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
|
||||||
|
.top_desc {
|
||||||
|
width: 100%;
|
||||||
|
border-radius: 20rpx;
|
||||||
|
background-color: #fff;
|
||||||
|
margin-top: 20rpx;
|
||||||
|
padding: 20rpx;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
.text {
|
||||||
|
font-size: 30rpx;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #1783f2;
|
||||||
|
margin-bottom: 10px
|
||||||
|
}
|
||||||
|
.text-gray {
|
||||||
|
font-size: 28rpx;
|
||||||
|
color: #ccc;
|
||||||
|
margin-right: 10rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.remaining {
|
||||||
|
font-size: 46rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex_1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.head_block {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
|
||||||
|
.income {
|
||||||
|
color: #E34B5E;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.text_des {
|
||||||
|
height: 100rpx;
|
||||||
|
color: #fff;
|
||||||
|
font-weight: 900;
|
||||||
|
position: relative;
|
||||||
|
margin-left: 60rpx;
|
||||||
|
|
||||||
|
text {
|
||||||
|
display: inline-block;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month_num {
|
||||||
|
font-size: 90rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month_text {
|
||||||
|
font-size: 56rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.month_year {
|
||||||
|
font-size: 22rpx;
|
||||||
|
position: absolute;
|
||||||
|
left: 60rpx;
|
||||||
|
top: 20rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.point {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.title {
|
||||||
|
font-size: 40rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue