ssti-CollegeManage/src/views/fundManage/makerfundDetails.vue

<template>
  <!-- 创客资金申请查看详细 -->
    <div class="makerfundDetails">

      <div class="vfpHeader">
        <div class="titleOne">创客资金申请</div>
        <el-button type="primary" @click="$router.back()">返回</el-button>
      </div>
      
      <hr>
      <div class="Apply1">
          <div class="inpInterval">项目名称</div>
          <el-select style="width:30%" v-model="projectName" placeholder="请输入项目名称">
              <el-option label="测试" value="测试"></el-option>
          </el-select>
      </div>
      <div class="Apply1">
          <span class="inpInterval">项目类型</span>
          <el-select v-model="value" placeholder="请选择">
              <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
              </el-option>
          </el-select>
      </div>



      <div class="tabTit">
              <div>
                <p>经费支出类别(单位:元)</p>
              </div>
      </div>

      <!-- 直接经费开始 -->
      <div class="Apply1">
           <div class="howMoney">
            <span class="inpInterval">直接经费</span>
                <el-select v-model="value" placeholder="请选择">
                      <el-option
                      v-for="item in options"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                      </el-option>
                  </el-select>
           </div>
           <div class="howMoney">
              <span class="inpInterval twoStyle">预算</span>
              <el-input  placeholder="金额" v-model="value"></el-input>
           </div>
           <div class="howMoney">
              <span class="inpInterval twoStyle">已支付</span>
              <el-input type="text" placeholder="金额" v-model="value"></el-input>
            </div>
           <div class="howMoney">
            <span class="inpInterval twoStyle">余额</span>
              <el-input type="text" placeholder="金额" v-model="value"></el-input>
           </div>
      </div>
      <div class="Apply1">
          <span class="inpInterval">事由</span>
            <el-input
              type="textarea"
              :rows="3"
              class="textArea"
              style="width:70%"
              resize="none"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
      </div>


      <!-- 直接经费结束 -->
      


      <!-- 其他经费开始 -->
      <div class="Apply1">
        <div class="howMoney">
            <span class="inpInterval">其他</span>
              <el-input placeholder="其他" v-model="value"></el-input>
           </div>
           <div class="howMoney">
              <span class="inpInterval twoStyle" >预算</span>
              <el-input  placeholder="金额" v-model="value"></el-input>
           </div>
           <div class="howMoney">
              <span class="inpInterval twoStyle">已支付</span>
              <el-input type="text" placeholder="金额" v-model="value"></el-input>
            </div>
           <div class="howMoney">
            <span class="inpInterval twoStyle">余额</span>
              <el-input type="text" placeholder="金额" v-model="value"></el-input>
           </div>
      </div>
      <div class="Apply1">
          <span class="inpInterval">备注</span>
            <el-input
              type="textarea"
              :rows="3"
              style="width:70%"
              resize="none"
              class="textArea"
              placeholder="请输入内容"
              v-model="textarea">
            </el-input>
      </div>
      <!-- 其他经费结束 -->


      <div>
        <div class="tabTit">
          <div>
            <p>附件上传</p>
          </div>
        </div>
        <hr>
        <div class="makerfundDetailsAccessoryBlock">文件</div>
        <div class="makerfundDetailsaddMoneyBtn">
            <div class="jia">+</div>添加
        </div>

      </div>
      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary">生成表单</el-button>
          <el-button type="primary">立即审核</el-button>
        </div>   
      </div>
    </div>
  </template>
  
  <script>
  export default {
      data() {
          return {
              textarea:'',
              value: '',
              input:'',
              options: [{
                  value: '1',
                  label: '黄金糕'
                },
                {
                  value: '2',
                  label: '黄金糕'
                },
              ],
              projectName:''
          }
      },
      methods:{
          back(){
              this.$router.push('/makerfund')
          }
      }
  }
  </script>
  
  <style lang="less">

  .makerfundDetails{

    .pAHeader{    //头部样式
      width: 90%;
      display: flex;
      justify-content: space-between;
      .pAHeader1{
        font-weight: 600;
        font-size: 22px;
        flex-shrink: 0;
      }
      .backMakerfund{
          cursor: pointer;
          font-size: 16px;
          margin-top: 10px;
          margin-right: 20px;
      }
    }

      .makerfundDetailsAccessoryBlock{   //文件上传框
        width: 200px;height: 200px;
        background: #ccc;
        margin: 20px 0 20px 100px;
      }

      
      .makerfundDetailsaddMoneyBtn{  // 附件添加按钮样式开始
            width: 120px;
            height: 40px;
            border: #000 1px dashed;
            border-radius: 5px;
            margin: 35px auto 30px;
            display: flex;
            justify-content: center;
            line-height: 40px;
            cursor: pointer;
            .jia{
              border-radius: 50%;
              border: 1.5px #ccc solid;
              font-size: 25px;
              line-height: 26px;
              font-weight: 10;
              margin-top: 6px;
              margin-right: 5px;
              height: 27px;
              width: 27px;
              color: #ccc;
            }
      }

     




   
    .Apply1{
      display: flex;
      margin-top: 20px;
      width: 100%;
      .howMoney{
        display: flex;
        margin-right: 30px;
      }
      .inpInterval{
          min-width: 70px;
          margin-right: 5px;
          display: inline-block;
          text-align: justify;
          text-justify:distribute-all-lines;
          text-align-last: justify;
          transform: translate(0,22%);
          padding-right: 15px;
          font-size: 16px;
      }
      .inpName{
          height: 40px;
          outline:none ;
          width: 600px;
          border: #ccc 1px solid;
          border-radius: 5px;
          box-sizing: border-box;
          padding: 1px 15px;
      }
    }


   
    .howMoneyFlex{
      max-width: 100%;
      display: flex;
      flex-wrap: nowrap;
    }
   
    .addMoneyBtn{
      width: 150px;
      height: 40px;
      border: #000 1px dashed;
      border-radius: 5px;
      margin: 15px 100px 30px;
      display: flex;
      justify-content: center;
      line-height: 40px;
    }
    .footer{
      margin-top: 20px;
      width: 100%;
      display: flex;
      justify-content: flex-end;
    }
}
  </style>