大屏页面初始化
This commit is contained in:
@@ -1,213 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="chart-top-container">
|
|
||||||
<div class="card-item" v-for="(item, index) in cardList" :key="index">
|
|
||||||
<div class="card-left">
|
|
||||||
<div class="icon-box">
|
|
||||||
<img
|
|
||||||
:src="item.iconImg"
|
|
||||||
class="icon-img"
|
|
||||||
:style="{ filter: item.iconFilter }"
|
|
||||||
>
|
|
||||||
</div>
|
|
||||||
<div class="card-text">
|
|
||||||
<div class="module-name">{{ item.module }}</div>
|
|
||||||
<div class="desc-text">{{ item.title }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="card-right">
|
|
||||||
<div class="num-value">{{ item.value }}</div>
|
|
||||||
<div class="num-label">{{ item.label }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, watch } from 'vue'
|
|
||||||
import { getIndexInfoList } from '@/api/bizApi'
|
|
||||||
const cardList = ref()
|
|
||||||
|
|
||||||
async function getList() {
|
|
||||||
try {
|
|
||||||
const reqParams = {
|
|
||||||
indexCode: "werpIndex"
|
|
||||||
}
|
|
||||||
const res = await getIndexInfoList(reqParams)
|
|
||||||
cardList.value = res || []
|
|
||||||
} catch (error) {
|
|
||||||
console.error('获取数据失败:', error)
|
|
||||||
cardList.value = []
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const resizeHandler = () => {
|
|
||||||
const container = document.querySelector('.chart-top-container')
|
|
||||||
if (container) {
|
|
||||||
const height = container.parentElement.clientHeight
|
|
||||||
container.style.height = `${height}px`
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
getList()
|
|
||||||
})
|
|
||||||
|
|
||||||
watch(
|
|
||||||
() => {},
|
|
||||||
() => {
|
|
||||||
window.removeEventListener('resize', resizeHandler)
|
|
||||||
},
|
|
||||||
{ once: true }
|
|
||||||
)
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.chart-top-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 2px 4px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item {
|
|
||||||
flex: 1;
|
|
||||||
min-width: 160px;
|
|
||||||
height: 85%;
|
|
||||||
background: rgba(15, 52, 96, 0.95);
|
|
||||||
border: 1px solid #1a508b;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 0 8px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
box-sizing: border-box;
|
|
||||||
position: relative;
|
|
||||||
overflow: hidden;
|
|
||||||
transition: all 0.3s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-item:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 12px rgba(60, 156, 255, 0.3);
|
|
||||||
border-color: #3c9cff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-left {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-box {
|
|
||||||
width: 40px;
|
|
||||||
height: 40px;
|
|
||||||
background: transparent;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
border: 1px solid rgba(224, 230, 255, 0.2);
|
|
||||||
border-radius: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-img {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
object-fit: contain;
|
|
||||||
opacity: 0.9;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-box:hover .icon-img {
|
|
||||||
opacity: 1;
|
|
||||||
transform: scale(1.05);
|
|
||||||
filter: brightness(1.1) contrast(1.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-text {
|
|
||||||
color: #e0e6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.module-name {
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.desc-text {
|
|
||||||
font-size: 11px;
|
|
||||||
opacity: 0.7;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.card-right {
|
|
||||||
text-align: right;
|
|
||||||
color: #e0e6ff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num-value {
|
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
line-height: 1;
|
|
||||||
background: linear-gradient(to right, #3c9cff, #7472fe);
|
|
||||||
-webkit-background-clip: text;
|
|
||||||
-webkit-text-fill-color: transparent;
|
|
||||||
}
|
|
||||||
|
|
||||||
.num-label {
|
|
||||||
font-size: 11px;
|
|
||||||
opacity: 0.7;
|
|
||||||
margin-top: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1600px) {
|
|
||||||
.card-item {
|
|
||||||
min-width: 140px;
|
|
||||||
padding: 0 6px;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
width: 36px;
|
|
||||||
height: 36px;
|
|
||||||
}
|
|
||||||
.module-name {
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
.num-value {
|
|
||||||
font-size: 22px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.chart-top-container {
|
|
||||||
flex-direction: column;
|
|
||||||
height: auto !important;
|
|
||||||
gap: 4px;
|
|
||||||
padding: 2px;
|
|
||||||
}
|
|
||||||
.card-item {
|
|
||||||
width: 100%;
|
|
||||||
height: 80px;
|
|
||||||
min-width: unset;
|
|
||||||
padding: 0 8px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-height: 900px) {
|
|
||||||
.card-item {
|
|
||||||
height: 80%;
|
|
||||||
}
|
|
||||||
.icon-box {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
}
|
|
||||||
.num-value {
|
|
||||||
font-size: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Reference in New Issue
Block a user