样式优化

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

View File

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

View File

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

View File

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

View File

@@ -121,7 +121,7 @@
display: flex;
align-items: center;
gap: 12px;
border: 1px solid rgba(0, 0, 0, 0.2);
// border: 1px solid rgba(0, 0, 0, 0.2);
border-radius: 999px;
.follow_button {
@@ -139,6 +139,7 @@
&.following {
background: #ffffff;
color: #000000;
border-color: rgba(0, 0, 0, 0.2);
.button_text {
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-radius: 12px;
// box-shadow: 0px 4px 36px 0px rgba(0, 0, 0, 0.06);
overflow: hidden;
.form_group {
background: #ffffff;
border-radius: 12px;
.form_item {
display: flex;
@@ -330,7 +330,7 @@
.logout_button {
background: #ffffff;
border: 1px solid rgba(0, 0, 0, 0.12);
border: 0.5pt solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
padding: 2px 6px;
display: flex;
@@ -353,7 +353,7 @@
}
&.group {
border: 1px solid rgba(0, 0, 0, 0.12);
border: 1px solid rgba(0, 0, 0, 0.06);
border-radius: 16px;
overflow: hidden;
@@ -368,7 +368,7 @@
}
&: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.replace(
/(\d{3})(\d{4})(\d{4})/,
"$1 $2 $3"
)
/(\d{3})(\d{4})(\d{4})/,
"$1 $2 $3"
)
: "未绑定"}
</Button>
<Image

View File

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

View File

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

View File

@@ -5,13 +5,17 @@
position: relative;
overflow-y: auto;
box-sizing: border-box;
background: radial-gradient(
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 以下全白 */
);
background: radial-gradient(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 以下全白 */
);
}
// 主要内容区域
@@ -19,4 +23,28 @@
display: flex;
flex-direction: column;
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 || "",
avatar_url: userData.avatar_url || "",
join_date: userData.subscribe_time
? `${new Date(userData.subscribe_time).getFullYear()}${
new Date(userData.subscribe_time).getMonth() + 1
}月加入`
? `${new Date(userData.subscribe_time).getFullYear()}${new Date(userData.subscribe_time).getMonth() + 1
}月加入`
: "",
stats: {
following_count: userData.stats?.following_count || 0,
@@ -103,10 +102,10 @@ const OtherUserPage: React.FC = () => {
/>
{/* 主要内容 */}
<View className="main_content" style={{ paddingTop: `${totalHeight}px` }}>
<Text></Text>
<Text></Text>
<Image src=""></Image>
<Text>👆</Text>
<Text className="title-text"></Text>
<Text></Text>
<Image className="qrcode" mode="scaleToFill" src={require("@/static/userInfo/group-qrcode.svg")} showMenuByLongpress></Image>
<Text className="hint-text">👆</Text>
<Text></Text>
<Text></Text>
<Text></Text>

View File

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