suncheng/EmailBill
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整
All checks were successful
Docker Build & Deploy / Build Docker Image (push) Successful in 12s
Details
Docker Build & Deploy / Deploy to Production (push) Successful in 6s
Details

Browse Source
This commit is contained in:
孙诚
2025-12-27 21:15:26 +08:00
parent 1192bdb46f
commit e11603caec
11 changed files with 131 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
Web/src/main.js
View File

@@ -1,4 +1,5 @@
import './assets/main.css'
import './styles/common.css'
import { createApp } from 'vue'
import { createPinia } from 'pinia'

68
Web/src/styles/common.css
View File

@@ -161,3 +161,71 @@
-webkit-overflow-scrolling: touch;
}
/* ===== 页面容器布局（Flex布局） ===== */
.page-container-flex {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.page-container-flex :deep(.van-nav-bar) {
flex-shrink: 0;
}
.page-container-flex > .van-pull-refresh {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* ===== 可滚动内容区域 ===== */
.scroll-content {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
padding: 16px 0 0 0;
}
/* ===== 粘性顶部元素样式 ===== */
.sticky-header {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin: 0 12px;
margin-top: 12px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
.sticky-header {
background: #1f1f1f;
}
}
.sticky-header-text {
font-size: 16px;
font-weight: 600;
color: var(--van-text-color);
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
user-select: none;
}
/* ===== 颜色工具类 ===== */
.text-expense {
color: #ff6b6b;
}
.text-income {
color: #51cf66;
}

7
Web/src/views/BillAnalysisView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<!-- 顶部导航栏 -->
<van-nav-bar
title="智能分析"
@@ -11,11 +11,6 @@
<div class="analysis-content">
<!-- 输入区域 -->
<div class="input-section">
<div class="input-header">
<h3>输入您的问题</h3>
<p class="input-tip">例如：我这三个月坐车花费了多少钱？</p>
</div>
<van-field
v-model="userInput"
rows="2"

4
Web/src/views/ClassificationBatch.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<van-nav-bar
title="批量分类"
left-text="返回"
@@ -8,6 +8,7 @@
placeholder
/>
<div class="scroll-content">
<!-- 未分类账单统计 -->
<div class="unclassified-stat">
<span>未分类账单数: {{ unclassifiedCount }}</span>
@@ -165,6 +166,7 @@
<van-field v-model="newClassify" placeholder="请输入新的交易分类" />
</van-dialog>
</div>
</div>
</template>
<script setup>

4
Web/src/views/ClassificationEdit.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<van-nav-bar
:title="navTitle"
left-text="返回"
@@ -8,6 +8,7 @@
placeholder
/>
<div class="scroll-content">
<!-- 第一层：选择交易类型 -->
<div v-if="currentLevel === 0" class="level-container">
<van-cell-group inset>
@@ -91,6 +92,7 @@
@confirm="handleConfirmDelete"
/>
</div>
</div>
</template>
<script setup>

6
Web/src/views/ClassificationNLP.vue
View File

@@ -1,13 +1,13 @@
<template>
<div class="page-container classification-nlp">
<div class="page-container-flex classification-nlp">
<van-nav-bar
title="智能分类助手"
title="自然语言分类"
left-text="返回"
left-arrow
@click-left="onClickLeft"
/>
<div class="page-content">
<div class="scroll-content">
<!-- 输入区域 -->
<div class="input-section">
<van-cell-group inset>

4
Web/src/views/ClassificationSmart.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container smart-classification">
<div class="page-container-flex smart-classification">
<van-nav-bar
title="智能分类"
left-text="返回"
@@ -7,7 +7,7 @@
@click-left="onClickLeft"
/>
<div class="page-content" style="padding-top: 5px;">
<div class="scroll-content" style="padding-top: 5px;">
<!-- 统计信息 -->
<div class="stats-info">
<span class="stats-label">未分类账单：</span>

11
Web/src/views/EmailRecord.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<!-- 顶部导航栏 -->
<van-nav-bar title="邮件记录" placeholder>
<template #right>
@@ -15,7 +15,7 @@
</van-nav-bar>
<!-- 下拉刷新区域 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-wrapper">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<!-- 加载提示 -->
<van-loading v-if="loading && !(emailList && emailList.length)" vertical style="padding: 50px 0">
加载中...
@@ -417,6 +417,13 @@ onMounted(() => {
</script>
<style scoped>
:deep(.van-pull-refresh) {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.email-info {
display: flex;
flex-direction: column;

6
Web/src/views/SettingView.vue
View File

@@ -1,6 +1,7 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<van-nav-bar title="设置" placeholder/>
<div class="scroll-content">
<div class="detail-header" style="padding-bottom: 5px;">
<p>账单导入</p>
</div>
@@ -16,7 +17,7 @@
<p>分类处理</p>
</div>
<van-cell-group inset>
<van-cell title="分类管理" is-link @click="handleEditClassification" />
<van-cell title="编辑分类" is-link @click="handleEditClassification" />
<van-cell title="批量分类" is-link @click="handleBatchClassification" />
<van-cell title="智能分类" is-link @click="handleSmartClassification" />
<van-cell title="自然语言分类" is-link @click="handleNaturalLanguageClassification" />
@@ -28,6 +29,7 @@
<van-cell title="退出登录" is-link @click="handleLogout" />
</van-cell-group>
</div>
</div>
</template>
<script setup>

58
Web/src/views/StatisticsView.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<!-- 顶部导航栏 -->
<van-nav-bar title="账单统计" placeholder>
<template #right>
@@ -8,14 +8,14 @@
</van-nav-bar>
<!-- 月份选择器 固定区域 -->
<div class="month-selector">
<div class="sticky-header">
<van-button
icon="arrow-left"
plain
size="small"
@click="changeMonth(-1)"
/>
<div class="month-text" @click="showMonthPicker = true">
<div class="sticky-header-text" @click="showMonthPicker = true">
{{ currentYear }}年{{ currentMonth }}月
<van-icon name="arrow-down" />
</div>
@@ -665,58 +665,14 @@ onActivated(() => {
</script>
<style scoped>
.page-container {
display: flex;
flex-direction: column;
height: 100vh;
overflow: hidden;
}
.page-container :deep(.van-nav-bar) {
flex-shrink: 0;
}
.van-pull-refresh {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.statistics-content {
padding: 16px 0 0 0;
}
/* 月份选择器 - 固定 */
.month-selector {
position: sticky;
top: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
margin: 0 12px;
margin-top: 12px;
background: #ffffff;
border-radius: 12px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
@media (prefers-color-scheme: dark) {
.month-selector {
background: #1f1f1f;
}
}
.month-text {
font-size: 16px;
font-weight: 600;
color: var(--van-text-color);
display: flex;
align-items: center;
gap: 4px;
cursor: pointer;
user-select: none;
:deep(.van-pull-refresh) {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
/* 月度概览卡片 */

10
Web/src/views/TransactionsRecord.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="page-container">
<div class="page-container-flex">
<!-- 顶部导航栏 -->
<van-nav-bar title="交易记录" placeholder>
<template #right>
@@ -10,7 +10,7 @@
</van-nav-bar>
<!-- 下拉刷新区域 -->
<van-pull-refresh v-model="refreshing" @refresh="onRefresh" class="refresh-wrapper">
<van-pull-refresh v-model="refreshing" @refresh="onRefresh">
<!-- 加载提示 -->
<van-loading v-if="loading && !(transactionList && transactionList.length)" vertical style="padding: 50px 0">
加载中...
@@ -529,6 +529,12 @@ onMounted(async () => {
<style scoped>
:deep(.van-pull-refresh) {
flex: 1;
overflow-y: auto;
-webkit-overflow-scrolling: touch;
}
.floating-search {
position: fixed;
bottom: 90px;