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

样式优化

Browse Source
This commit is contained in:
Ultrame
2025-11-10 17:29:01 +08:00
parent 0657e57fe4
commit 0e24ed9b77
5 changed files with 86 additions and 68 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,4 +1,4 @@
@use '../../scss/common.scss' as *;
@use "../../scss/common.scss" as *;
// 用户信息卡片样式
.user_info_card {
@@ -38,7 +38,6 @@
}
.tag_icon {
/* Auto layout */
display: flex;
flex-direction: row;
@@ -49,7 +48,6 @@
width: 40px;
height: 40px;
/* Inside auto layout */
flex: none;
order: 2;
@@ -75,7 +73,7 @@
align-items: center;
.stat_number {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 600;
font-size: 18px;
line-height: 1.4em;
@@ -84,7 +82,7 @@
}
.stat_label {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 12px;
line-height: 1.4em;
@@ -139,7 +137,7 @@
transition: all 0.3s ease;
&.following {
background: #FFFFFF;
background: #ffffff;
color: #000000;
.button_text {
@@ -157,11 +155,11 @@
}
.button_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 600;
font-size: 14px;
line-height: 1.4em;
color: #FFFFFF;
color: #ffffff;
}
}
@@ -169,7 +167,7 @@
width: 40px;
height: 40px;
padding: unset;
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 50%;
display: flex;
@@ -187,7 +185,7 @@
.edit_button {
min-width: 60px;
height: 40px;
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
display: flex;
@@ -198,7 +196,7 @@
padding: 0 12px;
.button_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 14px;
line-height: 1.4em;
@@ -209,7 +207,7 @@
.share_button {
min-width: 60px;
height: 40px;
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.12);
border-radius: 999px;
display: flex;
@@ -221,7 +219,7 @@
margin: 0px !important;
.button_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 14px;
line-height: 1.4em;
@@ -249,7 +247,7 @@
gap: 4px;
padding: 6px 8px;
height: 20px;
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
box-sizing: border-box;
@@ -261,7 +259,7 @@
}
.tag_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 11px;
line-height: 1.8em;
@@ -271,7 +269,7 @@
}
.button_edit {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 11px;
line-height: 1.8em;
@@ -284,7 +282,7 @@
&::before,
&::after {
content: '';
content: "";
width: 6px;
height: 1px;
display: inline-block;
@@ -316,14 +314,13 @@
}
.bio_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 400;
font-size: 14px;
line-height: 1.571em;
color: rgba(0, 0, 0, 0.65);
white-space: pre-line;
}
}
}
}
@@ -343,7 +340,7 @@
transition: all 0.3s ease;
.tab_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 600;
font-size: 20px;
line-height: 1.4em;
@@ -369,7 +366,7 @@
// 球局卡片样式
.game_card {
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.08);
border-radius: 20px;
padding: 0 0 12px;
@@ -391,7 +388,7 @@
padding: 12px 15px 0;
.game_title {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 600;
font-size: 16px;
line-height: 1.5em;
@@ -414,7 +411,7 @@
padding: 6px 15px 0;
.time_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 400;
font-size: 12px;
line-height: 1.5em;
@@ -432,7 +429,7 @@
.location_text,
.type_text,
.distance_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 400;
font-size: 12px;
line-height: 1.5em;
@@ -440,7 +437,7 @@
}
.separator {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 400;
font-size: 14px;
line-height: 1.3em;
@@ -462,7 +459,7 @@
width: 56.44px;
height: 56.44px;
border-radius: 9px;
border: 1.5px solid #FFFFFF;
border: 1.5px solid #ffffff;
&:nth-child(1) {
top: 4.18px;
@@ -505,7 +502,7 @@
width: 20px;
height: 20px;
border-radius: 50%;
border: 1px solid #FFFFFF;
border: 1px solid #ffffff;
cursor: pointer;
transition: transform 0.2s ease;
@@ -516,7 +513,7 @@
}
.participants_count {
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
padding: 6px;
@@ -526,7 +523,7 @@
justify-content: center;
.count_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 11px;
line-height: 1.8em;
@@ -541,7 +538,7 @@
gap: 4px;
.info_tag {
background: #FFFFFF;
background: #ffffff;
border: 0.5px solid rgba(0, 0, 0, 0.16);
border-radius: 999px;
padding: 6px 8px;
@@ -551,7 +548,7 @@
justify-content: center;
.tag_text {
font-family: 'PingFang SC';
font-family: "PingFang SC";
font-weight: 500;
font-size: 11px;
line-height: 1.8em;
@@ -561,4 +558,4 @@
}
}
}
}
}

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

@@ -41,7 +41,7 @@ import { useCities, useProfessions } from "@/store/pickerOptionsStore";
// 用户信息卡片组件属性
interface UserInfoCardProps {
editable: boolean,
editable: boolean;
user_info: Partial<UserInfoType>;
is_current_user: boolean;
is_following?: boolean;
@@ -85,8 +85,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
const [form_data, set_form_data] = useState<Partial<UserInfoType>>({});
useDidShow(() => {
set_form_data({ ...user_info })
})
set_form_data({ ...user_info });
});
// 职业数据
const professions = useProfessions();
@@ -188,8 +188,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
) {
await updateUserInfo({ ...field });
set_form_data((prev) => {
return { ...prev, ...field }
})
return { ...prev, ...field };
});
// 更新本地状态
// setFormData((prev) => ({ ...prev, ...field }));
// setUserInfo((prev) => ({ ...prev, ...field }));
@@ -198,8 +198,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
const update_data = { [field as string]: value };
await updateUserInfo(update_data);
set_form_data((prev) => {
return { ...prev, ...update_data }
})
return { ...prev, ...update_data };
});
// 更新本地状态
// setFormData((prev) => ({ ...prev, [field as string]: value }));
// setUserInfo((prev) => ({ ...prev, [field as string]: value }));
@@ -287,7 +287,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
}
return defaultOptions;
}
};
return (
<View className="user_info_card">
@@ -308,6 +308,7 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
<View className="tag_item" onClick={on_edit}>
<Image
className="tag_icon"
style="gap: 0;"
src={require("../../static/userInfo/edit.svg")}
/>
</View>
@@ -335,7 +336,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
</Text>
<Text className="stat_label">粉丝</Text>
</View>
<View className="stat_item clickable"
<View
className="stat_item clickable"
onClick={() => onTab?.("hosted")}
>
<Text className="stat_number">
@@ -343,7 +345,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
</Text>
<Text className="stat_label">主办</Text>
</View>
<View className="stat_item clickable"
<View
className="stat_item clickable"
onClick={() => onTab?.("participated")}
>
<Text className="stat_number">
@@ -430,7 +433,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("ntrp_level");
}}>
}}
>
<Text className="tag_text">{`NTRP ${user_info.ntrp_level}`}</Text>
</View>
) : is_current_user ? (
@@ -448,7 +452,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
className="tag_item"
onClick={() => {
editable && handle_open_edit_modal("occupation");
}}>
}}
>
<Text className="tag_text">
{user_info.occupation.split(" ")[2]}
</Text>
@@ -466,7 +471,8 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
{user_info.country || user_info.province || user_info.city ? (
<View
className="tag_item"
onClick={() => editable && handle_open_edit_modal("location")}>
onClick={() => editable && handle_open_edit_modal("location")}
>
<Text className="tag_text">{`${user_info.province}${user_info.city}`}</Text>
</View>
) : is_current_user ? (
@@ -534,7 +540,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
options={cities}
visible={location_picker_visible}
setvisible={setLocationPickerVisible}
value={form_data.country ? [form_data.country, form_data.province, form_data.city] : getDefaultOption(cities)}
value={
form_data.country
? [form_data.country, form_data.province, form_data.city]
: getDefaultOption(cities)
}
onChange={handle_location_change}
/>
)}
@@ -558,7 +568,9 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
img={user_info.avatar_url || ""}
visible={ntrp_picker_visible}
setvisible={setNtrpPickerVisible}
value={form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]}
value={
form_data.ntrp_level === "0" ? ["3.0"] : [form_data.ntrp_level]
}
onChange={handle_ntrp_level_change}
/>
)}
@@ -570,7 +582,11 @@ export const UserInfoCard: React.FC<UserInfoCardProps> = ({
options={professions}
visible={occupation_picker_visible}
setvisible={setOccupationPickerVisible}
value={form_data.occupation ? [...form_data.occupation.split(" ")] : getDefaultOption(professions)}
value={
form_data.occupation
? [...form_data.occupation.split(" ")]
: getDefaultOption(professions)
}
onChange={handle_occupation_change}
/>
)}
@@ -711,8 +727,9 @@ export const GameTabs: React.FC<GameTabsProps> = ({
<Text className="tab_text">{hosted_text}</Text>
</View>
<View
className={`tab_item ${active_tab === "participated" ? "active" : ""
}`}
className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`}
onClick={() => on_tab_change("participated")}
>
<Text className="tab_text">{participated_text}</Text>

12
src/user_pages/edit/index.scss
View File

@@ -5,8 +5,8 @@
circle at 50% 0,
/* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px,
/* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px,
/* 100px 处开始淡化 */ #FAFAFA 300px,
/* 到 200px 变成白色 */ #FAFAFA 100% /* 200px 以下全白 */
/* 100px 处开始淡化 */ #fafafa 300px,
/* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */
);
position: relative;
// overflow: hidden;
@@ -306,15 +306,15 @@
position: absolute;
left: 36px;
right: 12px;
height: 0.5px;
background: rgba(0, 0, 0, 0.08);
height: 0.5pt;
background: rgba(0, 0, 0, 0.06);
border-radius: 99px;
}
}
.divider {
height: 0.5px;
background-color: rgba(0, 0, 0, 0.08);
height: 0.5pt;
background-color: rgba(0, 0, 0, 0.06);
margin-left: 35px;
box-sizing: border-box;
}

11
src/user_pages/edit/index.tsx
View File

@@ -451,7 +451,10 @@ const EditProfilePage: React.FC = () => {
/>
</View>
</View>
<View className="divider"></View>
<View
className="divider"
style="transform: translate(0, 0);"
></View>
</View>
{/* 生日 */}
@@ -603,9 +606,9 @@ const EditProfilePage: React.FC = () => {
>
{form_data.phone
? form_data.phone.replace(
/(\d{3})(\d{4})(\d{4})/,
"$1 $2 $3"
)
/(\d{3})(\d{4})(\d{4})/,
"$1 $2 $3"
)
: "未绑定"}
</Button>
<Image

17
src/user_pages/myself/index.scss
View File

@@ -6,7 +6,7 @@
position: relative;
overflow-y: auto;
box-sizing: border-box;
background-color: #FAFAFA;
background-color: #fafafa;
&::-webkit-scrollbar {
display: none;
@@ -19,7 +19,7 @@
// 背景渐变过渡动画
@keyframes backgroundGradient {
0% {
background: #FFFFFF;
background: #ffffff;
}
100% {
background: radial-gradient(
@@ -35,8 +35,8 @@
// 主要内容区域
.main_content {
// position: relative;
background: #FFFFFF;
animation: backgroundGradient 0.6s ease-in-out forwards;
background: #ffffff;
animation: backgroundGradient 0s ease-in-out forwards;
z-index: 5;
flex: 1;
margin-top: 0;
@@ -127,6 +127,7 @@
.action_card {
@include card-base;
border-radius: 12px;
display: flex;
align-items: center;
overflow: hidden;
@@ -143,9 +144,9 @@
cursor: pointer;
transition: background-color 0.3s ease;
&:hover {
background-color: rgba(0, 0, 0, 0.02);
}
// &:hover {
// background-color: rgba(0, 0, 0, 0.02);
// }
.action_icon {
width: 20px;
@@ -172,7 +173,7 @@
.tab_container {
display: flex;
gap: 16px;
padding: 12px 15px;
padding: 12px 0;
.tab_item {
padding: 12px 0;