报工报表接口对接，投料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