renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update: 初始化：新疆大屏基础搭建

Browse Source
This commit is contained in:
xf
2025-07-02 18:14:20 +08:00
parent 7e2346f5fb
commit 22c5b89f90
4 changed files with 100 additions and 115 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun.vue
+76 -98
View File
@@ -1,144 +1,122 @@
<template> <template>
<div class="outer"> <div class="sun-screen-box">
<login-out-button out-url="login" /> <div class="sun-screen-title">
<div class="title-d outer-title"> <div class="sun-title-left">2025年06月14日 12:21:21</div>
<div class="title-d-left"> <div class="sun-title-center">应急就医服务中心</div>
{{ dayTimeO }} <div class="sun-title-right">累计运行时间：3642天</div>
</div>
<div class="title-d-middle"> 应急就医服务中心</div>
<div class="title-d-right"> 累计运行时间：{{ dayTimeT }}</div>
</div> </div>
<div class="body-d"> <div class="sun-body-content">
<div class="body-d-left"> <div class="sun-body-left">
<OneL /> <div class="sun-body-left-one">
<twoL /> <OneL />
<threeL /> </div>
<div class="sun-body-left-two">
<twoL />
</div>
<div class="sun-body-left-three" style="margin-bottom: 0">
<threeL />
</div>
</div> </div>
<div class="body-d-middle"> <div class="sun-body-center">
<CenterMap /> <CenterMap />
</div> </div>
<div class="body-d-right"> <div class="sun-body-right">
<oneR :title="'体检数据'" :type="1" /> <div class="sun-body-right-one">
<oneR :title="'健康打卡数据'" :type="2" /> <oneR :title="'体检数据'" :type="1" />
</div>
<div class="sun-body-right-two">
<oneR :title="'健康打卡数据'" :type="2" />
</div>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script setup lang="ts"> <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 twoL from '/@/views/indexSun/twoL.vue';
import threeL from '/@/views/indexSun/threeL.vue'; import threeL from '/@/views/indexSun/threeL.vue';
import OneL from '/@/views/indexSun/oneL.vue';
import oneR from '/@/views/indexSun/oneR.vue'; import oneR from '/@/views/indexSun/oneR.vue';
import CenterMap from '/@/views/indexSun/centerMap.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> </script>
<style lang="less" scoped> <style lang="less" scoped>
.outer { .sun-screen-box {
height: 100%; height: 100vh;
box-sizing: border-box; letter-spacing: 2px;
background: url('/@/assets/indexSun/bigBg.png') no-repeat; background: url('/@/assets/indexSun/bigBg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
position: relative; .sun-screen-title {
.title-d {
height: 80px; height: 80px;
line-height: 60px;
display: flex;
color: #fff;
background: url('/@/assets/indexSun/bg.png') no-repeat; background: url('/@/assets/indexSun/bg.png') no-repeat;
background-size: 100% 100%; background-size: 100% 100%;
.title-d-left, display: flex;
.title-d-middle, font-size: 22px;
.title-d-right { color: #fff;
font-size: 22px; text-align: center;
text-align: center; line-height: 60px;
font-weight: bold; .sun-title-left,
letter-spacing: 1px; .sun-title-right {
width: 23%;
} }
> :nth-child(1) { .sun-title-center {
width: 20%; flex: 1;
}
> :nth-child(2) {
width: 60%;
font-size: 50px; font-size: 50px;
line-height: 80px; line-height: 80px;
letter-spacing: 10px; letter-spacing: 10px;
text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53); text-shadow: 2px 2px 5px rgba(118, 141, 219, 0.53);
font-weight: bold; font-weight: bold;
} }
> :nth-child(3) {
width: 20%;
}
} }
.body-d { .sun-body-content {
display: flex;
height: calc(100% - 80px); height: calc(100% - 80px);
padding: 10px 20px;
display: flex;
justify-content: space-between; justify-content: space-between;
padding: 10px 20px 0; .sun-body-left,
> :nth-child(1) { .sun-body-right {
height: 100%;
width: 22%; width: 22%;
}
> :nth-child(2) {
width: 50%;
}
> :nth-child(3) {
width: 24.5%;
}
.body-d-left {
display: flex; display: flex;
flex-direction: column; 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: 1px solid #00ccff;
border-radius: 14px; border-radius: 14px;
.one-l-box,
.two-l-box,
.three-l-box {
height: 100%;
}
} }
> :nth-child(2) { .sun-body-left-one {
height: 37%; height: 27%;
} }
> :nth-child(3) { .sun-body-left-two,
height: 37%; .sun-body-left-three {
} height: 36%;
> :nth-child(n + 1) {
margin-bottom: 15px;
} }
} }
.body-d-right { .sun-body-right {
display: flex; .sun-body-right-one,
flex-direction: column; .sun-body-right-two {
> div { height: 49.5%;
border: 1px solid #00ccff; border: 1px solid #00ccff;
border-radius: 14px; 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;
} }
} }
} }
src/views/indexSun/oneL.vue
+1 -1
View File
@@ -215,7 +215,7 @@
} }
.server-item { .server-item {
// font-size: 16px; // font-size: 16px;
padding: 5px 3% 5px 5%; padding: 3px 3% 3px 5%;
&.hasCursor { &.hasCursor {
cursor: pointer; cursor: pointer;
} }
src/views/indexSun/threeL.vue
+22 -15
View File
@@ -66,21 +66,28 @@
.content-item { .content-item {
height: 100%; height: 100%;
overflow: hidden; overflow: hidden;
.item-d { letter-spacing: 1px;
border-bottom: 1px solid #0076b4; .scroll {
height: 40px; width: 98%;
display: flex; height: 100%;
align-items: center; overflow: hidden;
color: #ffffff;
justify-content: space-between; .item-d {
font-size: 14px; border-bottom: 1px solid #0076b4;
cursor: pointer; height: 40px;
.item-d-img { display: flex;
img { align-items: center;
display: inline-block; color: #ffffff;
width: 24px; justify-content: space-between;
height: 24px; font-size: 14px;
cursor: pointer; cursor: pointer;
.item-d-img {
img {
display: inline-block;
width: 24px;
height: 24px;
cursor: pointer;
}
} }
} }
} }
src/views/indexSun/twoL.vue
+1 -1
View File
@@ -107,7 +107,7 @@
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
width: 60px; //width: 60px;
} }
.selected { .selected {
color: #00ccff; color: #00ccff;