feat: 增加首页

package.json

 {
     "name": "basic-app",
-    "version": "0.0.1",
-    "description": "APP 基础工程",
+    "version": "0.0.2",
+    "description": "湖南天气app v5",
     "keywords": [
         "app",
         "basic"

src/pages.json

@@ -4,7 +4,15 @@
         {
             "path": "pages/index/index",
             "style": {
-                "navigationBarTitleText": "Basic APP"
+                "navigationBarTitleText": "",
+                "enablePullDownRefresh": false,
+                // #ifdef H5
+                "navigationStyle": "custom",
+                // #endif
+                "app-plus": {
+                    "titleNView": false
+                },
+                "enableReachBottom": false
             }
         },
 

src/pages/index/index.vue

 <script setup lang="ts">
-    import dayjs from 'dayjs'
+    import Header from './modules/header.vue'
+    import Weather from './modules/weather.vue'
 
-    const year = ref(dayjs().year())
     const title = ref('Hello World')
 
     onMounted(() => {
@@ -14,55 +14,40 @@
         })
     })
 
-    const surprise = () => {
-        // #ifdef APP-PLUS
-        const orientation = plus.navigator.getOrientation()
-        if (orientation === 0) {
-            plus.screen.lockOrientation('landscape-primary')
-        } else if (orientation === 90) {
-            plus.screen.lockOrientation('portrait-primary')
-        }
-        Message.toast('🥳 surprise~')
-        // #endif
-
-        // #ifndef APP-PLUS
-        Message.toast(`使用 APP 运行点击有惊喜~ ╰(*°▽°*)╯`)
-        // #endif
-    }
+    // const surprise = () => {
+    //     // #ifdef APP-PLUS
+    //     const orientation = plus.navigator.getOrientation()
+    //     if (orientation === 0) {
+    //         plus.screen.lockOrientation('landscape-primary')
+    //     } else if (orientation === 90) {
+    //         plus.screen.lockOrientation('portrait-primary')
+    //     }
+    //     Message.toast('🥳 surprise~')
+    //     // #endif
+
+    //     // #ifndef APP-PLUS
+    //     Message.toast(`使用 APP 运行点击有惊喜~ ╰(*°▽°*)╯`)
+    //     // #endif
+    // }
 </script>
 
 <template>
     <view class="content">
-        <fui-avatar src="/static/logo.png" radius="14" @click="surprise" />
-        <view class="info">
+        <Header />
+        <Weather />
+        <!-- <fui-avatar src="/static/logo.png" radius="14" @click="surprise" /> -->
+        <!-- <view class="info">
             <text class="title">{{ title }}</text>
             <text class="title">{{ $t('app.hello') }}</text>
             <uni-icons type="hand-up" size="30" />
-        </view>
-        <fui-footer isFixed :text="`Copyright © ${year} YiRing.com`" />
+        </view> -->
     </view>
 </template>
 
-<style>
+<style lang="less">
     .content {
         height: calc(100vh - 100rpx);
-        display: flex;
-        flex-direction: column;
-        align-items: center;
-        justify-content: center;
-    }
-
-    .info {
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        margin: 50rpx 0 30rpx 0;
-    }
-
-    .title {
-        display: flex;
-        justify-content: center;
-        font-size: 36rpx;
-        color: #8f8f94;
+        overflow: auto;
+        background-color: #f2f2f2;
     }
 </style>

src/pages/index/modules/header.vue

+<script setup lang="ts">
+    const url = ref<string>('/static/images/navBg/nav-bx.jpg')
+    const warn = ref<string>('长沙天气（暴雨Ⅲ级相应）')
+</script>
+
+<template>
+    <view class="header-container">
+        <image :src="url" />
+        <text class="header-text">{{ warn }}</text>
+        <FuiIcon name="setup" class="setup" />
+    </view>
+</template>
+
+<style lang="less" scoped>
+    .header-container {
+        width: 100%;
+        height: 162rpx;
+        position: relative;
+
+        image {
+            width: 100%;
+            height: 100%;
+            display: block;
+        }
+
+        .header-text {
+            position: absolute;
+            left: 50%;
+            bottom: 15%;
+            color: #fff;
+            font-size: 30rpx;
+            transform: translateX(-50%);
+        }
+
+        .setup {
+            position: absolute;
+            right: 20rpx;
+            bottom: 16rpx;
+            font-size: 55rpx !important;
+        }
+    }
+</style>

src/pages/index/modules/weather.vue

+<script setup lang="ts">
+    const url = ref<string>('/static/images/weather-little-icon/day3.png')
+</script>
+
+<template>
+    <view class="weather-container">
+        <view class="weather-city">
+            <FuiIcon name="location" color="#3FA5FF" class="location-icon" />
+            <text class="location-text">天心区</text>
+            <text class="right-line" />
+        </view>
+        <view class="weather-info">
+            <image :url="url" />
+            <text> 晴 39°</text>
+        </view>
+        <view class="weather-detail" />
+    </view>
+</template>
+
+<style lang="less" scoped>
+    .weather-container {
+        display: flex;
+        width: 100%;
+        height: 70rpx;
+        padding: 20rpx;
+        align-items: center;
+        justify-content: center;
+        background-color: #fff;
+
+        .weather-city {
+            flex: 1;
+            display: flex;
+            align-items: center;
+            justify-content: left;
+
+            .location-icon {
+                font-size: 42rpx !important;
+                margin-right: 12rpx;
+                vertical-align: middle;
+            }
+
+            .location-text {
+                vertical-align: middle;
+            }
+
+            .right-line {
+                display: block;
+                width: 2px;
+                height: 42rpx;
+                background-color: #eeeeee;
+                margin-left: 30rpx;
+                border-radius: 50%;
+            }
+        }
+
+        .weather-info {
+            flex: 1.2;
+            display: flex;
+
+            image {
+                width: 50rpx;
+            }
+
+            text {
+                font-size: 40rpx;
+            }
+        }
+
+        .weather-detail {
+            flex: 1.6;
+        }
+    }
+</style>