完善首页

src/components/base/footer.vue

@@ -1,6 +1,18 @@
 <template>
     <div class="footer">
-        <div class="banxin">
+        <img class="img-icon-left" src="../../../static/image/foot_icon_1.png" />
+        <div class="right">
+            <div class="item-label1">请点击下面图标关注我们：</div>
+            <div class="item-image">
+                <img class="share-img-icon" src="../../../static/image/share_douyin.png" />
+                <img class="share-img-icon" src="../../../static/image/share_facebook.png" />
+                <img class="share-img-icon" src="../../../static/image/share_twitter.png" />
+                <img class="share-img-icon" src="../../../static/image/share_aaa.png" />
+                <img class="share-img-icon" src="../../../static/image/share_bbb.png" />
+            </div>
+            <div class="item-label2">©2017-2021CERESHOP版权所有 | 并保留所有权利 粤ICP备19086489号-3</div>
+        </div>
+        <!-- <div class="banxin">
             <div class="item">
                 <div class="content">
                     <img class="img-icon" src="../../../static/image/foot_icon_1.png" />
@@ -37,7 +49,7 @@
                     </div>
                 </div>
             </div>
-        </div>
+        </div> -->
     </div>
 </template>
 <script>
@@ -50,9 +62,56 @@ export default {
 <style lang = "scss" scoped>
 .footer {
     width: 100%;
-    background-color: #FFFFFF;
+    background-color: #252744;
     padding-top: 40px;
     padding-bottom: 40px;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: center;
+
+    .img-icon-left{
+        height: 110px;
+        width: 110px;
+        margin-left: 180px;
+    }
+    .right{
+        margin-right: 180px;
+
+        .item-label1{
+            width: 100%;
+            font-size: 12px;
+            font-family: Microsoft YaHei;
+            font-weight: 400;
+            color: #FFFFFF;
+        }
+
+        .share-img-icon{
+            width: 44px;
+            height: 44px;
+            margin-top: 30px;
+    margin-bottom: 30px;
+        }
+
+        img:nth-child(n+2){
+          margin-left: 40px;
+        }
+        .item-image{
+            width: 100%;
+        }
+        .item-label2{
+            width: 100%;
+            height: 10px;
+font-size: 10px;
+font-family: Microsoft YaHei;
+font-weight: 400;
+color: #FFFFFF;
+line-height: 10px;
+text-align: right;
+        }
+    }
 
     .banxin {
         width: 1252px;

src/components/base/homHeader.vue

@@ -2,7 +2,7 @@
   <div class="header-parent">
   <div class="header">
     <nav class="nav">
-      <ul>
+      <ul v-if="false">
         <li class="on">
           <router-link to="/">
             {{ $t('client.homepage') }}
@@ -13,7 +13,7 @@
         </li>
       </ul>
     </nav>
-    <div class="search">
+    <div class="search" v-if="false">
       <div class="searchSelect">
         <el-dropdown @command="searchCommand" trigger="click">
               <span class="el-dropdown-link">{{(searchVal === 'product') ? $t('common.beautiproduct') : $t('common.beautishop')}}
@@ -100,7 +100,7 @@ export default {
 $lightBlack: #666666;
 $navSearchHeight: 39px;
 .header-parent{
-  background-color: #FFFFFF;
+
   width: 100%;
 .header{
   height: 80px;

src/components/base/topNav.vue

@@ -1,14 +1,31 @@
 <template>
   <div class="topNav">
     <div class="content warp">
-      <div class="indexPage" v-if="!this.$route.meta.hiddenLogo">
+      <div class="headbox" v-if="!this.$route.meta.hiddenLogo">
+        <img class="logoimg" src="static\image\logo-dark.png" alt="">
         <router-link to="/">
           <!-- <icon-svg icon-class="logo" /> -->
-          <img src="static\image\nav-logo.png" alt="">
+          <span class="homepage">首页</span>
         </router-link>
+        <span class="service">服务流程</span>
       </div>
       <div v-else></div>
+
+
       <div class="right">
+
+        <div class="searchRight">
+          <input type="text"
+            v-model="keyword"
+            @keyup.enter="searchPro"
+            :placeholder="$t('common.searchproducthint')"
+          >
+          <span class="btn cur-poi" @click="searchPro">
+          <i class="icon el-icon-search"></i>
+        </span>
+      </div>
+   
+
         <div class="item item-select">
           <span class="hover-item">
             {{ languaueName }} <i class="ico-arrow el-icon-arrow-down"></i>
@@ -22,12 +39,7 @@
             </div>
           </div>
         </div>
-        <div class="item">
-          <a class="hover-item" @click="applySettle">{{ $t('client.shenqingruzhu') }}</a>
-        </div>
-        <div class="item">
-          <a class="hover-item" @click="goToUserOrder">{{ $t('client.myorder') }}</a>
-        </div>
+       
         <!-- 购物车 -->
         <div class="item item-select">
           <span class="hover-item" @click="goToShopCart">
@@ -391,8 +403,15 @@ export default {
 $lightBlack: #666666;
 $navSearchHeight: 39px;
 .topNav{
-  height: 50px;
-  background: #333333;
+  height: 80px;
+  background: #FFFFFF;
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
   .content{
     display: flex;
     justify-content: space-between;
@@ -439,6 +458,33 @@ $navSearchHeight: 39px;
         cursor: pointer;
       }
     }
+    .headbox{
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+    
+      .logoimg{
+        width:110px;
+        height:21px;
+      }
+      .homepage{
+        font-size: 6rpx;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #252744;
+        margin-left: 37px;
+      }
+      .service{
+        font-size: 6rpx;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #252744;
+        margin-left: 17px;
+      }
+    }
     .indexPage{
       .svg-icon{
         margin-left: 12px;
@@ -452,11 +498,28 @@ $navSearchHeight: 39px;
     }
     .right{
       display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+    .searchRight{
+      border: 1px solid #252744;
+    border-radius: 18px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    }
       .item{
         padding: 0 15px;
         display: inline-block;
-        color: #FFFFFF;
-        line-height: 50px;
+        font-size: 6rpx;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #252744;
+        
         span{
           cursor: pointer;
           b{
@@ -474,13 +537,8 @@ $navSearchHeight: 39px;
           padding-right: 33px;
           position: relative;
           .ico-arrow{
-            position: relative;
             position: absolute;
             right: 15px;
-            top: 5px;
-            margin-right: 0;
-            // margin: 0 3px;
-            line-height: 43px;
           }
         }
         &:hover{

src/components/canvasShow/basics/classifyheader/app/index.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="header">
+    <div class="tabs-nav-warp">
+      <div class="tabs-nav" scroll-x="true">
+        <div class="ul">
+          <div class="li" :class="{'on':activeTab===0}" @click="tabChange(0)" v-if="componentContent.firstClassify">{{componentContent.firstClassify}}</div>
+          <div class="li" :class="{'on':activeTab===index+beginIndex}" v-for="(item,index) in classifyData" :key="index">
+            {{item.categoryName}}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {commonMixin} from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data () {
+    return {
+      beginIndex:(this.componentContent.firstClassify && this.componentContent.firstClassify.length ) ? 1 : 0,
+      activeTab: 0
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+  
+  .tabs-nav-warp{
+    margin-top: 20px;
+    padding:0 30px;
+    overflow: hidden;
+    .tabs-nav{
+      .ul{
+        display: flex;
+        padding-left: 20px;
+		      padding-right: 20px;
+        .li{
+          flex: 1 0 auto;
+          margin-left: 5px;
+		      margin-right: 5px;
+          font-size: 30px;
+          color: #252744;
+          position: relative;
+          padding-bottom: 15px;
+          padding-left: 27px;
+          padding-right: 27px;
+          padding-top: 15px;
+          &:first-child{
+            margin-left: 0;
+          }
+          &.on{
+            background: #252744;
+              box-shadow: 0px 7px 14px 0px #C5C8ED;
+              border-radius: 40px;
+              color: white;
+          }
+        }
+      }
+    }
+  }
+</style>

src/components/canvasShow/basics/classifyheader/mixin.js

@@ -0,0 +1,59 @@
+import {funMixin} from '../../config/mixin'
+import { getClassify,getProducts } from '../../config/api'
+
+export const commonMixin = {
+  name: 'classifyheaderComponent',
+  mixins: [funMixin],
+  props: {
+    terminal: {
+      type: Number,
+      default: 4
+    },
+    typeId: {
+      type: Number,
+      default: 1
+    },
+    shopId: {
+      type: Number,
+      default: 0
+    },
+    componentContent: {
+      type: Object
+    }
+  },
+  data () {
+    return {
+      classifyData: [],
+      productData:[],
+      activeTab : 0,
+      beginIndex: 0
+    }
+  },
+  mounted() {
+      this.getData()
+  },
+  methods: {
+    async getData() {
+      const response = await getClassify()
+      const res = response.data
+      this.classifyData = res.data
+      this.activeTab = 0
+      this.getProducts(this.classifyData[this.activeTab].id)
+    },
+    classifyChange(item, index){
+      this.activeTab = index
+      this.getProducts(item.id)
+    },
+    async getProducts(classifyId){
+      let params = {
+        page: 1,
+        pageSize: 20,
+        classifyId : classifyId
+      }
+      const response = await getProducts(params)
+      const res = response.data
+      this.productData = res.data.list
+      this.$forceUpdate()
+   }
+  }
+}

src/components/canvasShow/basics/classifyheader/pc/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div class="tabs-nav-warp">
+    <div class="nav-warp">
+      <div class="ul">
+        <div class="li" :class="{ 'on': activeTab === index + beginIndex }" v-for="(item, index) in classifyData"
+          :key="index">
+          <div class="classify-item" @click="classifyChange(item,index + beginIndex)">
+            <img class="classify-img" :src="item.classifyImage">
+            <span class="classify-name">{{ item.categoryName }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div class="hom-pro-list" v-if="productData.length > 0">
+      <div class="product-swiper">
+        <div class="product-swiper-box">
+          <div class="product-swiper-warp" v-for="(item, index) in productData" :key="index">
+            <div class="product-swiper-item" @click="jumpProductDetail(item)">
+              <div class="product-swiper-img">
+                <img class="img pic-img default-img" :src="item.image"
+                  onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+              </div>
+              <div class="product-swiper-info">
+                <div class="product-info-content">
+                  <div class="product-name-row">
+                    <label class="product-name">{{ item.productName }}</label>
+                    <img class="product-star" src="../../../../../assets/images/icon_star.png">
+                   
+                    <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
+                  </div>
+                  <div class="product-price-row">
+                    <div class="price-warp">
+                      ¥ {{ item.price }}
+                    </div>
+                    <img class="product-add" src="../../../../../assets/images/icon_add.png">
+                  </div>
+                 
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="pagination new-pagination"></div>
+    </div>
+</div>
+</template>
+
+<script>
+import { commonMixin } from '../mixin'
+export default {
+  mixins: [commonMixin],
+  data() {
+    return {
+    
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.tabs-nav-warp {
+  display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+  .nav-warp {
+    width: 1200px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    .ul {
+      width: 760px;
+      display: flex;
+      flex-direction: row;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+
+      .li {
+        font-size: 16px;
+        line-height: 21px;
+        padding-bottom: 24px;
+        color: #333;
+        cursor: pointer;
+        border-bottom: 3px solid #fff;
+
+        &.on,
+        &:hover {
+          transform: scale(1.2);
+        }
+
+        .classify-item {
+          width: 126px;
+          height: 204px;
+          background: #F6F6F8;
+          box-shadow: 0rpx 12rpx 27rpx 0rpx #E2E2E2;
+          border-radius: 8rpx;
+          border: 1px solid #FFFFFF;
+          display: flex;
+          flex-direction: column;
+          flex-wrap: nowrap;
+          align-content: center;
+          justify-content: center;
+          align-items: center;
+
+          .classify-img {
+            height: 100px;
+          }
+
+          .classify-name {
+            margin-top: 48px;
+            font-family: Microsoft YaHei;
+            font-weight: bold;
+            font-size: 12px;
+            color: #252744;
+          }
+        }
+      }
+    }
+  }
+
+  .hom-pro-list {
+    display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+    ::v-deep .swiper-wrapper {
+      position: static;
+    }
+
+    /**横向滑动**/
+    .product-swiper {
+      height: auto;
+      overflow: hidden;
+      margin: 5px 34px;
+
+      &+.btn-more {
+        margin-top: 20px;
+      }
+
+      .title {
+        padding: 22px 0px 0 0;
+
+        label {
+          background-image: none;
+          color: #A56C4C;
+          font-style: italic;
+          padding: 0;
+        }
+      }
+
+      &-box {
+        margin-top: 18px;
+        margin-bottom: 18px;
+        margin-left: 18px;
+        margin-right: 18px;
+        height: 100%;
+        width: 100%;
+        display: flex;
+        overflow-x: auto;
+      }
+
+      &-warp {
+        height: 320px;
+      width: 242px !important;
+        margin-left: 18px;
+        margin-right: 18px;
+      }
+
+      .product-swiper-item {
+      height: 320px;
+      width: 242px !important;
+      position: relative;
+
+      .product-swiper-img {
+        width: 210px;
+        height: 220px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #F6F6F8;
+        border: 2px solid #FFFFFF;
+        border-radius: 16px;
+        position: relative;
+        padding: 20px;
+        z-index: 2;
+
+        .img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .product-swiper-info {
+        width: 242px;
+        height: 210px;
+        position: absolute;
+        top: 110px;
+        background: #FDFDFD;
+        box-shadow: 0px 16px 24px 0px #F6F6F6;
+        border-radius: 16px;
+        text-align: center;
+
+        .product-info-content {
+          margin-top: 125px;
+
+          .product-name-row {
+            width: 100%;
+            height: 22px;
+            line-height: 22px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-name {
+              width: 100%;
+              height: auto;
+              font-size: 16px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              line-height: 28px;
+              margin-left: 24px;
+              text-align: left;
+            }
+
+            .product-star {
+              width: 22px;
+              height: 22px;
+            }
+
+            .product-star-text {
+              width: auto;
+              height: 28px;
+              line-height: 28px;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #A5A5AD;
+              margin-right: 20px;
+              margin-left: 5px;
+            }
+          }
+
+          .product-sku-row {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-top: 15px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-sku-name {
+              font-size: 24px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #90919C;
+              margin-left: 30px;
+            }
+          }
+
+          .product-price-row {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+
+            .price-warp {
+              display: flex;
+              align-items: center;
+              line-height: 28px;
+              margin-left: 24px;
+              justify-content: flex-start;
+              width: auto;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
+            }
+
+            .product-add {
+              width: 50px;
+              height: 50px;
+              margin-right: 24px;
+            }
+          }
+
+
+        }
+      }
+    }
+    }
+  }
+}
+</style>

src/components/canvasShow/basics/product/mixin.js

@@ -59,7 +59,7 @@ export const commonMixin = {
     async getData(isFirst) {
       let params = {
         page: 1,
-        pageSize: 99
+        pageSize: 20
       }
       if (this.componentContent.productData.sourceType === '1') {
         if(this.componentContent.productData.productIdList && this.componentContent.productData.productIdList.length>0){
@@ -77,7 +77,15 @@ export const commonMixin = {
           }
           return
         }
-      } else {
+      }  else if(this.componentContent.productData.sourceType === '3'){
+        params.type='4'
+      } else if(this.componentContent.productData.sourceType === '4'){
+        params.type='5'
+      }else if(this.componentContent.productData.sourceType === '5'){
+        params.type='6'
+      }else if(this.componentContent.productData.sourceType === '6'){
+        params.type='7'
+      }else {
         return
       }
       const response = await getProducts(params)

src/components/canvasShow/basics/product/pc/index.vue

@@ -27,7 +27,7 @@
     <div v-else class="picList" >
       <ul class="clearfix" :class="'imgTextNum' +  componentContent.productNum">
         <li class="item" v-for="(item,index) in productData.slice(0, componentContent.productRowNum * componentContent.productNum)" :key="index">
-          <div class="a-link" @click="jumpProductDetail(item)">
+          <div class="a-link" @click="jumpProductDetail(item)" v-if="componentContent.productStyleValue == '1'">
             <div class="itemImgBox">
               <div class="imgBox">
                 <img class="img" :src="item.image" :alt="item.productName">
@@ -41,6 +41,61 @@
               </div>
             </div>
           </div>
+
+          <div class="product-swiper-item" v-if="componentContent.productStyleValue == '2'"
+            @click="jumpProductDetail(item)">
+            <div class="product-swiper-img">
+              <img class="img pic-img default-img" :src="item.image"
+                onerror="this.src='url(https://ceres.zkthink.com/static/root/default.png) no-repeat center';this.οnerrοr=null">
+            </div>
+            <div class="product-swiper-info">
+              <div class="product-info-content">
+                <div class="product-name-row">
+                  <label class="product-name">{{ item.productName }}</label>
+                  <img class="product-star" src="../../../static/images/product/icon_star.png">
+
+                  <label class="product-star-text">{{ item.qaNum || 3.5 }}</label>
+                </div>
+                <div class="product-price-row">
+                  <div class="price-warp">
+                    ¥ {{ item.price }}
+                  </div>
+                  <img class="product-add" src="../../../static/images/product/icon_add.png">
+                </div>
+
+              </div>
+            </div>
+          </div>
+
+
+          <div class="item3" v-if="componentContent.productStyleValue == '3'" @click="jumpProductDetail(item)">
+            <div class="item3_name">{{ item.productName }}</div>
+            <div class="item3_image"><el-image :src="item.image" fit="contain"></el-image></div>
+            <div class="item3_btn_row">
+              <div class="item3_btn">点击</div>
+            </div>
+          </div>
+
+          <div class="item4" v-if="componentContent.productStyleValue == '4'" @click="jumpProductDetail(item)">
+           
+            <div class="item4_content">
+              <div class="item4_image"><el-image :src="item.image" fit="contain"></el-image></div>
+              <div class="item4_info">
+                <div class="item4_name">{{ item.productName }}</div>
+                <div class="item4_price">¥{{ item.price }}</div>
+              </div>
+
+              <div class="item4_arrow">
+                <img src="../../../static/images/product/icon_right_arrow.png">
+              </div>
+            </div>
+
+            <div class="item4_index_image" v-if="index < 3">
+              <img src="../../../static/images/product/icon_index_1.png" v-if="index == 0">
+              <img src="../../../static/images/product/icon_index_2.png" v-if="index == 1">
+              <img src="../../../static/images/product/icon_index_3.png" v-if="index == 2">
+            </div>
+          </div>
         </li>
       </ul>
     </div>
@@ -75,7 +130,7 @@ import {commonMixin} from '../mixin'
 <style lang="scss" scoped>
   .product-list{
     padding: 20px 0;
-    background-color: #f5f5f5;
+    background-color: #FAFAFA;
     .picListWarp{
       width: 1380px;
       max-width: 100%;
@@ -208,6 +263,273 @@ import {commonMixin} from '../mixin'
           flex: 0 0 20%;
         }
       }
+
+      .product-swiper-item {
+      height: 320px;
+      width: 242px !important;
+      position: relative;
+
+      .product-swiper-img {
+        width: 210px;
+        height: 220px;
+        margin-left: auto;
+        margin-right: auto;
+        background: #F6F6F8;
+        border: 2px solid #FFFFFF;
+        border-radius: 16px;
+        position: relative;
+        padding: 20px;
+        z-index: 2;
+
+        .img {
+          width: 100%;
+          height: 100%;
+          object-fit: contain;
+        }
+      }
+
+      .product-swiper-info {
+        width: 242px;
+        height: 210px;
+        position: absolute;
+        top: 110px;
+        background: #FDFDFD;
+        box-shadow: 0px 16px 24px 0px #F6F6F6;
+        border-radius: 16px;
+        text-align: center;
+
+        .product-info-content {
+          margin-top: 125px;
+
+          .product-name-row {
+            width: 100%;
+            height: 22px;
+            line-height: 22px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-name {
+              width: 100%;
+              height: auto;
+              font-size: 16px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
+              display: block;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              line-height: 28px;
+              margin-left: 24px;
+              text-align: left;
+            }
+
+            .product-star {
+              width: 22px;
+              height: 22px;
+            }
+
+            .product-star-text {
+              width: auto;
+              height: 28px;
+              line-height: 28px;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #A5A5AD;
+              margin-right: 20px;
+              margin-left: 5px;
+            }
+          }
+
+          .product-sku-row {
+            width: 100%;
+            height: 28px;
+            line-height: 28px;
+            margin-top: 15px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: flex-start;
+            align-items: center;
+
+            .product-sku-name {
+              font-size: 24px;
+              font-family: Source Han Sans CN;
+              font-weight: 400;
+              color: #90919C;
+              margin-left: 30px;
+            }
+          }
+
+          .product-price-row {
+            width: 100%;
+            height: 50px;
+            line-height: 50px;
+            display: flex;
+            flex-direction: row;
+            flex-wrap: nowrap;
+            align-content: center;
+            justify-content: space-between;
+            align-items: center;
+            margin-top: 10px;
+
+            .price-warp {
+              display: flex;
+              align-items: center;
+              line-height: 28px;
+              margin-left: 24px;
+              justify-content: flex-start;
+              width: auto;
+              flex-direction: row;
+              flex-wrap: nowrap;
+              font-size: 14px;
+              font-family: Source Han Sans CN;
+              font-weight: bold;
+              color: #252744;
+            }
+
+            .product-add {
+              width: 50px;
+              height: 50px;
+              margin-right: 24px;
+            }
+          }
+
+
+        }
+      }
+    }
+
+    .item3 {
+      display: flex;
+      flex-direction: column;
+      flex-wrap: nowrap;
+      align-content: center;
+      justify-content: center;
+      align-items: center;
+      background: #F6F6F8;
+      box-shadow: 0px 12px 24px 0px #EDEDED;
+      border-radius: 24px;
+      border: 1px solid #FFFFFF;
+
+      .item3_name {
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 14px;
+        color: #252744;
+        margin-top: 15px;
+      }
+
+      .item3_image {
+        margin: 15px;
+      }
+
+      .item3_btn_row {
+        margin-bottom: 15px;
+
+        .item3_btn {
+          background: #252744;
+          border-radius: 16px;
+          font-family: Microsoft YaHei;
+          font-weight: 400;
+          font-size: 12px;
+          color: #FFFFFF;
+          padding-left: 20px;
+          padding-right: 20px;
+          padding-top: 8px;
+          padding-bottom: 8px;
+        }
+      }
+    }
+
+    .item4 {
+
+      height: 210px;
+      background: #FDFDFD;
+      box-shadow: 0px 24px 60px 0px #E5E5E5;
+      border-radius: 16px;
+      position: relative;
+
+      .item4_index_image {
+        width: 50px;
+        height: 50px;
+        position: absolute;
+        left: 26px;
+        z-index: 100;
+        
+        img{
+          width: 100%;
+        }
+      }
+
+      .item4_content {
+        width: 100%;
+        height: 100%;
+        position: absolute;
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
+        align-content: center;
+        justify-content: space-between;
+        align-items: center;
+
+        .item4_image {
+          width: 164px;
+          height: 164px;
+          background: #F6F6F7;
+          border-radius: 8rpx;
+          margin: 24px;
+
+          img{
+            width: 100%;
+          }
+        }
+
+        .item4_info {
+          height: 100%;
+    padding-top: 46px;
+    padding-bottom: 46px;
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: space-between;
+    align-items: flex-start;
+
+          .item4_name {
+            font-family: Microsoft YaHei;
+          font-weight: bold;
+        font-size: 20px;
+        color: #252744;
+          }
+
+          .item4_price {
+            font-family: Source Han Sans CN;
+        font-weight: 400;
+        font-size: 20px;
+        color: #252744;
+          }
+        }
+
+        .item4_arrow {
+        width: 20px;
+        height: 20px;
+        margin: 24px;
+        img{
+          width: 100%;
+          height: 100%;
+        }
+        }
+      }
+
+    }
     }
   }
   .btn-more {

src/components/canvasShow/basics/text.vue

@@ -3,7 +3,7 @@
     <div class="line-warp" :class="{'borderBot':componentContent.showLine}">
       <h3 class="h3" :style="{fontSize:componentContent.fontSizeNum+'px',fontWeight:componentContent.textFontW,color:componentContent.titColor}">{{componentContent.title}}</h3>
       <p class="p" :style="{fontSize:componentContent.describeSizeNum+'px',fontWeight:componentContent.describeFontW,color:componentContent.describeColor}">{{componentContent.describe}}</p>
-      <div class="btn-more" v-show="componentContent.showMore" :class="'style'+componentContent.styleValue" @click="jumpLink(item.linkObj)"><span>查看更多</span><i class="iconfont icon-arrow-right"></i></div>
+      <div class="btn-more" v-show="componentContent.showMore" :class="'style'+componentContent.styleValue" @click="jumpLink(item.linkObj)"><span>{{ $t('common.more') }}</span><i class="iconfont icon-arrow-right"></i></div>
     </div>
   </div>
 </template>
@@ -33,12 +33,19 @@
     position: relative;
     .line-warp{
       padding: 10px 0;
+      display: flex;
+    flex-direction: row;
+    flex-wrap: nowrap;
+    align-content: center;
+    justify-content: flex-start;
+    align-items: center;
     }
     .borderBot{
       border-bottom: 1px solid #cccc;
     }
     .h3{
       line-height: 1.5;
+      flex:1;
     }
     .p{
       line-height: 1.5;
@@ -65,7 +72,6 @@
         .btn-more{
           position: absolute;
           right: 0;
-          top: 10px;
         }
       }
     }

src/components/canvasShow/canvasShowPage.vue

@@ -96,12 +96,11 @@
   }
 </script>
 
-<style lang="scss" scoped>
-  .hom-layout{
-  }
-</style>
 
 <style lang="scss">
+.hom-layout{
+    background-color: #FAFAFA;
+  }
   .warp{
     width: 690px;
     margin: 0 auto;

src/components/canvasShow/componentMap.js

@@ -77,6 +77,7 @@ export const componentMap = [
   // PC
   new Map([
     // ['shopHeader', () => import('./cereshop/pc/shopHeader')], // 首页头部
+    ['classify-header', () => import('./basics/classifyheader/pc')], // 商品分类
     ['banner', () => import('./basics/banner')], // 轮播图
     ['text', () => import('./basics/text')], // 文本
     ['imageText', () => import('./basics/imageText')], // 图文

src/locales/en.json

@@ -602,5 +602,6 @@
 	"common.refundamount":"Refund Amount",
 	"common.deal":"Deal",
 	"common.exportafterorder_filename":"afterorderdatadetail.xls",
-	"common.after-salestatus_info":"After-sale Info"
+	"common.after-salestatus_info":"After-sale Info",
+	"common.more":"More"
 }

src/locales/zh-CN.json

@@ -602,6 +602,7 @@
 	"common.refundamount":"退款金额(元)",
 	"common.deal":"处理",
 	"common.exportafterorder_filename":"售后订单数据明细表.xls",
-	"common.after-salestatus_info":"售后信息"
+	"common.after-salestatus_info":"售后信息",
+	"common.more":"更多"
 	
 }

src/views/home/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <hom-header></hom-header>
+    <hom-header v-if="false"></hom-header>
     <CanvasPage :terminal="4" :typeId="1"></CanvasPage>
   </div>
 </template>

src/views/layout.vue

@@ -51,7 +51,7 @@ export default {
   flex-direction: column;
   .main{
     flex: 1;
-    background-color: #F5F5F5;
+    background-color: #FAFAFA;
   }
 }
 .hiddenLogin{