fix

src/pages/article/index.vue

@@ -211,7 +211,7 @@ export default {
   justify-content: space-between;
 
   .left {
-    width: 70%;
+    width: 76%;
   }
 
   h2 {
@@ -236,7 +236,8 @@ export default {
 
   /deep/.des {
     // width: 100%;
-    // overflow: auto;
+    overflow: auto;
+
     a {
       color: rgb(0, 0, 238);
       word-wrap: break-word;

src/pages/singlePage/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="wrap">
     <template v-if="modules.length">
-      <el-carousel class="carousel fadeInUp" :interval="6000" height="230px"
+      <el-carousel class="carousel fadeInUp" :interval="6000" height="330px"
         :arrow="(modules[0] && modules[0].list.filter(e => e.isEnable).length > 1) ? 'hover' : 'never'"
         :indicator-position="modules[0].list.filter(e => e.isEnable).length > 1 ? '' : 'none'">
         <template v-for="(item, i) in modules[0].list">
@@ -132,7 +132,7 @@ export default {
             const { column, articleNum } = json[2].form
             promises.push(new Promise((resolve) => {
               this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
-                this.articles = data.slice(0, articleNum || 8)
+                this.articles = data.slice(0, articleNum || 5)
                 resolve()
               }).catch(err => { })
             }))
@@ -142,7 +142,7 @@ export default {
             const { column, articleNum } = json[4].form
             promises.push(new Promise((resolve) => {
               this.$post(`${this.api.queryArticlesByColumnType}?columnId=${column[column.length - 1]}`).then(({ data }) => {
-                this.articles1 = data.slice(0, articleNum || 8)
+                this.articles1 = data.slice(0, articleNum || 5)
                 resolve()
               }).catch(err => { })
             }))
@@ -248,7 +248,7 @@ export default {
 }
 
 .block-bg {
-  min-height: calc(100vh - 320px);
+  min-height: calc(100vh - 420px);
   background: url(../../assets/images/sfel/2.png) 0 0 / cover no-repeat;
 }
 
@@ -256,7 +256,7 @@ export default {
   display: flex;
 
   .item {
-    width: calc(100% - 20px);
+    width: 590px;
     padding: 14px;
     background-color: #fff;
     box-shadow: 0 0 7px rgba(239, 239, 239, .8);
@@ -271,9 +271,11 @@ export default {
   }
 
   .column-name {
+    max-width: calc(100% - 90px);
     font-size: .9rem;
     color: #333;
     cursor: pointer;
+    @include ellipsis;
 
     &:hover {
       color: $main-color;
@@ -282,6 +284,7 @@ export default {
 
   .meta {
     font-size: .8rem;
+    white-space: nowrap;
   }
 }
 
@@ -320,6 +323,11 @@ export default {
     margin-left: 20px;
     font-size: .9rem;
 
+    // &>li {
+    //   width: 20%;
+    //   margin-bottom: 5px;
+    // }
+
     .link {
       display: block;
       max-width: 200px;
@@ -346,7 +354,7 @@ export default {
   }
 
   img {
-    max-width: 40px;
+    max-width: 60px;
     object-fit: cover;
   }
 
@@ -357,79 +365,6 @@ export default {
   }
 }
 
-.tools {
-  z-index: 10;
-  position: fixed;
-  top: 30vh;
-  right: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: flex-end;
-
-  li {
-    position: relative;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0 22px;
-    margin-bottom: 1px;
-    font-size: 20px;
-    color: #0084ff;
-    line-height: 56px;
-    background-color: rgba(19, 18, 19, 0.94);
-    cursor: pointer;
-    transition: 0.3s;
-
-    &:before {
-      content: '';
-      width: 28px;
-      height: 28px;
-      margin-right: 7px;
-      background: url(https://huorantech.com/images/iasf/icon1.png) no-repeat;
-    }
-
-    &:nth-child(2):before {
-      background-image: url(https://huorantech.com/images/iasf/icon2.png);
-    }
-
-    &:nth-child(2):hover:before {
-      background-image: url(https://huorantech.com/images/iasf/icon2-1.png);
-    }
-
-    &:nth-child(3):before {
-      background-image: url(https://huorantech.com/images/iasf/icon3.png);
-    }
-
-    &:nth-child(3):hover:before {
-      background-image: url(https://huorantech.com/images/iasf/icon3-1.png);
-    }
-
-    &:nth-child(4):before {
-      background-image: url(https://huorantech.com/images/iasf/icon4.png);
-    }
-
-    &:nth-child(4):hover:before {
-      background-image: url(https://huorantech.com/images/iasf/icon4-1.png);
-    }
-
-    &:hover {
-      justify-content: flex-start;
-      // width: 192px;
-      padding-right: 4rem;
-      color: #fff;
-      background-color: rgba(1, 129, 247, 0.94);
-
-      &:before {
-        background-image: url(https://huorantech.com/images/iasf/icon1-1.png);
-      }
-    }
-  }
-
-  .icon {
-    margin-right: 10px;
-  }
-}
-
 
 @media (max-width: 1200px) {
   .carousel .texts {
@@ -437,29 +372,16 @@ export default {
     right: 5%;
   }
 
-  .card {
+  .inner {
-    flex-direction: column;
+    width: 95%;
-
-    li {
-      margin-top: 1.25rem;
-      width: 100%;
-    }
   }
 
-  .news {
+  .column-wrap {
     flex-direction: column;
 
-    li {
+    .item {
-      width: 100%;
-    }
-  }
-
-  .news-banner {
-    flex-direction: column;
-
-    .pic-wrap,
-    .right {
       width: 100%;
+      margin: 0 0 20px 0;
     }
   }