学生端细节调整

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

@@ -98,6 +98,11 @@
 .dropdown .ivu-scroll-container .ivu-scroll-loader {
   margin-top: -10px;
 }
+.profile-dropdown > p {
+  float: right;
+  margin-right: 48px;
+  font-weight: bold;
+}
 .profile-dropdown:hover #profile-pop {
   display: block;
   position: fixed;
@@ -133,12 +138,6 @@
   border-top: 1px solid rgba(0, 0, 0, 0.1);
   color: #575757;
 }
-#profile-pop .profile-pop-item a{
-  color: #575757;
-}
-#profile-pop .profile-pop-item:hover a{
-  color: #03966a;
-}
 #profile-pop .profile-pop-item:hover {
   background: linear-gradient(-0.75turn, #fafafa, #d4ede1);
   color: #03966a;
@@ -210,10 +209,9 @@
 }
 .myNav .avatar-link {
   float: right;
-  margin: 0px 20px;
-  margin-right: 48px;
+  top: 10px;
+  margin: 0px 10px 0 20px;
   cursor: pointer;
-  /*background-color:#00AD6C;*/
 }
 .myNav .ivu-avatar.ivu-avatar-circle.ivu-avatar-image.ivu-avatar-default {
   height: 24px !important;

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

@@ -107,6 +107,11 @@
   }
 }
 .profile-dropdown {
+  & > p {
+    float: right;
+    margin-right: 48px;
+    font-weight: bold;
+  }
   &:hover {
     #profile-pop {
       display: block;
@@ -214,8 +219,8 @@
   .avatar-link {
     float: right;
     top: 10px;
-    margin: 0px 20px;
-    margin-right: 48px;
+    margin: 0px 10px 0 20px;
+    // margin-right: 48px;
     cursor: pointer;
   }
   .ivu-avatar.ivu-avatar-circle.ivu-avatar-image.ivu-avatar-default {

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

@@ -1,3 +1,7 @@
+/*常用色票*/
+/*回傳的狀態文字，標題段落的方框，分頁*/
+/*標題類型的標記，編序教材附件按鈕*/
+/*各類項目的懸停與選中狀態*/
 /*篩選器區域*/
 .event-selector-block {
   padding: 17px 25px;
@@ -10,6 +14,22 @@
 .event-selector-block .icon-selector {
   margin-top: 18px;
 }
+.event-selector-block .icon-selector .ivu-checkbox-group .ivu-checkbox-wrapper .ivu-checkbox {
+  display: none;
+}
+.event-selector-block .icon-selector .ivu-radio {
+  display: none;
+}
+.event-selector-block .icon-selector .icon-selector-group {
+  display: flex;
+}
+.event-selector-block .icon-selector .icon-selector-group .ivu-radio-wrapper {
+  margin-left: 10px;
+  margin-right: 0;
+}
+.event-selector-block .icon-selector .icon-selector-group .ivu-radio-wrapper .innerIcon {
+  margin-left: 0;
+}
 .event-selector-block .icon-selector li {
   display: inline-block;
   margin-right: 10px;
@@ -70,37 +90,37 @@
 }
 /*篩選器區域*/
 /*修改iviewTab控件*/
-.event-list.ivu-tabs-nav {
-    float: none !important;
-    position: relative;
-    text-align: center;
+.ivu-tabs-nav {
+  float: none !important;
+  position: relative;
+  text-align: center;
 }
-.event-list.ivu-tabs-tab {
-    width: auto;
-    padding: 8px 20px;
-    position: relative;
-    font-size: 14px;
-    color: #878787;
-    font-weight: 600;
-    margin: 0px 30px;
-}
-.event-list.ivu-tabs-tab:hover {
-    color: #24b880 !important;
-}
-.event-list.ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
-    color: #24b880 !important;
-    width: auto;
-    padding: 8px 20px;
-    border-bottom: 7px solid #24b880 !important;
-    text-align: center;
-}
-.event-list.ivu-tabs-ink-bar {
-    height: 0px;
-}
-.event-list.ivu-tabs-tabpane {
-    margin-top: -16px;
-    height: 830px;
-    overflow: auto;
+.ivu-tabs-tab {
+  width: auto;
+  padding: 8px 20px;
+  position: relative;
+  font-size: 14px;
+  color: #878787;
+  font-weight: 600;
+  margin: 0px 30px;
+}
+.ivu-tabs-tab:hover {
+  color: #24b880 !important;
+}
+.ivu-tabs-tab.ivu-tabs-tab-active.ivu-tabs-tab-focused {
+  color: #24b880 !important;
+  width: auto;
+  padding: 8px 20px;
+  border-bottom: 7px solid #24b880 !important;
+  text-align: center;
+}
+.ivu-tabs-ink-bar {
+  height: 0px;
+}
+.ivu-tabs-tabpane {
+  margin-top: -16px;
+  height: 830px;
+  overflow: auto;
 }
 .event-list {
   z-index: 10;

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

@@ -10,10 +10,32 @@
   }
   .icon-selector {
     margin-top: 18px;
+    .ivu-checkbox-group .ivu-checkbox-wrapper .ivu-checkbox {
+      display: none;
+    }
+
+    .ivu-radio {
+      display: none;
+    }
+
+    .icon-selector-group{
+      display: flex;
+
+      .ivu-radio-wrapper{
+        margin-left: 10px;
+        margin-right: 0;
+        
+        .innerIcon{
+          margin-left: 0;
+        }
+      }
+    }
+
     li {
       display: inline-block;
       margin-right: 10px;
     }
+    
 
     .icon-btn {
       height: 48px;

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

@@ -0,0 +1,58 @@
+.list-new {
+  display: flex;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 15px 10px 15px 30px;
+}
+.list-new:hover {
+  background: linear-gradient(-270deg, #fafafa, #d4ede1);
+  color: #03966a;
+  cursor: pointer;
+}
+.list-new-icon {
+  width: 10%;
+  margin-right: 20px;
+}
+.list-new-icon .svg-icon {
+  width: 40px;
+  height: 40px;
+}
+.list-new-title {
+  width: 70%;
+  font-weight: bolder;
+  font-size: 14px;
+  line-height: 22px;
+  margin-right: 20px;
+}
+.list-new-title .list-item-typeMark {
+  text-align: center;
+  background-color: #dfdfdf;
+  border-radius: 10px;
+  padding: 1px 10px;
+  margin: 0 8px 0 -10px;
+}
+.list-new-title .list-item-time {
+  color: #8f8787;
+  font-size: 12px;
+}
+.list-new-status {
+  width: 11%;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+}
+.list-new-status .list-new-unDone {
+  font-size: 10px;
+  font-weight: bolder;
+  padding: 5px;
+  border-radius: 4px;
+  text-align: center;
+  border: 1px solid;
+}
+.list-new-status .isAllowRetry {
+  color: #fff;
+  background-color: #64ae16;
+  border: none;
+}
+.list-new-status .isWrongPra {
+  margin-top: 10px;
+}

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

@@ -0,0 +1,72 @@
+.list-new{
+    display: flex;
+    border-bottom: 1px solid rgba(0,0,0,.1);
+    padding: 15px 10px 15px 30px;
+
+    &:hover{
+        background: linear-gradient(-270deg, #fafafa, #d4ede1);
+        color: #03966a;
+        cursor: pointer;
+    }
+
+    &-icon{
+        width: 10%;
+        margin-right: 20px;
+
+        .svg-icon{
+            width: 40px;
+            height: 40px;
+        }
+    }
+
+    &-title{
+        width: 70%;
+        font-weight: bolder;
+        font-size: 14px;
+        line-height: 22px;
+        margin-right: 20px;
+
+        .list-item-typeMark{
+            text-align: center;
+            background-color: #dfdfdf;
+            border-radius: 10px;
+            padding: 1px 10px;
+            margin: 0 8px 0 -10px;
+        }
+
+        .list-item-time {
+            color: #8f8787;
+            font-size: 12px;
+        }
+        
+    }
+
+    &-status{
+        width: 11%;
+        display: flex;
+        justify-content: center;
+        flex-direction: column;
+
+        .list-new-unDone{
+            font-size: 10px;
+            font-weight: bolder;
+            // color: #fff;
+            padding: 5px;
+            border-radius: 4px;
+            text-align: center;
+            border: 1px solid;
+
+            
+        }
+        
+        .isAllowRetry{
+            color: #fff;
+            background-color: #64ae16;
+            border: none;
+        }
+
+        .isWrongPra{
+            margin-top: 10px;
+        }
+    }
+}

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventContentTypeTemplate/PaperTest.vue

@@ -53,6 +53,18 @@
                     <button class="messageCardBtn" @click="closeWarmMessage()">{{$t("studentWeb.exam.testpop.cancel")}}</button>
                     <button class="messageCardBtn" @click="quitTest()">{{$t("studentWeb.exam.testpop.ok")}}</button>
                 </div>
+                <!-- 结束练习之提示框 -->
+                <div class="messageCardContent1" v-if="showMessageNum == 5">
+                    <h3>{{$t("studentWeb.exam.testpop.endPractice")}}</h3>
+                    <svg-icon icon-class="logoutComfirm" class="logoutComfirmIcon" />
+                    <br />
+                    <p v-show="closeTest">
+                        {{$t("studentWeb.exam.testpop.endPracticeDe")}}
+                        <!-- <br /> {{$t("studentWeb.exam.testpop.exitWrongDes")}} -->
+                    </p>
+                    <button class="messageCardBtn" @click="closeWarmMessage()">{{$t("studentWeb.exam.testpop.cancel")}}</button>
+                    <button class="messageCardBtn" @click="quitTest()">{{$t("studentWeb.exam.testpop.ok")}}</button>
+                </div>
             </div>
         </div>
 
@@ -65,7 +77,7 @@
                 <span class="myTestProgresstitle">{{$t("studentWeb.exam.testpop.completion")}}</span>
                 <Progress style="margin-top:15px" :percent="completeRate" />
             </div>
-            <button v-if="closeTest" class="submitBtn" @click="openWarmMessage(isWrong ? 4 : 2)" :class="{ hintClick:hintHandon() }">{{isWrong ? $t("studentWeb.exam.testpop.submitted1") : $t("studentWeb.exam.testpop.submitted")}}</button>
+            <button v-if="closeTest" class="submitBtn" @click="openWarmMessage(isWrong ? 5 : 2)" :class="{ hintClick:hintHandon() }">{{isWrong ? $t("studentWeb.exam.testpop.submitted1") : $t("studentWeb.exam.testpop.submitted")}}</button>
             <button v-if="!closeTest" class="submitBtn" :class="{ hintClick:hintHandon()  }">{{$t("studentWeb.exam.testpop.finish")}}</button>
         </div>
         <Row :gutter="30">
@@ -475,8 +487,8 @@
                             this.showMessageNum = 2
                         }
                     }
-                } else if (showMessageNum == 4) {
-                    this.showMessageNum = 4
+                } else if (showMessageNum == 5) {
+                    this.showMessageNum = 5
                 } else return;
             },
             //关闭提示信息

TEAMModelOS/ClientApp/src/components/student-web/EventView/EventList.vue

@@ -28,7 +28,32 @@
                     </Dropdown>
                 </div>
                 <!---按鈕搜尋區(多選)--->
-                <ul class="icon-selector" v-if="hideIconbtn == false">
+                <div class="icon-selector" v-if="hideIconbtn == false">
+                    <RadioGroup v-model="eventTypeCheckers"
+                                class="icon-selector-group"
+                                @on-change="predealMockdatafirstItem()"
+                    >
+                        <div class="icon-btn"
+                             @click="selectAllType()"
+                             title="All"
+                             :class="{'icon-btn-selected': eventTypeCheckers == ''}">
+                            <svg-icon icon-class="alltext" class="innerIcon Icon-0" />
+                        </div>
+                        <Radio :label="iconBtn.eventType"
+                               v-for="(iconBtn, index) in typeNametoIcon"
+                               :key="index"
+                               class="icon-btn"
+                               :title="iconBtn.eventType"
+                               :class="{'icon-btn-selected': eventTypeCheckers.indexOf(iconBtn.eventType) != -1}"
+                        >
+                            <svg-icon :icon-class="iconBtn.iconClass"
+                                      :title="iconBtn.eventType"
+                                      class="innerIcon"
+                                      :class="`Icon-${index + 1}`" />
+                        </Radio>
+                    </RadioGroup>
+                </div>
+                <!-- <ul class="icon-selector" v-if="hideIconbtn == false">
                     <li class="icon-btn"
                         @click="selectAllType()"
                         :class="{'icon-btn-selected': eventTypeCheckers == ''}">
@@ -45,7 +70,7 @@
                                       :class="`Icon-${index + 1}`" />
                         </li>
                     </label>
-                </ul>
+                </ul> -->
                 <!---按鈕搜尋區(多選)--->
             </div>
             <!--活動清單分頁-->
@@ -57,12 +82,13 @@
                     {{ $t("studentWeb.empty") }}
                 </div>
                 <div :id="`event${item.id}`"
-                    class="list-item"
-                    @click="sentSelectedEventTitle(item)"
-                    :class="{ 'list-item-selected': selectedCondition(item) }"
-                    v-for="(item, index) in eventShow"
-                    v-if="isListNoItem == false"
-                    :key="index">
+                     class="list-item"
+                     @click="sentSelectedEventTitle(item)"
+                     :class="{ 'list-item-selected': selectedCondition(item) }"
+                     v-for="(item, index) in eventShow"
+                     v-if="isListNoItem == false"
+                     :key="index"
+                >
                     <ul>
                         <li class="list-item-icon">
                             <svg-icon v-if="item.eventType == 'HomeWork'" icon-class="doc" />
@@ -80,7 +106,10 @@
                             <p class="list-item-time">
                                 {{ dateFormat(item.startTime) }} ~ {{ dateFormat(item.endTime) }}
                             </p>
-                        </li>             
+                            <!-- <p class="list-item-time" v-show="timeStatus(item) == 'finish'">
+                                得分率：20%
+                            </p> -->
+                        </li>
                         <li class="list-item-info"
                             v-if="item.eventType == 'Vote'">
                             <p class="list-item-title">
@@ -90,7 +119,7 @@
                             <p class="list-item-time">
                                 {{ dateFormat(item.startTime) }} ~ {{ dateFormat(item.endTime) }}
                             </p>
-                        </li>       
+                        </li>
                         <li class="list-item-info"
                             v-if="item.eventType == 'Survey'">
                             <p class="list-item-title">
@@ -107,6 +136,9 @@
                         <li class="list-item-unDone" v-show="timeStatus(item) == 'finish'">
                             <div class="isOvertime">{{$t("studentWeb.public.finish")}}</div>
                         </li>
+                        <!-- <li class="list-item-unDone" v-show="timeStatus(item) == 'finish' && item.eventType == 'Exam'">
+                            <div class="">{{$t("studentWeb.exam.report.wrongPractice")}}</div>
+                        </li> -->
                     </ul>
                 </div>
                 <div class="list-end"></div>
@@ -131,13 +163,11 @@
         data() {
             return {
                 searchEmpty: false,
-                eventTypeCheckers: [],
-                finishedListNoItem: false, //無數據之情況
-                unfinishedListNoItem: false,
-                havejustfinishedItem: false, //無剛完成的數據情況，清單項目變動將會影響空白狀態之呈現
+                eventTypeCheckers: "", //筛选的
                 typeNametoIcon: [
                     {
                         eventType: "Preview",
+                        title: "Preview",
                         iconClass: "selflearninginTime",
                     },
                     {
@@ -157,18 +187,22 @@
                         iconClass: "quesnaire",
                     },
                 ],
-                activityType: this.$t('studentWeb.state'),
-                mockdata: "",
+                isListNoItem: false, //清單為空
+                eventList: [], //活动数据
+                eventShow: [], //展示的活动数据
                 eventPageType: ["Learn", "Exam", "HomeWork", "Vote", "Survey"], //本頁出現的類型
+                selectedEventStatusNow: this.$t('studentWeb.event.allStatus'), //下拉框活动状态
                 openSearch: false, //打開搜尋器
                 search: "",
+                hideIconbtn: false,
+
+                activityType: this.$t('studentWeb.state'),
+                havejustfinishedItem: false, //無剛完成的數據情況，清單項目變動將會影響空白狀態之呈現
+                finishedListNoItem: false, //無數據之情況
+                unfinishedListNoItem: false,
                 alreadyScrolltimes: 0,
+                mockdata: "",
                 defaultFirstItem: "",
-                selectedEventStatusNow: this.$t('studentWeb.event.allStatus'),
-                hideIconbtn: false,
-                isListNoItem: false, //清單為空
-                eventList: [], //活动数据
-                eventShow: [], //展示的活动数据
                 dateTime: Date.parse(new Date())
             };
         },
@@ -245,36 +279,6 @@
                 var D = date.getDate() + ' '
                 return Y + M + D;
             },
-            //取得目前滑鼠座標
-            getCursorPosition() {
-                var x = 0;
-                var y = 0;
-                if (!e) var e = window.event;
-                if (e.pageX || e.pageY) {
-                    x = e.pageX -
-                        document.documentElement.scrollLeft -
-                        document.body.scrollLeft;
-                    y = e.pageY -
-                        document.documentElement.scrollTop -
-                        document.body.scrollTop;
-                } else if (e.clientX || e.clientY) {
-                    //for IE
-                    x = e.clientX;
-                    y = e.clientY;
-                }
-                return { x: x, y: y }; //posx posy就是游標的X,Y值了
-            },
-            //取得座標
-            getPosition(element) {
-                var x = 0;
-                var y = 0;
-                while (element) {
-                    x += element.offsetLeft - element.scrollLeft + element.clientLeft;
-                    y += element.offsetTop - element.scrollLeft + element.clientTop;
-                    element = element.offsetParent;
-                }
-                return { x: x, y: y };
-            },
             timeStatus(data) {
                 let date = (new Date()).getTime() //当前时间
                 if (date >= data.endTime) {
@@ -283,40 +287,33 @@
                     return 'going'
                 }
             },
-            //將目前所滑過的投票項目之高度回傳到$store
-            sentVoteResulthover(status) {
-                var hoverItem = {
-                    status: status,
-                    itemIDHeignt: this.getCursorPosition().y,
-                };
-                this.$store.commit("voteResulthover", hoverItem);
-            },
             sentEventStatus(status) {
                 if (status == "reMake" || status == "reExam") {
-                    this.eventTypeCheckers = [];
+                    this.eventTypeCheckers = "";
                 }
                 this.selectedEventStatusNow = status.status;
                 this.predealMockdatafirstItem();
             },
+            // 状态 + 类型筛选
             predealMockdatafirstItem() {
                 //選中第一個
                 let currentfilterArray = [];
                 this.eventShow.length = 0
                 console.log(this.eventTypeCheckers);
                 for (let i = 0; i < this.eventList.length; i++) {
-                    //沒有篩選類型+沒有篩選狀態的情況
                     if (this.eventPageType.includes(this.eventList[i].eventType)) {
-                        if ( this.eventTypeCheckers.length == 0) {
+                        // 沒有篩選類型+沒有篩選狀態的情況
+                        if (this.eventTypeCheckers == "") {
                             currentfilterArray.push(this.eventList[i]);
                         }
-                        //沒篩選類型+有篩選狀態的情況
-                        else if (this.eventTypeCheckers.length == 0 &&
+                        // 沒篩選類型+有篩選狀態的情況
+                        else if (this.eventTypeCheckers == "" &&
                             this.dropDownShowCondition(this.selectedEventStatusNow, this.eventList[i])) {
                             currentfilterArray.push(this.eventList[i]);
                         }
-                        //有篩選類型+有篩選狀態的情況
+                        // 有篩選類型+有篩選狀態的情況
                         else if (
-                            this.eventTypeCheckers.length !== 0 &&
+                            this.eventTypeCheckers !== "" &&
                             this.eventTypeCheckers.includes(this.eventList[i].eventType) &&
                             this.dropDownShowCondition(this.selectedEventStatusNow,this.eventList[i])
                         ) {
@@ -334,7 +331,7 @@
                     });
                 } else this.isListNoItem = true; //清單空值樣式配置
             },
-            //下拉数据筛选
+            // 下拉数据筛选
             dropDownShowCondition(status, item) {
                 if (status == "reMake") {
                     this.hideIconbtn = true;
@@ -384,47 +381,10 @@
             },
             //选择所有
             selectAllType() {
-                this.eventTypeCheckers = [];
+                this.eventTypeCheckers = '';
                 this.predealMockdatafirstItem();
             },
-
-            sentEvenType(eventype) {
-                this.$store.commit("ChangeFilterType", eventype);
-                if (this.$store.getters.getFilterType == "all") {
-                    let filterListFinished = [],
-                        filterListUnFinished = [];
-                    for (let i = 0; i < this.mockdata.length; i++) {
-                        if (
-                            this.mockdata[i].isDone == true &&
-                            this.eventPageType.includes(this.mockdata[i].eventType)
-                        ) {
-                            filterListFinished.push(this.mockdata[i]);
-                        }
-                    }
-                    for (let j = 0; j < this.mockdata.length; j++) {
-                        if (
-                            this.mockdata[j].isDone == false &&
-                            this.eventPageType.includes(this.mockdata[j].eventType)
-                        ) {
-                            filterListUnFinished.push(this.mockdata[j]);
-                        }
-                    }
-                    this.defaultFirstItem = filterListUnFinished[0];
-                    if (
-                        this.$store.getters.getIsSelectedNow == false &&
-                        this.defaultFirstItem != ""
-                    ) {
-                        this.sentSelectedEventTitle(this.defaultFirstItem);
-                    }
-                    this.finishedListNoItem = false;
-                    this.unfinishedListNoItem = false;
-                }
-            },
-            eventypeSelected: function (type) {
-                if (this.$store.getters.getFilterType == type) return true;
-                else return false;
-            },
-
+            // 展示活动
             sentSelectedEventTitle(item) {
                 this.$router.push({
                     path: "/studentWeb/eventView",
@@ -433,6 +393,7 @@
                         type: item.eventType
                     }
                 })
+                // 活动信息
                 this.$store.commit("SetPaperInfo", item)
                 ////螢幕寬度<767px時，直接關掉sidebar
                 if (window.innerWidth <= 768) {
@@ -443,19 +404,18 @@
                 ////重置問卷
                 this.$store.commit('resetSurvey', true)
                 ////重置預習活動
-                this.$store.commit("PassPhaseTest", 0);
-                this.$store.commit("ChangeCurrentPhase", 0);
-                this.$store.commit("ChangeCurrentSelectedReadingName", 1);
-                this.$store.commit("ToggleSentCurrentphase", false);
+                this.$store.commit("PassPhaseTest", 0); //通过阶段
+                this.$store.commit("ChangeCurrentPhase", 0); //单元阶段
+                this.$store.commit("ChangeCurrentSelectedReadingName", 1); //选中教材
+                this.$store.commit("ToggleSentCurrentphase", false); //显示单元测验的答案
                 this.$store.commit("SetCurrentQuestionNo", 0);
                 this.$store.commit("SetTrytestCount", [0, 0, 0]);
             },
-
             scrollListfromInfoPop() {
                 if (this.$store.getters.getisFromInfoPoptoScroll == true) {
                     //當從通知操作進行捲動時，將篩選條件清空
                     this.selectedEventStatusNow = this.$t('studentWeb.event.allStatus');
-                    this.eventTypeCheckers = [];
+                    this.eventTypeCheckers = "";
                     let targetItem = document.getElementById(
                         `event${this.$store.getters.getItemTitle.eventID}`
                     );
@@ -478,10 +438,6 @@
                 }
                 this.$store.commit("SetisFromInfoPoptpScroll", false);
             },
-
-            scrollList() {
-            },
-
             selectedCondition(item) {
                 if (
                     this.$store.getters.getIsSelectedNow == true &&
@@ -490,6 +446,84 @@
                     return true;
                 } else return false;
             },
+
+            /* =======未调用======== */
+            //取得目前滑鼠座標
+            getCursorPosition() {
+                var x = 0;
+                var y = 0;
+                if (!e) var e = window.event;
+                if (e.pageX || e.pageY) {
+                    x = e.pageX -
+                        document.documentElement.scrollLeft -
+                        document.body.scrollLeft;
+                    y = e.pageY -
+                        document.documentElement.scrollTop -
+                        document.body.scrollTop;
+                } else if (e.clientX || e.clientY) {
+                    //for IE
+                    x = e.clientX;
+                    y = e.clientY;
+                }
+                return { x: x, y: y }; //posx posy就是游標的X,Y值了
+            },
+            //取得座標
+            getPosition(element) {
+                var x = 0;
+                var y = 0;
+                while (element) {
+                    x += element.offsetLeft - element.scrollLeft + element.clientLeft;
+                    y += element.offsetTop - element.scrollLeft + element.clientTop;
+                    element = element.offsetParent;
+                }
+                return { x: x, y: y };
+            },
+            //將目前所滑過的投票項目之高度回傳到$store
+            sentVoteResulthover(status) {
+                var hoverItem = {
+                    status: status,
+                    itemIDHeignt: this.getCursorPosition().y,
+                };
+                this.$store.commit("voteResulthover", hoverItem);
+            },
+            sentEvenType(eventype) {
+                this.$store.commit("ChangeFilterType", eventype);
+                if (this.$store.getters.getFilterType == "all") {
+                    let filterListFinished = [],
+                        filterListUnFinished = [];
+                    for (let i = 0; i < this.mockdata.length; i++) {
+                        if (
+                            this.mockdata[i].isDone == true &&
+                            this.eventPageType.includes(this.mockdata[i].eventType)
+                        ) {
+                            filterListFinished.push(this.mockdata[i]);
+                        }
+                    }
+                    for (let j = 0; j < this.mockdata.length; j++) {
+                        if (
+                            this.mockdata[j].isDone == false &&
+                            this.eventPageType.includes(this.mockdata[j].eventType)
+                        ) {
+                            filterListUnFinished.push(this.mockdata[j]);
+                        }
+                    }
+                    this.defaultFirstItem = filterListUnFinished[0];
+                    if (
+                        this.$store.getters.getIsSelectedNow == false &&
+                        this.defaultFirstItem != ""
+                    ) {
+                        this.sentSelectedEventTitle(this.defaultFirstItem);
+                    }
+                    this.finishedListNoItem = false;
+                    this.unfinishedListNoItem = false;
+                }
+            },
+            eventypeSelected: function (type) {
+                if (this.$store.getters.getFilterType == type) return true;
+                else return false;
+            },
+            scrollList() {
+            },
             showTheCurrentTab() {
                 if (
                     (this.finishedListNoItem == false &&

TEAMModelOS/ClientApp/src/components/student-web/HomeView/MissionListCard.vue

@@ -11,6 +11,44 @@
                     :loading-text=" testData.length == 5  ? $t('studentWeb.missionListCardReachBottom') : $t('studentWeb.missionListCardLoading') "
                     >
                 <div :id="`event${item.eventID}`"
+                    class="list-new"
+                    @click="sentSelectedEventTitle(item)"
+                    v-for="(item, index) in testData" :key="index">
+                    <div class="list-new-icon">
+                        <svg-icon v-if="item.eventType == 'Homework'" icon-class="doc" />
+                        <svg-icon v-if="item.eventType == 'Learn'"
+                                    icon-class="selflearninginTime" />
+                        <svg-icon v-if="item.eventType == 'Exam'"
+                                    icon-class="test"
+                                    class="reset-testIcon" />
+                        <svg-icon v-if="item.eventType == 'Vote'" icon-class="vote" />
+                        <svg-icon v-if="item.eventType == 'Survey'" icon-class="quesnaire" />
+                    </div>
+                    <div class="list-new-title">
+                        <div>
+                            <span v-show="item.eventType == 'Exam'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolExam'):$t('studentWeb.public.privateExam')}}</span>
+                            <span v-show="item.eventType == 'Vote'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolVote'):$t('studentWeb.public.privateVote')}}</span>
+                            <span v-show="item.eventType == 'Survey'" class="list-item-typeMark">{{item.owner == 'school'? $t('studentWeb.public.schoolSurvey'):$t('studentWeb.public.privateSurvey')}}</span>
+                            <span>{{ item.name }}</span>
+                        </div>
+                        <p class="list-item-time">
+                            {{ dateFormat(item.startTime) }} ~ {{ dateFormat(item.endTime) }}
+                        </p>
+                    </div>
+                    <div class="list-new-status">
+                        <div class="list-new-unDone isAllowRetry" v-show="timeStatus(item) == 'going'">
+                            <span class="">{{$t("studentWeb.public.going")}}</span>
+                        </div>
+                        <div class="list-new-unDone" v-show="timeStatus(item) == 'finish'">
+                            <span class="isOvertime">{{$t("studentWeb.public.finish")}}</span>
+                        </div>
+                        <!-- <div class="list-new-unDone isWrongPra" v-show="timeStatus(item) == 'finish' && item.eventType == 'Exam'">
+                            <span class="">{{$t("studentWeb.exam.report.wrongPractice")}}</span>
+                        </div> -->
+                    </div>
+                </div>
+
+                <!-- <div :id="`event${item.eventID}`"
                     class="list-item"
                     @click="sentSelectedEventTitle(item)"
                     v-for="(item, index) in testData" :key="index">
@@ -45,7 +83,7 @@
                             </p>
                         </li>
                     </ul>
-                </div>
+                </div> -->
             </Scroll>
             <div class="list-end"></div>
         </Card>
@@ -186,4 +224,5 @@
 
 <style scoped>
     @import "~@/assets/student-web/component_styles/mission-list-card.css";
+    @import "~@/assets/student-web/component_styles/mission-list-card-new.css";
 </style>

TEAMModelOS/ClientApp/src/locale/lang/zh-CN/studentWeb.js

@@ -310,6 +310,8 @@ export default {
             exitWrong: "离开错题练习提示",
             exitWrongDe: "系统检测您尚未「结束练习」，如您选择「确定」,",
             exitWrongDes: "则目前作答将不保存，下次需重新练习",
+            endPractice: "结束练习提示",
+            endPracticeDe: "您将离开错题练习页面",
             qNo: '题号:',
             correction: '正解',
             queNo: '题目:',

TEAMModelOS/ClientApp/src/view/student-web/App.vue

@@ -14,6 +14,7 @@
                 <!--<span class="pixel">{{ windowWidth }} * {{ windowHeight }} px</span>-->
                 <!-- 头像 -->
                 <span class="profile-dropdown">
+                    <p>{{userInfo.name}}</p>
                     <PersonalPhoto v-if="userInfo.name !== undefined" class="avatar-link" :width="'35px'" :height="'35px'" :fontSize="'0.8rem'" :name="userInfo.name" color="#00AD6C" />
                     <div id="profile-pop">
                         <span class="profile-pop-triangle"></span>
@@ -42,23 +43,23 @@
                 </span>
                 <!--通知彈窗區域-->
                 <!-- <span class="dropdown"> -->
-                    <MenuItem name="6" @click.native="noData">
-                        <span class="info-badge" v-if="MyNo != 6"></span>
-                        <svg-icon icon-class="bell" class="tabIcon1" />
-                    </MenuItem>
+                <MenuItem name="6" @click.native="noData" title="通知">
+                    <span class="info-badge" v-if="MyNo != 6"></span>
+                    <svg-icon icon-class="bell" class="tabIcon1" />
+                </MenuItem>
                 <!-- </span> -->
                 <!-- hiteach课堂记录 -->
-                <MenuItem name="5" @click.native="noData">
+                <MenuItem name="5" @click.native="noData" title="hiteach">
                     <svg-icon icon-class="hiteach" class="tabIcon4" />
                 </MenuItem>
                 <!-- 自主学习 -->
-                <MenuItem name="3" @click.native="noData">
+                <MenuItem name="3" @click.native="noData" title="自主学习">
                     <svg-icon icon-class="note" class="tabIcon1" />
                 </MenuItem>
-                <MenuItem name="4" to="/studentWeb/eventView">
+                <MenuItem name="4" to="/studentWeb/eventView" title="活动">
                     <svg-icon icon-class="selflearning" class="tabIcon2" />
                 </MenuItem>
-                <MenuItem name="1" to="/studentWeb/homeView">
+                <MenuItem name="1" to="/studentWeb/homeView" title="首页">
                     <svg-icon icon-class="home" class="tabIcon3" />
                 </MenuItem>
                 <!-- 加入课程 -->