在线商城

src/components/LangSelect.vue

@@ -1,10 +1,6 @@
 <template>
-  <el-dropdown
-    trigger="click"
-    class="international"
-    @command="handleSetLanguage"
-  >
-    <div>LangSelect-{{ language }}</div>
+  <el-dropdown trigger="click" @command="handleSetLanguage">
+    <div>{{ language }}</div>
     <el-dropdown-menu slot="dropdown">
       <el-dropdown-item :disabled="language === 'zh'" command="zh">
         中文
@@ -23,7 +19,12 @@ import { setPageTitle } from "@/utils";
 @Component
 export default class extends Vue {
   get language() {
-    return this.$i18n.locale;
+    switch (this.$i18n.locale) {
+      case "zh":
+        return "中文";
+      default:
+        return "English";
+    }
   }
 
   private handleSetLanguage(lang: string) {

src/layout/components/header.vue

@@ -3,6 +3,10 @@
     <div class="topDiv">
       <div class="container">
         <lang-select />
+        <router-link class="home" to="/home">
+          <img src="@assets/home.png" alt="" srcset="" />
+          首页</router-link
+        >
         <div class="login">
           <router-link to="/login">请登录</router-link>
         </div>
@@ -28,43 +32,58 @@
         </div>
       </div>
     </div>
-    <div class="logoDiv container">
-      <div class="logoTitle">中国钢制家具产业聚集网</div>
-      <div class="searchDiv">
-        <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
-          <el-option label="产品" value="1"></el-option>
-          <el-option label="企业" value="2"></el-option>
-        </el-select>
-        <span class="line"></span>
-        <el-input
-          placeholder="请输入内容"
-          v-model="homeSearchVal"
-          class="input-with-select"
+    <div v-show="showHeader" class="container  ">
+      <div class="logoDiv  ">
+        <div class="logoTitle">中国钢制家具产业聚集网</div>
+        <div class="searchDiv">
+          <el-select class="searchFl" v-model="homeSearchOption" placeholder="">
+            <el-option label="产品" value="1"></el-option>
+            <el-option label="企业" value="2"></el-option>
+          </el-select>
+          <span class="line"></span>
+          <el-input
+            placeholder="请输入内容"
+            v-model="homeSearchVal"
+            class="input-with-select"
+          >
+            <i slot="prefix" class="el-input__icon el-icon-search"></i>
+          </el-input>
+          <el-button class="searchBtn">搜索</el-button>
+        </div>
+      </div>
+      <div class="  navs">
+        <router-link
+          class="nav"
+          v-for="{ url, title } in nav"
+          :to="url"
+          :key="title"
+          >{{ $t(`route.${title}`) }}</router-link
         >
-          <i slot="prefix" class="el-input__icon el-icon-search"></i>
-        </el-input>
-        <el-button class="searchBtn">搜索</el-button>
       </div>
     </div>
   </div>
 </template>
-
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import langSelect from "@/components/LangSelect.vue";
-export default {
-  name: "app",
-  components: {
-    langSelect
-  },
-  data() {
-    return {
-      homeSearchVal: "",
-      homeSearchOption: "1"
-    };
+import { nav } from "@/router";
+@Component({
+  components: { langSelect }
+})
+export default class extends Vue {
+  private homeSearchVal = "";
+  private homeSearchOption = "1";
+  get nav() {
+    return nav.map(({ path: url, meta: { title } }) => ({ url, title }));
   }
-};
+  get showHeader() {
+    return !this.$route.matched.some(
+      ({ meta: { NoHeader = false } }) => NoHeader
+    );
+  }
+}
 </script>
+
 <style scoped lang="scss">
 .header {
   .topDiv {
@@ -74,9 +93,13 @@ export default {
     background: #f5f5f5;
     border: 0.1rem solid #e5e5e5;
     .container {
+      .home {
+        color: #fd5522;
+        margin-left: 2rem;
+      }
       .login {
-        a{
-          color: #fd5522; 
+        a {
+          color: #fd5522;
         }
         margin-right: 2rem;
         margin-left: 2rem;
@@ -96,7 +119,7 @@ export default {
         }
         .sjrz,
         .spfb {
-          a{
+          a {
             color: #fd5522;
           }
           display: inline-block;
@@ -163,5 +186,18 @@ export default {
       }
     }
   }
+  .navs {
+    .nav {
+      display: inline-block;
+      font-size: 1.6rem;
+      color: rgb(51, 51, 51);
+      margin-right: 5rem;
+      padding-bottom: 20px;
+      &.router-link-active {
+        color: rgb(253, 85, 34);
+        border-bottom: 1px rgb(253, 85, 34) solid;
+      }
+    }
+  }
 }
 </style>

src/layout/components/nav.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="navs">
-    <router-link
-      class="nav"
-      v-for="{ url, title } in nav"
-      :to="url"
-      :key="title"
-      >{{ $t(`route.${title}`) }}</router-link
-    >
-  </div>
-</template>
-<script lang="ts">
-import { Component, Vue } from "vue-property-decorator";
-import { nav } from "@/router";
-@Component
-export default class extends Vue {
-  get nav() {
-    return nav.map(({ path: url, meta: { title } }) => ({ url, title }));
-  }
-}
-</script>
-<style lang="scss" scoped>
-.navs {
-  margin: 1rem 5rem;
-  .nav {
-    font-size: 1.5rem;
-    margin: 5rem;
-  }
-}
-</style>

src/layout/index.vue

@@ -1,7 +1,6 @@
 <template>
   <div class="layout">
     <y-header />
-    <y-nav />
     <keep-alive>
       <router-view class="main" />
     </keep-alive>
@@ -11,12 +10,10 @@
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
 import yHeader from "./components/header.vue";
-import yNav from "./components/nav.vue";
 import yFooter from "./components/footer.vue";
 @Component({
   components: {
     yHeader,
-    yNav,
     yFooter
   }
 })

src/router/index.ts

@@ -84,6 +84,7 @@ const router = new VueRouter({
           component: () => import("../views/shops/details/index.vue"),
           redirect: "/shop/:sid/products",
           props: true,
+          meta: { NoHeader: true },
           children: [
             {
               path: "products",

src/styles/index.scss

@@ -19,8 +19,10 @@ html {
     font-family: "Microsoft YaHei";
 
     .container {
-      width: 1150px;
+      width: 1160px;
       margin: auto;
+      font-size: 1.4rem;
+      overflow: hidden;
     }
 
     .noneData {
@@ -66,6 +68,7 @@ html {
       padding: 0;
       margin: 0;
       outline: none;
+      list-style: none;
     }
   }
 }

src/views/mall/index.vue

@@ -1,6 +1,76 @@
 <template>
-  <div>
-    在线商城
+  <div class="mall bg-F5">
+    <div class="banner">在线商城banner</div>
+    <div class="container ">
+      <div class="category">
+        <div class="dalei">
+          <div class="flag ">
+            分类
+            <div class="t"></div>
+          </div>
+          <div class="items ">
+            <div class="item fl  curr">
+              全部
+            </div>
+            <div class="item fl ">
+              文件柜
+            </div>
+            <div class="item fl ">
+              保险柜
+            </div>
+          </div>
+        </div>
+        <div class="xiaolei">
+          <div class="block fl" v-for="x in 5" :key="x">
+            <span>文件柜</span>
+            <div class="items fr">
+              <div class="item fl">
+                五斗音箱柜
+              </div>
+              <div class="item fl">
+                五斗音箱柜
+              </div>
+              <div class="item fl">
+                五斗音箱柜
+              </div>
+              <div class="item fl">
+                五斗音箱柜
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="filter">
+        <div class="sort fl">综合排序</div>
+        <div class="sort fl">新品</div>
+        <div class="sort fl">
+          <span>价格</span>
+          <input placeholder="最低价" /> - <input placeholder="最高价" />
+        </div>
+        <div class="search fr">
+          <input placeholder="商品名称/企业名称" />
+          <span>搜索</span>
+        </div>
+      </div>
+      <div class="products">
+        <router-link to="/shop/1/2" class="product" v-for="x in 10" :key="x">
+          <div class="img">
+            <img src="@assets/shangpin.png" alt="" />
+          </div>
+          <div class="amount"><span>¥</span>1800</div>
+          <div class="name">文件柜20-J</div>
+          <div class="shop">洛阳花都家具有限公司</div>
+        </router-link>
+      </div>
+      <!-- 仅作为前期静态页面显示用 后期会集成到loadmore组件内 -->
+      <el-pagination
+        class="fr"
+        background
+        layout="prev, pager, next,total, jumper"
+        :total="100"
+        :page-size="10"
+      />
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -8,3 +78,212 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class extends Vue {}
 </script>
+<style lang="scss" scoped>
+.mall {
+  .banner {
+    width: 100%;
+    height: 240px;
+    line-height: 240px;
+    color: #fff;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+    background: rgb(220, 220, 220);
+  }
+  .container {
+    padding: 2rem 0;
+    overflow: hidden;
+    .category {
+      background: #fff;
+      border-radius: 4px;
+      height: 218px;
+      overflow: hidden;
+      .dalei {
+        height: 58px;
+        box-sizing: border-box;
+        width: 100%;
+        padding: 1rem;
+        overflow: hidden;
+        border-bottom: 1px rgb(229, 229, 229) solid;
+        display: table;
+        .flag {
+          display: table-cell;
+          width: 50px;
+          vertical-align: middle;
+          color: rgb(153, 153, 153);
+          // padding-right: 1rem;
+          // border-right: 1px solid rgb(153, 153, 153);
+          position: relative;
+          .t {
+            width: 1px;
+            height: 15px;
+            background: #999;
+
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+          }
+        }
+        .items {
+          display: table-cell;
+          vertical-align: middle;
+          .item {
+            padding: 0.2rem 1.5rem;
+            margin-left: 3rem;
+            &.curr {
+              background: rgb(253, 85, 34);
+              border-radius: 20px;
+              color: #fff;
+            }
+          }
+        }
+      }
+      .xiaolei {
+        height: 160px;
+        overflow: hidden;
+        .block {
+          width: 337px;
+          height: 80px;
+          // margin: 30px 60px 0 20px;
+          margin-left: 20px;
+          margin-right: 24px;
+          overflow: hidden;
+
+          padding-top: 20px;
+          box-sizing: border-box;
+
+          .items {
+            width: 260px;
+
+            overflow: hidden;
+
+            .item {
+              margin-right: 1rem;
+              margin-bottom: 1rem;
+              font-size: 1.2rem;
+              color: rgb(102, 102, 102);
+            }
+          }
+        }
+      }
+    }
+    .filter {
+      height: 60px;
+      line-height: 60px;
+      background: #fff;
+      margin-top: 20px;
+      padding: 0 20px;
+      border-radius: 4px;
+      input {
+        border-radius: 4px;
+        height: 36px;
+        padding-left: 1rem;
+        font-size: 1.4rem;
+        border: 1px solid #eaeaea;
+      }
+      .sort {
+        margin-right: 40px;
+        span {
+          position: relative;
+          margin-right: 20px;
+          &::before {
+            content: "";
+            position: absolute;
+
+            border-top-color: transparent;
+            border-left-color: transparent;
+            border-bottom-color: #acacac;
+            border-right-color: transparent;
+            border-width: 5px;
+            border-style: solid;
+            top: 0;
+            right: -10px;
+          }
+          &::after {
+            content: "";
+            position: absolute;
+
+            border-top-color: #acacac;
+            border-left-color: transparent;
+            border-bottom-color: transparent;
+            border-right-color: transparent;
+            border-width: 5px;
+            border-style: solid;
+            bottom: 0;
+            right: -10px;
+          }
+        }
+        input {
+          width: 100px;
+        }
+      }
+      .search {
+        input {
+          width: 387px;
+          margin-right: 20px;
+        }
+        span {
+          padding: 6px 22px;
+          background: #fd5522;
+          color: #fff;
+          cursor: pointer;
+          border-radius: 4px;
+        }
+      }
+    }
+    .products {
+      margin-top: 20px;
+      overflow: hidden;
+
+      .product {
+        background: #fff;
+        border-radius: 4px;
+        width: 216px;
+        height: 340px;
+        float: left;
+        margin-right: 20px;
+        margin-bottom: 20px;
+        padding: 20px;
+        box-sizing: border-box;
+        cursor: pointer;
+        &:nth-child(5n + 5) {
+          margin-right: 0;
+        }
+        .img {
+          width: 176px;
+          height: 200px;
+          line-height: 200px;
+          border: 1px #e5e5e5 solid;
+          margin-bottom: 20px;
+          position: relative;
+          img {
+            width: 80%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+        .amount {
+          color: #fd5522;
+          font-size: 18px;
+          margin-bottom: 10px;
+          span {
+            font-size: 12px;
+          }
+        }
+        .name {
+          font-size: 14px;
+          color: rgb(51, 51, 51);
+          margin-bottom: 10px;
+        }
+        .shop {
+          font-size: 12px;
+          color: rgb(102, 102, 102);
+        }
+      }
+    }
+  }
+}
+</style>

src/views/shops/details/index.vue

@@ -1,6 +1,36 @@
 <template>
-  <div>
-    店铺详情-{{ sid }}
+  <div class="shopDetails">
+    <div class="header container">
+      <img class="logo fl" src="@assets/shopLogo.png" />
+      <div class="desc fl">
+        <h3>洛阳钢制家具有限公司</h3>
+        <span class="rz">已认证</span>
+        <img src="@assets/guanzhu.png" />
+        <span class="gz">关注商家</span>
+      </div>
+      <div class="fr search">
+        <el-input
+          class="input"
+          placeholder="请输入关键词"
+          prefix-icon="el-icon-search"
+        />
+        <div class="fr qz">搜全站</div>
+        <div class="fr bd">搜本店</div>
+      </div>
+    </div>
+    <div class="navs ">
+      <div class="container">
+        <router-link class="nav " :to="`/shop/${sid}/products`"
+          >首页
+        </router-link>
+        <router-link class="nav  " :to="`/shop/${sid}/profile`"
+          >企业简介
+        </router-link>
+        <router-link class="nav " :to="`/shop/${sid}/honor`"
+          >资质荣誉
+        </router-link>
+      </div>
+    </div>
     <router-view />
   </div>
 </template>
@@ -12,3 +42,81 @@ export default class extends Vue {
   private sid!: string;
 }
 </script>
+<style lang="scss" scoped>
+.shopDetails {
+  background: #fff;
+  .header {
+    height: 137px;
+    box-sizing: border-box;
+    overflow: hidden;
+    padding: 30px 0;
+    .logo {
+      width: 142px;
+      height: 80px;
+    }
+    .desc {
+      margin-left: 20px;
+      h3 {
+        font-size: 18px;
+        color: rgb(51, 51, 51);
+        margin-bottom: 20px;
+      }
+      .rz {
+        margin-right: 20px;
+        background: rgb(253, 85, 34);
+        color: #fff;
+        padding: 5px 10px;
+        border-radius: 4px;
+        font-size: 12px;
+      }
+      .gz {
+        margin-left: 5px;
+        font-size: 12px;
+        color: rgb(51, 51, 51);
+      }
+    }
+    .search {
+      margin-top: 20px;
+      .input {
+        width: 440px;
+        height: 40px;
+      }
+      div {
+        width: 90px;
+        height: 40px;
+        line-height: 40px;
+        text-align: center;
+        border-radius: 4px;
+        &.bd {
+          background: rgb(253, 85, 34);
+          color: #fff;
+          margin: 0 10px;
+        }
+        &.qz {
+          border: 1px solid #fd5522;
+          color: #fd5522;
+        }
+      }
+    }
+  }
+  .navs {
+    background: rgb(253, 85, 34);
+    height: 40px;
+    line-height: 40px;
+    .nav {
+      color: #fff;
+      height: 100%;
+      display: inline-block;
+      width: 120px;
+      text-align: center;
+      border-left: 1px solid #ff672e;
+      &:last-child {
+        border-right: 1px solid #ff672e;
+      }
+      &.router-link-exact-active {
+        background: rgb(237, 68, 17);
+      }
+    }
+  }
+}
+</style>

src/views/shops/details/product.vue

@@ -1,5 +1,88 @@
 <template>
-  <div>商品详情-{{ pid }}</div>
+  <div class="productDetails container">
+    <div class="payInfo">
+      <div class="imgs fl">
+        <img src="@assets/productDetails.jpg" alt="" />
+        <img src="@assets/productDetails.jpg" alt="" />
+        <img src="@assets/productDetails.jpg" alt="" />
+        <img src="@assets/productDetails.jpg" alt="" />
+      </div>
+      <div class="info fl">
+        <div class="title">铁皮柜</div>
+        <div class="desc">品牌认证</div>
+        <div class="row">
+          <div class="tit">价格 :</div>
+          <div class="amount fl"><span>¥</span>1800</div>
+        </div>
+        <div class="row">
+          <div class="tit">规格 :</div>
+          <div class="items">
+            <div class="item curr">
+              一斗两门
+            </div>
+            <div class="item">
+              两斗两门
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="tit">颜色 :</div>
+          <div class="items">
+            <div class="item curr">
+              黑色
+            </div>
+            <div class="item">
+              白色
+            </div>
+            <div class="item">
+              灰色
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="tit">单重 :</div>
+          <div class="items">
+            <div class="item curr">
+              10KG
+            </div>
+            <div class="item">
+              20KG
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="tit">安装 :</div>
+          <div class="items">
+            <div class="item curr">
+              组装
+            </div>
+          </div>
+        </div>
+        <div class="pay">
+          联系商家
+        </div>
+      </div>
+    </div>
+    <div class="details">
+      <div class="title">商品详情</div>
+      <div class="row">
+        <span>商品名称：全钢制保险柜</span>
+        <span>商品材质：钢制</span>
+        <span>商品单重：20KG</span>
+      </div>
+      <div class="row">
+        <span>商品颜色：黑、白、灰。。</span>
+        <span>商品规格：一斗一门、两斗两门。。。</span>
+        <span>配送方式：厂家直邮</span>
+      </div>
+      <div class="row">
+        <span>生产日期：2019-12-10</span>
+        <span>生产地点：洛阳市伊滨区庞村镇</span>
+        <span>供货仓库地址：洛阳市伊滨区庞村镇</span>
+      </div>
+      <img src="@assets/productDetails.jpg" alt="" />
+    </div>
+  </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch, Prop } from "vue-property-decorator";
@@ -9,3 +92,109 @@ export default class extends Vue {
   private pid!: string;
 }
 </script>
+<style lang="scss" scoped>
+.productDetails {
+  margin-top: 20px;
+  .payInfo {
+    overflow: hidden;
+    .imgs {
+      width: 400px;
+      img {
+        width: 92px;
+        height: 92px;
+        margin-right: 10px;
+        &:nth-child(1) {
+          width: 400px;
+          height: 400px;
+          margin-bottom: 20px;
+        }
+      }
+    }
+    .info {
+      overflow: hidden;
+      padding: 20px 30px;
+      .title {
+        font-size: 16px;
+        color: rgb(51, 51, 51);
+        margin-bottom: 10px;
+      }
+      .desc {
+        font-size: 12px;
+        color: rgb(102, 102, 102);
+        margin-bottom: 20px;
+      }
+      .amount {
+        color: rgb(253, 85, 34);
+        font-size: 20px;
+        span {
+          font-size: 12px;
+        }
+      }
+      .row {
+        margin-bottom: 10px;
+        width: 100%;
+        overflow: hidden;
+        .tit {
+          color: rgb(102, 102, 102);
+          margin-right: 15px;
+          float: left;
+          margin-top: 10px;
+        }
+        .items {
+          overflow: hidden;
+          .item {
+            float: left;
+            border: 1px #e5e5e5 solid;
+            border-radius: 4px;
+            padding: 5px 15px;
+            color: rgb(102, 102, 102);
+            margin: 0 20px 10px 0;
+            &.curr {
+              border: 1px rgb(253, 85, 34) solid;
+              color: rgb(253, 85, 34);
+            }
+          }
+        }
+      }
+      .pay {
+        width: 126px;
+        height: 36px;
+        line-height: 36px;
+        text-align: center;
+        border-radius: 4px;
+        color: #fff;
+        background: rgb(253, 85, 34);
+        cursor: pointer;
+      }
+    }
+  }
+  .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 {
+        width: 33.33%;
+        display: inline-block;
+      }
+    }
+  }
+}
+</style>

src/views/shops/details/products.vue

@@ -1,6 +1,34 @@
 <template>
-  <div>
-    店铺商品列表
+  <div class="products bg-F5">
+    <div class="banner">在线商城banner</div>
+    <div class="container">
+      <div class="menu">
+        <h3>商品分类</h3>
+        <ul>
+          <li v-for="x in 7" :key="x">
+            文件柜
+            <i class="el-icon-arrow-right"></i>
+          </li>
+        </ul>
+        <div class="sub" v-show="false">
+          子类选项
+        </div>
+      </div>
+      <div class="items">
+        <div class="item" v-for="x in 8" :key="x">
+          <div class="img">
+            <img src="@assets/shangpin.png" alt="" />
+          </div>
+          <span>多功能钢制文件柜</span>
+          <div class="pay">
+            <span>¥ 1800</span>
+            <router-link to="2">
+              立即购买
+            </router-link>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -8,3 +36,110 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class extends Vue {}
 </script>
+<style lang="scss" scoped>
+.products {
+  .banner {
+    width: 100%;
+    height: 240px;
+    line-height: 240px;
+    color: #fff;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+    background: rgb(220, 220, 220);
+  }
+  .container {
+    padding: 20px 0;
+    .menu {
+      width: 190px;
+      background: #fff;
+      display: inline-block;
+      vertical-align: top;
+      margin-right: 20px;
+      border-radius: 4px;
+
+      position: relative;
+      h3 {
+        background: #fd5522;
+        color: #fff;
+        height: 35px;
+        line-height: 35px;
+        padding-left: 20px;
+      }
+      ul li {
+        height: 56px;
+        line-height: 56px;
+        padding-left: 20px;
+        position: relative;
+        color: rgb(102, 102, 102);
+        border-bottom: 1px solid #e5e5e5;
+        i {
+          position: absolute;
+          top: 50%;
+          right: 20px;
+          transform: translateY(-50%);
+        }
+      }
+      .sub {
+        width: 600px;
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        right: -600px;
+        background: #fff;
+      }
+    }
+    .items {
+      overflow: hidden;
+      display: inline-block;
+      width: 940px;
+      .item {
+        width: 215px;
+        height: 327px;
+        background: #fff;
+        box-sizing: border-box;
+        float: left;
+        margin: 0 20px 20px 0;
+        padding: 20px;
+        .img {
+          width: 100%;
+          height: 200px;
+          border: 1px #e5e5e5 solid;
+          position: relative;
+          img {
+            width: 80%;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+        > span {
+          display: inline-block;
+          margin: 20px 0;
+          color: rgb(51, 51, 52);
+        }
+        .pay {
+          border: 1px solid #fd5522;
+          border-radius: 4px;
+          height: 30px;
+          line-height: 30px;
+          > span {
+            color: #fd5522;
+            display: inline-block;
+            width: 50%;
+            text-align: center;
+          }
+          > a {
+            color: #fff;
+            background: #fd5522;
+            width: 50%;
+            text-align: center;
+            display: inline-block;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/views/shops/index.vue

@@ -1,6 +1,29 @@
 <template>
-  <div>
-    生产厂家
+  <div class="shops bg-F5">
+    <div class="banner">banner</div>
+    <div class="container ">
+      <div class="shop" v-for="x in 5" :key="x">
+        <img class="logo fl" src="@assets/shopLogo.png" />
+        <div class="details fl">
+          <div class="name">洛阳钢具有限公司</div>
+          <div class="desc">主营:文件柜</div>
+          <div class="total">共计900件商品</div>
+          <router-link class="in" to="/shop/1">进入店铺</router-link>
+        </div>
+        <div class="img">
+          <img src="@assets/shangpin.png" alt="" />
+        </div>
+        <div class="img">
+          <img src="@assets/shangpin.png" alt="" />
+        </div>
+        <div class="img">
+          <img src="@assets/shangpin.png" alt="" />
+        </div>
+        <div class="img">
+          <img src="@assets/shangpin.png" alt="" />
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 <script lang="ts">
@@ -8,3 +31,68 @@ import { Component, Vue, Watch } from "vue-property-decorator";
 @Component
 export default class extends Vue {}
 </script>
+<style lang="scss" scoped>
+.shops {
+  .banner {
+    width: 100%;
+    height: 240px;
+    line-height: 240px;
+    color: #fff;
+    font-size: 2rem;
+    font-weight: bold;
+    text-align: center;
+    background: rgb(220, 220, 220);
+  }
+  .shop {
+    margin-top: 20px;
+    background: #fff;
+    overflow: hidden;
+    height: 170px;
+    box-sizing: border-box;
+    padding: 30px 20px;
+    .logo {
+      width: 145px;
+      margin-right: 40px;
+      position: relative;
+      top: 50%;
+      transform: translateY(-50%);
+    }
+    .details {
+      width: 330px;
+      height: 114px;
+      border-right: 1px solid #e5e5e5;
+      font-size: 14px;
+      .name {
+        color: rgb(51, 51, 51);
+        font-size: 16px;
+        margin-bottom: 5px;
+      }
+      .desc {
+        color: rgb(102, 102, 102);
+        margin-bottom: 15px;
+      }
+      .total {
+        color: #a5a5a5;
+        margin-bottom: 5px;
+      }
+      .in {
+        border: 1px solid #fd5522;
+        color: #fd5522;
+        display: inline-block;
+        padding: 5px 10px;
+        border-radius: 6px;
+      }
+    }
+    .img {
+      width: 114px;
+      height: 114px;
+      float: left;
+      border: 1px #e5e5e5 solid;
+      margin-left: 30px;
+      img {
+        width: 80%;
+      }
+    }
+  }
+}
+</style>