From af989f35ae4f1c29237364a44aff832b7851f06f Mon Sep 17 00:00:00 2001
From: 黄何裕 <1053952480@qq.com>
Date: 星期二, 30 七月 2024 16:19:04 +0800
Subject: [PATCH] ！！！
---
src/views/screen/newPage/index.vue | 170 ++++++++++++++++++++++++++++++++++++++------------------
1 files changed, 114 insertions(+), 56 deletions(-)
diff --git a/src/views/screen/newPage/index.vue b/src/views/screen/newPage/index.vue
index ce4a6b7..f278dd9 100644
--- a/src/views/screen/newPage/index.vue
+++ b/src/views/screen/newPage/index.vue
@@ -1,8 +1,7 @@
<template>
<div class="new-page">
- <div style="display: flex; justify-content: space-between">
+ <div style="display: flex; justify-content: center">
<div class="header_box">
- <h1>杩愮淮鑰冩牳澶у睆</h1>
<div class="tabs-box">
<el-tabs v-model="activeName" @tab-click="handleClick">
<el-tab-pane
@@ -18,6 +17,19 @@
</div>
<div style="display: flex; justify-content: space-between">
<div class="left_box">
+ <div class="titleCard" style="height: 90px; width: 450px">
+ <div>杩愮淮鑰冩牳澶у睆</div>
+ </div>
+ <div class="card" style="height: 622px">
+ <div class="card_header"><div class="title">宸ュ崟鏁版嵁</div></div>
+ <div><ScreenData></ScreenData></div>
+ </div>
+ </div>
+ <div class="large_screen_box">
+ <NewMap></NewMap>
+ </div>
+
+ <div class="left_box">
<div class="card">
<div class="card_header">
<div class="title">璁惧鏁版嵁</div>
@@ -32,15 +44,24 @@
<div style="margin: 0 10px">浜鸿劯</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num type1"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type1">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num type2"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type2">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num type3"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type3">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
</div>
<div class="device_data">
@@ -52,15 +73,24 @@
<div style="margin: 0 10px">杞﹁締</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num type1"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type1">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num type2"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type2">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num type3"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type3">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
</div>
<div class="device_data">
@@ -72,15 +102,24 @@
<div style="margin: 0 10px">瑙嗛</div>
<div class="data-info">
<div class="data-lable">璁惧鎬绘暟</div>
- <div class="data-num type1"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type1">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧姝ｅ父鏁�</div>
- <div class="data-num type2"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type2">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
<div class="data-info">
<div class="data-lable">璁惧寮傚父鏁�</div>
- <div class="data-num type3"><span v-roll>{{ 1123 }}</span><i class="el-icon-bottom"></i></div>
+ <div class="data-num type3">
+ <span v-roll>{{ 1123 }}</span
+ ><i class="el-icon-bottom"></i>
+ </div>
</div>
</div>
</div>
@@ -94,25 +133,12 @@
</div>
</div>
</div>
- <div class="large_screen_box">
- <NewMap></NewMap>
- </div>
- <div class="left_box">
- <div class="card" style="height: 103px">
- <div class="card_header"></div>
- <div>杩愮淮鑰冩牳澶у睆</div>
- </div>
- <div class="card" style="height: 500px">
- <div class="card_header"><div class="title">浜鸿劯鑰冩牳鏁版嵁</div></div>
- <div><ScreenData></ScreenData></div>
- </div>
- </div>
</div>
<div class="footer_box">
<div class="footer_card">
<div class="card_header">
<div class="title">浜鸿劯鑰冩牳鏁版嵁</div>
- <div style="width: 600px;">
+ <div style="width: 600px; margin-left: -20px">
<ExamineChart class="wrapper-item"></ExamineChart>
</div>
</div>
@@ -120,7 +146,7 @@
<div class="footer_card">
<div class="card_header">
<div class="title">杞﹁締鑰冩牳鏁版嵁</div>
- <div style="width: 600px;">
+ <div style="width: 600px; margin-left: -20px">
<ExamineChart class="wrapper-item"></ExamineChart>
</div>
</div>
@@ -128,7 +154,7 @@
<div class="footer_card">
<div class="card_header">
<div class="title">瑙嗛鑰冩牳鏁版嵁</div>
- <div style="width:600px;">
+ <div style="width: 600px; margin-left: -20px">
<ExamineChart class="wrapper-item"></ExamineChart>
</div>
</div>
@@ -143,7 +169,7 @@
import ScreenMapThree from "../components/screen-map-three/index";
import ExamineChart from "../components/screen-examine/components/examine-chart.vue";
import ScreenData from "../components/screen-data/index.vue";
-import NewMap from "./components/newMap.vue"
+import NewMap from "./components/newMap.vue";
export default {
name: "Newpage",
components: {
@@ -177,7 +203,7 @@
mounted() {},
methods: {
returnPath() {
- this.$router.push('/index');
+ this.$router.push("/index");
},
handleClick() {},
},
@@ -191,31 +217,43 @@
display: flex;
align-items: center;
margin-top: 10px;
+ margin-left: -25px;
}
.return-button {
- position: absolute;
- right: 20px;
- top: 20px;
- border-radius: 4px;
- border: 1px solid #4481DD;
- background-color: rgba(67, 102, 155, 0.4);
- color: #4481DD;
- padding: 5px 20px;
- cursor: pointer;
-}
+ position: absolute;
+ right: 20px;
+ top: 20px;
+ background: url("../../../assets/images/screen/backBt.png");
+ background-size: 100% 100%;
+ background-repeat: no-repeat !important;
+ background-position: center center !important;
+ color: #4481dd;
+ padding: 15px 25px;
+ cursor: pointer;
+ }
}
::v-deep .tabs-box {
margin-top: 5px;
.el-tabs__item {
color: #ffffff !important;
- font-size: 20px;
+ font-size: 24px;
}
.is-active {
color: #66b5ff !important;
- background: url("../../../assets/images/screen/button1.png");
- background-size: cover !important;
- background-repeat: no-repeat !important;
- background-position: center center !important;
+ // background: url("../../../assets/images/screen/button1.png");
+ // background-size: cover !important;
+ // background-repeat: no-repeat !important;
+ // background-position: center center !important;
+ background: linear-gradient(#66b5ff, #66b5ff) left top,
+ linear-gradient(#66b5ff, #66b5ff) left top,
+ linear-gradient(#66b5ff, #66b5ff) right top,
+ linear-gradient(#66b5ff, #66b5ff) right top,
+ linear-gradient(#66b5ff, #66b5ff) left bottom,
+ linear-gradient(#66b5ff, #66b5ff) left bottom,
+ linear-gradient(#66b5ff, #66b5ff) right bottom,
+ linear-gradient(#66b5ff, #66b5ff) right bottom;
+ background-repeat: no-repeat;
+ background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
}
}
::v-deep .el-input__inner {
@@ -235,22 +273,33 @@
/* 鍘绘帀tabs鏍囩鏍忎笅鐨勪笅鍒掔嚎 */
::v-deep .el-tabs__nav-wrap::after {
position: static !important;
-// background-color: #fff;
+ // background-color: #fff;
}
-::v-deep .el-tabs__active-bar{
- width: 0 !important;
+::v-deep .el-tabs__active-bar {
+ width: 0 !important;
}
::v-deep .el-tabs__item {
margin: 5px 30px;
padding: 0px 25px !important;
- border-radius: 5px;
- background: url("../../../assets/images/screen/button.png");
- background-size: 100% 100%;
- background-repeat: no-repeat !important;
- background-position: center center !important;
+ background: linear-gradient(#ffffff, #ffffff) left top,
+ linear-gradient(#ffffff, #fff) left top,
+ linear-gradient(#ffffff, #ffffff) right top,
+ linear-gradient(#ffffff, #ffffff) right top,
+ linear-gradient(#ffffff, #ffffff) left bottom,
+ linear-gradient(#ffffff, #ffffff) left bottom,
+ linear-gradient(#ffffff, #ffffff) right bottom,
+ linear-gradient(#ffffff, #ffffff) right bottom;
+ background-repeat: no-repeat;
+ background-size: 0.1vw 0.5vw, 0.5vw 0.1vw;
+ // background-color: rgba(65, 136, 242, 0.1);
+ // background: url("../../../assets/images/screen/button.png");
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat !important;
+ // background-position: center center !important;
}
.left_box {
width: 460px;
+ position: relative;
.card {
height: 300px;
width: 460px;
@@ -258,6 +307,17 @@
.card_header {
height: 40px;
}
+ }
+ .titleCard {
+ // background: url("../../../assets/images/screen/titleBg.png");
+ // background-size: 100% 100%;
+ // background-repeat: no-repeat !important;
+ // background-position: center center !important;
+ font-size: 36px;
+ font-weight: bold;
+ position: absolute;
+ top: -60px;
+ left: 0px;
}
}
.large_screen_box {
@@ -284,12 +344,10 @@
.footer_box {
width: 100%;
height: 320px;
- background: url("../../../assets/images/screen/cardBg.png");
- background-size: 100% 100%;
- background-repeat: no-repeat !important;
- background-position: center center !important;
+ background: rgba(90, 125, 179, 0.1) !important;
display: flex;
justify-content: space-between;
+ border: rgba(84, 132, 203, 0.4) 2px solid;
.footer_card {
width: 33%;
margin: 5px 0;
--
Gitblit v1.8.0