From 955f1003dd26b2504247cabc0ac5027a7221460e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BC=A0=E6=88=90?= Date: Sun, 7 Sep 2025 00:35:09 +0800 Subject: [PATCH] 1 --- src/components/UserInfo/index.scss | 46 ++-- src/components/UserInfo/index.ts | 2 - src/components/UserInfo/index.tsx | 15 +- src/pages/userInfo/myself/index.scss | 316 +++-------------------- src/pages/userInfo/myself/index.tsx | 363 ++++++++------------------- src/pages/userInfo/other/index.tsx | 6 +- src/scss/common.scss | 121 +++++++++ src/static/userInfo/edit.svg | 6 + src/static/userInfo/order_btn.svg | 5 + src/static/userInfo/sc.svg | 4 + 10 files changed, 317 insertions(+), 567 deletions(-) delete mode 100644 src/components/UserInfo/index.ts create mode 100644 src/scss/common.scss create mode 100644 src/static/userInfo/edit.svg create mode 100644 src/static/userInfo/order_btn.svg create mode 100644 src/static/userInfo/sc.svg diff --git a/src/components/UserInfo/index.scss b/src/components/UserInfo/index.scss index 80c08d1..e4bb1df 100644 --- a/src/components/UserInfo/index.scss +++ b/src/components/UserInfo/index.scss @@ -1,3 +1,5 @@ +@use '../../scss/common.scss' as *; + // 用户信息卡片样式 .user_info_card { display: flex; @@ -12,11 +14,7 @@ gap: 16px; .avatar_container { - width: 64px; - height: 64px; - border-radius: 50%; - overflow: hidden; - box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2); + @include avatar-base(64px); .avatar { width: 100%; @@ -32,23 +30,32 @@ gap: 4px; .nickname { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 20px; - line-height: 1.4em; - letter-spacing: 1.9%; - color: #000000; + @include text-primary; } .join_date { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 14px; - line-height: 1.4em; - letter-spacing: 2.7%; - color: rgba(0, 0, 0, 0.35); + @include text-secondary; } } + + .tag_icon { + + /* Auto layout */ + display: flex; + flex-direction: row; + align-items: center; + padding: 0px; + gap: 8px; + + width: 40px; + height: 40px; + + + /* Inside auto layout */ + flex: none; + order: 2; + flex-grow: 0; + } } // 统计数据 @@ -217,6 +224,11 @@ .tag_icon { width: 12px; height: 12px; + + /* Frame 1912054928 */ + + + } .tag_text { diff --git a/src/components/UserInfo/index.ts b/src/components/UserInfo/index.ts deleted file mode 100644 index 9e8b9d8..0000000 --- a/src/components/UserInfo/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export { UserInfoCard, GameCard, GameTabs } from './index'; -export type { UserInfo, GameRecord } from './index'; \ No newline at end of file diff --git a/src/components/UserInfo/index.tsx b/src/components/UserInfo/index.tsx index 5ddc309..e86135a 100644 --- a/src/components/UserInfo/index.tsx +++ b/src/components/UserInfo/index.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { View, Text, Image, Button } from '@tarojs/components'; -import Taro from '@tarojs/taro'; +import './index.scss'; // 用户信息接口 export interface UserInfo { @@ -53,6 +53,11 @@ export const UserInfoCard: React.FC = ({ {user_info.nickname} {user_info.join_date} + + {/* 统计数据 */} @@ -84,7 +89,7 @@ export const UserInfoCard: React.FC = ({ > {is_following ? '已关注' : '关注'} @@ -96,7 +101,7 @@ export const UserInfoCard: React.FC = ({ )} @@ -121,7 +126,7 @@ export const UserInfoCard: React.FC = ({ {user_info.location} @@ -183,7 +188,7 @@ export const GameCard: React.FC = ({ diff --git a/src/pages/userInfo/myself/index.scss b/src/pages/userInfo/myself/index.scss index 2aa9ace..81b3b33 100644 --- a/src/pages/userInfo/myself/index.scss +++ b/src/pages/userInfo/myself/index.scss @@ -1,3 +1,5 @@ +@use '../../../scss/common.scss' as *; + // 个人页面样式 .myself_page { min-height: 100vh; @@ -23,59 +25,14 @@ flex-direction: column; gap: 16px; margin-bottom: 16px; + margin-top: 98px; - // 基本信息 - .basic_info { - display: flex; - align-items: center; - gap: 16px; - - .avatar_container { - width: 64px; - height: 64px; - border-radius: 50%; - overflow: hidden; - box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2); - - .avatar { - width: 100%; - height: 100%; - object-fit: cover; - } - } - - .info_container { - flex: 1; - display: flex; - flex-direction: column; - gap: 4px; - - .nickname { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 20px; - line-height: 1.4em; - letter-spacing: 1.9%; - color: #000000; - } - - .join_date { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 14px; - line-height: 1.4em; - letter-spacing: 2.7%; - color: rgba(0, 0, 0, 0.35); - } - } - } // 统计数据 .stats_section { display: flex; - justify-content: space-between; + justify-content: flex-start; align-items: center; - gap: 24px; .stats_container { display: flex; @@ -88,127 +45,11 @@ align-items: center; .stat_number { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 18px; - line-height: 1.4em; - letter-spacing: 2.1%; - color: rgba(0, 0, 0, 0.85); + @include text-medium; } .stat_label { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 12px; - line-height: 1.4em; - letter-spacing: 3.2%; - color: rgba(0, 0, 0, 0.35); - } - } - } - - .action_buttons { - display: flex; - align-items: center; - gap: 12px; - - - - .follow_button { - display: flex; - align-items: center; - gap: 4px; - padding: 12px 16px 12px 12px; - height: 40px; - background: #000000; - border: 0.5px solid rgba(0, 0, 0, 0.06); - border-radius: 999px; - cursor: pointer; - transition: all 0.3s ease; - - &.following { - background: #FFFFFF; - color: #000000; - } - - .button_icon { - width: 20px; - height: 20px; - } - - .button_text { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 14px; - line-height: 1.4em; - color: #FFFFFF; - - .following & { - color: #000000; - } - } - } - - .message_button { - width: 40px; - height: 40px; - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.12); - border-radius: 999px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - - .button_icon { - width: 18px; - height: 18px; - } - } - - .edit_button { - min-width: 60px; - height: 40px; - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.12); - border-radius: 999px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - padding: 0 12px; - - .button_text { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 14px; - line-height: 1.4em; - color: #000000; - } - } - - .share_button { - min-width: 60px; - height: 40px; - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.12); - border-radius: 999px; - display: flex; - align-items: center; - justify-content: center; - cursor: pointer; - transition: all 0.3s ease; - padding: 0 12px; - margin: 0px !important; - - .button_text { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 14px; - line-height: 1.4em; - color: #000000; + @include text-small; } } } @@ -226,14 +67,7 @@ flex-wrap: wrap; .tag_item { - display: flex; - align-items: center; - gap: 4px; - padding: 6px 8px; - height: 20px; - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.16); - border-radius: 999px; + @include tag-base; .tag_icon { width: 12px; @@ -241,22 +75,13 @@ } .tag_text { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 11px; - line-height: 1.8em; - letter-spacing: -2.1%; - color: #000000; + @include text-tag; } } } .bio_text { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 14px; - line-height: 1.571em; - color: rgba(0, 0, 0, 0.65); + @include text-body; white-space: pre-line; } } @@ -266,18 +91,15 @@ margin-bottom: 16px; .action_card { + @include card-base; display: flex; align-items: center; - background: #FFFFFF; - border: 1px solid rgba(0, 0, 0, 0.06); - border-radius: 12px; - box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); overflow: hidden; .action_content { flex: 1; display: flex; - flex-direction: column; + flex-direction: row; align-items: center; justify-content: center; gap: 8px; @@ -295,18 +117,15 @@ } .action_text { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 15px; - line-height: 1.4em; - color: #000000; + @include text-style(15px, 600, 1.4em); + color: $color-primary; } } .action_divider { width: 1px; height: 16px; - background: rgba(0, 0, 0, 0.06); + background: $color-primary-lightest-5; } } } @@ -327,24 +146,19 @@ transition: all 0.3s ease; .tab_text { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 20px; - line-height: 1.4em; - letter-spacing: 1.9%; - color: rgba(0, 0, 0, 0.85); + @include text-primary; transition: color 0.3s ease; } &.active { .tab_text { - color: #000000; + color: $color-primary; } } &:not(.active) { .tab_text { - color: rgba(0, 0, 0, 0.2); + color: $color-primary-lightest-2; } } } @@ -361,30 +175,18 @@ margin-bottom: 16px; .date_text { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 14px; - line-height: 1.4em; - letter-spacing: 2.71%; - color: rgba(0, 0, 0, 0.85); + @include text-style(14px, 600, 1.4em, 2.71%); + color: $color-primary-light; } .separator { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 18px; - line-height: 1.4em; - letter-spacing: 2.11%; - color: rgba(0, 0, 0, 0.35); + @include text-style(18px, 400, 1.4em, 2.11%); + color: $color-primary-lightest; } .weekday_text { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 14px; - line-height: 1.4em; - letter-spacing: 2.71%; - color: rgba(0, 0, 0, 0.85); + @include text-style(14px, 600, 1.4em, 2.71%); + color: $color-primary-light; } } @@ -396,11 +198,8 @@ padding: 0 5px 15px; .game_card { - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.08); - border-radius: 20px; + @include card-base; padding: 0 0 12px; - box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); cursor: pointer; transition: all 0.3s ease; position: relative; @@ -417,11 +216,8 @@ padding: 12px 15px 0; .game_title { - font-family: 'PingFang SC'; - font-weight: 600; - font-size: 16px; - line-height: 1.5em; - color: #000000; + @include text-style(16px, 600, 1.5em); + color: $color-primary; } .game_type_icon { @@ -440,11 +236,7 @@ padding: 6px 15px 0; .time_text { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 12px; - line-height: 1.5em; - color: rgba(60, 60, 67, 0.6); + @include text-caption; } } @@ -458,19 +250,12 @@ .location_text, .type_text, .distance_text { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 12px; - line-height: 1.5em; - color: rgba(60, 60, 67, 0.6); + @include text-caption; } .separator { - font-family: 'PingFang SC'; - font-weight: 400; - font-size: 14px; - line-height: 1.3em; - color: rgba(60, 60, 67, 0.3); + @include text-style(14px, 400, 1.3em); + color: $color-text-tertiary; } } @@ -488,7 +273,7 @@ width: 56.44px; height: 56.44px; border-radius: 9px; - border: 1.5px solid #FFFFFF; + border: 1.5px solid $color-white; &:nth-child(1) { top: 4.18px; @@ -528,30 +313,17 @@ gap: -8px; .participant_avatar { - width: 20px; - height: 20px; - border-radius: 50%; - border: 1px solid #FFFFFF; + @include avatar-base(20px); + border: 1px solid $color-white; } } .participants_count { - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.16); - border-radius: 999px; + @include tag-base; padding: 6px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; .count_text { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 11px; - line-height: 1.8em; - letter-spacing: -2.1%; - color: #000000; + @include text-tag; } } } @@ -561,22 +333,10 @@ gap: 4px; .info_tag { - background: #FFFFFF; - border: 0.5px solid rgba(0, 0, 0, 0.16); - border-radius: 999px; - padding: 6px 8px; - height: 20px; - display: flex; - align-items: center; - justify-content: center; + @include tag-base; .tag_text { - font-family: 'PingFang SC'; - font-weight: 500; - font-size: 11px; - line-height: 1.8em; - letter-spacing: -2.1%; - color: #000000; + @include text-tag; } } } @@ -594,7 +354,7 @@ transform: translateX(-50%); width: 140px; height: 5px; - background: #000000; + background: $color-primary; border-radius: 2.5px; z-index: 10; } \ No newline at end of file diff --git a/src/pages/userInfo/myself/index.tsx b/src/pages/userInfo/myself/index.tsx index 9aacb2d..ee97e0b 100644 --- a/src/pages/userInfo/myself/index.tsx +++ b/src/pages/userInfo/myself/index.tsx @@ -1,47 +1,11 @@ import React, { useState, useEffect } from 'react'; -import { View, Text, Image, ScrollView, Button } from '@tarojs/components'; +import { View, Text, Image, ScrollView } from '@tarojs/components'; import Taro from '@tarojs/taro'; import './index.scss'; import GuideBar from '@/components/GuideBar' -// 用户信息接口 -interface UserInfo { - id: string; - nickname: string; - avatar: string; - join_date: string; - stats: { - following: number; - friends: number; - hosted: number; - participated: number; - }; - tags: string[]; - bio: string; - location: string; - occupation: string; - ntrp_level: string; -} +import { UserInfoCard, UserInfo, GameRecord } from '@/components/UserInfo/index' +import { UserService } from '@/services/userService' -// 球局记录接口 -interface GameRecord { - id: string; - title: string; - date: string; - time: string; - duration: string; - location: string; - type: string; - distance: string; - participants: { - avatar: string; - nickname: string; - }[]; - max_participants: number; - current_participants: number; - level_range: string; - game_type: string; - images: string[]; -} const MyselfPage: React.FC = () => { // 获取页面参数 @@ -51,51 +15,28 @@ const MyselfPage: React.FC = () => { // 判断是否为当前用户 const is_current_user = !user_id; - // 模拟用户数据 - const [user_info] = useState({ + // 用户信息状态 + const [user_info, set_user_info] = useState({ id: '1', - nickname: '188的王晨', + nickname: '加载中...', avatar: require('../../../static/userInfo/default_avatar.svg'), - join_date: '2025年9月加入', + join_date: '加载中...', stats: { - following: 124, - friends: 24, - hosted: 7, - participated: 24 + following: 0, + friends: 0, + hosted: 0, + participated: 0 }, - tags: ['上海黄浦', '互联网从业者', 'NTRP 4.0'], - bio: '网球入坑两年，偏好双打，正手进攻型选手\n平时在张江、世纪公园附近活动，欢迎约球！\n不卷分数，但认真对待每一拍，每一场球都想打得开心。有时候也会带相机来拍点照片📸', - location: '上海黄浦', - occupation: '互联网从业者', - ntrp_level: 'NTRP 4.0' + tags: ['加载中...'], + bio: '加载中...', + location: '加载中...', + occupation: '加载中...', + ntrp_level: 'NTRP 3.0' }); - // 模拟球局数据 - const [game_records] = useState([ - { - id: '1', - title: '女生轻松双打', - date: '明天(周五)', - time: '下午5点', - duration: '2小时', - location: '仁恒河滨花园网球场', - type: '室外', - distance: '3.5km', - participants: [ - { avatar: require('../../../static/userInfo/user1.svg'), nickname: '用户1' }, - { avatar: require('../../../static/userInfo/user2.svg'), nickname: '用户2' } - ], - max_participants: 4, - current_participants: 2, - level_range: '2.0 至 2.5', - game_type: '双打', - images: [ - require('../../../static/userInfo/game1.svg'), - require('../../../static/userInfo/game2.svg'), - require('../../../static/userInfo/game3.svg') - ] - } - ]); + // 球局记录状态 + const [game_records, set_game_records] = useState([]); + const [loading, set_loading] = useState(true); // 关注状态 const [is_following, setIsFollowing] = useState(false); @@ -113,24 +54,6 @@ const MyselfPage: React.FC = () => { }); }; - // 处理分享 - const handle_share = () => { - Taro.showShareMenu({ - withShareTicket: true - }); - }; - - // 处理返回 - const handle_back = () => { - Taro.navigateBack(); - }; - - // 处理编辑资料 - const handle_edit_profile = () => { - Taro.navigateTo({ - url: '/pages/userInfo/edit/index' - }); - }; // 处理球局详情 const handle_game_detail = (game_id: string) => { @@ -156,115 +79,30 @@ const MyselfPage: React.FC = () => { return ( {/* 主要内容 */} - + {/* 用户信息区域 */} - {/* 头像和基本信息 */} - - - - - - {user_info.nickname} - {user_info.join_date} - - - - {/* 统计数据 */} - - - - {user_info.stats.following} - 关注 - - - {user_info.stats.friends} - 球友 - - - {user_info.stats.hosted} - 主办 - - - {user_info.stats.participated} - 参加 - - - - {/* 只有非当前用户才显示关注按钮 */} - {!is_current_user && ( - - )} - {/* 只有非当前用户才显示消息按钮 */} - {!is_current_user && ( - - )} - {/* 只有当前用户才显示编辑按钮 */} - {is_current_user && ( - - )} - {/* 只有当前用户才显示分享按钮 */} - {is_current_user && ( - - )} - - - - {/* 标签和简介 */} - - - - - {user_info.location} - - - {user_info.occupation} - - - {user_info.ntrp_level} - - - {user_info.bio} - + {/* 球局订单和收藏功能 */} - 球局订单 + 我的订单 收藏 @@ -291,85 +129,86 @@ const MyselfPage: React.FC = () => { / 星期三 - - {/* 球局卡片 */} - - {game_records.map((game) => ( - handle_game_detail(game.id)} - > - {/* 球局标题和类型 */} - - {game.title} - - - - - - {/* 球局时间 */} - - - {game.date} {game.time} {game.duration} - - - - {/* 球局地点和类型 */} - - {game.location} - · - {game.type} - · - {game.distance} - - - {/* 球局图片 */} - - {game.images.map((image, index) => ( - - ))} - - - {/* 球局信息标签 */} - - - - {game.participants.map((participant, index) => ( - - ))} - - - - 报名人数 {game.current_participants}/{game.max_participants} - + + {/* 球局卡片 */} + + {game_records.map((game) => ( + handle_game_detail(game.id)} + > + {/* 球局标题和类型 */} + + {game.title} + + - - - {game.level_range} + + {/* 球局时间 */} + + + {game.date} {game.time} {game.duration} + + + + {/* 球局地点和类型 */} + + {game.location} + · + {game.type} + · + {game.distance} + + + {/* 球局图片 */} + + {game.images.map((image, index) => ( + + ))} + + + {/* 球局信息标签 */} + + + + {game.participants.map((participant, index) => ( + + ))} + + + + 报名人数 {game.current_participants}/{game.max_participants} + + - - {game.game_type} + + + {game.level_range} + + + {game.game_type} + - - ))} - + ))} + + - + ); diff --git a/src/pages/userInfo/other/index.tsx b/src/pages/userInfo/other/index.tsx index 8af5e87..bd3ecc1 100644 --- a/src/pages/userInfo/other/index.tsx +++ b/src/pages/userInfo/other/index.tsx @@ -46,7 +46,7 @@ const OtherUserPage: React.FC = () => { try { const user_data = await UserService.get_user_info(user_id); setUserInfo(user_data); - + const games_data = await UserService.get_user_games(user_id, active_tab); setGameRecords(games_data); } catch (error) { @@ -99,7 +99,7 @@ const OtherUserPage: React.FC = () => { return ( {/* 主要内容 */} - + {/* 用户信息区域 */} { ))} - + ); diff --git a/src/scss/common.scss b/src/scss/common.scss new file mode 100644 index 0000000..df3d340 --- /dev/null +++ b/src/scss/common.scss @@ -0,0 +1,121 @@ +// 全局通用样式变量和混入 +// 字体相关 +$font-family-primary: 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !default; + +// 颜色相关 +$color-primary: #000000 !default; +$color-primary-light: rgba(0, 0, 0, 0.85) !default; +$color-primary-medium: rgba(0, 0, 0, 0.65) !default; +$color-primary-lightest: rgba(0, 0, 0, 0.35) !default; +$color-primary-lightest-2: rgba(0, 0, 0, 0.2) !default; +$color-primary-lightest-3: rgba(0, 0, 0, 0.16) !default; +$color-primary-lightest-4: rgba(0, 0, 0, 0.1) !default; +$color-primary-lightest-5: rgba(0, 0, 0, 0.06) !default; +$color-primary-lightest-6: rgba(0, 0, 0, 0.08) !default; + +$color-text-secondary: rgba(60, 60, 67, 0.6) !default; +$color-text-tertiary: rgba(60, 60, 67, 0.3) !default; + +$color-white: #FFFFFF !default; +$color-background: #FAFAFA !default; + +// 字体大小和行高混入 +@mixin text-style($size: 14px, $weight: 400, $line-height: 1.4em, $letter-spacing: 0) { + font-family: $font-family-primary; + font-size: $size; + font-weight: $weight; + line-height: $line-height; + letter-spacing: $letter-spacing; +} + +// 常用文本样式 +@mixin text-primary { + @include text-style(20px, 600, 1.4em, 1.9%); + color: $color-primary; +} + +@mixin text-secondary { + @include text-style(14px, 400, 1.4em, 2.7%); + color: $color-primary-lightest; +} + +@mixin text-small { + @include text-style(12px, 500, 1.4em, 3.2%); + color: $color-primary-lightest; +} + +@mixin text-medium { + @include text-style(18px, 600, 1.4em, 2.1%); + color: $color-primary-light; +} + +@mixin text-body { + @include text-style(14px, 400, 1.571em, 2.7%); + color: $color-primary-medium; +} + +@mixin text-caption { + @include text-style(12px, 400, 1.5em); + color: $color-text-secondary; +} + +@mixin text-tag { + @include text-style(11px, 500, 1.8em, -2.1%); + color: $color-primary; +} + +// 按钮样式混入 +@mixin button-base { + display: flex; + align-items: center; + justify-content: center; + cursor: pointer; + transition: all 0.3s ease; + border: none; + outline: none; +} + +@mixin button-primary { + @include button-base; + background: $color-primary; + border: 0.5px solid $color-primary-lightest-5; + border-radius: 999px; + color: $color-white; +} + +@mixin button-secondary { + @include button-base; + background: $color-white; + border: 0.5px solid $color-primary-lightest-3; + border-radius: 999px; + color: $color-primary; +} + +// 卡片样式混入 +@mixin card-base { + background: $color-white; + border: 0.5px solid $color-primary-lightest-6; + border-radius: 20px; + box-shadow: 0px 4px 36px 0px $color-primary-lightest-5; +} + +// 标签样式混入 +@mixin tag-base { + display: flex; + align-items: center; + gap: 4px; + padding: 6px 8px; + height: 20px; + background: $color-white; + border: 0.5px solid $color-primary-lightest-3; + border-radius: 999px; +} + +// 头像样式混入 +@mixin avatar-base($size: 64px) { + width: $size; + height: $size; + border-radius: 50%; + overflow: hidden; + box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.12), 0px 0px 1px 0px rgba(0, 0, 0, 0.2); +} \ No newline at end of file diff --git a/src/static/userInfo/edit.svg b/src/static/userInfo/edit.svg new file mode 100644 index 0000000..b035d61 --- /dev/null +++ b/src/static/userInfo/edit.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/static/userInfo/order_btn.svg b/src/static/userInfo/order_btn.svg new file mode 100644 index 0000000..e18d843 --- /dev/null +++ b/src/static/userInfo/order_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/static/userInfo/sc.svg b/src/static/userInfo/sc.svg new file mode 100644 index 0000000..13701ca --- /dev/null +++ b/src/static/userInfo/sc.svg @@ -0,0 +1,4 @@ + + + +