调整控制日志的样式

src/views/home/Home.vue

@@ -83,18 +83,40 @@
             <div class="control-log">
                 <div class="control-content">
                     <div class="chart-tab-title">控制日志</div>
-                    <div class="msg-tab-body">
-                        <div class="cell">
+                    <!-- <div class="msg-tab-body"> -->
+                        <!-- <div class="cell">
                             <span class="cell-default">位置</span>
+                            <span style="margin-left: 80px">开始时间</span>
                             <span style="margin-left: 80px">照明时长</span>
-                            <span style="float: right;">开始时间</span>
                         </div>
                         <div class="cell" v-for="(item, i) in controlLog" :key="i">
                             <span class="cell-default">{{item.zsmc}}</span>
+                            <span style="display:inline-block;width:80px;text-align:center">{{item.xgsj}}</span>
                             <span style="margin-left: 65px">{{item.durations}}分钟</span>
-                            <span style="float: right;">{{item.xgsj}}</span>
-                        </div>
-                    </div>
+                        </div> -->
+                        <el-table
+                            :data="controlLog"
+                            height="240"
+                            style="width: 90%; margin: 5px auto;"
+                            :header-cell-style="{color: '#81d3f8', fontSize: '16px', backgroundColor: '#060a2d'}"
+                            :cell-style="{color: '#ccc', fontSize: '14px', backgroundColor: '#060a2d'}"
+                            size="mini">
+                            <el-table-column
+                            prop="zsmc"
+                            label="位置">
+                            </el-table-column>
+                            <el-table-column
+                            prop="xgsj"
+                            label="开始时间">
+                            </el-table-column>
+                            <el-table-column
+                            label="照明时长">
+                                <template slot-scope="scope">
+                                    <p style="">{{scope.row.durations}}分钟</p>
+                                </template>
+                            </el-table-column>
+                        </el-table>
+                    <!-- </div> -->
                 </div>
             </div>
         </footer>
@@ -269,7 +291,6 @@ export default {
             }, 8000)
         },
         setInit() {
-            let that = this;
             timer1 = setInterval(() => {
                 this.init();
             }, 3600000);
@@ -582,7 +603,7 @@ export default {
     > .footer {
         display: flex;
         margin-top: 10px;
-        height: 33.3%;
+        height: 33%;
         justify-content: space-between;
         > .video {
             width: 21%;
@@ -709,4 +730,36 @@ export default {
     .el-dialog__title {
         color: white !important;
     }
+.gutter {
+    background:#060a2d!important;
+}
+.el-table__body-wrapper {
+    background-color:  #060a2d;
+}
+.el-table__body-wrapper::-webkit-scrollbar {
+    /*滚动条整体样式*/
+    width : 5px;  /*高宽分别对应横竖滚动条的尺寸*/
+    height: 1px;
+}
+.el-table__body-wrapper::-webkit-scrollbar-thumb {
+    /*滚动条里面小方块*/
+    border-radius   : 8px;
+    background-color:  #535353;
+    background-image: -webkit-linear-gradient(
+                    45deg,
+                    rgba(255, 255, 255, 0.2) 25%,
+                    transparent 25%,
+                    transparent 50%,
+                    rgba(255, 255, 255, 0.2) 50%,
+                    rgba(255, 255, 255, 0.2) 75%,
+                    transparent 75%,
+                    transparent
+    );
+}
+.el-table__body-wrapper::-webkit-scrollbar-track {
+    /*滚动条里面轨道*/
+    box-shadow   : inset 0 0 5px rgba(0, 0, 0, 0.2);
+    // background   : #ededed;
+    border-radius: 10px;
+}
 </style>