'add'

README.md

@@ -1 +1 @@
-图片懒加载
+分类详情页面

src/assets/styles/iconfont.css

@@ -1,10 +1,10 @@
 
 @font-face {font-family: "iconfont";
-  src: url('iconfont.eot?t=1529046057344'); /* IE9*/
+  src: url('iconfont.eot?t=1533722683634'); /* IE9*/
-  src: url('iconfont.eot?t=1529046057344#iefix') format('embedded-opentype'), /* IE6-IE8 */
+  src: url('iconfont.eot?t=1533722683634#iefix') format('embedded-opentype'), /* IE6-IE8 */
-  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
+  url('data:application/x-font-woff;charset=utf-8;base64,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') format('woff'),
-  url('iconfont.ttf?t=1529046057344') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
+  url('iconfont.ttf?t=1533722683634') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
-  url('iconfont.svg?t=1529046057344#iconfont') format('svg'); /* iOS 4.1- */
+  url('iconfont.svg?t=1533722683634#iconfont') format('svg'); /* iOS 4.1- */
 }
 
 .iconfont {
@@ -19,3 +19,7 @@
 
 .icon-account:before { content: "\e6b8"; }
 
+.icon-shouye:before { content: "\e64f"; }
+
+.icon-xiangzuojiantou:before { content: "\e660"; }
+

src/assets/styles/iconfont.svg

@@ -33,6 +33,12 @@ t9.5 -10.5t21.5 -4h37h67h81h80h64h36q23 0 34 12t2 38q-5 13 -9.5 30.5t-9.5 34.5q-
     <glyph glyph-name="account" unicode="&#59064;" d="M793.6 579.008546C793.6 742.296018 661.792629 874.666667 499.2 874.666667 336.607371 874.666667 204.8 742.296018 204.8 579.008546 204.8 415.721077 336.607371 283.350428 499.2 283.350428 661.792629 283.350428 793.6 415.721077 793.6 579.008546ZM256 579.008546C256 713.898197 364.88435 823.247863 499.2 823.247863 633.51565 823.247863 742.4 713.898197 742.4 579.008546 742.4 444.118897 633.51565 334.769231 499.2 334.769231 364.88435 334.769231 256 444.118897 256 579.008546ZM0-102.290598 0-128 25.6-128 486.4-128 998.4-128 1024-128 1024-102.290598C1024 128.537329 787.090923 334.769231 512 334.769231 495.448045 334.769231 478.989086 334.099108 462.660538 332.767422 448.568439 331.618131 485.255599 319.213724 486.4 305.061404 501.350035 306.280663 496.831226 283.350428 512 283.350428 760.310844 283.350428 972.8 98.376331 972.8-102.290598L998.4-76.581197 486.4-76.581197 25.6-76.581197 51.2-102.290598C51.2 34.242573 137.013906 159.054662 275.263548 228.560915 287.906261 234.917154 293.024384 250.362647 286.695191 263.05939 280.366001 275.756134 264.986234 280.896128 252.34352 274.539889 97.581613 196.731947 0 54.804309 0-102.290598Z"  horiz-adv-x="1024" />
 
     
+    <glyph glyph-name="shouye" unicode="&#58959;" d="M969.6 393.6l-118.4 112-323.2 300.8c-9.6 9.6-22.4 9.6-32 0l-313.6-297.6c-3.2-3.2-6.4-6.4-9.6-9.6l-118.4-112c-9.6-9.6-9.6-22.4 0-32s22.4-9.6 32 0l83.2 80 0-393.6c0-48 41.6-89.6 92.8-89.6l83.2 0c38.4 0 70.4 28.8 70.4 67.2l0 217.6 99.2 0 99.2 0 0-217.6c0-35.2 32-67.2 70.4-67.2l83.2 0c51.2 0 92.8 38.4 92.8 89.6l0 396.8 80-73.6c9.6-9.6 22.4-9.6 32 0C979.2 371.2 979.2 384 969.6 393.6zM809.6 38.4c0-25.6-19.2-44.8-44.8-44.8l-83.2 0c-12.8 0-22.4 9.6-22.4 22.4L659.2 256c0 12.8-9.6 22.4-22.4 22.4l-121.6 0-121.6 0c-12.8 0-22.4-9.6-22.4-22.4l0-240c0-12.8-9.6-22.4-22.4-22.4l-83.2 0c-25.6 0-44.8 19.2-44.8 44.8l0 438.4 294.4 281.6 294.4-281.6L809.6 38.4z"  horiz-adv-x="1024" />
+
+    
+    <glyph glyph-name="xiangzuojiantou" unicode="&#58976;" d="M729.6-35.2l-416 425.6 416 416c9.6 9.6 9.6 25.6 0 35.2-9.6 9.6-25.6 9.6-35.2 0l-432-435.2c-9.6-9.6-9.6-25.6 0-35.2l432-441.6c9.6-9.6 25.6-9.6 35.2 0C739.2-60.8 739.2-44.8 729.6-35.2z"  horiz-adv-x="1024" />
+
+    
 
 
   </font>

src/assets/styles/variables.less

@@ -1 +1,10 @@
-@bgColor: red;
+// 主题色
+@themeColor: #de3d96;
+
+// 背景色
+@bgColor: #eee;
+
+// 字号大小
+@sizeXL: 18px;
+@sizeL: 16px;
+@sizeM: 14px;

src/components/myHeader.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="myHeader">
     <div class="left">
-      <img class="logo" src="@/assets/logo.png" />
+      <img class="logo" src="@/assets/images/logo.png" />
       <span class="title">Hxx-Luxury Store</span>
     </div>
     <div class="right">

src/router/index.js

@@ -1,6 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/view/home'
+import Classify from '@/view/classify'
 
 Vue.use(Router)
 
@@ -9,5 +10,10 @@ export default new Router({
     path: '/',
     name: 'Home',
     component: Home
+  },
+  {
+    path: '/classify',
+    name: 'Classify',
+    component: Classify
   }]
 })

src/view/classify.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="classify">
+    <!-- 顶部栏 -->
+    <div class="topNav">
+      <span class="iconfont">&#xe660;</span>
+      <div class="title">分类</div>
+      <span class="iconfont">&#xe64f;</span>
+    </div>
+    <!-- 主体 -->
+    <div class="main">
+      <!-- 主体左侧 -->
+      <div class="mainLeft"></div>
+      <!-- 主体右侧 -->
+      <div class="mainRight"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "classify",
+  components: {},
+  data() {
+    return {
+      msg: "Hello World!"
+    };
+  },
+  created() {},
+  mounted() {},
+  watch: {},
+  computed: {},
+  methods: {}
+};
+</script>
+
+<style lang="less" scoped>
+@import "../assets/styles/variables.less";
+.classify {
+  background: @bgColor;
+  // 顶部栏
+  .topNav {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.133333rem 0.24rem;
+    .title {
+      font-size: @sizeL;
+    }
+    .iconfont {
+      font-size: 20px;
+      font-weight: bold;
+    }
+  }
+  // 主体
+  .main {
+  }
+  // 主体左侧
+  .mainLeft {
+  }
+  // 主体右侧
+  .mainRight {
+  }
+}
+</style>

src/view/home.vue

@@ -6,12 +6,12 @@
     <div class="classification">
       <div class="class_top">
         <div class="item" v-for="(item,index) in classifiData.up" :key="index">
-          <img :src="item" alt="">
+          <img :src="item.img" @click="gotoClassify(item.id)">
         </div>
       </div>
       <div class="class_bottom">
         <div class="item" v-for="(item,index) in classifiData.down" :key="index">
-          <img :src="item" alt="">
+          <img :src="item.img" @click="gotoClassify(item.id)">
         </div>
       </div>
     </div>
@@ -61,6 +61,14 @@ export default {
         this.classifiData = res.data.classifiData;
         this.recommendData = res.data.recommendData;
       });
+    },
+    gotoClassify(id) {
+      this.$router.push({
+        path: "/classify",
+        query: {
+          id: id
+        }
+      });
     }
   }
 };

static/mock/index.json

@@ -9,21 +9,66 @@
     ],
     "classifiData": {
         "up": [
-            "https://a4.vimage1.com/upload/flow/2018/05/29/106/15275616596915.jpg",
+            {
-            "https://a2.vimage1.com/upload/flow/2018/05/22/138/15269786875124.jpg",
+                "id": 0,
-            "https://a4.vimage1.com/upload/flow/2018/05/29/100/15275815231657.jpg",
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/29/106/15275616596915.jpg"
-            "https://a4.vimage1.com/upload/flow/2018/05/22/190/15269788745661.jpg",
+            },
-            "https://a4.vimage1.com/upload/flow/2018/05/22/110/15269789816830.jpg"
+            {
+                "id": 1,
+                "img": "https://a2.vimage1.com/upload/flow/2018/05/22/138/15269786875124.jpg"
+            },
+            {
+                "id": 2,
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/29/100/15275815231657.jpg"
+            },
+            {
+                "id": 3,
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/22/190/15269788745661.jpg"
+            },
+            {
+                "id": 4,
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/22/110/15269789816830.jpg"
+            }
         ],
         "down": [
-            "https://a3.vimage1.com/upload/flow/2018/05/29/40/15275616172415.jpg",
+            {
-            "https://a2.vimage1.com/upload/flow/2018/05/29/139/15275815452999.jpg",
+                "id": 5,
-            "https://a3.vimage1.com/upload/flow/2018/05/22/163/15269793276446.jpg",
+                "img": "https://a3.vimage1.com/upload/flow/2018/05/29/40/15275616172415.jpg"
-            "https://a4.vimage1.com/upload/flow/2018/05/22/172/15269794028123.jpg",
+            },
-            "https://a4.vimage1.com/upload/flow/2018/05/22/21/15269794589634.jpg"
+            {
+                "id": 6,
+                "img": "https://a2.vimage1.com/upload/flow/2018/05/29/139/15275815452999.jpg"
+            },
+            {
+                "id": 7,
+                "img": "https://a3.vimage1.com/upload/flow/2018/05/22/163/15269793276446.jpg"
+            },
+            {
+                "id": 8,
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/22/172/15269794028123.jpg"
+            },
+            {
+                "id": 9,
+                "img": "https://a4.vimage1.com/upload/flow/2018/05/22/21/15269794589634.jpg"
+            }
         ]
     },
     "recommendData": [
+        {
+            "imgurl": "https://b.vimage1.com/upload/mst/2018/06/27/14/9b74b67ad8d6049035e8178f6c17ab70_604x290_80.jpg",
+            "title": "运动潮人录取线",
+            "endtime": 2
+        },
+        {
+            "imgurl": "https://b.vimage1.com/upload/mst/2018/06/26/189/f43d77bad367edf2cd9721601f90df1a_604x290_80.jpg",
+            "title": "国潮攻心计",
+            "endtime": 8
+        },
+        {
+            "imgurl": "https://a.vimage1.com/upcb/2018/06/05/132/ias_152816727785388_604x290_80.jpg",
+            "title": "欧美品牌女装与美",
+            "endtime": 10
+        },
         {
             "imgurl": "https://b.vimage1.com/upload/mst/2018/06/27/14/9b74b67ad8d6049035e8178f6c17ab70_604x290_80.jpg",
             "title": "运动潮人录取线",