style: 修改notification抽屉样式

src/views/Layout/src/components/Header/components/NotificationDrawer.vue

@@ -46,14 +46,29 @@ const notificationList = [
     previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
   }
 ]
-const data = {
-  title: 'Feature Update',
-  mode: 'Ocean Freight',
-  no: 'HBOL: SHJN2301234',
-  tag: 'Booking Confirmed',
-  location: 'Hong Kong',
-  time: 'Jan 10, 2025 14:30 UTC+8',
-  previous: 'Previous: Departure from Shanghai (08:15 UTC+8)'
+
+const passwordExpirationList = [
+  {
+    title: 'Password Notifications',
+    isExpiration: true,
+    tips: 'Password Expiration in 3 Days',
+    content:
+      'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+  },
+  {
+    title: 'Password Notifications',
+    isExpiration: false,
+    tips: 'Password Expiration in 3 Days',
+    content:
+      'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
+  }
+]
+const passwordExpiration = {
+  title: 'Password Notifications',
+  isExpiration: true,
+  tips: 'Password Expiration in 3 Days',
+  content:
+    'Your password will expire in 7 days. To ensure the security of your account, please change your password as soon as possible.'
 }
 </script>
 
@@ -87,19 +102,22 @@ const data = {
           :key="index"
           :data="item"
         ></NotificationCard>
-        <div class="feature-update">
-          <div class="header" v-if="data.title">
+        <div
+          class="password-notifications"
+          v-for="(item, index) in passwordExpirationList"
+          :key="index"
+        >
+          <div class="header" v-if="item.title">
             <div class="status-icon"></div>
-            <div class="title">{{ data.title }}</div>
+            <div class="title">{{ item.title }}</div>
           </div>
-          <div class="card-content">
+          <div class="card-content" :class="{ 'is-expired': item.isExpiration }">
             <div class="title">
               <span class="font_family icon-icon_password_b"></span>
-              <span>Password Expiration in 7 Days</span>
+              <span>{{ item.tips }}</span>
             </div>
             <div class="details">
-              Your password will expire in 7 days. To ensure the security of your account, please
-              change your password as soon as possible.
+              {{ item.content }}
             </div>
             <div class="change-btn" style="text-align: center">
               <el-button class="el-button--main" style="height: 40px" @click="confirmClick">
@@ -109,6 +127,34 @@ const data = {
             </div>
           </div>
         </div>
+        <div class="feature-update">
+          <div class="header">
+            <div class="status-icon"></div>
+            <div class="title">Feature Update</div>
+          </div>
+          <div class="card-content">
+            <div class="title">
+              <span class="font_family icon-icon_password_b"></span>
+              <span>Feature Update</span>
+            </div>
+            <div class="details">
+              <span
+                >We are pleased to announce that the quick search function is now officially online!
+                You can now quickly find what you need by entering keywords, greatly improving your
+                work efficiency. Go and experience it!</span
+              >
+            </div>
+            <div class="change-btn" style="text-align: center">
+              <el-button
+                class="el-button--main"
+                style="height: 40px; padding: 0 32px"
+                @click="confirmClick"
+              >
+                View more</el-button
+              >
+            </div>
+          </div>
+        </div>
       </div>
     </template>
   </el-drawer>
@@ -124,7 +170,46 @@ div.layout-toolbar {
       }
     }
   }
+  .password-notifications {
+    margin-bottom: 16px;
+    .header {
+      display: flex;
+      align-items: center;
+      margin-bottom: 8px;
+      .status-icon {
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: var(--color-theme);
+        margin-right: 10px;
+      }
+      .title {
+        font-weight: 700;
+      }
+    }
+    .card-content {
+      padding: 16px 8px 24px;
+      background: linear-gradient(180deg, #ffe294 0%, #f6f8fa 100%);
+      border-radius: 12px;
+      &.is-expired {
+        background: linear-gradient(182deg, #ef99a0 2.2%, #f6f8fa 98.77%);
+      }
+      .title {
+        span {
+          vertical-align: middle;
+          font-weight: 700;
+        }
+        .font_family {
+          margin-right: 8px;
+        }
+      }
+      .details {
+        margin: 8px 0 16px 24px;
+      }
+    }
+  }
   .feature-update {
+    margin-bottom: 16px;
     .header {
       display: flex;
       align-items: center;
@@ -142,8 +227,11 @@ div.layout-toolbar {
     }
     .card-content {
       padding: 16px 8px 24px;
-      background: #ffe39a;
+      background: linear-gradient(180deg, #ffe294 0%, #f6f8fa 100%);
       border-radius: 12px;
+      &.is-expired {
+        background: linear-gradient(182deg, #ef99a0 2.2%, #f6f8fa 98.77%);
+      }
       .title {
         span {
           vertical-align: middle;