xjsaas-ui/src/views/xj/document/maintenance-notice/components/view-dialog.vue

<!--
 * @Author: SunTao 328867980@qq.com
 * @Date: 2024-11-26 15:49:28
 * @LastEditors: SunTao 328867980@qq.com
 * @LastEditTime: 2024-11-26 15:49:28
 * @FilePath: \znxjxt-ui\src\views\xj\document\maintenance-notice\components\view-dialog.vue
 * @Description: 养护通知单查看弹窗
-->
<template>
  <div class="view-content">
    <div class="view-title">高速公路道路养护作业通知单</div>
    <div class="view-title-card">编号：</div>
    <div class="view-table">
      <div class="view-table-top">
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">通知时间</div>
            <div class="value">2024年-11月-20日10:32</div>
          </div>
          <div class="left-item-content">
            <div class="name">作业完成时间</div>
            <div class="value">2024年-11月20日 18:00</div>
          </div>
        </div>
        <div class="left-item-title">地点</div>
        <div class="left-item">
          <div class="left-item-content">
            <div class="name">里程桩号</div>
            <div class="value">2024年-11月-20日10:32</div>
          </div>
          <div class="left-item-content">
            <div class="name">位置</div>
            <div class="value">2024年-11月20日 18:00</div>
          </div>
        </div>
      </div>
      <div class="view-table-middle">养护作业项目</div>
      <div class="view-table-content">
        <div class="content-left-item">
          <div class="name">序号</div>
          <div class="value">内 容</div>
        </div>
        <fssm-scroll :showBar="false" style="max-height: 16rem">
          <div
            class="content-left-item"
            v-for="(item, index) in tableContent"
            :key="`content-left-item-${index}`"
          >
            <div class="name">{{ index + 1 }}</div>
            <div class="value">
              <fssm-scroll>
                {{ item }}
              </fssm-scroll>
            </div>
          </div>
        </fssm-scroll>
      </div>
      <div class="view-table-bottom">
        <span>管理处道路养护工程师：</span>
        <span>制表人：</span>
        <span>养护单位项目负责人：</span>
      </div>
    </div>
  </div>
</template>

<script>
import fssmScroll from "../../../../../components/scroll/fssm-scroll.vue";
export default {
  components: { fssmScroll },
  name: "ViewDialog",
  data() {
    return {
      // 养护作业项目
      tableContent: [
        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
        "2024年-11月-20日18:00沈吉高速-沈抚段主线K0+000-K45+000双向 LJ↑,LJ↓沈吉线 K0-45 硬路肩有垃圾",
      ],
    };
  },
  methods: {},
};
</script>

<style scoped lang="scss">
.view-content {
  width: 100%;
  height: 100%;

  .view-title {
    display: flex;
    justify-content: center;
    font-size: 1.5rem;
    font-weight: bold;
  }

  .view-title-card {
    display: flex;
    justify-content: flex-end;
    font-size: 1rem;
  }
}

.view-table {
  font-size: 1rem;

  .view-table-top {
    width: 100%;
    height: 6rem;
    display: flex;

    .left-item {
      width: 45%;
      height: 100%;

      .left-item-content {
        width: 100%;
        height: 50%;
        display: flex;

        > div {
          border: 1px solid black;
        }

        .name {
          width: 40%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }

        .value {
          width: 60%;
          height: 100%;
          display: flex;
          justify-content: center;
          align-items: center;
        }
      }
    }

    .left-item-title {
      width: 10%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      border: 1px solid black;
    }
  }

  .view-table-middle {
    width: 100%;
    height: 3rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }

  .view-table-content {
    width: 100%;
    max-height: 20rem;

    .content-left-item {
      width: 100%;
      height: 4rem;
      display: flex;

      .name {
        width: 10%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }

      .value {
        width: 90%;
        height: 100%;
        padding: 0.25rem 1rem;
        display: flex;
        justify-content: center;
        align-items: center;
        border: 1px solid black;
      }
    }
  }

  .view-table-bottom {
    width: 100%;
    padding: 0 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
</style>