ssti-CollegeManage/src/views/projectSettlement1.vue

<template>
    <div class="projectSettlement1">

        <!-- 详情页 -->
      <div class="pA1Header">
        <div style="width: 400px;display: flex;">
          <div class="pAHeader1">项目管理</div>
          <div class="pAHeader1STit">项目详情</div>
        </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 @click="remark2">项目附件</div>
          <div @click="remark4">项目结题附件</div>
          <div @click="remark5">结项评语</div>
      </div>
      <div class="psSmallTit">
        结题时间:2023年-11月-20日
      </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="value"
                          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="PS1tabTit">
            项目成员
        </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="operation"
            align="center"
            label="操作"
            >
            <template #default="scope">
                <div class="operations">
                        <el-button type="primary"  @click="lookDetail(scope.rows.id)" size="mini" style="background: #477edd">查看详情</el-button>
                </div>
            </template>
          </el-table-column>
        </el-table>
        <!-- 项目成员区域结束 -->

        <!-- 项目简介区域开始 -->
      <div class="PS1tabTit">
            项目简介
      </div>
      <hr>
      <div class="ps1textArea">
        <el-input
          type="textarea"
          :rows="6"
          class="textArea"
          placeholder="请输入内容"
          v-model="textarea">
        </el-input>
      </div>
        <!-- 项目简介区域结束 -->

      <div class="baseBtn">
        <div class="blockWidth">
          <el-button type="primary" class="backBtn" @click="back">返回</el-button>
        </div>
      </div>
  
    </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            options: [{
              value: '选项1',
              label: '中德学院'
            }],
            value: '中德学院',
           input:'',
            tableData:[{
              Name:'徐晓慧',
              class:'22电子通信G5',
              tel:'13751177411',
            },
            {
              Name:'林凡文',
              class:'22电子通信G5',
              tel:'13751177411',
            },
            {
              Name:'林凡文',
              class:'22电子通信G5',
              tel:'13751177411',
            },
            ],
          }
        },
        methods:{
          lookDetail(){

          },
          content(){
              this.$router.push('/projectSettlement1')
            },
            remark(){
            //   this.$router.push('/ProjectManagement2')
            },
            remark2(){
            //   this.$router.push('/ProjectManagement3')
            },
            remark4(){
            //   this.$router.push('/ProjectManagement4')
            },
            remark5(){
              this.$router.push('/projectSettlement2')
            },
         
            back(){
            this.$router.push('/projectSettlement')
          },
          handleSelectionChange(val) {
            this.multipleSelection = val;
          },
         
        },
        created(){
          // this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .projectSettlement1{



    .PS1tabTit{
        width: 100%;
        text-align: left;
        font-size: 18px;
        font-weight:bold;
        box-sizing: border-box;
        margin-top: 20px;
    }

    .ps1textArea{
        width: 100%;
        display: flex;
        justify-content: flex-start;
        textarea{
          resize: none;
        }
      }

    .psSmallTit{
        width: 100%;
        margin: 15px 0px 20px 0px;
        text-align: left;
        font-size: 16px;
    }
  }
  </style>