181 lines
4.4 KiB
Vue
181 lines
4.4 KiB
Vue
<template>
|
||
<div class="header">
|
||
<div class="header_left">
|
||
<div class="header_left_img">
|
||
<img src="@/assets/large/secure.png" style="width: 100%; height: 100%" />
|
||
</div>
|
||
<div style="font-size: 12px; padding-left: 10px">安全生产天数：</div>
|
||
<div class="header_left_text">
|
||
1,235
|
||
<span style="font-size: 12px">天</span>
|
||
</div>
|
||
</div>
|
||
<div class="title">
|
||
<div class="title_text">资金管理看板</div>
|
||
<div>Fund Management Dashboard</div>
|
||
</div>
|
||
<div class="right">
|
||
<div class="top-bar">
|
||
<!-- 左侧：天气图标 + 日期文字 -->
|
||
<div class="left-section">
|
||
<img src="@/assets/large/weather.png" alt="天气图标" />
|
||
|
||
<span>
|
||
<span>多云 9°/18°</span>
|
||
<span style="padding-left: 20px"> {{ week[date.week] }} ({{ date.ymd }})</span>
|
||
</span>
|
||
</div>
|
||
<!-- 分割线 -->
|
||
<div class="divider">
|
||
<div class="top-block"></div>
|
||
<div class="bottom-block"></div>
|
||
</div>
|
||
<!-- 右侧：管理系统图标 + 文字 -->
|
||
<div class="right-section">
|
||
<img src="@/assets/large/setting.png" alt="设置图标" />
|
||
<span>管理系统</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
const week = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
|
||
const date = ref({
|
||
ymd: '',
|
||
hms: '',
|
||
week: 0
|
||
});
|
||
const setTime = () => {
|
||
let date1 = new Date();
|
||
let year: any = date1.getFullYear();
|
||
let month: any = date1.getMonth() + 1;
|
||
let day: any = date1.getDate();
|
||
let hours: any = date1.getHours();
|
||
if (hours < 10) {
|
||
hours = '0' + hours;
|
||
}
|
||
let minutes: any = date1.getMinutes();
|
||
if (minutes < 10) {
|
||
minutes = '0' + minutes;
|
||
}
|
||
let seconds: any = date1.getSeconds();
|
||
if (seconds < 10) {
|
||
seconds = '0' + seconds;
|
||
}
|
||
date.value.ymd = year + '-' + month + '-' + day;
|
||
date.value.hms = hours + ':' + minutes + ':' + seconds;
|
||
date.value.week = date1.getDay();
|
||
};
|
||
// 添加定时器，每秒更新一次时间
|
||
const timer = setInterval(setTime, 1000);
|
||
// 组件卸载时清除定时器
|
||
onUnmounted(() => {
|
||
clearInterval(timer);
|
||
});
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.header {
|
||
width: 100%;
|
||
height: 80px;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
display: grid;
|
||
grid-template-columns: 1fr 1fr 1fr;
|
||
color: #fff;
|
||
}
|
||
.header_left {
|
||
display: flex;
|
||
align-items: center;
|
||
.header_left_img {
|
||
width: 48px;
|
||
height: 48px;
|
||
box-sizing: border-box;
|
||
// padding-right: 10px;
|
||
}
|
||
.header_left_text {
|
||
font-weight: 500;
|
||
text-shadow: 0px 1.24px 6.21px rgba(25, 179, 250, 1);
|
||
}
|
||
}
|
||
.title {
|
||
color: #fff;
|
||
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||
text-align: center;
|
||
}
|
||
.title > div:first-child {
|
||
/* 第一个子元素的样式 */
|
||
font-size: 38px;
|
||
// font-weight: 300;
|
||
}
|
||
|
||
.title > div:last-child {
|
||
/* 最后一个子元素的样式 */
|
||
font-size: 14px;
|
||
letter-spacing: 0.3em; /* 调整这个值来控制间距大小 */
|
||
}
|
||
.right {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
}
|
||
/* 顶部栏容器：Flex 水平布局 + 垂直居中 */
|
||
.top-bar {
|
||
width: 100%;
|
||
height: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
// background-color: #1e2128;
|
||
color: #fff;
|
||
padding: 8px 16px;
|
||
font-size: 14px;
|
||
}
|
||
/* 左侧区域（天气 + 日期）：自身也用 Flex 水平排列，确保元素在一行 */
|
||
.left-section {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-right: auto; /* 让右侧元素（管理系统）居右 */
|
||
}
|
||
.left-section img {
|
||
width: 32px;
|
||
height: 32px;
|
||
margin-right: 8px; /* 图标与文字间距 */
|
||
}
|
||
/* 分割线（视觉分隔，可根据需求调整样式） */
|
||
.divider {
|
||
display: grid;
|
||
grid-template-rows: 1fr 1fr;
|
||
height: 100%; /* 根据需要调整高度 */
|
||
padding: 14px 10px;
|
||
}
|
||
|
||
.divider .top-block {
|
||
width: 2px;
|
||
height: 7px;
|
||
background: #19b5fb;
|
||
align-self: start;
|
||
}
|
||
|
||
.divider .bottom-block {
|
||
width: 2px;
|
||
height: 7px;
|
||
background: #19b5fb;
|
||
align-self: end;
|
||
}
|
||
/* 右侧区域（管理系统）：图标 + 文字水平排列 */
|
||
.right-section {
|
||
display: flex;
|
||
align-items: center;
|
||
font-family: 'AlimamaShuHeiTi', sans-serif;
|
||
font-size: 20px;
|
||
}
|
||
.right-section img {
|
||
width: 20px;
|
||
height: 20px;
|
||
margin-right: 6px; /* 图标与文字间距 */
|
||
}
|
||
</style>
|