From 566ef9de61525a28d1ac43da9d3a99c4aa37058d Mon Sep 17 00:00:00 2001
From: modendeveloper <modendeveloper@163.com>
Date: Tue, 8 Oct 2024 00:25:03 +0800
Subject: [PATCH] =?UTF-8?q?Feat=EF=BC=9A=E5=BA=B7=E5=85=BB=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/css/v12-style.less               |   7 +-
 pages.json                              |  37 +++-
 pkg_product/views/expoDetails.vue       | 119 +++++++++++
 pkg_product/views/expoList.vue          |  60 ++++++
 pkg_product/views/healthFoodDetails.vue | 238 ++++++++++++++++++++++
 pkg_product/views/healthFoods.vue       | 249 ++++++++++++++++++++++++
 pkg_product/views/healthList.vue        |  58 ++++--
 pkg_product/views/healthSanctum.vue     | 152 +++++++++++++++
 8 files changed, 901 insertions(+), 19 deletions(-)
 create mode 100644 pkg_product/views/expoDetails.vue
 create mode 100644 pkg_product/views/expoList.vue
 create mode 100644 pkg_product/views/healthFoodDetails.vue
 create mode 100644 pkg_product/views/healthFoods.vue
 create mode 100644 pkg_product/views/healthSanctum.vue

diff --git a/assets/css/v12-style.less b/assets/css/v12-style.less
index a5a4b62..3191b86 100644
--- a/assets/css/v12-style.less
+++ b/assets/css/v12-style.less
@@ -3,8 +3,8 @@
 @dark-color: #333333;
 @white-color: #fff;
 
-@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543;
-@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow;
+@colors: #C52733, #333333, #fff, #666, #F0F0F0, #999999, #E92727, #FFC543, #69C573;
+@classnames: primary, dark, white, secondary-dark, grey, dark1, red, yellow, success;
 /*=====================================*/ 
 
 each(@colors, {
@@ -192,6 +192,9 @@ each(@colors, {
 .v12-full-width{
   width: 100%;
 }
+.v12-nowrap{
+  white-space: nowrap
+}
 
 
 
diff --git a/pages.json b/pages.json
index d962e7b..96a5a28 100644
--- a/pages.json
+++ b/pages.json
@@ -540,7 +540,42 @@
         {
           "path": "views/healthList",
           "style": {
-            "navigationBarTitleText": "康养 · 食材"
+            "navigationBarTitleText": "选择城市"
+          }
+        },
+        {
+          "path": "views/expoList",
+          "style": {
+            "navigationBarTitleText": "康养生活",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
+        {
+          "path": "views/expoDetails",
+          "style": {
+            "navigationBarTitleText": "康养生活",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
+        {
+          "path": "views/healthSanctum",
+          "style": {
+            "navigationBarTitleText": "康养生活",
+            "navigationBarBackgroundColor": "#FFFFFF"
+          }
+        },
+        {
+          "path": "views/healthFoods",
+          "style": {
+            "navigationBarTitleText": "康养生活",
+            "navigationBarBackgroundColor": "#FAEED8"
+          }
+        },
+        {
+          "path": "views/healthFoodDetails",
+          "style": {
+            "navigationBarTitleText": "康养生活",
+            "navigationBarBackgroundColor": "#FFFFFF"
           }
         },
         {
diff --git a/pkg_product/views/expoDetails.vue b/pkg_product/views/expoDetails.vue
new file mode 100644
index 0000000..df0bc77
--- /dev/null
+++ b/pkg_product/views/expoDetails.vue
@@ -0,0 +1,119 @@
+<template>
+  <view class="expo-details">
+    <view class="video-wrap">
+		  <video id="ky-video" class="ky-video"  @error="videoErrorCallback" :show-fullscreen-btn="false" src="https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/2minute-demo.mp4"  autoplay controls></video>
+    </view>
+    <view class="expo-item">
+      中国昆明第九届国际大健康暨养生养老产业博览会
+    </view>
+    <view class="details-wrap v12-mt-3">
+      <view class="v12-font-bold v12-dark-text v12-font-32 v12-mb-3">展会信息</view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">主题</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">中国昆明第九届国际大健康暨养生养老产业博览会</view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">内容</view>
+        <view class="v12-font-24 v12-dark-text v12-ml-3">“中国(昆明)国际大健康养生养老产业博览会”创办于2017
+          年，由云南省民政厅、云南省老龄办、云南省贸促会共同发
+          起指导，早云南省商务厅、云南省投促局以及昆明市政府相
+          关部门支持下，至今已连续成功举办了八届，在国内同类型
+          展会中已具一定规模和影响力，被昆明市有关部门综合评估
+          为5A级博览会。
+        </view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">时间</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">2024年11月22日--2024年11月24日</view>
+      </view>
+      <view class="v12-justify-start v12-mb-3">
+        <view class="tag v12-success v12-white-text v12-font-20 v12-px-2 v12-py-1 v12-radius-50 v12-nowrap">地点</view>
+        <view class="v12-font-bold v12-font-28 v12-dark-text v12-ml-3">滇池国际会展中心</view>
+      </view>
+    </view>
+    <view class="more-wrap v12-mt-3">
+      <view class="v12-justify-between v12-align-center v12-mb-3">
+        <view class="v12-font-bold v12-font-32">其他展会</view>
+        <view class="v12-font-24" @click="toMore">查看更多</view>
+      </view>
+      <view 
+        v-for="(item, index) in moreList" 
+        :key="index" 
+        @click="getOther(item.id)"
+        class="v12-white v12-dark-text v12-font-bold v12-font-26 v12-mb-3 v12-radius-50 v12-pa-2">
+        {{ item.label }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default{
+  data() {
+    return {
+      keyword: '',
+      moreList: [
+        {id: 1, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 2, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 3, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 4, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 5, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+      ],
+      id: '',
+      details: {}
+    }
+  },
+  onLoad(opts) {
+    this.id = opts.id || ''
+    this.getDetails(this.id)
+  },
+  methods: {
+    videoErrorCallback(error) {
+      console.log(error);
+      
+    },
+    getDetails(id) {
+
+    },
+    getOther(id) {
+      this.id = id
+      this.getDetails(this.id)
+    },
+    toMore() {
+      uni.navigateTo({
+        url: '/pkg_product/views/expoList'
+      })
+    },
+
+  }
+}
+</script>
+<style lang="less" scoped>
+.ky-video{
+  height: 400rpx;
+  width: 100%;
+  border-radius: 20rpx;
+}
+.tag{
+  height: 30rpx;
+}
+.expo-details{
+  height: 100vh;
+  background: #fff;
+  padding: 20rpx;
+}
+.expo-item{
+  background-color: #f2f2f2;
+  border-radius: 100rpx;
+  font-size: 26rpx;
+  font-weight: bold;
+  margin-top: 20rpx;
+  padding: 20rpx;
+}
+.details-wrap, .more-wrap{
+  width: 100%;
+  background: #f2f2f2;
+  border-radius: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+</style>
\ No newline at end of file
diff --git a/pkg_product/views/expoList.vue b/pkg_product/views/expoList.vue
new file mode 100644
index 0000000..b8584fe
--- /dev/null
+++ b/pkg_product/views/expoList.vue
@@ -0,0 +1,60 @@
+<template>
+  <view class="expo-list">
+    <view class="search-wrap">
+      <u-search 
+        placeholder="请输入关键字查询" 
+        v-model="keyword"
+        shape="round"
+        :showAction="false"
+        ></u-search>
+    </view>
+    <view class="expo-wrap">
+      <view 
+        class="expo-item" 
+        v-for="(item, index) in expoList" 
+        :key="index"
+        @click="toDetails(item)"
+        >
+        {{ item.label }}
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default{
+  data() {
+    return {
+      keyword: '',
+      expoList: [
+        {id: 1, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 2, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 3, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 4, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+        {id: 5, label: '文山州麻栗坡县东南亚中药材集散综合开发项目'},
+      ]
+    }
+  },
+  methods: {
+    toDetails(item) {
+      uni.navigateTo({
+        url: '/pkg_product/views/expoDetails?id='+item.id
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.expo-list{
+  height: 100vh;
+  background: #fff;
+  padding: 20rpx;
+}
+.expo-item{
+  background-color: #f2f2f2;
+  border-radius: 100rpx;
+  font-size: 26rpx;
+  font-weight: bold;
+  margin-top: 20rpx;
+  padding: 20rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pkg_product/views/healthFoodDetails.vue b/pkg_product/views/healthFoodDetails.vue
new file mode 100644
index 0000000..b8fd672
--- /dev/null
+++ b/pkg_product/views/healthFoodDetails.vue
@@ -0,0 +1,238 @@
+<template>
+  <view class="food-wrap">
+    <view class="v12-mb-3 banner-wrap">
+      
+    </view>
+    <view class="inro-wrap v12-mb-3 ">
+      <view class="v12-font-36 v12-font-bold v12-dark-text v12-mb-3">淮山党参鹌鹑汤</view>
+      <view class="v12-font-28 v12-secondary-dark-text">淮山党参鹌鹑汤是一种具有补益作用的汤品，非常适合在
+        季节变换或身体虚弱时饮用</view>
+    </view>
+    <view class="details-list-wrap  v12-mb-3 ">
+      <view class="v12-justify-start v12-align-center">
+        <view class="primary-title">
+          <text class="v12-font-34 v12-font-bold">食材清单</text>
+          <view class="slider"></view>
+        </view>
+        <view class="v12-dark1-text v12-font-24 v12-ml-3">/ 新鲜的食材决定药膳的作用</view>
+      </view>
+      <view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
+        <view class="v12-font-28 v12-font-bold v12-mb-2">主料</view>
+        <view class="v12-d-grid-columns-2 primary-item-wrap">
+          <view v-for="(item, index) in primaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
+            <view class="primary-img"></view>
+            <view class="v12-ml-2">
+              <view class="v12-font-26 one-t v12-mb-1">{{ item.label }}</view>
+              <view class="v12-font-20 v12-primary v12-white-text v12-nowrap v12-px-2 v12-py-1 v12-radius-60">+加入团购食材</view>
+            </view>
+          </view>
+        </view>
+      </view>
+      <view class="v12-white v12-radius-20 v12-pa-2 v12-mt-3">
+        <view class="v12-font-28 v12-font-bold v12-mb-2">辅料</view>
+        <view class="v12-d-grid-columns-2 primary-item-wrap">
+          <view v-for="(item, index) in secondaryList" :key="index" class="primary-item v12-justify-start v12-align-center">
+            <view class="v12-ml-2">
+              <view class="v12-font-26 one-t v12-mb-1">
+                <text class="v12-mr-2 v12-font-bold">·</text>
+                <text>{{ item }}</text>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="step-wrap v12-mb-3">
+      <view class="step-title">
+        <view>烹饪步骤</view>
+        <view class="slider"></view>
+      </view>
+      <view class="steps v12-mt-3">
+        <view v-for="(item, index) in steps" :key="index" class="step-item">
+          <view class="step-img"></view>
+          <view class="v12-ml-2 step-info">
+            <view class="v12-font-26 v12-font-bold v12-mb-3">{{ item.label }}</view>
+            <view class="v12-font-26 v12-secondary-dark-text">{{ item.describle }}</view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="tips-wrap">
+      <view class="step-title">
+        <view>养生小tips</view>
+        <view class="slider"></view>
+      </view>
+      <view class="card-wrap v12-mt-3">
+        <view class="card-item">
+          <view class="card-tag v12-primary v12-white-text">选材</view>
+          <view class="v12-mt-6">
+            <view v-for="(item, index) in tips" :key="index">
+              <text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
+              <text class="v12-font-26 v12-dark-text">{{ item }}</text>
+            </view>
+          </view>
+        </view>
+        <view class="card-item v12-mt-3">
+          <view class="card-tag v12-primary v12-white-text">注意事项</view>
+          <view class="v12-mt-6">
+            <view v-for="(item, index) in tips" :key="index">
+              <text class="v12-primary-text v12-font-bold v12-mr-2">·</text>
+              <text class="v12-font-26 v12-dark-text">{{ item }}</text>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+  export default{
+    data() {
+      return {
+        tips: [
+          '鹌鹑：选择新鲜的鹌鹑，处理清洗干净，去除内脏和杂质',
+          '淮山：选择肉质雪白、无黑点的淮山，去皮切块后应立即',
+          '放入清水中浸泡，以防氧化变黑',
+          '党参：选择色泽黄亮、无霉变、无虫蛀的党参'
+        ],
+        primaryList: [
+          {img: '', label: '鹌鹑(2只)'},
+          {img: '', label: '鹌鹑(2只)'},
+          {img: '', label: '鹌鹑(2只)'},
+          {img: '', label: '鹌鹑(2只)'},
+        ],
+        secondaryList: [
+          '枸杞（适量）',
+          '姜片（适量）',
+          '盐（适量）',
+          '清水（适量）'
+        ],
+        steps: [
+          {img: '', label: '步骤1：', step: 1, describle: '所有食材洗净备用'},
+          {img: '', label: '步骤2：', step: 2, describle: '所有食材洗净备用'},
+          {img: '', label: '步骤3：', step: 3, describle: '所有食材洗净备用'},
+          {img: '', label: '步骤4：', step: 4, describle: '所有食材洗净备用'},
+        ]
+      }
+    }
+  }
+</script>
+<style lang="less" scoped>
+.card-tag{
+  width: fit-content;
+  padding: 10rpx 20rpx;
+  border-radius: 10rpx 0 20rpx 20rpx;
+  position: absolute;
+  top: -12rpx;
+}
+.card-tag::after{
+  content: '';
+    width: 0;
+    height: 0;
+    border-left: 8rpx solid transparent !important;
+    border-right: 8rpx solid transparent !important;
+    right: -4px;
+    border-top: 8rpx solid #7D393F !important;
+    border-bottom: 8rpx solid transparent!important;
+    position: absolute;
+    top: 4rpx;
+    rotate: 45deg;
+}
+.card-item{
+  position: relative;
+  background: #fff;
+  border-radius: 20rpx;
+  padding: 20rpx;
+}
+.tips-wrap{
+  background: #F2F2F2;
+  border-radius: 40rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.steps{
+  display: flex;
+  overflow: auto;
+
+}
+.step-info{
+  height: inherit;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.step-item{
+  min-width: 482rpx;
+  width: 482rpx;
+  height: 232rpx;
+  background: #fff;
+  border-radius: 20rpx;
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  margin-right: 24rpx;
+  padding: 0 20rpx;
+}
+.step-item:last-child{
+  margin-right: 0 !important;
+}
+.step-img{
+  width: 200rpx;
+  height: 200rpx;
+  background: rgba(195,126,126,0.39);
+  border-radius: 20rpx;
+}
+.step-title{
+  position: relative;
+  width: fit-content;
+  font-weight: bold;
+  font-size: 34rpx;
+}
+.step-wrap{
+  background: #F2F2F2;
+  border-radius: 40rpx;
+  padding: 20rpx 20rpx 30rpx 20rpx;
+  box-sizing: border-box;
+}
+.primary-item-wrap{
+  grid-column-gap: 20rpx;
+  grid-row-gap: 20rpx;
+
+}
+.primary-img{
+  width: 124rpx;
+  height: 90rpx;
+  background: rgba(63,20,20,0.39);
+  border-radius: 20rpx;
+}
+.primary-item{
+}
+.slider{
+  position: absolute;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(to right, #C52733 0%,  rgba(255,255,255,0) 100%);
+  border-radius: 6rpx;
+  bottom: 5rpx;
+}
+.primary-title{
+  position: relative;
+  width: fit-content;
+}
+.food-wrap{
+  min-height: 100vh;
+  background: #fff;
+  padding: 20rpx 20rpx 60rpx 20rpx;
+}
+.banner-wrap{
+  width: 100%;
+  height: 360rpx;
+  background: rgba(180,18,18,0.39);
+  border-radius: 40rpx;
+  box-sizing: border-box;
+}
+.details-list-wrap{
+  background: #F2F2F2;
+  border-radius: 40rpx;
+  padding: 20rpx 20rpx 30rpx 20rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pkg_product/views/healthFoods.vue b/pkg_product/views/healthFoods.vue
new file mode 100644
index 0000000..e2ac714
--- /dev/null
+++ b/pkg_product/views/healthFoods.vue
@@ -0,0 +1,249 @@
+<template>
+  <view class="health-foods">
+    <view class="v12-justify-center">
+      <view class="v12-mr-3 v12-radius-100 v12-dark1 v12-dark-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold" @click="toSanctun">养生圣地</view>
+      <view class="v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold" >养生食材</view>
+    </view>
+    <view class="v12-justify-between v12-align-center v12-mt-5">
+      <view class="v12-font-28 v12-secondary-dark-text v12-mr-3">昆明市</view>
+      <view class="flex-1"><u-search :showAction="false"></u-search></view>
+    </view>
+    <view class="v12-justify-between swap">
+      <view v-for="(item, index) in foodItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3" @click="toDetails">
+        <view class="trave-item"></view>
+        <view class="trave-btn">{{ item.name }}</view>
+      </view>
+    </view>
+    <view class="rank-wrap v12-mt-3">
+      <view class="title-img"></view>
+      <view class="rank-items-wrap">
+        <view class="bee-rank">
+          <view class="rank-title-wrap">
+            <view class="rank-title v12-font-34 v12-font-bold">蜂蜜榜</view>
+          </view>
+          <view class="v12-px-2">
+            <view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
+              <view class="rank-tag">{{ index + 1 }}</view>
+              <view class="rank-img"></view>
+              <view class="v12-ml-2">
+                <view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
+                <view class="v12-font-22 more-t">{{ item.intro }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+        <view class="drug-rank">
+          <view class="rank-title-wrap">
+            <view class="rank-title v12-font-34 v12-font-bold">药膳榜</view>
+          </view>
+          <view class="v12-px-2">
+            <view class="rank-item v12-justify-start v12-align-center v12-mb-4" v-for="(item, index) in rankItems" :key="index">
+              <view class="rank-tag">{{ index + 1 }}</view>
+              <view class="rank-img"></view>
+              <view class="v12-ml-2">
+                <view class="v12-font-bold v12-font-24 one-t" style="width: 160rpx">{{ item.label }}</view>
+                <view class="v12-font-22 more-t">{{ item.intro }}</view>
+              </view>
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+    <view class="recommend-wrap v12-mt-3">
+      <view class="recommend-title v12-px-3">
+        <text class="v12-dark-text v12-font-36 v12-font-bold">食补推荐</text>
+        <view class="slider"></view>
+      </view>
+      <view class="recommends v12-mt-3">
+        <view class="recommend-item" v-for="(item, index) in recommendItems" :key="index">
+          <view class="recommend-img">
+            <view class="name-wrap v12-white-text v12-text-center">{{ item.name }}</view>
+          </view>
+          <view class="v12-pa-2 v12-font-bold v12-font-28 more-t">{{  item.title }}</view>
+          <view class="v12-justify-between v12-primary-text v12-font-bold">
+            <view>
+              <text class="v12-font-32">￥</text>
+              <text class="v12-font-36">{{ item.price }}</text>
+            </view>
+            <view>
+              gouwuche
+            </view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default{
+  data() {
+    return {
+      foodItems: [
+        {img: '', value: '', name: '淮山党参鹌鹑汤'},
+        {img: '', value: '', name: '淮山党参鹌鹑汤'},
+        {img: '', value: '', name: '淮山党参鹌鹑汤'},
+        {img: '', value: '', name: '淮山党参鹌鹑汤'},
+      ],
+      rankItems: [
+        {label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 1, img: ''},
+        {label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 2, img: ''},
+        {label: '原始森林野生蜂蜜', intro: '自然野生云南蜂蜜气味香甜可口，口感...', rank: 3, img: ''},
+      ],
+      recommendItems: [
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+        {img: '', title: '阿胶糕 手工补品气血固原膏营养礼盒', name: '阿胶糕', price: '39.8'},
+      ]
+    }
+  },
+  methods: {
+    toSanctun() {
+      uni.navigateTo({
+        url: '/pkg_product/views/healthSanctum'
+      })
+    },
+    toDetails() {
+      uni.navigateTo({
+        url: '/pkg_product/views/healthFoodDetails'
+      })
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.recommends{
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 20rpx;
+  grid-row-gap: 20rpx;
+}
+.recommend-img{
+  width: 344rpx;
+  height: 344rpx;
+  background: #333;
+  border-radius: 20rpx;
+  position: relative;
+  overflow: hidden;
+}
+.name-wrap{
+  position: absolute;
+  background: rgba(0,0,0,0.2);
+  width: 100%;
+  padding: 8px 0;
+  bottom: 0;
+}
+.recommend-item{
+  height: 500rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+}
+.recommend-title{
+  position: relative;
+  width: fit-content;
+}
+.slider{
+  position: absolute;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(to right, #C52733 0%,  rgba(255,255,255,0) 100%);
+  border-radius: 6rpx;
+  bottom: 5rpx;
+}
+.rank-tag{
+  width: 50rpx; /* 宽度 */
+  height: 55rpx; /* 高度，根据正六边形的几何特性计算 */
+  background-color: #3498db; /* 背景颜色 */
+  clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
+  position: absolute;
+  text-align: center;
+  color: #FFFFFF;
+  font-size: 20rpx;
+  line-height: 55rpx;
+  top: -22.5rpx;
+}
+.rank-img{
+  min-width: 104rpx;
+  width: 104rpx;
+  height: 104rpx;
+  background: #666;
+  border-radius: 20rpx;
+}
+.bee-rank, .drug-rank{
+  width: 100%;
+  background: #999;
+  border-radius: 20rpx;
+  overflow: auto;
+  box-sizing: border-box;
+}
+.rank-title-wrap{
+  height: 140rpx;
+  display: flex;
+  align-items: center;
+}
+.rank-title{
+  width: 200rpx;
+  padding: 10rpx 5rpx;
+  background: linear-gradient(to right, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+}
+.rank-items-wrap{
+  background: #E2BC8D;
+  border-radius: 20rpx;
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-column-gap: 20rpx;
+  padding: 20rpx;
+  box-sizing: border-box;
+}
+.rank-item{
+  width: 100%;
+  height: 116rpx;
+  background: #FFFFFF;
+  border-radius: 20rpx;
+  padding: 0 10rpx;
+  box-sizing: border-box;
+  position: relative;
+}
+.title-img{
+  height: 132rpx;
+  width: 100%;
+}
+.health-foods{
+  height: 100vh;
+  background-color: #FAEED8;
+  padding: 20rpx                                                                                                                                                                                                                                                                        ;
+}
+.flex-1{
+  flex: 1;
+}
+.swap{
+  overflow: auto;
+}
+.trave-item-wrap{
+  position: relative;
+}
+.trave-btn{
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 30rpx;
+  text-align: center;
+  width: 212rpx;
+  background: rgba(255,255,255,0.9);
+  border-radius: 60rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  padding: 10rpx 20rpx;
+}
+.trave-item{
+  width: 382rpx;
+  height: 272rpx;
+  background: rgba(230,178,178,0.39);
+  border-radius: 20rpx;
+}
+</style>
\ No newline at end of file
diff --git a/pkg_product/views/healthList.vue b/pkg_product/views/healthList.vue
index 5a3136d..286c1d6 100644
--- a/pkg_product/views/healthList.vue
+++ b/pkg_product/views/healthList.vue
@@ -1,20 +1,20 @@
 <template>
   <view class="pkg-product-list">
     <view class="first-half">
-      <view class="search-box flex jc-between ai-center">
-        <input
-          v-model="keyword"
-          type="text"
-          placeholder="搜索内容"
-          placeholder-style="color:#949494"
-          @confirm="searchClick"
-        >
+      <view class="search-box flex v12-justify-start ai-center">
         <image
           :src="webUrl+'/20220903142935869059.png'"
-          class="icon"
+          class="icon v12-mr-3"
           mode="scaleToFill"
           @click="searchClick"
         />
+        <input
+          v-model="keyword"
+          type="text"
+          placeholder="搜索城市"
+          placeholder-style="color:#949494"
+          @confirm="searchClick"
+        >
       </view>
       <swiper
         v-if="bannerList.length > 0"
@@ -36,7 +36,7 @@
           />
         </swiper-item>
       </swiper>
-      <view
+      <!-- <view
         v-show="tabIndex === 0"
         class="tab-box flex jc-center ai-center"
       >
@@ -65,6 +65,10 @@
           class="active"
           @click="changeTab(1)"
         />
+      </view> -->
+      <view class="v12-justify-start v12-align-center news-wrap v12-radius-100">
+        <view class="v12-font-bold v12-primary v12-white-text v12-mr-2 v12-pa-2 v12-radius-100 news-title">最新展会</view>
+        <view class="v12-font-28 v12-dark-text one-t" @click="toExpo">中国昆明第九届国际大健康暨养生养老博览会</view>
       </view>
     </view>
     <view class="body-box">
@@ -72,15 +76,16 @@
         <view
           v-for="(item, index) in asideList"
           :key="index"
-          :class="index === asideIndex ? 'active' : ''"
-          class="item flex jc-center ai-center"
-          @click="asideTap(index)"
+          :class="index === asideIndex ? 'actived' : ''"
+          class="item flex jc-center ai-center "
+          @click="asideTap(index, item.label)"
         >
           <text class="one-t">{{ item.label }}</text>
         </view>
       </view>
       <view class="article-box">
-        <scroll-view
+          <view class="v12-mt-2 v12-ml-3 v12-px-1 v12-font-28 v12-dark-text v12-font-bold label-wrap">{{ label }}</view>
+          <scroll-view
           v-if="dataList.length > 0"
           :style="{'height':listHeight}"
           :enable-flex="true"
@@ -169,7 +174,8 @@ export default {
       asideList: [],
       asideIndex: 0,
       dataList: [],
-      pageKeyId: Object.freeze('wellnessFoodIndex')
+      pageKeyId: Object.freeze('wellnessFoodIndex'),
+      label: ''
     }
   },
   onLoad() {
@@ -182,9 +188,15 @@ export default {
       })
       fetchCity(4).then(({data}) => {
         this.asideList = data.group
+        this.label = this.asideList[this.asideIndex].label
         this.searchReq()
       })
     },
+    toExpo() {
+      uni.navigateTo({
+        url: '/pkg_product/views/expoDetails'
+      })
+    },
     changeTab(index) {
       if (this.asideList.length === 0) return
       if (index === this.tabIndex) return
@@ -239,10 +251,11 @@ export default {
         }
       })
     },
-    asideTap(index) {
+    asideTap(index, label) {
       this.asideIndex = index
       this.page = 1
       this.dataList = []
+      this.label = label
       this.searchReq()
     },
     goStore(id) {
@@ -261,6 +274,19 @@ export default {
 
 <style scoped lang="less">
 @import "@/assets/css/product.less";
+.news-title{
+  white-space: nowrap;
+}
+.actived, .label-wrap{
+  border-left: 6rpx solid #C52733;
+  color: #C52733;
+  font-weight: bold;
+}
+.news-wrap{
+  background: rgba(233,233,233,0.39);
+  width: 686rpx;
+  margin: 0 auto;
+}
 
 .pkg-product-list {
   height: 100vh;
diff --git a/pkg_product/views/healthSanctum.vue b/pkg_product/views/healthSanctum.vue
new file mode 100644
index 0000000..7c3bbc9
--- /dev/null
+++ b/pkg_product/views/healthSanctum.vue
@@ -0,0 +1,152 @@
+<template>
+  <view class="sanctum-wrap">
+    <view class="v12-justify-center">
+      <view class="v12-mr-3 v12-radius-100 v12-primary v12-white-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold">养生圣地</view>
+      <view class="v12-radius-100 v12-grey v12-dark-text v12-px-5 v12-py-2  v12-font-28 v12-font-bold" @click="toFoods">养生食材</view>
+    </view>
+    <view class="v12-justify-between v12-align-center v12-mt-5">
+      <view class="v12-font-28 v12-secondary-dark-text v12-mr-3">昆明市</view>
+      <view class="flex-1"><u-search :showAction="false"></u-search></view>
+    </view>
+    <view class="v12-justify-between swap">
+      <view v-for="(item, index) in traveItems" :key="index" class="trave-item-wrap v12-mr-3 v12-mt-3">
+        <view class="trave-item"></view>
+        <view class="trave-btn">旅居预约</view>
+      </view>
+    </view>
+    <view class="v12-justify-between v12-align-center v12-px-3 v12-mt-3">
+      <view 
+        class="tab v12-font-bold v12-font-34 v12-dark-text " 
+        v-for="(tab, index) in tabs" 
+        @click="handleTab(index)"
+        :key="index">
+        <text>{{ tab.label }}</text>
+        <view :class="{'slider': index === actived}"></view>
+      </view>
+    </view>
+    <view class="v12-justify-between sanctup-items v12-mt-3">
+      <view v-for="(item, index) in items" :key="index" class="v12-pa-1">
+        <view class="img">
+          <view class="v12-white-text v12-font-weight-300 address">{{ item.adress }}</view>
+        </view>
+        <view class="v12-font-bold v12-font-28 more-t">{{ item.title }}</view>
+        <view class="v12-justify-start v12-align-center v12-my-2">
+          <view class="atr"></view>
+          <view class="v12-font-26 v12-ml-2 v12-dark-text one-t">{{ item.name }}</view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      tabs: [
+        {label: '泡温泉', value: 0},
+        {label: '养生茶馆', value: 1},
+        {label: '康养生活', value: 2},
+        {label: '养生食府', value: 3},
+      ],
+      items: [
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+        {img: '',adress: '昆明', title: '千年矿泉富含硅酸等等24种微量元素', atr: '', name: '末西梓言民宿'},
+      ],
+      traveItems: [
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+        {img: '', value: ''},
+      ],
+      actived: 0
+    }
+  },
+  methods: {
+    handleTab(index) {
+      this.actived = index
+    },
+    toFoods() {
+      uni.navigateTo({
+        url: '/pkg_product/views/healthFoods'
+      })
+    },
+  }
+}
+</script>
+<style lang="less" scoped>
+.flex-1{
+  flex: 1;
+}
+.swap{
+  overflow: auto;
+}
+.trave-item-wrap{
+  position: relative;
+}
+.trave-btn{
+  position: absolute;
+  left: 0;
+  right: 0;
+  margin: auto;
+  bottom: 30rpx;
+  text-align: center;
+  width: 212rpx;
+  background: rgba(255,255,255,0.9);
+  border-radius: 60rpx;
+  font-size: 28rpx;
+  font-weight: bold;
+  padding: 10rpx 20rpx;
+}
+.trave-item{
+  width: 382rpx;
+  height: 272rpx;
+  background: rgba(230,178,178,0.39);
+  border-radius: 20rpx;
+}
+.address{
+  position: absolute;
+  left: 30rpx;
+  bottom: 30rpx;
+}
+.sanctup-items{
+  display: grid;
+  grid-template-columns: 50% 50%;
+}
+.atr{
+  width: 52rpx;
+  height: 52rpx;
+  background: #707070;
+  border-radius: 50%;
+}
+.img{
+  width: 320rpx;
+  height: 320rpx;
+  background: #707070;
+  border-radius: 16rpx;
+  position: relative;
+}
+.sanctum-wrap{
+  height: 100vh;
+  background-color: #fff;
+  padding: 20rpx                                                                                                                                                                                                                                                                        ;
+}
+.tab{
+  position: relative;
+}
+.slider{
+  position: absolute;
+  width: 100%;
+  height: 6rpx;
+  background: linear-gradient(to right, #C52733 0%,  rgba(255,255,255,0) 100%);
+  border-radius: 6rpx;
+  bottom: 5rpx;
+}
+</style>
\ No newline at end of file