<!--
|
* @Date: 2024-01-04 19:40:32
|
* @LastEditors: Sneed
|
* @LastEditTime: 2024-03-09 12:58:30
|
* @FilePath: /belleson-frontend/Users/mache/Documents/demo/mdc/src/components/home/index.vue
|
-->
|
<template>
|
<div class="home">
|
<div class="header">
|
<img src="~@/assets/img/login/logo.png" alt="">
|
<div class="menu">
|
<slot name="menu"></slot>
|
</div>
|
<p v-if="showTime" class="time"><span>{{time1}}</span><span style="position: relative;">{{time2}}</span></p>
|
</div>
|
<div class="content">
|
<slot class="copy" name="content"></slot>
|
<div class="footer">
|
</div>
|
</div>
|
|
</div>
|
</template>
|
<script>
|
import dayjs from 'dayjs'
|
let timer
|
export default {
|
data () {
|
return {
|
time1: '',
|
time2: '',
|
showTime: false
|
}
|
},
|
watch: {
|
$route: {
|
handler (val) {
|
// console.log('+++++++++++')
|
// if (val.path !== '/') {
|
// this.showTime = false
|
// clearInterval(timer)
|
// } else {
|
// // this.showTime = true
|
// // timer = setInterval(() => {
|
// // this.time1 = dayjs().format('YYYY/MM/DD')
|
// // this.time2 = dayjs().format('HH:mm:ss')
|
// // },1000)
|
// }
|
}
|
},
|
immediate:true,
|
deep: true
|
},
|
mounted () {
|
this.showTime = this.$route.path === '/'
|
|
if (this.$route.path === '/') {
|
timer = setInterval(() => {
|
this.time1 = dayjs().format('YYYY/MM/DD')
|
this.time2 = dayjs().format('HH:mm:ss')
|
},1000)
|
}
|
},
|
updated() {
|
|
},
|
beforeDestroy() {
|
clearInterval(timer)
|
}
|
}
|
</script>
|
<style lang="scss" scoped>
|
$bg:#2d3a4b;
|
$dark_gray:#889aa4;
|
$light_gray:#eee;
|
.home {
|
/*position: relative;*/
|
height: 100%;
|
width: 100%;
|
background-color: $bg;
|
overflow: auto;
|
display: flex;
|
flex-direction: column;
|
.header {
|
position: relative;
|
padding-left: 24px;
|
padding-right: 24px;
|
height: 94px;
|
flex: 0 0 auto;
|
background-image: url('~@/assets/img/login/top.png');
|
background-size: contain;
|
display: flex;
|
align-items: center;
|
// justify-content: space-between;
|
& > img {
|
flex: 0 0 auto;
|
width: 599px;
|
max-height: 91px;
|
align-self: flex-start;
|
}
|
.menu {
|
height: 50px;
|
margin-left: 20px;
|
flex: 1 1 auto;
|
}
|
.time {
|
color: #fff;
|
font-size: 20px;
|
height: 30px;
|
position: relative;
|
span:first-child {
|
// display: flex;
|
position: absolute;
|
top: 50%;
|
transform: translate(0,-50%);
|
left: -100px;
|
font-size: 20px;
|
line-height: 30px;
|
}
|
span:last-child {
|
margin-left: 14px;
|
font-family: digital;
|
font-size: 30px;
|
line-height: 30px;
|
}
|
}
|
}
|
.content {
|
flex: 1 1 auto;
|
background-image: url('~@/assets/img/login/bg.png');
|
background-size: cover;
|
background-repeat: no-repeat;
|
position: relative;
|
overflow: hidden;
|
.workshop {
|
height: calc(100% - 50px)!important;
|
}
|
.compName {
|
font-size: 23px;
|
color: #FFFFFF;
|
line-height: 33px;
|
position: absolute;
|
left: 0;
|
right: 0;
|
text-align: center;
|
bottom: 50px;
|
}
|
}
|
.footer {
|
position: absolute;
|
width: 100%;
|
bottom: 0;
|
height: 46px;
|
background-image: url('~@/assets/img/login/footer.png');
|
background-size: cover;
|
background-repeat: no-repeat;
|
flex: 0 0 auto;
|
}
|
}
|
</style>
|
