首页修改

src/views/main/abnormal/index.vue

@@ -1,9 +1,42 @@
 <template>
-  <div></div>
+  <div>
+    <el-collapse>
+      <el-collapse-item title="一致性 Consistency" name="1">
+        <template #title>
+          <title-item
+            :data="{
+              name: 'name',
+              school: 'school',
+              message: 'message'
+            }"
+          />
+        </template>
+        <div>与现实生活一致：与现实生活的流程、逻辑保持一致，遵循用户习惯的语言和概念；</div>
+        <div>在界面中一致：所有的元素和结构需保持一致，比如：设计样式、图标和文本、元素的位置等。</div>
+      </el-collapse-item>
+      <div>21312312</div>
+      <el-collapse-item title="反馈 Feedback" name="2">
+        <div>控制反馈：通过界面样式和交互动效让用户可以清晰的感知自己的操作；</div>
+        <div>页面反馈：操作后，通过页面元素的变化清晰地展现当前状态。</div>
+      </el-collapse-item>
+      <el-collapse-item title="效率 Efficiency" name="3">
+        <div>简化流程：设计简洁直观的操作流程；</div>
+        <div>清晰明确：语言表达清晰且表意明确，让用户快速理解进而作出决策；</div>
+        <div>帮助用户识别：界面简单直白，让用户快速识别而非回忆，减少用户记忆负担。</div>
+      </el-collapse-item>
+      <el-collapse-item title="可控 Controllability" name="4">
+        <div>用户决策：根据场景可给予用户操作建议或安全提示，但不能代替用户进行决策；</div>
+        <div>结果可控：用户可以自由的进行操作，包括撤销、回退和终止当前操作等。</div>
+      </el-collapse-item>
+    </el-collapse>
+  </div>
 </template>
 <script>
+import title from './title'
 export default {
-
+  components: {
+    'title-item': title
+  }
 }
 </script>
 <style lang="less" scoped>

src/views/main/abnormal/title.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="title">
+    <div v-if="type == 'philharmonic'">
+      <span>{{data.name}}</span>
+      <span>{{data.school}}</span>
+      <span><b>{{data.message}}</b></span>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    type: {
+      type: String,
+      default: 'philharmonic'
+    },
+    data: {
+      type: Object,
+      default: {}
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+.title{
+  >div{
+    position: relative;
+    padding-left: 20px;
+    font-size: 14px;
+    &:before{
+      content: '';
+      display: block;
+      position: absolute;
+      width: 5px;
+      background-color: #F56C6C;
+      height: 48px;
+      left: 0;
+    }
+    >span{
+      margin-right: 10px;
+      display: inline-block;
+    }
+  }
+}
+</style>

src/views/main/baseinfo/index.vue

@@ -1,22 +1,22 @@
 <template>
   <div class="container">
     <el-row class="rows" :gutter="20">
-      <el-col :sm="24" :md="12" :span="7">
+      <el-col :xs="24" :sm="24" :md="12" :span="7">
         <operate/>
       </el-col>
-      <el-col :sm="24" :md="12" :span="7">
+      <el-col :xs="24" :sm="24" :md="12" :span="7">
         <business/>
       </el-col>
-      <el-col :md="24" :span="10">
+      <el-col :xs="24" :sm="24" :md="24" :span="10">
         <management/>
       </el-col>
-      <el-col :sm="24" :md="12" :span="7">
+      <el-col :xs="24" :sm="24" :md="12" :span="7">
         <hrdata/>
       </el-col>
-      <el-col :sm="24" :md="12" :span="7">
+      <el-col :xs="24" :sm="24" :md="12" :span="7">
         <student/>
       </el-col>
-      <el-col :md="24" :span="10">
+      <el-col :xs="24" :sm="24" :md="24" :span="10">
         <curriculum/>
       </el-col>
     </el-row>

src/views/main/index.vue

@@ -8,6 +8,9 @@
         <el-tab-pane lazy label="基本信息" name="baseinfo">
           <baseinfo/>
         </el-tab-pane>
+        <el-tab-pane lazy label="异常处理" name="abnormal">
+          <abnormal/>
+        </el-tab-pane>
       </tab-router>
     </div>
   </div>
@@ -15,10 +18,12 @@
 <script>
 import { getIndex } from '@/api/user'
 import baseinfo from './baseinfo'
+import abnormal from './abnormal'
 export default {
   name: 'Main',
   components: {
-    baseinfo
+    baseinfo,
+    abnormal,
   },
   data () {
     return {