crowd-test-service-frontend/src/pages/Square/Square2.0.vue

<template>
  <div>
    <SearchBar :tabArr="tabArr"></SearchBar>
    <div class="container" >
      <el-row >
        <el-col :span="18" class="project-task">
          <el-row :gutter="15" style="margin-bottom: 20px">
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
          </el-row>
          <el-row :gutter="15">
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
            <el-col :span="8">
              <SquareCard></SquareCard>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="6"  class="popular-modules">
          <PopularProject />
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
  import SearchBar from '../../components/commons/SearchBar'
  import SquareCard from './SquareCard'
  import PopularProject from './PopularProjext'
  export default {
    name: 'Square2.0',
    data(){
      return {
        tabArr : [
          {label:"项目",name:"project"},
          {label:"任务",name:"task"}
        ]
      }
    },
    components: {
      SearchBar,
      SquareCard,
      PopularProject
    }
  }
</script>

<style scoped>
  .project-task {
     padding: 15px 0;
   }

  .popular-modules {
    padding: 15px 0 15px 15px;
  }

  .search-nav {
    margin: 20px 0;
  }
</style>