9.4

src/components/CaseCard.vue

 <template>
-  <el-card class="case-card" shadow="hover" :body-style="{ padding: '0px' }">
-    <img :src="thumb" class="image">
+  <el-card class="case-card" shadow="hover" :body-style="{ padding: '0px' }" style=" padding: 0px">
+    <img :style="{background: `url(${thumb})`}" class="image">  
     <div class="body">
       <h3>{{title}}</h3>
       <div class="bottom clearfix caption">
   padding: 0;
 
   .image {
-    width: 100%;
+      bottom: 0;
+  width: 100%;
+
+  height: 0;
+  padding-bottom: 48.5%;
+  background-size: 100% 100% !important;
   }
 
   .body {

src/views/Case.vue

     <div class="contanier center-block dyn-main">
       <div class="row">
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
-          <a href="/details">
-            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
-          </a>
+          <router-link :to="{ name: 'details', query: { id: item.id }}">
+            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary" class="casecard"></case-card>
+          </router-link>
         </div>
       </div>
     </div>
-
+<!--  -->
     <div style="margin-top:40px">
       <button type="button" v-if="!allLoaded" class="btn btn-default" @click="more">加载更多</button>
       <p v-else>已经到底了~更多案例尽请期待~</p>
 
 <style scoped>
 
+.casecard{
+ 
+  width: 100%;
+
+  padding-bottom: 100%;
+  background-size: 100% 100% !important;
+  /* position: relative; */
+
+  margin: 0;
+
+}
+
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;

src/views/Details.vue

   </div>
 </template>
 
-<script>
 
 
-export default {
-
-}
-</script>
-
 
 <script scoped>
 // @ is an alias to /src
     getDetail () {
       const id = this.$route.query.id;
       const type = this.$route.query.type;
-      const taCaseTypeId = this.$route.query.taCaseTypeId;
+      // const taCaseTypeId = this.$route.query.taCaseTypeId;
       request({
         ...apis.case.list,
         urlData: { type: type },
         params: { pageNum: 1, pageSize: 1, id: id },
         query: {}
       }).then(con => {
-        console.log(con, "124")
+        // console.log(con, "124")
         this.datas = con.records[0];
         // window.console.log(this.caselist, "543");
       })
 
-      request({
-        ...apis.case.list,
-        urlData: { type: type },
-        params: { pageNum: 1, pageSize: 4, }
-      }).then(con => {
-        console.log(con, "456")
-        console.log(taCaseTypeId, "456")
+      // request({
+      //   ...apis.case.list,
+      //   urlData: { type: type },
+      //   params: { pageNum: 1, pageSize: 4, }
+      // }).then(con => {
+        // console.log(con, "456")
+        // console.log(taCaseTypeId, "456")
         // this.morecase = con.records[0];
         // window.console.log(this.caselist, "543");
-      })
+      // })
     }
 
   },

src/views/Dynamic.vue

     </div>
 
     <div class="row mobtype border-bottom">
-   
-        <div class="col-xs-6">
-          <div> <p style="line-height:40px">选择想看的动态类型：</p></div>
+      <div class="col-xs-6">
+        <div>
+          <p style="line-height:40px">选择想看的动态类型：</p>
         </div>
-        <div class="col-xs-6">
-          <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
-        </div>
-  
+      </div>
+      <div class="col-xs-6">
+        <el-button class="btn-link mobbtn" @click="drawer = true" type="button" style="margin-left: 16px;">全部动态</el-button>
+      </div>
     </div>
     <el-drawer :visible.sync="drawer" :direction="direction" :before-close="handleClose" :show-close="true" size="80%">
       <div>
     <div class="contanier center-block dyn-main">
       <div class="row">
         <div class="col-md-6 col-xs-6" v-for="(item,index) in caselist" :key="index" :class="{ marginTP: index > 1 }">
-          <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
+          <router-link :to="{ name: 'details', query: { id: item.id }}">
+            <case-card :thumb="item.caseCoverImg" :title="item.caseTitle" :caption="item.caseSummary"></case-card>
+          </router-link>
         </div>
       </div>
     </div>
 
-    <div style="margin-top:40px" >
+    <div style="margin-top:40px">
       <button type="button" class="btn btn-default" @click="more" v-if="!allLoaded">加载更多</button>
       <p v-else>已经到底了~更多案例尽请期待~</p>
     </div>
 </script>
 
 <style scoped>
-
 .border-bottom {
   /* display: none; */
   border-bottom: 1px solid #bfbfbf;
-      margin-top: 10px !important;
+  margin-top: 10px !important;
+}
+.btn1 {
+  font-size: 24px !important;
+  color: black !important;
+  border: none !important;
+}
+.btn1:hover {
+  color: red !important;
+  text-decoration: none;
 }
- .btn1 {
-    font-size: 24px !important;
-    color: black !important;
-    border: none !important;
-  }
-  .btn1:hover {
-    color: red !important;
-    text-decoration: none;
-  }
 .text-left {
   color: #000;
 }
 }
 
 @media (max-width: 992px) {
-  .dynamic{
+  .dynamic {
     margin-top: 58px;
   }
   .comtype {
   }
 }
 .row {
-    margin: 0;
-  }
+  margin: 0;
+}
 .marginTP {
   margin-top: 3rem;
 }
     justify-content: center;
   }
   .dynamic {
-  margin-top: 116px;
-  margin-bottom: -116px;
-  padding-bottom: 116px; 
-  background-color: #fafafa;
-}
-  
+    margin-top: 116px;
+    margin-bottom: -116px;
+    padding-bottom: 116px;
+    background-color: #fafafa;
+  }
+
   .mobtype {
     display: none;
   }
 
-  
   .btn {
     font-size: 24px;
     margin-top: 88px;
   }
 }
 
+.mobbtn {
+  color: #e03723;
 
-.mobbtn{
-color: #e03723;
-   
-  padding:12px 40px;
+  padding: 12px 40px;
 
-    border-radius: 0px;
+  border-radius: 0px;
 
-    background-color: rgb(252, 151, 252);
-    border: 2px solid #bfbfbf;
-  
+  background-color: rgb(252, 151, 252);
+  border: 2px solid #bfbfbf;
 }
 </style>

src/views/Home.vue

             <span class="icon-bar"></span>
             <span class="icon-bar"></span>
           </button>
-          <a class="navbar-brand" href="#">
+          <a class="navbar-brand" href="/">
             <div alt="Brand" class="logo"></div>
           </a>
         </div>
       </div>
     </div>
 
-    <a class="btn btn-default btn-lg" href="/case" role="button">更多案例</a>
+    <router-link class="btn btn-default btn-lg" :to="{ name: 'case' }">更多案例</router-link>
 
     <div></div>
 
         <div class="contanier st top-news">
           <div class="row">
             <div class="col-xs-6 col-md-6 home-news-hover home-news" v-for="(item,index) in dynamiclist" :key="index">
-              <a href="/details">
+              <router-link :to="{ name: 'details', query: { id: item.id }}">
                 <div :style="{background: `url(${item.caseCoverImg})`}" class="home-dynamic"></div>
                 <h3 class="text-left" style>{{item.caseTitle}}</h3>
-              </a>
+              </router-link>
             </div>
             <!-- item.caseCoverImg -->
           </div>
         </div>
       </div>
     </div>
-    <a class="btn btn-default btn-lg dynbtn" href="/dynamic" role="button">更多动态</a>
+    <router-link class="btn btn-default btn-lg" role="button" :to="{ name: 'dynamic' }">更多案例</router-link>
   </div>
 </template>
 
     margin-top: 20px;
     font-size: 20px;
     font-weight: bold;
-    letter-spacing:1px;
+    letter-spacing: 1px;
   }
   h3 {
     font-size: 2.4rem;
   }
   .btn:hover {
     color: #e03723;
-    border: 1px solid #e03723;
+    border: 2px solid #e03723;
   }
 
   p {