251 lines
8.4 KiB
Plaintext
251 lines
8.4 KiB
Plaintext
<script setup lang="ts">
|
|
import { RouterView } from 'vue-router'
|
|
import { useTitle } from '@vueuse/core'
|
|
import { getImg } from '@/assets/images'
|
|
import { NModal } from 'naive-ui'
|
|
import { useUserStore } from '@/stores/modules/user'
|
|
import Searchs from '@/components/search.vue'
|
|
import {report} from '@/api/daikin/base'
|
|
useTitle('大金中国调达本部 HOMEPAGE')
|
|
const { push } = useRouter()
|
|
const store = useUserStore()
|
|
|
|
const { toggle } = inject<any>('fullscreen')
|
|
|
|
const activeMenuKey = ref('Home')
|
|
let idx = ref(0)
|
|
const Menus = [
|
|
// 首页 集团部门方针 年度活动日程表 其他链接…
|
|
{ key: 'Home', name: '首页', icon: getImg('home.png'), icon1: getImg('home1.png'),link:'' },
|
|
{
|
|
key: 'Group', name: '年度方针', icon: getImg('company.png'),icon1: getImg('company1.png'),link:'' ,
|
|
// children: [
|
|
// { key: 'Group', name: '-集团方针' },
|
|
// { key: 'Company', name: '-公司方针' },
|
|
// { key: 'HeadQuarters', name: '-调达本部方针' }
|
|
// ]
|
|
},
|
|
// { key: 'company', name: '本部长通达', icon: getImg('icon-company.svg') },
|
|
{ key: 'User', name: '年度活动日程表', icon: getImg('book.png'),icon1: getImg('book1.png'),link:''
|
|
// children: [
|
|
// { key: '', name: '调达Database' },
|
|
// ]
|
|
},
|
|
// { key: 'database', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png'),link:'https://procurement.daikin.net.cn/scripts/cbgrn/grn.exe/' },
|
|
{ key: 'DataBase', name: '调达Database', icon: getImg('shuju.png'),icon1: getImg('shuju1.png') },
|
|
{ key: 'link', name: '其他链接', icon: getImg('link.png') ,icon1: getImg('link1.png'),link:'',
|
|
children: [
|
|
{ key: 'YCWZ', name: '调达本部才望子',link:'http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index' },
|
|
{ key: 'GCDB', name: 'GCDB全球比价系统',link:'http://10.219.11.13/gcdb/' },
|
|
{ key: 'DJ', name: '大金空调官方网站',link:'https://www.daikin-china.com.cn' },
|
|
{ key:'CODE',name:"大金空调中国相关"}
|
|
]
|
|
},
|
|
{ key: 'phone', name: '紧急联络体制表', icon: getImg('phone.png'),icon1: getImg('phone1.png'),link:'' ,
|
|
// children: [
|
|
// { key: 'inv', name: '邀请' },
|
|
// { key: 'visit', name: '拜访' },
|
|
// ]
|
|
},
|
|
|
|
]
|
|
|
|
function menuHandler(menu: any, index: number) {
|
|
activeMenuKey.value = menu.key
|
|
console.log(menu,index);
|
|
idx.value = index;
|
|
console.log(menu.key);
|
|
if(!menu.key) return
|
|
if (menu.key==='DataBase') {
|
|
const { code } = report({ moduleCode:'App_Database' })
|
|
}
|
|
push({ name: menu.key })
|
|
|
|
|
|
}
|
|
const route = useRoute()
|
|
const shorm =ref(false)
|
|
function goChild(menu:any){
|
|
|
|
activeItem = menu.key
|
|
console.log(menu.key)
|
|
if(menu.key ==='CODE'){
|
|
shorm.value = true
|
|
}
|
|
if(menu.link){
|
|
|
|
}
|
|
else{
|
|
push({name:menu.key})
|
|
}
|
|
|
|
}
|
|
var activeItem=0
|
|
|
|
</script>
|
|
|
|
<template>
|
|
<div class="page w-1920px h-1080px p30px flex">
|
|
<div class="w300px -mr-1px flex flex-col shrink-0 overflow-auto">
|
|
<!-- @dblclick="toggle" -->
|
|
<img src="@/assets/images/logo.png" class="w197px h44px mt14px" />
|
|
<div class="text-20px text-#fff font-600 mt6px">大金中国调达本部 HOMEPAGE</div>
|
|
|
|
<div class="mt34px w270px min-h80px rd-35px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 overflow-hidden relative">
|
|
<Searchs></Searchs>
|
|
</div>
|
|
<div class="pt44px pb24px flex-1 ">
|
|
|
|
<div class="nav px36px py24px m10px mr0 rd-32px rd-r-0 flex flex-col text-#fff cursor-pointer"
|
|
v-for="(m, index) in Menus" :key="m.key" :class="activeMenuKey === m.key ? (m.children ?'actives':'active'):''"
|
|
@click="() => menuHandler(m, index)">
|
|
<div :class="activeMenuKey === m.key && 'onActive'">
|
|
<img v-if="activeMenuKey === m.key" :src="m.icon1" class="w22px h22px mr16px mt--5px" />
|
|
<img v-else :src="m.icon" class="w22px h22px mr16px mt--5px" />
|
|
<span class="text-22px font-900">
|
|
|
|
<a v-if="m.link" class="no-underline text-#fff" :href="m.link"> {{ m.name }}</a>
|
|
<span v-else>
|
|
<a v-if="m.name==='其他链接'" class="underline text-#fff" > {{ m.name }}</a>
|
|
<span v-else>{{m.name}}</span>
|
|
</span>
|
|
</span>
|
|
</div>
|
|
|
|
<div v-if="m.children&&idx==index" class="pl40px">
|
|
<div class="my20px pl30px text-#fff activeChildren" v-for="(item,ind) in m.children" :key="item.key" @click.stop="goChild(item)" @click="activeItem = ind">
|
|
<a v-if="item.link" class="no-underline !text-#fff flex" :href="item.link"><span class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"></span>{{ item.name }}</a>
|
|
<span v-else class="flex"><span class="w7px h7px rd-7px bg-#fff block mr-8px mt4px"></span>{{ item.name }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
<div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px relative" >
|
|
<a href="http://172.31.119.37/scripts/cbgrn/grn.exe/portal/index" target="_blank" class="no-underline text-#fff">
|
|
<div class="flex items-center text-18px ">
|
|
<img src="@/assets/images/icon-book.svg" class="w22px h22px mr10px" />
|
|
个人日程
|
|
</div>
|
|
<div class="mt18px">9:00-10:00</div>
|
|
<div class="mt8px">召集部门成员召开项目启动会</div>
|
|
<div class="mt16px">10:01-11:00</div>
|
|
<div class="mt8px">召集部门成员召开项目启动会</div>
|
|
<img src="@/assets/images/zhulj@2x.png" class="absolute w22px h22px mr10px top--15px right--20px" />
|
|
</a>
|
|
</div>
|
|
|
|
<!-- <div class="p20px w270px rd-20px b-4px bg-#fff/16 b-4px b-solid b-#fff/23 text-14px mt22px">
|
|
<div class="flex items-center text-18px">
|
|
<img src="@/assets/images/icon-memo.svg" class="w22px h22px mr10px" />
|
|
memo
|
|
</div>
|
|
<div class="mt18px lh-24px">新年方针:领先时代的变化开创崭新的 未来</div>
|
|
</div> -->
|
|
</div>
|
|
|
|
<div class="main flex-1 rd-32px p30px pb15px pt0px mt62px relative">
|
|
<!-- <Home /> -->
|
|
<RouterView />
|
|
</div>
|
|
</div>
|
|
<div class="fixed bottom-4px text-#fff text-12px ml38px" style="margin:0; width: 100%; text-align: center;">今日访问人数：{{store.user.appLoginToDayCount}} 累计访问人数：{{store.user.appLoginCount}}</div>
|
|
<NModal v-model:show="shorm" :mask-closable="false">
|
|
<div class="w700px h430px bg-#fff rd-15px">
|
|
<div class="py5px px15px " style="border-bottom: 1px solid #dadada; font-weight: bold;color: #494A63;">
|
|
大金空调中国相关
|
|
<img @click="shorm=false" src="@/assets/images/chac@2x.png" class="w15px float-right mt5px mr5px"/>
|
|
</div>
|
|
<div class="flex mt70px text-center">
|
|
<div class="w-full text-center">
|
|
<img src="@/assets/images/ewm1@2x.png" class="w200px"/>
|
|
<div class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto">大金空调中国视频号</div>
|
|
</div>
|
|
<div class="w-full">
|
|
<img src="@/assets/images/ewm2@2x.png" class="w200px"/>
|
|
<div class="py10px bg-#377CFF text-#fff w200px rd-20px mt35px mx-auto">大金空调抖音号</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</NModal>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
|
|
.page {
|
|
font-family: 'PingFang SC';
|
|
user-select: none;
|
|
|
|
// background-image: url('@/assets/images/bg.jpg');
|
|
// background-color: #000;
|
|
background-position: 0 0;
|
|
background-repeat: no-repeat;
|
|
background-size: cover;
|
|
color: #fff;
|
|
|
|
line-height: 1;
|
|
}
|
|
|
|
.nav {
|
|
position: relative;
|
|
|
|
&::before {
|
|
top: -48px;
|
|
}
|
|
.activeChildren:hover{
|
|
a,span{
|
|
text-decoration:underline;
|
|
}
|
|
}
|
|
&::after {
|
|
bottom: -49px;
|
|
transform: rotate(-90deg);
|
|
}
|
|
|
|
&.active {
|
|
color: #002fa7;
|
|
background-color: #fff;
|
|
a{
|
|
color: #002fa7;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
}
|
|
&.actives {
|
|
padding: 0px!important;
|
|
color: #002fa7;
|
|
background-color:rgba(255, 255,255,0.3);
|
|
a{
|
|
color: #002fa7;
|
|
}
|
|
&::before,
|
|
&::after {
|
|
opacity: 1;
|
|
}
|
|
.onActive{
|
|
background-color: #fff;
|
|
border-radius:32px 0 0 32px ;
|
|
|
|
padding: 24px 36px 24px 36px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.main {
|
|
background-image: url('@/assets/images/bg-rs-main.svg');
|
|
background-position: 0 0;
|
|
background-repeat: repeat-x;
|
|
background-size: auto;
|
|
}
|
|
&::-webkit-scrollbar{
|
|
display: none;
|
|
scrollbar-width:none
|
|
}
|
|
|
|
|
|
</style>
|