111

pages/index/index.vue

@@ -1,6 +1,16 @@
 <template>
     <view class="app-custom-root">
         <view class="app-container">
+            <!-- #ifdef H5 -->
+            <!-- 自定义导航栏 -->
+            <view class="custom-nav" :style="{paddingTop: statusBarHeight + 'px'}">
+                <view class="nav-content">
+                    <view class="nav-back" @click="back"><text class="nav-back-text">‹</text></view>
+                    <view class="nav-title">喀什智慧就业平台</view>
+                    <view class="nav-placeholder"></view>
+                </view>
+            </view>
+            <!-- #endif -->
             <!-- 主体内容区域 -->
             <view class="container-main">
                 <IndexOne @onShowTabbar="changeShowTabbar" />
@@ -26,7 +36,13 @@ const userStore = useUserStore();
 onLoad((options) => {
     // useReadMsg().fetchMessages();
 });
-
+// 返回按钮功能
+function back() {
+    // uni.navigateBack({
+    //     delta: 1
+    // });
+    window.location.href = 'https://www.xjksly.cn/mechine-single-vue/';
+}
 onShow(() => {
     // 更新自定义tabbar选中状态
     tabbarManager.updateSelected(0);
@@ -191,4 +207,31 @@ onShow(() => {
             background: #FFFFFF
             width: 4rpx
             height: 20rpx
+/* 自定义导航栏样式 */
+.custom-nav
+    background: #107AFD
+    width: 100%
+    .nav-content
+        height: 80rpx
+        display: flex
+        align-items: center
+        justify-content: space-between
+        padding: 0 40rpx
+        .nav-back
+            width: 120rpx
+            height: 200rpx
+            display: flex
+            align-items: center
+            justify-content: center
+            color: #fff
+            font-weight: 300
+            .nav-back-text
+                font-size: 80rpx
+                line-height: 1
+        .nav-title
+            color: #fff
+            font-size: 32rpx
+            font-weight: bold
+        .nav-placeholder
+            width: 120rpx
 </style>