代码调整

src/views/demonstration/deomonList/index.vue

@@ -7,30 +7,21 @@
     width="600px"
     :before-close="doClose"
     :z-index="2000"
+    class="synthesisTrain"
     :modal="false"
     :close-on-click-modal="false"
   >
-    <el-scrollbar wrap-class="scrollbar-wrapper" :style="{height: height+'px'}">
-      <el-tree
-        ref="tree"
-        node-key="group"
-        class="filter-tree"
-        default-expand-all
-        :data="trainingList"
-        :props="{label: 'roomName'}"
-        :filter-node-method="filterNode"
-        :style="{height: height+'px'}"
-      >
-        <div slot-scope="{ data }" class="list-elem custom-tree-node">
-          <span>{{ '['+data.map.name+']'+($t('global.trainingHasStart').replace('{name}', data.creator.nickname)) }}</span>
+    <div class="synthesisTrainTree">
+      <div v-for="(training,index) in trainingList" :key="index" class="synthesisTrainBody">
+        <span>{{ '['+training.map.name+']'+($t('global.trainingHasStart').replace('{name}', training.creator.nickname)) }}</span>
         <el-button
           type="text"
           size="mini"
-            @click="handleJoinRoom(data)"
+          class="synthesisTrainBtn"
+          @click="handleJoinRoom(training)"
         >进入</el-button>
       </div>
-      </el-tree>
-    </el-scrollbar>
+    </div>
     <span
       slot="footer"
       class="dialog-footer"
@@ -50,17 +41,12 @@ export default {
     data() {
         return {
             dialogShow: false,
-            height: 120,
             trainingList: [],
             loading: false,
             pageLoading: false
         };
     },
     methods: {
-        filterNode(value, data) {
-            if (!value) return true;
-            return data.label.indexOf(value) !== -1;
-        },
         async doShow() {
             try {
                 this.pageLoading = true;
@@ -99,30 +85,10 @@ export default {
 };
 </script>
 
-<style rel="stylesheet/scss" lang="scss" scoped>
-	/deep/ {
-		.el-dialog__body {
-			padding: 0px 30px !important;
-		}
-
-		.el-tree {
-			overflow: auto !important;
-			.list-elem {
-				height: 30px;
-				line-height: 30px;
-			}
-		}
-
-		.el-tree-node.is-current>.el-tree-node__content {
-			background-color: #e4e3e3 !important;
-		}
-	}
-	.custom-tree-node {
-		flex: 1;
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
-		font-size: 14px;
-		padding-right: 8px;
-	}
+<style rel="stylesheet/scss" lang="scss">
+  .synthesisTrainTree{height:120px;overflow:auto;}
+  .synthesisTrainBody{height: 30px;line-height: 30px;cursor: pointer;padding:0px 10px;font-size: 14px;}
+  .synthesisTrainBody:hover{background-color: #e4e3e3}
+  .synthesisTrain .el-dialog__body{padding: 0px 30px}
+  .synthesisTrainBtn{float:right}
 </style>

src/views/demonstration/detail/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-loading="loading" class="joylink-card">
+  <div v-loading="loading" class="demonstrateDetail">
     <div class="card-title">
       {{ $t('demonstration.simulationName') + courseModel.name }}
     </div>
@@ -267,8 +267,9 @@ export default {
 </script>
 
 <style rel="stylesheet/scss" lang="scss" scoped>
-    .joylink-card{
+    .demonstrateDetail{
         height: 100%;
+        border: 1px solid #EBEEF5;
         overflow: hidden;
         display:flex;
         flex-direction: column;