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 13:48:50 +08:00
parent 1cbda373e0
commit ff493d83d9
24 changed files with 1482 additions and 14 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/indexSun/oneL.vue
+227
View File
@@ -0,0 +1,227 @@
<template>
<div class="one-l-box">
<div class="title"> 服务详情数据 </div>
<div class="content">
<div class="type-time">
<div @click="clickChooseType('0')" :class="[chooseType === '0' ? 'selected' : 'no-selected']">
本周
<div>
<div v-if="chooseType === '0'" class="triangle"></div>
</div>
</div>
<div @click="clickChooseType('1')" :class="[chooseType === '1' ? 'selected' : 'no-selected']">
本月
<div>
<div v-if="chooseType === '1'" class="triangle"></div>
</div>
</div>
<div @click="clickChooseType('2')" :class="[chooseType === '2' ? 'selected' : 'no-selected']">
本年
<div>
<div v-if="chooseType === '2'" class="triangle"></div>
</div>
</div>
</div>
<div class="server-container">
<div v-for="(item, index) in statistics" class="server-item" :key="index">
<span>{{ item?.name }}</span>
<span>{{ item?.value }}123</span>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref } from 'vue';
import { useStatistics } from '/@/components/body-d-left/bodyLeftHooks.ts';
const chooseType = ref('0');
const { statistics, setStatistics, getStatistics } = useStatistics();
function clickChooseType(index) {
if (chooseType.value === index) return;
chooseType.value = index;
}
</script>
<style lang="less" scoped>
.one-l-box {
background: rgba(8, 75, 100, 0.2);
.title {
height: 40px;
border-radius: 14px 14px 0 0;
font-weight: bold;
font-size: 20px;
letter-spacing: 2px;
color: #ffffff;
line-height: 40px;
padding: 0 20px;
background: linear-gradient(to right, rgba(8, 75, 100, 0.5) 0%, rgba(255, 255, 255, 0) 100%);
}
.content {
height: calc(100% - 40px);
display: flex;
flex-direction: column;
.type-time {
padding-top: 10px;
margin-right: 10px;
font-size: 14px;
> div {
cursor: pointer;
padding: 3px 15px;
margin: 0 10px;
display: flex;
align-items: center;
}
.selected {
color: #00ccff;
background: rgba(0, 204, 255, 0.2);
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-top: 3px solid #00ccff; /* 顶部线条 */
border-left: 3px solid #00ccff; /* 左侧线条 */
}
&:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-bottom: 3px solid #00ccff; /* 顶部线条 */
border-right: 3px solid #00ccff; /* 左侧线条 */
}
> div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-top: 3px solid #00ccff; /* 顶部线条 */
border-right: 3px solid #00ccff; /* 左侧线条 */
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-bottom: 3px solid #00ccff; /* 顶部线条 */
border-left: 3px solid #00ccff; /* 左侧线条 */
}
}
}
.no-selected {
color: #b6b6b6;
background: rgba(26, 69, 126, 0.2);
position: relative;
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-top: 3px solid #1a457e; /* 顶部线条 */
border-left: 3px solid #1a457e; /* 左侧线条 */
}
&:after {
content: '';
position: absolute;
bottom: 0;
right: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-bottom: 3px solid #1a457e; /* 顶部线条 */
border-right: 3px solid #1a457e; /* 左侧线条 */
}
> div {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
&:before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-top: 3px solid #1a457e; /* 顶部线条 */
border-right: 3px solid #1a457e; /* 左侧线条 */
}
&:after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 8px; /* 线条宽度 */
height: 8px; /* 线条高度 */
border-bottom: 3px solid #1a457e; /* 顶部线条 */
border-left: 3px solid #1a457e; /* 左侧线条 */
}
}
}
.triangle {
position: absolute;
left: 50%;
bottom: 0;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 5px solid transparent; /* 左边透明 */
border-right: 5px solid transparent; /* 右边透明 */
border-bottom: 6px solid #00ccff; /* 底部为黑色，形成三角形 */
}
}
.server-container {
color: #fff;
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
overflow-y: auto;
position: relative;
font-size: 16px;
font-weight: bold;
letter-spacing: 2px;
margin-top: 10px;
padding-bottom: 10px;
.spin {
position: absolute;
left: 50%;
top: 50%;
}
}
.server-item {
// font-size: 16px;
padding: 5px 3% 5px 5%;
&.hasCursor {
cursor: pointer;
}
display: flex;
justify-content: space-between;
}
}
}
</style>