generated from Leo_Ding/web-template
465 lines
19 KiB
Vue
465 lines
19 KiB
Vue
<template>
|
|
<div class="layout-container">
|
|
<StarBackground />
|
|
<div class="top">
|
|
<div>
|
|
<span class="corner corner-top"></span>
|
|
<span class="corner corner-left"></span>
|
|
<span class="corner corner-bottom"></span>
|
|
<span class="corner corner-right"></span>
|
|
<span class="corner-main">
|
|
<i aria-label="图标: logout" class="anticon anticon-logout"
|
|
style="font-size: 18px; vertical-align: middle; padding-right: 5px;">
|
|
<svg viewBox="64 64 896 896" data-icon="logout" width="1em" height="1em" fill="currentColor"
|
|
aria-hidden="true" focusable="false" class="">
|
|
<path
|
|
d="M868 732h-70.3c-4.8 0-9.3 2.1-12.3 5.8-7 8.5-14.5 16.7-22.4 24.5a353.84 353.84 0 0 1-112.7 75.9A352.8 352.8 0 0 1 512.4 866c-47.9 0-94.3-9.4-137.9-27.8a353.84 353.84 0 0 1-112.7-75.9 353.28 353.28 0 0 1-76-112.5C167.3 606.2 158 559.9 158 512s9.4-94.2 27.8-137.8c17.8-42.1 43.4-80 76-112.5s70.5-58.1 112.7-75.9c43.6-18.4 90-27.8 137.9-27.8 47.9 0 94.3 9.3 137.9 27.8 42.2 17.8 80.1 43.4 112.7 75.9 7.9 7.9 15.3 16.1 22.4 24.5 3 3.7 7.6 5.8 12.3 5.8H868c6.3 0 10.2-7 6.7-12.3C798 160.5 663.8 81.6 511.3 82 271.7 82.6 79.6 277.1 82 516.4 84.4 751.9 276.2 942 512.4 942c152.1 0 285.7-78.8 362.3-197.7 3.4-5.3-.4-12.3-6.7-12.3zm88.9-226.3L815 393.7c-5.3-4.2-13-.4-13 6.3v76H488c-4.4 0-8 3.6-8 8v56c0 4.4 3.6 8 8 8h314v76c0 6.7 7.8 10.5 13 6.3l141.9-112a8 8 0 0 0 0-12.6z">
|
|
</path>
|
|
</svg></i> 退出登录 </span>
|
|
</div>
|
|
</div>
|
|
<div data-v-72f3b8ba="" class="container">
|
|
<div data-v-72f3b8ba="" class="user-layout-content">
|
|
<div data-v-72f3b8ba="" class="qt">
|
|
<div data-v-343b0500="" data-v-72f3b8ba="" class="bg">
|
|
<div class="content_bg" style="filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0px 10px);">
|
|
<div class="paltform_title">
|
|
<span>
|
|
<!-- <i class="corner corner-top"></i>
|
|
<i class="corner corner-left"></i>
|
|
<i class="corner corner-bottom"></i>
|
|
<i class="corner corner-right"></i> -->
|
|
<span>南通市通州区互联网+智慧养老居家上门服务项目</span>
|
|
</span>
|
|
</div>
|
|
<div class="paltform_list" v-if="currentPlatForm !== 'yunying'">
|
|
<div value="CALL_CENTER" class="paltform_icon" @click="handleSelect('hujiao')">
|
|
<div class="paltform_icon_1">
|
|
<img :src="tel" alt="" srcset="" width="76" height="76" class="img">
|
|
</div>
|
|
<p>呼叫中心</p>
|
|
</div>
|
|
<div value="SUPERVISION" class="paltform_icon" @click="handleSelect('jianguan')">
|
|
<div class="paltform_icon_1">
|
|
<img :src="jianguan" alt="" srcset="" width="70" height="70">
|
|
</div>
|
|
<p>监管平台</p>
|
|
</div>
|
|
<div value="HOME_BED" class="paltform_icon" @click="handleSelect('yunying')">
|
|
<div class="paltform_icon_1">
|
|
<img :src="yunying" alt="" srcset="" width="76" height="76">
|
|
</div>
|
|
<p>运营平台</p>
|
|
</div>
|
|
</div>
|
|
<div class="orgManage" v-else>
|
|
<a-card style="width: 600px;margin:0 auto;height: 300px;">
|
|
<div style="margin: 10px 0;color:#1677ff;cursor: pointer;">
|
|
<span @click="currentPlatForm = 'jianguan'">{{ '< 返回' }}</span>
|
|
</div>
|
|
<h3>请选择您的管理组织</h3>
|
|
<a-select ref="select" v-model:value="currentOrg" style="width: 100%"
|
|
@change="handleChange" :defaultOpen="true">
|
|
<a-select-option v-for="value in stationList" :value="value.id">{{
|
|
value.name
|
|
}}</a-select-option>
|
|
</a-select>
|
|
</a-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script setup>
|
|
import { Modal, notification } from 'ant-design-vue'
|
|
import { computed, onMounted, ref, onBeforeMount } from 'vue'
|
|
import StarBackground from '@/components/StartBackground/index.vue'
|
|
import tel from '@/assets/imgs/tel2.png'
|
|
import jianguan from '@/assets/imgs/jianguan3.png'
|
|
import yunying from '@/assets/imgs/yunying.png'
|
|
import { useAppStore, useRouterStore, useUserStore } from '@/store'
|
|
import { template } from 'lodash-es'
|
|
import { useRoute, useRouter } from 'vue-router'
|
|
import apis from '@/apis'
|
|
import storage from '@/utils/storage'
|
|
defineOptions({
|
|
name: 'PlatForm',
|
|
})
|
|
const appStore = useAppStore()
|
|
const routerStore = useRouterStore()
|
|
const router = useRouter()
|
|
const stationList = ref([])
|
|
const currentPlatForm = ref('jianguan')
|
|
const currentOrg = ref()
|
|
// 在组件挂载前设置 body 类名
|
|
onBeforeMount(() => {
|
|
document.body.className = 'body-bg'
|
|
})
|
|
async function handleSelect(type) {
|
|
if (type === 'yunying') {
|
|
currentPlatForm.value = 'yunying'
|
|
try {
|
|
const { data, success } = await apis.serviceMenu.getServiceSiteList({ pageSize: 100, current: 1 })
|
|
if (success) {
|
|
stationList.value = data.map(item => ({ id: item.id, name: item.name }))
|
|
}
|
|
} catch (error) {
|
|
|
|
}
|
|
} else {
|
|
storage.local.setItem('platform', type)
|
|
await appStore.init({ platform: type })
|
|
goIndex()
|
|
}
|
|
|
|
}
|
|
async function goIndex() {
|
|
console.log('goIndex')
|
|
const indexRoute = getFirstValidRoute()
|
|
console.log(indexRoute)
|
|
if (!indexRoute) return
|
|
router.push(indexRoute)
|
|
|
|
}
|
|
/**
|
|
* 获取首页路由
|
|
* @return {*}
|
|
*/
|
|
function getFirstValidRoute() {
|
|
const indexRoute = routerStore.indexRoute
|
|
if (!indexRoute) {
|
|
Modal.warning({
|
|
title: '系统提示',
|
|
content: '没有任何权限，请联系系统管理员',
|
|
onOk: () => {
|
|
window.location.reload()
|
|
},
|
|
})
|
|
}
|
|
return indexRoute
|
|
}
|
|
async function handleChange(e) {
|
|
storage.local.setItem('platform', 'yunying')
|
|
storage.local.setItem('stationId', e)
|
|
|
|
await appStore.init({ platform: 'yunying' })
|
|
goIndex()
|
|
|
|
}
|
|
</script>
|
|
<style lang="less" scoped>
|
|
.body-bg {
|
|
background-attachment: fixed;
|
|
overflow: hidden;
|
|
}
|
|
|
|
// .login-container {
|
|
// height: 100vh; // 推荐使用 100vh 而不是 100%，确保占满视口
|
|
// width: 100vw;
|
|
// overflow: hidden;
|
|
// background-color: #050608;
|
|
// position: relative;
|
|
// }
|
|
.layout-container {
|
|
width: 100%;
|
|
height: 100vh;
|
|
overflow: hidden;
|
|
background-color: #050608;
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
// background: url('@/assets/imgs/plat-bg.png') no-repeat center;
|
|
background-size: cover;
|
|
|
|
.top {
|
|
width: 100%;
|
|
height: 80px;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#0a063a), to(hsla(0, 0%, 100%, 0)));
|
|
background: linear-gradient(180deg, #0a063a, hsla(0, 0%, 100%, 0));
|
|
position: fixed;
|
|
top: 0;
|
|
overflow: hidden;
|
|
z-index: 999;
|
|
|
|
&>div {
|
|
width: 120px;
|
|
height: 36px;
|
|
text-align: center;
|
|
line-height: 36px;
|
|
position: absolute;
|
|
top: 20px;
|
|
right: 50px;
|
|
cursor: pointer;
|
|
color: #fff;
|
|
z-index: 0;
|
|
|
|
.corner {
|
|
position: absolute;
|
|
width: 10px;
|
|
height: 10px;
|
|
border: 3px solid #58c7ee;
|
|
-webkit-transition: all .4s ease-out;
|
|
transition: all .4s ease-out;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.corner-top {
|
|
top: 0;
|
|
left: 0;
|
|
border: 3px solid #0542a6;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.corner-left {
|
|
bottom: 0;
|
|
left: 0;
|
|
border-top: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.corner-bottom {
|
|
bottom: 0;
|
|
right: 0;
|
|
border: 3px solid #0542a6;
|
|
border-top: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.corner-right {
|
|
top: 0;
|
|
right: 0;
|
|
border-bottom: none;
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.container {
|
|
width: 80%;
|
|
margin: 0 auto;
|
|
min-height: 100%;
|
|
background-size: 100%;
|
|
position: relative;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
|
|
.user-layout-content {
|
|
-webkit-box-flex: 1;
|
|
-ms-flex: 1;
|
|
flex: 1;
|
|
padding: 0 0 24px;
|
|
|
|
.qt {
|
|
height: 100%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
padding-top: 8%;
|
|
|
|
.bg {
|
|
width: 100%;
|
|
|
|
.content_bg {
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
|
|
.paltform_title {
|
|
min-height: 87px;
|
|
text-align: center;
|
|
line-height: 87px;
|
|
|
|
&>span {
|
|
// font-family: YouSheBiaoTiHei;
|
|
font-weight: bold;
|
|
font-size: 48px;
|
|
color: #fff;
|
|
text-shadow: 0 2px 4px #215dcb;
|
|
position: relative;
|
|
display: inline-block;
|
|
min-width: 100px;
|
|
min-height: 80px;
|
|
font-style: italic;
|
|
|
|
.corner {
|
|
position: absolute;
|
|
width: 45px;
|
|
height: 45px;
|
|
border: 5px solid #58c7ee;
|
|
-webkit-transition: all .4s ease-out;
|
|
transition: all .4s ease-out;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.corner-top {
|
|
top: -10px;
|
|
left: -30px;
|
|
border-bottom: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.corner-left {
|
|
bottom: -10px;
|
|
left: -30px;
|
|
border-top: none;
|
|
border-right: none;
|
|
}
|
|
|
|
.corner-bottom {
|
|
bottom: -10px;
|
|
right: -30px;
|
|
border: 5px solid #0542a6;
|
|
border-top: none;
|
|
border-left: none;
|
|
}
|
|
|
|
.corner-right {
|
|
top: -10px;
|
|
right: -30px;
|
|
border: 5px solid #0542a6;
|
|
border-bottom: none;
|
|
border-left: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
.paltform_list {
|
|
webkit-box-align: center;
|
|
align-items: center;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
justify-content: center;
|
|
margin-top: 30px;
|
|
|
|
.paltform_icon {
|
|
display: flex;
|
|
align-items: center;
|
|
-webkit-box-flex: 0;
|
|
-ms-flex: 0 0 16%;
|
|
flex: 0 0 16%;
|
|
height: 200px;
|
|
background: rgba(255, 255, 255, .2);
|
|
border-radius: 8px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
-ms-flex-pack: center;
|
|
-ms-flex-align: center;
|
|
-ms-flex-pack: distribute;
|
|
justify-content: space-around;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-box-direction: normal;
|
|
-ms-flex-direction: column;
|
|
flex-direction: column;
|
|
-webkit-transition: all 2s ease;
|
|
transition: all 2s ease;
|
|
cursor: pointer;
|
|
position: relative;
|
|
z-index: 1;
|
|
margin: 20px;
|
|
|
|
&>.paltform_icon_1 {
|
|
width: 120px;
|
|
height: 120px;
|
|
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAF8AAABfCAYAAACOTBv1AAAAAXNSR0IArs4c6QAAAERlWElmTU0AKgAAAAgAAYdpAAQAAAABAAAAGgAAAAAAA6ABAAMAAAABAAEAAKACAAQAAAABAAAAX6ADAAQAAAABAAAAXwAAAAB1MuhLAAABVElEQVR4Ae3dQQ7CIBAAwK7xdfoP+yb9h35vpQc8SbEJaQ8OJwLbpRlIuzfilpnTSotpet0jrishpr4IzJnPAnv5MvUZOn16jU5JsLo5jccM/yAQ9eQ/Isoh1/YQqObdk7/Hy/zrGvAP3Hn48A8UOHDp81JKqmj23QHm+3pbjQABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgAABAgQIECBAgACBIQIxZz6XTPeI65CMknQFqvm5XER86UYLGCpQzd2BPpR1WzL427yGRsMfyrktGfxtXkOj45ZZvv/tttxUrxJq+7Rmloqm/lhbMd2TXxKsbk4rsfG+wBs+Ey1cwCcnYAAAAABJRU5ErkJggg==) no-repeat 50%;
|
|
display: -webkit-box;
|
|
display: -ms-flexbox;
|
|
display: flex;
|
|
-webkit-box-pack: center;
|
|
-ms-flex-pack: center;
|
|
justify-content: center;
|
|
-webkit-box-align: center;
|
|
-ms-flex-align: center;
|
|
align-items: center;
|
|
|
|
.img {
|
|
width: 76px;
|
|
height: 76px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.paltform_icon::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: -webkit-gradient(linear, left top, left bottom, from(#2af3f5), to(#054cb6));
|
|
background: linear-gradient(180deg, #2af3f5, #054cb6);
|
|
border-radius: 8px;
|
|
z-index: -1;
|
|
opacity: 0;
|
|
-webkit-transform: scale3d(.5, .5, .5);
|
|
transform: scale3d(.5, .5, .5);
|
|
-webkit-transition: opacity .4s, -webkit-transform .4s;
|
|
transition: opacity .4s, -webkit-transform .4s;
|
|
transition: transform .4s, opacity .4s;
|
|
transition: transform .4s, opacity .4s, -webkit-transform .4s;
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.user-layout-platform {
|
|
margin: 0 auto;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
gap: 20px;
|
|
width: 100%;
|
|
|
|
.platform-item {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
width: 200px;
|
|
flex-shrink: 0;
|
|
/* 防止元素被压缩 */
|
|
background: #415172;
|
|
border-radius: 8px;
|
|
font-size: 20px;
|
|
font-weight: 600;
|
|
color: #fff;
|
|
|
|
img {
|
|
width: 80px;
|
|
height: 80px;
|
|
margin-bottom: 10px;
|
|
}
|
|
|
|
span {
|
|
font-size: 16px;
|
|
font-weight: 500;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |