155 lines
2.7 KiB
Vue
155 lines
2.7 KiB
Vue
<template>
|
|
<view class="container">
|
|
<!-- 顶部标题 -->
|
|
<view class="header">
|
|
<text class="title">编辑基础信息</text>
|
|
</view>
|
|
|
|
<!-- 头像区域 -->
|
|
<view class="avatar-section">
|
|
<view class="avatar-box">
|
|
<image class="avatar" src="/static/avatar.png"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 表单区域 -->
|
|
<view class="form-section">
|
|
<!-- 昵称 -->
|
|
<view class="form-item">
|
|
<input class="input" placeholder="请输入昵称" placeholder-style="color: #666;" />
|
|
</view>
|
|
|
|
<!-- 性别 -->
|
|
<view class="form-item gender-group">
|
|
<view :class="['gender-option', gender === 'female' ? 'active' : '']" @click="selectGender('female')">
|
|
<text>女</text>
|
|
</view>
|
|
<view :class="['gender-option', gender === 'male' ? 'active' : '']" @click="selectGender('male')">
|
|
<text>男</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 交友宣言 -->
|
|
<view class="form-item">
|
|
<textarea class="textarea" placeholder="请填写交友宣言或个性签名" placeholder-style="color: #666;"></textarea>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 保存按钮 -->
|
|
<view class="save-btn-section">
|
|
<button class="save-btn">保存</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
gender: 'male' // 默认选中男性
|
|
};
|
|
},
|
|
methods: {
|
|
selectGender(gender) {
|
|
this.gender = gender;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.container {
|
|
padding: 20px;
|
|
background-color: #1c1c28;
|
|
min-height: 100vh;
|
|
}
|
|
|
|
.header {
|
|
text-align: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.title {
|
|
color: #ffffff;
|
|
font-size: 18px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
.avatar-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin-bottom: 30px;
|
|
}
|
|
|
|
.avatar-box {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
overflow: hidden;
|
|
border: 2px dashed #666;
|
|
}
|
|
|
|
.avatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.form-section {
|
|
padding: 0 20px;
|
|
}
|
|
|
|
.form-item {
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.input,
|
|
.textarea {
|
|
width: 100%;
|
|
background-color: #2a2a36;
|
|
border: none;
|
|
padding: 12px 15px;
|
|
border-radius: 8px;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.textarea {
|
|
height: 100px;
|
|
}
|
|
|
|
.gender-group {
|
|
display: flex;
|
|
gap: 20px;
|
|
}
|
|
|
|
.gender-option {
|
|
flex: 1;
|
|
background-color: #2a2a36;
|
|
padding: 12px;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
font-size: 14px;
|
|
}
|
|
|
|
.gender-option.active {
|
|
background-color: #2a2a36;
|
|
border: 1px solid #ff6b9d;
|
|
color: #ff6b9d;
|
|
}
|
|
|
|
.save-btn-section {
|
|
padding: 0 20px;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.save-btn {
|
|
width: 100%;
|
|
background: linear-gradient(to right, #ff6b9d, #ff8d8d);
|
|
color: #ffffff;
|
|
padding: 12px;
|
|
border-radius: 25px;
|
|
font-size: 16px;
|
|
border: none;
|
|
}
|
|
</style> |