From 6ac002c2d535720ad1369de94b1d5ac6075a9dd3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=A4=95=E9=98=B3=E5=BE=AE=E7=AC=911?=
 <12457268+sunset-smile-1@user.noreply.gitee.com>
Date: Mon, 23 Dec 2024 21:26:24 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E4=BB=A5=E5=8F=8A=E9=A1=B6?=
 =?UTF-8?q?=E9=83=A8=E5=AF=BC=E8=88=AA=E6=A0=8F=E6=9B=B4=E6=94=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/layout/navBars/topBar/user.vue |   8 +-
 src/views/home/index.vue           | 408 ++++++++++++++++++++++++++++-
 2 files changed, 410 insertions(+), 6 deletions(-)

diff --git a/src/layout/navBars/topBar/user.vue b/src/layout/navBars/topBar/user.vue
index 1aa94e0..cd765f2 100644
--- a/src/layout/navBars/topBar/user.vue
+++ b/src/layout/navBars/topBar/user.vue
@@ -1,6 +1,6 @@
 <template>
 	<div class="layout-navbars-breadcrumb-user pr15" :style="{ flex: layoutUserFlexNum }">
-		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
+		<el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onComponentSizeChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i class="iconfont icon-ziti" :title="$t('message.user.title0')"></i>
 			</div>
@@ -11,7 +11,7 @@
 					<el-dropdown-item command="small" :disabled="state.disabledSize === 'small'">{{ $t('message.user.dropdownSmall') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
-		</el-dropdown> -->
+		</el-dropdown>
 		<!-- <el-dropdown :show-timeout="70" :hide-timeout="50" trigger="click" @command="onLanguageChange">
 			<div class="layout-navbars-breadcrumb-user-icon">
 				<i
@@ -73,10 +73,10 @@
 			<template #dropdown>
 				<el-dropdown-menu>
 					<el-dropdown-item command="/home">{{ $t('message.user.dropdown1') }}</el-dropdown-item>
-					<el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
+					<!-- <el-dropdown-item command="wareHouse">{{ $t('message.user.dropdown6') }}</el-dropdown-item>
 					<el-dropdown-item command="/personal">{{ $t('message.user.dropdown2') }}</el-dropdown-item>
 					<el-dropdown-item command="/404">{{ $t('message.user.dropdown3') }}</el-dropdown-item>
-					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item>
+					<el-dropdown-item command="/401">{{ $t('message.user.dropdown4') }}</el-dropdown-item> -->
 					<el-dropdown-item divided command="logOut">{{ $t('message.user.dropdown5') }}</el-dropdown-item>
 				</el-dropdown-menu>
 			</template>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index d351e1e..fb5c0ac 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,4 +1,4 @@
-<template>
+<!-- <template>
 	<div class="home-container layout-pd">
 		<el-row :gutter="15" class="home-card-one mb15">
 			<el-col
@@ -630,4 +630,408 @@ $homeNavLengh: 8;
 		}
 	}
 }
-</style>
+</style> -->
+//修改后的首页
+<template>
+	<div class="personal layout-pd">
+		<el-row>
+			<!-- 个人信息 -->
+			<el-col :xs="24" :sm="16">
+				<el-card shadow="hover" header="个人信息">
+					<div class="personal-user">
+						<div class="personal-user-left">
+							<el-upload class="h100 personal-user-left-upload" action="https://jsonplaceholder.typicode.com/posts/" multiple :limit="1">
+								<img src="../../assets/图片2.png" />
+							</el-upload>
+						</div>
+						<div class="personal-user-right">
+							<el-row>
+								<el-col :span="24" class="personal-title mb18">{{ currentTime }}，admin，生活变的再糟糕，也不妨碍我变得更好！ </el-col>
+								<el-col :span="24">
+									<el-row>
+										<el-col :xs="24" :sm="8" class="personal-item mb6">
+											<div class="personal-item-label">昵称：</div>
+											<div class="personal-item-value">小柒</div>
+										</el-col>
+										<el-col :xs="24" :sm="16" class="personal-item mb6">
+											<div class="personal-item-label">身份：</div>
+											<div class="personal-item-value">超级管理</div>
+										</el-col>
+									</el-row>
+								</el-col>
+								<el-col :span="24">
+									<el-row>
+										<el-col :xs="24" :sm="8" class="personal-item mb6">
+											<div class="personal-item-label">登录IP：</div>
+											<div class="personal-item-value">192.168.1.1</div>
+										</el-col>
+										<el-col :xs="24" :sm="16" class="personal-item mb6">
+											<div class="personal-item-label">登录时间：</div>
+											<div class="personal-item-value">2021-02-05 18:47:26</div>
+										</el-col>
+									</el-row>
+								</el-col>
+							</el-row>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+
+			<!-- 消息通知 -->
+			<el-col :xs="24" :sm="8" class="pl15 personal-info">
+				<el-card shadow="hover">
+					<template #header>
+						<span>名言推荐</span>
+						<span class="personal-info-more">更多</span>
+					</template>
+					<div class="personal-info-box">
+						<ul class="personal-info-ul">
+							<li v-for="(item, index) in catchphraseDate" :key="index" class="personal-info-li">
+            {{ item }}
+          </li>
+						</ul>
+					</div>
+				</el-card>
+			</el-col>
+
+			<!-- 营销推荐 -->
+			<!-- <el-col :span="24">
+				<el-card shadow="hover" class="mt15" header="营销推荐">
+					<el-row :gutter="15" class="personal-recommend-row">
+						<el-col :sm="6" v-for="(v, k) in state.recommendList" :key="k" class="personal-recommend-col">
+							<div class="personal-recommend" :style="{ 'background-color': v.bg }">
+								<SvgIcon :name="v.icon" :size="70" :style="{ color: v.iconColor }" />
+								<div class="personal-recommend-auto">
+									<div>{{ v.title }}</div>
+									<div class="personal-recommend-msg">{{ v.msg }}</div>
+								</div>
+							</div>
+						</el-col>
+					</el-row>
+				</el-card>
+			</el-col> -->
+
+			<!-- 日历板块 -->
+			<el-col :span="24" >
+				<el-card shadow="hover" class="mt15 personal-edit" header="日历" >
+					<el-calendar v-model="value" class="custom-calendar" />
+				</el-card>
+			</el-col>
+
+			<!-- 更新信息 -->
+			<el-col :span="24">
+				<el-card shadow="hover" class="mt15 personal-edit" header="更新信息">
+					<div class="personal-edit-title">基本信息</div>
+					<el-form :model="state.personalForm" size="default" label-width="40px" class="mt35 mb35">
+						<el-row :gutter="35">
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="昵称">
+									<el-input v-model="state.personalForm.name" placeholder="请输入昵称" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="邮箱">
+									<el-input v-model="state.personalForm.email" placeholder="请输入邮箱" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="签名">
+									<el-input v-model="state.personalForm.autograph" placeholder="请输入签名" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="职业">
+									<el-select v-model="state.personalForm.occupation" placeholder="请选择职业" clearable class="w100">
+										<el-option label="计算机 / 互联网 / 通信" value="1"></el-option>
+										<el-option label="生产 / 工艺 / 制造" value="2"></el-option>
+										<el-option label="医疗 / 护理 / 制药" value="3"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="手机">
+									<el-input v-model="state.personalForm.phone" placeholder="请输入手机" clearable></el-input>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
+								<el-form-item label="性别">
+									<el-select v-model="state.personalForm.sex" placeholder="请选择性别" clearable class="w100">
+										<el-option label="男" value="1"></el-option>
+										<el-option label="女" value="2"></el-option>
+									</el-select>
+								</el-form-item>
+							</el-col>
+							<el-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+								<el-form-item>
+									<el-button type="primary">
+										<el-icon>
+											<ele-Position />
+										</el-icon>
+										更新个人信息
+									</el-button>
+								</el-form-item>
+							</el-col>
+						</el-row>
+					</el-form>
+					<div class="personal-edit-title mb15">账号安全</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">账户密码</div>
+								<div class="personal-edit-safe-item-left-value">当前密码强度：强</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即修改</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">密保手机</div>
+								<div class="personal-edit-safe-item-left-value">已绑定手机：132****4108</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即修改</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">密保问题</div>
+								<div class="personal-edit-safe-item-left-value">已设置密保问题，账号安全大幅度提升</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即设置</el-button>
+							</div>
+						</div>
+					</div>
+					<div class="personal-edit-safe-box">
+						<div class="personal-edit-safe-item">
+							<div class="personal-edit-safe-item-left">
+								<div class="personal-edit-safe-item-left-label">绑定QQ</div>
+								<div class="personal-edit-safe-item-left-value">已绑定QQ：110****566</div>
+							</div>
+							<div class="personal-edit-safe-item-right">
+								<el-button text type="primary">立即设置</el-button>
+							</div>
+						</div>
+					</div>
+				</el-card>
+			</el-col>
+		</el-row>
+	</div>
+</template>
+
+<script setup lang="ts" name="personal">
+import { reactive, computed,ref } from 'vue';
+import { formatAxis } from '/@/utils/formatTime';
+import { newsInfoList, recommendList } from '../personal/mock';
+
+// 定义变量内容
+const state = reactive<PersonalState>({
+	newsInfoList,
+	recommendList,
+	personalForm: {
+		name: '',
+		email: '',
+		autograph: '',
+		occupation: '',
+		phone: '',
+		sex: '',
+	},
+});
+
+const catchphraseDate = ref([
+	"仓廪实则知礼节，衣食足则知荣辱",
+	"差若毫厘，谬以千里",
+	"不积跬步无以至千里，不积小流无以成江海。",
+  "纸上得来终觉浅，绝知此事要躬行。",
+	"良好的开端是成功的一半。"
+])
+
+const value = ref(new Date())
+
+// 当前时间提示语
+const currentTime = computed(() => {
+	return formatAxis(new Date());
+});
+// 图片基本路径
+
+</script>
+
+<style scoped lang="scss">
+@import '../../theme/mixins/index.scss';
+.personal {
+	.personal-user {
+		height: 130px;
+		display: flex;
+		align-items: center;
+		.personal-user-left {
+			width: 100px;
+			height: 130px;
+			border-radius: 3px;
+			:deep(.el-upload) {
+				height: 100%;
+			}
+			.personal-user-left-upload {
+				img {
+					width: 100%;
+					height: 100%;
+					border-radius: 3px;
+				}
+				&:hover {
+					img {
+						animation: logoAnimation 0.3s ease-in-out;
+					}
+				}
+			}
+		}
+		.personal-user-right {
+			flex: 1;
+			padding: 0 15px;
+			.personal-title {
+				font-size: 18px;
+				@include text-ellipsis(1);
+			}
+			.personal-item {
+				display: flex;
+				align-items: center;
+				font-size: 13px;
+				.personal-item-label {
+					color: var(--el-text-color-secondary);
+					@include text-ellipsis(1);
+				}
+				.personal-item-value {
+					@include text-ellipsis(1);
+				}
+			}
+		}
+	}
+	.personal-info {
+		.personal-info-more {
+			float: right;
+			color: var(--el-text-color-secondary);
+			font-size: 13px;
+			&:hover {
+				color: var(--el-color-primary);
+				cursor: pointer;
+			}
+		}
+		.personal-info-box {
+			height: 130px;
+			overflow: hidden;
+			.personal-info-ul {
+				list-style: none;
+				.personal-info-li {
+					font-size: 13px;
+					padding-bottom: 10px;
+					.personal-info-li-title {
+						display: inline-block;
+						@include text-ellipsis(1);
+						color: var(--el-text-color-secondary);
+						text-decoration: none;
+					}
+					& a:hover {
+						color: var(--el-color-primary);
+						cursor: pointer;
+					}
+				}
+			}
+		}
+	}
+	.personal-recommend-row {
+		.personal-recommend-col {
+			.personal-recommend {
+				position: relative;
+				height: 100px;
+				border-radius: 3px;
+				overflow: hidden;
+				cursor: pointer;
+				&:hover {
+					i {
+						right: 0px !important;
+						bottom: 0px !important;
+						transition: all ease 0.3s;
+					}
+				}
+				i {
+					position: absolute;
+					right: -10px;
+					bottom: -10px;
+					font-size: 70px;
+					transform: rotate(-30deg);
+					transition: all ease 0.3s;
+				}
+				.personal-recommend-auto {
+					padding: 15px;
+					position: absolute;
+					left: 0;
+					top: 5%;
+					color: var(--next-color-white);
+					.personal-recommend-msg {
+						font-size: 12px;
+						margin-top: 10px;
+					}
+				}
+			}
+		}
+	}
+	.personal-edit {
+		.personal-edit-title {
+			position: relative;
+			padding-left: 10px;
+			color: var(--el-text-color-regular);
+			&::after {
+				content: '';
+				width: 2px;
+				height: 10px;
+				position: absolute;
+				left: 0;
+				top: 50%;
+				transform: translateY(-50%);
+				background: var(--el-color-primary);
+			}
+		}
+		.personal-edit-safe-box {
+			border-bottom: 1px solid var(--el-border-color-light, #ebeef5);
+			padding: 15px 0;
+			.personal-edit-safe-item {
+				width: 100%;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				.personal-edit-safe-item-left {
+					flex: 1;
+					overflow: hidden;
+					.personal-edit-safe-item-left-label {
+						color: var(--el-text-color-regular);
+						margin-bottom: 5px;
+					}
+					.personal-edit-safe-item-left-value {
+						color: var(--el-text-color-secondary);
+						@include text-ellipsis(1);
+						margin-right: 15px;
+					}
+				}
+			}
+			&:last-of-type {
+				padding-bottom: 0;
+				border-bottom: none;
+			}
+		}
+	}
+}
+.custom-calendar {
+  /* 调整整体缩放比例 */
+  zoom: 0.85; /* 缩放比例，调整到合适大小 */
+}
+
+/* 调整特定部分样式 */
+.custom-calendar .el-calendar__header, 
+.custom-calendar .el-calendar-table {
+  font-size: 12px; /* 调整字体大小 */
+}
+
+</style>
\ No newline at end of file