fix: 忽略文件及bug修复。
This commit is contained in:
tianyongbao
22556
.gitignore
vendored
22556
.gitignore
vendored
File diff suppressed because it is too large
Load Diff
271
src/pages/home/homepage/index.vue
Normal file
271
src/pages/home/homepage/index.vue
Normal file
@@ -0,0 +1,271 @@
|
||||
<template>
|
||||
<view class="welcome-container">
|
||||
<!-- 背景装饰 -->
|
||||
<view class="bg-decoration">
|
||||
<view class="circle circle-1"></view>
|
||||
<view class="circle circle-2"></view>
|
||||
<view class="circle circle-3"></view>
|
||||
</view>
|
||||
|
||||
<!-- 主要内容区 -->
|
||||
<view class="content-wrapper">
|
||||
<!-- 欢迎区域 -->
|
||||
<view class="welcome-section" :class="{ 'fade-in': showContent }">
|
||||
<view class="avatar-wrapper">
|
||||
<view class="avatar-glow">
|
||||
<view class="avatar-inner">
|
||||
<uni-icons type="person-filled" size="80" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="greeting-content">
|
||||
<text class="greeting-text">{{ greetingTime }}</text>
|
||||
<text class="user-name">{{ userName }}</text>
|
||||
<text class="welcome-message">欢迎回来，开启美好的一天</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 底部日期 -->
|
||||
<view class="date-info" :class="{ 'fade-in': showContent }">
|
||||
<text class="date-text">{{ currentDate }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { ref, computed, onMounted } from 'vue';
|
||||
import useUserStore from '@/store/modules/user';
|
||||
|
||||
const userStore = useUserStore();
|
||||
const showContent = ref(false);
|
||||
|
||||
// 获取用户名
|
||||
const userName = computed(() => userStore.name || '用户');
|
||||
|
||||
// 获取问候语
|
||||
const greetingTime = computed(() => {
|
||||
const hour = new Date().getHours();
|
||||
if (hour < 6) return '夜深了';
|
||||
if (hour < 9) return '早上好';
|
||||
if (hour < 12) return '上午好';
|
||||
if (hour < 14) return '中午好';
|
||||
if (hour < 18) return '下午好';
|
||||
if (hour < 22) return '晚上好';
|
||||
return '夜深了';
|
||||
});
|
||||
|
||||
// 获取当前日期
|
||||
const currentDate = computed(() => {
|
||||
const now = new Date();
|
||||
const year = now.getFullYear();
|
||||
const month = String(now.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(now.getDate()).padStart(2, '0');
|
||||
const weekDays = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||||
const weekDay = weekDays[now.getDay()];
|
||||
return `${year}年${month}月${day}日 ${weekDay}`;
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 延迟显示内容以触发动画
|
||||
setTimeout(() => {
|
||||
showContent.value = true;
|
||||
}, 100);
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.welcome-container {
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(180deg, #667eea 0%, #764ba2 100%);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
// 背景装饰
|
||||
.bg-decoration {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
pointer-events: none;
|
||||
z-index: 0;
|
||||
|
||||
.circle {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.1);
|
||||
animation: float 20s infinite ease-in-out;
|
||||
}
|
||||
|
||||
.circle-1 {
|
||||
width: 400rpx;
|
||||
height: 400rpx;
|
||||
top: -200rpx;
|
||||
right: -200rpx;
|
||||
animation-delay: 0s;
|
||||
}
|
||||
|
||||
.circle-2 {
|
||||
width: 300rpx;
|
||||
height: 300rpx;
|
||||
bottom: -150rpx;
|
||||
left: -150rpx;
|
||||
animation-delay: 5s;
|
||||
}
|
||||
|
||||
.circle-3 {
|
||||
width: 250rpx;
|
||||
height: 250rpx;
|
||||
top: 50%;
|
||||
right: -125rpx;
|
||||
animation-delay: 10s;
|
||||
}
|
||||
}
|
||||
|
||||
.content-wrapper {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: 100%;
|
||||
padding: 0 60rpx;
|
||||
}
|
||||
|
||||
// 欢迎区域
|
||||
.welcome-section {
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
&.fade-in {
|
||||
animation: fadeInUp 1s ease forwards;
|
||||
}
|
||||
|
||||
.avatar-wrapper {
|
||||
margin-bottom: 60rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
|
||||
.avatar-glow {
|
||||
position: relative;
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
|
||||
.avatar-inner {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border-radius: 50%;
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
backdrop-filter: blur(20rpx);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.3);
|
||||
border: 6rpx solid rgba(255, 255, 255, 0.2);
|
||||
animation: pulse 3s infinite ease-in-out;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.greeting-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 20rpx;
|
||||
|
||||
.greeting-text {
|
||||
font-size: 36rpx;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
font-weight: 300;
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.user-name {
|
||||
font-size: 72rpx;
|
||||
color: #ffffff;
|
||||
font-weight: 700;
|
||||
text-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.3);
|
||||
letter-spacing: 4rpx;
|
||||
}
|
||||
|
||||
.welcome-message {
|
||||
font-size: 28rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 300;
|
||||
margin-top: 10rpx;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 底部日期
|
||||
.date-info {
|
||||
margin-top: 80rpx;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
|
||||
&.fade-in {
|
||||
animation: fadeIn 1.5s ease forwards 0.5s;
|
||||
}
|
||||
|
||||
.date-text {
|
||||
font-size: 26rpx;
|
||||
color: rgba(255, 255, 255, 0.8);
|
||||
font-weight: 300;
|
||||
letter-spacing: 2rpx;
|
||||
}
|
||||
}
|
||||
|
||||
// 动画定义
|
||||
@keyframes float {
|
||||
0%, 100% {
|
||||
transform: translate(0, 0) rotate(0deg);
|
||||
}
|
||||
33% {
|
||||
transform: translate(30rpx, -30rpx) rotate(120deg);
|
||||
}
|
||||
66% {
|
||||
transform: translate(-20rpx, 20rpx) rotate(240deg);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes pulse {
|
||||
0%, 100% {
|
||||
transform: scale(1);
|
||||
box-shadow: 0 30rpx 80rpx rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
50% {
|
||||
transform: scale(1.05);
|
||||
box-shadow: 0 40rpx 100rpx rgba(0, 0, 0, 0.4);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeInUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(60rpx);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
from {
|
||||
opacity: 0;
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
128
src/pages/home/index.vue
Normal file
128
src/pages/home/index.vue
Normal file
@@ -0,0 +1,128 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<!-- 系统管理 -->
|
||||
<view class="section-header">
|
||||
<text class="section-title">系统管理</text>
|
||||
</view>
|
||||
<view class="grid-body">
|
||||
<view class="grid-wrapper">
|
||||
<view
|
||||
v-for="(item, index) in systemGridList"
|
||||
:key="index"
|
||||
@click="navigateTo(item.path)"
|
||||
class="grid-item">
|
||||
<view class="item-icon" :style="{ background: item.color }">
|
||||
<uni-icons :type="item.icon" size="22" color="#ffffff"></uni-icons>
|
||||
</view>
|
||||
<text class="item-text">{{ item.text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const systemGridList = ref([
|
||||
{ path: '/pages_mine/pages/system/user/list', text: '用户管理', icon: 'person', color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)' },
|
||||
{ path: '/pages_mine/pages/system/role/list', text: '角色管理', icon: 'staff', color: 'linear-gradient(135deg, #fa709a 0%, #fee140 100%)' },
|
||||
{ path: '/pages_mine/pages/system/menu/list', text: '菜单管理', icon: 'list', color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)' },
|
||||
{ path: '/pages_mine/pages/system/dept/list', text: '部门管理', icon: 'chat', color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)' },
|
||||
{ path: '/pages_mine/pages/system/post/list', text: '岗位管理', icon: 'contact', color: 'linear-gradient(135deg, #fd79a8 0%, #e84393 100%)' },
|
||||
{ path: '/pages_mine/pages/system/dict/list', text: '字典管理', icon: 'bars', color: 'linear-gradient(135deg, #f6d365 0%, #fda085 100%)' },
|
||||
{ path: '/pages_mine/pages/system/config/list', text: '参数配置', icon: 'gear', color: 'linear-gradient(135deg, #5f72bd 0%, #9b23ea 100%)' },
|
||||
{ path: '/pages_mine/pages/system/notice/list', text: '通知公告', icon: 'notification', color: 'linear-gradient(135deg, #0be881 0%, #0fbcf9 100%)' },
|
||||
{ path: '/pages_mine/pages/system/operlog/list', text: '操作日志', icon: 'compose', color: 'linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%)' },
|
||||
{ path: '/pages_mine/pages/system/logininfor/list', text: '登录日志', icon: 'eye', color: 'linear-gradient(135deg, #00d2ff 0%, #3a7bd5 100%)' }
|
||||
])
|
||||
|
||||
function navigateTo(path) {
|
||||
uni.navigateTo({
|
||||
url: path
|
||||
});
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
min-height: 100vh;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
/* #ifndef APP-NVUE */
|
||||
/* #endif */
|
||||
|
||||
.content {
|
||||
padding: 12rpx 0;
|
||||
}
|
||||
|
||||
.section-header {
|
||||
padding: 12rpx 24rpx 8rpx;
|
||||
}
|
||||
|
||||
.section-title {
|
||||
font-size: 28rpx;
|
||||
font-weight: 700;
|
||||
color: #333;
|
||||
position: relative;
|
||||
padding-left: 16rpx;
|
||||
}
|
||||
|
||||
.section-title::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
width: 6rpx;
|
||||
height: 28rpx;
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 3rpx;
|
||||
}
|
||||
|
||||
.grid-body {
|
||||
padding: 0 16rpx;
|
||||
}
|
||||
|
||||
.grid-wrapper {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.grid-item {
|
||||
width: 25%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 16rpx 8rpx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.item-icon {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 20rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin-bottom: 12rpx;
|
||||
box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.grid-item:active .item-icon {
|
||||
transform: scale(0.95);
|
||||
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
.item-text {
|
||||
text-align: center;
|
||||
font-size: 22rpx;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
line-height: 1.3;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user