Skip to content

bdc / bdcjg-web

Go to a project
Toggle navigation
Toggle navigation pinning
e1f0d80d by 任超
Options

style:左侧样式修改

1 parent 3af8b006
Inline Side-by-side
Showing 13 changed files with 137 additions and 152 deletions
<template>
<div>
<!-- 柱状图 -->
<Echart
:options="options"
id="bottomLeftChart"
height="480px"
width="100%"
></Echart>
</div>
<Echart :options="options" id="bottomLeftChart" height="420px" width="100%"></Echart>
</template>
<script>
import Echart from "@/common/echart";
export default {
data() {
data () {
return {
options: {},
};
......@@ -29,20 +22,21 @@ export default {
},
watch: {
cdata: {
handler(newData) {
handler (newData) {
this.options = {
legend: {
data: ["成功", "失败"],
icon: "circle",
textStyle: {
color: "#B4B4B4",
},
top: "1%",
right: "1%",
top: "10%",
right: "5%",
},
grid: {
left: "5%",
right: "7%",
bottom: "10%",
right: "8%",
bottom: "5%",
containLabel: true,
},
xAxis: {
......@@ -66,8 +60,6 @@ export default {
yAxis: {
type: "category",
data: newData.category,
splitLine: { show: false },
axisTick: { show: false },
axisLine: {
show: true,
lineStyle: {
......@@ -75,20 +67,19 @@ export default {
},
},
},
series: [
{
name: "成功",
type: "bar",
stack: "总量",
barWidth: 20,
barWidth: 10,
itemStyle: {
normal: {
color: "#6601FF",
// 这里设置圆角
barBorderRadius: [0, 10, 10, 0],
color: "#16F4D2",
}
},
},
z: 10,
data: newData.barData,
},
{
......@@ -97,10 +88,11 @@ export default {
stack: "总量",
itemStyle: {
normal: {
color: "#00F0FF",
// 这里设置圆角
barBorderRadius: [0, 10, 10, 0],
color: "#C99E68"
},
},
z: 5,
data: newData.lineData,
},
],
......
<template>
<div>
<Chart :cdata="cdata" />
</div>
</template>
<script>
......@@ -36,9 +34,6 @@ export default {
32808,
36097,
39867
],
barData: [
8500,
......

44.9 KB | W: | H:

14.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
......@@ -48,7 +48,7 @@ export default {
}
.app-main {
height: calc(100vh -94px);
height: calc(100% -94px) !important;
padding: 10px;
box-sizing: border-box;
}
......
......@@ -135,20 +135,13 @@ div:focus {
float: right;
}
.mt15 {
margin-top: 15px;
}
.fl {
float: left;
}
// 大屏阴影
// 大屏图表背景
.bg-shadow{
background-color: rgb(4, 61, 114)!important;
box-shadow:0px 0px 4px 6px rgb(4, 61, 114),
inset 0px 0px 16px 0px rgb(3, 49, 87);
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.pr-5 {
padding-right: 5px;
......@@ -161,6 +154,7 @@ div:focus {
.mt-10 {
margin-top: 10px;
}
//flex
.d-flex {
display: flex;
......@@ -170,11 +164,13 @@ div:focus {
display: flex;
align-items: center;
}
.d-center {
display: flex;
align-items: center;
justify-content: center;
}
.bg-color-blue {
background-color: #1a5cd7;
}
......@@ -422,5 +418,3 @@ aside {
.item-cwnr img {
height: 30px;
}
\ No newline at end of file
......
......@@ -41,7 +41,6 @@ export default {
.card2 {
width: 100%;
height: 300px;
.Brokenline {
margin: auto;
......
.bigScreen {
width: 100vw;
height: 100vh;
background-color: #031754;
overflow: hidden;
}
......
<template>
<div class="leftcard">
<div class="card1 bg-shadow">
<div class="card">
<div class="cardhead">区县接入</div>
<div class="cardcontent">
<div class="text1">
<p>52343</p>
<p>总量</p>
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p>
</div>
<div class="text2">
<p>666</p>
<p>失败</p>
<li>日均接入量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span>0</span>
</p>
<p>
<span>成功率</span>
<span>99%</span>
</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
</div>
</div>
</div>
<div class="card2 bg-shadow">
<div class="card mt15">
<div class="cardhead">省厅汇交</div>
<div class="cardcontent">
<div class="text1">
<p>9168</p>
<p>总量</p>
</div>
<div class="text2">
<p>45</p>
<p>失败</p>
<ul class="cardcontent-left d-center">
<div class="rjjrlList">
<p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p>
</div>
<div class="text3">
<p>99%</p>
<p>成功率</p>
<li>日均接入量</li>
</ul>
<div class="cardcontent-right d-center">
<p>
<span>失败</span>
<span>0</span>
</p>
<p>
<span>成功率</span>
<span>99%</span>
</p>
</div>
</div>
</div>
<div class="card3 bg-shadow">
<div class="card1 mt15">
<div class="cardhead">各区县数据上报统计</div>
<columnar />
</div>
......@@ -44,88 +52,105 @@
<script>
import columnar from "@/components/echart/columnar";
export default {
data() {
return {};
data () {
return {
// 日均接入量
rjjrl: 50300
};
},
components: { columnar },
mounted() {},
beforeDestroy() {},
computed: {
rjjrlList: function () {
return this.rjjrl.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 lang="scss" scoped>
.leftcard {
width: 25%;
width: 30%;
height: 100%;
.cardhead {
width: 100%;
height: 40px;
margin-left: 10px;
line-height: 40px;
color: rgb(27, 185, 206);
font-size: 26px;
}
.cardcontent {
width: 100%;
height: 160px;
display: flex;
.text1 {
width: 33%;
height: 100%;
p {
margin: 15px;
height: 50px;
line-height: 50px;
font-size: 40px;
text-align: center;
color:rgb(246, 246, 229);
background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%);
}
p:nth-child(2) {
background:none;
color: rgb(223, 213, 81);
.card {
background: url("~@/image/homeLeftBg.png") no-repeat;
background-size: 100% 100%;
position: relative;
}
.card1 {
background: url("~@/image/qxsj.png") no-repeat;
background-size: 100% 100%;
position: relative;
}
.text2 {
width: 33%;
height: 100%;
p {
height: 70px;
line-height: 70px;
.cardhead {
color: #02D9FD;
line-height: 24px;
letter-spacing: 2px;
position: absolute;
font-size: 20px;
left: 0;
right: 0;
margin: auto;
text-align: center;
color: rgb(180, 178, 178);
}
top: 8px;
font-weight: 700;
}
.text3 {
width: 33%;
height: 100%;
.rjjrlList {
display: flex;
p {
height: 70px;
line-height: 70px;
font-size: 20px;
text-align: center;
color: rgb(180, 178, 178);
}
background: url('~@/image/jrl3.png');
margin: 0 3px 10px 3px;
font-weight: 700;
width: 24px;
height: 36px;
font-size: 30px;
font-size: 30px;
}
}
.card1 {
.cardcontent {
width: 100%;
height: 200px;
height: 160px;
display: flex;
padding: 35px 20px 20px 20px;
box-sizing: border-box;
color: #FFFFFF;
.cardcontent-left {
width: 60%;
flex-direction: column;
position: relative;
}
.card2 {
width: 100%;
height: 200px;
.cardcontent-left::before {
position: absolute;
right: 0;
top: 20px;
content: '';
width: 1px;
height: 90px;
background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%);
}
.card3 {
.cardcontent-right {
flex: 1;
width: 100%;
height: 500px;
flex-direction: column;
.mainCss {
width: 450px;
height: 420px;
background-color: saddlebrown;
p:nth-child(1) {
span:nth-child(1) {}
}
}
}
}
......
<template>
<div class="leftcard">
<div class="rightcard">
<div class="card bg-shadow">
<div class="cardhead">房屋情况统计表</div>
<div class="cardcontent">
......@@ -75,17 +75,11 @@ export default {
scroll(tableref.value.$refs.bodyWrapper);//设置滚动
},
beforeDestroy () { },
methods: {
},
};
</script>
<style lang="scss" scoped>
.leftcard {
width: 25%;
height: 100%;
.rightcard {
.cardhead {
width: 100%;
height: 40px;
......
......@@ -42,57 +42,46 @@ export default {
<style scoped lang="scss">
.content {
width: 98%;
height: 900px;
height: calc(100% -94px);
margin: auto;
display: flex;
display: flex;
.centercard {
width: 50%;
height: 100%;
width: 40%;
.card1 {
width: 100%;
height: 600px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
}
.rightcard {
width: 25%;
width: 30%;
height: 100%;
.card1 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card2 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
.card3 {
width: 100%;
height: 300px;
box-sizing: border-box;
background: url("~@/image/tablebk.png") no-repeat;
background-size: 100% 100%;
}
}
......
<template>
<div>
<screencontent />
</div>
</template>
<script>
......