修改资料下载

pages/dataDownload/dataDownload.vue

 <template>
   <app-frame :data="frameParams" :class="isMobile ? 'is-h5' : 'is-pc'">
-    <img class="img" src="https://webapp-pub.ezijing.com/project/marywood-plus/data-download-banner.png" />
     <div class="dataList">
       <a target="_blank" :href="item.url" v-for="(item, index) in fileList" :key="index">
         <div class="item" @click="download($event, item)">
-          <img :src="item.icon" />
-          <p class="doc">{{ item.name }}</p>
-          <!-- <p class="p1">最新更新</p>
-          <p class="p2">下载</p> -->
+          <img class="item_top" src="https://webapp-pub.ezijing.com/project/sit-plus/download_bg1.png" alt="" />
+          <div class="doc">{{ item.name }}</div>
         </div>
       </a>
     </div>
@@ -77,84 +74,69 @@ export default {
   .dataList {
     width: 900px;
     display: flex;
-    justify-content: flex-start;
+    justify-content: center;
     align-items: flex-start;
     flex-wrap: wrap;
     margin-left: 50px;
-    padding-bottom: 50px;
+    padding: 96px 0 50px 0;
+
     .item {
-      flex: 1;
-      width: 900px;
-      height: 100px;
-      border-radius: 10px;
-      margin-right: 15px;
-      margin-top: 50px;
+      width: 336px;
+      height: 488px;
+      opacity: 1;
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
       flex-direction: column;
-      background: #f9f8f8;
       cursor: pointer;
+      background: #f6f6f6;
+      box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.38);
+
+      .item_top {
+        width: 100%;
+        height: 348px;
+      }
       .doc {
-        font-size: 16px;
+        width: 100%;
+        height: 140px;
+        font-size: 22px;
         font-weight: 400;
-        line-height: 34px;
+        line-height: 141px;
+        text-align: center;
         color: #333333;
       }
-      .p1 {
-        font-size: 14px;
-        font-weight: 400;
-        line-height: 34px;
-        color: #999999;
-      }
-      .p2 {
-        font-size: 16px;
-        font-weight: 500;
-        line-height: 34px;
-        color: #aa1941;
-      }
     }
   }
 }
 .is-h5 {
-  .img {
-    width: 100%;
-    height: 100%;
-  }
   .dataList {
-    // width: 4rem;
-    // display: flex;
-    // justify-content: center;
-    // align-items: center;
-    // flex-wrap: wrap;
-    padding-bottom: 0.43rem;
-
+    padding: 0.48rem 0 0.25rem 0;
+    display: flex;
+    justify-content: center;
     .item {
-      // flex: 1;
-      width: 2.12rem;
-      height: 1rem;
-      margin: 0.2rem auto;
+      width: 1.68rem;
+      height: 2.45rem;
+      opacity: 1;
       display: flex;
-      justify-content: center;
+      justify-content: flex-start;
       align-items: center;
       flex-direction: column;
-      // margin-right: 0.15rem;
-      background: #f9f8f8;
+      background: #f6f6f6;
+      cursor: pointer;
+      box-shadow: 0px 2px 16px rgba(0, 0, 0, 0.38);
+      .item_top {
+        width: 100%;
+        height: 1.74rem;
+      }
       .doc {
+        width: 100%;
+        height: 0.7rem;
         font-size: 0.14rem;
         font-weight: 400;
+        line-height: 0.7rem;
+        text-align: center;
         color: #333333;
       }
-      .p1 {
-        font-size: 0.12rem;
-        font-weight: 400;
-        color: #999999;
-      }
-      .p2 {
-        font-size: 0.14rem;
-        font-weight: 500;
-        color: #aa1941;
-      }
     }
   }
 }