feat: H5页面开发

src/App.vue

@@ -25,7 +25,7 @@ onHide(() => {
 <style lang="scss">
 @import './uni_modules/vk-uview-ui/index.scss';
 page {
-  background-color: #f8f8f8;
+  background-color: #edf1f5;
 }
 /* @font-face {
   font-family: 'MyFont';

src/base/base.scss

@@ -0,0 +1,116 @@
+.common-details-container {
+  .common-header-wrapper {
+    width: 100%;
+    height: 420rpx;
+    background-color: #f5f5f5;
+    position: relative;
+    z-index: 1;
+    &.join {
+      height: 403rpx;
+      image {
+        width: 100%;
+        height: 403rpx;
+      }
+    }
+    image {
+      width: 100%;
+      height: 420rpx;
+    }
+  }
+  .common-content-wrapper {
+    width: 694rpx;
+    margin: -42rpx auto 0 auto;
+    position: relative;
+    z-index: 2;
+  }
+  .common-card {
+    width: 694rpx;
+    box-sizing: border-box;
+    padding: 28rpx;
+    background-color: #fff;
+    border-radius: 14rpx;
+    margin-bottom: 24rpx;
+    .common-card-title {
+      font-size: 31rpx;
+      color: #333;
+      font-weight: 600;
+      margin-bottom: 10rpx;
+      display: flex;
+      align-items: center;
+      .text {
+        font-size: 31rpx;
+        color: #333;
+        font-weight: 600;
+      }
+      .card-tag {
+        box-sizing: border-box;
+        padding: 0 15rpx;
+        border-radius: 14rpx;
+        background-color: #f5840b;
+        font-size: 21rpx;
+        color: #fff;
+        margin-left: 14rpx;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        vertical-align: middle;
+      }
+    }
+    .common-sub-title {
+      font-size: 25rpx;
+      color: #333;
+      margin-top: 12rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      .text {
+        font-size: 25rpx;
+        color: #333;
+      }
+      .sub-img-wrap {
+        width: 43rpx;
+        height: 43rpx;
+        image {
+          width: 43rpx;
+          height: 43rpx;
+        }
+      }
+    }
+    .common-card-content {
+      font-size: 22rpx;
+      color: #333;
+      line-height: 42rpx;
+      text {
+        display: inline-block;
+      }
+    }
+    .common-card-list {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: space-between;
+      margin-top: 24rpx;
+      .card-list-item {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        margin-bottom: 22rpx;
+        .item-img-wrap {
+          width: 180rpx;
+          height: 180rpx;
+          background-color: #f5f5f5;
+          image {
+            width: 180rpx;
+            height: 180rpx;
+          }
+        }
+        .list-text {
+          font-size: 22rpx;
+          color: #333;
+          line-height: 42rpx;
+          margin-top: 12rpx;
+        }
+      }
+    }
+  }
+}

src/base/common/charge.vue

@@ -0,0 +1,69 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image :src="minioUrl + '/img_chongdian_bg.png'" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">山高新能源海清高速服务区充电站</view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间:24小时</view>
+        <view class="common-sub-title">客服电话:0532-8886666</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title u-margin-bottom-20">当前电价</view>
+        <!-- 当前电价及时间展示 -->
+        <view class="charge-current-wrapper">
+          <view class="current-left-wrap">
+            <view class="text">1.36</view>
+            <view class="unit">元/度</view>
+          </view>
+          <view class="current-right-wrap">09:00-12:00</view>
+        </view>
+        <HyCharge />
+        <view class="common-card-title u-margin-top-45">温馨提示</view>
+        <view class="common-card-content">
+          <text>1、进出充电站时，请严格遵守交通规则和指示标识，注意观察礼让其他车辆。</text>
+          <text>2、充电前请确认车辆与充电桩兼容（如接口类型、功率匹配），优先选择支持直流快充的桩。</text>
+          <text>3、充电前确保车辆熄火（混动车型需熄火），连接充电枪后启动充电程序。</text>
+          <text>4、充电过程中若发现设备故障、异味或漏电，立即停止并联系工作人员。</text>
+          <text>5、充电结束时先关闭电源，再拔枪并妥善存放。</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+.charge-current-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 20rpx;
+  .current-left-wrap {
+    display: flex;
+    align-items: center;
+    .text {
+      font-size: 31rpx;
+      color: #ff3d28;
+      font-weight: 600;
+    }
+    .unit {
+      font-size: 21rpx;
+      color: #333;
+    }
+  }
+  .current-right-wrap {
+    font-size: 21rpx;
+    color: #999;
+  }
+}
+</style>

src/base/common/driversHome.vue

@@ -0,0 +1,37 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image :src="minioUrl + '/img_sijizhijia_bg.png'" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">海清服务区司机之家</view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间:24小时</view>
+        <view class="common-sub-title">客服电话:0532-8886666</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title u-margin-bottom-20">基本介绍</view>
+        <view class="common-card-content">
+          “司机之家”是指主要为道路运输车辆及驾驶人员提供公共服务的场所和建筑设施，一般具有餐饮、休息、停车安保、宣传教育等服务功能。按照建设要求，“司机之家”应在高速公路服务区、普通国省干线公路服务区(站)、物流通道货物集散地或者物流园区等地建设，截至2025年4月全国30个省（自治区、直辖市）已建成1900余个“司机之家”线下服务点。
+        </view>
+        <view class="common-card-title u-margin-top-45">设施配置</view>
+        <view class="u-flex u-col-center u-margin-top-24">
+          <HyTag text="淋浴（有热水）" imgUrl="/icon_ly.png" />
+          <HyTag text="洗衣机" imgUrl="/icon_xyj.png" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+</style>

src/base/common/nursingRoom.vue

@@ -0,0 +1,49 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image :src="minioUrl + '/img_muying_bg.png'" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">海清服务区母婴室</view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间:24小时</view>
+        <view class="common-sub-title">客服电话:0532-8886666</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title u-margin-bottom-20">基本介绍</view>
+        <view class="common-card-content">
+          母婴室，也称作母乳喂养室，通常建设于大型公共场所，如：商业综合体、交通枢纽、医疗机构、游乐场馆、文体教育场所等。以便于携婴父母出门在外照料哺乳期婴儿进行护理、哺乳、集乳、喂食、备餐的功能。建设主体包括商业场所及政府非营利性公共服务设施。
+        </view>
+        <view class="common-card-title u-margin-top-45">设施配置</view>
+        <view class="bottom-box-wrap">
+          <HyTag text="哺乳椅" imgUrl="/icon_muying_01.png" />
+          <HyTag text="饮水机（有热水）" imgUrl="/icon_muying_02.png" />
+          <HyTag text="尿布台" imgUrl="/icon_muying_03.png" />
+          <HyTag text="婴儿床" imgUrl="/icon_muying_04.png" />
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+.bottom-box-wrap {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 24rpx;
+  :deep(.tag-item-wrapper) {
+    margin-right: 30rpx;
+  }
+}
+</style>

src/base/common/refuel.vue

@@ -0,0 +1,37 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image :src="minioUrl + '/img_jiayou_bg.png'" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">中石化海清高速服务区加油站</view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间:24小时</view>
+        <view class="common-sub-title">客服电话:0532-8886666</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title u-margin-bottom-20">当前油价</view>
+        <HyStation type="2" v-for="index in 4" :key="index"></HyStation>
+        <view class="common-card-title u-margin-top-45">温馨提示</view>
+        <view class="common-card-content">
+          <text>1、进出加油站时，请严格遵守交通规则和指示标识，注意观察礼让其他车辆。</text>
+          <text>2、加油前请熄火，不要拨打电话。</text>
+          <text>3、加油站区域内请勿吸烟、使用明火（如打火机）。</text>
+          <text>4、如需开具发票，请联系站内工作人员。</text>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+</style>

src/base/common/repair.vue

@@ -0,0 +1,34 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image :src="minioUrl + '/img_xiuche_bg.png'" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">驿驰汽修</view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间:24小时</view>
+        <view class="common-sub-title">客服电话:0532-8886666</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title u-margin-bottom-20">免费项目</view>
+        <view class="common-card-content">
+          <text>大货车免费汽修项目:启动搭电、胎压检测</text>
+          <text>小客车免费汽修项目:启动搭电、胎压检测、轮胎充气</text>
+        </view>
+        <view class="common-card-title u-margin-top-45">收费项目</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+</style>

src/base/common/spot.vue

@@ -0,0 +1,45 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image src="" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">
+          <view class="text">少海风景区</view>
+          <view class="card-tag">4A景区</view>
+        </view>
+        <!-- sub title -->
+        <view class="common-sub-title">开放时间：24小时</view>
+        <view class="common-sub-title">
+          <view class="text">地址：山东省青岛市胶州市香港路1号</view>
+          <view class="sub-img-wrap">
+            <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
+          </view>
+        </view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title">景区介绍</view>
+        <view class="common-card-content"
+          >少海风景区位于胶州市区东南侧，地处胶州湾与大沽河交汇处，规划面积22.91平方公里
+          。景区由南湖、北湖及云溪河构成水域体系，湿地覆盖率83.9%，拥有166种野生脊椎动物和93种维管束植物
+          ，形成"两湖、一带、三岛"的生态格局。作为山东省首家国家级湿地公园（2012年挂牌），景区融合16公里环湖景观带与仿古建筑群，复建板桥镇、慈云寺等文化地标
+          。设有游艇俱乐部、观景台等设施，2019年获评国家4A级旅游景区。</view
+        >
+        <view class="common-card-title u-margin-top-45">门票政策</view>
+        <view class="common-card-content">免费开放</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useGlobal } from '../../composables/index'
+const { minioUrl } = useGlobal()
+</script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+</style>

src/base/shop/details.vue

@@ -0,0 +1,42 @@
+<template>
+  <view class="common-details-container">
+    <view class="common-header-wrapper">
+      <image src="" mode="scaleToFill" />
+    </view>
+    <view class="common-content-wrapper">
+      <view class="common-card">
+        <!-- common title -->
+        <view class="common-card-title">肯德基海清高速服务区店</view>
+        <!-- rate -->
+        <view class="common-card-rate">
+          <uni-rate allow-half :value="5" color="#ddd" activeColor="#ff5702" />
+        </view>
+        <!-- sub title -->
+        <view class="common-sub-title">营业时间: 08:00-24:00</view>
+      </view>
+      <view class="common-card">
+        <view class="common-card-title">店铺简介</view>
+        <view class="common-card-content"
+          >肯德基（Kentucky Fried Chicken），简称KFC，
+          全球炸鸡连锁餐厅，总部位于美国肯塔基州路易斯维尔市，在世界上105个国家和地区开设有15000多家肯德基餐厅，
+          隶属于全球最大的餐饮连锁企业百胜餐饮集团。 产品以鸡肉为主，并不断推出新产品。</view
+        >
+        <view class="common-card-title u-margin-top-12">精品推荐</view>
+        <view class="common-card-list">
+          <view class="card-list-item" v-for="index in 6" :key="index">
+            <view class="item-img-wrap">
+              <image src="" mode="scaleToFill" />
+            </view>
+            <view class="list-text">蜜汁全鸡</view>
+          </view>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoepd>
+@import '../base.scss';
+</style>

src/base/shop/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <view class="shop-index-container">
+    <HyShopItem v-for="index in 5" :key="index" />
+  </view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoepd>
+.shop-index-container {
+  box-sizing: border-box;
+  padding: 32rpx 28rpx;
+}
+</style>

src/base/shop/meal.vue

@@ -0,0 +1,14 @@
+<template>
+  <view class="shop-index-container">
+    <HyShopItem v-for="index in 5" :key="index" price />
+  </view>
+</template>
+
+<script lang="ts" setup></script>
+
+<style lang="scss" scoepd>
+.shop-index-container {
+  box-sizing: border-box;
+  padding: 32rpx 28rpx;
+}
+</style>

src/base/suggest/record.vue

@@ -1,7 +1,99 @@
 <template>
-  <view></view>
+  <view class="suggest-record-container">
+    <view class="record-item">
+      <view class="record-item-header">
+        <view class="title u-line-2">功能还有不少需要提升的，需要改进的地方不少希望尽快处理提升完善</view>
+        <view class="pic-list">
+          <view class="pic-wrap">
+            <image src="" mode="scaleToFill" />
+          </view>
+          <view class="pic-wrap">
+            <image src="" mode="scaleToFill" />
+          </view>
+        </view>
+        <view class="time-status-wrap">
+          <view class="time-text">2025-10-12 12:36:50</view>
+          <view class="status-text">已完结</view>
+        </view>
+      </view>
+      <view class="record-item-bottom">
+        <view class="bottom-title-text">感谢您对我们的反馈，我们会持续优化， 继续完善！</view>
+        <view class="bottom-time-text">2025-10-12 12:36:50</view>
+      </view>
+    </view>
+  </view>
 </template>
 
 <script lang="ts" setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.suggest-record-container {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 34rpx 28rpx;
+  .record-item {
+    box-sizing: border-box;
+    padding: 34rpx 34rpx 38rpx 34rpx;
+    background-color: #fff;
+    border-radius: 14rpx;
+    .record-item-header {
+      box-sizing: border-box;
+      padding-bottom: 24rpx;
+      border-bottom: 1rpx solid #f4f5f9;
+      .title {
+        font-size: 28rpx;
+        color: #333;
+        font-weight: 600;
+      }
+      .pic-list {
+        display: flex;
+        align-items: center;
+        margin-top: 20rpx;
+        .pic-wrap {
+          width: 139rpx;
+          height: 139rpx;
+          border-radius: 8rpx;
+          background-color: #f4f5f9;
+          margin-right: 24rpx;
+          image {
+            width: 139rpx;
+            height: 139rpx;
+            border-radius: 8rpx;
+          }
+        }
+      }
+      .time-status-wrap {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-top: 22rpx;
+        .time-text {
+          font-size: 25rpx;
+          color: #999;
+        }
+        .status-text {
+          font-size: 25rpx;
+          color: #999;
+          &.warning {
+            color: #ff7024;
+          }
+        }
+      }
+    }
+    .record-item-bottom {
+      box-sizing: border-box;
+      padding-top: 26rpx;
+      .bottom-title-text {
+        font-size: 28rpx;
+        font-weight: 500;
+        line-height: 42rpx;
+        margin-bottom: 20rpx;
+      }
+      .bottom-time-text {
+        font-size: 25rpx;
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/base/suggest/suggest.vue

@@ -1,7 +1,91 @@
 <template>
-  <view></view>
+  <view class="suggest-submit-container">
+    <!-- 问题类型 -->
+    <HyCard title="请选择您要反馈的问题类型">
+      <view class="suggest-type-wrapper">
+        <view class="type-item active">现场环境</view>
+        <view class="type-item">商家服务</view>
+        <view class="type-item">商品问题</view>
+        <view class="type-item">价格问题</view>
+        <view class="type-item">其他</view>
+      </view>
+    </HyCard>
+    <!-- 描述问题 -->
+    <HyCard title="请描述您的问题">
+      <view class="suggest-common-wrapper">
+        <u-input
+          type="textarea"
+          :height="328"
+          :maxlength="200"
+          border
+          placeholder="请详细描述您的问题，以便于我们及时跟进及解决（最多可输入200字）"
+        ></u-input>
+      </view>
+    </HyCard>
+    <!-- 图片描述 -->
+    <HyCard title="图片描述（选填）">
+      <view class="suggest-common-wrapper">
+        <u-upload />
+      </view>
+    </HyCard>
+    <!-- 联系方式 -->
+    <HyCard title="联系方式">
+      <view class="suggest-common-wrapper">
+        <u-input placeholder="请输入您的联系方式" />
+      </view>
+    </HyCard>
+    <!-- 提交 -->
+    <view class="submit-btn-wrapper">提交</view>
+  </view>
 </template>
 
 <script lang="ts" setup></script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.suggest-submit-container {
+  box-sizing: border-box;
+  padding: 34rpx 28rpx 172rpx 28rpx;
+  .suggest-type-wrapper {
+    margin-top: 26rpx;
+    display: flex;
+    flex-wrap: wrap;
+    .type-item {
+      width: 201rpx;
+      height: 63rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background-color: #f6f7fb;
+      font-size: 28rpx;
+      color: #a2a8be;
+      border-radius: 14rpx;
+      margin-right: 16rpx;
+      margin-bottom: 15rpx;
+      &:nth-child(3n) {
+        margin-right: 0;
+      }
+      &.active {
+        background-color: #2375ff;
+        color: #fff;
+      }
+    }
+  }
+  .suggest-common-wrapper {
+    margin-top: 26rpx;
+  }
+  .submit-btn-wrapper {
+    width: 694rpx;
+    height: 83rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: #2374ff;
+    font-size: 31rpx;
+    color: #fff;
+    border-radius: 42rpx;
+    position: fixed;
+    bottom: 31rpx;
+    left: 28rpx;
+  }
+}
+</style>

src/base/travel/tips.vue

@@ -0,0 +1,68 @@
+<template>
+  <view class="travel-tips-container">
+    <!-- tabs -->
+    <u-tabs
+      v-model="tabActive"
+      :list="list"
+      :is-scroll="false"
+      inactive-color="#333"
+      active-color="#333"
+      :bar-style="{
+        backgroundColor: '#4a8cfe'
+      }"
+    ></u-tabs>
+    <!-- list -->
+    <view class="travel-tips-list">
+      <view class="tips-list-item">
+        <view class="title u-line-2">沈海高速海口方向K31+900M~K29+000M处养护施工的公告</view>
+        <view class="content"
+          >沈海高速山东段青岛往海口方向K31+900M~K29+000M处正在养护施工，占用主车道及应急车道，该路段目前超车道单道通行，请途经车辆谨慎驾驶，提前减速。</view
+        >
+        <view class="time">2025-10-12 12:36:50</view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list = ref([{ name: '路况信息' }, { name: '优惠促销' }, { name: '天气预警' }])
+const tabActive = ref(0)
+</script>
+
+<style lang="scss" scoped>
+.travel-tips-container {
+  box-sizing: border-box;
+  .travel-tips-list {
+    width: 694rpx;
+    margin: 0 auto;
+    box-sizing: border-box;
+    padding-top: 35rpx;
+    .tips-list-item {
+      width: 100%;
+      border-radius: 14rpx;
+      box-sizing: border-box;
+      padding: 33rpx;
+      background-color: #fff;
+      .title {
+        font-size: 28rpx;
+        color: #333;
+        line-height: 42rpx;
+        font-weight: 500;
+        margin-bottom: 24rpx;
+      }
+      .content {
+        font-size: 22rpx;
+        color: #333;
+        line-height: 33rpx;
+        margin-bottom: 22rpx;
+      }
+      .time {
+        font-size: 22rpx;
+        color: #999;
+      }
+    }
+  }
+}
+</style>

src/components/HyCard.vue

@@ -6,7 +6,7 @@
   >
     <view class="main-title-box" v-if="title">
       <view class="text">{{ title }}</view>
-      <view v-if="isShowRight" class="right-text-wrap">
+      <view v-if="isShowRight" class="right-text-wrap" @click="handleClickRight">
         <text>{{ rightText }}</text>
         <u-icon name="arrow-right-double" size="21" color="#292e36"></u-icon>
       </view>
@@ -44,6 +44,12 @@ const props = defineProps({
     default: ''
   }
 })
+
+const emit = defineEmits(['clickRight'])
+
+const handleClickRight = () => {
+  emit('clickRight')
+}
 </script>
 
 <style lang="scss" scoped>

src/components/HyPopup.vue

@@ -89,7 +89,7 @@ const props = withDefaults(defineProps<Props>(), {
   animationType: 'scale',
   position: 'center',
   width: '80%',
-  maxWidth: '600rpx',
+  maxWidth: '750rpx',
   backgroundColor: 'transparent',
   overlayBackgroundColor: 'rgba(0, 0, 0, 0.8)',
   borderRadius: 24,

src/components/HySelect.vue

@@ -0,0 +1,184 @@
+<template>
+  <view class="select-container">
+    <!-- 下拉选择触发区域 -->
+    <view class="custom-select" @tap="toggleDropdown">
+      <text class="select-text">{{ selectedOptionText || placeholder }}</text>
+      <image class="select-icon" :class="{ rotate: dropdownVisible }" :src="minioUrl + '/icon_bottom_arrow.png'" mode="scaleToFill" />
+    </view>
+
+    <!-- 下拉菜单 -->
+    <view class="dropdown-menu" v-if="dropdownVisible" @tap.stop>
+      <view class="dropdown-item" v-for="item in parkList" :key="item.id" :class="{ selected: selectedValue === item.id }" @tap="selectItem(item)">
+        <text>{{ item.name }}</text>
+        <u-icon v-if="selectedValue === item.id" name="checkmark" color="#2979ff" size="32"></u-icon>
+      </view>
+    </view>
+
+    <!-- 点击外部区域关闭下拉菜单的遮罩 - 移动端使用tap事件 -->
+    <view class="dropdown-overlay" v-if="dropdownVisible" @tap="closeDropdown"></view>
+  </view>
+</template>
+
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue'
+import { useGlobal } from '@/composables/index'
+const { minioUrl } = useGlobal()
+
+// 定义组件接收的props
+const props = defineProps({
+  // 当前选中的值
+  modelValue: {
+    type: String,
+    default: ''
+  },
+  // 占位符文本
+  placeholder: {
+    type: String,
+    default: '请选择'
+  }
+})
+
+// 定义组件触发的事件
+const emit = defineEmits(['update:modelValue', 'change'])
+
+// 内部状态
+const dropdownVisible = ref(false)
+const selectedValue = ref(props.modelValue)
+
+const parkList = ref([
+  { id: '1', name: '海青服务区' },
+  { id: '2', name: '黄岛服务区' },
+  { id: '3', name: '南村服务区' },
+  { id: '4', name: '胶州服务区' }
+])
+
+// 计算当前选中的选项文本
+const selectedOptionText = computed(() => {
+  const selected = parkList.value.find((item) => item.id === selectedValue.value)
+  return selected ? selected.name : ''
+})
+
+// 监听modelValue变化，同步内部状态
+watch(
+  () => props.modelValue,
+  (newValue) => {
+    selectedValue.value = newValue
+  }
+)
+
+// 切换下拉菜单显示/隐藏
+const toggleDropdown = () => {
+  dropdownVisible.value = !dropdownVisible.value
+}
+
+// 关闭下拉菜单
+const closeDropdown = () => {
+  dropdownVisible.value = false
+}
+
+// 选择选项
+const selectItem = (item: { id: string; name: string }) => {
+  selectedValue.value = item.id
+  dropdownVisible.value = false
+
+  // 触发事件通知父组件
+  emit('update:modelValue', item.id)
+  emit('change', item)
+}
+</script>
+
+<style lang="scss" scoped>
+.select-container {
+  position: relative;
+  z-index: 100;
+  .custom-select {
+    width: 100%;
+    height: 60rpx;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    // padding: 0 20rpx;
+    cursor: pointer;
+    transition: background-color 0.2s;
+
+    .select-text {
+      font-size: 30rpx;
+      color: #3b3c3b;
+      font-weight: 600;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      flex: 1;
+    }
+
+    .select-icon {
+      width: 13rpx;
+      height: 10rpx;
+      margin-left: 10rpx;
+      transition: transform 0.2s;
+    }
+
+    .select-icon.rotate {
+      transform: rotate(180deg);
+    }
+  }
+
+  .dropdown-menu {
+    position: absolute;
+    top: 70rpx;
+    width: 384rpx;
+    max-height: 400rpx;
+    background-color: #fff;
+    border-radius: 12rpx;
+    box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.1);
+    overflow-y: auto;
+    z-index: 200;
+    box-sizing: border-box;
+    padding: 15rpx;
+
+    .dropdown-item {
+      height: 80rpx;
+      padding: 0 24rpx;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      cursor: pointer;
+      transition: background-color 0.2s;
+
+      &:last-child {
+        border-bottom: none;
+      }
+
+      &.selected {
+        background-color: #f0f7ff;
+        color: #007aff;
+        border-radius: 8rpx;
+        text {
+          color: #007aff;
+          font-weight: 500;
+        }
+      }
+
+      text {
+        font-size: 26rpx;
+        color: #1d2129;
+      }
+
+      .check-icon {
+        width: 32rpx;
+        height: 32rpx;
+      }
+    }
+  }
+}
+/* 点击外部区域关闭下拉菜单的遮罩 */
+.dropdown-overlay {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 99;
+  background-color: transparent;
+}
+</style>

src/components/HyShopItem.vue

@@ -1,13 +1,14 @@
 <template>
-  <view class="shop-item-wrapper">
+  <view class="shop-item-wrapper" @click="navigateToDetails">
     <view class="item-left-wrap"></view>
     <view class="item-right-wrap">
       <view class="top">
         <view class="title u-line-1">肯德基</view>
         <view class="rate-box">
-          <uni-rate allow-half v-model="rate" color="#ddd" activeColor="#ff5702" />
+          <uni-rate allow-half v-model="rate" color="#ddd" activeColor="#ff5702" size="20" />
           <text class="rate-text">{{ rate }}</text>
         </view>
+        <view class="price" v-if="price">¥50/人</view>
       </view>
       <view class="bottom">
         <view class="tag-item">西式快餐</view>
@@ -21,6 +22,19 @@
 import { ref } from 'vue'
 
 const rate = ref(3.5)
+
+defineProps({
+  price: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const navigateToDetails = () => {
+  uni.navigateTo({
+    url: '/base/shop/details'
+  })
+}
 </script>
 
 <style lang="scss" scoped>
@@ -31,6 +45,7 @@ const rate = ref(3.5)
   background-color: #fff;
   border-radius: 14rpx;
   display: flex;
+  margin-bottom: 32rpx;
   .item-left-wrap {
     width: 188rpx;
     height: 188rpx;
@@ -62,6 +77,11 @@ const rate = ref(3.5)
           margin-left: 14rpx;
         }
       }
+      .price {
+        font-size: 25rpx;
+        color: #ff5704;
+        margin-top: 4rpx;
+      }
     }
     .bottom {
       display: flex;

src/components/HyTag.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="tag-item-wrapper">
     <view class="tag-item-content" :class="{ 'need-border': needBorder }">
-      <image :src="minioUrl + '/icon_iot_canyin.png'" :style="{ width: imgWidth, height: imgHeight }" />
+      <image :src="minioUrl + imgUrl" :style="{ width: imgWidth, height: imgHeight }" />
       <view class="tag-item-text" :style="{ fontSize: fontSize }">{{ text }}</view>
     </view>
   </view>
@@ -21,6 +21,10 @@ defineProps({
     type: String,
     default: '25rpx'
   },
+  imgUrl: {
+    type: String,
+    default: '/icon_iot_canyin.png'
+  },
   text: {
     type: String,
     default: '餐饮'
@@ -41,12 +45,12 @@ defineProps({
   box-sizing: border-box;
   margin: 0 10rpx 20rpx 0;
   .tag-item-content {
-    padding: 4rpx 22rpx;
     border-radius: 4rpx;
     display: flex;
     align-items: center;
     width: fit-content;
     &.need-border {
+      padding: 4rpx 22rpx;
       border: 1rpx solid#2374ff;
       background-color: #e6efff;
     }

src/manifest.json

@@ -52,18 +52,33 @@
     },
     /* 快应用特有相关 */
     "quickapp" : {},
-    "h5": {
-      "router": {
-        "base": "./"
-      }
+    "h5" : {
+        "router" : {
+            "base" : "./"
+        },
+        "sdkConfigs" : {
+            "maps" : {
+                "amap" : {
+                    "key" : "b0adb9cb4cae0dd05fae8d444c251492",
+                    "securityJsCode" : "337c8dbd6c3e800641d22c85ddb78b9e",
+                    "serviceHost" : ""
+                }
+            }
+        }
     },
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wxa04f62d4bb823b36",
+        "appid" : "",
         "setting" : {
             "urlCheck" : false,
             "minified" : true
         },
+        "permission" : {
+            "scope.userLocation" : {
+                "desc" : "定位信息"
+            }
+        },
+        "requiredPrivateInfos" : [ "getLocation", "chooseLocation", "openLocation" ],
         "usingComponents" : true
     },
     "mp-alipay" : {

src/pages.json

@@ -12,8 +12,7 @@
       "path": "pages/service",
       "style": {
         "navigationBarTitleText": "服务区",
-        "enablePullDownRefresh": true,
-        "navigationStyle": "custom"
+        "enablePullDownRefresh": false
       }
     },
     {
@@ -39,7 +38,7 @@
         {
           "path": "suggest/record",
           "style": {
-            "navigationBarTitleText": "反馈记录",
+            "navigationBarTitleText": "反馈历史",
             "enablePullDownRefresh": true
           }
         },
@@ -49,6 +48,83 @@
             "navigationBarTitleText": "投诉建议",
             "enablePullDownRefresh": false
           }
+        },
+        {
+          "path": "travel/tips",
+          "style": {
+            "navigationBarTitleText": "出行提示",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "shop/index",
+          "style": {
+            "navigationBarTitleText": "精选商家",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "shop/meal",
+          "style": {
+            "navigationBarTitleText": "我要吃饭",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "shop/details",
+          "style": {
+            "navigationBarTitleText": "详情",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/spot",
+          "style": {
+            "navigationBarTitleText": "景点",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/join",
+          "style": {
+            "navigationBarTitleText": "招商加盟",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/refuel",
+          "style": {
+            "navigationBarTitleText": "我要加油",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/charge",
+          "style": {
+            "navigationBarTitleText": "我要充电",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/repair",
+          "style": {
+            "navigationBarTitleText": "我要修车",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/driversHome",
+          "style": {
+            "navigationBarTitleText": "司机之家",
+            "enablePullDownRefresh": false
+          }
+        },
+        {
+          "path": "common/nursingRoom",
+          "style": {
+            "navigationBarTitleText": "母婴室",
+            "enablePullDownRefresh": false
+          }
         }
       ]
     }

src/pages/index.vue

@@ -12,24 +12,85 @@ const tabActive = ref(0)
 
 // 金刚区列表
 const navList = ref([
-  { image: `${minioUrl}/icon_nav_01.png`, text: '我要加油', path: '', w: '53rpx', h: '53rpx' },
-  { image: `${minioUrl}/icon_nav_02.png`, text: '我要充电', path: '', w: '60rpx', h: '53rpx' },
-  { image: `${minioUrl}/icon_nav_03.png`, text: '我要吃饭', path: '', w: '57rpx', h: '57rpx' },
-  { image: `${minioUrl}/icon_nav_04.png`, text: '我要修车', path: '', w: '60rpx', h: '56rpx' },
+  { image: `${minioUrl}/icon_nav_01.png`, text: '我要加油', path: '/base/common/refuel', w: '53rpx', h: '53rpx' },
+  { image: `${minioUrl}/icon_nav_02.png`, text: '我要充电', path: '/base/common/charge', w: '60rpx', h: '53rpx' },
+  { image: `${minioUrl}/icon_nav_03.png`, text: '我要吃饭', path: '/base/shop/meal', w: '57rpx', h: '57rpx' },
+  { image: `${minioUrl}/icon_nav_04.png`, text: '我要修车', path: '/base/common/repair', w: '60rpx', h: '56rpx' },
   { image: `${minioUrl}/icon_nav_05.png`, text: '投诉建议', path: '/base/suggest/index', w: '59rpx', h: '53rpx' },
-  { image: `${minioUrl}/icon_nav_06.png`, text: '一键救援', path: '', w: '76rpx', h: '76rpx' },
-  { image: `${minioUrl}/icon_nav_07.png`, text: '司机之家', path: '', w: '76rpx', h: '76rpx' },
-  { image: `${minioUrl}/icon_nav_08.png`, text: '母婴室', path: '', w: '76rpx', h: '76rpx' },
-  { image: `${minioUrl}/icon_nav_09.png`, text: '失物招领', path: '', w: '76rpx', h: '76rpx' },
-  { image: `${minioUrl}/icon_nav_10.png`, text: '招商加盟', path: '', w: '76rpx', h: '76rpx' }
+  { image: `${minioUrl}/icon_nav_06.png`, text: '一键救援', path: '', w: '76rpx', h: '76rpx', type: 'popup' },
+  { image: `${minioUrl}/icon_nav_07.png`, text: '司机之家', path: '/base/common/driversHome', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_08.png`, text: '母婴室', path: '/base/common/nursingRoom', w: '76rpx', h: '76rpx' },
+  { image: `${minioUrl}/icon_nav_09.png`, text: '失物招领', path: '', w: '76rpx', h: '76rpx', type: 'popup' },
+  { image: `${minioUrl}/icon_nav_10.png`, text: '招商加盟', path: '/base/common/join', w: '76rpx', h: '76rpx' }
 ])
 
+const selectedValue = ref('1')
+
+// 一键救援弹窗展示
+const isRescueShow = ref(false)
+// 失物招领弹窗展示
+const isLostFoundShow = ref(false)
+
 // 金刚区点击事件
-const navClick = (item: { path: string }) => {
+const navClick = (item: { path: string; type?: string; text?: string }) => {
+  if (item.type === 'popup') {
+    // 弹窗展示
+    if (item.text === '一键救援') {
+      isRescueShow.value = true
+    } else if (item.text === '失物招领') {
+      isLostFoundShow.value = true
+    }
+    return
+  }
   uni.navigateTo({
     url: item.path
   })
 }
+
+// 出行提示点击事件
+const navigateToTips = () => {
+  uni.navigateTo({
+    url: '/base/travel/tips'
+  })
+}
+
+// 精选商家点击事件
+const navigateToShop = () => {
+  uni.navigateTo({
+    url: '/base/shop/index'
+  })
+}
+
+// 景点点击事件
+const navigateToSpot = () => {
+  uni.navigateTo({
+    url: '/base/common/spot'
+  })
+}
+
+// 导航功能实现
+const goToNavigation = () => {
+  // 这里需要替换为实际的景点坐标
+  const latitude = 35.86166 // 示例纬度（琅琊台风景区）
+  const longitude = 119.97444 // 示例经度（琅琊台风景区）
+  const name = '琅琊台风景区'
+  // 使用uni-app的地图API打开系统地图进行导航
+  uni.openLocation({
+    latitude: latitude,
+    longitude: longitude,
+    name: name,
+    success: () => {
+      console.log('导航功能调用成功')
+    }
+  })
+}
+
+// 拨打电话
+const callPhone = (phone: string) => {
+  uni.makePhoneCall({
+    phoneNumber: phone
+  })
+}
 </script>
 
 <template>
@@ -41,12 +102,19 @@ const navClick = (item: { path: string }) => {
       <image :src="minioUrl + '/logo.png'" mode="scaleToFill" class="logo" />
       <view class="header-right-wrap">
         <view class="top-title-box">
-          <view class="title-text">海青服务区</view>
-          <image :src="minioUrl + '/icon_bottom_arrow.png'" mode="scaleToFill" />
+          <HySelect v-model="selectedValue" />
         </view>
         <image class="star-img" :src="minioUrl + '/star.png'" mode="scaleToFill" />
         <view class="bottom-box">
           <!-- 天气 -->
+          <iframe
+            scrolling="no"
+            src="https://widget.tianqiapi.com/?style=tv&skin=cucumber&color=333"
+            frameborder="0"
+            width="130"
+            height="25"
+            allowtransparency="true"
+          ></iframe>
           <!-- 营业状态 -->
           <view class="bottom-tag-item">正常营业</view>
         </view>
@@ -64,7 +132,7 @@ const navClick = (item: { path: string }) => {
       </view>
     </view>
     <!-- 出行提示 -->
-    <view class="index-tips-wrapper">
+    <view class="index-tips-wrapper" @click="navigateToTips">
       <image class="tips-img" :src="minioUrl + '/icon_chuxing.png'" mode="scaleToFill" />
       <view class="tips-line"></view>
       <view class="tips-content">临时交通管制的通知</view>
@@ -98,13 +166,13 @@ const navClick = (item: { path: string }) => {
       </template>
     </view>
     <!-- 服务设施 -->
-    <HyCard title="服务设施" marginBottom="24">
+    <HyCard title="服务设施" :marginBottom="24">
       <view class="index-service-wrapper">
         <HyService v-for="index in 6" :key="index"></HyService>
       </view>
     </HyCard>
     <!-- 人气优选商家 -->
-    <HyCard title="人气优选商家" rightText="更多商家" isShowRight marginBottom="24">
+    <HyCard title="人气优选商家" rightText="更多商家" isShowRight :marginBottom="24" @clickRight="navigateToShop">
       <view class="index-shop-wrapper">
         <view class="shop-item" v-for="index in 5" :key="index">
           <view class="img-wrap">
@@ -117,7 +185,7 @@ const navClick = (item: { path: string }) => {
     <!-- 附近景点 -->
     <HyCard title="附近景点" isBg :bgImg="minioUrl + '/index_spot_bg.png'">
       <view class="index-spot-wrapper">
-        <view class="spot-item" v-for="index in 5" :key="index">
+        <view class="spot-item" v-for="index in 5" :key="index" @click="navigateToSpot">
           <view class="spot-img-wrap">
             <image src="" mode="scaleToFill" />
           </view>
@@ -136,7 +204,7 @@ const navClick = (item: { path: string }) => {
                 <image class="icon-address" :src="minioUrl + '/icon_address.png'" mode="scaleToFill" />
                 <view class="address-text-wrap">距您<text>30.5</text>公里，驾车预计<text>40</text>分钟</view>
               </view>
-              <view class="right-go-icon">
+              <view class="right-go-icon" @click.stop="goToNavigation">
                 <image :src="minioUrl + '/icon_go.png'" mode="scaleToFill" />
               </view>
             </view>
@@ -144,10 +212,120 @@ const navClick = (item: { path: string }) => {
         </view>
       </view>
     </HyCard>
+    <!-- 一键救援 -->
+    <HyPopup v-model="isRescueShow" width="700rpx" showClose>
+      <view class="popup-content-wrapper">
+        <view class="popup-content-item" @click="callPhone('96659')">
+          <view class="p-item-left">
+            <view class="left-title">车辆救援</view>
+            <view class="left-sub-title">山东高速集团出行服务热线</view>
+          </view>
+          <view class="p-item-right">
+            <view class="mobile">96659</view>
+            <view class="icon-box">
+              <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
+            </view>
+          </view>
+        </view>
+        <view class="popup-content-item" @click="callPhone('12122')">
+          <view class="p-item-left">
+            <view class="left-title">事故报警</view>
+            <view class="left-sub-title">山东高速交警报警热线</view>
+          </view>
+          <view class="p-item-right">
+            <view class="mobile">12122</view>
+            <view class="icon-box">
+              <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
+            </view>
+          </view>
+        </view>
+      </view>
+    </HyPopup>
+    <!-- 失物招领 -->
+    <HyPopup v-model="isLostFoundShow" width="700rpx" showClose>
+      <view class="popup-content-wrapper">
+        <view class="popup-content-item column" @click="callPhone('0532-8889999')">
+          <view class="column-title">失物招领</view>
+          <view class="column-mobile">0532-8889999</view>
+          <view class="icon-box">
+            <u-icon name="phone-fill" color="#fff" size="24"></u-icon>
+          </view>
+        </view>
+      </view>
+    </HyPopup>
   </view>
 </template>
 
 <style lang="scss" scoped>
+.popup-content-wrapper {
+  height: 330rpx;
+  background-color: #fff;
+  border-radius: 14rpx;
+  .popup-content-item {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    box-sizing: border-box;
+    padding: 48rpx 48rpx 24rpx 48rpx;
+    &.column {
+      flex-direction: column;
+      justify-content: center;
+      .column-title {
+        font-size: 28rpx;
+        color: #607f2f;
+      }
+      .column-mobile {
+        font-size: 42rpx;
+        color: #333;
+        font-weight: 600;
+        margin: 40rpx 0;
+      }
+      .icon-box {
+        width: 48rpx;
+        height: 48rpx;
+        background-color: #247d54;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        margin-left: 16rpx;
+      }
+    }
+    .p-item-left {
+      display: flex;
+      flex-direction: column;
+      .left-title {
+        font-size: 28rpx;
+        color: #607f2f;
+      }
+      .left-sub-title {
+        font-size: 24rpx;
+        color: #999;
+        margin-top: 8rpx;
+      }
+    }
+    .p-item-right {
+      display: flex;
+      align-items: center;
+      .mobile {
+        font-size: 42rpx;
+        color: #333;
+        font-weight: 600;
+      }
+      .icon-box {
+        width: 48rpx;
+        height: 48rpx;
+        background-color: #247d54;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        margin-left: 16rpx;
+      }
+    }
+  }
+}
 .index-container {
   width: 100%;
   min-height: 100dvh;
@@ -205,19 +383,21 @@ const navClick = (item: { path: string }) => {
         align-items: center;
         margin-top: 10rpx;
         .bottom-tag-item {
-          font-size: 18rpx;
+          font-size: 17rpx;
           color: #fff;
           box-sizing: border-box;
-          padding: 6rpx 12rpx;
+          padding: 0 12rpx;
           background-color: #3bb0b9;
           border-radius: 8rpx;
+          line-height: 40rpx;
+          margin-top: -15rpx;
         }
       }
     }
   }
   :deep(.u-swiper-wrap) {
     position: relative;
-    z-index: 2;
+    z-index: 1;
   }
   .index-nav-wrapper {
     display: flex;

src/pages/service.vue

@@ -12,6 +12,7 @@ const { minioUrl } = useGlobal()
         <view class="item-header-wrap">
           <view class="header-img-box">
             <image src="" mode="scaleToFill" />
+            <view class="header-status-tag open-tag">开放中</view>
           </view>
           <view class="header-right-box">
             <view class="u-line-1 title">黄岛服务区(沈海高速沈阳方向)</view>
@@ -59,6 +60,23 @@ const { minioUrl } = useGlobal()
           width: 174rpx;
           height: 174rpx;
         }
+        .header-status-tag {
+          position: absolute;
+          top: 0;
+          right: 0;
+          width: 80rpx;
+          height: 30rpx;
+          background-color: #666666;
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border-radius: 0 14rpx 0 10rpx;
+          font-size: 21rpx;
+          color: #fff;
+          &.open-tag {
+            background-color: #ff5702;
+          }
+        }
       }
       .header-right-box {
         flex: 1;

vite.config.ts

@@ -1,10 +1,3 @@
-/*
- * @Author: wyd
- * @Date: 2024-02
- * @LastEditors: wyd
- * @LastEditTime: 2024-03
- * @Description:
- */
 import { defineConfig, loadEnv } from 'vite'
 import uni from '@dcloudio/vite-plugin-uni'
 // import { resolve } from 'path'
@@ -19,6 +12,9 @@ export default defineConfig(({ command, mode }) => {
       // envDir: resolve(__dirname, 'env'),
       define: {
         __VITE_BASE_URL__: JSON.stringify(env.VITE_BASE_URL)
+      },
+      server: {
+        port: 5174
       }
     }
   } else if (mode === 'production') {
@@ -46,6 +42,9 @@ export default defineConfig(({ command, mode }) => {
       // envDir: resolve(__dirname, 'env'),
       define: {
         __VITE_BASE_URL__: JSON.stringify(env.VITE_BASE_URL)
+      },
+      server: {
+        port: 5174
       }
     }
   }