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

<template>
    <!-- 创客资金申请表单 -->
  <div class="makerfundApply">
    <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 v-model="value" style="width: 30%;" placeholder="请选择">
            <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
            </el-option>
        </el-select>
    </div>
    <div class="Apply1">
        <div class="inpInterval">项目类型</div>
        <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>
    <hr>
    <div class="moneyBlock">
        <div class="howMoneyFlex">
            <div class="howMoney">
                <div class="inpInterval">直接经费</div>
                <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">
                <div class="inpInterval twoStyle">预算</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
        </div>
        <div class="howMoney" style="margin-top:20px">
            <div class="inpInterval">事由</div>
            <el-input
            type="textarea"
            :rows="3"
            class="textArea"
            resize="none"
            style="width:800px"
            placeholder="请输入内容"
            v-model="textarea">
            </el-input>
        </div>
        <div>
            <div class="addMoneyBtn">
                <div class="jia">+</div>添加
            </div>
        </div>
    </div>
    <div class="moneyBlock">
        <div class="howMoneyFlex">
            <div class="howMoney">
                <div class="inpInterval">间接经费</div>
                <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">
                <div class="inpInterval twoStyle">预算</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
        </div>
        <div class="howMoney" style="margin-top:20px">
            <div class="inpInterval">事由</div>
            <el-input
            type="textarea"
            :rows="3"
            class="textArea"
            resize="none"
            style="width:800px"
            placeholder="请输入内容"
            v-model="textarea">
            </el-input>
        </div>
        <div>
            <div class="addMoneyBtn">
                <div class="jia">+</div>添加
            </div>
        </div>
    </div>

    <div class="moneyBlock">
        <div class="howMoneyFlex">
            <div class="howMoney">
                <div class="inpInterval" >其他</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">预算</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">已支付</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
            <div class="howMoney">
                <div class="inpInterval twoStyle">余额</div>
                <input type="text" class="howMoneyInp" placeholder="金额" value="">
            </div>
        </div>
        <div class="howMoney" style="margin-top:20px">
            <div class="inpInterval">备注</div>
            <el-input
            type="textarea"
            :rows="3"
            resize="none"
            class="textArea"
            style="width:800px"
            placeholder="请输入内容"
            v-model="textarea">
            </el-input>
        </div>
       
    </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: '黄金糕'
            }],
        }
    },
    methods:{
        getData(){

        },
    }
}
</script>

<style lang="less">
.makerfundApply{

  .Apply1{
    height: 45px;
    width: 100%;
    display: flex;
    justify-content: flex-start;
    margin-top: 20px;
    .inpName{
        height: 40px;
        outline:none ;
        width: 600px;
        border: #ccc 1px solid;
        border-radius: 5px;
        box-sizing: border-box;
        padding: 1px 15px;
    }
  }
  .inpInterval{
        min-width: 70px;
        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;
    }

  .moneyBlock{
    max-width: 100%;
    .howMoney{
        display: flex;
        margin-right: 10px;
    }
  }
  .howMoneyFlex{
    display: flex;
  }
  .howMoneyInp{
    height: 40px;
    outline:none ;
    width: 70%;
    border: #ccc 1px solid;
    border-radius: 5px;
    box-sizing: border-box;
    padding: 1px 15px;
  }
  .addMoneyBtn{   //添加样式
    width: 120px;
    height: 40px;
    border: #000 1px dashed;
    border-radius: 5px;
    margin: 15px 85px 30px;
    display: flex;
    justify-content: center;
    line-height: 40px;
        .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;
        }
    }
  
  .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;
            }
      }
}

</style>