vpp/src/views/xtpz/xtpz.vue

<template>
  <div class="table-wrapper">
    <div class="table-box">
      <div class="title"
           style="font-family: AliMaMa;font-size: 30px;font-weight: 1000;text-align: left;height: 40px">
        <span style="position: absolute;top:-3px;left: 70px">风电</span>
      </div>
      <el-row :gutter="20">
        <el-button
            id="message_btn1"
            class="el-icon-blue-left"
        >断面</el-button>
        <el-button
            id="message_btn2"
            class="el-icon-blue-left"
        >联络线</el-button>

        <el-button
            id="message_btn3"
            class="el-icon-blue-right"
        >刷新
        </el-button>
        <el-button
            id="message_btn4"
            class="el-icon-red-right"
        >
          删除
        </el-button>
        <el-button
            id="message_btn4"
            class="el-icon-yellow-right"
        >
          修改
        </el-button>
        <el-button
            id="message_btn4"
            class="el-icon-green-right"
            @click="sendmessage()"
        >
          新增
        </el-button>
      </el-row>
      <el-table
          :cell-style="{border:0,color:'#fff'}"
          :data="tableData"
          :header-cell-style="{color:'#fff'}"
          :row-style="{backgroundColor:'rgb(4,66,115,0.3)'}"
          size="mini"
          style="width: 1429px;font-size: 17px;background: none"
      >
        <el-table-column
            align="center"
            label="断面名称"
            prop="xtpzName"
            width="270px"
        >
        </el-table-column>
        <el-table-column
            align="center"
            label="状态"
            prop="xtpzStatus"
        >
        </el-table-column>
        <el-table-column
            align="center"
            label="from节点"
            prop="from">
        </el-table-column>
        <el-table-column
            align="center"
            label="to节点"
            prop="to">
        </el-table-column>
        <el-table-column
            align="center"
            label="负限"
            prop="low">
        </el-table-column>
        <el-table-column
            align="center"
            label="正限"
            prop="height">
        </el-table-column>
      </el-table>
    </div>


    <!-- 弹出的页面内容 -->
    <el-dialog :visible.sync="getmessage" class="tanchuang-dialog" title="新增数据" :center="true" :show-close="false">
      <div slot="title" class="header-title">
        <span style="font-weight:bold;font-size: 20px;"> 新增数据 </span>
      </div>
      <el-form ref="ruleForm" :model="ruleForm" label-position="center"
               label-width="130px"
               size="mini">
        <el-row>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="断面名称：" style="width: 100%; float: left;color: white">
              <el-input v-model="xtpzName" placeholder="汗海-庆云断面" style="width: 100%;">启用</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="状态：" style="width: 100%; float: right;">
              <el-input v-model="xtpzStatus" placeholder="状态"
                        style="width: 100%; text-align: center;"></el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="from节点：" style="width: 100%; float: left;">
              <el-input v-model="from" placeholder="汗海"
                        style="width: 100%;float: left;">汗海
              </el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="to节点：" style="width: 100%; float: left;">
              <el-input v-model="to" placeholder="庆云" style="width: 100%;float: left;">庆云</el-input>
            </el-form-item>
          </el-col>
        </el-row>

        <el-row>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="负限：" style="width: 100%; float: left;">
              <el-input v-model="low" placeholder="250" style="width: 100%;">250</el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12" style="width: 40%; float: left;">
            <el-form-item label="正限：" style="width: 100%; float: right;">
              <el-input v-model="height" placeholder="200" style="width: 100%;">200</el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <el-row class="hengxianimg">
        <el-divider/>
      </el-row>

      <el-row :gutter="20" id="tijiao_btn">
        <el-button
            id="form_btn1"
            class="el-icon-blue-left2"
            @click="cancelForm()"
        >
          保存
        </el-button>
        <el-button
            id="form_btn2"
            class="el-icon-yellow-right2"
            @click="cancelForm()"
        >取消</el-button>

      </el-row>

    </el-dialog>
  </div>
</template>

<script>

export default {
  name: 'Xtpz',
  data() {
    return {
      tableData: [],
      //弹框
      getmessage: false,
      ruleForm: {
        xtpzName: '',
        xtpzStatus: '',
        from: '',
        to: '',
        low: '',
        height: '',
      }
    }
  },
  methods: {
    //弹框
    sendmessage() {
      this.getmessage = true
    },
    //弹框
    cancelForm() {
      this.getmessage = false
    }
  },
  mounted() {
    const tableDataList = require('./xtpzdata.json');
    this.tableData = tableDataList.xtpzDataList
  }
}
</script>

<style lang="less" scoped>


@font-face {
  font-family: AliMaMa;//自定义字体名称
  src: url("../Articles/font/AlimamaDaoLiTi.ttf")
}

body {
  border: 0;
  background-image: url(./img/beijing.png)
}

/deep/ .el-table__header tr {
  background: url(./img/tableTitlebg.png);
  height: 49px;

}

.el-divider--horizontal {
  margin: 8px 0;
  background: 0 0;
  border-top: 1px dashed #e8eaec;
  width: 90%;
  text-align: center;
  left: 5%;
}

.el-icon-blue-left {
  background: url("./img/bluebtn.png");
  width: 100px;
  height: 40px;
  padding-top: 8px;
  font-size: 25px;
  color: whitesmoke;
  border: 0px dashed;
  background-repeat: no-repeat;
  float: left;
}

.el-icon-red-right {
  background: url("./img/redbtn.png");
  width: 100px;
  height: 40px;
  padding-top: 8px;
  font-size: 25px;
  color: whitesmoke;
  border: 0px dashed;
  background-repeat: no-repeat;
  float: right;
}

.el-icon-blue-right {
  background: url("./img/bluebtn.png");
  width: 100px;
  height: 40px;
  padding-top: 8px;
  font-size: 25px;
  color: whitesmoke;
  border: 0px dashed;
  background-repeat: no-repeat;
  float: right;
}

.el-icon-yellow-right {
  background: url("./img/yellowbtn.png");
  width: 100px;
  height: 40px;
  padding-top: 8px;
  font-size: 25px;
  color: whitesmoke;
  border: 0px dashed;
  background-repeat: no-repeat;
  float: right;
}

.el-icon-green-right {
  background: url("./img/greenbtn.png");
  width: 100px;
  height: 40px;
  padding-top: 8px;
  font-size: 25px;
  color: whitesmoke;
  border: 0px dashed;

  background-repeat: no-repeat;
  float: right;
}


.el-icon-blue-left2 {
  background: url("./img/submitbtn.png");
  width: 145px;
  height: 42px;
  border: 0px dashed;
  padding-top: 8px;
  background-repeat: no-repeat;
  float: left;
  text-align: center;
  left: 10%;
  font-size: 25px;
  color: whitesmoke;

}

#tijiao_btn {
  float: left;
  text-align: center;
  left: 30%;
}

.el-icon-yellow-right2 {
  background: url("./img/cancelbtn.png");
  width: 145px;
  height: 42px;
  border: 0px dashed;
  background-repeat: no-repeat;
  float: left;
  margin-left: 50px;
  font-size: 25px;
  padding-top: 8px;
  color: whitesmoke;
}


/deep/ .header-title {
  background: url("./img/m.png");
  background-position: 50% 20%;
  background-repeat: no-repeat;
  background-size: 50% 130%;
  text-align: center;
  height: 40px;
  margin-top: 10px;
}

/deep/ .el-dialog {
  background-color: rgba(255, 0, 0, 0.0);
  color: #FFFFFF;
  background-image: url("./img/tanchuangbg.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  isplay: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /*height:600px;*/
  max-height: calc(100% - 100px);
  max-width: calc(100% - 70px);
}

/deep/ .el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
}

/deep/ .el-input__inner {
  background-image: url("./img/inputbg.png");
  background-color: rgba(255, 0, 0, 0.0);
  color: white;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  font-weight: bold;
}

/deep/ .el-form-item__label {
  color: white;
}

.table-wrapper {
  width: 1483px;
  padding-left: 20px;

  .table-box {
    min-height: 600px;
    background-size: cover;
  }

  .title {
    margin-bottom: 20px;
    margin-left: 60px;
    font-size: 18px;
    color: #fff;
  }


  /deep/ .el-table__header {
    background: url(./img/tableTitlebg.png);
  }

  /deep/ .el-table--enable-row-hover .el-table__body tr:hover > td {
    background-color: rgb(103, 118, 49) !important
  }

  /deep/ .el-col {
    padding: 0;
    display: inline-block;
    position: relative;
  }

  /deep/ .el-col:nth-child(1) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(2) {
    width: 22%;
  }

  /deep/ .el-col:nth-child(3) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(4) {
    width: 19%;
  }

  /deep/ .el-col:nth-child(5) {
    width: 15%;
  }


  /deep/ .el-icon-arrow-up {
    transform: rotateZ(0deg);

  }

  /deep/ .el-input__prefix {
    right: -60px;
    padding-top: 3px;
  }

  /deep/ .el-table th.el-table__cell {
    background: none;
  }

  /deep/ .el-table__body {
    -webkit-border-vertical-spacing: 13px; // 垂直间距
  }

  /deep/ .el-form-item__content {
    text-align: left;
  }

  /deep/ .el-table, .el-table__expanded-cell {
    background-color: rgb(1, 40, 81);
  }
}
</style>