sl-sfy-safety/src/views/message/alarm-config/components/AlarmExamplePlatform.vue

<template>
  <div style="width: 450px">
    <div class="alarm-example-title"> <div class="alarm-example-block"></div>卡片页</div>
    <div class="alarm-example-card">
      <div class="alarm-example-card-head">
        <div class="alarm-example-card-head-title">报警提醒</div>
        <div style="display: flex; justify-content: center">
          <div class="alarm-example-card-head-btn">去查看</div>
          <img src="@/assets/icons/arrow-right.png" alt="" />
        </div>
      </div>
      <div class="alarm-example-card-content">
        <!-- <img src="@/assets/images/alarm-example.png" alt="" /> -->
        <div class="alarm-example-card-content-time">2024年6月25日 16:45:06:342</div>
        <div class="alarm-example-card-content-tips"
          >您好，智能检测到该区域发现员工【安全帽违规】的情况，请及时关注！</div
        >
      </div>
    </div>
    <div class="alarm-example-title"><div class="alarm-example-block"></div>详情页</div>
    <AlarmExampleTable />
  </div>
</template>

<script setup lang="ts">
  import AlarmExampleTable from './AlarmExampleTable.vue';
</script>

<style scoped lang="scss">
  .alarm-example-title {
    padding-left: 20px;
    font-size: 14px;
    color: #303133;
    line-height: 20px;
    .alarm-example-block {
      margin-right: 20px;
      width: 4px;
      height: 12px;
      background: #1777ff;
      border-radius: 3px;
      display: inline-block;
    }
  }

  .alarm-example-card {
    padding: 10px 0;
    margin: 10px 20px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 4px;

    .alarm-example-card-head {
      padding: 0 20px 10px;
      border-bottom: 1px solid rgba(0, 0, 0, 0.06);
      display: flex;
      justify-content: space-between;
      .alarm-example-card-head-title {
        display: inline-block;
        font-weight: 600;
        font-size: 15px;
        color: #646566;
      }
      .alarm-example-card-head-btn {
        display: inline-block;
        font-weight: 400;
        font-size: 14px;
        color: #1777ff;
      }
      img {
        display: inline-block;
        margin-left: 5px;
        width: 18px;
        height: 20px;
      }
    }
    .alarm-example-card-content {
      padding: 3px 20px 10px;
      .alarm-example-card-content-time {
        padding: 10px 0;
        font-weight: 400;
        font-size: 12px;
        color: #969799;
      }
      .alarm-example-card-content-tips {
        font-weight: 400;
        font-size: 13px;
        color: #646566;
      }
    }
  }
</style>