Merge pull request #724 from flipped-aurora/gva-vue3

调整不同屏幕下的兼容性

Author: 奇淼（piexlmax

web/src/view/dashboard/dashbordCharts/echartsLine.vue

@@ -67,7 +67,7 @@ export default {
       this.chart.setOption({
         grid: {
           left: '40',
-          right: '40',
+          right: '20',
           top: '40',
           bottom: '20',
         },
@@ -102,7 +102,7 @@ export default {
         series: [
           {
             type: 'bar',
-            barWidth: 40,
+            barWidth: '40%',
             itemStyle: {
               borderRadius: [5, 5, 0, 0],
               color: '#188df0',

web/src/view/dashboard/dashbordTable/dashbordTable.vue

@@ -5,7 +5,7 @@
     </div>
     <div class="log">
       <div v-for="(item,key) in dataTimeline" :key="key" class="log-item">
-        <div class="flex-1 flex"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
+        <div class="flex-1 flex key-box"><span class="key" :class="key<3&&'top'">{{ key+1 }}</span></div>
         <div class="flex-5 flex message">{{ item.message }}</div>
         <div class="flex-3 flex form">{{ item.from }}</div>
       </div>
@@ -58,8 +58,10 @@ export default {
         display: flex;
         justify-content: space-between;
         margin-top: 14px;
+        .key-box{
+          justify-content: center;
+        }
         .key{
-          margin-left: 12px;
           &.top{
             background: #314659;
             color: #FFFFFF;;

web/src/view/layout/index.vue

@@ -160,7 +160,7 @@ export default {
       return this.$route.matched
     }
   },
-  mounted() {
+  created() {
     const screenWidth = document.body.clientWidth
     if (screenWidth < 1000) {
       this.isMobile = true
@@ -175,6 +175,8 @@ export default {
       this.isSider = true
       this.isCollapse = false
     }
+  },
+  mounted() {
     emitter.emit('collapse', this.isCollapse)
     emitter.emit('mobile', this.isMobile)
     emitter.on('reload', this.reload)