feat:KYC认证

src/locales/langs/en-us.ts

@@ -15,6 +15,7 @@ const viewEn: any = {
   "view.billing_billservice":"Bill service",
   "view.set-meal": "Package",
   "view.userInfo":"User Information",
+  "view.userInfo_kyc":"KYC certification",
   "view.userInfo_profile":"Change Information",
   "view.userInfo_resetpwd":"Reset Password",
   "view.userInfo_device":"Device management",
@@ -535,6 +536,7 @@ const local: any = {
       deviceCount: "Device",
     },
     userInfo:{
+      kyc:'KYC certification',
       user:'User',
       ownInfo:'Personal Information',
       changepassword:'Change password',
@@ -613,7 +615,7 @@ const local: any = {
     usercard:{
       changeInfo:"Change Information",
       resetpwd:"Reset password",
-      KYC:"KYC Certification",
+      kyc:"KYC Certification",
       deviceconsole:"Device management",
       access:"Currently connected device",
       records:"History connected",
@@ -635,6 +637,7 @@ const local: any = {
       updateFailed: 'Update failed'
     },
     recharge:{
+      recharge:"Recharge",
       balanceRecharge:'Banlance Recharge',
       packageSubscription:'Package Subscription',
     },

src/locales/langs/zh-cn.ts

@@ -15,6 +15,7 @@ const viewZh: any = {
   "view.billing_Internetdetails":"上网详单",
   "view.set-meal": "套餐",
   "view.userInfo":"个人信息",
+  "view.userInfo_kyc":"KYC认证",
   "view.userInfo_profile":"修改信息",
   "view.userInfo_resetpwd":"修改密码",
   "view.userInfo_device":"设备管理",
@@ -535,6 +536,7 @@ const local:any = {
       deviceCount: "设备数",
     },
     userInfo:{
+      kyc:'KYC认证',
       user:'用户',
       ownInfo:'个人信息',
       changepassword:'修改密码',
@@ -613,7 +615,7 @@ const local:any = {
     usercard:{
       changeInfo:"修改信息",
       resetpwd:"修改密码",
-      KYC:"KYC认证",
+      kyc:"KYC认证",
       deviceconsole:"设备管理",
       access:"当前设备",
       records:"历史连接",
@@ -635,6 +637,7 @@ const local:any = {
       updateFailed: '更新失败'
     },
     recharge:{
+      recharge:"充值服务",
       balanceRecharge:'余额充值',
       packageSubscription:'套餐办理',
     },

src/router/elegant/routes.ts

@@ -334,6 +334,18 @@ export const customRoutes: GeneratedRoute[] = [
           hideInMenu: true
         },
       },
+      {
+        name: 'billing_recharge',
+        path: '/billing/recharge',
+        component: 'view.billing_recharge',
+        meta: {
+          title: '充值服务',
+          i18nKey: 'view.recharge_rechargeservice',
+          icon: 'material-symbols:filter-list-off',
+          order: 2,
+          hideInMenu: true
+        },
+      },
       {
         name: 'billing_histories',
         path: '/billing/histories',
@@ -342,7 +354,7 @@ export const customRoutes: GeneratedRoute[] = [
           title: '历史查询',
           i18nKey: 'view.billing_histories',
           icon: 'material-symbols:filter-list-off',
-          order: 2
+          order: 3
         },
       },
       {
@@ -353,7 +365,7 @@ export const customRoutes: GeneratedRoute[] = [
           title: '充值记录',
           i18nKey: 'view.billing_Rechargehistory',
           icon: 'material-symbols:filter-list-off',
-          order: 7
+          order: 4
         },
       },
       {
@@ -415,6 +427,17 @@ export const customRoutes: GeneratedRoute[] = [
           hideInMenu: true
         }
       },
+      {
+        name: 'user-info_kyc',
+        path: '/userInfo/kyc',
+        component: 'view.userInfo_kyc',
+        meta: {
+          title: 'KYC认证',
+          i18nKey: 'view.userInfo_kyc',
+          order:18,
+          hideInMenu: true
+        }
+      },
       {
         name: 'user-info_profile',
         path: '/userInfo/profile',

src/service/api/auth.ts

@@ -160,4 +160,36 @@ export function fetchPackageHistory(params: Api.Package.PackageHistoryQueryParam
     params
   });
 }
+/** Get KYC status */
+export function fetchKYCStatus() {
+  return request<Api.KYC.KYCInfo>({
+    url: '/u/kyc/page',
+    method: 'get'
+  });
+}
+
+/** Submit KYC verification */
+export function submitKYCVerification(data: Api.KYC.KYCVerifyParams) {
+  return request({
+    url: '/u/kyc/verify',
+    method: 'post',
+    data
+  });
+}
+
+/** Upload file */
+export function uploadFile(file: File) {
+  const formData = new FormData();
+  formData.append('file', file);
+  return request<{ name: string; url: string }>({
+    url: '/file/upload',
+    method: 'post',
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    },
+    data: formData
+  });
+}
+
+
 

src/typings/api.d.ts

@@ -721,4 +721,46 @@ declare namespace Api {
     /** Combined order params type */
     type SubmitOrderParams = PackageOrderParams | RechargeOrderParams;
   }
+  namespace KYC {
+    /** KYC status enum */
+    type KYCStatus = 0 | 1 | 2; // 0: 未认证, 1: 认证中, 2: 已认证
+
+    /** KYC info */
+    interface KYCInfo {
+      status: KYCStatus;
+      fullName?: string;
+      birthDate?: string;
+      idCardFile?: string;
+      photoFile?: string;
+      rejectReason?: string;
+      verifiedTime?: string;
+    }
+
+    /** KYC response */
+    interface KYCResponse {
+      code: number;
+      msg: string;
+      data: KYCInfo;
+    }
+
+    /** ID Type enum */
+    enum IDType {
+      DRIVERS_LICENSE = 1,
+      PASSPORT = 2,
+      RESIDENCE_PERMIT = 3,
+      STUDENT_ID = 4,
+      MEDICARE_CARD = 5,
+      BIRTH_CERTIFICATE = 6
+    }
+
+    /** KYC verify params */
+    interface KYCVerifyParams {
+      realName:string;
+      birthDate: string;
+      idType: IDType;  // 改为数字类型
+      idFile: string;
+      identifyPicture: string;
+      kycRequestStatus: number;
+    }
+  }
 }

src/typings/auto-imports.d.ts

@@ -102,6 +102,7 @@ declare global {
   const fetchGetMenuTree: typeof import('../service/api/menu')['fetchGetMenuTree']
   const fetchHistoricalDevices: typeof import('../service/api/auth')['fetchHistoricalDevices']
   const fetchIsRouteExist: typeof import('../service/api/route')['fetchIsRouteExist']
+  const fetchKYCStatus: typeof import('../service/api/auth')['fetchKYCStatus']
   const fetchLogin: typeof import('../service/api/auth')['fetchLogin']
   const fetchPackageHistory: typeof import('../service/api/auth')['fetchPackageHistory']
   const fetchPackageList: typeof import('../service/api/auth')['fetchPackageList']
@@ -204,6 +205,7 @@ declare global {
   const shallowRef: typeof import('vue')['shallowRef']
   const sortRoutesByOrder: typeof import('../store/modules/route/shared')['sortRoutesByOrder']
   const storeToRefs: typeof import('pinia')['storeToRefs']
+  const submitKYCVerification: typeof import('../service/api/auth')['submitKYCVerification']
   const submitOrder: typeof import('../service/api/auth')['submitOrder']
   const submitPackageOrder: typeof import('../service/api/auth')['submitPackageOrder']
   const suite: typeof import('vitest')['suite']
@@ -236,6 +238,7 @@ declare global {
   const updateLocaleOfGlobalMenus: typeof import('../store/modules/route/shared')['updateLocaleOfGlobalMenus']
   const updateTabByI18nKey: typeof import('../store/modules/tab/shared')['updateTabByI18nKey']
   const updateTabsByI18nKey: typeof import('../store/modules/tab/shared')['updateTabsByI18nKey']
+  const uploadFile: typeof import('../service/api/auth')['uploadFile']
   const useActiveElement: typeof import('@vueuse/core')['useActiveElement']
   const useAnimate: typeof import('@vueuse/core')['useAnimate']
   const useAntdForm: typeof import('../hooks/common/form')['useAntdForm']

src/typings/components.d.ts

@@ -7,6 +7,7 @@ export {}
 /* prettier-ignore */
 declare module 'vue' {
   export interface GlobalComponents {
+    AAlert: typeof import('ant-design-vue/es')['Alert']
     ABreadcrumb: typeof import('ant-design-vue/es')['Breadcrumb']
     ABreadcrumbItem: typeof import('ant-design-vue/es')['BreadcrumbItem']
     AButton: typeof import('ant-design-vue/es')['Button']
@@ -54,6 +55,7 @@ declare module 'vue' {
     ATooltip: typeof import('ant-design-vue/es')['Tooltip']
     ATree: typeof import('ant-design-vue/es')['Tree']
     ATreeSelect: typeof import('ant-design-vue/es')['TreeSelect']
+    AUpload: typeof import('ant-design-vue/es')['Upload']
     BetterScroll: typeof import('./../components/custom/better-scroll.vue')['default']
     ButtonIcon: typeof import('./../components/custom/button-icon.vue')['default']
     CountTo: typeof import('./../components/custom/count-to.vue')['default']

src/views/userInfo/kyc/index.vue

@@ -0,0 +1,549 @@
+<script setup lang="ts">
+import { ref, onMounted } from 'vue';
+// import { useI18n } from 'vue-i18n';
+import { message, Upload } from 'ant-design-vue';
+import type { UploadProps } from 'ant-design-vue';
+import { LoadingOutlined, PlusOutlined } from '@ant-design/icons-vue';
+import type { Dayjs } from 'dayjs';
+import { fetchKYCStatus, submitKYCVerification, uploadFile } from '@/service/api/auth';
+import dayjs from 'dayjs';  // 导入 dayjs
+
+// const { t } = useI18n();
+
+// KYC 状态
+const kycStatus = ref<Api.KYC.KYCStatus>(0);
+const kycInfo = ref<Partial<Api.KYC.KYCInfo>>({
+  status: 0,
+  fullName: '',
+  birthDate: '',
+  rejectReason: '',
+  verifiedTime: ''
+});
+
+// 证件类型选项
+const idTypeOptions = [
+  { value: 1, label: '驾驶证' },
+  { value: 2, label: '护照' },
+  { value: 3, label: '居留许可' },
+  { value: 4, label: '学生证' },
+  { value: 5, label: '医保卡' },
+  { value: 6, label: '出生证明' }
+];
+
+// 表单数据
+interface FormData {
+  fullName: string;
+  birthDate: string;
+  idType: number;  // 使用 number 类型
+  idCardFile?: string;
+  photoFile?: string;
+}
+
+// 表单数据
+const formData = ref<FormData>({
+  fullName: '',
+  birthDate: '',
+  idType: 2,  // 默认选择护照
+  idCardFile: undefined,
+  photoFile: undefined
+});
+
+// 文件对象存储
+const idCardFileObj = ref<File>();
+const photoFileObj = ref<File>();
+
+// 上传状态
+const idCardLoading = ref(false);
+const photoLoading = ref(false);
+
+// 文件列表状态
+const idCardFileList = ref<any[]>([]);
+const photoFileList = ref<any[]>([]);
+
+// 添加图片预览状态
+const previewVisible = ref(false);
+const previewImage = ref('');
+const previewTitle = ref('');
+
+// 处理图片预览
+const handlePreview = async (file: any) => {
+  if (!file.url && !file.preview) {
+    file.preview = await getBase64(file.originFileObj);
+  }
+  previewImage.value = file.url || file.preview;
+  previewVisible.value = true;
+  previewTitle.value = file.name || file.url.substring(file.url.lastIndexOf('/') + 1);
+};
+
+// 处理图片删除
+const handleIdCardRemove = () => {
+  formData.value.idCardFile = undefined;
+  idCardFileObj.value = undefined;
+  idCardFileList.value = [];
+};
+
+const handlePhotoRemove = () => {
+  formData.value.photoFile = undefined;
+  photoFileObj.value = undefined;
+  photoFileList.value = [];
+};
+
+// 辅助函数：将文件转换为 base64
+const getBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = error => reject(error);
+  });
+};
+
+// 获取 KYC 状态
+const getKYCStatus = async () => {
+  try {
+    const { data, error } = await fetchKYCStatus();
+    if (error) {
+      console.error('Failed to fetch KYC status:', error);
+      return;
+    }
+    if (data) {
+      kycStatus.value = data.status;
+      kycInfo.value = data;
+    }
+  } catch (error) {
+    console.error('Failed to fetch KYC status:', error);
+  }
+};
+
+// 处理文件上传
+const handleIdCardUpload: UploadProps['beforeUpload'] = async (file) => {
+  const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'application/pdf';
+  if (!isValidFormat) {
+    message.error('只支持 JPG/PNG/PDF 格式文件！');
+    return Upload.LIST_IGNORE;
+  }
+  const isLt5M = file.size / 1024 / 1024 < 5;
+  if (!isLt5M) {
+    message.error('文件大小不能超过 5MB！');
+    return Upload.LIST_IGNORE;
+  }
+
+  try {
+    idCardLoading.value = true;
+    const { data, error } = await uploadFile(file);
+    if (error) {
+      throw error;
+    }
+    if (data) {
+      formData.value.idCardFile = data.url;  // 存储文件 URL
+      idCardFileObj.value = file;  // 存储文件对象
+      message.success('证件照片上传成功！');
+    }
+  } catch (error) {
+    console.error('Failed to upload ID card:', error);
+    message.error('证件照片上传失败，请重试！');
+  } finally {
+    idCardLoading.value = false;
+  }
+  return false;
+};
+
+const handlePhotoUpload: UploadProps['beforeUpload'] = async (file) => {
+  const isValidFormat = file.type === 'image/jpeg' || file.type === 'image/png';
+  if (!isValidFormat) {
+    message.error('只支持 JPG/PNG 格式图片！');
+    return Upload.LIST_IGNORE;
+  }
+  const isLt2M = file.size / 1024 / 1024 < 2;
+  if (!isLt2M) {
+    message.error('图片大小不能超过 2MB！');
+    return Upload.LIST_IGNORE;
+  }
+
+  try {
+    photoLoading.value = true;
+    const { data, error } = await uploadFile(file);
+    if (error) {
+      throw error;
+    }
+    if (data) {
+      formData.value.photoFile = data.url;  // 存储文件 URL
+      photoFileObj.value = file;  // 存储文件对象
+      message.success('面部照片上传成功！');
+    }
+  } catch (error) {
+    console.error('Failed to upload photo:', error);
+    message.error('面部照片上传失败，请重试！');
+  } finally {
+    photoLoading.value = false;
+  }
+  return false;
+};
+
+// 提交 KYC 认证
+const submitKYC = async () => {
+  try {
+    if (!formData.value.fullName || !formData.value.birthDate || !formData.value.idType) {
+      message.error('请填写完整信息！');
+      return;
+    }
+    if (!formData.value.idCardFile || !formData.value.photoFile) {
+      message.error('请上传所需文件！');
+      return;
+    }
+
+    // 格式化出生日期为 YYYY-MM-DD 格式
+    const formattedBirthDate = dayjs(formData.value.birthDate).format('YYYY-MM-DD');
+
+    await submitKYCVerification({
+      realName: formData.value.fullName,  // 添加真实姓名
+      birthDate: formattedBirthDate,
+      idType: formData.value.idType,
+      idFile: formData.value.idCardFile,
+      identifyPicture: formData.value.photoFile,
+      kycRequestStatus: 1
+    });
+
+    message.success('KYC 认证申请提交成功！');
+    await getKYCStatus();
+  } catch (error) {
+    console.error('Failed to submit KYC:', error);
+    message.error('提交失败，请重试！');
+  }
+};
+
+// 修改日期禁用逻辑
+const disabledDate = (current: Dayjs) => {
+  // 禁用今天之后的日期
+  return current && current.valueOf() > Date.now();
+};
+
+// 获取状态颜色
+const getStatusColor = (status: Api.KYC.KYCStatus) => {
+  switch (status) {
+    case 0:
+      return 'warning';    // 未认证：橙色警告
+    case 1:
+      return 'processing'; // 认证中：蓝色处理中
+    case 2:
+      return 'success';    // 已认证：绿色成功
+    default:
+      return 'default';
+  }
+};
+
+// 获取状态文本
+const getStatusText = (status: Api.KYC.KYCStatus) => {
+  switch (status) {
+    case 0:
+      return '未认证';
+    case 1:
+      return '认证中';
+    case 2:
+      return '已认证';
+    default:
+      return '未知状态';
+  }
+};
+
+onMounted(() => {
+  getKYCStatus();
+});
+</script>
+
+<template>
+  <div class="kyc-container responsive-container">
+    <!-- 标题部分 -->
+    <div class="page-header">
+      <h1 class="page-title">KYC 实名认证</h1>
+      <p class="page-desc">根据相关法规要求，使用服务前需要完成实名认证</p>
+    </div>
+
+    <!-- 状态卡片 -->
+    <div class="status-card">
+      <div class="status-header">
+        <span class="status-title">认证状态</span>
+        <a-tag
+          class="status-tag"
+          :color="getStatusColor(kycStatus)"
+        >
+          {{ getStatusText(kycStatus) }}
+        </a-tag>
+      </div>
+
+      <div v-if="kycStatus === 2" class="verified-info">
+        <div class="info-item">
+          <span class="label">认证姓名：</span>
+          <span class="value">{{ kycInfo.fullName }}</span>
+        </div>
+        <div class="info-item">
+          <span class="label">认证时间：</span>
+          <span class="value">{{ kycInfo.verifiedTime }}</span>
+        </div>
+      </div>
+
+      <div v-if="kycInfo.rejectReason" class="reject-reason">
+        <a-alert
+          type="warning"
+          :message="kycInfo.rejectReason"
+          show-icon
+          banner
+        />
+      </div>
+    </div>
+
+    <!-- 认证表单 -->
+    <div v-if="kycStatus !== 2" class="form-card">
+      <div class="form-header">
+        <h2 class="form-title">认证信息</h2>
+        <p class="form-desc">请填写真实的个人信息，所有信息仅用于身份认证</p>
+      </div>
+
+      <a-form layout="vertical" class="kyc-form">
+        <!-- 基本信息部分 -->
+        <div class="form-section">
+          <h3 class="section-title">基本信息</h3>
+          <div class="form-grid">
+            <a-form-item label="真实姓名" required>
+              <a-input
+                v-model:value="formData.fullName"
+                placeholder="请输入真实姓名"
+                :maxLength="20"
+              />
+            </a-form-item>
+
+            <a-form-item label="出生日期" required>
+              <a-date-picker
+                v-model:value="formData.birthDate"
+                class="date-picker"
+                :disabledDate="disabledDate"
+                placeholder="请选择出生日期"
+              />
+            </a-form-item>
+          </div>
+        </div>
+
+        <!-- 证件信息部分 -->
+        <div class="form-section">
+          <h3 class="section-title">证件信息</h3>
+          <div class="form-grid">
+            <a-form-item label="证件类型" required>
+              <a-select
+                v-model:value="formData.idType"
+                placeholder="请选择证件类型"
+                class="id-type-select"
+                :get-popup-container="(triggerNode) => triggerNode.parentNode"
+              >
+                <a-select-option
+                  v-for="option in idTypeOptions"
+                  :key="option.value"
+                  :value="option.value"
+                >
+                  {{ option.label }}
+                </a-select-option>
+              </a-select>
+            </a-form-item>
+          </div>
+
+          <div class="upload-section">
+            <div class="upload-item">
+              <a-form-item label="证件照片" required>
+                <a-upload
+                  v-model:file-list="idCardFileList"
+                  list-type="picture-card"
+                  :show-upload-list="true"
+                  :before-upload="handleIdCardUpload"
+                  @preview="handlePreview"
+                  @remove="handleIdCardRemove"
+                >
+                  <div v-if="idCardFileList.length < 1">
+                    <loading-outlined v-if="idCardLoading" />
+                    <plus-outlined v-else />
+                    <div class="upload-text">上传证件照片</div>
+                  </div>
+                </a-upload>
+                <div class="upload-tip">支持 JPG/PNG/PDF 格式，大小不超过 5MB</div>
+              </a-form-item>
+            </div>
+
+            <div class="upload-item">
+              <a-form-item label="面部照片" required>
+                <a-upload
+                  v-model:file-list="photoFileList"
+                  list-type="picture-card"
+                  :show-upload-list="true"
+                  :before-upload="handlePhotoUpload"
+                  @preview="handlePreview"
+                  @remove="handlePhotoRemove"
+                >
+                  <div v-if="photoFileList.length < 1">
+                    <loading-outlined v-if="photoLoading" />
+                    <plus-outlined v-else />
+                    <div class="upload-text">上传面部照片</div>
+                  </div>
+                </a-upload>
+                <div class="upload-tip">支持 JPG/PNG 格式，大小不超过 2MB</div>
+              </a-form-item>
+            </div>
+          </div>
+        </div>
+
+        <div class="form-footer">
+          <a-button
+            type="primary"
+            size="large"
+            :disabled="kycStatus === 1"
+            @click="submitKYC"
+            class="submit-btn"
+          >
+            提交认证
+          </a-button>
+        </div>
+      </a-form>
+    </div>
+
+    <!-- 添加图片预览模态框 -->
+    <a-modal
+      :open="previewVisible"
+      :title="previewTitle"
+      :footer="null"
+      @cancel="previewVisible = false"
+    >
+      <img alt="预览图片" style="width: 100%" :src="previewImage" />
+    </a-modal>
+  </div>
+</template>
+
+<style scoped>
+/* 响应式容器 */
+.responsive-container {
+  width: 100%;
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+/* 卡片样式 */
+.status-card, .form-card {
+  background: white;
+  border-radius: 12px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
+  padding: clamp(16px, 4vw, 32px);
+  margin-bottom: 24px;
+}
+
+/* 表单网格布局 */
+.form-grid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+  gap: 24px;
+  margin-bottom: 24px;
+}
+
+/* 上传区域布局 */
+.upload-section {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: clamp(16px, 3vw, 24px);
+}
+
+/* 响应式标题 */
+.page-title {
+  font-size: clamp(20px, 4vw, 24px);
+  font-weight: 600;
+  margin-bottom: clamp(8px, 2vw, 16px);
+}
+
+/* 响应式描述文本 */
+.page-desc {
+  font-size: clamp(14px, 2vw, 16px);
+  color: #86909c;
+}
+
+/* 响应式表单项 */
+:deep .ant-form-item {
+  margin-bottom: clamp(16px, 3vw, 24px);
+}
+
+/* 响应式上传组件 */
+:deep .ant-upload-select,
+:deep .ant-upload-list-picture-card-container {
+  width: 100% !important;
+  height: clamp(140px, 30vw, 180px) !important;
+}
+
+/* 移动端适配 */
+@media (max-width: 768px) {
+  .responsive-container {
+    padding: 16px;
+  }
+
+  .status-card, .form-card {
+    padding: 16px;
+  }
+
+  .form-grid {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .upload-section {
+    grid-template-columns: 1fr;
+    gap: 16px;
+  }
+
+  .section-title {
+    font-size: 16px;
+    margin-bottom: 16px;
+  }
+
+  .form-footer {
+    margin-top: 24px;
+  }
+
+  .submit-btn {
+    width: 100%;
+    max-width: none;
+  }
+}
+
+/* 平板适配 */
+@media (min-width: 769px) and (max-width: 1024px) {
+  .responsive-container {
+    max-width: 900px;
+  }
+
+  .upload-section {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 大屏适配 */
+@media (min-width: 1025px) {
+  .responsive-container {
+    padding: 32px;
+  }
+
+  .form-grid {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+
+/* 暗色模式支持 */
+@media (prefers-color-scheme: dark) {
+  .status-card, .form-card {
+    background: #1f1f1f;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
+  }
+
+  .page-title {
+    color: #ffffff;
+  }
+
+  .page-desc {
+    color: #a8a8a8;
+  }
+}
+
+</style>