增加commit信息框的滚轮

src/views/DevGroupPage.vue

@@ -63,9 +63,9 @@
 
         <el-card class="box-innercard">
           <div slot="header" class="clearfix">
-            <span>commit具体信息</span>
+            <span>commit具体信息（可下滑查看）</span>
           </div>
-          <el-descriptions :column="1" :colon="false">
+          <el-descriptions :column="1" :colon="false" class="nui-scroll">
             <template v-for="item in commitMessage.commit_msg_overview">
               <el-descriptions-item :key="item">{{
                 item
@@ -348,6 +348,51 @@ export default {
 </script>
 
 <style scoped>
+  .nui-scroll {
+    margin-top: 5px;
+    width: 915px;
+    height: 300px;
+    overflow: auto;
+  }
+
+  .nui-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  /*正常情况下滑块的样式*/
+
+  .nui-scroll::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .05);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*鼠标悬浮在该类指向的控件上时滑块的样式*/
+
+  .nui-scroll:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .2);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*鼠标悬浮在滑块上时滑块的样式*/
+
+  .nui-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, .4);
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*正常时候的主干部分*/
+
+  .nui-scroll::-webkit-scrollbar-track {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+    background-color: white;
+  }
+  /*鼠标悬浮在滚动条上的主干部分*/
+
+  .nui-scroll::-webkit-scrollbar-track:hover {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
+    background-color: rgba(0, 0, 0, .01);
+  }
+
 .box-innercard {
   /* background-color: #F0F2F5; */
 }

src/views/DevStudentPage.vue

@@ -10,7 +10,7 @@
         <el-descriptions-item label="姓名">{{
           user.name
         }}</el-descriptions-item>
-        <el-descriptions-item label="学号">{{
+        <el-descriptions-item label="用户id">{{
           user.userId
         }}</el-descriptions-item>
         <el-descriptions-item label="电子邮箱">{{
@@ -55,9 +55,9 @@
 
       <el-card class="box-innercard">
         <div slot="header" class="clearfix">
-          <span>commit具体信息</span>
+          <span>commit具体信息（可下滑查看）</span>
         </div>
-        <el-descriptions :column="1" :colon="false">
+        <el-descriptions :column="1" :colon="false" class="nui-scroll">
           <template v-for="item in commitMessage.commit_msg_overview">
             <el-descriptions-item :key="item">{{ item }}</el-descriptions-item>
           </template>
@@ -337,4 +337,48 @@ export default {
 </script>
 
 <style scoped>
+  .nui-scroll {
+    margin-top: 5px;
+    width: 915px;
+    height: 300px;
+    overflow: auto;
+  }
+
+  .nui-scroll::-webkit-scrollbar {
+    width: 8px;
+    height: 8px;
+  }
+  /*正常情况下滑块的样式*/
+
+  .nui-scroll::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .05);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*鼠标悬浮在该类指向的控件上时滑块的样式*/
+
+  .nui-scroll:hover::-webkit-scrollbar-thumb {
+    background-color: rgba(0, 0, 0, .2);
+    border-radius: 10px;
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*鼠标悬浮在滑块上时滑块的样式*/
+
+  .nui-scroll::-webkit-scrollbar-thumb:hover {
+    background-color: rgba(0, 0, 0, .4);
+    -webkit-box-shadow: inset 1px 1px 0 rgba(0, 0, 0, .1);
+  }
+  /*正常时候的主干部分*/
+
+  .nui-scroll::-webkit-scrollbar-track {
+    border-radius: 10px;
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0);
+    background-color: white;
+  }
+  /*鼠标悬浮在滚动条上的主干部分*/
+
+  .nui-scroll::-webkit-scrollbar-track:hover {
+    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .4);
+    background-color: rgba(0, 0, 0, .01);
+  }
 </style>