From 7ad9eea4391dc435c4e55621aacbe6abc4cc1ea2 Mon Sep 17 00:00:00 2001
From: lyh <2909741643@qq.com>
Date: Tue, 3 Dec 2024 20:10:28 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E4=BA=86=E8=AE=BE=E7=BD=AE?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/header.vue   |   1 +
 src/components/menu.ts      |   6 ++
 src/router/index.ts         |   8 ++
 src/views/setting/reset.vue | 182 ++++++++++++++++++++++++++++++++++++
 4 files changed, 197 insertions(+)
 create mode 100644 src/views/setting/reset.vue

diff --git a/src/components/header.vue b/src/components/header.vue
index 8549ebb..41778bf 100644
--- a/src/components/header.vue
+++ b/src/components/header.vue
@@ -54,6 +54,7 @@
                                 <el-dropdown-item>官方文档</el-dropdown-item>
                             </a>
                             <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-menu>
                     </template>
diff --git a/src/components/menu.ts b/src/components/menu.ts
index 2644432..7702fb0 100644
--- a/src/components/menu.ts
+++ b/src/components/menu.ts
@@ -31,6 +31,12 @@ export const menuData: Menus[] = [
                 index: '/system-menu',
                 title: '菜单管理',
             },
+            {
+                id: '14',
+                pid: '1',
+                index: '/setting-reset',
+                title: '设置',
+            },
         ],
     },
     {
diff --git a/src/router/index.ts b/src/router/index.ts
index cd6d81c..241df7f 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -104,6 +104,14 @@ const routes: RouteRecordRaw[] = [
                 },
                 component: () => import(/* webpackChunkName: "ucenter" */ '../views/pages/ucenter.vue'),
             },
+            {
+                path: '/setting',
+                name: 'setting',
+                meta: {
+                    title: '设置',
+                },
+                component: () => import('../views/setting/reset.vue'),
+            },
             {
                 path: '/editor',
                 name: 'editor',
diff --git a/src/views/setting/reset.vue b/src/views/setting/reset.vue
new file mode 100644
index 0000000..5ff7d03
--- /dev/null
+++ b/src/views/setting/reset.vue
@@ -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>
\ No newline at end of file