276 lines
6.7 KiB
Vue
276 lines
6.7 KiB
Vue
<template>
|
|
<div class="screen-home-page">
|
|
<div class="location-icon">
|
|
<a-dropdown overlayClassName="screen-dropdown-box">
|
|
<img src="../../assets/screen/location_icon.png" alt="">
|
|
<template #overlay>
|
|
<a-menu>
|
|
<a-menu-item
|
|
v-for="item in menuData"
|
|
:key="item.value"
|
|
>
|
|
<a :href="'#' + item.href">{{ item.name }}</a>
|
|
</a-menu-item>
|
|
</a-menu>
|
|
</template>
|
|
</a-dropdown>
|
|
|
|
</div>
|
|
<!-- 上面的头部-->
|
|
<div class="header">
|
|
<img class="bg-img" src="../../assets/screen/header_bg.png" alt="">
|
|
<!-- <span class="title">中国汽车标准化研究院运营管理平台</span>-->
|
|
<span class="title"><img class="title" src="../../assets/screen/title_box.png" alt=""></span>
|
|
<!-- <img class="title" src="../../assets/screen/title_box.png" alt="">-->
|
|
<!-- <span></span>-->
|
|
</div>
|
|
<!-- 来款-->
|
|
<template>
|
|
<div class="sub-title" id="income">
|
|
<!-- <span>汽车标准化工作平台</span>-->
|
|
<img src="../../assets/screen/title_income.png" alt="">
|
|
</div>
|
|
<income-payment-screen></income-payment-screen>
|
|
</template>
|
|
|
|
<!-- 制修订 -->
|
|
<template>
|
|
<div class="sub-title" id="preparationRevisionScreen">
|
|
<!-- <span>汽车标准制修订管理系统 </span>-->
|
|
<img src="../../assets/screen/title_zxd.png" alt="">
|
|
</div>
|
|
<preparation-revision-screen></preparation-revision-screen>
|
|
</template>
|
|
|
|
<!-- 中国汽车国际法规工作平台-ISO-->
|
|
<template>
|
|
<div class="sub-title" id="ISO">
|
|
<!-- <span>中国汽车国际标准工作平台-ISO</span>-->
|
|
<img src="../../assets/screen/title_iso.png" alt="">
|
|
</div>
|
|
<i-s-o-screen></i-s-o-screen>
|
|
</template>
|
|
|
|
<!-- 中国汽车国际法规工作平台-WP.29 -->
|
|
<template>
|
|
<div class="sub-title" id="WP">
|
|
<!-- <span>中国汽车国际法规工作平台-WP.29</span>-->
|
|
<img src="../../assets/screen/title_wp.png" alt="">
|
|
</div>
|
|
<w-p-screen></w-p-screen>
|
|
</template>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
|
|
import IncomePaymentScreen from './incomePayments/index'
|
|
import PreparationRevisionScreen from './preparationRevision/index'
|
|
import WPScreen from './wp29/index'
|
|
import ISOScreen from './iso/index'
|
|
|
|
let bodyClass = ''
|
|
|
|
export default {
|
|
name: 'HomePage',
|
|
components: {
|
|
IncomePaymentScreen,
|
|
PreparationRevisionScreen,
|
|
WPScreen,
|
|
ISOScreen
|
|
},
|
|
data() {
|
|
return {
|
|
menuData: [
|
|
{name: '汽车标准化工作平台', value: '1', href: 'income'},
|
|
{name: '汽车标准制修订管理系统', value: '2', href: 'preparationRevisionScreen'},
|
|
{name: '中国汽车国际标准工作平台-ISO', value: '3', href: 'ISO'},
|
|
{name: '中国汽车国际法规工作平台-WP.29', value: '4', href: 'WP'},
|
|
]
|
|
}
|
|
},
|
|
created() {
|
|
document.title = `中国汽车标准化研究院运营管理平台`
|
|
let bodyDom = document.getElementsByTagName('body')[0]
|
|
bodyClass = bodyDom.getAttribute('class')
|
|
bodyDom.setAttribute('class', `${bodyClass} screen-body`)
|
|
},
|
|
beforeDestroy() {
|
|
document.getElementsByTagName('body')[0].setAttribute('class', bodyClass)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
::selection{
|
|
background: transparent;
|
|
}
|
|
.screen-home-page{
|
|
min-height: 100%;
|
|
background-image: url("../../assets/screen/screen_bg.png");
|
|
background-repeat-x: no-repeat;
|
|
background-size: 100%;
|
|
background-color: #293f6a;
|
|
padding: 0 20px 20px;
|
|
min-width: 1200px;
|
|
overflow: auto;
|
|
box-sizing: border-box;
|
|
position: relative;
|
|
}
|
|
|
|
.header{
|
|
//background-image: url("../../assets/screen/header_bg.png");
|
|
//background-repeat: no-repeat;
|
|
//background-size: 100% 100%;
|
|
height: 162px;
|
|
display: flex;
|
|
justify-content: center;
|
|
img.bg-img{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
height: 162px;
|
|
width: 100%;
|
|
}
|
|
|
|
img.title{
|
|
display: inline-block;
|
|
height: 64px;
|
|
width: auto;
|
|
//margin-top: 21px;
|
|
//line-height: 42px;
|
|
position: relative;
|
|
}
|
|
span.title{
|
|
display: inline-block;
|
|
margin-top: 21px;
|
|
//width: 812px;
|
|
height: 42px;
|
|
font-size: 42px;
|
|
font-family: YouSheBiaoTiHei;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 42px;
|
|
text-shadow: 0px 6px 13px #071834;
|
|
background: linear-gradient(0deg, #2EACFF 0%, #D6F7FD 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
position: relative;
|
|
&::before {
|
|
content: '';
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 87px;
|
|
height: 67px;
|
|
background-image: url("../../assets/screen/header_left.png");
|
|
left: -137px;
|
|
top: 0;
|
|
}
|
|
&::after {
|
|
content: '';
|
|
position: absolute;
|
|
display: inline-block;
|
|
width: 87px;
|
|
height: 67px;
|
|
background-image: url("../../assets/screen/header_right.png");
|
|
right: -137px;
|
|
top: 0;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
// 二级标题
|
|
.sub-title{
|
|
width: 608px;
|
|
height: 60px;
|
|
text-align: center;
|
|
margin: 14px auto;
|
|
background-image: url("../../assets/screen/sub_title_bg.png");
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
span{
|
|
display: inline-block;
|
|
height: 35px;
|
|
font-size: 30px;
|
|
font-family: YouSheBiaoTiYuan;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
line-height: 35px;
|
|
//text-shadow: 0px 3px 0px #002553;
|
|
|
|
background: linear-gradient(0deg, #FFFFFF 0%, #5AAEFC 100%);
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
}
|
|
|
|
/*内部标题*/
|
|
/deep/.box-title{
|
|
text-shadow: 0 0 5px #88D8FB;
|
|
}
|
|
|
|
/* 右侧定位的按钮*/
|
|
.location-icon{
|
|
position: fixed;
|
|
z-index: 200;
|
|
top: 165px;
|
|
right: 20px;
|
|
cursor: pointer;
|
|
img{
|
|
cursor: pointer;
|
|
width: 40px;
|
|
height: 40px;
|
|
background-color: rgba(35, 48, 98, 0.9);
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
::v-deep ::-webkit-scrollbar-track{
|
|
background: #293f6a;
|
|
////border-color: transparent;
|
|
}
|
|
::v-deep ::-webkit-scrollbar-thumb{
|
|
background: #445a9c;
|
|
}
|
|
::v-deep ::-webkit-scrollbar-corner {
|
|
background: #293f6a;
|
|
}
|
|
// 下拉框-清除图标的背景色
|
|
::v-deep .ant-select-selection__clear {
|
|
background: #293f6a;
|
|
color: #fff;
|
|
}
|
|
|
|
</style>
|
|
|
|
<style lang="less">
|
|
.screen-dropdown-box ul{
|
|
background: #233062;
|
|
color: #fff;
|
|
box-shadow: 0 0 4px #7599E8 inset;
|
|
li a{
|
|
color: #fff;
|
|
}
|
|
.ant-dropdown-menu-item:hover{
|
|
background-color: #7599E8;
|
|
}
|
|
}
|
|
|
|
.ant-select-screen .ant-empty-description{
|
|
color: #fff;
|
|
}
|
|
|
|
.screen-body{
|
|
&::-webkit-scrollbar-track{
|
|
background: #293f6a;
|
|
}
|
|
&::-webkit-scrollbar-thumb{
|
|
background: #445a9c;
|
|
}
|
|
&::-webkit-scrollbar-corner {
|
|
background: #293f6a;
|
|
}
|
|
}
|
|
</style> |