PIS界面
This commit is contained in:
Yuan
parent
83736869c3
commit
bad5568564
BIN
src/assets/pis/train.png
Normal file
BIN
src/assets/pis/train.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
@ -203,6 +203,8 @@ const VoiceManage = () => import('@/views/fileManage/voiceManage');
|
||||
const IscsDeviceManage = () => import('@/views/system/iscsDeviceManage');
|
||||
const IscsResourcesManage = () => import('@/views/system/iscsResourcesManage');
|
||||
|
||||
const PisScreen = () => import('@/views/pis/index')
|
||||
|
||||
// import { GenerateRouteProjectList } from '@/scripts/ProjectConfig';
|
||||
// import { getSessionStorage } from '@/utils/auth';
|
||||
|
||||
@ -703,6 +705,11 @@ export const publicAsyncRoute = [
|
||||
path: '/bigTrainRunplanManage',
|
||||
component: BigTrainRunplanManage,
|
||||
hidden: true
|
||||
},
|
||||
{
|
||||
path: '/pis',
|
||||
component: PisScreen,
|
||||
hidden: true
|
||||
}
|
||||
|
||||
];
|
||||
|
||||
368
src/views/pis/index.vue
Normal file
368
src/views/pis/index.vue
Normal file
@ -0,0 +1,368 @@
|
||||
<template>
|
||||
<div class="screen">
|
||||
<el-button @click="changeView" style="position:fixed; top: 0; right: 0">{{ this.view }}</el-button>
|
||||
<div v-if="view === 'station'" class="station">
|
||||
<div class="datetime">
|
||||
<div class="logo">LOGO</div>
|
||||
<div>
|
||||
<span>{{ date }}</span>
|
||||
<span class="time">{{ time }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="traininfo">
|
||||
<div class="currentStation">
|
||||
<div>本站 This Station</div>
|
||||
<div class="text-center bigger">{{ trainInfo.station.name }}</div>
|
||||
<div class="text-center">{{ trainInfo.station.nameEN }}</div>
|
||||
</div>
|
||||
<div class="devide"></div>
|
||||
<div class="nextTrain">
|
||||
<div>第一班列车 1st</div>
|
||||
<div class="text-center yellow">
|
||||
<span class="bigger">{{ trainInfo.nextTrain.time }} 分钟</span> <span>min</span>
|
||||
</div>
|
||||
<div>开往 {{ trainInfo.nextTrain.to }}</div>
|
||||
<div>TO {{ trainInfo.nextTrain.toEN }}</div>
|
||||
</div>
|
||||
<div class="devide"></div>
|
||||
<div class="secondTrain">
|
||||
<div>第二班列车 2nd</div>
|
||||
<div class="text-center bigger">{{ trainInfo.secondTrain.time }} 分钟 <span>min</span></div>
|
||||
<div>开往 {{ trainInfo.secondTrain.to }}</div>
|
||||
<div>TO {{ trainInfo.secondTrain.toEN }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="media">
|
||||
<div class="mediacontent"></div>
|
||||
<div class="banner">
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="tempratrue">
|
||||
<div class="directionIdentifer">《《</div>
|
||||
<div class="trainpic">
|
||||
<div class="pic"></div>
|
||||
<div class="textarea">
|
||||
<div v-for="i in 6" :key="i">舒适 Vacant</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="view === 'train'" class="train">
|
||||
<div class="content">
|
||||
<div class="left">
|
||||
<div class="logo">LOGO</div>
|
||||
<div class="info">
|
||||
<div class="time block">
|
||||
<div>时间 TIME</div>
|
||||
<div>{{ time }}</div>
|
||||
</div>
|
||||
<div class="date block">
|
||||
<div>日期 DATE</div>
|
||||
<div>{{ date }}</div>
|
||||
</div>
|
||||
<div class="next block">
|
||||
<div class="up">
|
||||
<div>下一站</div>
|
||||
<div>Next Station</div>
|
||||
</div>
|
||||
<div class="down">
|
||||
<div>{{ currentTrain.nextStationName }}</div>
|
||||
<div>{{ currentTrain.nextStationNameEN }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right">
|
||||
<div class="dest">
|
||||
<div>开往: {{ currentTrain.destination }} / TO: {{ currentTrain.destinationEN }}</div>
|
||||
</div>
|
||||
<div class="media"></div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="banner">
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
<div class="text">{{ bannerText }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
let timer
|
||||
export default {
|
||||
name: 'PIS',
|
||||
components: {},
|
||||
computed: {
|
||||
date() {
|
||||
return `${this.datetime.getFullYear()}年${this.datetime.getMonth() + 1}月${this.datetime.getDate()}日`
|
||||
},
|
||||
time() {
|
||||
return `${this.datetime.getHours()}:${this.datetime.getMinutes() + 1}`
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
view: 'station',
|
||||
datetime: new Date(),
|
||||
trainInfo: {
|
||||
station: {
|
||||
name: '科技路',
|
||||
nameEN: 'KEJILU',
|
||||
},
|
||||
nextTrain: {
|
||||
time: 3,
|
||||
to: '航天东路',
|
||||
toEN: 'HANGTIANDONGLU',
|
||||
},
|
||||
secondTrain: {
|
||||
time: 7,
|
||||
to: '航天新城',
|
||||
toEN: 'HANGTIANXINCHENG',
|
||||
},
|
||||
},
|
||||
bannerText:
|
||||
'党的十八大提出，倡导富强、民主、文明、和谐，倡导自由、平等、公正、法治，倡导爱国、敬业、诚信、友善，积极培育和践行社会主义核心价值观。富强、民主、文明、和谐是国家层面的价值目标，自由、平等、公正、法治是社会层面的价值取向，爱国、敬业、诚信、友善是公民个人层面的价值准则，这24个字是社会主义核心价值观的基本内容。',
|
||||
currentTrain: {
|
||||
nextStationName: '丈八一路',
|
||||
nextStationNameEN: 'ZHANGBA 1 LU',
|
||||
destination: '西安国际医学中心',
|
||||
destinationEN: `XI'ANGUOJIYIXUEZHONGXIN`,
|
||||
},
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
clearTimeout(timer)
|
||||
timer = setInterval(() => {
|
||||
this.tick()
|
||||
}, 1000)
|
||||
},
|
||||
destroyed() {
|
||||
clearInterval(timer)
|
||||
timer = null
|
||||
},
|
||||
|
||||
methods: {
|
||||
changeView() {
|
||||
if (this.view === 'station') {
|
||||
this.view = 'train'
|
||||
} else {
|
||||
this.view = 'station'
|
||||
}
|
||||
},
|
||||
tick() {
|
||||
this.datetime = new Date()
|
||||
},
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.screen {
|
||||
height: 100vh;
|
||||
width: 100vw;
|
||||
font-size: 28px;
|
||||
color: #fff;
|
||||
user-select: none;
|
||||
}
|
||||
.station {
|
||||
height: 100%;
|
||||
display: grid;
|
||||
gap: 10px;
|
||||
padding: 10px;
|
||||
background: linear-gradient(#009eb5, #00b7d7);
|
||||
grid-template-columns: repeat(4, 1fr);
|
||||
grid-template-rows: repeat(5, 1fr);
|
||||
& > div {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: visible;
|
||||
}
|
||||
.datetime,
|
||||
.traininfo {
|
||||
border: 1px solid rgb(143, 192, 184);
|
||||
border-radius: 5px;
|
||||
background: #009ab8;
|
||||
box-shadow: 2px 2px 3px 1px #69898f;
|
||||
}
|
||||
.datetime {
|
||||
grid-area: 1/1/2/2;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
.time {
|
||||
font-size: 1.2em;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
.traininfo {
|
||||
grid-area: 2/1/5/2;
|
||||
flex-direction: column;
|
||||
justify-content: space-evenly;
|
||||
font-size: 24px;
|
||||
& > div {
|
||||
width: 100%;
|
||||
padding: 0 30px;
|
||||
line-height: 1.6em;
|
||||
}
|
||||
.devide {
|
||||
width: 80%;
|
||||
height: 2px;
|
||||
background: rgba($color: #fff, $alpha: 0.7);
|
||||
border-radius: 100%;
|
||||
}
|
||||
.text-center {
|
||||
text-align: center;
|
||||
}
|
||||
.bigger {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
.yellow {
|
||||
color: #cff055;
|
||||
}
|
||||
.nextTrain {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
}
|
||||
.media {
|
||||
grid-area: 1/2/5/5;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
.mediacontent {
|
||||
width: 100%;
|
||||
height: calc(85% - 10px);
|
||||
background: linear-gradient(#cff055, #009eb5);
|
||||
}
|
||||
.banner {
|
||||
width: 100%;
|
||||
height: 15%;
|
||||
border: 1px solid rgb(143, 192, 184);
|
||||
border-radius: 5px;
|
||||
background: #009ab8;
|
||||
box-shadow: 2px 2px 3px 1px #69898f;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 60px;
|
||||
animation: 40s linear infinite scroll;
|
||||
color: #cff055;
|
||||
}
|
||||
}
|
||||
}
|
||||
.tempratrue {
|
||||
grid-area: 5/1/6/5;
|
||||
justify-content: space-evenly;
|
||||
.directionIdentifer {
|
||||
font-size: 72px;
|
||||
}
|
||||
.trainpic {
|
||||
width: 80%;
|
||||
.pic {
|
||||
height: 120px;
|
||||
background-image: url('~@/assets/pis/train.png');
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
}
|
||||
.textarea {
|
||||
display: flex;
|
||||
justify-content: space-evenly;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.train {
|
||||
height: 100%;
|
||||
background: linear-gradient(90deg, #44537b, #445567, #44537b);
|
||||
.content {
|
||||
height: 88%;
|
||||
padding: 15px;
|
||||
display: flex;
|
||||
.left,
|
||||
.right {
|
||||
height: 100%;
|
||||
}
|
||||
.left {
|
||||
width: 30%;
|
||||
background: linear-gradient(90deg, #3e4e69, #586baa, #3e4e69);
|
||||
padding: 20px;
|
||||
.logo {
|
||||
height: 12%;
|
||||
}
|
||||
.info {
|
||||
height: 88%;
|
||||
background-color: #7076b0;
|
||||
border-radius: 15px;
|
||||
padding: 8px;
|
||||
overflow: visible;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
.time {
|
||||
height: 25%;
|
||||
}
|
||||
.date {
|
||||
height: 25%;
|
||||
margin: 8px 0;
|
||||
}
|
||||
.next {
|
||||
height: 50%;
|
||||
}
|
||||
.block {
|
||||
background: linear-gradient(90deg, #445397, #7b7cc2, #445397);
|
||||
border-radius: 7px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-evenly;
|
||||
.up,
|
||||
.down {
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.right {
|
||||
width: 70%;
|
||||
.dest {
|
||||
height: 15%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
font-size: 40px;
|
||||
}
|
||||
.media {
|
||||
height: 85%;
|
||||
background: linear-gradient(#7b7cc2, #cff055);
|
||||
}
|
||||
}
|
||||
}
|
||||
.banner {
|
||||
height: 12%;
|
||||
overflow: hidden;
|
||||
padding: 10px;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.text {
|
||||
white-space: nowrap;
|
||||
font-size: 60px;
|
||||
animation: 40s linear infinite scroll;
|
||||
color: #cff055;
|
||||
}
|
||||
}
|
||||
}
|
||||
@keyframes scroll {
|
||||
from {
|
||||
transform: translateX(0);
|
||||
}
|
||||
to {
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in New Issue
Block a user