Merge branch 'v251231-fature-home'

# Conflicts:
#	pages/home/index.vue

App.vue

@@ -158,6 +158,8 @@
 	@import "@/uni_modules/uview-ui/index.scss";
 	@import '@/assets/css/commonTheme.css';
 	@import '@/assets/css/common.scss';
+	@import '@/assets/style/global.scss';
+	@import '@/assets/style/index.scss';
 </style>
 <style lang="less">
 	/*每个页面公共css */

assets/style/global.scss

@@ -0,0 +1,624 @@
+/*
+ * @Author: jmy
+ * @Date: 2025-12-31 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-12-13 16:48:17
+ * @Description: 
+*/
+/* 设置字体为苹方（PingFang SC），若系统无该字体则再次回退到 PingFang SC；强制正常字形；禁止文本大小写转换 */
+view,
+text {
+  font-family: PingFang SC, PingFang SC;
+  font-style: normal;
+  text-transform: none;
+}
+view{
+  box-sizing: border-box;
+}
+
+// 导航栏头部
+.uni-navbar__header {
+  display: flex;
+  align-items: center;
+  padding: 0 24rpx !important;
+  box-sizing: border-box;
+}
+
+.uni-navbar__header-container {
+  padding: 0 !important;
+}
+.scs-headr-default {
+		width: 73%;
+	}
+/* #ifndef APP-NVUE */
+/* Display */
+.flex {
+  display: flex;
+  display: -webkit-flex;
+}
+
+/* Flex Direction */
+/* 主轴方向：水平，起点在左侧 */
+.flex-row {
+  flex-direction: row;
+  -webkit-flex-direction: row;
+}
+
+/* 主轴方向：水平，起点在右侧 */
+.flex-row-reverse {
+  flex-direction: row-reverse;
+  -webkit-flex-direction: row-reverse;
+}
+
+/* 主轴方向：垂直，起点在上方 */
+.flex-column {
+  flex-direction: column;
+  -webkit-flex-direction: column;
+}
+
+/* 主轴方向：垂直，起点在下方 */
+.flex-column-reverse {
+  flex-direction: column-reverse;
+  -webkit-flex-direction: column-reverse;
+}
+
+/* Flex Wrap */
+/* 主轴方向换行：空间不足时自动换行*/
+.flex-wrap {
+  flex-wrap: wrap;
+  -webkit-flex-wrap: wrap;
+}
+
+/*主轴方向不换行：所有子项强制单行/列*/
+.flex-nowrap {
+  flex-wrap: nowrap;
+  -webkit-flex-wrap: nowrap;
+}
+
+/*主轴方向反向换行：空间不足时自动换行，且行序反转*/
+.flex-wrap-reverse {
+  flex-wrap: wrap-reverse;
+  -webkit-flex-wrap: wrap-reverse;
+}
+
+/* Justify Content */
+/*主轴对齐：子项在主轴起点对齐*/
+.justify-start {
+  justify-content: flex-start;
+  -webkit-justify-content: flex-start;
+}
+
+/*主轴对齐：子项在主轴起点对齐*/
+.justify-center {
+  justify-content: center;
+  -webkit-justify-content: center;
+}
+
+/* 主轴对齐：子项在主轴终点对齐 */
+.justify-end {
+
+  justify-content: flex-end;
+  -webkit-justify-content: flex-end;
+}
+
+/* 主轴对齐：首尾子项贴边，其余子项间距相等 */
+.justify-between {
+
+  justify-content: space-between;
+  -webkit-justify-content: space-between;
+}
+
+/* 主轴对齐：每个子项两侧的间距相等，首尾子项与容器边缘间距为中间间距的一半 */
+.justify-around {
+
+  justify-content: space-around;
+  -webkit-justify-content: space-around;
+}
+
+
+/* 主轴对齐：项目之间与两端间距完全相等 */
+.justify-evenly {
+  justify-content: space-evenly;
+  -webkit-justify-content: space-evenly;
+}
+
+/* Align Items */
+/* 交叉轴对齐：子项顶部对齐 */
+.items-start {
+  align-items: flex-start;
+  -webkit-align-items: flex-start;
+}
+
+/* 交叉轴对齐：子项居中对齐 */
+.items-center {
+  align-items: center;
+  -webkit-align-items: center;
+}
+
+/* 交叉轴对齐：子项底部对齐 */
+.items-end {
+  align-items: flex-end;
+  -webkit-align-items: flex-end;
+}
+
+/* 交叉轴对齐：子项拉伸填满容器高度 */
+.items-stretch {
+  align-items: stretch;
+  -webkit-align-items: stretch;
+}
+
+/* 交叉轴对齐：子项基线对齐 */
+.items-baseline {
+  align-items: baseline;
+  -webkit-align-items: baseline;
+}
+
+
+
+
+/* 快捷 flex 值：占满剩余空间 */
+.flex-1 {
+  flex: 1;
+  -webkit-flex: 1;
+}
+
+/* 自动伸缩：根据内容决定尺寸，可伸可缩 */
+.flex-auto {
+  flex: auto;
+  -webkit-flex: auto;
+}
+
+/* 初始尺寸：使用 flex-basis 定义的初始大小，可伸可缩 */
+.flex-initial {
+  flex: initial;
+  -webkit-flex: initial;
+}
+
+/* 不伸缩：固定尺寸，不参与分配剩余空间 */
+.flex-none {
+  flex: none;
+  -webkit-flex: none;
+}
+
+/* 禁止放大 */
+.flex-grow-0 {
+  flex-grow: 0;
+  -webkit-flex-grow: 0;
+}
+
+/* 允许放大并占满剩余空间 */
+.flex-grow-1 {
+  flex-grow: 1;
+  -webkit-flex-grow: 1;
+}
+
+/* 禁止缩小 */
+.flex-shrink-0 {
+  flex-shrink: 0;
+  -webkit-flex-shrink: 0;
+}
+
+/* 允许缩小 */
+.flex-shrink-1 {
+  flex-shrink: 1;
+  -webkit-flex-shrink: 1;
+}
+
+/* #endif */
+
+
+.fw-400 {
+  font-weight: 400;
+}
+
+.fw-500 {
+  font-weight: 500;
+}
+
+.fw-600 {
+  font-weight: 600;
+}
+
+/* 文本对齐方式 */
+.text-left {
+  text-align: left;
+}
+
+.text-center {
+  text-align: center;
+}
+
+.text-right {
+  text-align: right;
+}
+
+.text-justify {
+  text-align: justify;
+}
+
+.text-start {
+  text-align: start;
+}
+
+.text-end {
+  text-align: end;
+}
+
+.w-all {
+  width: 100%;
+}
+.h-all {
+  height: 100%;
+}
+.relative {
+  position: relative;
+}
+.absolute {
+  position: absolute;
+}
+.fixed {
+  position: fixed;
+}
+/* Overflow */
+.overflow-visible {
+  overflow: visible;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.overflow-scroll {
+  overflow: scroll;
+}
+
+.overflow-auto {
+  overflow: auto;
+}
+
+.overflow-x-visible {
+  overflow-x: visible;
+}
+
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
+.overflow-x-scroll {
+  overflow-x: scroll;
+}
+
+.overflow-x-auto {
+  overflow-x: auto;
+}
+
+.overflow-y-visible {
+  overflow-y: visible;
+}
+
+.overflow-y-hidden {
+  overflow-y: hidden;
+}
+
+.overflow-y-scroll {
+  overflow-y: scroll;
+}
+
+.overflow-y-auto {
+  overflow-y: auto;
+}
+
+
+/*  (-500 to 1000px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from -500 through 1000 {
+  $size: $i * 2rpx;
+
+  /* top */
+  .top-#{$i} {
+    top: $size;
+  }
+
+  /* left */
+  .left-#{$i} {
+    left: $size;
+  }
+
+  /* right */
+  .right-#{$i} {
+    right: $size;
+  }
+
+  /* bottom */
+  .bottom-#{$i} {
+    bottom: $size;
+  }
+}
+/* z-index (-100 to 10000 all numbers) */
+@for $i from -100 through 10000 {
+  .zi-#{$i} {
+    z-index: $i;
+  }
+}
+
+/* Font sizes (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .fs-#{$i} {
+    font-size: $size;
+  }
+}
+/* line height (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .lh-#{$i} {
+    line-height: $size;
+  }
+}
+/* Margins (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  /* Margin */
+  .m-#{$i} {
+    margin: $size;
+  }
+
+  /* Margin top */
+  .mt-#{$i} {
+    margin-top: $size;
+  }
+
+  /* Margin right */
+  .mr-#{$i} {
+    margin-right: $size;
+  }
+
+  /* Margin bottom */
+  .mb-#{$i} {
+    margin-bottom: $size;
+  }
+
+  /* Margin left */
+  .ml-#{$i} {
+    margin-left: $size;
+  }
+
+  /* Margin horizontal */
+  .mx-#{$i} {
+    margin-left: $size;
+    margin-right: $size;
+  }
+
+  /* Margin vertical */
+  .my-#{$i} {
+    margin-top: $size;
+    margin-bottom: $size;
+  }
+}
+
+/* Paddings (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  /* Padding */
+  .p-#{$i} {
+    padding: $size;
+  }
+
+  /* Padding top */
+  .pt-#{$i} {
+    padding-top: $size;
+  }
+
+  /* Padding right */
+  .pr-#{$i} {
+    padding-right: $size;
+  }
+
+  /* Padding bottom */
+  .pb-#{$i} {
+    padding-bottom: $size;
+  }
+
+  /* Padding left */
+  .pl-#{$i} {
+    padding-left: $size;
+  }
+
+  /* Padding horizontal */
+  .px-#{$i} {
+    padding-left: $size;
+    padding-right: $size;
+  }
+
+  /* Padding vertical */
+  .py-#{$i} {
+    padding-top: $size;
+    padding-bottom: $size;
+  }
+}
+
+/* Gaps (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+/* #ifndef APP-NVUE */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .gap-#{$i} {
+    gap: $size;
+  }
+}
+
+/* #endif */
+
+/* Widths (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 375 {
+  $size: $i * 2rpx;
+
+  .w-#{$i} {
+    width: $size;
+  }
+}
+
+/* Heights (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 375 {
+  $size: $i * 2rpx;
+
+  .h-#{$i} {
+    height: $size;
+  }
+}
+
+/* Border Radius (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .rounded-#{$i} {
+    border-radius: $size;
+  }
+}
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .rounded-t-#{$i} {
+    border-top-left-radius: $size;
+    border-top-right-radius: $size;
+  }
+}
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .rounded-b-#{$i} {
+    border-bottom-left-radius: $size;
+    border-bottom-right-radius: $size;
+  }
+}
+
+/* Line Height (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 100 {
+  $size: $i * 2rpx;
+
+  .lh-#{$i} {
+    line-height: $size;
+  }
+}
+
+// 定义颜色列表
+$colors: (
+  '000000', '333333', '666666', '999999', 'CCCCCC', 'FFFFFF',
+  'FF0000', '00FF00', '0000FF', 'FFFF00', 'FF00FF', '00FFFF',
+  'FFA500', '800080', 'FFC0CB', 'A52A2A', '808080', 'D3D3D3',
+  'F5F5F5', 'FAFAFA', 'F8F9FA', 'E9ECEF', 'DEE2E6', 'CED4DA',
+  'ADB5BD', '6C757D', '495057', '343A40', '212529', '007BFF',
+  '0069D9', '0056B3', '004085', '002752', '28A745', '218838',
+  '1E7E34', '155724', '0F3D1F', 'DC3545', 'C82333', 'BD2130',
+  'A71E2A', '6E001D', 'FFC107', 'E0A800', 'D39E00', 'B8860B',
+  '6C5600', '17A2B8', '138496', '117A8B', '0C5460', '062B36',
+  'F5F7FA', 'EEEEEE', '02B176', 'FA341E', 'D46C0D',
+);
+
+// 文字颜色类 - 标准化格式
+@each $hex in $colors {
+  .text-#{$hex} {
+    color: unquote('#')#{$hex};
+  }
+}
+
+// 背景颜色类
+@each $hex in $colors {
+  .bg-#{$hex} {
+    background-color: unquote('#')#{$hex};
+  }
+}
+
+// 边框颜色类
+@each $hex in $colors {
+  .border-#{$hex} {
+    border-color: unquote('#')#{$hex};
+  }
+}
+
+/* 主题色彩快捷类 */
+.text-primary {
+  color: #007bff;
+}
+
+.text-success {
+  color: #28a745;
+}
+
+.text-danger {
+  color: #dc3545;
+}
+
+.text-warning {
+  color: #ffc107;
+}
+
+.text-info {
+  color: #17a2b8;
+}
+
+.text-light {
+  color: #f8f9fa;
+}
+
+.text-dark {
+  color: #343a40;
+}
+
+.text-muted {
+  color: #6c757d;
+}
+.text-white {
+  color: #ffffff;
+}
+
+.bg-primary {
+  background-color: #007bff;
+}
+
+.bg-success {
+  background-color: #28a745;
+}
+
+.bg-danger {
+  background-color: #dc3545;
+}
+
+.bg-warning {
+  background-color: #ffc107;
+}
+
+.bg-info {
+  background-color: #17a2b8;
+}
+
+.bg-light {
+  background-color: #f8f9fa;
+}
+
+.bg-dark {
+  background-color: #343a40;
+}
+
+.bg-white {
+  background-color: #ffffff;
+}
+
+/* 透明度类 */
+@for $i from 1 through 9 {
+  .opacity-#{$i} {
+    opacity: $i * 0.1;
+  }
+}
+
+.opacity-0 {
+  opacity: 0;
+}
+
+.opacity-10 {
+  opacity: 1;
+}
+

assets/style/index.scss

@@ -0,0 +1,158 @@
+/*
+ * @Author: jmy
+ * @Date: 2026-01-01 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-12-13 16:48:17
+ * @Description: 
+*/
+//加载动画
+.scroll-loading {
+    display: inline-block;
+    width: 30rpx;
+    height: 30rpx;
+    border-radius: 50%;
+    border: 4rpx solid #999999;
+    border-bottom-color: transparent !important;
+    vertical-align: middle;
+    position: relative;
+    top: 2rpx;
+}
+
+// 加载动画旋转
+.scroll-rotate {
+    animation: mescrollDownRotate 0.6s linear infinite;
+}
+
+@keyframes mescrollDownRotate {
+    from {
+        transform: rotate(0deg);
+    }
+
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+//暂无数据
+.scs-no-data {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+
+    .no-image {
+        width: 280rpx;
+        height: 180rpx;
+        margin-top: 200rpx;
+    }
+
+    .no-desc {
+        font-size: 28rpx;
+        color: #999999;
+    }
+}
+
+//文本2行
+.text-two-line {
+    -webkit-line-clamp: 2;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: normal;
+}
+
+// 文本1行
+.text-ellipsis {
+    -webkit-line-clamp: 1;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    word-break: break-all;
+    white-space: normal;
+}
+
+// 头部压底背景
+.scs-bg-top {
+    width: 100%;
+    height: 600rpx;
+    position: fixed;
+    top: 0;
+    left: 0;
+}
+
+//旋转360度
+.rotate-360 {
+    transform: rotate(360deg)
+}
+
+.rotate-180 {
+    transform: rotate(180deg)
+}
+
+.rotate-90 {
+    transform: rotate(90deg)
+}
+.rotateY-360 {
+    transform: rotateY(360deg)
+}
+.rotateY-180 {
+    transform: rotateY(180deg)
+}
+.rotateY-90 {
+    transform: rotateY(90deg)
+}
+
+//y轴翻转180度
+
+
+// 搜索栏
+.scs-search {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 32rpx;
+    background-color: transparent;
+    /* #ifndef APP-NVUE */
+    gap: 0 28rpx;
+    /* #endif */
+    box-sizing: border-box;
+
+    .search_title {
+        width: 176rpx;
+        height: 44rpx;
+    }
+
+    .search-input {
+        flex: 1;
+        height: 72rpx;
+        background: #ffffff;
+        border-radius: 36rpx;
+        display: flex;
+        align-items: center;
+        padding: 0 4rpx 0 24rpx;
+        border: 3rpx solid #02B176;
+        color: #ffffff;
+        box-sizing: border-box;
+
+        .icon-search {
+            width: 28rpx;
+            height: 28rpx;
+            margin-right: 20rpx;
+            margin-top: 4rpx;
+        }
+
+        .input-value {
+            height: 60rpx;
+            line-height: 60rpx;
+            flex: 1;
+        }
+
+        button {
+            background: linear-gradient(90deg, #38D97D 0%, #02B176 100%);
+        }
+    }
+
+}

common/utils.js

@@ -0,0 +1,20 @@
+const scsUtils = {
+	// 数组分块
+	splitArrayIntoSubarrays(arr, groupSize = 5) {
+		const result = [];
+		for (let i = 0; i < arr.length; i += groupSize) {
+			result.push(arr.slice(i, i + groupSize));
+		}
+		return result;
+	},
+	// 路由跳转
+	router(path) {
+		uni.navigateTo({
+			url: path
+		})
+	},
+}
+
+export {
+	scsUtils
+}

components/public/scs-scroll-iconbar.vue

@@ -0,0 +1,190 @@
+<!--
+ * @Author: jmy
+ * @Date: 2026-01-06 15:02:01
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-06 15:02:01
+ * @Description: 滚动图标栏
+-->
+<template>
+  <scroll-view class="scs-scroll-iconbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
+    <view v-for="(item, index) in tabsData" :key="index" class="nav-item"
+      :style="{ 'margin-right': calcGap * 2 + 'rpx' }" :class="{ 'act-current': index === tabCurrentIndex, }"
+      @tap="tabChange(index)" :id="'item-' + index">
+      <view class="item-title">
+        {{ item[nameKey] }}
+      </view>
+      <uni-transition type="fade" :duration="300" :show="index === tabCurrentIndex">
+        <image src="/static/images/home/tj_tab_hover_icon20@2x.png"></image>
+      </uni-transition>
+    </view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  name: 'scs-scroll-iconbar',
+  props: {
+    // 导航项数据
+    tabsData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 当前选中的导航项索引
+    tabCurrentIndex: {
+      type: Number,
+      default: 0,
+    },
+    // 导航项名称键名
+    nameKey: {
+      type: String,
+      default: 'name',
+    },
+    // 导航项间距rpx
+    calcGap: {
+      type: Number,
+      default: 60,
+    },
+    // 是否开启滚动
+    isScroll: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  data() {
+    return {
+      scrollLeft: 0,
+      widthList: [],
+      screenWidth: 0,
+    };
+  },
+
+  watch: {
+    tabCurrentIndex: function (val) {
+      if (this.isScroll) {
+        this.tabScroll(val);
+      }
+    },
+    tabsData: function (val) {
+      this.init();
+    },
+  },
+  methods: {
+    // 导航栏点击
+    tabChange(index) {
+      let self = this;
+      self.$emit('tabChange', index);
+    },
+    // 导航栏滚动
+    tabScroll(index) {
+      var widthArr = this.widthList;
+      var scrollWidth = 0;
+      for (var i = 0; i < index + 1; i++) {
+        scrollWidth += widthArr[i];
+      }
+      let currentWidth = widthArr[index];
+      // scrollView 居中算法
+      // 减去固定宽度位移
+      // 减去选中的bar的宽度的一半
+      scrollWidth -= this.screenWidth / 2;
+      scrollWidth -= currentWidth / 2;
+      this.scrollLeft = scrollWidth;
+    },
+
+    // 计算导航项宽度
+    calculateItemWidth() {
+      let widthArr = [];
+      Promise.all(
+        this.tabsData.map((_, index) =>
+          new Promise((resolve) => {
+            uni
+              .createSelectorQuery()
+              .in(this)
+              .select(`#item-${index}`)
+              .boundingClientRect((data) => {
+                if (data) {
+                  // 在元素实际宽度基础上增加 this.calcGap 的左右 padding，保证滚动时两侧留白
+                  widthArr.push(data.width + this.calcGap);
+                } else {
+                  // 兜底默认宽度
+                  widthArr.push(100);
+                }
+                resolve();
+              })
+              .exec();
+          })
+        )
+      ).then(() => {
+        // 所有节点查询完毕，一次性赋值
+        this.widthList = widthArr;
+      });
+    },
+    // 计算窗口宽度
+    calculateWindowWidth() {
+      var info = uni.getSystemInfoSync();
+      this.screenWidth = info.screenWidth;
+    },
+    init() {
+      this.calculateWindowWidth();
+      // 组件挂载后计算，确保DOM已渲染
+      this.$nextTick(() => {
+        this.calculateItemWidth();
+      });
+    },
+  },
+  mounted() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep.uni-scroll-view::-webkit-scrollbar {
+  display: none;
+}
+
+.scs-scroll-iconbar {
+  width: 100%;
+  height: 90rpx;
+  white-space: nowrap;
+  box-sizing: border-box;
+
+
+  .nav-item {
+    height: 100%;
+    text-align: center;
+    color: #333333;
+    display: inline-block;
+    position: relative;
+    font-size: 32rpx;
+
+    position: relative;
+    font-weight: 400;
+
+    image {
+      width: 20px;
+      height: 6px;
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      transition: all 0.3s ease;
+    }
+
+    .item-title {
+      line-height: 90rpx;
+      display: inline-block;
+      position: relative;
+      z-index: 10;
+    }
+  }
+
+  .act-current {
+    color: #02B176;
+    font-size: 36rpx;
+    font-weight: 600;
+  }
+
+
+}
+</style>

components/public/scs-scroll-navbar.vue

@@ -0,0 +1,201 @@
+<!--
+ * @Author: jmy
+ * @Date: 2025-12-13 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2025-12-19 15:02:01
+ * @Description: 
+-->
+<template>
+  <scroll-view class="scs-scroll-navbar" scroll-x :scroll-left="scrollLeft" scroll-with-animation="true">
+    <view v-for="(item, index) in tabsData" :key="index" class="nav-item"
+      :class="index === tabCurrentIndex ? 'act-current' : ''" @tap="tabChange(index)" :id="'item-' + index">
+      <view class="item-title">
+        {{ item[nameKey] }}
+      </view>
+    </view>
+
+    <view class="nav-underline" :style="underlineStyle"></view>
+  </scroll-view>
+</template>
+
+<script>
+export default {
+  name: 'scs-scroll-navbar',
+  props: {
+    // 导航项数据
+    tabsData: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 当前选中的导航项索引
+    tabCurrentIndex: {
+      type: Number,
+      default: 0,
+    },
+    // 导航项名称键名
+    nameKey: {
+      type: String,
+      default: 'name',
+    },
+    // 导航项间距rpx
+    calcGap: {
+      type: Number,
+      default: 40,
+    },
+  },
+  data() {
+    return {
+      scrollLeft: 0,
+      widthList: [],
+      screenWidth: 0,
+      itemPositions: [], // 存储每个导航项的位置信息
+    };
+  },
+  computed: {
+    // 计算下划线的样式
+    underlineStyle() {
+      if (this.itemPositions.length === 0 || this.tabCurrentIndex >= this.itemPositions.length) {
+        return {};
+      }
+      const position = this.itemPositions[this.tabCurrentIndex];
+      if (this.tabCurrentIndex === 0) {
+        position.left = 1
+      }
+      return `width:${position.width}px;left:${position.left}px;opacity:1`;
+    },
+  },
+  watch: {
+    tabCurrentIndex: function (val) {
+      this.tabScroll(val);
+    },
+    tabsData: function (val) {
+      this.init();
+    },
+  },
+  methods: {
+    // 导航栏点击
+    tabChange(index) {
+      let self = this;
+      self.$emit('tabChange', index);
+    },
+    // 导航栏滚动
+    tabScroll(index) {
+      var widthArr = this.widthList;
+      var scrollWidth = 0;
+      for (var i = 0; i < index + 1; i++) {
+        scrollWidth += widthArr[i];
+      }
+      let currentWidth = widthArr[index];
+      // scrollView 居中算法
+      // 减去固定宽度位移
+      // 减去选中的bar的宽度的一半
+      scrollWidth -= this.screenWidth / 2;
+      scrollWidth -= currentWidth / 2;
+      this.scrollLeft = scrollWidth;
+    },
+    //滚动左侧
+    tabScrollLeft() {
+      this.scrollLeft = 0.5;
+      setTimeout(() => {
+        this.scrollLeft = 0;
+      }, 500);
+    },
+    // 计算导航项宽度
+    calculateItemWidth() {
+      let widthArr = [];
+      let positions = [];
+      Promise.all(
+        this.tabsData.map((_, index) =>
+          new Promise((resolve) => {
+            uni
+              .createSelectorQuery()
+              .in(this)
+              .select(`#item-${index}`)
+              .boundingClientRect((data) => {
+                if (data) {
+                  // 在元素实际宽度基础上增加 this.calcGap 的左右 padding，保证滚动时两侧留白
+                  widthArr.push(data.width + this.calcGap / 2);
+                  positions.push({ left: data.left - 12, width: data.width });
+                } else {
+                  // 兜底默认宽度
+                  widthArr.push(100);
+                  positions.push({ left: index * 100, width: 100 });
+                }
+                resolve();
+              })
+              .exec();
+          })
+        )
+      ).then(() => {
+        // 所有节点查询完毕，一次性赋值
+        this.widthList = widthArr;
+        this.itemPositions = positions;
+      });
+    },
+    // 计算窗口宽度
+    calculateWindowWidth() {
+      var info = uni.getSystemInfoSync();
+      this.screenWidth = info.screenWidth;
+    },
+    init() {
+      const that = this;
+      this.calculateWindowWidth();
+      setTimeout(function () {
+        that.calculateItemWidth();
+      }, 1000);
+    },
+  },
+  created() {
+    this.init();
+  },
+};
+</script>
+<style lang="scss" scoped>
+::v-deep.uni-scroll-view::-webkit-scrollbar {
+  display: none;
+}
+
+.scs-scroll-navbar {
+  width: 100%;
+  height: 90rpx;
+  white-space: nowrap;
+
+  .nav-item {
+    height: 100%;
+    text-align: center;
+    color: #999999;
+    display: inline-block;
+    position: relative;
+    font-size: 40rpx;
+    margin-right: 32rpx;
+
+
+    .item-title {
+      line-height: 90rpx;
+      display: inline-block;
+      position: relative;
+      z-index: 10;
+    }
+  }
+
+  .act-current {
+    color: #333333;
+    font-size: 40rpx;
+    font-weight: bold;
+  }
+
+  .nav-underline {
+    position: relative;
+    height: 16rpx;
+    background: linear-gradient( 90deg, rgba(56,217,125,0.5) 0%, rgba(56,217,125,0) 100%);
+    border-radius: 8rpx;
+    bottom: 28rpx;
+    left: 10px;
+    width: 0;
+    visibility: visible;
+    transition: all 0.3s ease; 
+  }
+}
+</style>

main.js

@@ -6,6 +6,8 @@ Vue.use(uView)
 Vue.config.productionTip = false
 
 import utils from './utils/common.js'
+import {scsUtils} from '@/common/utils.js'
+Vue.prototype.$scsUtils = scsUtils;
 Vue.prototype.utils = utils;
 import store from './store'
 import {isLoginCourse} from './utils/common.js'

pages.json

@@ -24,7 +24,7 @@
 		{
 			"path": "pages/home/index",
 			"style": {
-				"navigationBarTitleText": "芳华悦选",
+				"navigationBarTitleText": "",
 				"enablePullDownRefresh": false,
 				"navigationStyle": "custom",
 				"app-plus": {

pages/home/components/home-discount.vue

@@ -0,0 +1,125 @@
+<!--
+ * @Author: jmy
+ * @Date: 2026-01-06 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-06 15:02:20
+ * @Description: 自定义轮播图组件
+-->
+<template>
+    <view class="w-all relative zi-2  mt-4">
+        <swiper class="w-all" :style="{ height: height * 2 + 'rpx', }" :circular="circular"
+            :indicator-dots="indicatorDots" indicator-active-color="#02B176 " indicator-color="#EEEEEE"
+            :autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
+            :display-multiple-items='displayMultipleItems' :next-margin="nextMargin" @change="change"
+            @transition="transition" @animationfinish="animationfinish">
+            <swiper-item class="flex flex-wrap h-all " v-for="(item, index) in swiperList" :key="index">
+                <view class="w-74 h-82 bg-white flex items-center justify-center">
+                    <view class="w-64 h-82 flex flex-column items-center  justify-center">
+                        <image
+                            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422"
+                            class="w-35 h-44" />
+                        <view class="h-15 text-ellipsis fw-400 fs-11 my-3">葵小儿健脾问问</view>
+                        <view class="w-54 h-16 rounded-16 bg-FA341E text-white text-center fs-9 relative">
+                            ¥<text class="fs-13">19</text>
+                            <text class="fs-9">.20</text>
+                            <image src="/static/images/home/sdyhzq_arrow_icon16@2x.png"
+                                class="w-16 h-16 absolute top-0 left--6 zi-10" />
+                        </view>
+                    </view>
+
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="flex items-center justify-center w-all gap-6 mt-11" v-if="isCustomDot">
+            <view v-for="(item, index) in swiperList" :key="index" class="w-10 h-2  rounded-1"
+                :class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        swiperList: {
+            type: Array,
+            default: () => []
+        },
+        // 轮播图高度rpx
+        height: {
+            type: Number,
+            default: 85
+        },
+        // 是否显示指示器
+        indicatorDots: {
+            type: Boolean,
+            default: false
+        },
+        // 是否循环播放
+        circular: {
+            type: Boolean,
+            default: true
+        },
+        // 是否自动切换
+        autoplay: {
+            type: Boolean,
+            default: false
+        },
+        // 自动切换时间间隔
+        interval: {
+            type: Number,
+            default: 3000
+        },
+        // 切换动画时长
+        duration: {
+            type: Number,
+            default: 1000
+        },
+        // 显示多个项
+        displayMultipleItems: {
+            type: Number,
+            default: 2
+        },
+        // 下一个项的外边距
+        nextMargin: {
+            type: String,
+            default: '0'
+        },
+
+        // 当前滑块显示项的索引
+        current: {
+            type: Number,
+            default: 0
+        },
+        // 是否显示自定义指示点
+        isCustomDot: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            currentDot: 0,
+        }
+    },
+    methods: {
+        // current 改变时会触发 change 事件
+        change(e) {
+            this.$emit('change', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变时会触发
+        transition(e) {
+            // console.log('transition:', e.detail)
+            this.$emit('transition', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变并且动画结束时会触发
+        animationfinish(e) {
+            this.$emit('animationfinish', e.detail.current)
+        },
+        // 导航到对应页面
+        handleNavTo(value) {
+            // 根据实际需求实现导航逻辑
+            console.log('导航到:', value)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped></style>

pages/home/components/home-hot.vue

@@ -0,0 +1,125 @@
+<!--
+ * @Author: jmy
+ * @Date: 2026-01-06 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-06 15:02:20
+ * @Description: 自定义轮播图组件
+-->
+<template>
+    <view class="w-all relative zi-2  mt-4">
+        <swiper class="w-all" :style="{ height: height * 2 + 'rpx', }" :circular="circular"
+            :indicator-dots="indicatorDots" indicator-active-color="#02B176 " indicator-color="#EEEEEE"
+            :autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
+            :display-multiple-items='displayMultipleItems' :next-margin="nextMargin" @change="change"
+            @transition="transition" @animationfinish="animationfinish">
+            <swiper-item class="flex flex-wrap h-all " v-for="(item, index) in swiperList" :key="index">
+                <view class="w-74 h-82 bg-white flex items-center justify-center">
+                    <view class="w-64 h-82 flex flex-column items-center  justify-center">
+                        <image style="border: 1px solid #ffffff;"
+                            src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422"
+                            class="w-46 h-46 rounded-6" />
+                        <view class="h-15 text-ellipsis fw-400 fs-10 my-3 fw-500 text-D46C0D">营养保健Top1</view>
+                        <view class="w-54 h-16 rounded-16  text-D46C0D text-center fs-10 fw-400 relative">
+                            热销234件
+                            <image src="/static/images/home/hot_selling_list_img@2x.png"
+                                class="w-8 h-12 absolute top-0 left--4 zi-10 rotateY-180" />
+                            <image src="/static/images/home/hot_selling_list_img@2x.png"
+                                class="w-8 h-12  absolute top-0 right--4 zi-10" />
+                        </view>
+                    </view>
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="flex items-center justify-center w-all gap-6 mt-11" v-if="isCustomDot">
+            <view v-for="(item, index) in swiperList" :key="index" class="w-10 h-2  rounded-1"
+                :class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        swiperList: {
+            type: Array,
+            default: () => []
+        },
+        // 轮播图高度rpx
+        height: {
+            type: Number,
+            default: 85
+        },
+        // 是否显示指示器
+        indicatorDots: {
+            type: Boolean,
+            default: false
+        },
+        // 是否循环播放
+        circular: {
+            type: Boolean,
+            default: true
+        },
+        // 是否自动切换
+        autoplay: {
+            type: Boolean,
+            default: false
+        },
+        // 自动切换时间间隔
+        interval: {
+            type: Number,
+            default: 3000
+        },
+        // 切换动画时长
+        duration: {
+            type: Number,
+            default: 1000
+        },
+        // 显示多个项
+        displayMultipleItems: {
+            type: Number,
+            default: 2
+        },
+        // 下一个项的外边距
+        nextMargin: {
+            type: String,
+            default: '0'
+        },
+
+        // 当前滑块显示项的索引
+        current: {
+            type: Number,
+            default: 0
+        },
+        // 是否显示自定义指示点
+        isCustomDot: {
+            type: Boolean,
+            default: false
+        },
+    },
+    data() {
+        return {
+            currentDot: 0,
+        }
+    },
+    methods: {
+        // current 改变时会触发 change 事件
+        change(e) {
+            this.$emit('change', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变时会触发
+        transition(e) {
+            // console.log('transition:', e.detail)
+            this.$emit('transition', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变并且动画结束时会触发
+        animationfinish(e) {
+            this.$emit('animationfinish', e.detail.current)
+        },
+        // 导航到对应页面
+        handleNavTo(value) {
+            // 根据实际需求实现导航逻辑
+            console.log('导航到:', value)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped></style>

pages/home/components/home-menu.vue

@@ -0,0 +1,108 @@
+<!--
+ * @Author: jmy
+ * @Date: 2026-01-04 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-04 15:02:20
+ * @Description: 自定义轮播图组件
+-->
+<template>
+    <swiper class="scs-swiper  flex flex-nowrap mt-5" :style="{ height: height * 2 + 'rpx', }" :circular="circular"
+         :indicator-dots="indicatorDots" indicator-active-color=""
+        indicator-color="" :autoplay="autoplay" :interval="interval" :duration="duration" :current="current"
+        :display-multiple-items='displayMultipleItems' :next-margin="nextMargin" @change="change"
+        @transition="transition" @animationfinish="animationfinish">
+        <swiper-item class="flex flex-wrap h-all w-all ml-4" v-for="(item, i) in swiperList" :key="i">
+            <view class="item-navbar mr-22 w-52 flex flex-column items-center" @click="handleNavTo(value)"
+                v-for="(value, i) in item" :key="i">
+                <image class="w-44 h-44" :src="value.icon"> </image>
+                <view class=" fs-13 fw-400 text-ellipsis mt-8">{{ value.menuName }}</view>
+            </view>
+        </swiper-item>
+    </swiper>
+</template>
+<script>
+export default {
+    props: {
+        swiperList: {
+            type: Array,
+            default: () => []
+        },
+        // 轮播图高度rpx
+        height: {
+            type: Number,
+            default: 76
+        },
+        // 是否显示指示器
+        indicatorDots: {
+            type: Boolean,
+            default: false
+        },
+        // 是否循环播放
+        circular: {
+            type: Boolean,
+            default: true
+        },
+        // 是否自动切换
+        autoplay: {
+            type: Boolean,
+            default: true
+        },
+        // 自动切换时间间隔
+        interval: {
+            type: Number,
+            default: 3000
+        },
+        // 切换动画时长
+        duration: {
+            type: Number,
+            default: 1000
+        },
+        // 显示多个项
+        displayMultipleItems: {
+            type: Number,
+            default: 1
+        },
+        // 下一个项的外边距
+        nextMargin: {
+            type: String,
+            default: '0'
+        },
+
+        // 当前滑块显示项的索引
+        current: {
+            type: Number,
+            default: 0
+        },
+    },
+    methods: {
+        // current 改变时会触发 change 事件
+        change(e) {
+            this.$emit('change', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变时会触发
+        transition(e) {
+            // console.log('transition:', e.detail)
+            this.$emit('transition', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变并且动画结束时会触发
+        animationfinish(e) {
+            this.$emit('animationfinish', e.detail.current)
+        },
+        // 导航到对应页面
+        handleNavTo(value) {
+            // 根据实际需求实现导航逻辑
+            console.log('导航到:', value)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.scs-swiper {
+    width: 100%;
+    .item-navbar {
+        &:nth-child(5n) {
+            margin-right: 0;
+        }
+    }
+}
+</style>

pages/home/components/home-play.vue

@@ -0,0 +1,117 @@
+<!--
+ * @Author: jmy
+ * @Date: 2026-01-06 12:02:41
+ * @LastEditors: Please set LastEditors
+ * @LastEditTime: 2026-01-06 15:02:20
+ * @Description: 自定义轮播图组件
+-->
+<template>
+    <view class="w-all relative zi-2" :style="{ height: height * 2 + 30 + 'rpx', }">
+        <swiper class="w-all  mt-5 rounded-8 overflow-hidden" :style="{ height: height * 2 + 'rpx', }"
+            :circular="circular" :class="isDotStyle ? 'dotStyle' : ''" :indicator-dots="indicatorDots"
+            indicator-active-color="#02B176 " indicator-color="#EEEEEE" :autoplay="autoplay" :interval="interval"
+            :duration="duration" :current="current" :display-multiple-items='displayMultipleItems'
+            :next-margin="nextMargin" @change="change" @transition="transition" @animationfinish="animationfinish">
+            <swiper-item class="flex flex-wrap h-all w-all bg-light relative" v-for="(item, index) in swiperList"
+                :key="index">
+                <image src="https://img1.baidu.com/it/u=2172818577,3783888802&fm=253&app=138&f=JPEG?w=800&h=1422"
+                    class="w-all h-all" />
+
+                <view class="flex items-center h-30 fw-400 fs-10 rounded-6 overflow-hidden absolute top-8 left-8">
+                    <view class="h-all left-box text-white px-4 lh-30">预约中</view>
+                    <view class="h-all px-4 text-white bg-000000 opacity-6 lh-30">1800人已预约</view>
+                </view>
+            </swiper-item>
+        </swiper>
+        <view class="flex items-center justify-center w-all gap-1 mt-11">
+            <view v-for="(item, index) in swiperList" :key="index" class="w-10 h-2  rounded-1"
+                :class="index == current ? 'bg-02B176' : 'bg-EEEEEE'"></view>
+        </view>
+    </view>
+</template>
+<script>
+export default {
+    props: {
+        swiperList: {
+            type: Array,
+            default: () => []
+        },
+        // 轮播图高度px
+        height: {
+            type: Number,
+            default: 202
+        },
+        // 是否显示指示器
+        indicatorDots: {
+            type: Boolean,
+            default: false
+        },
+        // 是否循环播放
+        circular: {
+            type: Boolean,
+            default: true
+        },
+        // 是否自动切换
+        autoplay: {
+            type: Boolean,
+            default: false
+        },
+        // 自动切换时间间隔
+        interval: {
+            type: Number,
+            default: 3000
+        },
+        // 切换动画时长
+        duration: {
+            type: Number,
+            default: 1000
+        },
+        // 显示多个项
+        displayMultipleItems: {
+            type: Number,
+            default: 1
+        },
+        // 下一个项的外边距
+        nextMargin: {
+            type: String,
+            default: '0'
+        },
+
+        // 当前滑块显示项的索引
+        current: {
+            type: Number,
+            default: 0
+        },
+    },
+    data() {
+        return {
+            currentDot: 0,
+        }
+    },
+    methods: {
+        // current 改变时会触发 change 事件
+        change(e) {
+            this.$emit('change', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变时会触发
+        transition(e) {
+            // console.log('transition:', e.detail)
+            this.$emit('transition', e.detail.current)
+        },
+        // 	swiper-item 的位置发生改变并且动画结束时会触发
+        animationfinish(e) {
+            this.$emit('animationfinish', e.detail.current)
+        },
+        // 导航到对应页面
+        handleNavTo(value) {
+            // 根据实际需求实现导航逻辑
+            console.log('导航到:', value)
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.left-box {
+    background: linear-gradient(136deg, #38D97D 0%, #02B176 100%);
+}
+</style>

pages/home/components/home-product.vue

@@ -0,0 +1,66 @@
+<template>
+    <view class="flex justify-between px-12 mt-21">
+        <view class="w-170 h-265 relative px-11 rounded-8 overflow-hidden">
+            <image class="w-all h-all absolute top-0 left-0 bg-white zi-1" src="/static/images/home/zbgc_bg@2x.png">
+            </image>
+            <view class="flex justify-between items-center h-20 relative zi-2 mt-13">
+                <image class="w-64 h-15" src="/static/images/home/live_square_title@2x.png"></image>
+                <view class="fs-12 fw-400 text-666666 flex items-center">
+                    全部 <image class="w-12 h-12" src="/static/images/home/zbgc_arrow_right_icon12.svg"></image>
+                </view>
+
+            </view>
+            <HomePlay :swiperList="swiperPlayList" :current="swiperCurrent"
+                @change="swiperCurrent = $event" />
+        </view>
+        <view class="w-171 h-265 flex flex-column justify-between">
+            <view class="w-all h-128 bg-white relative p-11 rounded-8 overflow-hidden">
+                <image class="w-all h-all absolute top-0 left-0 zi-1" src="/static/images/home/sdyhzq_bg@2x.png">
+                </image>
+                <view class="relative zi-2">
+                    <image class="w-95 h-18 " src="/static/images/home/sdyhzq_title@2x.png"></image>
+                    <HomeDiscount  :swiperList="swiperPlayList"  />
+                </view>
+            </view>
+            <view class="w-all h-128 bg-white relative p-11 rounded-8 overflow-hidden">
+                <image class="w-all h-all absolute top-0 left-0 " src="/static/images/home/jrrm_bg@2x.png"></image>
+                <view class="relative zi-2">
+                    <image class="w-64 h-18 " src="/static/images/home/jrrm_title@2x.png"></image>
+                    <HomeHot :swiperList="swiperPlayList"/>
+                </view>
+            </view>
+        </view>
+    </view>
+
+</template>
+<script>
+import HomePlay from './home-play.vue';
+import HomeDiscount from './home-discount.vue'
+import HomeHot from './home-hot.vue'
+export default {
+    components: {
+        HomePlay,
+        HomeDiscount,
+        HomeHot,
+    },
+    props: {
+
+    },
+    data() {
+        return {
+            swiperCurrent: 0,
+            swiperPlayList: [
+                {
+                    name: '1',
+                },
+                {
+                    name: '2',
+                },
+                {
+                    name: '3',
+                },
+            ],
+        }
+    },
+}
+</script>

pages/home/components/home-search.vue

@@ -0,0 +1,34 @@
+<template>
+    <view class="flex items-center justify-between px-12 mt-11 relative zi-10">
+        <view class="scs-search w-283 h-34">
+            <view class="search-input">
+                <image class="icon-search" src="/static/images/search.png" mode="aspectFit"></image>
+                <input class="input-value" type="text" v-model="keyword" placeholder="搜索商品" confirm-type="search"
+                    @confirm="onSearch" />
+                <button class="w-60 h-30 rounded-15 fs-14 color-white lh-30" @click="onSearch">搜索</button>
+            </view>
+        </view>
+        <view class="w-24 h-24 relative">
+            <image class="w-all h-all" src="/static/images/share_icon.png" mode=""></image>
+            <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
+        </view>
+        <view class="w-24 h-24 relative">
+            <image class="w-all h-all" src="/static/images/new_hall_icon.png" mode=""></image>
+            <button class="w-all h-all absolute top-0 left-0 opacity-0" open-type="contact"></button>
+        </view>
+    </view>
+</template>
+<script>
+    export default {
+        data() {
+            return {
+                keyword: '',
+            }
+        },
+        methods: {
+            onSearch() {
+               this.$emit('onSearch', this.keyword)
+            }
+        }
+    }
+</script>

pages/home/index copy.vue

@@ -0,0 +1,2315 @@
+<template>
+	<view class="content">
+		<!-- 背景图片 -->
+		<image class="bg" src="../../static/images/yuexuan_home_top_bg.png" mode=""></image>
+		<view>
+			<view class="top-inner">
+				<view class="fixed-top-box" :style="{ background: bg }">
+					<!-- 这里是状态栏 -->
+					<view class="status_bar" :style="{height: statusBarHeight}"></view>
+					<view class="shop-block">
+						<view class="shop">
+							<image class="w40 h40" src="/static/images/shopping_car_icon.png"></image>
+						</view>
+					</view>
+					<view class="top-title">
+						<view class="name">芳华悦选</view>
+						<view class="dot">让家人放心吃健康安全的食品</view>
+					</view>
+					<!-- 搜索框、购物车、客服 -->
+					<view class="func-cont">
+						<view class="search-cont">
+							<image class="icon-search" src="../../static/images/search.png" mode=""></image>
+							<input type="text" disabled value="" placeholder="搜索商品"
+								placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;"
+								@click="toSearch" />
+							<view class="search-button">搜索</view>
+						</view>
+						<!-- 购物车 -->
+						<!-- <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
+							<view class="img-item" @click="goAuthUrl('../shopping/cart')">
+								<image src="../../static/images/cart_wihte.png" mode=""></image>
+							</view>
+						</uni-badge> -->
+						<view class="img-item" style="position: relative;">
+							<image src="../../static/images/share_icon.png" mode=""></image>
+							<button class="contact-btn" open-type="contact"></button>
+						</view>
+
+						<view class="img-item" style="position: relative;">
+							<image src="../../static/images/new_hall_icon.png" mode=""></image>
+							<button class="contact-btn" open-type="contact"></button>
+						</view>
+					</view>
+					<!-- <view class="tips">
+						
+						<view class="left"></view>
+						<view class="right"  @click="navTo('./cert')">资质证明</view>
+					</view> -->
+				</view>
+			</view>
+			<!-- 头部间距 -->
+			<view style="padding-bottom:220rpx">
+				<view class="status_bar" :style="{height: statusBarHeight}"></view>
+			</view>
+			<!-- 轮播图 -->
+			<view class="banner-box">
+				<view class="inner">
+					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
+						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
+						<swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
+							@click="handleAdvClick(item)">
+							<image :src="item.imageUrl" mode=""></image>
+						</swiper-item>
+					</swiper>
+				</view>
+			</view>
+
+			<!-- tab切换 -->
+			<view class="pub-tab-box">
+				<view class="tab-inner">
+					<view v-for="(item,index) in orderStatus" :key="index"
+						:class="status ==item.value?'item active':'item'" @click="orderStatusChange(item)">
+						<view class="text">
+							{{ item.name }}
+							<view class="tab-bg" v-show="status ==item.value"></view>
+							<!-- <image v-show="status ==item.value" class="tab-bg" src="/static/images/tab_bg.png" mode=""> -->
+							</image>
+						</view>
+					</view>
+					<image class="white-gradient" src="/static/images/white_gradient_bg.png"></image>
+				</view>
+				<image class="icon mr24" src="/static/images/product_section_icon.png"></image>
+				<image class="icon" src="/static/images/home_filter_icon.png"></image>
+			</view>
+			<!-- 菜单 -->
+			<view class="menu-content">
+				<view class="menu-box">
+					<Menu :list="menus" @menuClick="menuClick" v-if="menus.length>0" style="width:100%;"></Menu>
+				</view>
+			</view>
+
+		</view>
+
+		<!-- 在线问诊、处方查询 -->
+		<view class="online-inquiry">
+			<view class="item" @click="navTo('/pages_shopping/shopping/productSalesList')">
+				<!-- <image  class="bg-img" src="../../static/images/banner1.png" mode=""></image> -->
+				<image class="bg-img"
+					src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250320/f2d3ba32a9344dc79b4df7c228189243.png"
+					mode=""></image>
+				<!-- <view class="inner">
+					<text class="title">用药榜</text>
+					<text class="sub-title"></text>
+					<image src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250320/f2d3ba32a9344dc79b4df7c228189243.png" mode=""></image>
+				</view> -->
+			</view>
+			<view class="item" @click="navTo('/pages_course/livingList')">
+				<image class="bg-img" src="/static/images/banner2.png" mode=""></image>
+			</view>
+		</view>
+		<view class="index-cont">
+			<!-- 医生团队 -->
+			<!-- <view class="pub-item">
+				<view class="pub-title-box">
+					<text class="left">医生团队</text>
+					<view class="right" @click="navTo('../doctor/doctorList')">
+						<text class="text">全部医生</text>
+						<image src="../../static/images/arrow_gray.png" mode=""></image>
+					</view>
+				</view>
+				<view class="doc-cont">
+					<view class="inner">
+						<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
+							<view class="head-box">
+								<image :src="item.headImg" mode="aspectFill"></image>
+							</view>
+							<text class="name ellipsis">{{ item.doctorName }}</text>
+							<text class="position ellipsis">
+								{{utils.getDictLabelName("doctorPosition",item.position)}}
+							</text>
+						</view>
+					</view>
+				</view>
+			</view> -->
+			<!-- <view class="pub-item">
+				<view class="tabs">
+					<view class="tab" @click="docTabChange(1)">
+						<image v-if="docTab==1" class="img" src="../../static/images/tab1.png" mode=""></image>
+						<view class="inner">
+							<text :class="docTab == 1?'title active':'title'" >推荐医生</text>
+						</view>
+					</view>
+					<view class="tab" @click="docTabChange(2)">
+						<image v-if="docTab==2" class="img" src="../../static/images/tab2.png" mode=""></image>
+						<view class="inner">
+							<text :class="docTab == 2?'title active':'title'" >推荐药师</text>
+						</view>
+					</view>
+					<view class="tab" @click="docTabChange(3)">
+						<image v-if="docTab==3" class="img" src="../../static/images/tab3.png" mode=""></image>
+						<view class="inner">
+							<text  :class="docTab == 3?'title active':'title'" >推荐营养师</text>
+						</view>
+					</view>
+				</view>
+				<view class="doc-tab-box">
+					<view class="tab-inner" >
+						<view 
+							v-for="(item,index) in depts" 
+							:key="index"
+							:class="item.departmentId == deptId?'item active':'item'"
+							@click="deptChange(item)"
+						>
+							<view class="text">
+								{{ item.departmentName }}
+								<image v-show="item.departmentId == deptId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
+							</view>
+						</view>
+					</view>
+					<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
+				</view>
+				<view class="doc-list">
+					<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)"> -->
+			<!-- 头像 -->
+			<!-- 	<view class="head-box">
+							<image :src="item.headImg" mode="aspectFill"></image>
+						</view> -->
+			<!-- 详细信息 -->
+			<!-- 		<view class="info"> -->
+			<!-- 姓名等 -->
+			<!-- 		<view class="top">
+								<text class="name">{{ item.doctorName }}</text>
+								<view class="line"></view>
+								<text class="other">{{utils.getDictLabelName("doctorPosition",item.position)}}</text>
+								<view class="line"></view>
+								<text class="other">{{ item.departmentName }}</text>
+							</view> -->
+			<!-- 单位 -->
+			<!-- <view class="unit-box"> -->
+			<!-- 	<view class="level">三甲</view> -->
+			<!-- 			<view class="name">{{ item.hospitalName }}</view>
+							</view> -->
+			<!-- 擅长 -->
+			<!-- 	<view class="expertise ellipsis2">
+								擅长：{{ item.doctorDesc }}
+							</view> -->
+			<!-- 评分 -->
+			<!-- <view class="rate-box">
+								<view class="star">
+									<image src="../../static/images/star.png" mode=""></image>
+									<text>{{ item.pings }}</text>
+								</view>
+								<view class="line"></view>
+								<view class="num-box">
+									<text class="label">接诊数</text>
+									<text class="num">{{ item.orders }}</text>
+								</view>
+								<view class="line"></view>
+								<view class="num-box">
+									<text class="label">响应速度</text>
+									<text class="num">{{ item.speed }}分钟</text>
+								</view>
+							</view> -->
+			<!-- 价格 -->
+			<!-- 	<view class="price-box">
+								<view class="btn-item" v-for="(subitme) in item.price">
+									<text class="label" >{{subitme.priceType==1?'图文':'语音'}}</text>
+									<text class="num">¥{{subitme.price.toFixed(2)}}</text>
+								</view>
+							</view>
+						</view>
+					</view>
+					<view class="bottom-title" @click="navTo('../doctor/doctorList?doctorType='+docTab)">
+						<text >{{allDoctorTitle}}</text>
+						<image src="../../static/images/arrow3.png" mode=""></image>
+					</view>
+					 
+				</view>
+				 -->
+			<!-- <view class="doc-cont">
+					<view class="inner">
+						<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
+							<view class="head-box">
+								<image :src="item.headImg" mode="aspectFill"></image>
+							</view>
+							<text class="name ellipsis">{{ item.doctorName }}</text>
+							<text class="position ellipsis">
+								{{utils.getDictLabelName("doctorPosition",item.position)}}
+							</text>
+						</view>
+					</view>
+				</view> -->
+			<!-- 		</view> -->
+			<!-- 问诊案例 -->
+			<!-- <view class="pub-item">
+				<view class="pub-title-box">
+					<text class="left">问诊案例</text>
+					<view class="right" @click="viewAll('doctorCase')">
+						<text class="text">全部案例</text>
+						<image src="../../static/images/arrow_gray.png" mode=""></image>
+					</view>
+				</view>
+				<view class="inner">
+					<view class="pub-tab-box">
+						<view class="tab-inner">
+							<view 
+								v-for="(item,index) in orderTypes" 
+								:key="index"
+								:class="item.id == orderType?'item cases active':'item cases'"
+								@click="orderTypeChange(item)"
+							>
+								<view class="text">
+									{{ item.name }}
+									<image v-show="item.id == orderType" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
+								</view>
+							</view>
+						</view>
+						<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
+					</view>
+					<view class="cases-list">
+						<view class="item" v-for="(item,index) in doctorOrderList" :key="index">
+							<view class="dec-text ellipsis2">{{item.title}}</view>
+							<view class="images-box"  v-if="item.imgs!=null"  >
+								<view class="img-item" v-for="(subitem,j) in utils.photosToArr(item.imgs)" @click="showImg(item.imgs)" :key="j">
+									<image :src="subitem" mode="aspectFill" ></image>
+								</view>
+							</view>
+							<view class="doc-info">
+								<view class="head">
+									<image :src="item.doctorHeadImg" mode="aspectFill"></image>
+								</view>
+								<view class="name">{{item.doctorName}}</view>
+								<view class="line"></view>
+								<view class="posit">
+									{{utils.getDictLabelName("doctorPosition",item.doctorPosition)}}
+								</view>
+								<view class="line"></view>
+								<view class="address">{{item.hospitalName}}</view>
+							</view>
+							<view class="answer-box">
+								<text class="text-inner" v-if="item.orderType == '1' ">{{item.replyContent}}</text>
+								<view class="voice-inner" v-if="item.orderType == '2'">
+									<free-audio 
+										startPic='/static/images/play.png' 
+										endPic='/static/images/pause.png'
+										activeColor="#2BC7B9"
+										:audioId="'audio'+index"
+										:url='item.replyAudioUrl'
+									></free-audio>
+								</view>
+							</view>
+							<view class="read-box">
+								<image src="../../static/images/eye.png" mode=""></image>
+								<text class="text">{{item.views}}人看过</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view> -->
+			<!-- 热门榜单 -->
+			<!-- <NewProduct :detail="newProductList" /> -->
+			<HotProduct :detail="hotProductList" />
+			<!-- 健康百科 -->
+			<!-- <view class="pub-item" style="margin-top: 20rpx;">
+				<view class="pub-title-box">
+					<text class="left">健康百科</text>
+					<view class="right" @click="switchTo('../healthy/index')">
+						<text class="text">更多</text>
+						<image src="../../static/images/arrow_gray.png" mode=""></image>
+					</view>
+				</view>
+				<view class="inner">
+					 
+					<view class="pub-tab-box">
+						<view class="tab-inner">
+							<view 
+								v-for="(item,index) in articleCateList" 
+								:key="index"
+								:class="item.cateId == cateId?'item active':'item'"
+								@click="articleCateChange(item)"
+							>
+								<view class="text">
+									{{ item.cateName }}
+									<image v-show="item.cateId == cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
+								</view>
+							</view>
+						</view>
+						<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
+					</view>
+					 
+					<view class="know-list">
+						<view class="item" v-for="(item,index) in articleList" :key="index" @click="showArticle(item)">
+							<view class="left">
+								<view class="title ellipsis2">{{ item.title }}</view>
+								<view class="info-box">
+									<view class="readers">
+										<view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
+											<view class="head" v-for="(subitem,j) in item.viewsList" :key="j">
+												<image v-if="subitem!=null" :src="subitem.avatar==null?'/static/images/detault_head.jpg':subitem.avatar" mode=""></image>
+											</view>
+										</view>
+										<view class="readings">
+											<image class="eye" src="../../static/images/eye.png" mode=""></image>
+											<text class="num">{{item.views}}</text>
+										</view>
+									</view>
+									<view class="time">{{item.publishTime}}</view>
+								</view>
+							</view>
+							<view class="right">
+								<image :src="item.imageUrl"  mode="aspectFill"></image>
+							</view>
+						</view>
+					</view>
+				</view>
+			</view> -->
+			<!-- 精选药品 -->
+			<TuiProduct ref="tuiProduct" />
+			<!-- <view class="feat-title">
+				<image src="../../static/images/tui.png" mode=""></image>
+				<text>精选药品</text>
+			</view>
+			<view class="drug-list">
+				<view class="item" v-for="(item,index) in tuiProductList" :key="index" @click="showProduct(item)">
+					<view class="img-box">
+						<image :src="item.image" mode="aspectFit"></image>
+					</view>
+					<view class="info-box">
+						<view class="title ellipsis2">{{ item.productName }}</view>
+						<view class="price-box">
+							<view class="now">
+								<text class="unit">¥</text>
+								<text class="num">{{item.price.toFixed(2)}}</text>
+							</view>
+							<view class="old">¥{{item.otPrice.toFixed(2)}}</view>
+						</view>
+					</view>
+				</view>
+			</view> -->
+
+
+
+		</view>
+
+
+		<!-- 限时消息 -->
+		<!-- <view class="message-box" >
+			<view class="left">
+				<image src="../../static/images/close24.png" mode="" @click="closeMsg"></image>
+				<view class="text ellipsis">关注公众号了解更新</view>
+			</view>
+			<view class="btn">查看</view>
+			
+		</view> -->
+		<!-- #ifdef MP-WEIXIN -->
+		<view class="official-account">
+			<official-account @load="bindload" @error="binderror"></official-account>
+		</view>
+		<!-- #endif -->
+		<view class="popup-box" v-if="activityShow">
+			<view class="info-mask" @tap="closeActivity()"></view>
+			<view class="info-form">
+				<image :src="activity.logoUrl" @tap="showActivity()" />
+			</view>
+		</view>
+		<z-modal :show="tuiModalControl" placeholderText="请输入邀请码" :btnGroup="btnGroup" :contentType="2"
+			titleText="填写邀请码" @cancle="cancleTui" @sure="submitTui"></z-modal>
+	</view>
+</template>
+
+<script>
+	import zModal from '@/components/z-modal/z-modal.vue'
+	import {
+		getStoreActivity
+	} from '@/api/activity.js'
+	import {
+		getDepartmentList
+	} from '@/api/doctorOrder.js'
+	import {
+		getMenu,
+		getCanvas,
+		getIndexData,
+		getTuiDoctor,
+		getTuiArticle,
+		getTuiDoctorOrder,
+		getCartCount
+	} from '@/api/index'
+	import {
+		getStoreConfig
+	} from '@/api/common'
+	import tabBg from "@/static/images/tab_bg.png"
+	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
+	import Menu from '@/components/Menu.vue'
+	import HotProduct from './components/HotProduct.vue'
+	// import NewProduct from './components/NewProduct.vue'
+	import TuiProduct from '@/components/tuiProduct.vue'
+	import {
+		getUserInfo,
+		bindPromoter
+	} from '@/api/user'
+	export default {
+		components: {
+			zModal,
+			freeAudio,
+			Menu,
+			HotProduct,
+			TuiProduct
+		},
+		data() {
+			return {
+				status: '',
+				orderStatus: [{
+						name: "精选",
+						value: ""
+					},
+					{
+						name: "健康新品",
+						value: "0"
+					},
+					{
+						name: "营养保健",
+						value: "1"
+					},
+					{
+						name: "健康滋补",
+						value: "2"
+					},{
+						name: "天",
+						value: "3"
+					}
+				],
+				btnGroup: [{
+					text: '取消',
+					color: '#FFFFFF',
+					bgColor: '#999999',
+					width: '150rpx',
+					height: '80rpx',
+					shape: 'fillet',
+					eventName: 'cancle'
+				}, {
+					text: '确定',
+					color: '#FFFFFF',
+					bgColor: '#2BC7B9',
+					width: '150rpx',
+					height: '80rpx',
+					shape: 'fillet',
+					eventName: 'sure'
+				}],
+				tuiModalControl: false,
+				activity: null,
+				activityShow: false,
+				newProductList: [],
+				hotProductList: [],
+				tuiProductList: [],
+				menus: [],
+				canvas: [],
+				allDoctorTitle: "全部医生",
+				topLen: 0,
+				deptId: 0,
+				depts: [],
+				docTab: 1,
+				top: 0,
+				cartCount: 0,
+				doctorOrderList: [],
+				orderType: 0,
+				cateId: null,
+				articleList: [],
+				advList: [],
+				doctorList: [],
+				articleCateList: [],
+
+				// 状态栏的高度
+				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
+				tabBg: tabBg, // tab切换背景
+				// 问诊案例类型
+				orderTypes: [{
+					name: '全部',
+					id: 0,
+				}, {
+					name: '图文',
+					id: 1,
+				}, {
+					name: '语音',
+					id: 2,
+				}],
+				// 限时消息是否显示
+				messageShow: true,
+			}
+			this.getStoreActivity();
+		},
+		onLoad(option) {
+			if (option.userCode != null) {
+				uni.setStorageSync('userCode', option.userCode);
+				if (this.utils.checkLoginState()) {
+					this.getUserInfo();
+				}
+			}
+			if (option.hasOwnProperty('q') && option.q) {
+				// 通过下面这步解码，可以拿到url的值
+				const url = decodeURIComponent(option.q)
+				this.url = url;
+				// // 对url中携带的参数提取处理
+				const obj = this.utils.urlToObj(url)
+				uni.setStorageSync('userCode', obj.userCode);
+				if (this.utils.checkLoginState()) {
+					this.getUserInfo();
+				}
+			}
+			this.getStoreActivity()
+		},
+		// 暂停所有音频（一般用于页面切换时停止正在播放的音频）
+		onUnload() { //普通页面在 onUnload 生命周期中执行
+			uni.$emit('stop')
+		},
+		onHide() { //tabBar页面在onHide生命周期中执行
+			uni.$emit('stop')
+		},
+		onPageScroll(e) {
+			//console.log(e)
+			this.top = e.scrollTop;
+		},
+		mounted() {
+			//this.getDepartmentList();
+		},
+		onShareAppMessage(res) {
+			return {
+				title: '芳华悦选',
+				path: `/pages/common/launch`,
+				imageUrl: '/static/images/logo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
+			}
+		},
+		onReachBottom() {
+			console.log("onReachBottom")
+			this.$refs.tuiProduct.getTuiProducts();
+		},
+		//分享到朋友圈
+		onShareTimeline(res) {
+			return {
+				title: '芳华悦选互联网医院',
+				query: '', //页面参数
+				imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250721/efce6c594de34caba6537992083a5e47.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
+			}
+		},
+		computed: {
+
+			// 计算属性的 getter
+			bg: function() {
+				var top = this.top / 30;
+				// console.log(top)
+				return 'rgba(43,199,185, ' + top + ')';
+			},
+		},
+		onShow() {
+			this.getMenu();
+			this.getIndexData()
+			//this.getTuiDoctorOrder();
+			// console.log(uni.getStorageSync('isLocation'))
+			// if(uni.getStorageSync('isLocation')==""){
+			// 	this.getLocation();
+			// }
+			if (this.utils.checkLoginState()) {
+				this.getCartCount();
+			}
+			this.getStoreConfig();
+			//this.getTuiDoctor()
+			this.getCanvas();
+		},
+		methods: { // tab切换
+			orderStatusChange(item) {
+				this.status = item.value
+			},
+			navToMiniProgram() {
+				uni.navigateToMiniProgram({
+					// appid  写你要跳转的小程序的 appid
+					appId: 'wx503cf8ab31f83dd4',
+					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
+					path: '/pages/common/launch',
+					extraData: {
+						// 'type': 'out'
+					},
+					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
+					envVersion: 'develop',
+					success(res) {
+						// 打开成功
+						// uni.showToast({
+						// 	title: '跳转成功'
+						// })
+					},
+					fail(err) {
+						// 打开失败/取消
+						// uni.showToast({
+						// 	title: '跳转不成功'
+						// })
+					}
+				})
+			},
+			getUserInfo() {
+				getUserInfo().then(
+					res => {
+						if (res.code == 200) {
+							if (res.user != null) {
+								if (res.user.isPromoter == null || res.user.isPromoter == 0) {
+									this.tuiModalControl = true
+								}
+							}
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			cancleTui(e) {
+				this.tuiModalControl = false
+			},
+			submitTui(e) {
+				console.log(e)
+				if (e.inputText == null || e.inputText == "") {
+					uni.showToast({
+						icon: 'none',
+						title: "请输入邀请码",
+					});
+					return;
+				}
+				var data = {
+					userCode: e.inputText
+				};
+				bindPromoter(data).then(
+					res => {
+						if (res.code == 200) {
+							uni.showToast({
+								icon: 'none',
+								title: res.msg,
+							});
+							this.tuiModalControl = false
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: res.msg,
+							});
+						}
+					},
+					rej => {}
+				);
+
+			},
+			bindload: function(detail) {},
+			binderror: function(detail) {},
+			closeActivity() {
+				this.activityShow = false;
+				// uni.setStorageSync(this.activity.activityId,null);
+			},
+			getStoreActivity() {
+				let data = {}
+				getStoreActivity(data).then(res => {
+					this.activity = res.activity;
+					if (this.activity != null) {
+						// if(uni.getStorageSync(this.activity.activityId)!=null)
+						// {
+						// 	uni.setStorageSync(this.activity.activityId,1);
+						// 	this.activityShow=true;
+						// }
+						// else{
+						// 	this.activityShow=false;
+						// }
+						this.activityShow = true;
+
+
+					} else {
+						this.activityShow = false;
+					}
+				})
+			},
+			showActivity() {
+				this.activityShow = false;
+				uni.navigateTo({
+					url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId
+				})
+			},
+			menuClick(item) {
+				if (item.linkType == 1) {
+					if (item.linkUrl == "/pages/shopping/index") {
+						uni.switchTab({
+							url: item.linkUrl
+						})
+					} else if (item.linkUrl == "/pages/healthy/index") {
+						uni.switchTab({
+							url: item.linkUrl
+						})
+					} else {
+						uni.navigateTo({
+							url: item.linkUrl
+						})
+					}
+
+				} else if (item.linkType == 0) {
+					// this.navToMiniProgram();
+					uni.showToast({
+						icon: 'none',
+						title: "开发中...",
+					});
+				}
+			},
+			goDev() {
+				uni.showToast({
+					icon: 'none',
+					title: "开发中...",
+				});
+			},
+			handleAdvClick(item) {
+				console.log(item);
+				if (item.showType == 1) {
+					uni.setStorageSync('url', item.advUrl);
+					uni.navigateTo({
+						url: "h5"
+					})
+				} else if (item.showType == 2) {
+					uni.navigateTo({
+						url: item.advUrl
+					})
+				} else if (item.showType == 3) {
+					uni.setStorageSync('content', item.content);
+					uni.navigateTo({
+						url: "content"
+					})
+				}
+
+			},
+			deptChange(item) {
+				this.deptId = item.departmentId;
+				this.getTuiDoctor();
+			},
+			getMenu() {
+				getMenu().then(res => {
+					console.log(res)
+					if (res.code == 200) {
+						this.menus = res.data
+					} else {
+
+					}
+				});
+			},
+			getCanvas() {
+				getCanvas().then(res => {
+					if (res.code == 200) {
+						console.log(res.data)
+						this.canvas = JSON.parse(res.data.json)
+					} else {
+
+					}
+				});
+			},
+			getDepartmentList() {
+				this.depts = [];
+				getDepartmentList().then(res => {
+					if (res.code == 200) {
+						var allDept = {
+							departmentId: 0,
+							departmentName: "全部"
+						}
+						this.depts.push(allDept);
+						this.depts = this.depts.concat(res.data);
+					} else {
+						uni.showToast({
+							icon: 'none',
+							title: "请求失败",
+						});
+					}
+				});
+			},
+			getTuiDoctor() {
+				let data = {
+					departmentId: this.deptId,
+					doctorType: this.docTab
+				};
+				getTuiDoctor(data).then(
+					res => {
+						if (res.code == 200) {
+							this.doctorList = res.data;
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			docTabChange(val) {
+				if (val == 1) {
+					this.allDoctorTitle = "全部医师"
+				}
+				if (val == 2) {
+					this.allDoctorTitle = "全部药师"
+				}
+				if (val == 3) {
+					this.allDoctorTitle = "全部营养师"
+				}
+				this.docTab = val;
+				this.getTuiDoctor();
+			},
+			showImg(urls) {
+				var imgArr = urls.split(',');
+				//预览图片
+				uni.previewImage({
+					urls: imgArr,
+					current: imgArr[0]
+				});
+			},
+			getStoreConfig() {
+				getStoreConfig().then(
+					res => {
+						if (res.code == 200) {
+							uni.setStorageSync('config', JSON.stringify(res.data));
+						}
+					},
+					rej => {}
+				);
+
+			},
+			goAuthUrl(url) {
+				this.utils.isLogin().then(res => {
+					if (res) {
+						uni.navigateTo({
+							url: url
+						})
+					}
+				})
+			},
+			switchTo(url) {
+				uni.switchTab({
+					url: url
+				})
+				return
+			},
+			// 跳转页面
+			navTo(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			getLocation() {
+				var that = this;
+				uni.authorize({
+					scope: 'scope.userLocation',
+					success() {
+						uni.getLocation({
+							type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
+							success: function(res) {
+								uni.setStorageSync('isLocation', 1);
+								uni.setStorageSync('lng', res.longitude);
+								uni.setStorageSync('lat', res.latitude);
+							},
+						})
+					},
+					fail(err) {
+						console.log(err)
+					}
+				})
+			},
+			getIndexData() {
+
+				let data = {};
+				getIndexData(data).then(
+					res => {
+						if (res.code == 200) {
+							this.advList = res.data.advList;
+							this.articleCateList = res.data.articleCateList;
+							if (this.articleCateList != null && this.articleCateList.length > 0) {
+								this.cateId = this.articleCateList[0].cateId;
+								this.getTuiArticle()
+							}
+							this.tuiProductList = res.data.tuiProductList
+							this.newProductList = res.data.newProductList
+							this.hotProductList = res.data.hotProductList
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			getCartCount() {
+				this.utils.isLogin().then(res => {
+					if (res) {
+						getCartCount().then(
+							cartRes => {
+								if (cartRes.code == 200) {
+									this.cartCount = cartRes.data;
+								}
+							},
+							rej => {}
+						);
+					}
+				})
+
+			},
+			getTuiArticle() {
+				let data = {
+					cateId: this.cateId
+				};
+				getTuiArticle(data).then(
+					res => {
+						if (res.code == 200) {
+							this.articleList = res.data;
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			getTuiDoctorOrder() {
+				let data = {
+					orderType: this.orderType
+				};
+				getTuiDoctorOrder(data).then(
+					res => {
+						if (res.code == 200) {
+							this.doctorOrderList = res.data;
+						} else {
+							uni.showToast({
+								icon: 'none',
+								title: "请求失败",
+							});
+						}
+					},
+					rej => {}
+				);
+			},
+			showArticle(item) {
+				uni.navigateTo({
+					url: '../healthy/detail?articleId=' + item.articleId
+				})
+			},
+			showProduct(item) {
+				uni.navigateTo({
+					url: '/pages_shopping/shopping/productDetails?productId=' + item.productId
+				})
+			},
+			// 顶部搜索
+			toSearch() {
+				uni.navigateTo({
+					url: './productSearch'
+				})
+			},
+			// 健康知识选中
+			articleCateChange(item) {
+				this.cateId = item.cateId;
+				this.getTuiArticle();
+			},
+			// 问诊案例选中
+			orderTypeChange(item) {
+				this.orderType = item.id;
+				console.log(this.orderType)
+				this.getTuiDoctorOrder();
+			},
+			// 关闭限时消息
+			closeMsg() {
+				this.messageShow = false
+			},
+			// 查看全部
+			viewAll(url) {
+				uni.navigateTo({
+					url: '/pages/home/' + url,
+				});
+			},
+			shopDoctor(item) {
+				console.log(item);
+				uni.navigateTo({
+					url: "../doctor/doctorDetail?doctorId=" + item.doctorId
+				})
+			},
+			// 跳转页面
+			navgetTo(url) {
+				uni.navigateTo({
+					url: url
+				})
+			},
+			switchTo(url) {
+				uni.switchTab({
+					url: url
+				})
+				return
+			},
+			// 在线问诊
+			openIm() {
+				uni.navigateTo({
+					url: '../doctor/doctorOrderIM?orderId=10'
+				})
+			}
+		}
+	}
+</script>
+
+<style lang="scss">
+	.fixed-top-box {
+		width: 100%;
+		position: fixed;
+		top: 0;
+		left: 0;
+		z-index: 1000;
+		transition: all 0.5s;
+		background-color: #2bc7b9;
+
+		&.show-back {
+			// background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
+		}
+
+		.status_bar {
+
+			width: 100%;
+		}
+
+		.shop-block {
+			display: flex;
+			transform: translateY();
+			justify-content: flex-end;
+
+			.shop {
+				width: 64rpx;
+				height: 64rpx;
+				padding: 12rpx;
+				margin-right: 210rpx;
+				border-radius: 32rpx 32rpx 32rpx 32rpx;
+				border: 1rpx solid #E9E9E9;
+				box-sizing: border-box;
+				background: #FFFFFF;
+
+			}
+		}
+	}
+
+	.content {
+		width: 100%;
+		position: relative;
+
+		.bg {
+			width: 100%;
+			height: 380rpx;
+			position: absolute;
+			top: 0;
+			left: 0;
+		}
+
+		.top-inner {
+			width: 100%;
+			position: absolute;
+			top: 0;
+			left: 0;
+			z-index: 5;
+
+			.top-title {
+				position: absolute;
+				top: 88rpx;
+				display: flex;
+				flex-direction: column;
+				height: 88rpx;
+				// line-height: 88rpx;
+				font-size: 36rpx;
+				color: #000000;
+				justify-content: flex-start;
+				padding-left: 24rpx;
+
+				.name {
+					font-weight: 500;
+					width: 183rpx;
+					height: 75rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+
+				.dot {
+					font-size: 24rpx;
+					color: #999999;
+				}
+
+
+			}
+
+			.func-cont {
+				box-sizing: border-box;
+				display: flex;
+				align-items: center;
+				padding: 30rpx 20rpx 30rpx 20rpx;
+
+				.search-cont {
+					box-sizing: border-box;
+					display: flex;
+					align-items: center;
+					flex: 1;
+					height: 72rpx;
+					background: #FFFFFF;
+					border-radius: 34rpx 34rpx 34rpx 34rpx;
+					border: 2rpx solid #02B176;
+					padding: 4rpx 4rpx 4rpx 24rpx;
+
+					.icon-search {
+						width: 28rpx;
+						height: 28rpx;
+						margin-right: 20rpx;
+					}
+
+					input {
+						height: 60rpx;
+						line-height: 60rpx;
+						flex: 1;
+					}
+
+					.search-button {
+						width: 120rpx;
+						height: 60rpx;
+						background: linear-gradient(90deg, #38D97D 0%, #02B176 100%);
+						border-radius: 30rpx 30rpx 30rpx 30rpx;
+						font-weight: 500;
+						font-size: 28rpx;
+						color: #FFFFFF;
+						text-align: center;
+						line-height: 60rpx;
+					}
+				}
+
+				::v-deep.uni-badge {
+					border: none;
+					background-color: #FF3636;
+					font-family: Roboto;
+				}
+
+				.img-item {
+					width: 44rpx;
+					height: 44rpx;
+					margin-left: 20rpx;
+
+					image {
+						width: 100%;
+						height: 100%;
+					}
+				}
+			}
+
+			.tips {
+				margin: 0rpx 20rpx 30rpx;
+				height: 40rpx;
+				line-height: 40rpx;
+				display: flex;
+				justify-content: space-between;
+				align-items: center;
+
+				.left {
+					font-size: 30rpx;
+					color: #FFFFFF;
+				}
+
+				.right {
+					padding: 5rpx 20rpx;
+					font-size: 24rpx;
+					color: #FFFFFF;
+					background-color: #2bc7b9;
+					border-radius: 50rpx;
+				}
+			}
+		}
+
+		.banner-box {
+			padding: 0 20rpx;
+
+			.inner {
+				width: 100%;
+				height: 236rpx;
+				border-radius: 10rpx;
+				overflow: hidden;
+
+				.swiper,
+				.swiper-item,
+				.swiper-item image {
+					width: 100%;
+					height: 100%;
+				}
+
+			}
+		}
+
+		// tab栏切换
+		.pub-tab-box {
+			display: flex;
+			align-items: center;
+			box-sizing: border-box;
+			width: 100%;
+			padding: 0 24upx;
+			background-color: #FFFFFF;
+			justify-content: space-between;
+			.icon {
+				width: 32rpx;
+				height: 32rpx;
+			}
+
+			.tab-inner {
+				height: 88upx;
+				line-height: 88upx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				overflow-x: auto;
+				position: relative;
+				margin-right: 12rpx;
+				.white-gradient {
+					position: absolute;
+					right: 0;
+					width: 64rpx;
+					height: 64rpx;
+					z-index: 1;
+				}
+			}
+
+			.item {
+				font-size: 30upx;
+				white-space: nowrap;
+				line-height: 1;
+				font-family: PingFang SC, PingFang SC;
+				color: #4D4D4D;
+				margin-right: 32upx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				&:last-child {
+					margin-right: 0;
+				}
+
+				&.active {
+					font-weight: bold;
+					color: #333333;
+				}
+
+				.text {
+					position: relative;
+					z-index: 1;
+				}
+
+				.tab-bg {
+					width: 60rpx;
+					height: 12rpx;
+					background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
+					border-radius: 6rpx 6rpx 6rpx 6rpx;
+					position: absolute;
+					top: 26upx;
+					left: 50%;
+					transform: translateX(-36upx);
+					z-index: -1;
+				}
+			}
+		}
+
+		.menu-content {
+			// width: 100%;
+			background-color: #fff;
+			overflow: hidden;
+			padding: 20rpx 20rpx 0;
+		}
+
+		.menu-box {
+			display: flex;
+			align-items: center;
+			background-color: #FFFFFF;
+		}
+
+		.online-inquiry {
+			box-sizing: border-box;
+			width: 100%;
+			height: 170rpx;
+			padding: 0 20rpx;
+			background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 62%, rgba(255, 255, 255, 0) 100%);
+			display: flex;
+			justify-content: space-between;
+
+			.item {
+				// width: 46.13%;
+
+				width: 346rpx;
+				height: 150rpx;
+				position: relative;
+
+				.bg-img,
+				.inner {
+					border-radius: 15rpx;
+					width: 100%;
+					height: 100%;
+					position: absolute;
+					top: 0;
+					left: 0;
+					z-index: 1;
+				}
+
+				.inner {
+					box-sizing: border-box;
+					z-index: 2;
+					display: flex;
+					flex-direction: column;
+					justify-content: center;
+					padding-left: 32rpx;
+
+					.title {
+						font-size: 30rpx;
+						line-height: 1;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #111111;
+						margin-bottom: 20rpx;
+					}
+
+					.sub-title {
+						font-size: 24rpx;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+					}
+
+					image {
+						width: 80rpx;
+						height: 90rpx;
+						position: absolute;
+						right: 7rpx;
+						bottom: 7rpx;
+					}
+				}
+			}
+		}
+
+		.index-cont {
+			box-sizing: border-box;
+			padding: 0 20rpx 120rpx;
+
+			.pub-item {
+				background: #FFFFFF;
+				border-radius: 16rpx;
+				margin-bottom: 20rpx;
+
+				.tabs {
+					width: 100%;
+					display: flex;
+					align-items: center;
+					justify-content: flex-start;
+					height: 110rpx;
+					background-color: #F0F3F4;
+
+					.tab {
+						height: 110rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						position: relative;
+						flex: 1;
+
+						.img {
+							z-index: 1;
+							position: absolute;
+							top: 0rpx;
+							left: 0rpx;
+							width: 100%;
+							height: 100%;
+						}
+
+						.inner {
+							z-index: 2;
+
+							.title {
+								font-size: 32rpx;
+								font-family: PingFang SC;
+								font-weight: bold;
+								color: #666666;
+							}
+
+							.active {
+								color: #2BC7B9;
+							}
+						}
+
+					}
+
+
+				}
+
+				.pub-title-box {
+					box-sizing: border-box;
+					padding: 36rpx 30rpx;
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+
+					.left {
+						font-size: 32rpx;
+						line-height: 1;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #111111;
+					}
+
+					.right {
+						display: flex;
+						align-items: center;
+						justify-content: center;
+
+						.text {
+							font-size: 24rpx;
+							line-height: 1;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #999999;
+							margin-right: 10rpx;
+						}
+
+						image {
+							width: 14rpx;
+							height: 24rpx;
+						}
+					}
+
+				}
+
+				.doc-tab-box {
+					padding: 14rpx 30rpx 0rpx 30rpx;
+					position: relative;
+
+					.tab-inner {
+						padding: 14rpx 0 30rpx;
+						display: flex;
+						overflow-x: auto;
+					}
+
+					.item {
+						font-size: 28rpx;
+						white-space: nowrap;
+						line-height: 1;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+						margin-right: 40rpx;
+						position: relative;
+
+						&:last-child {
+							margin-right: 0;
+						}
+
+						&.active {
+							font-weight: bold;
+							color: #333333;
+						}
+
+						&.cases {
+							margin-right: 60rpx;
+						}
+
+						.text {
+							position: relative;
+							z-index: 1;
+						}
+
+						.tab-bg {
+							width: 72rpx;
+							height: 28rpx;
+							position: absolute;
+							top: 17rpx;
+							left: 50%;
+							transform: translateX(-36rpx);
+							z-index: -1;
+						}
+					}
+
+					.right-mask {
+						width: 56rpx;
+						height: 34rpx;
+						position: absolute;
+						top: 25rpx;
+						right: 0rpx;
+						z-index: 1;
+					}
+				}
+
+				.doc-list {
+					padding: 20rpx;
+
+					.item {
+						box-sizing: border-box;
+						background: #FFFFFF;
+						// border-radius: 16rpx;
+						display: flex;
+						border-bottom: 1px solid #F0F0F0;
+						margin-bottom: 30rpx;
+
+						.head-box {
+							width: 120rpx;
+							height: 120rpx;
+							background: #EDF1F4;
+							border-radius: 50%;
+							overflow: hidden;
+							margin-right: 30rpx;
+
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+
+						.info {
+							width: calc(100% - 150rpx);
+
+							.top {
+								display: flex;
+								align-items: center;
+								font-family: PingFang SC;
+								line-height: 1;
+
+								.name {
+									font-size: 34rpx;
+									font-weight: bold;
+									color: #111111;
+								}
+
+								.line {
+									width: 1px;
+									height: 26rpx;
+									background: #DDDDDD;
+									margin: 0 20rpx;
+								}
+
+								.other {
+									font-size: 28rpx;
+									font-weight: 500;
+									color: #333333;
+								}
+							}
+
+							.unit-box {
+								display: flex;
+								margin-top: 24rpx;
+
+								.level {
+									padding: 0 10rpx;
+									height: 30rpx;
+									line-height: 30rpx;
+									font-size: 22rpx;
+									font-family: PingFang SC;
+									font-weight: 500;
+									color: #FFFFFF;
+									background: #2BC7B9;
+									border-radius: 10rpx 4rpx 10rpx 4rpx;
+									margin-right: 12rpx;
+								}
+
+								.name {
+									font-size: 28rpx;
+									font-family: PingFang SC;
+									font-weight: 500;
+									color: #333333;
+									line-height: 30rpx;
+								}
+							}
+
+							.expertise {
+								font-size: 26rpx;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #666666;
+								line-height: 42rpx;
+								margin: 22rpx 0 26rpx;
+							}
+
+							.rate-box {
+								display: flex;
+								align-items: center;
+
+								.star {
+									display: flex;
+									align-items: center;
+
+									image {
+										width: 22rpx;
+										height: 22rpx;
+										margin-right: 10rpx;
+									}
+
+									text {
+										font-size: 26rpx;
+										font-family: PingFang SC;
+										font-weight: bold;
+										color: #CEA764;
+										line-height: 1;
+									}
+								}
+
+								.line {
+									width: 1px;
+									height: 20rpx;
+									background: #DDDDDD;
+									margin: 0 20rpx;
+								}
+
+								.num-box {
+									display: flex;
+									align-items: center;
+									font-family: PingFang SC;
+
+									.label {
+										font-size: 24rpx;
+										font-weight: 500;
+										color: #999999;
+										line-height: 1;
+										margin-right: 7px;
+									}
+
+									.num {
+										font-size: 26rpx;
+										font-weight: bold;
+										color: #CEA764;
+										line-height: 1;
+									}
+								}
+							}
+
+							.price-box {
+								display: flex;
+								align-items: center;
+								margin-top: 38rpx;
+
+								.btn-item {
+									display: flex;
+									align-items: center;
+									justify-content: center;
+									width: 164rpx;
+									height: 56rpx;
+									line-height: 56rpx;
+									border: 1px solid rgba(43, 199, 185, 0.5);
+									border-radius: 28rpx;
+									font-family: PingFang SC;
+									margin-right: 30rpx;
+
+									&:last-child {
+										margin-right: 0;
+									}
+
+									.label {
+										font-size: 26rpx;
+										font-weight: 500;
+										color: #2BC7B9;
+										margin-right: 5rpx;
+									}
+
+									.num {
+										font-size: 28rpx;
+										font-weight: bold;
+										color: #2BC7B9;
+									}
+								}
+							}
+						}
+					}
+
+					.item:last-child {
+						border-bottom: none;
+						margin-bottom: 0rpx;
+					}
+
+					.bottom-title {
+						height: 50rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						font-size: 26rpx;
+						font-family: PingFang SC;
+						font-weight: bold;
+						color: #2BC7B9;
+
+						image {
+							margin-left: 8rpx;
+							width: 14rpx;
+							height: 24rpx;
+						}
+					}
+				}
+
+				// 医师团队
+				.doc-cont {
+					box-sizing: border-box;
+					padding: 0 30rpx;
+
+					.inner {
+						padding: 4rpx 0 40rpx;
+						display: flex;
+						overflow-x: auto;
+					}
+
+					.item {
+						display: flex;
+						align-items: center;
+						flex-direction: column;
+						margin-right: 40rpx;
+
+						&:last-child {
+							margin-right: 0;
+						}
+
+						.head-box {
+							width: 120rpx;
+							height: 120rpx;
+							background: #F2F5F9;
+							border-radius: 50%;
+							margin-bottom: 20rpx;
+							overflow: hidden;
+
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+
+						.name {
+							max-width: 120rpx;
+							font-size: 28rpx;
+							line-height: 1;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #111111;
+							margin-bottom: 16rpx;
+							text-align: center;
+						}
+
+						.position {
+							max-width: 120rpx;
+							font-size: 24rpx;
+							line-height: 1;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #999999;
+							text-align: center;
+						}
+					}
+				}
+
+				.inner {
+					padding: 0 30rpx;
+				}
+
+				// 健康知识
+				.pub-tab-box {
+					position: relative;
+
+					.tab-inner {
+						padding: 14rpx 0 30rpx;
+						display: flex;
+						overflow-x: auto;
+					}
+
+					.item {
+						font-size: 28rpx;
+						white-space: nowrap;
+						line-height: 1;
+						font-family: PingFang SC;
+						font-weight: 500;
+						color: #666666;
+						margin-right: 40rpx;
+						position: relative;
+
+						&:last-child {
+							margin-right: 0;
+						}
+
+						&.active {
+							font-weight: bold;
+							color: #333333;
+						}
+
+						&.cases {
+							margin-right: 60rpx;
+						}
+
+						.text {
+							position: relative;
+							z-index: 1;
+						}
+
+						.tab-bg {
+							width: 72rpx;
+							height: 28rpx;
+							position: absolute;
+							top: 17rpx;
+							left: 50%;
+							transform: translateX(-36rpx);
+							z-index: -1;
+						}
+					}
+
+					.right-mask {
+						width: 56rpx;
+						height: 34rpx;
+						position: absolute;
+						top: 14rpx;
+						right: -30rpx;
+						z-index: 1;
+					}
+				}
+
+				.know-list {
+					padding-right: 10rpx;
+
+					.item {
+						padding: 30rpx 0;
+						display: flex;
+						align-items: center;
+						justify-content: space-between;
+						border-bottom: 1px solid #F0F0F0;
+
+						&:last-child {
+							border-bottom: none;
+						}
+
+						.left {
+							flex: 1;
+							padding-right: 40rpx;
+							height: 190rpx;
+							display: flex;
+							flex-direction: column;
+							justify-content: space-between;
+
+							.title {
+								font-size: 32rpx;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #111111;
+								line-height: 48rpx;
+							}
+
+							.info-box {
+								width: 100%;
+								display: flex;
+								align-items: center;
+								justify-content: space-between;
+
+								.readers {
+									display: flex;
+									align-items: center;
+
+									.head-box {
+										margin-right: 27rpx;
+										display: flex;
+										align-items: center;
+
+										.head {
+											width: 48rpx;
+											height: 48rpx;
+											border-radius: 50%;
+											overflow: hidden;
+											box-shadow: 0 0 0 1px #fff;
+											margin-right: -10rpx;
+
+											image {
+												width: 100%;
+												height: 100%;
+											}
+										}
+									}
+
+									.readings {
+										display: flex;
+										align-items: center;
+
+										.eye {
+											width: 26rpx;
+											height: 20rpx;
+											margin-right: 9rpx;
+										}
+
+										.num {
+											font-size: 24rpx;
+											font-family: PingFang SC;
+											font-weight: 500;
+											color: #999999;
+											line-height: 1;
+										}
+									}
+								}
+
+								.time {
+									font-size: 24rpx;
+									line-height: 1;
+									font-family: PingFang SC;
+									font-weight: 500;
+									color: #999999;
+								}
+							}
+						}
+
+						.right {
+							width: 250rpx;
+							height: 190rpx;
+							border-radius: 8rpx;
+							overflow: hidden;
+
+							image {
+								width: 100%;
+								height: 100%;
+							}
+						}
+					}
+				}
+
+				// 问诊案例
+				.cases-list {
+					padding-bottom: 10rpx;
+
+					.item {
+						padding: 30rpx 0;
+						border-bottom: 1px solid #F0F0F0;
+
+						&:last-child {
+							border-bottom: none;
+						}
+
+						.dec-text {
+							font-size: 32rpx;
+							font-family: PingFang SC;
+							font-weight: bold;
+							color: #111111;
+							line-height: 48rpx;
+						}
+
+						.images-box {
+							margin-top: 10rpx;
+							display: flex;
+							flex-wrap: wrap;
+
+							.img-item {
+								width: 155rpx;
+								height: 155rpx;
+								background: #F5F5F5;
+								border-radius: 8rpx;
+								margin: 0 10rpx 10rpx 0;
+								overflow: hidden;
+
+								image {
+									width: 100%;
+									height: 100%;
+								}
+
+								&:nth-child(4n) {
+									margin-right: 0;
+								}
+							}
+						}
+
+						.doc-info {
+							display: flex;
+							align-items: center;
+							margin: 30rpx 0 20rpx;
+
+							.head {
+								width: 60rpx;
+								height: 60rpx;
+								background: #F2F5F9;
+								border-radius: 50%;
+								margin-right: 20rpx;
+								overflow: hidden;
+
+								image {
+									width: 100%;
+									height: 100%;
+								}
+							}
+
+							.name {
+								font-size: 28rpx;
+								line-height: 1;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #111111;
+							}
+
+							.line {
+								width: 1px;
+								height: 22rpx;
+								background: #DDDDDD;
+								margin: 0 16rpx;
+							}
+
+							.posit,
+							.address {
+								font-size: 26rpx;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #999999;
+							}
+						}
+
+						.answer-box {
+							width: 100%;
+							// height: 117rpx;
+							background: #F5F7F7;
+							border-radius: 10rpx;
+							display: flex;
+							flex-direction: column;
+							justify-content: center;
+
+							.text-inner {
+								// height: 84rpx;
+								font-size: 28rpx;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #666666;
+								line-height: 42rpx;
+								padding: 15rpx;
+							}
+						}
+
+						.read-box {
+							margin-top: 30rpx;
+							display: flex;
+							align-items: center;
+							justify-content: flex-end;
+
+							image {
+								width: 24rpx;
+								height: 19rpx;
+								margin-right: 10rpx;
+							}
+
+							.text {
+								font-size: 24rpx;
+								font-family: PingFang SC;
+								font-weight: 500;
+								color: #999999;
+							}
+						}
+					}
+				}
+			}
+
+			// 精选药品
+			.feat-title {
+				margin-top: 30rpx;
+				padding: 10rpx 0 33rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+
+				image {
+					width: 37rpx;
+					height: 37rpx;
+					margin: 0rpx 20rpx;
+				}
+
+				text {
+					font-size: 36rpx;
+					line-height: 1;
+					font-family: PingFang SC;
+					font-weight: bold;
+					color: #111111;
+				}
+			}
+
+			.drug-list {
+				display: flex;
+				flex-wrap: wrap;
+
+				// margin-bottom: 20rpx;
+				.item {
+					margin-right: 20rpx;
+					margin-bottom: 20rpx;
+					width: 345rpx;
+					background: #FFFFFF;
+					box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
+					border-radius: 20rpx;
+					overflow: hidden;
+
+					&:nth-child(2n) {
+						margin-right: 0;
+					}
+
+					.img-box {
+						width: 100%;
+						height: 334rpx;
+
+						image {
+							width: 100%;
+							height: 100%;
+						}
+					}
+
+					.info-box {
+						box-sizing: border-box;
+						height: 182rpx;
+						padding: 20rpx;
+
+						.title {
+							height: 80rpx;
+							font-size: 26rpx;
+							font-family: PingFang SC;
+							font-weight: 500;
+							color: #111111;
+							line-height: 40rpx;
+						}
+
+						.price-box {
+							display: flex;
+							align-items: center;
+							margin-top: 20rpx;
+
+							.now {
+								color: #FF6633;
+								display: flex;
+								align-items: flex-end;
+								margin-right: 20rpx;
+								font-family: PingFang SC;
+
+								.unit {
+									font-size: 24rpx;
+									line-height: 1.4;
+									margin-right: 4rpx;
+								}
+
+								.num {
+									font-size: 36rpx;
+									font-weight: bold;
+									line-height: 1;
+								}
+							}
+
+							.old {
+								font-size: 26rpx;
+								font-family: PingFang SC;
+								text-decoration: line-through;
+								color: #BBBBBB;
+								line-height: 1;
+							}
+						}
+					}
+				}
+			}
+		}
+
+	}
+
+	.official-account {
+		box-sizing: border-box;
+		width: 100%;
+		height: 100rpx;
+		position: fixed;
+		bottom: 30rpx;
+		z-index: 99;
+		padding: 0 20rpx 180rpx 20rpx;
+	}
+
+	// 消息
+	.message-box {
+		box-sizing: border-box;
+		width: 100%;
+		height: 84rpx;
+		background: #F3FFFD;
+		border: 1px solid #C7E9E5;
+		box-shadow: 0px 4rpx 12rpx 0px rgba(90, 203, 138, 0.16);
+		border-radius: 16rpx;
+		position: fixed;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 30rpx;
+		z-index: 99;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		padding: 0 20rpx 0 30rpx;
+
+		.left {
+			flex: 1;
+			display: flex;
+			align-items: center;
+
+			image {
+				width: 24rpx;
+				height: 24rpx;
+				margin-right: 18rpx;
+			}
+
+			.text {
+				width: 90%;
+				font-size: 28rpx;
+				font-family: PingFang SC;
+				font-weight: 500;
+				color: #2BC7B9;
+			}
+		}
+
+		.btn {
+			width: 100rpx;
+			height: 48rpx;
+			line-height: 48rpx;
+			text-align: center;
+			font-size: 24rpx;
+			font-family: PingFang SC;
+			font-weight: 500;
+			color: #FFFFFF;
+			border: 1px solid #D2E6FF;
+			background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
+			border-radius: 24rpx;
+			margin-left: 30rpx;
+		}
+
+	}
+
+	.contact-btn {
+		display: inline-block;
+		position: absolute;
+		top: 0;
+		left: 0;
+		width: 100%;
+		height: 100%;
+		opacity: 0;
+	}
+
+	.popup-box {
+		position: fixed;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		z-index: 999;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+
+		.info-mask {
+			position: fixed;
+			top: 0;
+			right: 0;
+			bottom: 0;
+			left: 0;
+			background-color: rgba($color: #000000, $alpha: 0.5);
+			z-index: 999;
+		}
+
+		.info-form {
+			z-index: 1000;
+			width: 450rpx;
+			display: flex;
+			flex-direction: column;
+			justify-content: center;
+			align-items: center;
+			position: relative;
+
+			image {
+				width: 100%;
+			}
+		}
+	}
+</style>

pages/home/index.vue

@@ -1,2315 +1,130 @@
 <template>
-	<view class="content">
-		<!-- 背景图片 -->
-		<image class="bg" src="../../static/images/yuexuan_home_top_bg.png" mode=""></image>
-		<view>
-			<view class="top-inner">
-				<view class="fixed-top-box" :style="{ background: bg }">
-					<!-- 这里是状态栏 -->
-					<view class="status_bar" :style="{height: statusBarHeight}"></view>
-					<view class="shop-block">
-						<view class="shop">
-							<image class="w40 h40" src="/static/images/shopping_car_icon.png"></image>
-						</view>
+	<view class="w-all h-all flex flex-column bg-F5F7FA">
+		<image src="/static/images/yuexuan_home_top_bg.png" class="absolute top-0 left-0 zi-1 w-all h-266"></image>
+		<uni-nav-bar fixed :statusBar="true" left-icon="back" backgroundColor="" :border="false" rightWidth="0"
+			leftWidth="0">
+			<template v-slot:default>
+				<view class="scs-headr-default flex items-center h-44">
+					<view class="flex-1">
+						<view class="fw-500 fs-18 text-000000">芳华悦选</view>
+						<view class="fw-400 fs-12 text-999999">让家人放心吃健康安全的食品</view>
+					</view>
+					<view class="img-car flex items-center justify-center w-32 h-32 bg-white rounded-32">
+						<image class="w-20 h-20" src="/static/images/shopping_car_icon.png"></image>
 					</view>
-					<view class="top-title">
-						<view class="name">芳华悦选</view>
-						<view class="dot">让家人放心吃健康安全的食品</view>
-					</view>
-					<!-- 搜索框、购物车、客服 -->
-					<view class="func-cont">
-						<view class="search-cont">
-							<image class="icon-search" src="../../static/images/search.png" mode=""></image>
-							<input type="text" disabled value="" placeholder="搜索商品"
-								placeholder-style="font-size:28rpx;color:#BBBBBB;font-family: PingFang SC;"
-								@click="toSearch" />
-							<view class="search-button">搜索</view>
-						</view>
-						<!-- 购物车 -->
-						<!-- <uni-badge size="small" :text="cartCount" absolute="rightTop" type="error">
-							<view class="img-item" @click="goAuthUrl('../shopping/cart')">
-								<image src="../../static/images/cart_wihte.png" mode=""></image>
-							</view>
-						</uni-badge> -->
-						<view class="img-item" style="position: relative;">
-							<image src="../../static/images/share_icon.png" mode=""></image>
-							<button class="contact-btn" open-type="contact"></button>
-						</view>
-
-						<view class="img-item" style="position: relative;">
-							<image src="../../static/images/new_hall_icon.png" mode=""></image>
-							<button class="contact-btn" open-type="contact"></button>
-						</view>
-					</view>
-					<!-- <view class="tips">
-						
-						<view class="left"></view>
-						<view class="right"  @click="navTo('./cert')">资质证明</view>
-					</view> -->
-				</view>
-			</view>
-			<!-- 头部间距 -->
-			<view style="padding-bottom:220rpx">
-				<view class="status_bar" :style="{height: statusBarHeight}"></view>
-			</view>
-			<!-- 轮播图 -->
-			<view class="banner-box">
-				<view class="inner">
-					<swiper class="swiper" :indicator-dots="true" :circular="true" :autoplay="true" :interval="3000"
-						:duration="1000" indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#ffffff">
-						<swiper-item class="swiper-item" v-for="(item,index) in advList" :key="index"
-							@click="handleAdvClick(item)">
-							<image :src="item.imageUrl" mode=""></image>
-						</swiper-item>
-					</swiper>
-				</view>
-			</view>
-
-			<!-- tab切换 -->
-			<view class="pub-tab-box">
-				<view class="tab-inner">
-					<view v-for="(item,index) in orderStatus" :key="index"
-						:class="status ==item.value?'item active':'item'" @click="orderStatusChange(item)">
-						<view class="text">
-							{{ item.name }}
-							<view class="tab-bg" v-show="status ==item.value"></view>
-							<!-- <image v-show="status ==item.value" class="tab-bg" src="/static/images/tab_bg.png" mode=""> -->
-							<!-- </image> -->
-						</view>
-					</view>
-					<image class="white-gradient" src="/static/images/white_gradient_bg.png"></image>
 				</view>
-				<image class="icon mr24" src="/static/images/product_section_icon.png"></image>
-				<image class="icon" src="/static/images/home_filter_icon.png"></image>
-			</view>
-			<!-- 菜单 -->
-			<view class="menu-content">
-				<view class="menu-box">
-					<Menu :list="menus" @menuClick="menuClick" v-if="menus.length>0" style="width:100%;"></Menu>
+			</template>
+		</uni-nav-bar>
+		<!-- 搜索栏 -->
+		<HomeSearch @onSearch="onSearch" />
+		<!-- tab栏 -->
+		<view class="scs-nav-bar px-12 mt-11 rounded-8 zi-10">
+			<view class="flex items-center relative ">
+				<scsScrollNavbar :tabsData="tabsData" :tabCurrentIndex="tabCurrentIndex" nameKey="name"
+					key="tabCurrentIndex" @tabChange="tabChange" />
+				<image class="w-32 h-32  absolute bottom-2.5 right-40 zi-10" src="/static/images/white_gradient_bg.png">
+				</image>
+				<view class="flex items-center justify-center">
+					<image class="w-16 h-16 ml-5 mr-12" src="/static/images/product_section_icon.png"></image>
+					<image class="w-16 h-16 mr-7" src="/static/images/home_filter_icon.png"></image>
 				</view>
 			</view>
-
+			<homeMenu :autoplay="false" :swiperList="menusData" />
 		</view>
-
-		<!-- 在线问诊、处方查询 -->
-		<view class="online-inquiry">
-			<view class="item" @click="navTo('/pages_shopping/shopping/productSalesList')">
-				<!-- <image  class="bg-img" src="../../static/images/banner1.png" mode=""></image> -->
-				<image class="bg-img"
-					src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250320/f2d3ba32a9344dc79b4df7c228189243.png"
-					mode=""></image>
-				<!-- <view class="inner">
-					<text class="title">用药榜</text>
-					<text class="sub-title"></text>
-					<image src="https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250320/f2d3ba32a9344dc79b4df7c228189243.png" mode=""></image>
-				</view> -->
-			</view>
-			<view class="item" @click="navTo('/pages_course/livingList')">
-				<image class="bg-img" src="/static/images/banner2.png" mode=""></image>
-			</view>
-		</view>
-		<view class="index-cont">
-			<!-- 医生团队 -->
-			<!-- <view class="pub-item">
-				<view class="pub-title-box">
-					<text class="left">医生团队</text>
-					<view class="right" @click="navTo('../doctor/doctorList')">
-						<text class="text">全部医生</text>
-						<image src="../../static/images/arrow_gray.png" mode=""></image>
-					</view>
-				</view>
-				<view class="doc-cont">
-					<view class="inner">
-						<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
-							<view class="head-box">
-								<image :src="item.headImg" mode="aspectFill"></image>
-							</view>
-							<text class="name ellipsis">{{ item.doctorName }}</text>
-							<text class="position ellipsis">
-								{{utils.getDictLabelName("doctorPosition",item.position)}}
-							</text>
-						</view>
-					</view>
-				</view>
-			</view> -->
-			<!-- <view class="pub-item">
-				<view class="tabs">
-					<view class="tab" @click="docTabChange(1)">
-						<image v-if="docTab==1" class="img" src="../../static/images/tab1.png" mode=""></image>
-						<view class="inner">
-							<text :class="docTab == 1?'title active':'title'" >推荐医生</text>
-						</view>
-					</view>
-					<view class="tab" @click="docTabChange(2)">
-						<image v-if="docTab==2" class="img" src="../../static/images/tab2.png" mode=""></image>
-						<view class="inner">
-							<text :class="docTab == 2?'title active':'title'" >推荐药师</text>
-						</view>
-					</view>
-					<view class="tab" @click="docTabChange(3)">
-						<image v-if="docTab==3" class="img" src="../../static/images/tab3.png" mode=""></image>
-						<view class="inner">
-							<text  :class="docTab == 3?'title active':'title'" >推荐营养师</text>
-						</view>
-					</view>
-				</view>
-				<view class="doc-tab-box">
-					<view class="tab-inner" >
-						<view 
-							v-for="(item,index) in depts" 
-							:key="index"
-							:class="item.departmentId == deptId?'item active':'item'"
-							@click="deptChange(item)"
-						>
-							<view class="text">
-								{{ item.departmentName }}
-								<image v-show="item.departmentId == deptId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
-							</view>
-						</view>
-					</view>
-					<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
-				</view>
-				<view class="doc-list">
-					<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)"> -->
-			<!-- 头像 -->
-			<!-- 	<view class="head-box">
-							<image :src="item.headImg" mode="aspectFill"></image>
-						</view> -->
-			<!-- 详细信息 -->
-			<!-- 		<view class="info"> -->
-			<!-- 姓名等 -->
-			<!-- 		<view class="top">
-								<text class="name">{{ item.doctorName }}</text>
-								<view class="line"></view>
-								<text class="other">{{utils.getDictLabelName("doctorPosition",item.position)}}</text>
-								<view class="line"></view>
-								<text class="other">{{ item.departmentName }}</text>
-							</view> -->
-			<!-- 单位 -->
-			<!-- <view class="unit-box"> -->
-			<!-- 	<view class="level">三甲</view> -->
-			<!-- 			<view class="name">{{ item.hospitalName }}</view>
-							</view> -->
-			<!-- 擅长 -->
-			<!-- 	<view class="expertise ellipsis2">
-								擅长：{{ item.doctorDesc }}
-							</view> -->
-			<!-- 评分 -->
-			<!-- <view class="rate-box">
-								<view class="star">
-									<image src="../../static/images/star.png" mode=""></image>
-									<text>{{ item.pings }}</text>
-								</view>
-								<view class="line"></view>
-								<view class="num-box">
-									<text class="label">接诊数</text>
-									<text class="num">{{ item.orders }}</text>
-								</view>
-								<view class="line"></view>
-								<view class="num-box">
-									<text class="label">响应速度</text>
-									<text class="num">{{ item.speed }}分钟</text>
-								</view>
-							</view> -->
-			<!-- 价格 -->
-			<!-- 	<view class="price-box">
-								<view class="btn-item" v-for="(subitme) in item.price">
-									<text class="label" >{{subitme.priceType==1?'图文':'语音'}}</text>
-									<text class="num">¥{{subitme.price.toFixed(2)}}</text>
-								</view>
-							</view>
-						</view>
-					</view>
-					<view class="bottom-title" @click="navTo('../doctor/doctorList?doctorType='+docTab)">
-						<text >{{allDoctorTitle}}</text>
-						<image src="../../static/images/arrow3.png" mode=""></image>
-					</view>
-					 
-				</view>
-				 -->
-			<!-- <view class="doc-cont">
-					<view class="inner">
-						<view class="item" v-for="(item,index) in doctorList" :key="index" @click="shopDoctor(item)">
-							<view class="head-box">
-								<image :src="item.headImg" mode="aspectFill"></image>
-							</view>
-							<text class="name ellipsis">{{ item.doctorName }}</text>
-							<text class="position ellipsis">
-								{{utils.getDictLabelName("doctorPosition",item.position)}}
-							</text>
-						</view>
-					</view>
-				</view> -->
-			<!-- 		</view> -->
-			<!-- 问诊案例 -->
-			<!-- <view class="pub-item">
-				<view class="pub-title-box">
-					<text class="left">问诊案例</text>
-					<view class="right" @click="viewAll('doctorCase')">
-						<text class="text">全部案例</text>
-						<image src="../../static/images/arrow_gray.png" mode=""></image>
-					</view>
-				</view>
-				<view class="inner">
-					<view class="pub-tab-box">
-						<view class="tab-inner">
-							<view 
-								v-for="(item,index) in orderTypes" 
-								:key="index"
-								:class="item.id == orderType?'item cases active':'item cases'"
-								@click="orderTypeChange(item)"
-							>
-								<view class="text">
-									{{ item.name }}
-									<image v-show="item.id == orderType" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
-								</view>
-							</view>
-						</view>
-						<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
-					</view>
-					<view class="cases-list">
-						<view class="item" v-for="(item,index) in doctorOrderList" :key="index">
-							<view class="dec-text ellipsis2">{{item.title}}</view>
-							<view class="images-box"  v-if="item.imgs!=null"  >
-								<view class="img-item" v-for="(subitem,j) in utils.photosToArr(item.imgs)" @click="showImg(item.imgs)" :key="j">
-									<image :src="subitem" mode="aspectFill" ></image>
-								</view>
-							</view>
-							<view class="doc-info">
-								<view class="head">
-									<image :src="item.doctorHeadImg" mode="aspectFill"></image>
-								</view>
-								<view class="name">{{item.doctorName}}</view>
-								<view class="line"></view>
-								<view class="posit">
-									{{utils.getDictLabelName("doctorPosition",item.doctorPosition)}}
-								</view>
-								<view class="line"></view>
-								<view class="address">{{item.hospitalName}}</view>
-							</view>
-							<view class="answer-box">
-								<text class="text-inner" v-if="item.orderType == '1' ">{{item.replyContent}}</text>
-								<view class="voice-inner" v-if="item.orderType == '2'">
-									<free-audio 
-										startPic='/static/images/play.png' 
-										endPic='/static/images/pause.png'
-										activeColor="#2BC7B9"
-										:audioId="'audio'+index"
-										:url='item.replyAudioUrl'
-									></free-audio>
-								</view>
-							</view>
-							<view class="read-box">
-								<image src="../../static/images/eye.png" mode=""></image>
-								<text class="text">{{item.views}}人看过</text>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view> -->
-			<!-- 热门榜单 -->
-			<!-- <NewProduct :detail="newProductList" /> -->
-			<HotProduct :detail="hotProductList" />
-			<!-- 健康百科 -->
-			<!-- <view class="pub-item" style="margin-top: 20rpx;">
-				<view class="pub-title-box">
-					<text class="left">健康百科</text>
-					<view class="right" @click="switchTo('../healthy/index')">
-						<text class="text">更多</text>
-						<image src="../../static/images/arrow_gray.png" mode=""></image>
-					</view>
-				</view>
-				<view class="inner">
-					 
-					<view class="pub-tab-box">
-						<view class="tab-inner">
-							<view 
-								v-for="(item,index) in articleCateList" 
-								:key="index"
-								:class="item.cateId == cateId?'item active':'item'"
-								@click="articleCateChange(item)"
-							>
-								<view class="text">
-									{{ item.cateName }}
-									<image v-show="item.cateId == cateId" class="tab-bg" src="../../static/images/tab_bg.png" mode=""></image>
-								</view>
-							</view>
-						</view>
-						<image class="right-mask" src="../../static/images/mask.png" mode=""></image>
-					</view>
-					 
-					<view class="know-list">
-						<view class="item" v-for="(item,index) in articleList" :key="index" @click="showArticle(item)">
-							<view class="left">
-								<view class="title ellipsis2">{{ item.title }}</view>
-								<view class="info-box">
-									<view class="readers">
-										<view class="head-box" v-if="item.viewsList!=null&&item.viewsList.length>0">
-											<view class="head" v-for="(subitem,j) in item.viewsList" :key="j">
-												<image v-if="subitem!=null" :src="subitem.avatar==null?'/static/images/detault_head.jpg':subitem.avatar" mode=""></image>
-											</view>
-										</view>
-										<view class="readings">
-											<image class="eye" src="../../static/images/eye.png" mode=""></image>
-											<text class="num">{{item.views}}</text>
-										</view>
-									</view>
-									<view class="time">{{item.publishTime}}</view>
-								</view>
-							</view>
-							<view class="right">
-								<image :src="item.imageUrl"  mode="aspectFill"></image>
-							</view>
-						</view>
-					</view>
-				</view>
-			</view> -->
-			<!-- 精选药品 -->
-			<TuiProduct ref="tuiProduct" />
-			<!-- <view class="feat-title">
-				<image src="../../static/images/tui.png" mode=""></image>
-				<text>精选药品</text>
-			</view>
-			<view class="drug-list">
-				<view class="item" v-for="(item,index) in tuiProductList" :key="index" @click="showProduct(item)">
-					<view class="img-box">
-						<image :src="item.image" mode="aspectFit"></image>
-					</view>
-					<view class="info-box">
-						<view class="title ellipsis2">{{ item.productName }}</view>
-						<view class="price-box">
-							<view class="now">
-								<text class="unit">¥</text>
-								<text class="num">{{item.price.toFixed(2)}}</text>
-							</view>
-							<view class="old">¥{{item.otPrice.toFixed(2)}}</view>
-						</view>
-					</view>
-				</view>
-			</view> -->
-
-
-
+		<!-- 商品栏 -->
+		<homeProduct />
+		<!-- tab栏 -->
+		<view class="bg-white w-all flex-1 mt-10 rounded-t-8 px-28">
+			<scsScrollIconbar :tabsData="tabsProduct" :tabCurrentIndex="tabsProductIndex" nameKey="name"
+				key="tabsProductIndex" @tabChange="tabProductChange"  />
 		</view>
 
 
-		<!-- 限时消息 -->
-		<!-- <view class="message-box" >
-			<view class="left">
-				<image src="../../static/images/close24.png" mode="" @click="closeMsg"></image>
-				<view class="text ellipsis">关注公众号了解更新</view>
-			</view>
-			<view class="btn">查看</view>
-			
-		</view> -->
-		<!-- #ifdef MP-WEIXIN -->
-		<view class="official-account">
-			<official-account @load="bindload" @error="binderror"></official-account>
-		</view>
-		<!-- #endif -->
-		<view class="popup-box" v-if="activityShow">
-			<view class="info-mask" @tap="closeActivity()"></view>
-			<view class="info-form">
-				<image :src="activity.logoUrl" @tap="showActivity()" />
-			</view>
-		</view>
-		<z-modal :show="tuiModalControl" placeholderText="请输入邀请码" :btnGroup="btnGroup" :contentType="2"
-			titleText="填写邀请码" @cancle="cancleTui" @sure="submitTui"></z-modal>
 	</view>
 </template>
-
 <script>
-	import zModal from '@/components/z-modal/z-modal.vue'
-	import {
-		getStoreActivity
-	} from '@/api/activity.js'
-	import {
-		getDepartmentList
-	} from '@/api/doctorOrder.js'
-	import {
-		getMenu,
-		getCanvas,
-		getIndexData,
-		getTuiDoctor,
-		getTuiArticle,
-		getTuiDoctorOrder,
-		getCartCount
-	} from '@/api/index'
-	import {
-		getStoreConfig
-	} from '@/api/common'
-	import tabBg from "@/static/images/tab_bg.png"
-	import freeAudio from '@/components/chengpeng-audio/free-audio.vue'
-	import Menu from '@/components/Menu.vue'
-	import HotProduct from './components/HotProduct.vue'
-	// import NewProduct from './components/NewProduct.vue'
-	import TuiProduct from '@/components/tuiProduct.vue'
-	import {
-		getUserInfo,
-		bindPromoter
-	} from '@/api/user'
-	export default {
-		components: {
-			zModal,
-			freeAudio,
-			Menu,
-			HotProduct,
-			TuiProduct
-		},
-		data() {
-			return {
-				status: '',
-				orderStatus: [{
-						name: "精选",
-						value: ""
-					},
-					{
-						name: "健康新品",
-						value: "0"
-					},
-					{
-						name: "营养保健",
-						value: "1"
-					},
-					{
-						name: "健康滋补",
-						value: "2"
-					},{
-						name: "天",
-						value: "3"
-					}
-				],
-				btnGroup: [{
-					text: '取消',
-					color: '#FFFFFF',
-					bgColor: '#999999',
-					width: '150rpx',
-					height: '80rpx',
-					shape: 'fillet',
-					eventName: 'cancle'
-				}, {
-					text: '确定',
-					color: '#FFFFFF',
-					bgColor: '#2BC7B9',
-					width: '150rpx',
-					height: '80rpx',
-					shape: 'fillet',
-					eventName: 'sure'
-				}],
-				tuiModalControl: false,
-				activity: null,
-				activityShow: false,
-				newProductList: [],
-				hotProductList: [],
-				tuiProductList: [],
-				menus: [],
-				canvas: [],
-				allDoctorTitle: "全部医生",
-				topLen: 0,
-				deptId: 0,
-				depts: [],
-				docTab: 1,
-				top: 0,
-				cartCount: 0,
-				doctorOrderList: [],
-				orderType: 0,
-				cateId: null,
-				articleList: [],
-				advList: [],
-				doctorList: [],
-				articleCateList: [],
+import scsScrollNavbar from '@/components/public/scs-scroll-navbar.vue'
+import scsScrollIconbar from '@/components/public/scs-scroll-iconbar.vue'
+import homeMenu from './components/home-menu.vue'
+import homeProduct from './components/home-product.vue'
+import HomeSearch from './components/home-search.vue'
+import {
+	getMenu,
+	getCanvas,
+	getIndexData,
+	getTuiDoctor,
+	getTuiArticle,
+	getTuiDoctorOrder,
+	getCartCount
+} from '@/api/index'
+export default {
+	components: {
+		scsScrollNavbar,
+		homeMenu,
+		homeProduct,
+		HomeSearch,
+		scsScrollIconbar,
+	},
+	data() {
+		return {
+			statusBarHeight: 0,
+			tabsData: [
+				{ name: '精选' },
+				{ name: '健康新品' },
+				{ name: '营养保健' },
+				{ name: '健康滋补' },
+			],
+			tabCurrentIndex: 0,
+			menusData: [],
+			tabsProduct: [
+				{ name: '今日主推' },
+				{ name: '健康新品' },
+				{ name: '营养保健' },
+			],
+			tabsProductIndex: 0,
+		}
+	},
+	onLoad() {
+
+	},
+	onShow() {
+		this.getMenuData();
+	},
+	methods: {
+		// 搜索
+		onSearch(keyword) {
 
-				// 状态栏的高度
-				statusBarHeight: uni.getStorageSync('menuInfo').statusBarHeight,
-				tabBg: tabBg, // tab切换背景
-				// 问诊案例类型
-				orderTypes: [{
-					name: '全部',
-					id: 0,
-				}, {
-					name: '图文',
-					id: 1,
-				}, {
-					name: '语音',
-					id: 2,
-				}],
-				// 限时消息是否显示
-				messageShow: true,
-			}
-			this.getStoreActivity();
-		},
-		onLoad(option) {
-			if (option.userCode != null) {
-				uni.setStorageSync('userCode', option.userCode);
-				if (this.utils.checkLoginState()) {
-					this.getUserInfo();
-				}
-			}
-			if (option.hasOwnProperty('q') && option.q) {
-				// 通过下面这步解码，可以拿到url的值
-				const url = decodeURIComponent(option.q)
-				this.url = url;
-				// // 对url中携带的参数提取处理
-				const obj = this.utils.urlToObj(url)
-				uni.setStorageSync('userCode', obj.userCode);
-				if (this.utils.checkLoginState()) {
-					this.getUserInfo();
-				}
-			}
-			this.getStoreActivity()
-		},
-		// 暂停所有音频（一般用于页面切换时停止正在播放的音频）
-		onUnload() { //普通页面在 onUnload 生命周期中执行
-			uni.$emit('stop')
 		},
-		onHide() { //tabBar页面在onHide生命周期中执行
-			uni.$emit('stop')
+		// 分类tab切换
+		tabChange(index) {
+			this.tabCurrentIndex = index;
 		},
-		onPageScroll(e) {
-			//console.log(e)
-			this.top = e.scrollTop;
+		// 商品tab切换
+		tabProductChange(index) {
+			this.tabsProductIndex = index;
 		},
-		mounted() {
-			//this.getDepartmentList();
-		},
-		onShareAppMessage(res) {
-			return {
-				title: '芳华悦选',
-				path: `/pages/common/launch`,
-				imageUrl: '/static/images/logo.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
-			}
-		},
-		onReachBottom() {
-			console.log("onReachBottom")
-			this.$refs.tuiProduct.getTuiProducts();
-		},
-		//分享到朋友圈
-		onShareTimeline(res) {
-			return {
-				title: '芳华悦选互联网医院',
-				query: '', //页面参数
-				imageUrl: 'https://hos-1309931967.cos.ap-chongqing.myqcloud.com/fs/20250721/efce6c594de34caba6537992083a5e47.png' //分享图标，路径可以是本地文件路径、代码包文件路径或者网络图片路径.支持PNG及JPG。显示图片长宽比是 5:4
-			}
-		},
-		computed: {
-
-			// 计算属性的 getter
-			bg: function() {
-				var top = this.top / 30;
-				// console.log(top)
-				return 'rgba(43,199,185, ' + top + ')';
-			},
-		},
-		onShow() {
-			this.getMenu();
-			this.getIndexData()
-			//this.getTuiDoctorOrder();
-			// console.log(uni.getStorageSync('isLocation'))
-			// if(uni.getStorageSync('isLocation')==""){
-			// 	this.getLocation();
-			// }
-			if (this.utils.checkLoginState()) {
-				this.getCartCount();
-			}
-			this.getStoreConfig();
-			//this.getTuiDoctor()
-			this.getCanvas();
-		},
-		methods: { // tab切换
-			orderStatusChange(item) {
-				this.status = item.value
-			},
-			navToMiniProgram() {
-				uni.navigateToMiniProgram({
-					// appid  写你要跳转的小程序的 appid
-					appId: 'wx503cf8ab31f83dd4',
-					// 路径写  src下的路径,假如你跳转的是pages下的页面,就可以写pages/index
-					path: '/pages/common/launch',
-					extraData: {
-						// 'type': 'out'
-					},
-					// 这个不写的话会显示开发环境,不能正常跳转,写上就能正常跳转了
-					envVersion: 'develop',
-					success(res) {
-						// 打开成功
-						// uni.showToast({
-						// 	title: '跳转成功'
-						// })
-					},
-					fail(err) {
-						// 打开失败/取消
-						// uni.showToast({
-						// 	title: '跳转不成功'
-						// })
-					}
-				})
-			},
-			getUserInfo() {
-				getUserInfo().then(
-					res => {
-						if (res.code == 200) {
-							if (res.user != null) {
-								if (res.user.isPromoter == null || res.user.isPromoter == 0) {
-									this.tuiModalControl = true
-								}
-							}
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: "请求失败",
-							});
-						}
-					},
-					rej => {}
-				);
-			},
-			cancleTui(e) {
-				this.tuiModalControl = false
-			},
-			submitTui(e) {
-				console.log(e)
-				if (e.inputText == null || e.inputText == "") {
-					uni.showToast({
-						icon: 'none',
-						title: "请输入邀请码",
-					});
-					return;
-				}
-				var data = {
-					userCode: e.inputText
-				};
-				bindPromoter(data).then(
-					res => {
-						if (res.code == 200) {
-							uni.showToast({
-								icon: 'none',
-								title: res.msg,
-							});
-							this.tuiModalControl = false
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: res.msg,
-							});
-						}
-					},
-					rej => {}
-				);
-
-			},
-			bindload: function(detail) {},
-			binderror: function(detail) {},
-			closeActivity() {
-				this.activityShow = false;
-				// uni.setStorageSync(this.activity.activityId,null);
-			},
-			getStoreActivity() {
-				let data = {}
-				getStoreActivity(data).then(res => {
-					this.activity = res.activity;
-					if (this.activity != null) {
-						// if(uni.getStorageSync(this.activity.activityId)!=null)
-						// {
-						// 	uni.setStorageSync(this.activity.activityId,1);
-						// 	this.activityShow=true;
-						// }
-						// else{
-						// 	this.activityShow=false;
-						// }
-						this.activityShow = true;
-
-
-					} else {
-						this.activityShow = false;
-					}
-				})
-			},
-			showActivity() {
-				this.activityShow = false;
-				uni.navigateTo({
-					url: '/pages_shopping/shopping/activityDetails?activityId=' + this.activity.activityId
-				})
-			},
-			menuClick(item) {
-				if (item.linkType == 1) {
-					if (item.linkUrl == "/pages/shopping/index") {
-						uni.switchTab({
-							url: item.linkUrl
-						})
-					} else if (item.linkUrl == "/pages/healthy/index") {
-						uni.switchTab({
-							url: item.linkUrl
-						})
-					} else {
-						uni.navigateTo({
-							url: item.linkUrl
-						})
-					}
-
-				} else if (item.linkType == 0) {
-					// this.navToMiniProgram();
-					uni.showToast({
-						icon: 'none',
-						title: "开发中...",
-					});
-				}
-			},
-			goDev() {
+		// 获取分类数据
+		async getMenuData() {
+			const { code, data, msg } = await getMenu();
+			if (code == 200) {
+				this.menusData = this.$scsUtils.splitArrayIntoSubarrays(data, 5) || []
+				console.log("---------11111111-------", this.menusData)
+			} else {
 				uni.showToast({
-					icon: 'none',
-					title: "开发中...",
-				});
-			},
-			handleAdvClick(item) {
-				console.log(item);
-				if (item.showType == 1) {
-					uni.setStorageSync('url', item.advUrl);
-					uni.navigateTo({
-						url: "h5"
-					})
-				} else if (item.showType == 2) {
-					uni.navigateTo({
-						url: item.advUrl
-					})
-				} else if (item.showType == 3) {
-					uni.setStorageSync('content', item.content);
-					uni.navigateTo({
-						url: "content"
-					})
-				}
-
-			},
-			deptChange(item) {
-				this.deptId = item.departmentId;
-				this.getTuiDoctor();
-			},
-			getMenu() {
-				getMenu().then(res => {
-					console.log(res)
-					if (res.code == 200) {
-						this.menus = res.data
-					} else {
-
-					}
-				});
-			},
-			getCanvas() {
-				getCanvas().then(res => {
-					if (res.code == 200) {
-						console.log(res.data)
-						this.canvas = JSON.parse(res.data.json)
-					} else {
-
-					}
-				});
-			},
-			getDepartmentList() {
-				this.depts = [];
-				getDepartmentList().then(res => {
-					if (res.code == 200) {
-						var allDept = {
-							departmentId: 0,
-							departmentName: "全部"
-						}
-						this.depts.push(allDept);
-						this.depts = this.depts.concat(res.data);
-					} else {
-						uni.showToast({
-							icon: 'none',
-							title: "请求失败",
-						});
-					}
-				});
-			},
-			getTuiDoctor() {
-				let data = {
-					departmentId: this.deptId,
-					doctorType: this.docTab
-				};
-				getTuiDoctor(data).then(
-					res => {
-						if (res.code == 200) {
-							this.doctorList = res.data;
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: "请求失败",
-							});
-						}
-					},
-					rej => {}
-				);
-			},
-			docTabChange(val) {
-				if (val == 1) {
-					this.allDoctorTitle = "全部医师"
-				}
-				if (val == 2) {
-					this.allDoctorTitle = "全部药师"
-				}
-				if (val == 3) {
-					this.allDoctorTitle = "全部营养师"
-				}
-				this.docTab = val;
-				this.getTuiDoctor();
-			},
-			showImg(urls) {
-				var imgArr = urls.split(',');
-				//预览图片
-				uni.previewImage({
-					urls: imgArr,
-					current: imgArr[0]
-				});
-			},
-			getStoreConfig() {
-				getStoreConfig().then(
-					res => {
-						if (res.code == 200) {
-							uni.setStorageSync('config', JSON.stringify(res.data));
-						}
-					},
-					rej => {}
-				);
-
-			},
-			goAuthUrl(url) {
-				this.utils.isLogin().then(res => {
-					if (res) {
-						uni.navigateTo({
-							url: url
-						})
-					}
-				})
-			},
-			switchTo(url) {
-				uni.switchTab({
-					url: url
-				})
-				return
-			},
-			// 跳转页面
-			navTo(url) {
-				uni.navigateTo({
-					url: url
-				})
-			},
-			getLocation() {
-				var that = this;
-				uni.authorize({
-					scope: 'scope.userLocation',
-					success() {
-						uni.getLocation({
-							type: 'gcj02', //腾讯地图使用gcj02获取位置坐标
-							success: function(res) {
-								uni.setStorageSync('isLocation', 1);
-								uni.setStorageSync('lng', res.longitude);
-								uni.setStorageSync('lat', res.latitude);
-							},
-						})
-					},
-					fail(err) {
-						console.log(err)
-					}
-				})
-			},
-			getIndexData() {
-
-				let data = {};
-				getIndexData(data).then(
-					res => {
-						if (res.code == 200) {
-							this.advList = res.data.advList;
-							this.articleCateList = res.data.articleCateList;
-							if (this.articleCateList != null && this.articleCateList.length > 0) {
-								this.cateId = this.articleCateList[0].cateId;
-								this.getTuiArticle()
-							}
-							this.tuiProductList = res.data.tuiProductList
-							this.newProductList = res.data.newProductList
-							this.hotProductList = res.data.hotProductList
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: "请求失败",
-							});
-						}
-					},
-					rej => {}
-				);
-			},
-			getCartCount() {
-				this.utils.isLogin().then(res => {
-					if (res) {
-						getCartCount().then(
-							cartRes => {
-								if (cartRes.code == 200) {
-									this.cartCount = cartRes.data;
-								}
-							},
-							rej => {}
-						);
-					}
-				})
-
-			},
-			getTuiArticle() {
-				let data = {
-					cateId: this.cateId
-				};
-				getTuiArticle(data).then(
-					res => {
-						if (res.code == 200) {
-							this.articleList = res.data;
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: "请求失败",
-							});
-						}
-					},
-					rej => {}
-				);
-			},
-			getTuiDoctorOrder() {
-				let data = {
-					orderType: this.orderType
-				};
-				getTuiDoctorOrder(data).then(
-					res => {
-						if (res.code == 200) {
-							this.doctorOrderList = res.data;
-						} else {
-							uni.showToast({
-								icon: 'none',
-								title: "请求失败",
-							});
-						}
-					},
-					rej => {}
-				);
-			},
-			showArticle(item) {
-				uni.navigateTo({
-					url: '../healthy/detail?articleId=' + item.articleId
-				})
-			},
-			showProduct(item) {
-				uni.navigateTo({
-					url: '/pages_shopping/shopping/productDetails?productId=' + item.productId
-				})
-			},
-			// 顶部搜索
-			toSearch() {
-				uni.navigateTo({
-					url: './productSearch'
-				})
-			},
-			// 健康知识选中
-			articleCateChange(item) {
-				this.cateId = item.cateId;
-				this.getTuiArticle();
-			},
-			// 问诊案例选中
-			orderTypeChange(item) {
-				this.orderType = item.id;
-				console.log(this.orderType)
-				this.getTuiDoctorOrder();
-			},
-			// 关闭限时消息
-			closeMsg() {
-				this.messageShow = false
-			},
-			// 查看全部
-			viewAll(url) {
-				uni.navigateTo({
-					url: '/pages/home/' + url,
-				});
-			},
-			shopDoctor(item) {
-				console.log(item);
-				uni.navigateTo({
-					url: "../doctor/doctorDetail?doctorId=" + item.doctorId
-				})
-			},
-			// 跳转页面
-			navgetTo(url) {
-				uni.navigateTo({
-					url: url
-				})
-			},
-			switchTo(url) {
-				uni.switchTab({
-					url: url
-				})
-				return
-			},
-			// 在线问诊
-			openIm() {
-				uni.navigateTo({
-					url: '../doctor/doctorOrderIM?orderId=10'
+					title: msg,
+					icon: 'none'
 				})
 			}
-		}
+		},
 	}
+}
 </script>
-
-<style lang="scss">
-	.fixed-top-box {
-		width: 100%;
-		position: fixed;
-		top: 0;
-		left: 0;
-		z-index: 1000;
-		transition: all 0.5s;
-		background-color: #2bc7b9;
-
-		&.show-back {
-			// background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
-		}
-
-		.status_bar {
-
-			width: 100%;
-		}
-
-		.shop-block {
-			display: flex;
-			transform: translateY();
-			justify-content: flex-end;
-
-			.shop {
-				width: 64rpx;
-				height: 64rpx;
-				padding: 12rpx;
-				margin-right: 210rpx;
-				border-radius: 32rpx 32rpx 32rpx 32rpx;
-				border: 1rpx solid #E9E9E9;
-				box-sizing: border-box;
-				background: #FFFFFF;
-
-			}
-		}
-	}
-
-	.content {
-		width: 100%;
-		position: relative;
-
-		.bg {
-			width: 100%;
-			height: 380rpx;
-			position: absolute;
-			top: 0;
-			left: 0;
-		}
-
-		.top-inner {
-			width: 100%;
-			position: absolute;
-			top: 0;
-			left: 0;
-			z-index: 5;
-
-			.top-title {
-				position: absolute;
-				top: 88rpx;
-				display: flex;
-				flex-direction: column;
-				height: 88rpx;
-				// line-height: 88rpx;
-				font-size: 36rpx;
-				color: #000000;
-				justify-content: flex-start;
-				padding-left: 24rpx;
-
-				.name {
-					font-weight: 500;
-					width: 183rpx;
-					height: 75rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-
-				.dot {
-					font-size: 24rpx;
-					color: #999999;
-				}
-
-
-			}
-
-			.func-cont {
-				box-sizing: border-box;
-				display: flex;
-				align-items: center;
-				padding: 30rpx 20rpx 30rpx 20rpx;
-
-				.search-cont {
-					box-sizing: border-box;
-					display: flex;
-					align-items: center;
-					flex: 1;
-					height: 72rpx;
-					background: #FFFFFF;
-					border-radius: 34rpx 34rpx 34rpx 34rpx;
-					border: 2rpx solid #02B176;
-					padding: 4rpx 4rpx 4rpx 24rpx;
-
-					.icon-search {
-						width: 28rpx;
-						height: 28rpx;
-						margin-right: 20rpx;
-					}
-
-					input {
-						height: 60rpx;
-						line-height: 60rpx;
-						flex: 1;
-					}
-
-					.search-button {
-						width: 120rpx;
-						height: 60rpx;
-						background: linear-gradient(90deg, #38D97D 0%, #02B176 100%);
-						border-radius: 30rpx 30rpx 30rpx 30rpx;
-						font-weight: 500;
-						font-size: 28rpx;
-						color: #FFFFFF;
-						text-align: center;
-						line-height: 60rpx;
-					}
-				}
-
-				::v-deep.uni-badge {
-					border: none;
-					background-color: #FF3636;
-					font-family: Roboto;
-				}
-
-				.img-item {
-					width: 44rpx;
-					height: 44rpx;
-					margin-left: 20rpx;
-
-					image {
-						width: 100%;
-						height: 100%;
-					}
-				}
-			}
-
-			.tips {
-				margin: 0rpx 20rpx 30rpx;
-				height: 40rpx;
-				line-height: 40rpx;
-				display: flex;
-				justify-content: space-between;
-				align-items: center;
-
-				.left {
-					font-size: 30rpx;
-					color: #FFFFFF;
-				}
-
-				.right {
-					padding: 5rpx 20rpx;
-					font-size: 24rpx;
-					color: #FFFFFF;
-					background-color: #2bc7b9;
-					border-radius: 50rpx;
-				}
-			}
-		}
-
-		.banner-box {
-			padding: 0 20rpx;
-
-			.inner {
-				width: 100%;
-				height: 236rpx;
-				border-radius: 10rpx;
-				overflow: hidden;
-
-				.swiper,
-				.swiper-item,
-				.swiper-item image {
-					width: 100%;
-					height: 100%;
-				}
-
-			}
-		}
-
-		// tab栏切换
-		.pub-tab-box {
-			display: flex;
-			align-items: center;
-			box-sizing: border-box;
-			width: 100%;
-			padding: 0 24upx;
-			background-color: #FFFFFF;
-			justify-content: space-between;
-			.icon {
-				width: 32rpx;
-				height: 32rpx;
-			}
-
-			.tab-inner {
-				height: 88upx;
-				line-height: 88upx;
-				display: flex;
-				align-items: center;
-				justify-content: space-between;
-				overflow-x: auto;
-				position: relative;
-				margin-right: 12rpx;
-				.white-gradient {
-					position: absolute;
-					right: 0;
-					width: 64rpx;
-					height: 64rpx;
-					z-index: 1;
-				}
-			}
-
-			.item {
-				font-size: 30upx;
-				white-space: nowrap;
-				line-height: 1;
-				font-family: PingFang SC, PingFang SC;
-				color: #4D4D4D;
-				margin-right: 32upx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				&:last-child {
-					margin-right: 0;
-				}
-
-				&.active {
-					font-weight: bold;
-					color: #333333;
-				}
-
-				.text {
-					position: relative;
-					z-index: 1;
-				}
-
-				.tab-bg {
-					width: 60rpx;
-					height: 12rpx;
-					background: linear-gradient(90deg, rgba(56, 217, 125, 0.5) 0%, rgba(56, 217, 125, 0) 100%);
-					border-radius: 6rpx 6rpx 6rpx 6rpx;
-					position: absolute;
-					top: 26upx;
-					left: 50%;
-					transform: translateX(-36upx);
-					z-index: -1;
-				}
-			}
-		}
-
-		.menu-content {
-			// width: 100%;
-			background-color: #fff;
-			overflow: hidden;
-			padding: 20rpx 20rpx 0;
-		}
-
-		.menu-box {
-			display: flex;
-			align-items: center;
-			background-color: #FFFFFF;
-		}
-
-		.online-inquiry {
-			box-sizing: border-box;
-			width: 100%;
-			height: 170rpx;
-			padding: 0 20rpx;
-			background: linear-gradient(180deg, rgba(255, 255, 255, 0.38) 62%, rgba(255, 255, 255, 0) 100%);
-			display: flex;
-			justify-content: space-between;
-
-			.item {
-				// width: 46.13%;
-
-				width: 346rpx;
-				height: 150rpx;
-				position: relative;
-
-				.bg-img,
-				.inner {
-					border-radius: 15rpx;
-					width: 100%;
-					height: 100%;
-					position: absolute;
-					top: 0;
-					left: 0;
-					z-index: 1;
-				}
-
-				.inner {
-					box-sizing: border-box;
-					z-index: 2;
-					display: flex;
-					flex-direction: column;
-					justify-content: center;
-					padding-left: 32rpx;
-
-					.title {
-						font-size: 30rpx;
-						line-height: 1;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #111111;
-						margin-bottom: 20rpx;
-					}
-
-					.sub-title {
-						font-size: 24rpx;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #666666;
-					}
-
-					image {
-						width: 80rpx;
-						height: 90rpx;
-						position: absolute;
-						right: 7rpx;
-						bottom: 7rpx;
-					}
-				}
-			}
-		}
-
-		.index-cont {
-			box-sizing: border-box;
-			padding: 0 20rpx 120rpx;
-
-			.pub-item {
-				background: #FFFFFF;
-				border-radius: 16rpx;
-				margin-bottom: 20rpx;
-
-				.tabs {
-					width: 100%;
-					display: flex;
-					align-items: center;
-					justify-content: flex-start;
-					height: 110rpx;
-					background-color: #F0F3F4;
-
-					.tab {
-						height: 110rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						position: relative;
-						flex: 1;
-
-						.img {
-							z-index: 1;
-							position: absolute;
-							top: 0rpx;
-							left: 0rpx;
-							width: 100%;
-							height: 100%;
-						}
-
-						.inner {
-							z-index: 2;
-
-							.title {
-								font-size: 32rpx;
-								font-family: PingFang SC;
-								font-weight: bold;
-								color: #666666;
-							}
-
-							.active {
-								color: #2BC7B9;
-							}
-						}
-
-					}
-
-
-				}
-
-				.pub-title-box {
-					box-sizing: border-box;
-					padding: 36rpx 30rpx;
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-
-					.left {
-						font-size: 32rpx;
-						line-height: 1;
-						font-family: PingFang SC;
-						font-weight: bold;
-						color: #111111;
-					}
-
-					.right {
-						display: flex;
-						align-items: center;
-						justify-content: center;
-
-						.text {
-							font-size: 24rpx;
-							line-height: 1;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #999999;
-							margin-right: 10rpx;
-						}
-
-						image {
-							width: 14rpx;
-							height: 24rpx;
-						}
-					}
-
-				}
-
-				.doc-tab-box {
-					padding: 14rpx 30rpx 0rpx 30rpx;
-					position: relative;
-
-					.tab-inner {
-						padding: 14rpx 0 30rpx;
-						display: flex;
-						overflow-x: auto;
-					}
-
-					.item {
-						font-size: 28rpx;
-						white-space: nowrap;
-						line-height: 1;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #666666;
-						margin-right: 40rpx;
-						position: relative;
-
-						&:last-child {
-							margin-right: 0;
-						}
-
-						&.active {
-							font-weight: bold;
-							color: #333333;
-						}
-
-						&.cases {
-							margin-right: 60rpx;
-						}
-
-						.text {
-							position: relative;
-							z-index: 1;
-						}
-
-						.tab-bg {
-							width: 72rpx;
-							height: 28rpx;
-							position: absolute;
-							top: 17rpx;
-							left: 50%;
-							transform: translateX(-36rpx);
-							z-index: -1;
-						}
-					}
-
-					.right-mask {
-						width: 56rpx;
-						height: 34rpx;
-						position: absolute;
-						top: 25rpx;
-						right: 0rpx;
-						z-index: 1;
-					}
-				}
-
-				.doc-list {
-					padding: 20rpx;
-
-					.item {
-						box-sizing: border-box;
-						background: #FFFFFF;
-						// border-radius: 16rpx;
-						display: flex;
-						border-bottom: 1px solid #F0F0F0;
-						margin-bottom: 30rpx;
-
-						.head-box {
-							width: 120rpx;
-							height: 120rpx;
-							background: #EDF1F4;
-							border-radius: 50%;
-							overflow: hidden;
-							margin-right: 30rpx;
-
-							image {
-								width: 100%;
-								height: 100%;
-							}
-						}
-
-						.info {
-							width: calc(100% - 150rpx);
-
-							.top {
-								display: flex;
-								align-items: center;
-								font-family: PingFang SC;
-								line-height: 1;
-
-								.name {
-									font-size: 34rpx;
-									font-weight: bold;
-									color: #111111;
-								}
-
-								.line {
-									width: 1px;
-									height: 26rpx;
-									background: #DDDDDD;
-									margin: 0 20rpx;
-								}
-
-								.other {
-									font-size: 28rpx;
-									font-weight: 500;
-									color: #333333;
-								}
-							}
-
-							.unit-box {
-								display: flex;
-								margin-top: 24rpx;
-
-								.level {
-									padding: 0 10rpx;
-									height: 30rpx;
-									line-height: 30rpx;
-									font-size: 22rpx;
-									font-family: PingFang SC;
-									font-weight: 500;
-									color: #FFFFFF;
-									background: #2BC7B9;
-									border-radius: 10rpx 4rpx 10rpx 4rpx;
-									margin-right: 12rpx;
-								}
-
-								.name {
-									font-size: 28rpx;
-									font-family: PingFang SC;
-									font-weight: 500;
-									color: #333333;
-									line-height: 30rpx;
-								}
-							}
-
-							.expertise {
-								font-size: 26rpx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #666666;
-								line-height: 42rpx;
-								margin: 22rpx 0 26rpx;
-							}
-
-							.rate-box {
-								display: flex;
-								align-items: center;
-
-								.star {
-									display: flex;
-									align-items: center;
-
-									image {
-										width: 22rpx;
-										height: 22rpx;
-										margin-right: 10rpx;
-									}
-
-									text {
-										font-size: 26rpx;
-										font-family: PingFang SC;
-										font-weight: bold;
-										color: #CEA764;
-										line-height: 1;
-									}
-								}
-
-								.line {
-									width: 1px;
-									height: 20rpx;
-									background: #DDDDDD;
-									margin: 0 20rpx;
-								}
-
-								.num-box {
-									display: flex;
-									align-items: center;
-									font-family: PingFang SC;
-
-									.label {
-										font-size: 24rpx;
-										font-weight: 500;
-										color: #999999;
-										line-height: 1;
-										margin-right: 7px;
-									}
-
-									.num {
-										font-size: 26rpx;
-										font-weight: bold;
-										color: #CEA764;
-										line-height: 1;
-									}
-								}
-							}
-
-							.price-box {
-								display: flex;
-								align-items: center;
-								margin-top: 38rpx;
-
-								.btn-item {
-									display: flex;
-									align-items: center;
-									justify-content: center;
-									width: 164rpx;
-									height: 56rpx;
-									line-height: 56rpx;
-									border: 1px solid rgba(43, 199, 185, 0.5);
-									border-radius: 28rpx;
-									font-family: PingFang SC;
-									margin-right: 30rpx;
-
-									&:last-child {
-										margin-right: 0;
-									}
-
-									.label {
-										font-size: 26rpx;
-										font-weight: 500;
-										color: #2BC7B9;
-										margin-right: 5rpx;
-									}
-
-									.num {
-										font-size: 28rpx;
-										font-weight: bold;
-										color: #2BC7B9;
-									}
-								}
-							}
-						}
-					}
-
-					.item:last-child {
-						border-bottom: none;
-						margin-bottom: 0rpx;
-					}
-
-					.bottom-title {
-						height: 50rpx;
-						display: flex;
-						align-items: center;
-						justify-content: center;
-						font-size: 26rpx;
-						font-family: PingFang SC;
-						font-weight: bold;
-						color: #2BC7B9;
-
-						image {
-							margin-left: 8rpx;
-							width: 14rpx;
-							height: 24rpx;
-						}
-					}
-				}
-
-				// 医师团队
-				.doc-cont {
-					box-sizing: border-box;
-					padding: 0 30rpx;
-
-					.inner {
-						padding: 4rpx 0 40rpx;
-						display: flex;
-						overflow-x: auto;
-					}
-
-					.item {
-						display: flex;
-						align-items: center;
-						flex-direction: column;
-						margin-right: 40rpx;
-
-						&:last-child {
-							margin-right: 0;
-						}
-
-						.head-box {
-							width: 120rpx;
-							height: 120rpx;
-							background: #F2F5F9;
-							border-radius: 50%;
-							margin-bottom: 20rpx;
-							overflow: hidden;
-
-							image {
-								width: 100%;
-								height: 100%;
-							}
-						}
-
-						.name {
-							max-width: 120rpx;
-							font-size: 28rpx;
-							line-height: 1;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #111111;
-							margin-bottom: 16rpx;
-							text-align: center;
-						}
-
-						.position {
-							max-width: 120rpx;
-							font-size: 24rpx;
-							line-height: 1;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #999999;
-							text-align: center;
-						}
-					}
-				}
-
-				.inner {
-					padding: 0 30rpx;
-				}
-
-				// 健康知识
-				.pub-tab-box {
-					position: relative;
-
-					.tab-inner {
-						padding: 14rpx 0 30rpx;
-						display: flex;
-						overflow-x: auto;
-					}
-
-					.item {
-						font-size: 28rpx;
-						white-space: nowrap;
-						line-height: 1;
-						font-family: PingFang SC;
-						font-weight: 500;
-						color: #666666;
-						margin-right: 40rpx;
-						position: relative;
-
-						&:last-child {
-							margin-right: 0;
-						}
-
-						&.active {
-							font-weight: bold;
-							color: #333333;
-						}
-
-						&.cases {
-							margin-right: 60rpx;
-						}
-
-						.text {
-							position: relative;
-							z-index: 1;
-						}
-
-						.tab-bg {
-							width: 72rpx;
-							height: 28rpx;
-							position: absolute;
-							top: 17rpx;
-							left: 50%;
-							transform: translateX(-36rpx);
-							z-index: -1;
-						}
-					}
-
-					.right-mask {
-						width: 56rpx;
-						height: 34rpx;
-						position: absolute;
-						top: 14rpx;
-						right: -30rpx;
-						z-index: 1;
-					}
-				}
-
-				.know-list {
-					padding-right: 10rpx;
-
-					.item {
-						padding: 30rpx 0;
-						display: flex;
-						align-items: center;
-						justify-content: space-between;
-						border-bottom: 1px solid #F0F0F0;
-
-						&:last-child {
-							border-bottom: none;
-						}
-
-						.left {
-							flex: 1;
-							padding-right: 40rpx;
-							height: 190rpx;
-							display: flex;
-							flex-direction: column;
-							justify-content: space-between;
-
-							.title {
-								font-size: 32rpx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #111111;
-								line-height: 48rpx;
-							}
-
-							.info-box {
-								width: 100%;
-								display: flex;
-								align-items: center;
-								justify-content: space-between;
-
-								.readers {
-									display: flex;
-									align-items: center;
-
-									.head-box {
-										margin-right: 27rpx;
-										display: flex;
-										align-items: center;
-
-										.head {
-											width: 48rpx;
-											height: 48rpx;
-											border-radius: 50%;
-											overflow: hidden;
-											box-shadow: 0 0 0 1px #fff;
-											margin-right: -10rpx;
-
-											image {
-												width: 100%;
-												height: 100%;
-											}
-										}
-									}
-
-									.readings {
-										display: flex;
-										align-items: center;
-
-										.eye {
-											width: 26rpx;
-											height: 20rpx;
-											margin-right: 9rpx;
-										}
-
-										.num {
-											font-size: 24rpx;
-											font-family: PingFang SC;
-											font-weight: 500;
-											color: #999999;
-											line-height: 1;
-										}
-									}
-								}
-
-								.time {
-									font-size: 24rpx;
-									line-height: 1;
-									font-family: PingFang SC;
-									font-weight: 500;
-									color: #999999;
-								}
-							}
-						}
-
-						.right {
-							width: 250rpx;
-							height: 190rpx;
-							border-radius: 8rpx;
-							overflow: hidden;
-
-							image {
-								width: 100%;
-								height: 100%;
-							}
-						}
-					}
-				}
-
-				// 问诊案例
-				.cases-list {
-					padding-bottom: 10rpx;
-
-					.item {
-						padding: 30rpx 0;
-						border-bottom: 1px solid #F0F0F0;
-
-						&:last-child {
-							border-bottom: none;
-						}
-
-						.dec-text {
-							font-size: 32rpx;
-							font-family: PingFang SC;
-							font-weight: bold;
-							color: #111111;
-							line-height: 48rpx;
-						}
-
-						.images-box {
-							margin-top: 10rpx;
-							display: flex;
-							flex-wrap: wrap;
-
-							.img-item {
-								width: 155rpx;
-								height: 155rpx;
-								background: #F5F5F5;
-								border-radius: 8rpx;
-								margin: 0 10rpx 10rpx 0;
-								overflow: hidden;
-
-								image {
-									width: 100%;
-									height: 100%;
-								}
-
-								&:nth-child(4n) {
-									margin-right: 0;
-								}
-							}
-						}
-
-						.doc-info {
-							display: flex;
-							align-items: center;
-							margin: 30rpx 0 20rpx;
-
-							.head {
-								width: 60rpx;
-								height: 60rpx;
-								background: #F2F5F9;
-								border-radius: 50%;
-								margin-right: 20rpx;
-								overflow: hidden;
-
-								image {
-									width: 100%;
-									height: 100%;
-								}
-							}
-
-							.name {
-								font-size: 28rpx;
-								line-height: 1;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #111111;
-							}
-
-							.line {
-								width: 1px;
-								height: 22rpx;
-								background: #DDDDDD;
-								margin: 0 16rpx;
-							}
-
-							.posit,
-							.address {
-								font-size: 26rpx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #999999;
-							}
-						}
-
-						.answer-box {
-							width: 100%;
-							// height: 117rpx;
-							background: #F5F7F7;
-							border-radius: 10rpx;
-							display: flex;
-							flex-direction: column;
-							justify-content: center;
-
-							.text-inner {
-								// height: 84rpx;
-								font-size: 28rpx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #666666;
-								line-height: 42rpx;
-								padding: 15rpx;
-							}
-						}
-
-						.read-box {
-							margin-top: 30rpx;
-							display: flex;
-							align-items: center;
-							justify-content: flex-end;
-
-							image {
-								width: 24rpx;
-								height: 19rpx;
-								margin-right: 10rpx;
-							}
-
-							.text {
-								font-size: 24rpx;
-								font-family: PingFang SC;
-								font-weight: 500;
-								color: #999999;
-							}
-						}
-					}
-				}
-			}
-
-			// 精选药品
-			.feat-title {
-				margin-top: 30rpx;
-				padding: 10rpx 0 33rpx;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-
-				image {
-					width: 37rpx;
-					height: 37rpx;
-					margin: 0rpx 20rpx;
-				}
-
-				text {
-					font-size: 36rpx;
-					line-height: 1;
-					font-family: PingFang SC;
-					font-weight: bold;
-					color: #111111;
-				}
-			}
-
-			.drug-list {
-				display: flex;
-				flex-wrap: wrap;
-
-				// margin-bottom: 20rpx;
-				.item {
-					margin-right: 20rpx;
-					margin-bottom: 20rpx;
-					width: 345rpx;
-					background: #FFFFFF;
-					box-shadow: 0px 0px 10rpx 4rpx rgba(199, 199, 199, 0.22);
-					border-radius: 20rpx;
-					overflow: hidden;
-
-					&:nth-child(2n) {
-						margin-right: 0;
-					}
-
-					.img-box {
-						width: 100%;
-						height: 334rpx;
-
-						image {
-							width: 100%;
-							height: 100%;
-						}
-					}
-
-					.info-box {
-						box-sizing: border-box;
-						height: 182rpx;
-						padding: 20rpx;
-
-						.title {
-							height: 80rpx;
-							font-size: 26rpx;
-							font-family: PingFang SC;
-							font-weight: 500;
-							color: #111111;
-							line-height: 40rpx;
-						}
-
-						.price-box {
-							display: flex;
-							align-items: center;
-							margin-top: 20rpx;
-
-							.now {
-								color: #FF6633;
-								display: flex;
-								align-items: flex-end;
-								margin-right: 20rpx;
-								font-family: PingFang SC;
-
-								.unit {
-									font-size: 24rpx;
-									line-height: 1.4;
-									margin-right: 4rpx;
-								}
-
-								.num {
-									font-size: 36rpx;
-									font-weight: bold;
-									line-height: 1;
-								}
-							}
-
-							.old {
-								font-size: 26rpx;
-								font-family: PingFang SC;
-								text-decoration: line-through;
-								color: #BBBBBB;
-								line-height: 1;
-							}
-						}
-					}
-				}
-			}
-		}
-
-	}
-
-	.official-account {
-		box-sizing: border-box;
-		width: 100%;
-		height: 100rpx;
-		position: fixed;
-		bottom: 30rpx;
-		z-index: 99;
-		padding: 0 20rpx 180rpx 20rpx;
-	}
-
-	// 消息
-	.message-box {
-		box-sizing: border-box;
-		width: 100%;
-		height: 84rpx;
-		background: #F3FFFD;
-		border: 1px solid #C7E9E5;
-		box-shadow: 0px 4rpx 12rpx 0px rgba(90, 203, 138, 0.16);
-		border-radius: 16rpx;
-		position: fixed;
-		left: 50%;
-		transform: translateX(-50%);
-		bottom: 30rpx;
-		z-index: 99;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		padding: 0 20rpx 0 30rpx;
-
-		.left {
-			flex: 1;
-			display: flex;
-			align-items: center;
-
-			image {
-				width: 24rpx;
-				height: 24rpx;
-				margin-right: 18rpx;
-			}
-
-			.text {
-				width: 90%;
-				font-size: 28rpx;
-				font-family: PingFang SC;
-				font-weight: 500;
-				color: #2BC7B9;
-			}
-		}
-
-		.btn {
-			width: 100rpx;
-			height: 48rpx;
-			line-height: 48rpx;
-			text-align: center;
-			font-size: 24rpx;
-			font-family: PingFang SC;
-			font-weight: 500;
-			color: #FFFFFF;
-			border: 1px solid #D2E6FF;
-			background: linear-gradient(135deg, #2BC7B9 0%, #60CDC3 100%);
-			border-radius: 24rpx;
-			margin-left: 30rpx;
-		}
-
-	}
-
-	.contact-btn {
-		display: inline-block;
-		position: absolute;
-		top: 0;
-		left: 0;
-		width: 100%;
-		height: 100%;
-		opacity: 0;
-	}
-
-	.popup-box {
-		position: fixed;
-		top: 0;
-		right: 0;
-		left: 0;
-		bottom: 0;
-		z-index: 999;
-		display: flex;
-		justify-content: center;
-		align-items: center;
-
-		.info-mask {
-			position: fixed;
-			top: 0;
-			right: 0;
-			bottom: 0;
-			left: 0;
-			background-color: rgba($color: #000000, $alpha: 0.5);
-			z-index: 999;
-		}
-
-		.info-form {
-			z-index: 1000;
-			width: 450rpx;
-			display: flex;
-			flex-direction: column;
-			justify-content: center;
-			align-items: center;
-			position: relative;
-
-			image {
-				width: 100%;
-			}
-		}
-	}
+<style lang="scss" scoped>
+::v-deep .scs-scroll-navbar {
+	width: calc(100vw - 140rpx) !important;
+}
+
+.scs-nav-bar {
+	background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 49.52%, #F5F7FA 100%);
+}
 </style>

static/images/home/zbgc_arrow_right_icon12.svg

@@ -0,0 +1,10 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="zbgc_arrow_right_icon12" clip-path="url(#clip0_224_2844)">
+<path id="Vector 9 (Stroke)" d="M4.31873 9.81865C4.08441 10.053 4.08441 10.4323 4.31873 10.6666C4.55304 10.9009 4.93239 10.9009 5.1667 10.6666L9.40934 6.42399C9.64366 6.18967 9.64366 5.81033 9.40934 5.57601L5.1667 1.33337C4.93239 1.09906 4.55304 1.09906 4.31873 1.33337C4.08441 1.56769 4.08441 1.94703 4.31873 2.18135L8.13738 6L4.31873 9.81865Z" fill="#666666"/>
+</g>
+<defs>
+<clipPath id="clip0_224_2844">
+<rect width="12" height="12" fill="white"/>
+</clipPath>
+</defs>
+</svg>

uni_modules/uni-nav-bar/changelog.md

@@ -0,0 +1,57 @@
+## 1.3.14（2024-10-15）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.13（2024-10-12）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.12（2024-10-12）
+- 修复 微信小程序中的getSystemInfo警告
+## 1.3.11（2023-03-29）
+- 修复 自定义状态栏高度闪动BUG
+## 1.3.10（2023-03-29）
+- 修复 暗黑模式下边线颜色错误的bug
+## 1.3.9（2022-10-13）
+- 修复 条件编译错误的bug
+## 1.3.8（2022-10-12）
+- 修复 nvue 环境 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.7（2022-08-11）
+- 修复 nvue 环境下 fixed 为 true 的情况下，无法置顶的 bug
+## 1.3.6（2022-06-30）
+- 修复 组件示例中插槽用法无法显示内容的bug
+## 1.3.5（2022-05-24）
+- 新增 stat 属性 ，可开启统计title 上报 ，仅使用了title 属性且项目开启了uni统计生效
+## 1.3.4（2022-01-24）
+- 更新 组件示例
+## 1.3.3（2022-01-24）
+- 新增 left-width/right-width属性 ，可修改左右两侧的宽度
+## 1.3.2（2022-01-18）
+- 修复 在vue下，标题不垂直居中的bug
+## 1.3.1（2022-01-18）
+- 修复 height 属性类型错误
+## 1.3.0（2022-01-18）
+- 新增 height 属性,可修改组件高度
+- 新增 dark 属性可可开启暗黑模式
+- 优化 标题字数过多显示省略号
+- 优化 插槽，插入内容可完全覆盖
+## 1.2.1（2022-01-10）
+- 修复 color 属性不生效的bug
+## 1.2.0（2021-11-19）
+- 优化 组件UI，并提供设计资源，详见:[https://uniapp.dcloud.io/component/uniui/resource](https://uniapp.dcloud.io/component/uniui/resource)
+- 文档迁移，详见:[https://uniapp.dcloud.io/component/uniui/uni-nav-bar](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+## 1.1.0（2021-07-30）
+- 组件兼容 vue3，如何创建vue3项目，详见 [uni-app 项目支持 vue3 介绍](https://ask.dcloud.net.cn/article/37834)
+## 1.0.11（2021-05-12）
+- 新增 组件示例地址
+## 1.0.10（2021-04-30）
+- 修复 在nvue下fixed为true，宽度不能撑满的Bug
+## 1.0.9（2021-04-21）
+- 优化 添加依赖 uni-icons, 导入后自动下载依赖
+## 1.0.8（2021-04-14）
+- uni-ui 修复 uni-nav-bar 当 fixed 属性为 true 时铺不满屏幕的 bug
+
+## 1.0.7（2021-02-25）
+- 修复 easycom 下，找不到 uni-status-bar 的bug
+
+## 1.0.6（2021-02-05）
+- 优化 组件引用关系，通过uni_modules引用组件
+
+## 1.0.5（2021-02-05）
+- 调整为uni_modules目录规范

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-nav-bar.vue

@@ -0,0 +1,357 @@
+<template>
+	<view class="uni-navbar" :class="{'uni-dark':dark, 'uni-nvue-fixed': fixed}">
+		<view class="uni-navbar__content" :class="{ 'uni-navbar--fixed': fixed, 'uni-navbar--shadow': shadow, 'uni-navbar--border': border }"
+			:style="{ 'background-color': themeBgColor, 'border-bottom-color':themeColor }" >
+			<status-bar v-if="statusBar" />
+			<view :style="{ color: themeColor,backgroundColor: themeBgColor ,height:navbarHeight}"
+				class="uni-navbar__header">
+				<view @tap="onClickLeft" class="uni-navbar__header-btns uni-navbar__header-btns-left"
+					:style="{width:leftIconWidth}">
+					<slot name="left">
+						<view class="uni-navbar__content_view" v-if="leftIcon.length > 0">
+							<uni-icons :color="themeColor" :type="leftIcon" size="20" />
+						</view>
+						<view :class="{ 'uni-navbar-btn-icon-left': !leftIcon.length > 0 }" class="uni-navbar-btn-text"
+							v-if="leftText.length">
+							<text :style="{ color: themeColor, fontSize: '12px' }">{{ leftText }}</text>
+						</view>
+					</slot>
+				</view>
+				<view class="uni-navbar__header-container " @tap="onClickTitle">
+					<slot>
+						<view class="uni-navbar__header-container-inner" v-if="title.length>0">
+							<text class="uni-nav-bar-text uni-ellipsis-1"
+								:style="{color: themeColor }">{{ title }}</text>
+						</view>
+					</slot>
+				</view>
+				<view @click="onClickRight" class="uni-navbar__header-btns uni-navbar__header-btns-right"
+					:style="{width:rightIconWidth}">
+					<slot name="right">
+						<view v-if="rightIcon.length">
+							<uni-icons :color="themeColor" :type="rightIcon" size="22" />
+						</view>
+						<view class="uni-navbar-btn-text" v-if="rightText.length && !rightIcon.length">
+							<text class="uni-nav-bar-right-text" :style="{ color: themeColor}">{{ rightText }}</text>
+						</view>
+					</slot>
+				</view>
+			</view>
+		</view>
+		<!-- #ifndef APP-NVUE -->
+		<view class="uni-navbar__placeholder" v-if="fixed">
+			<status-bar v-if="statusBar" />
+			<view class="uni-navbar__placeholder-view" :style="{ height:navbarHeight}" />
+		</view>
+		<!-- #endif -->
+	</view>
+</template>
+
+<script>
+	import statusBar from "./uni-status-bar.vue";
+	const getVal = (val) => typeof val === 'number' ? val + 'px' : val;
+
+	/**
+	 * 
+	 * 
+	 * NavBar 自定义导航栏
+	 * @description 导航栏组件，主要用于头部导航
+	 * @tutorial https://ext.dcloud.net.cn/plugin?id=52
+	 * @property {Boolean} dark 开启黑暗模式
+	 * @property {String} title 标题文字
+	 * @property {String} leftText 左侧按钮文本
+	 * @property {String} rightText 右侧按钮文本
+	 * @property {String} leftIcon 左侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} rightIcon 右侧按钮图标（图标类型参考 [Icon 图标](http://ext.dcloud.net.cn/plugin?id=28) type 属性）
+	 * @property {String} color 图标和文字颜色
+	 * @property {String} backgroundColor 导航栏背景颜色
+	 * @property {Boolean} fixed = [true|false] 是否固定顶部
+	 * @property {Boolean} statusBar = [true|false] 是否包含状态栏
+	 * @property {Boolean} shadow = [true|false] 导航栏下是否有阴影
+	 * @property {Boolean} stat 是否开启统计标题上报
+	 * @event {Function} clickLeft 左侧按钮点击时触发
+	 * @event {Function} clickRight 右侧按钮点击时触发
+	 * @event {Function} clickTitle 中间标题点击时触发
+	 */
+	export default {
+		name: "UniNavBar",
+		components: {
+			statusBar
+		},
+		emits: ['clickLeft', 'clickRight', 'clickTitle'],
+		props: {
+			dark: {
+				type: Boolean,
+				default: false
+			},
+			title: {
+				type: String,
+				default: ""
+			},
+			leftText: {
+				type: String,
+				default: ""
+			},
+			rightText: {
+				type: String,
+				default: ""
+			},
+			leftIcon: {
+				type: String,
+				default: ""
+			},
+			rightIcon: {
+				type: String,
+				default: ""
+			},
+			fixed: {
+				type: [Boolean, String],
+				default: false
+			},
+			color: {
+				type: String,
+				default: ""
+			},
+			backgroundColor: {
+				type: String,
+				default: ""
+			},
+			statusBar: {
+				type: [Boolean, String],
+				default: false
+			},
+			shadow: {
+				type: [Boolean, String],
+				default: false
+			},
+			border: {
+				type: [Boolean, String],
+				default: true
+			},
+			height: {
+				type: [Number, String],
+				default: 44
+			},
+			leftWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			rightWidth: {
+				type: [Number, String],
+				default: 60
+			},
+			stat: {
+				type: [Boolean, String],
+				default: ''
+			}
+		},
+		computed: {
+			themeBgColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.backgroundColor) {
+						return this.backgroundColor
+					} else {
+						return this.dark ? '#333' : '#FFF'
+					}
+				}
+				return this.backgroundColor || '#FFF'
+			},
+			themeColor() {
+				if (this.dark) {
+					// 默认值
+					if (this.color) {
+						return this.color
+					} else {
+						return this.dark ? '#fff' : '#333'
+					}
+				}
+				return this.color || '#333'
+			},
+			navbarHeight() {
+				return getVal(this.height)
+			},
+			leftIconWidth() {
+				return getVal(this.leftWidth)
+			},
+			rightIconWidth() {
+				return getVal(this.rightWidth)
+			}
+		},
+		mounted() {
+			if (uni.report && this.stat && this.title !== '') {
+				uni.report('title', this.title)
+			}
+		},
+		methods: {
+			onClickLeft() {
+				this.$emit("clickLeft");
+			},
+			onClickRight() {
+				this.$emit("clickRight");
+			},
+			onClickTitle() {
+				this.$emit("clickTitle");
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	$nav-height: 44px;
+
+	.uni-nvue-fixed {
+		/* #ifdef APP-NVUE */
+		position: sticky;
+		/* #endif */
+	}
+	.uni-navbar {
+		// box-sizing: border-box;
+	}
+
+	.uni-nav-bar-text {
+		/* #ifdef APP-PLUS */
+		font-size: 34rpx;
+		/* #endif */
+		/* #ifndef APP-PLUS */
+		font-size: 14px;
+		/* #endif */
+	}
+
+	.uni-nav-bar-right-text {
+		font-size: 12px;
+	}
+
+	.uni-navbar__content {
+		position: relative;
+		// background-color: #fff;
+		// box-sizing: border-box;
+		background-color: transparent;
+	}
+
+	.uni-navbar__content_view {
+		// box-sizing: border-box;
+	}
+
+	.uni-navbar-btn-text {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: column;
+		justify-content: flex-start;
+		align-items: center;
+		line-height: 12px;
+	}
+
+	.uni-navbar__header {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		padding: 0 10px;
+		flex-direction: row;
+		height: $nav-height;
+		font-size: 12px;
+	}
+
+	.uni-navbar__header-btns {
+		/* #ifndef APP-NVUE */
+		overflow: hidden;
+		display: flex;
+		/* #endif */
+		flex-wrap: nowrap;
+		flex-direction: row;
+		width: 120rpx;
+		// padding: 0 6px;
+		justify-content: center;
+		align-items: center;
+		/* #ifdef H5 */
+		cursor: pointer;
+		/* #endif */
+	}
+
+	.uni-navbar__header-btns-left {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		width: 120rpx;
+		justify-content: flex-start;
+		align-items: center;
+	}
+
+	.uni-navbar__header-btns-right {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex-direction: row;
+		// width: 150rpx;
+		// padding-right: 30rpx;
+		justify-content: flex-end;
+		align-items: center;
+	}
+
+	.uni-navbar__header-container {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		padding: 0 10px;
+		overflow: hidden;
+	}
+
+	.uni-navbar__header-container-inner {
+		/* #ifndef APP-NVUE */
+		display: flex;
+		/* #endif */
+		flex: 1;
+		flex-direction: row;
+		align-items: center;
+		justify-content: center;
+		font-size: 12px;
+		overflow: hidden;
+		// box-sizing: border-box;
+	}
+
+
+	.uni-navbar__placeholder-view {
+		height: $nav-height;
+	}
+
+	.uni-navbar--fixed {
+		position: fixed;
+		z-index: 99;
+		/* #ifdef H5 */
+		left: var(--window-left);
+		right: var(--window-right);
+		/* #endif */
+		/* #ifndef H5 */
+		left: 0;
+		right: 0;
+		/* #endif */
+
+	}
+
+	.uni-navbar--shadow {
+		box-shadow: 0 1px 6px #ccc;
+	}
+
+	.uni-navbar--border {
+		border-bottom-width: 1rpx;
+		border-bottom-style: solid;
+		border-bottom-color: #eee;
+	}
+
+	.uni-ellipsis-1 {
+		overflow: hidden;
+		/* #ifndef APP-NVUE */
+		white-space: nowrap;
+		text-overflow: ellipsis;
+		/* #endif */
+		/* #ifdef APP-NVUE */
+		lines: 1;
+		text-overflow: ellipsis;
+		/* #endif */
+	}
+
+	// 暗主题配置
+	.uni-dark {}
+</style>

uni_modules/uni-nav-bar/components/uni-nav-bar/uni-status-bar.vue

@@ -0,0 +1,30 @@
+<template>
+	<view :style="{ height: statusBarHeight }" class="uni-status-bar">
+		<slot />
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'UniStatusBar',
+		data() {
+			return {
+				// #ifdef MP-WEIXIN
+				statusBarHeight: uni.getWindowInfo().statusBarHeight + 'px',
+				// #endif
+				// #ifndef MP-WEIXIN
+				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
+				// #endif
+
+			}
+		}
+	}
+</script>
+
+<style lang="scss" >
+	.uni-status-bar {
+		// width: 750rpx;
+		height: 20px;
+		// height: var(--status-bar-height);
+	}
+</style>

uni_modules/uni-nav-bar/package.json

@@ -0,0 +1,87 @@
+{
+  "id": "uni-nav-bar",
+  "displayName": "uni-nav-bar 自定义导航栏",
+  "version": "1.3.14",
+  "description": "自定义导航栏组件，主要用于头部导航。",
+  "keywords": [
+    "uni-ui",
+    "导航",
+    "导航栏",
+    "自定义导航栏"
+],
+  "repository": "https://github.com/dcloudio/uni-ui",
+  "engines": {
+    "HBuilderX": ""
+  },
+  "directories": {
+    "example": "../../temps/example_temps"
+  },
+"dcloudext": {
+    "sale": {
+      "regular": {
+        "price": "0.00"
+      },
+      "sourcecode": {
+        "price": "0.00"
+      }
+    },
+    "contact": {
+      "qq": ""
+    },
+    "declaration": {
+      "ads": "无",
+      "data": "无",
+      "permissions": "无"
+    },
+    "npmurl": "https://www.npmjs.com/package/@dcloudio/uni-ui",
+    "type": "component-vue"
+  },
+  "uni_modules": {
+    "dependencies": [
+			"uni-scss",
+			"uni-icons"
+		],
+    "encrypt": [],
+    "platforms": {
+      "cloud": {
+        "tcb": "y",
+        "aliyun": "y",
+        "alipay": "n"
+      },
+      "client": {
+        "App": {
+          "app-vue": "y",
+          "app-nvue": "y"
+        },
+        "H5-mobile": {
+          "Safari": "y",
+          "Android Browser": "y",
+          "微信浏览器(Android)": "y",
+          "QQ浏览器(Android)": "y"
+        },
+        "H5-pc": {
+          "Chrome": "y",
+          "IE": "y",
+          "Edge": "y",
+          "Firefox": "y",
+          "Safari": "y"
+        },
+        "小程序": {
+          "微信": "y",
+          "阿里": "y",
+          "百度": "y",
+          "字节跳动": "y",
+          "QQ": "y"
+        },
+        "快应用": {
+          "华为": "u",
+          "联盟": "u"
+        },
+        "Vue": {
+            "vue2": "y",
+            "vue3": "y"
+        }
+      }
+    }
+  }
+}

uni_modules/uni-nav-bar/readme.md

@@ -0,0 +1,15 @@
+
+
+## NavBar 导航栏
+> **组件名：uni-nav-bar**
+> 代码块： `uNavBar`
+
+导航栏组件，主要用于头部导航。
+
+### [查看文档](https://uniapp.dcloud.io/component/uniui/uni-nav-bar)
+#### 如使用过程中有任何问题，或者您对uni-ui有一些好的建议，欢迎加入 uni-ui 交流群：871950839 
+
+
+
+
+