楼层广告位

components/home/floor/Floor.vue

@@ -1,14 +1,16 @@
 <template>
   <div class="floor">
-    <h3>F{{ floor.floorNumber }}&nbsp;{{ floor.name }}</h3>
+    <h3>{{ floor.floorNumber }}&nbsp;{{ floor.name }}</h3>
     <ul class="list-unstyled clearfix" :style="{borderColor: floor.items[1].backGroundColor || '#d8d8d8'}">
-      <li v-for="(item, index) in floor.items" :key="index" class="floor-item" :class="item.size"
+      <li v-for="(item, index) in floor.items" :key="index" class="floor-item" :class="item.size + (isDefault ? ' default-floor' : '')"
           :style="{backgroundColor: item.backGroundColor || '#fff', borderColor: item.borderColor || floor.items[1].backGroundColor || '#d8d8d8'}">
+        <img v-if="item.size != 'large' && isDefault" src="/images/floor/specificPrice-home.png" alt="">
         <a :href="item.hrefUrl" target="_blank">
           <img :src="item.pictureUrl" class="floor-item-img"/>
           <div class="floor-content">
             <p v-if="item.name" class="floor-item-name">{{ item.name }}</p>
             <p v-if="item.body" v-html="item.body" class="floor-item-body"></p>
+            <p class="floor-item-price">{{item.currency == 'RMB' ? '¥' : '$'}}&nbsp;{{item.price}}</p>
           </div>
         </a>
       </li>
@@ -18,9 +20,7 @@
 <script>
   export default {
     name: 'floor',
-    props: {
-      floor: Object
-    }
+    props: ['floor', 'isDefault']
   }
 </script>
 <style lang="scss" scoped>
@@ -56,6 +56,13 @@
       .floor-content {
         position: absolute;
         text-align: center;
+
+        .floor-item-price {
+          color: #ff4040;
+          font-size: 16px;
+          font-weight: bold;
+        }
+
       }
 
       &.medium,&.small {
@@ -67,22 +74,39 @@
         width: 360px;
         height: 400px;
 
-        img {
-          width: 226px;
-          height: 226px;
-          margin-top: 40px;
+        a {
+          img {
+            width: 226px;
+            height: 226px;
+            margin-top: 40px;
+          }
+        }
+
+        &.default-floor {
+          a {
+            img {
+              width: 360px;
+              height: 400px;
+              margin-top: 0;
+              &:hover {
+                transform: none;
+              }
+            }
+          }
         }
       }
       &.medium {
         width: 390px;
         height: 200px;
 
-        img {
-          position: absolute;
-          bottom: 50px;
-          right: 52px;
-          width: 100px;
-          height: 100px;
+        a {
+          img {
+            position: absolute;
+            bottom: 50px;
+            right: 52px;
+            width: 100px;
+            height: 100px;
+          }
         }
 
         .floor-content {
@@ -114,15 +138,33 @@
           line-height: 20px;
           text-align: left;
         }
+
+        &.default-floor {
+          .floor-content {
+            .floor-item-body {
+              color: #666;
+            }
+            .floor-item-price {
+              text-align: left;
+            }
+          }
+          > img {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+        }
       }
       &.small {
         width: 220px;
         height: 200px;
 
-        img {
-          margin-top: 15px;
-          width: 70px;
-          height: 70px;
+        a {
+          img {
+            margin-top: 15px;
+            width: 70px;
+            height: 70px;
+          }
         }
 
         .floor-content {
@@ -151,6 +193,21 @@
           font-size: 14px;
           line-height: 18px;
         }
+
+        &.default-floor {
+          > img {
+            position: absolute;
+            top: 0;
+            left: 0;
+          }
+          .floor-content {
+            top: 85px;
+            .floor-item-body {
+              color: #666;
+            }
+          }
+        }
+
       }
       &.tiny {
         display: none;

components/home/floor/FloorList.vue

@@ -2,7 +2,9 @@
   <div class="floor-list">
     <div class="container">
       <floor-bar :floors="floors"></floor-bar>
-      <floor v-for="(floor, index) in floors.data" :floor="floor" :key="index"></floor>
+      <floor :floor="defaultFloors[0]" :isDefault="true"></floor>
+      <floor :floor="defaultFloors[1]" :isDefault="true"></floor>
+      <floor v-for="(floor, index) in floors.data" :floor="floor" :isDefault="false" :key="index"></floor>
     </div>
   </div>
 </template>
@@ -15,11 +17,142 @@
       Floor,
       FloorBar
     },
-//    data () {
-//      return {
-//        floors: {}
-//      }
-//    },
+    data () {
+      return {
+        defaultFloors: [
+          {
+            items: [
+              {
+                backGroundColor: '',
+                body: '',
+                hrefUrl: '',
+                pictureUrl: '/images/floor/banner1.jpg',
+                size: 'large'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'medium',
+                price: 1.111111,
+                currency: 'RMB'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RRR015P03TL',
+                pictureUrl: '/images/floor/RRR015P03TL.png',
+                size: 'small',
+                price: 1.111111,
+                currency: 'RMB'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small',
+                price: 1.111111,
+                currency: 'RMB'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'medium',
+                price: 1.111111,
+                currency: 'RMB'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small',
+                price: 1.111111,
+                currency: 'RMB'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small',
+                price: 1.111111,
+                currency: 'RMB'
+              }
+            ]
+          },
+          {
+            items: [
+              {
+                backGroundColor: '',
+                body: '',
+                hrefUrl: 'https://www.usoftmall.com/product/kind/11',
+                pictureUrl: '/images/floor/banner2.jpg',
+                size: 'large'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'medium'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RRR015P03TL',
+                pictureUrl: '/images/floor/RRR015P03TL.png',
+                size: 'small'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'medium'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small'
+              },
+              {
+                backGroundColor: '',
+                body: 'Rohm<br>晶体管',
+                hrefUrl: 'https://www.usoftmall.com/store/33069557578d44e69bd91ad12d28a8d4/BT2018012500000141',
+                name: 'RHU002N06T106',
+                pictureUrl: '/images/floor/RHU002N06T106.png',
+                size: 'small'
+              }
+            ]
+          }
+        ]
+      }
+    },
 //    mounted () {
 //      this.$http.get('/api/floors/home')
 //        .then(response => {