117 lines
2.6 KiB
Vue
117 lines
2.6 KiB
Vue
|
<template>
|
||
|
|
<div class="big-data-up mb15">
|
||
|
|
<div class="up-left">
|
||
|
|
<i class="el-icon-time mr5"></i>
|
||
|
|
<span>{{ time.txt }}</span>
|
||
|
|
</div>
|
||
|
|
<div class="up-center">
|
||
|
|
<span>智慧农业系统平台</span>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue'
|
||
|
|
import { formatDate } from "/@/utils/formatTime"
|
||
|
|
export default {
|
||
|
|
name: "chartHead",
|
||
|
|
setup() {
|
||
|
|
const state = reactive({
|
||
|
|
time: {
|
||
|
|
txt: "",
|
||
|
|
fun: null,
|
||
|
|
}
|
||
|
|
})
|
||
|
|
// 初始化时间
|
||
|
|
const initTime = () => {
|
||
|
|
state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||
|
|
state.time.fun = setInterval(() => {
|
||
|
|
state.time.txt = formatDate(new Date(), "YYYY-mm-dd HH:MM:SS WWW QQQQ");
|
||
|
|
}, 1000);
|
||
|
|
}
|
||
|
|
// 页面加载前
|
||
|
|
onBeforeMount(() => {
|
||
|
|
initTime()
|
||
|
|
})
|
||
|
|
// 页面卸载时
|
||
|
|
onUnmounted(() => {
|
||
|
|
clearInterval(state.time.fun)
|
||
|
|
})
|
||
|
|
return {
|
||
|
|
...toRefs(state)
|
||
|
|
};
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.big-data-up {
|
||
|
|
height: 55px;
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
padding: 0 15px;
|
||
|
|
color: var(--color-primary);
|
||
|
|
overflow: hidden;
|
||
|
|
position: relative;
|
||
|
|
.up-left {
|
||
|
|
position: absolute;
|
||
|
|
}
|
||
|
|
.up-center {
|
||
|
|
width: 100%;
|
||
|
|
display: flex;
|
||
|
|
justify-content: center;
|
||
|
|
font-size: 18px;
|
||
|
|
letter-spacing: 5px;
|
||
|
|
background-image: -webkit-linear-gradient(
|
||
|
|
left,
|
||
|
|
var(--color-primary),
|
||
|
|
var(--color-primary-light-1) 25%,
|
||
|
|
var(--color-primary) 50%,
|
||
|
|
var(--color-primary-light-1) 75%,
|
||
|
|
var(--color-primary)
|
||
|
|
);
|
||
|
|
-webkit-text-fill-color: transparent;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
background-clip: text;
|
||
|
|
background-size: 200% 100%;
|
||
|
|
-webkit-animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||
|
|
animation: masked-animation-data-v-b02d8052 4s linear infinite;
|
||
|
|
-webkit-box-reflect: below -2px -webkit-gradient(
|
||
|
|
linear,
|
||
|
|
left top,
|
||
|
|
left bottom,
|
||
|
|
from(transparent),
|
||
|
|
to(hsla(0, 0%, 100%, 0.1))
|
||
|
|
);
|
||
|
|
position: relative;
|
||
|
|
@keyframes masked-animation {
|
||
|
|
0% {
|
||
|
|
background-position: 0 0;
|
||
|
|
}
|
||
|
|
100% {
|
||
|
|
background-position: -100% 0;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
position: relative;
|
||
|
|
&::after {
|
||
|
|
content: "";
|
||
|
|
width: 250px;
|
||
|
|
position: absolute;
|
||
|
|
bottom: -15px;
|
||
|
|
left: 50%;
|
||
|
|
transform: translateX(-50%);
|
||
|
|
border: 1px transparent solid;
|
||
|
|
border-image: linear-gradient(
|
||
|
|
to right,
|
||
|
|
var(--color-primary-light-9),
|
||
|
|
var(--color-primary)
|
||
|
|
)
|
||
|
|
1 10;
|
||
|
|
}
|
||
|
|
span {
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|