room

src/native/tubiao/tab3.svg

@@ -0,0 +1,19 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>书桌@2x</title>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="首页补充切图" transform="translate(-138.000000, -827.000000)">
+            <g id="书桌" transform="translate(138.000000, 827.000000)">
+                <rect id="矩形备份-4" x="0" y="0" width="16" height="16"></rect>
+                <g id="编组-20" transform="translate(1.000000, 3.000000)" stroke="#666666" stroke-width="0.7">
+                    <path d="M4,0.35 C4.45563492,0.35 4.86813492,0.534682541 5.16672619,0.833273811 C5.46531746,1.13186508 5.65,1.54436508 5.65,2 L5.65,2 L5.65,10 L1,10.65 L0.35,2 C0.35,1.54436508 0.534682541,1.13186508 0.833273811,0.833273811 C1.13186508,0.534682541 1.54436508,0.35 2,0.35 L2,0.35 L4,0.35 Z" id="矩形" fill="#FFFFFF"></path>
+                    <rect id="矩形备份-12" x="12.65" y="3.35" width="1" height="7.3" rx="0.5"></rect>
+                    <path d="M12,0.35 L12.65,5.65 L0.35,5.65 L0.35,1 L12,0.35 Z" id="矩形备份-11" fill="#FFFFFF"></path>
+                    <line x1="8.5" y1="2.5" x2="10.5" y2="2.5" id="直线-7" stroke-linecap="round" stroke-linejoin="bevel"></line>
+                    <line x1="2.5" y1="2.5" x2="3.5" y2="2.5" id="直线-7备份" stroke-linecap="round" stroke-linejoin="bevel"></line>
+                    <path d="M5.65,0.35 L5.65,10 L1,10.65 L0.35,1 L5.65,0.35 Z" id="矩形备份-13"></path>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/pages/banner.vue

@@ -43,6 +43,7 @@
                 <img src="../native/ic-5.png" alt="" />
                 <span>门店详情</span>
             </div>
+
             <div class="room" v-for="(item, index) in list" :key="index">
                 <div class="room-img-content">
                     <img :src="item.pic" alt="" class="room-img" />
@@ -53,8 +54,33 @@
                 </div>
                 <div class="room-info">
                     <div class="text1">{{ item.storeName }}</div>
+                    <div class="tabs">
+                        <div class="tab-item" :key="1">
+                            <img src="../native/room1.png" alt="" />
+                            <span>床</span>
+                        </div>
+                        <div class="tab-item" :key="2">
+                            <img src="../native/room2.png" alt="" />
+                            <span>衣柜</span>
+                        </div>
+                        <div class="tab-item" :key="3">
+                            <img src="../native/room3.png" alt="" />
+                            <span>书桌</span>
+                        </div>
+                        <div class="tab-item" :key="4">
+                            <img src="../native/room4.png" alt="" />
+                            <span>空调</span>
+                        </div>
+                    </div>
+                    <div class="status">
+                        <div class="statu">市中心商圈</div>
+                        <div class="statu">高层电梯房</div>
+                        <div class="statu">5分钟商圈</div>
+                        <div class="statu">拎包入住</div>
+                    </div>
                     <div class="text2">
                         <div class="text">
+                            <img src="../native/room1.png" alt="" />
                             <img src="../native/local.png" alt="" />
                             <div>
                                 {{ item.address }}
@@ -231,21 +257,21 @@ export default {
     }
     .room {
         overflow: hidden;
-        margin-top: 16px;
+        margin-top: 12px;
     }
     .room-info {
         background-color: #ffffff;
-        padding: 12px;
+        padding: 10px;
         .text1 {
-            font-size: 17px;
+            font-size: 14px;
             font-weight: bold;
-            color: #000000;
-            line-height: 24px;
+            color: #333333;
+            line-height: 20px;
         }
         .text2 {
             display: flex;
             align-items: flex-end;
-            margin-top: 5px;
+            margin-top: 14px;
             .text {
                 flex-grow: 1;
                 font-size: 13px;
@@ -276,6 +302,50 @@ export default {
                 }
             }
         }
+
+        .status {
+            .flex();
+            margin-top: 10px;
+            .statu {
+                font-size: 10px;
+                color: #666666;
+                line-height: 14px;
+                padding: 6px 14px;
+                background: #f3f3f5;
+                border-radius: 13px;
+            }
+            .statu + .statu {
+                margin-left: 5px;
+            }
+        }
+    }
+}
+
+.tabs {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    .tab-item {
+        display: flex;
+        align-items: center;
+        img {
+            width: 16px;
+            height: 16px;
+            display: block;
+        }
+        image {
+            width: 16px;
+            height: 16px;
+        }
+        span {
+            font-size: 11px;
+            color: #666666;
+            line-height: 16px;
+            margin-left: 7px;
+        }
+    }
+    .tab-item + .tab-item {
+        margin-left: 18px;
     }
 }
 </style>