add:home layout

src/App.vue

@@ -1,5 +1,6 @@
 <template>
   <div>
+
     <header-container/>
     <div class="container-wrapper">
       <slot>

src/components/commons/Header2.0.vue

@@ -44,9 +44,9 @@
     text-align: center;
     display: flex;
     font-size: 16px;
-    color: white;
+    color: rgba(153, 153, 153, 1);
     /*height:58px;*/
-    background:rgba(47,48,48,1);
+    background:rgba(243,244,247,1);
   }
   .header-nav ul{
     margin-bottom: 0;

src/components/commons/SearchBar.vue

@@ -12,8 +12,6 @@
         <div class="search-nav">
           <div id="search-block " class="">
             <el-tabs v-model="searchType" type="card" @tab-click="handleClick" v-if="tabArr">
-<!--              <el-tab-pane label="项目" name="project"></el-tab-pane>-->
-<!--              <el-tab-pane label="任务" name="task"></el-tab-pane>-->
               <el-tab-pane v-for="item in tabArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
             </el-tabs>
             <div class="search-input">
@@ -29,10 +27,8 @@
       </el-col>
     </el-row>
     <!--TabNav-->
-    <el-tabs v-model="activeTab" @tab-click="handleClick" class="square-tab">
-      <el-tab-pane label="首页" name="homepage"></el-tab-pane>
-      <el-tab-pane label="测试项目" name="testProject"></el-tab-pane>
-      <el-tab-pane label="测试任务" name="testTask"></el-tab-pane>
+    <el-tabs v-model="activeTab" @tab-click="handleClick" class="square-tab" v-if="menuArr">
+      <el-tab-pane v-for="item in menuArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
     </el-tabs>
     <div>
     </div>
@@ -44,7 +40,7 @@
   export default {
     name: 'SearchBar',
     // components:{},
-    props: ['tabArr'],
+    props: ['tabArr','menuArr'],
     data(){
       return {
         searchType:'project',

src/pages/Homepage/Homepage.vue

@@ -0,0 +1,89 @@
+<template>
+  <div class="home-wrapper">
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
+    <div class="home-page container">
+      <el-row>
+        <el-col :span="19" class="test-type-wrapper">
+          <TestMenu></TestMenu>
+          <TestCard></TestCard>
+        </el-col>
+        <el-col :span="5"  class="homepage-right-modules">
+          <LoginCard/>
+<!--          <PopularProject />-->
+        </el-col>
+      </el-row>
+      <InstitutionCard></InstitutionCard>
+    </div>
+  </div>
+</template>
+
+<script>
+  import SearchBar from '../../components/commons/SearchBar'
+  import TestMenu from './TestMenu'
+  import LoginCard from './LoginCard'
+  import TestCard from './TestCard'
+  import InstitutionCard from './InstitutionCard'
+  import PopularProject from '../Square/PopularProjext'
+
+  export default {
+    name: 'Homepage',
+    components: {
+      InstitutionCard,
+      SearchBar,
+      TestMenu,
+      PopularProject,
+      LoginCard,
+      TestCard
+    },
+    data() {
+      return {
+        tabArr: [
+          {label: "工具", name: "tool"},
+          {label: "机构", name: "institution"},
+          {label: "专家", name: "expert"}
+        ],
+        menuArr: [
+          {label: "首页", name: "homepage"},
+          {label: "众测广场", name: "square"},
+          {label: "众测技术", name: "technology"},
+          // {label: "|", name: "segmentation"},
+          {label: "科技服务", name: "monograph"},
+          {label: "服务互联网", name: "Internet"},
+          {label: "集成电路", name: "integratedCircuit"},
+          {label: "智能传感器", name: "Sensor"},
+          {label: "高端装备", name: "Assembly"},
+          {label: "更多", name: "more"},
+          // {label: "|", name: "segmentation"},
+          {label: "找机构", name: "findInstitution"},
+          {label: "找专家", name: "finfExpert"},
+          // {label: "更多", name: "findMore"},
+        ]
+      }
+    },
+  }
+</script>
+
+<style  lang="less">
+  .home-wrapper {
+    /deep/ .square-tab .el-tabs__item {
+      font-size: 16px !important;
+      margin-right: 0px !important;
+    }
+    /deep/ .login-card .popular-list {
+      padding: 0 10px !important;
+    }
+    .home-page {
+      padding: 15px 0;
+    }
+    .test-type-wrapper {
+      padding-right: 15px;
+    }
+    .homepage-right-modules {
+      margin-top: 15px;
+      .el-card__body {
+        padding: 10px !important;
+      }
+    }
+  }
+
+</style>

src/pages/Homepage/InstitutionCard.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="insititution-card">
+    <div class="insititution-card-header">平台合作机构（项目组）</div>
+    <div class="insititution-card-content">
+      <el-row style="height: 80px;margin-bottom: 20px">
+      <el-col :span="9">
+        <div class="iscas-block insititution-block">
+          <img src="../../assets/img/ISCAS.png"
+               alt="logo-institution"
+               class="iscas-logo">
+          <div class="iscas-info">
+            <div class="iscas-title">
+              中国科学院软件研究所
+            </div>
+            <div class="iscas-title-english">
+              Institute of Software Chinese Academy of Sciences
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="insititution-block">
+          <div style="line-height: 60px;text-align: center;font-size:22px;
+                        font-family:Source Han Sans CN;
+                        font-weight:400;">
+            北京计算机技术及应用研究所
+          </div>
+
+        </div>
+      </el-col>
+      <el-col :span="7">
+        <div class="insititution-block">
+          <img src="../../assets/img/SJTU.png"
+               alt="logo-institution"
+               style="height: 60px;width: 100%"
+
+          >
+        </div>
+      </el-col>
+    </el-row>
+      <el-row style="height: 80px;margin-bottom: 20px">
+        <el-col :span="9">
+          <div class="iscas-block insititution-block">
+            <img src="../../assets/img/解放军工程.png"
+                 alt="logo-institution"
+                 class="insititution-logo">
+            <div class="iscas-info">
+              <div class="iscas-title">
+                中国人民解放军陆军工程大学
+              </div>
+              <div class="iscas-title-english">
+                ARMY ENGINEERING UNIVERSITY OF PLA
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="insititution-block">
+            <div style="line-height: 60px;text-align: center;font-size:22px;
+                        font-family:Source Han Sans CN;
+                        font-weight:400;">
+              上海计算机软件技术开发中心
+            </div>
+
+          </div>
+        </el-col>
+        <el-col :span="7">
+          <div class="insititution-block">
+            <img src="../../assets/img/NJU.png"
+                 alt="logo-institution"
+                 style="height: 60px;width: 100%"
+
+            >
+          </div>
+        </el-col>
+      </el-row>
+      <el-row style="height: 80px;margin-bottom: 20px">
+        <el-col :span="9">
+          <div class="iscas-block insititution-block">
+            <img src="../../assets/img/拓思.png"
+                 alt="logo-institution"
+                 class="insititution-logo">
+            <div class="iscas-info">
+              <div class="iscas-title">
+                广东拓思软件科学园有限公司
+              </div>
+              <div class="iscas-title-english">
+                GUANGDONG TOPS SOFT-PARK CO,.LTD
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="8">
+          <div class="iscas-block insititution-block">
+            <img src="../../assets/img/logo-blue.png"
+                 alt="logo-institution"
+                 class="insititution-logo">
+            <div class="iscas-info">
+              <div class="iscas-title" style="line-height: 60px;text-align: center;font-size:22px;
+                        font-family:Source Han Sans CN;
+                        font-weight:400;">
+                南京慕测信息科技有限公司
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="7">
+          <div class="insititution-block">
+            <img src="../../assets/img/SQA.png"
+                 alt="logo-institution"
+                 style="height: 60px;width: 100%"
+
+            >
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "InstitutionCard"
+  }
+</script>
+
+<style scoped lang="less">
+  .insititution-card {
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 4px 30px 0px rgba(8, 6, 6, 0.08);
+    margin: 15px 0;
+    padding: 15px 0 15px 15px;
+
+    .insititution-card-header {
+      font-size: 24px;
+      font-family: Source Han Sans CN;
+      font-weight: 500;
+      color: rgba(0, 118, 203, 1);
+      text-align: center;
+      height: 60px;
+      line-height: 60px;
+      margin:25px auto;
+    }
+
+    .insititution-card-content {
+      .insititution-block {
+        padding: 10px;
+        border: 1px solid #ccc;
+        margin: 0 10px 20px 0;
+        height: 60px;
+        .insititution-logo {
+          height: 60px;
+          width: 65px;
+          margin-right: 15px;
+        }
+      }
+      .iscas-block {
+        display: flex;
+        .iscas-logo {
+          width: 120px;
+          height: 60px;
+          display: inline-block;
+        }
+
+        .iscas-info {
+          display: inline-block;
+          height: 60px;
+          .iscas-title {
+            font-size: 17px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 1);
+          }
+
+          .iscas-title-english {
+            font-size: 10px;
+            font-family: Source Han Sans CN;
+            font-weight: 400;
+            color: rgba(0, 0, 0, 1);
+          }
+        }
+      }
+    }
+  }
+</style>

src/pages/Homepage/LoginCard.vue

@@ -0,0 +1,66 @@
+<template>
+  <el-card class="login-card">
+    <div class="login-welcome">
+      <img src="../../assets/img/logo-project.png" alt="welcome-img" class="pull-left welcome-img">
+      <div style="margin-left: 46px">
+        <div class="welcome-title">
+          hi，欢迎使用群智众测平台
+        </div>
+        <div class="welcome-content">
+          众测群智，不一样的深度测试
+        </div>
+      </div>
+      <div class="welcome-btn">
+        <el-button type="primary" size="mini" class="pull-left login-btn">登录</el-button>
+        <el-button type="danger" size="mini" class="pull-right cancel-btn">取消</el-button>
+      </div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "LoginCard"
+  }
+</script>
+
+<style scoped lang="less">
+.login-card {
+  margin-bottom: 15px;
+  .welcome-img {
+    width: 40px;
+    height: 40px;
+    display: inline-block;
+    margin: 2px 0;
+  }
+  .welcome-title {
+    font-size:14px;
+    font-family:Source Han Sans CN;
+    font-weight:bold;
+    color:rgba(0,0,0,1);
+  }
+  .welcome-content {
+    font-size:13px;
+    font-family:Source Han Sans CN;
+    font-weight:400;
+    color:rgba(0,0,0,1);
+  }
+  .welcome-btn {
+    width: 100%;
+    height: 28px;
+    margin-top: 25px;
+    .login-btn {
+      background-color: rgba(0, 118, 203,1);
+      &:hover {
+        background-color: rgba(0, 118, 203,0.8);
+      }
+    }
+    .cancel-btn {
+      background-color:rgba(217,92,93,1);
+      &:hover {
+        background-color:rgba(217,92,93,0.8);
+      }
+    }
+  }
+}
+</style>

src/pages/Homepage/TestCard.vue

@@ -0,0 +1,31 @@
+<template>
+  <el-card class="test-card">
+    <div slot="header" class="clearfix test-card-header">
+      <span>移动APP测试</span>
+    </div>
+    <div>
+      设备兼容性测试 性能测试
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "TestCard"
+  }
+</script>
+
+<style lang="less">
+.test-card {
+  border: none;
+  .el-card__header{
+    height:48px;
+    background:rgba(233,240,250,1) !important;
+    padding: 12px 15px;
+  }
+  .test-card-header {
+    border-left: 5px solid #0076cb;
+    padding-left: 5px;
+  }
+}
+</style>

src/pages/Homepage/TestMenu.vue

@@ -0,0 +1,80 @@
+<template>
+  <div class="test-menu-wrapper">
+    <div class="test-menu-item-wrapper">
+      <div class="test-menu-item" v-for="item in typeArr" :key="item.value">
+        <img src="../../assets/img/testType.png" alt="testType" class="test-menu-item-img">
+        {{item.label}}
+      </div>
+      <div class="more-test-wrapper">
+        <i class="el-icon-arrow-right more-test"></i>更多分类
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "TestMenu",
+    data() {
+      return {
+        typeArr: [
+          {label: '性能测试', value: 'performance'},
+          {label: '功能测试', value: 'functional'},
+          {label: '兼容性测试', value: 'compatibility'},
+          {label: '安全测试', value: 'security'},
+          {label: '代码漏洞测试', value: 'bug'},
+          {label: 'XX测试', value: 'XX1'},
+          {label: 'XX测试', value: 'XX2'},
+          {label: 'XX测试', value: 'XX3'},
+        ]
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .test-menu-wrapper {
+    background: rgba(255, 255, 255, 1);
+    box-shadow: 0px 4px 30px 0px rgba(8, 6, 6, 0.08);
+    padding: 15px 20px;
+    margin: 15px 0;
+    display: flex;
+
+    .test-menu-item-wrapper {
+      display: flex;
+      width: 100%;
+      justify-content: space-between;
+      .test-menu-item {
+        font-size: 14px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+        .test-menu-item-img {
+          width: 46px;
+          height: 46px;
+          background: rgba(231, 239, 247, 1);
+          border-radius: 50%;
+          padding: 6px;
+          display: block;
+          margin: 0 auto;
+          margin-bottom: 5px;
+        }
+      }
+    }
+
+    .more-test-wrapper {
+      display: block;
+      .more-test {
+        width: 20px;
+        height: 20px;
+        background: #0076cb;
+        border-radius: 50%;
+        color: white;
+        padding: 5px;
+        font-size: 20px;
+        display: block;
+        margin: 14px auto;
+      }
+    }
+  }
+</style>

src/pages/Square/Square2.0.vue

@@ -1,8 +1,8 @@
 <template>
   <div>
-    <SearchBar :tabArr="tabArr"></SearchBar>
-    <div class="container" >
-      <el-row >
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></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">
@@ -46,6 +46,11 @@
         tabArr : [
           {label:"项目",name:"project"},
           {label:"任务",name:"task"}
+        ],
+        menuArr: [
+          {label:"首页",name:"home"},
+          {label:"测试项目",name:"testProject"},
+          {label:"测试任务",name:"teskTask"}
         ]
       }
     },

src/pages/Technology/Technology2.0.vue

@@ -1,31 +1,11 @@
 <template>
   <div class="technology-container">
-    <SearchBar></SearchBar>
+    <SearchBar :menuArr="menuArr"></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>
+          <TechnologyCard></TechnologyCard>
+          <TechnologyCard></TechnologyCard>
         </el-col>
         <el-col :span="6"  class="popular-modules">
           <PopularProject />
@@ -37,23 +17,30 @@
 
 <script>
   import SearchBar from '../../components/commons/SearchBar'
-  import SquareCard from '../Square/SquareCard'
+  import TechnologyCard from './TechnologyCard'
   import PopularProject from '../Square/PopularProjext'
   export default {
     name: 'Technology2.0',
     components: {
       SearchBar,
-      SquareCard,
+      TechnologyCard,
       PopularProject
+    },
+    data(){
+      return {
+        menuArr: [
+          {label:"技术文章",name:"article"},
+          {label:"技术专著",name:"monograph"},
+        ]
+      }
     }
   }
 </script>
 
 <style scoped lang="less">
   .technology-container {
-    .search-nav,.releaseBtn{
-      margin: 20px 0 !important;
-      background-color: red !important;
+    /deep/ .search-nav,/deep/ .releaseBtn{
+      margin: 20px 0 0 0 !important;
     }
     .project-task {
       padding: 15px 0;

src/pages/Technology/TechnologyCard.vue

@@ -0,0 +1,72 @@
+<template>
+  <el-card class="technology-card">
+    <div class="card-wrapper">
+      <el-row>
+        <el-col :span="6">
+          <img src="../../assets/img/technology-img.png" alt="technology-img" class="pull-left technology-img">
+        </el-col>
+        <el-col :span="18" class="technology-detail">
+          <div class="technology-title">
+            安卓应用自动化测试中台系统
+          </div>
+          <div class="technology-info">
+            <el-row >
+              <el-col :span="6">
+                原创：慕测科技
+              </el-col>
+              <el-col :span="6">
+                来源：今日头条
+              </el-col>
+              <el-col :span="4" style="color: rgba(103,103,103,0.7)">
+                10天前
+              </el-col>
+              <el-col :span="8">
+                <span style="color: rgba(0,117,203,1)">1000</span>阅读
+              </el-col>
+            </el-row>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+
+  export default {
+    name: 'TechnologyCard',
+
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-card {
+    margin-bottom: 20px;
+    .card-wrapper {
+      .technology-img {
+        width: 100%;
+        height: 130px;
+      }
+      .technology-detail {
+        padding-left: 15px;
+        height: 130px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .technology-title{
+          font-size:22px;
+          font-family:Source Han Sans CN;
+          font-weight:500;
+          color:rgba(0,0,0,1);
+        }
+        .technology-info {
+          font-size:16px;
+          font-family:Source Han Sans CN;
+          font-weight:400;
+          color:rgba(0,0,0,1);
+        }
+      }
+
+    }
+  }
+</style>

src/router/index.js

@@ -30,13 +30,22 @@ export default new Router({
     {
       path: '/home',
       name: 'Home',
-      component: resolve => require(['@/components/Home.vue'], resolve),
+      component: resolve => require(['@/pages/Homepage/Homepage'], resolve),
       meta: {
         title: '',
         requireAuth: false,
       },
     },
     // {
+    //   path: '/home',
+    //   name: 'Home',
+    //   component: resolve => require(['@/components/Home.vue'], resolve),
+    //   meta: {
+    //     title: '',
+    //     requireAuth: false,
+    //   },
+    // },
+    // {
     //   path: '/square',
     //   name: 'Square',
     //   component: resolve => require(['@/components/Square.vue'], resolve),