ggfwjsc/src/view/sy_details.vue

<template>
  <div class="module">
    <div class="displayFlex left_bg">
      <div class="bt_title">
        <div class="yd_title left_1">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
      </div>
      <div style="width: 97.5%">
        <el-table
          border
          :data="data.tableData"
          style="width: 100%; height: 712px; margin-bottom: 20px"
          max-height="820"
          class="table_border"
          :row-style="rowState"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="fullName" label="姓名" width="60" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="age" label="年龄" />
          <el-table-column prop="IDNumber" label="身份证号" />
          <el-table-column prop="PopulationLabel" label="人口标签" />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handle"
          v-model:current-page="pagination.currentPage"
        />
      </div>
    </div>
    <div class="displayFlex center_bg">
      <div class="bt_title">
        <div class="yd_title left_2">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
        </div>
      </div>
      <div style="width: 97.5%">
        <el-table
          border
          :data="data.tableData1"
          style="width: 100%; height: 712px; margin-bottom: 20px"
          max-height="820"
          class="table_border"
          :row-style="rowState"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="SerialNumber" label="序号" width="50" />
          <el-table-column prop="SubsidyType" label="补助类型" />
          <el-table-column prop="SubsidRecipients" label="补助对象或条件" />
          <el-table-column prop="SubsidyStandards" label="补助标准或内容" />
          <el-table-column prop="ProcessingMethod" label="办理方式或时间" />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination1.pageSize"
          :total="pagination1.total"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handle"
          v-model:current-page="pagination1.currentPage"
        />
      </div>
    </div>
    <div class="displayFlex right_bg">
      <div class="bt_title">
        <div class="yd_title left_3">
          <div class="animate-border">
            <i></i>
            <i></i>
          </div>
          <span class="text">
            <img
              v-if="data.first"
              src="@/assets/sy-table/sy_details4.png"
              class="c"
              style="width: 350px"
              @click="change"
            />
            <img
              v-else
              src="@/assets/sy-table/sy_details5.png"
              class="c"
              style="width: 350px"
              @click="change"
            />
          </span>
        </div>
      </div>
      <div style="width: 97.5%">
        <el-table
          border
          :data="data.tableData2"
          style="width: 100%; height: 712px; margin-bottom: 20px"
          max-height="800"
          class="table_border"
          :row-style="rowState"
          :header-cell-style="tableHeaderColor"
        >
          <el-table-column prop="fullName" label="姓名" width="60" />
          <el-table-column prop="address" label="地址" />
          <el-table-column prop="age" label="年龄" />
          <el-table-column prop="IDNumber" label="身份证号" />
          <el-table-column prop="PopulationLabel" label="人口标签" />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination2.pageSize"
          :total="pagination2.total"
          prev-text="上一页"
          next-text="下一页"
          @current-change="handle"
          v-model:current-page="pagination2.currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from "vue";

const data = reactive({
  first: true,
  tableData: [
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
  ],
  tableData1: [
    {
      SerialNumber: "01",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "02",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "03",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "04",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "05",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "06",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "07",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "08",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "09",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
    {
      SerialNumber: "10",
      SubsidyType: "城乡最低生活 保障补助",
      SubsidRecipients: "龙游户籍的公民，其共同生活的家庭成员人均",
      SubsidyStandards: "330-110元/月 （补差发放）",
      ProcessingMethod: "自主申报",
    },
  ],
  tableData2: [
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
    {
      fullName: "王*",
      address: "龙游县东华街道",
      age: "13",
      IDNumber: "330825****92022011",
      PopulationLabel: "低保、 困难儿童",
    },
  ],
});
// 表格分页
const pagination = reactive({
  total: 100,
  pageSize: 10,
  currentPage: 1,
});
const pagination1 = reactive({
  total: 100,
  pageSize: 10,
  currentPage: 1,
});
const pagination2 = reactive({
  total: 100,
  pageSize: 10,
  currentPage: 1,
});
//表格分页
const handlePagination = (current) => {
  pagination.currentPage = current;
  // getTable(tableType.url, pagination.currentPage);
};
//Tab切换分页
const handlePaginationTab = (current) => {
  pagination.currentPage = current;
  getTableTab(dataTab.url, pagination.currentPage);
};

// 服务表格样式
const tableHeaderColor = (arg) => {
  return {
    // paddingLeft: "10px",
    letterSpacing: "1px",
    fontSize: "15px",
    height: "79px",
    backgroundColor: "#455F8A",
    color: "#fff",
    border: "none",
    // boxShadow: " inset 0px 0px 56px 0px rgba(173,221,255,0.5)",
  };
};
const rowState = (row) => {
  if (row.rowIndex % 2 == 0) {
    return {
      letterSpacing: "1px",
      fontSize: "14px",
      height: "36px",
      backgroundColor: "rgba(31, 63, 113, 1)",
      color: "#fff",
    };
  } else if (row.rowIndex % 2 !== 0) {
    return {
      letterSpacing: "1px",
      fontSize: "14px",
      height: "36px",
      backgroundColor: "rgba(43, 74, 121, 1)",
      color: "#fff",
    };
  }
};

const change = (name, index) => {
  data.first = !data.first;
};
</script>

<style lang="scss" scoped>
.module {
  width: 100%;
  height: 943px;
  margin-top: 112px;
  display: flex;
  justify-content: space-between;
  padding: 10px 45px;
  box-sizing: border-box;
  .displayFlex {
    height: 100%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    .bt_title {
      font-size: 24px;
      color: #ffffff;
      letter-spacing: 2px;
      text-shadow: inset 0px -2px 2px rgba(255, 255, 255, 0.65);
      text-align: left;
      font-style: normal;
      margin-bottom: 20px;
    }
    .left_1 {
      background-image: url(@/assets/sy-table/sy_details1.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // margin-bottom: 30px;
      // cursor: pointer;
    }
    .left_2 {
      background-image: url(@/assets/sy-table/sy_details2.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
      // cursor: pointer;
      // margin-bottom: 30px;
      // margin-top: 40px;
    }
    .left_3 {
      background-image: url(@/assets/sy-table/sy_details3.png);
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }
    .title {
      font-size: 28px;
      color: #ffffff;
      text-align: left;
      font-style: normal;
      font-family: YouSheBiaoTiHei;
      text-shadow: 0px 2px 4px rgba(56, 50, 50, 0.5);
    }
    .lineEnd {
      height: 3px;
      border-top: 1px solid #fff;
      border-bottom: 1px dashed #fff;
      margin: 17px 0;
    }
    .tabPosition {
      display: flex;
      flex-direction: column;
      color: #ffffff;
      font-size: 22px;
      font-weight: 500;
      letter-spacing: 1px;

      img {
        width: 18px;
        height: 18px;
        margin-right: 10px;
        vertical-align: middle;
      }

      .tabPositionBox {
        display: flex;
        align-items: center;
        margin: 12px 0 12px 19px;
        cursor: pointer;
      }
      .tabPositionminBox {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 200px;
        height: 50px;

        border-radius: 4px;
        cursor: pointer;
        // opacity: 0.45;
      }
      .tabPositionminBoxBgc {
        background: #92bdff;
      }
    }
  }
  .left_bg {
    width: 33.333%;
    box-sizing: border-box;
    // background-color: pink;
  }
  .center_bg {
    width: 33.333%;
    box-sizing: border-box;
    margin: 0 20px;
    // background-color: pink;
    // background-image: url(@/assets/images/center_bg.png);
    // background-repeat: no-repeat;
    // background-size: 100% 100%;
  }
  .right_bg {
    width: 33.333%;
    // background-color: pink;
    .formText {
      // .formText_top {
      // }
      .formText_bootom {
        .a {
          display: flex;
          flex-wrap: wrap;
          .a1 {
            width: 510px;
            height: 210px;
            // background-image: url(@/assets/sy-table/sy-table3.png);
            background-repeat: no-repeat;
            background-size: 100% 100%;
            // background-color: pink;
            padding: 15px 28px;
            box-sizing: border-box;
            margin-left: 20px;
            margin-bottom: 20px;
            .b1 {
              display: flex;
              align-items: center;
              justify-content: space-between;
              .c1 {
                display: flex;
                align-items: center;
              }
            }
            .b2 {
              width: 470px;
              height: 90px;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 22px;
              color: #ffffff;
              line-height: 30px;
              text-align: left;
              font-style: normal;
              margin-top: 10px;
            }
          }
          img {
            width: 24px;
            height: 24px;
          }
          .a2 {
            font-size: 26px;
            color: #ffffff;
            letter-spacing: 2px;
          }
          .a3 {
            width: 70px;
            height: 29px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 15px;
            border: 0px solid #ffffff;

            color: #ffffff;
            font-weight: 400;
            font-size: 20px;
            letter-spacing: 1px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>
<style lang="scss" scoped>
// 表格
:deep(.el-table) {
  background: rgba(32, 64, 115, 1) !important ;
  color: #ffffff;
  --el-table-tr-bg-color: none;
  --el-table-header-bg-color: none;
  --el-table-header-text-color: none;

  border: 1px solid #7aceff;
}
.table {
  :deep(.el-table td.el-table__cell, .el-table th.el-table__cell.is-leaf) {
    border: none !important;
    padding-left: 10px !important;
  }

  :deep(.el-table td.el-table__cell) {
    padding-left: 10px;
  }
}

:deep(.el-table--enable-row-hover .el-table__body tr:hover > td) {
  background-color: #2f4b74;
}

:deep(.el-table__empty-block) {
  background-color: #122560;
}

:deep(.el-table .el-table__row) {
  border-bottom: none;
}
// 分页
.pagePart {
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  :deep(.el-pagination) {
    --el-pagination-button-disabled-bg-color: none;
    --el-pagination-bg-color: none;
    --el-pagination-button-bg-color: none;
    --el-pagination-button-color: #fff;
    color: #fff;
  }

  // :deep(.el-pagination button:disabled) {
  //   background-color: rgba(0, 116, 255, 0) !important;
  // }
  // :deep(.el-pagination > .is-last) {
  //   color: #ffffff;
  // }
}

.yd_title {
  box-sizing: border-box;
  width: 98%;
  height: 31px;
  position: relative;
  overflow: hidden;
  /* 利用伪元素和两个i元素产生4条线 */
  .animate-border {
    position: absolute;
    top: 0px;
    width: 100%;
    height: 100%;
    &::before,
    &::after {
      content: "";
      position: absolute;
      width: 100%;
      height: 2px;
    }
    i {
      position: absolute;
      display: inline-block;
      height: 100%;
      width: 2px;
    }
    &::before {
      top: 0;
      left: -100%;
      background-image: linear-gradient(
        90deg,
        transparent,
        #03e9f4,
        transparent
      );

      animation: one 4s linear infinite;
    }
    i:nth-child(1) {
      top: -100%;
      right: 0;
      background-image: linear-gradient(
        180deg,
        transparent,
        #03e9f4,
        transparent
      );
      /* 动画名称  动画持续时间  动画渲染函数 动画延迟时间 动画执行次数 */
      animation: two 4s linear 1s infinite;
    }
    &::after {
      bottom: 0;
      right: -100%;
      background-image: linear-gradient(
        -90deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: three 4s linear 2s infinite;
    }
    i:nth-child(2) {
      bottom: -100%;
      left: 0;
      background-image: linear-gradient(
        360deg,
        transparent,
        #03e9f4,
        transparent
      );
      animation: four 4s linear 3s infinite;
    }
  }

  .text {
    display: flex;
    position: absolute;
    font-size: 16px;
    font-family: SourceHanSansCN;
    font-weight: bold;
    color: #ffffff;
    position: absolute;
    right: 5px;
    top: 1px;
    align-items: center;
  }
  .gTitle {
    position: absolute;
    color: #acd1f1;
    height: 100%;
    display: flex;
    align-items: center;
    left: 156px;
  }

  .c {
    width: 130px;
    height: 33px;
    cursor: pointer;
  }
}
@keyframes one {
  0% {
    left: -100%;
  }
  50%,
  100% {
    left: 100%;
  }
}

@keyframes two {
  0% {
    top: -100%;
  }
  50%,
  100% {
    top: 100%;
  }
}

@keyframes three {
  0% {
    right: -100%;
  }
  50%,
  100% {
    right: 100%;
  }
}

@keyframes four {
  0% {
    bottom: -100%;
  }
  50%,
  100% {
    bottom: 100%;
  }
}
</style>
<style lang="scss" scoped>
:deep(.el-pagination.is-background .el-pager li) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid #6bade1;
  margin: 0;
}
:deep(.el-pagination.is-background .el-pager li.is-active) {
  background: rgba(0, 144, 255, 0.49);
  border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-prev:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-next:disabled) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-prev) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid #6bade1;
}
:deep(.el-pagination.is-background .btn-next) {
  color: #fff;
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid #6bade1;
}
</style>