右上資訊區 點擊顯示學生名單

HiTeachCC/ClientApp/src/assets/css/Board.less

@@ -240,4 +240,110 @@ svg {
   border-radius: 50%;
   cursor: pointer;
 }
+.student-List{
+  background-color: rgb(235, 235, 235);
+  position:fixed;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index:999;
+  height: auto;
+  min-height: 300px;
+  width: 50%;
+  top:120px;
+  padding:20px;
+  border-radius: 5px;
+  color: rgb(61, 61, 61);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  h5{
+    font-weight: bold;
+  }
+  
+  .noData{
+    text-align: center;
+    padding-top: 70px;
+  }
+  .student-group{
+    padding-top:20px;
+    display: flex;
+    flex-wrap: wrap;
+  }
+
+  .student-card{
+    flex: 1;
+    background-color: #fff;
+    border-radius: 5px;
+    min-width:212px;
+    max-width: 212px;
+    width: 100%;
+    height: 90px;
+    display: inline-block;
+    margin:5px;
+    
 
+    .student-leftimg {
+      width: 35%;
+      min-width: 100px;
+      max-width: 100px;
+      height: 100%;
+      position: relative;
+      line-height: 95px;
+      display: inline-block;
+      margin-left: 5%;
+      .student-idnumber {
+        position: absolute;
+        left: 5px;
+        top: 8px;
+        width: 30px;
+        height: 30px;
+        background-color: #f7b500;
+        color: #000;
+        text-align: center;
+        line-height: 30px;
+        border-radius: 50%;
+        font-weight: bold;
+        font-size: 16px;
+      }
+      .student-portrait {
+        width: 100%;
+        height: 100%;
+        line-height: 123px;
+        margin: 0 auto;
+        text-align: center;
+        img {
+          width: 70px;
+          height: 70px;
+          border-radius: 50%;
+          margin-top: 10%;
+        }
+      }
+     
+    }
+    .student-rightname{
+      font-size: 20px;
+      font-weight: bold;
+      position: relative;
+      display: inline-block;
+      top:-40px
+    }
+   
+  }
+  
+  .close-btn {
+    position: absolute;
+    top: -10px;
+    right: -10px;
+    width: 30px;
+    height: 30px;
+    line-height: 32px;
+    background-color: #d8d8d8;
+    text-align: center;
+    border-radius: 50%;
+    cursor: pointer;
+    .close-icon{
+      font-size: 20px;
+      
+    }
+  }
+
+}
+ 

HiTeachCC/ClientApp/src/views/Board.vue

@@ -12,7 +12,7 @@
         <img class="teachimg" :src="teachImg" />
         <p class="teachname">{{ teachname }}</p>
       </div>
-      <div class="total-studentnum"><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
+      <div class="total-studentnum" @click='isShowStudentList=true'><svg-icon icon-class="students" class="students-icon" />{{ students.length }}</div>
       <div class="percentage-studentanswer" @click="popuphd()">
         <q-circular-progress show-value font-size="8px" :value="StudentPercentage" size="45px" :thickness="0.22" color="teal" track-color="grey-3" class="q-ma-md"> {{ StudentPercentage }}% </q-circular-progress>
       </div>
@@ -182,6 +182,24 @@
       <div class="workclose" @click="workStatus = false"><img src="@/statics/iconsvg/interaction/Close.svg" class="q-icon" /></div>
     </div>
     <!--作品收集end-->
+    <!--學生名單彈窗-->
+    <div class='student-List' v-show='isShowStudentList == true'>
+        <h5>目前加入教室的學生名單</h5>  
+        <div class="student-group">
+        <div v-for="item in students" :key="item.id" class='student-card'>
+           <div class="student-leftimg">
+              <div class="student-idnumber">{{item.sort}}</div>
+              <div class="student-portrait"><img :src="item.headImg" /></div>
+             
+           </div>
+           <div class="student-rightname">{{item.studentName}}</div>  
+        </div> 
+        </div>
+        <div class="noData" v-show="students.length == 0">
+          <p>暂无数据</p>
+        </div>
+         <div class="close-btn" @click="isShowStudentList = false"> <svg-icon icon-class="Close" class="close-icon" /></div>
+    </div>
   </div>
 </template>
 <script>
@@ -393,7 +411,8 @@ export default {
       workInsidedata: [],
 
       //停止收集的icon和文字
-      workinfo: { icon: 'stop', text: '停止收集' }
+      workinfo: { icon: 'stop', text: '停止收集' },
+      isShowStudentList:false
     }
   },
   methods: {
@@ -436,6 +455,9 @@ export default {
       localStorage.removeItem('fileType')
       localStorage.removeItem('slide')
     },
+    studentList(){
+      this.$store.state.students.forEach(item=>{console.log(item.studentName)})
+    },
     handleUploadSuc(response, file, i) {
       //this.beginPdfshowLoading()
       this.$store.state.uploadUrl = response.result.data.model.blobUrl