调整coredata宽度为百分比

src/components/common/coreData.vue

@@ -9,9 +9,8 @@ export default {
     dataList: Array,
   },
   mounted() {
-    let clientWidth =
-      document.getElementsByClassName("coreData")[0].clientWidth;
-    this.itemWidth = Math.floor(clientWidth / this.dataList.length) - 40;
+    let clientWidth = Math.floor(100/this.dataList.length)-2+'%'
+    this.itemWidth = clientWidth;
   },
 };
 </script>
@@ -23,7 +22,7 @@ export default {
         class="coreData-item"
         :key="index"
         :style="{
-          width: itemWidth + 'px',
+          width: itemWidth,
           backgroundColor: ele.isHighLight ? '#e7f5fc' : '',
         }"
       >

src/components/dashboard/message/dashboardMsgList.vue

@@ -2,7 +2,7 @@
 export default {
   data() {
     return {
-      contentWidth: '70%'
+      contentWidth: '60%'
     }
   },
   props: {
@@ -10,7 +10,7 @@ export default {
   },
   mounted() {
     let width = this.$refs.dashboardMsgList.$el.clientWidth
-    this.contentWidth = (width-100)+'px'
+    this.contentWidth = width*0.7+'px'
   },
   methods: {
 
@@ -21,18 +21,35 @@ export default {
 <template>
   <a-list class="dashboardMsgList" item-layout="horizontal" :data-source="data" :split="false" ref="dashboardMsgList">
     <a-list-item slot="renderItem" slot-scope="item, index">
-      <div class="msg-read">
-        <span v-if="item.isRead">【已阅】</span>
-        <span v-else>【待阅】</span>
-      </div>
-      <div class="msg-type">
-        <span v-if="item.type==1" style="color: #5495F1">①</span>
-        <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>
-        <span v-else-if="item.type==3" style="color: #F1934E">③</span>
-      </div>
-      <div class="msg-content" :style="{width: contentWidth}">
-        <span class="msg-content-span" :style="{width: contentWidth}">{{item.msg}}</span>
-      </div>
+      <a-row style="width: 100%" justify="start">
+        <a-col :span="5">
+          <span v-if="item.isRead">【已阅】</span>
+          <span v-else>【待阅】</span>
+
+          <span v-if="item.type==1" style="color: #5495F1">①</span>
+          <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>
+          <span v-else-if="item.type==3" style="color: #F1934E">③</span>
+        </a-col>
+        <!--<a-col :span="1">-->
+        <!--  <span v-if="item.type==1" style="color: #5495F1">①</span>-->
+        <!--  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>-->
+        <!--  <span v-else-if="item.type==3" style="color: #F1934E">③</span>-->
+        <!--</a-col>-->
+        <a-col :span="18">
+          <div class="msg-content" :style="{width: contentWidth}">
+            <span class="msg-content-span" :style="{width: contentWidth}">{{item.msg}}</span>
+          </div>
+        </a-col>
+      </a-row>
+      <!--<div class="msg-read">-->
+      <!--  -->
+      <!--</div>-->
+      <!--<div class="msg-type">-->
+      <!--  <span v-if="item.type==1" style="color: #5495F1">①</span>-->
+      <!--  <span v-else-if="item.type==2" style="color: #3BC5B0">②</span>-->
+      <!--  <span v-else-if="item.type==3" style="color: #F1934E">③</span>-->
+      <!--</div>-->
+
     </a-list-item>
   </a-list>
 </template>
@@ -42,11 +59,11 @@ export default {
   .ant-list-item {
     padding: 0 !important;
     line-height: 30px;
-    justify-content: left;
+    width: 100%;
   }
   .msg-read {
     display: inline-block;
-    width: 60px;
+    width: 120px !important;
     flex-direction: row;
   }
   .msg-type {

src/components/dashboard/more/space/DataSituation.vue

@@ -88,8 +88,10 @@ export default {
   mounted() {
     let width = document.getElementsByClassName("dataSituation-canvas-border")[0].clientWidth;
     this.circleHeight = Number(width);
-    this.circleBgHeight = width*0.82
-    this.canvasHeight = width*0.75
+    let circleWidth = document.getElementsByClassName("dataSituation-canvas-circle")[0].clientWidth;
+    this.circleBgHeight = Number(circleWidth)
+    let canvasWidth = document.getElementsByClassName("dataSituation-canvas")[0].clientWidth;
+    this.canvasHeight = Number(canvasWidth)
     this.$forceUpdate()
     this.$nextTick(()=>{
       this.circleBg = this.colors[this.color].circle

src/views/HomeView.vue

@@ -36,7 +36,7 @@ export default {
   },
   data() {
     return {
-      collapse: false, // 侧边栏是否收起
+      collapse: true, // 侧边栏是否收起
       asideWidth: "16%",
       contentWidth: "84%",
       contentHeight: 450,