UI重构

pages-content/my/aggreement/detail.vue

@@ -1,7 +1,7 @@
 <template>
   <view class="agreement-detail-page">
-    <!-- 自定义头部 -->
-    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <!-- 顶部渐变背景区域 -->
+    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="header-content">
         <view class="back-btn" @click="handleBack">
           <text class="back-icon">‹</text>
@@ -12,12 +12,12 @@
     </view>
     
     <!-- 页面内容 -->
-    <view class="page-body" :style="{ paddingTop: headerHeight + 'px' }">
-      <view class="content-wrapper">
-        <scroll-view scroll-y class="content-scroll">
-          <rich-text :nodes="agreementContent" class="agreement-content"></rich-text>
-        </scroll-view>
-      </view>
+    <view class="page-content">
+      <scroll-view scroll-y class="content-scroll">
+        <view class="agreement-content">
+          <rich-text :nodes="agreementContent"></rich-text>
+        </view>
+      </scroll-view>
     </view>
   </view>
 </template>
@@ -32,11 +32,6 @@ const { t, locale } = useI18n()
 // 状态栏高度
 const statusBarHeight = ref(0)
 
-// 头部总高度（状态栏 + 导航栏）
-const headerHeight = computed(() => {
-  return statusBarHeight.value + 44 // 44px是导航栏高度
-})
-
 // 协议类型
 const agreementType = ref('')
 
@@ -48,9 +43,7 @@ const loading = ref(false)
 
 // 页面标题
 const pageTitle = computed(() => {
-  return agreementType.value === 'user' 
-    ? t('pagesContent.my.agreement.userAgreement')
-    : t('pagesContent.my.agreement.privacyPolicy')
+  return agreementType.value === 'user' ? '用户协议' : '隐私政策'
 })
 
 
@@ -89,7 +82,7 @@ const fetchAgreementContent = async () => {
     
     // 显示加载提示
     uni.showLoading({
-      title: t('common.message.loading'),
+      title: '加载中...',
       mask: true
     })
     
@@ -143,14 +136,14 @@ const getDefaultContent = () => {
   if (agreementType.value === 'user') {
     return `
       <div style="padding: 20px; line-height: 1.8; color: #333;">
-        <h2 style="text-align: center; color: #667eea; margin-bottom: 20px;">用户服务协议</h2>
+        <h2 style="text-align: center; color: #1ec9c9; margin-bottom: 20px;">用户服务协议</h2>
         <p>协议内容加载失败，请稍后重试。</p>
       </div>
     `
   } else {
     return `
       <div style="padding: 20px; line-height: 1.8; color: #333;">
-        <h2 style="text-align: center; color: #667eea; margin-bottom: 20px;">隐私政策</h2>
+        <h2 style="text-align: center; color: #1ec9c9; margin-bottom: 20px;">隐私政策</h2>
         <p>协议内容加载失败，请稍后重试。</p>
       </div>
     `
@@ -164,35 +157,29 @@ const getDefaultContent = () => {
   height: 100vh;
   display: flex;
   flex-direction: column;
-  background: linear-gradient(180deg, #f0f4ff 0%, #f8f9fa 100%);
+  background-color: #f5f5f5;
   
-  // 自定义头部
-  .custom-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #ffffff;
-    border-bottom: 1rpx solid #e5e5e5;
-    z-index: 100;
+  // 顶部渐变背景
+  .header-bg {
+    background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
     
     .header-content {
       height: 88rpx;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 32rpx;
+      padding: 0 24rpx;
       
       .back-btn {
         width: 60rpx;
         height: 60rpx;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         
         .back-icon {
           font-size: 56rpx;
-          color: #333333;
+          color: #ffffff;
           font-weight: 300;
         }
       }
@@ -201,8 +188,8 @@ const getDefaultContent = () => {
         flex: 1;
         text-align: center;
         font-size: 32rpx;
-        font-weight: 500;
-        color: #000000;
+        font-weight: 600;
+        color: #ffffff;
       }
       
       .placeholder {
@@ -212,58 +199,79 @@ const getDefaultContent = () => {
   }
   
   // 页面内容
-  .page-body {
+  .page-content {
     flex: 1;
     display: flex;
     flex-direction: column;
     overflow: hidden;
     
-    .content-wrapper {
+    .content-scroll {
       flex: 1;
-      margin: 40rpx;
-      background-color: #ffffff;
-      border-radius: 20rpx;
-      box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-      overflow: hidden;
+      width: 100%;
+      height: 100%;
       
-      .content-scroll {
-        width: 100%;
-        height: 100%;
+      .agreement-content {
+        padding: 32rpx 24rpx;
         
-        .agreement-content {
-          padding: 40rpx;
-          
-          ::v-deep h2 {
-            font-size: 36rpx;
-            font-weight: bold;
-            margin-bottom: 30rpx;
-          }
-          
-          ::v-deep h3 {
-            font-size: 30rpx;
-            font-weight: 600;
-            margin: 30rpx 0 20rpx;
-          }
+        ::v-deep h1 {
+          font-size: 40rpx;
+          font-weight: 700;
+          color: #333333;
+          margin-bottom: 32rpx;
+          line-height: 1.5;
+        }
+        
+        ::v-deep h2 {
+          font-size: 36rpx;
+          font-weight: 600;
+          color: #333333;
+          margin: 40rpx 0 24rpx;
+          line-height: 1.5;
+        }
+        
+        ::v-deep h3 {
+          font-size: 32rpx;
+          font-weight: 600;
+          color: #333333;
+          margin: 32rpx 0 20rpx;
+          line-height: 1.5;
+        }
+        
+        ::v-deep p {
+          font-size: 28rpx;
+          line-height: 1.8;
+          color: #666666;
+          margin-bottom: 24rpx;
+          text-align: justify;
+        }
+        
+        ::v-deep ul, ::v-deep ol {
+          padding-left: 40rpx;
+          margin-bottom: 24rpx;
           
-          ::v-deep p {
+          li {
             font-size: 28rpx;
             line-height: 1.8;
-            margin-bottom: 20rpx;
-            text-align: justify;
-          }
-          
-          ::v-deep ul {
-            padding-left: 40rpx;
-            margin-bottom: 20rpx;
-            
-            li {
-              font-size: 28rpx;
-              line-height: 1.8;
-              margin-bottom: 10rpx;
-              list-style-type: disc;
-            }
+            color: #666666;
+            margin-bottom: 16rpx;
           }
         }
+        
+        ::v-deep strong, ::v-deep b {
+          font-weight: 600;
+          color: #333333;
+        }
+        
+        ::v-deep a {
+          color: #1ec9c9;
+          text-decoration: underline;
+        }
+        
+        ::v-deep div {
+          font-size: 28rpx;
+          line-height: 1.8;
+          color: #666666;
+        }
       }
     }
   }

pages-content/my/aggreement/index.vue

@@ -1,46 +1,42 @@
 <template>
   <view class="agreement-page">
-    <!-- 自定义头部 -->
-    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
+    <!-- 顶部渐变背景区域 -->
+    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
       <view class="header-content">
         <view class="back-btn" @click="handleBack">
           <text class="back-icon">‹</text>
         </view>
-        <text class="header-title">{{ t('pagesContent.my.agreement.title') }}</text>
+        <text class="header-title">用户协议</text>
         <view class="placeholder"></view>
       </view>
     </view>
     
     <!-- 页面内容 -->
-    <view class="page-body" :style="{ paddingTop: headerHeight + 'px' }">
+    <view class="page-content">
       <!-- 协议列表 -->
       <view class="agreement-list">
         <!-- 用户协议 -->
         <view class="list-item" @click="handleUserAgreement">
-          <view class="item-content">
-            <view class="item-icon-wrapper">
-              <image class="item-icon" src="/static/pages-content/my/agreement/user.png" mode="aspectFit" />
-            </view>
+          <view class="item-left">
+            <image class="item-icon" src="/static/pages-content/my/agreement/user.png" mode="aspectFit" />
             <view class="item-info">
-              <text class="item-title">{{ t('pagesContent.my.agreement.userAgreement') }}</text>
-              <text class="item-desc">{{ t('pagesContent.my.agreement.userAgreementDesc') }}</text>
+              <text class="item-title">用户协议</text>
+              <text class="item-desc">了解使用本应用的相关条款</text>
             </view>
           </view>
-          <text class="item-arrow">›</text>
+          <text class="arrow">›</text>
         </view>
         
         <!-- 隐私协议 -->
         <view class="list-item" @click="handlePrivacyPolicy">
-          <view class="item-content">
-            <view class="item-icon-wrapper">
-              <image class="item-icon" src="/static/pages-content/my/agreement/privacy.png" mode="aspectFit" />
-            </view>
+          <view class="item-left">
+            <image class="item-icon" src="/static/pages-content/my/agreement/privacy.png" mode="aspectFit" />
             <view class="item-info">
-              <text class="item-title">{{ t('pagesContent.my.agreement.privacyPolicy') }}</text>
-              <text class="item-desc">{{ t('pagesContent.my.agreement.privacyPolicyDesc') }}</text>
+              <text class="item-title">隐私政策</text>
+              <text class="item-desc">了解我们如何保护您的隐私</text>
             </view>
           </view>
-          <text class="item-arrow">›</text>
+          <text class="arrow">›</text>
         </view>
       </view>
     </view>
@@ -48,25 +44,15 @@
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue'
-import { useI18n } from 'vue-i18n'
-
-const { t } = useI18n()
+import { ref, onMounted } from 'vue'
 
 // 状态栏高度
 const statusBarHeight = ref(0)
 
-// 头部总高度（状态栏 + 导航栏 + 额外间距）
-const headerHeight = computed(() => {
-  return statusBarHeight.value + 44 + 10 // 44px是导航栏高度，100px是额外间距
-})
-
 onMounted(() => {
   // 获取系统信息
   const systemInfo = uni.getSystemInfoSync()
   statusBarHeight.value = systemInfo.statusBarHeight || 0
-  
-  console.log('协议说明页面已加载')
 })
 
 // 返回上一页
@@ -83,7 +69,6 @@ const handleBack = () => {
 
 // 用户协议
 const handleUserAgreement = () => {
-  // TODO: 跳转到用户协议详情页
   uni.navigateTo({
     url: '/pages-content/my/aggreement/detail?type=user'
   })
@@ -91,7 +76,6 @@ const handleUserAgreement = () => {
 
 // 隐私协议
 const handlePrivacyPolicy = () => {
-  // TODO: 跳转到隐私协议详情页
   uni.navigateTo({
     url: '/pages-content/my/aggreement/detail?type=privacy'
   })
@@ -102,37 +86,29 @@ const handlePrivacyPolicy = () => {
 .agreement-page {
   width: 100%;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(180deg, #f0f4ff 0%, #f8f9fa 100%);
+  background-color: #f5f5f5;
   
-  // 自定义头部
-  .custom-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #ffffff;
-    border-bottom: 1rpx solid #e5e5e5;
-    z-index: 100;
+  // 顶部渐变背景
+  .header-bg {
+    background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
     
     .header-content {
       height: 88rpx;
       display: flex;
       align-items: center;
       justify-content: space-between;
-      padding: 0 32rpx;
+      padding: 0 24rpx;
       
       .back-btn {
         width: 60rpx;
         height: 60rpx;
         display: flex;
         align-items: center;
-        justify-content: center;
+        justify-content: flex-start;
         
         .back-icon {
           font-size: 56rpx;
-          color: #333333;
+          color: #ffffff;
           font-weight: 300;
         }
       }
@@ -141,8 +117,8 @@ const handlePrivacyPolicy = () => {
         flex: 1;
         text-align: center;
         font-size: 32rpx;
-        font-weight: 500;
-        color: #000000;
+        font-weight: 600;
+        color: #ffffff;
       }
       
       .placeholder {
@@ -152,72 +128,61 @@ const handlePrivacyPolicy = () => {
   }
   
   // 页面内容
-  .page-body {
-    flex: 1;
-    padding: 40rpx;
+  .page-content {
+    padding: 24rpx;
     
     // 协议列表
     .agreement-list {
       .list-item {
-        background-color: #ffffff;
-        border-radius: 20rpx;
-        padding: 40rpx;
-        margin-bottom: 24rpx;
+        background: #ffffff;
+        border-radius: 16rpx;
+        padding: 32rpx 24rpx;
+        margin-bottom: 16rpx;
         display: flex;
         align-items: center;
         justify-content: space-between;
-        box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-        transition: all 0.3s ease;
-        position: relative;
-        overflow: hidden;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
         
         &:active {
-          transform: translateY(-4rpx);
-          box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.12);
+          background-color: #f8f8f8;
         }
         
-        .item-content {
+        .item-left {
           flex: 1;
           display: flex;
           align-items: center;
           
-          .item-icon-wrapper {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            margin-right: 32rpx;
-            
-            .item-icon {
-              width: 48rpx;
-              height: 48rpx;
-            }
+          .item-icon {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 24rpx;
           }
           
           .item-info {
             flex: 1;
             display: flex;
             flex-direction: column;
+            gap: 8rpx;
             
             .item-title {
-              font-size: 32rpx;
+              font-size: 28rpx;
               color: #333333;
-              font-weight: 600;
-              margin-bottom: 8rpx;
+              font-weight: 500;
             }
             
             .item-desc {
               font-size: 24rpx;
               color: #999999;
-              line-height: 1.5;
+              line-height: 1.4;
             }
           }
         }
         
-        .item-arrow {
-          font-size: 48rpx;
-          color: #d0d0d0;
+        .arrow {
+          font-size: 40rpx;
+          color: #cccccc;
           font-weight: 300;
-          margin-left: 20rpx;
+          margin-left: 16rpx;
         }
       }
     }

pages-content/my/index.vue

@@ -4,61 +4,83 @@
   
   <!-- 我的主页 -->
   <view v-else class="my-page">
-    <!-- 自定义头部 -->
-    <view class="custom-header" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="header-content">
-        <text class="header-title">{{ t('common.mine.title') }}</text>
-      </view>
+    <!-- 顶部渐变背景区域 -->
+    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <text class="header-title">eTMF</text>
     </view>
     
     <!-- 页面内容 -->
-    <view class="page-body">
-      <!-- 用户名片区域 -->
+    <view class="page-content">
+      <!-- 用户信息卡片 -->
       <view class="user-card">
-        <image 
-          class="avatar" 
-          :src="userInfo.avatar" 
-          mode="aspectFill"
-          :class="{ loading: loading }"
-          @error="handleAvatarError"
-        />
-        <text class="nickname" :class="{ loading: loading }">{{ displayNickname }}</text>
+        <view class="user-info">
+          <image 
+            class="avatar" 
+            :src="userInfo.avatar" 
+            mode="aspectFill"
+            @error="handleAvatarError"
+          />
+          <view class="user-details">
+            <text class="nickname">{{ displayNickname }}</text>
+            <text class="phone">{{ displayPhone }}</text>
+          </view>
+        </view>
+        <view class="vip-badge" @click="handleVipClick">
+          <text class="vip-text">普通会员</text>
+          <text class="arrow">›</text>
+        </view>
       </view>
       
-      <!-- 功能列表 -->
-      <view class="function-list">
-        <!-- 基本信息 -->
-        <view class="list-item" @click="handleBasicInfo">
-          <view class="item-left">
-            <image class="item-icon" src="/static/pages-content/my/info.png" mode="aspectFit" />
-            <text class="item-label">{{ t('common.mine.basicInfo') }}</text>
-          </view>
-          <text class="item-arrow">›</text>
+      <!-- 我的任务 -->
+      <view class="task-section">
+        <view class="section-header">
+          <text class="section-title">我的任务</text>
+          <text class="arrow">›</text>
         </view>
-        
-        <!-- 文件管理 -->
-        <view class="list-item" @click="handleFileManage">
-          <view class="item-left">
-            <image class="item-icon" src="/static/pages-content/my/file.png" mode="aspectFit" />
-            <text class="item-label">{{ t('common.mine.fileManage') }}</text>
+        <view class="task-grid">
+          <view class="task-item" @click="handleTaskClick('pending')">
+            <view class="task-icon-wrapper">
+              <image class="task-icon" src="/static/pages-content/my/task-pending.png" mode="aspectFit" />
+              <view v-if="taskCounts.pending > 0" class="task-badge">{{ taskCounts.pending }}</view>
+            </view>
+            <text class="task-label">待传递</text>
+          </view>
+          <view class="task-item" @click="handleTaskClick('delivered')">
+            <view class="task-icon-wrapper">
+              <image class="task-icon" src="/static/pages-content/my/task-delivered.png" mode="aspectFit" />
+            </view>
+            <text class="task-label">已传递</text>
+          </view>
+          <view class="task-item" @click="handleTaskClick('reviewing')">
+            <view class="task-icon-wrapper">
+              <image class="task-icon" src="/static/pages-content/my/task-reviewing.png" mode="aspectFit" />
+              <view v-if="taskCounts.reviewing > 0" class="task-badge">{{ taskCounts.reviewing }}</view>
+            </view>
+            <text class="task-label">待审核</text>
+          </view>
+          <view class="task-item" @click="handleTaskClick('approved')">
+            <view class="task-icon-wrapper">
+              <image class="task-icon" src="/static/pages-content/my/task-approved.png" mode="aspectFit" />
+            </view>
+            <text class="task-label">已审核</text>
           </view>
-          <text class="item-arrow">›</text>
         </view>
-        
-        <!-- 审核管理 -->
-        <view class="list-item" @click="handleAuditManage">
-          <view class="item-left">
-            <image class="item-icon" src="/static/pages-content/my/audit.png" mode="aspectFit" />
-            <text class="item-label">{{ t('common.mine.auditManage') }}</text>
+      </view>
+      
+      <!-- 功能列表 -->
+      <view class="menu-list">
+        <view class="menu-item" @click="handleProtocol">
+          <view class="menu-left">
+            <image class="menu-icon" src="/static/pages-content/my/icon-protocol.png" mode="aspectFit" />
+            <text class="menu-label">用户协议</text>
           </view>
-          <text class="item-arrow">›</text>
+          <text class="arrow">›</text>
         </view>
         
-        <!-- 语言切换 -->
-        <view class="list-item">
-          <view class="item-left">
-            <image class="item-icon" src="/static/pages-content/my/language.png" mode="aspectFit" />
-            <text class="item-label">{{ t('common.mine.languageSwitch') }}</text>
+        <view class="menu-item">
+          <view class="menu-left">
+            <image class="menu-icon" src="/static/pages-content/my/icon-language.png" mode="aspectFit" />
+            <text class="menu-label">语言切换</text>
           </view>
           <view class="language-switcher" @click="handleLanguageChange">
             <text class="language-text" :class="{ active: locale === 'zh-CN' }">中</text>
@@ -67,19 +89,18 @@
           </view>
         </view>
         
-        <!-- 协议说明 -->
-        <view class="list-item" @click="handleProtocol">
-          <view class="item-left">
-            <image class="item-icon" src="/static/pages-content/my/aggrement.png" mode="aspectFit" />
-            <text class="item-label">{{ t('common.mine.protocol') }}</text>
+        <view class="menu-item" @click="handleAbout">
+          <view class="menu-left">
+            <image class="menu-icon" src="/static/pages-content/my/icon-about.png" mode="aspectFit" />
+            <text class="menu-label">关于我们</text>
           </view>
-          <text class="item-arrow">›</text>
+          <text class="arrow">›</text>
         </view>
       </view>
       
       <!-- 退出登录按钮 -->
       <view class="logout-section">
-        <button class="logout-btn" @click="handleLogout">{{ t('common.mine.logout') }}</button>
+        <button class="logout-btn" @click="handleLogout">退出登录</button>
       </view>
     </view>
   </view>
@@ -106,18 +127,42 @@ const statusBarHeight = ref(0)
 // 用户信息
 const userInfo = ref({
   avatar: '/static/default-avatar.svg',
-  nickname: ''
+  nickname: '',
+  phoneNumber: ''
 })
 
-// 加载状态
-const loading = ref(false)
+// 任务数量
+const taskCounts = ref({
+  pending: 6,
+  delivered: 0,
+  reviewing: 8,
+  approved: 0
+})
 
-// 显示的昵称（带加载状态）
+// 显示的昵称
 const displayNickname = computed(() => {
-  if (loading.value) {
-    return t('common.mine.loading')
+  return userInfo.value.nickname || '未设置昵称'
+})
+
+// 加密手机号
+const encryptPhone = (phone) => {
+  if (!phone) return ''
+  // 如果手机号长度为11位，则加密中间4位
+  if (phone.length === 11) {
+    return phone.replace(/(\d{3})\d{4}(\d{4})/, '$1****$2')
+  }
+  // 如果手机号长度不是11位，则加密中间部分
+  if (phone.length > 6) {
+    const start = phone.substring(0, 3)
+    const end = phone.substring(phone.length - 4)
+    return `${start}****${end}`
   }
-  return userInfo.value.nickname || t('common.mine.defaultNickname')
+  return phone
+}
+
+// 显示的手机号（加密）
+const displayPhone = computed(() => {
+  return encryptPhone(userInfo.value.phoneNumber)
 })
 
 onMounted(() => {
@@ -127,142 +172,116 @@ onMounted(() => {
   
   // 获取用户信息
   fetchUserInfo()
-  
-  console.log('我的内容组件已加载')
 })
 
 // 头像加载失败处理
 const handleAvatarError = () => {
-  console.log('头像加载失败，使用默认头像')
   userInfo.value.avatar = '/static/default-avatar.svg'
 }
 
 // 获取用户信息
 const fetchUserInfo = async () => {
   try {
-    loading.value = true
-    
-    // 调用 API 获取用户信息
     const response = await getUserInfoAPI()
     
     if (response && response.data) {
-      // 更新用户信息
       userInfo.value = {
         avatar: response.data.avatar || '/static/default-avatar.svg',
-        nickname: response.data.nickname || ''
+        nickname: response.data.nickname || '',
+        phoneNumber: response.data.phoneNumber || ''
       }
       
-      // 同步更新 store
       userStore.setUserInfo(response.data)
     }
   } catch (error) {
     console.error('获取用户信息失败:', error)
     
-    // 如果API失败，尝试从本地store获取
     const storedUserInfo = userStore.userInfo
-    if (storedUserInfo && storedUserInfo.nickname) {
+    if (storedUserInfo) {
       userInfo.value = {
         avatar: storedUserInfo.avatar || '/static/default-avatar.svg',
-        nickname: storedUserInfo.nickname
-      }
-    } else {
-      userInfo.value = {
-        avatar: '/static/default-avatar.svg',
-        nickname: ''
+        nickname: storedUserInfo.nickname || '',
+        phoneNumber: storedUserInfo.phoneNumber || ''
       }
     }
-    
-    uni.showToast({
-      title: t('common.mine.getUserInfoFailed'),
-      icon: 'none',
-      duration: 2000
-    })
-  } finally {
-    loading.value = false
   }
 }
 
-// 基本信息
-const handleBasicInfo = () => {
-  showBasicInfo.value = true
-}
-
 // 从基本信息返回主页
 const handleBackToMain = () => {
   showBasicInfo.value = false
 }
 
-// 文件管理
-const handleFileManage = () => {
+// VIP点击
+const handleVipClick = () => {
   uni.showToast({
-    title: '文件管理',
+    title: '会员功能',
     icon: 'none'
   })
-  // TODO: 跳转到文件管理页面
 }
 
-// 审核管理
-const handleAuditManage = () => {
+// 任务点击
+const handleTaskClick = (type) => {
   uni.showToast({
-    title: '审核管理',
+    title: `${type}任务`,
     icon: 'none'
   })
-  // TODO: 跳转到审核管理页面
+}
+
+// 协议说明
+const handleProtocol = () => {
+  uni.navigateTo({
+    url: '/pages-content/my/aggreement/index'
+  })
 }
 
 // 语言切换
 const handleLanguageChange = () => {
   localeStore.toggleLocale()
   
-  // 延迟一下让语言切换生效后再显示提示
   setTimeout(() => {
     uni.showToast({
-      title: t('common.language.switchSuccess'),
+      title: '语言切换成功',
       icon: 'success',
       duration: 1500
     })
   }, 100)
 }
 
-// 协议说明
-const handleProtocol = () => {
-  uni.navigateTo({
-    url: '/pages-content/my/aggreement/index'
+// 关于我们
+const handleAbout = () => {
+  uni.showToast({
+    title: '关于我们',
+    icon: 'none'
   })
 }
 
 // 退出登录
 const handleLogout = () => {
   uni.showModal({
-    title: t('common.button.confirm'),
-    content: t('common.mine.logoutConfirm'),
-    confirmText: t('common.button.confirm'),
-    cancelText: t('common.button.cancel'),
+    title: '提示',
+    content: '确定要退出登录吗？',
+    confirmText: '确定',
+    cancelText: '取消',
     success: async (res) => {
       if (res.confirm) {
         try {
-          // 显示加载状态
           uni.showLoading({
-            title: t('common.message.loading'),
+            title: '退出中...',
             mask: true
           })
           
-          // 调用后端API
           await logoutAPI()
-          
-          // API调用成功后，清除本地token和用户信息缓存
           userStore.logout()
           
           uni.hideLoading()
           
-          // 显示退出成功提示
           uni.showToast({
-            title: t('common.mine.logoutSuccess'),
+            title: '已退出登录',
             icon: 'success',
             duration: 1500
           })
           
-          // 延迟跳转到登录页
           setTimeout(() => {
             uni.reLaunch({
               url: '/pages/login/login'
@@ -273,11 +292,10 @@ const handleLogout = () => {
           uni.hideLoading()
           console.error('退出登录失败:', error)
           
-          // 即使 API失败，也清除本地数据并跳转
           userStore.logout()
           
           uni.showToast({
-            title: t('common.mine.logoutSuccess'),
+            title: '已退出登录',
             icon: 'success',
             duration: 1500
           })
@@ -298,173 +316,217 @@ const handleLogout = () => {
 .my-page {
   width: 100%;
   min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  background: linear-gradient(180deg, #f8fcff 0%, #ffffff 100%);
+  background-color: #f5f5f5;
   
-  // 自定义头部
-  .custom-header {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    background-color: #ffffff;
-    border-bottom: 1rpx solid #e5e5e5;
-    z-index: 100;
+  // 顶部渐变背景
+  .header-bg {
+    background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
+    height: 200rpx;
+    display: flex;
+    align-items: center;
+    justify-content: center;
     
-    .header-content {
-      height: 88rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      
-      .header-title {
-        font-size: 32rpx;
-        font-weight: 500;
-        color: #000000;
-      }
+    .header-title {
+      font-size: 36rpx;
+      font-weight: 600;
+      color: #ffffff;
+      letter-spacing: 4rpx;
     }
   }
   
   // 页面内容
-  .page-body {
-    flex: 1;
-    margin-top: 88rpx;
-    padding: 40rpx;
+  .page-content {
+    padding: 0 24rpx;
+    margin-top: -80rpx;
     
-    // 用户名片区域
+    // 用户信息卡片
     .user-card {
-      background: linear-gradient(135deg, #6ec7f5 0%, #4eb8f0 100%);
-      border-radius: 24rpx;
-      padding: 80rpx 40rpx 60rpx;
+      background: #ffffff;
+      border-radius: 16rpx;
+      padding: 32rpx 24rpx;
+      margin-bottom: 24rpx;
       display: flex;
-      flex-direction: column;
       align-items: center;
-      margin-bottom: 40rpx;
-      box-shadow: 0 8rpx 24rpx rgba(110, 199, 245, 0.25);
-      position: relative;
-      overflow: hidden;
+      justify-content: space-between;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
       
-      // 背景装饰
-      &::before {
-        content: '';
-        position: absolute;
-        top: -50%;
-        right: -20%;
-        width: 400rpx;
-        height: 400rpx;
-        background: rgba(255, 255, 255, 0.1);
-        border-radius: 50%;
+      .user-info {
+        display: flex;
+        align-items: center;
+        flex: 1;
+        
+        .avatar {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 50%;
+          margin-right: 24rpx;
+          border: 4rpx solid #f0f0f0;
+        }
+        
+        .user-details {
+          display: flex;
+          flex-direction: column;
+          gap: 8rpx;
+          
+          .nickname {
+            font-size: 32rpx;
+            font-weight: 600;
+            color: #333333;
+          }
+          
+          .phone {
+            font-size: 26rpx;
+            color: #999999;
+          }
+        }
       }
       
-      &::after {
-        content: '';
-        position: absolute;
-        bottom: -30%;
-        left: -10%;
-        width: 300rpx;
-        height: 300rpx;
-        background: rgba(255, 255, 255, 0.08);
-        border-radius: 50%;
+      .vip-badge {
+        background: linear-gradient(135deg, #666666 0%, #555555 100%);
+        border-radius: 30rpx;
+        padding: 12rpx 24rpx;
+        display: flex;
+        align-items: center;
+        gap: 8rpx;
+        
+        .vip-text {
+          font-size: 24rpx;
+          color: #ffffff;
+          font-weight: 500;
+        }
+        
+        .arrow {
+          font-size: 32rpx;
+          color: #ffffff;
+          font-weight: 300;
+        }
       }
+    }
+    
+    // 我的任务
+    .task-section {
+      background: #ffffff;
+      border-radius: 16rpx;
+      padding: 32rpx 24rpx;
+      margin-bottom: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
       
-      .avatar {
-        width: 140rpx;
-        height: 140rpx;
-        border-radius: 70rpx;
-        margin-bottom: 24rpx;
-        border: 6rpx solid rgba(255, 255, 255, 0.3);
-        box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.2);
-        position: relative;
-        z-index: 1;
-        transition: opacity 0.3s;
+      .section-header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 32rpx;
         
-        &.loading {
-          opacity: 0.5;
-          animation: pulse 1.5s ease-in-out infinite;
+        .section-title {
+          font-size: 30rpx;
+          font-weight: 600;
+          color: #333333;
+        }
+        
+        .arrow {
+          font-size: 40rpx;
+          color: #cccccc;
+          font-weight: 300;
         }
       }
       
-      .nickname {
-        font-size: 40rpx;
-        font-weight: bold;
-        color: #ffffff;
-        text-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.2);
-        position: relative;
-        z-index: 1;
-        transition: opacity 0.3s;
+      .task-grid {
+        display: flex;
+        justify-content: space-between;
         
-        &.loading {
-          opacity: 0.7;
+        .task-item {
+          display: flex;
+          flex-direction: column;
+          align-items: center;
+          gap: 16rpx;
+          flex: 1;
+          
+          .task-icon-wrapper {
+            position: relative;
+            width: 88rpx;
+            height: 88rpx;
+            
+            .task-icon {
+              width: 88rpx;
+              height: 88rpx;
+            }
+            
+            .task-badge {
+              position: absolute;
+              top: -8rpx;
+              right: -8rpx;
+              background: #ff4444;
+              color: #ffffff;
+              font-size: 20rpx;
+              font-weight: 600;
+              min-width: 32rpx;
+              height: 32rpx;
+              border-radius: 16rpx;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              padding: 0 8rpx;
+              border: 3rpx solid #ffffff;
+            }
+          }
+          
+          .task-label {
+            font-size: 24rpx;
+            color: #666666;
+          }
         }
       }
     }
     
     // 功能列表
-    .function-list {
-      background-color: #ffffff;
-      border-radius: 20rpx;
+    .menu-list {
+      background: #ffffff;
+      border-radius: 16rpx;
       overflow: hidden;
-      margin-bottom: 40rpx;
-      box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.06);
+      margin-bottom: 24rpx;
+      box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
       
-      .list-item {
+      .menu-item {
         display: flex;
         align-items: center;
         justify-content: space-between;
-        padding: 36rpx 40rpx;
-        border-bottom: 1rpx solid #f0f0f0;
-        transition: all 0.3s ease;
-        position: relative;
+        padding: 32rpx 24rpx;
+        border-bottom: 1rpx solid #f5f5f5;
         
         &:last-child {
           border-bottom: none;
         }
         
         &:active {
-          background-color: #f0faff;
-        }
-        
-        // 左侧渐变条
-        &::before {
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 50%;
-          transform: translateY(-50%);
-          width: 6rpx;
-          height: 60%;
-          background: linear-gradient(180deg, #6ec7f5 0%, #4eb8f0 100%);
-          border-radius: 0 6rpx 6rpx 0;
-          opacity: 0;
-          transition: opacity 0.3s;
-        }
-        
-        &:active::before {
-          opacity: 1;
+          background-color: #f8f8f8;
         }
         
-        .item-left {
+        .menu-left {
           display: flex;
           align-items: center;
           
-          .item-icon {
-            width: 44rpx;
-            height: 44rpx;
-            margin-right: 28rpx;
+          .menu-icon {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 24rpx;
           }
           
-          .item-label {
-            font-size: 30rpx;
+          .menu-label {
+            font-size: 28rpx;
             color: #333333;
-            font-weight: 500;
           }
         }
         
+        .arrow {
+          font-size: 40rpx;
+          color: #cccccc;
+          font-weight: 300;
+        }
+        
         .language-switcher {
           display: flex;
           align-items: center;
-          background: rgba(110, 199, 245, 0.08);
+          background: rgba(30, 201, 201, 0.08);
           backdrop-filter: blur(10rpx);
           border-radius: 30rpx;
           padding: 8rpx 20rpx;
@@ -474,7 +536,7 @@ const handleLogout = () => {
           
           &:active {
             transform: scale(0.95);
-            background: rgba(110, 199, 245, 0.15);
+            background: rgba(30, 201, 201, 0.15);
           }
           
           .language-text {
@@ -484,7 +546,7 @@ const handleLogout = () => {
             transition: all 0.3s;
             
             &.active {
-              color: #6ec7f5;
+              color: #1ec9c9;
               font-weight: 700;
             }
           }
@@ -495,36 +557,27 @@ const handleLogout = () => {
             font-weight: 300;
           }
         }
-        
-        .item-arrow {
-          font-size: 48rpx;
-          color: #d0d0d0;
-          font-weight: 300;
-        }
       }
     }
     
     // 退出登录
     .logout-section {
-      padding: 0;
+      padding: 32rpx 0 60rpx;
       
       .logout-btn {
         width: 100%;
-        height: 96rpx;
-        line-height: 96rpx;
-        background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
-        border-radius: 20rpx;
+        height: 88rpx;
+        line-height: 88rpx;
+        background: #ffffff;
+        border-radius: 16rpx;
         border: none;
-        font-size: 32rpx;
-        color: #ffffff;
-        font-weight: 600;
-        box-shadow: 0 6rpx 20rpx rgba(255, 107, 107, 0.3);
-        letter-spacing: 2rpx;
-        padding: 0;
+        font-size: 28rpx;
+        color: #1ec9c9;
+        font-weight: 500;
+        box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);
         
         &:active {
-          opacity: 0.9;
-          transform: scale(0.98);
+          opacity: 0.8;
         }
         
         &::after {
@@ -534,14 +587,4 @@ const handleLogout = () => {
     }
   }
 }
-
-// 加载动画
-@keyframes pulse {
-  0%, 100% {
-    opacity: 0.5;
-  }
-  50% {
-    opacity: 0.8;
-  }
-}
 </style>

pages/login/login.vue

@@ -1,17 +1,21 @@
 <template>
   <view class="login-container">
     <!-- 语言切换按钮 -->
-    <view class="language-switcher" @click="switchLanguage">
+    <view class="language-switcher" :style="{ top: languageSwitcherTop + 'px' }" @click="switchLanguage">
       <text class="language-text" :class="{ active: locale === 'zh-CN' }">中</text>
       <text class="language-separator">|</text>
       <text class="language-text" :class="{ active: locale === 'en-US' }">EN</text>
     </view>
     
-    <view class="login-box">
-      <view class="logo-section">
-        <text class="app-title">{{ $t('login.appTitle') }}</text>
-        <text class="app-subtitle">{{ $t('login.welcome') }}</text>
-      </view>
+    <!-- 顶部渐变背景区域 -->
+    <view class="header-bg" :style="{ paddingTop: statusBarHeight + 'px' }">
+      <text class="app-title">{{ t('login.appTitle') }}</text>
+      <text class="app-subtitle">{{ t('login.welcome') }}</text>
+    </view>
+    
+    <!-- 登录表单卡片 -->
+    <view class="login-card">
+      <view class="card-title">{{ t('login.title') }}</view>
       
       <view class="form-section">
         <view class="form-item">
@@ -21,7 +25,7 @@
               v-model="phone"
               type="text"
               maxlength="11"
-              :placeholder="$t('login.phonePlaceholder')"
+              :placeholder="t('login.phonePlaceholder')"
               class="input-field"
               @input="onPhoneInput"
             />
@@ -34,7 +38,7 @@
             <input
               v-model="password"
               :password="!showPassword"
-              :placeholder="$t('login.passwordPlaceholder')"
+              :placeholder="t('login.passwordPlaceholder')"
               class="input-field"
             />
             <text 
@@ -53,13 +57,13 @@
               <checkbox 
                 :checked="agreedToTerms" 
                 class="agreement-checkbox"
-                color="#2E7CF6"
+                color="#1EC9C9"
               />
               <view class="agreement-text">
-                <text class="prefix">{{ $t('login.agreePrefix') }}</text>
-                <text class="link" @click.stop="viewUserAgreement">{{ $t('login.userAgreement') }}</text>
-                <text class="prefix">{{ $t('login.and') }}</text>
-                <text class="link" @click.stop="viewPrivacyPolicy">{{ $t('login.privacyPolicy') }}</text>
+                <text class="prefix">{{ t('login.agreePrefix') }}</text>
+                <text class="link" @click.stop="viewUserAgreement">{{ t('login.userAgreement') }}</text>
+                <text class="prefix">{{ t('login.and') }}</text>
+                <text class="link" @click.stop="viewPrivacyPolicy">{{ t('login.privacyPolicy') }}</text>
               </view>
             </label>
           </checkbox-group>
@@ -69,7 +73,7 @@
           class="login-btn"
           @click="handleLogin"
         >
-          {{ $t('login.loginButton') }}
+          {{ t('login.loginButton') }}
         </button>
       </view>
     </view>
@@ -77,7 +81,7 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick } from 'vue'
+import { ref, computed, nextTick, onMounted } from 'vue'
 import { onShow } from '@dcloudio/uni-app'
 import { useI18n } from 'vue-i18n'
 import { useUserStore } from '@/store/index'
@@ -93,6 +97,18 @@ const password = ref('')
 const showPassword = ref(false)
 const isLanguageSwitching = ref(false)
 const agreedToTerms = ref(false)
+const statusBarHeight = ref(0)
+
+// 语言切换按钮的top位置
+const languageSwitcherTop = computed(() => {
+  return statusBarHeight.value + 50 // 状态栏高度 + 50px间距，确保不被遮挡
+})
+
+onMounted(() => {
+  // 获取系统信息
+  const systemInfo = uni.getSystemInfoSync()
+  statusBarHeight.value = systemInfo.statusBarHeight || 0
+})
 
 // 当前语言名称
 const currentLanguageName = computed(() => {
@@ -127,6 +143,13 @@ const switchLanguage = async () => {
     uni.setNavigationBarTitle({
       title: t('login.title')
     })
+    
+    // 显示切换成功提示
+    uni.showToast({
+      title: t('common.language.switchSuccess'),
+      icon: 'success',
+      duration: 1500
+    })
   } finally {
     // 短暂延迟后允许再次切换
     setTimeout(() => {
@@ -257,81 +280,99 @@ const handleLogin = async () => {
 <style lang="scss" scoped>
 .login-container {
   min-height: 100vh;
-  background: linear-gradient(135deg, #2E7CF6 0%, #1A5FC7 100%);
+  background-color: #f5f5f5;
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: flex-start;
-  padding: 40rpx;
-  padding-top: 270rpx;
   position: relative;
 }
 
+// 语言切换按钮
 .language-switcher {
-  align-self: flex-end;
-  margin-bottom: 32rpx;
-  margin-right: 40rpx;
+  position: fixed;
+  right: 32rpx;
   display: flex;
   align-items: center;
-  background: rgba(255, 255, 255, 0.95);
+  background: rgba(255, 255, 255, 0.2);
   backdrop-filter: blur(10rpx);
   border-radius: 30rpx;
   padding: 12rpx 24rpx;
   cursor: pointer;
   transition: all 0.3s;
-  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
   gap: 8rpx;
+  z-index: 100;
   
   &:active {
     transform: scale(0.95);
-    background: rgba(255, 255, 255, 1);
+    background: rgba(255, 255, 255, 0.3);
+  }
+  
+  .language-text {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.7);
+    font-weight: 500;
+    transition: all 0.3s;
+    
+    &.active {
+      color: #ffffff;
+      font-weight: 700;
+    }
+  }
+  
+  .language-separator {
+    font-size: 24rpx;
+    color: rgba(255, 255, 255, 0.5);
+    font-weight: 300;
   }
 }
 
-.login-box {
-  width: 100%;
-  max-width: 600rpx;
-  background: #ffffff;
-  border-radius: 32rpx;
-  padding: 60rpx 40rpx;
-  box-shadow: 0 20rpx 60rpx rgba(0, 0, 0, 0.15);
-}
-
-.language-text {
-  font-size: 26rpx;
-  color: #999;
-  font-weight: 500;
-  transition: all 0.3s;
+// 顶部渐变背景
+.header-bg {
+  background: linear-gradient(180deg, #1ec9c9 0%, #1eb8b8 100%);
+  min-height: 500rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  padding: 0 40rpx 60rpx;
   
-  &.active {
-    color: #2E7CF6;
+  .app-title {
+    font-size: 52rpx;
     font-weight: 700;
+    color: #ffffff;
+    letter-spacing: 2rpx;
+    margin-bottom: 16rpx;
+    text-align: center;
+    line-height: 1.3;
+    word-break: break-word;
+    max-width: 600rpx;
+  }
+  
+  .app-subtitle {
+    font-size: 28rpx;
+    color: rgba(255, 255, 255, 0.9);
+    letter-spacing: 2rpx;
+    text-align: center;
   }
 }
 
-.language-separator {
-  font-size: 26rpx;
-  color: #ccc;
-  font-weight: 300;
-}
-
-.logo-section {
-  text-align: center;
-  margin-bottom: 80rpx;
-}
-
-.app-title {
-  display: block;
-  font-size: 48rpx;
-  font-weight: bold;
-  color: #333;
-  margin-bottom: 16rpx;
-}
-
-.app-subtitle {
-  display: block;
-  font-size: 28rpx;
-  color: #999;
+// 登录卡片
+.login-card {
+  background: #ffffff;
+  border-radius: 24rpx 24rpx 0 0;
+  margin-top: -60rpx;
+  padding: 48rpx 32rpx;
+  flex: 1;
+  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.08);
+  position: relative;
+  z-index: 5;
+  
+  .card-title {
+    font-size: 36rpx;
+    font-weight: 600;
+    color: #333333;
+    margin-bottom: 32rpx;
+  }
 }
 
 .form-section {
@@ -339,7 +380,7 @@ const handleLogin = async () => {
 }
 
 .form-item {
-  margin-bottom: 32rpx;
+  margin-bottom: 24rpx;
 }
 
 .input-wrapper {
@@ -354,8 +395,8 @@ const handleLogin = async () => {
   
   &:focus-within {
     background: #fff;
-    border-color: #2E7CF6;
-    box-shadow: 0 0 0 4rpx rgba(46, 124, 246, 0.1);
+    border-color: #1ec9c9;
+    box-shadow: 0 0 0 4rpx rgba(30, 201, 201, 0.1);
   }
 }
 
@@ -368,7 +409,7 @@ const handleLogin = async () => {
 
 .input-field {
   flex: 1;
-  font-size: 32rpx;
+  font-size: 28rpx;
   color: #333;
   
   &::placeholder {
@@ -382,47 +423,21 @@ const handleLogin = async () => {
   padding: 8rpx;
 }
 
-.login-btn {
-  width: 100%;
-  height: 96rpx;
-  background: linear-gradient(135deg, #2E7CF6 0%, #1A5FC7 100%);
-  color: #ffffff;
-  font-size: 32rpx;
-  font-weight: bold;
-  border-radius: 16rpx;
-  border: none;
-  margin-top: 48rpx;
-  transition: all 0.3s;
-  
-  &:active {
-    opacity: 0.8;
-    transform: scale(0.98);
-  }
-}
-
-.login-btn-disabled {
-  background: #ccc;
-  opacity: 0.6;
-  
-  &:active {
-    transform: none;
-  }
-}
-
 .agreement-section {
-  margin-top: 24rpx;
-  margin-bottom: 8rpx;
+  margin-top: 32rpx;
+  margin-bottom: 16rpx;
 }
 
 .agreement-label {
   display: flex;
-  align-items: center;
+  align-items: flex-start;
   cursor: pointer;
 }
 
 .agreement-checkbox {
   margin-right: 12rpx;
-  transform: scale(0.7);
+  margin-top: 4rpx;
+  transform: scale(0.8);
 }
 
 .agreement-text {
@@ -440,7 +455,7 @@ const handleLogin = async () => {
   
   .link {
     font-size: 24rpx;
-    color: #2E7CF6;
+    color: #1ec9c9;
     text-decoration: none;
     margin: 0 4rpx;
     
@@ -449,4 +464,27 @@ const handleLogin = async () => {
     }
   }
 }
+
+.login-btn {
+  width: 100%;
+  height: 88rpx;
+  background: linear-gradient(135deg, #1ec9c9 0%, #1eb8b8 100%);
+  color: #ffffff;
+  font-size: 32rpx;
+  font-weight: 600;
+  border-radius: 16rpx;
+  border: none;
+  margin-top: 32rpx;
+  transition: all 0.3s;
+  box-shadow: 0 6rpx 20rpx rgba(30, 201, 201, 0.3);
+  
+  &:active {
+    opacity: 0.9;
+    transform: scale(0.98);
+  }
+  
+  &::after {
+    border: none;
+  }
+}
 </style>

static/pages-content/my/icon-about.png

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 5C11.716 5 5 11.716 5 20C5 28.284 11.716 35 20 35C28.284 35 35 28.284 35 20C35 11.716 28.284 5 20 5ZM20 32C13.383 32 8 26.617 8 20C8 13.383 13.383 8 20 8C26.617 8 32 13.383 32 20C32 26.617 26.617 32 20 32Z" fill="#1EC9C9"/>
+  <path d="M18 12H22V16H18V12ZM18 18H22V28H18V18Z" fill="#1EC9C9"/>
+</svg>

static/pages-content/my/icon-language.png

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M20 5C11.716 5 5 11.716 5 20C5 28.284 11.716 35 20 35C28.284 35 35 28.284 35 20C35 11.716 28.284 5 20 5ZM20 32C13.383 32 8 26.617 8 20C8 13.383 13.383 8 20 8C26.617 8 32 13.383 32 20C32 26.617 26.617 32 20 32Z" fill="#1EC9C9"/>
+  <path d="M20 8V32M8 20H32M12 12C12 12 15 18 20 18C25 18 28 12 28 12M12 28C12 28 15 22 20 22C25 22 28 28 28 28" stroke="#1EC9C9" stroke-width="2" stroke-linecap="round"/>
+</svg>

static/pages-content/my/icon-protocol.png

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <path d="M28 5H12C10.343 5 9 6.343 9 8V32C9 33.657 10.343 35 12 35H28C29.657 35 31 33.657 31 32V8C31 6.343 29.657 5 28 5ZM28 32H12V8H28V32Z" fill="#1EC9C9"/>
+  <path d="M14 12H26V15H14V12ZM14 17H26V20H14V17ZM14 22H22V25H14V22Z" fill="#1EC9C9"/>
+</svg>

static/pages-content/my/task-approved.png

@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="44" cy="44" r="40" fill="#E8F5E9"/>
+  <path d="M44 24C32.954 24 24 32.954 24 44C24 55.046 32.954 64 44 64C55.046 64 64 55.046 64 44C64 32.954 55.046 24 44 24ZM44 60C35.163 60 28 52.837 28 44C28 35.163 35.163 28 44 28C52.837 28 60 35.163 60 44C60 52.837 52.837 60 44 60Z" fill="#4CAF50"/>
+  <path d="M52 36L38 50L32 44L29 47L38 56L55 39L52 36Z" fill="#4CAF50"/>
+</svg>

static/pages-content/my/task-delivered.png

@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="44" cy="44" r="40" fill="#E5F5FF"/>
+  <path d="M44 24C32.954 24 24 32.954 24 44C24 55.046 32.954 64 44 64C55.046 64 64 55.046 64 44C64 32.954 55.046 24 44 24ZM44 60C35.163 60 28 52.837 28 44C28 35.163 35.163 28 44 28C52.837 28 60 35.163 60 44C60 52.837 52.837 60 44 60Z" fill="#1EC9C9"/>
+  <path d="M52 36L38 50L32 44L29 47L38 56L55 39L52 36Z" fill="#1EC9C9"/>
+</svg>

static/pages-content/my/task-pending.png

@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="44" cy="44" r="40" fill="#FFE5E5"/>
+  <path d="M44 24C32.954 24 24 32.954 24 44C24 55.046 32.954 64 44 64C55.046 64 64 55.046 64 44C64 32.954 55.046 24 44 24ZM44 60C35.163 60 28 52.837 28 44C28 35.163 35.163 28 44 28C52.837 28 60 35.163 60 44C60 52.837 52.837 60 44 60Z" fill="#FF6B6B"/>
+  <path d="M46 38H42V46H34V50H42V58H46V50H54V46H46V38Z" fill="#FF6B6B"/>
+</svg>

static/pages-content/my/task-reviewing.png

@@ -0,0 +1,5 @@
+<svg width="88" height="88" viewBox="0 0 88 88" fill="none" xmlns="http://www.w3.org/2000/svg">
+  <circle cx="44" cy="44" r="40" fill="#FFF5E5"/>
+  <path d="M44 24C32.954 24 24 32.954 24 44C24 55.046 32.954 64 44 64C55.046 64 64 55.046 64 44C64 32.954 55.046 24 44 24ZM44 60C35.163 60 28 52.837 28 44C28 35.163 35.163 28 44 28C52.837 28 60 35.163 60 44C60 52.837 52.837 60 44 60Z" fill="#FFA500"/>
+  <path d="M42 32H46V48H42V32ZM42 52H46V56H42V52Z" fill="#FFA500"/>
+</svg>