|
@@ -0,0 +1,95 @@
|
|
|
+<template>
|
|
|
+ <div class="portal">
|
|
|
+ <template v-for="item in portalLinkOptions">
|
|
|
+ <div class="portal-item">
|
|
|
+ <div class="portal-item-title" v-html="item.label"/>
|
|
|
+ <div class="portal-item-icon">
|
|
|
+ <img :src="icons[$TOOL.dictTypeData('portal_link_icon', item.label)]"/>
|
|
|
+ </div>
|
|
|
+ <div class="portal-item-to __hover" @click="toLink(item)">进入系统</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup>
|
|
|
+ import tool from "@/utils/tool";
|
|
|
+
|
|
|
+ const { proxy } = getCurrentInstance()
|
|
|
+ import icon1 from './icon-1.png'
|
|
|
+ import icon2 from './icon-2.png'
|
|
|
+ import icon3 from './icon-3.png'
|
|
|
+ const icons = {
|
|
|
+ 1: icon1,
|
|
|
+ 2: icon2,
|
|
|
+ 3: icon3,
|
|
|
+ }
|
|
|
+ const portalLinkOptions = tool.dictList('portal_link')
|
|
|
+ const toLink = (item) => {
|
|
|
+ window.open(item.value)
|
|
|
+ }
|
|
|
+</script>
|
|
|
+<style lang="less" scoped>
|
|
|
+.portal {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-image: url("./bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ gap: 40px;
|
|
|
+ .portal-item {
|
|
|
+ margin-top: 80px;
|
|
|
+ width: 422px;
|
|
|
+ height: 618px;
|
|
|
+ background-image: url("./item-bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ .portal-item-title {
|
|
|
+ font-family: YouSheBiaoTiHei;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 44px;
|
|
|
+ color: #D1E1FF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ text-align: center;
|
|
|
+ letter-spacing: 10px;
|
|
|
+ line-height: 1.5;
|
|
|
+ position: absolute;
|
|
|
+ top: 34px;
|
|
|
+ }
|
|
|
+ .portal-item-to {
|
|
|
+ width: 397px;
|
|
|
+ height: 66px;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 40px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-family: Source Han Sans CN;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 32px;
|
|
|
+ background: linear-gradient(180deg, #FFFFFF 0%, #aedffa 100%);
|
|
|
+ -webkit-background-clip: text;
|
|
|
+ -webkit-text-fill-color: transparent;
|
|
|
+ letter-spacing: 6px;
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ background-image: url("./to-bg.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ background-repeat: no-repeat;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ position: absolute;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|