'add'

src/assets/styles/variables.less

@@ -7,4 +7,5 @@
 // 字号大小
 @sizeXL: 18px;
 @sizeL: 16px;
-@sizeM: 14px;
+@sizeM: 14px;
+@sizeS: 12px;

src/view/classify.vue

@@ -2,16 +2,37 @@
   <div class="classify">
     <!-- 顶部栏 -->
     <div class="topNav">
-      <span class="iconfont">&#xe660;</span>
+      <span class="iconfont" @click="goBack()">&#xe660;</span>
       <div class="title">分类</div>
-      <span class="iconfont">&#xe64f;</span>
+      <span class="iconfont" @click="goHome()">&#xe64f;</span>
     </div>
     <!-- 主体 -->
-    <div class="main">
+    <div class="main" :style="{height:mainHeight}">
       <!-- 主体左侧 -->
-      <div class="mainLeft"></div>
+      <div class="mainLeft">
+        <div class="item">为你推荐</div>
+        <div class="item">男装</div>
+        <div class="item item_on">女装</div>
+        <div class="item">男鞋</div>
+        <div class="item">女鞋</div>
+        <div class="item">手势配饰</div>
+        <div class="item">个人护理</div>
+      </div>
       <!-- 主体右侧 -->
-      <div class="mainRight"></div>
+      <div class="mainRight">
+        <div class="container" v-for="(item,index) in [1]" :key="index">
+          <div class="display_img">
+            <img src="//a.vpimg2.com/upload/flow/2018/08/06/42/15335484131961.jpg" alt="">
+          </div>
+          <div class="title">人气美衣</div>
+          <div class="content">
+            <div class="content_item" v-for="(item,index) in [1,2,3,4,5,6,7]" :key="index">
+              <img src="//h2.appsimg.com/a.appsimg.com/upload/goadmin/2018/04/25/92/15246482342239_200x375_80.jpg!75.webp" alt="">
+              <div class="txt">连衣裙</div>
+            </div>
+          </div>
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -22,14 +43,27 @@ export default {
   components: {},
   data() {
     return {
-      msg: "Hello World!"
+      mainHeight: ""
     };
   },
-  created() {},
+  created() {
+    this.mainHeight = window.innerHeight - 45 + "px";
+  },
   mounted() {},
   watch: {},
   computed: {},
-  methods: {}
+  methods: {
+    // 回退
+    goBack() {
+      this.$router.go(-1);
+    },
+    // 回到首页
+    goHome() {
+      this.$router.push({
+        path:'/'
+      })
+    }
+  }
 };
 </script>
 
@@ -39,11 +73,15 @@ export default {
   background: @bgColor;
   // 顶部栏
   .topNav {
+    box-sizing: border-box;
+    height: 45px;
     display: flex;
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
-    padding: 0.133333rem 0.24rem;
+    padding: 0 0.24rem;
+    background: #fff;
+    border-bottom: 1px solid @bgColor;
     .title {
       font-size: @sizeL;
     }
@@ -54,12 +92,79 @@ export default {
   }
   // 主体
   .main {
-  }
-  // 主体左侧
-  .mainLeft {
-  }
-  // 主体右侧
-  .mainRight {
+    display: flex;
+    flex-direction: row;
+    overflow: hidden;
+    // 主体左侧
+    .mainLeft {
+      width: 2.48rem;
+      height: 100%;
+      font-size: @sizeM;
+      .item {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: 1.28rem;
+        line-height: 1.28rem;
+        text-align: center;
+      }
+      .item_on::before {
+        content: "";
+        position: absolute;
+        left: 0;
+        top: 0;
+        width: 0.10667rem;
+        height: 1.28rem;
+        font-size: 0;
+        background-color: #de3d96;
+      }
+      .item_on {
+        background: #fff;
+      }
+    }
+    // 主体右侧
+    .mainRight {
+      width: 7.52rem;
+      height: 100%;
+      background: #fff;
+      .container {
+        padding: 0 .373333rem;
+        .display_img {
+          img {
+            display: block;
+            width: 100%;
+            height: 2.72rem;
+            margin-top: .373333rem;
+          }
+        }
+        .title {
+          box-sizing: border-box;
+          font-size: @sizeS;
+          font-weight: bold;
+          padding: 0.533333rem 0 0.533333rem 0;
+        }
+        .content {
+          display: flex;
+          flex-flow: row wrap;
+          justify-content: space-between;
+          border-bottom: 1px solid @bgColor;
+
+          .content_item {
+           padding: 0 .066667rem;
+            img {
+              display: block;
+              width: 1.653333rem;
+              height: 1.653333rem;
+            }
+            .txt {
+              text-align: center;
+              font-size: @sizeS;
+              padding: 0.293333rem 0 0.666667rem 0;
+            }
+          }
+        }
+      }
+    }
   }
 }
 </style>