修改

src/App.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 <style>
-@import url("//at.alicdn.com/t/font_1890699_p3f17tlsn3.css");
+@import url("//at.alicdn.com/t/font_1890699_qxu7cdg74s.css");
 @font-face {
   font-family: "oswald";
   src: url("https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/smallapp/Oswald-Regular.ttf");

src/pages/contract.vue

-<style scoped>
-  .contract {
+<style>
+  .contractTW {
     padding-top: 70px;
     padding-bottom: 40px;
     width: 100%;
@@ -8,21 +8,117 @@
     padding: 0 20px;
   }
 
-   .contract .title {
+  .contractTW .title {
     font-size: 25px;
+    font-weight: bold;
+    color: #666;
+  }
+
+  .contractTW .download-block {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+  }
+
+  .contractTW .download-block li {
+    list-style-type: none;
+    margin-right: 20px;
+    margin-bottom: 20px;
+    background-color: #fff;
+    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
+    transition: transform .2s ease, box-shadow .2s ease;
+    ;
+    width: calc(20% - 16px);
+    text-align: center;
+  }
+
+  .contractTW .download-block li::before {
+    content: '';
+    float: left;
+    padding-top: 100%;
+  }
+
+  .contractTW .download-block a i {
+    margin-bottom: 15px;
+    font-size: 100px;
+    color: #ddd;
+  }
+
+  .contractTW .download-block a {
+    text-decoration: none;
+    display: flex;
+    width: 100%;
+    height: 100%;
+    justify-content: center;
+    flex-direction: column;
+    text-align: center;
+  }
+
+  .contractTW .download-block a p {
+    font-size: 16px;
+    color: #666;
+  }
+
+  @media only screen and (max-width: 1200px) {
+    .contractTW .download-block li {
+      width: 100%;
+      margin-right: 0;
+    }
+
+    .contractTW .download-block a {
+      padding: 15px 20px;
+      justify-content: flex-start;
+      flex-direction: row;
+      text-align: left;
+      align-items: center;
+    }
+
+    .contractTW .download-block a i {
+      margin-bottom: 0;
+      font-size: 60px;
+    }
+
+    .contractTW .download-block a p {
+      padding-left: 20px;
+    }
+
+    .contractTW .download-block li::before {
+      padding-top: 0;
+    }
+
+    .contractTW {
+      max-width: 768px;
+    }
+  }
+
+  .download-block li:hover {
+    -webkit-transform: translate(0, -4px);
+    -moz-transform: translate(0, -4px);
+    -ms-transform: translate(0, -4px);
+    -o-transform: translate(0, -4px);
+    transform: translate(0, -4px);
+    -webkit-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
+    -moz-box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
+    box-shadow: 0 4px 25px 0 rgba(0, 0, 0, .2), 0 0 0 0 rgba(0, 0, 0, .1);
   }
 
 </style>
 <template>
   <q-page>
-    <div class="contract">
+    <div class="contractTW">
       <h1 class="title">旅遊合約書下載</h1>
       <ul class="download-block">
         <li v-for="(item,index) in ContractList" :key="index">
           <a :href="item.Url" target="_blank">
-            <i class="material-icons"> </i>
+            <i class="iconfont iconpdf" v-if="item.Type==1"></i>
+            <i class="iconfont iconword" v-if="item.Type==2"></i>
+            <i class="iconfont iconPPT" v-if="item.Type==3"></i>
+            <i class="iconfont iconimage" v-if="item.Type==4"></i>
+            <i class="iconfont icontext" v-if="item.Type==5"></i>
             <p>{{item.Name}}</p>
-          </a></li>
+          </a>
+        </li>
       </ul>
     </div>
   </q-page>
@@ -34,6 +130,7 @@
       return {
         RB_Group_Id: 0,
         ContractList: [],
+        isShowType: 0
       };
     },
     created() {
@@ -53,6 +150,31 @@
             if (res.data.resultCode == 1) {
               if (res.data.data) {
                 this.ContractList = res.data.data;
+                if(this.ContractList&&this.ContractList.length>0){
+                  this.ContractList.forEach(x=>{
+                    let PdfUrl = x.Url.indexOf('pdf');
+                    let wordUrl = x.Url.indexOf('word');
+                    let pptUrl = x.Url.indexOf('ppt');
+                    let jpgUrl = x.Url.indexOf('jpg');
+                    let pngUrl = x.Url.indexOf('png');
+                    let textUrl = x.Url.indexOf('txt');
+                    if(PdfUrl>-1){
+                      x.Type=1
+                    }
+                    if(wordUrl>-1){
+                      x.Type=2
+                    }
+                    if(pptUrl>-1){
+                      x.Type=3
+                    }
+                    if(jpgUrl>-1||pngUrl>-1){
+                      x.Type=4
+                    }
+                    if(textUrl>-1){
+                      x.Type=5
+                    }
+                  })
+                }
               }
             }
           },