refactor: 重构页面框架，配置全局底部导航栏并优化资源
移除废弃的AppShell、BottomNav、PlayTopBar组件，统一所有页面的根布局结构。在pages.json中配置全局小程序底部导航栏，新增配套的tabbar图标资源。将本地静态图片替换为远程CDN资源，重构资源加载工具函数。更新小程序后台appid，调整全局样式与部分页面的布局样式。拆分我的页面为未登录访客态和已登录会员态，新增对应业务组件。重构登录页、首页、玩法页等多个页面的代码，移除对旧组件的依赖。
This commit is contained in:
duanshuwen committed
1 parent
16caad1c40
commit
988f7c3f4c
31 files changed
+372
-325
No files matched your search
@@ -1,29 +1,29 @@
|
||||
<template>
|
||||
<view class="bg-[#fffdf9] pb-7 pt-8">
|
||||
<view class="mx-[8.5%] mb-[18px] flex items-baseline justify-between gap-[18px]">
|
||||
<view class="bg-[#f7f3ed] pb-8 pt-9">
|
||||
<view class="mx-6 mb-5 flex items-end justify-between gap-4">
|
||||
<view class="flex min-w-0 items-baseline gap-[10px]">
|
||||
<text class="font-serif text-[20px] font-semibold leading-7 tracking-[0.04em] text-[#18212a]">团队共创</text>
|
||||
<text class="text-[14px] leading-[22px] text-[#8b8781]">团建旅行</text>
|
||||
<text class="font-serif text-[22px] font-semibold leading-7 tracking-[0.03em] text-[#202522]">团队共创</text>
|
||||
<text class="text-[13px] leading-5 text-[#8d857c]">团建旅行</text>
|
||||
</view>
|
||||
<text class="flex-none font-sans text-[9px] leading-[18px] tracking-[0.2em] text-[#a3988e]">TEAM BUILDING</text>
|
||||
<text class="flex-none font-sans text-[9px] leading-4 tracking-[0.18em] text-[#a3988e]">TEAM BUILDING</text>
|
||||
</view>
|
||||
|
||||
<view class="mx-[8.5%] grid gap-3">
|
||||
<view class="mx-6 grid gap-3">
|
||||
<view
|
||||
v-for="item in items"
|
||||
:key="item.id"
|
||||
class="flex min-h-[112px] overflow-hidden rounded-[4px] border border-[#e8e1d7] bg-white tap-feedback active:border-[#d3b890] active:bg-[#fffaf2]"
|
||||
class="flex min-h-[120px] overflow-hidden rounded-[12px] border border-[#e6ded3] bg-[#fffdfa] tap-feedback active:border-[#b97b5f] active:bg-[#fffaf4]"
|
||||
:aria-label="`${item.title}，${item.description}`"
|
||||
@click="$emit('select', item)"
|
||||
>
|
||||
<image class="block h-[112px] w-[128px] shrink-0 bg-[#e8e5df] min-[431px]:w-[142px]" :src="item.image" mode="aspectFill" />
|
||||
<view class="min-w-0 flex-1 p-[12px_12px_11px]">
|
||||
<image class="block h-[120px] w-[116px] shrink-0 bg-[#e8e5df] min-[431px]:w-[132px]" :src="item.image" mode="aspectFill" />
|
||||
<view class="min-w-0 flex-1 px-4 py-3">
|
||||
<view class="flex items-center justify-between gap-2">
|
||||
<text class="text-[10px] leading-[18px] tracking-[0.04em] text-[#9a744b]">{{ item.tag }}</text>
|
||||
<uni-icons type="right" :size="16" color="#b5aaa0" />
|
||||
<text class="text-[10px] font-medium leading-4 tracking-[0.05em] text-[#a45a3d]">{{ item.tag }}</text>
|
||||
<uni-icons type="right" :size="15" color="#a79b90" />
|
||||
</view>
|
||||
<text class="mt-[5px] text-clamp-2 font-serif text-[15px] font-semibold leading-[21px] text-[#1c252d]">{{ item.title }}</text>
|
||||
<text class="mt-1 text-clamp-2 text-[11px] leading-[17px] text-[#7a7d78]">{{ item.description }}</text>
|
||||
<text class="mt-1 text-clamp-2 font-serif text-[16px] font-semibold leading-[21px] text-[#202522]">{{ item.title }}</text>
|
||||
<text class="mt-1 text-clamp-2 text-[11px] leading-4 text-[#7c817b]">{{ item.description }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -15,7 +15,7 @@ export const homeExperienceMocks: HomeExperience[] = [
|
||||
category: "瀑降体验",
|
||||
title: "悬崖瀑降",
|
||||
englishTitle: "WATERFALL DESCENT",
|
||||
image: "/assets/guizhou/tiankeng-pool.jpg",
|
||||
image: "https://genk.mediacdn.vn/139269124445442048/2024/4/27/10-23-sinkhole-1714189653945948438879.jpg",
|
||||
searchKeyword: "悬崖瀑降",
|
||||
},
|
||||
{
|
||||
@@ -24,7 +24,7 @@ export const homeExperienceMocks: HomeExperience[] = [
|
||||
category: "地心探险",
|
||||
title: "森林&探洞",
|
||||
englishTitle: "CAVE EXPLORATION",
|
||||
image: "/assets/guizhou/zhijin-cave-pool.jpg",
|
||||
image: "https://www.zurnal24.si/media/img/5e/d5/9526a56dba168aa136f3.jpeg",
|
||||
searchKeyword: "地心探险",
|
||||
},
|
||||
];
|
||||
@@ -13,7 +13,7 @@ export const homeTeamBuildingMocks: HomeTeamBuilding[] = [
|
||||
tag: "户外挑战",
|
||||
title: "山野挑战，共同完成一次极境任务",
|
||||
description: "洞穴、瀑降与协作任务组合，适合 10-30 人团队。",
|
||||
image: "/assets/guizhou/tiankeng-sunbeam-group.jpg",
|
||||
image: "https://dimg04.c-ctrip.com/images/1mh0412000njfr1ot9453_W_640_10000.jpg?proc=autoorient",
|
||||
searchKeyword: "户外团建",
|
||||
},
|
||||
{
|
||||
@@ -21,7 +21,7 @@ export const homeTeamBuildingMocks: HomeTeamBuilding[] = [
|
||||
tag: "团队协作",
|
||||
title: "峡谷溯溪，把默契带进自然",
|
||||
description: "轻户外水线和分组任务，兼顾参与感与安全保障。",
|
||||
image: "/assets/guizhou/shuichunhe-rafting.jpg",
|
||||
image: "https://dimg04.c-ctrip.com/images/0EQ5712000ca7t504EC0E_W_640_10000.jpg?proc=autoorient",
|
||||
searchKeyword: "峡谷团建",
|
||||
},
|
||||
{
|
||||
@@ -29,7 +29,7 @@ export const homeTeamBuildingMocks: HomeTeamBuilding[] = [
|
||||
tag: "人文聚会",
|
||||
title: "苗寨共聚，换一种方式认识彼此",
|
||||
description: "夜游、长桌宴与在地文化体验，适合企业团建收尾。",
|
||||
image: "/assets/guizhou/xijiang-miao-village.jpg",
|
||||
image: "https://p6.itc.cn/q_70/images03/20200918/df728d2b79d943da869333e2ea2c92c8.jpeg",
|
||||
searchKeyword: "贵州团建",
|
||||
},
|
||||
];
|
||||
@@ -9,25 +9,25 @@ export const homeWildArchiveMocks: HomeWildArchive[] = [
|
||||
{
|
||||
id: "hundred-meter-descent",
|
||||
title: "百米自降",
|
||||
image: "/assets/guizhou/tiankeng-pool.jpg",
|
||||
image: "https://genk.mediacdn.vn/139269124445442048/2024/4/27/10-23-sinkhole-1714189653945948438879.jpg",
|
||||
searchKeyword: "悬崖瀑降",
|
||||
},
|
||||
{
|
||||
id: "shilong-cave",
|
||||
title: "石龙洞",
|
||||
image: "/assets/guizhou/zhijin-cave-pool.jpg",
|
||||
image: "https://www.zurnal24.si/media/img/5e/d5/9526a56dba168aa136f3.jpeg",
|
||||
searchKeyword: "地心探险",
|
||||
},
|
||||
{
|
||||
id: "cliff-current",
|
||||
title: "绝壁迎流",
|
||||
image: "/assets/guizhou/gorge-paddle.jpg",
|
||||
image: "https://q9.itc.cn/q_70/images03/20250810/b62f5afc191a4947a66e6b32721b0235.jpeg",
|
||||
searchKeyword: "峡谷探险",
|
||||
},
|
||||
{
|
||||
id: "canyon-streaming",
|
||||
title: "峡谷溯溪",
|
||||
image: "/assets/guizhou/shuichunhe-rafting.jpg",
|
||||
image: "https://dimg04.c-ctrip.com/images/0EQ5712000ca7t504EC0E_W_640_10000.jpg?proc=autoorient",
|
||||
searchKeyword: "峡谷溯溪",
|
||||
},
|
||||
];
|
||||
@@ -1,22 +1,20 @@
|
||||
<template>
|
||||
<AppShell>
|
||||
<scroll-view id="home-scroll" scroll-y class="h-screen safe-bottom no-scrollbar">
|
||||
<HomeHeroCarousel :slides="appState.data.heroSlides" @select="openHero" />
|
||||
<HomeExperienceList :items="homeExperienceMocks" @select="openExperience" />
|
||||
<HomeVehicleGrid :vehicle-options="vehicleOptions" @select="goDemand('贵州')" />
|
||||
<HomeTeamBuilding :items="homeTeamBuildingMocks" @select="openTeamBuilding" />
|
||||
<HomeWildArchives :items="homeWildArchiveMocks" @select="openWildArchive" @more="openWildArchives" />
|
||||
</scroll-view>
|
||||
|
||||
<BottomNav active="home" />
|
||||
</AppShell>
|
||||
<view class="wq-page">
|
||||
<view class="wq-phone">
|
||||
<scroll-view scroll-y class="h-screen no-scrollbar" :show-scrollbar="false">
|
||||
<HomeHeroCarousel :slides="appState.data.heroSlides" @select="openHero" />
|
||||
<HomeExperienceList :items="homeExperienceMocks" @select="openExperience" />
|
||||
<HomeVehicleGrid :vehicle-options="vehicleOptions" @select="goDemand('贵州')" />
|
||||
<HomeTeamBuilding :items="homeTeamBuildingMocks" @select="openTeamBuilding" />
|
||||
<HomeWildArchives :items="homeWildArchiveMocks" @select="openWildArchive" @more="openWildArchives" />
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed } from "vue";
|
||||
import { onShow } from "@dcloudio/uni-app";
|
||||
import AppShell from "@/components/AppShell.vue";
|
||||
import BottomNav from "@/components/BottomNav.vue";
|
||||
import HomeHeroCarousel from "./components/HomeHeroCarousel.vue";
|
||||
import HomeExperienceList from "./components/HomeExperienceList.vue";
|
||||
import HomeTeamBuilding from "./components/HomeTeamBuilding.vue";
|
||||
|
||||
Reference in new issue
Block a user