tt/youlai-app
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: 样式调整和代码优化

Browse Source
This commit is contained in:
Ray.Hao
2025-10-06 14:02:15 +08:00
parent dbb43bc57e
commit e743d04375
21 changed files with 177 additions and 891 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/pages.json
View File

@@ -129,4 +129,4 @@
]
},
"subPackages": []
}
}

88
src/pages/index/index.vue
View File

@@ -1,5 +1,26 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<!-- 自定义导航栏 -->
<view class="custom-navbar">
<!-- 状态栏占位 -->
<view :style="{ height: statusBarHeight + 'px' }"></view>
<!-- 导航栏内容 -->
<view class="navbar-content">
<wd-search
v-model="searchValue"
:custom-style="`width: ${searchWidth}`"
placeholder="搜索"
:placeholder-left="true"
hide-cancel
disabled
@click="handleSearch"
/>
</view>
</view>
<!-- 占位符，避免内容被固定导航栏遮挡 -->
<view class="navbar-placeholder" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
<!-- 轮播图 -->
<wd-swiper
v-model:current="current"
:list="swiperList"
@@ -104,6 +125,36 @@ interface VisitStatsVO {
const router = useRouter();
const current = ref<number>(0);
// 搜索相关
const searchValue = ref("");
// 导航栏相关数据
const statusBarHeight = ref(0); // 状态栏高度
const navBarHeight = ref(88); // 导航栏高度（rpx）
const searchWidth = ref("100%"); // 搜索框宽度
// 初始化导航栏信息
onMounted(() => {
const systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight || 0;
// #ifdef MP-WEIXIN
// 微信小程序：获取胶囊按钮信息
const menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// 计算导航栏高度：(胶囊底部 - 状态栏高度) + (胶囊顶部 - 状态栏高度)
navBarHeight.value =
menuButtonInfo.bottom - statusBarHeight.value + (menuButtonInfo.top - statusBarHeight.value);
// 搜索框宽度：胶囊左侧位置 - 左右边距
searchWidth.value = `${menuButtonInfo.left - 30}px`;
// #endif
// #ifdef H5 || APP-PLUS
// H5 和 App 使用默认高度和 100% 宽度
navBarHeight.value = 88;
searchWidth.value = "100%";
// #endif
});
const visitStatsData = ref<VisitStatsVO>({
todayUvCount: 1234,
uvGrowthRate: 15.6,
@@ -171,6 +222,14 @@ const navList = reactive([
},
]);
// 处理搜索
function handleSearch() {
uni.showToast({
title: "搜索功能开发中",
icon: "none",
});
}
// 处理导航点击
function handleNavClick(item: any) {
// 使用路由系统进行导航，这样会触发路由守卫
@@ -267,4 +326,29 @@ onReady(() => {
"layout": "tabbar"
}
</route>
<style setup lang="scss"></style>
<style lang="scss" scoped>
// 自定义导航栏
.custom-navbar {
position: fixed;
top: 0;
right: 0;
left: 0;
z-index: 999;
background-color: var(--wot-color-bg);
}
// 占位符，避免内容被固定导航栏遮挡
.navbar-placeholder {
height: 88rpx;
}
.navbar-content {
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: flex-start;
height: 88rpx;
padding: 0 20rpx;
background-color: var(--wot-color-bg);
}
</style>

14
src/pages/login/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="login-page dark:text-[var(--wot-dark-color)]">
<view class="login-page dark:text-[var(--wot-color-text)]">
<!-- 背景图 -->
<image src="/static/images/login-bg.svg" mode="aspectFill" class="login-page__bg" />
@@ -294,9 +294,9 @@ const navigateToPrivacy = () => {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center; // 垂直居中
min-height: 100vh;
overflow: hidden;
background-color: var(--wot-color-bg-container);
// 背景图
&__bg {
@@ -313,11 +313,13 @@ const navigateToPrivacy = () => {
.login-card {
position: relative;
z-index: 2;
width: 80%; // 进一步减少宽度，增加更多左右间距
padding: 40rpx;
margin-top: 200rpx;
background-color: var(--wot-card-bg);
width: 80%;
max-width: 600rpx; // 限制最大宽度
padding: 50rpx 40rpx;
background-color: var(--wot-color-bg);
border: 1rpx solid var(--wot-color-border);
border-radius: 24rpx;
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
}
// 登录表单

2
src/pages/mine/about/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-card>
<view class="about-header">
<wd-img

2
src/pages/mine/faq/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<view>
<view class="text-center font-600">
<text>长按关注「有来技术」公众号，获取交流群二维码。</text>

2
src/pages/mine/feedback/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-text size="small">选填，最多上传3张图片</wd-text>
<wd-form ref="formRef" :model="formData" :rules="rules">
<wd-form-item label="问题类型" prop="feedbackType">

126
src/pages/mine/index.vue
View File

@@ -1,8 +1,9 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<!-- 用户信息卡片 -->
<view class="user-profile">
<view class="blur-bg"></view>
<view class="user-info">
<view class="avatar-container" @click="navigateToProfile">
<image
@@ -30,17 +31,15 @@
</wd-button>
</block>
</view>
<view class="flex">
<view class="user-profile__action" @click="navigateToSettings">
<wd-icon name="setting1" size="22" :color="themeStore.isDark ? '#fff' : '#333'" />
<!-- 操作按钮区域 - 放在用户信息右侧 -->
<view class="action-buttons">
<view class="action-btn" @click="navigateToSettings">
<wd-icon name="setting1" size="22" />
</view>
<view
v-if="isLogin"
class="user-profile__action relative ml-16rpx"
@click="navigateToSection('messages')"
>
<view v-if="isLogin" class="action-btn relative" @click="navigateToSection('messages')">
<wd-icon name="notification" size="22" />
<view v-if="true" class="user-profile__badge">2</view>
<view v-if="true" class="action-badge">2</view>
</view>
</view>
</view>
@@ -71,7 +70,7 @@
</wd-card>
<!-- 常用工具 -->
<wd-card custom-class="tools-card">
<wd-card>
<template #header>
<view class="flex-start">
<wd-icon name="tools" size="18" :color="currentThemeColor" />
@@ -116,7 +115,7 @@
</wd-card>
<!-- 推荐服务 -->
<wd-card custom-class="services-card">
<wd-card>
<template #header>
<view class="flex-start">
<wd-icon name="star" size="18" :color="currentThemeColor" />
@@ -170,7 +169,7 @@
</wd-card>
<!-- 退出登录按钮 -->
<view v-if="isLogin">
<view v-if="isLogin" class="flex-center mt-20rpx">
<wd-button custom-class="logout-button" plain @click="handleLogout">退出登录</wd-button>
</view>
@@ -178,6 +177,14 @@
</view>
</template>
<route lang="json">
{
"name": "mine",
"style": { "navigationStyle": "custom" },
"layout": "tabbar"
}
</route>
<script lang="ts" setup>
import { useToast } from "wot-design-uni";
import { useUserStore, useThemeStore } from "@/store";
@@ -255,19 +262,11 @@ const navigateToSection = (section: string, subSection?: string) => {
};
</script>
<route lang="json">
{
"name": "mine",
"style": { "navigationStyle": "custom" },
"layout": "tabbar"
}
</route>
<style lang="scss" scoped>
// 用户信息卡片
.user-profile {
position: relative;
padding: 30rpx;
padding: calc(var(--status-bar-height) + 80rpx) 30rpx 30rpx; // 顶部：状态栏高度 + 操作按钮区域(80rpx)
overflow: hidden;
.blur-bg {
@@ -276,7 +275,7 @@ const navigateToSection = (section: string, subSection?: string) => {
right: 0;
left: 0;
z-index: 0;
height: 240rpx;
height: 320rpx;
background: linear-gradient(135deg, var(--wot-color-theme, #165dff) 0%, #667eea 100%);
}
@@ -321,30 +320,29 @@ const navigateToSection = (section: string, subSection?: string) => {
}
}
// BEM命名规范的用户操作按钮
.user-profile__action {
// 操作按钮区域
.action-buttons {
display: flex;
gap: 16rpx;
margin-left: auto;
}
.action-btn {
display: flex;
align-items: center;
justify-content: center;
width: 70rpx;
height: 70rpx;
background-color: rgba(255, 255, 255, 0.9);
background-color: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10rpx);
border-radius: 50%;
transition: all 0.3s ease;
&:active {
background-color: rgba(255, 255, 255, 0.7);
transform: scale(0.9);
}
}
// 通知徽章 - 超过5个原子类，使用CSS类
.user-profile__badge {
.action-badge {
position: absolute;
top: -6rpx;
right: -6rpx;
z-index: 2;
z-index: 3;
min-width: 32rpx;
height: 32rpx;
padding: 0 6rpx;
@@ -352,13 +350,17 @@ const navigateToSection = (section: string, subSection?: string) => {
line-height: 32rpx;
color: #fff;
text-align: center;
background-color: #ff4757; // 明确的红色
background-color: #ff4757;
border: 2rpx solid #fff;
border-radius: 16rpx;
}
}
}
:deep(.stats-card) {
margin: 20rpx 30rpx !important;
}
// 服务图标
.service-icon {
display: flex;
@@ -366,56 +368,8 @@ const navigateToSection = (section: string, subSection?: string) => {
justify-content: center;
width: 80rpx;
height: 80rpx;
background-color: var(--wot-color-bg-light, #f3f4f6);
background-color: var(--wot-color-bg-light);
border-radius: 16rpx;
transition: all 0.3s ease;
&:active {
background-color: var(--wot-color-theme, #165dff);
transform: scale(0.95);
}
}
// 数据统计项
.stats-item {
cursor: pointer;
transition: all 0.3s ease;
&:active {
background-color: var(--wot-color-bg-light, #f8f9fa);
transform: scale(0.98);
}
}
// 卡片动画
:deep(.stats-card) {
margin: 20rpx 30rpx;
transition: all 0.3s ease;
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
transform: translateY(-2rpx);
}
}
:deep(.tools-card),
:deep(.services-card) {
transition: all 0.3s ease;
&:hover {
box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.08);
transform: translateY(-2rpx);
}
}
// 服务项动画
:deep(.service-cell) {
transition: all 0.2s ease;
&:active {
background-color: var(--wot-color-bg-light, #f8f9fa) !important;
transform: scale(0.98);
}
}
// 登录按钮样式
@@ -426,7 +380,7 @@ const navigateToSection = (section: string, subSection?: string) => {
// 退出登录按钮样式
:deep(.logout-button) {
width: 100% !important;
width: 80% !important;
height: 80rpx !important;
font-size: 32rpx !important;
font-weight: bold !important;

2
src/pages/mine/profile/complete-profile.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<!-- 头部标题 -->
<view class="header">
<view class="title">完善个人信息</view>

2
src/pages/mine/profile/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-card v-if="userProfile" custom-style="margin-top: 20rpx">
<wd-cell-group border>
<wd-cell class="avatar-cell" title="头像" center is-link>

2
src/pages/mine/settings/account/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-card>
<wd-cell-group border>
<wd-cell

2
src/pages/mine/settings/agreement/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-collapse v-model="activeNames" accordion>
<wd-collapse-item
v-for="(section, index) in agreementContent"

30
src/pages/mine/settings/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-cell-group>
<wd-cell v-if="isLogin" title="个人资料" icon="user" is-link @click="navigateToProfile" />
<wd-cell
@@ -26,7 +26,7 @@
</wd-cell-group>
<view v-if="isLogin" class="logout-section">
<wd-button class="logout-btn" @click="handleLogout">退出登录</wd-button>
<wd-button custom-class="logout-btn" plain @click="handleLogout">退出登录</wd-button>
</view>
<!-- 使用wot-design-uni的Loading组件 -->
@@ -210,27 +210,21 @@ onLoad(() => {
display: flex;
align-items: center;
justify-content: center;
padding: 0 20rpx;
margin-top: 60rpx;
}
.logout-btn {
display: flex;
align-items: center;
justify-content: center;
width: 90%;
height: 90rpx;
font-size: 32rpx;
font-weight: 500;
color: #fff;
background-color: var(--wot-color-theme, var(--primary-color));
border: none;
border-radius: 45rpx;
box-shadow: 0 4rpx 12rpx rgba(22, 93, 255, 0.3);
transition: opacity 0.2s;
// 退出登录按钮样式
:deep(.logout-btn) {
width: 80% !important;
height: 80rpx !important;
font-size: 32rpx !important;
font-weight: bold !important;
border-radius: 40rpx !important;
transition: all 0.3s ease !important;
&:active {
opacity: 0.85;
opacity: 0.8 !important;
transform: scale(0.98) !important;
}
}

2
src/pages/mine/settings/network/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<!-- 网络状态展示 -->
<wd-card>
<wd-cell-group border>

17
src/pages/mine/settings/theme/index.vue
View File

@@ -1,10 +1,10 @@
<template>
<view class="app-container">
<view class="app-container dark:text-[var(--wot-color-text)]">
<!-- 暗黑模式设置 -->
<wd-card custom-class="mx-30rpx my-20rpx">
<template #header>
<view class="flex-start">
<wd-icon name="moon" size="20" :color="isDarkMode ? '#FFD700' : '#666'" />
<wd-icon name="moon" size="20" />
<text class="ml-12rpx text-28rpx font-600">外观模式</text>
</view>
</template>
@@ -18,7 +18,7 @@
<wd-card custom-class="mx-30rpx my-20rpx">
<template #header>
<view class="flex-start">
<wd-icon name="palette" size="20" color="#666" />
<wd-icon name="palette" size="20" />
<text class="ml-12rpx text-28rpx font-600">主题色彩</text>
</view>
</template>
@@ -65,7 +65,7 @@
<!-- 自定义颜色 -->
<wd-cell title="自定义颜色" is-link @click="showCustomInput">
<template #icon>
<wd-icon name="edit" size="16" :color="themeStore.isDark ? '#fff' : '#999'" />
<wd-icon name="edit" size="16" />
</template>
</wd-cell>
</wd-card>
@@ -103,12 +103,7 @@
<view class="custom-color-popup">
<view class="custom-color-popup__header">
<text class="custom-color-popup__title">自定义主题色</text>
<wd-icon
name="close"
size="20"
:color="themeStore.isDark ? '#999' : '#666'"
@click="showCustomColorInput = false"
/>
<wd-icon name="close" size="20" @click="showCustomColorInput = false" />
</view>
<view class="custom-color-popup__content">
@@ -356,7 +351,7 @@ onShow(() => {
// 自定义颜色弹窗
.custom-color-popup {
min-height: 400rpx;
background-color: var(--wot-card-bg);
background-color: var(--wot-color-bg);
border-radius: 20rpx 20rpx 0 0;
&__header {

2
src/pages/work/index.vue
View File

@@ -1,5 +1,5 @@
<template>
<view class="app-container dark:text-[var(--wot-dark-color)]">
<view class="app-container dark:text-[var(--wot-color-text)]">
<wd-status-tip type="search" tip="建设中..." />
</view>
</template>

22
src/static/images/login-bg.svg
View File

@@ -1,4 +1,4 @@
<svg width="100%" height="100%" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg">
<svg width="100%" height="100%" viewBox="0 0 750 1334" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
<!-- 背景渐变 -->
<defs>
<!-- 主背景渐变 - 蓝色系 -->
@@ -31,18 +31,18 @@
<rect width="100%" height="50%" fill="url(#bgGradient)" />
<!-- 左侧装饰图形 -->
<rect x="100" y="150" width="120" height="120" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 160, 210)" opacity="0.7" />
<rect x="190" y="90" width="80" height="80" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 230, 130)" opacity="0.6" />
<rect x="60" y="250" width="100" height="100" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 110, 300)" opacity="0.5" />
<rect x="60" y="120" width="110" height="110" rx="15" fill="url(#shapeGradient)" transform="rotate(-10, 115, 175)" opacity="0.7" />
<rect x="140" y="70" width="75" height="75" rx="10" fill="url(#shapeGradient)" transform="rotate(15, 177, 107)" opacity="0.6" />
<rect x="30" y="220" width="90" height="90" rx="10" fill="url(#shapeGradient)" transform="rotate(-5, 75, 265)" opacity="0.5" />
<!-- 右侧装饰图形 -->
<circle cx="750" cy="150" r="60" fill="url(#shapeGradient)" opacity="0.7" />
<circle cx="820" cy="230" r="90" fill="url(#shapeGradient)" opacity="0.5" />
<circle cx="690" cy="250" r="40" fill="url(#shapeGradient)" opacity="0.6" />
<!-- 右侧装饰图形（对称） -->
<circle cx="635" cy="120" r="55" fill="url(#shapeGradient)" opacity="0.7" />
<circle cx="573" cy="70" r="37" fill="url(#shapeGradient)" opacity="0.6" />
<circle cx="675" cy="220" r="45" fill="url(#shapeGradient)" opacity="0.5" />
<!-- 底部波浪形状，适配深色和浅色模式 -->
<path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="url(#waveGradient)" class="wave-light" />
<path d="M0,900 C200,800 350,950 550,870 C750,790 850,900 1000,850 L1000,1000 L0,1000 Z" fill="#1A1A1A" opacity="0" class="wave-dark" />
<path d="M0,1200 C150,1100 260,1250 410,1150 C560,1050 640,1180 750,1150 L750,1334 L0,1334 Z" fill="url(#waveGradient)" class="wave-light" />
<path d="M0,1200 C150,1100 260,1250 410,1150 C560,1050 640,1180 750,1150 L750,1334 L0,1334 Z" fill="#1A1A1A" opacity="0" class="wave-dark" />
<style>
@media (prefers-color-scheme: dark) {
@@ -51,4 +51,4 @@
.wave-dark { opacity: 0.7; }
}
</style>
</svg>
</svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 2.5 KiB

After

Width:  |  Height:  |  Size: 2.6 KiB

11
src/styles/theme.scss
View File

@@ -9,9 +9,8 @@ page {
/* 自定义扩展变量 */
--wot-button-normal-bg: #ffffff;
--wot-card-bg: #ffffff;
--wot-color-bg: #ffffff;
--wot-color-bg-light: #f3f4f6;
--wot-dark-color: #333333;
/* 文本颜色变量 */
--wot-color-text: #333333;
@@ -20,7 +19,6 @@ page {
/* 边框和背景变量 */
--wot-color-border: #e5e7eb;
--wot-color-bg-container: #f5f5f5;
}
/* 暗黑主题 (dark) */
@@ -32,17 +30,12 @@ page {
--wot-color-danger: #ff4757;
/* 自定义扩展变量 */
--wot-button-normal-bg: #2a2a2a;
--wot-card-bg: #1b1b1b;
--wot-color-bg: #1b1b1b;
--wot-color-bg-light: #2a2a2a;
--wot-dark-color: #ffffff;
/* 暗黑模式下的文本颜色变量 */
--wot-color-text: #ffffff;
--wot-color-text-secondary: #cccccc;
--wot-color-text-placeholder: #999999;
/* 暗黑模式下的边框和背景变量 */
--wot-color-border: #374151;
--wot-color-bg-container: #111111;
}