From 7070609d6e4ee06e24df2c5572ff151db583f0d3 Mon Sep 17 00:00:00 2001
From: Mr.Shi <1878285526@qq.com>
Date: 星期一, 21 八月 2023 11:11:07 +0800
Subject: [PATCH] 大屏
---
screen_standard/src/views/index.vue | 185 ++++++++++++++++++++++++++++++++++++++++++++-
1 files changed, 179 insertions(+), 6 deletions(-)
diff --git a/screen_standard/src/views/index.vue b/screen_standard/src/views/index.vue
index e660a85..5b0d6f3 100644
--- a/screen_standard/src/views/index.vue
+++ b/screen_standard/src/views/index.vue
@@ -1,11 +1,69 @@
<template>
<div class="content">
- <div class="content_left">1</div>
+ <div class="content_left">
+ <div class="content_left_item1">
+ <div class="content_left_item1_head">
+ <span>褰撴棩鍛樺伐浜ч噺TOP10</span>
+ </div>
+ <div class="content_left_item1_content">
+ <div class="content_left_item1_content_row" v-for="(item, index) in 10" :key="index">
+ <div class="content_left_item1_content_row_name">
+ <div :class="index > 2 ? 'num bg1' : 'num bg2'">{{ index + 1 }}</div>
+ <span>璧电珛{{ index }}</span>
+ </div>
+ <div class="content_left_item1_content_row_line">
+ <el-progress
+ :show-text="false"
+ :percentage="50">
+ </el-progress>
+ </div>
+ <div class="content_left_item1_content_row_num">342</div>
+ </div>
+ </div>
+ </div>
+ <div class="content_left_item2">
+ <div class="content_left_item2_head">
+ <span>浠撳簱瀹炴椂浣欓噺缁熻</span>
+ </div>
+ <div class="content_left_item2_content">
+ <div class="productProcess">
+
+ <!-- 濡傛灉椤甸潰鍒锋柊鏁版嵁姣旇緝棰戠箒锛屽彲浠ュ皢loading銆乻howFlag鐨勭浉鍏充唬鐮佸垹闄わ紝闃叉杩囦簬棰戠箒鐨勫嚭鐜板姞杞藉姩鐢� -->
+ <div class="loading_div" v-show="!showFlag">
+ <div>Loading...</div> <!-- 杩欎釜loading鑷繁鍐欙紝浠ｇ爜娌¤创鍑烘潵 -->
+ </div>
+
+ <div class="success_info_body" v-show="showFlag">
+ <!-- 鍙傛暟鍚嶇О銆佸垪鏁版牴鎹疄闄呮儏鍐佃皟鏁� -->
+ <div class="table_body">
+ <div class="table_th">
+ <div class="tr1 th_style">鎺掍骇缂栧彿</div>
+ <div class="tr2 th_style">绫诲瀷</div>
+ <div class="tr3 th_style">鏃ユ湡</div>
+ <div class="tr4 th_style">杩涘害</div>
+ </div>
+ <div class="table_main_body">
+ <div class="table_inner_body" :style="{top: tableTop + 'px'}">
+ <div class="table_tr" v-for="(item,index) in tableList" :key="index">
+ <div class="tr1 tr">{{item.planNo}}</div>
+ <div class="tr2 tr">{{item.type}}</div>
+ <div class="tr3 tr" v-if="item.startDate!='-'">{{item.startDate}} ~ {{item.endDate}}</div>
+ <div class="tr3 tr" v-else>-</div>
+ <div class="tr4 tr" v-if="item.process!='-'">{{Number(item.process).toFixed(2)}} %</div>
+ <div class="tr4 tr" v-else>-</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
<div class="content_center">2</div>
<div class="content_right">3</div>
</div>
</template>
-
<script setup>
@@ -19,16 +77,131 @@
align-items: center;
justify-content: space-between;
.content_left {
- width: 920px;
- background-color: aquamarine;
+ flex: 1;
+ .content_left_item1 {
+ width: 100%;
+ margin-bottom: 20px;
+ .content_left_item1_head {
+ background: url('@/assets/img/home_title_short@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 38px;
+ line-height: 38px;
+ padding-left: 34px;
+ box-sizing: border-box;
+ span {
+ font-size: 16px;
+ font-family: SourceHanSansSC-Bold, SourceHanSansSC;
+ font-weight: bold;
+ color: #FFFFFF;
+ line-height: 24px;
+ text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
+ }
+ }
+ .content_left_item1_content {
+ width: 100%;
+ height: 360px;
+ padding: 20px;
+ box-sizing: border-box;
+ background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
+ .content_left_item1_content_row {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ margin-bottom: 13px;
+ &:last-child {
+ margin: 0;
+ }
+ .content_left_item1_content_row_name {
+ flex-shrink: 0;
+ display: flex;
+ align-items: center;
+ span {
+ font-size: 13px;
+ font-family: SourceHanSansSC-Regular, SourceHanSansSC;
+ font-weight: 400;
+ color: #D2E0FF;
+ margin-left: 9px;
+ }
+ .num {
+ width: 20px;
+ height: 20px;
+ line-height: 20px;
+ text-align: center;
+ font-size: 12px;
+ font-family: SourceHanSansSC-Medium, SourceHanSansSC;
+ font-weight: 500;
+ color: #FFFFFF;
+ }
+ .bg1 {
+ background: url('@/assets/img/rank_blue@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+ .bg2 {
+ background: url('@/assets/img/rank_yellow@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ }
+ }
+ .content_left_item1_content_row_line {
+ flex: 1;
+ margin: 0 15px;
+ &::v-deep(.el-progress-bar__outer) {
+ border-radius: 0%;
+ background: rgba(255,255,255,0.13);
+ }
+ &::v-deep(.el-progress-bar__inner) {
+ border-radius: 0%;
+ background: linear-gradient(270deg, #00B0FF 0%, #345BA3 100%);
+ }
+ }
+ .content_left_item1_content_row_num {
+ font-size: 13px;
+ font-family: SourceHanSansSC-Regular, SourceHanSansSC;
+ font-weight: 400;
+ color: #D2E0FF;
+ }
+ }
+ }
+ }
+ .content_left_item2 {
+ width: 100%;
+ .content_left_item2_head {
+ background: url('@/assets/img/home_title_short@2x.png');
+ background-repeat: no-repeat;
+ background-size: 100% 100%;
+ width: 100%;
+ height: 38px;
+ line-height: 38px;
+ padding-left: 34px;
+ box-sizing: border-box;
+ span {
+ font-size: 16px;
+ font-family: SourceHanSansSC-Bold, SourceHanSansSC;
+ font-weight: bold;
+ color: #FFFFFF;
+ line-height: 24px;
+ text-shadow: 0px 0px 10px rgba(0,24,72,0.75);
+ }
+ }
+ .content_left_item2_content {
+ width: 100%;
+ height: 361px;
+ background: linear-gradient(180deg, rgba(52,88,159,0) 0%, rgba(0,86,255,0.4) 100%);
+
+ }
+ }
}
.content_center {
- flex: 1;
+ flex: 2;
margin: 0 40px;
background-color: aquamarine;
}
.content_right {
- width: 920px;
+ flex: 1;
background-color: aquamarine;
}
}
--
Gitblit v1.9.3