feat(home): 实现首页UI改版和功能组件

hejianhao

2025-12-30 924834802e1abfc1935ee0d29a4dbfe6811e1a37

feat(home): 实现首页UI改版和功能组件

- 新增首页轮播图、公告栏、快捷入口和攻略精选模块
- 更新banner组件样式和交互逻辑
- 添加多张静态图片资源并移除旧图片
- 新增w-fit工具类样式

 miniprogram/components/banner.vue

@@ -2,12 +2,9 @@
    <view v-if="list.length != 0" class="br-19 oh relative box-s1">
        <u-swiper :list="list" :height="height" @change="change" mode="none" name="imageUrl" :interval="3000"
            bgColor="#fff" border-radius="0" @click="toDetail"></u-swiper>
        <view v-if="!isDetail" class="absolute flex dot">
            <view class="w-12 h-12 br-6 mr-4 border-box bgcolor1 dotItem" :class="active === index && 'w-40 bgColor2'"
        <view class="absolute flex dot">
            <view class="w-12 h-12 br-192 mr-8 border-box bgcolor1 dotItem" :class="active === index && 'w-35 bgColor2'"
                v-for="(item, index) in list.length" :key="index"></view>
        </view>
        <view v-else class="absolute fs-27 white detailDot">
            <span class="font-bold">{{active + 1}}</span>/{{list.length}}
        </view>
        <slot name="btn"></slot>
    </view>
@@ -24,12 +21,8 @@
            },
            height: {
                type: Number,
                default: 1545
                default: 387
            },
            isDetail: {
                type: Boolean,
                default: false
            }
        },
        data() {
            return {
@@ -60,7 +53,7 @@
    }

    .dot {
        bottom: 75rpx;
        bottom: 19rpx;
        right: 50%;
        transform: translateX(50%);
    }
@@ -71,17 +64,5 @@

    .box-s1 {
        box-shadow: 0rpx 4rpx 19rpx 0rpx rgba(0, 0, 0, 0.08);
    }

    .detailDot {
        right: 0;
        bottom: 94rpx;
        line-height: 46rpx;
        text-align: center;
        border-radius: 27rpx 0 0 27rpx;
        background-color: rgba(0, 0, 0, .4);
        padding-left: 31rpx;
        padding-right: 29rpx;
        letter-spacing: 8rpx;
    }
</style>

 miniprogram/pages/home/home.vue

@@ -1,17 +1,96 @@
<template>
    <view>

        <view class="bgImg1">
            <view class="flex a-center ml-27 pt-106">
                <image src="/static/image/home/bg2.png" class="w-58 h-58 shrink0 mr-15" />
                <view class="white fs-35 lh-35 font-bold">青城后山旅游官方平台</view>
            </view>
            <view class="mt-31 mx-23">
                <Banner :list="list" />
            </view>
        </view>
        <view class="flex a-center mt-17 mx-23 py-15 pl-19 pr-27 br-19 border1 bgcolor1">
            <image class="w-38 h-38 shrink0 mr-19" src="/static/image/home/notice.png" />
            <u-notice-bar color="#191F3F" bg-color="transparent" volume-size="0" font-size="25" mode="horizontal"
                :list="noticeList"></u-notice-bar>
        </view>
        <view class="iconList">
            <view class="relative br-19 bgcolor2 pt-27 pb-29">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor3 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color1">景区门票</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (3).png" />
                </view>
                <view class="mt-17 fs-25 lh-35 color2 ml-29">快速预订门票</view>
                <image src="/static/image/home/bg1.png" class="w-115 h-92 absolute" style="right: 21rpx;top: 33rpx;" />
            </view>
            <view class="relative br-19 bgcolor4 pt-27 pb-29">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor5 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color3">景区导览</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (4).png" />
                </view>
                <view class="mt-17 fs-25 lh-35 color3 ml-29">景区地图</view>
                <image src="/static/image/home/bg2.png" class="w-154 h-115 absolute" style="right: 2rpx;top: 15rpx;" />
            </view>
            <view class="relative br-19 bgcolor6 pt-27 pb-29">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor7 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color4">景区公告</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (7).png" />
                </view>
                <view class="mt-17 fs-25 lh-35 color4 ml-29">实时景区信息</view>
                <image src="/static/image/home/bg3.png" class="w-115 h-119 absolute" style="right: 21rpx;top: 6rpx;" />
            </view>
            <view @tap.stop="toMini" class="relative br-19 bgcolor8 pt-27 pb-29">
                <view class="flex a-center br-154 py-12 px-12 ml-27 bgcolor9 w-fit">
                    <view class="fs-27 lh-23 font-bold mr-4 color5">景区直通车</view>
                    <image class="w-19 h-19 ml-4 shrink0" src="/static/image/home/Group@2x (6).png" />
                </view>
                <view class="mt-17 fs-25 lh-35 color5 ml-29">直达景区交通</view>
                <image src="/static/image/home/bg4.png" class="w-154 h-115 absolute" style="right: 2rpx;top: 13rpx;" />
            </view>
        </view>
        <view class="mt-27">
            <view class="bgImg2">
                <view class="flex a-center j-between pt-50 ml-23 mr-38">
                    <view class="flex a-center">
                        <image src="/static/image/home/hot.png" class="w-37 h-38 shrink0 mr-17" />
                        <view class="fs-38 lh-54 font-bold">景区攻略精选</view>
                    </view>
                    <view class="fs-27 lh-38 color6">查看更多</view>
                </view>
            </view>
            <view class="listBox">
                <view v-for="item in 10" :key="item" class="relative">
                    <image class="br-19" style="height: 396rpx;width: 346rpx;" src="https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png" />
                    <view class="absolute flex a-center br-138 h-35 pl-15 pr-12 bgcolor10"
                        style="top: 12rpx;right: 12rpx;">
                        <image src="/static/image/home/Shape@2x.png" class="w-19 h-19 shrink0 mr-8" />
                        <view class="white fs-23 lh-23">2025-11-30</view>
                    </view>
                    <view class="mt-13 mx-12 line1 fs-29 lh-40 font-bold">青城后山徒步全攻略</view>
                    <view class="mt-8 mx-12 fs-23 lh-33 color7 line1">景区官方徒步路线推荐</view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup lang="ts">
    import { ref, reactive } from "vue";
    import { onLoad, onShow, onReachBottom } from "@dcloudio/uni-app"
    import Banner from '@/components/banner.vue'

    const params = ref({
        pageNum: 1,
        pageSize: 10,
    })
    const list = ref(['https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png', 'https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png']);
    const noticeList = ref<string[]>([
        '寒雨连江夜入吴',
        '平明送客楚山孤',
        '洛阳亲友如相问',
        '一片冰心在玉壶'
    ])

    onShow(() => {

    })
@@ -23,8 +102,10 @@

    })

    const getBanner = () => {

    const toMini = () => {
        uni.navigateToMiniProgram({
            appId: 'wxe6843e111c37fa99'
        })
    }
</script>
<style>
@@ -33,5 +114,107 @@
    }
</style>
<style scoped lang="scss">
    .color1 {
        color: #33733D;
    }

    .color2 {
        color: #377744;
    }

    .color3 {
        color: #0D5BBA;
    }

    .color4 {
        color: #774991;
    }

    .color5 {
        color: #764A1E;
    }

    .color6 {
        color: #4D4D4D;
    }

    .color7 {
        color: #8E92AA;
    }

    .bgImg1 {
        height: 602rpx;
        background-image: url('https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/832d1c03-9536-4019-8a1f-3d1388ac836e.png');
        background-size: 100% 100%;
    }

    .bgImg2 {
        height: 171rpx;
        background-image: url('https://huishou-1323682843.cos.ap-nanjing.myqcloud.com/images/092af05d-7371-4768-82cb-83fd244d9534.png');
        background-size: 100% 100%;
    }

    .border1 {
        border: 2rpx solid rgba(0, 0, 0, 0.04);
    }

    .bgcolor1 {
        background: linear-gradient(180deg, #EDFBF6 0%, #F7FDFB 100%);
    }

    .bgcolor2 {
        background: #D1FFE8;
    }

    .bgcolor3 {
        background: linear-gradient(270deg, #8CFFC4 0%, #FFFFFF 100%);
    }

    .bgcolor4 {
        background: linear-gradient(270deg, #BCDCFF 0%, #E0E9FF 100%);
    }

    .bgcolor5 {
        background: linear-gradient(270deg, #6FACF1 0%, #FFFFFF 100%);
    }

    .bgcolor6 {
        background: linear-gradient(101deg, #FBF0FF 0%, #F5DCFF 100%);
    }

    .bgcolor7 {
        background: linear-gradient(270deg, #EEC9FF 0%, #FFFFFF 100%);
    }

    .bgcolor8 {
        background: linear-gradient(101deg, #FDF7E5 0%, #FFEEDF 100%);
    }

    .bgcolor9 {
        background: linear-gradient(270deg, #F1DB6F 0%, #FFFFFF 100%);
    }

    .bgcolor10 {
        background: rgba(0, 0, 0, 0.4);
    }

    ::v-deep .u-notice-bar {
        padding: 0 !important;
    }

    .iconList {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 19rpx;
        margin: 0 23rpx;
        margin-top: 27rpx;
    }

    .listBox {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 35rpx 19rpx;
        margin: 0 19rpx;
        transform: translateY(-40rpx);
    }
</style>

 miniprogram/static/image/home/Group@2x (3).png

 miniprogram/static/image/home/Group@2x (4).png

 miniprogram/static/image/home/Group@2x (6).png

 miniprogram/static/image/home/Group@2x (7).png

 miniprogram/static/image/home/Shape@2x.png

 miniprogram/static/image/home/backImg.png

Binary files differ

 miniprogram/static/image/home/titleBg.png

Binary files differ

 miniprogram/static/style/_app.scss

@@ -1218,4 +1218,8 @@

.safe-b {
    padding-bottom: env(safe-area-inset-bottom);
}

.w-fit{
    width: fit-content;
}