login静态

付延余

2022-04-11 93957266445f004d81e5a172499cb83a1b3b4ebe

login静态

 src/assets/images/businessPolicy/bg_1@2x.png

 src/assets/images/businessPolicy/bg_big@2x.png

 src/assets/images/businessPolicy/icon1@2x.png

 src/assets/images/businessPolicy/icon2@2x.png

 src/assets/images/businessPolicy/icon3@2x.png

 src/assets/images/businessPolicy/icon4@2x.png

 src/assets/images/businessPolicy/icon5@2x.png

 src/assets/images/businessPolicy/title_end@2x.png

 src/pages/show/businessPolicy/BusinessPolicy.vue

New file
@@ -0,0 +1,332 @@
<template>
  <div id="businessPolicy">
    <div class="upCentent">
      <!-- 主信息区 -->
      <div class="upCentent_item">
        <div class="icon">
          <img
            src="../../../assets/images/businessPolicy/icon1@2x.png"
            alt=""
          />
        </div>
        <div class="text">累计出台政策数量</div>
        <div class="numText"><span>280</span>条</div>
      </div>
      <div class="upCentent_item"></div>
      <div class="upCentent_item"></div>
      <div class="upCentent_item"></div>
      <div class="upCentent_item"></div>
    </div>
    <!-- 主表格区 -->
    <div class="downCentent">
      <div class="downCentent_item">
        <div class="downCentent_title">
          <span>政策内容</span
          ><img
            src="../../../assets/images/businessPolicy/title_end@2x.png"
            alt=""
          />
        </div>
        <div class="tableLeft">
          <el-table
            stripe
            :data="tableData"
            style="width: 100%"
            max-height="100.6rem"
            :header-row-style="tableHeaderRow"
            :row-class-name="tableRowClassName"
          >
            <el-table-column prop="keshi" label="科室" width="140">
            </el-table-column>
            <el-table-column
              prop="zhengchemingcheng"
              label="政策名称"
              width="355"
            >
            </el-table-column>
            <el-table-column
              prop="shengxiaoDate"
              label="生效日期范围"
              width="355"
            >
            </el-table-column>
            <el-table-column prop="huijiqiyeNum" label="惠及企业数">
            </el-table-column>
            <el-table-column prop="money" label="减免金额"> </el-table-column>
          </el-table>
        </div>
      </div>
      <div class="downCentent_item"></div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        },
        {
          keshi: "失业处",
          zhengchemingcheng: "失业保险稳岗返还政策",
          shengxiaoDate: "2021/3—2022/12",
          huijiqiyeNum: "100家",
          money: "277万元"
        }
      ]
    };
  },
  methods: {
    tableHeaderRow({  rowIndex }) {
      if (rowIndex === 0) return { height: "8rem" };
    },
    tableRowClassName({  rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "warning-row";
      }
      return "";
    }
  }
};
</script>
<style lang="scss">
@import "../../../assets/css/base";
.tableLeft {
  width: 115.4rem;
  position: absolute;
  top: 7.2rem;
  left: 3.3rem;
}
// 状态颜色
.el-table .warning-row {
  background-color: rgba(81, 210, 255, 0.1);
}
.el-table td.el-table__cell,
.el-table th.el-table__cell.is-leaf {
  border: none;
}
// .el-table .success-row {
//   background-color: rgba(81, 210, 255, 0.1);
// }
// .workStatistics-table {
.el-table tr {
  // background-color: rgba(81, 210, 255, 0.1);
  background: transparent;
}
// 头部
.el-table th.el-table__cell {
  // background-color: rgba(1, 68, 117, 1);
  background: transparent;
}
// .el-table__fixed,
// .el-table__fixed-right,
// .el-table__fixed-right::before,
// .el-table__fixed::before {
//   background-color: #51d2ff;
// }
.el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
  // background-color: rgba(1, 68, 117, 1);
  background: transparent;
}
.el-table thead {
  color: #111111;
}
// .el-table td.el-table__cell,
// .el-table th.el-table__cell.is-leaf {
//   border-bottom: 1px solid #8e8e8e;
// }
// .el-table--border .el-table__cell,
// .el-table__body-wrapper .el-table--border.is-scrolling-left ~ .el-table__fixed {
//   border-right: 1px solid #8e8e8e;
// }
.el-table .el-table__cell {
  padding: 2rem 0;
}
.el-table__body tr.hover-row.current-row > td.el-table__cell,
.el-table__body,
  tr.hover-row.el-table__row--striped.current-row,
  > td.el-table__cell,
.el-table__body tr.hover-row.el-table__row--striped > td.el-table__cell,
.el-table__body tr.hover-row > td.el-table__cell {
  background: transparent;
}
.el-table .cell {
  font-weight: 300;
  font-size: 2.6rem;
  //font-family: Source Han Sans CN, Source Han Sans CN-Light;
  text-align: center;
  color: #ffffff;
  line-height: 2.6rem;
}
// }
</style>
<style lang="scss" scoped>
#businessPolicy {
}
.upCentent {
  height: 23rem;
  width: 248rem;
  margin: 3rem 4rem 0 4rem;
  display: flex;
  .upCentent_item {
    width: 46.4rem;
    height: 23rem;
    background: url(../../../assets/images/businessPolicy/bg_1@2x.png) no-repeat
      center;
    background-size: 100% 100%;
    flex: 1;
    margin-right: 4rem;
    text-align: center;
    &:nth-child(5) {
      margin-right: 0;
    }
    .icon img {
      width: 8rem;
      height: 8rem;
      margin-top: 3.1rem;
    }
    .text {
      height: 2.4rem;
      font-size: 2.4rem;
      //font-family: Source Han Sans CN, Source Han Sans CN-Light;
      font-weight: 300;
      text-align: center;
      color: #ffffff;
      line-height: 2.4rem;
    }
    .numText {
      font-size: 2rem;
      margin-top: 2.5rem;
      color: #ffffff;
      span {
        font-size: 4.8rem;
        //font-family: Source Han Sans CN, Source Han Sans CN-Light;
        font-weight: 300;
        color: #51d2ff;
        line-height: 2.4rem;
        margin-right: 1.2rem;
      }
    }
  }
}
.downCentent {
  width: 248rem;
  height: 114.6rem;
  margin: 3.6rem 4rem 6.2rem 4rem;
  display: flex;
  .downCentent_item {
    width: 122rem;
    height: 114.6rem;
    background: url(../../../assets/images/businessPolicy/bg_big@2x.png)
      no-repeat center;
    background-size: 100% 100%;
    flex: 1;
    margin-right: 4rem;
    padding: 0 3.3rem 0 3.3rem;
    position: relative;
    &:nth-child(2) {
      margin-right: 0;
    }
    .downCentent_title {
      position: absolute;
      top: 0.8rem;
      font-size: 3.2rem;
      //font-family: Source Han Sans CN, Source Han Sans CN-Regular;
      font-weight: 400;
      // text-align: left;
      color: #51d2ff;
      line-height: 2.6rem;
      span {
        margin-left: 3.7rem;
        margin-right: 2rem;
      }
    }
  }
}
.el-table {
  background: transparent;
}
</style>