662 lines
17 KiB
Vue
662 lines
17 KiB
Vue
<template>
|
||
<div class="subject">
|
||
<div class="subject_header">
|
||
<img
|
||
class="subject_header_img"
|
||
src="/subject/subject_header.png"
|
||
:style="{
|
||
width: '100%',
|
||
height: `${82 * bi}px`,
|
||
}"
|
||
/>
|
||
<div
|
||
class="subject_header_title"
|
||
:style="{
|
||
position: 'relative',
|
||
top: `${-85 * bi}px`,
|
||
}"
|
||
>
|
||
<span
|
||
:style="{
|
||
fontSize: `${42 * bi}px`,
|
||
height: `${82 * bi}px`,
|
||
}"
|
||
>
|
||
<img
|
||
src="/subject/subject_logo.png"
|
||
:style="{
|
||
position: 'relative',
|
||
top: `${4 * bi}px`,
|
||
width: `${78 * bi}px`,
|
||
height: `${70 * bi}px`,
|
||
marginRight: `${5 * bi}px`,
|
||
}"
|
||
/>
|
||
{{ t('sys.subject.header_title') }}
|
||
</span>
|
||
</div>
|
||
<div class="subject_header_adminAndLogout">
|
||
<img src="/subject/subject_header_admin.png" />
|
||
<span> {{ loginUser }} {{ t('sys.subject.header_admin') }}</span>
|
||
|
||
<img src="/subject/subject_header_logout.png" @click="handleLoginOut()" />
|
||
<span @click="handleLoginOut()">{{ t('sys.subject.header_logout') }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="subject_box">
|
||
<div
|
||
class="subject_box_btn"
|
||
ref="contentArea"
|
||
:style="{
|
||
position: 'relative',
|
||
top: `${getBoxBtnAttribute()[0]}px`,
|
||
left: `${getBoxBtnAttribute()[1] * bi}px`,
|
||
height: `${getBoxBtnAttribute()[2] * bi}px`,
|
||
width: `${getBoxBtnAttribute()[3] * bi}px`,
|
||
}"
|
||
>
|
||
<div
|
||
v-for="(item, index) in list"
|
||
:key="item.id"
|
||
:id="item.id"
|
||
class="subject_box_btn_div"
|
||
@click="getHome(item)"
|
||
:style="{
|
||
marginRight: `${getBoxBtnAttribute()[4] * bi}px`,
|
||
marginLeft: `${getBoxBtnAttribute()[4] * bi}px`,
|
||
marginBottom: `${20 * bi}px`,
|
||
height: `${325 * bi}px`,
|
||
width: `${225 * bi}px`,
|
||
'background-image': `url(${index % 2 == 0 ? '/subject/subject_btn_1.png' : '/subject/subject_btn_2.png'})`,
|
||
'background-size': `${100}%`,
|
||
'background-repeat': 'no-repeat',
|
||
}"
|
||
>
|
||
<img
|
||
class="subject_box_btn_div_url"
|
||
:src="getImageUrl(item.imgUrl)"
|
||
:style="{
|
||
left: `${21 * bi}px`,
|
||
width: `${191 * bi}px`,
|
||
height: `${191 * bi}px`,
|
||
}"
|
||
/>
|
||
<span
|
||
class="subject_box_btn_div_span"
|
||
v-html="renderedTitle(item.title)"
|
||
:style="{
|
||
fontSize: `${fotSize * bi}px`,
|
||
left: `${22 * bi}px`,
|
||
width: `${190 * bi}px`,
|
||
height: `${(fotSize * spanWrap + 7) * bi}px`,
|
||
}"
|
||
/>
|
||
<img
|
||
class="subject_box_btn_div_line"
|
||
src="/subject/subject_line.png"
|
||
:style="{
|
||
top: `${((fotSize / 2) * getWrap(item.title) - (fotSize / 2) * (spanWrap - 1) - 7) * bi}px`,
|
||
left: `${52 * bi}px`,
|
||
width: `${128 * bi}px`,
|
||
height: `${7 * bi}px`,
|
||
}"
|
||
/>
|
||
<div
|
||
class="circle arc1"
|
||
:style="{
|
||
position: 'absolute',
|
||
top: `${92 * bi}px`,
|
||
left: `${117 * bi}px`,
|
||
width: `${126 * bi}px`,
|
||
height: `${126 * bi}px`,
|
||
}"
|
||
/>
|
||
<div
|
||
class="circle arc2"
|
||
:style="{
|
||
position: 'absolute',
|
||
top: `${92 * bi}px`,
|
||
left: `${117 * bi}px`,
|
||
width: `${126 * bi}px`,
|
||
height: `${126 * bi}px`,
|
||
}"
|
||
/>
|
||
<div
|
||
class="circle arc3"
|
||
:style="{
|
||
position: 'absolute',
|
||
top: `${92 * bi}px`,
|
||
left: `${117 * bi}px`,
|
||
width: `${126 * bi}px`,
|
||
height: `${126 * bi}px`,
|
||
}"
|
||
/>
|
||
<div
|
||
class="circle arc4"
|
||
:style="{
|
||
position: 'absolute',
|
||
top: `${92 * bi}px`,
|
||
left: `${117 * bi}px`,
|
||
width: `${126 * bi}px`,
|
||
height: `${126 * bi}px`,
|
||
}"
|
||
/>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="subject_box_overflow">
|
||
<Icon
|
||
style="font-size: 31px"
|
||
class="subject_box_overflow_icon1"
|
||
icon="ant-design:up-outlined"
|
||
@click="scrollToElement('top')"
|
||
/>
|
||
<Icon
|
||
style="font-size: 31px"
|
||
class="subject_box_overflow_icon2"
|
||
icon="ant-design:down-outlined"
|
||
@click="scrollToElement('bottom')"
|
||
/>
|
||
</div> -->
|
||
</div>
|
||
<div class="subject_bottom">
|
||
<!-- <span>
|
||
{{ t('sys.subject.bottom_copyright') }}
|
||
|
|
||
{{ t('sys.subject.bottom_support') }}
|
||
|
|
||
{{ t('sys.subject.bottom_version') }}
|
||
</span> -->
|
||
<span>
|
||
{{
|
||
VITE_GLOB_APP_MANAGEMENT_UNIT
|
||
? VITE_GLOB_APP_MANAGEMENT_UNIT
|
||
: t('sys.subject.bottom_copyright')
|
||
}}
|
||
|
|
||
{{
|
||
VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||
? VITE_GLOB_APP_TECHINICAL_SUPPORT
|
||
: t('sys.subject.bottom_support')
|
||
}}
|
||
|
|
||
{{ VITE_GLOB_APP_VERSIONS ? VITE_GLOB_APP_VERSIONS : t('sys.subject.bottom_version') }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script setup lang="ts">
|
||
import { useUserStore } from '@/store/modules/user';
|
||
import { getSpecialData } from '@/api/demo/system';
|
||
import { onMounted, onUnmounted, ref, nextTick, computed } from 'vue';
|
||
import { message } from 'ant-design-vue';
|
||
import Icon from '@/components/Icon/Icon.vue';
|
||
import { getAppEnvConfig } from '@/utils/env';
|
||
import { useI18n } from '@/hooks/web/useI18n';
|
||
import { PageEnum } from '@/enums/pageEnum';
|
||
|
||
const {
|
||
VITE_GLOB_API_URL,
|
||
VITE_GLOB_APP_MANAGEMENT_UNIT,
|
||
VITE_GLOB_APP_TECHINICAL_SUPPORT,
|
||
VITE_GLOB_APP_VERSIONS,
|
||
} = getAppEnvConfig();
|
||
const VITE_GLOB_API_URL_VAR = ref<String>(VITE_GLOB_API_URL + '/');
|
||
const { t } = useI18n();
|
||
|
||
const loginUser: any = ref('');
|
||
const contentArea = ref<HTMLElement | null>(null);
|
||
const list: any = ref([]);
|
||
const userStore = useUserStore();
|
||
const spanWrap = ref(1);
|
||
|
||
async function getData() {
|
||
const res: any = await getSpecialData();
|
||
// 最大标题文字行数
|
||
res?.forEach((item) => {
|
||
if (Math.ceil(item.title.length / 6) > spanWrap.value) {
|
||
spanWrap.value = Math.ceil(item.title.length / 6);
|
||
}
|
||
});
|
||
list.value = res;
|
||
loginUser.value = localStorage.getItem('fireUserLoginName');
|
||
// cardRotationLoop();
|
||
}
|
||
// 旋转动画
|
||
async function cardRotationLoop() {
|
||
nextTick(() => {
|
||
list.value.forEach((item, index) => {
|
||
setTimeout(() => {
|
||
const element: any = document.getElementById(item.id);
|
||
element.classList.remove('cardRotationState');
|
||
element.classList.add('cardRotation');
|
||
setTimeout(() => {
|
||
element.classList.add('cardRotationState');
|
||
}, 5000);
|
||
if (index == list.value.length - 1) {
|
||
setTimeout(() => {
|
||
cardRotationLoop();
|
||
}, 8000);
|
||
}
|
||
}, index * 8000);
|
||
});
|
||
});
|
||
}
|
||
|
||
// 按键控制滚动条
|
||
const scrollToElement = async (type) => {
|
||
if (contentArea.value) {
|
||
if (type == 'top' && contentArea.value.scrollTop != 0) {
|
||
contentArea.value.scrollTop = contentArea.value.scrollTop - 344;
|
||
}
|
||
if (type == 'bottom' && contentArea.value.scrollTop != contentArea.value.scrollHeight) {
|
||
contentArea.value.scrollTop = contentArea.value.scrollTop + 344;
|
||
}
|
||
}
|
||
};
|
||
// 跳转
|
||
async function getHome(item) {
|
||
console.log(window.innerWidth);
|
||
if (!item.isDevelop) {
|
||
message.warn(item.title + '系统暂未开放！');
|
||
return;
|
||
}
|
||
if (item.isExternal) {
|
||
if (item.linkOrApi) {
|
||
window.location.href = item.linkOrApi;
|
||
} else {
|
||
message.warn('系统外部链接未配置！');
|
||
return;
|
||
}
|
||
} else {
|
||
if (!item.linkOrApi) {
|
||
item.linkOrApi = PageEnum.WELCOME_HOME;
|
||
}
|
||
userStore.setSubject(item.id, item.title, item.logoTitle, item.linkOrApi);
|
||
}
|
||
}
|
||
// 获取图片地址
|
||
function getImageUrl(imgUrl) {
|
||
if (imgUrl) {
|
||
return VITE_GLOB_API_URL_VAR.value + imgUrl;
|
||
} else {
|
||
return '/subject/subject_default.png';
|
||
}
|
||
}
|
||
// 标题换行
|
||
function renderedTitle(name) {
|
||
return `${name.replace(/\s/g, '<br />')}`;
|
||
}
|
||
// 标题的行数
|
||
function getWrap(name) {
|
||
return Math.ceil(name.length / 6);
|
||
}
|
||
// 退出系统
|
||
function handleLoginOut() {
|
||
userStore.confirmLoginOut();
|
||
}
|
||
// 分辨率
|
||
const viewportWidth = ref(window.innerWidth);
|
||
const viewportHeight = ref(window.innerHeight);
|
||
const referenceWidth = 1920;
|
||
const referenceHeight = 1080;
|
||
const fotSize = ref(28);
|
||
|
||
// 计算不同数量的选项卡的布局属性
|
||
function getBoxBtnAttribute() {
|
||
let box: any = [];
|
||
box[0] = 80;
|
||
box[1] = 85;
|
||
box[2] = 700;
|
||
box[3] = 1750;
|
||
box[4] = 12;
|
||
// if (list.value.length <= 7) {
|
||
// box[0] = 80;
|
||
// box[1] = 85;
|
||
// box[2] = 700;
|
||
// box[3] = 1750;
|
||
// box[4] = 12;
|
||
// }
|
||
// if (list.value.length == 8) {
|
||
// box[0] = 80;
|
||
// box[1] = 185;
|
||
// box[2] = 700;
|
||
// box[3] = 1550;
|
||
// box[4] = 50;
|
||
// }
|
||
// if (list.value.length == 9 || list.value.length == 10) {
|
||
// box[0] = 80;
|
||
// box[1] = 135;
|
||
// box[2] = 700;
|
||
// box[3] = 1650;
|
||
// box[4] = 50;
|
||
// }
|
||
// if (list.value.length == 11 || list.value.length == 12) {
|
||
// box[0] = 80;
|
||
// box[1] = 85;
|
||
// box[2] = 700;
|
||
// box[3] = 1750;
|
||
// box[4] = 30;
|
||
// }
|
||
// if (list.value.length == 13 || list.value.length == 14) {
|
||
// box[0] = 80;
|
||
// box[1] = 85;
|
||
// box[2] = 700;
|
||
// box[3] = 1750;
|
||
// box[4] = 12;
|
||
// }
|
||
return box;
|
||
}
|
||
|
||
const updateWindowSize = () => {
|
||
viewportWidth.value = window.innerWidth;
|
||
viewportHeight.value = window.innerHeight;
|
||
};
|
||
|
||
const bi = computed(() => {
|
||
return viewportWidth.value / referenceWidth;
|
||
});
|
||
|
||
onMounted(() => {
|
||
getData();
|
||
window.addEventListener('resize', updateWindowSize);
|
||
updateWindowSize(); // 初始化视口尺寸
|
||
});
|
||
|
||
onUnmounted(() => {
|
||
window.removeEventListener('resize', updateWindowSize);
|
||
});
|
||
</script>
|
||
<style lang="less" scoped>
|
||
.subject {
|
||
background-image: url('/subject/subject_bg.png');
|
||
background-repeat: no-repeat;
|
||
background-position: center;
|
||
background-size: cover;
|
||
background-attachment: fixed;
|
||
width: 100%;
|
||
height: 100%;
|
||
|
||
// 页面不能被选中
|
||
-webkit-user-select: none; /* Safari */
|
||
-moz-user-select: none; /* Firefox */
|
||
-ms-user-select: none; /* IE/Edge */
|
||
user-select: none;
|
||
|
||
&_header {
|
||
&_title {
|
||
span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
font-family: 068-SSZhengYaTi;
|
||
font-weight: 400;
|
||
color: #ffffff;
|
||
font-weight: 900 !important;
|
||
letter-spacing: 1.5px;
|
||
}
|
||
}
|
||
|
||
&_adminAndLogout {
|
||
position: absolute;
|
||
right: 87px;
|
||
top: 0px;
|
||
height: 40px;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
|
||
img {
|
||
cursor: pointer;
|
||
width: 31px;
|
||
height: 31px;
|
||
}
|
||
|
||
span {
|
||
cursor: pointer;
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
height: 14px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
font-size: 14px;
|
||
color: #006cff;
|
||
line-height: 28px;
|
||
}
|
||
}
|
||
}
|
||
|
||
&_box {
|
||
display: flex;
|
||
position: relative;
|
||
top: -82px;
|
||
|
||
&_btn {
|
||
align-items: center;
|
||
justify-content: center;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
display: flex;
|
||
overflow-x: hidden;
|
||
overflow-y: auto;
|
||
|
||
// 隐藏滚动条
|
||
-ms-overflow-style: none; /* IE 和 Edge */
|
||
scrollbar-width: none; /* Firefox */
|
||
::-webkit-scrollbar {
|
||
display: none; /* Chrome, Safari, Opera */
|
||
}
|
||
|
||
&_div {
|
||
// 弹性子元素（flex item）的弹性行为
|
||
flex: 0 0 auto;
|
||
transition: all 0.3s ease;
|
||
|
||
// 定义旋转
|
||
// 设置透视距离
|
||
perspective: 1000px;
|
||
// 添加过渡效果
|
||
transition: transform 1s;
|
||
// 定义旋转动画
|
||
// animation: cardRotation 5s linear infinite;
|
||
|
||
&:hover {
|
||
filter: brightness(150%);
|
||
cursor: pointer;
|
||
box-shadow: 20px 10px 10px rgba(0, 0, 0, 0.5);
|
||
|
||
// 定义旋转
|
||
// 暂停动画
|
||
animation-play-state: paused;
|
||
// 过渡效果
|
||
transition: transform 1s ease;
|
||
// 立即回到正面
|
||
transform: rotateY(0deg) !important;
|
||
}
|
||
|
||
&_bg {
|
||
height: 324px;
|
||
}
|
||
|
||
&_url {
|
||
position: relative;
|
||
top: 0px;
|
||
left: 11px;
|
||
width: 191px;
|
||
height: 191px;
|
||
}
|
||
|
||
&_span {
|
||
display: inline-flex;
|
||
align-items: center;
|
||
text-align: center;
|
||
justify-content: center;
|
||
position: relative;
|
||
// top: -300px;
|
||
left: 12px;
|
||
width: 190px;
|
||
// 字体样式
|
||
font-size: 28px;
|
||
|
||
font-family: 'Microsoft YaHei';
|
||
color: #ffffff;
|
||
background: linear-gradient(0deg, #6da7ff 0%, #e2ebff 100%);
|
||
-webkit-background-clip: text;
|
||
-webkit-text-fill-color: transparent;
|
||
background-clip: text;
|
||
color: transparent;
|
||
font-weight: 900 !important;
|
||
}
|
||
|
||
&_line {
|
||
position: relative;
|
||
left: 42px;
|
||
width: 128px;
|
||
height: 7px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// &_overflow {
|
||
// position: absolute;
|
||
// top: 220px;
|
||
// right: -110px;
|
||
// height: 300px;
|
||
// width: 110px;
|
||
|
||
// &_icon1 {
|
||
// color: #006cff;
|
||
// cursor: pointer;
|
||
// position: relative;
|
||
// top: 100px;
|
||
// right: 85px;
|
||
// }
|
||
|
||
// &_icon2 {
|
||
// color: #006cff;
|
||
// cursor: pointer;
|
||
// position: relative;
|
||
// top: 200px;
|
||
// right: 115px;
|
||
// }
|
||
// }
|
||
}
|
||
|
||
&_bottom {
|
||
span {
|
||
width: 902px;
|
||
height: 18px;
|
||
font-family: PingFang SC;
|
||
font-weight: 400;
|
||
font-size: 18px;
|
||
color: #5eb2ff;
|
||
}
|
||
position: absolute;
|
||
top: 95%;
|
||
left: calc(50% - 902px / 2);
|
||
}
|
||
}
|
||
|
||
// 四条旋转的弧线
|
||
.circle {
|
||
transform-origin: 50% 50%;
|
||
width: 126px;
|
||
height: 126px;
|
||
border-radius: 50%;
|
||
background-color: transparent;
|
||
border: 3px solid #276fff;
|
||
}
|
||
|
||
.arc1 {
|
||
position: relative;
|
||
// top: -142px;
|
||
left: 108px;
|
||
clip-path: inset(0 55% 55% 0);
|
||
animation: rotateArc1 8s linear infinite;
|
||
}
|
||
|
||
.arc2 {
|
||
position: relative;
|
||
top: -268px;
|
||
left: 108px;
|
||
clip-path: inset(55% 0 0 55%);
|
||
transform: rotate(90deg);
|
||
animation: rotateArc2 8s linear infinite;
|
||
}
|
||
|
||
.arc3 {
|
||
position: relative;
|
||
top: -394px;
|
||
left: 108px;
|
||
clip-path: inset(0 55% 55% 0);
|
||
transform: rotate(180deg);
|
||
animation: rotateArc3 8s linear infinite;
|
||
}
|
||
|
||
.arc4 {
|
||
position: relative;
|
||
top: -520px;
|
||
left: 108px;
|
||
clip-path: inset(55% 0 0 55%);
|
||
transform: rotate(270deg);
|
||
animation: rotateArc4 8s linear infinite;
|
||
}
|
||
|
||
@keyframes rotateArc1 {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(0deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(360deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rotateArc2 {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(90deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(450deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rotateArc3 {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(180deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(540deg);
|
||
}
|
||
}
|
||
|
||
@keyframes rotateArc4 {
|
||
0% {
|
||
transform: translate(-50%, -50%) rotate(270deg);
|
||
}
|
||
100% {
|
||
transform: translate(-50%, -50%) rotate(630deg);
|
||
}
|
||
}
|
||
// 开启旋转动画
|
||
.cardRotation {
|
||
animation: cardRotation 5s linear infinite;
|
||
}
|
||
// 关闭旋转动画
|
||
.cardRotationState {
|
||
animation-play-state: paused;
|
||
transition: transform 3s ease;
|
||
transform: rotateY(0deg) !important;
|
||
}
|
||
// 定义旋转动画
|
||
@keyframes cardRotation {
|
||
0% {
|
||
transform: rotateY(0deg);
|
||
}
|
||
100% {
|
||
transform: rotateY(-360deg);
|
||
}
|
||
}
|
||
</style>
|