style:左侧样式修改
Showing
13 changed files
with
137 additions
and
152 deletions
| 1 | <template> | 1 | <template> |
| 2 | <div> | ||
| 3 | <!-- 柱状图 --> | 2 | <!-- 柱状图 --> |
| 4 | <Echart | 3 | <Echart :options="options" id="bottomLeftChart" height="420px" width="100%"></Echart> |
| 5 | :options="options" | ||
| 6 | id="bottomLeftChart" | ||
| 7 | height="480px" | ||
| 8 | width="100%" | ||
| 9 | ></Echart> | ||
| 10 | </div> | ||
| 11 | </template> | 4 | </template> |
| 12 | 5 | ||
| 13 | <script> | 6 | <script> |
| 14 | import Echart from "@/common/echart"; | 7 | import Echart from "@/common/echart"; |
| 15 | export default { | 8 | export default { |
| 16 | data() { | 9 | data () { |
| 17 | return { | 10 | return { |
| 18 | options: {}, | 11 | options: {}, |
| 19 | }; | 12 | }; |
| ... | @@ -29,20 +22,21 @@ export default { | ... | @@ -29,20 +22,21 @@ export default { |
| 29 | }, | 22 | }, |
| 30 | watch: { | 23 | watch: { |
| 31 | cdata: { | 24 | cdata: { |
| 32 | handler(newData) { | 25 | handler (newData) { |
| 33 | this.options = { | 26 | this.options = { |
| 34 | legend: { | 27 | legend: { |
| 35 | data: ["成功", "失败"], | 28 | data: ["成功", "失败"], |
| 29 | icon: "circle", | ||
| 36 | textStyle: { | 30 | textStyle: { |
| 37 | color: "#B4B4B4", | 31 | color: "#B4B4B4", |
| 38 | }, | 32 | }, |
| 39 | top: "1%", | 33 | top: "10%", |
| 40 | right: "1%", | 34 | right: "5%", |
| 41 | }, | 35 | }, |
| 42 | grid: { | 36 | grid: { |
| 43 | left: "5%", | 37 | left: "5%", |
| 44 | right: "7%", | 38 | right: "8%", |
| 45 | bottom: "10%", | 39 | bottom: "5%", |
| 46 | containLabel: true, | 40 | containLabel: true, |
| 47 | }, | 41 | }, |
| 48 | xAxis: { | 42 | xAxis: { |
| ... | @@ -66,8 +60,6 @@ export default { | ... | @@ -66,8 +60,6 @@ export default { |
| 66 | yAxis: { | 60 | yAxis: { |
| 67 | type: "category", | 61 | type: "category", |
| 68 | data: newData.category, | 62 | data: newData.category, |
| 69 | splitLine: { show: false }, | ||
| 70 | axisTick: { show: false }, | ||
| 71 | axisLine: { | 63 | axisLine: { |
| 72 | show: true, | 64 | show: true, |
| 73 | lineStyle: { | 65 | lineStyle: { |
| ... | @@ -75,20 +67,19 @@ export default { | ... | @@ -75,20 +67,19 @@ export default { |
| 75 | }, | 67 | }, |
| 76 | }, | 68 | }, |
| 77 | }, | 69 | }, |
| 78 | |||
| 79 | series: [ | 70 | series: [ |
| 80 | { | 71 | { |
| 81 | name: "成功", | 72 | name: "成功", |
| 82 | type: "bar", | 73 | type: "bar", |
| 83 | stack: "总量", | 74 | stack: "总量", |
| 84 | barWidth: 20, | 75 | barWidth: 10, |
| 85 | itemStyle: { | 76 | itemStyle: { |
| 86 | normal: { | 77 | normal: { |
| 87 | color: "#6601FF", | 78 | // 这里设置圆角 |
| 79 | barBorderRadius: [0, 10, 10, 0], | ||
| 80 | color: "#16F4D2", | ||
| 81 | } | ||
| 88 | }, | 82 | }, |
| 89 | }, | ||
| 90 | |||
| 91 | z: 10, | ||
| 92 | data: newData.barData, | 83 | data: newData.barData, |
| 93 | }, | 84 | }, |
| 94 | { | 85 | { |
| ... | @@ -97,10 +88,11 @@ export default { | ... | @@ -97,10 +88,11 @@ export default { |
| 97 | stack: "总量", | 88 | stack: "总量", |
| 98 | itemStyle: { | 89 | itemStyle: { |
| 99 | normal: { | 90 | normal: { |
| 100 | color: "#00F0FF", | 91 | // 这里设置圆角 |
| 92 | barBorderRadius: [0, 10, 10, 0], | ||
| 93 | color: "#C99E68" | ||
| 101 | }, | 94 | }, |
| 102 | }, | 95 | }, |
| 103 | z: 5, | ||
| 104 | data: newData.lineData, | 96 | data: newData.lineData, |
| 105 | }, | 97 | }, |
| 106 | ], | 98 | ], | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div> | ||
| 3 | <Chart :cdata="cdata" /> | 2 | <Chart :cdata="cdata" /> |
| 4 | </div> | ||
| 5 | </template> | 3 | </template> |
| 6 | 4 | ||
| 7 | <script> | 5 | <script> |
| ... | @@ -36,9 +34,6 @@ export default { | ... | @@ -36,9 +34,6 @@ export default { |
| 36 | 32808, | 34 | 32808, |
| 37 | 36097, | 35 | 36097, |
| 38 | 39867 | 36 | 39867 |
| 39 | |||
| 40 | |||
| 41 | |||
| 42 | ], | 37 | ], |
| 43 | barData: [ | 38 | barData: [ |
| 44 | 8500, | 39 | 8500, | ... | ... |
src/image/homeLeftBg.png
0 → 100644
12.4 KB
src/image/qxsj.png
0 → 100644
16.6 KB
| ... | @@ -135,20 +135,13 @@ div:focus { | ... | @@ -135,20 +135,13 @@ div:focus { |
| 135 | float: right; | 135 | float: right; |
| 136 | } | 136 | } |
| 137 | 137 | ||
| 138 | .mt15 { | ||
| 139 | margin-top: 15px; | ||
| 140 | } | ||
| 141 | |||
| 138 | .fl { | 142 | .fl { |
| 139 | float: left; | 143 | float: left; |
| 140 | } | 144 | } |
| 141 | // 大屏阴影 | ||
| 142 | // 大屏图表背景 | ||
| 143 | .bg-shadow{ | ||
| 144 | background-color: rgb(4, 61, 114)!important; | ||
| 145 | box-shadow:0px 0px 4px 6px rgb(4, 61, 114), | ||
| 146 | inset 0px 0px 16px 0px rgb(3, 49, 87); | ||
| 147 | box-sizing: border-box; | ||
| 148 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 149 | background-size: 100% 100%; | ||
| 150 | } | ||
| 151 | |||
| 152 | 145 | ||
| 153 | .pr-5 { | 146 | .pr-5 { |
| 154 | padding-right: 5px; | 147 | padding-right: 5px; |
| ... | @@ -161,6 +154,7 @@ div:focus { | ... | @@ -161,6 +154,7 @@ div:focus { |
| 161 | .mt-10 { | 154 | .mt-10 { |
| 162 | margin-top: 10px; | 155 | margin-top: 10px; |
| 163 | } | 156 | } |
| 157 | |||
| 164 | //flex | 158 | //flex |
| 165 | .d-flex { | 159 | .d-flex { |
| 166 | display: flex; | 160 | display: flex; |
| ... | @@ -170,11 +164,13 @@ div:focus { | ... | @@ -170,11 +164,13 @@ div:focus { |
| 170 | display: flex; | 164 | display: flex; |
| 171 | align-items: center; | 165 | align-items: center; |
| 172 | } | 166 | } |
| 167 | |||
| 173 | .d-center { | 168 | .d-center { |
| 174 | display: flex; | 169 | display: flex; |
| 175 | align-items: center; | 170 | align-items: center; |
| 176 | justify-content: center; | 171 | justify-content: center; |
| 177 | } | 172 | } |
| 173 | |||
| 178 | .bg-color-blue { | 174 | .bg-color-blue { |
| 179 | background-color: #1a5cd7; | 175 | background-color: #1a5cd7; |
| 180 | } | 176 | } |
| ... | @@ -422,5 +418,3 @@ aside { | ... | @@ -422,5 +418,3 @@ aside { |
| 422 | .item-cwnr img { | 418 | .item-cwnr img { |
| 423 | height: 30px; | 419 | height: 30px; |
| 424 | } | 420 | } |
| ... | \ No newline at end of file | ... | \ No newline at end of file |
| 425 | |||
| 426 | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="leftcard"> | 2 | <div class="leftcard"> |
| 3 | <div class="card1 bg-shadow"> | 3 | <div class="card"> |
| 4 | <div class="cardhead">区县接入</div> | 4 | <div class="cardhead">区县接入</div> |
| 5 | <div class="cardcontent"> | 5 | <div class="cardcontent"> |
| 6 | <div class="text1"> | 6 | <ul class="cardcontent-left d-center"> |
| 7 | <p>52343</p> | 7 | <div class="rjjrlList"> |
| 8 | <p>总量</p> | 8 | <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> |
| 9 | </div> | 9 | </div> |
| 10 | <div class="text2"> | 10 | <li>日均接入量</li> |
| 11 | <p>666</p> | 11 | </ul> |
| 12 | <p>失败</p> | 12 | <div class="cardcontent-right d-center"> |
| 13 | <p> | ||
| 14 | <span>失败</span> | ||
| 15 | <span>0</span> | ||
| 16 | </p> | ||
| 17 | <p> | ||
| 18 | <span>成功率</span> | ||
| 19 | <span>99%</span> | ||
| 20 | </p> | ||
| 13 | </div> | 21 | </div> |
| 14 | <div class="text3"> | ||
| 15 | <p>99%</p> | ||
| 16 | <p>成功率</p> | ||
| 17 | </div> | 22 | </div> |
| 18 | </div> | 23 | </div> |
| 19 | </div> | 24 | <div class="card mt15"> |
| 20 | <div class="card2 bg-shadow"> | ||
| 21 | <div class="cardhead">省厅汇交</div> | 25 | <div class="cardhead">省厅汇交</div> |
| 22 | <div class="cardcontent"> | 26 | <div class="cardcontent"> |
| 23 | <div class="text1"> | 27 | <ul class="cardcontent-left d-center"> |
| 24 | <p>9168</p> | 28 | <div class="rjjrlList"> |
| 25 | <p>总量</p> | 29 | <p v-for="(item, index) in rjjrlList" class="d-center" :key="index">{{ item }}</p> |
| 26 | </div> | ||
| 27 | <div class="text2"> | ||
| 28 | <p>45</p> | ||
| 29 | <p>失败</p> | ||
| 30 | </div> | 30 | </div> |
| 31 | <div class="text3"> | 31 | <li>日均接入量</li> |
| 32 | <p>99%</p> | 32 | </ul> |
| 33 | <p>成功率</p> | 33 | <div class="cardcontent-right d-center"> |
| 34 | <p> | ||
| 35 | <span>失败</span> | ||
| 36 | <span>0</span> | ||
| 37 | </p> | ||
| 38 | <p> | ||
| 39 | <span>成功率</span> | ||
| 40 | <span>99%</span> | ||
| 41 | </p> | ||
| 34 | </div> | 42 | </div> |
| 35 | </div> | 43 | </div> |
| 36 | </div> | 44 | </div> |
| 37 | <div class="card3 bg-shadow"> | 45 | <div class="card1 mt15"> |
| 38 | <div class="cardhead">各区县数据上报统计</div> | 46 | <div class="cardhead">各区县数据上报统计</div> |
| 39 | <columnar /> | 47 | <columnar /> |
| 40 | </div> | 48 | </div> |
| ... | @@ -44,88 +52,105 @@ | ... | @@ -44,88 +52,105 @@ |
| 44 | <script> | 52 | <script> |
| 45 | import columnar from "@/components/echart/columnar"; | 53 | import columnar from "@/components/echart/columnar"; |
| 46 | export default { | 54 | export default { |
| 47 | data() { | 55 | data () { |
| 48 | return {}; | 56 | return { |
| 57 | // 日均接入量 | ||
| 58 | rjjrl: 50300 | ||
| 59 | }; | ||
| 49 | }, | 60 | }, |
| 50 | components: { columnar }, | 61 | components: { columnar }, |
| 51 | mounted() {}, | 62 | computed: { |
| 52 | beforeDestroy() {}, | 63 | rjjrlList: function () { |
| 64 | return this.rjjrl.toString().split('') | ||
| 65 | }, | ||
| 66 | sbqkgsList: function () { | ||
| 67 | const numbers = this.sbqkgs.toString().split('').reverse() | ||
| 68 | const segs = [] | ||
| 69 | while (numbers.length) segs.push(numbers.splice(0, 3).join('')) | ||
| 70 | return segs.join(',').split('').reverse().join('') | ||
| 71 | } | ||
| 72 | }, | ||
| 53 | methods: {}, | 73 | methods: {}, |
| 54 | }; | 74 | }; |
| 55 | </script> | 75 | </script> |
| 56 | 76 | ||
| 57 | <style lang="scss" scoped> | 77 | <style lang="scss" scoped> |
| 58 | .leftcard { | 78 | .leftcard { |
| 59 | width: 25%; | 79 | width: 30%; |
| 60 | height: 100%; | 80 | height: 100%; |
| 61 | .cardhead { | 81 | |
| 62 | width: 100%; | 82 | .card { |
| 63 | height: 40px; | 83 | background: url("~@/image/homeLeftBg.png") no-repeat; |
| 64 | margin-left: 10px; | 84 | background-size: 100% 100%; |
| 65 | line-height: 40px; | 85 | position: relative; |
| 66 | color: rgb(27, 185, 206); | ||
| 67 | font-size: 26px; | ||
| 68 | } | ||
| 69 | .cardcontent { | ||
| 70 | width: 100%; | ||
| 71 | height: 160px; | ||
| 72 | display: flex; | ||
| 73 | .text1 { | ||
| 74 | width: 33%; | ||
| 75 | height: 100%; | ||
| 76 | p { | ||
| 77 | margin: 15px; | ||
| 78 | height: 50px; | ||
| 79 | line-height: 50px; | ||
| 80 | font-size: 40px; | ||
| 81 | text-align: center; | ||
| 82 | color:rgb(246, 246, 229); | ||
| 83 | background: linear-gradient(143deg, #29C6F2 0%, #4370EF 100%); | ||
| 84 | } | ||
| 85 | p:nth-child(2) { | ||
| 86 | background:none; | ||
| 87 | color: rgb(223, 213, 81); | ||
| 88 | } | 86 | } |
| 87 | |||
| 88 | .card1 { | ||
| 89 | background: url("~@/image/qxsj.png") no-repeat; | ||
| 90 | background-size: 100% 100%; | ||
| 91 | position: relative; | ||
| 89 | } | 92 | } |
| 90 | .text2 { | 93 | |
| 91 | width: 33%; | 94 | .cardhead { |
| 92 | height: 100%; | 95 | color: #02D9FD; |
| 93 | p { | 96 | line-height: 24px; |
| 94 | height: 70px; | 97 | letter-spacing: 2px; |
| 95 | line-height: 70px; | 98 | position: absolute; |
| 96 | font-size: 20px; | 99 | font-size: 20px; |
| 100 | left: 0; | ||
| 101 | right: 0; | ||
| 102 | margin: auto; | ||
| 97 | text-align: center; | 103 | text-align: center; |
| 98 | color: rgb(180, 178, 178); | 104 | top: 8px; |
| 99 | } | 105 | font-weight: 700; |
| 100 | } | 106 | } |
| 101 | .text3 { | 107 | |
| 102 | width: 33%; | 108 | .rjjrlList { |
| 103 | height: 100%; | 109 | display: flex; |
| 110 | |||
| 104 | p { | 111 | p { |
| 105 | height: 70px; | 112 | background: url('~@/image/jrl3.png'); |
| 106 | line-height: 70px; | 113 | margin: 0 3px 10px 3px; |
| 107 | font-size: 20px; | 114 | font-weight: 700; |
| 108 | text-align: center; | 115 | width: 24px; |
| 109 | color: rgb(180, 178, 178); | 116 | height: 36px; |
| 110 | } | 117 | font-size: 30px; |
| 118 | font-size: 30px; | ||
| 111 | } | 119 | } |
| 112 | } | 120 | } |
| 113 | .card1 { | 121 | |
| 122 | .cardcontent { | ||
| 114 | width: 100%; | 123 | width: 100%; |
| 115 | height: 200px; | 124 | height: 160px; |
| 125 | display: flex; | ||
| 126 | padding: 35px 20px 20px 20px; | ||
| 127 | box-sizing: border-box; | ||
| 128 | color: #FFFFFF; | ||
| 129 | |||
| 130 | .cardcontent-left { | ||
| 131 | width: 60%; | ||
| 132 | flex-direction: column; | ||
| 133 | position: relative; | ||
| 116 | } | 134 | } |
| 117 | .card2 { | 135 | |
| 118 | width: 100%; | 136 | .cardcontent-left::before { |
| 119 | height: 200px; | 137 | position: absolute; |
| 138 | right: 0; | ||
| 139 | top: 20px; | ||
| 140 | content: ''; | ||
| 141 | width: 1px; | ||
| 142 | height: 90px; | ||
| 143 | background: linear-gradient(180deg, #091B4C 0%, #47B5E0 56%, #091B4C 100%); | ||
| 120 | } | 144 | } |
| 121 | .card3 { | 145 | |
| 146 | .cardcontent-right { | ||
| 147 | flex: 1; | ||
| 122 | width: 100%; | 148 | width: 100%; |
| 123 | height: 500px; | 149 | flex-direction: column; |
| 124 | 150 | ||
| 125 | .mainCss { | 151 | p:nth-child(1) { |
| 126 | width: 450px; | 152 | span:nth-child(1) {} |
| 127 | height: 420px; | 153 | } |
| 128 | background-color: saddlebrown; | ||
| 129 | } | 154 | } |
| 130 | } | 155 | } |
| 131 | } | 156 | } | ... | ... |
| 1 | <template> | 1 | <template> |
| 2 | <div class="leftcard"> | 2 | <div class="rightcard"> |
| 3 | <div class="card bg-shadow"> | 3 | <div class="card bg-shadow"> |
| 4 | <div class="cardhead">房屋情况统计表</div> | 4 | <div class="cardhead">房屋情况统计表</div> |
| 5 | <div class="cardcontent"> | 5 | <div class="cardcontent"> |
| ... | @@ -75,17 +75,11 @@ export default { | ... | @@ -75,17 +75,11 @@ export default { |
| 75 | scroll(tableref.value.$refs.bodyWrapper);//设置滚动 | 75 | scroll(tableref.value.$refs.bodyWrapper);//设置滚动 |
| 76 | }, | 76 | }, |
| 77 | beforeDestroy () { }, | 77 | beforeDestroy () { }, |
| 78 | methods: { | ||
| 79 | |||
| 80 | }, | ||
| 81 | }; | 78 | }; |
| 82 | </script> | 79 | </script> |
| 83 | 80 | ||
| 84 | <style lang="scss" scoped> | 81 | <style lang="scss" scoped> |
| 85 | .leftcard { | 82 | .rightcard { |
| 86 | width: 25%; | ||
| 87 | height: 100%; | ||
| 88 | |||
| 89 | .cardhead { | 83 | .cardhead { |
| 90 | width: 100%; | 84 | width: 100%; |
| 91 | height: 40px; | 85 | height: 40px; | ... | ... |
| ... | @@ -42,57 +42,46 @@ export default { | ... | @@ -42,57 +42,46 @@ export default { |
| 42 | <style scoped lang="scss"> | 42 | <style scoped lang="scss"> |
| 43 | .content { | 43 | .content { |
| 44 | width: 98%; | 44 | width: 98%; |
| 45 | height: 900px; | 45 | height: calc(100% -94px); |
| 46 | margin: auto; | 46 | margin: auto; |
| 47 | display: flex; | 47 | display: flex; |
| 48 | display: flex; | 48 | display: flex; |
| 49 | 49 | ||
| 50 | .centercard { | 50 | .centercard { |
| 51 | width: 50%; | 51 | width: 40%; |
| 52 | height: 100%; | ||
| 53 | 52 | ||
| 54 | .card1 { | 53 | .card1 { |
| 55 | width: 100%; | 54 | width: 100%; |
| 56 | height: 600px; | ||
| 57 | box-sizing: border-box; | 55 | box-sizing: border-box; |
| 58 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 59 | background-size: 100% 100%; | 56 | background-size: 100% 100%; |
| 60 | } | 57 | } |
| 61 | 58 | ||
| 62 | .card2 { | 59 | .card2 { |
| 63 | width: 100%; | 60 | width: 100%; |
| 64 | height: 300px; | ||
| 65 | box-sizing: border-box; | 61 | box-sizing: border-box; |
| 66 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 67 | background-size: 100% 100%; | 62 | background-size: 100% 100%; |
| 68 | } | 63 | } |
| 69 | } | 64 | } |
| 70 | 65 | ||
| 71 | .rightcard { | 66 | .rightcard { |
| 72 | width: 25%; | 67 | width: 30%; |
| 73 | height: 100%; | 68 | height: 100%; |
| 74 | 69 | ||
| 75 | .card1 { | 70 | .card1 { |
| 76 | width: 100%; | 71 | width: 100%; |
| 77 | height: 300px; | ||
| 78 | box-sizing: border-box; | 72 | box-sizing: border-box; |
| 79 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 80 | background-size: 100% 100%; | 73 | background-size: 100% 100%; |
| 81 | } | 74 | } |
| 82 | 75 | ||
| 83 | .card2 { | 76 | .card2 { |
| 84 | width: 100%; | 77 | width: 100%; |
| 85 | height: 300px; | ||
| 86 | box-sizing: border-box; | 78 | box-sizing: border-box; |
| 87 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 88 | background-size: 100% 100%; | 79 | background-size: 100% 100%; |
| 89 | } | 80 | } |
| 90 | 81 | ||
| 91 | .card3 { | 82 | .card3 { |
| 92 | width: 100%; | 83 | width: 100%; |
| 93 | height: 300px; | ||
| 94 | box-sizing: border-box; | 84 | box-sizing: border-box; |
| 95 | background: url("~@/image/tablebk.png") no-repeat; | ||
| 96 | background-size: 100% 100%; | 85 | background-size: 100% 100%; |
| 97 | } | 86 | } |
| 98 | } | 87 | } | ... | ... |
-
Please register or sign in to post a comment