|
|
@@ -0,0 +1,327 @@
|
|
|
+<template>
|
|
|
+ <view class="page-container">
|
|
|
+ <!-- 页面头部 -->
|
|
|
+ <view class="page-header">
|
|
|
+ <text class="page-title">宿舍卫生检查</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 主要内容区域 -->
|
|
|
+ <view class="main-content">
|
|
|
+ <!-- 功能卡片区域 -->
|
|
|
+ <view class="function-cards">
|
|
|
+ <!-- 检查记录 -->
|
|
|
+ <view class="function-card" @click="handleCheckRecord">
|
|
|
+ <view class="card-icon">
|
|
|
+ <u-icon name="list" size="32" color="#1890ff" />
|
|
|
+ </view>
|
|
|
+ <view class="card-content">
|
|
|
+ <text class="card-title">检查记录</text>
|
|
|
+ <text class="card-desc">查看历史检查记录</text>
|
|
|
+ </view>
|
|
|
+ <view class="card-arrow">
|
|
|
+ <u-icon name="arrow-right" size="20" color="#999" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 新增检查 -->
|
|
|
+ <view class="function-card" @click="handleAddCheck">
|
|
|
+ <view class="card-icon">
|
|
|
+ <u-icon name="plus-circle" size="32" color="#52c41a" />
|
|
|
+ </view>
|
|
|
+ <view class="card-content">
|
|
|
+ <text class="card-title">新增检查</text>
|
|
|
+ <text class="card-desc">创建新的卫生检查</text>
|
|
|
+ </view>
|
|
|
+ <view class="card-arrow">
|
|
|
+ <u-icon name="arrow-right" size="20" color="#999" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 统计报表 -->
|
|
|
+ <view class="function-card" @click="handleStatistics">
|
|
|
+ <view class="card-icon">
|
|
|
+ <u-icon name="chart" size="32" color="#fa8c16" />
|
|
|
+ </view>
|
|
|
+ <view class="card-content">
|
|
|
+ <text class="card-title">统计报表</text>
|
|
|
+ <text class="card-desc">查看检查统计数据</text>
|
|
|
+ </view>
|
|
|
+ <view class="card-arrow">
|
|
|
+ <u-icon name="arrow-right" size="20" color="#999" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 最近检查记录 -->
|
|
|
+ <view class="recent-section">
|
|
|
+ <view class="section-header">
|
|
|
+ <text class="section-title">最近检查</text>
|
|
|
+ <text class="section-more" @click="handleCheckRecord">查看更多</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="recent-list">
|
|
|
+ <view class="recent-item" v-for="(item, index) in recentChecks" :key="index">
|
|
|
+ <view class="item-left">
|
|
|
+ <text class="item-title">{{ item.dormitory }}</text>
|
|
|
+ <text class="item-time">{{ item.checkTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="item-right">
|
|
|
+ <view class="score-badge" :class="getScoreClass(item.score)">
|
|
|
+ <text class="score-text">{{ item.score }}分</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+export default {
|
|
|
+ name: 'DormHygieneCheck',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ recentChecks: [
|
|
|
+ {
|
|
|
+ dormitory: '1号楼101室',
|
|
|
+ checkTime: '2024-01-15 14:30',
|
|
|
+ score: 95
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dormitory: '2号楼203室',
|
|
|
+ checkTime: '2024-01-14 15:20',
|
|
|
+ score: 88
|
|
|
+ },
|
|
|
+ {
|
|
|
+ dormitory: '3号楼305室',
|
|
|
+ checkTime: '2024-01-13 16:10',
|
|
|
+ score: 92
|
|
|
+ }
|
|
|
+ ]
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ // 处理检查记录
|
|
|
+ handleCheckRecord() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '功能开发中',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理新增检查
|
|
|
+ handleAddCheck() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '功能开发中',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 处理统计报表
|
|
|
+ handleStatistics() {
|
|
|
+ uni.showToast({
|
|
|
+ title: '功能开发中',
|
|
|
+ icon: 'none',
|
|
|
+ duration: 2000
|
|
|
+ });
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取分数样式类
|
|
|
+ getScoreClass(score) {
|
|
|
+ if (score >= 90) return 'score-excellent';
|
|
|
+ if (score >= 80) return 'score-good';
|
|
|
+ if (score >= 70) return 'score-average';
|
|
|
+ return 'score-poor';
|
|
|
+ }
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page-container {
|
|
|
+ min-height: 100vh;
|
|
|
+ background-color: #f5f5f5;
|
|
|
+ padding: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-header {
|
|
|
+ margin-bottom: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.page-title {
|
|
|
+ font-size: 24px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.main-content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 20px;
|
|
|
+}
|
|
|
+
|
|
|
+.function-cards {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.function-card {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+ transition: all 0.3s ease;
|
|
|
+
|
|
|
+ &:active {
|
|
|
+ transform: scale(0.98);
|
|
|
+ box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.card-icon {
|
|
|
+ margin-right: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-content {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.card-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.card-desc {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #666;
|
|
|
+}
|
|
|
+
|
|
|
+.card-arrow {
|
|
|
+ margin-left: 8px;
|
|
|
+}
|
|
|
+
|
|
|
+.recent-section {
|
|
|
+ background: #ffffff;
|
|
|
+ border-radius: 12px;
|
|
|
+ padding: 16px;
|
|
|
+ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
|
+}
|
|
|
+
|
|
|
+.section-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 16px;
|
|
|
+}
|
|
|
+
|
|
|
+.section-title {
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.section-more {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #1890ff;
|
|
|
+ cursor: pointer;
|
|
|
+}
|
|
|
+
|
|
|
+.recent-list {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ gap: 12px;
|
|
|
+}
|
|
|
+
|
|
|
+.recent-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 12px 0;
|
|
|
+ border-bottom: 1px solid #f0f0f0;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ border-bottom: none;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.item-left {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.item-title {
|
|
|
+ font-size: 16px;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #333;
|
|
|
+ margin-bottom: 4px;
|
|
|
+}
|
|
|
+
|
|
|
+.item-time {
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+}
|
|
|
+
|
|
|
+.item-right {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+}
|
|
|
+
|
|
|
+.score-badge {
|
|
|
+ padding: 4px 12px;
|
|
|
+ border-radius: 16px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+}
|
|
|
+
|
|
|
+.score-excellent {
|
|
|
+ background-color: #f6ffed;
|
|
|
+ border: 1px solid #b7eb8f;
|
|
|
+}
|
|
|
+
|
|
|
+.score-good {
|
|
|
+ background-color: #e6f7ff;
|
|
|
+ border: 1px solid #91d5ff;
|
|
|
+}
|
|
|
+
|
|
|
+.score-average {
|
|
|
+ background-color: #fff7e6;
|
|
|
+ border: 1px solid #ffd591;
|
|
|
+}
|
|
|
+
|
|
|
+.score-poor {
|
|
|
+ background-color: #fff2f0;
|
|
|
+ border: 1px solid #ffccc7;
|
|
|
+}
|
|
|
+
|
|
|
+.score-text {
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 600;
|
|
|
+}
|
|
|
+
|
|
|
+.score-excellent .score-text {
|
|
|
+ color: #52c41a;
|
|
|
+}
|
|
|
+
|
|
|
+.score-good .score-text {
|
|
|
+ color: #1890ff;
|
|
|
+}
|
|
|
+
|
|
|
+.score-average .score-text {
|
|
|
+ color: #fa8c16;
|
|
|
+}
|
|
|
+
|
|
|
+.score-poor .score-text {
|
|
|
+ color: #f5222d;
|
|
|
+}
|
|
|
+</style>
|
