You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
112 lines
3.7 KiB
112 lines
3.7 KiB
<template>
|
|
<div class="wrap">
|
|
<div class="bg-left">
|
|
<img class="pic" src="~assets/bg-left.png" />
|
|
</div>
|
|
<div class="bg-top">
|
|
<img class="pic" src="~assets/bg-top.png" />
|
|
<div class="animation">
|
|
<!-- <video src="~assets/top-video.webm"></video> -->
|
|
<video
|
|
autoplay
|
|
height="162"
|
|
loop
|
|
src="https://easyv.assets.dtstack.com/data/video/7478/2313/gfO5k3Ztm-1556020310192-qI-NAaykOV.webm"
|
|
style="width: 100%; height: 162px; object-fit: fill; mix-blend-mode: screen; filter: saturate(200%)"
|
|
></video>
|
|
</div>
|
|
<span class="bg-title">盐湖区人民医院数字看板</span>
|
|
</div>
|
|
<div class="bg-right">
|
|
<img class="pic" src="~assets/bg-right.png" />
|
|
</div>
|
|
<div class="bg-bottom">
|
|
<img class="pic" src="~assets/bg-bottom.png" />
|
|
</div>
|
|
<!--内容区-->
|
|
<div class="content d-flex flex-column">
|
|
<!-- 第一行 -->
|
|
<div class="flex-2 flex-row">
|
|
<div class="flex-1 ma-2">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<statistics class="flex-1" />
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 20px"></div>
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<duration class="flex-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="flex-2 ma-2">第二列</div>
|
|
<div class="flex-1 ma-2">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<sensor class="flex-1" />
|
|
</div>
|
|
</div>
|
|
<div style="width: 100%; height: 20px"></div>
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<div class="flex-1">第二行</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第三行 -->
|
|
<div class="flex-1 flex-row">
|
|
<div class="flex-1 ma-2">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<fast-ed class="flex-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第二列 -->
|
|
<div class="flex-2 ma-2">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">
|
|
<panel class="flex-1" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 第三列 -->
|
|
<div class="flex-1 ma-2">
|
|
<div class="d-flex flex-column flex-1">
|
|
<div class="box-top"></div>
|
|
<div class="flex-1 fill-width box-bottom">第三列</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import Statistics from 'components/Statistics/Statistics.vue';
|
|
import Duration from 'components/Duration/Duration.vue';
|
|
import Sensor from 'components/Sensor/Sensor.vue';
|
|
import FastEd from 'components/FastEd/FastEd.vue';
|
|
import Panel from 'components/Panel/Panel.vue';
|
|
export default {
|
|
name: 'Index',
|
|
components: { Statistics, Duration, Sensor, FastEd, Panel },
|
|
data() {
|
|
return {};
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="stylus" scoped></style>
|
|
|