98 lines
3.3 KiB
Vue
98 lines
3.3 KiB
Vue
<template>
|
||
<el-card :style="{height: height+'px'}">
|
||
<div class="home-box" :style="{height: height+'px'}">
|
||
<el-scrollbar wrapClass="scrollbar-wrapper" style="margin-top:5px;">
|
||
<h1 class="title">
|
||
城市轨道交通琏计划系统
|
||
<img :src="logo" alt="" class="logo-img">
|
||
</h1>
|
||
<div class="card-box">
|
||
<el-carousel :interval="4000" type="card" height="370px">
|
||
<el-carousel-item v-for="(item, index) in listImg" :key="index">
|
||
<img :src="item.src" alt="" height="100%" width="100%">
|
||
</el-carousel-item>
|
||
</el-carousel>
|
||
</div>
|
||
<div class="brief-box">
|
||
琏计划是一款编图测试系统，能够真实模拟实现对新运行图的仿真运行测试，该系统能够实现编辑运行图、导入运行图并按照运行图标准模拟真实行车环境，解决了无法针对运行图更新进行测试的问题。能够及时找出新图中不合理的地方并且在图上实时作出调整，避免了新运行图在运营过程中发现问题需要调度员人工进行干预的情况，最大程度降低故障对地铁正常运营的影响。
|
||
</div>
|
||
</el-scrollbar>
|
||
</div>
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import WindowResizeHandler from '@/mixin/WindowResizeHandler';
|
||
import logo from '@/assets/logo.png';
|
||
import home1 from '@/assets/home/plan1.png';
|
||
import home2 from '@/assets/home/plan2.png';
|
||
import home3 from '@/assets/home/plan3.png';
|
||
|
||
export default {
|
||
name: 'Home',
|
||
mixins: [WindowResizeHandler],
|
||
data() {
|
||
return {
|
||
listImg: [
|
||
{ src: home1 },
|
||
{ src: home2 },
|
||
{ src: home3 }
|
||
],
|
||
logo: logo,
|
||
height: 0,
|
||
}
|
||
},
|
||
methods: {
|
||
resizeHandler() {
|
||
this.height = this._clientHeight;
|
||
// this.$store.dispatch('config/resize', { width: this._clientWidth - 310, height: this._clientHeight - 125 });
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style rel="stylesheet/scss" lang="scss" scoped>
|
||
@import "src/styles/mixin.scss";
|
||
|
||
/deep/ .el-carousel {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.home-box {
|
||
padding: 15px 100px;
|
||
float: left;
|
||
width: 100%;
|
||
font-family: 'Microsoft YaHei';
|
||
|
||
.title {
|
||
font-size: 35px;
|
||
width: 100%;
|
||
text-align: center;
|
||
font-weight: 400;
|
||
margin-top: 55px;
|
||
border-bottom: 2px dashed #333;
|
||
padding-bottom: 15px;
|
||
margin-bottom: 70px;
|
||
position: relative;
|
||
|
||
.logo-img {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
width: 55px;
|
||
}
|
||
}
|
||
|
||
.card-box {
|
||
width: 100%;
|
||
padding: 0 50px;
|
||
}
|
||
|
||
.brief-box {
|
||
font-size: 18px;
|
||
text-indent: 2em;
|
||
line-height: 32px;
|
||
padding: 40px 20px 0;
|
||
font-family: unset;
|
||
}
|
||
}
|
||
</style> |