fix:U调整；增加结束播放

inspur-ui/src/views/party_work/meeting/info.vue

@@ -12,7 +12,7 @@
     </div>
 
     <div class="display-row" style="display: flex;align-items: center;margin-top: 27px;">
-      <div class="text-fontsize-14">{{ form.title }}</div>
+      <div class="text-fontsize-16" style="font-weight: bold;;">{{ form.title }}</div>
       <el-image :src="iconAddress" fit="contaion" class="icon" style="margin-left: 15px;" />
       <div class="text-fontsize-14" style="margin-left: 4px;">地点：</div>
       <div class="text-fontsize-14" style="margin-left: 4px;">{{form.address}}</div>
@@ -48,10 +48,10 @@
           :popper-append-to-body="false">
           <el-option v-for="move in moveList" :label="move.label" :value="move.value" />
         </el-select>
-        <div class="btn" style="margin-left: 18px;" @click="moveUp">上移</div>
-        <div class="btn" style="margin-left: 18px;" @click="moveDown">下移</div>
-        <div class="btn" style="margin-left: 18px;" @click="lastPage">上一页</div>
-        <div class="btn" style="margin-left: 18px;" @click="nextPage">下一页</div>
+        <el-button class="btn no-active" style="margin-left: 18px;" @click="moveUp">上移</el-button>
+        <el-button class="btn no-active" style="margin-left: 18px;" @click="moveDown">下移</el-button>
+        <el-button class="btn no-active" style="margin-left: 18px;" @click="lastPage">上一页</el-button>
+        <el-button class="btn no-active" style="margin-left: 18px;" @click="nextPage">下一页</el-button>
       </div>
     </div>
 
@@ -79,7 +79,11 @@
               <div class="text-fontsize-18">会议资料</div>
               <!-- <el-image :src="iconFresh" fit="contaion" class="icon" style="margin-left: 8px;"></el-image> -->
             </div>
-            <div class="playBtn" @click="beginPlay()">开始播放</div>
+            <div class="display-row">
+              <el-button v-if="isMeetPlay == false" class="playBtn" @click="beginPlay()">开始播放</el-button>
+              <el-button v-else class="playBtn" @click="endShowFile()">结束播放</el-button>
+            </div>
+
           </div>
           <div style="margin-top: 16px;height:240px;overflow-y: auto" class="no-scrollbar">
             <div v-for="(item,index) in fileList" @click="selectFileItem(index)">
@@ -96,11 +100,12 @@
               <div class="text-fontsize-18">图片抓拍</div>
               <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" @click="refreshPhoto" />
             </div>
-            <div class="more" @click="dialogPhotoVisible = true">更多</div>
+            <el-button class="more" @click="dialogPhotoVisible = true">更多</el-button>
           </div>
           <div class="display-cloumn" style="margin-top:10px;height: 75%;">
             <div class="display-row" style="display: flex;justify-content: space-between;">
-              <el-image v-if="firstPhoto !=null" style="width: 157px;height: 90px;" :src="firstPhoto.picPath" :preview-src-list="firstPhotoList" />
+              <el-image v-if="firstPhoto !=null" style="width: 157px;height: 90px;" :src="firstPhoto.picPath"
+                :preview-src-list="firstPhotoList" />
               <el-image v-else :src="imgEmpty" style="width: 157px;height: 90px;" />
               <div class="display-cloumn" style="display: flex;justify-content: space-between;">
                 <el-image :src="iconPhoto" class="icon-40" style="margin-left: 8px;" @click="takePhoto" />
@@ -122,12 +127,12 @@
               <div class="text-fontsize-18">人脸签到</div>
               <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" @click="refreshPhotoSign" />
             </div>
-            <div class="more" @click="dialogFaceSignVisible = true">更多</div>
+            <el-button class="more" @click="dialogFaceSignVisible = true">更多</el-button>
           </div>
           <div class="display-cloumn" style="height: 75%;margin-top:10px">
             <div class="display-row" style="display: flex;justify-content: space-between;">
               <div v-if="faceSignUrl && faceSignUrl.length>0" class="display-cloumn" style="width: 157px;">
-                <el-image style="width: 157px;height: 90px;" :src="faceSignUrl" :preview-src-list="faceSignList"/>
+                <el-image style="width: 157px;height: 90px;" :src="faceSignUrl" :preview-src-list="faceSignList" />
                 <div style="width: 157px;margin-top: 5px;" class="display-center text-fontsize-14">
                   {{faceSign.createTime}}
                 </div>
@@ -142,12 +147,13 @@
                 <el-image :src="iconPhoto" class="icon-40" style="margin-left: 8px;" @click="photoSign" />
                 <div v-if="faceSignUrl && faceSignUrl.length>0" class="display-cloumn"
                   style="display: flex;align-items: end;">
-                  <div class="display-row" style="margin-bottom:8px ;">
+                  <div class="display-row"
+                    style="margin-bottom:8px ;display: flex;align-items: center;justify-content: center;">
                     <div class="text-fontsize-14">本次</div>
                     <div class="text-fontsize-14" style="color: #FFE59E;">+{{faceSign.newAddNum}}</div>
                   </div>
                   <progress :value="signedNum" :max="attendanceList.length"></progress>
-                  <div class="display-row" style="margin-top:8px ;">
+                  <div class="display-row display-center" style="margin-top:8px ;">
                     <div class="text-fontsize-14" style="color: #FFE59E;">{{signedNum}}</div>
                     <div class="text-fontsize-14">/{{attendanceList.length}} 已签到</div>
                   </div>
@@ -164,7 +170,7 @@
               <div class="text-fontsize-18">会议纪要</div>
               <el-image :src="iconFresh" class="icon" style="margin-left: 8px;" />
             </div>
-            <div class="more" @click="dialogMeetVisible = true">更多</div>
+            <el-button class="more" @click="dialogMeetVisible = true">更多</el-button>
           </div>
           <div class="display-row" style="margin-top: 10px;">
             <div style="width: 70%;overflow-y: auto;height: 120px;" class="no-scrollbar">
@@ -190,13 +196,14 @@
       <span>
         <div class="display-cloumn">
           <!-- <div class="line-grey" /> -->
-          <div style="display: flex;flex-wrap: wrap;overflow: auto;margin-left:5px;">
+          <div style="display: flex;flex-wrap: wrap;overflow: auto;margin-left:5px;" >
             <div v-for="(item, index) in photoList" :key="index" class="imageDiv">
-              <div class="display-cloumn">
+              <div class="display-cloumn"  :style="{ backgroundColor: item.isSelected ? '#FFF3F3' : 'white' }">
                 <div style="margin-left: 10px;">
                   <input type="checkbox" align="left" :value="index" v-model="selectedItems">
                 </div>
-                <el-image style="width: 206px;height: 114px;margin: 5px" :src="item.picPath" :preview-src-list="photoPreviewList"/>
+                <el-image style="width: 206px;height: 114px;margin: 5px" :src="item.picPath"
+                  :preview-src-list="photoPreviewList" />
                 <div class="text-fontsize-14 display-center" style="margin-top:5px;color:#000000;width: 208px;">
                   {{item.createTime}}
                 </div>
@@ -208,12 +215,12 @@
       <span slot="footer" class="display-row" style="display: flex;align-items: center;justify-content: space-between;">
         <div></div>
         <div class="display-row display-center" style="margin-left: 80px;">
-          <div class="display-cloumn display-center" style="margin-left:24px" >
+          <div class="display-cloumn display-center" style="margin-left:24px">
             <el-image :src="iconPhotoGrey" class="icon-40" @click="takePhoto" />
             <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">拍照</div>
           </div>
-          <div class="display-cloumn display-center" style="margin-left:24px" >
-             <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhoto" />
+          <div class="display-cloumn display-center" style="margin-left:24px">
+            <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhoto" />
             <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">刷新列表</div>
           </div>
 
@@ -257,8 +264,8 @@
                 <el-image :src="iconPhotoGrey" class="icon-40" @click="photoSign" />
                 <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">拍照</div>
               </div>
-              <div class="display-cloumn display-center" style="margin-left:24px" >
-                 <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhotoSign" />
+              <div class="display-cloumn display-center" style="margin-left:24px">
+                <el-image :src="iconFreshGrey" class="icon-40" @click="refreshPhotoSign" />
                 <div class="text-fontsize-14" style="margin-top: 5px;color: #545454;">刷新列表</div>
               </div>
 
@@ -303,7 +310,7 @@
               </el-table>
               <div style="height: 17%;margin-top:10px" class="display-row display-center">
                 <div class="display-cloumn display-center">
-                  <el-image :src="iconFreshGrey" class="icon-40" @click="refreshAudio"/>
+                  <el-image :src="iconFreshGrey" class="icon-40" @click="refreshAudio" />
                   <div class="text-fontsize-14" style="color: #545454;margin-top: 5px;">刷新列表</div>
                 </div>
 
@@ -630,65 +637,53 @@
         attendanceList: [],
         signedNum: 0,
         faceSignUrl: null,
-        faceSignList:[],
+        faceSignList: [],
         scaleList: [{
-          value: '25',
-          label: '25%'
-        }, {
           value: '50',
           label: '50%'
-        }, {
-          value: '75',
-          label: '75%'
         }, {
           value: '100',
           label: '100%'
-        }, {
-          value: '125',
-          label: '125%'
         }, {
           value: '150',
           label: '150%'
-        }, {
-          value: '175',
-          label: '175%'
         }, {
           value: '200',
           label: '200%'
         }],
         moveList: [{
           value: '10',
-          label: '10CM'
+          label: '10%'
         }, {
           value: '20',
-          label: '20CM'
+          label: '20%'
         }, {
           value: '30',
-          label: '30CM'
+          label: '30%'
         }, {
           value: '40',
-          label: '40CM'
+          label: '40%'
         }, {
           value: '50',
-          label: '50CM'
+          label: '50%'
         }, {
           value: '60',
-          label: '60CM'
+          label: '60%'
         }, {
           value: '70',
-          label: '70CM'
+          label: '70%'
         }, {
           value: '80',
-          label: '80CM'
+          label: '80%'
         }, {
           value: '90',
-          label: '90CM'
+          label: '90%'
         }, {
           value: '100',
-          label: '100CM'
+          label: '100%'
         }],
         firstPhoto: null,
-        firstPhotoList:[],
+        firstPhotoList: [],
         selectedFileIndex: -1,
         fileType: 1,
         dialogPhotoVisible: false,
@@ -699,8 +694,30 @@
         percentage: 20,
         faceSign: {},
         dialogMeetVisible: false,
+        isMeetPlay: false,
       }
     },
+    watch: {
+      selectedItems(newValue, oldValue) {
+        // 当message变化时，会执行这里的代码
+        console.log(`message changed from ${oldValue} to ${newValue}`);
+        for(let j = 0;j<this.photoList.length;j++){
+          this.photoList[j].isSelected  = false;
+        }
+        for(let i =0;i<newValue.length;i++){
+          this.photoList[newValue[i]].isSelected  = true;
+        }
+
+      }
+    },
+
+
+    // mounted:{
+    //   let checkboxes = document.getElementsByName("myCheckbox");
+    //   for (let i = 0; i < checkboxes.length; i++) {
+    //     console.log(checkboxes[i].checked); // 输出 true 或 false
+    //   }
+    // },
     computed: {
       formatTime() {
         let remaining = this.elapsed;
@@ -713,7 +730,7 @@
         return `${hours.toString().padStart(2, '0')}:${minutes
         .toString()
         .padStart(2, '0')}:${seconds.toString().padStart(2, '0')}.${milliseconds.toString().padStart(3, '0')}`;
-      }
+      },
     },
     created() {
       this.getRouterParam();
@@ -731,7 +748,7 @@
       }
     },
     methods: {
-      closePage(){
+      closePage() {
         this.$router.back();
       },
       refreshPhotoSign() {
@@ -851,7 +868,7 @@
             this.firstPhotoList.push(this.firstPhoto.picPath);
 
             this.photoPreviewList = [];
-            for(let i=0;i<this.photoList.length;i++){
+            for (let i = 0; i < this.photoList.length; i++) {
               this.photoPreviewList.push(this.photoList[i].picPath);
             }
 
@@ -880,7 +897,7 @@
               this.firstPhotoList.push(this.firstPhoto.picPath);
 
               this.photoPreviewList = [];
-              for(let i=0;i<this.photoList.length;i++){
+              for (let i = 0; i < this.photoList.length; i++) {
                 this.photoPreviewList.push(this.photoList[i].picPath);
               }
             } else {
@@ -1070,7 +1087,7 @@
               this.firstPhotoList.push(this.firstPhoto.picPath);
 
               this.photoPreviewList = [];
-              for(let i=0;i<this.photoList.length;i++){
+              for (let i = 0; i < this.photoList.length; i++) {
                 this.photoPreviewList.push(this.photoList[i].picPath);
               }
             } else {
@@ -1275,6 +1292,7 @@
         // this.fileList = [];
         this.totalPage = null;
         this.currentPage = 1;
+        this.isMeetPlay = false;
       },
       rsWord() {
         if (this.sourceWord === null || this.sourceWord === '') {
@@ -1344,10 +1362,12 @@
           this.fileType = 2;
           this.showUrl(this.fileList[this.selectedFileIndex].fileUrl);
         }
+        this.isMeetPlay = true;
       },
       deleteDialogPhoto() {
         console.log('selectedItems:', this.selectedItems);
-        if (this.selectedItems != null && this.selectedItems.length > 0) {
+
+        if(this.selectedItems != null && this.selectedItems.length > 0) {
           this.deletePhoto(this.selectedItems);
         } else {
           this.$message({
@@ -1364,6 +1384,8 @@
     /* margin-left: 40px;
     margin-right: 30px;
     margin-bottom: 10px; */
+    margin-left:5px;
+    margin-rignt:5px;
     display: flex;
     align-items: center;
     margin-bottom: 10px;
@@ -1474,17 +1496,8 @@
   }
 
   .btn {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    padding: 6px 18px;
-    box-sizing: border-box;
-    border: 1px solid #FFFFFF;
-    border-radius: 4px;
-    font-size: 14px;
-    font-weight: normal;
-    letter-spacing: 0em;
+    background-color: transparent;
+    border-color: #FFFFFF;
     color: #FFFFFF;
   }
 
@@ -1492,19 +1505,6 @@
     border: 1px dashed #FFFFFF;
   }
 
-  .playBtn {
-    width: 92px;
-    height: 32px;
-    border-radius: 4px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    background: #FFE59E;
-    font-size: 14px;
-    font-weight: normal;
-    color: #CA0001;
-  }
 
   .fileItem {
     padding: 10px 20px;
@@ -1537,12 +1537,7 @@
     background-color: #E5E6EB;
   }
 
-  .more {
-    font-size: 14px;
-    font-weight: normal;
-    letter-spacing: 0em;
-    color: #FFE59E;
-  }
+
 
   progress {
     width: 82px;
@@ -1609,4 +1604,40 @@
   .custom-text-color {
     color: red;
   }
+
+  .no-active.el-button:focus,
+  .no-active.el-button:hover,
+  .no-active.el-button:active {
+    background-color: transparent !important;
+    border-color: #FFFFFF !important;
+    color: #FFFFFF !important;
+  }
+
+  .playBtn.el-button:focus,
+  .playBtn.el-button:hover,
+  .playBtn.el-button:active {
+    background-color: #FFE59E !important;
+    color: #CA0001 !important;
+  }
+
+  .playBtn {
+    background: #FFE59E;
+    color: #CA0001;
+  }
+
+  .more {
+    color: #FFE59E;
+    background: transparent;
+    border-color: transparent;
+    padding: 0;
+    font-size: 14px;
+  }
+
+  .more.el-button:focus,
+  .more.el-button:hover,
+  .more.el-button:active {
+    background-color: transparent !important;
+    color: #FFE59E !important;
+    border-color: transparent !important;
+  }
 </style>