修改样式

components/ArticleListItem.vue

@@ -94,7 +94,7 @@ export default {
   .article-item-pic {
     display: block;
     width: 100%;
-    height: fit-content;
+    // height: fit-content;
     // height: 2.99rem;
     // object-fit: cover;
   }

components/base/h5/Menu.vue

@@ -47,7 +47,7 @@ export default {
           name: '校友风采',
           children: [
             { name: '杰出校友', path: '/alumni/outstanding' },
-            { name: '校友分享', path: '/alumni/share' }
+            { name: '校友分享', path: '/alumni/sharing' }
           ]
         },
         {

components/home/openClass.vue

@@ -169,8 +169,8 @@ export default {
   .case-pic {
     display: block;
     width: 100%;
-    height: 1.17rem;
-    object-fit: cover;
+    // height: 1.17rem;
+    // object-fit: cover;
   }
   .case-title {
     position: absolute;

pages/alumni/sharing/_id.vue

 <template>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
     <app-frame :data="frameParams">
       <div class="detail-content-box">
         <div class="content-box">
@@ -13,6 +14,7 @@
         </div>
       </div>
     </app-frame>
+  </div>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
@@ -53,12 +55,24 @@ export default {
       console.log(date.getMonth())
       return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
     }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.detail-content-box {
-  // width: 1000px;
+::v-deep{
+  img{
+    width: 100%;
+    height:  auto !important;
+    display: block;
+  }
+}
+.is-pc{
+  .detail-content-box {
     // background: #fff;
     // box-sizing: border-box;
     // margin-bottom: 100px;
@@ -159,5 +173,110 @@ export default {
       margin: 50px auto 0;
       cursor: pointer;
     }
+  }
+}
+.is-h5{
+  .detail-content-box {
+    // background: #fff;
+    // box-sizing: border-box;
+    // margin-bottom: 100px;
+    .content-box {
+      padding: .25rem .25rem .47rem;
+    }
+    .back-btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .el-icon-arrow-left {
+        color: rgba(153, 153, 153, 1);
+        font-size: 16px;
+      }
+      .text {
+        font-size: .14rem;
+        color: #999999;
+      }
+    }
+    .times {
+      font-size: .14rem;
+      line-height: 100%;
+      margin: .17rem 0 .08rem;
+      color: #999999;
+    }
+    .titles {
+      font-size: .18rem;
+      font-weight: bold;
+      color: #141414;
+      // height: 62px;
+      border-bottom: 1px solid #e6e6e6;
+      padding-bottom: .05rem;
+      // line-height: 100%;
+    }
+    .article-content {
+      padding-top: .13rem;
+      font-size: .12rem;
+      line-height: .14rem;
+      color: #333333;
+      img {
+        display: block;
+        width: 100%;
+        margin-top: .2rem;
+      }
+    }
+    .recommend-content {
+      border-top: 1px solid #e6e6e6;
+      padding-top: .17rem;
+      .titles {
+        display: flex;
+        align-items: center;
+        .line {
+          width: .03rem;
+          height: .11rem;
+          background: #aa1941;
+        }
+        .text {
+          font-size: .16rem;
+          color: #333333;
+          margin-left: .05rem;
+        }
+      }
+      .list-box {
+        margin-top: .25rem;
+        display: flex;
+        justify-content: space-between;
+        li {
+          width: 1.4rem;
+          img {
+            width: 1.4rem;
+            height: .92rem;
+            display: block;
+          }
+          .dec {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            font-size: .14rem;
+            line-height: .13rem;
+            color: #333333;
+            margin-top: .05rem;
+          }
+        }
+      }
+    }
+    .more-btn {
+      position: relative;
+      z-index: 999;
+      width: .82rem;
+      height: .2rem;
+      border: 1px solid #d3d3d3;
+      border-radius: .04rem;
+      line-height: .2re,;
+      text-align: center;
+      font-size: .14rem;
+      color: #999999;
+      margin: .25rem auto 0;
+      cursor: pointer;
+    }
+  }
 }
 </style>

pages/news/hot/_id.vue

 <template>
+  <div :class="isMobile ? 'is-h5' : 'is-pc'">
     <app-frame :data="frameParams">
       <div class="detail-content-box">
         <div class="content-box">
@@ -13,6 +14,7 @@
         </div>
       </div>
     </app-frame>
+  </div>
 </template>
 <script>
 import appFrame from '@/components/appFrame'
@@ -52,11 +54,24 @@ export default {
       console.log(date.getMonth())
       return date.getFullYear() + '/' + (date.getMonth() + 1) + '/' + date.getDate()
     }
+  },
+  computed: {
+    isMobile() {
+      return this.$store.state.isMobile
+    }
   }
 }
 </script>
 <style lang="scss" scoped>
-.detail-content-box {
+::v-deep{
+  img{
+    width: 100%;
+    height:  auto !important;
+    display: block;
+  }
+}
+.is-pc{
+  .detail-content-box {
     // background: #fff;
     // box-sizing: border-box;
     // margin-bottom: 100px;
@@ -157,5 +172,110 @@ export default {
       margin: 50px auto 0;
       cursor: pointer;
     }
+  }
+}
+.is-h5{
+  .detail-content-box {
+    // background: #fff;
+    // box-sizing: border-box;
+    // margin-bottom: 100px;
+    .content-box {
+      padding: .25rem .25rem .47rem;
+    }
+    .back-btn {
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      .el-icon-arrow-left {
+        color: rgba(153, 153, 153, 1);
+        font-size: 16px;
+      }
+      .text {
+        font-size: .14rem;
+        color: #999999;
+      }
+    }
+    .times {
+      font-size: .14rem;
+      line-height: 100%;
+      margin: .17rem 0 .08rem;
+      color: #999999;
+    }
+    .titles {
+      font-size: .18rem;
+      font-weight: bold;
+      color: #141414;
+      // height: 62px;
+      border-bottom: 1px solid #e6e6e6;
+      padding-bottom: .05rem;
+      // line-height: 100%;
+    }
+    .article-content {
+      padding-top: .13rem;
+      font-size: .12rem;
+      line-height: .14rem;
+      color: #333333;
+      img {
+        display: block;
+        width: 100%;
+        margin-top: .2rem;
+      }
+    }
+    .recommend-content {
+      border-top: 1px solid #e6e6e6;
+      padding-top: .17rem;
+      .titles {
+        display: flex;
+        align-items: center;
+        .line {
+          width: .03rem;
+          height: .11rem;
+          background: #aa1941;
+        }
+        .text {
+          font-size: .16rem;
+          color: #333333;
+          margin-left: .05rem;
+        }
+      }
+      .list-box {
+        margin-top: .25rem;
+        display: flex;
+        justify-content: space-between;
+        li {
+          width: 1.4rem;
+          img {
+            width: 1.4rem;
+            height: .92rem;
+            display: block;
+          }
+          .dec {
+            display: -webkit-box;
+            -webkit-box-orient: vertical;
+            -webkit-line-clamp: 2;
+            overflow: hidden;
+            font-size: .14rem;
+            line-height: .13rem;
+            color: #333333;
+            margin-top: .05rem;
+          }
+        }
+      }
+    }
+    .more-btn {
+      position: relative;
+      z-index: 999;
+      width: .82rem;
+      height: .2rem;
+      border: 1px solid #d3d3d3;
+      border-radius: .04rem;
+      line-height: .2re,;
+      text-align: center;
+      font-size: .14rem;
+      color: #999999;
+      margin: .25rem auto 0;
+      cursor: pointer;
+    }
+  }
 }
 </style>