081700

src/router/systemRouter.js

@@ -39,6 +39,13 @@ const routes = [
 		meta: {
 			title: "重置密码"
 		}
+	},
+	{
+		path: "/result",
+		component: () => import(/* webpackChunkName: "resetPassword" */ '@/views/login/result'),
+		meta: {
+			title: "检测报告"
+		}
 	}
 ]
 

src/views/login/result.vue

@@ -0,0 +1,77 @@
+<template>
+    <el-container class="flex-column">
+        <el-main class="nopadding">
+            <el-card header="衣服检测报告" shadow="never">
+                <template #header>
+                    <div class="card-title">衣服检测报告</div>
+                </template>
+                <div class="resp-body">
+                    <div class="question-body">
+                        <div class="question-title">检测衣物</div>
+                        <div class="resp-qestion">
+                            <img class="logo" src="img/1.jpg">
+                            <img class="logo" src="img/2.jpg">
+                        </div>
+                    </div>
+                    <div class="question-body">
+                        <div class="question-title">检测结果</div>
+                        <div class="resp-answer">
+                            <el-table :data="tableData" style="width: 100%;" border>
+                                <el-table-column fixed prop="type" label="问题类型" width="150"></el-table-column>
+                                <el-table-column fixed prop="remark" label="问题说明" width="200"></el-table-column>
+                                <el-table-column fixed prop="chengdu" label="严重程度" width="100" align="center"></el-table-column>
+                                <el-table-column fixed prop="img" label="问题标记" width="200">
+                                    <template #default="scope">
+                                        <el-image :src="scope.row.img" style="width: 80px;" fit="fit"></el-image>
+                                    </template>
+                                </el-table-column>
+                            </el-table>
+                        </div>
+                    </div>
+                    <div class="question-body">
+                        <div class="question-title">检测总结</div>
+                        <div class="resp-qestion red">图1正面左侧腹部偏上有黑点，偏下有黄褐污渍；图2袖口及下摆有磨损脏迹。</div>
+                    </div>
+                </div>
+            </el-card>
+        </el-main>
+    </el-container>
+</template>
+
+<script>
+export default {
+    data(){
+        return {
+            tableData:[
+                {
+                    type:"微小点状污渍",
+                    remark:"衣物正面左侧（腹部偏上位置），有一处微小的黑色/深褐色点状痕迹。",
+                    chengdu:"中",
+                    img:"img/1-mark.png"
+                },
+                {
+                    type:"明显大面积污渍",
+                    remark:"衣物正面左侧（腹部偏下位置），有一块明显的淡黄色/褐色液体干涸污渍。",
+                    chengdu:"高",
+                    img:"img/1-mark.png"
+                },
+                {
+                    type:"边缘磨损脏迹",
+                    remark:"袖口魔术贴附近及下摆边缘有轻微的灰黑色磨损脏迹。",
+                    chengdu:"低",
+                    img:"img/2-mark.png"
+                }
+            ]
+        }
+    }
+}
+</script>
+
+<style>
+.card-title{border-bottom: 1px solid #f8f8f8;padding-bottom: 10px;}
+.resp-qestion{display: flex;align-items: center;gap: 5px;}
+.resp-qestion img{width: 100px;height: 100px;border-radius: 10px;}
+.question-title{font-size: 14px;color: #333;margin-right: 10px;}
+.question-body{display: flex;margin-bottom: 10px;}
+.red{color: red;}
+</style>