Skip to content

S
shld-databoard-ui
Commit af07f129 authored by 谢章伟's avatar 谢章伟
Browse files
Options

Merge remote-tracking branch 'origin/240806_pro_release' into 240806_pro_release

parents 49353443 1f57fdd0
Show whitespace changes
Inline Side-by-side
Showing with 71 additions and 798 deletions
src/module/index/router/index_router.js
View file @ af07f129
import Vue from 'vue'
import Router from 'vue-router'
import Index from '../../databoard/index.vue'
import IndexSale from '../../sale/sale.vue'
import IndexSale from '../../databoard/databoard/sale-index.vue'
import ArBar from "../../databoard/components/chart/ar-bar.vue";
import ArCompanyBar from "../../databoard/components/chart/ar-company-bar.vue";
import ArMonthlyBar from "../../databoard/components/chart/ar-monthly-bar.vue";
......
src/module/sale/sale.vue
View file @ af07f129
<template>
<div class="container">
<div class="left-bar">
<display-board class="trade_left" style="width: 100%" title="已开票未收款">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" @click.native="goArBar" id="ar_company_list" :rows="arCompanyList"/>
</display-board>
</div>
<div class="right-container">
<div class="right-top">
<display-board class="trade_middle" style="width: 61%" title="应收款情况" corner_size="large">
<div style="height: 36%;display: flex;justify-content: space-evenly;padding-top: 1.5rem">
<simple-card v-for="data in arSummary" style="width: 30%;height: 100%">
<title-content-mark style="color: #5eeef4;" :title="data.title" :content="data.value" :mark="'万元'"
isCenter isBold/>
</simple-card>
</div>
<ar-summary-bar ref="arSummaryBar" style="width: 100%; height: 64%;"></ar-summary-bar>
</display-board>
<display-board class="trade_right" style="width: 33%" title="潜在客户">
<winners-list style="height: 96%;overflow: auto;" :mouseHand="true" id="lose_user_list" :rows="lossUserList"/>
</display-board>
</div>
<div class="right-bottom" >
<display-board class="left" style="width: 61%" corner_size="large">
<div style="display: flex; justify-content: space-between; width: 100%; height: 50%; padding-top: 2rem;">
<div ref="areaBar" style="width: 100%; height: 100%;"/>
<div class="page">
<div class="head">
<div class="text_left">
<input class="btn" type="button" value="返回上级" v-if="$route.fullPath !== '/index' && $route.fullPath !== '/index-sale' " @click="goIndex">
<span>{{ currentDate }}</span>
<span>{{ currentTime }}</span>
<span>{{ currentWeek }}</span>
</div>
<div style="display: flex; justify-content: space-between; height: 50%; padding-top: 2rem;" >
<showcase style="width: 16%;" title="当日订单量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drddl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drddl.amount+' 万元'" />
</showcase>
<showcase style="width: 16%;" title="当日运单量" :mouseHand="true" @click.native="routerTo('/department-shipment')">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drydl.count + ' 车'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drydl.weight + ' 万吨'" />
</showcase>
<showcase style="width: 16%;" title="当日完成量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="drwcl.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="drwcl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="余量">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="yl.weight+ ' 万吨'" />
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="yl.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="潜在客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',2)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="lskh.weight+' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="lskh.amount+ ' 万元'" />
</showcase>
<showcase style="width: 16%;" title="新增客户" :mouseHand="true" @click.native="routerTo('/lost-add-customer',1)">
<title-content-mark
style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;font-size: 16px;"
content-style="font-size: 14px;" mark-style="font-size: 10px;" :content="xzkh.weight+ ' 万吨'"
/>
<title-content-mark style="float:left;width: 100%;height: 50%;color: #5eeef4;padding: 0 15%;"
content-style="font-size: 14px;" mark-style="font-size: 10px;"
:content="xzkh.amount + ' 万元'" />
</showcase>
</div>
</display-board >
<display-board class="right" style="width: 33%" title="当日订单量占比">
<div
style="height: 100%; display: flex; flex-direction: column; justify-content: space-around; padding: 0 1rem 0 1rem;">
<ring-pie-chart ref="transportTypeChart" style="width: 100%;height: 50%;z-index: 999" name="运输类型占比"
:data="transportTypeOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
<ring-pie-chart ref="customerChart" style="width: 100%;height: 50%;" name="公司占比"
:data="customerOrderFinishPie" @click.native="routerTo('/order-proportion')"
:value-formatter="pieDataValueFormatter" :formatter="pieDataFormatter"/>
</div>
</display-board>
<div class="text_right">
<span>刷新时间：{{ countDown }}s</span>
</div>
</div>
<router-view style="height: 90%" v-if="isRouterAlive" :countDown="countDown"></router-view>
</div>
</template>
<script>
import DisplayBoard from "../databoard/components/container/display-board.vue";
import Showcase from "../databoard/components/container/showcase.vue";
import ContrastCard from "../databoard/components/card/contrast-card.vue";
import SimpleCard from "../databoard/components/card/simple-card.vue";
import ArSummaryBar from "../databoard/components/chart/ar-summary-bar.vue";
import WinnersList from "../databoard/components/card/winners-list.vue";
import TitleContentMark from "../databoard/components/layout/title-content-mark.vue";
import TableColumn from "../databoard/components/table/table-column.vue";
import RingPieChart from "../databoard/components/chart/ring-pie-chart.vue";
import {
arSummaryBar,
getAccountSituation,
arCompanyList,
lostUserList,
getBusinessConditionDatas,
getOrderLoseAddCustomer,
getOrderBusinessConditionData, getShipmentDataByArea
} from "../api/apiList"
import {calc_hb_str, calc_tb_str, conver_amont, conver_num_retain} from "../utils/numUtil";
import {getTransportTypeOrderFinishPie, getCustomerOrderFinishPie} from "../databoard/databoard/js/indexPieData";
import moment from 'moment'
import {getTargetOrderDataByConditionCount} from "../databoard/databoard/js/targetAchievementData";
import * as echarts from "echarts";
import axios from "axios";
import {prefixZero} from "../utils/numUtil";
window.axios = axios
window.$ = window.jQuery = require('materialize-css/node_modules/jquery/dist/jquery.js')
require('materialize-css')
export default {
components: {
RingPieChart,
TableColumn,
TitleContentMark,
Showcase,
DisplayBoard,
ContrastCard,
SimpleCard,
ArSummaryBar,
WinnersList
},
name: 'app',
data() {
return {
today: moment().format("yyyy-MM-DD"),
yyqk: {
yye: {
title: "营业额",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20,000",
rate: "+4.92%",
},
],
},
cb: {
title: "成本",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
ml: {
title: "毛利",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
arSummary: [
{title: '累计营业收入（当年）', value: '20,303'},
{title: '应收款（财务）', value: '20,303'},
{title: '应收款（营销）', value: '20,303',},
],
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
drddl: {
weight: "2,000",
amount: "20,000",
},
drydl: {
count: "2,000",
weight: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
yl: {
weight: "2,000",
amount: "20,000",
},
mockData: {
zqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
sr: [
{
title: '累计营业收入（当年）',
value: '20,303',
},
{
title: '应收款（财务）',
value: '20,303',
},
{
title: '应收款（营销）',
value: '20,303',
},
],
mrmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
ydmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
drddl: {
weight: "2,000",
amount: "20,000",
},
drwcl: {
weight: "2,000",
amount: "20,000",
},
yl: {
weight: "2,000",
amount: "20,000",
},
lskh: {
weight: "2,000",
amount: "20,000",
},
xzkh: {
weight: "2,000",
amount: "20,000",
},
ndmbqk: [
{
title: "吨位(万吨)",
actualValue: "20,303",
currentValue: "21,000",
},
{
title: "营业额(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
{
title: "净利润(万元)",
actualValue: "32,342",
currentValue: "21,000",
},
],
zkqk: {
yszk: {
title: "应收账款",
amount: "20,303",
unit: "万元",
hb: [
{
title: "昨天",
amount: "21,000",
rate: "-3.32%",
},
{
title: "上月",
amount: "20，000",
rate: "+4.92%",
},
],
},
yfzk: {
title: "应付账款",
amount: "10,303",
unit: "万元",
hb: [
{
title: "昨日",
amount: "11,000",
rate: "-2.68%",
},
{
title: "上月",
amount: "10,000",
rate: "+5.71%",
},
],
},
zsye: {
title: "账上余额",
amount: "10,000",
unit: "万元",
hb: [
{
title: "昨日",
amount: "10,000",
rate: "0.00%",
},
{
title: "上月",
amount: "10,000",
rate: "0.00%",
},
],
},
},
barChart: {
textStyle: {color: "#fff"},
tooltip: {},
xAxis: {
data: ['未结算未开票', '已结算未开票', '已开票未收款', '应收款', '已开票已收款']
},
yAxis: {},
series: [
{
name: '开票详情',
type: 'bar',
data: [500, 300, 500, 1001, 319],
color: "#7f83f7",
label: {
show: true,
position: 'top',
color: "#fff",
},
}
]
},
drddlzb: {
transportType: [
{value: 2500, name: '汽运'},
{value: 100, name: '码头/仓库'},
{value: 500, name: '铁运'},
{value: 484, name: '水运'},
],
customer: [
{value: 500, name: '上海欧冶物流股份有限公司'},
{value: 2500, name: '宝钢运输部'},
{value: 1100, name: '宝山钢铁股份有限公司'},
]
},
},
paths: {
"营业额": "yye",
"成本": "cb",
"毛利": "ml",
},
areaBarData: {
tooltip: {
trigger: 'axis'
},
textStyle: {
color: "#FFFFFF",
fontSize: "12"
},
grid: {
containLabel: true,
top: "10%",
bottom: '0'
},
yAxis: {
type: "value",
splitLine: {
lineStyle: {
color: "#1E2C58"
}
},
},
xAxis: {
data: ['华南', '华北', '华东', '华西', '华中', '东北'],
axisLabel: {
color: "#FFFFFF",
fontSize: "12",
},
axisTick: {
show: false
}
},
series: []
},
dataset: {},
transportTypeOrderFinishPie: [],
customerOrderFinishPie: [],
arCompanyList: [],
lossUserList: [],
charts: {},
targetAchievement:{
day: null,
month: null,
year: null,
}
countDown: 10,
currentDate: null,
currentTime: null,
currentWeek: null,
isRouterAlive: true,
countDownTimer: null,
week: ['星期天','星期一','星期二','星期三','星期四','星期五','星期六'],
}
},
methods: {
cellStyleFunction(data) {
let res = {color: '#33ff66'};
if (data.indexOf('-') !== -1) {
res.color = '#ff3300'
}
return res;
goIndex() {
this.$router.go(-1)
},
resizeChart() {
for (let chartsKey in this.charts) {
this.charts[chartsKey].resize();
}
},
routerTo(path, code) {
this.$router.push({path: path, query: {code: code}});
},
//营业情况
showBusinessConditionDatas() {
let res = getBusinessConditionDatas(this.today)
res.then(data => {
data = data.data;
//营业额
this.yyqk.yye.amount = conver_amont(data.cur_sell_settle_amount);
this.yyqk.yye.hb[0].amount = conver_amont(data.pre_sell_settle_amount);
this.yyqk.yye.hb[0].rate = calc_hb_str(data.cur_sell_settle_amount, data.pre_sell_settle_amount);
this.yyqk.yye.hb[1].amount = conver_amont(data.pre_month_sell_settle_amount);
this.yyqk.yye.hb[1].rate = calc_tb_str(data.cur_sell_settle_amount, data.pre_month_sell_settle_amount);
//成本
this.yyqk.cb.amount = conver_amont(data.cur_buy_settle_amount);
this.yyqk.cb.hb[0].amount = conver_amont(data.pre_buy_settle_amount);
this.yyqk.cb.hb[0].rate = calc_hb_str(data.cur_buy_settle_amount, data.pre_buy_settle_amount);
this.yyqk.cb.hb[1].amount = conver_amont(data.pre_month_buy_settle_amount);
this.yyqk.cb.hb[1].rate = calc_tb_str(data.cur_buy_settle_amount, data.pre_month_buy_settle_amount);
//毛利
this.yyqk.ml.amount = conver_amont(data.cur_gross_profit_amount);
this.yyqk.ml.hb[0].amount = conver_amont(data.pre_gross_profit_amount);
this.yyqk.ml.hb[0].rate = calc_hb_str(data.cur_gross_profit_amount, data.pre_gross_profit_amount);
this.yyqk.ml.hb[1].amount = conver_amont(data.pre_month_gross_profit_amount);
this.yyqk.ml.hb[1].rate = calc_tb_str(data.cur_gross_profit_amount, data.pre_month_gross_profit_amount);
reload() {
this.isRouterAlive = false
this.$nextTick(function () {
this.isRouterAlive = true
})
},
// 跳转已开票未收款页面
goArBar() {
this.$router.push('/ar_bar')
},
// 跳转到应收账款汇总表
goAccRevSearch() {
parent.window.location = '/#/l/accounts_receivable_statistics_search'
},
// 获取应收账款数据
getArSummaryBar() {
arSummaryBar().then(res => {
let data = res.data
let seriesData = []
seriesData.push(data.unsettled_amount)
seriesData.push(data.settled_amount)
seriesData.push(data.unregister_amount)
seriesData.push(data.receivable_amount)
seriesData.push(data.cancelled_amount)
this.arSummary[0].value = conver_num_retain(data.total_amount)
this.arSummary[1].value = conver_num_retain(data.unregister_amount)
this.arSummary[2].value = conver_num_retain(data.receivable_amount)
this.zkqk.yszk.amount = conver_num_retain(data.receivable_amount)
this.$refs.arSummaryBar.drawArSummaryBar(seriesData)
}).catch(err => {
console.log(err);
});
setCurrentDateTime(){
let now = new Date();
this.currentDate = now.getFullYear() + "-" + prefixZero(now.getMonth()+1,2) + "-" + prefixZero(now.getDate(),2);
this.currentTime = prefixZero(now.getHours(),2) + ":" + prefixZero(now.getMinutes(),2) + ":" + prefixZero(now.getSeconds(),2);
this.currentWeek = this.week[now.getDay()];
},
//获取账款情况
getAccountSituation(){
getAccountSituation(this.today).then(res => {
let data = res.data
this.zkqk.yszk.hb[0].amount = conver_amont(data.per_day_receivable_amount);
this.zkqk.yszk.hb[0].rate = calc_hb_str(this.zkqk.yszk.amount, data.per_day_receivable_amount);
this.zkqk.yszk.hb[1].amount = conver_amont(data.per_month_receivable_amount);
this.zkqk.yszk.hb[1].rate = calc_tb_str(this.zkqk.yszk.amount, data.per_month_receivable_amount);
this.zkqk.yfzk.amount = conver_amont(data.payable_amount)
this.zkqk.yfzk.hb[0].amount = conver_amont(data.per_day_payable_amount);
this.zkqk.yfzk.hb[0].rate = calc_hb_str(data.payable_amount, data.per_day_receivable_amount);
this.zkqk.yfzk.hb[1].amount = conver_amont(data.per_month_payable_amount);
this.zkqk.yfzk.hb[1].rate = calc_tb_str(data.payable_amount, data.per_month_payable_amount);
this.zkqk.zsye.amount = conver_amont(data.acc_bla)
this.zkqk.zsye.hb[0].amount = conver_amont(data.per_day_acc_bla);
this.zkqk.zsye.hb[0].rate = calc_hb_str(data.acc_bla, data.per_day_acc_bla);
this.zkqk.zsye.hb[1].amount = conver_amont(data.per_month_acc_bla);
this.zkqk.zsye.hb[1].rate = calc_tb_str(data.acc_bla, data.per_month_acc_bla);
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getArCompanyList() {
arCompanyList().then(res => {
if (res.data.length) {
this.arCompanyList = res.data
}
}).catch(err => {
console.log(err);
});
},
// 获取已开票未收款排行
getLostUserList() {
lostUserList(this.today).then(res => {
if (res.data.length) {
this.lossUserList = res.data
}
}).catch(err => {
console.log(err);
});
},
refreshData() {
getTransportTypeOrderFinishPie(res => this.transportTypeOrderFinishPie = res, this.today);
getCustomerOrderFinishPie(res => this.customerOrderFinishPie = res, this.today);
this.showBusinessConditionDatas();
this.getArSummaryBar();
this.getAccountSituation();
this.getArCompanyList();
this.getLostUserList();
this.getLoseAndAdd();
this.getOrderBusinessCondition();
this.getTargetOrderDataByConditionCount();
this.getShipmentAreaBar();
},
getShipmentAreaBar() {
let chartDom = this.$refs.areaBar;
this.areaBar = echarts.init(chartDom);
getShipmentDataByArea(this.today).then(res => {
var data = ['10','20','30','40','50','60'];
var data2 = [];
data.forEach(function (row) {
var num = 0;
res.data.forEach(function (data) {
if(data.area_name === row){
num = data.finished_weight_sum;
}
});
data2.push(num);
});
this.areaBarData.series =
[{
name: '完成量',
type: 'bar',
xAxisIndex: null,
smooth: true,
emphasis: {
focus: 'series'
},
data: data2
}];
this.areaBar.setOption(this.areaBarData);
});
},
pieDataValueFormatter(param) {
return conver_amont(param) + "万吨";
},
pieDataFormatter(param) {
return param.name + '\r\n' + this.pieDataValueFormatter(param.value);
},
getLoseAndAdd() {
getOrderLoseAddCustomer(this.today).then(res => {
let data = res.data
this.lskh.amount = conver_amont(data.lost_sell_settle_amount_sum);
this.lskh.weight = conver_amont(data.lost_weight_sum);
this.xzkh.amount = conver_amont(data.add_sell_settle_amount_sum);
this.xzkh.weight = conver_amont(data.add_weight_sum);
})
},
getOrderBusinessCondition() {
getOrderBusinessConditionData(this.today).then(res => {
let data = res.data
this.drddl.amount = conver_amont(data.cur_sell_settle_amount);
this.drddl.weight = conver_amont(data.cur_unit_weight);
this.drydl.count = data.drydl_count;
this.drydl.weight = conver_amont(data.drydl_weight);
this.drwcl.amount = conver_amont(data.cur_finish_sell_settle_amount);
this.drwcl.weight = conver_amont(data.cur_finish_unit_weight);
this.yl.amount = conver_amont(data.cur_unfinish_sell_settle_amount);
this.yl.weight = conver_amont(data.cur_unfinish_unit_weight);
})
},
getTargetOrderDataByConditionCount() {
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"day",group_type:"01"},(res) => {this.targetAchievement.day = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"month",group_type:"01"},(res) => {this.targetAchievement.month = res;})
getTargetOrderDataByConditionCount({cur_day: this.today,time_type:"year",group_type:"01"},(res) => {this.targetAchievement.year = res;})
}
},
mounted() {
setTimeout(() => {
this.refreshData();
window.addEventListener('resize', this.resizeChart);
}, 500);
},
beforeDestroy() {
window.removeEventListener("resize", this.resizeChart);
},
watch:{
countDown(n,o){
if (n === 1){
this.refreshData();
this.$router.push("/index-sale")
// 倒计时器
this.countDownTimer = setInterval(() => {
this.countDown--
if (this.countDown <= 0) {
this.countDown = 10;
}
this.setCurrentDateTime();
}, 1000)
},
},
props:{
countDown:{
type: Number
beforeDestroy() {
// 倒计时器
if (this.countDownTimer) {
clearInterval(this.countDownTimer)
}
}
};
</script>
<style lang="postcss">
#ar_company_list:hover {
background-color: #19EBFF10;
transform: scale(101%);
}
</script>
.container {
display: flex; /* 使用 Flexbox 布局 */
height: 100vh; /* 视口高度 */
width: 100%;
max-width: 100%;
}
<style>
@import "../../../node_modules/materialize-css/bin/materialize.css";
.left-bar {
width: 25%; /* 左侧栏宽度 */
/*background-color: #f0f0f0; !* 背景色 *!*/
/*padding: 10px; !* 内边距 *!*/
justify-content: space-around;
display: flex;
padding: 1rem;
#app {
}
.right-container {
flex: 1; /* 剩余空间，右侧的部分 */
display: flex;
flex-direction: column; /* 垂直排列 */
width: 75%; /* 右侧栏宽度 */
@media only screen and (max-width: 992px) {
header, main, footer {
padding-left: 0;
}
}
.right-top {
height: 50%; /* 右上栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
.btn{
height: 70%;
margin: 0.5%;
border: none;
font-size: 12px;
font-weight: bold;
border-radius: 25px;
padding: 0 10px;
line-height: 100%;
color: #00c8d6;
background-color: #1234a1;
margin: auto;
}
.right-bottom {
height: 50%; /* 右下栏高度，设为 50% */
justify-content: space-around;
display: flex;
padding: 1rem;
.btn:hover{
color: #1234a1 !important;
background-color: #00c8d6 !important;
}
/*.trade_left {*/
/* width: 100%;*/
/*}*/
/*.trade_middle {*/
/* width: 61%;*/
/*}*/
/*.trade_right {*/
/* width: 33%;*/
/*}*/
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment