代码提交
This commit is contained in:
commit
4c84b336af
|
|
@ -3,12 +3,11 @@
|
|||
<div id="app">
|
||||
<div class="top">
|
||||
<div class="topLeft">
|
||||
<div style="color:rgb(56,171,192)">
|
||||
<div style="color:rgb(56,171,192);font-family: 'maleGod'">
|
||||
2023-02-09
|
||||
</div>
|
||||
|
|
||||
<div>
|
||||
2:37:05
|
||||
<div style="font-family: 'maleGod';margin-bottom: 3%;">
|
||||
12:37:05
|
||||
</div>
|
||||
</div>
|
||||
<div class="topCenter">
|
||||
|
|
@ -69,7 +68,7 @@ export default {
|
|||
align-items: center;
|
||||
justify-content: center;
|
||||
justify-content: space-evenly;
|
||||
font-size: 20px;
|
||||
font-size: px;
|
||||
}
|
||||
.topCenter{
|
||||
width: 76%;
|
||||
|
|
|
|||
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 328 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 471 B |
Binary file not shown.
|
After Width: | Height: | Size: 220 B |
Binary file not shown.
|
After Width: | Height: | Size: 241 B |
Binary file not shown.
|
After Width: | Height: | Size: 229 B |
Binary file not shown.
|
After Width: | Height: | Size: 9.5 KiB |
|
|
@ -6,37 +6,90 @@
|
|||
<div class="business-hall">
|
||||
<div class="title">
|
||||
<!-- 45.4% -->
|
||||
<p class="titleText" text="营业厅时长" style="font-family: 'maleGod'">
|
||||
<p class="titleText" text="营业厅时长" style="font-family: maleGod">
|
||||
营业厅时长
|
||||
</p>
|
||||
</div>
|
||||
<!-- 两个小版块 -->
|
||||
<div class="hall-box">
|
||||
<div class="item">
|
||||
<p class="font">平均办理时长</p>
|
||||
<p class="hall-time" style="color: #2e81a2">49分钟33秒</p>
|
||||
</div>
|
||||
<div class="item">
|
||||
<p class="font">平均等待时长</p>
|
||||
<p class="hall-time" style="color: #9c9060">05分钟33秒</p>
|
||||
<div class="item" v-for="(item, i) in hallList" :key="i">
|
||||
<p class="font">{{ item.font }}</p>
|
||||
<p :class="'hall-time' + i">{{ item.time }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表内容样式 -->
|
||||
<div class="hall-line">
|
||||
<div class="hall-title">
|
||||
<div>
|
||||
<span
|
||||
style="font-family: 'maleGod'"
|
||||
:text="s"
|
||||
v-for="(s, i) in hallTitle"
|
||||
:class="'span' + i"
|
||||
>
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="hall-icon">
|
||||
<span></span>
|
||||
<span></span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表样式 -->
|
||||
<div class="hall-chart" ref="hallChart"></div>
|
||||
</div>
|
||||
<!-- 客流量 -->
|
||||
<div class="passenger-flow">
|
||||
<div class="title">
|
||||
<p class="titleText" text="客流量" style="font-family: 'maleGod'">
|
||||
<p class="titleText" text="客流量" style="font-family: maleGod">
|
||||
客流量
|
||||
</p>
|
||||
</div>
|
||||
<!-- 客流量板块内容 -->
|
||||
<div class="flow-box">
|
||||
<div class="flow-left">
|
||||
<p class="flow-total">总客流量</p>
|
||||
<span class="flow-value">6587次</span>
|
||||
</div>
|
||||
<div class="flow-right">
|
||||
<ul>
|
||||
<li class="flow-item" v-for="(val, i) in flowList">
|
||||
<span :class="'up' + i"
|
||||
><i :class="'rect' + i"></i>{{ val.value }}</span
|
||||
>
|
||||
<span>{{ val.text }}</span>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 图表切换 -->
|
||||
<div class="chart-title">
|
||||
<span v-for="(s, i) in hallLineList">
|
||||
{{ s }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="flow-chart" ref="flowChart"></div>
|
||||
</div>
|
||||
<!-- 厅内统计 -->
|
||||
<div class="hall-statistics">
|
||||
<div class="title">
|
||||
<p class="titleText" text="厅内统计" style="font-family: 'maleGod'">
|
||||
<p class="titleText" text="厅内统计" style="font-family: maleGod">
|
||||
厅内统计
|
||||
</p>
|
||||
</div>
|
||||
<div class="stat">
|
||||
<div v-for="(o, i) in statList" :key="i" class="stat-item">
|
||||
<section :class="'img' + i"></section>
|
||||
<p>{{ o.name }}</p>
|
||||
<p class="stat-num">{{ o.num }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 右边的内容 -->
|
||||
|
|
@ -160,8 +213,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="businessChart">
|
||||
<div id="rightBusinessOne" v-show="!businessShow"></div>
|
||||
<div id="rightBusinessTwo" v-show="businessShow"></div>
|
||||
<div id="rightBusinessOne" v-show="!businessShow"></div>
|
||||
<div id="rightBusinessTwo" v-show="businessShow"></div>
|
||||
<!-- <div class="rightBusinessOneList"></div> -->
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -193,7 +246,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div id="serviceTwo"></div>
|
||||
<div class="selectType">
|
||||
<div class="selectType">
|
||||
<div
|
||||
v-for="(item, index) in serviceTypeList"
|
||||
:key="index"
|
||||
|
|
@ -208,9 +261,7 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="middle-content">
|
||||
<div class="">
|
||||
|
||||
</div>
|
||||
<div class="middleBottom"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -220,9 +271,64 @@ export default {
|
|||
name: "index",
|
||||
data() {
|
||||
return {
|
||||
index:null,
|
||||
hallList: [
|
||||
{
|
||||
font: "平均办理时长",
|
||||
time: "49分钟33秒",
|
||||
},
|
||||
{
|
||||
font: "平均等待时长",
|
||||
time: "05分钟33秒",
|
||||
},
|
||||
],
|
||||
hallTitle: ["平均办理时长", "平均等待时长"],
|
||||
hallLineList: ["人员", "趋势", "排序", "排名"],
|
||||
flowList: [
|
||||
{
|
||||
text: "峰值",
|
||||
value: "115人次",
|
||||
},
|
||||
{
|
||||
text: "谷值",
|
||||
value: "1人次",
|
||||
},
|
||||
{
|
||||
text: "均值",
|
||||
value: "26人次",
|
||||
},
|
||||
],
|
||||
flowChartList: [
|
||||
{
|
||||
name: "峰值",
|
||||
data: [8, 12, 11, 12],
|
||||
},
|
||||
{
|
||||
name: "谷值",
|
||||
data: [20, 24, 22, 24],
|
||||
},
|
||||
{
|
||||
name: "均值",
|
||||
data: [32, 36, 33, 36],
|
||||
},
|
||||
],
|
||||
statList: [
|
||||
{
|
||||
name: "设备数(台)",
|
||||
num: 63,
|
||||
},
|
||||
{
|
||||
name: "员工(人)",
|
||||
num: 23,
|
||||
},
|
||||
{
|
||||
name: "电子工牌(个)",
|
||||
num: 63,
|
||||
},
|
||||
],
|
||||
|
||||
index: null,
|
||||
payOneShow: true, //缴费图表切换
|
||||
businessShow:true, //业务图表切换
|
||||
businessShow: true, //业务图表切换
|
||||
typeActive: 0, //缴费类型选择
|
||||
serviceTypeActive: 0, //缴费类型选择
|
||||
paymentList: [
|
||||
|
|
@ -278,8 +384,8 @@ export default {
|
|||
count: "0",
|
||||
},
|
||||
], //服务列表
|
||||
serviceTypeList:[
|
||||
{
|
||||
serviceTypeList: [
|
||||
{
|
||||
name: "人员",
|
||||
},
|
||||
{
|
||||
|
|
@ -291,33 +397,274 @@ export default {
|
|||
{
|
||||
name: "排名",
|
||||
},
|
||||
]
|
||||
],
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.rightOneXian();
|
||||
this.serviceTwo();
|
||||
this.rightBusinessTwo()
|
||||
this.rightBusinessTwo();
|
||||
|
||||
this.drawHallChart();
|
||||
this.drawFlowChart();
|
||||
},
|
||||
methods: {
|
||||
drawHallChart() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.hallChart);
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.hallChart);
|
||||
}
|
||||
let option = {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "8%",
|
||||
right: "2%",
|
||||
bottom: "15%",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#20668d",
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// margin: 10,
|
||||
},
|
||||
// 两边留白
|
||||
boundaryGap: true,
|
||||
data: ["周欢", "唐颖", "刘梦颖"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "分钟",
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: "#d8d4d7",
|
||||
padding: [10, 35, 0, 0],
|
||||
},
|
||||
|
||||
// min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(86,183,232,0.2)",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// margin: 20,
|
||||
textStyle: {
|
||||
color: "#d8d4d7",
|
||||
},
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: "销售费用",
|
||||
type: "line",
|
||||
Symbol: "circle",
|
||||
symbolSize: 7,
|
||||
// showAllSymbol: true,
|
||||
data: [30.13, 86.25, 29.45],
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: "#f4e127",
|
||||
lineStyle: {
|
||||
color: "#f4e127",
|
||||
},
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) {},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
drawFlowChart() {
|
||||
let myChart = this.$echarts.getInstanceByDom(this.$refs.flowChart);
|
||||
if (myChart == null) {
|
||||
myChart = this.$echarts.init(this.$refs.flowChart);
|
||||
}
|
||||
var color = ["#2270b9", "#3bbabc", "#4ab135"];
|
||||
let option = {
|
||||
grid: {
|
||||
top: "20%",
|
||||
left: "8%",
|
||||
right: "2%",
|
||||
bottom: "15%",
|
||||
},
|
||||
legend: {
|
||||
data: this.flowList.map((ele) => {
|
||||
return ele.text;
|
||||
}),
|
||||
// icon: 'circle',
|
||||
|
||||
// symbolSize:4,
|
||||
textStyle: {
|
||||
align: "right",
|
||||
color: "#fff",
|
||||
},
|
||||
top: "-2%",
|
||||
right: "2%",
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
type: "category",
|
||||
axisLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "#20668d",
|
||||
},
|
||||
},
|
||||
splitArea: {
|
||||
// show: true,
|
||||
color: "#f00",
|
||||
lineStyle: {
|
||||
color: "#f00",
|
||||
},
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
textStyle: {
|
||||
color: "#fff",
|
||||
},
|
||||
// margin: 10,
|
||||
},
|
||||
// 两边留白
|
||||
boundaryGap: true,
|
||||
data: ["20230127", "20230128", "20230129", "20230130"],
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
type: "value",
|
||||
name: "分钟",
|
||||
nameTextStyle: {
|
||||
fontSize: 11,
|
||||
color: "#d8d4d7",
|
||||
padding: [10, 35, 0, 0],
|
||||
},
|
||||
|
||||
// min: 0,
|
||||
// max: 140,
|
||||
splitNumber: 4,
|
||||
splitLine: {
|
||||
show: true,
|
||||
lineStyle: {
|
||||
color: "rgba(86,183,232,0.2)",
|
||||
type: "dashed",
|
||||
},
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
axisLabel: {
|
||||
show: true,
|
||||
// margin: 20,
|
||||
textStyle: {
|
||||
color: "#d8d4d7",
|
||||
},
|
||||
formatter: "{value}",
|
||||
},
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
],
|
||||
series: this.flowChartList.map((ele, index) => {
|
||||
return {
|
||||
name: ele.name,
|
||||
type: "line",
|
||||
Symbol: "circle",
|
||||
symbolSize: 7,
|
||||
// showAllSymbol: true,
|
||||
data: ele.data,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: color[index],
|
||||
lineStyle: {
|
||||
color: color[index],
|
||||
},
|
||||
label: {
|
||||
show: true, //开启显示
|
||||
color: "#d8d4d7",
|
||||
position: "top", //在上方显示
|
||||
formatter: function (res) {},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}),
|
||||
};
|
||||
myChart.setOption(option);
|
||||
window.addEventListener("resize", function () {
|
||||
myChart.resize();
|
||||
});
|
||||
},
|
||||
|
||||
//缴费图表切换
|
||||
handelXian(){
|
||||
this.payOneShow = true
|
||||
handelXian() {
|
||||
this.payOneShow = true;
|
||||
},
|
||||
handelBing(){
|
||||
this.payOneShow = false
|
||||
this.$nextTick(()=>{
|
||||
this.rightOneBing()
|
||||
})
|
||||
handelBing() {
|
||||
this.payOneShow = false;
|
||||
this.$nextTick(() => {
|
||||
this.rightOneBing();
|
||||
});
|
||||
},
|
||||
businessXian(){
|
||||
this.businessShow = true
|
||||
businessXian() {
|
||||
this.businessShow = true;
|
||||
},
|
||||
businessBing(){
|
||||
this.businessShow = false
|
||||
this.$nextTick(()=>{
|
||||
businessBing() {
|
||||
this.businessShow = false;
|
||||
this.$nextTick(() => {
|
||||
this.rightBusinessOne();
|
||||
})
|
||||
});
|
||||
},
|
||||
//缴费线性表
|
||||
rightOneXian() {
|
||||
|
|
@ -526,8 +873,8 @@ export default {
|
|||
myChart.setOption(option);
|
||||
},
|
||||
//缴费表饼状
|
||||
rightOneBing(){
|
||||
function getValue(value, arr, params = "params", key = "key") {
|
||||
rightOneBing() {
|
||||
function getValue(value, arr, params = "params", key = "key") {
|
||||
const option = arr.find((r) => r[key] === value) || {};
|
||||
return option[params];
|
||||
}
|
||||
|
|
@ -551,9 +898,7 @@ export default {
|
|||
unit: "笔",
|
||||
},
|
||||
];
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("rightOneBing")
|
||||
);
|
||||
var myChart = this.$echarts.init(document.getElementById("rightOneBing"));
|
||||
var option = {
|
||||
title: [
|
||||
{
|
||||
|
|
@ -888,8 +1233,10 @@ export default {
|
|||
myChart.setOption(option);
|
||||
},
|
||||
//业务线性
|
||||
rightBusinessTwo(){
|
||||
var myChart = this.$echarts.init(document.getElementById("rightBusinessTwo"));
|
||||
rightBusinessTwo() {
|
||||
var myChart = this.$echarts.init(
|
||||
document.getElementById("rightBusinessTwo")
|
||||
);
|
||||
var option = {
|
||||
legend: {
|
||||
data: ["笔数", "金额"],
|
||||
|
|
@ -1094,11 +1441,11 @@ export default {
|
|||
myChart.setOption(option);
|
||||
},
|
||||
//服务清框
|
||||
serviceTwo(){
|
||||
var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
|
||||
var option = {
|
||||
serviceTwo() {
|
||||
var myChart = this.$echarts.init(document.getElementById("serviceTwo"));
|
||||
var option = {
|
||||
legend: {
|
||||
show:false,
|
||||
show: false,
|
||||
data: ["金额"],
|
||||
textStyle: {
|
||||
align: "right",
|
||||
|
|
@ -1166,7 +1513,7 @@ export default {
|
|||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
{
|
||||
type: "value",
|
||||
// min: 1000,
|
||||
// splitNumber: 6,
|
||||
|
|
@ -1234,12 +1581,12 @@ export default {
|
|||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(option);
|
||||
myChart.setOption(option);
|
||||
},
|
||||
//服务选择
|
||||
serviceType(index){
|
||||
serviceType(index) {
|
||||
this.serviceTypeActive = index;
|
||||
}
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1250,88 +1597,343 @@ export default {
|
|||
height: 100%;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-around
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.left-content,
|
||||
.right-content {
|
||||
position: absolute;
|
||||
width: 20.6%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
/* background-color: aqua; */
|
||||
position: absolute;
|
||||
width: 20.6%;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
/* background-color: aqua; */
|
||||
}
|
||||
.middle-content{
|
||||
width: calc(100% - 41.2%);
|
||||
position: relative;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
position: absolute;
|
||||
width: calc(100% - 41.2%);
|
||||
top: 0;
|
||||
height: 100%;
|
||||
border: 1px solid red;
|
||||
position: relative;
|
||||
.middleBottom{
|
||||
|
||||
}
|
||||
}
|
||||
/* 内容板块背景 */
|
||||
.left-content > div,
|
||||
.right-content > div {
|
||||
background-image: url(../assets/images/border.png);
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
padding: 13px;
|
||||
box-sizing: border-box;
|
||||
.hall-box {
|
||||
width: 100%;
|
||||
height: 18.6%;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.hall-box .item {
|
||||
width: 45%;
|
||||
height: 100%;
|
||||
// background-color: aqua;
|
||||
background-image: url(../assets/images/hall-box.png);
|
||||
.font {
|
||||
font-size: 12px;
|
||||
color: #a5a5af;
|
||||
.left-content>div,
|
||||
.right-content>div {
|
||||
background-image: url(../assets/images/border.png);
|
||||
background-size: 100% 100%;
|
||||
margin-bottom: 5px;
|
||||
padding: 13px;
|
||||
box-sizing: border-box;
|
||||
|
||||
.hall-box {
|
||||
width: 100%;
|
||||
height: 18.6%;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.hall-time {
|
||||
font-family: "maleGod";
|
||||
font-size: 21px;
|
||||
|
||||
.hall-chart {
|
||||
width: 100%;
|
||||
height: 47%;
|
||||
}
|
||||
|
||||
.hall-line {
|
||||
.hall-title {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
margin-bottom: 8px;
|
||||
|
||||
.span0,
|
||||
.span1 {
|
||||
position: relative;
|
||||
color: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.hall-icon span {
|
||||
background-size: 100% 100%;
|
||||
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.hall-icon span:nth-child(1) {
|
||||
background-image: url(../assets/images/line-icon.png);
|
||||
width: 17px;
|
||||
height: 14px;
|
||||
}
|
||||
|
||||
.hall-icon span:nth-child(2) {
|
||||
background-image: url(../assets/images/pie-icon.png);
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
margin-left: 7px;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.chart-title {
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
|
||||
.chart-title span {
|
||||
font-size: 12px;
|
||||
color: #fff;
|
||||
margin-left: 18px;
|
||||
}
|
||||
|
||||
.chart-title span:nth-child(1) {
|
||||
margin-left: 0;
|
||||
color: #1e96d5;
|
||||
border-bottom: 1px solid #1e96d5;
|
||||
// text-decoration: underline;
|
||||
}
|
||||
|
||||
.hall-line span::before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
bottom: 0;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgba(163, 227, 245,0.7), transparent);
|
||||
}
|
||||
|
||||
|
||||
.hall-box .item {
|
||||
width: 48.5%;
|
||||
height: 100%;
|
||||
// background-color: aqua;
|
||||
background-image: url(../assets/images/hall-box.png);
|
||||
padding: 8px 10px 8px;
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.font {
|
||||
font-size: 12px;
|
||||
color: #a5a5af;
|
||||
margin-bottom: 3px;
|
||||
}
|
||||
|
||||
.hall-time1,
|
||||
.hall-time0 {
|
||||
font-family: 'maleGod';
|
||||
font-size: 25px;
|
||||
text-align: center;
|
||||
position: absolute;
|
||||
bottom: 5px;
|
||||
width: calc(100% - 16px);
|
||||
}
|
||||
|
||||
.hall-time1 {
|
||||
color: #dfcc4d !important;
|
||||
}
|
||||
|
||||
.hall-time0 {
|
||||
color: #4bbfde;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 标题的样式 */
|
||||
.left-content > div > .title,
|
||||
.right-content > div > .title {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border-title.png);
|
||||
height: 30px;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
padding-left: 8%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-family: "maleGod";
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
.left-content>div>.title,
|
||||
.right-content>div>.title {
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/border-title.png);
|
||||
height: 30px;
|
||||
background-size: 100% 100%;
|
||||
display: flex;
|
||||
padding-left: 8%;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
font-family: 'maleGod';
|
||||
align-items: center;
|
||||
letter-spacing: 1px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.titleText:before {
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||
content: attr(text);
|
||||
position: absolute;
|
||||
z-index: 10;
|
||||
color: rgb(163, 227, 245);
|
||||
-webkit-mask: linear-gradient(to top, rgb(163, 227, 245), transparent);
|
||||
}
|
||||
|
||||
.left-content .business-hall {
|
||||
height: 38.2%;
|
||||
height: 38.2%;
|
||||
|
||||
}
|
||||
|
||||
.left-content .passenger-flow {
|
||||
height: 39.7%;
|
||||
height: 39.7%;
|
||||
|
||||
// 客流量图表
|
||||
.flow-chart {
|
||||
width: 100%;
|
||||
height: 50%;
|
||||
}
|
||||
|
||||
.flow-box {
|
||||
height: 25%;
|
||||
width: 100%;
|
||||
background-image: url(../assets/images/flow-box.png);
|
||||
background-size: 100% 100%;
|
||||
padding: 8px 15px 8px;
|
||||
box-sizing: border-box;
|
||||
display: flex;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.flow-left {
|
||||
width: 44%;
|
||||
text-align: center;
|
||||
|
||||
.flow-total {
|
||||
color: #c0c0c4;
|
||||
font-size: 13px;
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.flow-value {
|
||||
display: inline-block;
|
||||
margin-top: 10px;
|
||||
font-family: maleGod;
|
||||
font-size: 25px;
|
||||
color: #4bbfde;
|
||||
}
|
||||
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
.flow-right {
|
||||
width: 56%;
|
||||
height: 100%;
|
||||
margin-bottom: 10px;
|
||||
|
||||
ul {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
justify-content: space-between;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.up0 {
|
||||
color: #36904c;
|
||||
margin-top: 0 !important;
|
||||
}
|
||||
|
||||
.up1 {
|
||||
color: #3bbabc;
|
||||
}
|
||||
|
||||
.up2 {
|
||||
color: #1d62a3;
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(1) {
|
||||
font-family: maleGod;
|
||||
font-size: 20px;
|
||||
// margin-top: 3px;
|
||||
i{
|
||||
width: 9px;
|
||||
height: 8px;
|
||||
background-size: 100% 100%;
|
||||
display: inline-block;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.rect0{
|
||||
background-image: url(../assets/images/rect-icon1.png);
|
||||
}
|
||||
.rect1{
|
||||
background-image: url(../assets/images/rect-icon2.png);
|
||||
}
|
||||
.rect2{
|
||||
background-image: url(../assets/images/rect-icon2.png);
|
||||
}
|
||||
}
|
||||
|
||||
.flow-item {
|
||||
height: 33%;
|
||||
}
|
||||
|
||||
.flow-item span {
|
||||
height: 100%;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
|
||||
}
|
||||
|
||||
.flow-item span:nth-child(2) {
|
||||
font-size: 13px;
|
||||
color: #c0c0c4;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
.left-content .hall-statistics {
|
||||
height: 20.4%;
|
||||
height: 20.4%;
|
||||
|
||||
.stat {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
|
||||
.stat-item {
|
||||
width: 33%;
|
||||
.img2{
|
||||
background-image: url(../assets/images/people-icon.png)
|
||||
}
|
||||
.img1{
|
||||
background-image:url(../assets/images/paizi.png)
|
||||
}
|
||||
// display: flex;
|
||||
section {
|
||||
width: 83px;
|
||||
height: 76px;
|
||||
margin: 0 auto;
|
||||
background-image: url(../assets/images/stat-icon.png);
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
p {
|
||||
text-align: center;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.stat-num {
|
||||
font-family: 'maleGod';
|
||||
color: #4bbfde !important;
|
||||
font-size: 20px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-height:980px) {
|
||||
.stat-num {
|
||||
font-size: 20px;
|
||||
font-family: 'maleGod';
|
||||
// display: inline-block;
|
||||
margin: 4px ;
|
||||
position: relative;
|
||||
// top: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.right-content .payment {
|
||||
height: 38.3%;
|
||||
.paymentContent {
|
||||
|
|
@ -1377,7 +1979,7 @@ export default {
|
|||
width: 100%;
|
||||
height: calc(100% - 41%);
|
||||
}
|
||||
#rightOneBing{
|
||||
#rightOneBing {
|
||||
width: 100%;
|
||||
height: calc(100% - 41%);
|
||||
}
|
||||
|
|
@ -1447,7 +2049,7 @@ export default {
|
|||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
#rightBusinessTwo{
|
||||
#rightBusinessTwo {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
|
@ -1485,7 +2087,7 @@ export default {
|
|||
height: calc(100% - 31%);
|
||||
width: 100%;
|
||||
}
|
||||
.selectType {
|
||||
.selectType {
|
||||
position: absolute;
|
||||
width: 48%;
|
||||
height: 12%;
|
||||
|
|
|
|||
Loading…
Reference in New Issue