大屏项目初始化
BIN
screen-vue/src/assets/chart/box/03.png
Normal file
|
After Width: | Height: | Size: 26 KiB |
BIN
screen-vue/src/assets/chart/box/04.png
Normal file
|
After Width: | Height: | Size: 53 KiB |
BIN
screen-vue/src/assets/chart/box/07.png
Normal file
|
After Width: | Height: | Size: 15 KiB |
BIN
screen-vue/src/assets/chart/box/14.png
Normal file
|
After Width: | Height: | Size: 42 KiB |
BIN
screen-vue/src/assets/chart/box/16.png
Normal file
|
After Width: | Height: | Size: 48 KiB |
BIN
screen-vue/src/assets/chart/box/18.png
Normal file
|
After Width: | Height: | Size: 16 KiB |
BIN
screen-vue/src/assets/chart/box/21.png
Normal file
|
After Width: | Height: | Size: 74 KiB |
BIN
screen-vue/src/assets/chart/box/27.png
Normal file
|
After Width: | Height: | Size: 22 KiB |
BIN
screen-vue/src/assets/chart/box/36.png
Normal file
|
After Width: | Height: | Size: 1.2 MiB |
BIN
screen-vue/src/assets/chart/title/03.png
Normal file
|
After Width: | Height: | Size: 10 KiB |
BIN
screen-vue/src/assets/chart/title/05.png
Normal file
|
After Width: | Height: | Size: 19 KiB |
BIN
screen-vue/src/assets/chart/title/14.png
Normal file
|
After Width: | Height: | Size: 5.2 KiB |
BIN
screen-vue/src/assets/chart/title/21.png
Normal file
|
After Width: | Height: | Size: 181 KiB |
BIN
screen-vue/src/assets/chart/title/23.png
Normal file
|
After Width: | Height: | Size: 357 KiB |
BIN
screen-vue/src/assets/chart/title/26.png
Normal file
|
After Width: | Height: | Size: 30 KiB |
BIN
screen-vue/src/assets/chart/title/33.png
Normal file
|
After Width: | Height: | Size: 295 KiB |
BIN
screen-vue/src/assets/chart/top/33.png
Normal file
|
After Width: | Height: | Size: 102 KiB |
@@ -199,7 +199,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -212,6 +212,8 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -212,7 +212,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-header {
|
||||
@@ -223,6 +223,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -256,7 +256,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -268,6 +268,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -162,7 +162,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -174,6 +174,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/23.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -162,7 +162,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -174,6 +174,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/23.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -287,7 +287,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -299,6 +299,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -170,7 +170,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -182,6 +182,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/23.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -255,7 +255,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -267,6 +267,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/23.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -376,7 +376,7 @@ onUnmounted(() => {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
@@ -388,6 +388,8 @@ onUnmounted(() => {
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/14.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -107,7 +107,7 @@ watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
@@ -127,6 +127,8 @@ watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/14.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -107,7 +107,7 @@ watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/k2style.png") no-repeat !important;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100% !important;
|
||||
}
|
||||
|
||||
@@ -127,6 +127,8 @@ watch(() => props.formParams, () => getList(), { deep: true, immediate: true })
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/14.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
|
||||
.chart-card-title {
|
||||
|
||||
@@ -211,7 +211,7 @@ onMounted(async () => {
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
color: #e0e6ff;
|
||||
background: url('@/assets/images/border.png') no-repeat center center;
|
||||
background: url('@/assets/chart/box/18.png') no-repeat center center;
|
||||
background-size: 100% 100%;
|
||||
background-color: transparent !important;
|
||||
border: none !important;
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="chart-card">
|
||||
<div class="chart-card-header">
|
||||
<span class="chart-card-title">1</span>
|
||||
<span class="chart-card-title">2</span>
|
||||
</div>
|
||||
<div class="bar-line-chart-container" ref="chartRef"></div>
|
||||
</div>
|
||||
@@ -21,7 +21,7 @@ import { getItemInfoList } from '@/api/bizApi'
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/images/desck3.png") no-repeat;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/box/16.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-header {
|
||||
@@ -32,6 +32,8 @@ import { getItemInfoList } from '@/api/bizApi'
|
||||
border-bottom: 1px solid #1a508b;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
background: rgba(0, 0, 0, 0.1) url("@/assets/chart/title/03.png") no-repeat;
|
||||
background-size: 100% 100%;
|
||||
}
|
||||
.chart-card-title {
|
||||
font-size: 16px;
|
||||
|
||||
@@ -244,7 +244,7 @@ onMounted(() => {
|
||||
height: 75px;
|
||||
padding: 0 2vw;
|
||||
border-bottom: 1px solid #1a508b;
|
||||
background: url('@/assets/images/biaoti.png') no-repeat center center,
|
||||
background: url('@/assets/chart/top/33.png') no-repeat center center,
|
||||
linear-gradient(90deg, rgba(15, 52, 96, 0.8), rgba(21, 69, 128, 0.8));
|
||||
background-size: cover;
|
||||
position: relative;
|
||||
|
||||