123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306 |
- <template>
- <div class="screen-page">
- <ScaleScreen
- :width="1920"
- :height="1080"
- class="scale-wrap"
- :selfAdaption="$store.state.setting.isScale"
- >
- <div class="bg">
- <dv-loading v-if="loading">Loading...</dv-loading>
- <div v-else class="host-body">
- <!-- 头部 s -->
- <div class="d-flex jc-center title_wrap">
- <div class="zuojuxing"></div>
- <div class="youjuxing"></div>
- <div class="guang"></div>
- <div class="d-flex jc-center">
- <div class="title">
- <span class="title-text">{{ $route.meta.title }}</span>
- </div>
- </div>
- <div class="timers">
- {{ dateYear }} {{ dateWeek }} {{ dateDay }}
- </div>
- </div>
- <!-- 内容 s-->
- <router-view :key="$route.name"></router-view>
- <!-- 内容 e -->
- </div>
- </div>
- </ScaleScreen>
- </div>
- </template>
- <script>
- import { formatTime } from '../utils/util.js'
- import ScaleScreen from '@/bigScreenComponents/scale-screen/scale-screen.vue'
- export default {
- components: { ScaleScreen },
- data () {
- return {
- timing: null,
- loading: true,
- dateDay: null,
- dateYear: null,
- dateWeek: null,
- weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
- }
- },
- filters: {
- numsFilter (msg) {
- return msg || 0
- }
- },
- computed: {},
- created () {},
- mounted () {
- this.timeFn()
- this.cancelLoading()
- console.log(this.$route.meta.title)
- },
- beforeDestroy () {
- clearInterval(this.timing)
- },
- methods: {
- showSetting () {
- this.$refs.setting.init()
- },
- timeFn () {
- this.timing = setInterval(() => {
- this.dateDay = formatTime(new Date(), 'HH: mm: ss')
- this.dateYear = formatTime(new Date(), 'yyyy-MM-dd')
- this.dateWeek = this.weekday[new Date().getDay()]
- }, 1000)
- },
- cancelLoading () {
- const timer = setTimeout(() => {
- this.loading = false
- clearTimeout(timer)
- }, 500)
- }
- }
- }
- </script>
- <style lang="less">
- .screen-page{
- width: 100vw;
- height: 100vh;
- background-color: #03050C;
- }
- .scale-wrap {
- color: #d3d6dd;
- width: 1920px;
- height: 1080px;
- overflow: hidden;
- // &.pageisScale {
- // position: absolute;
- // top: 50%;
- // left: 50%;
- // transform: translate(-50%, -50%);
- // transform-origin: left top;
- // }
- .bg {
- width: 100%;
- height: 100%;
- padding: 16px 16px 10px 16px;
- box-sizing: border-box;
- background-image: url("../assets/img/pageBg.png");
- background-size: cover;
- background-position: center center;
- }
- .host-body {
- height: 100%;
- .title_wrap {
- height: 60px;
- background-image: url("../assets/img/top.png");
- background-size: cover;
- background-position: center center;
- position: relative;
- margin-bottom: 4px;
- .guang {
- position: absolute;
- bottom: -26px;
- background-image: url("../assets/img/guang.png");
- background-position: 80px center;
- width: 100%;
- height: 56px;
- }
- .zuojuxing,
- .youjuxing {
- position: absolute;
- top: -2px;
- width: 140px;
- height: 6px;
- background-image: url("../assets/img/headers/juxing1.png");
- }
- .zuojuxing {
- left: 11%;
- }
- .youjuxing {
- right: 11%;
- transform: rotate(180deg);
- }
- .timers {
- position: absolute;
- right: 0;
- top: 30px;
- font-size: 18px;
- display: flex;
- align-items: center;
- .blq-icon-shezhi02 {
- cursor: pointer;
- }
- }
- }
- .title {
- position: relative;
- // width: 500px;
- text-align: center;
- background-size: cover;
- color: transparent;
- height: 60px;
- line-height: 46px;
- .title-text {
- font-size: 38px;
- font-weight: 900;
- letter-spacing: 6px;
- width: 100%;
- background: linear-gradient(92deg, #0072FF 0%, #00EAFF 48.8525390625%, #01AAFF 100%);
- -webkit-background-clip: text;
- -webkit-text-fill-color: transparent;
- }
- }
- }
- }
- .scale-wrap {
- .pagetab {
- position: absolute;
- top: -35px;
- display: flex;
- z-index: 1000;
- .item {
- width: 180px;
- height: 36px;
- border-radius: 18px;
- color: #ffffff;
- text-indent: 20px;
- line-height: 36px;
- font-size: 16px;
- margin-right: 20px;
- background: linear-gradient(to right, rgba(39, 180, 255, 0.5), rgba(76, 245, 255, 0.1));
- cursor: pointer;
- &:hover,&:active{
- color: #f1f1f1;
- background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
- }
- }
- .focus{
- transform: scale(1.1);
- border: 1px solid #00EAFF;
- box-shadow: 0 0 10px #00EAFF;
- color: #f1f1f1;
- background: linear-gradient(to right, rgba(39, 180, 255, 0.7), rgba(76, 245, 255, 0.3));
- }
- }
- }
- .setting {
- position: fixed;
- width: 100%;
- height: 100%;
- z-index: 999;
- top: 0;
- left: 0;
- .left_shu {
- color: #000;
- font-weight: 900;
- position: relative;
- text-indent: 10px;
- padding:16px 0 10px 0 ;
- &::before {
- display: block;
- content: " ";
- height: 16px;
- width: 4px;
- border-radius: 2px;
- background: #0072FF;
- position: absolute;
- left: 0px;
- }
- }
- }
- .settingShow {
- .setting_inner {
- animation: rtl-drawer-in .3s 1ms;
- }
- }
- .yh-setting-fade-enter-active {
- animation: yh-setting-fade-in .3s;
- }
- .yh-setting-fade-leave-active {
- animation: yh-setting-fade-out .3s;
- }
- @keyframes yh-setting-fade-in {
- 0% {
- opacity: 0;
- }
- 100% {
- opacity: 1;
- }
- }
- @keyframes yh-setting-fade-out {
- 0% {
- opacity: 1;
- }
- 100% {
- opacity: 0;
- }
- }
- @keyframes rtl-drawer-in {
- 0% {
- transform: translate(100%, 0)
- }
- 100% {
- -webkit-transform: translate(0, 0);
- transform: translate(0, 0)
- }
- }
- @keyframes rtl-drawer-out {
- 0% {
- transform: translate(0, 0)
- }
- 100% {
- transform: translate(100%, 0)
- }
- }
- </style>
|