1
This commit is contained in:
3
.env.dev
3
.env.dev
@@ -13,7 +13,8 @@ VUE_APP_TITLE = 智能监控分析系统
|
|||||||
|
|
||||||
# 芋道管理系统/开发环境
|
# 芋道管理系统/开发环境
|
||||||
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
|
# VUE_APP_BASE_API = 'http://192.168.8.22:48080'
|
||||||
VUE_APP_BASE_API = 'http://172.16.33.65:48082'
|
# VUE_APP_BASE_API = 'http://172.16.33.65:48082'
|
||||||
|
VUE_APP_BASE_API = 'http://192.168.0.31:48080'
|
||||||
|
|
||||||
# 路由懒加载
|
# 路由懒加载
|
||||||
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
VUE_CLI_BABEL_TRANSPILE_MODULES = true
|
||||||
|
|||||||
142
src/views/cost/components/add-or-updata.vue
Normal file
142
src/views/cost/components/add-or-updata.vue
Normal file
@@ -0,0 +1,142 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2021-11-18 14:16:25
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2024-09-11 15:49:14
|
||||||
|
* @Description:
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<el-form
|
||||||
|
:model="dataForm"
|
||||||
|
:rules="dataRule"
|
||||||
|
ref="dataForm"
|
||||||
|
@keyup.enter.native="dataFormSubmit()"
|
||||||
|
label-position="top"
|
||||||
|
label-width="80px">
|
||||||
|
<el-row :gutter="20">
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="日期" prop="recTime">
|
||||||
|
<el-date-picker
|
||||||
|
v-model="dataForm.recTime"
|
||||||
|
type="date"
|
||||||
|
value-format="timestamp"
|
||||||
|
:style="{ width: '100%' }"
|
||||||
|
disabled
|
||||||
|
placeholder="日期"></el-date-picker>
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="总成本" prop="price">
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 80%"
|
||||||
|
v-model="dataForm.price"
|
||||||
|
disabled
|
||||||
|
placeholder="总成本" />
|
||||||
|
(元)
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="原片下片面积" prop="originArea">
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 80%"
|
||||||
|
v-model="dataForm.originArea"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入原片下片面积" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="深加工下片面积" prop="deepArea">
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 80%"
|
||||||
|
v-model="dataForm.deepArea"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入深加工下片面积" />
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="原片成本" prop="originPrice">
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 80%"
|
||||||
|
v-model="dataForm.originPrice"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入原片成本" />
|
||||||
|
(元)
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
<el-col :span="12">
|
||||||
|
<el-form-item label="深加工成本" prop="deepPrice">
|
||||||
|
<el-input-number
|
||||||
|
:min="0"
|
||||||
|
style="width: 80%"
|
||||||
|
v-model="dataForm.deepPrice"
|
||||||
|
clearable
|
||||||
|
placeholder="请输入深加工成本" />
|
||||||
|
(元)
|
||||||
|
</el-form-item>
|
||||||
|
</el-col>
|
||||||
|
</el-row>
|
||||||
|
</el-form>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import basicAdd from '@/mixins/basic-add';
|
||||||
|
import { updateCostSum } from '@/api/cost/allCost';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mixins: [basicAdd],
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urlOptions: {
|
||||||
|
updateURL: updateCostSum,
|
||||||
|
},
|
||||||
|
dataForm: {
|
||||||
|
id: undefined,
|
||||||
|
originArea: undefined,
|
||||||
|
deepArea: undefined,
|
||||||
|
originPrice: undefined,
|
||||||
|
deepPrice: undefined,
|
||||||
|
price: undefined,
|
||||||
|
},
|
||||||
|
dataRule: {
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
init(val, statisticType) {
|
||||||
|
this.visible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs['dataForm'].resetFields();
|
||||||
|
this.dataForm = JSON.parse(JSON.stringify(val));
|
||||||
|
this.dataForm.statisticType = statisticType;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 表单提交
|
||||||
|
dataFormSubmit() {
|
||||||
|
this.$refs['dataForm'].validate((valid) => {
|
||||||
|
if (!valid) {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
const data = {
|
||||||
|
id: this.dataForm.id,
|
||||||
|
statisticType: this.dataForm.statisticType,
|
||||||
|
modifyOriginArea: this.dataForm.originArea,
|
||||||
|
modifyOriginPrice: this.dataForm.originPrice,
|
||||||
|
modifyDeepArea: this.dataForm.deepArea,
|
||||||
|
modifyDeepPrice: this.dataForm.deepPrice,
|
||||||
|
modifyPrice: this.dataForm.deepPrice + this.dataForm.originPrice,
|
||||||
|
};
|
||||||
|
// 修改的提交
|
||||||
|
this.urlOptions.updateURL(data).then((response) => {
|
||||||
|
this.$modal.msgSuccess('修改成功');
|
||||||
|
this.visible = false;
|
||||||
|
this.$emit('refreshDataList');
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
23
src/views/cost/components/typeRule.vue
Normal file
23
src/views/cost/components/typeRule.vue
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: zwq
|
||||||
|
* @Date: 2023-12-05 13:45:59
|
||||||
|
* @LastEditors: zwq
|
||||||
|
* @LastEditTime: 2024-04-15 17:12:03
|
||||||
|
* @Description
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<span>{{ parseTime(injectData.startTime,'{y}年{m}月{d}日') + '-' + (parseTime(injectData.endTime)?parseTime(injectData.endTime,'{y}年{m}月{d}日'):'永久') }}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: '',
|
||||||
|
props: {
|
||||||
|
injectData: {
|
||||||
|
type: Object,
|
||||||
|
default: () => ({}),
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
@@ -1,145 +1,5 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home-page">
|
<div class="home-page">
|
||||||
<div class="date-tabs">
|
|
||||||
<!-- @tab-click="handleClick" -->
|
|
||||||
<el-tabs v-model="activeName" @tab-click="timedayChange" :stretch="true">
|
|
||||||
<el-tab-pane
|
|
||||||
:label="'\u2002\u2002日\u2002\u2002'"
|
|
||||||
name="日"></el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
:label="'\u2002\u2002周\u2002\u2002'"
|
|
||||||
name="周"></el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
:label="'\u2002\u2002月\u2002\u2002'"
|
|
||||||
name="月"></el-tab-pane>
|
|
||||||
<el-tab-pane
|
|
||||||
:label="'\u2002\u2002年\u2002\u2002'"
|
|
||||||
name="年"></el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
<div class="detail">
|
|
||||||
<el-date-picker
|
|
||||||
v-model="timeday"
|
|
||||||
align="right"
|
|
||||||
type="date"
|
|
||||||
format="yyyy-MM-dd"
|
|
||||||
valueFormat="yyyy-MM-dd"
|
|
||||||
:clearable="false"
|
|
||||||
@change="timedayChange"
|
|
||||||
placeholder="选择日期"
|
|
||||||
:picker-options="pickerOptions"></el-date-picker>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<el-row class="main-top" :gutter="16">
|
|
||||||
<el-col :span="24" style="position: relative">
|
|
||||||
<div class="title">
|
|
||||||
<svg-icon icon-class="home-produce" />
|
|
||||||
<span class="title-inner">生产总成本</span>
|
|
||||||
</div>
|
|
||||||
<el-row class="box">
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.priceS }}万元</div>
|
|
||||||
<div class="unit-style">总计成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.matPriceS }}万元</div>
|
|
||||||
<div class="unit-style">原料成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.energyPriceS }}万元</div>
|
|
||||||
<div class="unit-style">能源成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.otherPriceS }}万元</div>
|
|
||||||
<div class="unit-style">其他成本</div>
|
|
||||||
</el-col>
|
|
||||||
<!-- <el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.ratioS }}</div>
|
|
||||||
<div class="unit-style">综合良品率/%</div>
|
|
||||||
</el-col> -->
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.areaPriceS }}元</div>
|
|
||||||
<div class="unit-style">综合每平米成本</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" style="position: relative">
|
|
||||||
<div class="title">
|
|
||||||
<svg-icon icon-class="home-produce" />
|
|
||||||
<span class="title-inner">原片成本</span>
|
|
||||||
</div>
|
|
||||||
<el-row class="box">
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.priceO }}万元</div>
|
|
||||||
<div class="unit-style">原片总成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.matPriceO }}万元</div>
|
|
||||||
<div class="unit-style">原料成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.energyPriceO }}万元</div>
|
|
||||||
<div class="unit-style">能源成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.otherPriceO }}万元</div>
|
|
||||||
<div class="unit-style">其他成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.ratioO }}</div>
|
|
||||||
<div class="unit-style">原片良品率/%</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.areaPriceO }}元</div>
|
|
||||||
<div class="unit-style">原片每平米成本</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="24" style="position: relative">
|
|
||||||
<div class="title">
|
|
||||||
<svg-icon icon-class="home-produce" />
|
|
||||||
<span class="title-inner">深加工成本</span>
|
|
||||||
</div>
|
|
||||||
<el-row class="box">
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.priceD }}万元</div>
|
|
||||||
<div class="unit-style">深加工总成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.energyPriceD }}万元</div>
|
|
||||||
<div class="unit-style">能源成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.otherPriceD }}万元</div>
|
|
||||||
<div class="unit-style">其他成本</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.ratioD }}</div>
|
|
||||||
<div class="unit-style">深加工良品率/%</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="4" class="num-box shadow">
|
|
||||||
<div class="num-style">{{ homeData.areaPriceD }}元</div>
|
|
||||||
<div class="unit-style">深加工每平米成本</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<el-row class="main-bottom" :gutter="16" v-if="false">
|
|
||||||
<el-col :span="9">
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<line-chart :chart-data="lineChartData" />
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="7">
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<pie-chart />
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="8">
|
|
||||||
<div class="chart-wrapper">
|
|
||||||
<bar-chart />
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<div
|
<div
|
||||||
class="main-footer"
|
class="main-footer"
|
||||||
style="
|
style="
|
||||||
@@ -157,267 +17,29 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import moment from 'moment';
|
|
||||||
import tableHeightMixin from '@/mixins/lb/tableHeightMixin';
|
|
||||||
import LineChart from '../dashboard/LineChart';
|
|
||||||
import PieChart from '../dashboard/PieChart';
|
|
||||||
import BarChart from '../dashboard/BarChart';
|
|
||||||
import PanelGroup from '../dashboard/PanelGroup';
|
|
||||||
import { getData } from '@/api/cost/allCost';
|
|
||||||
import { getUserProfile } from '@/api/system/user';
|
|
||||||
|
|
||||||
const lineChartData = {
|
|
||||||
newVisitis: {
|
|
||||||
expectedData: [100, 120, 161, 134, 105, 160, 165],
|
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 145],
|
|
||||||
},
|
|
||||||
messages: {
|
|
||||||
expectedData: [200, 192, 120, 144, 160, 130, 140],
|
|
||||||
actualData: [180, 160, 151, 106, 145, 150, 130],
|
|
||||||
},
|
|
||||||
purchases: {
|
|
||||||
expectedData: [80, 100, 121, 104, 105, 90, 100],
|
|
||||||
actualData: [120, 90, 100, 138, 142, 130, 130],
|
|
||||||
},
|
|
||||||
shoppings: {
|
|
||||||
expectedData: [130, 140, 141, 142, 145, 150, 160],
|
|
||||||
actualData: [120, 82, 91, 154, 162, 140, 130],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'Home',
|
name: 'Home',
|
||||||
mixins: [tableHeightMixin],
|
mixins: [],
|
||||||
components: {
|
components: {},
|
||||||
LineChart,
|
computed: {},
|
||||||
PieChart,
|
|
||||||
PanelGroup,
|
|
||||||
BarChart,
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
gradientBackground() {
|
|
||||||
return {
|
|
||||||
'background-image':
|
|
||||||
'linear-gradient(90deg, #f0f0f0 25%, rgba(255, 255, 255, 0) 25%, rgba(255, 255, 255, 0) 50%, #f0f0f0 50%, #f0f0f0 75%, rgba(255, 255, 255, 0) 75%, rgba(255, 255, 255, 0))',
|
|
||||||
'background-size': '100px 100px', // 调整条纹的大小
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {};
|
||||||
activeName: '日',
|
|
||||||
user: '',
|
|
||||||
lineChartData: lineChartData.newVisitis,
|
|
||||||
homeData: {},
|
|
||||||
timeday: moment(new Date()).subtract(1, 'days').format('YYYY-MM-DD'),
|
|
||||||
startTime:
|
|
||||||
moment(new Date()).subtract(0, 'days').format('YYYY-MM-DD') +
|
|
||||||
' 00:00:00',
|
|
||||||
endTime:
|
|
||||||
moment(new Date()).subtract(-1, 'days').format('YYYY-MM-DD') +
|
|
||||||
' 00:00:00',
|
|
||||||
|
|
||||||
pickerOptions: {
|
|
||||||
disabledDate(time) {
|
|
||||||
return time.getTime() + 3600 * 1000 * 24 > Date.now();
|
|
||||||
},
|
|
||||||
shortcuts: [
|
|
||||||
{
|
|
||||||
text: '今天',
|
|
||||||
onClick(picker) {
|
|
||||||
picker.$emit('pick', new Date());
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '昨天',
|
|
||||||
onClick(picker) {
|
|
||||||
const date = new Date();
|
|
||||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
|
||||||
picker.$emit('pick', date);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
text: '一周前',
|
|
||||||
onClick(picker) {
|
|
||||||
const date = new Date();
|
|
||||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
|
||||||
picker.$emit('pick', date);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
},
|
},
|
||||||
beforeDestroy() {
|
beforeDestroy() {
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
getData() {
|
|
||||||
let listQuery = {
|
|
||||||
//分页
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
|
||||||
startTime: this.timeday + ' 00:00:00',
|
|
||||||
};
|
|
||||||
getData(listQuery).then((response) => {
|
|
||||||
this.homeData = response.data;
|
|
||||||
for (let i in this.homeData) {
|
|
||||||
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
timedayChange() {
|
|
||||||
let listQuery = {
|
|
||||||
//分页
|
|
||||||
pageSize: 10,
|
|
||||||
pageNo: 1,
|
|
||||||
statisticType: ['', '日', '周', '月', '年'].indexOf(this.activeName),
|
|
||||||
startTime: this.timeday + ' 00:00:00',
|
|
||||||
};
|
|
||||||
getData(listQuery).then((response) => {
|
|
||||||
this.homeData = response.data;
|
|
||||||
for (let i in this.homeData) {
|
|
||||||
this.homeData[i] = Number(this.homeData[i]).toFixed(2);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
goDetail() {
|
|
||||||
this.$router.push({ path: 'indexDetail' });
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.home-page::before {
|
|
||||||
background-image: url('~@/assets/img/home-bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-position: center;
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
.date-tabs {
|
|
||||||
padding-left: 40px;
|
|
||||||
padding-top: 20px;
|
|
||||||
position: relative;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
}
|
|
||||||
:deep(.date-tabs) {
|
|
||||||
.el-tabs__header {
|
|
||||||
margin-bottom: 8px;
|
|
||||||
display: inline-block;
|
|
||||||
transform: translateY(-12px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__content {
|
|
||||||
overflow: visible;
|
|
||||||
}
|
|
||||||
|
|
||||||
.el-tabs__item {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #fff;
|
|
||||||
padding-left: 0 !important;
|
|
||||||
padding-right: 0 !important;
|
|
||||||
line-height: 36px !important;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
.el-tabs__item.is-active {
|
|
||||||
color: #0b58ff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.detail {
|
|
||||||
display: inline-block;
|
|
||||||
position: absolute;
|
|
||||||
left: 260px;
|
|
||||||
top: 10px;
|
|
||||||
}
|
|
||||||
:deep(.detail) {
|
|
||||||
.el-input__inner {
|
|
||||||
background-color: transparent;
|
|
||||||
color: white;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// .current-date {
|
|
||||||
// color: #fff;
|
|
||||||
// font-size: 18px;
|
|
||||||
// position: absolute;
|
|
||||||
// left: 260px;
|
|
||||||
// top: 14px;
|
|
||||||
// }
|
|
||||||
.current-time {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 18px;
|
|
||||||
position: absolute;
|
|
||||||
right: 38px;
|
|
||||||
top: 14px;
|
|
||||||
}
|
|
||||||
.main-top {
|
|
||||||
width: 100%;
|
|
||||||
padding: 0 20px 0 40px;
|
|
||||||
.title {
|
|
||||||
position: absolute;
|
|
||||||
left: 34px;
|
|
||||||
top: 20px;
|
|
||||||
width: 180px;
|
|
||||||
font-size: 32px;
|
|
||||||
z-index: 10;
|
|
||||||
.title-inner {
|
|
||||||
position: absolute;
|
|
||||||
left: 42px;
|
|
||||||
top: 5px;
|
|
||||||
font-size: calc(100vw * 20 / 1920);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.box {
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 24px;
|
|
||||||
height: 192px;
|
|
||||||
padding: 40px 24px 32px 24px;
|
|
||||||
margin-bottom: 20px;
|
|
||||||
box-shadow: 0 8px 8px 0 gray;
|
|
||||||
.num-box {
|
|
||||||
height: 120px;
|
|
||||||
padding-top: 26px;
|
|
||||||
text-align: center;
|
|
||||||
.num-style {
|
|
||||||
color: #000;
|
|
||||||
font-size: calc(100vw * 40 / 1920);
|
|
||||||
}
|
|
||||||
.unit-style {
|
|
||||||
color: rgba(0, 0, 0, 0.7);
|
|
||||||
font-size: calc(100vw * 18 / 1920);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.shadow {
|
|
||||||
background: linear-gradient(90deg, #ffffff 80%, #f2f4f9 100%);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.main-bottom {
|
|
||||||
width: 100%;
|
|
||||||
margin-top: 20px;
|
|
||||||
.chart-wrapper {
|
|
||||||
margin-left: 10px;
|
|
||||||
height: 425px;
|
|
||||||
background: #fff;
|
|
||||||
border-radius: 5px;
|
|
||||||
box-shadow: 0 3px 3px 0 gray;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.home-page {
|
|
||||||
.el-progress-bar__inner {
|
|
||||||
background-image: url('~@/assets/img/home-progress-bg.png');
|
|
||||||
background-size: cover;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Reference in New Issue
Block a user