shopDetails

src/components/LangSelect.vue

@@ -2,10 +2,10 @@
   <el-dropdown trigger="click" @command="handleSetLanguage">
     <div>{{ language }}</div>
     <el-dropdown-menu slot="dropdown">
-      <el-dropdown-item :disabled="language === 'zh'" command="zh">
+      <el-dropdown-item :disabled="language === '中文'" command="zh">
         中文
       </el-dropdown-item>
-      <el-dropdown-item :disabled="language === 'en'" command="en">
+      <el-dropdown-item :disabled="language === 'English'" command="en">
         English
       </el-dropdown-item>
     </el-dropdown-menu>

src/layout/components/header.vue

@@ -51,7 +51,7 @@
           <el-button class="searchBtn">搜索</el-button>
         </div>
       </div>
-      <div class="navs navHome">
+      <div class="navs">
         <router-link
           class="nav"
           v-for="{ url, title } in nav"
@@ -197,21 +197,16 @@ export default class extends Vue {
       margin-right: 5rem;
       border-bottom: 0.2rem solid #fff;
       display: inline-block;
-      &:hover {
-        border-bottom: 0.2rem solid #fd5522 !important;
-        color: #fd5522 !important;
+      &:hover,
+      &.router-link-active {
+        border-bottom: 0.2rem solid #fd5522;
+        color: #fd5522;
       }
     }
   }
 }
 </style>
 <style lang="scss">
-.navHome {
-  .router-link-active {
-    border-bottom: 0.2rem solid #fd5522 !important;
-    color: #fd5522 !important;
-  }
-}
 .searchDiv {
   .el-select .el-input {
     color: #fd5522;

src/styles/index.scss

@@ -39,7 +39,32 @@ html {
         margin-top: 1rem;
       }
     }
+    .marquee {
+      height: 100%;
+      .el-carousel__container {
+        height: 100%;
+      }
 
+      .el-carousel__button {
+        background-color: #fd5522;
+      }
+    }
+    .x-title {
+      font-size: 18px;
+      color: rgb(51, 51, 51);
+      position: relative;
+      left: 20px;
+      &::before {
+        content: "";
+        width: 5px;
+        height: 23px;
+        display: inline-block;
+        background: rgb(253, 85, 34);
+        position: absolute;
+        top: 0;
+        left: -20px;
+      }
+    }
     .fl {
       float: left;
     }

src/views/home/index.vue

@@ -25,8 +25,8 @@
             </div>
           </div>
         </el-col>
-        <el-col :span="14" class="bannerDiv">
-          <el-carousel class="bannerD" :autoplay="false">
+        <el-col :span="14">
+          <el-carousel class="bannerD marquee" :autoplay="false">
             <el-carousel-item v-for="item in 4" :key="item">
               <img class="banner" src="@assets/shangpin.png" att />
             </el-carousel-item>
@@ -657,15 +657,3 @@ export default {
   margin-top: 2rem;
 }
 </style>
-<style lang="scss">
-.bannerDiv {
-  .bannerD {
-    .el-carousel__container {
-      height: 100%;
-    }
-  }
-  .el-carousel__button {
-    background-color: #fd5522;
-  }
-}
-</style>

src/views/shops/details/honor.vue

@@ -1,6 +1,31 @@
 <template>
-  <div>
-    店铺资质荣誉
+  <div class="bg-F5">
+    <div class="container">
+      <div class="x-title">
+        资质荣誉
+      </div>
+      <div class="content">
+        <img src="@assets/zlzs.png" alt="" />
+        <div class="desc">
+          <span>外观设计专利书(BBF)</span>
+          <p>
+            外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书外观设计专利书
+          </p>
+        </div>
+      </div>
+
+      <div class="control">
+        <img class="left" src="@assets/left.png" alt="" />
+        <div class="imgs">
+          <img class="curr" src="@assets/zlzs.png" alt="" />
+          <img src="@assets/zlzs.png" alt="" />
+          <img src="@assets/zlzs.png" alt="" />
+          <img src="@assets/zlzs.png" alt="" />
+          <img src="@assets/zlzs.png" alt="" />
+        </div>
+        <img class="right" src="@assets/right.png" alt="" />
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -8,3 +33,69 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class extends Vue {}
 </script>
+<style lang="scss" scoped>
+.container {
+  padding: 30px 0 80px 0;
+  .x-title {
+    margin-bottom: 40px;
+  }
+  .content {
+    margin-left: 156px;
+    margin-bottom: 60px;
+    img {
+      width: 324px;
+      height: 484px;
+      margin-right: 60px;
+    }
+    .desc {
+      display: inline-block;
+      margin-top: 80px;
+      width: 473px;
+      vertical-align: top;
+      span {
+        font-size: 18px;
+        color: rgb(51, 51, 51);
+        margin-bottom: 30px;
+        display: inline-block;
+      }
+      p {
+        font-size: 14px;
+        color: rgb(102, 102, 102);
+        line-height: 2;
+      }
+    }
+  }
+  .control {
+    height: 258px;
+    position: relative;
+    > img {
+      position: absolute;
+      top: 50%;
+      transform: translateY(-50%);
+      &.left {
+        left: 0;
+      }
+      &.right {
+        right: 0;
+      }
+    }
+    .imgs {
+      margin-left: 56px;
+      display: inline-block;
+      box-sizing: border-box;
+      height: 100%;
+      img {
+        width: 188px;
+        height: 100%;
+        margin: 0 10px;
+        border: 1px solid #e5e5e5;
+        border-radius: 4px;
+        box-sizing: border-box;
+        &.curr {
+          border: 1px solid #fd5522;
+        }
+      }
+    }
+  }
+}
+</style>

src/views/shops/details/product.vue

@@ -63,8 +63,8 @@
         </div>
       </div>
     </div>
+    <div class="x-title">商品详情</div>
     <div class="details">
-      <div class="title">商品详情</div>
       <div class="row">
         <span>商品名称：全钢制保险柜</span>
         <span>商品材质：钢制</span>
@@ -97,6 +97,9 @@ export default class extends Vue {
   margin-top: 20px;
   .payInfo {
     overflow: hidden;
+    padding-bottom: 30px;
+    margin-bottom: 30px;
+    border-bottom: 1px solid rgb(229, 229, 229);
     .imgs {
       width: 400px;
       img {
@@ -169,25 +172,8 @@ export default class extends Vue {
     }
   }
   .details {
-    border-top: 1px solid rgb(229, 229, 229);
     padding: 30px 20px;
-    margin-top: 30px;
-    .title {
-      font-size: 18px;
-      color: rgb(51, 51, 51);
-      position: relative;
-      margin-bottom: 30px;
-      &::before {
-        content: "";
-        width: 5px;
-        height: 23px;
-        display: inline-block;
-        background: rgb(253, 85, 34);
-        position: absolute;
-        top: 0;
-        left: -20px;
-      }
-    }
+
     .row {
       margin-bottom: 20px;
       span {