nastiNte-Ui/src/views/settlementCenter/applyForInvoice.vue

<template xmlns:el-col="http://www.w3.org/1999/html">
  <div>
    <div class="head">
      <div style="width: 20%;">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-vertical-demo"
          @select="handleSelect"
          background-color="#FFFFFF">
          <el-menu-item index="1">
            <i class="el-icon-menu"></i>
            <span slot="title">结算说明</span>
          </el-menu-item>
          <el-menu-item index="/settlementCenter">
            <i class="el-icon-menu"></i>
            <span slot="title">生成账单</span>
          </el-menu-item>
          <el-menu-item index="/confirmTheBill">
            <i class="el-icon-menu"></i>
            <span slot="title">确认账单</span>
          </el-menu-item>
          <el-menu-item index="/applyForInvoice">
            <i class="el-icon-menu"></i>
            <span slot="title">申请发票</span>
          </el-menu-item>
        </el-menu>
      </div>
      <div style="background-color: #FFFFFF;border: 1px solid #eeeeee;">
        <div style="width:100%;display:flex;justify-content: space-around;float: left">
          <div style="width: 20%;">
            <el-input placeholder="抬头" style="width: 100%;"></el-input>
            <el-input placeholder="申请号"></el-input>
          </div>
          <div style="width: 20%;">
            <el-input placeholder="发票号" style="width: 100%;"></el-input>
            <el-input placeholder="状态"></el-input>
          </div>
          <div style="width: 50%;">
            <div style="display:flex;justify-content: space-between;width: 100%;">
              <el-date-picker
                style="width: 45%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="创建开始时间">
              </el-date-picker>
              <span style="margin-top: 20px">至</span>
              <el-date-picker
                style="width: 45%;"
                type="date"
                value-format="yyyy-MM-dd"
                placeholder="创建结束时间">
              </el-date-picker>
            </div>
            <div style="display:flex;justify-content: left;margin-top: 10px;margin-left: 8px">
              <el-button type="primary">查询</el-button>
              <el-button type="success">申请发票</el-button>
              <el-button type="info">导出发票明细</el-button>
            </div>
          </div>
        </div>
        <div style="color:#848484;width: 98%;height: 120px;float: left;padding-right: 1%;padding-left: 1%;border-top: 1px solid #eeeeee;border-left: 1px solid #eeeeee">
          <div style="width: 100%;height: 160px;">
            <div style="display: flex">
              <div style="height: 30px;width: 50%;display:flex;align-items: center;justify-content: space-between;margin-left: 10px">
                <div style="margin-left: 10px;font-size: 16px;color: #409eff;font-weight: bold;height: 16px">申请号: <span style="color: #848484">17892731</span></div>
              </div>
              <div style="height: 30px;width: 50%;margin:4px">
                <el-button size="mini" round type="primary" style="float: right">费用明细</el-button>
              </div>
            </div>
            <div style="border-bottom: 1px solid #eeeeee;border-top: 1px solid #eee;height:70px;display: flex;width:100%;">
              <div  style="margin-left: 20px;width:90%;display: flex;font-weight: 600;font-size: 14px;justify-content: space-between;text-align: left;align-items: center">
                <div style="width: 45%;">
                  <div style="margin-bottom: 10px">发票名头:青岛途宝科技有限公司</div>
                  <div>开票金额合计(元):8927318937189</div>
                </div>
                <div style="width: 45%;">
                  <div style="margin-bottom: 10px">服务主体：青岛途宝科技有限公司</div>
                  <div>申请时间:2021-10-24</div>
                </div>
                <div style="width: 35%;">
                  <div style="margin-bottom: 10px">快递单号：aisdhlashd</div>
                  <div style="height: 14px;"></div>
                </div>
                <!--                <div style=" display: flex;justify-content: space-between;align-items: center;">-->
<!--                  <div>发票名头:<span>青岛途宝科技有限公司</span></div>-->
<!--                  <div>申请时间:1823712931</div>-->
<!--                  <div>服务主体:<span>sadasffae</span></div>-->
<!--                </div>-->
<!--                <div style=" display: flex;justify-content: space-between;align-items: center;">-->
<!--                  <div>开票金额合计（元）:<span></span></div>-->
<!--                  <div>快递单号:<span>1111111111</span></div>-->
<!--                </div>-->
              </div>
              <div style="width: 10%;height: 100%;display: flex;align-items: center;justify-content: space-around;">
                <img src="@/assets/pass.png" alt="" style="height:70%;transform:rotate(-20deg)">
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'applyForInvoice',
  data() {
    return {
      activeIndex: '/applyForInvoice',
      tableData:[]
    };
  },
  methods: {
    bug(file){
      console.log(file);
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3);
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    },
    handleSelect(key, keyPath) {
      this.$router.push(key);
      console.log(this.activeIndex);
      console.log(key, keyPath);
    },
  }
};
</script>

<style scoped lang="scss">
.head {
  width: 80%;
  border: 1px solid #eeeeee;
  margin: 10px auto;
  display: flex;
}

.head > div:nth-child(2) {
  width: 80%;
}

.el-input {
  margin: 10px auto;
}
.query div:nth-child(1){
  width: 200px;
}
.query div:nth-child(1) div:nth-child(1){
  margin-bottom: 10px;
}
.query div:nth-child(1) div:nth-child(2){
  margin-bottom: 10px;
}
.query div:nth-child(1) div:nth-child(3){
  font-weight:bold;
  color: red;
}
.query {
  width: 25%;
  float: right;
  display: flex;
  justify-content: center;
  margin-top: 40px;
}
</style>