ssti-CollegeManage/src/views/ProjectManagement5.vue

<template>
    <div class="ProjectManagement5">
      <div class="pA1Header">
      <!-- 详情页 -->
      <div style="display: flex;width: 400px;">
        <div class="pAHeader1">项目管理</div>
        <span class="pAHeader1STit">项目进展详情</span>
      </div>
      <div style="cursor: pointer;" @click="back">返回</div>
    </div>
      <hr>
       <!-- 跳转导航开始 -->
       <div class="AppBar">
        <div @click="content">项目基本内容</div>
        <div @click="remark">项目详情</div>
        <div @click="remark2">活动开展</div>
        <div @click="remark4">项目附件</div>
        <div @click="remark5" class="AppBarActive">项目结题附件</div>
      </div>
      <!-- 跳转导航结束 -->
      <div class="pmInp">
          <el-button type="primary" class="btn" size="mini">上传文件</el-button>
        </div>

        <!-- 表格部分开始 -->
        <el-table
        :data="tableData"
        tooltip-effect="dark"
        stripe
        height="500px"
        class="fontSize"
        :header-cell-style="{ background: '#f2f2f2',color:'#000' }"
        >
       
        <el-table-column
          prop="projectName"
          label="项目中期报告"
          align="center"
         >
        </el-table-column>
        
        <el-table-column
          prop="size"
          label="大小"
          align="center"
          >
        </el-table-column>
       
        <el-table-column
          prop="date"
          label="时间"
          align="center"
          >
        </el-table-column>

        <el-table-column
          prop="operation"
          align="center"
          label="操作"
          >
          <template #default="scope">
              <div class="operations">
                      <el-button type="primary"  size="mini" @click="detail(scope.rows.id)" style="background: #477edd">明细查看</el-button>
              </div>
          </template>
        </el-table-column>
        </el-table>


      <div class="pm5footer">
        <!-- <el-button type="primary" class="backBtn" @click="backBtn2">返回</el-button>
         -->
         <el-pagination
            background
            layout="prev, pager, next"
            :total="1">
        </el-pagination>
      </div>
  
    </div>
  </template>
  
  <script>
      export default {
        data() {
          return {
            tableData:[{
            projectName:'创业孵化基地企业情况信息表',
            date:'2022年11月12日',
            size:'50k'
            },
            {
              projectName:'创业孵化基地企业情况信息表',
              size:'50k',
              date:'2022年11月12日',
            }
            ],
          }
        },
        methods:{
          content(){
            this.$router.push('/ProjectManagement1')
          },
          remark(){
            this.$router.push('/ProjectManagement2')
          },
          remark2(){
            this.$router.push('/ProjectManagement3')
          },
          remark4(){
            this.$router.push('/ProjectManagement4')
          },
          remark5(){
            this.$router.push('/ProjectManagement5')
          },
          
          backBtn2(){
            this.$router.push('/ProjectManagement1')
          },
          detail(){

          },
          back(){
            this.$router.push('/ProjectManagement')
          },
        },
        created(){
          // this.value=(this.options[0].value)
        }
      }
  </script>
  
  <style lang="less">
  .ProjectManagement5{


    .pm5footer{
        float: right;
        margin-top: 30px;
        
        .backBtn{
            background: #169bd5;
            float: right;
            width: 100px;
        }
    }
    
    .pm1Tit{
        display: flex;
        margin-left: 20px;
        div{
        width: 130px;
        cursor: pointer;
        font-weight: 550;
        }
        .pr1TitBass{
          height: 2px;
          width: 100%;
          background: #3D67BC;
        }
    }
    .pmInp{
      width: 100%;
      margin: 10px 0 10px 0;
      display: flex;  
      justify-content: flex-end;
      .btn{
        height: 30px;
        width: 100px;
        font-size: 16px;
        background: #477edd;
        // margin-left: 10px;
      }
    }
  }
    
   
  </style>