ssti-CollegeManage/src/views/ProjectManagement.vue

<template>
  <div class="ProjectManagement">
    <div class="pAHeader">
      <div class="pAHeader1">项目管理</div>
    </div>
    <hr>
    

<!-- 搜索栏开始 -->
    <div class="selectInp">
      <div class="manageSelects">
      <div class="selectsBlock">
        <span class="selectLabel">项目筛选</span>
        <el-select v-model="pavalues.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="selectsBlock">
        <span class="selectLabel">部门</span>
        <el-select v-model="pavalues.value1" placeholder="请选择">
          <el-option
            v-for="item in options1"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">分类</span>
        <el-select v-model="pavalues.value2" placeholder="请选择">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">结题状态</span>
        <el-select v-model="pavalues.value4" placeholder="请选择">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>

      <div class="selectsBlock">
        <span class="selectLabel">负责人</span>
        <el-select v-model="pavalues.value3" placeholder="请选择">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      </div>
      <div class="ProjectManagementQuery">
        <el-input v-model="input" style="340px" placeholder="请输入内容"></el-input>
        <el-button type="primary" class="btn" size="mini">查询</el-button>
      </div>
    </div>
<!-- 搜索栏结束 -->
      
      
<!-- 循环展示框列表开始 -->
    <div class="projectBlock core_dialogue">
      <div class="classBlock" v-for="(item,index) in items" :key="index">
        <div class="projectBlockPosition">
          {{ item.finish }}
        </div>
        <img src='../assets/img/login-bg-autumn.jpg' alt="">
        <div class="classBlock1">
            <div class="classBlock2">{{ item.projectName }}</div>
            <div class="classBlock3">
              <div>{{ item.person }}</div>
              <div>{{ item.school }}</div>
            </div>
            <div class="classBlock3 classBlock4">
              <div style="color:#9e9e9e">{{ item.blogs }}</div>
              <div>项目编号{{ item.num }}</div>
            </div>
        </div>
        <div class="classBlockBtn">
              <el-button type="primary" class="bt1" size="mini" @click="edit">进度详情</el-button>
              <el-button type="primary" class="bt1" size="mini" @click="pmFund">资金情况</el-button>
              <el-button type="primary" class="bt1" size="mini" @click="projectDetails">结项</el-button>
        </div>
      </div>
    </div>
<!-- 循环展示框列表结束 -->
    <div style="display: flex;width: 90%;justify-content: flex-end;margin-top: 30px;">
      <el-pagination
        background
        layout="prev, pager, next"
        :total="1">
      </el-pagination>
    </div>
    
  </div>
</template>

<script>
    export default {
      data() {
        return {
          input:'',
          items:[
             
              {
                finish:'已结题',
                projectName:'疯狂星期四',
                person:'袁一鸣',
                school:'深技师',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                finish:'已结题',
                projectName:'疯狂星期四',
                person:'袁一鸣',
                school:'深技师',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                projectName:'疯狂星期四',
                finish:'已结题',

                person:'袁一鸣',
                school:'深技师',
                blogs:'个人博客',
                num:'JK123245679'
              },
              {
                projectName:'疯狂星期四',
                finish:'已结题',

                person:'袁一鸣',
                school:'深技师',
                blogs:'个人博客',
                num:'JK123245679'
              }
          ],
          options:[],
          options1:[],
          options2:[],
          options3:[],
          options4:[],
          pavalues:{
            value:'',
            value1:'',
            value2:'',
            value3:'',
            value4:'',
          }
        }
      },
      methods:{
        edit(){
          this.$router.push('/ProjectManagement1')
        },
        pmFund(){
          this.$router.push('/ProjectManagementFund1')
        },
        handleSelectionChange(val) {
          this.multipleSelection = val;
        },
        init(){
        },
        projectDetails(){
        }
      }
    }
</script>

<style lang="less">
.ProjectManagement{
  
    .projectBlock{   //大框
      width: 100%;
      height: 350px;
      display: flex;
      overflow: hidden;
      flex-wrap: wrap;
      overflow:auto;
      .classBlock{   //每个独立小框
          flex-shrink: 0;
          overflow: hidden;
          position: relative;
          margin-right: 30px;
          margin-bottom: 15px;
          width: 310px;height: 300px;
          background-color: rgb(255, 255, 255);
          box-shadow: 1px 2px 3px #ccc;
          border: 1px solid #ccc;
          border-radius: 5px;
          display: flex;
          flex-direction: column;
          .projectBlockPosition{    //完成状态
            border-radius: 30px;
            position: absolute;
            top: 5px;
            left: 5px;
            width: 80px;
            height: 30px;
            // line-height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            background: #000;
            opacity: 0.7;
            font-size: 16px;
            color:#d9dde7;
            // font-size: 14px;
          }
          img{
            width: 100%;height: 150px;
          }

          .classBlock1{   //中间栏
            margin-bottom: 10px;
            margin-top: 5px;
            box-sizing: border-box;
            padding: 0 5px;
            .classBlock2{   //项目名称
              margin-left: 5px;
              margin-bottom: 5px;
              margin-top: 4px;
              text-align: left;
              font-size: 18px;
            }
            .classBlock3{   //学校、姓名
              box-sizing: border-box;
              padding: 0 5px;
              font-size: 16px;
              width: 100%;
              margin-top: 6px;
              display: flex;
              justify-content: space-between;
            }
            .classBlock4{  //博客、编号
              margin-top: 8px;
            }
          }

          .classBlockBtn{  //按钮栏
            box-sizing: border-box;
            padding:0 6px;
            display: flex;
            flex: 1;
            width: 100%;
            justify-content: center;
            align-items: center;
            background-color:#F5F4F4 ;
            .bt1{
              width: 100px;
              height: 35px;
              font-size: 14px;
            }
          }
      }
    }



    
  }
</style>