Merge branch 'develop3.0' of http://106.12.23.251:10080/TEAMMODEL/TEAMModelOS into develop3.0

TEAMModelOS/ClientApp/package.json

@@ -55,6 +55,7 @@
 		"vue-apexcharts": "^1.6.0",
 		"vue-audio-native": "^0.1.41",
 		"vue-axios": "^2.1.5",
+		"v-calendar": "^1.0.8",
 		"vue-ckeditor5": "^0.4.1",
 		"vue-count-to": "^1.0.13",
 		"vue-echarts": "^5.0.0-beta.0",

TEAMModelOS/ClientApp/src/access/index.js

@@ -3,24 +3,22 @@ import Vue from 'vue';
 import { User } from '../service/User';
 
 Vue.use(VueAccessControl, {
-    globalMiddleware: ['login?'], // 定义默认的中间件
-    vueRouter: true,
-    loginRoute: { // 登入路由
-        path: '/login'
-      },
-    // globalMiddleWares: ['login'],
-    // foreignKeyName: 'user_id',
-    // notLoginRoleName: 'Guest',
-    permissionDenyRedirectRoute: {  // 權限拒絕重定向路由
-      path: '/404'
-    },
-    defaultRoute: {  // 基本路由
-      path: '/home'
-    },
+  vueRouter: true,
+  globalMiddleWares: ['login?'], // 定义默认的中间件
+  loginRoute: { // 登入路由
+    path: '/login'
+  },
+  // permissionDenyRedirectRoute: {  // 權限拒絕重定向路由
+  //   path: '404'
+  // },
+  // defaultRoute: {  // 基本路由
+  //   name: 'home'
+  // },
 });
 
+
 LoginMiddleware.handleExtend = function(next, ...arg) {
-  let token = localStorage.getItem('access_token')
+  let identity = localStorage.getItem('identity')
   let toNextPath = arg[1].path
   let userAccess, userInfo
 
@@ -33,9 +31,9 @@ LoginMiddleware.handleExtend = function(next, ...arg) {
   
   if (userAccess && userInfo) {
     if(toNextPath === '/login' && userAccess.isLogin){
-      window.location.href = '/home'
+      window.location.href = identity == 'student' ? '/studentWeb' : '/home'
     } else {
-      User.freshLogin(token).then(() => {
+      User.freshLogin().then(() => {
         next(true);
       }).catch(() => {
         next(false);
@@ -47,8 +45,8 @@ LoginMiddleware.handleExtend = function(next, ...arg) {
 };
 
 const access = new VueAccessControl.Access({
-    routes: []
-    //routes: AsyncTeacherRoute.concat(AsyncStudentRoute),
+  routes: []
+  //routes: AsyncTeacherRoute.concat(AsyncStudentRoute),
 });
   
 

TEAMModelOS/ClientApp/src/api/login.js

@@ -121,7 +121,7 @@ export default {
       await this.studLoginbyIES(data).then( res => {
         // 儲存大雲Token
         localStorage.setItem("auth_token", res.auth_token)
-        store.dispatch('user/setSchoolCode', data.schoolCode)
+        store.dispatch('user/setSchoolCode', data.school_code)
         // store.dispatch('user/setStudentProfile', res) // 暫時註解 要是有再補寫
         result = res
       })

TEAMModelOS/ClientApp/src/api/newData.js

@@ -77,7 +77,7 @@ for (var j = 1; j <= 70; j++) {
     });
     previewMission.push(previewMissionContent);
   }
-  //評量的資料
+  //評量的資料，與問卷的假資料共用
   var lessonTestQAs = [];
   for (let p = 1; p <= 10; p++) {
     var lessonTestQAContent = Mock.mock({
@@ -151,6 +151,8 @@ for (var j = 1; j <= 70; j++) {
     pptAttachement: "Attachement",
   });
 
+  
+
   //活動項目匯集
   var eventItem = Mock.mock({
     "eventSubject|1": ["國文", "數學", "英文", "綜合學科"], //所屬科目
@@ -187,6 +189,7 @@ for (var j = 1; j <= 70; j++) {
       "公告",
       "教師私訊",
       "Hiteach電子筆記",
+      "問卷"
     ],
 
     previewMission: function() {
@@ -210,6 +213,9 @@ for (var j = 1; j <= 70; j++) {
     hiteachPPT: function() {
       if (this.eventType == "Hiteach電子筆記") return hiteachPPT;
     },
+    qesNaire: function() {
+      if (this.eventType == "問卷") return lessonTestQAs;
+    },
   });
   eventList.push(eventItem);
 }

TEAMModelOS/ClientApp/src/api/newDataEn.js

@@ -0,0 +1,228 @@
+import { Random } from "mockjs";
+
+//----------
+// 使用 Mock 測試
+
+// ES Modules syntax
+import fetch from "node-fetch";
+global.fetch = fetch;
+
+var Mock = require("mockjs");
+
+//課程清單
+var courseList = [];
+
+for (var i = 1; i <= 50; i++) {
+  //課程清單資料
+  var students = [];
+  for (let p = 1; p <= 38; p++) {
+    let studentsData = Mock.mock({
+      name: Random.name(),
+      group: Random.integer(1, 5),
+      "isUploadHomework|1": true, //一個是否有交作業的參數，同學互評使用
+      "isGivenComment|1": true, //一個是否有被給評的參數，同學互評使用
+    });
+    students.push(studentsData); //學生名單資料
+  }
+  var courseItem = Mock.mock({
+    "courseType|1": ["表定", "臨時"],
+    courseName: Random.title(12, 15),
+    courseID: Random.id(), //課程代碼
+    courseAddDate: Random.date('2020.01.dd'), //加入課程的日期
+    "courseSubject|1": ["國文", "英文", "數學"],
+    //tab1 基本資料
+    attendTime: "WED " + Random.time("HH:00"), //上課時間
+    classroom: "classroom A" + Random.integer(60, 70), //上課地點
+    teacher: Random.name(), //授課教師
+    assistantTeachers: [Random.name(), Random.name(), Random.name()], //授課教師
+
+    //tab2 課程概述
+    courseDesc: Random.paragraph(17, 27), //課程描述
+
+    //tab3 學生名單
+    students: students,
+  });
+  courseList.push(courseItem);
+}
+//活動清單
+var eventList = [];
+for (var j = 1; j <= 70; j++) {
+  //課前預習的資料
+  var previewMission = [];
+  var unitQAs = [];
+  for (let p = 1; p <= 5; p++) {
+    for (let p = 1; p <= 5; p++) {
+      var unitQAContent = Mock.mock({
+        qNo: p,
+        qDes: Random.paragraph(1, 2) + "?",
+        "qType|1": ["單選", "多選", "填充", "判斷"],
+        "isOptionImg|1": true,
+        ansOptions: ["A", "B", "C", "D", "E"],
+        ansOptionsImg: "imgs",
+        "correctAns|1": ["A", "B", "C", "D", "E"],
+        qKeypoint: Random.title(), //問題知識點
+        qAnalysis: Random.title(), //問題解析
+      });
+      unitQAs.push(unitQAContent);
+    }
+
+    let previewMissionContent = Mock.mock({
+      unit: p,
+      unitName: Random.title(10, 20),
+      unitDes: Random.paragraph(1, 2),
+      tutorial1: "a.img",
+      tutorial2: "b.pdf",
+      tutorial3: "youtubeLink",
+      unitQAs: unitQAs,
+    });
+    previewMission.push(previewMissionContent);
+  }
+  //評量的資料
+  var lessonTestQAs = [];
+  for (let p = 1; p <= 10; p++) {
+    var lessonTestQAContent = Mock.mock({
+      qNo: p,
+      qDes: Random.paragraph(1, 8) + "?",
+      "qType|1": ["單選", "多選", "判斷", "填充"],
+      "qImg1|1-10": "https://source.unsplash.com/random/300x200/?water",
+      "qImg2|1-10": "https://source.unsplash.com/random/300x200/?line",
+      ansOptions: ["A", "B", "C", "D", "E"],
+      ansDesc: [
+        Random.paragraph(1, 3),
+        Random.paragraph(1, 3),
+        Random.paragraph(1, 3),
+        Random.paragraph(1, 3),
+        Random.paragraph(1, 3),
+      ],
+      "haveImgAns|1-2": true,
+      "correctAns|1": ["A", "B", "C", "D", "E"],
+      qKeypoint: Random.title(), //問題知識點
+      qAnalysis: Random.title(), //問題解析
+    });
+    lessonTestQAs.push(lessonTestQAContent);
+  }
+
+  //作業的資料
+
+  //作業同學觀摩的資料
+
+  var homework = Mock.mock({
+    homeworkDes: Random.paragraph(1, 2),
+    homeworkAttachement: "Attachement",
+   
+  });
+
+  //投票的資料
+  var voteQA = Mock.mock({
+    qDes: Random.paragraph(1, 2) + "?",
+    "qType|1": ["單選", "多選"],
+    qImage: "img",
+    ansOptions: ["A", "B", "C", "D", "E"],
+    ansDesc: [
+      Random.paragraph(1, 3),
+      Random.paragraph(1, 3),
+      Random.paragraph(1, 3),
+      Random.paragraph(1, 3),
+      Random.paragraph(1, 3),
+    ],
+    ansOptionsImg: "imgs",
+  });
+
+  var vote = Mock.mock({
+    voteDes: Random.paragraph(6, 8),
+    voteAttachement: "Attachement",
+    voteQA: voteQA,
+  });
+
+  //教師公告的資料
+  var poster = Mock.mock({
+    posterTitle: Random.paragraph(1, 2),
+    posterDes: Random.paragraph(1, 8),
+    voteAttachement: "Attachement",
+  });
+
+  //教師私訊的資料
+  var teacherMessage = Mock.mock({
+    teacherMessage: Random.paragraph(11, 20),
+  });
+
+  //hiteach電子筆記的資料
+  var hiteachPPT = Mock.mock({
+    pptAttachement: "Attachement",
+  });
+
+  //活動項目匯集
+  var eventItem = Mock.mock({
+    "eventSubject|1": ["國文", "數學", "英文", "綜合學科"], //所屬科目
+   
+    eventID: Random.id(), //活動代碼,
+    eDes: Random.paragraph(9, 13),
+    eventName: Random.title(5, 12), //活動名稱
+    teacher: Random.name(), //授課教師
+    startTime: Random.date("2020.01.dd"), //開始日期
+    endTime: Random.date("2020.02.dd"), //結束日期
+    "img1|1-10": "https://source.unsplash.com/random/300x200/?water",
+    "img2|1-10": "https://source.unsplash.com/random/300x200/?line",
+    "allowRetryNow|1":true, //評量和作業允許補交
+    imgList: function() {
+      var imgList = [];
+      for (var i = 1; i <= 8; i++) {
+        //活動描述圖片的資料
+
+        var ImgItem = Mock.mock({
+          "img|1-10": "https://source.unsplash.com/random/300x200/?line",
+        });
+        imgList.push(ImgItem);
+      }
+      return imgList;
+    },
+
+    "isDone|1-2": true, //是否完成
+    "isOverEndTime|1-2": false, //是否超時
+    "eventType|1": [
+      "課前預習",
+      "投票",
+      "作業",
+      "評量",
+      "公告",
+      "教師私訊",
+      "Hiteach電子筆記",
+    ],
+
+    previewMission: function() {
+      if (this.eventType == "課前預習") return previewMission; //課前預習與自學來源相同
+    },
+    lessonTest: function() {
+      if (this.eventType == "評量") return lessonTestQAs;
+    },
+    homework: function() {
+      if (this.eventType == "作業") return homework;
+    },
+    vote: function() {
+      if (this.eventType == "投票") return vote;
+    },
+    poster: function() {
+      if (this.eventType == "公告") return poster;
+    },
+    teacherMessage: function() {
+      if (this.eventType == "教師私訊") return teacherMessage;
+    },
+    hiteachPPT: function() {
+      if (this.eventType == "Hiteach電子筆記") return hiteachPPT;
+    },
+  });
+  eventList.push(eventItem);
+}
+
+//物件按時間排序
+eventList = eventList.sort(function(a, b) {
+  return a.endTime < b.endTime ? 1 : -1;
+});
+courseList = courseList.sort(function(a, b) {
+  return a.courseAddDate < b.courseAddDate ? 1 : -1;
+});
+
+export default {
+  courseList,
+  eventList,
+};

TEAMModelOS/ClientApp/src/api/studentWeb.js

@@ -73,9 +73,11 @@ for (var i = 1; i <= 30; i++) {
 
         'rightAns|1': ['A', 'B', 'C', 'D'],
         'MyAns|1': ['A', 'B', 'C', 'D', ''],
-        'ansDesc': [Random.cparagraph(1, 3), Random.cparagraph(1, 3), Random.cparagraph(1, 3), Random.cparagraph(1, 3)],
+        'ansDesc': localStorage.getItem('lang')=='tw'?[Random.cparagraph(1, 3), Random.cparagraph(1, 3), Random.cparagraph(1, 3), Random.cparagraph(1, 3)]:[Random.paragraph(1, 3), Random.paragraph(1, 3), Random.paragraph(1, 3), Random.paragraph(1, 3)],
         'qtype|1': ['單選', '多選'],
-        'questionDesc': Random.cparagraph(1, 8),
+        'questionDesc': localStorage.getItem('lang')=='tw'?Random.cparagraph(1, 8):Random.paragraph(1, 8),
+        'relatedQ1': localStorage.getItem('lang')=='tw'?Random.cparagraph(1, 8):Random.paragraph(1, 8),
+        'relatedQ2': localStorage.getItem('lang')=='tw'?Random.cparagraph(1, 8):Random.paragraph(1, 8),
         "rightrate|1-100": 100,
         'img1|1-10': 'https://source.unsplash.com/random/300x200/?water',
         'img2|1-10': 'https://source.unsplash.com/random/300x200/?line',

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/app-nav.css

@@ -0,0 +1,307 @@
+.pixel {
+  background-color: #ececec;
+  font-size: 14px;
+  font-weight: bolder;
+  padding: 2px 10px;
+  top: -3px;
+  position: relative;
+  border-radius: 5px;
+}
+.dropdown:hover #info-pop {
+  display: block;
+  position: fixed;
+  border-radius: 8px;
+  background-color: #ffffff;
+  z-index: 9 !important;
+  top: 40px;
+  right: 10px;
+  width: 500px;
+  height: 380px;
+  box-shadow: 1px 12px 20px rgba(0, 0, 0, 0.3);
+}
+.dropdown:hover .info-pop-triangle {
+  position: absolute;
+  top: -10px;
+  right: 104px;
+  width: 0;
+  height: 0;
+  z-index: 10 !important;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent #ffffff transparent;
+}
+.dropdown #info-pop {
+  display: none;
+}
+.dropdown #info-pop .list {
+  width: 500px;
+}
+.dropdown #info-pop .teacher-name {
+  color: #24b880;
+  font-weight: bolder;
+}
+.dropdown #info-pop .info-pop-title {
+  color: #575757;
+  font-weight: bolder;
+  padding-left: 20px;
+  line-height: 32px;
+}
+.dropdown #info-pop .list-item-info {
+  margin-top: -1px;
+}
+.dropdown #info-pop .list-item-time {
+  margin-top: -1px;
+  margin-bottom: -10px;
+  color: #8f8787;
+  font-size: 12px;
+}
+.dropdown #info-pop .score-num {
+  position: relative;
+  font-weight: bolder;
+  top: -1px;
+  font-size: 18px;
+  color: #24b880;
+}
+.dropdown #info-pop .feedback-icon {
+  position: relative;
+  top: 4px;
+  left: 7px;
+  font-size: 24px !important;
+  color: #24b880;
+}
+.dropdown .info-badge {
+  height: 10px;
+  margin-top: 6px;
+  padding: 1px 5px;
+  background-color: #24b880 !important;
+  position: absolute;
+  right: 21px;
+  border-radius: 50%;
+  z-index: 12;
+}
+.dropdown .list-block {
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  margin-top: 0px;
+  width: 500px;
+  overflow: auto;
+}
+.dropdown .ivu-scroll-container {
+  height: 343px !important;
+  padding-bottom: 0px;
+  padding-top: 0px !important;
+  overflow: auto;
+}
+.dropdown .ivu-scroll-container .ivu-spin-text {
+  color: #24b880;
+  font-weight: bolder;
+}
+.dropdown .ivu-scroll-container .ivu-scroll-loader {
+  margin-top: -10px;
+}
+.profile-dropdown:hover #profile-pop {
+  display: block;
+  position: fixed;
+  border-radius: 4px;
+  background-color: #ffffff;
+  z-index: 9 !important;
+  top: 40px;
+  right: 10px;
+  width: 170px;
+  height: auto;
+  box-shadow: 1px 8px 20px rgba(0, 0, 0, 0.2);
+  padding: 2px 0px;
+}
+.profile-dropdown:hover .profile-pop-triangle {
+  position: absolute;
+  top: -10px;
+  right: 40px;
+  width: 0;
+  height: 0;
+  z-index: 10 !important;
+  border-style: solid;
+  border-width: 0 10px 10px 10px;
+  border-color: transparent transparent #fff transparent;
+}
+/***個人設定彈窗 */
+#profile-pop {
+  display: none;
+}
+#profile-pop .profile-pop-item {
+  cursor: pointer;
+  font-weight: bold;
+  padding: 5px 10px;
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+  color: #575757;
+}
+#profile-pop .profile-pop-item:hover {
+  background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
+  color: #03966a;
+  cursor: pointer;
+}
+#profile-pop .profileName {
+  margin: 0px 10px;
+  margin-bottom: -2px;
+  color: #03966a;
+}
+#profile-pop .profile-pop-itemIcon1 {
+  font-size: 18px;
+  font-weight: bolder;
+  position: relative;
+  top: 1px;
+  margin-right: 6px;
+}
+#profile-pop .profile-pop-itemIcon2 {
+  font-size: 18px;
+  font-weight: bolder;
+  position: relative;
+  top: 1px;
+  left: 2px;
+  margin-right: 6px;
+  -moz-transform: scaleX(-1);
+  -webkit-transform: scaleX(-1);
+  -o-transform: scaleX(-1);
+  transform: scaleX(-1);
+}
+.myNav {
+  position: fixed;
+  /* Set the navbar to fixed position */
+  top: 0px;
+  /* Position the navbar at the top of the page */
+  width: 100%;
+  /* Full width */
+  z-index: 10;
+}
+.myNav .ivu-menu-horizontal {
+  height: 44px !important;
+  padding-top: 4px;
+  line-height: 38px !important;
+  padding-bottom: 4px;
+}
+.myNav .ivu-menu-horizontal .ivu-menu-item {
+  float: right !important;
+  padding: 0px 20px !important;
+  border-bottom: 3px solid transparent !important;
+  bottom: 2px;
+}
+.myNav .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
+.myNav .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
+.myNav .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
+.myNav .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
+  color: #02b35a !important;
+  border-bottom: 3px solid #02b35a !important;
+  transition: 0.5s;
+  bottom: 2px;
+}
+.myNav .mytitle {
+  padding: 0rem 1rem;
+  color: #02b35a;
+  font-weight: bolder;
+  position: relative;
+  color: #24b880 !important;
+  font-size: 20px;
+  bottom: 1px !important;
+  margin-left: 0.1%;
+}
+.myNav .avatar-link {
+  float: right;
+  top: 10px;
+  margin: 0px 20px;
+  margin-right: 48px;
+  cursor: pointer;
+}
+.myNav .ivu-avatar.ivu-avatar-circle.ivu-avatar-image.ivu-avatar-default {
+  height: 24px !important;
+  width: 24px !important;
+  margin-top: -6px;
+}
+.sidebar-toggle {
+  padding: 0px 10px;
+  position: relative;
+  top: -3px;
+  left: 10px;
+}
+.sidebar-toggle .menu-icon {
+  color: #02b35a !important;
+  cursor: pointer;
+}
+.sidebar-toggle .menu-icon-close {
+  color: #696969 !important;
+}
+.myContent {
+  margin-top: 40px;
+}
+.tabIcon1 {
+  position: relative;
+  font-size: 24px;
+  padding-top: 4px;
+  left: 2px;
+  top: 2px;
+}
+.tabIcon2 {
+  position: relative;
+  font-size: 24px;
+  padding-top: 4px;
+  left: 3px;
+}
+.tabIcon3 {
+  position: relative;
+  font-size: 24px;
+  top: 2px;
+  padding-top: 4px;
+}
+.tabIcon4 {
+  position: relative;
+  font-size: 24px;
+  top: 0px;
+  left: 1px;
+  padding-top: 4px;
+}
+.menubar {
+  position: relative !important;
+}
+.addcoursebtn {
+  position: relative;
+  font-weight: bolder;
+  z-index: 20;
+  background-color: #64ae16;
+  color: white;
+  right: 20px;
+  top: 3px;
+  border: none;
+  outline: none;
+  border-radius: 4px ;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  padding: 3px 10px !important;
+  cursor: pointer;
+  line-height: 26px;
+  float: right;
+}
+.addcoursebtn:hover {
+  background-color: #4a8110;
+}
+.addcourseinput {
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+  line-height: 26px;
+  color: #24b880;
+  float: right;
+  top: 3px;
+  position: relative;
+  border: none;
+  outline: none;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 2px 10px;
+  right: 19px;
+  width: 200px;
+}
+.addcourseinput::placeholder {
+  color: #b3b3b3;
+}
+.clearinput {
+  float: right;
+  position: relative;
+  top: 0px;
+  right: -170px;
+  cursor: pointer;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/app-nav.less

@@ -0,0 +1,321 @@
+.pixel {
+  background-color: rgb(236, 236, 236);
+  font-size: 14px;
+  font-weight: bolder;
+  padding: 2px 10px;
+  top: -3px;
+  position: relative;
+  border-radius: 5px;
+}
+
+.dropdown {
+  &:hover {
+    #info-pop {
+      display: block;
+      position: fixed;
+      border-radius: 8px;
+      background-color: rgb(255, 255, 255);
+      z-index: 9 !important;
+      top: 40px;
+      right: 10px;
+      width: 500px;
+      height: 380px;
+      box-shadow: 1px 12px 20px rgba(0, 0, 0, 0.3);
+    }
+    .info-pop-triangle {
+      position: absolute;
+      top: -10px;
+      right: 104px;
+      width: 0;
+      height: 0;
+      z-index: 10 !important;
+      border-style: solid;
+      border-width: 0 10px 10px 10px;
+      border-color: transparent transparent #ffffff transparent;
+    }
+  }
+  #info-pop {
+    display: none;
+    .list {
+      width: 500px;
+    }
+    .teacher-name {
+      color: #24b880;
+      font-weight: bolder;
+    }
+    .info-pop-title {
+      color: #575757;
+      font-weight: bolder;
+      padding-left: 20px;
+      line-height: 32px;
+    }
+    .list-item-info {
+      margin-top: -1px;
+    }
+    .list-item-time {
+      margin-top: -1px;
+      margin-bottom: -10px;
+      color: #8f8787;
+      font-size: 12px;
+    }
+    .score-num {
+      position: relative;
+      font-weight: bolder;
+      top: -1px;
+      font-size: 18px;
+
+      color: #24b880;
+    }
+    .feedback-icon {
+      position: relative;
+      top: 4px;
+      left: 7px;
+      font-size: 24px !important;
+      color: #24b880;
+    }
+  }
+  .info-badge {
+    height: 10px;
+    margin-top: 6px;
+    padding: 1px 5px;
+    background-color: #24b880 !important;
+    position: absolute;
+    right: 21px;
+    border-radius: 50%;
+    z-index: 12;
+  }
+  .list-block {
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    margin-top: 0px;
+    width: 500px;
+
+    overflow: auto;
+  }
+
+  .ivu-scroll-container {
+    height: 343px !important;
+    padding-bottom: 0px;
+    padding-top: 0px !important;
+    overflow: auto;
+  }
+  .ivu-scroll-container .ivu-spin-text {
+    color: #24b880;
+    font-weight: bolder;
+  }
+  .ivu-scroll-container .ivu-scroll-loader {
+    margin-top: -10px;
+  }
+}
+.profile-dropdown {
+  &:hover {
+    #profile-pop {
+      display: block;
+      position: fixed;
+      border-radius: 4px;
+      background-color: rgb(255, 255, 255);
+      z-index: 9 !important;
+      top: 40px;
+      right: 10px;
+      width: 170px;
+      height: auto;
+      box-shadow: 1px 8px 20px rgba(0, 0, 0, 0.2);
+      padding: 2px 0px;
+    }
+    .profile-pop-triangle {
+      position: absolute;
+      top: -10px;
+      right: 40px;
+      width: 0;
+      height: 0;
+      z-index: 10 !important;
+      border-style: solid;
+      border-width: 0 10px 10px 10px;
+      border-color: transparent transparent #fff transparent;
+    }
+  }
+}
+/***個人設定彈窗 */
+#profile-pop {
+  display: none;
+  .profile-pop-item {
+    cursor: pointer;
+    font-weight: bold;
+    padding: 5px 10px;
+    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    color: #575757;
+    &:hover {
+      background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
+      color: #03966a;
+      cursor: pointer;
+    }
+  }
+  .profileName {
+    margin: 0px 10px;
+    margin-bottom: -2px;
+    color: #03966a;
+  }
+  .profile-pop-itemIcon1 {
+    font-size: 18px;
+    font-weight: bolder;
+    position: relative;
+    top: 1px;
+    margin-right: 6px;
+  }
+  .profile-pop-itemIcon2 {
+    font-size: 18px;
+    font-weight: bolder;
+    position: relative;
+    top: 1px;
+    left: 2px;
+    margin-right: 6px;
+    -moz-transform: scaleX(-1);
+    -webkit-transform: scaleX(-1);
+    -o-transform: scaleX(-1);
+    transform: scaleX(-1);
+  }
+}
+.myNav {
+  position: fixed; /* Set the navbar to fixed position */
+  top: 0px; /* Position the navbar at the top of the page */
+  width: 100%; /* Full width */
+  z-index: 10;
+  .ivu-menu-horizontal {
+    height: 44px !important;
+    padding-top: 4px;
+    line-height: 38px !important;
+    padding-bottom: 4px;
+    .ivu-menu-item {
+      float: right !important;
+      padding: 0px 20px !important;
+
+      border-bottom: 3px solid transparent !important;
+      bottom: 2px;
+    }
+  }
+  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item-active,
+  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-item:hover,
+  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu-active,
+  .ivu-menu-light.ivu-menu-horizontal .ivu-menu-submenu:hover {
+    color: rgb(2, 179, 90) !important;
+    border-bottom: 3px solid rgb(2, 179, 90) !important;
+    transition: 0.5s;
+    bottom: 2px;
+  }
+  .mytitle {
+    padding: 0rem 1rem;
+    color: rgb(2, 179, 90);
+    font-weight: bolder;
+    position: relative;
+    color: #24b880 !important;
+    font-size: 20px;
+    bottom: 1px !important;
+    margin-left: 0.1%;
+  }
+  .avatar-link {
+    float: right;
+    top: 10px;
+    margin: 0px 20px;
+    margin-right: 48px;
+    cursor: pointer;
+  }
+  .ivu-avatar.ivu-avatar-circle.ivu-avatar-image.ivu-avatar-default {
+    height: 24px !important;
+    width: 24px !important;
+    margin-top: -6px;
+  }
+}
+.sidebar-toggle {
+  padding: 0px 10px;
+  position: relative;
+  top: -3px;
+  left: 10px;
+  .menu-icon {
+    color: rgb(2, 179, 90) !important;
+    cursor: pointer;
+  }
+  .menu-icon-close {
+    color: rgb(105, 105, 105) !important;
+  }
+}
+
+.myContent {
+  margin-top: 40px;
+}
+.tabIcon1 {
+  position: relative;
+  font-size: 24px;
+  padding-top: 4px;
+  left: 2px;
+  top: 2px;
+}
+.tabIcon2 {
+  position: relative;
+  font-size: 24px;
+  padding-top: 4px;
+  left: 3px;
+}
+.tabIcon3 {
+  position: relative;
+  font-size: 24px;
+  top: 2px;
+  padding-top: 4px;
+}
+.tabIcon4 {
+  position: relative;
+  font-size: 24px;
+  top: 0px;
+  left: 1px;
+  padding-top: 4px;
+}
+.menubar{
+  position: relative !important;
+}
+.addcoursebtn{
+  position: relative;
+  font-weight: bolder;
+  z-index:20;
+  background-color: #64ae16;
+  color:white;
+  right:20px;
+  top:3px;
+  
+  border:none;
+  outline: none;
+  border-radius:4px ;
+  border-top-left-radius: 0px !important;
+  border-bottom-left-radius: 0px !important;
+  padding:3px 10px !important;
+  cursor: pointer;
+  line-height: 26px;
+  float: right;
+  &:hover{
+    background-color: Darken(#64ae16,10%);
+  }
+
+}
+.addcourseinput{
+  border-top-left-radius: 4px !important;
+  border-bottom-left-radius: 4px !important;
+  line-height: 26px;
+  color: #24b880;
+  &::placeholder {
+    color: rgb(179, 179, 179);
+  }
+  float: right;
+  top:3px;
+  position: relative;
+  border:none;
+  outline: none;
+  border:1px solid rgba(0, 0, 0,0.1);
+  padding: 2px 10px;
+  right:19px;
+  width: 200px
+  
+}
+.clearinput{
+  float: right;
+  position: relative;
+  top:0px;
+  right:-170px;
+  cursor: pointer;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/billboard-lightbox.css

@@ -15,6 +15,30 @@
   width: 40%;
   position: relative;
 }
+@media screen and (max-width: 991px) {
+  .lightboxImg {
+    margin-top: 20%;
+    width: 60%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .lightboxImg {
+    margin-top: 30%;
+    width: 60%;
+  }
+}
+@media screen and (max-width: 1366px) {
+  .lightboxImg {
+    margin-top: 10%;
+    width: 40%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .lightboxImg {
+    margin-top: 8%;
+    width: 54%;
+  }
+}
 .Imgtext {
   color: white;
   position: relative;
@@ -23,6 +47,16 @@
   left: 29.5%;
   font-weight: 900;
 }
+@media screen and (max-width: 991px) {
+  .Imgtext {
+    left: 19.5%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .Imgtext {
+    left: 22.5%;
+  }
+}
 .ImgCloseIcon {
   color: white;
   position: fixed;
@@ -52,32 +86,64 @@
   top: 40%;
   left: 25%;
 }
+@media screen and (max-width: 991px) {
+  .ImgleftBtn {
+    left: 10%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .ImgleftBtn {
+    left: 15%;
+  }
+}
 .ImgrightBtn {
   position: absolute;
   top: 40%;
   right: 26%;
 }
+@media screen and (max-width: 991px) {
+  .ImgrightBtn {
+    right: 10%;
+  }
+}
+@media screen and (max-width: 1280px) {
+  .ImgrightBtn {
+    right: 15%;
+  }
+}
+.dec {
+  margin-top: 10px;
+}
 .dec .referlink {
   color: #24b880;
   font-weight: 900;
 }
 .dec .referlink:hover {
-  color: #1a9163;
+  color: #1c8d62;
 }
 .dec li {
   list-style: none;
-  padding: 5px 0px;
   border-bottom: 1px solid rgba(128, 128, 128, 0.164);
 }
+@media screen and (max-width: 991px) {
+  .dec li {
+    padding: 10px 0px;
+  }
+}
 .dec li:last-child {
   border-bottom: none;
 }
 .dec li .referdoclink {
-  font-size: 16px;
-  line-height: 32px;
+  font-size: 14px;
+  line-height: 42px;
   color: #484848;
   font-weight: 400;
 }
+@media screen and (max-width: 991px) {
+  .dec li .referdoclink {
+    line-height: 20px;
+  }
+}
 .dec li .referdoclink:hover {
   color: #24b880;
 }
@@ -132,3 +198,8 @@
   justify-content: center;
   align-items: center;
 }
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .dec .decImglasthint {
+    padding-top: 16%;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/billboard-lightbox.less

@@ -1,3 +1,5 @@
+@import "color.less";
+
 //燈箱
 .lightBox {
   position: fixed !important;
@@ -17,6 +19,22 @@
   margin-left: 1.5%;
   width: 40%;
   position: relative;
+  @media screen and (max-width: 991px) {
+    margin-top: 20%;
+    width: 60%;
+  }
+  @media screen and (max-width: 767px) {
+    margin-top: 30%;
+    width: 60%;
+  }
+  @media screen and (max-width: 1366px) {
+    margin-top: 10%;
+    width: 40%;
+  }
+  @media screen and (max-width: 1280px) {
+    margin-top: 8%;
+    width: 54%;
+  }
 }
 .Imgtext {
   color: white;
@@ -24,6 +42,12 @@
   text-align: left;
   top: 0%;
   left: 29.5%;
+  @media screen and (max-width: 991px) {
+    left: 19.5%;
+  }
+  @media screen and (max-width: 1280px) {
+    left: 22.5%;
+  }
   font-weight: 900;
 }
 .ImgCloseIcon {
@@ -49,45 +73,60 @@
 }
 .ImgleftBtn:hover,
 .ImgrightBtn:hover {
-  background: #03966a;
+  background: @titleHover;
 }
 .ImgleftBtn {
   position: absolute;
   top: 40%;
   left: 25%;
+  @media screen and (max-width: 991px) {
+    left: 10%;
+  }
+  @media screen and (max-width: 1280px) {
+    left: 15%;
+  }
 }
 .ImgrightBtn {
   position: absolute;
   top: 40%;
   right: 26%;
+  @media screen and (max-width: 991px) {
+    right: 10%;
+  }
+  @media screen and (max-width: 1280px) {
+   right: 15%;
+  }
 }
 //描述與附件
 .dec {
+  margin-top:10px;
   .referlink {
-    color: #24b880;
+    color: @primary;
     font-weight: 900;
     &:hover {
-      color: #1a9163;
+      color: Darken(@primary,10%);
     }
   }
   li {
     list-style: none;
-
-    padding: 5px 0px;
+    @media screen and (max-width: 991px) {
+      padding: 10px 0px;
+    }
     border-bottom: 1px solid rgba(128, 128, 128, 0.164);
-    
+
     &:last-child {
       border-bottom: none;
     }
     .referdoclink {
-      font-size: 16px;
-      line-height: 32px;
+      font-size: 14px;
+      line-height: 42px;
       color: #484848;
       font-weight: 400;
-      &:hover{
-        color: #24b880;
-        
-      
+      @media screen and (max-width: 991px) {
+        line-height: 20px;
+      }
+      &:hover {
+        color: @primary;
       }
     }
     .docIcon {
@@ -100,7 +139,7 @@
   .decImgs {
     position: relative;
   }
-  .carouselImg{
+  .carouselImg {
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center;
@@ -111,7 +150,6 @@
     padding-bottom: 80%;
     border: none;
     border-radius: 4px;
-    
   }
   .decImg {
     background-repeat: no-repeat;
@@ -139,6 +177,9 @@
     color: rgb(255, 255, 255);
     font-size: 40px;
     padding-top: 22%;
+    @media screen and (max-width: 1280px)and (min-width: 992px){
+      padding-top: 16%;
+    }
     margin: auto;
     display: flex;
     justify-content: center;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/classmate-comment.less

@@ -1,3 +1,4 @@
+@import "color.less";
 .classmate-comment {
   
   table {
@@ -31,7 +32,7 @@
     }
   }
   .isUploadFile {
-    color: #24b880 !important;
+    color: @primary !important;
     cursor: pointer;
    
   }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/classmate-commentPages.css

@@ -3,7 +3,7 @@
   width: 100%;
   height: 100%;
   background-color: #fff;
-  z-index: 11;
+  z-index: 12;
   top: 0px;
   left: 0px;
 }
@@ -50,15 +50,16 @@
   cursor: pointer;
 }
 .classmates-commentPages .mates-content .mates-homework {
+  background-color: #ffffff;
   padding: 20px 4% 100px 4% !important;
   margin-top: 38px;
-  height: 95.9vh;
+  height: 100vh;
   overflow: auto;
   left: -16px;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .classmates-commentPages .mates-content .mates-homework {
-    padding: 20px 20px 100px 50px  !important;
+    padding: 20px 20px 100px 50px !important;
   }
 }
 .classmates-commentPages .mates-content .mates-homework .cannotPreview {
@@ -187,6 +188,17 @@
   height: 500px;
   border-radius: 4px;
 }
+.classmates-commentPages .multidocarea {
+  height: 510px;
+  overflow: scroll;
+}
+.classmates-commentPages .upload-item {
+  margin: 15px 0px !important;
+}
+.classmates-commentPages .upload-item .upload-item-name {
+  position: relative;
+  top: -5px !important;
+}
 .classmates-commentPages .upload-item:hover {
   background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
   color: #03966a;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/classmate-commentPages.less

@@ -1,22 +1,23 @@
+@import "color.less";
 .classmates-commentPages {
   position: fixed;
   width: 100%;
   height: 100%;
   background-color: #fff;
-  z-index: 11;
+  z-index: 12;
   top: 0px;
   left: 0px;
 
   .commentPages-title {
     background-color: rgb(255, 255, 255);
     position: fixed;
-    color: #24b880;
+    color: @primary;
     font-size: 20px;
     padding: 5px 15px;
 
     width: 100%;
     height: 38px;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    border-bottom: 1px solid @border;
     z-index: 16;
   }
   .logoutIcon {
@@ -42,23 +43,24 @@
     }
     .mates-list-item {
       &:hover {
-        background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-        color: #03966a;
+        background: @bgcHover;
+        color: @titleHover;
         cursor: pointer;
       }
     }
     .mate-selected {
-      background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-      color: #03966a;
+      background: @bgcHover;
+      color: @titleHover;
       cursor: pointer;
     }
     .mates-homework {
+      background-color: rgb(255, 255, 255);
       padding: 20px 4% 100px 4% !important;
-      @media screen and (max-width: 767px){
-        padding: 20px 20px 100px 50px  !important;
+      @media screen and (max-width: 991px) {
+        padding: 20px 20px 100px 50px !important;
       }
       margin-top: 38px;
-      height: 95.9vh;
+      height: 100vh;
       overflow: auto;
       left: -16px;
       .cannotPreview {
@@ -80,7 +82,6 @@
           }
           .uploadBtn {
             margin-top: 10px;
-           
           }
         }
       }
@@ -121,13 +122,13 @@
     .uploadTime {
       margin-top: 40px;
       text-align: right;
-      @media screen and (max-width: 767px){
+      @media screen and (max-width: 767px) {
         text-align: left;
         margin-top: 10px;
       }
     }
     .comment-btn {
-      background-color: #24b880;
+      background-color: @primary;
       color: white;
       border-radius: 2px;
       border: none;
@@ -160,8 +161,8 @@
         padding: 4px 20px;
         outline: none;
         cursor: pointer;
-        &:last-child{
-          margin-left:10px;
+        &:last-child {
+          margin-left: 10px;
         }
         &:active {
           background-color: darken(#d3d3d3, 10%);
@@ -177,23 +178,32 @@
         background-color: #64ae16;
         color: white;
       }
-      .hint-submit{
+      .hint-submit {
         font-weight: bolder;
-        background-color: #00ad6c;
+        background-color: @secondary;
         color: white;
       }
     }
   }
-  .uploadPPTarea{
-    border:none;
-   margin-bottom:10px;
-    height:500px;
-    border-radius:4px;
+  .uploadPPTarea {
+    border: none;
+    margin-bottom: 10px;
+    height: 500px;
+    border-radius: 4px;
+  }
+  .multidocarea {
+    height: 510px;
+    overflow: scroll;
   }
-  .upload-item{
-    &:hover{
-      background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-    color: #03966a;
+  .upload-item {
+    margin: 15px 0px !important;
+    .upload-item-name {
+      position: relative;
+      top: -5px !important;
+    }
+    &:hover {
+      background: @bgcHover;
+      color: @titleHover;
     }
   }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/color.less

@@ -0,0 +1,8 @@
+//常用色票
+@primary: #24b880; //回傳的狀態文字，標題段落的方框，分頁
+@secondary: #00ad6c; //標題類型的標記，編序教材附件按鈕
+@titleHover: #03966a;
+@titleMarkbgc:#dfdfdf;
+@bgcHover:linear-gradient(-0.75turn, #fafafa, #d4ede1); //各類項目的懸停與選中狀態
+@border:rgba(0, 0, 0, 0.1);
+

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/comment-list.css

@@ -0,0 +1,124 @@
+.comment-list {
+  background-color: #f1f1f1;
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  right: 0;
+  width: 25%;
+  height: 100%;
+  position: fixed;
+}
+@media screen and (max-width: 1280px) {
+  .comment-list {
+    width: 40%;
+  }
+}
+@media screen and (max-width: 991px) {
+  .comment-list {
+    width: 50%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .comment-list {
+    width: 100%;
+  }
+}
+.comment-list .title-rect-group {
+  position: fixed;
+  white-space: nowrap;
+  padding: 0px 20px;
+}
+.comment-list .closeIcon-wrap {
+  position: fixed;
+  width: 24px;
+  height: 24px;
+  right: 22px;
+  top: 75px;
+  z-index: 10;
+}
+.comment-list .closeIcon-wrap:hover {
+  cursor: pointer;
+}
+.comment-list .closeIcon-wrap .closeIcon {
+  font-size: 24px;
+}
+.comment-list .commentArea {
+  width: 100%;
+  padding: 10px;
+  margin-top: 2px;
+  background: rgba(63, 63, 63, 0.1);
+  border: none;
+  border-radius: 6px;
+  color: #444444;
+}
+.comment-list .commentArea:focus {
+  outline-color: #24b880;
+}
+.comment-list .commentBtn {
+  margin-top: 0px;
+  margin-left: 2px;
+  float: right;
+  width: auto;
+  padding: 1px 12px;
+  border: none;
+  outline: none;
+  cursor: pointer;
+  background-color: #24b880;
+  color: white;
+  font-weight: bolder;
+  border-radius: 4px;
+}
+.comment-list .commentBtn:hover {
+  background-color: #20a371;
+}
+.comment-list .myown-comment .commentBtn {
+  background-color: #d4d4d4;
+  font-weight: bolder;
+  color: #575757;
+}
+.comment-list .myown-comment .commentBtn:hover {
+  background-color: #c7c7c7;
+}
+.comment-list .hintUser {
+  color: #24b880;
+  float: left;
+}
+.comment-list .mate-list {
+  margin-top: 80px;
+  padding: 0px 20px;
+  height: 90%;
+  overflow: auto;
+  padding-bottom: 100px;
+}
+.comment-list .mate-list .classmates-comment {
+  background-color: #ffffff;
+  box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
+  border-radius: 7px;
+  width: 100%;
+  padding: 18px 28px 40px 28px;
+}
+.comment-list .mate-list .classmates-comment .classmates-avatar {
+  width: 30px;
+  height: 30px;
+  margin-left: -2px;
+  border-radius: 50%;
+  margin-bottom: 1px;
+  z-index: 10;
+}
+.comment-list .mate-list .classmates-comment .classmates-name {
+  font-weight: bolder;
+  position: relative;
+  top: -11px;
+  left: 10px;
+  color: #00ad6c;
+}
+.comment-list .mate-list .myown-comment {
+  cursor: pointer;
+}
+.comment-list .mate-list .open-comment {
+  box-shadow: 1px 10px 12px rgba(0, 0, 0, 0.2);
+}
+.comment-list .mate-list .post-time {
+  color: #afafaf;
+  margin-top: 10px;
+  text-align: right;
+  margin-bottom: -20px;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/comment-list.less

@@ -0,0 +1,121 @@
+.comment-list {
+  background-color: rgb(241, 241, 241);
+  border-left: 1px solid rgba(0, 0, 0, 0.1);
+  right: 0;
+  width: 25%;
+  @media screen and (max-width: 1280px){
+    width: 40%;
+  }
+  @media screen and (max-width: 991px){
+    width: 50%;
+  }
+  @media screen and (max-width: 767px){
+    width: 100%;
+  }
+  height: 100%;
+  position: fixed;
+  .title-rect-group {
+    position: fixed;
+    white-space: nowrap;
+    padding: 0px 20px;
+  }
+  .closeIcon-wrap {
+    position: fixed;
+    width: 24px;
+    height: 24px;
+    right: 22px;
+    top: 75px;
+    z-index: 10;
+    &:hover {
+      cursor: pointer;
+    }
+    .closeIcon {
+      font-size: 24px;
+    }
+  }
+  .commentArea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 2px;
+    background: rgba(63, 63, 63, 0.1);
+    border: none;
+    border-radius: 6px;
+    color: rgb(68, 68, 68);
+    &:focus {
+      outline-color: #24b880;
+    }
+  }
+  .commentBtn {
+    margin-top: 0px;
+    margin-left: 2px;
+    float: right;
+    width: auto;
+    padding: 1px 12px;
+    border: none;
+    outline: none;
+    cursor: pointer;
+    background-color: #24b880;
+    color: white;
+    font-weight: bolder;
+    border-radius: 4px;
+    &:hover {
+      background-color: darken(#24b880, 5%);
+    }
+  }
+  .myown-comment {
+    .commentBtn {
+      background-color: #d4d4d4;
+      font-weight: bolder;
+      color: rgb(87, 87, 87);
+      &:hover{
+        background-color: darken(#d4d4d4,5%);
+      }
+    }
+    
+  }
+  .hintUser{
+    color: #24b880;
+    float: left;
+}
+  .mate-list {
+    margin-top: 80px;
+    padding: 0px 20px;
+    height: 90%;
+    overflow: auto;
+    padding-bottom: 100px;
+    .classmates-comment {
+      background-color: #ffffff;
+      box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
+      border-radius: 7px;
+      width: 100%;
+      padding: 18px 28px 40px 28px;
+      .classmates-avatar {
+        width: 30px;
+        height: 30px;
+        margin-left: -2px;
+        border-radius: 50%;
+        margin-bottom: 1px;
+        z-index: 10;
+      }
+      .classmates-name {
+        font-weight: bolder;
+        position: relative;
+        top: -11px;
+        left: 10px;
+        color: #00ad6c;
+      }
+    }
+    .myown-comment {
+      cursor: pointer;
+    }
+    .open-comment {
+        box-shadow: 1px 10px 12px rgba(0, 0, 0, 0.2);
+    }
+    .post-time {
+      color: rgb(175, 175, 175);
+      margin-top: 10px;
+      text-align: right;
+      margin-bottom: -20px;
+    }
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/common.css

@@ -4,21 +4,96 @@ html {
 html,
 body,
 #app {
-  min-height: 95.9vh;
+  min-height: 100%;
+  overflow: auto;
 }
 .loader-icon {
-  font-size: 50px;
+  font-size: 200px;
   color: #24b880;
   position: relative;
-  left: 12px;
-  margin-bottom: 20px;
+  margin-top: -140px;
+  left: 2px;
+  margin-bottom: 0px;
+}
+.cls-1 {
+  animation: load 1s infinite;
+  animation-delay: 0.1s;
+}
+.cls-2 {
+  animation: load 1s infinite;
+  animation-delay: 0.3s;
+}
+.cls-3 {
+  animation: load 1s infinite;
+  animation-delay: 0.5s;
+}
+.cls-4 {
+  animation: load 1s infinite;
+  animation-delay: 0.7s;
+}
+.cls-5 {
+  fill: none;
+  stroke-width: 2px;
+  stroke: #00ff9d;
+  stroke-linecap: round;
+  animation: animationlogo 8s infinite;
+}
+@keyframes animationlogo {
+  0% {
+    stroke-dasharray: 90;
+    stroke-dashoffset: 50;
+    stroke-width: 3px;
+    fill: rgba(255, 255, 255, 0.1);
+  }
+  20% {
+    stroke-dasharray: 100;
+    stroke-dashoffset: 40;
+    stroke-width: 3px;
+    fill: rgba(255, 255, 255, 0.2);
+  }
+  50% {
+    fill: #ffffff;
+    stroke-width: 0px;
+    stroke-dasharray: 300;
+    stroke-dashoffset: 30;
+  }
+  70% {
+    stroke-dasharray: 500;
+    stroke-dashoffset: 20;
+    stroke-width: 3px;
+    fill: rgba(255, 255, 255, 0.2);
+  }
+  100% {
+    fill: rgba(255, 255, 255, 0.1);
+    stroke-dasharray: 90;
+    stroke-dashoffset: 50;
+    stroke-width: 3px;
+  }
+}
+@keyframes load {
+  0% {
+    opacity: 0;
+  }
+  50% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
+.preview-progress-pie {
+  width: 70px;
+  height: 70px;
+  margin-top: -12px;
+  margin-right: -6px;
+  color: rgba(0, 0, 0, 0.726);
 }
 .dec {
+  position: relative;
   text-align: justify;
-  background: linear-gradient(to left, #f5f5f7, #fbfbfd);
+  background: #f1f1f1;
   padding: 20px 30px;
-  margin: 10px 0px;
-  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding-right: 50px;
   border-radius: 4px;
 }
 .dec .warm-hint {
@@ -34,12 +109,13 @@ body,
   font-size: 20px;
 }
 .dec .close-hint-btn {
-  float: right;
+  position: absolute;
   background-color: #dddddd;
-  top: 2px;
+  margin-top: 0px;
+  top: 35%;
   width: 20px;
   height: 20px;
-  position: relative;
+  right: 1.5%;
   border-radius: 50%;
   cursor: pointer;
 }
@@ -48,7 +124,7 @@ body,
 }
 .dec .close-hint-btn .close-icon {
   position: relative;
-  left: 2px;
+  left: 3px;
   top: -1px;
 }
 .list {
@@ -58,17 +134,13 @@ body,
   width: 25%;
   background-color: #fff;
   box-shadow: 4px 1px 10px rgba(0, 0, 0, 0.1);
-  border-right: 1px solid rgba(0, 0, 0, 0.2);
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
 }
 .list .list-item {
   list-style-type: none;
   width: 100%;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-  height: 88px;
-  padding: 20px;
-}
-.list .list-item * {
-  white-space: nowrap;
+  padding: 15px 10px 15px 30px;
 }
 .list .list-item:hover {
   background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
@@ -76,98 +148,111 @@ body,
   cursor: pointer;
 }
 .list .list-item li {
+  vertical-align: top;
   display: inline-block;
-  white-space: nowrap;
-}
-.list .list-item .list-item-icon {
-  padding-right: 7%;
-  padding-left: 2.5%;
+  position: relative;
 }
 .list .list-item .list-item-icon * {
+  margin-top: 2px;
   height: 40px;
   width: 40px;
 }
 .list .list-item .list-item-info {
-  width: 70%;
+  padding: 0px 20px 0px 30px;
+  position: relative;
 }
 .list .list-item .list-item-info .list-item-title {
-  padding: 3px 10px;
-  margin: 0px 8px 0px -10px;
   font-weight: bolder;
   font-size: 14px;
-  line-height: 14px;
-  overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
+  line-height: 22px;
 }
 .list .list-item .list-item-info .list-item-title .list-item-typeMark {
   text-align: center;
   background-color: #dfdfdf;
   border-radius: 10px;
 }
+.list .list-item .list-item-info .list-item-titleEn {
+  font-size: 12px;
+  line-height: 22px !important;
+}
 .list .list-item .list-item-info .list-item-time {
-  margin-top: 6px;
   color: #8f8787;
   font-size: 12px;
 }
 .list .list-item .list-item-unDone {
+  display: inline-block;
+  position: relative;
+  right: -6px;
+}
+.list .list-item .list-item-unDone .done-feedback {
+  right: -26px;
+  text-align: center;
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+  position: relative;
+}
+.list .list-item .list-item-unDone .done-feedback .feedback-icon {
   position: relative;
   top: 8px;
-  right: 2%;
-  height: 48px;
-  width: 48px;
-  margin-top: -8px;
+  left: -10px;
+  font-size: 24px !important;
+  color: #24b880;
 }
 .list .list-item .list-item-unDone .isOvertime {
   position: relative;
-  top: -20px;
-  right: -20%;
+  right: -10px;
   font-size: 10px;
   font-weight: bolder;
-  padding: 3px 0px;
+  padding: 5px;
   border: 1px solid;
   border-radius: 4px;
   text-align: center;
 }
 .list .list-item .list-item-unDone .isAllowRetry {
   position: relative;
-  top: -20px;
-  right: -20%;
+  right: -10px;
   font-size: 10px;
   font-weight: bolder;
   color: white;
-  padding: 3px 0px;
+  padding: 5px;
   background-color: #64ae16;
   border-radius: 4px;
   text-align: center;
 }
 .list .list-item .list-item-unDone .isAllowRetrytest {
   position: relative;
-  top: -20px;
-  right: -20%;
+  right: -10px;
   font-size: 10px;
   font-weight: bolder;
   color: white;
-  padding: 3px 0px;
+  padding: 5px;
   background-color: #fa6400;
   border-radius: 4px;
   text-align: center;
 }
+.list .list-item .list-item-unDoneEn {
+  right: -2px;
+}
+.list .list-item .list-item-unDoneEn .isOvertime,
+.list .list-item .list-item-unDoneEn .isAllowRetry,
+.list .list-item .list-item-unDoneEn .isAllowRetrytest {
+  right: -7px !important;
+}
 .list .list-item .list-item-isDone {
   position: relative;
-  right: 1.5%;
+  right: -11px;
   text-align: center;
 }
 .list .list-item .list-item-isDone .isDone-Icon {
   font-size: 20px;
   position: relative;
-  top: -10px;
+  top: 5px;
   right: -22px;
   color: #24b880;
 }
 .list .list-item .list-item-isDone .done-feedback {
-  top: -10px;
-  right: -25px;
+  right: -20px;
   text-align: center;
   width: 40px;
   height: 40px;
@@ -177,15 +262,15 @@ body,
 .list .list-item .list-item-isDone .done-feedback .score-num {
   position: relative;
   font-weight: bolder;
-  top: 0px;
-  right: 14px;
+  top: 2px;
+  right: 12px;
   font-size: 18px;
   color: #24b880;
 }
 .list .list-item .list-item-isDone .done-feedback .feedback-icon {
   position: relative;
   top: 8px;
-  left: 8px;
+  left: -10px;
   font-size: 24px !important;
   color: #24b880;
 }
@@ -204,6 +289,12 @@ body,
   clear: both;
   margin-bottom: 100px;
 }
+.course-list .list {
+  width: 35%;
+}
+.courselistEn .list {
+  width: 50%;
+}
 /*icon 像素微調*/
 .reset-testIcon {
   position: relative;
@@ -292,16 +383,26 @@ body,
   text-align: right;
   white-space: nowrap;
 }
+@media screen and (max-width: 991px) {
+  .base-info {
+    font-size: 12px;
+  }
+}
 .base-info li {
   display: inline;
   margin-right: 30px;
 }
+@media screen and (max-width: 991px) {
+  .base-info li {
+    margin-right: 10px;
+  }
+}
 .base-info li:last-child {
   margin-right: 3px;
 }
 .base-info-icon {
   position: relative;
-  top: -1px;
+  top: 0px;
   right: 5px;
   color: rgba(0, 0, 0, 0.8);
 }
@@ -317,7 +418,9 @@ body,
   border-radius: 18px;
 }
 .tasks {
-  border: 1px solid #929292;
+  border: 1px solid #919191;
+  background-color: white;
+  font-weight: bolder;
   width: 180px;
   height: 40px;
   border-radius: 50px;
@@ -325,10 +428,9 @@ body,
   margin-top: 20px;
   margin-right: 20px;
   position: relative;
-  background-color: #fff;
   display: inline-block;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .tasks {
     width: 100%;
   }
@@ -336,7 +438,7 @@ body,
 .tasks:hover {
   cursor: pointer;
   color: white;
-  background: #24b880;
+  background: #00ad6c;
   border: none;
 }
 .tasks .title {
@@ -396,8 +498,27 @@ body,
   border: #03966a 2px solid;
 }
 .aclassoneloading {
-  color: white;
+  font-weight: bolder;
+  position: absolute;
+  text-align: center;
+  top: -70%;
+  right: -40%;
   font-size: 20px;
+  animation: animationtitle 8s infinite;
+}
+@keyframes animationtitle {
+  0% {
+    color: rgba(255, 255, 255, 0);
+  }
+  20% {
+    color: #ffffff;
+  }
+  70% {
+    color: rgba(255, 255, 255, 0.5);
+  }
+  100% {
+    color: rgba(255, 255, 255, 0);
+  }
 }
 .warmMessage {
   position: fixed;
@@ -423,6 +544,38 @@ body,
 .messageCard p {
   line-height: 27px;
 }
+.previewNextItemCard button {
+  text-align: center;
+  background: #dcdcdc;
+  height: 30px;
+  width: auto;
+  padding: 5px 10px;
+  margin-right: 10px;
+  color: #6a6565;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  font-weight: 900;
+}
+.previewNextItemCard .list-item-icon {
+  margin-top: 10px;
+  font-size: 48px;
+}
+.previewNextItemCard .viewcommnet-icon {
+  font-size: 60px;
+  font-weight: bolder;
+}
+.previewNextItemCard .nextItemTitle {
+  font-weight: bolder;
+  padding: 10px 0px 30px 0px;
+}
+.previewNextItemCard .nextItemTitle .typeMark {
+  text-align: center;
+  background-color: #dfdfdf;
+  border-radius: 10px;
+  padding: 2px 10px;
+}
 .uploadBtn {
   padding: 8px 20px;
   margin: 5px;
@@ -465,9 +618,6 @@ body,
 .list-item li {
   display: inline-block;
 }
-.list-item .list-item-info {
-  width: 60%;
-}
 .list-item .list-item-info .list-item-typeMark {
   text-align: center;
   background-color: #dfdfdf;
@@ -480,10 +630,160 @@ body,
   color: #8f8787;
   font-size: 12px;
 }
+.setting-checkbox input[type="checkbox"] {
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  background-color: #fafafa;
+  border: 1px solid #cacece;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 9px;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+  top: 4px;
+  margin-right: 4px;
+}
+.setting-checkbox input[type="checkbox"]:active,
+.setting-checkbox input[type="checkbox"]:checked:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
+}
+.setting-checkbox input[type="checkbox"]:checked {
+  background-color: #24b880;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.setting-checkbox input[type="checkbox"]:checked:after {
+  content: "\2714";
+  font-size: 14px;
+  position: absolute;
+  top: 0px;
+  left: 3px;
+  color: #ffffff;
+  outline: none;
+}
+.list-item-info {
+  width: 75%;
+}
+@media screen and (min-width: 1600px) and (max-width: 1853px) {
+  .list-item-info {
+    width: 70% !important;
+  }
+}
 @media screen and (max-width: 1600px) {
   .list-item-info {
-    width: 65% !important;
+    width: 68% !important;
+  }
+}
+@media screen and (max-width: 1488px) {
+  .list-item-info {
+    width: 60% !important;
+  }
+}
+@media screen and (max-width: 810px) {
+  .list-item-info {
+    width: 60% !important;
+  }
+}
+@media screen and (max-width: 767px) {
+  .list-item-info {
+    width: 80% !important;
+  }
+}
+@media screen and (max-width: 547px) {
+  .list-item-info {
+    width: 75% !important;
+  }
+}
+.event-list .list-item-info {
+  width: 75%;
+}
+@media screen and (min-width: 1600px) and (max-width: 1853px) {
+  .event-list .list-item-info {
+    width: 70% !important;
+  }
+}
+@media screen and (max-width: 1600px) {
+  .event-list .list-item-info {
+    width: 60% !important;
+  }
+}
+@media screen and (max-width: 1280px) and (min-width: 1160px) {
+  .event-list .list-item-info {
+    width: 75% !important;
+  }
+}
+@media screen and (max-width: 1159px) and (min-width: 992px) {
+  .event-list .list-item-info {
+    width: 70% !important;
+  }
+}
+@media screen and (max-width: 767px) {
+  .event-list .list-item-info {
+    width: 80% !important;
+  }
+}
+@media screen and (max-width: 547px) {
+  .event-list .list-item-info {
+    width: 75% !important;
+  }
+}
+.list-item-infonofeedback {
+  width: 90% !important;
+}
+@media screen and (min-width: 1600px) and (max-width: 1853px) {
+  .list-item-infonofeedback {
+    width: 85% !important;
+  }
+}
+@media screen and (max-width: 1600px) {
+  .list-item-infonofeedback {
+    width: 83% !important;
+  }
+}
+@media screen and (max-width: 810px) {
+  .list-item-infonofeedback {
+    width: 70% !important;
+  }
+}
+@media screen and (max-width: 767px) {
+  .list-item-infonofeedback {
+    width: 90% !important;
+  }
+}
+@media screen and (max-width: 547px) {
+  .list-item-infonofeedback {
+    width: 85% !important;
+  }
+}
+@media screen and (min-width: 1600px) and (max-width: 1853px) {
+  .todaydaylineList .list-item-info {
+    width: 90% !important;
+  }
+}
+@media screen and (max-width: 1670px) {
+  .todaydaylineList .list-item-info {
+    width: 85% !important;
+  }
+}
+@media screen and (max-width: 1366px) {
+  .todaydaylineList .list-item-info {
+    width: 82% !important;
+  }
+  .todaydaylineList .list-item-info .list-item-title {
+    font-size: 12px !important;
+  }
+}
+@media screen and (max-width: 767px) {
+  .todaydaylineList .list-item-info {
+    width: 85% !important;
   }
+}
+.todaydaylineList .list-item-titleEn {
+  font-size: 12px !important;
+  line-height: 22px !important;
+}
+@media screen and (max-width: 1600px) {
   .title-part {
     width: 100% !important;
   }
@@ -495,21 +795,19 @@ body,
     margin-top: 15px;
   }
 }
-@media screen and (max-width: 1366px) {
-  .list-item-info {
-    width: 62% !important;
-  }
-}
 @media screen and (max-width: 1280px) {
   .list {
-    width: 30%;
+    width: 40%;
   }
   .eventContentArea-view,
   .study-content,
   .hiteachNote-content,
   .inform-content,
   .course-content {
-    width: 70% !important ;
+    width: 60% !important;
+  }
+  .courseContentEn {
+    width: 50% !important;
   }
   .study-content-span,
   .hiteachNote-content-span,
@@ -521,21 +819,84 @@ body,
     transition: 0.5s;
   }
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1500px) {
+  .course-list .list {
+    width: 40%;
+  }
+  .courselistEn .list {
+    width: 50%;
+  }
+  .course-content {
+    width: 60% !important;
+  }
+  .courseContentEn {
+    width: 50% !important;
+  }
+}
+@media screen and (max-width: 1280px) {
   .event-title,
   .title-mark {
     font-size: 18px;
   }
+}
+@media screen and (max-width: 991px) {
+  .event-title,
+  .title-mark {
+    font-size: 18px;
+  }
+  .title-mark {
+    margin-right: 4px;
+  }
   .list {
-    z-index: 3;
+    width: 40%;
+  }
+  .course-list .list {
     width: 100%;
   }
-  .list .list-item-info {
-    width: 70% !important;
+  .eventContentArea-view,
+  .study-content,
+  .hiteachNote-content,
+  .inform-content,
+  .course-content {
+    width: 60% !important;
+  }
+  .courseContentEn {
+    width: 50% !important;
+  }
+  .study-content-span,
+  .hiteachNote-content-span,
+  .eventContentArea-Span,
+  .inform-content-span,
+  .course-content-span {
+    padding: 1% 5% !important;
+    width: 100% !important;
+    transition: 0.5s;
+  }
+}
+@media screen and (max-width: 767px) {
+  .list {
+    z-index: 3;
+    width: 100%;
   }
   .eventContentArea-Span {
     padding: 1% 5% !important;
     width: 100% !important;
     transition: 0.5s;
   }
+  .uploadBtn {
+    display: block;
+    margin-bottom: 10px;
+    width: 100% !important;
+  }
+}
+.statusEn * {
+  font-size: 11px !important;
+}
+.statusOvertimeEn {
+  font-size: 11px !important;
+}
+.base-infoEn {
+  text-align: left;
+  margin-top: 15px;
+  margin-left: 15px;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/course-content.css

@@ -1,9 +1,14 @@
 .course-content {
   position: relative;
   float: right;
-  width: 75%;
+  width: 65%;
   padding: 2% 3%;
-  height: 95.9vh;
+  height: auto;
+}
+@media screen and (max-width: 991px) {
+  .course-content {
+    padding-top: 4% !important;
+  }
 }
 .course-content .course-subject {
   color: #24b880;
@@ -22,7 +27,7 @@
 }
 .course-content .group-btn {
   cursor: pointer;
-  z-index: 2;
+  z-index: 1;
   float: right;
   position: relative;
   top: 25px;
@@ -38,11 +43,16 @@
   margin-top: 20px;
   position: relative;
 }
+@media screen and (max-width: 1366px) {
+  .course-content .ivu-tabs-nav {
+    margin-top: 8px;
+  }
+}
 .course-content .ivu-tabs-tab {
   text-align: center !important;
   font-size: 20px;
   margin: 0px 10px;
-  width: 120px;
+  width: auto;
 }
 .course-content .ivu-tabs-tab:hover {
   text-align: center !important;
@@ -53,7 +63,7 @@
   font-weight: bolder;
   border-bottom: 5px solid #24b880 !important;
   margin: 0px 10px;
-  width: 120px;
+  width: auto;
 }
 .course-content .ivu-tabs-ink-bar {
   height: 0px;
@@ -66,7 +76,6 @@
     }*/
   margin: 10px 0px;
   overflow-x: hidden;
-  padding-bottom: 200px;
 }
 .course-content .ivu-tabs-tabpane table {
   font-weight: 400;
@@ -80,6 +89,12 @@
   border-bottom: 1px solid #dddddd;
   padding: 5px 0px;
 }
+@media screen and (max-width: 1366px) {
+  .course-content .ivu-tabs-tabpane td,
+  .course-content .ivu-tabs-tabpane th {
+    font-size: 14px;
+  }
+}
 .course-content .ivu-tabs-tabpane td:nth-child(2),
 .course-content .ivu-tabs-tabpane th:nth-child(2) {
   text-align: left;
@@ -94,6 +109,7 @@
 .course-content .ivu-tabs-tabpane:last-child {
   margin-top: -16px;
   padding-top: 10px;
+  height: auto;
 }
 .course-content .group-title {
   background-color: #ececec;
@@ -117,11 +133,19 @@
   position: relative;
   width: 5% !important;
 }
+.course-content .group-studentEn {
+  width: 30%;
+}
 @media screen and (max-width: 1366px) {
   .course-content .group-student {
     width: 30% !important;
   }
 }
+@media screen and (max-width: 991px) {
+  .course-content .group-student {
+    width: 40% !important;
+  }
+}
 .course-content .my-name {
   color: #24b880;
 }
@@ -133,3 +157,6 @@
   font-weight: bolder;
   color: #24b880;
 }
+.courseContentEn {
+  width: 50% !important ;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/course-content.less

@@ -1,13 +1,17 @@
+@import "color.less";
+
 .course-content {
   position: relative;
   float: right;
-  width: 75%;
+  width: 65%;
   padding: 2% 3%;
-  height: 95.9vh;
-  
+  height: auto;
+  @media screen and (max-width: 991px){
+    padding-top: 4% !important;
+  }
 
   .course-subject {
-    color: #24b880;
+    color: @primary;
   }
   .basic-title {
     color: #959494;
@@ -23,7 +27,7 @@
   }
   .group-btn {
     cursor: pointer;
-    z-index: 2;
+    z-index: 1;
     float: right;
     position: relative;
     top: 25px;
@@ -31,7 +35,7 @@
     font-size: 30px;
   }
   .group-on {
-    color: #24b880;
+    color: @primary;
   }
 
   //分頁組件
@@ -41,6 +45,9 @@
     text-align: center;
     margin-top: 20px;
     position: relative;
+    @media screen and (max-width: 1366px) {
+      margin-top: 8px;
+    }
   }
 
   .ivu-tabs-tab {
@@ -48,18 +55,19 @@
 
     font-size: 20px;
     margin: 0px 10px;
-    width: 120px;
+    width: auto;
+    
   }
   .ivu-tabs-tab:hover {
     text-align: center !important;
-    color: #24b880 !important;
+    color: @primary !important;
   }
   .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
-    color: #24b880 !important;
+    color: @primary!important;
     font-weight: bolder;
-    border-bottom: 5px solid #24b880 !important;
+    border-bottom: 5px solid @primary !important;
     margin: 0px 10px;
-    width: 120px;
+    width: auto;
   }
   .ivu-tabs-ink-bar {
     height: 0px;
@@ -76,6 +84,9 @@
     td,
     th {
       font-size: 16px;
+      @media screen and (max-width: 1366px) {
+        font-size: 14px;
+      }
       text-align: center;
       border-bottom: 1px solid #dddddd;
 
@@ -101,10 +112,11 @@
     &:last-child {
       margin-top: -16px;
       padding-top: 10px;
+      height: auto;
     }
     overflow-x: hidden;
 
-    padding-bottom: 200px;
+   
     
   }
   .group-title {
@@ -114,7 +126,7 @@
     margin-bottom: 10px;
   }
   .group-student {
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid @border;
     display: inline-block;
     padding: 10px;
     width: 18%;
@@ -130,11 +142,20 @@
       width: 5% !important;
     }
   }
+  .group-studentEn{
+    width: 30%;
+  }
+  
   @media screen and (max-width: 1366px) {
     .group-student {
       width: 30% !important;
     }
   }
+  @media screen and (max-width: 991px) {
+    .group-student {
+      width: 40% !important;
+    }
+  }
   .my-name {
     color: #24b880;
   }
@@ -144,6 +165,9 @@
   .ivu-collapse > .ivu-collapse-item > .ivu-collapse-header {
     padding-left: 0px;
     font-weight: bolder;
-    color: #24b880;
+    color: @primary;
   }
 }
+.courseContentEn {
+  width: 50% !important ;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/course-list.css

@@ -1,9 +1,46 @@
+.course-list .tableViewBtn,
+.course-list .listViewBtn {
+  display: inline-block;
+  position: fixed;
+  right: 20px;
+  top: -50px;
+  z-index: 999;
+}
+.course-list .tableViewBtn:hover,
+.course-list .listViewBtn:hover {
+  color: #24b880;
+  cursor: pointer;
+}
+.course-list .chooseView {
+  color: #24b880;
+}
+.course-list .listViewBtn {
+  right: 50px;
+}
+.course-list .listViewBtn {
+  display: inline-block;
+  position: absolute;
+}
+.course-list .addCourseIcon {
+  font-size: 60px;
+  margin: 10px;
+}
+.course-list .typeMark {
+  text-align: center;
+  background-color: #24b880;
+  color: white;
+  font-size: 14px;
+  padding: 1px 10px;
+  border-radius: 10px;
+  margin-right: 10px;
+  margin-top: 3px;
+}
 .course-list .list-block {
   margin-top: 10px;
 }
 .course-list .list-item {
-  height: 60px;
-  padding-left: 8%;
+  height: auto;
+  padding-left: 3%;
 }
 .course-list .list-item .list-item-info {
   width: 100% !important;
@@ -13,3 +50,35 @@
   height: 92vh;
   overflow: auto;
 }
+.course-list .courseTable {
+  margin: 20px;
+}
+.course-list .courseTable .table-time {
+  font-size: 8px;
+}
+.course-list .courseTable .courseName {
+  font-size: 12px;
+  color: #515a6e;
+  font-weight: bolder;
+}
+.course-list .courseTable .list-item-typeMark {
+  width: auto;
+  text-align: center;
+  background-color: #dfdfdf;
+  padding: 1px 5px;
+  border-radius: 10px;
+  margin-top: 3px;
+}
+.course-list .table-item-selected.courseName {
+  font-weight: bolder !important;
+  color: #00ad6c;
+  background-color: #d4ede1;
+}
+.course-list .table-item-selected .list-item-typeMark {
+  text-align: center;
+  color: white;
+  background-color: #00ad6c;
+  padding: 1px 5px !important;
+  border-radius: 10px;
+  margin-top: 3px;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/course-list.less

@@ -1,17 +1,92 @@
-.course-list{
-    .list-block{
-        margin-top:10px;
+@import "color.less";
+
+.course-list {
+  .tableViewBtn,.listViewBtn{
+    display: inline-block;
+   position: fixed;
+   right:20px;
+   top:-50px;
+   z-index:999;
+   
+   
+   &:hover{
+    color: @primary;
+    cursor:pointer
+   }
+  }
+  .chooseView{
+    color: @primary;
+  }
+  .listViewBtn{
+    right:50px;
+  }
+  .listViewBtn{
+    display: inline-block;
+    position: absolute;
+  }
+  .addCourseIcon {
+    font-size: 60px;
+    margin: 10px;
+  }
+  .typeMark {
+   
+
+    text-align: center;
+    background-color: @primary;
+    color: white;
+    font-size: 14px;
+    padding: 1px 10px;
+    border-radius: 10px;
+    margin-right:10px;
+    margin-top: 3px;
+  }
+  .list-block {
+    margin-top: 10px;
+  }
+  .list-item {
+    height: auto;
+    padding-left: 3%;
+    .list-item-info {
+      width: 100% !important;
     }
-    .list-item{
-        height: 60px;
-        padding-left:8%;
-        .list-item-info {
-            width: 100% !important;
-        }
+  }
+  .ivu-tabs-tabpane {
+    padding-bottom: 100px;
+    height: 92vh;
+    overflow: auto;
+  }
+  .courseTable {
+    margin: 20px;
+    .table-time {
+      font-size: 8px;
     }
-    .ivu-tabs-tabpane{
-        padding-bottom: 100px;
-        height: 92vh; 
-        overflow: auto;
-      }
-}
+    .courseName {
+      font-size: 12px;
+      color: #515a6e;
+      font-weight:bolder;
+    }
+    .list-item-typeMark {
+      width: auto;
+      text-align: center;
+      background-color: #dfdfdf;
+      padding: 1px 5px;
+      border-radius: 10px;
+      margin-top: 3px;
+    }
+  }
+  .table-item-selected.courseName {
+    font-weight: bolder !important;
+    color: @secondary;
+    background-color: #d4ede1;
+  }
+  .table-item-selected {
+    .list-item-typeMark {
+      text-align: center;
+      color: white;
+      background-color: @secondary;
+      padding: 1px 5px !important;
+      border-radius: 10px;
+      margin-top: 3px;
+    }
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/classmate-commentPages.css

@@ -52,7 +52,7 @@
 .classmates-commentPages .mates-content .mates-homework {
   padding: 20px 80px 100px 80px !important;
   margin-top: 38px;
-  height: 95.9vh;
+  height: 100%;
   overflow: auto;
   left: -16px;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/common.css

@@ -4,7 +4,7 @@ html {
 html,
 body,
 #app {
-  min-height: 95.9vh;
+  min-height: 100%;
 }
 .loader-icon {
   font-size: 50px;
@@ -533,4 +533,5 @@ body,
     width: 100% !important;
     transition: 0.5s;
   }
+ 
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/course-content.css

@@ -3,7 +3,7 @@
   float: right;
   width: 75%;
   padding: 2% 3%;
-  height: 95.9vh;
+  height: 100%;
 }
 .course-content .course-subject {
   color: #24b880;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/hiteachNote-content.css

@@ -2,7 +2,7 @@
   float: right;
   width: 75%;
   padding: 1% 3%;
-  height: 95.9vh;
+  height: 100%;
   padding-bottom: 50px;
   overflow: auto;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/inform-list.css

@@ -5,6 +5,6 @@
 .inform-list .list-block {
   margin-top: 0px;
   padding-bottom: 100px;
-  height: 95.9vh;
+  height: 100%;
   overflow: auto;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/dist/setting-view.css

@@ -5,7 +5,7 @@
 .setting-view .menu-bar {
   float: left;
   background-color: #f4f3f3;
-  height: 95.9vh;
+  height: 100%;
   padding: 0px !important;
 }
 .setting-view .menu-bar .list-block .list-item {
@@ -41,7 +41,7 @@
   float: right;
   padding: 30px 50px !important;
   background-color: #fafafa;
-  height: 95.9vh;
+  height: 100%;
 }
 .setting-view .menu-content .edit {
   cursor: pointer;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/event-latest.css

@@ -123,6 +123,16 @@
   margin-left: 10px;
   position: relative;
 }
+.feedbackMore {
+  background-color: #dcdcdc;
+  color: #515a6e;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 12pt;
+  top: -1px;
+  margin-left: 10px;
+  position: relative;
+}
 @keyframes sldefadein {
   from {
     opacity: 0;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/event-latest.less

@@ -1,3 +1,5 @@
+@import "color.less";
+
 .event-latest {
   position: fixed;
   height: 100%;
@@ -131,6 +133,16 @@
   margin-left: 10px;
   position: relative;
 }
+.feedbackMore {
+  background-color: #dcdcdc;
+  color: #515a6e;
+  padding: 2px 10px;
+  border-radius: 4px;
+  font-size: 12pt;
+  top: -1px;
+  margin-left: 10px;
+  position: relative;
+}
 
 @keyframes sldefadein {
   from {

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/event-list.css

@@ -41,7 +41,8 @@
   top: 13px;
   left: 15px;
 }
-.event-selector-block .icon-selector .icon-btn .Icon-3 {
+.event-selector-block .icon-selector .icon-btn .Icon-3,
+.event-selector-block .icon-selector .icon-btn .Icon-5 {
   top: 12px;
   left: 13px;
 }
@@ -75,7 +76,7 @@
   text-align: center;
 }
 .ivu-tabs-tab {
-  width: 90px;
+  width: auto;
   padding: 8px 20px;
   position: relative;
   font-size: 14px;
@@ -88,7 +89,7 @@
 }
 .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
   color: #24b880 !important;
-  width: 90px;
+  width: auto;
   padding: 8px 20px;
   border-bottom: 7px solid #24b880 !important;
   text-align: center;
@@ -122,15 +123,19 @@
   .event-list .icon-selector .icon-btn .Icon-0,
   .event-list .icon-selector .icon-btn .Icon-1,
   .event-list .icon-selector .icon-btn .Icon-4 {
-    top: 10px;
-    left: 10px;
+    top: 22%;
+    left: 23%;
   }
   .event-list .icon-selector .icon-btn .Icon-2 {
-    top: 11px;
-    left: 12px;
+    top: 24%;
+    left: 30%;
   }
   .event-list .icon-selector .icon-btn .Icon-3 {
-    top: 10px;
-    left: 10px;
+    top: 22%;
+    left: 26%;
+  }
+  .event-list .icon-selector .icon-btn .Icon-5 {
+    top: 22%;
+    left: 26%;
   }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/event-list.less

@@ -1,3 +1,4 @@
+@import 'color.less';
 /*篩選器區域*/
 .event-selector-block {
   padding: 17px 25px;
@@ -42,10 +43,11 @@
         top: 13px;
         left: 15px;
       }
-      .Icon-3 {
+      .Icon-3,.Icon-5  {
         top: 12px;
         left: 13px;
       }
+      
     }
     input[type="checkbox"] {
       visibility: hidden;
@@ -83,7 +85,7 @@
 }
 
 .ivu-tabs-tab {
-  width: 90px;
+  width: auto;
   padding: 8px 20px;
   position: relative;
   font-size: 14px;
@@ -91,15 +93,15 @@
   font-weight: 600;
   margin: 0px 30px;
   &:hover {
-    color: #24b880 !important;
+    color: @primary !important;
   }
 }
 
 .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
-  color: #24b880 !important;
-  width: 90px;
+  color: @primary !important;
+  width: auto;
   padding: 8px 20px;
-  border-bottom: 7px solid #24b880 !important;
+  border-bottom: 7px solid @primary !important;
   text-align: center;
 }
 
@@ -117,7 +119,7 @@
   z-index: 10;
   /*修改iviewTab控件*/
   .list-block {
-    border-top: 1px solid rgba(0, 0, 0, 0.1);
+    border-top: 1px solid @border;
 
     overflow: auto;
   }
@@ -134,16 +136,20 @@
         .Icon-0,
         .Icon-1,
         .Icon-4 {
-          top: 10px;
-          left: 10px;
+          top: 22%;
+          left: 23%;
         }
         .Icon-2 {
-          top: 11px;
-          left: 12px;
+          top: 24%;
+          left: 30%;
         }
         .Icon-3 {
-          top: 10px;
-          left: 10px;
+          top: 22%;
+          left: 26%;
+        }
+        .Icon-5 {
+          top: 22%;
+          left: 26%;
         }
       }
     }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/hiteachNote-content.css

@@ -2,7 +2,7 @@
   float: right;
   width: 75%;
   padding: 1% 3%;
-  height: 95.9vh;
+  height: 95.59vh;
   padding-bottom: 50px;
   overflow: auto;
 }
@@ -27,13 +27,25 @@
   position: absolute;
   right: 20px;
   top: 10px;
-  z-index: 9;
+  z-index: 1;
 }
 .hiteachNote-content .dec .message-filter li {
   border: none;
   padding: 0px;
   font-size: 32px;
 }
+.hiteachNote-content .dec .message-filter li:nth-child(5) {
+  position: relative;
+  font-size: 26px;
+  top: 3px;
+  right: -3px !important;
+}
+.hiteachNote-content .dec .message-filter li:nth-child(6) {
+  position: relative;
+  font-size: 26px;
+  top: 5px;
+  right: -3px !important;
+}
 .hiteachNote-content .dec .message-filter li:hover {
   cursor: pointer;
   color: #24b880;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/hiteachNote-content.less

@@ -1,8 +1,10 @@
+@import 'color.less';
+
 .hiteachNote-content {
   float: right;
   width: 75%;
   padding: 1% 3%;
-  height: 95.9vh;
+  height: 95.59vh;
   padding-bottom: 50px;
   overflow: auto;
   img {
@@ -13,7 +15,7 @@
   }
   .hiteachPPTarea {
     margin-top: 10px;
-    border: 1px solid rgba(0, 0, 0, 0.1);
+    border: 1px solid @border;
     border-radius: 4px;
   }
 
@@ -26,17 +28,29 @@
       position: absolute;
       right: 20px;
       top: 10px;
-      z-index: 9;
+      z-index: 1;
       li {
         border: none;
         padding: 0px;
         font-size: 32px;
+        &:nth-child(5){
+          position: relative;
+          font-size: 26px;
+          top: 3px;
+          right: -3px !important;
+        }
+        &:nth-child(6){
+          position: relative;
+          font-size: 26px;
+          top: 5px;
+          right: -3px !important;
+        }
         &:hover {
           cursor: pointer;
-          color: #24b880;
+          color: @primary;
         }
         .select-filter {
-          color: #24b880;
+          color: @primary;
         }
       }
     }
@@ -85,7 +99,7 @@
           &:hover {
             cursor: pointer;
             color: #ffffff;
-            background-color: #24b880;
+            background-color: @primary;
           }
         }
         .triangle {
@@ -188,7 +202,7 @@
           border-radius: 4px;
 
           &:hover {
-            color: #03966a;
+            color: @titleHover;
             cursor: pointer;
           }
           .link-content {
@@ -224,7 +238,7 @@
                   color: #777777;
                 }
                 .title {
-                  color: #03966a;
+                  color: @titleHover;
                   font-weight: bolder;
                 }
               }
@@ -270,9 +284,9 @@
           cursor: pointer;
           font-size: 14px;
           font-weight: bolder;
-          color: #24b880;
+          color: @primary;
           &:hover {
-            color: Darken(#24b880, 10%);
+            color: Darken(@primary, 10%);
           }
           .link-icon {
             font-weight: bolder;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/hiteachNote-list.css

@@ -4,7 +4,5 @@
   overflow: auto;
   margin-top: 0px;
   padding-bottom: 100px;
-}
-.hiteachNote-list .list-item-info {
-  width: 82% !important;
+  z-index: 5;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/hiteachNote-list.less

@@ -1,13 +1,14 @@
+@import 'color.less';
+
 .hiteachNote-list{
     .list-block{
-        border-top:1px solid rgba(0, 0, 0, 0.1);
+        border-top:1px solid @border;
         height: 100vh; 
         overflow:auto;
         margin-top:0px;
         padding-bottom: 100px;
+        z-index: 5;
     }
-    .list-item-info {
-        width: 82% !important;
-    }
+   
 
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/home-chart.css

@@ -0,0 +1,141 @@
+.chart-carousel-title {
+  display: block;
+  position: relative;
+  z-index: 1;
+  font-weight: 700;
+  margin-bottom: -40px;
+  font-size: 16px;
+  color: #575757;
+}
+.chart-carousel-title .title {
+  top: -1.8px !important;
+}
+.ivu-carousel-dots {
+  z-index: 1;
+}
+/*平均自學時間*/
+.study-time-chart {
+  width: 100%;
+  margin: auto;
+  margin-bottom: 0px;
+  padding: 15px 40px 0px 40px;
+  color: rgba(0, 0, 0, 0.726);
+  height: 320px;
+}
+.averageTime {
+  position: relative;
+  top: -260px;
+  text-align: center;
+  padding-left: 9%;
+}
+.timeNum {
+  color: #575757;
+  font-weight: 500;
+  font-size: 44px;
+}
+.studyhrs {
+  color: #008352;
+  font-size: 16pt;
+}
+/*平均自學時間End*/
+.spline-area-chart {
+  /*本學期每月自學時數曲線*/
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.mytooltipHrsColor {
+  color: #0ea882;
+  font-size: 16pt;
+}
+/*上月我與年級的活動參與數比較*/
+.stack-bar-chart {
+  width: 100%;
+  margin: auto;
+  position: relative;
+  margin-bottom: 50px;
+  padding: 15px 40px 0px 40px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.chartMonth {
+  width: 50px;
+  position: relative;
+  top: -33px !important;
+  left: 3%;
+}
+/*上月我與年級的活動參與數比較End*/
+.two-line-chart {
+  /*每日平均自學時間與全年級比較圖*/
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.two-line-chart .mytooltipHrsColor2 {
+  color: #fa6400 !important;
+  font-size: 16pt;
+}
+.event-pie-chart {
+  /*本月各類活動任務參與時間佔比*/
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.study-heat-map {
+  /*自學活躍度*/
+  margin: auto;
+  margin-top: 30px;
+  cursor: pointer;
+  padding: 15px 0px 0px 45px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.arrow_box {
+  padding: 10px;
+  font-size: 20px;
+  font-weight: bolder;
+}
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .study-time-chart,
+  .spline-area-chart,
+  .two-line-chart,
+  .stack-bar-chart,
+  .event-pie-chart,
+  .study-heat-map {
+    width: 95% !important;
+    height: 240px !important;
+    padding-left: 2px !important;
+  }
+  .averageTime {
+    top: -180px !important;
+  }
+  .timeNum {
+    font-size: 30px;
+  }
+  .stack-bar-chart {
+    height: 240px !important;
+  }
+  .study-heat-map {
+    width: 115% !important;
+    padding: 0px 0px 0px 20px !important;
+    margin-top: 10px !important;
+  }
+  .chartMonth {
+    position: relative;
+    top: 0px !important;
+    margin: auto;
+  }
+  .event-pie-chart {
+    padding-top: 10px ;
+    width: 100% !important;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/home-chart.less

@@ -0,0 +1,160 @@
+
+
+.chart-carousel-title {
+  display: block;
+  position: relative;
+  z-index: 1;
+  font-weight: 700;
+  margin-bottom: -40px;
+  font-size: 16px;
+  color: #575757;
+
+  .title {
+    top: -1.8px !important;
+  }
+}
+.ivu-carousel-dots{
+  z-index: 1;
+}
+
+/*平均自學時間*/
+.study-time-chart {
+  width: 100%;
+  margin: auto;
+  margin-bottom: 0px;
+  padding: 15px 40px 0px 40px;
+  color: rgba(0, 0, 0, 0.726);
+  height: 320px;
+}
+
+.averageTime {
+  position: relative;
+  top: -260px;
+  text-align: center;
+  padding-left: 9%;
+}
+
+.timeNum {
+  color: #575757;
+  font-weight: 500;
+  font-size: 44px;
+}
+
+.studyhrs {
+  color: #008352;
+  font-size: 16pt;
+}
+
+/*平均自學時間End*/
+
+.spline-area-chart {
+  /*本學期每月自學時數曲線*/
+
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+.mytooltipHrsColor {
+  color: rgb(14, 168, 130);
+  font-size: 16pt;
+}
+/*上月我與年級的活動參與數比較*/
+.stack-bar-chart {
+  width: 100%;
+  margin: auto;
+  position: relative;
+  margin-bottom: 50px;
+  padding: 15px 40px 0px 40px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+
+.chartMonth {
+  width: 50px;
+  position: relative;
+  top: -33px !important;
+  left: 3%;
+}
+
+/*上月我與年級的活動參與數比較End*/
+.two-line-chart {
+  /*每日平均自學時間與全年級比較圖*/
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+
+  .mytooltipHrsColor2 {
+    color: #fa6400 !important;
+    font-size: 16pt;
+  }
+}
+
+.event-pie-chart {
+  /*本月各類活動任務參與時間佔比*/
+  width: 100%;
+  margin: auto;
+  padding: 15px 40px 0px 40px;
+  margin-bottom: 50px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+}
+
+.study-heat-map {
+  /*自學活躍度*/
+  margin: auto;
+  margin-top: 30px;
+  cursor: pointer;
+  padding: 15px 0px 0px 45px;
+  height: 320px;
+  color: rgba(0, 0, 0, 0.726);
+
+  
+}
+.arrow_box {
+    padding: 10px;
+    font-size: 20px;
+    font-weight: bolder;
+  }
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .study-time-chart,
+  .spline-area-chart,
+  .two-line-chart,
+  .stack-bar-chart,
+  .event-pie-chart,
+  .study-heat-map {
+    width: 95% !important;
+    height: 240px !important;
+    padding-left: 2px !important;
+  }
+
+  .averageTime {
+    top: -180px !important;
+  }
+  .timeNum {
+      font-size: 30px;
+  }
+  .stack-bar-chart {
+    height: 240px !important;
+  }
+  .study-heat-map {
+    width: 115% !important;
+    padding: 0px 0px 0px 20px !important;
+    margin-top: 10px !important;
+  }
+  .chartMonth {
+    position: relative;
+    top: 0px !important;
+    margin: auto;
+  }
+  .event-pie-chart {
+    padding-top: 10px ;
+ 
+    width: 100% !important;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/home-view.css

@@ -1,7 +1,7 @@
 .home-view {
   padding: 1.875rem;
   padding-bottom: 56px;
-  height: auto;
+  min-height: 95.9vh;
 }
 .home-view .title {
   position: relative;
@@ -16,6 +16,54 @@
   top: 2px;
   padding: 1px;
 }
+.home-view .spanAllchartIconNow,
+.home-view .spanAllchartIcon {
+  height: 20px;
+  width: 20px;
+  padding: 1px;
+}
+.home-view .spanAllchartBtn {
+  cursor: pointer;
+  font-weight: bolder;
+  position: absolute;
+  right: 10px;
+  display: inline-block;
+  margin-right: 6px;
+  margin-left: 2px;
+  top: 16px;
+  z-index: 2;
+}
+.home-view .spanAllchartBtn .spanAllchartIconNow,
+.home-view .spanAllchartBtn:hover {
+  color: #00ad6c;
+}
+.home-view .spanAllchartBtn.isOpen {
+  position: absolute;
+  top: -34px !important;
+}
+.home-view .allcharts {
+  animation: spanDown 0.5s;
+  transition: 0.2s;
+  text-align: center;
+  background-color: #fff;
+  padding: 50px 15px;
+  padding-bottom: 0px;
+  box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.1);
+  border-radius: 4px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.home-view .allcharts h3 {
+  padding-top: 0px;
+  margin-bottom: -40px;
+}
+@keyframes spanDown {
+  0% {
+    transform: scale(0.9);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
 .home-view .ivu-col {
   margin-bottom: 20px !important;
 }
@@ -52,6 +100,19 @@
     left: 78%;
   }
 }
+@media screen and (max-width: 1280px) {
+  .home-view .myTestProgressNum {
+    left: 75%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .home-view .myTestProgress {
+    width: 81%;
+  }
+  .home-view .myTestProgressNum {
+    left: 83%;
+  }
+}
 .home-view .myTestProgressContent {
   animation: born 0.5s ease-out;
   position: relative;
@@ -67,6 +128,9 @@
   box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.1);
   border: 1px solid rgba(0, 0, 0, 0.2);
 }
+.home-view .ivu-card:hover {
+  box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.2);
+}
 .home-view .ivu-card-head p {
   color: #575757 !important;
 }
@@ -98,12 +162,28 @@
 .home-view .calenderCard .ivu-card-body {
   /*background: linear-gradient(270deg, #eeeeee, #ffffff);*/
   padding: 28px;
+  padding-bottom: 0px;
+  overflow: hidden;
+  height: auto;
+}
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .home-view .calenderCard .ivu-card-body {
+    padding: 20px;
+    padding-bottom: 0px;
+  }
+}
+.home-view .calenderCard .title {
+  font-weight: bolder;
+}
+.home-view .calenderCard .title-rect-name {
+  color: #515a6e;
 }
 .home-view .calenderCard .classtitle {
   font-size: 18px;
   font-family: Arial Rounded MT Bold;
   margin-top: 18px;
   animation: fadein 1s;
+  color: #515a6e;
 }
 .home-view .calenderCard .time {
   margin-top: 18px;
@@ -117,50 +197,71 @@
   margin-bottom: 40px;
   animation: fadein 2s;
 }
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .home-view .calenderCard .classtitle,
+  .home-view .calenderCard .time,
+  .home-view .calenderCard .place {
+    font-size: 15px;
+  }
+  .home-view .calenderCard .classtitle,
+  .home-view .calenderCard .time {
+    margin-top: 8px;
+  }
+  .home-view .calenderCard .place {
+    margin-bottom: 16px;
+  }
+}
 .home-view .calenderCard .todaydayline {
   margin-top: 18px;
 }
 .home-view .calenderCard .todaydaylineList {
-  margin: 10px -28px -10px -28px;
+  margin: 10px -28px -15px -28px;
+  padding-bottom: 0px;
+}
+.home-view .calenderCard .todaydaylineList .list-block {
+  height: auto;
+  padding-bottom: 40px;
+  overflow: auto;
 }
 .home-view .calenderCard .todaydaylineList .list-item {
   list-style-type: none;
+  padding: 15px 10px 15px 30px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   width: 100%;
-  height: 88px;
-  padding: 20px;
+}
+.home-view .calenderCard .todaydaylineList .list-item li {
+  vertical-align: top;
+  display: inline-block;
+  position: relative;
 }
 .home-view .calenderCard .todaydaylineList .list-item a {
   color: #636363;
 }
 .home-view .calenderCard .todaydaylineList .list-item:hover {
   background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
+  color: #03966a;
   cursor: pointer;
 }
 .home-view .calenderCard .todaydaylineList .list-item:hover a {
   color: #03966a !important;
 }
 .home-view .calenderCard .todaydaylineList .list-item .list-item-info {
-  width: 60%;
-  margin-top: -4px;
-}
-.home-view .calenderCard .todaydaylineList .list-item .list-item-icon {
-  padding-right: 6%;
-  padding-left: 2.5%;
+  width: 90%;
+  padding: 0px 20px 0px 30px;
+  position: relative;
 }
 .home-view .calenderCard .todaydaylineList .list-item .list-item-icon * {
+  margin-top: 2px;
   height: 40px;
   width: 40px;
 }
 .home-view .calenderCard .todaydaylineList .list-item .list-item-title {
-  padding: 3px 10px;
+  padding: 0px 10px;
   margin: 0px 8px 0px -10px;
   font-weight: bolder;
   font-size: 14px;
-  line-height: 14px;
+  line-height: 22px;
   overflow: hidden;
-  white-space: nowrap;
-  text-overflow: ellipsis;
 }
 .home-view .calenderCard .todaydaylineList .list-item .list-item-title .list-item-typeMark {
   text-align: center;
@@ -175,3 +276,28 @@
   margin: 0px -28px;
   margin-bottom: -9px;
 }
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .calenderCard .list-block {
+    height: auto;
+    margin-bottom: 2px;
+    max-height: 170px !important;
+    overflow: scroll;
+  }
+  .todaydaylinewraptitle {
+    margin: 0px -20px !important;
+    padding: 20px 20px 10px 18px !important;
+  }
+  .todaydaylineList {
+    margin: 0px -20px !important;
+  }
+  .title-rect {
+    height: 16px !important;
+    top: -2px !important;
+  }
+  .title-rect-name:last-child {
+    top: -6px !important;
+  }
+  .title-rect-name {
+    font-size: 16px !important;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/home-view.less

@@ -1,7 +1,10 @@
+@import 'color.less';
+
 .home-view {
   padding: 1.875rem;
   padding-bottom: 56px;
-  height: auto;
+  min-height: 95.9vh;
+
   .title {
     position: relative;
     top: 0px;
@@ -16,6 +19,55 @@
     top: 2px;
     padding: 1px;
   }
+  .spanAllchartIconNow,
+  .spanAllchartIcon {
+    height: 20px;
+    width: 20px;
+    padding: 1px;
+  }
+  .spanAllchartBtn {
+    cursor: pointer;
+    font-weight: bolder;
+    position: absolute;
+    right: 10px;
+    display: inline-block;
+    margin-right: 6px;
+    margin-left: 2px;
+    top: 16px;
+    z-index: 2;
+    .spanAllchartIconNow,
+    &:hover {
+      color: @secondary;
+    }
+  }
+
+  .spanAllchartBtn.isOpen {
+    position: absolute;
+    top: -34px !important;
+  }
+  .allcharts {
+    animation: spanDown 0.5s;
+    transition: 0.2s;
+    text-align: center;
+    background-color: #fff;
+    padding: 50px 15px;
+    padding-bottom: 0px;
+    box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.1);
+    border-radius: 4px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+    h3 {
+      padding-top: 0px;
+      margin-bottom: -40px;
+    }
+  }
+  @keyframes spanDown {
+    0% {
+      transform: scale(0.9);
+    }
+    100% {
+      transform: scale(1);
+    }
+  }
 
   .ivu-col {
     margin-bottom: 20px !important;
@@ -54,6 +106,19 @@
       left: 78%;
     }
   }
+  @media screen and (max-width: 1280px) {
+    .myTestProgressNum {
+      left: 75%;
+    }
+  }
+  @media screen and (max-width: 767px) {
+    .myTestProgress {
+      width: 81%;
+    }
+    .myTestProgressNum {
+      left: 83%;
+    }
+  }
   .myTestProgressContent {
     animation: born 0.5s ease-out;
 
@@ -69,6 +134,9 @@
   .ivu-card {
     box-shadow: 0px 2px 13px rgba(0, 0, 0, 0.1);
     border: 1px solid rgba(0, 0, 0, 0.2);
+    &:hover {
+      box-shadow: 0px 2px 30px rgba(0, 0, 0, 0.2);
+    }
   }
   .ivu-card-head p {
     color: #575757 !important;
@@ -103,12 +171,27 @@
     .ivu-card-body {
       /*background: linear-gradient(270deg, #eeeeee, #ffffff);*/
       padding: 28px;
+      padding-bottom: 0px;
+      overflow: hidden;
+      height: auto;
+      @media screen and (max-width: 1280px) and (min-width: 992px) {
+        padding: 20px;
+
+        padding-bottom: 0px;
+      }
+    }
+    .title {
+      font-weight: bolder;
+    }
+    .title-rect-name {
+      color: #515a6e;
     }
     .classtitle {
       font-size: 18px;
       font-family: Arial Rounded MT Bold;
       margin-top: 18px;
       animation: fadein 1s;
+      color: #515a6e;
     }
     .time {
       margin-top: 18px;
@@ -122,57 +205,81 @@
       margin-bottom: 40px;
       animation: fadein 2s;
     }
+    @media screen and (max-width: 1280px) and (min-width: 992px) {
+      .classtitle,
+      .time,
+      .place {
+        font-size: 15px;
+      }
+      .classtitle,
+      .time {
+        margin-top: 8px;
+      }
+      .place {
+        margin-bottom: 16px;
+      }
+    }
     .todaydayline {
       margin-top: 18px;
     }
     .todaydaylineList {
-      margin: 10px -28px -10px -28px;
+      margin: 10px -28px -15px -28px;
+      padding-bottom: 0px;
 
+      .list-block {
+        height: auto;
+        padding-bottom: 40px;
+        //max-height: 200px;
+        overflow: auto;
+      }
       .list-item {
-        
         list-style-type: none;
-       
+        width: 100%;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+        padding: 15px 10px 15px 30px;
+        li {
+          vertical-align: top; //所有元素靠上對齊
+          display: inline-block;
+          position: relative;
+        }
         a {
           color: rgb(99, 99, 99);
-          
         }
         &:hover {
           background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-
+          color: #03966a;
           cursor: pointer;
+
           a {
             color: #03966a !important;
           }
         }
         .list-item-info {
-          width: 60%;
-          margin-top: -4px;
-        
+          width: 90%;
+          padding: 0px 20px 0px 30px;
+          position: relative;
         }
         border-bottom: 1px solid rgba(0, 0, 0, 0.1);
         width: 100%;
-        height: 88px;
-        padding: 20px;
+
         //background: linear-gradient(270deg, #eeeeee, #ffffff);
 
         .list-item-icon {
-          padding-right: 6%;
-          padding-left: 2.5%;
           * {
+            margin-top: 2px;
             height: 40px;
             width: 40px;
           }
         }
         .list-item-title {
-          padding: 3px 10px;
+          padding: 0px 10px;
           margin: 0px 8px 0px -10px;
           font-weight: bolder;
           font-size: 14px;
-          line-height: 14px;
+          line-height: 22px;
           //多出來的字以點點表示
           overflow: hidden;
-          white-space: nowrap;
-          text-overflow: ellipsis;
+
           //多出來的字以點點表示
           .list-item-typeMark {
             text-align: center;
@@ -180,9 +287,7 @@
             border-radius: 10px;
           }
         }
-        
       }
-      
     }
     .todaydaylinewraptitle {
       background-color: #fff;
@@ -194,3 +299,30 @@
     }
   }
 }
+@media screen and (max-width: 1280px) and (min-width: 992px) {
+  .calenderCard {
+    .list-block {
+      height: auto;
+      margin-bottom: 2px;
+      max-height: 170px !important;
+      overflow: scroll;
+    }
+  }
+  .todaydaylinewraptitle {
+    margin: 0px -20px !important;
+    padding: 20px 20px 10px 18px !important;
+  }
+  .todaydaylineList {
+    margin: 0px -20px !important;
+  }
+  .title-rect {
+    height: 16px !important;
+    top: -2px !important;
+  }
+  .title-rect-name:last-child {
+    top: -6px !important;
+  }
+  .title-rect-name {
+    font-size: 16px !important;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/homework-feedback.css

@@ -11,25 +11,70 @@
   position: relative;
   overflow: auto;
 }
+@media screen and (max-width: 1280px) {
+  .homework-feedback .classmates-area {
+    height: 380px;
+  }
+}
 .homework-feedback .classmates-comment,
 .homework-feedback .teacher-comment {
-  background-color: #e5e5e5;
+  background-color: #ffffff;
+  box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
   border-radius: 7px;
+  width: 100%;
   padding: 18px 28px 40px 28px;
 }
+.homework-feedback .teacher-avatar,
+.homework-feedback .classmates-avatar {
+  width: 30px;
+  height: 30px;
+  margin-left: -2px;
+  border-radius: 50%;
+  margin-bottom: 1px;
+}
+.homework-feedback .teacher-name {
+  font-weight: bolder;
+  position: relative;
+  top: -11px;
+  left: -10px;
+  color: #00ad6c;
+}
+.homework-feedback .classmates-name {
+  font-weight: bolder;
+  position: relative;
+  top: -11px;
+  left: -14px;
+  color: #00ad6c;
+}
+.homework-feedback .classmates-comment {
+  margin-top: -10px;
+}
+@media screen and (max-width: 1280px) {
+  .homework-feedback .classmates-comment:first-child {
+    margin-top: -2px !important;
+  }
+}
 .homework-feedback .classmates-score {
   position: relative;
   text-align: center;
 }
 .homework-feedback .classmates-score .number {
   color: rgba(0, 0, 0, 0.85);
-  font-size: 80px;
+  font-size: 60px;
   position: relative;
-  left: -18px;
+  left: -10px;
 }
 .homework-feedback .difficulty-rate {
   position: relative;
   top: -40px;
   height: 20px;
-  left: -14px;
+  left: -7px;
+}
+@media screen and (max-width: 1280px) {
+  .homework-feedback .difficulty-rate {
+    top: -25px;
+  }
+}
+.homework-feedback .title-rect-group {
+  margin-top: 25px;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/homework-feedback.less

@@ -1,38 +1,85 @@
+@import './color.less';
+
 .homework-feedback {
   .teacher-score {
     text-align: center;
     font-size: 24px;
     .number {
-      color: #24b880;
+      color: @primary;
       font-size: 80px;
     }
   }
-  .classmates-area{
-    height:650px;
+  .classmates-area {
+    height: 650px;
     position: relative;
     overflow: auto;
+    @media screen and (max-width: 1280px) {
+      height: 380px;
+    }
   }
   .classmates-comment,
   .teacher-comment {
-    background-color: #e5e5e5;
+    background-color: #ffffff;
+    box-shadow: 1px 1px 13px rgba(0, 0, 0, 0.05);
     border-radius: 7px;
+    width: 100%;
     padding: 18px 28px 40px 28px;
   }
-  .classmates-score {
+  .teacher-avatar,.classmates-avatar{
+    width:30px;
+    height: 30px;
+    margin-left:-2px;
+    border-radius: 50%;
+    margin-bottom:1px;
    
+  }
+  .teacher-name{
+    font-weight: bolder;
+    position: relative;
+    top:-11px;
+    left: -10px;
+    color: @secondary;
+    
+  }
+  .classmates-name{
+    font-weight: bolder;
+    position: relative;
+    top:-11px;
+    left: -14px;
+    color: @secondary;
+    
+  }
+  .classmates-comment {
+    margin-top: -10px;
+    @media screen and (max-width: 1280px) {
+
+      &:first-child {
+        margin-top: -2px !important;
+      }
+    }
+  }
+  .classmates-score {
     position: relative;
     text-align: center;
     .number {
       color: rgba(0, 0, 0, 0.85);
-      font-size: 80px;
+      font-size: 60px;
       position: relative;
-      left: -18px;
+      left: -10px;
     }
   }
   .difficulty-rate {
     position: relative;
     top: -40px;
     height: 20px;
-    left: -14px;
+    left: -7px;
+    @media screen and (max-width: 1280px) {
+      top: -25px;
+      
+    }
+  }
+  
+  .title-rect-group {
+    margin-top: 25px;
   }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/homework.css

@@ -1,3 +1,6 @@
+.homework .uploadMessage {
+  margin-top: 20px;
+}
 .homework .uploadSuccessIcon {
   font-size: 70px;
   margin: 5px auto;
@@ -14,7 +17,16 @@
 .homework .upload-item li {
   list-style: none;
 }
+.homework .upload-item:hover {
+  background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
+  border: 1px solid #03966a;
+}
+.homework .upload-item:hover .upload-item-icon,
+.homework .upload-item:hover .upload-item-info {
+  color: #03966a !important;
+}
 .homework .upload-item .upload-item-icon {
+  color: #515a6e;
   text-align: center;
   display: inline-block;
   width: 25%;
@@ -22,6 +34,7 @@
   margin-left: -10px;
 }
 .homework .upload-item .upload-item-info {
+  color: #515a6e;
   display: inline-block;
   width: 70%;
 }
@@ -51,6 +64,10 @@
   color: #03966a;
   border: 2px solid #03966a;
 }
+.homework .upload-item-selected .upload-item-icon,
+.homework .upload-item-selected .upload-item-name {
+  color: #03966a;
+}
 .homework .ivu-tabs-nav {
   float: left !important;
   position: relative;
@@ -61,7 +78,7 @@
   text-align: center !important;
   font-size: 24px;
   margin: 0px 10px;
-  width: 140px;
+  width: auto;
 }
 .homework .ivu-tabs-tab:hover {
   text-align: center !important;
@@ -72,7 +89,7 @@
   font-weight: bolder;
   border-bottom: 5px solid #24b880 !important;
   margin: 0px 10px;
-  width: 140px;
+  width: auto;
 }
 .homework .ivu-tabs-ink-bar {
   height: 0px;
@@ -82,3 +99,37 @@
   overflow-x: hidden;
   height: auto;
 }
+.homework .homework-detail .myProgressBar {
+  width: 100%;
+  padding-top: 2px;
+}
+.homework .homework-detail .myProgressBar .myTestProgressContent {
+  position: relative;
+  background: #c0c0c0;
+  margin-top: 5px;
+  height: 8px;
+  border-radius: 4px;
+}
+.homework .homework-detail .myProgressBar .myTestProgress {
+  height: 8px;
+  animation: 2s widthborn ease-in;
+  position: relative;
+  top: -8px;
+  background: #24b880;
+  border-radius: 4px;
+}
+@keyframes widthborn {
+  0% {
+    width: 0%;
+  }
+  100% {
+    width: 100%;
+  }
+}
+.homework .homework-detail .uploading-item-icon {
+  position: relative;
+}
+.homework .homework-detail .uploading-item-info {
+  position: relative;
+  top: -12px;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/homework.less

@@ -1,4 +1,9 @@
+@import "color.less";
+
 .homework {
+  .uploadMessage{
+    margin-top:20px;
+  }
   .uploadSuccessIcon {
     font-size: 70px;
     margin: 5px auto;
@@ -14,8 +19,16 @@
     li {
       list-style: none;
     }
-
+    &:hover {
+      background: @bgcHover;
+      .upload-item-icon,
+      .upload-item-info {
+        color: @titleHover !important;
+      }
+      border: 1px solid @titleHover;
+    }
     .upload-item-icon {
+      color: #515a6e;
       text-align: center;
       display: inline-block;
       width: 25%;
@@ -23,6 +36,7 @@
       margin-left: -10px;
     }
     .upload-item-info {
+      color: #515a6e;
       display: inline-block;
       width: 70%;
     }
@@ -50,9 +64,13 @@
   }
 
   .upload-item-selected {
-    background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-    color: #03966a;
-    border: 2px solid #03966a;
+    background: @bgcHover;
+    color: @titleHover;
+    border: 2px solid @titleHover;
+    .upload-item-icon,
+    .upload-item-name {
+      color: @titleHover;
+    }
   }
   //評量成績報告的分頁組件
   .ivu-tabs-nav {
@@ -66,18 +84,18 @@
     text-align: center !important;
     font-size: 24px;
     margin: 0px 10px;
-    width: 140px;
+    width: auto;
   }
   .ivu-tabs-tab:hover {
     text-align: center !important;
-    color: #24b880 !important;
+    color: @primary !important;
   }
   .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
-    color: #24b880 !important;
+    color: @primary !important;
     font-weight: bolder;
-    border-bottom: 5px solid #24b880 !important;
+    border-bottom: 5px solid @primary !important;
     margin: 0px 10px;
-    width: 140px;
+    width: auto;
   }
   .ivu-tabs-ink-bar {
     height: 0px;
@@ -87,4 +105,43 @@
     overflow-x: hidden;
     height: auto;
   }
+  .homework-detail {
+    .myProgressBar {
+      width: 100%;
+      padding-top:2px;
+      .myTestProgressContent {
+        position: relative;
+        background: rgb(192, 192, 192);
+        margin-top: 5px;
+        height: 8px;
+        border-radius: 4px;
+      }
+      .myTestProgress {
+        height: 8px;
+        animation: 2s  widthborn ease-in;
+        position: relative;
+        top: -8px;
+        background: @primary;
+        border-radius: 4px;
+      }
+
+    }
+    @keyframes widthborn {
+      0%{
+        width: 0%;
+      }
+      100%{
+        width: 100%;
+      }
+    }
+    .uploading-item-icon{
+      position: relative;
+      
+    }
+    .uploading-item-info{
+      position: relative;
+      top:-12px;
+    }
+   
+  }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/inform-content.css

@@ -2,7 +2,7 @@
   float: right;
   width: 75%;
   padding: 2% 3%;
-  height: 95.9vh;
+  height: 100%;
   padding-bottom: 50px;
   overflow: auto;
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/inform-content.less

@@ -5,7 +5,7 @@
   @media screen and (max-width: 1200px){
     padding-top:4.5% !important;
   }
-  height: 95.9vh;
+  height: 100%;
   padding-bottom: 50px;
   overflow: auto;
   .uploadBtn {

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/inform-list.less

@@ -1,6 +1,7 @@
+@import 'color.less';
 .inform-list {
     .teacher-name{
-        color: #24b880;
+        color: @primary;
         font-weight: bolder;
     }
  .list-block{

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/lesson-test.css

@@ -7,7 +7,7 @@
   text-align: center !important;
   font-size: 24px;
   margin: 0px 10px;
-  width: 140px;
+  width: auto;
 }
 .lesson-test .ivu-tabs-tab:hover {
   text-align: center !important;
@@ -18,7 +18,7 @@
   font-weight: bolder;
   border-bottom: 5px solid #24b880 !important;
   margin: 0px 10px;
-  width: 140px;
+  width: auto;
 }
 .lesson-test .ivu-tabs-ink-bar {
   height: 0px;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/lesson-test.less

@@ -1,3 +1,5 @@
+@import 'color.less';
+
 .lesson-test {
 
   //評量成績報告的分頁組件
@@ -11,18 +13,18 @@
     text-align: center !important;
     font-size: 24px;
     margin: 0px 10px;
-    width: 140px;
+    width: auto;
   }
   .ivu-tabs-tab:hover {
     text-align: center !important;
-    color: #24b880 !important;
+    color: @primary !important;
   }
   .ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
-    color: #24b880 !important;
+    color: @primary !important;
     font-weight: bolder;
-    border-bottom: 5px solid #24b880 !important;
+    border-bottom: 5px solid @primary !important;
     margin: 0px 10px;
-    width: 140px;
+    width: auto;
   }
   .ivu-tabs-ink-bar {
     height: 0px;

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/lesson-testpop.css

@@ -15,10 +15,47 @@
   color: #24b880;
   font-size: 20px;
   padding: 5px 15px;
+  position: relative;
   width: 100%;
   height: 38px;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+.lesson-test-pop .testTitle .ques-filter {
+  position: absolute;
+  right: 10%;
+  top: 3px;
+}
+@media screen and (max-width: 1366px) {
+  .lesson-test-pop .testTitle .ques-filter {
+    right: 15%;
+  }
+}
+@media screen and (max-width: 991px) {
+  .lesson-test-pop .testTitle .ques-filter {
+    right: 25%;
+  }
+}
+@media screen and (max-width: 767px) {
+  .lesson-test-pop .testTitle .ques-filter {
+    left: 38%;
+  }
+}
+.lesson-test-pop .testTitle .ques-filter .filter-text {
+  padding: 2px 7px;
+  border-radius: 4px;
+  color: #515a6e;
+  font-size: 14px;
+  font-weight: bolder;
+  background-color: rgba(0, 0, 0, 0.1);
+}
+@media screen and (max-width: 1366px) {
+  .lesson-test-pop .testTitle .ques-filter .filter-text {
+    right: 20%;
+  }
+}
+.lesson-test-pop .testTitle .ques-filter .filter-only {
+  color: #00ad6c;
+}
 .lesson-test-pop .logoutIcon {
   color: gray;
   cursor: pointer;
@@ -27,6 +64,22 @@
 .lesson-test-pop .testTitleText {
   font-weight: 900;
 }
+@media screen and (max-width: 991px) {
+  .lesson-test-pop .testTitleText .testTitleTextContent {
+    display: none;
+  }
+}
+.lesson-test-pop .practice-mode {
+  margin: 0px 10px;
+  background-color: rgba(0, 0, 0, 0.1);
+  font-weight: bolder;
+  font-size: 14px;
+  padding: 2px 7px;
+  top: -3px;
+  position: relative;
+  border-radius: 4px;
+  color: #515a6e;
+}
 .lesson-test-pop .myProgressBar {
   position: fixed;
   right: 14%;
@@ -38,6 +91,11 @@
     right: 20%;
   }
 }
+@media screen and (max-width: 991px) {
+  .lesson-test-pop .myProgressBar {
+    right: 23%;
+  }
+}
 @media screen and (max-width: 767px) {
   .lesson-test-pop .myProgressBar {
     right: 30%;
@@ -72,6 +130,9 @@
   font-size: 10pt;
   color: gray;
 }
+.lesson-test-pop .myTestProgressNumEn {
+  left: 50%;
+}
 .lesson-test-pop .myTestProgresstitle {
   left: -30%;
   z-index: 3;
@@ -81,15 +142,24 @@
   font-size: 10pt;
   color: gray;
 }
+.lesson-test-pop .myTestProgresstitleEn {
+  left: -60%;
+}
 @media screen and (max-width: 1366px) {
   .lesson-test-pop .myTestProgresstitle {
     left: -40%;
   }
+  .lesson-test-pop .myTestProgressNumEn {
+    display: none;
+  }
   .lesson-test-pop .myTestProgressNum {
     left: 75%;
   }
+  .lesson-test-pop .myTestProgressNumEn {
+    display: none;
+  }
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .lesson-test-pop .myTestProgresstitle {
     left: -60%;
   }
@@ -98,6 +168,7 @@
   }
 }
 .lesson-test-pop .submitBtn {
+  outline: none;
   width: 100px;
   position: absolute;
   height: 24px;
@@ -145,7 +216,7 @@
   background-color: #ffffff;
   left: 0px;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .lesson-test-pop .questionArea {
     height: auto;
   }
@@ -158,12 +229,12 @@
   color: #6d7278;
   border-radius: 5px;
   text-align: center;
-  width: 80px;
+  max-width: 100px;
   margin-bottom: 12px;
 }
 .lesson-test-pop .questioDes {
   font-weight: 900;
-  font-size: 14pt;
+  font-size: 14px;
 }
 @media screen and (max-width: 767px) {
   .lesson-test-pop .questioDes {
@@ -191,6 +262,43 @@
 .lesson-test-pop .hintwrap:hover {
   color: #24b880 !important;
 }
+.lesson-test-pop .hintwrap:hover + .hint-content {
+  display: block;
+  position: absolute;
+  right: 80px;
+  top: 30px;
+  background-color: #fff;
+  border-radius: 4px;
+  padding: 20px;
+  padding-bottom: 25px;
+  box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
+}
+.lesson-test-pop .hintwrap:hover + .hint-content .triangle {
+  position: absolute;
+  right: -8px;
+  top: 5px;
+  width: 0;
+  height: 0;
+  border-style: solid;
+  border-width: 6px 0 6px 8.7px;
+  border-color: transparent transparent transparent #ffffff;
+}
+.lesson-test-pop .hintwrap:hover + .hint-content .hint-content-list {
+  font-weight: bolder;
+}
+.lesson-test-pop .hintwrap:hover + .hint-content .hint-content-list .hint-list-item {
+  display: inline-block;
+  list-style: none;
+  background-color: #64ae16;
+  border-radius: 4px;
+  color: white;
+  margin-right: 4px;
+  margin-top: 6px;
+  padding: 5px 10px;
+}
+.lesson-test-pop .hint-content {
+  display: none;
+}
 .lesson-test-pop .ansArea {
   position: fixed;
   height: 100%;
@@ -199,7 +307,7 @@
   box-shadow: -5px 2px 13px rgba(0, 0, 0, 0.1);
   right: 0px;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 991px) {
   .lesson-test-pop .ansArea {
     position: relative;
   }
@@ -310,7 +418,7 @@
     width: 80%;
   }
 }
-.lesson-test-pop .ansSheet th {
+.lesson-test-pop .ansSheet .ansSheetQno {
   border: 2px solid rgba(117, 117, 117, 0.726);
   border-collapse: collapse;
   font-weight: 500;
@@ -319,7 +427,7 @@
   padding: 2px 20px;
   height: 30px;
 }
-.lesson-test-pop .ansSheet th:hover {
+.lesson-test-pop .ansSheet .ansSheetQno:hover {
   color: #24b880;
   font-size: 16px;
   padding: 2px 20px;
@@ -336,3 +444,32 @@
   font-weight: 900;
   color: #000000;
 }
+.lesson-test-pop .ansSheet .rightAnstitle {
+  text-align: center;
+  font-weight: 900;
+}
+.lesson-test-pop .ansSheet .rightAnstext {
+  text-align: center;
+  font-weight: 900;
+  color: #24b880;
+}
+.lesson-test-pop .ansSheet .wrong-ans {
+  color: red;
+}
+.lesson-test-pop .md-ansSheetGroup {
+  margin-top: 10%;
+}
+@media screen and (max-width: 991px) {
+  .lesson-test-pop .md-ansSheetGroup {
+    display: none;
+  }
+}
+.lesson-test-pop .sm-ansSheetGroup {
+  margin-left: 7%;
+  margin-bottom: 10%;
+}
+@media screen and (min-width: 992px) {
+  .lesson-test-pop .sm-ansSheetGroup {
+    display: none;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/lesson-testpop.less

@@ -15,9 +15,41 @@
     color: #24b880;
     font-size: 20px;
     padding: 5px 15px;
+    position: relative;
     width: 100%;
     height: 38px;
     border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    .ques-filter {
+      position: absolute;
+      right: 10%;
+      top: 3px;
+      @media screen and (max-width: 1366px) {
+        right: 15%;
+      }
+      @media screen and (max-width: 991px) {
+        right: 25%;
+      }
+      @media screen and (max-width: 767px) {
+        left: 38%;
+      }
+
+      .filter-text {
+        padding: 2px 7px;
+
+        border-radius: 4px;
+        color: #515a6e;
+        font-size: 14px;
+        font-weight: bolder;
+
+        background-color: rgba(0, 0, 0, 0.1);
+        @media screen and (max-width: 1366px) {
+          right: 20%;
+        }
+      }
+      .filter-only {
+        color: #00ad6c;
+      }
+    }
   }
   .logoutIcon {
     color: gray;
@@ -26,6 +58,22 @@
   }
   .testTitleText {
     font-weight: 900;
+    .testTitleTextContent {
+      @media screen and (max-width: 991px) {
+        display: none;
+      }
+    }
+  }
+  .practice-mode {
+    margin: 0px 10px;
+    background-color: rgba(0, 0, 0, 0.1);
+    font-weight: bolder;
+    font-size: 14px;
+    padding: 2px 7px;
+    top: -3px;
+    position: relative;
+    border-radius: 4px;
+    color: #515a6e;
   }
   //進度條
   .myProgressBar {
@@ -36,6 +84,9 @@
     @media screen and (max-width: 1366px) {
       right: 20%;
     }
+    @media screen and (max-width: 991px) {
+      right: 23%;
+    }
     @media screen and (max-width: 767px) {
       right: 30%;
     }
@@ -68,6 +119,9 @@
     font-size: 10pt;
     color: gray;
   }
+  .myTestProgressNumEn {
+    left: 50%;
+  }
   .myTestProgresstitle {
     left: -30%;
     z-index: 3;
@@ -78,15 +132,24 @@
     font-size: 10pt;
     color: gray;
   }
+  .myTestProgresstitleEn {
+    left: -60%;
+  }
   @media screen and (max-width: 1366px) {
     .myTestProgresstitle {
       left: -40%;
     }
+    .myTestProgressNumEn{
+      display: none;
+    }
     .myTestProgressNum {
       left: 75%;
     }
+    .myTestProgressNumEn{
+      display: none;
+    }
   }
-  @media screen and (max-width: 767px) {
+  @media screen and (max-width: 991px) {
     .myTestProgresstitle {
       left: -60%;
     }
@@ -97,6 +160,7 @@
 
   //送出按鈕
   .submitBtn {
+    outline: none;
     width: 100px;
     position: absolute;
     height: 24px;
@@ -147,7 +211,7 @@
     height: 95.5vh;
     background-color: rgb(255, 255, 255);
     left: 0px;
-    @media screen and (max-width: 767px){
+    @media screen and (max-width: 991px) {
       height: auto;
     }
   }
@@ -160,19 +224,19 @@
     color: rgb(109, 114, 120);
     border-radius: 5px;
     text-align: center;
-    width: 80px;
+    max-width: 100px;
     margin-bottom: 12px;
   }
   .questioDes {
     font-weight: 900;
-    font-size: 14pt;
+    font-size: 14px;
     @media screen and (max-width: 767px) {
       font-size: 12px;
     }
   }
   .questionDesImg {
     margin-top: 40px;
-    @media screen and (max-width: 767px){
+    @media screen and (max-width: 767px) {
       width: 40%;
       margin-top: 20px;
     }
@@ -191,6 +255,44 @@
       color: #24b880 !important;
     }
   }
+  .hintwrap:hover + .hint-content {
+    display: block;
+    position: absolute;
+    right: 80px;
+    top: 30px;
+    background-color: #fff;
+    border-radius: 4px;
+    padding: 20px;
+    padding-bottom: 25px;
+    box-shadow: 1px 2px 10px rgba(0, 0, 0, 0.1);
+
+    .triangle {
+      position: absolute;
+      right: -8px;
+      top: 5px;
+      width: 0;
+      height: 0;
+      border-style: solid;
+      border-width: 6px 0 6px 8.7px;
+      border-color: transparent transparent transparent #ffffff;
+    }
+    .hint-content-list {
+      font-weight: bolder;
+      .hint-list-item {
+        display: inline-block;
+        list-style: none;
+        background-color: #64ae16;
+        border-radius: 4px;
+        color: white;
+        margin-right: 4px;
+        margin-top: 6px;
+        padding: 5px 10px;
+      }
+    }
+  }
+  .hint-content {
+    display: none;
+  }
 
   //答題區
   .ansArea {
@@ -200,7 +302,7 @@
     background-color: rgb(250, 250, 250);
     box-shadow: -5px 2px 13px rgba(0, 0, 0, 0.1);
     right: 0px;
-    @media screen and (max-width: 767px) {
+    @media screen and (max-width: 991px) {
       position: relative;
     }
   }
@@ -316,7 +418,7 @@
       font-size: 10px;
       width: 80%;
     }
-    th {
+    .ansSheetQno {
       border: 2px solid rgba(117, 117, 117, 0.726);
       border-collapse: collapse;
       font-weight: 500;
@@ -343,5 +445,31 @@
       font-weight: 900;
       color: #000000;
     }
+    .rightAnstitle {
+      text-align: center;
+      font-weight: 900;
+    }
+    .rightAnstext {
+      text-align: center;
+      font-weight: 900;
+      color: #24b880;
+    }
+    .wrong-ans {
+      color: red;
+    }
+  }
+  .md-ansSheetGroup {
+    margin-top: 10%;
+    @media screen and (max-width: 991px) {
+      display: none;
+    }
+  }
+  .sm-ansSheetGroup {
+    margin-left: 7%;
+
+    margin-bottom: 10%;
+    @media screen and (min-width: 992px) {
+      display: none;
+    }
   }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/mission-list-card.css

@@ -1,63 +1,78 @@
 /*修改iviewCard控件，局部清單修正*/
+.mission-list-card .mission-list-card-title {
+  display: block;
+  position: relative;
+  z-index: 4;
+  top: 16px;
+  left: 15px;
+  font-weight: 700;
+  margin-bottom: -24px;
+  font-size: 16px;
+  color: #575757;
+}
+.mission-list-card .mission-list-card-title .title {
+  top: -1px;
+  left: -4px;
+}
 .mission-list-card .ivu-card-body {
-  height: 780px;
+  height: 0;
   padding: 0px;
+  padding-bottom: 80vh;
   overflow: hidden;
-  margin-bottom: 0px;
+}
+@media screen and (min-width: 1808px) {
+  .mission-list-card .ivu-card-body .list-item-info {
+    width: 78% !important;
+  }
 }
 @media screen and (max-width: 1366px) {
-  .mission-list-card .ivu-card-body {
-    height: 650px;
+  .mission-list-card .ivu-card-body .list-item-info .list-item-title {
+    font-size: 12px !important;
+  }
+}
+@media screen and (max-width: 1086px) and (min-width: 992px) {
+  .mission-list-card .ivu-card-body .list-item-info {
+    width: 50% !important;
+  }
+}
+@media screen and (max-width: 630px) {
+  .mission-list-card .ivu-card-body .list-item-info {
+    width: 70% !important;
+  }
+}
+@media screen and (min-width: 1808px) {
+  .mission-list-card .ivu-card-body .list-item-infonoPie {
+    width: 92% !important;
+  }
+}
+@media screen and (max-width: 1807px) and (min-width: 992px) {
+  .mission-list-card .ivu-card-body .list-item-infonoPie {
+    width: 80% !important;
+  }
+}
+@media screen and (max-width: 992px) and (min-width: 768px) {
+  .mission-list-card .ivu-card-body .list-item-infonoPie {
+    width: 85% !important;
   }
 }
 .mission-list-card .list {
   position: relative;
-  height: auto;
   width: 100%;
   box-shadow: none;
 }
-.mission-list-card .list-block {
+.mission-list-card .list .list-block {
   border-top: 1px solid rgba(0, 0, 0, 0.15);
   margin-top: 50px;
 }
-.mission-list-card .list-item:hover a {
+.mission-list-card .list .list-item:hover a {
   color: #03966a;
 }
-.mission-list-card .list-item-unDone {
-  right: 0% !important;
-}
-.mission-list-card .mission-list-card-title {
-  display: block;
-  position: relative;
-  z-index: 3;
-  top: 16px;
-  left: 15px;
-  font-weight: 700;
-  margin-bottom: -24px;
-  font-size: 16px;
-  color: #575757;
-}
-.mission-list-card .mission-list-card-title .title {
-  top: -1px;
-  left: -4px;
-}
 .mission-list-card .ivu-scroll-container {
-  height: 800px !important;
-  padding-bottom: 200px !important;
-  width: 100%;
+  height: 80vh !important;
+  padding-bottom: 150px;
   padding-top: 0px !important;
   overflow: auto;
 }
-@media screen and (max-width: 1366px) {
-  .mission-list-card .ivu-scroll-container {
-    height: 700px !important;
-  }
-}
-@media screen and (max-width: 767px) {
-  .mission-list-card .ivu-scroll-container {
-    height: auto;
-  }
-}
 .mission-list-card .ivu-scroll-container .ivu-spin-text {
   color: #24b880;
   font-weight: bolder;
@@ -65,11 +80,3 @@
 .mission-list-card .ivu-scroll-container .ivu-scroll-loader {
   margin-top: -10px;
 }
-@media screen and (max-width: 767px) {
-  .mission-list-card .mission-list-card-title {
-    z-index: 4;
-  }
-  .mission-list-card .list-item-info {
-    width: 65% !important;
-  }
-}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/mission-list-card.less

@@ -1,38 +1,11 @@
+@import 'color.less';
+
 /*修改iviewCard控件，局部清單修正*/
 .mission-list-card {
-  .ivu-card-body {
-    height: 780px;
-
-    padding: 0px;
-    overflow: hidden;
-    margin-bottom: 0px;
-    @media screen and (max-width: 1366px) {
-      height: 650px;
-    }
-  }
-
-  .list {
-    position: relative;
-    height: auto;
-    width: 100%;
-    box-shadow: none;
-  }
-  .list-block {
-    border-top: 1px solid rgba(0, 0, 0, 0.15);
-    margin-top: 50px;
-  }
-
-  .list-item:hover a {
-    color: #03966a;
-  }
-  .list-item-unDone {
-    right: 0% !important;
-  }
   .mission-list-card-title {
     display: block;
-
     position: relative;
-    z-index: 3;
+    z-index: 4;
     top: 16px;
     left: 15px;
     font-weight: 700;
@@ -44,36 +17,65 @@
       left: -4px;
     }
   }
-
-  .ivu-scroll-container {
-    height: 800px !important;
-    padding-bottom: 200px !important;
+  .ivu-card-body {
+    height: 0;
+    padding: 0px;
+    padding-bottom: 80vh;
+    overflow: hidden;
+    .list-item-info {
+      @media screen and (min-width: 1808px) {
+        width: 78% !important;
+      }
+      @media screen and (max-width: 1366px){
+        .list-item-title {
+          font-size: 12px !important;
+        } 
+      }
+      @media screen and (max-width: 1086px) and (min-width: 992px){
+        width: 50% !important;
+      }
+      @media screen and (max-width: 630px) {
+        width: 70% !important;
+      }
+    }
+    .list-item-infonoPie{
+      @media screen and (min-width: 1808px) {
+        width: 92% !important;
+      }
+      @media screen and (max-width: 1807px) and (min-width: 992px){
+        width: 80% !important;
+      }
+      @media screen and (max-width: 992px) and (min-width: 768px){
+        width: 85% !important;
+      }
+    }
+  }
+  
+  .list {
+    position: relative;
     width: 100%;
-    @media screen and (max-width: 1366px) {
-      height: 700px !important;
+    box-shadow: none;
+    .list-block {
+      border-top: 1px solid rgba(0, 0, 0, 0.15);
+      margin-top: 50px;
     }
-    @media screen and (max-width: 767px) {
-      height: auto;
+    .list-item:hover a {
+      color: #03966a;
     }
+    
+  }
 
+  .ivu-scroll-container {
+    height: 80vh !important;
+    padding-bottom: 150px;
     padding-top: 0px !important;
     overflow: auto;
     .ivu-spin-text {
-      color: #24b880;
+      color: @primary;
       font-weight: bolder;
     }
     .ivu-scroll-loader {
       margin-top: -10px;
     }
   }
-  //螢幕寬度拉伸斷點調適
-
-  @media screen and (max-width: 767px) {
-    .mission-list-card-title {
-      z-index: 4;
-    }
-    .list-item-info {
-      width: 65% !important;
-    }
-  }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/preview-mission.css

@@ -1,14 +1,28 @@
 .preview-mission {
   /*步驟條控件 */
 }
+.preview-mission .askBtn {
+  position: fixed;
+  right: 20px;
+  bottom: 30px;
+}
+@media screen and (min-width: 1366px) {
+  .preview-mission .askBtnfullscreen {
+    position: fixed;
+    right: 8.8%;
+    bottom: 3.4%;
+    background-color: #64ae16;
+    color: white;
+    line-height: 20px;
+  }
+}
 .preview-mission .preview-area {
   text-align: left;
   width: 100%;
   height: 560px;
   overflow-y: scroll;
   overflow-x: hidden;
-  background-color: #f5f5f5;
-  border: 1px solid rgba(128, 128, 128, 0.342);
+  background-color: #f1f1f1;
   border-radius: 4px;
   /**隨堂考測驗按鈕結束 */
   /*答題結果*/
@@ -243,6 +257,36 @@
   border-left: 3px solid #24b880;
   transition: 0.5s;
 }
+/*小屏幕步驟條控件 */
+.step-btn-smallscreen {
+  position: relative;
+  margin-bottom: 25px;
+}
+.step-btn-smallscreen .step-btn-group {
+  display: inline-block;
+  margin-right: 30px;
+  position: relative;
+}
+.step-btn-smallscreen .step-text-smallscreen {
+  font-weight: 900;
+  margin-top: 2px;
+  color: #858585 !important;
+}
+.step-btn-smallscreen .step-line-smallscreen {
+  border-bottom: 3px solid #c2c2c2;
+  top: -40px;
+  left: 30px;
+  width: 100px;
+  position: relative;
+}
+.step-btn-smallscreen .step-line-link-smallscreen {
+  border-bottom: 3px solid #24b880;
+  transition: 0.5s;
+}
+.step-btn-smallscreen .step-selected + .step-text-smallscreen {
+  color: #3d3d3d !important;
+  font-weight: 900;
+}
 @media screen and (max-width: 1733px) {
   .step-text {
     left: -6px;
@@ -258,3 +302,9 @@
     height: 450px !important;
   }
 }
+@media screen and (max-width: 1280px) {
+  .preview-area {
+    height: 415px !important;
+    margin-top: -10px;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/preview-mission.less

@@ -1,13 +1,32 @@
+@import "color.less";
 //編序教材預覽區
 .preview-mission {
+  .askBtn {
+    position: fixed;
+    right: 20px;
+    bottom: 30px;
+  }
+
+  @media screen and (min-width: 1366px) {
+    .askBtnfullscreen {
+      position: fixed;
+      right: 8.8%;
+      bottom: 3.4%;
+      background-color: rgb(100, 174, 22);
+      color: white;
+
+      line-height: 20px;
+    }
+  }
+
   .preview-area {
     text-align: left;
     width: 100%;
     height: 560px;
     overflow-y: scroll;
     overflow-x: hidden;
-    background-color: rgb(245, 245, 245);
-    border: 1px solid rgba(128, 128, 128, 0.342);
+    background-color: rgb(241, 241, 241);
+    //border: 1px solid rgba(128, 128, 128, 0.342);
     border-radius: 4px;
     .title {
       position: relative;
@@ -29,7 +48,7 @@
       margin: 10px;
 
       width: 22%;
-      @media screen and (max-width: 767px){
+      @media screen and (max-width: 767px) {
         width: 45%;
       }
       vertical-align: top;
@@ -65,7 +84,7 @@
         }
       }
     }
-    
+
     .testbg {
       background-color: #fff;
       position: relative;
@@ -221,16 +240,17 @@
     cursor: pointer;
   }
   .step-selected {
-    border: 2px solid #24b880;
+    border: 2px solid @primary;
   }
   .step-finished {
-    background-color: #00ad6c;
+    background-color: @secondary;
     border: transparent;
     color: blanchedalmond;
   }
   .step-finished .step-selected {
-    border: 2px solid #24b880;
+    border: 2px solid @primary;
   }
+
   .step-text {
     white-space: nowrap;
     position: relative;
@@ -256,10 +276,42 @@
     margin-left: 14px;
   }
   .step-line-link {
-    border-left: 3px solid #24b880;
+    border-left: 3px solid @primary;
     transition: 0.5s;
   }
 }
+/*小屏幕步驟條控件 */
+.step-btn-smallscreen {
+  .step-btn-group {
+    display: inline-block;
+    margin-right: 30px;
+    position: relative;
+  }
+  position: relative;
+  margin-bottom: 25px;
+  .step-text-smallscreen {
+    font-weight: 900;
+    margin-top: 2px;
+    color: #858585 !important;
+  }
+  .step-line-smallscreen {
+    border-bottom: 3px solid rgb(194, 194, 194);
+    top: -40px;
+    left: 30px;
+    width: 100px;
+
+    position: relative;
+  }
+  .step-line-link-smallscreen {
+    border-bottom: 3px solid @primary;
+    transition: 0.5s;
+  }
+  .step-selected + .step-text-smallscreen {
+    color: #3d3d3d !important;
+    font-weight: 900;
+  }
+}
+
 @media screen and (max-width: 1733px) {
   .step-text {
     left: -6px;
@@ -277,3 +329,9 @@
     height: 450px !important;
   }
 }
+@media screen and (max-width: 1280px) {
+  .preview-area {
+    height: 415px !important;
+    margin-top: -10px;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/previewMission-unitTest.css

@@ -147,3 +147,36 @@
   width: 40px;
   margin-top: 5px;
 }
+.previewNextItemArea {
+  margin-top: 20px;
+  padding: 20px;
+  text-align: center;
+}
+.previewNextItemArea button {
+  text-align: center;
+  background: #dcdcdc;
+  height: 30px;
+  width: auto;
+  padding: 5px 10px;
+  margin-right: 10px;
+  color: #6a6565;
+  border-radius: 4px;
+  border: none;
+  cursor: pointer;
+  outline: none;
+  font-weight: 900;
+}
+.previewNextItemArea .list-item-icon {
+  margin-top: 10px;
+  font-size: 48px;
+}
+.previewNextItemArea .nextItemTitle {
+  font-weight: bolder;
+  padding: 10px 0px 30px 0px;
+}
+.previewNextItemArea .nextItemTitle .typeMark {
+  text-align: center;
+  background-color: #dfdfdf;
+  border-radius: 10px;
+  padding: 2px 10px;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/previewMission-unitTest.less

@@ -1,3 +1,4 @@
+@import 'color.less'; 
 .previewMission-unitTest {
   padding: 20px;
   .qDes {
@@ -11,13 +12,13 @@
     margin-right: 10px;
     padding: 0px 5px;
     border-radius: 5px 5px 0px 0px;
-    color: #24b880;
+    color: @primary;
     font-size: 20px;
     border: none;
     border-bottom: 1px solid gray;
     &:focus {
       outline: none;
-      border-bottom: 2px solid #24b880;
+      border-bottom: 2px solid @primary;
     }
   }
   .checker {
@@ -156,3 +157,37 @@
     margin-top: 5px;
   }
 }
+.previewNextItemArea{
+  margin-top:20px;
+  padding: 20px;
+  text-align: center;
+  button {
+    text-align: center;
+    background: #dcdcdc;
+    height: 30px;
+    width: auto;
+    padding: 5px 10px;
+    margin-right: 10px;
+    color: rgb(106, 101, 101);
+    border-radius: 4px;
+    border: none;
+    cursor: pointer;
+    outline: none;
+    font-weight: 900;
+    
+  }
+  .list-item-icon{
+    margin-top:10px;
+    font-size: 48px;
+  }
+  .nextItemTitle{
+    font-weight: bolder;
+    padding:10px 0px 30px 0px;
+    .typeMark{
+      text-align: center;
+      background-color: @titleMarkbgc;
+      border-radius: 10px;
+      padding:2px 10px;
+    }
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/quesnaire.css

@@ -0,0 +1,80 @@
+.quesnaire .unitTestBtn {
+  display: block !important;
+  margin: 0px;
+  width: 100% !important;
+}
+.quesnaire .unitTestBtn .unitTestbg {
+  cursor: pointer;
+  padding: 5px 10px;
+  background-color: #fff;
+  border-radius: 4px;
+  border: 1px solid #8f8f8f;
+}
+.quesnaire .unitTestBtn input[type="checkbox"],
+.quesnaire .unitTestBtn input[type="radio"] {
+  visibility: hidden;
+  margin-left: -10px;
+}
+.quesnaire .unitTestBtn input[type="checkbox"]:checked ~ .unitTestbg,
+.quesnaire .unitTestBtn input[type="radio"]:checked ~ .unitTestbg {
+  background-color: #24b880 !important;
+  border: none;
+  color: #fff;
+  font-weight: bolder;
+}
+.quesnaire .uloadBtn-icon {
+  font-size: 18px;
+  position: relative;
+  top: 1px;
+  margin-right: 4px;
+}
+.quesnaire .commentArea {
+  width: 100%;
+  padding: 10px;
+  margin-top: 12px;
+  background: rgba(139, 139, 139, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 6px;
+  color: #444444;
+}
+.quesnaire .commentArea:focus {
+  outline-color: #24b880;
+}
+.quesnaire .unitTestbtnWithImg {
+  display: inline-block !important;
+  margin: 10px;
+  width: 20% !important;
+  vertical-align: top;
+}
+.quesnaire .unitTestbtnWithImg .checkImg {
+  width: 100% !important;
+}
+.quesnaire .mustAns {
+  color: red;
+}
+.quesnaire .undoNum,
+.quesnaire .hintnoAns {
+  color: #fa6400;
+  font-weight: bolder;
+}
+.quesnaire .messageCardBtn {
+  width: 35%;
+  margin: 30px 5px 10px 5px;
+  padding: 5px;
+  border: none;
+  color: #6a6565;
+  font-weight: 500;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.1);
+  outline: none;
+  cursor: pointer;
+}
+.quesnaire .messageCardBtn:hover {
+  background: rgba(0, 0, 0, 0.2);
+}
+.quesnaire .quesnairefinished-icon {
+  font-size: 60px;
+  position: relative;
+  left: 0px;
+  margin: 10px 0px;
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/quesnaire.less

@@ -0,0 +1,86 @@
+@import "color.less";
+.quesnaire {
+  .unitTestBtn {
+    display: block !important;
+    margin: 0px;
+    width: 100% !important;
+
+    .unitTestbg {
+      cursor: pointer;
+      padding: 5px 10px;
+      background-color: #fff;
+      border-radius: 4px;
+      border: 1px solid rgb(143, 143, 143);
+    }
+
+    input[type="checkbox"],
+    input[type="radio"] {
+      visibility: hidden;
+      margin-left: -10px;
+
+      &:checked {
+        ~ .unitTestbg {
+          background-color: rgb(36, 184, 128) !important;
+          border: none;
+          color: #fff;
+          font-weight: bolder;
+        }
+      }
+    }
+  }
+  .uloadBtn-icon{
+      font-size:18px;
+      position: relative;
+      top:1px;
+      margin-right:4px;
+  }
+  .commentArea {
+    width: 100%;
+    padding: 10px;
+    margin-top: 12px;
+    background: rgba(139, 139, 139, 0.1);
+    border: 1px solid @border;
+    border-radius: 6px;
+    color: rgb(68, 68, 68);
+    &:focus {
+      outline-color: #24b880;
+    }
+  }
+  .unitTestbtnWithImg {
+    display: inline-block !important;
+    margin:10px;
+    width: 20% !important;
+    vertical-align: top;
+    .checkImg {
+      width: 100% !important;
+    }
+  }
+  .mustAns{
+    color:red
+  }
+  .undoNum,.hintnoAns{
+    color:#fa6400;
+    font-weight: bolder;
+  }
+  .messageCardBtn {
+    width: 35%;
+    margin: 30px 5px 10px 5px;
+    padding: 5px;
+    border: none;
+    color: rgb(106, 101, 101);
+    font-weight: 500;
+    border-radius: 4px;
+    background: rgba(0, 0, 0, 0.1);
+    outline: none;
+    cursor: pointer;
+    &:hover{
+      background: rgba(0, 0, 0, 0.2);
+    }
+  }
+  .quesnairefinished-icon {
+    font-size: 60px;
+    position: relative;
+    left: 0px;
+    margin: 10px 0px;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/school-calendar.css

@@ -0,0 +1,292 @@
+.school-calender {
+  overflow: hidden;
+}
+@media screen and (max-width: 1280px) {
+  .school-calender .todayBtn {
+    flex: 1 !important;
+  }
+  .school-calender .dateNum {
+    font-size: 14px !important;
+    flex: 5 !important;
+  }
+  .school-calender .monthCtlbtn {
+    flex: 3 !important;
+  }
+  .school-calender .courseNote {
+    height: 500px !important;
+  }
+}
+@media screen and (max-width: 991px) {
+  .school-calender .list,
+  .school-calender .courseNote {
+    height: auto !important;
+    overflow: auto !important;
+  }
+}
+@media screen and (max-width: 991px) {
+  .school-calender .calendarArea {
+    width: 50% !important;
+  }
+  .school-calender .detailArea {
+    width: 50% !important;
+  }
+}
+.school-calender .calendarArea {
+  position: fixed;
+  width: 30%;
+  height: 100%;
+  border-right: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: 1px 2px 13px rgba(0, 0, 0, 0.2);
+  padding: 30px 30px 20px 10px;
+}
+@media screen and (max-width: 767px) {
+  .school-calender .calendarArea {
+    display: none;
+  }
+  .school-calender .detailArea {
+    width: 100% !important;
+  }
+}
+.school-calender .dateCtl {
+  display: flex;
+  width: 100%;
+  margin-left: 4%;
+  margin-right: 0%;
+}
+.school-calender .dateCtl .todayBtn {
+  height: 30px;
+}
+.school-calender .dateCtl .todayBtn {
+  flex: 1;
+}
+.school-calender .dateCtl h2,
+.school-calender .dateCtl button {
+  flex: 10.5;
+}
+.school-calender .dateCtl .monthCtlbtn {
+  flex: 3;
+  height: 30px;
+}
+@media screen and (max-width: 1574px) {
+  .school-calender .dateCtl .todayBtn {
+    flex: 2;
+  }
+  .school-calender .dateCtl h2,
+  .school-calender .dateCtl button {
+    flex: 8;
+  }
+  .school-calender .dateCtl h2 {
+    font-size: 16px;
+    margin-top: 3px;
+  }
+  .school-calender .dateCtl .monthCtlbtn {
+    flex: 4;
+  }
+}
+.school-calender .dateCtl button {
+  color: #6a6565;
+  font-weight: bolder;
+  border-radius: 4px;
+  background: rgba(0, 0, 0, 0.1);
+  border: none;
+  padding: 2px 10px;
+  margin: 5px 5px;
+  cursor: pointer;
+  outline: none;
+}
+.school-calender .dateCtl button:hover {
+  background: rgba(0, 0, 0, 0.15);
+}
+.school-calender .dateNum {
+  margin: 2px;
+  text-align: center;
+}
+.school-calender .calendar {
+  margin-left: 5%;
+  margin-top: 10px;
+}
+.school-calender .weekDay > div {
+  flex: 1;
+  text-align: center;
+  font-weight: bolder;
+  line-height: 30px;
+  border-right: 1px solid #ddd;
+  border-top: 1px solid #ddd;
+}
+.school-calender .weekDay > div:first-child {
+  border-left: 1px solid #ddd;
+}
+.school-calender .weekDay,
+.school-calender .week {
+  display: flex;
+  border-bottom: 1px solid #ddd;
+}
+.school-calender .week {
+  height: 60px;
+  border-left: 1px solid #ddd;
+}
+.school-calender .day {
+  position: relative;
+  flex: 1 1 0%;
+  border-right: 1px solid #ddd;
+  cursor: pointer;
+}
+.school-calender .day:before {
+  padding: 3px;
+  text-align: center;
+  position: absolute;
+  content: attr(data-date);
+  top: 0px;
+  right: 0px;
+  font-size: 8px;
+  display: block;
+  width: 20px;
+}
+.school-calender .day .noteItemGroup {
+  position: absolute;
+  width: 100%;
+  text-align: center;
+  left: -1px;
+  bottom: 3px;
+}
+.school-calender .day .noteItemGroup .classNoteItem {
+  display: inline-block;
+  margin-left: 5px;
+  font-size: 10px;
+  padding: 0px 5px;
+  line-height: 18px;
+  color: #fff;
+  font-weight: bolder;
+  background-color: #24b880;
+  border-radius: 4px;
+  list-style: none;
+  text-align: left;
+}
+.school-calender .day .noteItemGroup .workNoteItem {
+  display: inline-block;
+  margin-left: 5px;
+  font-size: 10px;
+  padding: 0px 5px;
+  line-height: 18px;
+  color: #fff;
+  font-weight: bolder;
+  border-radius: 4px;
+  background-color: #fa6400;
+  list-style: none;
+  text-align: left;
+}
+.school-calender .todaymarkWhileClick:before,
+.school-calender .today:before {
+  color: #fff;
+  font-weight: bolder;
+  background-color: #64ae16;
+}
+.school-calender .today,
+.school-calender .clickDate {
+  background-color: #d4ede1;
+}
+.school-calender .other {
+  color: #b1b1b1;
+  background-color: rgba(221, 221, 221, 0.527);
+  cursor: not-allowed;
+}
+.noteMeaning {
+  margin: 3% 5%;
+}
+.noteMeaning li {
+  line-height: 26px;
+  font-weight: bolder;
+  list-style: none;
+}
+.noteMeaning .courseItemDot,
+.noteMeaning .taskItemDot {
+  display: inline-block;
+  position: relative;
+  top: 0px;
+  margin-right: 5px;
+  width: 10px;
+  border-radius: 10px;
+  height: 10px;
+}
+.noteMeaning .courseItemDot {
+  background-color: #24b880;
+}
+.noteMeaning .taskItemDot {
+  background-color: #fa6000;
+}
+.detailArea {
+  width: 70%;
+  float: right;
+}
+.detailArea .dateTitle {
+  padding-top: 2%;
+  margin-left: 3%;
+  margin-bottom: 0px;
+}
+.detailArea .taskDetail {
+  margin: 0px 20px;
+  padding: 0px 20px;
+  overflow: scroll;
+}
+.detailArea .taskDetail .taskDetail-Loading {
+  position: relative;
+  margin-left: -10%;
+  min-height: 600px;
+}
+.detailArea .taskDetail .courseNote {
+  height: auto;
+  width: 100%;
+  overflow: auto;
+}
+.detailArea .taskDetail .courseNote .courseNoteItem {
+  padding: 20px 0px;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+.detailArea .taskDetail .courseNote .courseNoteItem .courseItem-title {
+  color: #00ad6c;
+}
+.detailArea .taskDetail .courseNote .courseNoteItem:last-child {
+  border: none;
+}
+.detailArea .taskDetail .title-rect-group {
+  margin-top: 22px;
+}
+.detailArea .taskDetail .list {
+  margin-top: 15px;
+  width: 100%;
+  position: relative;
+  height: auto;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  box-shadow: none;
+  border-bottom: none;
+}
+.detailArea .taskDetail .list-block {
+  height: auto;
+  position: relative;
+  width: 100%;
+}
+.courseTable {
+  border-collapse: collapse;
+  margin-top: 20px;
+}
+.courseTable th,
+.courseTable td {
+  text-align: center;
+  padding: 10px;
+  border: 1px solid rgba(0, 0, 0, 0.2);
+}
+.courseTable td:nth-child(2n) {
+  font-weight: bolder;
+}
+.courseTable .courseName {
+  color: #24b880;
+  cursor: pointer;
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/school-calendar.less

@@ -0,0 +1,313 @@
+@import './color.less';
+.school-calender {
+  
+  @media screen and (max-width: 1280px) {
+    .todayBtn{
+      flex:1 !important
+    }
+    .dateNum {
+      font-size: 14px !important;
+      flex:5 !important
+    }
+    .monthCtlbtn{
+      flex:3 !important
+    }
+   
+    .courseNote {
+      height: 500px !important;
+    }
+    
+  }
+  @media screen and (max-width: 991px){
+    .list,.courseNote {
+      height: auto !important;
+      overflow: auto !important;
+     
+    }
+  }
+  
+  overflow: hidden;
+  @media screen and (max-width: 991px) {
+    .calendarArea {
+      width: 50% !important;
+    }
+    .detailArea {
+      width: 50% !important;
+    }
+  }
+  .calendarArea {
+    position: fixed;
+    width: 30%;
+    height: 100%;
+    border-right: 1px solid rgba(0, 0, 0, 0.1);
+    box-shadow:1px 2px 13px rgba(0, 0, 0, 0.2);
+    padding: 30px 30px 20px 10px;
+   
+  }
+  @media screen and (max-width: 767px) {
+    .calendarArea {
+      display: none;
+    }
+    .detailArea {
+      width: 100% !important;
+    }
+  }
+  
+  .dateCtl {
+    .todayBtn{
+      height: 30px;
+    }
+    display: flex;
+    width: 100%;
+    margin-left: 4%;
+    margin-right: 0%;
+    .todayBtn {
+      flex: 1;
+    }
+    h2,
+    button {
+      flex: 10.5;
+    }
+    .monthCtlbtn {
+      flex: 3;
+      height: 30px;
+    }
+    @media screen and (max-width: 1574px) {
+      .todayBtn {
+        flex: 2;
+      }
+      h2,
+      button {
+        flex: 8;
+      }
+      h2 {
+        font-size: 16px;
+        margin-top: 3px;
+      }
+      .monthCtlbtn {
+        flex: 4;
+      }
+    }
+    button {
+      color: rgb(106, 101, 101);
+      font-weight: bolder;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.1);
+      border: none;
+      padding: 2px 10px;
+
+      margin: 5px 5px;
+      cursor: pointer;
+      outline: none;
+      &:hover {
+        background: rgba(0, 0, 0, 0.15);
+      }
+    }
+  }
+  .dateNum {
+    margin: 2px;
+    text-align: center;
+  }
+
+  .calendar {
+    margin-left: 5%;
+    margin-top: 10px;
+  }
+  .weekDay > div {
+    flex: 1;
+    text-align: center;
+    font-weight: bolder;
+    line-height: 30px;
+    border-right: 1px solid #ddd;
+    border-top: 1px solid #ddd;
+    &:first-child {
+      border-left: 1px solid #ddd;
+    }
+  }
+  .weekDay,
+  .week {
+    display: flex;
+    border-bottom: 1px solid #ddd;
+  }
+  .week {
+    height: 60px;
+    border-left: 1px solid #ddd;
+  }
+
+  .day {
+    position: relative;
+    flex: 1 1 0%;
+    border-right: 1px solid #ddd;
+    cursor: pointer;
+
+    &:before {
+      padding: 3px;
+      text-align: center;
+      position: absolute;
+      content: attr(data-date);
+      top: 0px;
+      right: 0px;
+      font-size: 8px;
+      display: block;
+      width: 20px;
+    }
+    .noteItemGroup {
+      position: absolute;
+
+      width: 100%;
+      text-align: center;
+      left: -1px;
+      bottom: 3px;
+      .classNoteItem {
+        display: inline-block;
+        margin-left: 5px;
+        font-size: 10px;
+        padding: 0px 5px;
+        line-height: 18px;
+        font-weight: bolder;
+        color: #fff;
+        font-weight: bolder;
+        background-color: @primary;
+        border-radius: 4px;
+        list-style: none;
+        text-align: left;
+      }
+      .workNoteItem {
+        display: inline-block;
+        margin-left: 5px;
+        font-size: 10px;
+        padding: 0px 5px;
+        line-height: 18px;
+        font-weight: bolder;
+        color: #fff;
+        font-weight: bolder;
+        border-radius: 4px;
+        background-color: #fa6400;
+        list-style: none;
+        text-align: left;
+      }
+    }
+  }
+  .todaymarkWhileClick:before,
+  .today:before {
+    color: #fff;
+    font-weight: bolder;
+    background-color: #64ae16;
+  }
+  .today,
+  .clickDate {
+    background-color: #d4ede1;
+  }
+
+  .other {
+    color: rgb(177, 177, 177);
+    background-color: rgba(221, 221, 221, 0.527);
+    cursor: not-allowed;
+  }
+}
+
+.noteMeaning {
+  margin: 3% 5%;
+  li {
+    line-height: 26px;
+    font-weight: bolder;
+    list-style: none;
+  }
+  .courseItemDot,
+  .taskItemDot {
+    display: inline-block;
+    position: relative;
+    top: 0px;
+    margin-right: 5px;
+    width: 10px;
+    border-radius: 10px;
+    height: 10px;
+  }
+  .courseItemDot {
+    background-color: @primary;
+  }
+  .taskItemDot {
+    background-color: #fa6000;
+  }
+}
+.detailArea {
+  width: 70%;
+
+  float: right;
+  
+  .dateTitle {
+    padding-top: 2%;
+    margin-left: 3%;
+    margin-bottom: 0px;
+  }
+  .taskDetail {
+    margin: 0px 20px;
+    padding: 0px 20px;
+  
+    overflow: scroll;
+    .taskDetail-Loading{
+      position: relative;
+      margin-left: -10%;;
+      min-height: 600px;
+    }
+  
+    .courseNote {
+     
+      height:auto;
+      width: 100%;
+      overflow: auto;
+      .courseNoteItem {
+        padding: 20px 0px;
+        border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+        .courseItem-title {
+          color: @secondary;
+        }
+        &:last-child {
+          border: none;
+        }
+      }
+    }
+    .title-rect-group {
+      margin-top: 22px;
+    }
+    .list {
+      margin-top: 15px;
+      width: 100%;
+      position: relative;
+      height: auto;
+      border: 1px solid @border;
+      box-shadow: none;
+      border-bottom:none;
+    }
+    .list-block {
+      height: auto;
+      position: relative;
+      width: 100%;
+    }
+  }
+}
+.courseTable {
+  border-collapse: collapse;
+  margin-top: 20px;
+  th,
+  td {
+    text-align: center;
+    padding: 10px;
+    border: 1px solid rgba(0, 0, 0, 0.2);
+  }
+  td:nth-child(2n) {
+    font-weight: bolder;
+  }
+  .courseName{
+    color: @primary;
+    cursor: pointer;
+  }
+}
+@keyframes fadein {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/setting-view.css

@@ -2,6 +2,38 @@
   overflow: hidden;
   position: relative;
 }
+.setting-view input[type="checkbox"] {
+  cursor: pointer;
+  outline: none;
+  -webkit-appearance: none;
+  background-color: #fafafa;
+  border: 1px solid #cacece;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+  padding: 9px;
+  border-radius: 3px;
+  display: inline-block;
+  position: relative;
+  top: 4px;
+  margin-right: 4px;
+}
+.setting-view input[type="checkbox"]:active,
+.setting-view input[type="checkbox"]:checked:active {
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px 1px 3px rgba(0, 0, 0, 0.1);
+}
+.setting-view input[type="checkbox"]:checked {
+  background-color: #24b880;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05), inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05), inset 15px 10px -12px rgba(255, 255, 255, 0.1);
+  color: #ffffff;
+}
+.setting-view input[type="checkbox"]:checked:after {
+  content: "\2714";
+  font-size: 14px;
+  position: absolute;
+  top: 0px;
+  left: 3px;
+  color: #ffffff;
+  outline: none;
+}
 .setting-view .menu-bar {
   float: left;
   background-color: #f4f3f3;
@@ -15,11 +47,9 @@
   }
 }
 .setting-view .menu-bar .list-block .list-item {
-  white-space: nowrap;
   list-style-type: none;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
   width: 100%;
-  height: 72px;
   padding: 24px 45px 20px 45px;
   font-weight: bolder;
   font-size: 16px;
@@ -49,9 +79,9 @@
   background-color: #fafafa;
   height: 95.9vh;
 }
-@media screen and (max-width: 767px) {
+@media screen and (max-width: 1366px) {
   .setting-view .menu-content {
-    height: auto;
+    height: 95.9vh;
     overflow: scroll;
   }
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/setting-view.less

@@ -1,31 +1,74 @@
+@import "color.less";
+
 .setting-view {
   overflow: hidden;
   position: relative;
 
+  //設定勾選框
+  input[type="checkbox"] {
+    cursor: pointer;
+    outline: none;
+    -webkit-appearance: none;
+    background-color: #fafafa;
+    border: 1px solid #cacece;
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
+      inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05);
+    padding: 9px;
+    border-radius: 3px;
+    display: inline-block;
+    position: relative;
+    top: 4px;
+    margin-right: 4px;
+  }
+  input[type="checkbox"]:active,
+  input[type="checkbox"]:checked:active {
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
+      inset 0px 1px 3px rgba(0, 0, 0, 0.1);
+  }
+  input[type="checkbox"]:checked {
+    background-color: @primary;
+
+    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05),
+      inset 0px -15px 10px -12px rgba(0, 0, 0, 0.05),
+      inset 15px 10px -12px rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+  }
+
+  input[type="checkbox"]:checked:after {
+    content: "\2714";
+    font-size: 14px;
+    position: absolute;
+    top: 0px;
+    left: 3px;
+    color: #ffffff;
+    outline: none;
+  }
+  //設定勾選框
+
   .menu-bar {
     float: left;
     background-color: #f4f3f3;
     height: 95.9vh;
     padding: 0px !important;
-    @media screen and (max-width: 767px){
+
+    @media screen and (max-width: 767px) {
       height: auto;
       overflow: scroll;
     }
     .list-block {
       .list-item {
-        white-space: nowrap;
         list-style-type: none;
         width: 100%;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-       
+        border-bottom: 1px solid @border;
+
         //background: linear-gradient(270deg, #eeeeee, #ffffff);
         &:hover {
-          background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-          color: #03966a;
+          background: @bgcHover;
+          color: @titleHover;
           cursor: pointer;
         }
         width: 100%;
-        height: 72px;
+
         padding: 24px 45px 20px 45px;
         font-weight: bolder;
         font-size: 16px;
@@ -35,13 +78,13 @@
       }
     }
     .list-item-selected {
-      background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
-      color: #03966a;
+      background: @bgcHover;
+      color: @titleHover;
       cursor: pointer;
       width: 100%;
       .list-item-typeMark {
         color: white !important;
-        background-color: #00ad6c !important ;
+        background-color: @secondary !important ;
         transition: ease-in 0.2s;
       }
     }
@@ -52,8 +95,8 @@
     padding: 30px 50px !important;
     background-color: #fafafa;
     height: 95.9vh;
-    @media screen and (max-width: 767px){
-      height: auto;
+    @media screen and (max-width: 1366px) {
+      height: 95.9vh;
       overflow: scroll;
     }
     .edit {
@@ -113,7 +156,7 @@
         &:focus {
           outline: none;
           background-color: rgb(255, 255, 255);
-          border: 2px solid #24b880;
+          border: 2px solid @primary;
         }
       }
       .user-link {
@@ -127,12 +170,12 @@
       margin-top: 15px;
       margin-left: -10px;
       padding: 2px 10px;
-      border: 1px solid rgba(0, 0, 0, 0.1);
+      border: 1px solid @border;
       border-radius: 4px;
       a {
         text-decoration: none;
         font-weight: bolder;
-        color: #24b880;
+        color: @primary;
       }
     }
     .testBtn {
@@ -173,7 +216,7 @@
         color: #fff;
         font-weight: bolder;
 
-        border: 3px solid #24b880 !important;
+        border: 3px solid @primary !important;
       }
     }
   }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/small-navbar.less

@@ -1,3 +1,4 @@
+@import "color.less";
 .myNav-small {
   display: none;
 }
@@ -83,21 +84,21 @@
           .profileName {
             margin: 5px 10px !important;
             margin-bottom: -2px;
-            color: #03966a;
+            color: @titleHover;
           }
           .profile-pop-item {
             list-style: none;
             cursor: pointer;
             font-weight: bold;
             padding: 10px !important;
-            border-top: 1px solid rgba(0, 0, 0, 0.1);
+            border-top: 1px solid @border;
             color: #575757 !important;
             &:hover {
-              color: #03966a !important;
+              color: @titleHover !important;
               .profile-pop-itemIcon1,
               .profile-pop-itemIcon2 {
                 * {
-                  color: #03966a !important;
+                  color: @titleHover !important;
                 }
               }
             }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/study-list.css

@@ -9,6 +9,3 @@
   position: relative;
   top: 6px;
 }
-.study-list .list-item-info {
-  width: 82% !important;
-}

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/study-list.less

@@ -1,6 +1,7 @@
+@import 'color.less';
 .study-list{
     .list-block{
-        border-top:1px solid rgba(0, 0, 0, 0.1);
+        border-top:1px solid @border;
         height: 100vh; 
         overflow:auto;
         margin-top:-32px;
@@ -10,7 +11,5 @@
         position: relative;
         top:6px;
     }
-    .list-item-info {
-        width: 82% !important;
-    }
+    
 }

TEAMModelOS/ClientApp/src/assets/student-web/component_styles/vote.less

@@ -1,3 +1,4 @@
+@import 'color.less';
 .vote {
   //投票區按鈕
   .checkAnswer {
@@ -20,7 +21,7 @@
 
         &:checked {
           ~ .testbg {
-            background-color: #24b880 !important;
+            background-color: @primary !important;
             border: none;
             span {
               color: #fff;
@@ -71,7 +72,7 @@
   }
   .voteResultsIcon {
     font-size: 20px;
-    color: #24b880;
+    color: @primary;
     position: absolute;
     position: absolute;
     top: 0;

TEAMModelOS/ClientApp/src/assets/student-web/icons/svg/dimensions.svg

@@ -0,0 +1,48 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 472.3 472.3" style="enable-background:new 0 0 472.3 472.3;" xml:space="preserve">
+<g>
+	<path  d="M402.708,61.688l-89.879-0.022c-2.621,0-4.989,1.584-5.987,4.005
+		c-1.007,2.421-0.455,5.203,1.398,7.064l33.839,33.838L107.36,342.54l-33.809-33.809c-1.853-1.852-4.643-2.405-7.064-1.406
+		c-2.421,1.006-3.997,3.368-3.997,5.989l-0.008,89.862c0,3.582,2.896,6.48,6.48,6.48l89.878,0.022c2.622,0,4.989-1.582,5.987-4.003
+		c1.008-2.423,0.455-5.205-1.398-7.066l-33.809-33.808l178.827-180.133l55.862-55.864l33.809,33.809
+		c1.853,1.853,4.643,2.406,7.064,1.406c2.421-1.006,3.997-3.366,3.997-5.987l0.008-89.863
+		C409.188,64.587,406.29,61.688,402.708,61.688z"/>
+	<path d="M435.279,0H37.022C16.574,0,0,16.573,0,37.022v398.256C0,455.727,16.574,472.3,37.022,472.3h398.258
+		c20.447,0,37.021-16.573,37.021-37.022V37.022C472.3,16.573,455.727,0,435.279,0z M440.813,435.278
+		c0,3.052-2.482,5.535-5.534,5.535H37.022c-3.052,0-5.535-2.483-5.535-5.535V37.022c0-3.053,2.483-5.536,5.535-5.536h398.258
+		c3.051,0,5.534,2.483,5.534,5.536V435.278z"/>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

TEAMModelOS/ClientApp/src/assets/student-web/icons/svg/list-text.svg

@@ -0,0 +1,84 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
+<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 512.18 512.18" style="enable-background:new 0 0 512.18 512.18;" xml:space="preserve">
+<g>
+	<g>
+		<path d="M448.18,80h-320c-17.673,0-32,14.327-32,32s14.327,32,32,32h320c17.673,0,32-14.327,32-32S465.853,80,448.18,80z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M64.18,112c-0.036-8.473-3.431-16.586-9.44-22.56c-12.481-12.407-32.639-12.407-45.12,0
+			C3.61,95.414,0.215,103.527,0.18,112c-0.239,2.073-0.239,4.167,0,6.24c0.362,2.085,0.952,4.124,1.76,6.08
+			c0.859,1.895,1.876,3.715,3.04,5.44c1.149,1.794,2.49,3.457,4,4.96c1.456,1.45,3.065,2.738,4.8,3.84
+			c1.685,1.227,3.512,2.248,5.44,3.04c2.121,1.1,4.382,1.908,6.72,2.4c2.073,0.232,4.167,0.232,6.24,0
+			c8.45,0.007,16.56-3.329,22.56-9.28c1.51-1.503,2.851-3.166,4-4.96c1.164-1.725,2.181-3.545,3.04-5.44
+			c1.021-1.932,1.826-3.971,2.4-6.08C64.419,116.167,64.419,114.073,64.18,112z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M64.18,256c0.238-2.073,0.238-4.167,0-6.24c-0.553-2.065-1.359-4.053-2.4-5.92c-0.824-1.963-1.843-3.839-3.04-5.6
+			c-1.109-1.774-2.455-3.389-4-4.8c-12.481-12.407-32.639-12.407-45.12,0C3.61,239.414,0.215,247.527,0.18,256
+			c0.062,4.217,0.875,8.388,2.4,12.32c0.802,1.893,1.766,3.713,2.88,5.44c1.217,1.739,2.611,3.348,4.16,4.8
+			c1.414,1.542,3.028,2.888,4.8,4c1.685,1.228,3.511,2.249,5.44,3.04c1.951,0.821,3.992,1.412,6.08,1.76
+			c2.047,0.459,4.142,0.674,6.24,0.64c2.073,0.239,4.167,0.239,6.24,0c2.036-0.349,4.024-0.94,5.92-1.76
+			c1.981-0.786,3.861-1.807,5.6-3.04c1.772-1.112,3.386-2.458,4.8-4c1.542-1.414,2.888-3.028,4-4.8c1.23-1.684,2.251-3.51,3.04-5.44
+			c1.093-2.124,1.9-4.384,2.4-6.72C64.426,260.167,64.426,258.073,64.18,256z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M64.18,400c0.237-2.073,0.237-4.167,0-6.24c-0.553-2.116-1.359-4.157-2.4-6.08c-0.859-1.895-1.876-3.715-3.04-5.44
+			c-1.112-1.772-2.458-3.386-4-4.8c-12.481-12.407-32.639-12.407-45.12,0c-1.542,1.414-2.888,3.028-4,4.8
+			c-1.164,1.725-2.181,3.545-3.04,5.44c-0.83,1.948-1.421,3.99-1.76,6.08c-0.451,2.049-0.665,4.142-0.64,6.24
+			c0.036,8.473,3.431,16.586,9.44,22.56c1.414,1.542,3.028,2.888,4.8,4c1.685,1.228,3.511,2.249,5.44,3.04
+			c1.951,0.821,3.992,1.412,6.08,1.76c2.047,0.459,4.142,0.674,6.24,0.64c2.073,0.239,4.167,0.239,6.24,0
+			c2.036-0.349,4.024-0.94,5.92-1.76c1.981-0.786,3.861-1.807,5.6-3.04c1.772-1.112,3.386-2.458,4.8-4
+			c1.542-1.414,2.888-3.028,4-4.8c1.231-1.683,2.252-3.51,3.04-5.44c1.092-2.125,1.899-4.384,2.4-6.72
+			C64.426,404.167,64.426,402.073,64.18,400z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M480.18,224h-352c-17.673,0-32,14.327-32,32s14.327,32,32,32h352c17.673,0,32-14.327,32-32S497.853,224,480.18,224z"/>
+	</g>
+</g>
+<g>
+	<g>
+		<path d="M336.18,368h-208c-17.673,0-32,14.327-32,32c0,17.673,14.327,32,32,32h208c17.673,0,32-14.327,32-32
+			C368.18,382.327,353.853,368,336.18,368z"/>
+	</g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+<g>
+</g>
+</svg>

TEAMModelOS/ClientApp/src/assets/student-web/icons/svg/rightAnsFilter.svg

@@ -0,0 +1,7 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>icon/RightAns</title>
+   
+        <path d="M12,1 C18.0751322,1 23,5.92486775 23,12 C23,18.0751322 18.0751322,23 12,23 C5.92486775,23 1,18.0751322 1,12 C1,5.92486775 5.92486775,1 12,1 Z M12,4 C7.581722,4 4,7.581722 4,12 C4,16.418278 7.581722,20 12,20 C16.418278,20 20,16.418278 20,12 C20,7.581722 16.418278,4 12,4 Z" ></path>
+    
+</svg>

TEAMModelOS/ClientApp/src/boot-app.js

@@ -126,6 +126,16 @@ const app = new Vue({
     router,
     i18n,
     Icon,
+	//利用LocalStorage保存設定
+	  created() {
+	    if (localStorage.getItem("local")) {
+	      console.log(localStorage.getItem("local"));
+	      store.commit("setLanguage", localStorage.getItem("local"));
+	    }
+	    if (localStorage.getItem("hintNextItem")) {
+	      store.commit("sethintNextItem", localStorage.getItem("hintNextItem"));
+	    }
+	  },
     ...App
 })
 

TEAMModelOS/ClientApp/src/common/BaseLayout.vue

@@ -210,7 +210,7 @@
                             {
                                 icon: 'iconfont icon-test',
                                 name: '评量测验',
-                                router: '/home/manageEvaluation',
+                                router: '/home/schoolEvaluation',
                                 tag: '',
                                 role: 'admin',
                                 permission: 'analysis'
@@ -309,7 +309,7 @@
                             {
                                 icon: 'iconfont icon-test',
                                 name: '评量测验',
-                                router: '/home/manageEvaluation',
+                                router: '/home/classEvaluation',
                                 tag: '',
                                 role: 'teacher|admin',
                                 permission: '',

TEAMModelOS/ClientApp/src/common/BaseUserPoptip.vue

@@ -13,7 +13,6 @@
 						<div v-for="(item, index) in user.roles" :key="index">
 							<DropdownItem :name="item">{{ getRoleName(item) }}</DropdownItem>
 						</div>
-
 					</DropdownMenu>
 				</Dropdown>
 			</div>
@@ -101,8 +100,7 @@
 			console.log(this.user)
 
 			this.userInfo.nameColor = this.randomColor()
-
-			let idData = JSON.parse(this.$jwtDecode(localStorage.id_token));
+			let idData = this.$jwtDecode(localStorage.id_token);
 			if(idData){
 				this.userInfo.username = idData.name
 			}
@@ -110,6 +108,8 @@
 		methods: {
 			onRoleSelect(val){
 				this.curRole = val
+          		let path = val === 'student' ? '/studentWeb' : '/home'
+		  		this.$router.push({ path: path })
 			},
 			onQuit() {
 				this.$emit('logout')

TEAMModelOS/ClientApp/src/common/VideoPlayer2.vue

@@ -109,7 +109,7 @@
 
 <style lang="less">
 
-    /*@import "../../assets/default_styles/video-js.css";*/
+    /*@import "~@/assets/student-web/default_styles/video-js.css";*/
 
     .video-wrap .video-js .vjs-progress-control {
         pointer-events: none;

TEAMModelOS/ClientApp/src/components/learnactivity/ClassList.vue

@@ -30,7 +30,7 @@
                         </div>
                         <p style="color:#EEEEEE;padding-left:15px;font-size:16px;margin-top:10%;margin-bottom:10px;">学生成绩数据</p>
                         <div class="table-show">
-                            <Table v-if="studentList.length !== 0" :studentData="studentList"></Table>
+                            <Table v-if="studentList.length !== 0" @fixScore="getScore" :studentData="studentList"></Table>
                         </div>
                     </vuescroll>
                 </div>
@@ -93,6 +93,11 @@
             }
         },
         methods: {
+            getScore(data) {
+                console.log(data)
+                this.currentActivityIndex = 1
+                this.getData()
+            },
             getTestData() {
                 this.testStatus = !this.testStatus
             },

TEAMModelOS/ClientApp/src/components/learnactivity/GradeList.less

@@ -67,6 +67,7 @@
     margin: auto;
     height:730px;
     border: 1px solid @borderColor;
+    position:relative;
 }
 
 .top-bar {

TEAMModelOS/ClientApp/src/components/learnactivity/GradeList.vue

@@ -1,48 +1,46 @@
 <template>
     <div class="body">
-        <div >
-            <div class="top-bar">
-                <div class="type-list">
-                    <span class="base-info-item">学生姓名：<span class="analysis-info">{{studentName === ''? '请选择作答学生' : studentName}}</span></span>
-                    <span class="base-info-item">已评人数：<span class="analysis-info">{{ isReview }}</span></span>
-                    <span class="base-info-item">未评试题：<span class="analysis-info">{{answer.length - reviewIndex}}</span></span>
-                    <span class="base-info-item">总分：<span class="analysis-info">{{scoreTotal}}</span></span>
-                </div>
-                <div class="button-list">
-                    <Button class="base-info-btn" @click="openAnswer" type="info">{{ isAllOpen ? '显示答案' : '隐藏答案'}}</Button>
-                    <Button class="base-info-btn" type="success" @click="savePaper">提交分数</Button>
-                </div>
+        <div class="top-bar">
+            <div class="type-list">
+                <span class="base-info-item">学生姓名：<span class="analysis-info">{{studentName === ''? '请选择作答学生' : studentName}}</span></span>
+                <span class="base-info-item">已评人数：<span class="analysis-info">{{ isReview }}</span></span>
+                <span class="base-info-item">未评试题：<span class="analysis-info">{{answer.length - reviewIndex}}</span></span>
+                <span class="base-info-item">总分：<span class="analysis-info">{{scoreTotal}}</span></span>
+            </div>
+            <div class="button-list">
+                <Button class="base-info-btn" @click="openAnswer" type="info">{{ isAllOpen ? '显示答案' : '隐藏答案'}}</Button>
+                <Button class="base-info-btn" type="success" @click="savePaper">提交分数</Button>
             </div>
-            <Loading :top="200" v-show="dataLoading" type="1" style="margin-left:20%"></Loading>
-            <div v-if="!dataLoading" class="content">
-                <div class="left-box">
-                    <div class="student-box">
-                        <div class="search-box dark-iview-input">
-                            <Input placeholder="查询学生姓名..." v-model="inputData" style="width:90%;margin-left:5px;margin-bottom:5px">
-                            <Icon type="ios-contact" slot="prefix" />
-                            </Input>
-                        </div>
-                        <div class="student-list">
-                            <vuescroll>
-                                <ul>
-                                    <li :class="index == selectIndex ?' block-bg-active block-bg':' block-bg'" :key="index" v-for="(item,index) in studentList" @click="getStudentInfo(item,index)">
-                                        <div class="student-show">
-                                            <span>{{item.name}}</span>
-                                            <span :style="{ background: (item.mark === 0 ? '#949594' : item.mark === 1 ? '#0BADD4' : '#1CC0F3')}" class="activity-status">{{item.mark === 0 ? '未开始' : item.mark === 2 ? '已完成' : '未完成'}}</span>
-                                        </div>
-                                    </li>
-                                </ul>
-                            </vuescroll>
-                        </div>
+        </div>
+        <div class="content" >
+            <Loading :top="200" v-show="dataLoading" type="1" style="text-align:center"></Loading>
+            <div class="left-box" v-if="!dataLoading">
+                <div class="student-box">
+                    <div class="search-box dark-iview-input">
+                        <Input placeholder="查询学生姓名..." v-model="inputData" style="width:90%;margin-left:5px;margin-bottom:5px">
+                        <Icon type="ios-contact" slot="prefix" />
+                        </Input>
+                    </div>
+                    <div class="student-list">
+                        <vuescroll>
+                            <ul>
+                                <li :class="index == selectIndex ?' block-bg-active block-bg':' block-bg'" :key="index" v-for="(item,index) in studentList" @click="getStudentInfo(item,index)">
+                                    <div class="student-show">
+                                        <span>{{item.name}}</span>
+                                        <span :style="{ background: (item.mark === 0 ? '#949594' : item.mark === 1 ? '#0BADD4' : '#1CC0F3')}" class="activity-status">{{item.mark === 0 ? '未开始' : item.mark === 2 ? '已完成' : '未完成'}}</span>
+                                    </div>
+                                </li>
+                            </ul>
+                        </vuescroll>
                     </div>
                 </div>
-                <div class="grade-box">
-                    <vuescroll>
+            </div>
+            <div class="grade-box" v-if="!dataLoading">
+                <vuescroll>
                     <ReviewPaper :paper="paperData" :answer="answerInfo" ref="exPaper" style="color:#515a6e;" :isShowTools="isShowTools"> </ReviewPaper>
-                    </vuescroll>
-                </div>
+                </vuescroll>
             </div>
-        </div> 
+        </div>
     </div>
 </template>
 

TEAMModelOS/ClientApp/src/components/learnactivity/GradeTable.vue

@@ -2,7 +2,7 @@
     <div class="grade-table dark-iview-table">
         <Table border :columns="columns" :data="studentPageData"  class="dark-iview-page">
             <template slot-scope="{ row, index }" slot="action">
-                <Button type="primary" size="small" style="margin-right: 5px" @click="show(index)">查看</Button>
+                <Button type="success" size="small" style="margin-right: 5px" @click="fixScore(row)">修改</Button>
             </template>
         </Table>
         <div style="width:100%;text-align:center;margin-top:20px;" class="dark-iview-page">
@@ -60,6 +60,13 @@
             getData() {
                 this.studentList = this.studentData
             },
+            fixScore(data) {
+                console.log(data)
+                if (data !== undefined) {
+                    this.$emit('fixScore',data)
+                }
+
+            },
             getPageData(number, type) {  //分页
                 let starIndex = this.pageSize * (this.currentPage - 1)
                 let endIndex = this.pageSize * this.currentPage > this.studentList.length ? this.studentList.length : this.pageSize * this.currentPage
@@ -80,4 +87,7 @@
     }
 </script>
 <style scoped >
+    .grade-table{
+        width:calc(100% - 10px);
+    }
 </style>

TEAMModelOS/ClientApp/src/components/learnactivity/RecordChart.vue

@@ -21,7 +21,7 @@
         methods: {
             setChart() {
                 let myChart = this.$echarts.init(document.getElementById('chart'));
-                var scale = 1;
+                var scale = 0.7;
                 var echartData = [{
                     value: 21,
                     name: '问卷调查'
@@ -73,11 +73,11 @@
                     title: {
                         text: '活动数量统计',
                         left: 'center',
-                        top: '2%',
+                        top: '-1%',
                         padding: [10, 0],
                         textStyle: {
                             color: '#fff',
-                            fontSize: 16,
+                            fontSize: 14,
                             //fontWeight: '800',
                             align: 'center'
                         }
@@ -236,17 +236,17 @@
                     title: {
                         text: '活动完成率',
                         left: 'center',
-                        top: '-2%',
+                        top: '-1%',
                         padding: [10, 0],
                         textStyle: {
                             color: '#fff',
-                            fontSize: 16 ,
+                            fontSize: 14 ,
                             //fontWeight: '800',
                             align: 'center'
                         }
                     },
                     grid: {
-                        top: '10%',
+                        top: '12%',
                         bottom: '54%',
                         left: "50%",
                         containLabel: false
@@ -269,7 +269,7 @@
                             inside: true,
                             textStyle: {
                                 color: "#333",
-                                fontSize: 14,
+                                fontSize: 12,
                                 rich: {
                                     line: {
                                         width: 10,
@@ -320,9 +320,9 @@
                         textStyle: {
                             align: 'center',
                             color: '#fff',
-                            fontSize: 16,
+                            fontSize: 14,
                         },
-                        top: '10%',
+                        top: '1%',
                         left: 'center',
                     },
                     tooltip: {

TEAMModelOS/ClientApp/src/components/learnactivity/ReviewPaperList.vue

@@ -2,7 +2,7 @@
 	<div class="components-el-container">
 		<!-- 题目列表部分 -->
 		<div v-if="exerciseList.length == 0" class="no-data-text">
-			<img src="../../assets/icon/no_data.svg" width="120" />
+			<img src="@/assets/icon/no_data.svg" width="120" />
 			<span style="margin-top:15px;display:block;color:#808080">请先选择学生信息</span>
 		</div>
 		<div class="content-wrap" v-if="groupList.length != 0">