feat:视觉走查优化

src/pages/house/index.vue

@@ -7,15 +7,15 @@
                 <span class="text-[#707070] font-bold ">新房</span>
             </NuxtLink>
             <NuxtLink to="/house/oldHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
-                <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="">
+                <img class="w-[30px] h-[30px]" :src="oldHouseIcon" alt="">
                 <span class="text-[#707070] font-bold ">二手房</span>
             </NuxtLink>
             <div @click="showModal=true" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
-                <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="">
+                <img class="w-[30px] h-[30px]" :src="saleHouseIcon" alt="">
                 <span class="text-[#707070] font-bold ">卖房</span>
             </div>
             <NuxtLink to="/house/rentHouse" class="w-[80px] h-[42px] flex items-center justify-center bg-[#fff] rounded">
-                <img class="w-[30px] h-[30px]" :src="newHouseIcon" alt="">
+                <img class="w-[30px] h-[30px]" :src="rentHouseIcon" alt="">
                 <span class="text-[#707070] font-bold ">租房</span>
             </NuxtLink>
         </div>
@@ -56,6 +56,9 @@
 
 <script setup>
 import newHouseIcon from '~/assets/img/house/newHouse.png';
+import oldHouseIcon from '~/assets/img/house/oldHouse.png';
+import saleHouseIcon from '~/assets/img/house/saleHouse.png';
+import rentHouseIcon from '~/assets/img/house/rentHouse.png';
 import modalBgIcon from '~/assets/img/house/modalBg.png';
 
 

src/pages/house/rentHouse/[id].vue

@@ -55,90 +55,91 @@
                 <van-col span="5">
                     <div class="text-[#242424] font-bold h-full flex flex-col justify-center items-center">
                         <img :src="equipmentIcon" class="w-[26px] h-[26px]" />
-                        <div>
-                            设施
-                        </div>
+                        
+                        <span class="mt-3">
+                            居家<br/>设施
+                        </span>
                     </div>
                 </van-col>
                 <van-col span="6">
                     <div class="">
                         <div class="flex items-center">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.icebox" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">冰箱</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.icebox">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">冰箱</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.broadband" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">宽带</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.broadband">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.broadband?'':'text-[#999]']">宽带</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.gasStove" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">燃气灶</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.gasStove">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.gasStove?'':'text-[#999]']">燃气灶</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.bed" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">床</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.bed">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.bed?'':'text-[#999]']">床</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.balcony" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.icebox?'':'text-[#999]']">阳台</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.balcony">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.balcony?'':'text-[#999]']">阳台</span>
                         </div>
                     </div>
                 </van-col>
                 <van-col span="6">
                     <div class="">
                         <div class="flex items-center">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.washer" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.washer?'':'text-[#999]']">洗衣机</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.washer">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.washer?'':'text-[#999]']">洗衣机</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.sofa" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.sofa?'':'text-[#999]']">沙发</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.sofa">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.sofa?'':'text-[#999]']">沙发</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.airConditioner" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.airConditioner?'':'text-[#999]']">空调</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.airConditioner">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.airConditioner?'':'text-[#999]']">空调</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.restRoom" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.restRoom?'':'text-[#999]']">卫生间</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.restRoom">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.restRoom?'':'text-[#999]']">卫生间</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.heating" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.heating?'':'text-[#999]']">暖气</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.heating">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.heating?'':'text-[#999]']">暖气</span>
                         </div>
                     </div>
                 </van-col>
                 <van-col span="6">
                     <div class="">
                         <div class="flex items-center">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.calorifier" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.calorifier?'':'text-[#999]']">热水器</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.calorifier">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.calorifier?'':'text-[#999]']">热水器</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.rangeHood" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.rangeHood?'':'text-[#999]']">油烟机</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.rangeHood">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.rangeHood?'':'text-[#999]']">油烟机</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.wardrobe" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.wardrobe?'':'text-[#999]']">衣柜</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.wardrobe">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5" :class="[dataDetail?.tourHouseEquipment?.wardrobe?'':'text-[#999]']">衣柜</span>
                         </div>
                         <div class="flex items-center mt-8">
-                            <van-icon v-if="dataDetail?.tourHouseEquipment?.smartDoorLock" name="success" size="20px" />
-                            <van-icon v-else name="cross" size="20px" color="#999" />
-                            <span :class="[dataDetail?.tourHouseEquipment?.smartDoorLock?'':'text-[#999]']">智能门锁</span>
+                            <span v-if="dataDetail?.tourHouseEquipment?.smartDoorLock">√</span>
+                            <span v-else class="text-[#999]">x</span>
+                            <span class="ml-5"  :class="[dataDetail?.tourHouseEquipment?.smartDoorLock?'':'text-[#999]']">智能门锁</span>
                         </div>
                     </div>
                 </van-col>