Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
270872d8 by 任超
Options

style;首页样式修改

1 parent e64a60ba
Inline Side-by-side
Showing 4 changed files with 204 additions and 66 deletions
......@@ -74,4 +74,4 @@
"type": "git",
"url": "git+https://github.com/PanJiaChen/vue-element-admin.git"
}
}
}
\ No newline at end of file
......
......@@ -43,18 +43,6 @@ class data extends filter {
{
prop: "jrdf",
label: "接入得分",
},
{
prop: "jrdf",
label: "未上传登薄日志区县",
},
{
prop: "jrdf",
label: "登薄日志得分",
},
{
prop: "jrdf",
label: "总评分",
}
]
}
......
......@@ -8,11 +8,23 @@
&-left {
width: 40%;
padding-top: 25px;
background-color: #000637;
color: #02D9FD;
}
&-right {
width: 59.5%;
.jrgk {
background-color: #000637;
color: #02D9FD;
.header {
text-align: center;
line-height: 36px;
}
}
.gkList {
@include flex-center;
flex-direction: column;
......@@ -23,13 +35,46 @@
}
}
.jrl {
margin-top: 20px;
text-align: center;
li {
color: #E3F1FF;
}
}
// 日均接入量
.jrlList {
display: flex;
align-items: center;
justify-content: center;
p {
width: 24px;
height: 36px;
font-size: 30px;
display: flex;
align-items: center;
justify-content: center;
font-weight: 700;
}
}
.jrdgk {
display: flex;
margin-top: 5px;
justify-content: space-between;
.box-card {
width: 49.5%;
.sxsjr {
background-color: #000637;
width: 49%;
.header {
text-align: center;
color: #02D9FD;
line-height: 30px;
}
}
}
......@@ -39,46 +84,90 @@
flex-direction: column;
li:nth-child(1) {
color: #409EFF;
font-size: 24px;
font-size: 30px;
width: 50px;
height: 50px;
background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
border-radius: 2px;
color: #E3F1FF;
display: flex;
align-items: center;
justify-content: center;
margin: 10px 0;
}
li:nth-child(2) {
color: #FFFFFF;
font-size: 14px;
}
}
}
.jrdList:nth-of-type(2) {
li:nth-child(1) {
color: #67C23A;
background: linear-gradient(143deg, #9CB636 0%, #32BCB1 100%);
}
}
.jrdList:nth-of-type(3) {
li:nth-child(1) {
color: #F56C6C;
background: linear-gradient(143deg, #C97E6D 0%, #CA304D 100%);
}
}
}
// 上报情况概括
.sbqkgk {
text-align: center;
color: #02D9FD;
line-height: 30px;
width: 50%;
background-color: #000637;
}
.sbqkgs {
display: flex;
justify-content: space-between;
width: 100%;
li {
font-size: 24px;
.header {
text-align: center;
line-height: 36px;
}
li:nth-child(2) {
color: #409EFF;
margin-left: 25px;
.sbqkgsList {
display: flex;
justify-content: center;
font-size: 50px;
margin: 20px 0 10px 0;
color: #E3F1FF;
font-weight: 700;
}
.active {
width: 31px;
height: 46px;
background: #054AE9;
display: flex;
align-items: center;
justify-content: center;
border-radius: 3px 1px 3px 1px;
margin: 0 3px;
}
li {
font-size: 16px;
text-align: center;
color: #E3F1FF;
}
}
.jrxxlb {
margin-top: 5px;
background-color: #000637;
.title {
text-align: center;
line-height: 36px;
color: #02D9FD;
}
}
}
\ No newline at end of file
......
<template>
<div class="home">
<el-card class="home-left">
<div class="home-left">
<!-- 地图 -->
<wgsl></wgsl>
</el-card>
</div>
<div class="home-right">
<!-- 陕西省接入概括 -->
<el-card>
<div slot="header">
<div class="jrgk">
<div class="header">
陕西省接入概括
</div>
<!-- 陕西省接入概括列表 -->
<el-row :gutter="20">
<el-col :span="6" v-for="(item, index) in gkList" :key="index">
<el-row>
<el-col :span="6">
<ul class="gkList">
<li>{{ item.value }}</li>
<li>{{ item.title }}</li>
<li>总数量</li>
<dv-digital-flop :config="config" style="height:70px;" />
</ul>
</el-col>
<el-col :span="6">
<ul class="jrl">
<div class="jrlList jrllsit1">
<p v-for="(item, index) in jrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="6">
<ul class="jrl">
<div class="jrlList jrllsit2">
<p v-for="(item, index) in dtjrlList" :key="index">{{ item }}</p>
</div>
<li>日均接入量</li>
</ul>
</el-col>
<el-col :span="6">
<ul class="jrl">
<div class="jrlList jrllsit3">
<p v-for="(item, index) in ztzlList" :key="index">{{ item }}</p>
</div>
<li>总体质量</li>
</ul>
</el-col>
</el-row>
</el-card>
</div>
<div class="jrdgk">
<!-- 接入点概括 -->
<el-card class="box-card">
<div slot="header">
<div class="sxsjr">
<div class="header">
接入点概括
</div>
<el-row :gutter="20">
<el-row>
<el-col :span="8" class="jrdList" v-for="(item, index) in jrdList" :key="index">
<ul>
<li>{{ item.value }}</li>
......@@ -34,25 +58,30 @@
</ul>
</el-col>
</el-row>
</el-card>
</div>
<!-- 上报情况概括 -->
<el-card class="box-card">
<div slot="header">
<div class="sbqkgk">
<div class="header">
上报情况概括
</div>
<ul class="sbqkgs">
<div class="sbqkgsList">
<p v-for="(item, index) in sbqkgsList" :key="index"
:class="{ 'active': (typeof (item - 0) === 'number' && !isNaN(item - 0)) }">
{{ item }}
</p>
</div>
<li>总数量</li>
<li>99999</li>
</ul>
</el-card>
</div>
</div>
<!-- 底部表格 -->
<el-card class="jrxxlb">
<div class="jrxxlb">
<div class="title">陕西省平台接入情况</div>
<!-- 陕西省平台接入情况table -->
<lb-table ref="table" :pagination="false" :heightNum="527" :column="tableData.columns" :data="tableData.data">
<lb-table ref="table" :pagination="false" :heightNum="408" :column="tableData.columns" :data="tableData.data">
</lb-table>
</el-card>
</div>
</div>
</div>
</template>
......@@ -66,26 +95,32 @@ export default {
name: "home",
components: { wgsl },
data () {
function formatter (number) {
const numbers = number.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
return {
// 陕西省接入概括
gkList: [
{
value: 6269,
title: '总数量'
},
{
value: 300,
title: '日均接入量'
},
{
value: 0,
title: '当天接入量'
},
{
value: 3620,
title: '总体质量'
// 总数量
config: {
number: [6523],
content: '{nt}',
formatter,
style: {
fontSize: 50,
fontWeight: 700,
fill: '#FFDD00'
}
],
},
// 日均接入量
jjrl: 300,
// 当天接入量
dtjrl: 100,
// 总体质量
ztzl: 3620,
// 上报情况概括
sbqkgs: 6296,
// 接入点概括
jrdList: [
{
......@@ -106,11 +141,37 @@ export default {
// 表格头部信息
columns: data.columns(),
// 表格列表数据
data: [{}]
data: [{
xzqmc: '咸阳市',
xzqzs: 100,
jrl: 300,
jscgl: 20,
dk: 60,
wjrqx: '长安县',
jrdf: 50
}]
}
}
},
methods: {}
computed: {
jrlList: function () {
return this.jjrl.toString().split('')
},
dtjrlList: function () {
return this.dtjrl.toString().split('')
},
ztzlList: function () {
return this.ztzl.toString().split('')
},
sbqkgsList: function () {
const numbers = this.sbqkgs.toString().split('').reverse()
const segs = []
while (numbers.length) segs.push(numbers.splice(0, 3).join(''))
return segs.join(',').split('').reverse().join('')
}
},
methods: {
}
}
</script>
<style scoped lang="scss">
......