Merge 7ad9eea439
into 6a7019ec1a
commit
66ef03e2f9
|
@ -54,6 +54,7 @@
|
||||||
<el-dropdown-item>官方文档</el-dropdown-item>
|
<el-dropdown-item>官方文档</el-dropdown-item>
|
||||||
</a>
|
</a>
|
||||||
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
<el-dropdown-item command="user">个人中心</el-dropdown-item>
|
||||||
|
<el-dropdown-item command="setting">页面设置</el-dropdown-item>
|
||||||
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
<el-dropdown-item divided command="loginout">退出登录</el-dropdown-item>
|
||||||
</el-dropdown-menu>
|
</el-dropdown-menu>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
@ -31,6 +31,12 @@ export const menuData: Menus[] = [
|
||||||
index: '/system-menu',
|
index: '/system-menu',
|
||||||
title: '菜单管理',
|
title: '菜单管理',
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: '14',
|
||||||
|
pid: '1',
|
||||||
|
index: '/setting-reset',
|
||||||
|
title: '设置',
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|
|
@ -104,6 +104,14 @@ const routes: RouteRecordRaw[] = [
|
||||||
},
|
},
|
||||||
component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
|
component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
path: '/setting',
|
||||||
|
name: 'setting',
|
||||||
|
meta: {
|
||||||
|
title: '设置',
|
||||||
|
},
|
||||||
|
component: () => import('../views/setting/reset.vue'),
|
||||||
|
},
|
||||||
{
|
{
|
||||||
path: '/editor',
|
path: '/editor',
|
||||||
name: 'editor',
|
name: 'editor',
|
||||||
|
|
|
@ -0,0 +1,182 @@
|
||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="user-container">
|
||||||
|
<el-card class="user-profile" shadow="hover" :body-style="{ padding: '0px' }">
|
||||||
|
<div class="user-profile-bg"></div>
|
||||||
|
<div class="user-avatar-wrap">
|
||||||
|
<el-avatar class="user-avatar" :size="120" :src="avatarImg" />
|
||||||
|
</div>
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="info-name">{{ name }}</div>
|
||||||
|
<div class="info-desc">
|
||||||
|
<span>@lin-xin</span>
|
||||||
|
<el-divider direction="vertical" />
|
||||||
|
<el-link href="https://lin-xin.gitee.io" target="_blank">lin-xin.gitee.io</el-link>
|
||||||
|
</div>
|
||||||
|
<div class="info-desc">FE Developer</div>
|
||||||
|
<div class="info-icon">
|
||||||
|
<a href="https://github.com/lin-xin" target="_blank"> <i class="el-icon-lx-github-fill"></i></a>
|
||||||
|
<i class="el-icon-lx-qq-fill"></i>
|
||||||
|
<i class="el-icon-lx-facebook-fill"></i>
|
||||||
|
<i class="el-icon-lx-twitter-fill"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="user-footer">
|
||||||
|
<div class="user-footer-item">
|
||||||
|
<el-statistic title="Follower" :value="1800" />
|
||||||
|
</div>
|
||||||
|
<div class="user-footer-item">
|
||||||
|
<el-statistic title="Following" :value="666" />
|
||||||
|
</div>
|
||||||
|
<div class="user-footer-item">
|
||||||
|
<el-statistic title="Total Post" :value="888" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
<el-card
|
||||||
|
class="user-content"
|
||||||
|
shadow="hover"
|
||||||
|
:body-style="{ padding: '20px 50px', height: '100%', boxSizing: 'border-box' }"
|
||||||
|
>
|
||||||
|
<div>
|
||||||
|
<h1>空的设置页面</h1>
|
||||||
|
</div>
|
||||||
|
</el-card>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts" name="setting-reset">
|
||||||
|
import avatar from '@/assets/img/img.jpg';
|
||||||
|
import { ref } from 'vue';
|
||||||
|
import 'vue-cropper/dist/index.css';
|
||||||
|
const name = localStorage.getItem('vuems_name');
|
||||||
|
const avatarImg = ref(avatar);
|
||||||
|
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.user-container {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile-bg {
|
||||||
|
width: 100%;
|
||||||
|
height: 200px;
|
||||||
|
background-image: url('../../assets/img/ucenter-bg.jpg');
|
||||||
|
background-size: cover;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-profile {
|
||||||
|
width: 500px;
|
||||||
|
margin-right: 20px;
|
||||||
|
flex: 0 0 auto;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar-wrap {
|
||||||
|
position: absolute;
|
||||||
|
top: 135px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
border: 5px solid #fff;
|
||||||
|
border-radius: 50%;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 7px 12px 0 rgba(62, 57, 107, 0.16);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-info {
|
||||||
|
text-align: center;
|
||||||
|
padding: 80px 0 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-name {
|
||||||
|
margin: 0 0 20px;
|
||||||
|
font-size: 22px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #373a3c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-desc {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-desc,
|
||||||
|
.info-desc a {
|
||||||
|
font-size: 18px;
|
||||||
|
color: #55595c;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-icon {
|
||||||
|
margin-top: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.info-icon i {
|
||||||
|
font-size: 30px;
|
||||||
|
margin: 0 10px;
|
||||||
|
color: #343434;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-content {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-tabpane {
|
||||||
|
padding: 10px 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-wrap {
|
||||||
|
width: 600px;
|
||||||
|
height: 350px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-demo-btn {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.crop-input {
|
||||||
|
position: absolute;
|
||||||
|
width: 100px;
|
||||||
|
height: 40px;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
opacity: 0;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.w500 {
|
||||||
|
width: 500px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-footer {
|
||||||
|
display: flex;
|
||||||
|
border-top: 1px solid rgba(83, 70, 134, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-footer-item {
|
||||||
|
padding: 20px 0;
|
||||||
|
width: 33.3333333333%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-footer > div + div {
|
||||||
|
border-left: 1px solid rgba(83, 70, 134, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tabs.el-tabs--left {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
Loading…
Reference in New Issue