515 lines
11 KiB
Vue
515 lines
11 KiB
Vue
<template>
|
||
<div class="AboutUs">
|
||
<navigationBar />
|
||
<div class="box">
|
||
<el-tabs type="border-card">
|
||
<el-tab-pane label="个人信息">
|
||
<div class="AboutUs-left">
|
||
<div class="AboutUs-img">
|
||
<img src="../assets/images/sub.jpg" alt="用户头像" />
|
||
</div>
|
||
<div class="user-info">
|
||
<div
|
||
v-for="(item, index) in users"
|
||
:key="index"
|
||
class="user-item"
|
||
>
|
||
<p class="user-name">{{ item.name }}</p>
|
||
<p class="user-date">{{ item.date }}</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="AboutUs-right">
|
||
<h3>其他操作</h3>
|
||
<hr />
|
||
<p @click="toggleBackground">切换背景</p>
|
||
<p>帮助与反馈</p>
|
||
</div>
|
||
<trigger :visible.sync="isShow"></trigger>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="待办事项">
|
||
<div class="wtbDone">
|
||
<input type="text" v-model="newTodo" placeholder="请输入待办事项" />
|
||
<button class="handleAdd" @click="handleAdd">添加</button>
|
||
<ul>
|
||
<li
|
||
v-for="(todo, index) in todos"
|
||
:key="index"
|
||
:class="{ selected: index === selectedTodoIndex }"
|
||
@click="selectTodo(index)"
|
||
>
|
||
{{ todo }}
|
||
</li>
|
||
</ul>
|
||
<div class="wtbDone-footer">
|
||
<button @click="handleDelete">删除</button>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
|
||
<el-tab-pane label="基本设置">
|
||
<div class="basic-settings">
|
||
<!-- 左边内容 -->
|
||
<div class="left-section">
|
||
<!-- 昵称 -->
|
||
<div class="form-item">
|
||
<label for="nickname">昵称：</label>
|
||
<input
|
||
type="text"
|
||
id="nickname"
|
||
v-model="nickname"
|
||
placeholder="请输入昵称"
|
||
/>
|
||
</div>
|
||
<!-- 介绍 -->
|
||
<div class="form-item">
|
||
<label for="intro">介绍：</label>
|
||
<input id="intro" v-model="intro" placeholder="请输入介绍" />
|
||
</div>
|
||
<!-- 性别 -->
|
||
<div class="form-item">
|
||
<label>性别：</label>
|
||
<input type="radio" v-model="gender" value="male" />男
|
||
<input
|
||
type="radio"
|
||
v-model="gender"
|
||
value="female"
|
||
style="margin-left: 10px"
|
||
/>女
|
||
</div>
|
||
<!-- 生日 -->
|
||
<div class="form-item">
|
||
<label for="birthday">生日：</label>
|
||
<input type="date" id="birthday" v-model="birthday" />
|
||
</div>
|
||
<!-- 地区选择 -->
|
||
<div class="form-item">
|
||
<label for="region">地区：</label>
|
||
<select id="region" v-model="region">
|
||
<option value="region1">地区1</option>
|
||
<option value="region2">地区2</option>
|
||
<option value="region3">地区3</option>
|
||
</select>
|
||
|
||
<select id="region" v-model="city" style="margin-left: 10px">
|
||
<option value="city1">地区1</option>
|
||
<option value="city2">地区2</option>
|
||
<option value="city3">地区3</option>
|
||
</select>
|
||
</div>
|
||
<!-- 保存按钮 -->
|
||
<div class="form-item">
|
||
<button class="save-btn" @click="saveUserInfo">保存</button>
|
||
</div>
|
||
</div>
|
||
<!-- 右边内容 -->
|
||
<div class="right-section">
|
||
<div class="avatar-section">
|
||
<!-- 头像显示 -->
|
||
<img :src="avatar" alt="用户头像" class="avatar" />
|
||
<!-- 更换头像按钮 -->
|
||
<span class="change-avatar-btn" @click="changeAvatar"
|
||
>更换头像</span
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
|
||
<!-- 头像上传 -->
|
||
<el-dialog title="更换头像" :visible.sync="dialogVisible" width="30%">
|
||
<el-upload
|
||
class="avatar-uploader"
|
||
action="https://jsonplaceholder.typicode.com/posts/"
|
||
:show-file-list="false"
|
||
:on-success="handleAvatarSuccess"
|
||
:before-upload="beforeAvatarUpload"
|
||
>
|
||
<img v-if="imageUrl" :src="imageUrl" class="avatar" />
|
||
<i v-else class="el-icon-plus avatar-uploader-icon"></i>
|
||
</el-upload>
|
||
<span slot="footer" class="dialog-footer">
|
||
<el-button @click="dialogVisible = false">取 消</el-button>
|
||
<el-button type="primary" @click="handleAddAvatar"
|
||
>确 定</el-button
|
||
>
|
||
</span>
|
||
</el-dialog>
|
||
</div>
|
||
|
||
<musIc />
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import navigationBar from '@/components/navigationBar.vue'
|
||
import trigger from '@/components/trigger.vue'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
isShow: false,
|
||
nickname: '',
|
||
intro: '',
|
||
gender: '',
|
||
birthday: '',
|
||
region: '',
|
||
city: '',
|
||
dialogVisible: false,
|
||
imageUrl: '',
|
||
avatar: require('@/assets/images/789.jpg'), // 默认头像地址
|
||
users: [
|
||
{
|
||
name: '当前用户名',
|
||
date: '2024-01-01'
|
||
}
|
||
],
|
||
newTodo: '',
|
||
todos: [], // 待办事项列表
|
||
selectedTodoIndex: null // 选中的待办事项索引
|
||
}
|
||
},
|
||
components: {
|
||
navigationBar,
|
||
trigger
|
||
},
|
||
methods: {
|
||
toggleBackground () {
|
||
this.isShow = true
|
||
},
|
||
saveUserInfo () {
|
||
// 保存用户信息的逻辑
|
||
this.$message.success('保存成功')
|
||
},
|
||
// 添加按钮
|
||
handleAdd () {
|
||
if (this.newTodo.trim() !== '') {
|
||
this.todos.push(this.newTodo.trim())
|
||
this.newTodo = ''
|
||
this.$message.success('添加成功')
|
||
} else {
|
||
this.$message.error('请输入待办事项')
|
||
}
|
||
},
|
||
// 选择待办事项
|
||
selectTodo (index) {
|
||
this.selectedTodoIndex = index
|
||
},
|
||
// 删除按钮
|
||
handleDelete () {
|
||
if (this.selectedTodoIndex !== null) {
|
||
this.todos.splice(this.selectedTodoIndex, 1)
|
||
this.selectedTodoIndex = null
|
||
this.$message.success('删除成功')
|
||
} else {
|
||
this.$message.error('请选择要删除的待办事项')
|
||
}
|
||
},
|
||
changeAvatar () {
|
||
// 更换头像的逻辑
|
||
this.dialogVisible = true
|
||
},
|
||
handleAvatarSuccess (res, file) {
|
||
this.imageUrl = URL.createObjectURL(file.raw)
|
||
},
|
||
beforeAvatarUpload (file) {
|
||
const isJPG = file.type === 'image/jpeg'
|
||
const isLt2M = file.size / 1024 / 1024 < 2
|
||
|
||
if (!isJPG) {
|
||
this.$message.error('上传头像图片只能是 JPG 格式!')
|
||
}
|
||
if (!isLt2M) {
|
||
this.$message.error('上传头像图片大小不能超过 2MB!')
|
||
}
|
||
return isJPG && isLt2M
|
||
},
|
||
handleAddAvatar () {
|
||
this.$message({
|
||
message: '上传成功',
|
||
type: 'success'
|
||
})
|
||
this.dialogVisible = false
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="less" scoped>
|
||
.wtbDone {
|
||
width: 700px;
|
||
height: 500px;
|
||
border: 1px solid black;
|
||
margin: auto;
|
||
padding: 10px;
|
||
border-radius: 8px;
|
||
background-color: #fff;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
|
||
input {
|
||
width: 550px;
|
||
height: 40px;
|
||
padding: 5px;
|
||
margin-top: 20px;
|
||
outline: none;
|
||
border-radius: 4px;
|
||
border: 1px solid #ccc;
|
||
|
||
&:focus {
|
||
border: 1px solid #007bff;
|
||
}
|
||
}
|
||
}
|
||
|
||
ul {
|
||
list-style: none;
|
||
padding: 0;
|
||
width: 600px;
|
||
height: 310px;
|
||
margin: 20px auto;
|
||
overflow-y: scroll;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
|
||
li {
|
||
width: 100%;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
background-color: #f5f5f5;
|
||
border-bottom: 1px solid #ddd;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #e6e6e6;
|
||
}
|
||
|
||
&.selected {
|
||
background-color: #d3e5ff;
|
||
}
|
||
}
|
||
}
|
||
|
||
.wtbDone-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-top: 20px;
|
||
padding: 10px;
|
||
}
|
||
|
||
button {
|
||
width: 120px;
|
||
height: 40px;
|
||
background-color: #007bff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
margin-left: 5px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
}
|
||
|
||
.box {
|
||
background-color: #f5f5f5;
|
||
border-radius: 8px;
|
||
padding: 20px;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
margin: 80px auto;
|
||
max-width: 800px;
|
||
}
|
||
|
||
.AboutUs-left {
|
||
text-align: left;
|
||
}
|
||
|
||
.AboutUs-right {
|
||
text-align: left;
|
||
}
|
||
|
||
hr {
|
||
border: none;
|
||
border-top: 1px solid #ddd;
|
||
margin: 20px 0;
|
||
}
|
||
|
||
.AboutUs-img {
|
||
text-align: center;
|
||
}
|
||
|
||
.AboutUs-img img {
|
||
width: 120px;
|
||
height: 120px;
|
||
border-radius: 50%;
|
||
margin-bottom: 20px;
|
||
border: 4px solid #fff;
|
||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.user-info {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.user-name {
|
||
color: #333;
|
||
font-size: 18px;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.user-date {
|
||
color: #666;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.AboutUs-right p {
|
||
color: #007bff;
|
||
font-size: 18px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.AboutUs-right p:hover {
|
||
text-decoration: underline;
|
||
}
|
||
|
||
.el-tabs {
|
||
text-align: left;
|
||
}
|
||
|
||
.basic-settings {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
}
|
||
|
||
.left-section {
|
||
width: 50%;
|
||
padding-right: 20px;
|
||
}
|
||
|
||
.right-section {
|
||
width: 40%;
|
||
padding-left: 20px;
|
||
}
|
||
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
|
||
#nickname {
|
||
width: 250px;
|
||
padding: 5px;
|
||
outline: none;
|
||
height: 30px;
|
||
}
|
||
|
||
#intro {
|
||
width: 250px;
|
||
padding: 5px;
|
||
outline: none;
|
||
height: 100px;
|
||
}
|
||
}
|
||
|
||
.form-item label {
|
||
display: inline-block;
|
||
font-weight: bold;
|
||
}
|
||
|
||
#region {
|
||
outline: none;
|
||
width: 120px;
|
||
height: 30px;
|
||
padding: 5px;
|
||
}
|
||
|
||
.input-field {
|
||
width: calc(100% - 80px);
|
||
padding: 8px;
|
||
border: 1px solid #ccc;
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.save-btn {
|
||
padding: 8px 20px;
|
||
background-color: #007bff;
|
||
color: #fff;
|
||
border: none;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
margin-left: 120px;
|
||
|
||
&:hover {
|
||
background-color: #0056b3;
|
||
}
|
||
}
|
||
|
||
.avatar-section {
|
||
width: 150px;
|
||
height: 150px;
|
||
border-radius: 50%;
|
||
background-color: palegreen;
|
||
position: relative;
|
||
overflow: hidden;
|
||
|
||
img {
|
||
position: absolute;
|
||
width: 100%;
|
||
height: 100%;
|
||
top: 0;
|
||
left: 0;
|
||
border-radius: 50%;
|
||
object-fit: cover;
|
||
}
|
||
}
|
||
|
||
.change-avatar-btn {
|
||
width: 100%;
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 0;
|
||
padding: 5px;
|
||
text-align: center;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
color: #fff;
|
||
border: none;
|
||
cursor: pointer;
|
||
transition: background-color 0.3s;
|
||
|
||
&:hover {
|
||
background-color: #218838;
|
||
}
|
||
}
|
||
|
||
.avatar-uploader .el-upload {
|
||
border: 1px dashed #d9d9d9;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
.avatar-uploader .el-upload:hover {
|
||
border-color: #409eff;
|
||
}
|
||
.avatar-uploader-icon {
|
||
font-size: 28px;
|
||
color: #8c939d;
|
||
width: 178px;
|
||
height: 178px;
|
||
line-height: 178px;
|
||
text-align: center;
|
||
}
|
||
.avatar {
|
||
width: 178px;
|
||
height: 178px;
|
||
display: block;
|
||
}
|
||
</style>
|