feat 首页组件，页面添加&全局样式

App.vue

@@ -159,6 +159,7 @@
 	@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

@@ -12,6 +12,9 @@ text {
   font-style: normal;
   text-transform: none;
 }
+view{
+  box-sizing: border-box;
+}
 
 // 导航栏头部
 .uni-navbar__header {
@@ -24,7 +27,9 @@ text {
 .uni-navbar__header-container {
   padding: 0 !important;
 }
-
+.scs-headr-default {
+		width: 73%;
+	}
 /* #ifndef APP-NVUE */
 /* Display */
 .flex {
@@ -214,126 +219,406 @@ text {
   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;
+}
 
-/* Font sizes (20rpx to 100rpx, even numbers) */
-@for $i from 10 through 50 {
+.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 * 2} {
+  .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;
 
-/* Margins (10rpx to 200rpx, even numbers) */
-@for $i from 5 through 100 {
+  .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 * 2} {
+  .m-#{$i} {
     margin: $size;
   }
 
   /* Margin top */
-  .mt-#{$i * 2} {
+  .mt-#{$i} {
     margin-top: $size;
   }
 
   /* Margin right */
-  .mr-#{$i * 2} {
+  .mr-#{$i} {
     margin-right: $size;
   }
 
   /* Margin bottom */
-  .mb-#{$i * 2} {
+  .mb-#{$i} {
     margin-bottom: $size;
   }
 
   /* Margin left */
-  .ml-#{$i * 2} {
+  .ml-#{$i} {
     margin-left: $size;
   }
 
   /* Margin horizontal */
-  .mx-#{$i * 2} {
+  .mx-#{$i} {
     margin-left: $size;
     margin-right: $size;
   }
 
   /* Margin vertical */
-  .my-#{$i * 2} {
+  .my-#{$i} {
     margin-top: $size;
     margin-bottom: $size;
   }
 }
 
-/* Paddings (10rpx to 200rpx, even numbers) */
-@for $i from 5 through 100 {
+/* 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 * 2} {
+  .p-#{$i} {
     padding: $size;
   }
 
   /* Padding top */
-  .pt-#{$i * 2} {
+  .pt-#{$i} {
     padding-top: $size;
   }
 
   /* Padding right */
-  .pr-#{$i * 2} {
+  .pr-#{$i} {
     padding-right: $size;
   }
 
   /* Padding bottom */
-  .pb-#{$i * 2} {
+  .pb-#{$i} {
     padding-bottom: $size;
   }
 
   /* Padding left */
-  .pl-#{$i * 2} {
+  .pl-#{$i} {
     padding-left: $size;
   }
 
   /* Padding horizontal */
-  .px-#{$i * 2} {
+  .px-#{$i} {
     padding-left: $size;
     padding-right: $size;
   }
 
   /* Padding vertical */
-  .py-#{$i * 2} {
+  .py-#{$i} {
     padding-top: $size;
     padding-bottom: $size;
   }
 }
 
-/* Gaps (10rpx to 200rpx, even numbers) */
+/* Gaps (1px to 100px, all numbers, auto convert to rpx: px * 2 = rpx) */
 /* #ifndef APP-NVUE */
-@for $i from 5 through 100 {
+@for $i from 1 through 100 {
   $size: $i * 2rpx;
 
-  .gap-#{$i * 2} {
+  .gap-#{$i} {
     gap: $size;
   }
 }
 
 /* #endif */
 
-/* Widths (10rpx to 750rpx, even numbers) */
-@for $i from 5 through 375 {
+/* Widths (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 375 {
   $size: $i * 2rpx;
 
-  .w-#{$i * 2} {
+  .w-#{$i} {
     width: $size;
   }
 }
 
-/* Heights (10rpx to 750rpx, even numbers) */
-@for $i from 5 through 375 {
+/* Heights (1px to 375px, all numbers, auto convert to rpx: px * 2 = rpx) */
+@for $i from 1 through 375 {
   $size: $i * 2rpx;
 
-  .h-#{$i * 2} {
+  .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.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 
+
+
+
+
+