no message

src/components/stuMan/eventsCalendar.vue

@@ -200,15 +200,19 @@
   }
   .eventsCalendar_box{
       
+  }
+  .eventsCalendar{
+    margin-bottom: 3px;
   }
   .hover_Suspended{
       position: relative;
       padding: 0 3px;
+      background-color: #fff;
+      border-radius: 10px;
+      font-size: 15px;
   }
   .hover_Suspended:hover{
       color: #F8A535;
-      background-color: #fff;
-      border-radius: 10px;
   }
   .hover_Suspended:hover .Suspended{
       display: block;
@@ -218,14 +222,15 @@
       bottom: 25px;
       left: 0;
       right: 0;
-      z-index: 2;
+      z-index: 95;
       display: none;
       padding: 10px;
       border-radius: 3px;
       background-color: #fff;
       box-shadow: 2px 5px 10px 0px rgba(36, 36, 36, 0.2);
+      font-size: 14px;
   }
-  .Suspended div{
+  .Suspended .Suspended-b{
         position: absolute;
         width: 0;
         height: 0;
@@ -241,10 +246,30 @@
         left: 20px;
   }
   .Suspended_text{
-      padding: 0;
+      padding:2px 0;
       margin: 0;
       color: #3f4254;
   }
+  .Suspended_text span{
+    width: 80px;
+    text-align: right;
+    margin-right: 5px;
+  }
+  .Suspended_text p{
+    color: #fff;
+    border-radius: 10px;
+    display: inline-block;
+    padding: 0 5px;
+  }
+  .Suspended_text p.grey{
+    background-color: grey;
+  }
+  .Suspended_text p.green{
+    background-color: green;
+  }
+  .Suspended_text p.red{
+    background-color: red;
+  }
 </style>
 <template>
   <div>
@@ -266,13 +291,16 @@
                                 <div class="hover_Suspended">
                                     {{items.ActivityName}}
                                     <div class="Suspended">
-                                        <div></div>
-                                        <p class="Suspended_text">标题: {{items.ActivityName}}</p>
-                                        <p class="Suspended_text">结束时间: {{items.StartTime}}~{{items.EndTime}}</p>
-                                        <p class="Suspended_text">活动类型: {{items.ActivityTypeName}}</p>
-                                        <p class="Suspended_text" v-show="!items.IsFree">价格: {{items.Price}}</p>
-                                        <p class="Suspended_text" v-show="items.LocationName">地址: {{items.LocationName}}</p>
-                                        <p class="Suspended_text">状态: {{items.ActivityStatus==1?'进行中':(items.ActivityStatus==2?'已结束':'')}}</p>
+                                        <div class="Suspended-b"></div>
+                                        <div class="Suspended_text"><span>标题 :</span>{{items.ActivityName}}</div>
+                                        <div class="Suspended_text"><span>时间 :</span>{{items.StartTime}}~{{items.EndTime}}</div>
+                                        <div class="Suspended_text"><span>类型 :</span>{{items.ActivityTypeName}}</div>
+                                        <div class="Suspended_text"><span>价格 :</span>{{!items.IsFree?items.Price:'免费'}}</div>
+                                        <div class="Suspended_text" v-show="items.LocationName"><span>地址 :</span> {{items.LocationName}}</div>
+                                        <div class="Suspended_text"><span>状态 :</span> 
+                                          <p :class="items.ActivityStatus==1?'green':(items.ActivityStatus==2?'red':'grey')">
+                                          {{items.ActivityStatus==1?'进行中':(items.ActivityStatus==2?'已结束':'未开始')}}</p>
+                                        </div>
                                     </div>
                                 </div>
                             </div>