From b0a100049a8b54463519c53c06c6a10e64de95ab Mon Sep 17 00:00:00 2001
From: ZhangXianQiang <1135831638@qq.com>
Date: 星期四, 29 二月 2024 16:49:04 +0800
Subject: [PATCH] feat:点击查看图片
---
src/views/index/index.vue | 470 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 464 insertions(+), 6 deletions(-)
diff --git a/src/views/index/index.vue b/src/views/index/index.vue
index 6c1907c..489bb3a 100644
--- a/src/views/index/index.vue
+++ b/src/views/index/index.vue
@@ -1,13 +1,471 @@
<script setup lang="ts">
-import {currentGET} from "@/api"
-currentGET("leftTop").then(res=>{
- console.log(res);
-})
+import ItemWrap from "@/components/item-wrap";
+import MenuHeader from "@/components/menu-header.vue";
+import LeftTop from "./left-top.vue";
+import LeftCenter from "./left-center.vue";
+import LeftBottom from "./left-bottom.vue";
+import CenterMap from "./center-map.vue";
+import CenterBottom from "./center-bottom.vue";
+import RightTop from "./right-top.vue";
+import RightTop1 from "./right-top2.vue";
+import RightCenter from "./right-center.vue";
+import RightBottom from "./right-bottom.vue";
+// import chart2 from "./chart2.vue";
+import BorderBox13 from "@/components/datav/border-box-13";
+const config = {
+ header: ['<span style="color:#42C3E8;font-size: 16px">鎺掑悕</span>', '<span style="color:#42C3E8;font-size: 16px">琛屾斂鍖哄垝</span>','<span style="color:#42C3E8;font-size: 16px">鏁板��</span>'],
+ data: [
+ ['1', '澶╅┈闀�', '45'],
+ ['5', '鐏屽彛琛楅亾', '21'],
+ ['8', '閾舵潖琛楅亾', '17'],
+ ['12', '闈掑煄灞卞埌', '78'],
+ ['45', '鑱氭簮闀�', '33'],
+ ['123', '榫欐睜闀�', '48'],
+ ['64', '鐜夊爞琛楅亾', '92'],
+ ['85', '鐏屽彛琛楅亾', '74'],
+ ['75', '骞哥琛楅亾', '43'],
+ ['784', '婵槼琛楅亾', '58']
+ ],
+ // index: true,
+ // columnWidth: [50],
+ align: ['center'],
+ headerBGC:"rgba(0,0,0,0.5)",
+}
+const config1 = [{
+ title:'姣涘彂鎶芥鎶ラ亾鐜�',
+ length: 10,
+},{
+ title:'姣涘彂鎶芥闃虫�х巼',
+ length: 90,
+},{
+ title:'鎴掓柇涓夊勾鏈鍚镐汉鍛樻煡澶�',
+ length: 82,
+},{
+ title:'鍦ㄥ唽鍚告瘨浜哄憳婊嬩簨琛屼负',
+ length: 130,
+},{
+ title:'鏄撳埗姣掑寲瀛﹀搧绠℃帶闂',
+ length: 110,
+},{
+ title:'杈栧尯鍐呭嚭鐜拌仛闆嗘互鐢ㄧ獫鐐规暟',
+ length: 9,
+}]
+const config2 = [{
+ title:'澶栨祦娑夋瘨浜哄憳鏁�',
+ length: 10,
+},{
+ title:'鏂板彂鐜板惛姣掍汉鍛樻暟',
+ length: 90,
+},{
+ title:'姣掑搧涓浆闆嗘暎鏁伴噺',
+ length: 82,
+},{
+ title:'鏈垚骞存秹姣掍汉鍛樻暟',
+ length: 130,
+},{
+ title:'鍒舵瘨绐濈偣鏁伴噺',
+ length: 110,
+},{
+ title:'澶栧崗婧簮琚煡鑾锋暟',
+ length: 9,
+}]
</script>
<template>
- <div class="">
+ <div class="index-box">
+ <div class="contetn_left">
+ <!-- <div class="pagetab">
+ <div class="item">瀹炴椂鐩戞祴</div>
+ <div class="item">缁熻鍒嗘瀽</div>
+ </div> -->
+
+ <MenuHeader class="contetn_left-top contetn_lr-item" title="缁村害鎸囨暟">
+ <LeftTop />
+ </MenuHeader>
+ <div class="contetn_lr-item_contetn">
+ <div class="contetn_lr-item_left">
+ <div style="height: 47%">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 姣掑搧婊ョ敤鎸囨暟鎺掑悕 </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鐪佸唴鎺掑悕</el-button>
+ <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">鍚勯晣琛楁帓鍚�</el-button>
+ </div>
+ </div>
+
+ <div
+ class="item_title_content_def"
+ >
+ <dv-scroll-board :config="config" style="width:500px;height:220px" />
+ </div
+ ></BorderBox13>
+ </div>
+
+<!-- <ItemWrap-->
+<!-- class="contetn_left-bottom contetn_lr-item"-->
+<!-- title="姣掑搧婊ョ敤鎸囨暟鎺掑悕"-->
+<!-- style="padding: 0 10px 16px 10px"-->
+<!-- >-->
+<!-- <div>-->
+<!-- <el-button> 鐪佸唴鎺掑悕</el-button>-->
+<!-- </div>-->
+<!-- <dv-scroll-board :config="config" style="width:500px;height:220px" />-->
+<!--<!– <LeftBottom />–>-->
+<!-- </ItemWrap>-->
+
+<!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鎶ヨ娆℃暟">-->
+<!-- <RightTop />-->
+<!-- </ItemWrap>-->
+
+ <div style=" height: 53%;">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 鍚勯晣琛楁帓鍚嶈秼鍔垮彉鍖� </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">闈掑煄灞遍晣</el-button>
+ </div>
+ </div>
+ <div class="item_title_content_def" >
+ <RightTop/>
+ </div>
+ </BorderBox13>
+ </div>
+ </div>
+ <div class="contetn_lr-item_right">
+ <div style="height: 100%;">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 閮芥睙鍫板競鍏抽敭鎸囨爣鏁版嵁 </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈湀</el-button>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈</el-button>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈勾</el-button>
+ </div>
+ </div>
+ <div class="item_title_content_def" >
+ <div style="height: 50%;">
+ <p>瑕佺礌绠℃帶</p>
+ <div style="display:flex; justify-content: space-between;flex-wrap: wrap">
+ <div v-for="(item,index) in config1" :key="index" class="contetn_left-center_item_center">
+ <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>
+ <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>
+ </div>
+ </div>
+ </div>
+ <div>
+ <p>椋庨櫓绠℃帶</p>
+ <div style="display:flex; justify-content: space-between;flex-wrap: wrap">
+ <div v-for="(item,index) in config2" :key="index" class="contetn_left-center_item_center">
+ <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>
+ <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </BorderBox13>
+ </div>
+<!-- <ItemWrap class="contetn_left-center contetn_lr-item" style="height: 100%;" title="閮芥睙鍫板競鍏抽敭鎸囨爣鏁版嵁">-->
+<!-- <div style="height: 50%;">-->
+<!-- <p>瑕佺礌绠℃帶</p>-->
+<!-- <div style="display:flex; justify-content: space-between;flex-wrap: wrap">-->
+<!-- <div v-for="(item,index) in config1" :key="index" class="contetn_left-center_item_center">-->
+<!-- <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>-->
+<!-- <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- <div>-->
+<!-- <p>椋庨櫓绠℃帶</p>-->
+<!-- <div style="display:flex; justify-content: space-between;flex-wrap: wrap">-->
+<!-- <div v-for="(item,index) in config2" :key="index" class="contetn_left-center_item_center">-->
+<!-- <div><el-icon color="yellow"><StarFilled /></el-icon> {{item.title}}</div>-->
+<!-- <div style="padding-left: 20px;margin-top: 10px">{{item.length}}</div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!-- </div>-->
+<!--<!– <LeftCenter />–>-->
+
+<!-- </ItemWrap>-->
+ </div>
+ </div>
+<!-- <ItemWrap class="contetn_left-center contetn_lr-item" title="鐢ㄦ埛鎬昏">-->
+<!-- <LeftCenter />-->
+<!-- <div>test</div>-->
+<!-- </ItemWrap>-->
+<!-- <ItemWrap-->
+<!-- class="contetn_left-bottom contetn_lr-item"-->
+<!-- title="璁惧鎻愰啋"-->
+<!-- style="padding: 0 10px 16px 10px"-->
+<!-- >-->
+<!-- <LeftBottom />-->
+<!-- </ItemWrap>-->
+ </div>
+ <div class="contetn_center">
+ <CenterMap class="contetn_center_top" title="璁惧鍒嗗竷鍥�" />
+<!-- <ItemWrap class="contetn_center-bottom" title="瀹夎璁″垝">-->
+<!-- <CenterBottom />-->
+<!-- </ItemWrap>-->
+ </div>
+ <div style="display:flex;">
+ <div>
+ <div style="height: 50%;">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 閮芥睙鍫版瘨鍝佺患鍚堟互鐢ㄨ秼鍔垮垎鏋� </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈湀</el-button>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈</el-button>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈勾</el-button>
+ </div>
+ </div>
+ <div style="width: 100%;height: 90%;">
+ <RightTop1 />
+ </div>
+ </BorderBox13>
+ </div>
+<!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鎶ヨ娆℃暟">-->
+<!-- <RightTop />-->
+<!-- </ItemWrap>-->
+<!-- <ItemWrap-->
+<!-- class="contetn_left-bottom contetn_lr-item"-->
+<!-- title="鎶ヨ鎺掑悕(TOP8)"-->
+<!-- style="padding: 0 10px 16px 10px"-->
+<!-- >-->
+<!-- <RightCenter />-->
+<!-- </ItemWrap>-->
+ <div style="height: 50%;">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 鍏抽敭鎸囨爣鏁版嵁 </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏂板彂鐜板惛姣掍汉鍛�</el-button>
+ </div>
+ </div>
+ <div style="width: 100%;height: 100%;">
+ <RightCenter />
+ </div>
+ </BorderBox13>
+ </div>
+ </div>
+ <div>
+ <div style="height: 50%">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 鍚勯晣琛楃姣掓暣鏀瑰伐浣� </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈勾</el-button>
+ <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">鏈湀</el-button>
+ <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">鏈</el-button>
+ </div>
+ </div>
+ <div style="display: flex;justify-content: space-between">
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">211</p>
+ <p>娲惧崟鏁伴噺</p>
+ </div>
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">188</p>
+ <p>宸插鐞�</p>
+ </div>
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">23</p>
+ <p>鏈鐞�</p>
+ </div>
+ </div>
+ <div
+ class="item_title_content_def"
+ >
+ <dv-scroll-board :config="config" style="width:500px;height:70%" />
+ <div style="text-align: right;font-size: 16px">
+ <span>鏃堕棿锛�2023-01-01鑷�2023-12-31</span>
+ </div>
+ </div
+ ></BorderBox13>
+ </div>
+ <div style="height: 50%">
+ <BorderBox13 >
+ <div style="display: flex;justify-content: space-between">
+ <div class="item_title">
+ <div class="zuo"></div>
+ <span class="title-inner"> 鐩稿叧鍗曚綅绂佹瘨鏁存敼宸ヤ綔 </span>
+ <div class="you"></div>
+ </div>
+ <div>
+ <el-button class="contetn_lr-item-btn" style="background-color: #4D264D;color: white;border: none">鏈勾</el-button>
+ <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">鏈湀</el-button>
+ <el-button style="background-color: #56466C;margin-left: 5px;color: white;border: none">鏈</el-button>
+ </div>
+ </div>
+ <div style="display: flex;justify-content: space-between">
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">211</p>
+ <p>娲惧崟鏁伴噺</p>
+ </div>
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">188</p>
+ <p>宸插鐞�</p>
+ </div>
+ <div class="right-right-zg" >
+ <p style="color:#EC563E ">23</p>
+ <p>鏈鐞�</p>
+ </div>
+ </div>
+ <div
+ class="item_title_content_def"
+ >
+ <dv-scroll-board :config="config" style="width:500px;height:65%" />
+ <div style="text-align: right;font-size: 16px">
+ <span>鏃堕棿锛�2023-01-01鑷�2023-12-31</span>
+ </div>
+ </div
+ ></BorderBox13>
+ </div>
+<!-- <ItemWrap class="contetn_left-bottom contetn_lr-item" title="鏁版嵁缁熻鍥� ">-->
+<!-- <RightBottom />-->
+<!-- </ItemWrap>-->
+ </div>
+
+ </div>
</div>
</template>
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.index-box {
+ width: 100%;
+ display: flex;
+ min-height: calc(100% - 64px);
+ justify-content: space-between;
+}
+//宸﹁竟 鍙宠竟 缁撴瀯涓�鏍�
+.contetn_left,
+.contetn_right {
+ display: flex;
+ flex-direction: column;
+ //justify-content: space-around;
+ position: relative;
+ width: 1260px;
+ box-sizing: border-box;
+ flex-shrink: 0;
+}
+.contetn_center {
+ flex: 1;
+ margin: 0 54px;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-around;
+ .contetn_center-bottom {
+ height: 315px;
+ }
+}
+
+.contetn_lr-item {
+ height: 310px;
+}
+.contetn_lr-item_right{
+ flex: auto;
+}
+.contetn_lr-item_left{
+
+}
+.contetn_lr-item_contetn{
+ display: flex;
+}
+.contetn_left-center_item_center{
+ padding: 1rem 0.5rem;
+
+ margin-top: 5px;
+ //border: 1px solid #ccc;
+ width: 49%;
+ height: 75px;
+ background-color: #172451;
+}
+.header{
+ background-color: #121E44;
+}
+$item-title-height: 38px;
+$item_title_content-height: calc(100% - 38px);
+
+.item_title {
+ height: $item-title-height;
+ line-height: $item-title-height;
+ //width: 100%;
+ color: #31abe3;
+ text-align: center;
+ // background: linear-gradient(to right, transparent, #0f0756, transparent);
+ position: relative;
+ display: flex;
+ align-items: center;
+ //justify-content: center;
+
+ .zuo,
+ .you {
+ width: 58px;
+ height: 14px;
+ background-image: url("@/assets/img/titles/zuo.png");
+ }
+
+ .you {
+ transform: rotate(180deg);
+ }
+ .title-inner {
+ font-weight: 900;
+ letter-spacing: 2px;
+ background: linear-gradient(
+ 92deg,
+ #0072ff 0%,
+ #00eaff 48.8525390625%,
+ #01aaff 100%
+ );
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ }
+}
+
+:deep(.dv-border-box-content) {
+ box-sizing: border-box;
+ padding: 6px 16px 0px;
+}
+
+.item_title_content {
+ height: $item_title_content-height;
+}
+
+.item_title_content_def {
+ width: 100%;
+ height: 100%;
+}
+.right-right-zg{
+ background-color: #172451;
+ width: 120px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ padding: 20px 0;
+}
+</style>
--
Gitblit v1.8.0