样式优化

This commit is contained in:
2025-11-29 17:30:43 +08:00
parent 358e85be10
commit f4951c18f8
13 changed files with 91 additions and 35 deletions

View File

@@ -83,11 +83,12 @@
// 内容区域 // 内容区域
.modal_content { .modal_content {
padding: 16px 20px; padding: 0 20px;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: 20px; gap: 20px;
box-sizing: border-box; box-sizing: border-box;
margin-bottom: 20px;
.input_container { .input_container {
display: flex; display: flex;
@@ -127,6 +128,10 @@
line-height: 20px; line-height: 20px;
padding: 0; padding: 0;
} }
&.profile {
width: 100%;
}
} }
.char_count { .char_count {
@@ -140,6 +145,7 @@
font-size: 14px; font-size: 14px;
line-height: 1.71em; line-height: 1.71em;
color: rgba(60, 60, 67, 0.3); color: rgba(60, 60, 67, 0.3);
&.un-valid { &.un-valid {
color: #FF3B30; color: #FF3B30;
} }
@@ -156,6 +162,7 @@
font-size: 12px; font-size: 12px;
line-height: 1.5em; line-height: 1.5em;
color: rgba(60, 60, 67, 0.6); color: rgba(60, 60, 67, 0.6);
&.illegal { &.illegal {
color: #FF3B30; color: #FF3B30;
} }

View File

@@ -171,9 +171,9 @@ const EditModal: React.FC<EditModalProps> = ({
</View> </View>
</> </>
) : ( ) : (
<> <View style={{display: "flex", flexDirection: "column", width: "100%", height: "120px"}}>
<Textarea <Textarea
className="text_input" className="text_input profile"
value={value} value={value}
placeholder={placeholder} placeholder={placeholder}
// maxlength={maxLength} // maxlength={maxLength}
@@ -191,7 +191,7 @@ const EditModal: React.FC<EditModalProps> = ({
{value.length}/{maxLength} {value.length}/{maxLength}
</Text> </Text>
</View> </View>
</> </View>
)} )}
</View> </View>

View File

@@ -4,7 +4,6 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 8px 20px; padding: 8px 20px;
background: #ffffff;
height: 56px; height: 56px;
margin-top: 12px; margin-top: 12px;
box-sizing: border-box; box-sizing: border-box;
@@ -55,7 +54,7 @@
display: flex; display: flex;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
padding: 6px 16px; padding: 10px 16px 8px;
border-radius: 20px; border-radius: 20px;
white-space: nowrap; white-space: nowrap;
position: relative; position: relative;
@@ -84,7 +83,7 @@
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 400; font-weight: 400;
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 12px;
position: relative; position: relative;
z-index: 1; z-index: 1;
} }

View File

@@ -27,7 +27,7 @@
} }
.evaluateCardWrap { .evaluateCardWrap {
padding: 16px; padding: 0 16px;
} }
// .examination-btn { // .examination-btn {

View File

@@ -121,7 +121,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
gap: 12px; gap: 12px;
border: 1px solid rgba(0, 0, 0, 0.2); // border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 999px; border-radius: 999px;
.follow_button { .follow_button {
@@ -139,6 +139,7 @@
&.following { &.following {
background: #ffffff; background: #ffffff;
color: #000000; color: #000000;
border-color: rgba(0, 0, 0, 0.2);
.button_text { .button_text {
color: #000000 !important; color: #000000 !important;

File diff suppressed because one or more lines are too long

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -184,10 +184,10 @@
border: 0.5pt solid rgba(0, 0, 0, 0.06); border: 0.5pt solid rgba(0, 0, 0, 0.06);
border-radius: 12px; border-radius: 12px;
// box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06); // box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
overflow: hidden;
.form_group { .form_group {
background: #ffffff; background: #ffffff;
border-radius: 12px;
.form_item { .form_item {
display: flex; display: flex;
@@ -330,7 +330,7 @@
.logout_button { .logout_button {
background: #ffffff; background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12); border: 0.5pt solid rgba(0, 0, 0, 0.06);
border-radius: 16px; border-radius: 16px;
padding: 2px 6px; padding: 2px 6px;
display: flex; display: flex;
@@ -353,7 +353,7 @@
} }
&.group { &.group {
border: 1px solid rgba(0, 0, 0, 0.12); border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px; border-radius: 16px;
overflow: hidden; overflow: hidden;
@@ -368,7 +368,7 @@
} }
&:first-child { &:first-child {
border-bottom: 1px solid rgba(0, 0, 0, 0.12); border-bottom: 1px solid rgba(0, 0, 0, 0.06);
} }
} }
} }

View File

@@ -695,9 +695,9 @@ const EditProfilePage: React.FC = () => {
> >
{form_data.phone {form_data.phone
? form_data.phone.replace( ? form_data.phone.replace(
/(\d{3})(\d{4})(\d{4})/, /(\d{3})(\d{4})(\d{4})/,
"$1 $2 $3" "$1 $2 $3"
) )
: "未绑定"} : "未绑定"}
</Button> </Button>
<Image <Image

View File

@@ -60,7 +60,6 @@
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
padding: 0 80px; padding: 0 80px;
background: #ffffff;
height: 44px; height: 44px;
overflow-x: auto; overflow-x: auto;
position: fixed; position: fixed;
@@ -155,7 +154,6 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
background: #ffffff;
overflow-y: auto; overflow-y: auto;
// 加载状态提示 // 加载状态提示

View File

@@ -7,7 +7,7 @@ import { FollowService, FollowUser } from '@/services/followService';
import { withAuth } from '@/components'; import { withAuth } from '@/components';
import './index.scss'; import './index.scss';
import CommonDialog from '@/components/CommonDialog' import CommonDialog from '@/components/CommonDialog'
import { useUserActions } from "@/store/userStore"; import { useUserActions, useUserInfo } from "@/store/userStore";
// 标签页类型 // 标签页类型
type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend'; type TabType = 'mutual_follow' | 'following' | 'follower' | 'recommend';
@@ -22,6 +22,7 @@ const TAB_CONFIG = [
const FollowPage: React.FC = () => { const FollowPage: React.FC = () => {
const { fetchUserInfo } = useUserActions(); const { fetchUserInfo } = useUserActions();
const userInfo = useUserInfo();
// 获取页面参数,支持指定默认标签页 // 获取页面参数,支持指定默认标签页
const instance = Taro.getCurrentInstance(); const instance = Taro.getCurrentInstance();
const default_tab = (instance.router?.params?.tab as TabType) || 'mutual_follow'; const default_tab = (instance.router?.params?.tab as TabType) || 'mutual_follow';
@@ -240,7 +241,7 @@ const FollowPage: React.FC = () => {
<View className="follow_page"> <View className="follow_page">
{/* 自定义导航栏 */} {/* 自定义导航栏 */}
<GeneralNavbar <GeneralNavbar
title="粉丝" title={userInfo.nickname}
titlePosition="left" titlePosition="left"
showBack={true} showBack={true}
/> />

View File

@@ -5,13 +5,17 @@
position: relative; position: relative;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
background: radial-gradient( background: radial-gradient(circle at 50% 0,
circle at 50% 0, /* 光晕圆心在顶部中间 */
/* 光晕圆心在顶部中间 */ rgba(191, 255, 239, 0.9) 0px, rgba(191, 255, 239, 0.9) 0px,
/* 中间更深的浅蓝 */ rgba(191, 255, 239, 0.5) 200px, /* 中间更深的浅蓝 */
/* 100px 处开始淡化 */ #fafafa 300px, rgba(191, 255, 239, 0.5) 200px,
/* 到 200px 变成白色 */ #fafafa 100% /* 200px 以下全白 */ /* 100px 处开始淡化 */
); #fafafa 300px,
/* 到 200px 变成白色 */
#fafafa 100%
/* 200px 以下全白 */
);
} }
// 主要内容区域 // 主要内容区域
@@ -19,4 +23,28 @@
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: center; align-items: center;
} color: rgba(0, 0, 0, 0.40);
text-align: center;
font-family: "PingFang SC";
font-size: 14px;
font-style: normal;
font-weight: 500;
line-height: normal;
.title-text {
color: #000;
font-size: 24px;
font-weight: 600;
margin-top: 80px;
margin-bottom: 16px;
}
.qrcode {
margin: 32px 0 -20px;
}
.hint-text {
font-weight: 400;
margin-bottom: 78px;
}
}

View File

@@ -54,9 +54,8 @@ const OtherUserPage: React.FC = () => {
nickname: userData.nickname || "", nickname: userData.nickname || "",
avatar_url: userData.avatar_url || "", avatar_url: userData.avatar_url || "",
join_date: userData.subscribe_time join_date: userData.subscribe_time
? `${new Date(userData.subscribe_time).getFullYear()}${ ? `${new Date(userData.subscribe_time).getFullYear()}${new Date(userData.subscribe_time).getMonth() + 1
new Date(userData.subscribe_time).getMonth() + 1 }月加入`
}月加入`
: "", : "",
stats: { stats: {
following_count: userData.stats?.following_count || 0, following_count: userData.stats?.following_count || 0,
@@ -103,10 +102,10 @@ const OtherUserPage: React.FC = () => {
/> />
{/* 主要内容 */} {/* 主要内容 */}
<View className="main_content" style={{ paddingTop: `${totalHeight}px` }}> <View className="main_content" style={{ paddingTop: `${totalHeight}px` }}>
<Text></Text> <Text className="title-text"></Text>
<Text></Text> <Text></Text>
<Image src=""></Image> <Image className="qrcode" mode="scaleToFill" src={require("@/static/userInfo/group-qrcode.svg")} showMenuByLongpress></Image>
<Text>👆</Text> <Text className="hint-text">👆</Text>
<Text></Text> <Text></Text>
<Text></Text> <Text></Text>
<Text></Text> <Text></Text>

View File

@@ -201,6 +201,7 @@
border-radius: 20px; border-radius: 20px;
box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 36px 0px rgba(0, 0, 0, 0.1);
margin: 0 5px; margin: 0 5px;
overflow: hidden;
.history_header { .history_header {
display: flex; display: flex;