样式优化
This commit is contained in:
@@ -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;
|
||||
}
|
||||
|
||||
@@ -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>
|
||||
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
|
||||
@@ -27,7 +27,7 @@
|
||||
}
|
||||
|
||||
.evaluateCardWrap {
|
||||
padding: 16px;
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
// .examination-btn {
|
||||
|
||||
@@ -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;
|
||||
|
||||
22
src/static/userInfo/group-qrcode.svg
Normal file
22
src/static/userInfo/group-qrcode.svg
Normal file
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 15 KiB |
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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;
|
||||
|
||||
// 加载状态提示
|
||||
|
||||
@@ -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}
|
||||
/>
|
||||
|
||||
@@ -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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
|
||||
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user