ssti-CollegeManage/src/views/projectApplicationDetails.vue

<template>
  <div class="projectApplication1">
    <div class="pA1Header">
      <!-- 详情页 -->
      <div style="width: 800px;display: flex;">
        <div class="pAHeader1">项目立项申请</div>
        <span class="pAHeader1STit">项目进展详情</span>
      </div>
      <div @click="back" style="cursor:pointer;">返回</div>
    </div>


    <hr>
    <!-- 跳转导航开始 -->
    <div class="AppBar">
      <div>
        <div @click="content">项目基本内容</div>
        <div class="pr1TitBass"></div>
      </div>
      <div @click="remark">项目详情</div>
    </div>
    <!-- 跳转导航结束 -->

     <!-- 活动申请填写信息区域开始 -->
     <div class="select">
              <div class="selectTop">
                <div class="label">项目名称</div>
                <el-input v-model="input" placeholder="请输入内容"></el-input>
              </div>
              <div class="selectMid">
                <div class="selectLeft">
                 
                    <div class="inpBlock">
                        <div class="label">负责人</div>
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </div>
                    <div class="inpBlock">
                        <div class="label">所在部门</div>
                        <el-select v-model="input" style="width: 100%;" placeholder="请选择">
                          <el-option
                            v-for="item in options"
                            :key="item.value"
                            :label="item.label"
                            :value="item.value">
                          </el-option>
                        </el-select>
                    </div>
                    <div class="inpBlock">
                        <div class="label">联系电话</div>
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </div>
                </div>

                <div class="selectRight">
                  <div class="inpBlock">
                        <div class="label">项目开始时间</div>
                        <el-date-picker
                          v-model="input"
                          type="date"
                          style="width: 100%;"
                          placeholder="选择日期">
                        </el-date-picker>
                    </div>
                    <div class="inpBlock">
                        <div class="label">预算总经费</div>
                        <el-input v-model="input" placeholder="请输入内容"></el-input>
                    </div>
                    
                </div>
              </div>
              
        </div>
        <!-- 活动申请填写信息区域结束 -->

      <!-- 项目成员开始 -->
      <div class="tabTit">
          项目成员
      </div>
      <hr>
      <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
        <el-table-column
          prop="Name"
          label="姓名"
          align="center"
          >
        </el-table-column>
        <el-table-column
          prop="class"
          label="班级"
          align="center"
         >
        </el-table-column>

        <el-table-column
          prop="tel"
          label="电话"
          align="center"
         >
        </el-table-column>

        <el-table-column
          prop="score"
          label="学分"
          align="center"
          >
        </el-table-column>
        
        <el-table-column
          prop="operation"
          label="操作"
          >
          <!-- <template #default="scope"> -->
              <div class="operations">
                  <!-- <el-button type="primary" > -->
                      <el-button type="primary" class="bt1" size="mini" style="background: #477edd">查看详情</el-button>
                  <!-- </el-button> -->
              </div>
          <!-- </template> -->
        </el-table-column>
      </el-table>
      <!-- 项目成员结束 -->

      <!-- 项目简介开始 -->
    <div class="tabTit">
          项目简介
    </div>
    <hr>
    <!-- <div class="projectApplicationDetailstextArea"> -->
      <el-input
        type="textarea"
        :rows="6"
        resize="none"
        placeholder="请输入内容"
        v-model="textarea">
      </el-input>
    <!-- </div> -->
    <!-- 项目简介结束 -->


    <div class="footer">
      <el-button type="primary" class="backBtn" @click="backBtn2">立即审核</el-button>
    </div>
  </div>
</template>

<script>
    export default {
      data() {
        return {
          options: [{
            value: '选项1',
            label: '中德学院'
          }],
          value: '中德学院',
          textarea:'',
         input:'',
        
          tableData:[{
            Name:'徐晓慧',
            class:'22电子通信G5',
            tel:'13751177411',
            score:'-',
          },
          {
            Name:'中国',
            class:'22电子通信G5',
            tel:'13751177411',
            score:'-',
          },
          {
            Name:'林凡文',
            class:'22电子通信G5',
            tel:'13751177411',
            score:'-',
          },
          ],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',

          }
        }
      },
      methods:{
        content(){
          // alert('111')
          this.$router.push('/projectApplicationDetails')
        },
        remark(){
          this.$router.push('/projectApplication2')
        },
        backBtn2(){
          // this.$router.push('/projectApplication')
          this.$message.success('审核成功')
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        back(){
          this.$router.push('/projectApplication')
        }
      },
      created(){
        this.value=(this.options[0].value)
      }
    }
</script>

<style lang="less">
.projectApplication1{

  .selects{
      width: 85%;
      margin-top: 10px;
      display: flex;
      flex-wrap: wrap;
    .inp1{
      display: flex;
      width:35%;
      margin-right: 7%;
      margin-top: 10px;
      .inpText{
        // max-width: 100px;
        min-width: 100px;
        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;
      }
    }
    
  }
  .operations{
    display: flex;
    flex-shrink: 0;
    .bt1{
      font-size: 14px;
    }
  }
  .tabTit{
      width: 100%;
      text-align: left;
      font-size: 18px;
      font-weight:bold;
      box-sizing: border-box;
      padding-bottom: 5px;
      margin-top: 20px;
  }
  .footer{
      width: 90%;
      margin: 30px 20px;
      display: flex;
      justify-content: flex-end;
      .backBtn{
          background: #169bd5;
      }
  }
  .projectApplicationDetailstextArea{
    display: flex;
    justify-content: flex-start;
    margin-left: 10px;
    textarea{
      resize: none;outline: none;
      background: #f2f2f2;
      box-sizing: border-box;
      padding: 10px;
    }
  }
  
}
</style>