查询漏率modal

2 years ago · 22c02f7283
7 changed files with 158 additions and 16 deletions
--- a/index.html
+++ b/index.html
@ -3,7 +3,7 @@
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
    <title>鹏成科技</title>
  </head>
  <body>
    <div id="app"></div>
--- a/src/assets/img/close.png
+++ b/src/assets/img/close.png
--- a/src/assets/img/error.png
+++ b/src/assets/img/error.png
--- a/src/assets/img/ok.png
+++ b/src/assets/img/ok.png
--- a/src/components/Tube.vue
+++ b/src/components/Tube.vue
@ -102,24 +102,21 @@ onMounted(() => {
 <style lang="scss" scoped>
 .tube_container {
  width: 720px;
  height: 365px;
  border-radius: 14px;
  background: #f6f8fa;
  width: 740px;
  height: 361px;
  box-sizing: border-box;
  padding: 10px;
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(5, 1fr);
  column-gap: 10px;
  row-gap: 10px;
  column-gap: 14px;
  row-gap: 14px;
  .tube_wrap {
    width: 61px;
    height: 61px;
    opacity: 1;
    background: #d6d6d6;
    background: #ffffff;
    box-sizing: border-box;
    border: 3px solid #d2d2d2;
    border: 3px solid #53dd79;
    display: flex;
    align-items: center;
    justify-content: center;
@ -128,12 +125,13 @@ onMounted(() => {
    font-weight: bold;
    line-height: normal;
    letter-spacing: 0.02em;
    color: #ffffff;
    color: #5fec85;
    border-radius: 50%;
  }
  .active {
    background: #5f82ec;
    border: 3px solid #5779e0;
    background: #5fec85;
    border: 3px solid #53dd79;
    color: #ffffff;
  }
 }
 </style>
--- a/src/components/modals/LeakRateModal.vue
+++ b/src/components/modals/LeakRateModal.vue
@ -0,0 +1,118 @@
 <template>
  <div class="leak_rate_container">
    <div class="modal_content">
      <div class="modal_header">
        <p class="title">查询所有漏率</p>
        <img :src="Close" alt="关闭" class="close_img" />
      </div>
      <div class="modal_info">
        <div class="info_wrap" v-for="item in 50" :key="item">
          <img class="info_img" :src="Ok" alt="正确" />
          <p class="info_text">{{ `A-${formatTubeNumber(item)}` }}</p>
        </div>
      </div>
      <div class="modal_bottom">
        <div class="btn">确认</div>
      </div>
    </div>
  </div>
 </template>
 <script setup>
 import Close from '@/assets/img/close.png'
 import Error from '@/assets/img/error.png'
 import Ok from '@/assets/img/ok.png'
 import { formatTubeNumber } from '@/utils'
 </script>
 <style lang="scss" scoped>
 .leak_rate_container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(5, 14, 42, 0.7);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  .modal_content {
    width: 760px;
    height: 680px;
    border-radius: 20px;
    background: #ffffff;
    box-sizing: border-box;
    overflow: hidden;
    .modal_header {
      width: 760px;
      height: 90.88px;
      box-sizing: border-box;
      border-radius: 20px 20px 0px 0px;
      background: #f6f8fa;
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 41px;
      .title {
        font-family: Source Han Sans CN;
        font-size: 26px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 0.04em;
        color: #9395a0;
      }
      .close_img {
        width: 36px;
        height: 36px;
      }
    }
    .modal_info {
      padding: 43px 56px;
      box-sizing: border-box;
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      grid-template-rows: repeat(10, 1fr);
      column-gap: 53px;
      row-gap: 15px;
      .info_wrap {
        display: flex;
        align-items: center;
        .info_img {
          width: 28px;
          height: 28px;
          margin-right: 5px;
        }
        .info_text {
          font-family: Poppins;
          font-size: 18px;
          font-weight: 500;
          line-height: normal;
          letter-spacing: 0.02em;
          color: #17191c;
        }
      }
    }
    .modal_bottom {
      display: flex;
      justify-content: center;
      padding-bottom: 20px;
      .btn {
        width: 720px;
        height: 70px;
        border-radius: 8px;
        background: #565ee4;
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: Source Han Sans CN;
        font-size: 26px;
        font-weight: 500;
        line-height: normal;
        letter-spacing: 1em;
        color: #ffffff;
      }
    }
  }
 }
 </style>
--- a/src/pages/Home.vue
+++ b/src/pages/Home.vue
@ -1,11 +1,17 @@
 <template>
  <div class="home_container">
    <Tube />
    <div class="header_card_wrap">
      <div class="header_info"></div>
      <Tube />
    </div>
    <div class="content_card_wrap"></div>
    <LeakRateModal />
  </div>
 </template>
 <script setup>
 import Tube from 'cpns/Tube'
 import LeakRateModal from 'cpns/modals/LeakRateModal'
 </script>
 <style lang="scss" scoped>
@ -13,9 +19,29 @@ import Tube from 'cpns/Tube'
  width: 800px;
  height: 1280px;
  opacity: 1;
  background: #f5f7fb;
  background: #565ee4;
  overflow: hidden;
  padding: 20px;
  box-sizing: border-box;
  .header_card_wrap {
    padding: 30px;
    box-sizing: border-box;
    .header_info {
      width: 740px;
      height: 97px;
      border-radius: 48px;
      background: #f0f6fb;
      box-sizing: border-box;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 32px;
    }
  }
  .content_card_wrap {
    width: 800px;
    height: 730px;
    border-radius: 40px 40px 0 0;
    background: #ffffff;
  }
 }
 </style>