p95fco63j
/
Water_Machine_Management_System
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity
Labels Milestones
New Pull Request

app1的样式修改 #132

Merged
hnu202326010125 merged 1 commits from luoyuehang_branch into develop 2 weeks ago
Conversation 0 Commits 1 Files Changed 5
5 changed files with 67 additions and 156 deletions
Show Stats Download Patch File Download Diff File

45
src/main/resources/zzz/src/views/HomePage.vue
Unescape View File

@ -1,21 +1,16 @@
<template>
<div class="home-page">
<!-- 顶部标题栏 -->
<div class="header">
<div class="header-left">
<div class="user-info">
<div class="user-name">{{ userInfo?.username || '未登录' }}</div>
<div class="user-type">{{ userInfo?.userType === 'repairer' ? '维修人员' : userInfo?.userType }}</div>
</div>
</div>
<div class="header-title">运维工作台</div>
<div class="header-right">
<div class="notification-icon" @click="goToNotifications">
<span>🔔</span>
<span v-if="unreadCount > 0" class="notification-badge">{{ unreadCount }}</span>
</div>
</div>
<div class="header">
<div class="header-title">运维工作台</div>
<div class="header-right">
<div class="notification-icon" @click="goToNotifications">
<span>🔔</span>
<span v-if="unreadCount > 0" class="notification-badge">{{ unreadCount }}</span>
</div>
</div>
</div>
<!-- 主要内容区域 -->
<div class="main-content">
<!-- 统计卡片 -->
@ -487,4 +482,26 @@ onMounted(() => {
justify-content: center;
min-width: 18px;
}
.header {
background: white;
padding: 12px 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
display: flex;
justify-content: space-between;
align-items: center;
}
.header-title {
font-size: 18px;
font-weight: 600;
color: #333;
text-align: center;
flex: 1;
}
.header-right {
margin-left: auto;
}
</style>

9
src/main/resources/zzz/src/views/HomeView.vue
Unescape View File

@ -1,9 +0,0 @@
<script setup>
import TheWelcome from '../components/TheWelcome.vue'
</script>
<template>
<main>
<TheWelcome />
</main>
</template>

16
src/main/resources/zzz/src/views/InspectionPage.vue
Unescape View File

@ -24,16 +24,6 @@
<div class="area-divider"></div>
<button class="view-btn" @click="viewYueluArea">查看</button>
</div>
<!-- 雨花片区 -->
<div class="area-card">
<div class="area-info">
<div class="area-name">雨花片区</div>
<div class="area-details">3所学校 · 8台制水机</div>
</div>
<div class="area-divider"></div>
<button class="view-btn" @click="viewYuhuaArea">查看</button>
</div>
</div>
</div>
@ -83,12 +73,6 @@ const viewYueluArea = () => {
// 跳转到扫码页面
router.push('/inspection/scan')
}
const viewYuhuaArea = () => {
console.log('查看雨花片区详情')
// 跳转到扫码页面
router.push('/inspection/scan')
}
</script>
<style scoped>

114
src/main/resources/zzz/src/views/ProfilePage.vue
Unescape View File

@ -45,53 +45,6 @@
</div>
</div>
<!-- 功能菜单 -->
<div class="menu-section">
<div class="section-title">功能菜单</div>
<div class="menu-list">
<div class="menu-item" @click="goToSettings">
<div class="menu-left">
<div class="menu-icon">⚙️</div>
<div class="menu-text">系统设置</div>
</div>
<div class="menu-right">></div>
</div>
<div class="menu-item" @click="goToNotifications">
<div class="menu-left">
<div class="menu-icon">🔔</div>
<div class="menu-text">消息通知</div>
<div class="badge" v-if="unreadCount > 0">{{ unreadCount }}</div>
</div>
<div class="menu-right">></div>
</div>
<div class="menu-item" @click="goToFeedback">
<div class="menu-left">
<div class="menu-icon">📝</div>
<div class="menu-text">问题反馈</div>
</div>
<div class="menu-right">></div>
</div>
<div class="menu-item" @click="goToHelp">
<div class="menu-left">
<div class="menu-icon">❓</div>
<div class="menu-text">使用帮助</div>
</div>
<div class="menu-right">></div>
</div>
<div class="menu-item" @click="goToAbout">
<div class="menu-left">
<div class="menu-icon">ℹ️</div>
<div class="menu-text">关于我们</div>
</div>
<div class="menu-right">></div>
</div>
</div>
</div>
<!-- 退出登录按钮 -->
<div class="logout-section">
<button class="logout-btn" @click="logout">
@ -377,73 +330,6 @@ onMounted(() => {
color: #666;
}
/* 菜单区域 */
.menu-section {
background: white;
border-radius: 8px;
padding: 16px;
margin-bottom: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
.menu-list {
display: flex;
flex-direction: column;
}
.menu-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 0;
cursor: pointer;
transition: all 0.3s;
}
.menu-item:not(:last-child) {
border-bottom: 1px solid #f5f5f5;
}
.menu-item:hover {
background: #fafafa;
padding-left: 8px;
padding-right: 8px;
margin: 0 -8px;
border-radius: 4px;
}
.menu-left {
display: flex;
align-items: center;
gap: 12px;
}
.menu-icon {
font-size: 20px;
}
.menu-text {
font-size: 15px;
color: #333;
font-weight: 500;
}
.badge {
background: #ff4d4f;
color: white;
font-size: 12px;
font-weight: 500;
padding: 2px 8px;
border-radius: 10px;
min-width: 20px;
text-align: center;
}
.menu-right {
font-size: 16px;
color: #999;
transition: transform 0.3s;
}
.menu-item:hover .menu-right {
transform: translateX(2px);

39
src/main/resources/zzz/src/views/WorkOrderDetail.vue
Unescape View File

@ -15,7 +15,10 @@
<div class="detail-container" v-if="currentOrder">
<!-- 工单信息 -->
<div class="detail-section">
<div class="section-title">工单信息</div>
<div class="section-header">
<div class="section-color-bar"></div>
<div class="section-title">工单信息</div>
</div>
<div class="detail-grid">
<div class="detail-item">
<div class="item-label">工单ID</div>
@ -46,7 +49,10 @@
<!-- 告警信息 -->
<div class="detail-section">
<div class="section-title">告警信息</div>
<div class="section-header">
<div class="section-color-bar"></div>
<div class="section-title">告警信息</div>
</div>
<div class="alert-content">
<div class="alert-item">
<div class="alert-label">告警内容</div>
@ -61,7 +67,10 @@
<!-- 维修项目 -->
<div class="detail-section">
<div class="section-title">维修项目</div>
<div class="section-header">
<div class="section-color-bar"></div>
<div class="section-title">维修项目</div>
</div>
<div class="repair-content">
<div class="repair-item">
<div class="repair-label">报修项目</div>
@ -1123,4 +1132,28 @@ onMounted(() => {
color: #333;
cursor: pointer;
}
/* 小标题头部 */
.section-header {
display: flex;
flex-direction: column;
gap: 8px;
margin-bottom: 16px;
}
.section-color-bar {
width: 40px;
height: 3px;
background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
border-radius: 2px;
flex-shrink: 0;
}
.section-title {
font-size: 16px;
font-weight: 600;
color: #333;
}
</style>

Write Preview
Loading…
Cancel
Save