diff --git a/ruoyi-ui/src/assets/styles/index.scss b/ruoyi-ui/src/assets/styles/index.scss
index 73015cbc8..ce1738226 100644
--- a/ruoyi-ui/src/assets/styles/index.scss
+++ b/ruoyi-ui/src/assets/styles/index.scss
@@ -4,189 +4,230 @@
 @import './element-ui.scss';
 @import './sidebar.scss';
 @import './btn.scss';
+
 body {
-    height: 100%;
-    -moz-osx-font-smoothing: grayscale;
-    -webkit-font-smoothing: antialiased;
-    text-rendering: optimizeLegibility;
-    font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
+  height: 100%;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
 }
 
 label {
-    font-weight: 700;
+  font-weight: 700;
 }
 
 html {
-    height: 100%;
-    box-sizing: border-box;
+  height: 100%;
+  box-sizing: border-box;
 }
 
 #app {
-    height: 100%;
+  height: 100%;
 }
 
 *,
 *:before,
 *:after {
-    box-sizing: inherit;
+  box-sizing: inherit;
 }
 
 .no-padding {
-    padding: 0px !important;
+  padding: 0px !important;
 }
 
 .padding-content {
-    padding: 4px 0;
+  padding: 4px 0;
 }
 
 a:focus,
 a:active {
-    outline: none;
+  outline: none;
 }
 
 a,
 a:focus,
 a:hover {
-    cursor: pointer;
-    color: inherit;
-    text-decoration: none;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
 }
 
 div:focus {
-    outline: none;
+  outline: none;
 }
 
 .fr {
-    float: right;
+  float: right;
 }
 
 .fl {
-    float: left;
+  float: left;
 }
 
 .pr-5 {
-    padding-right: 5px;
+  padding-right: 5px;
 }
 
 .pl-5 {
-    padding-left: 5px;
+  padding-left: 5px;
 }
 
 .block {
-    display: block;
+  display: block;
 }
 
 .pointer {
-    cursor: pointer;
+  cursor: pointer;
 }
 
 .inlineBlock {
-    display: block;
+  display: block;
 }
 
 .clearfix {
-    &:after {
-        visibility: hidden;
-        display: block;
-        font-size: 0;
-        content: " ";
-        clear: both;
-        height: 0;
-    }
+  &:after {
+    visibility: hidden;
+    display: block;
+    font-size: 0;
+    content: " ";
+    clear: both;
+    height: 0;
+  }
 }
 
 aside {
-    background: #eef1f6;
-    padding: 8px 24px;
-    margin-bottom: 20px;
-    border-radius: 2px;
-    display: block;
-    line-height: 32px;
-    font-size: 16px;
-    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-    color: #2c3e50;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    a {
-        color: #337ab7;
-        cursor: pointer;
-        &:hover {
-            color: rgb(32, 160, 255);
-        }
+  background: #eef1f6;
+  padding: 8px 24px;
+  margin-bottom: 20px;
+  border-radius: 2px;
+  display: block;
+  line-height: 32px;
+  font-size: 16px;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
+  color: #2c3e50;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+
+  a {
+    color: #337ab7;
+    cursor: pointer;
+
+    &:hover {
+      color: rgb(32, 160, 255);
     }
+  }
 }
 
 //main-container全局样式
 .app-container {
-    padding: 20px;
+  padding: 20px;
 }
 
 .components-container {
-    margin: 30px 50px;
-    position: relative;
+  margin: 30px 50px;
+  position: relative;
 }
 
 .pagination-container {
-    margin-top: 30px;
+  margin-top: 30px;
 }
 
 .text-center {
-    text-align: center
+  text-align: center
 }
 
 .sub-navbar {
-    height: 50px;
-    line-height: 50px;
-    position: relative;
-    width: 100%;
-    text-align: right;
-    padding-right: 20px;
-    transition: 600ms ease position;
-    background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
-    .subtitle {
-        font-size: 20px;
-        color: #fff;
-    }
-    &.draft {
-        background: #d0d0d0;
-    }
-    &.deleted {
-        background: #d0d0d0;
-    }
+  height: 50px;
+  line-height: 50px;
+  position: relative;
+  width: 100%;
+  text-align: right;
+  padding-right: 20px;
+  transition: 600ms ease position;
+  background: linear-gradient(90deg, rgba(32, 182, 249, 1) 0%, rgba(32, 182, 249, 1) 0%, rgba(33, 120, 241, 1) 100%, rgba(33, 120, 241, 1) 100%);
+
+  .subtitle {
+    font-size: 20px;
+    color: #fff;
+  }
+
+  &.draft {
+    background: #d0d0d0;
+  }
+
+  &.deleted {
+    background: #d0d0d0;
+  }
 }
 
 .link-type,
 .link-type:focus {
-    color: #337ab7;
-    cursor: pointer;
-    &:hover {
-        color: rgb(32, 160, 255);
-    }
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
 }
 
 .link-dayflow,
 .link-dayflow:focus {
-    color: #337ab7;
-    cursor: pointer;
-    &:hover {
-        color: rgb(32, 160, 255);
-    }
+  color: #337ab7;
+  cursor: pointer;
+
+  &:hover {
+    color: rgb(32, 160, 255);
+  }
 }
 
 .filter-container {
-    padding-bottom: 10px;
-    .filter-item {
-        display: inline-block;
-        vertical-align: middle;
-        margin-bottom: 10px;
-    }
+  padding-bottom: 10px;
+
+  .filter-item {
+    display: inline-block;
+    vertical-align: middle;
+    margin-bottom: 10px;
+  }
 }
 
 //refine vue-multiselect plugin
 .multiselect {
-    line-height: 16px;
+  line-height: 16px;
 }
 
 .multiselect--active {
-    z-index: 1000 !important;
+  z-index: 1000 !important;
+}
+
+.flex {
+  display: flex;
+
+  &.center {
+    align-items: center;
+    justify-content: center;
+  }
+
+  &.align-center {
+    align-content: center;
+  }
+
+  &.justify-center {
+    justify-content: center;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+}
+
+ul,
+p {
+  margin: 0;
+  padding: 0;
+}
+
+ul,
+li {
+    list-style: none;
 }
\ No newline at end of file
diff --git a/ruoyi-ui/src/views/benyi/assessment/student.vue b/ruoyi-ui/src/views/benyi/assessment/student.vue
index 4bd85cc61..4a0806d0b 100644
--- a/ruoyi-ui/src/views/benyi/assessment/student.vue
+++ b/ruoyi-ui/src/views/benyi/assessment/student.vue
@@ -1,6 +1,22 @@
 <template>
   <div class="app-container">
-    <el-table
+    <div class="flex align-center justify-between">
+      <p class="title flex align-center">
+        <span>姓名：张三 </span>
+        <span>出生日期：男 </span>
+        <span>班级：圆圆班 </span>
+         <span>学期：2020-2021 </span>
+         <span>班长：2021 </span>
+      </p>
+      <el-button
+        type="primary"
+        icon="el-icon-s-data"
+        size="mini"
+        @click="submitForm"
+        >生成图表</el-button
+      >
+    </div>
+    <!-- <el-table
       v-loading="loading"
       :data="assessmentcontentList"
       row-key="id"
@@ -10,12 +26,72 @@
       <el-table-column prop="name" label="评估内容"></el-table-column>
       <el-table-column label="是否达标" align="center">
         <template slot-scope="scope">
-          <el-checkbox v-if="scope.row.iselement == 'Y'" v-model="checked"
+          <el-checkbox
+            v-if="scope.row.iselement == 'Y'"
+            v-model="checkedValues"
+            @change="handleSelectionChange"
             >是</el-checkbox
           >
         </template>
       </el-table-column>
-    </el-table>
+    </el-table> -->
+    <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
+      <el-tab-pane label="健康" name="first">
+        <div class="block">
+          <h2 class="block-item-title flex align-center">身心状况</h2>
+          <ul class="block-content">
+            <li>
+              <p class="block-content-title">
+                <span class="num">1. </span>具有健康的体态
+              </p>
+              <div class="checkbox-content">
+                <p class="checkbox-item flex align-center">
+                  <el-checkbox v-model="checked">身高和体重适宜</el-checkbox>
+                </p>
+                <div class="check-info">
+                  参考标准：
+                  <p>男孩：身高：94.9-111.7厘米，体重：12.7-21.2公斤</p>
+                  <p>女孩：身高：94.1-111.3厘米，体重：12.3-21.5公斤</p>
+                </div>
+              </div>
+              <div class="checkbox-content">
+                <p class="checkbox-item flex align-center">
+                  <el-checkbox v-model="checked"
+                    >在提醒下能自然坐直、站直</el-checkbox
+                  >
+                </p>
+                <div class="check-info"></div>
+              </div>
+            </li>
+            <li>
+              <p class="block-content-title">
+                <span class="num">2. </span>情绪安定愉快
+              </p>
+              <div class="checkbox-content">
+                <p class="checkbox-item flex align-center">
+                  <el-checkbox v-model="checked"
+                    >情绪比较稳定，很少因一点小事哭闹不止</el-checkbox
+                  >
+                </p>
+                <div class="check-info"></div>
+              </div>
+              <div class="checkbox-content">
+                <p class="checkbox-item flex align-center">
+                  <el-checkbox v-model="checked"
+                    >有比较强烈的情绪反应时，能在成人的安抚下逐渐平静下来</el-checkbox
+                  >
+                </p>
+                <div class="check-info"></div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </el-tab-pane>
+      <el-tab-pane label="语言" name="second">配置管理</el-tab-pane>
+      <el-tab-pane label="社会" name="third">角色管理</el-tab-pane>
+      <el-tab-pane label="科学" name="fourth">定时任务补偿</el-tab-pane>
+      <el-tab-pane label="艺术" name="five">定时任务补偿</el-tab-pane>
+    </el-tabs>
   </div>
 </template>
 <script>
@@ -33,15 +109,11 @@ export default {
 
   data() {
     return {
-      checked: true,
+      checkedValues: [],
       // 遮罩层
       loading: true,
       // 选中数组
       ids: [],
-      // 非单个禁用
-      single: true,
-      // 非多个禁用
-      multiple: true,
       // 评估内容表格数据
       assessmentcontentList: [],
       // 查询参数
@@ -52,6 +124,8 @@ export default {
         scope: undefined,
         sort: undefined,
       },
+      activeName: "first",
+      checked: false,
     };
   },
   created() {
@@ -76,6 +150,15 @@ export default {
       this.resetForm("queryForm");
       this.handleQuery();
     },
+    // 多选框选中数据
+    handleSelectionChange(row) {},
+    /** 提交按钮 */
+    submitForm: function () {
+      console.log("checkedValues:" + this.checkedValues);
+    },
+    handleClick(tab) {
+      // this.activeName = tab
+    },
   },
 };
 </script>
@@ -89,4 +172,65 @@ div {
   -ms-user-select: none;
   user-select: none;
 }
+.title {
+  padding: 10px 0;
+  font-weight: 600;
+  span {
+    font-size: 16px;
+    padding: 2px;
+    // &:nth-of-type(2) {
+    //   font-size: 14px;
+    //   font-weight: normal;
+    // }
+  }
+}
+.block {
+  padding: 10px;
+  color: #333;
+  .block-item-title {
+    padding: 10px 0;
+    margin: 0;
+    font-size: 16px;
+    font-weight: 500;
+    &::before {
+      content: "";
+      margin-right: 8px;
+      width: 4px;
+      height: 14px;
+      background: #1890ff;
+    }
+  }
+
+  .block-content {
+    border-radius: 5px;
+    padding: 10px;
+    background: #fcfcfc;
+    .block-content-title {
+      font-size: 14px;
+      font-weight: bold;
+      line-height: 24px;
+      padding-bottom: 5px;
+      .num {
+        font-size: 16px;
+      }
+    }
+    .checkbox-content {
+      padding-left: 20px;
+      margin-bottom: 15px;
+    }
+    .checkbox-item {
+      font-size: 14px;
+      line-height: 22px;
+    }
+    .check-info {
+      padding-left: 24px;
+      line-height: 18px;
+      font-size: 12px;
+      color: #999;
+      p {
+        padding-left: 10px;
+      }
+    }
+  }
+}
 </style>
\ No newline at end of file