底部样式

src/views/cockpitNew/tdsy.vue

@@ -49,25 +49,63 @@
             </div>
             <div class="list">
                 <div class="list_item">
-                    <p> <img src="" alt=""> 吉阳区大茅村太葵组</p>
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
+
                     <div class="buttons">
-                        <div>出让</div>
-                        <div>商服用地</div>
-                        <div>0.99公顷</div>
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
 
                     </div>
+                    <div class="state">
+                        已上市
+                    </div>
                 </div>
                 <div class="list_item">
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
 
+                    <div class="buttons">
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
+
+                    </div>
+                    <div class="state">
+                        已上市
+                    </div>
                 </div>
                 <div class="list_item">
+                    <div class="item_label">
+                        <div class="icon"> </div>
+                        <span class="groupName">吉阳区大茅村太葵组</span>
+                    </div>
 
+                    <div class="buttons">
+                        <div class="lableValue">出让</div>
+                        <div class="lableValue">商服用地</div>
+                        <div class="lableValue">0.99公顷</div>
+
+                    </div>
+                    <div class="state">
+                        已上市
+                    </div>
                 </div>
 
             </div>
         </div>
 
-        <div v-show="!stateOwnedOrcollective"></div>
+
+        <div v-show="!stateOwnedOrcollective">
+            <div id="verticalEchart">
+
+            </div>
+        </div>
 
     </div>
 </template>
@@ -360,10 +398,107 @@ export default {
         },
         switchStateOwnedButton() {
             this.stateOwnedOrcollective = !this.stateOwnedOrcollective
+        },
+        buildverticalEchart() {
+            var dom = document.getElementById('verticalEchart');
+            var myChart = window.echarts.init(dom);
+
+
+            let option = {
+                backgroundColor: 'rgba(0,0,0,0)',
+                tooltip: {
+                    trigger: 'axis',
+                },
+                grid: {
+                    left: '5%',
+                    right: '6%',
+                    bottom: '5%',
+                    top: '10%',
+                    containLabel: true
+                },
+                legend: {
+                    icon: 'circle',
+                    right: "center",
+                    top: 214,
+                    itemWidth: 12,
+                    itemHeight: 12,
+                    textStyle: {
+                        color: '#FFF'
+                    },
+                },
+                xAxis: {
+                    show: true,
+                    type: 'category',
+                    data: ['公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务','公共服务'],
+                    axisLabel: {          //坐标轴字体颜色
+                        textStyle: {
+                            color: '#fff'
+                        }
+                    },
+                    axisLine: {
+                        show: false,
+                        lineStyle: {
+                            color: "#e5e5e5"
+                        }
+                    },
+                    axisTick: {       //y轴刻度线
+                        show: false
+                    },
+                    splitLine: {    //网格
+                        show: false,
+
+                    }
+                },
+                yAxis: {
+                    type: 'value',
+                    boundaryGap: ['0%', '20%'],
+
+                    axisLabel: {
+                        show: false, //不显示坐标轴上的文字
+                    },
+                    axisLine: {
+                        show: false,
+                    },
+                    axisTick: {       //y轴刻度线
+                        show: false
+                    },
+                    splitLine: {    //网格
+                        show: false,
+                        lineStyle: {
+                            color: '#dadde4',
+                            type: "dashed"
+                        }
+                    }
+                },
+                series: [{
+                    name: '在线',
+                    type: 'bar',
+                    stack: '策略变更',
+                    barMaxWidth: '20%',  //柱子宽度
+                    itemStyle: {  //柱子颜色
+                        color: 'rgb(18,236,183)',
+                    },
+                    data: [232, 193, 240, 214, 239, 223, 202]
+                }, {
+                    name: '离线',
+                    type: 'bar',
+                    stack: '策略变更',
+                    barMaxWidth: '30%',  //柱子宽度
+                    itemStyle: {  //柱子颜色
+                        barBorderRadius: [8, 8, 0, 0],
+                        color: 'rgb(252,206,22)',
+                    },
+                    data: [320, 332, 301, 334, 390, 330, 320]
+                }]
+            };
+            myChart.setOption(option);
+
         }
     },
     mounted() {
         this.getRenKou();
+        this.buildverticalEchart();
+
     },
     beforeUpdate() { }, //生命周期 - 更新之前
     updated() { }, //生命周期 - 更新之后
@@ -545,9 +680,61 @@ export default {
     color: #FFFFFF;
     margin-bottom: 10px;
 
-    img {
-        background-image: url("/static/images/cockpitNew/tdsyLegend.png");
+    .item_label {
+        border: #00FFFF;
+        position: relative;
+        left: 3%;
+        top: 10%;
+        height: 20px;
+        line-height: 12px;
+    }
+
+    .groupName {
+        position: relative;
+        top: -5px;
+        left: 1%;
+    }
+
+    .icon {
+        background-image: url("/static/images/cockpitNew/u371.svg");
+        width: 19px;
+        height: 19px;
+    }
+
+    .buttons {
+        display: inline-block;
+        position: absolute;
+        left: 35px;
+        top: 29px;
+    }
+
+    .lableValue {
 
+        display: inline-block;
+        border: 1px solid #80FFFF;
+        color: #80FFFF;
+        width: 20%;
+        text-align: center;
     }
+
+    .state {
+        height: 40px;
+        width: 45px;
+        position: relative;
+        left: 87%;
+        background-color: rgba(112, 182, 3, 1);
+        top: -22%;
+        text-align: center;
+        line-height: 40px;
+    }
+}
+
+#verticalEchart {
+
+    width: 280px;
+    height: 230px;
+    position: relative;
+    left: 164%;
+    top: 11px;
 }
 </style>