319 lines
8.5 KiB
Vue
319 lines
8.5 KiB
Vue
<template>
|
||
<!-- <div class="w100" style="height: calc(100vh - 85px);overflow: auto;">-->
|
||
<!-- <div class="pt50">-->
|
||
<!-- <div class="textAlignCenter" style="font-size: 3rem;color: #BFBF00;font-weight: 600;">彤然科技-智融云管理平台</div>-->
|
||
<!-- <div class="textAlignCenter" style="font-size: 1.8rem;">欢迎您{{user.nickName}}：现在是{{newDateTime}}</div>-->
|
||
<!-- <div class="w100 m0Auto">-->
|
||
<!-- <div style="width: 85%;margin: 10px auto;">-->
|
||
<!-- <div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="disInlineBlock" style="width: 20%;min-width: 200px;height: 70px;padding: 10px;cursor: pointer;">-->
|
||
<!-- <div class="w100 h100" style="display: flex; justify-content: center; align-items: center;background: #02a7f099; color: #fff;border-radius: 10px;">{{menuItem.name}}</div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="welcome-container">
|
||
<div class="header-section textAlignCenter">
|
||
<div class="main-title" :style="{ backgroundImage: `url(${require('@/assets/images/headerBg.png')})`,backgroundSize: 'cover',backgroundRepeat: 'no-repeat',backgroundPosition: 'center', }">
|
||
<div class="titleMargBtom">智融云管理平台</div>
|
||
</div>
|
||
<div class="welcome-text">
|
||
<div class="animated-text class-method" :class="{ 'slide-in': showContent }" style="--animation-duration: 1200ms">
|
||
欢迎您{{user.nickName}}：现在是{{newDateTime}}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="w100 contentPad">
|
||
<div class="menu-container">
|
||
<div v-for="menuItem of menuList" @click="menuRouter(menuItem)" class="menu-item" @mouseover="tranformType(menuItem)" :class="activeId === menuItem.id ? 'activeTranFormRotate' : '' "
|
||
:style="{backgroundImage: `url(${require('@/assets/images/itemBgc.png')})`,backgroundSize: '100% 100%',backgroundRepeat: 'no-repeat',backgroundPosition: 'center'}">
|
||
<div class="menu-item-content" :class="activeId === menuItem.id ? 'textTranFormRotate' : ''">{{menuItem.pageName}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import {clicMenuCount, getMenuTopEight} from "@/api/menu";
|
||
export default {
|
||
name: "welcome",
|
||
data() {
|
||
return {
|
||
showContent: false,
|
||
newDateTime: '',
|
||
getWeekday: {0: '星期日', 1: '星期一', 2: '星期二', 3: '星期三',4: '星期四', 5: '星期五', 6: '星期六'},
|
||
user: {},
|
||
menuList: [],
|
||
activeId: '',
|
||
}
|
||
},
|
||
created() {
|
||
this.user = this.$store.state.user;
|
||
const year = new Date().getFullYear() + '年';
|
||
const month = String(new Date().getMonth() + 1).padStart(2, '0') + '月'; // 0=1月，11=12月
|
||
const day = String(new Date().getDate()).padStart(2, '0') + '日'; // 当前日（如8）
|
||
const hours = String(new Date().getHours()).padStart(2, '0') + ':'; // 当前日（如8）
|
||
const minutes = String(new Date().getMinutes()).padStart(2, '0') + ':'; // 当前日（如8）
|
||
const seconds = String(new Date().getSeconds()).padStart(2, '0'); // 当前日（如8）
|
||
const week = this.getWeekday[new Date().getDay()]; // 当前日（如8）
|
||
this.newDateTime = year + month + day + ' ' + hours + minutes + seconds + ' ' + week;
|
||
|
||
let menu = this.$store.state.permission.sidebarRouters;
|
||
this.menuHandle(menu);
|
||
},
|
||
mounted() {
|
||
// 页面加载后自动触发动画
|
||
setTimeout(() => {
|
||
this.showContent = true;
|
||
}, 300);
|
||
},
|
||
methods: {
|
||
// 处理菜单
|
||
menuHandle(menu) {
|
||
// menu.forEach(item => {
|
||
// if (!item.hidden) {
|
||
// item.children.forEach(val => {
|
||
// if (!val.hidden) {
|
||
// if (val.children) {
|
||
// val.path = item.path + '/' + val.path;
|
||
// this.menuHandle([val]);
|
||
// } else {
|
||
// this.menuList.push({name: val.meta.title, link: item.path && item.path === '/' ? item.path + val.path : item.path + '/' + val.path});
|
||
// }
|
||
// }
|
||
// });
|
||
// }
|
||
// });
|
||
getMenuTopEight().then(res => {
|
||
if (res && res.data) {
|
||
this.menuList = res.data
|
||
}
|
||
});
|
||
},
|
||
// 菜单跳转
|
||
menuRouter(menuLink) {
|
||
let params = {pageRoute: menuLink.pageRoute, pageName: menuLink.pageName};
|
||
clicMenuCount(params).then(res => {});
|
||
this.$router.push({
|
||
path: menuLink.pageRoute
|
||
});
|
||
},
|
||
tranformType(val) {
|
||
this.activeId = val.id;
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 主容器 */
|
||
.welcome-container {
|
||
height: 100vh;
|
||
/*overflow: auto;*/
|
||
display: flex;
|
||
flex-direction: column;
|
||
/*padding: 20px;*/
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
/* 标题区域 */
|
||
.header-section {
|
||
margin-bottom: 6%;
|
||
}
|
||
|
||
.titleMargBtom {
|
||
margin-bottom: 13px;
|
||
}
|
||
|
||
.main-title {
|
||
height: 62px;
|
||
font-size: 1.3rem;
|
||
color: #fff;
|
||
font-weight: 600;
|
||
margin-bottom: 15px;
|
||
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
}
|
||
|
||
.welcome-text {
|
||
font-size: 1.2rem;
|
||
}
|
||
.contentPad {
|
||
padding: 0 20%;
|
||
}
|
||
/* 菜单区域 */
|
||
.menu-container {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: flex-start; /* 改为左对齐 */
|
||
gap: 40px 20px;
|
||
/*max-width: 1200px;*/
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.menu-item {
|
||
/*flex: 1 1 200px;*/
|
||
flex: 0 0 calc(25% - 16px); /* 固定宽度，确保每行显示5个 */
|
||
/*min-width: 150px;*/
|
||
height: 100px;
|
||
cursor: pointer;
|
||
transition: none;
|
||
}
|
||
|
||
.menu-item-content {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
/*background: linear-gradient(135deg, #02a7f099 0%, #0280c099 100%);*/
|
||
color: #000;
|
||
border-radius: 10px;
|
||
/*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
|
||
padding: 10px;
|
||
text-align: center;
|
||
font-size: 1.1rem;
|
||
font-weight: 500;
|
||
transition: none;
|
||
}
|
||
|
||
.menu-item:hover .menu-item-content {
|
||
/*transform: translateY(-5px);*/
|
||
/*box-shadow: 0 8px 15px rgba(0, 0, 0, 0.2);*/
|
||
/*background: linear-gradient(135deg, #0280c099 0%, #026aa099 100%);*/
|
||
}
|
||
|
||
/* 响应式设计 - 媒体查询 */
|
||
@media (max-width: 1200px) {
|
||
.main-title {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.welcome-text {
|
||
font-size: 1.3rem;
|
||
}
|
||
|
||
.menu-item {
|
||
flex: 0 0 calc(25% - 15px); /* 中屏每行4个 */
|
||
}
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.welcome-container {
|
||
/*padding: 15px;*/
|
||
height: auto;
|
||
min-height: 100vh;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.contentPad {
|
||
padding: 0 10%;
|
||
}
|
||
|
||
.welcome-text {
|
||
font-size: 1.1rem;
|
||
}
|
||
|
||
.menu-container {
|
||
gap: 35px 15px;
|
||
}
|
||
|
||
.menu-item {
|
||
flex: 0 0 calc(25% - 12px); /* 平板每行4个 */
|
||
height: 60px;
|
||
}
|
||
|
||
.menu-item-content {
|
||
font-size: 1rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 480px) {
|
||
.welcome-container {
|
||
padding: 10px;
|
||
}
|
||
|
||
.contentPad {
|
||
padding: 0 10%;
|
||
}
|
||
|
||
.main-title {
|
||
font-size: 1.2rem;
|
||
}
|
||
|
||
.welcome-text {
|
||
font-size: 1rem;
|
||
}
|
||
.animated-text {
|
||
width: 100%!important;
|
||
}
|
||
|
||
.menu-container {
|
||
gap: 20px 10px;
|
||
justify-content: center; /* 小屏幕居中对齐 */
|
||
}
|
||
|
||
.menu-item {
|
||
flex: 0 0 calc(50% - 10px); /* 手机每行2个 */
|
||
max-width: 100%;
|
||
height: 50px;
|
||
}
|
||
|
||
.menu-item-content {
|
||
font-size: 0.9rem;
|
||
}
|
||
}
|
||
|
||
@media (max-width: 360px) {
|
||
.menu-item {
|
||
flex: 0 0 100%; /* 超小屏幕每行1个 */
|
||
}
|
||
}
|
||
|
||
/* 大屏幕优化 */
|
||
@media (min-width: 1600px) {
|
||
.welcome-container {
|
||
/*max-width: 1400px;*/
|
||
margin: 0 auto;
|
||
}
|
||
.main-title {
|
||
height: 75px;
|
||
font-size: 1.5rem;
|
||
}
|
||
.titleMargBtom {
|
||
margin-bottom: 16px;
|
||
}
|
||
}
|
||
|
||
/* 动画*/
|
||
.animated-text {
|
||
width: 550px;
|
||
position: relative;
|
||
}
|
||
/* 方法2: CSS类绑定样式 */
|
||
.class-method {
|
||
transform: translateX(-100%);
|
||
opacity: 0;
|
||
transition: all var(--animation-duration) linear;
|
||
}
|
||
.class-method.slide-in {
|
||
transform: translateX(0);
|
||
opacity: 1;
|
||
}
|
||
.activeTranFormRotate:hover {
|
||
transform: rotateY(180deg);
|
||
transition: transform 2s ease-in-out;
|
||
}
|
||
.textTranFormRotate:hover {
|
||
transform: rotateY(-180deg);
|
||
transition: transform 2s ease-in-out;
|
||
}
|
||
</style>
|