From 734887d6d4a1cae0f84b2628c8533e6975ad29ce Mon Sep 17 00:00:00 2001
From: lifizer <913626195@qq.com>
Date: Thu, 15 Aug 2024 16:19:40 +0800
Subject: [PATCH] =?UTF-8?q?Refactor(=E5=9C=B0=E6=A0=87=E5=A5=BD=E7=89=A9):?=
 =?UTF-8?q?=E7=95=8C=E9=9D=A2=E4=BD=BF=E7=94=A8=E6=96=B0=E7=89=88UI?=
 =?UTF-8?q?=E8=B0=83=E6=95=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages/home/landMark.vue             | 541 ++++++++++------------------
 pages/home/landMark_bak20240815.vue | 454 +++++++++++++++++++++++
 2 files changed, 647 insertions(+), 348 deletions(-)
 create mode 100644 pages/home/landMark_bak20240815.vue

diff --git a/pages/home/landMark.vue b/pages/home/landMark.vue
index 83bb823..ed89385 100644
--- a/pages/home/landMark.vue
+++ b/pages/home/landMark.vue
@@ -1,84 +1,102 @@
 <template>
-  <view class="pkg-product-land-mark" v-if="mapData">
-    <view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
-      <view class="view-box">
-        <view class="search-box flex ai-center">
-          <input
-            v-model="keyword"
-            type="text"
-            placeholder="搜索商品"
-            placeholder-style="color:#999"
-            @confirm="search()"
-          />
-          <image
-            :src="webUrl+'/20231223183627184005.png'"
-            mode="scaleToFill"
-            style="width:30rpx;height:30rpx"
-            @click="search()"
-          />
-        </view>
-
-        <view class="map-box">
-          <image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
-
+  <view class="pkg-product-land-mark">
+    <view v-if="isLoad">
+      <view class="top-box">
+        <view class="nav flex">
           <view
-            v-for="(item, index) in mapLocations"
+            v-for="(item,index) in navList"
             :key="index"
+            :class="{
+              'active': navIndex === index
+            }"
+            class="flex flex-0 ai-center nav-item"
+            @click="changeNav(index)"
+          >
+            <image
+              :src="webUrl + '/home/landmark-icon.png'"
+              class="bg"
+            />
+            {{ item.provinceName }}
+          </view>
+        </view>
+        <view class="view-box">
+          <view class="map-box">
+            <image
+              :src="mapData.mapImage"
+              mode="widthFix"
+              class="img-map"
+            />
+          </view>
+        </view>
+      </view>
+      <view
+        v-if="mapData.middleImage"
+        class="middle-img-wrap"
+      >
+        <image
+          :src="mapData.middleImage"
+          mode="widthFix"
+          class="img"
+        />
+      </view>
+      <view v-if="goods.length > 0" class="list-wrap">
+        <view class="list-box flex flex-wrap">
+          <view
+            v-for="item in goods"
+            :key="item.id"
             class="item"
-            :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
             @click="goGoods(item.productId)"
           >
-            <view class="round">
-              <view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
-            </view>
-            <view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
-              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
-              <view class="title flex ai-center">{{ item.mapTitle }}</view>
-              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
+            <image
+              :src="webUrl + '/home/mark-land.png'"
+              class="mark-img"
+            />
+            <image
+              :src="item.storeImage"
+              mode="scaleToFill"
+              class="good-img"
+            />
+            <view class="content flex flex-col jc-between">
+              <view class="more-t bold">{{ item.title }}</view>
+              <view class="one-t desc">{{ item.description }}</view>
+              <view class="flex jc-between ai-center">
+                <text class="price">￥{{ item.price }}</text>
+                <image
+                  :src="webUrl + '/home/icon-cart.png'"
+                  class="btn"
+                />
+              </view>
             </view>
           </view>
         </view>
+        <image
+          v-if="isCompleteLoadGood"
+          :src="webUrl + '/home/no-data-bg.png'"
+          mode="widthFix"
+          class="loadend"
+        />
       </view>
-
-      <view class="nav flex">
-        <view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
-              :key="index" @click="changeNav(index)">{{ item.provinceName }}
-        </view>
-      </view>
+      <image
+        v-if="goods.length === 0"
+        :src="webUrl + '/20231023131208675588.png'"
+        class="img-nodata"
+        mode="scaleToFill"
+      />
     </view>
-
-    <view class="main-box" v-if="mapData.recommended.storeImage"
-          @click="goGoods(mapData.recommended.productId)">
-      <image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
-      <view class="box-mask flex flex-col jc-end">
-        <view class="one-t bold">{{ mapData.recommended.title }}</view>
-        <view class="more-t">{{ mapData.recommended.description }}</view>
-      </view>
-    </view>
-
-    <view class="list-box flex flex-wrap">
-      <view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
-        <image :src="item.storeImage" mode="scaleToFill"/>
-        <view class="content flex flex-col jc-between">
-          <view class="more-t bold">{{ item.title }}</view>
-          <view class="flex jc-between ai-center">
-            <text class="price">￥{{ item.price }}</text>
-            <image class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
-<!--            <view class="btn flex jc-center ai-center">立即购买</view>-->
-          </view>
-        </view>
-      </view>
-    </view>
-
-    <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
-           v-if="goods.length===0"/>
+    <goo-skeleton
+      v-else
+      :show-avatar="false"
+    />
   </view>
 </template>
 
 <script>
-import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
+import {
+  getProvince,
+  getProvinceGoods,
+  getProvinceList
+} from "@/api/product"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
-
 export default {
   name: 'LandMarkPage',
   mixins: [pageListenMixins],
@@ -86,80 +104,60 @@ export default {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keyword: '',
+      isLoad: false,
       page: 1,
       navList: [],
       navIndex: 0,
       mapData: null,
-      mapLocations: [],
       goods: [],
-      directionClass: ['', 'up', 'right', 'down', 'left'],
+      isCompleteLoadGood: false,
       pageKeyId: Object.freeze('landmarkGoodsIndex')
     }
   },
-  computed: {
-    topBoxBgColor() {
-      return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
-    },
-    viewBoxBgColor() {
-      return this.mapData?.backgroundColor || '#FFFFFF';
-    },
-    scale() {
-      return 718 / (this.mapData?.mapImageWidth || 1);
-    }
-  },
   onLoad() {
-    this.getNavList();
+    this.getNavList()
   },
   onHide() {
     this.pageToHideHandle()
   },
   onReachBottom() {
-    this.page++;
-    this.fetchGoods();
+    if (this.isCompleteLoadGood) {
+      return
+    }
+    this.page++
+    this.fetchGoods()
   },
   methods: {
     getNavList() {
       getProvinceList().then(({data}) => {
-        this.navList = data;
-        this.changeNav(this.navIndex);
-      });
+        this.navList = data
+        this.changeNav(this.navIndex)
+      })
     },
-
-    search() {
-      this.page = 1;
-      this.fetchGoods();
-    },
-
     changeNav(index) {
-      this.navIndex = index;
-      this.page = 1;
-      this.getMap();
-      this.fetchGoods();
+      this.navIndex = index
+      this.page = 1
+      this.goods = []
+      this.isCompleteLoadGood = false
+      this.getMap()
+      this.fetchGoods()
     },
-
     getMap() {
       const id = this.navList[this.navIndex]['id']
       getProvince(id).then(({data}) => {
-        this.mapData = data;
-        this.mapLocations = data.mapLocations;
-        this.calcPosition();
-      });
-    },
-
-    // 计算位置
-    calcPosition() {
-      this.mapLocations?.forEach(item => {
-        item.gx = item.x * this.scale;
-        item.gy = item.y * this.scale;
+        this.mapData = data
+        this.isLoad = true
       })
     },
-
     fetchGoods() {
       const id = this.navList[this.navIndex]['id']
       getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
-        if (this.page === 1) this.goods = [];
-        for (let i = 0; i < data.length; i++) {
-          this.goods.push(data[i]);
+        const len = data.length
+        for (let i = 0; i < len; i++) {
+          this.goods.push(data[i])
+        }
+        if (len === 0 || len < 10) {
+          this.isCompleteLoadGood = true
         }
       })
     },
@@ -174,273 +172,120 @@ export default {
 
 <style scoped lang="less">
 .pkg-product-land-mark {
-  background: #F7F3ED;
-
-  image {
-    vertical-align: middle;
-  }
-
+  padding: 24rpx;
+  background: #f0f0f0;
   .top-box {
-    padding: 32rpx 0 20rpx;
-
+    border-radius: 20rpx;
+    background-color: #fff;
     .view-box {
       position: relative;
-      margin: 0 16rpx;
-      border-radius: 40rpx;
+      padding: 20rpx 24rpx 24rpx 24rpx;
+      border-radius: 20rpx;
       overflow: hidden;
-
-      .search-box {
-        position: absolute;
-        top: 20rpx;
-        left: 34rpx;
-        width: 650rpx;
-        height: 64rpx;
-        padding: 0 32rpx;
-        box-sizing: border-box;
-        border-radius: 32rpx;
-        background: #FFFFFF;
-        z-index: 10;
-
-        input {
-          width: 100%;
-          height: 100%;
-          line-height: 64rpx;
-          font-size: 28rpx;
-        }
-      }
-
-      .map-box {
-        position: relative;
-        width: 718rpx;
-
-        .img-map {
-          width: 718rpx;
-          height: auto;
-        }
-
-        .item {
-          position: absolute;
-
-          .round {
-            width: 8rpx;
-            height: 8rpx;
-            border-radius: 50%;
-            box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
-            background: #E12641;
-          }
-
-          .line {
-            position: relative;
-            border: 2rpx solid #E12641;
-          }
-
-          .line-up {
-            left: 50%;
-            transform: translate(-50%, -100%);
-            width: 0;
-            height: 30rpx;
-          }
-
-          .line-right {
-            top: 50%;
-            transform: translate(0, -50%);
-            width: 30rpx;
-            height: 0;
-          }
-
-          .line-down {
-            left: 50%;
-            transform: translate(-50%, 0);
-            width: 0;
-            height: 30rpx;
-          }
-
-          .line-left {
-            top: 50%;
-            transform: translate(-100%, -50%);
-            width: 30rpx;
-            height: 0;
-          }
-
-          .label {
-            position: relative;
-
-            .cover {
-              width: 60rpx;
-              height: 60rpx;
-              box-sizing: border-box;
-              border: 6rpx solid #E12641;
-              border-radius: 50%;
-              z-index: 20;
-            }
-
-            .title {
-              height: 32rpx;
-              box-sizing: border-box;
-              margin-bottom: 10rpx;
-              padding: 0 16rpx;
-              background: #E12641;
-              color: #FFFFFF;
-              font-size: 22rpx;
-              line-height: 32rpx;
-              white-space: nowrap;
-              z-index: 10;
-            }
-          }
-
-          .label-up {
-            top: -80rpx;
-            left: -50%;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-right {
-            top: -40rpx;
-            left: 32rpx;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-down {
-            left: -50%;
-
-            .title {
-              margin-right: -9rpx;
-              border-radius: 20rpx 0 0 20rpx;
-            }
-          }
-
-          .label-left {
-            left: -100%;
-            transform: translate(-30rpx, -40rpx);
-
-            .title {
-              margin-left: -9rpx;
-              border-radius: 0 20rpx 20rpx 0;
-            }
-          }
-        }
-      }
-    }
-
-    .nav {
-      padding: 30rpx 20rpx 0;
-      overflow-x: scroll;
-
-      view {
-        height: 52rpx;
-        box-sizing: border-box;
-        padding: 0 18rpx;
-        border: 4rpx solid transparent;
-        color: #FFFFFF;
-        font-size: 32rpx;
-      }
-
-      .active {
-        border-color: #FFFFFF;
-        border-radius: 26rpx;
-      }
-    }
-  }
-
-  .main-box {
-    position: relative;
-    width: 718rpx;
-    height: 360rpx;
-    margin: 24rpx 16rpx;
-    border-radius: 16rpx;
-    overflow: hidden;
-
-    .bg-main {
-      width: 718rpx;
-      height: 360rpx;
-    }
-
-    .box-mask {
-      position: absolute;
-      left: 0;
-      bottom: 0;
-      width: 100%;
-      height: 200rpx;
-      box-sizing: border-box;
-      padding: 20rpx 16rpx 16rpx;
-      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
-      color: #FFFFFF;
-
-      .one-t {
-        margin-bottom: 16rpx;
-        font-size: 46rpx;
-        line-height: 52rpx;
-      }
-
-      .more-t {
+      .img-map {
+        display: block;
         width: 100%;
+      }
+    }
+    .nav {
+      padding: 20rpx 20rpx 0 20rpx;
+      overflow-x: scroll;
+      .nav-item + .nav-item {
+        margin: 0 0 0 20rpx;
+      }
+      .nav-item {
+        position: relative;
         box-sizing: border-box;
-        padding-top: 10rpx;
-        border-top: 1rpx solid #FFFFFF;
-        font-size: 28rpx;
-        line-height: 32rpx;
+        padding: 0 32rpx 20rpx 0;
+        color: #333;
+        font-size: 32rpx;
+        .bg {
+          display: none;
+          position: absolute;
+          bottom: 0;
+          right: 6rpx;
+          width: 63rpx;
+          height: 42rpx;
+        }
+      }
+      .active {
+        font-size: 40rpx;
+        font-weight: bold;
+        .bg {
+          display: block;
+        }
       }
     }
   }
-
+  .middle-img-wrap {
+    margin: 20rpx 0 0 0;
+    .img {
+      display: block;
+      width: 100%;
+      border-radius: 20rpx;
+    }
+  }
   .list-box {
     margin-top: 24rpx;
-    padding: 0 16rpx 34rpx;
-
     .item {
-      width: 234rpx;
-      height: 380rpx;
-      margin-right: 8rpx;
-      margin-bottom: 24rpx;
-      border-radius: 12rpx;
+      position: relative;
+      width: 344rpx;
+      margin-right: 20rpx;
+      margin-bottom: 20rpx;
+      border-radius: 20rpx;
       background: #FFFFFF;
       overflow: hidden;
-
-      image {
-        width: 234rpx;
-        height: 234rpx;
+      .mark-img {
+        position: absolute;
+        top: 0;
+        right: 0;
+        z-index: 3;
+        display: block;
+        width: 84rpx;
+        height: 74rpx;
+      }
+      .good-img {
+        display: block;
+        width: 344rpx;
+        height: 344rpx;
       }
-
       .content {
-        height: 122rpx;
-        margin: 6rpx 6rpx 18rpx;
-
+        height: 156rpx;
+        padding: 8rpx 8rpx 18rpx 8rpx;
         .more-t {
           font-size: 28rpx;
           line-height: 36rpx;
-          color: #333333;
+          color: #333;
+        }
+        .desc {
+          padding: 5rpx 0;
+          height: 34rpx;
+          color: #FFC543;
+          font-size: 24rpx;
         }
-
         .price {
-          font-size: 28rpx;
-          line-height: 36rpx;
-          color: #DC1616;
+          font-size: 40rpx;
+          line-height: 40rpx;
+          font-weight: bold;
+          color: #C52733;
         }
-
         .btn {
-          width: 118rpx;
-          height: 42rpx;
-          //background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
-          //border-radius: 4rpx;
-          //color: #764A00;
-          //font-size: 24rpx;
+          display: block;
+          width: 48rpx;
+          height: 48rpx;
         }
       }
     }
-
-    .item:nth-child(3n) {
+    .item:nth-child(2n) {
       margin-right: 0;
     }
   }
-
+  .list-wrap {
+    margin: 20rpx 0 0 0;
+    .loadend {
+      width: 100%;
+    }
+  }
   .img-nodata {
     position: relative;
     top: 0;
diff --git a/pages/home/landMark_bak20240815.vue b/pages/home/landMark_bak20240815.vue
new file mode 100644
index 0000000..83bb823
--- /dev/null
+++ b/pages/home/landMark_bak20240815.vue
@@ -0,0 +1,454 @@
+<template>
+  <view class="pkg-product-land-mark" v-if="mapData">
+    <view class="top-box" :style="{'backgroundColor':topBoxBgColor}">
+      <view class="view-box">
+        <view class="search-box flex ai-center">
+          <input
+            v-model="keyword"
+            type="text"
+            placeholder="搜索商品"
+            placeholder-style="color:#999"
+            @confirm="search()"
+          />
+          <image
+            :src="webUrl+'/20231223183627184005.png'"
+            mode="scaleToFill"
+            style="width:30rpx;height:30rpx"
+            @click="search()"
+          />
+        </view>
+
+        <view class="map-box">
+          <image class="img-map" :src="mapData.mapImage" mode="widthFix"/>
+
+          <view
+            v-for="(item, index) in mapLocations"
+            :key="index"
+            class="item"
+            :style="{'left':item.gx+'rpx','top':item.gy+'rpx'}"
+            @click="goGoods(item.productId)"
+          >
+            <view class="round">
+              <view class="line" :class="'line-'+directionClass[item.labelDirection]"></view>
+            </view>
+            <view class="label flex ai-end" :class="'label-'+directionClass[item.labelDirection]">
+              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection===4"/>
+              <view class="title flex ai-center">{{ item.mapTitle }}</view>
+              <image class="cover flex-0" :src="item.mapImage" mode="scaleToFill" v-if="item.labelDirection!==4"/>
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view class="nav flex">
+        <view class="flex flex-0 ai-center" :class="{'active': navIndex===index}" v-for="(item,index) in navList"
+              :key="index" @click="changeNav(index)">{{ item.provinceName }}
+        </view>
+      </view>
+    </view>
+
+    <view class="main-box" v-if="mapData.recommended.storeImage"
+          @click="goGoods(mapData.recommended.productId)">
+      <image class="bg-main" :src="mapData.recommended.storeImage" mode="scaleToFill"/>
+      <view class="box-mask flex flex-col jc-end">
+        <view class="one-t bold">{{ mapData.recommended.title }}</view>
+        <view class="more-t">{{ mapData.recommended.description }}</view>
+      </view>
+    </view>
+
+    <view class="list-box flex flex-wrap">
+      <view class="item" v-for="item in goods" :key="item.id" @click="goGoods(item.productId)">
+        <image :src="item.storeImage" mode="scaleToFill"/>
+        <view class="content flex flex-col jc-between">
+          <view class="more-t bold">{{ item.title }}</view>
+          <view class="flex jc-between ai-center">
+            <text class="price">￥{{ item.price }}</text>
+            <image class="btn" :src="webUrl+'/20231114151028082368.png'" mode="scaleToFill"/>
+<!--            <view class="btn flex jc-center ai-center">立即购买</view>-->
+          </view>
+        </view>
+      </view>
+    </view>
+
+    <image class="img-nodata" :src="webUrl+'/20231023131208675588.png'" mode="scaleToFill"
+           v-if="goods.length===0"/>
+  </view>
+</template>
+
+<script>
+import {getProvince, getProvinceGoods, getProvinceList} from "@/api/product";
+import { pageListenMixins } from '@/mixins/pageListenMixins'
+
+export default {
+  name: 'LandMarkPage',
+  mixins: [pageListenMixins],
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      keyword: '',
+      page: 1,
+      navList: [],
+      navIndex: 0,
+      mapData: null,
+      mapLocations: [],
+      goods: [],
+      directionClass: ['', 'up', 'right', 'down', 'left'],
+      pageKeyId: Object.freeze('landmarkGoodsIndex')
+    }
+  },
+  computed: {
+    topBoxBgColor() {
+      return this.navList.length > 0 ? this.navList[this.navIndex]['backgroundColor'] : '#FFFFFF';
+    },
+    viewBoxBgColor() {
+      return this.mapData?.backgroundColor || '#FFFFFF';
+    },
+    scale() {
+      return 718 / (this.mapData?.mapImageWidth || 1);
+    }
+  },
+  onLoad() {
+    this.getNavList();
+  },
+  onHide() {
+    this.pageToHideHandle()
+  },
+  onReachBottom() {
+    this.page++;
+    this.fetchGoods();
+  },
+  methods: {
+    getNavList() {
+      getProvinceList().then(({data}) => {
+        this.navList = data;
+        this.changeNav(this.navIndex);
+      });
+    },
+
+    search() {
+      this.page = 1;
+      this.fetchGoods();
+    },
+
+    changeNav(index) {
+      this.navIndex = index;
+      this.page = 1;
+      this.getMap();
+      this.fetchGoods();
+    },
+
+    getMap() {
+      const id = this.navList[this.navIndex]['id']
+      getProvince(id).then(({data}) => {
+        this.mapData = data;
+        this.mapLocations = data.mapLocations;
+        this.calcPosition();
+      });
+    },
+
+    // 计算位置
+    calcPosition() {
+      this.mapLocations?.forEach(item => {
+        item.gx = item.x * this.scale;
+        item.gy = item.y * this.scale;
+      })
+    },
+
+    fetchGoods() {
+      const id = this.navList[this.navIndex]['id']
+      getProvinceGoods(id, this.keyword, this.page).then(({data}) => {
+        if (this.page === 1) this.goods = [];
+        for (let i = 0; i < data.length; i++) {
+          this.goods.push(data[i]);
+        }
+      })
+    },
+    goGoods(id) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="less">
+.pkg-product-land-mark {
+  background: #F7F3ED;
+
+  image {
+    vertical-align: middle;
+  }
+
+  .top-box {
+    padding: 32rpx 0 20rpx;
+
+    .view-box {
+      position: relative;
+      margin: 0 16rpx;
+      border-radius: 40rpx;
+      overflow: hidden;
+
+      .search-box {
+        position: absolute;
+        top: 20rpx;
+        left: 34rpx;
+        width: 650rpx;
+        height: 64rpx;
+        padding: 0 32rpx;
+        box-sizing: border-box;
+        border-radius: 32rpx;
+        background: #FFFFFF;
+        z-index: 10;
+
+        input {
+          width: 100%;
+          height: 100%;
+          line-height: 64rpx;
+          font-size: 28rpx;
+        }
+      }
+
+      .map-box {
+        position: relative;
+        width: 718rpx;
+
+        .img-map {
+          width: 718rpx;
+          height: auto;
+        }
+
+        .item {
+          position: absolute;
+
+          .round {
+            width: 8rpx;
+            height: 8rpx;
+            border-radius: 50%;
+            box-shadow: 0 0 0 8rpx rgba(225, 38, 65, .4);;
+            background: #E12641;
+          }
+
+          .line {
+            position: relative;
+            border: 2rpx solid #E12641;
+          }
+
+          .line-up {
+            left: 50%;
+            transform: translate(-50%, -100%);
+            width: 0;
+            height: 30rpx;
+          }
+
+          .line-right {
+            top: 50%;
+            transform: translate(0, -50%);
+            width: 30rpx;
+            height: 0;
+          }
+
+          .line-down {
+            left: 50%;
+            transform: translate(-50%, 0);
+            width: 0;
+            height: 30rpx;
+          }
+
+          .line-left {
+            top: 50%;
+            transform: translate(-100%, -50%);
+            width: 30rpx;
+            height: 0;
+          }
+
+          .label {
+            position: relative;
+
+            .cover {
+              width: 60rpx;
+              height: 60rpx;
+              box-sizing: border-box;
+              border: 6rpx solid #E12641;
+              border-radius: 50%;
+              z-index: 20;
+            }
+
+            .title {
+              height: 32rpx;
+              box-sizing: border-box;
+              margin-bottom: 10rpx;
+              padding: 0 16rpx;
+              background: #E12641;
+              color: #FFFFFF;
+              font-size: 22rpx;
+              line-height: 32rpx;
+              white-space: nowrap;
+              z-index: 10;
+            }
+          }
+
+          .label-up {
+            top: -80rpx;
+            left: -50%;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-right {
+            top: -40rpx;
+            left: 32rpx;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-down {
+            left: -50%;
+
+            .title {
+              margin-right: -9rpx;
+              border-radius: 20rpx 0 0 20rpx;
+            }
+          }
+
+          .label-left {
+            left: -100%;
+            transform: translate(-30rpx, -40rpx);
+
+            .title {
+              margin-left: -9rpx;
+              border-radius: 0 20rpx 20rpx 0;
+            }
+          }
+        }
+      }
+    }
+
+    .nav {
+      padding: 30rpx 20rpx 0;
+      overflow-x: scroll;
+
+      view {
+        height: 52rpx;
+        box-sizing: border-box;
+        padding: 0 18rpx;
+        border: 4rpx solid transparent;
+        color: #FFFFFF;
+        font-size: 32rpx;
+      }
+
+      .active {
+        border-color: #FFFFFF;
+        border-radius: 26rpx;
+      }
+    }
+  }
+
+  .main-box {
+    position: relative;
+    width: 718rpx;
+    height: 360rpx;
+    margin: 24rpx 16rpx;
+    border-radius: 16rpx;
+    overflow: hidden;
+
+    .bg-main {
+      width: 718rpx;
+      height: 360rpx;
+    }
+
+    .box-mask {
+      position: absolute;
+      left: 0;
+      bottom: 0;
+      width: 100%;
+      height: 200rpx;
+      box-sizing: border-box;
+      padding: 20rpx 16rpx 16rpx;
+      background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, #000000 100%);
+      color: #FFFFFF;
+
+      .one-t {
+        margin-bottom: 16rpx;
+        font-size: 46rpx;
+        line-height: 52rpx;
+      }
+
+      .more-t {
+        width: 100%;
+        box-sizing: border-box;
+        padding-top: 10rpx;
+        border-top: 1rpx solid #FFFFFF;
+        font-size: 28rpx;
+        line-height: 32rpx;
+      }
+    }
+  }
+
+  .list-box {
+    margin-top: 24rpx;
+    padding: 0 16rpx 34rpx;
+
+    .item {
+      width: 234rpx;
+      height: 380rpx;
+      margin-right: 8rpx;
+      margin-bottom: 24rpx;
+      border-radius: 12rpx;
+      background: #FFFFFF;
+      overflow: hidden;
+
+      image {
+        width: 234rpx;
+        height: 234rpx;
+      }
+
+      .content {
+        height: 122rpx;
+        margin: 6rpx 6rpx 18rpx;
+
+        .more-t {
+          font-size: 28rpx;
+          line-height: 36rpx;
+          color: #333333;
+        }
+
+        .price {
+          font-size: 28rpx;
+          line-height: 36rpx;
+          color: #DC1616;
+        }
+
+        .btn {
+          width: 118rpx;
+          height: 42rpx;
+          //background: linear-gradient(180deg, #EFEDC7 0%, #EAC94B 100%);
+          //border-radius: 4rpx;
+          //color: #764A00;
+          //font-size: 24rpx;
+        }
+      }
+    }
+
+    .item:nth-child(3n) {
+      margin-right: 0;
+    }
+  }
+
+  .img-nodata {
+    position: relative;
+    top: 0;
+    left: 50%;
+    transform: translate(-50%, 0);
+    width: 352rpx;
+    height: 338rpx;
+    margin-bottom: 60rpx;
+  }
+}
+</style>
\ No newline at end of file