mart-admin/src/views/chart/head.vue

107 lines
2.4 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 lang="ts">
import { reactive, toRefs, onBeforeMount, onUnmounted } from 'vue';
import { formatDate } from '/@/utils/formatTime.ts';
export default {
name: 'chartHead',
setup() {
const state = reactive({
time: {
txt: '',
fun: 0,
},
});
// 初始化时间
const initTime = () => {
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
state.time.fun = window.setInterval(() => {
state.time.txt = formatDate(new Date(), 'YYYY-mm-dd HH:MM:SS WWW QQQQ');
}, 1000);
};
// 页面加载前
onBeforeMount(() => {
initTime();
});
// 页面卸载时
onUnmounted(() => {
window.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>