样式调整

src/assets/css/left.scss

@@ -236,11 +236,11 @@
      border-radius: 10px;
 
      span {
-         font-size: 16px;
-         width: 166px;
+         font-size: 15.5px;
+         width: 175px;
          font-family: Microsoft YaHei UI;
          // border: 1px solid red;
-         margin: 6px;
+         margin:  6px 0 6px 4px;
          font-weight: 400;
          //  padding: 0;
 

src/components/home.vue

@@ -32,14 +32,17 @@
                         <div class="list" style="text-align: center;width: 100%;">
                         {{ item[0].value }}
                         </div>
-
-                        <div class="listtitlebox">
-                            <div   v-for="item2 in item" class="listtitle">
                         
-                        <span class="name"> {{ item2.name }} :</span>
-                        <span v-if="item2.value!='在线'" class="value">{{ item2.value }}</span>
-                        <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
-                     </div>
+                        <div class="listtitlebox">
+                                <div   v-for="item2 in item" class="listtitle" >
+                            
+                                
+                            
+                                    <span class="name"> {{ item2.name }} :</span>
+                                <span v-if="item2.value!='在线'" class="value">{{ item2.value }}</span>
+                                <span v-else style=" font-family: 100; margin-left: 5px;color: #10C383;">{{ item2.value }}</span>
+                         
+                            </div>
                         </div>
                         
                     </div>

src/components/left.vue

@@ -56,7 +56,7 @@
                             <li >{{ item.percentage ?item.percentage: '—' }}</li>
                       
                             <li>
-                                <el-button size="small" class="look" @click.prevent="handleRoom(item)">查看</el-button>
+                                <el-button size="small" v-if="item.leaf" class="look" @click.prevent="handleRoom(item)">查看</el-button>
                             </li>
 
                         </ul>
@@ -76,10 +76,10 @@
 
 
 
-                <span><span class="title">班级: </span>{{ classInfo && classInfo.className }}</span>
-                <span><span class="title">课程名称: </span>{{ classInfo && classInfo.courseName }}</span>
+                <span><span class="title">班级: </span>  <span style="width: 105px; display: inline-flex;">{{ classInfo && classInfo.className }}</span> </span>
+                <span><span class="title">课程名称: </span>   <span style="width: 94px; display: inline-flex;">{{ classInfo && classInfo.courseName }}</span>    </span>
                 <span><span class="title">应到人数: </span>{{ classInfo && classInfo.expected }}</span>
-                <span><span class="title">教室: </span>{{ classInfo && classInfo.class }}</span>
+                <span><span class="title">教室: </span>  <span style=";width: 120px; display: inline-flex;"> {{ classInfo && classInfo.class }} </span>     </span>
                 <span><span class="title">实到人数: </span>{{ classInfo && classInfo.actual }}</span>
                 <span><span class="title">老师: </span>{{ classInfo && classInfo.teacher }}</span>
             </div>
@@ -189,10 +189,13 @@ export default ({
         let classInfo = ref({})
         const handleRoom = function (item) {
 
-            popoverVisible.value = true;
+        console.log('kankanitem',item);
+       setTimeout(() => {
+        popoverVisible.value = true;
             classInfo.value = item;
          
             classInfo.value.online = classInfo.value.status == "在用" ? true : false
+       }, 2400);
     
             mousemoveHandler(1000, 60)
 

src/components/right.vue

@@ -14,16 +14,17 @@
                 <div class="list">
                     <div class="item_r">
                         <img :src="d2img" alt="">
-                        <div class="percent">
-                            在线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ equipmentTotal.online }}
-                            <span>(个)</span>
+                        <div class="percent" style="display: flex;justify-content: space-between;">
+                            <a>在线</a> <a>{{ equipmentTotal.online }} <span>(个)</span> </a>
+                            
                         </div>
                     </div>
                     <div class="item_r">
                         <img :src="d3img" alt="">
-                        <div class="percent">
-                            离线&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{ equipmentTotal.underline }}
-                            <span>(个)</span>
+                        <div class="percent" style="display: flex;justify-content: space-between;">
+                            <a>离线</a> <a>{{ equipmentTotal.underline }} <span>(个)</span> </a>
+                             
+                    
                         </div>
                     </div>
                 </div>