按钮样式，布局

黄何裕

2024-07-30 6ab1393efd4413a0edf6698e61264edfc069f2ae

按钮样式，布局

 src/assets/images/screen/backBt.png

 src/assets/images/screen/button1.png

 src/assets/images/screen/cardBg.png

 src/assets/images/screen/titleBg.png

 src/views/screen/components/screen-data/index.vue

@@ -7,7 +7,7 @@

    <div class="data-content">
      <div class="data-panel">
        <div class="panel-title">
        <div class="panel-title" style="margin-bottom: 30px;">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>
@@ -38,7 +38,7 @@
        </div>
      </div>
      <div class="data-panel">
        <div class="panel-title">
        <div class="panel-title" style="margin: 50px 0 30px 0;">
          <div class="icon">
            <img src="@/assets/icons/arrow.png" alt="" />
          </div>

 src/views/screen/components/screen-examine/components/examine-chart.vue

@@ -2,7 +2,7 @@
  <div class="chart-container">
    <div class="rank-chart">
      <div class="hola-item" v-for="item in dataList" :key="item.id">
        <examine-hola :startColor="'#4ea8ff'" :endColor="'#178fff'" :centerValue="item.value" :bottomTitle="item.name"
        <examine-hola :startColor="'#124ae4'" :endColor="'#99b3fd'" :centerValue="item.value" :bottomTitle="item.name"
          :routerPath="item.routerUrl"></examine-hola>
      </div>
    </div>

 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,18 +217,20 @@
    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;
@@ -235,22 +263,25 @@
/* 去掉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;
  border: 1px solid rgba(92, 148, 233, 0.4);
  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 +289,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 +326,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;