duanshuwen
988f7c3f4c
移除废弃的AppShell、BottomNav、PlayTopBar组件，统一所有页面的根布局结构。在pages.json中配置全局小程序底部导航栏，新增配套的tabbar图标资源。将本地静态图片替换为远程CDN资源，重构资源加载工具函数。更新小程序后台appid，调整全局样式与部分页面的布局样式。拆分我的页面为未登录访客态和已登录会员态，新增对应业务组件。重构登录页、首页、玩法页等多个页面的代码，移除对旧组件的依赖。
50 lines
2.6 KiB
Vue
50 lines
2.6 KiB
Vue
<template>
|
|
<view class="flex h-screen flex-col overflow-hidden bg-[#f5f2ed]">
|
|
<view class="relative h-[52%] min-h-[300px] overflow-hidden rounded-b-[24px] bg-[#211e1c]">
|
|
<image class="absolute inset-0 h-full w-full opacity-75"
|
|
src="https://images.unsplash.com/photo-1774623703220-b3b5e6d3cedf?auto=format&fit=crop&fm=jpg&q=80&w=1200&h=1800"
|
|
mode="aspectFill" />
|
|
<view class="absolute inset-0 bg-[#171513]/45" />
|
|
<view class="absolute left-6 top-[calc(16px+env(safe-area-inset-top))]">
|
|
<text class="block text-[11px] font-semibold tracking-[0.28em] text-white/90">WONDERQ</text>
|
|
<text class="mt-1 block text-[10px] tracking-[0.22em] text-white/55">MEMBER SPACE</text>
|
|
</view>
|
|
<view class="absolute bottom-6 left-6 right-6 flex items-end justify-between">
|
|
<view>
|
|
<text class="block text-[18px] font-medium tracking-[0.04em] text-white">把旅程交给懂你的人</text>
|
|
<text class="mt-2 block text-[10px] tracking-[0.2em] text-white/60">A QUIETER WAY TO TRAVEL</text>
|
|
</view>
|
|
<view class="flex h-9 w-9 items-center justify-center rounded-full border border-white/30 bg-black/15">
|
|
<uni-icons type="arrowright" :size="18" color="#fffaf5" />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="flex min-h-0 flex-1 flex-col items-center px-6 pb-[calc(12px+env(safe-area-inset-bottom))] pt-6 text-center">
|
|
<view class="flex h-12 w-12 items-center justify-center rounded-[14px] border border-[#ded6cd] bg-white/80">
|
|
<uni-icons type="person" :size="30" color="#6d665f" />
|
|
</view>
|
|
<text class="mt-4 block text-[25px] font-light leading-tight tracking-[0.02em] text-[#24211f]">探索你的专属空间</text>
|
|
<text class="mt-2 block text-[13px] leading-5 tracking-[0.03em] text-[#857d75]">登录后查看行程、管理订单</text>
|
|
<view class="mt-4 flex items-center gap-3 text-[11px] tracking-[0.08em] text-[#9b9188]">
|
|
<text>行程</text>
|
|
<text class="text-[#c8beb5]">·</text>
|
|
<text>订单</text>
|
|
<text class="text-[#c8beb5]">·</text>
|
|
<text>收藏</text>
|
|
</view>
|
|
<button
|
|
class="tap-feedback m-0 mt-5 flex min-h-[48px] w-full max-w-[280px] items-center justify-center gap-2 rounded-[14px] border-0 bg-[#a45a3d] px-6 text-[16px] font-semibold tracking-[0.05em] text-white shadow-none"
|
|
@click="$emit('login')">
|
|
<uni-icons type="chat" :size="19" color="#fffaf5" />
|
|
<text>微信授权登录</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
defineEmits<{
|
|
login: [];
|
|
}>();
|
|
</script>
|