From c18ec66653652e1f0abf1fe1fd316c2aced5bf50 Mon Sep 17 00:00:00 2001
From: linxi <linxi.jiang@jeeyor.com>
Date: Thu, 14 Nov 2024 17:58:52 +0800
Subject: [PATCH] =?UTF-8?q?Feat:=20=E5=9C=B0=E6=A0=87=E5=A5=BD=E7=89=A9?=
 =?UTF-8?q?=EF=BC=88=E9=A1=B5=E9=9D=A2&=E6=8E=A5=E5=8F=A3=EF=BC=89?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 api/product.js                        |  24 +++
 pages/home/components/culture.vue     |  38 ++++
 pages/home/components/goods.vue       | 118 ++++++++++++
 pages/home/components/information.vue | 262 ++++++++++++++++++++++++++
 pages/home/components/policy.vue      | 134 +++++++++++++
 pages/home/components/projects.vue    | 130 +++++++++++++
 pages/home/components/recommend.vue   | 134 +++++++++++++
 pages/home/components/serviec.vue     |  17 ++
 pages/home/landMark.vue               | 233 ++++++++++-------------
 9 files changed, 961 insertions(+), 129 deletions(-)
 create mode 100644 pages/home/components/culture.vue
 create mode 100644 pages/home/components/goods.vue
 create mode 100644 pages/home/components/information.vue
 create mode 100644 pages/home/components/policy.vue
 create mode 100644 pages/home/components/projects.vue
 create mode 100644 pages/home/components/recommend.vue
 create mode 100644 pages/home/components/serviec.vue

diff --git a/api/product.js b/api/product.js
index dd0886b..d2bab44 100644
--- a/api/product.js
+++ b/api/product.js
@@ -131,4 +131,28 @@ export function getProvince(id) {
 export function getProvinceGoods(parentId, keyword, page) {
     const params = `?parentId=${parentId}&keyword=${keyword}&page=${page}&limit=10`;
     return request.get('/landmarkGoods/productList' + params, {}, {login: false})
+}
+
+export function getPorjectRecommend(params) {
+    return request.get('/landmarkGoods/hotelList', params, {login: false})
+}
+
+export function getPorjectPolicyFiles(params) {
+    return request.get('/landmarkGoods/policyFiles', params, {login: false})
+}
+
+export function getCulture(params) {
+    return request.get('/landmarkGoods/culture', params, {login: false})
+}
+
+export function getNews(params) {
+    return request.get('/landmarkGoods/news', params, {login: false})
+}
+
+export function hadLike(data) {
+    return request.post('/landmarkGoods/news/zan', data, {login: false})
+}
+
+export function hadView(data) {
+    return request.post('/landmarkGoods/news/view', data, {login: false})
 }
\ No newline at end of file
diff --git a/pages/home/components/culture.vue b/pages/home/components/culture.vue
new file mode 100644
index 0000000..d1381f6
--- /dev/null
+++ b/pages/home/components/culture.vue
@@ -0,0 +1,38 @@
+<template>
+  <view class="culture v12-d-grid-columns-2">
+    <view class="img-item " v-for="item in 10" :key="item"></view>
+  </view>
+</template>
+
+<script>
+import {
+  getCulture,
+} from "@/api/product"
+export default {
+  props: {
+    landmarkDataId: null
+  },
+  data() {
+    return {
+      list: []
+    }
+  },
+  mounted() {
+    getCulture({landmarkDataId: this.landmarkDataId}).then(res => {
+      this.list = res.data
+    })
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.culture{
+  grid-gap: 20rpx 20rpx;
+  padding: 20rpx;
+}
+.img-item{
+  height: 320rpx;
+  background: rgba(137,35,35,0.39);
+  border-radius: 16rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/components/goods.vue b/pages/home/components/goods.vue
new file mode 100644
index 0000000..918f020
--- /dev/null
+++ b/pages/home/components/goods.vue
@@ -0,0 +1,118 @@
+<template>
+  <view class="list-box flex flex-wrap">
+    <view
+      v-for="item in goods"
+      :key="item.id"
+      class="item"
+      @click="goGoods(item.productId)"
+    >
+      <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>
+</template>
+
+<script>
+export default {
+  props: {
+    goods: {
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+    }
+  },
+  methods: {
+    goGoods(id) {
+      uni.navigateTo({
+        url: `/pages/shop/GoodsCon/index?id=${id}&from=landmark`
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.list-box {
+  margin-top: 24rpx;
+  .item {
+    position: relative;
+    width: 344rpx;
+    margin-right: 22rpx;
+    margin-bottom: 22rpx;
+    border-radius: 20rpx;
+    background: #FFFFFF;
+    overflow: hidden;
+    .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: 156rpx;
+      padding: 8rpx 8rpx 18rpx 8rpx;
+      .more-t {
+        font-size: 28rpx;
+        line-height: 36rpx;
+        color: #333;
+      }
+      .desc {
+        padding: 5rpx 0;
+        height: 34rpx;
+        color: #FFC543;
+        font-size: 24rpx;
+      }
+      .price {
+        font-size: 40rpx;
+        line-height: 40rpx;
+        font-weight: bold;
+        color: #C52733;
+      }
+      .btn {
+        display: block;
+        width: 48rpx;
+        height: 48rpx;
+      }
+    }
+  }
+  .item:nth-child(2n) {
+    margin-right: 0;
+  }
+}
+.list-wrap {
+  margin: 20rpx 0 0 0;
+  padding: 0 20rpx;
+  .loadend {
+    width: 100%;
+  }
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/components/information.vue b/pages/home/components/information.vue
new file mode 100644
index 0000000..b96dd58
--- /dev/null
+++ b/pages/home/components/information.vue
@@ -0,0 +1,262 @@
+<template>
+  <view>
+    <view v-if="infoArray.length > 0" class="info-wrapper">
+      <view class="info-list">
+        <view v-for="(item, index) in infoArray" :key="index" class="info-item">
+          <view
+            :class="item.isTop === 1 ? 'info-item-top' : ''"
+            :style="{
+              'background-image': item.isTop
+                ? 'url(' + webUrl + '/page/hotel/info-top-bg.png)'
+                : 'none',
+            }"
+            class="info-item-header"
+          >
+            <view class="name">
+              {{ item.title }}
+            </view>
+            <view class="intro">
+              {{ item.content }}
+            </view>
+          </view>
+          <view class="info-item-body">
+            <img-box
+              :imgList="item.images"
+              :num="item.images.length"
+              :img-radius="10"
+              style="width: 100%"
+              @click="infoItemViewClick(item)"
+            />
+          </view>
+          <view class="info-item-bottom">
+            <view class="time">
+              {{
+                item.createTime
+                  ? item.createTime.replace(/-/g, ".").substr(0, 10)
+                  : ""
+              }}
+            </view>
+            <view class="btns">
+              <view class="flex">
+                <image
+                  :src="webUrl + '/20230803152147141807.png'"
+                  class="icon"
+                />
+                <text class="seeNum-txt v12-font-28">{{ item.pv }}</text>
+              </view>
+              <view class="flex">
+                <image
+                  v-if="!item.hasZan"
+                  :src="webUrl + '/page/hotel/zan-off-2.png'"
+                  class="zan-off-icon"
+                  @click="likeInfoItemHandle(item, index, item.zan + 1, true)"
+                />
+                <image
+                  v-else
+                  :src="webUrl + '/page/hotel/zan-on-2.png'"
+                  class="zan-on-icon"
+                  @click="likeInfoItemHandle(item, index, item.zan - 1, false)"
+                />
+                <text
+                  v-show="item.zan > 0"
+                  :class="item.hasZan ? 'on' : ''"
+                  class="seeNum-txt v12-font-28 v12-ml-1"
+                  >{{ item.zan }}</text
+                >
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <image
+        :src="webUrl + '/home/no-data-bg.png'"
+        mode="widthFix"
+        class="no-data-loadend"
+      />
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  getNews,
+  hadLike,
+  hadView
+} from "@/api/product"
+import imgBox from '@/components/imageTypeSet/imagebox.vue'
+export default {
+  props: {
+    landmarkDataId: null
+  },
+  components: {
+    imgBox
+  },
+  data() {
+    return {
+      webUrl: this.$VUE_APP_RESOURCES_URL,
+      infoArray: []
+    }
+  },
+  created() {
+    const params = {
+      landmarkDataId: this.landmarkDataId,
+      page: 1,
+      limit: 9999
+    }
+    getNews(params).then(res => {
+      this.infoArray = res.data.records
+    })
+  },
+  methods: {
+    likeInfoItemHandle(item, index, value, voValue) {
+      hadLike({ landmarkNewsId: item.id }).then(res => {
+        const { success } = res
+        if (success) {
+          this.$dialog.toast({
+            mes: '操作成功!'
+          })
+          this.$set(this.infoArray[index], 'zan', value)
+          this.$set(this.infoArray[index], 'hasZan', voValue)
+        }
+      })
+    },
+    infoItemViewClick(item) {
+      uni.$u.debounce(() => {
+        hadView({ landmarkNewsId: item.id }).finally(() => {
+          this.infoArray.map(info => {
+            if (info.id === item.id) {
+              info.pv += 1
+            }
+          })
+        })
+      }, 500)
+    },
+  }
+};
+</script>
+<style lang="scss" scoped>
+.info-item + .info-item {
+  margin: 22rpx 0 0 0;
+}
+.info-item {
+  border-radius: 10rpx;
+  background-color: #fff;
+  .info-item-header {
+    position: relative;
+    padding: 20rpx 20rpx 0 20rpx;
+    &.info-item-top {
+      padding-top: 60rpx;
+      background-size: 100% 80rpx;
+      background-repeat: no-repeat;
+      background-image: url();
+    }
+    .name {
+      font-size: 16px;
+      color: #333;
+      font-weight: bold;
+    }
+    .intro {
+      margin: 10rpx 0 0 0;
+      color: #666;
+      font-size: 14px;
+    }
+  }
+  .info-item-body {
+    padding: 0 20rpx 20rpx 20rpx;
+    .video {
+      padding: 20rpx 0 0 0;
+      .video-item {
+        width: 100%;
+        height: 400rpx;
+        border-radius: 10rpx;
+      }
+    }
+  }
+  .info-item-bottom {
+    display: flex;
+    align-items: center;
+    padding: 20rpx;
+    border-top: 1px solid #f1f1f1;
+    font-size: 16px;
+    .time {
+      flex: 1;
+      color: #999999;
+      font-size: 28rpx;
+    }
+    .btns {
+      display: flex;
+      color: #999;
+      .flex + .flex {
+        margin: 0 0 0 32rpx;
+      }
+      .flex {
+        align-items: center;
+      }
+      .icon {
+        width: 32rpx;
+        height: 32rpx;
+        margin: 0 8rpx 0 0;
+      }
+      .zan-off-icon {
+        width: 32rpx;
+        height: 32rpx;
+      }
+      .zan-on-icon {
+        width: 32rpx;
+        height: 32rpx;
+      }
+      .seeNum-txt {
+        &.on {
+          color: #D81E06;
+        }
+      }
+      .more-btn {
+        position: relative;
+        .more-wrapper {
+          position: absolute;
+          right: -20rpx;
+          top: -150rpx;
+          z-index: 5;
+          width: 200rpx;
+          border-radius: 12rpx;
+          background-color: #fff;
+          box-shadow: 0px 1px 6px rgba(0,0,0,0.16);
+          .more-item + .more-item {
+            border-top: 1px solid #d5d5d5;
+          }
+          .more-item {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            height: 70rpx;
+            font-size: 14px;
+            color: #333;
+            .more-icon {
+              width: 36rpx;
+              height: 36rpx;
+              margin: 0 10rpx 0 0;
+            }
+          }
+        }
+      }
+    }
+  }
+}
+.info-item-top {
+  padding-top: 60rpx;
+  background-size: 100% 80rpx;
+  background-repeat: no-repeat;
+  background-image: url();
+}
+.name {
+  font-size: 16px;
+  color: #333;
+  font-weight: bold;
+}
+.intro {
+  margin: 10rpx 0 0 0;
+  color: #666;
+  font-size: 14px;
+}
+</style>
+
diff --git a/pages/home/components/policy.vue b/pages/home/components/policy.vue
new file mode 100644
index 0000000..459b2c0
--- /dev/null
+++ b/pages/home/components/policy.vue
@@ -0,0 +1,134 @@
+<template>
+  <view class="policy">
+    <view class="list-item" v-for="(item, index) in currentList" :key="index" @click="fileItemClick(item)">
+      <view class="v12-justify-start v12-align-center">
+        <view class="v12-font-bold v12-font-28">·</view>
+        <view class="item-title one-t">{{ item.title }}</view>
+      </view>
+      <view class="item-action v12-dark"><u-icon name="arrow-right" color="#fff" size="8"></u-icon></view>
+    </view>
+    <view class="more-wrap" v-if="isMore ? isMore : list.length > 3">
+      <view class="more-btn v12-primary v12-align-center" @click="showMore">
+        {{ isMore ? '收起' : '查看更多' }}
+        <view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  getPorjectPolicyFiles,
+} from "@/api/product"
+export default {
+  props: {
+    landmarkDataId: null
+  },
+  data() {
+    return {
+      list: [],
+      currentList: [],
+      isMore: false
+    }
+  },
+  mounted() {
+    const params = {
+      landmarkDataId: this.landmarkDataId,
+      page: 1,
+      limit: 99999
+    }
+    getPorjectPolicyFiles(params).then(res => {
+      this.list = res.data.records
+      if(this.isMore) {
+        this.currentList = this.list
+      } else {
+        this.currentList = this.list.filter((item, index) => index < 3)
+      }
+    })
+  },
+  methods: {
+    showMore() {
+      this.isMore = !this.isMore
+      if(this.isMore) {
+        this.currentList = this.list
+      } else {
+        this.currentList = this.list.filter((item, index) => index < 3)
+      }
+    },
+    fileItemClick(file) {
+      const url = file.attachment || ''
+      if (!url) return
+      uni.downloadFile({
+        url,
+        success: res => {
+          const filePath = res.tempFilePath
+          wx.openDocument({
+            filePath,
+            fail: (err) => {
+              console.log(err)
+            }
+          })
+        }
+      })
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.more-btn{
+  .item-action{
+    width: 20rpx;
+    height: 20rpx;
+    margin-left: 10rpx;
+  }
+}
+.policy{
+  padding: 20rpx;
+  background: #f0f0f0;
+  border-radius: 24rpx;
+}
+.list-item{
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 24rpx;
+  align-items: center;
+  padding: 10rpx 20rpx;
+}
+.item-action{
+  font-size: 22rpx;
+  width: 24rpx;
+  height: 24rpx;
+  color: #fff;
+  padding: 5rpx;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  line-height: 24rpx;
+}
+.item-title{
+  font-size: 24rpx;
+  color: #333;
+  margin-left: 10rpx;
+}
+.log-img{
+  width: 68rpx;
+  height: 68rpx;
+  background: rgba(197,39,51,0.39);
+  border-radius: 50%;
+}
+.more-wrap{
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.more-btn{
+  color: #fff;
+  font-size: 28rpx;
+  padding: 5rpx 20rpx;
+  border-radius: 30rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/components/projects.vue b/pages/home/components/projects.vue
new file mode 100644
index 0000000..12433e3
--- /dev/null
+++ b/pages/home/components/projects.vue
@@ -0,0 +1,130 @@
+<template>
+  <view class="projects">
+    <view class="tabs-wrap">
+      <view 
+        @click="handleTab(item.value)" 
+        class="tab-item" 
+        :class="{
+          'tab-isActived': actived === item.value
+        }" 
+        v-for="(item, index) in tabs" 
+        :key="index">
+        <view 
+          :class="{
+            'tab-isActived': actived === item.value,
+            'no-actived-1': actived === 2 && item.value === 1,
+            'no-actived-2': actived === 1 && item.value === 2,
+            'no-actived-3': actived === 3 && item.value === 2,
+            'no-actived-4': actived === 2 && item.value === 3,
+          }"
+        >{{ item.name }}</view>
+      </view>
+    </view>
+    <view 
+      class="content"
+      :class="{
+        'first-one': actived === 1,
+        'last-one': actived === 3
+       }"
+      
+    >
+      <recommend v-if="actived === 1" :landmarkDataId="landmarkDataId"></recommend>
+      <policy v-if="actived === 2" :landmarkDataId="landmarkDataId"></policy>
+      <serviec v-if="actived === 3" :landmarkDataId="landmarkDataId"></serviec>
+    </view>
+  </view>
+</template>
+
+<script>
+import recommend from './recommend.vue'
+import policy from './policy.vue'
+import serviec from './serviec.vue'
+export default {
+  components: {
+    recommend,
+    policy,
+    serviec
+  },
+  props: {
+    landmarkDataId: null
+  },
+  data() {
+    return {
+      actived: 1,
+      tabs: [
+        {name: '企业推荐', value: 1},
+        {name: '政策', value: 2},
+        {name: '服务', value: 3},
+      ]
+    }
+  },
+  methods: {
+    handleTab(value) {
+      this.actived = value
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.fit-box-inner{
+  background: #f0f0f0;
+  width: initial;
+  height: inherit;
+  width: 40rpx;
+}
+.first-one{
+  border-radius: 0 24rpx 24rpx 24rpx !important;
+}
+.last-one{
+  border-radius: 24rpx 0  24rpx 24rpx !important;
+}
+.fit-box{
+  width: 40rpx;
+  height: initial;
+  background: #fff;
+  display: flex;
+}
+.projects{
+  padding: 20rpx;
+}
+.tabs-wrap{
+  display: flex;
+  justify-content: space-between;
+}
+.tab-item{
+  text-align: center;
+  flex: 1;
+  font-size: 32rpx;
+  font-weight: bold;
+  background: #fff;
+  view{
+    padding: 20rpx 0;
+    background: #f0f0f0;
+    width: inherit;
+    height: inherit;
+  }
+}
+.no-actived-1{
+  border-radius: 0 0 24rpx 0 !important;
+}
+.no-actived-2{
+  border-radius: 0 0  0 24rpx !important;
+}
+.no-actived-3{
+  border-radius: 0 0 24rpx 0 !important;
+}
+.no-actived-4{
+  border-radius: 0 0  0 24rpx !important;
+}
+.tab-isActived{
+  background: #fff !important;
+  border-radius: 24rpx 24rpx 0 0 !important;
+  position: relative;
+}
+.content{
+  background: #fff;
+  padding: 20rpx 10rpx;
+  border-radius: 24rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/components/recommend.vue b/pages/home/components/recommend.vue
new file mode 100644
index 0000000..6ddab86
--- /dev/null
+++ b/pages/home/components/recommend.vue
@@ -0,0 +1,134 @@
+<template>
+  <view class="recommend">
+    <view class="list-item" v-for="(item, index) in currentList" :key="index" @click="toStore(item.hotelId)">
+      <view class="v12-justify-start v12-align-center">
+        <view class="log-img">
+          <image class="log-img" :src="item.logo" mode="aspectFit|aspectFill|widthFix"></image>
+        </view>
+        <view class="item-title one-t">{{ item.name }}</view>
+      </view>
+      <view class="item-action-wrap v12-primary">
+        点击查看
+        <view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733" size="8"></u-icon></view>
+      </view>
+    </view>
+    <view class="more-wrap" v-if="isMore ? isMore : list.length > 3">
+      <view class="more-btn v12-primary" @click="showMore">
+        {{ isMore ? '收起' : '查看更多' }}
+        <view class="item-action v12-white"><u-icon name="arrow-right" color="#C52733 " size="12"></u-icon></view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import {
+  getPorjectRecommend,
+} from "@/api/product"
+export default {
+  props: {
+    landmarkDataId: null
+  },
+  data() {
+    return {
+      list: [],
+      currentList: [],
+      isMore: false
+    }
+  },
+  mounted() {
+    getPorjectRecommend({landmarkDataId: this.landmarkDataId}).then(res => {
+      this.list = res.data
+      if(this.isMore) {
+        this.currentList = this.list
+      } else {
+        this.currentList = this.list.filter((item, index) => index < 3)
+      }
+    })
+  },
+  methods: {
+    toStore(id) {
+      if (!id) {
+        return
+      }
+      uni.navigateTo({
+        url: '/pagesInn/inn/innHome?id=' + id 
+      })
+    },
+    showMore() {
+      this.isMore = !this.isMore
+      if(this.isMore) {
+        this.currentList = this.list
+      } else {
+        this.currentList = this.list.filter((item, index) => index < 3)
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.more-btn{
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .item-action{
+    width: 20rpx;
+    height: 20rpx;
+    margin-left: 10rpx;
+    padding: 5rpx;
+  }
+}
+.recommend{
+  padding: 20rpx;
+  background: #f0f0f0;
+  border-radius: 24rpx;
+}
+.list-item{
+  display: flex;
+  justify-content: space-between;
+  background: #fff;
+  margin-bottom: 20rpx;
+  border-radius: 24rpx;
+  align-items: center;
+  padding: 10rpx 20rpx;
+}
+.item-action-wrap{
+  font-size: 22rpx;
+  display: flex;
+  align-items: center;
+  border-radius: 30rpx;
+  color: #fff;
+  padding: 5rpx 10rpx;
+}
+.item-action{
+  width: 20rpx;
+  height: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  margin-left: 10rpx;
+}
+.item-title{
+  font-size: 26rpx;
+  color: #333;
+  margin-left: 20rpx;
+}
+.log-img{
+  width: 68rpx;
+  height: 68rpx;
+  border-radius: 50%;
+}
+.more-wrap{
+  display: flex;
+  align-content: center;
+  justify-content: center;
+}
+.more-btn{
+  color: #fff;
+  font-size: 28rpx;
+  padding: 5rpx 20rpx;
+  border-radius: 30rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pages/home/components/serviec.vue b/pages/home/components/serviec.vue
new file mode 100644
index 0000000..ef990df
--- /dev/null
+++ b/pages/home/components/serviec.vue
@@ -0,0 +1,17 @@
+<template>
+  <view class="service">
+    服务
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    landmarkDataId: null
+  }
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file
diff --git a/pages/home/landMark.vue b/pages/home/landMark.vue
index 78715cb..27693d5 100644
--- a/pages/home/landMark.vue
+++ b/pages/home/landMark.vue
@@ -1,87 +1,76 @@
 <template>
   <view class="pkg-product-land-mark">
     <view v-if="isLoad">
-      <view class="top-box">
-        <view class="nav flex">
-          <view
-            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 class="top-wrap">
+        <view class="top-box">
+          <view class="nav flex">
+            <view
+              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>
-        <view class="view-box">
-          <view class="map-box">
-            <image
-              :src="mapData.mapImage"
-              mode="widthFix"
-              class="img-map"
-            />
+          <view class="view-box">
+            <view class="map-box">
+              <image
+                :src="mapData.mapImage"
+                mode="widthFix"
+                class="img-map"
+              />
+            </view>
           </view>
         </view>
       </view>
       <view
-        v-if="mapData.middleImage"
         class="middle-img-wrap"
       >
         <image
+          v-if="mapData.middleImage"
           :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"
-            @click="goGoods(item.productId)"
-          >
-            <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 class="tabs-wrap">
+          <view @click="handleTab(item.value)" :class="{ 'tab-actived' : item.value === actived }" class="tab-item"  v-for="(item, index) in tabs" :key="index">{{ item.name }}</view>
         </view>
-        <image
-          v-if="isCompleteLoadGood"
-          :src="webUrl + '/home/no-data-bg.png'"
-          mode="widthFix"
-          class="loadend"
-        />
       </view>
-      <image
-        v-if="goods.length === 0"
-        :src="webUrl + '/20231023131208675588.png'"
-        class="img-nodata"
-        mode="scaleToFill"
-      />
+      <view  class="list-wrap">
+        <view v-if="actived === 1">
+          <projects :landmarkDataId="landmarkDataId"></projects>
+        </view>
+        <view v-if="actived === 2">
+          <culture :landmarkDataId="landmarkDataId"></culture>
+        </view>
+        <view v-if="actived === 3">
+          <information :landmarkDataId="landmarkDataId"></information>
+        </view>
+        <view v-if="actived === 4">
+          <goods :goods="goods" v-if="goods.length > 0"></goods>
+          <image
+            v-if="isCompleteLoadGood"
+            :src="webUrl + '/home/no-data-bg.png'"
+            mode="widthFix"
+            class="loadend"
+          />
+          </view>
+          <image
+            v-if="goods.length === 0"
+            :src="webUrl + '/20231023131208675588.png'"
+            class="img-nodata"
+            mode="scaleToFill"
+          />
+        </view>
+
     </view>
     <goo-skeleton
       v-else
@@ -96,12 +85,29 @@ import {
   getProvinceGoods,
   getProvinceList
 } from "@/api/product"
+import goods from "./components/goods.vue"
 import { pageListenMixins } from '@/mixins/pageListenMixins'
+import projects from './components/projects.vue'
+import culture from "./components/culture.vue"
+import information from "./components/information.vue"
 export default {
   name: 'LandMarkPage',
+  components: {
+    goods,
+    projects,
+    culture,
+    information
+  },
   mixins: [pageListenMixins],
   data() {
     return {
+      actived: 1,
+      tabs: [
+        {name: '项目', value: 1},
+        {name: '文化', value: 2},
+        {name: '资讯', value: 3},
+        {name: '产品', value: 4},
+      ],
       webUrl: this.$VUE_APP_RESOURCES_URL,
       keyword: '',
       isLoad: false,
@@ -114,6 +120,11 @@ export default {
       pageKeyId: Object.freeze('landmarkGoodsIndex')
     }
   },
+  computed: {
+    landmarkDataId() {
+      return this.navList[this.navIndex] ? this.navList[this.navIndex]['id'] : null
+    }
+  },
   onLoad() {
     this.getNavList()
   },
@@ -128,6 +139,9 @@ export default {
     this.fetchGoods()
   },
   methods: {
+    handleTab(value) {
+      this.actived = value
+    },
     getNavList() {
       getProvinceList().then(({data}) => {
         this.navList = data
@@ -171,8 +185,28 @@ export default {
 </script>
 
 <style scoped lang="less">
+.tabs-wrap{
+  display: flex;
+  justify-content: space-around;
+  padding: 20rpx 20rpx 0;
+  color: #333;
+  font-weight: bold;
+  font-size: 36rpx;
+}
+.tab-item{
+
+}
+.tab-actived{
+  color: #fff;
+  font-weight: bold;
+  background: linear-gradient(to right, #C52733 0%, rgba(211,92,101,0.91) 54%, rgba(255,255,255,0.62) 100%);
+  border-radius: 38rpx 0rpx 0 38rpx;
+  padding: 0 20rpx;
+}
+.top-wrap{
+  padding: 20rpx 20rpx 0;
+}
 .pkg-product-land-mark {
-  padding: 20rpx;
   background: #f0f0f0;
   .top-box {
     border-radius: 20rpx;
@@ -219,73 +253,14 @@ export default {
   }
   .middle-img-wrap {
     margin: 20rpx 0 0 0;
+    background: #fff;
+    padding: 20rpx;
     .img {
       display: block;
       width: 100%;
       border-radius: 20rpx;
     }
   }
-  .list-box {
-    margin-top: 24rpx;
-    .item {
-      position: relative;
-      width: 344rpx;
-      margin-right: 22rpx;
-      margin-bottom: 22rpx;
-      border-radius: 20rpx;
-      background: #FFFFFF;
-      overflow: hidden;
-      .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: 156rpx;
-        padding: 8rpx 8rpx 18rpx 8rpx;
-        .more-t {
-          font-size: 28rpx;
-          line-height: 36rpx;
-          color: #333;
-        }
-        .desc {
-          padding: 5rpx 0;
-          height: 34rpx;
-          color: #FFC543;
-          font-size: 24rpx;
-        }
-        .price {
-          font-size: 40rpx;
-          line-height: 40rpx;
-          font-weight: bold;
-          color: #C52733;
-        }
-        .btn {
-          display: block;
-          width: 48rpx;
-          height: 48rpx;
-        }
-      }
-    }
-    .item:nth-child(2n) {
-      margin-right: 0;
-    }
-  }
-  .list-wrap {
-    margin: 20rpx 0 0 0;
-    .loadend {
-      width: 100%;
-    }
-  }
   .img-nodata {
     position: relative;
     top: 0;