tmzn-weihe/src/views/smart-early-warning/left.vue

<template>
  <BasePanelLeft>
    <div class="warning-container">
      <BaseMain title="预警列表">
        <template v-slot:mainArea>
          <div class="list-container">
            <el-input placeholder="请输入关键字" suffix-icon="el-icon-search" v-model="searchVal"> </el-input>
            <div class="list-content">
              <div class="item" v-for="(item, index) in listItem" :key="index">
                <div class="left">
                  <img :src="item.img" alt="" />
                </div>
                <div class="right">
                  <div class="title">{{ item.title }}</div>
                  <div class="txt">{{ item.address }}</div>
                  <div class="txt">{{ item.date }}</div>
                  <div class="jzDate">{{ item.deadline }}</div>
                </div>
              </div>
            </div>
            <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page.sync="currentPage"
              :page-size="pageSize"
              layout="total, prev, pager, next"
              :total="total"
            >
            </el-pagination>
          </div>
        </template>
      </BaseMain>
    </div>
  </BasePanelLeft>
</template>

<script>
import BasePanelLeft from '@/components/base-panel/base-panel-left'
import BaseMain from '@/components/base-main/base-main.vue'
import ImgUrl from '@/assets/image/smart-early-warning/img1.png'
export default {
  data() {
    return {
      searchVal: '',
      currentPage: 1,
      pageSize: 6,
      total: 0,
      listItem: [
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        },
        {
          img: ImgUrl,
          title: '乱建预警',
          address: '咸阳兴平仪空村',
          date: '2025-01-15 14:00:00',
          deadline: '剩余0天 00:28:12'
        }
      ]
    }
  },
  components: {
    BasePanelLeft,
    BaseMain
  },
  created() {
    this.total = this.listItem.length
  },
  methods: {
    handleSizeChange() {},
    handleCurrentChange() {}
  }
}
</script>

<style lang="scss" scoped>
.warning-container {
  position: absolute;
  top: px-to-rem(66);
  z-index: 1;
  left: px-to-rem(-4);
  height: calc(100% - px-to-rem(75));
  :deep(.baseMainContainer) {
    height: inherit;
    .content-area {
      height: 100%;
    }
  }
  .list-container {
    padding: px-to-rem(11);
    height: 100%;
    :deep(.el-input__inner) {
      background: linear-gradient(0deg, #4586de 0%, #1a2d46 100%);
      border-radius: px-to-rem(6);
      border: px-to-rem(2) solid #94c0f7;
      font-weight: 400;
      font-size: px-to-rem(14);
      color: #f5f5f5;
    }
    .list-content {
      margin-top: px-to-rem(10);
      height: 87%;
      overflow: auto;
      scrollbar-width: none;
      -ms-overflow-style: none;
      .item {
        display: flex;
        justify-content: flex-start;
        gap: px-to-rem(10);
        background: rgba(79, 159, 255, 0.2);
        border-radius: px-to-rem(4);
        border: px-to-rem(1) solid #4f9fff;
        padding: px-to-rem(7);
        margin-bottom: px-to-rem(9);
        .left {
          img {
            width: px-to-rem(130);
            height: 100%;
          }
        }
        .right {
          .title {
            font-weight: bold;
            font-size: px-to-rem(14);
            color: #ffffff;
          }
          .txt {
            font-weight: 400;
            font-size: px-to-rem(14);
            color: #ffffff;
          }
          .jzDate {
            width: px-to-rem(112);
            height: px-to-rem(18);
            background: rgba(61, 116, 232, 0.3);
            border-radius: px-to-rem(9);
            font-weight: 400;
            font-size: px-to-rem(12);
            color: #4f9fff;
          }
        }
      }
    }
    :deep(.el-pagination) {
      margin-top: px-to-rem(22);
      display: flex;
      justify-content: flex-end;
      align-items: center;
      .el-pagination__total {
        font-weight: 500;
        font-size: px-to-rem(14);
        color: #ffffff;
      }
      button,
      .el-pager li {
         color: #fff;
        background-color: transparent;
        border-radius: px-to-rem(2);
        width: px-to-rem(24);
        height: px-to-rem(24);
        padding: 0;
        min-width: auto;
        line-height: px-to-rem(24);
        font-size: px-to-rem(14);
      }
      .el-pager li.active {
        background: #3d74e8;

        color: #fff;
      }
    }
  }
}
</style>