update: 初始化：新疆大屏基础搭建
This commit is contained in:
xf
+76
-98
@@ -1,144 +1,122 @@
|
||||
<template>
|
||||
<div class="outer">
|
||||
<login-out-button out-url="login" />
|
||||
<div class="title-d outer-title">
|
||||
<div class="title-d-left">
|
||||
{{ dayTimeO }}
|
||||
</div>
|
||||
<div class="title-d-middle"> 应急就医服务中心</div>
|
||||
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
|
||||
<div class="sun-screen-box">
|
||||
<div class="sun-screen-title">
|
||||
<div class="sun-title-left">2025年06月14日 12:21:21</div>
|
||||
<div class="sun-title-center">应急就医服务中心</div>
|
||||
<div class="sun-title-right">累计运行时间：3642天</div>
|
||||
</div>
|
||||
<div class="body-d">
|
||||
<div class="body-d-left">
|
||||
<OneL />
|
||||
<twoL />
|
||||
<threeL />
|
||||
<div class="sun-body-content">
|
||||
<div class="sun-body-left">
|
||||
<div class="sun-body-left-one">
|
||||
<OneL />
|
||||
</div>
|
||||
<div class="sun-body-left-two">
|
||||
<twoL />
|
||||
</div>
|
||||
<div class="sun-body-left-three" style="margin-bottom: 0">
|
||||
<threeL />
|
||||
</div>
|
||||
</div>
|
||||
<div class="body-d-middle">
|
||||
<div class="sun-body-center">
|
||||
<CenterMap />
|
||||
</div>
|
||||
<div class="body-d-right">
|
||||
<oneR :title="'体检数据'" :type="1" />
|
||||
<oneR :title="'健康打卡数据'" :type="2" />
|
||||
<div class="sun-body-right">
|
||||
<div class="sun-body-right-one">
|
||||
<oneR :title="'体检数据'" :type="1" />
|
||||
</div>
|
||||
<div class="sun-body-right-two">
|
||||
<oneR :title="'健康打卡数据'" :type="2" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import LoginOutButton from '/@/views/components/loginOutButton.vue';
|
||||
import { onMounted, onUnmounted, ref } from 'vue';
|
||||
import { useTopTime } from '/@/utils/utils.ts';
|
||||
import OneL from '/@/views/indexSun/oneL.vue';
|
||||
import twoL from '/@/views/indexSun/twoL.vue';
|
||||
import threeL from '/@/views/indexSun/threeL.vue';
|
||||
import OneL from '/@/views/indexSun/oneL.vue';
|
||||
import oneR from '/@/views/indexSun/oneR.vue';
|
||||
import CenterMap from '/@/views/indexSun/centerMap.vue';
|
||||
const dayTimeO = ref();
|
||||
const dayTimeT = ref();
|
||||
const interval = ref(1);
|
||||
function init() {
|
||||
getTime();
|
||||
interval.value = setInterval(() => {
|
||||
getTime();
|
||||
}, 1000);
|
||||
}
|
||||
function getTime() {
|
||||
const { timeLeft, timeRight } = useTopTime();
|
||||
dayTimeO.value = timeLeft;
|
||||
dayTimeT.value = timeRight;
|
||||
}
|
||||
onMounted(() => {
|
||||
init();
|
||||
});
|
||||
onUnmounted(() => {
|
||||
clearInterval(interval.value);
|
||||
});
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.outer {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
.sun-screen-box {
|
||||
height: 100vh;
|
||||
letter-spacing: 2px;
|
||||
background: url('/@/assets/indexSun/bigBg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
position: relative;
|
||||
.title-d {
|
||||
.sun-screen-title {
|
||||
height: 80px;
|
||||
line-height: 60px;
|
||||
display: flex;
|
||||
color: #fff;
|
||||
background: url('/@/assets/indexSun/bg.png') no-repeat;
|
||||
background-size: 100% 100%;
|
||||
.title-d-left,
|
||||
.title-d-middle,
|
||||
.title-d-right {
|
||||
font-size: 22px;
|
||||
text-align: center;
|
||||
font-weight: bold;
|
||||
letter-spacing: 1px;
|
||||
display: flex;
|
||||
font-size: 22px;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
line-height: 60px;
|
||||
.sun-title-left,
|
||||
.sun-title-right {
|
||||
width: 23%;
|
||||
}
|
||||
> :nth-child(1) {
|
||||
width: 20%;
|
||||
}
|
||||
|
||||
> :nth-child(2) {
|
||||
width: 60%;
|
||||
.sun-title-center {
|
||||
flex: 1;
|
||||
font-size: 50px;
|
||||
line-height: 80px;
|
||||
letter-spacing: 10px;
|
||||
text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
> :nth-child(3) {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
.body-d {
|
||||
display: flex;
|
||||
.sun-body-content {
|
||||
height: calc(100% - 80px);
|
||||
padding: 10px 20px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 10px 20px 0;
|
||||
> :nth-child(1) {
|
||||
.sun-body-left,
|
||||
.sun-body-right {
|
||||
height: 100%;
|
||||
width: 22%;
|
||||
}
|
||||
> :nth-child(2) {
|
||||
width: 50%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
width: 24.5%;
|
||||
}
|
||||
.body-d-left {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
justify-content: space-between;
|
||||
}
|
||||
.sun-body-center {
|
||||
flex: 1;
|
||||
margin: 0 10px;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
.sun-body-left {
|
||||
.sun-body-left-one,
|
||||
.sun-body-left-two,
|
||||
.sun-body-left-three {
|
||||
margin-bottom: 10px;
|
||||
border: 1px solid #00ccff;
|
||||
border-radius: 14px;
|
||||
.one-l-box,
|
||||
.two-l-box,
|
||||
.three-l-box {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
> :nth-child(2) {
|
||||
height: 37%;
|
||||
.sun-body-left-one {
|
||||
height: 27%;
|
||||
}
|
||||
> :nth-child(3) {
|
||||
height: 37%;
|
||||
}
|
||||
> :nth-child(n + 1) {
|
||||
margin-bottom: 15px;
|
||||
.sun-body-left-two,
|
||||
.sun-body-left-three {
|
||||
height: 36%;
|
||||
}
|
||||
}
|
||||
.body-d-right {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
> div {
|
||||
.sun-body-right {
|
||||
.sun-body-right-one,
|
||||
.sun-body-right-two {
|
||||
height: 49.5%;
|
||||
border: 1px solid #00ccff;
|
||||
border-radius: 14px;
|
||||
height: 48.5%;
|
||||
.three-l-box {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
> :nth-child(n + 1) {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
}
|
||||
.body-d-middle {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -215,7 +215,7 @@
|
||||
}
|
||||
.server-item {
|
||||
// font-size: 16px;
|
||||
padding: 5px 3% 5px 5%;
|
||||
padding: 3px 3% 3px 5%;
|
||||
&.hasCursor {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@@ -66,21 +66,28 @@
|
||||
.content-item {
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
.item-d {
|
||||
border-bottom: 1px solid #0076b4;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.item-d-img {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 1px;
|
||||
.scroll {
|
||||
width: 98%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
|
||||
.item-d {
|
||||
border-bottom: 1px solid #0076b4;
|
||||
height: 40px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
color: #ffffff;
|
||||
justify-content: space-between;
|
||||
font-size: 14px;
|
||||
cursor: pointer;
|
||||
.item-d-img {
|
||||
img {
|
||||
display: inline-block;
|
||||
width: 24px;
|
||||
height: 24px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -107,7 +107,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 60px;
|
||||
//width: 60px;
|
||||
}
|
||||
.selected {
|
||||
color: #00ccff;
|
||||
|
||||
Reference in New Issue
Block a user