调整组件渲染形式

2code/web/h5_pro/package-lock.json

@@ -758,6 +758,13 @@
       "integrity": "sha1-iYUI2iIm84DfkEcoRWhJwVAaSw0=",
       "dev": true
     },
+    "asap": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "dev": true,
+      "optional": true
+    },
     "asn1": {
       "version": "0.2.4",
       "resolved": "https://registry.npmjs.org/asn1/-/asn1-0.2.4.tgz",
@@ -6511,6 +6518,13 @@
       "integrity": "sha512-Pgs951kaMm5GXP7MOvxERINe3gsaVjUWFm+UZPSq9xYriQAksyhg0csnS0KXSNRD5NmNdapXEpjxG49+AKh/ug==",
       "dev": true
     },
+    "image-size": {
+      "version": "0.5.5",
+      "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.5.5.tgz",
+      "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
+      "dev": true,
+      "optional": true
+    },
     "import-cwd": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/import-cwd/-/import-cwd-2.1.0.tgz",
@@ -7773,6 +7787,56 @@
       "integrity": "sha512-XI5MPzVNApjAyhQzphX8BkmKsKUxD4LdyK24iZeQGinBN9yTQT3bFlCBy/aVx2HrNcqQGsdot8ghrjyrvMCoEA==",
       "dev": true
     },
+    "less": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/less/-/less-3.8.1.tgz",
+      "integrity": "sha512-8HFGuWmL3FhQR0aH89escFNBQH/nEiYPP2ltDFdQw2chE28Yx2E3lhAIq9Y2saYwLSwa699s4dBVEfCY8Drf7Q==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.2",
+        "errno": "^0.1.1",
+        "graceful-fs": "^4.1.2",
+        "image-size": "~0.5.0",
+        "mime": "^1.4.1",
+        "mkdirp": "^0.5.0",
+        "promise": "^7.1.1",
+        "request": "^2.83.0",
+        "source-map": "~0.6.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        }
+      }
+    },
+    "less-loader": {
+      "version": "4.1.0",
+      "resolved": "https://registry.npmjs.org/less-loader/-/less-loader-4.1.0.tgz",
+      "integrity": "sha512-KNTsgCE9tMOM70+ddxp9yyt9iHqgmSs0yTZc5XH5Wo+g80RWRIYNqE58QJKm/yMud5wZEvz50ugRDuzVIkyahg==",
+      "dev": true,
+      "requires": {
+        "clone": "^2.1.1",
+        "loader-utils": "^1.1.0",
+        "pify": "^3.0.0"
+      },
+      "dependencies": {
+        "clone": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/clone/-/clone-2.1.2.tgz",
+          "integrity": "sha1-G39Ln1kfHo+DZwQBYANFoCiHQ18=",
+          "dev": true
+        },
+        "pify": {
+          "version": "3.0.0",
+          "resolved": "https://registry.npmjs.org/pify/-/pify-3.0.0.tgz",
+          "integrity": "sha1-5aSs0sEB/fPZpNB/DbxNtJ3SgXY=",
+          "dev": true
+        }
+      }
+    },
     "leven": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-2.1.0.tgz",
@@ -11677,6 +11741,16 @@
       "integrity": "sha512-OE+a6vzqazc+K6LxJrX5UPyKFvGnL5CYmq2jFGNIBWHpc4QyE49/YOumcrpQFJpfejmvRtbJzgO1zPmMCqlbBg==",
       "dev": true
     },
+    "promise": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
+      "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "dev": true,
+      "optional": true,
+      "requires": {
+        "asap": "~2.0.3"
+      }
+    },
     "promise-inflight": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/promise-inflight/-/promise-inflight-1.0.1.tgz",

2code/web/h5_pro/package.json

@@ -52,6 +52,8 @@
     "html-webpack-plugin": "^2.30.1",
     "jest": "^22.0.4",
     "jest-serializer-vue": "^0.3.0",
+    "less": "^3.8.1",
+    "less-loader": "^4.1.0",
     "nightwatch": "^0.9.12",
     "node-notifier": "^5.1.2",
     "node-sass": "^4.10.0",

2code/web/h5_pro/src/App.vue

@@ -12,6 +12,7 @@ export default {
 </script>
 
 <style lang="less">
+@r:100rem;
   *{
     padding: 0;
     margin: 0;
@@ -19,5 +20,8 @@ export default {
   body,html {
     font-family:'微软雅黑';
   };
+  .page-wrapper{
+    padding-top: 90/@r;
+  }
 </style>
 

2code/web/h5_pro/src/components/CHeader/index.vue

@@ -23,7 +23,12 @@ export default {
         line-height:90/@r;
         text-align: center;
         border-bottom: solid 1px #dedede;
-        position: relative;
+        position: fixed;
+        width: 100%;
+        left: 0;
+        top: 0;
+        z-index: 10000;
+        background: #fff;
         .back{
             cursor: pointer;
             position: absolute;

2code/web/h5_pro/src/router/index.js

@@ -2,8 +2,9 @@ import Vue from 'vue'
 import Router from 'vue-router'
 
 import Home from '@/views/home/index.vue'
-
 import ShopList from '@/views/shopList/index.vue'
+import WorkerList from '@/views/workerList/index.vue'
+import ShopDetails from '@/views/shopDetails/index.vue'
 
 Vue.use(Router)
 
@@ -18,6 +19,16 @@ export default new Router({
       path: '/shopList',
       name: 'shopList',
       component: ShopList
+    },
+    {
+      path: '/workerList',
+      name: 'workerList',
+      component: WorkerList
+    },
+    {
+      path: '/shopDetails',
+      name: 'shopDetails',
+      component: ShopDetails
     }
   ]
 })

2code/web/h5_pro/src/views/1tpl/tpl.vue

+<template>
+    <div class="page-wrapper">
+        <c-header title="商家详情"></c-header>
+        <div>商家详情</div>
+    </div>
+</template>
+<script>
+import CHeader from '@/components/CHeader'
+export default {
+    components:{CHeader}
+}
+</script>

2code/web/h5_pro/src/views/home/components/HShopList.vue

 <template>
     <div class="shop-list-wrapper">
-        <div class="list-item" v-for="(item,index) in data" :key="index" :data-id="item.id" @click="toShopDetails">
-            <div class="img" :data-id="item.id">
-                <img :src="item.url" :data-id="item.id" alt="">
+        <div class="list-item">
+            <div class="img">
+                <img :src="data.url" alt="">
             </div>
-            <div class="item-infro" :data-id="item.id">
-                <div class="name" :data-id="item.id">{{item.title}}</div>
-                <div class="details" :data-id="item.id">{{item.infro}}</div>
+            <div class="item-infro">
+                <div class="name" >{{data.title}}</div>
+                <div class="details">{{data.infro}}</div>
             </div>
         </div>
     </div>
@@ -17,10 +17,7 @@
 export default {
     props:['data'],
     methods:{
-        toShopDetails(e){
-            const id = e.target.dataset.id;
-            alert(id)
-        }
+        
     }
 }
 </script>

2code/web/h5_pro/src/views/home/components/HStaff.vue

 <template>
-    <div class="staff-wrapper">
-        <div class="staff-item" v-for="(item,index) in data" :key="index" :data-id="item.id" @click="toDetails">
-            <img :src="item.src" :data-id="item.id" alt="">
-            <div class="infro" :data-id="item.id">{{item.bref}}</div>
-        </div>
+    <div class="staff-item">
+        <img :src="data.src" alt="">
+        <div class="infro">{{data.bref}}</div>
     </div>
 </template>
 
@@ -11,20 +9,13 @@
 export default {
     props:['data'],
     methods:{
-        toDetails(e){
-            const id = e.target.dataset.id
-            alert(id)
-        }
+        
     }
 }
 </script>
 
 <style lang="less" scoped>
 @r:100rem;
-.staff-wrapper{
-    display: flex;
-    flex-wrap: wrap;
-    padding: 0 30/@r;
     .staff-item{
         width: 220/@r;
         height: 280/@r;
@@ -50,7 +41,6 @@ export default {
             background: rgba(0, 0, 0, .5);
         }
     }
-}
 </style>
 
 

2code/web/h5_pro/src/views/home/index.vue

 <template>
-  <div>
+  <div class="page-wrapper">
       <c-header title="首页" noBack="1"></c-header>
       <h-banner :data="bannerData"></h-banner>
       <h-item-title title="精选商家" href="/shopList"></h-item-title>
-      <h-shop-list :data="shopListData"></h-shop-list>
-      <h-item-title title="闪亮之星" href="闪亮之星的地址"></h-item-title>
-      <h-staff :data="staffData"></h-staff>
+      <h-shop-list  v-for="(item,index) in shopListData" :key="index" @click.native="toShopDetails(item.id)" :data="item"></h-shop-list>
+      <h-item-title title="闪亮之星" href="/workerList"></h-item-title>
+
+      <div class="staff-wrapper">
+          <h-staff v-for="(item,index) in staffData" :key="index" @click.native="toDetails(item.id)" :data="item"></h-staff>
+      </div>
 
   </div>
 </template>
 
 <script>
-
-import CHeader from '@/components/CHeader'
-import HBanner from './components/HBanner'
-import HShopList from './components/HShopList'
-import HItemTitle from './components/HItemTitle'
-import HStaff from './components/HStaff'
+import CHeader from "@/components/CHeader";
+import HBanner from "./components/HBanner";
+import HShopList from "./components/HShopList";
+import HItemTitle from "./components/HItemTitle";
+import HStaff from "./components/HStaff";
 
 export default {
-  components:{CHeader,HBanner,HShopList,HItemTitle,HStaff},
-  data () {
+  components: { CHeader, HBanner, HShopList, HItemTitle, HStaff },
+  data() {
     return {
-      bannerData:[
+      bannerData: [
         {
-          url:'1',
-          href:'111'
+          url: "1",
+          href: "111"
         },
         {
-          url:'2',
-          href:'222'
+          url: "2",
+          href: "222"
         }
       ],
 
-
-      shopListData:[
+      shopListData: [
         {
-          id:'1',
-          url:'12',
-          title:'123',
-          infro:'312321'
+          id: "1",
+          url: "12",
+          title: "123",
+          infro: "312321"
         },
         {
-          id:'2',
-          url:'12',
-          title:'123',
-          infro:'312321'
+          id: "2",
+          url: "12",
+          title: "123",
+          infro: "312321"
         }
       ],
 
-
-      staffData:[
+      staffData: [
         {
-          id:'1',
-          url:'1',
-          bref:'1'
+          id: "1",
+          url: "1",
+          bref: "1"
         },
         {
-          id:'2',
-          url:'2',
-          bref:'2'
+          id: "2",
+          url: "2",
+          bref: "2"
         },
         {
-          id:'1',
-          url:'1',
-          bref:'1'
+          id: "1",
+          url: "1",
+          bref: "1"
         },
         {
-          id:'2',
-          url:'2',
-          bref:'2'
+          id: "2",
+          url: "2",
+          bref: "2"
         },
         {
-          id:'1',
-          url:'1',
-          bref:'1'
+          id: "1",
+          url: "1",
+          bref: "1"
         },
         {
-          id:'2',
-          url:'2',
-          bref:'2'
+          id: "2",
+          url: "2",
+          bref: "2"
         },
         {
-          id:'1',
-          url:'1',
-          bref:'1'
+          id: "1",
+          url: "1",
+          bref: "1"
         },
         {
-          id:'2',
-          url:'2',
-          bref:'2'
+          id: "2",
+          url: "2",
+          bref: "2"
         },
         {
-          id:'1',
-          url:'1',
-          bref:'1'
+          id: "1",
+          url: "1",
+          bref: "1"
         }
       ]
+    };
+  },
+  methods: {
+    toShopDetails(id) {
+      this.$router.push({ name: 'shopDetails', params: { id: id }})
+    },
+    toDetails(id) {
+      alert(id);
     }
   }
-}
+};
 </script>
 
+<style lang="less" scoped>
+@r:100rem;
+.staff-wrapper{
+    display: flex;
+    flex-wrap: wrap;
+    padding: 0 30/@r;
+}
+</style>
+
+
 
 

2code/web/h5_pro/src/views/shopDetails/index.vue

+<template>
+    <div class="page-wrapper">
+        <c-header title="商家详情"></c-header>
+        <div class="shop-main-infro">
+            <div class="shop-name">商家名称{{id}}</div>
+            <div class="address">西安市雁塔区110号，欢迎您的光临</div>
+        </div>
+    </div>
+</template>
+<script>
+import CHeader from '@/components/CHeader'
+export default {
+    components:{CHeader},
+    data(){
+        return {
+            id:''
+        }
+    },
+    beforeMount(){
+        const id = this.$route.params.id
+        this.id = id;
+    }
+}
+</script>
+
+<style lang="less" scoped>
+@r:100rem;
+.shop-main-infro{
+    .shop-name{
+        font-size: 32/@r;
+        color: #333;
+    }   
+    .address{
+        font-size: 28/@r;
+        color: #333;
+    }
+}
+</style>
+

2code/web/h5_pro/src/views/shopList/components/SItem.vue

@@ -22,6 +22,8 @@ export default {
 @r: 100rem;
 .item {
   display: flex;
+  box-sizing: border-box;
+  padding: 30/@r;
   .img {
     width: 160 / @r;
     height: 160 / @r;
@@ -33,6 +35,7 @@ export default {
     }
   }
   .item-infro {
+    margin-left: 28/@r;
     .title {
       font-size: 32 / @r;
       color: #333;

2code/web/h5_pro/src/views/shopList/index.vue

 <template>
-    <div>
+    <div class="page-wrapper">
         <c-header title="商家列表"></c-header>
         <s-item v-for="(item,index) in shopListData" :key="index" :data="item" @click.native="toDetails(item.id)"></s-item>
     </div>
@@ -38,9 +38,12 @@ export default {
             ]
         }
     },
+    beforeMount(){
+        
+    },
     methods:{
         toDetails(id){
-            alert(id)
+            this.$router.push({ name: 'shopDetails', params: { id: id }})
         }
     }
 }

2code/web/h5_pro/src/views/workerList/components/WStaff.vue

+<template>
+    <div class="staff-item">
+        <img :src="data.src" alt="">
+        <div class="infro">{{data.bref}}</div>
+    </div>
+</template>
+
+<script>
+export default {
+    props:['data']
+}
+</script>
+
+<style lang="less" scoped>
+@r:100rem;
+.staff-item{
+    width: 220/@r;
+    height: 280/@r;
+    position: relative;
+    margin-bottom: 15/@r;
+    margin-left: 15/@r;
+    &:nth-child(3n+1){
+        margin-left: 0;
+    }
+    img{
+        display: block;
+        background: #dedede;
+        width: 100%;
+        height: 100%;
+    }
+    .infro{
+        position: absolute;
+        width: 100%;
+        height: 80/@r;
+        left: 0;
+        bottom: 0;
+        font-size: 28/@r;
+        background: rgba(0, 0, 0, .5);
+    }
+}
+</style>
+
+

2code/web/h5_pro/src/views/workerList/index.vue

+<template>
+    <div class="page-wrapper">
+        <c-header title="人员列表"></c-header>
+        <div class="staff-wrapper">
+            <w-staff v-for="(item,index) in staffData" :key="index" :data="item" @click.native="toWorkerDetails(item.id)"></w-staff>
+        </div>
+    </div>
+</template>
+<script>
+import CHeader from "@/components/CHeader";
+import WStaff from "./components/WStaff";
+export default {
+  components: { CHeader, WStaff },
+  data() {
+    return {
+      staffData: [
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        },
+        {
+          id: "2",
+          url: "2",
+          bref: "2"
+        },
+        {
+          id: "1",
+          url: "1",
+          bref: "1"
+        }
+      ]
+    };
+  },
+  methods:{
+      toWorkerDetails(id){
+          alert(id)
+      }
+  }
+};
+</script>
+
+
+<style lang="less" scoped>
+@r: 100rem;
+.staff-wrapper {
+  display: flex;
+  flex-wrap: wrap;
+  padding: 0 30 / @r;
+  padding-top: 20/@r;
+}
+</style>
+