chore: 赞助数量状态样式

packages/ui/certd-client/src/components/vip-button/vip-modal-content.vue

@@ -1,9 +1,24 @@
 <template>
-  <div class="mt-10 mb-10 vip-active-modal">
+  <div class="mt-10 vip-active-modal">
-    <div v-if="productInfo.notice" class="mb-10">
+    <div v-if="todayOrderCount.enabled" class="order-count hidden md:flex">
+      <div class="status-item status-show">
+        <div class="background">
+          <img :src="todayOrderCount.bg" alt="" />
+        </div>
+        <div class="flex flex-col order-count-text weight-bold">
+          <div class="count-text ml-4 flex items-center">
+            <fs-icon icon="noto:fire" class="fs-20 mr-2"></fs-icon>
+            <span> 今日赞助 </span>
+            <span class="count-number color-red font-bold text-2xl ml-1 mr-1"> {{ todayOrderCount.orderCount }} </span>人，
+            <span> {{ todayOrderCount.title }} </span>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-if="productInfo.notice" class="mt-10">
       <a-alert type="error" :message="productInfo.notice"></a-alert>
     </div>
-    <div class="vip-type-vs">
+    <div class="vip-type-vs mt-10">
       <a-row :gutter="20">
         <div v-for="(item, key) in vipTypeDefine" :key="key" class="w-full md:w-1/3 mb-4 p-5">
           <div :class="`vip-block  ${key === settingStore.plusInfo.vipType ? 'current' : ''}`">
@@ -214,15 +229,29 @@ const vipTypeDefine: any = {
   },
 };
 
-const TodayVipOrderCountRef = ref(0);
+const TodayVipOrderCountRef = ref();
 
 async function getTodayVipOrderCount() {
   const res = await api.getTodayVipOrderCount();
   if (res) {
-    TodayVipOrderCountRef.value = res.count;
+    TodayVipOrderCountRef.value = res;
   }
 }
 
+const todayOrderCount = computed(() => {
+  const countInfo = TodayVipOrderCountRef.value;
+  const enabled = countInfo?.enabled || false;
+  const orderCount = countInfo?.orderCount || 0;
+  const title = countInfo?.stage?.title || "";
+  const bg = countInfo?.stage?.bg || "";
+  return {
+    enabled: enabled,
+    orderCount: orderCount,
+    bg: bg,
+    title: title,
+  };
+});
+
 onMounted(async () => {
   getTodayVipOrderCount();
 });
@@ -230,6 +259,68 @@ onMounted(async () => {
 
 <style lang="less">
 .vip-active-modal {
+  .order-count {
+    height: 80px;
+    position: relative;
+    border: 1px solid #fee2c5;
+    border-radius: 5px;
+
+    .background {
+      border: 0px;
+      border-radius: 5px;
+      height: 100%;
+      width: 100%;
+      position: absolute;
+      top: 0;
+      left: 0;
+      z-index: 0;
+      display: flex;
+      justify-content: flex-end;
+      overflow: hidden;
+
+      img {
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .order-count-text {
+      position: absolute;
+      width: 100%;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      z-index: 2;
+      padding: 10px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-evenly;
+      /* 左至右渐变*/
+      background: linear-gradient(to right, rgba(255, 217, 167, 0.5), rgba(255, 255, 255, 0));
+
+      .count-text {
+        font-size: 16px;
+        font-weight: 600;
+        color: #ff6600;
+        display: flex;
+
+        .count-number {
+          margin-bottom: 5px;
+        }
+      }
+    }
+
+    .status-item {
+      opacity: 0;
+      transition: all 0.5s ease-in-out;
+    }
+
+    .status-show {
+      opacity: 1;
+    }
+  }
+
   .vip-block {
     display: flex;
     flex-direction: column;

packages/ui/certd-client/src/style/common.less

@@ -320,10 +320,25 @@ h6 {
   font-size: 16px !important;
 }
 
+.fs-18 {
+  font-size: 18px !important;
+}
+
+.fs-20 {
+  font-size: 20px !important;
+}
+.fs-24 {
+  font-size: 24px !important;
+}
+.fs-26 {
+  font-size: 26px !important;
+}
 .fs-28 {
   font-size: 28px !important;
 }
-
+.fs-32 {
+  font-size: 32px !important;
+}
 .w-50\% {
   width: 50%;
 }