home

www/protected/modules/o2o/views/web/index.php

@@ -20,7 +20,7 @@
   </style>
 
   <!--vue-->
-  <link rel="stylesheet" id="app_css" href="http://<?php echo $host ?>/vue/dist/static/css/app.css?v=03182017061601">
+  <link rel="stylesheet" id="app_css" href="http://<?php echo $host ?>/vue/dist/static/css/app.css?v=03182017061602">
   <!--vue_end-->
   <script type="text/javascript" src="https://code.jquery.com/jquery-2.2.0.min.js"></script>
   <script type="text/javascript" src="https://dn-bughd-web.qbox.me/bughd.min.js" crossOrigin="anonymous"></script>
@@ -34,11 +34,11 @@
 <!--vue-->
 <div id=app></div>
 <script type=text/javascript id="manifest"
-        src="http://<?php echo $host ?>/vue/dist/static/js/manifest.js?v=03182017061601"></script>
+        src="http://<?php echo $host ?>/vue/dist/static/js/manifest.js?v=03182017061602"></script>
 <script type=text/javascript id="vendor"
-        src="http://<?php echo $host ?>/vue/dist/static/js/vendor.js?v=03182017061601"></script>
+        src="http://<?php echo $host ?>/vue/dist/static/js/vendor.js?v=03182017061602"></script>
 <script type=text/javascript id="appJs"
-        src="http://<?php echo $host ?>/vue/dist/static/js/app.js?v=03182017061601"></script>
+        src="http://<?php echo $host ?>/vue/dist/static/js/app.js?v=03182017061602"></script>
 
 <!--vue-end-->
 <script type="text/javascript" id="wxMain" data-sign="<?php echo @htmlentities(json_encode($signPackage)); ?>"></script>

www/vue/src/App.vue

@@ -32,6 +32,6 @@
     left: 0;
     right: 0;
     bottom: 46px;
-    background-color: #b0aa99;
+    background-color: #d3d3d3;
   }
 </style>

www/vue/src/components/home.vue

@@ -3,14 +3,15 @@
       <swiper></swiper>
       <div class='home-img-1'>
         <img :src='homeImg1' alt="">
-        <div class="home-nav">
+        <!-- <div class="home-nav">
           <div class="">品牌</div>
           <div class="">管家</div>
           <div class="">证件</div>
           <div class="">工具</div>
           <div class="">赔退</div>
-        </div>
+        </div> -->
       </div>
+      <homeList></homeList>
   </div>
 </template>
 

www/vue/src/components/homeList.vue

@@ -0,0 +1,95 @@
+<template>
+  <div class="home-list">
+    <ul>
+      <li v-for="items in productIcon">
+        <div class="product-icon" :style="{backgroundColor:items.color}">
+          <img :src='items.url'>
+        </div>
+        <div class="product-name">
+          {{items.name}}
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'home',
+  data () {
+    return {
+      productIcon: [
+        {
+          name: '母婴房除螨杀菌',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-mother-child.png',
+          color: '#a6dc48'
+        },
+        {
+          name: '日常清洁',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-daily.png',
+          color: '#76a6f6'
+        },
+        {
+          name: '深度清洁',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-depth.png',
+          color: '#5ecdec'
+        },
+        {
+          name: '专业除螨',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-mites.png',
+          color: '#b17ff6'
+        },
+        {
+          name: '家电清洗',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-appliances.png',
+          color: '#fabf4c'
+        },
+        {
+          name: '新居开慌',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-new-home.png',
+          color: '#5adde9'
+        },
+        {
+          name: '擦玻璃',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-glass.png',
+          color: '#70df68'
+        },
+        {
+          name: '租房大扫除',
+          url: 'http://oduj3utzz.bkt.clouddn.com/home-renting.png',
+          color: '#fcac71'
+        }
+      ]
+    }
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+  .home-list{
+    margin-top: 5%;
+    background-color: #FFF;
+  }
+  .home-list ul{
+    display: flex;
+    flex-wrap:wrap;
+    padding: 5%;
+  }
+  .home-list ul li{
+    width: 21%;
+    margin: 5px;
+    font-size: 13px;
+    list-style: none;
+  }
+  .product-icon{
+    width: 100%;
+    border-radius: 15px;
+    padding: 15px 0;
+  }
+  .product-icon img{
+    display: block;
+    width: 50%;
+    margin: 0 auto;
+  }
+</style>

www/vue/src/components/mine.vue

@@ -6,16 +6,6 @@
 				{{item.name}}
 			</li>
 		</ul>
-		<ul>
-			<li v-for="item in products" >
-				{{item.name}}
-			</li>
-		</ul>
-		<ul>
-			<li v-for="item in products" >
-				{{item.name}}
-			</li>
-		</ul>
 	</div>
 </template>
 <script type="text/javascript">

www/vue/src/main.js

@@ -20,6 +20,7 @@ const router = new VueRouter({
 })
 // 注册全局组件
 Vue.component('home', require('./components/home.vue'))
+Vue.component('homeList', require('./components/homeList.vue'))
 Vue.component('product', require('./components/product.vue'))
 Vue.component('mine', require('./components/mine.vue'))
 Vue.component('navigation', require('./components/navigation'))