bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
张成
2025-09-07 00:35:09 +08:00
parent 387392ec63
commit 955f1003dd
10 changed files with 317 additions and 567 deletions
Download Patch File Download Diff File Expand all files Collapse all files

46
src/components/UserInfo/index.scss
View File

@@ -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 {

2
src/components/UserInfo/index.ts
View File

@@ -1,2 +0,0 @@
export { UserInfoCard, GameCard, GameTabs } from './index';
export type { UserInfo, GameRecord } from './index';

15
src/components/UserInfo/index.tsx
View File

@@ -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<UserInfoCardProps> = ({
<Text className="nickname">{user_info.nickname}</Text>
<Text className="join_date">{user_info.join_date}</Text>
</View>
<View className='tag_item'>
<Image
className="tag_icon"
src={require('../../static/userInfo/edit.svg')}
/> </View>
</View>
{/* 统计数据 */}
@@ -84,7 +89,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
>
<Image
className="button_icon"
src={require('../../../static/userInfo/plus.svg')}
src={require('../../static/userInfo/plus.svg')}
/>
<Text className="button_text">
{is_following ? '已关注' : '关注'}
@@ -96,7 +101,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
<Button className="message_button" onClick={on_message}>
<Image
className="button_icon"
src={require('../../../static/userInfo/message.svg')}
src={require('../../static/userInfo/message.svg')}
/>
</Button>
)}
@@ -121,7 +126,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
<View className="tag_item">
<Image
className="tag_icon"
src={require('../../../static/userInfo/location.svg')}
src={require('../../static/userInfo/location.svg')}
/>
<Text className="tag_text">{user_info.location}</Text>
</View>
@@ -183,7 +188,7 @@ export const GameCard: React.FC<GameCardProps> = ({
<View className="game_type_icon">
<Image
className="type_icon"
src={require('../../../static/userInfo/tennis.svg')}
src={require('../../static/userInfo/tennis.svg')}
/>
</View>
</View>

316
src/pages/userInfo/myself/index.scss
View File

@@ -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;
}

363
src/pages/userInfo/myself/index.tsx
View File

@@ -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<UserInfo>({
// 用户信息状态
const [user_info, set_user_info] = useState<UserInfo>({
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<GameRecord[]>([
{
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<GameRecord[]>([]);
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 (
<View className="myself_page">
{/* 主要内容 */}
<ScrollView className="main_content" scrollY>
<View className='main_content'>
{/* 用户信息区域 */}
<View className="user_info_section">
{/* 头像和基本信息 */}
<View className="basic_info">
<View className="avatar_container">
<Image className="avatar" src={user_info.avatar} />
</View>
<View className="info_container">
<Text className="nickname">{user_info.nickname}</Text>
<Text className="join_date">{user_info.join_date}</Text>
</View>
</View>
{/* 统计数据 */}
<View className="stats_section">
<View className="stats_container">
<View className="stat_item">
<Text className="stat_number">{user_info.stats.following}</Text>
<Text className="stat_label">关注</Text>
</View>
<View className="stat_item">
<Text className="stat_number">{user_info.stats.friends}</Text>
<Text className="stat_label">球友</Text>
</View>
<View className="stat_item">
<Text className="stat_number">{user_info.stats.hosted}</Text>
<Text className="stat_label">主办</Text>
</View>
<View className="stat_item">
<Text className="stat_number">{user_info.stats.participated}</Text>
<Text className="stat_label">参加</Text>
</View>
</View>
<View className="action_buttons">
{/* 只有非当前用户才显示关注按钮 */}
{!is_current_user && (
<Button
className={`follow_button ${is_following ? 'following' : ''}`}
onClick={handle_follow}
>
<Image
className="button_icon"
src={require('../../../static/userInfo/plus.svg')}
/>
<Text className="button_text">
{is_following ? '已关注' : '关注'}
</Text>
</Button>
)}
{/* 只有非当前用户才显示消息按钮 */}
{!is_current_user && (
<Button className="message_button">
<Image
className="button_icon"
src={require('../../../static/userInfo/message.svg')}
/>
</Button>
)}
{/* 只有当前用户才显示编辑按钮 */}
{is_current_user && (
<Button className="edit_button" onClick={handle_edit_profile}>
<Text className="button_text">编辑</Text>
</Button>
)}
{/* 只有当前用户才显示分享按钮 */}
{is_current_user && (
<Button className="share_button" onClick={handle_share}>
<Text className="button_text">分享</Text>
</Button>
)}
</View>
</View>
{/* 标签和简介 */}
<View className="tags_bio_section">
<View className="tags_container">
<View className="tag_item">
<Image
className="tag_icon"
src={require('../../../static/userInfo/location.svg')}
/>
<Text className="tag_text">{user_info.location}</Text>
</View>
<View className="tag_item">
<Text className="tag_text">{user_info.occupation}</Text>
</View>
<View className="tag_item">
<Text className="tag_text">{user_info.ntrp_level}</Text>
</View>
</View>
<Text className="bio_text">{user_info.bio}</Text>
</View>
<UserInfoCard user_info={user_info}
is_current_user={false}
is_following={is_following}
on_follow={handle_follow}
></UserInfoCard>
{/* 球局订单和收藏功能 */}
<View className="quick_actions_section">
<View className="action_card">
<View className="action_content" onClick={handle_game_orders}>
<Image
className="action_icon"
src={require('../../../static/userInfo/tennis.svg')}
src={require('../../../static/userInfo/order_btn.svg')}
/>
<Text className="action_text">球局订单</Text>
<Text className="action_text">我的订单</Text>
</View>
<View className="action_divider"></View>
<View className="action_content" onClick={handle_favorites}>
<Image
className="action_icon"
src={require('../../../static/userInfo/tennis.svg')}
src={require('../../../static/userInfo/sc.svg')}
/>
<Text className="action_text">收藏</Text>
</View>
@@ -291,85 +129,86 @@ const MyselfPage: React.FC = () => {
<Text className="separator">/</Text>
<Text className="weekday_text">星期三</Text>
</View>
{/* 球局卡片 */}
<View className="game_cards">
{game_records.map((game) => (
<View
key={game.id}
className="game_card"
onClick={() => handle_game_detail(game.id)}
>
{/* 球局标题和类型 */}
<View className="game_header">
<Text className="game_title">{game.title}</Text>
<View className="game_type_icon">
<Image
className="type_icon"
src={require('../../../static/userInfo/tennis.svg')}
/>
</View>
</View>
{/* 球局时间 */}
<View className="game_time">
<Text className="time_text">
{game.date} {game.time} {game.duration}
</Text>
</View>
{/* 球局地点和类型 */}
<View className="game_location">
<Text className="location_text">{game.location}</Text>
<Text className="separator">·</Text>
<Text className="type_text">{game.type}</Text>
<Text className="separator">·</Text>
<Text className="distance_text">{game.distance}</Text>
</View>
{/* 球局图片 */}
<View className="game_images">
{game.images.map((image, index) => (
<Image
key={index}
className="game_image"
src={image}
/>
))}
</View>
{/* 球局信息标签 */}
<View className="game_tags">
<View className="participants_info">
<View className="avatars">
{game.participants.map((participant, index) => (
<Image
key={index}
className="participant_avatar"
src={participant.avatar}
/>
))}
</View>
<View className="participants_count">
<Text className="count_text">
报名人数 {game.current_participants}/{game.max_participants}
</Text>
<ScrollView scrollY>
{/* 球局卡片 */}
<View className="game_cards">
{game_records.map((game) => (
<View
key={game.id}
className="game_card"
onClick={() => handle_game_detail(game.id)}
>
{/* 球局标题和类型 */}
<View className="game_header">
<Text className="game_title">{game.title}</Text>
<View className="game_type_icon">
<Image
className="type_icon"
src={require('../../../static/userInfo/tennis.svg')}
/>
</View>
</View>
<View className="game_info_tags">
<View className="info_tag">
<Text className="tag_text">{game.level_range}</Text>
{/* 球局时间 */}
<View className="game_time">
<Text className="time_text">
{game.date} {game.time} {game.duration}
</Text>
</View>
{/* 球局地点和类型 */}
<View className="game_location">
<Text className="location_text">{game.location}</Text>
<Text className="separator">·</Text>
<Text className="type_text">{game.type}</Text>
<Text className="separator">·</Text>
<Text className="distance_text">{game.distance}</Text>
</View>
{/* 球局图片 */}
<View className="game_images">
{game.images.map((image, index) => (
<Image
key={index}
className="game_image"
src={image}
/>
))}
</View>
{/* 球局信息标签 */}
<View className="game_tags">
<View className="participants_info">
<View className="avatars">
{game.participants.map((participant, index) => (
<Image
key={index}
className="participant_avatar"
src={participant.avatar}
/>
))}
</View>
<View className="participants_count">
<Text className="count_text">
报名人数 {game.current_participants}/{game.max_participants}
</Text>
</View>
</View>
<View className="info_tag">
<Text className="tag_text">{game.game_type}</Text>
<View className="game_info_tags">
<View className="info_tag">
<Text className="tag_text">{game.level_range}</Text>
</View>
<View className="info_tag">
<Text className="tag_text">{game.game_type}</Text>
</View>
</View>
</View>
</View>
</View>
))}
</View>
))}
</View>
</ScrollView>
</View>
</ScrollView>
</View>
<GuideBar currentPage='personal' />
</View>
);

4
src/pages/userInfo/other/index.tsx
View File

@@ -99,7 +99,7 @@ const OtherUserPage: React.FC = () => {
return (
<View className="other_user_page">
{/* 主要内容 */}
<ScrollView className="main_content" scrollY>
<View className="main_content" >
{/* 用户信息区域 */}
<View className="user_info_section">
<UserInfoCard
@@ -137,7 +137,7 @@ const OtherUserPage: React.FC = () => {
))}
</View>
</View>
</ScrollView>
</View>
<GuideBar currentPage='personal' />
</View>
);

121
src/scss/common.scss Normal file
View File

@@ -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);
}

6
src/static/userInfo/edit.svg Normal file
View File

@@ -0,0 +1,6 @@
<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="40" height="40" rx="20" fill="white"/>
<rect x="0.25" y="0.25" width="39.5" height="39.5" rx="19.75" stroke="black" stroke-opacity="0.1" stroke-width="0.5"/>
<path d="M12.9167 27.5H27.9167" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.5833 21.1333V24.1667H17.6321L26.2499 15.545L23.2062 12.5L14.5833 21.1333Z" stroke="black" stroke-width="1.66667" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 545 B

5
src/static/userInfo/order_btn.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M14.5208 2.91666H16.5834C17.0436 2.91666 17.4167 3.28975 17.4167 3.74999V17.5C17.4167 17.9602 17.0436 18.3333 16.5834 18.3333H4.91671C4.45647 18.3333 4.08337 17.9602 4.08337 17.5V3.74999C4.08337 3.28975 4.45647 2.91666 4.91671 2.91666H7.41671H7.83337V4.16666H13.6667V2.91666H14.5208Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linejoin="round"/>
<path d="M13.6667 1.66666H7.83337V4.16666H13.6667V1.66666Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M11.9998 7.91666L8.66663 11.2505H12.835L9.50008 14.5841" stroke="black" stroke-opacity="0.2" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 786 B

4
src/static/userInfo/sc.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.33325 3.33333C2.33325 2.8731 2.70635 2.5 3.16659 2.5H8.16659L10.2499 5H17.3333C17.7935 5 18.1666 5.37308 18.1666 5.83333V16.6667C18.1666 17.1269 17.7935 17.5 17.3333 17.5H3.16659C2.70635 17.5 2.33325 17.1269 2.33325 16.6667V3.33333Z" stroke="#8D8D8D" stroke-width="1.66667" stroke-linejoin="round"/>
<path d="M10.25 8.33334L11.1846 10.3803L13.4203 10.6366L11.7622 12.158L12.2093 14.3634L10.25 13.2567L8.29075 14.3634L8.73788 12.158L7.07983 10.6366L9.31546 10.3803L10.25 8.33334Z" stroke="black" stroke-opacity="0.2" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 703 B