From 284d52fa35e009f80ea1e78ad265f3893c26911b Mon Sep 17 00:00:00 2001
From: zhouwenxuan <1175765986@qq.com>
Date: 星期一, 24 七月 2023 09:07:30 +0800
Subject: [PATCH] 首页页面
---
pages/tabBar/current/current.vue | 83 ++++++++++++++++++++
pages/tabBar/firstPage/firstPage.vue | 120 ++++++++++++++++++++++++++++++
2 files changed, 203 insertions(+), 0 deletions(-)
diff --git a/pages/tabBar/current/current.vue b/pages/tabBar/current/current.vue
new file mode 100644
index 0000000..46b8829
--- /dev/null
+++ b/pages/tabBar/current/current.vue
@@ -0,0 +1,83 @@
+<template>
+ <view class="box">
+ <!-- 自定义导航栏 -->
+ <view class="navBarBox fix">
+ <!-- 状态栏占位 -->
+ <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
+ <!-- 真正的导航栏内容 -->
+ <view style="display: flex; flex-direction: column;">
+ <view class="navBar">
+ <u-icon style=" margin-left: -25px;" name="arrow-left" color="black" size="17" @click="goBack" />
+ <view class="barText">信息</view>
+ </view>
+ </view>
+ </view>
+ <text>通用信息详情</text>
+ <tabBar :currentPagePath="page"></tabBar>
+ </view>
+</template>
+
+<script>
+ import tabBar from '../tabBarIndex.vue'
+ export default {
+ components:{
+ tabBar
+ },
+ data() {
+ return {
+ page: 'pages/tabBar/current/current',
+ statusBarHeight: ''
+ }
+
+ },
+ onLoad() {
+ //获取手机状态栏高度
+ this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
+ uni.hideTabBar();
+ },
+ methods: {
+ goBack() {
+ console.log("1111")
+ uni.switchTab({
+ url:'/pages/tabBar/firstPage/firstPage'
+ });
+ },
+ }
+ }
+
+</script>
+
+<style>
+.box {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ height: 100%;
+}
+.fix{
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ z-index: 1;
+}
+.navBarBox .navBar {
+ background-color:lightgrey;
+ height: 45px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+}
+.barText{
+ text-align: center;
+ width: 85%;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
+}
+.statusBar{
+ background-color:lightgrey;
+}
+</style>
\ No newline at end of file
diff --git a/pages/tabBar/firstPage/firstPage.vue b/pages/tabBar/firstPage/firstPage.vue
new file mode 100644
index 0000000..010e28c
--- /dev/null
+++ b/pages/tabBar/firstPage/firstPage.vue
@@ -0,0 +1,120 @@
+<template>
+ <view>
+ <!-- 自定义导航栏 -->
+ <view class="navBarBox fix">
+ <!-- 状态栏占位 -->
+ <view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
+ <!-- 真正的导航栏内容 -->
+ <view class="navBar">
+ <view class="barText">首页</view>
+ </view>
+ </view>
+ <view style="display: flex;flex-direction: column;padding: 10px 15px;">
+ <view class="first" @click="goExamine">
+ 预警审核
+ </view>
+ <view class="first"
+ @click="goCurrent"
+ style="background-color:rgb(249, 130, 180) ;"
+ >
+ 信息查看
+ </view>
+ <view class="first"
+ style="background-color: rgb(41, 203, 280);"
+ @click="goWeather"
+ >
+ 实时气象
+ </view>
+ <view class="first"
+ style="background-color: rgb(11, 246, 158) ;"
+ @click="goCount"
+ >
+ 统计分析
+ </view>
+
+ </view>
+ <tabBar :currentPagePath="page"></tabBar>
+ </view>
+</template>
+
+<script>
+ import tabBar from '../tabBarIndex.vue'
+ export default {
+ components:{
+ tabBar
+ },
+ data() {
+ return {
+ page: 'pages/tabBar/firstPage/firstPage',
+ statusBarHeight: '',
+ leaderType: 'da'
+ }
+
+ },
+ onLoad() {
+ //获取手机状态栏高度
+ this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
+ uni.hideTabBar();
+ },
+ methods: {
+ goExamine() {
+ uni.switchTab({
+ url: '/pages/tabBar/examine/examine'
+ })
+ },
+ goCurrent() {
+ uni.switchTab({
+ url: '/pages/tabBar/current/current'
+ })
+ },
+ goCount() {
+ uni.switchTab({
+ url: '/pages/tabBar/count/count'
+ })
+ },
+ goWeather(){
+ uni.switchTab({
+ url: '/pages/tabBar/weather/weather'
+ })
+ }
+ }
+ }
+
+</script>
+
+<style>
+.navBarBox .navBar {
+ background-color:lightgrey;
+ height: 45px;
+ display: flex;
+ flex-direction: row;
+ justify-content: center;
+ align-items: center;
+ font-size: 16px;
+ /* text-align: center; */
+ font-weight: 600;
+}
+.fix{
+ position: sticky;
+ top: 0;
+ left: 0;
+ right: 0;
+ width: 100%;
+ z-index: 1;
+}
+.statusBar{
+ background-color:lightgrey;
+}
+.first{
+ width: 100%;
+ height: 110px;
+ background-color: red;
+ text-align: center;
+ line-height: 110px;
+ border-radius: 20px;
+ background-color: rgb(246,191,170);
+ border: 1px solid lightgrey;
+ font-size: 18px;
+ margin-top: 40px;
+}
+</style>
\ No newline at end of file
--
Gitblit v1.9.2