feat: 完成项目基础功能搭建与样式优化
1. 新增评估选择组件、本地草稿存储与新闻/金融内容服务 2. 重构页面布局与样式:调整按钮阴影、图标尺寸、导航栏样式 3. 更新启动页、报告页、消息中心等页面UI与交互逻辑 4. 替换图标资源,调整禁用态透明度 5. 补充README文档与本地数据模拟实现
This commit is contained in:
@@ -2,7 +2,7 @@
|
||||
<view class="header-wrap">
|
||||
<view class="status-bar" :style="statusStyle(0)"></view>
|
||||
<view class="app-header">
|
||||
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="34" class="back-icon" /></view>
|
||||
<view class="header-side" @click="handleBack"><AppIcon v-if="back" name="chevron-right" :size="48" class="back-icon" /></view>
|
||||
<text class="header-title">{{ title }}</text>
|
||||
<view class="header-side header-right"><slot></slot></view>
|
||||
</view>
|
||||
@@ -13,9 +13,11 @@
|
||||
import { usePageLayout } from '@/services/layout.uts'
|
||||
const { statusStyle } = usePageLayout()
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
const props = defineProps({ title: { type: String, default: '' }, back: { type: Boolean, default: true } })
|
||||
const props = defineProps({ title: { type: String, default: '' }, back: { type: Boolean, default: true }, customBack: { type: Boolean, default: false } })
|
||||
const emit = defineEmits(['back'])
|
||||
const handleBack = () => {
|
||||
if (!props.back) return
|
||||
if (props.customBack) { emit('back'); return }
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) uni.navigateBack({ delta: 1 })
|
||||
else uni.reLaunch({ url: '/pages/home/home' })
|
||||
@@ -26,7 +28,7 @@
|
||||
.header-wrap { background-color: #ffffff; }
|
||||
.status-bar { }
|
||||
.app-header { height: 96rpx; padding: 0 24rpx; flex-direction: row; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #edf1f7; }
|
||||
.header-side { width: 100rpx; height: 96rpx; align-items: flex-start; justify-content: center; }
|
||||
.header-side { width: 88rpx; height: 96rpx; align-items: flex-start; justify-content: center; flex-shrink: 0; }
|
||||
.header-right { align-items: flex-end; }
|
||||
.back-icon { transform: rotate(180deg); margin-top: 0; }
|
||||
.header-title { font-size: 34rpx; font-weight: 700; color: #111d35; }
|
||||
|
||||
@@ -16,5 +16,5 @@ display: block;
|
||||
/* #endif */
|
||||
flex-shrink: 0; transform: scale(1.2); }
|
||||
.vector-icon { transform: none; }
|
||||
.muted-icon { opacity: .48; }
|
||||
.muted-icon { opacity: .70; }
|
||||
</style>
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
<template>
|
||||
<view class="select-row" @click="choose"><text class="select-label">{{ label }}</text><text :class="modelValue.length > 0 ? 'select-value' : 'select-value select-placeholder'">{{ modelValue.length > 0 ? modelValue : '请选择' }}</text><view class="select-arrow"><AppIcon name="chevron-right" :size="28" /></view></view>
|
||||
</template>
|
||||
<script setup lang="uts">
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
const props = defineProps({ label: { type: String, default: '' }, modelValue: { type: String, default: '' }, options: { type: Array as PropType<string[]>, default: () => [] as string[] } })
|
||||
const emit = defineEmits(['update:modelValue'])
|
||||
const choose = () => { uni.showActionSheet({ itemList: props.options, success: (result) => { if (result.tapIndex >= 0 && result.tapIndex < props.options.length) emit('update:modelValue', props.options[result.tapIndex]) } }) }
|
||||
</script>
|
||||
<style>
|
||||
.select-row { min-height: 106rpx; flex-direction: row; align-items: center; border-bottom: 1rpx solid #edf1f6; }
|
||||
.select-label { font-size: 28rpx; color: #29374e; margin-right: 16rpx; flex-shrink: 0; }
|
||||
.select-value { flex: 1; min-width: 0; text-align: right; color: #22324a; font-size: 27rpx; line-height: 38rpx; }
|
||||
.select-placeholder { color: #8995a7; }
|
||||
.select-arrow { width: 32rpx; height: 32rpx; margin-left: 12rpx; align-items: center; justify-content: center; transform: rotate(90deg); }
|
||||
</style>
|
||||
+16
-10
@@ -1,23 +1,29 @@
|
||||
<template>
|
||||
<view class="bottom-nav">
|
||||
<view class="nav-item" @click="go('/pages/home/home')"><view :class="active == 'home' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="home" :size="43" :muted="active != 'home'" /></view><text :class="active == 'home' ? 'nav-label active-label' : 'nav-label'">首页</text></view>
|
||||
<view class="nav-item" @click="go('/pages/news/news')"><view :class="active == 'news' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="trend-up" :size="43" :muted="active != 'news'" /></view><text :class="active == 'news' ? 'nav-label active-label' : 'nav-label'">新闻</text></view>
|
||||
<view class="nav-item" @click="go('/pages/messages/messages')"><view :class="active == 'message' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="message" :size="43" :muted="active != 'message'" /></view><text :class="active == 'message' ? 'nav-label active-label' : 'nav-label'">消息</text></view>
|
||||
<view class="nav-item" @click="go('/pages/profile/profile')"><view :class="active == 'profile' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="user" :size="43" :muted="active != 'profile'" /></view><text :class="active == 'profile' ? 'nav-label active-label' : 'nav-label'">我的</text></view>
|
||||
<view class="bottom-nav" :style="bottomStyle(14)">
|
||||
<view class="nav-item" @click="go('/pages/home/home')"><view :class="active == 'home' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="home" :size="54" :muted="active != 'home'" /></view><text :class="active == 'home' ? 'nav-label active-label' : 'nav-label'">首页</text></view>
|
||||
<view class="nav-item" @click="go('/pages/news/news')"><view :class="active == 'news' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="file-text" :size="54" :muted="active != 'news'" /></view><text :class="active == 'news' ? 'nav-label active-label' : 'nav-label'">新闻</text></view>
|
||||
<view class="nav-item" @click="go('/pages/messages/messages')"><view :class="active == 'message' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="message" :size="54" :muted="active != 'message'" /></view><text :class="active == 'message' ? 'nav-label active-label' : 'nav-label'">消息</text></view>
|
||||
<view class="nav-item" @click="go('/pages/profile/profile')"><view :class="active == 'profile' ? 'nav-icon active-icon' : 'nav-icon'"><AppIcon name="user" :size="54" :muted="active != 'profile'" /></view><text :class="active == 'profile' ? 'nav-label active-label' : 'nav-label'">我的</text></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="uts">
|
||||
import AppIcon from '@/components/AppIcon.uvue'
|
||||
import { usePageLayout } from '@/services/layout.uts'
|
||||
const { bottomStyle } = usePageLayout()
|
||||
defineProps({ active: { type: String, default: 'home' } })
|
||||
const go = (url: string) => { uni.redirectTo({ url: url }) }
|
||||
const go = (url: string) => {
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 0 && '/' + pages[pages.length - 1].route == url) return
|
||||
uni.reLaunch({ url: url })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; height: 130rpx; padding-bottom: env(safe-area-inset-bottom); background-color: #ffffff; border-top: 1rpx solid #e7edf6; flex-direction: row; box-shadow: 0 -10rpx 30rpx rgba(18, 38, 75, 0.06); }
|
||||
.bottom-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; min-height: 130rpx; background-color: #ffffff; border-top: 1rpx solid #e7edf6; flex-direction: row; box-shadow: 0 -6rpx 18rpx rgba(18, 38, 75, 0.04); }
|
||||
.nav-item { flex: 1; height: 116rpx; align-items: center; justify-content: center; }
|
||||
.nav-icon { width: 60rpx; height: 60rpx; border-radius: 18rpx; align-items: center; justify-content: center; background-color: #f0f4f9; }
|
||||
.active-icon { background-color: #e6f0ff; }
|
||||
.nav-label { margin-top: 7rpx; font-size: 21rpx; color: #7b8799; }
|
||||
.nav-icon { width: 64rpx; height: 60rpx; border-radius: 18rpx; align-items: center; justify-content: center; }
|
||||
.active-icon { background-color: #edf5ff; }
|
||||
.nav-label { margin-top: 7rpx; font-size: 24rpx; color: #64748b; }
|
||||
.active-label { color: #0868f7; font-weight: 700; }
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user