首页悬浮

components/home/displayCard.vue

@@ -0,0 +1,205 @@
+<template>
+  <div class="display-card">
+    <a><img src=""></a>
+     <div class="content">
+       <div>
+         <h4>供应商</h4>
+         <p>111</p>
+       </div>
+       <div>
+         <h4>交易金额</h4>
+         <p>111</p>
+       </div>
+       <div>
+         <h4>询价单</h4>
+         <p>111</p>
+       </div>
+       <a class="enter">立即入驻</a>
+     </div>
+  </div>
+</template>
+<!--<script>
+  export default {
+    name: 'kind-category',
+    data () {
+      return {
+        activeKindId: 0
+        //      kinds: {}
+      }
+    },
+    methods: {
+      showChildrenLayout (kind) {
+        if (!kind.leaf) {
+          this.activeKindId = kind.id
+          if (!kind.children) {
+            this.$emit('loadchild', kind.id)
+          }
+        }
+      },
+      hideChildrenLayout () {
+        this.activeKindId = null
+      }
+    },
+    computed: {
+      kinds () {
+        return this.$store.state.product.kind.kinds
+      },
+      kindsToShow () {
+        // 只显示前13个根类目
+        if (this.kinds.data) {
+          return this.kinds.data.slice(0, 13)
+        }
+      }
+    }
+  }
+</script>-->
+<style lang="scss" scoped>
+  /*@import '~assets/scss/variables';
+  .kind-children .kind-children-layout{
+    padding: 15px 0 0 0;
+  }
+  .kind-category {
+    position: absolute;
+    width: 200px;
+    height: 477px;
+
+    .kind-main {
+      margin: 0;
+      padding: 0;
+      z-index: 10;
+
+      .kind-main-item {
+        height: 34.1px;
+        line-height: 34.1px;
+        padding: 0 10px 0 20px;
+        background: rgba(80, 120, 203, 0.9);
+        display: block;
+
+        > a {
+          color: #fff;
+
+          > .iconfont {
+            opacity: 0;
+          }
+        }
+
+        &.item-more {
+          background-color: #4c66bb;
+          font-weight: bold;
+          font-size: 12px;
+        }
+
+        &.active,&:hover {
+          background-color: #a0b2eb;
+
+          > a {
+            font-weight: bold;
+
+            > .iconfont {
+              opacity: 1;
+            }
+          }
+        }
+      }
+    }
+
+    .kind-children {
+      position: absolute;
+      top: 0;
+      left: 200px;
+      z-index: 9;
+      box-shadow: 1px 0 3px #666;
+
+      .kind-children-layout {
+        background-color: #fff;
+        width: 990px;
+        height: 477px;
+        font-size: 12px;
+        overflow-y: auto;
+        a {
+          color: #000;
+        }
+        a:hover {
+          color: #ff0006;
+        }
+        .kind-children-item-wrap {
+          height: 100%;
+          width: 100%;
+
+          .kind-children-item {
+            margin-bottom: $md-pad;
+
+            dt {
+              span {
+                width: 90%;
+                display: inline-block;
+                font-weight: bold;
+                overflow: hidden;
+                clear: left;
+                text-align: right;
+                text-overflow: ellipsis;
+                white-space: nowrap;
+              }
+              i{
+                font-size: 12px;
+              }
+            }
+
+            dd {
+              ul {
+                margin: 0;
+                padding: 0;
+
+                li {
+                  border-left: $border;
+                  margin-bottom: $pad;
+
+                  span {
+                    margin: 0 $sm-pad;
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+  }*/
+  .display-card{
+    position: absolute;
+    width: 144px;
+    height: 517px;
+    border: 1px solid black;
+    a{
+
+    }
+    .content{
+      width: 130px;
+      height: 499px;
+      border-radius: 63px;
+      background: blue;
+      div{
+        height: 110px;
+        h4{
+          width: 100%;
+          text-align: center;
+          font-size: 18px;
+          color: #fff000;
+          font-family: MicrosoftYaHei-Bold;
+        }
+        p{
+          width: 100%;
+          text-align: center;
+          font-size: 26px;
+          color: #fff;
+        }
+      }
+      .enter{
+        display: inline-block;
+        font-family: FZSKJW--GB1-0;
+        font-size: 25px;
+        color: #ffffff;
+      }
+    }
+  }
+</style>

components/home/index.js

@@ -1,8 +1,9 @@
 import KindCategory from './KindCategory.vue'
+import displayCard from './displayCard.vue'
 import Carousel from './Carousel.vue'
 import Advert from './Advert.vue'
 import FloorList from './floor/FloorList.vue'
 import Partner from './Partner.vue'
 import News from './News.vue'
 
-export { KindCategory, Carousel, Advert, FloorList, Partner, News }
+export { KindCategory, displayCard, Carousel, Advert, FloorList, Partner, News }

components/mobile/store/StoreDetail.vue

@@ -41,7 +41,7 @@
         </li>
         <li>
           <div>店铺地址：</div>
-          <div v-if="store.enterprise.enAddress">{{store.enterprise.enAddress}}</div>
+          <div v-if="store.enterprise.enAddress">{{store.enterprise.address}}</div>
           <div v-else><span>-</span></div>
         </li>
       </ul>

pages/index.vue

@@ -8,6 +8,7 @@
      <!-- <new-year></new-year>-->
       <carousel>
         <kind-category @loadchild="loadProductKinds"></kind-category>
+        <display-card></display-card>
       </carousel>
       <advert></advert>
       <floor-list></floor-list>
@@ -18,7 +19,7 @@
   </div>
 </template>
 <script>
-  import { KindCategory, Carousel, Advert, FloorList, Partner, News } from '~components/home'
+  import { KindCategory, displayCard, Carousel, Advert, FloorList, Partner, News } from '~components/home'
 //  import { Christmas, NewYear } from '~components/default'
   import { Home } from '~components/mobile'
 
@@ -61,6 +62,7 @@
     },
     components: {
       KindCategory,
+      displayCard,
       Carousel,
       Advert,
       FloorList,