关播成功通知首页刷新直播列表

src/components/Loading/index_1.vue

@@ -19,6 +19,7 @@
   border: 4px solid #ccc;
   border-top-color: #888;
   animation: spin 1s infinite linear;
+  transform: translateZ(0);
 }
 
 @keyframes spin {

src/components/cardOne.vue

@@ -89,6 +89,8 @@ watch(
       height: 174px;
       border-top-left-radius: 8px;
       border-top-right-radius: 8px;
+      // object-fit: contain;
+      // object-fit: cover;
     }
   }
 }

src/pages/home/components/myDigtalPeople.vue

@@ -30,9 +30,15 @@
           </template>
           <template #live>
             <template v-if="item.is_live">
-              <div class="digtal-people-liveing">
+              <div class="digtal-people-status liveing">
                 <div class="dot"></div>
-                <span>直播中</span>
+                <span>LIVE</span>
+              </div>
+            </template>
+            <template v-if="item.status == 2">
+              <div class="digtal-people-status process">
+                <OtherLoading></OtherLoading>
+                <span>生成中</span>
               </div>
             </template>
           </template>
@@ -45,6 +51,7 @@
 </template>
 
 <script lang="ts" setup>
+import OtherLoading from '@/components/Loading/index_1.vue';
 import Grid from '@/components/Grid.vue';
 import { onMounted, reactive, ref, watch } from 'vue';
 import ConfirmDialog from '@/components/ConfirmDialog.vue';
@@ -169,6 +176,7 @@ watch(
 </script>
 
 <style lang="less">
+@import '@/style/variables.less';
 .my-digtal-people {
   padding: 20px 30px;
   background: #303030;
@@ -197,23 +205,44 @@ watch(
       margin-bottom: 20px;
     }
   }
-  .digtal-people-liveing {
+  .digtal-people-status {
     position: absolute;
     top: 0;
     right: 0;
-    background: rgb(252, 56, 75);
     border-top-right-radius: 8px;
-    color: white;
     padding: 6px 12px;
     display: flex;
+    justify-content: space-evenly;
     align-items: center;
     font-weight: bold;
+    height: 30px;
+    width: 74px;
+    font-size: @size-12;
+    white-space: nowrap;
+    font-weight: 700;
     .dot {
-      width: 10px;
-      height: 10px;
+      width: 5px;
+      height: 5px;
       border-radius: 50%;
       background: white;
-      margin-right: 12px;
+    }
+  }
+  .liveing {
+    background: rgb(252, 56, 75);
+    color: white;
+  }
+  .process {
+    color: #fff;
+    background: #b3b3b3;
+    .custom-loading {
+      height: auto;
+      margin-right: 6px;
+      .spinner {
+        width: 16px;
+        height: 16px;
+        border: 2px solid #fff;
+        border-top-color: #b3b3b3;
+      }
     }
   }
 }