修改适配

src/components/eventAnalysis.vue

@@ -156,12 +156,12 @@ const formatMobile = (mobile) => {
     // background-size: 100% 100%;
     background: rgba(26, 92, 175, 0.25);
     .num {
-      width: 60px;
-      margin-left: 16px;
+      width: 13%;
+      // margin-left: 16px;
       text-align: center;
     }
     .title {
-      width: 260px;
+      width: 55%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -173,17 +173,17 @@ const formatMobile = (mobile) => {
   }
 
   .item {
-    width: 98%;
+    width: 100%;
     display: flex;
     margin: 0 auto;
     background: url("@/assets/homeImgs/blue_titlebg.png") no-repeat;
-    background-size: 100% 100%;
+    background-size: contain;
     .num {
-      width: 60px;
+      width: 13%;
       text-align: center;
     }
     .title {
-      width: 260px;
+      width: 55%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;

src/components/eventTransact.vue

@@ -90,9 +90,9 @@ onMounted(() => {});
 
   .content {
     background-size: 100% 100%;
-    width: 833px;
+    width: 100%;
     height: 326px;
-    margin: 0 0 10px 20px;
+    margin: 0 0 10px 0.5%;
     display: flex;
     flex-wrap: wrap;
     .box {
@@ -105,7 +105,7 @@ onMounted(() => {});
         line-height: 40px;
       }
       .toptitle {
-        width: 98%;
+        width: 95%;
         display: flex;
         margin: 0 auto;
         background: rgba(26, 92, 175, 0.25);
@@ -116,7 +116,7 @@ onMounted(() => {});
           text-align: center;
         }
         .house {
-          width: 240px;
+          width: 25%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -124,7 +124,7 @@ onMounted(() => {});
         .num {
           width: 80px;
           text-align: center;
-          margin-right: 60px;
+          margin-right: 5%;
         }
         .dot_box {
           width: 80px;
@@ -144,7 +144,7 @@ onMounted(() => {});
       }
 
       .item {
-        width: 98%;
+        width: 95%;
         display: flex;
         margin: 0 auto;
         align-items: center;
@@ -155,7 +155,7 @@ onMounted(() => {});
           font-style: normal;
         }
         .house {
-          width: 240px;
+          width: 25%;
           overflow: hidden;
           text-overflow: ellipsis;
           white-space: nowrap;
@@ -167,7 +167,7 @@ onMounted(() => {});
         .num {
           width: 80px;
           text-align: center;
-          margin-right: 60px;
+          margin-right: 5%;
         }
         .dot_box {
           width: 80px;

src/components/houseGeneralView.vue

@@ -45,7 +45,7 @@
           <echart-moudle :options="optionsEducational" :id="'educational-pie'" :width="207" :height="130"></echart-moudle>
         </div>
       </div>
-      <echart-moudle :options="optionsTongji" :id="'tongji-bar'" :width="430" :height="230"></echart-moudle>
+      <echart-moudle :options="optionsTongji" :id="'tongji-bar'" :width="'100%'" :height="230"></echart-moudle>
 
     </div>
   </div>
@@ -527,7 +527,7 @@ onMounted(() => {});
   font-size: 18px;
   color: #ffffff;
   line-height: 32px;
-  width: 470px;
+  width: 100%;
   padding: 5px 21px 0px 10px;
   background: url("@/assets/homeImgs/djtl_boxbg.png") no-repeat;
   background-size: 100% 100%;

src/components/majorConferenceNews.vue

@@ -155,11 +155,11 @@ const formatMobile = (mobile) => {
     // background-size: 100% 100%;
     background: rgba(26, 92, 175, 0.25);
     .num {
-      width: 60px;
+      width: 13%;
       margin-left: 22px;
     }
     .title {
-      width: 250px;
+      width: 53%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -171,10 +171,13 @@ const formatMobile = (mobile) => {
   }
   .item {
     .num {
-      margin-left: 10px;
+      width: 13%;
+      margin-left: 22px;
+
+      text-align: left;
     }
     .title {
-      width: 250px;
+      width: 53%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -182,13 +185,13 @@ const formatMobile = (mobile) => {
     }
     .status {
       width: 80px;
-      text-align: center;
+      text-align: right;
       margin-left: 20px;
     }
   }
 }
 .scroll {
-  width: 450px;
+  width: 95%;
   height: 140px;
   margin: 0 auto;
   overflow: hidden;

src/components/materialNotice.vue

@@ -54,7 +54,7 @@ onMounted(() => {});
 
 <style lang="scss" scoped>
 .scroll {
-  width: 450px;
+  width: 95%;
   height: 150px;
   margin: 0 auto;
   overflow: hidden;
@@ -63,7 +63,7 @@ onMounted(() => {});
   font-size: 18px;
   color: #ffffff;
   line-height: 32px;
-  width: 470px;
+  width: 100%;
   padding: 5px 0 26px 0;
   background: url("@/assets/homeImgs/sqjj_boxbg.png") no-repeat;
   background-size: 100% 100%;

src/components/supervisoryAnalysis.vue

@@ -207,12 +207,12 @@ const formatMobile = (mobile) => {
     // background-size: 100% 100%;
     background: rgba(26, 92, 175, 0.25);
     .num {
-      width: 60px;
+      width: 11%;
       margin-left: 16px;
       text-align: center;
     }
     .title {
-      width: 260px;
+      width: 55%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -225,11 +225,11 @@ const formatMobile = (mobile) => {
   .item {
     .num {
       // margin-left: 10px;
-      width: 50px;
+      width: 10%;
       text-align: left;
     }
     .title {
-      width: 250px;
+      width: 53%;
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
@@ -239,7 +239,7 @@ const formatMobile = (mobile) => {
       height: 14px;
       background: #f2b739;
       border-radius: 50%;
-      margin-left: 30px;
+      margin-left: 12%;
     }
   }
 }

src/css/common.scss

@@ -6,7 +6,8 @@
         width: 100%;
         height: 44px;
         line-height: 30px;
-        background: url("../assets/homeImgs/title.png") 100% 100% no-repeat;
+        background: url("../assets/homeImgs/title.png") no-repeat;
+        background-size: contain;
         text-indent: 40px;
 
         span {