EOC-UI/src/views/right/components/warningDialog.vue

<template>
  <div class="warning-container">
    <div class="warning-dialog">
      <div class="header-box">
        <span class="title">收到新的风险报告，请尽快处置</span>
        <div class="right-time">{{ getNewTime() }}</div>
      </div>
      <div class="content-box">
        <div class="left-box">
          <div class="text">长宁区关于不明原因肺炎的报告</div>
          <div class="num">3例</div>
        </div>
        <div class="right-box">
          <div class="text">上海市疾控报告</div>
        </div>
      </div>
    </div>
    <div class="button-box">
      <div class="button-item">
        <div class="content">暂时忽略</div>
      </div>
      <div class="button-item"><div class="content">立即查看</div></div>
    </div>
  </div>
</template>

<script setup>
const getNewTime = () => {
  return (
    new Date().toLocaleDateString() +
    " " +
    new Date().toLocaleTimeString().slice(0, 5)
  );
};
</script>

<style lang="scss" scope>
.warning-container {
  position: fixed;
  right: 1420px;
  top: 170px;
  .warning-dialog {
    width: 702px;
    height: 84px;
    z-index: 9;
    background-image: url("../../../assets/img/框@2x.png");
    background-size: 100% 100%;
    .header-box {
      position: relative;
      height: 26px;
      font-family: YouSheBiaoTiHei;
      padding-left: 40px;

      .title {
        font-size: 24px;
        line-height: 26px;
        text-align: left;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(to bottom, #ffffff 10%, #ffe6e6 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
      .right-time {
        position: absolute;
        right: 50px;
        top: 50%;
        transform: translateY(-50%);
      }
      &::after {
        position: absolute;
        content: "";
        left: 10px;
        width: 27px;
        height: 24px;
        top: 50%;
        transform: translateY(-50%);
        background-image: url("../../../assets/img/提示图@2x.png");
        background-size: 100% 100%;
      }
    }
    .content-box {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: calc(100% - 26px);
      padding: 0 15px;
      .text {
        font-family: Alibaba PuHuiTi;
        font-weight: normal;
        font-size: 18px;
        line-height: 26px;
        color: #ffffff;
        text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        text-align: left;
        font-style: normal;
        text-transform: none;
      }
      .left-box {
        display: flex;
        align-items: center;
        .num {
          line-height: 1;
          height: 25px;
          line-height: 26px;
          font-family: Alibaba PuHuiTi;
          font-weight: normal;
          font-size: 24px;
          text-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
          text-align: left;
          font-style: normal;
          text-transform: none;
          background: linear-gradient(
            89.99999989586553deg,
            #ffffff 0%,
            #ffdf6c 100%
          );
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
      .right-box {
        .text {
          font-size: 16px;
        }
      }
    }
  }
  .button-box {
    display: flex;
    justify-content: flex-end;
    .button-item {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 102px;
      height: 42px;
      background-image: url("../../../assets/img/tips@2x.png");
      background-size: 100% 100%;
      padding-right: 5px;
      padding-bottom: 5px;
      margin-top: 10px;
      margin-left: 10px;
      cursor: pointer;
      .content {
        font-family: YouSheBiaoTiHei;
        font-weight: 400;
        font-size: 20px;
        line-height: 20px;
        // text-shadow: 0px 2px 5px #001751;
        text-align: center;
        font-style: normal;
        text-transform: none;
        background: linear-gradient(
          89.99999804120293deg,
          #ffffff 0%,
          #a4e9ff 100%
        );
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
      }
    }
  }
}
</style>