add:water full

package.json

@@ -21,6 +21,8 @@
     "querystring": "^0.2.0",
     "vue": "^2.5.2",
     "vue-router": "^3.0.1",
+    "vue-waterfall": "^1.0.6",
+    "vue-waterfall-easy": "^2.4.4",
     "vuex": "^3.1.1"
   },
   "devDependencies": {

src/components/commons/SearchBar.vue

@@ -16,7 +16,7 @@
             </el-tabs>
             <div class="search-input">
               <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
-                <el-button class="search-button" slot="append"  type="primary" >搜索</el-button>
+                <el-button class="search-button" slot="append"  type="primary" @click="handleSearchData()">搜索</el-button>
               </el-input>
             </div>
           </div>
@@ -27,7 +27,7 @@
       </el-col>
     </el-row>
     <!--TabNav-->
-    <el-tabs v-model="activeTab" @tab-click="handleClick" class="square-tab" v-if="menuArr">
+    <el-tabs :value="currTab" @tab-click="handleClick" class="square-tab" v-if="menuArr">
       <el-tab-pane v-if="!menuArr.menuArr1" v-for="item in menuArr" :name="item.name" :key="item.name" class="tab-menu1">
         <span slot="label" style="font-size: 18px">{{item.label}}</span>
       </el-tab-pane>
@@ -43,23 +43,37 @@
 
 
 <script>
+  import { mapGetters , mapActions} from 'vuex'
   export default {
     name: 'SearchBar',
     // components:{},
-    props: ['tabArr','menuArr','activeTab'],
+    props: ['tabArr','menuArr'],
     data(){
       return {
         searchType:'project',
         searchVal: '',
+        // currTab:''
       }
     },
     computed:{
-
-    },
-    methods:{
-      handleClick(){
-
+      ...mapGetters(['getActiveTab']),
+      currTab: {
+        get() {
+          return this.getActiveTab;
+        },
+        set(){}
       }
+     },
+    methods:{
+      ...mapActions(["setActiveTab"]),
+      handleClick(tab){
+        this.setActiveTab(tab.name);
+        this.currTab=tab.name;
+
+      },
+      // handleSearchData(){
+      //   if(getActiveTab == 'square')
+      // }
     }
   }
 

src/pages/Homepage/Homepage.vue

@@ -1,26 +1,35 @@
 <template>
   <div class="home-wrapper">
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
     <div class="home-page container">
       <el-row>
         <el-col :span="19" class="test-type-wrapper">
-          <TestMenu :testTypeList="homeData.testTypeList"></TestMenu>
-          <TestCard :applicationTypeList="homeData.applicationTypeList"></TestCard>
+          <TestMenu :testTypeList="getHomeData.testTypeList"></TestMenu>
+
+<!--          <vue-waterfall-easy :imgsArr="homeData.applicationTypeList">-->
+<!--&lt;!&ndash;            <div class="img-info" slot-scope="props">&ndash;&gt;-->
+<!--&lt;!&ndash;              <p class="some-info">第{{props.index+1}}张图片</p>&ndash;&gt;-->
+<!--&lt;!&ndash;              <p class="some-info">{{props.value.info}}</p>&ndash;&gt;-->
+<!--&lt;!&ndash;            </div>&ndash;&gt;-->
+<!--&lt;!&ndash;            <TestCard :application="props" slot-scope="props" class="img-info"></TestCard>&ndash;&gt;-->
+<!--          </vue-waterfall-easy>-->
+          <TestCard></TestCard>
+
         </el-col>
         <el-col :span="5"  class="homepage-right-modules">
           <LoginCard/>
-          <HotCrowd :applicationTypeRank="homeData.applicationTypeRank"/>
-          <HotAgency :agencyRank="homeData.agencyRank"/>
-          <HotUser :userRank="homeData.userRank"/>
-          <HotContest :competitionList="homeData.competitionList"/>
+          <HotCrowd :applicationTypeRank="getHomeData.applicationTypeRank"/>
+          <HotAgency :agencyRank="getHomeData.agencyRank"/>
+          <HotUser :userRank="getHomeData.userRank"/>
+          <HotContest :competitionList="getHomeData.competitionList"/>
         </el-col>
       </el-row>
       <el-row :gutter="15">
         <el-col :span="12">
-          <ResourceAndTool :resourceList="homeData.resourceList"></ResourceAndTool>
+          <ResourceAndTool :resourceList="getHomeData.resourceList"></ResourceAndTool>
         </el-col>
         <el-col :span="12">
-          <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
+          <BrandCard :residentAgencyList = getHomeData.residentAgencyList></BrandCard>
         </el-col>
       </el-row>
       <InstitutionCard></InstitutionCard>
@@ -42,7 +51,10 @@
   import HotContest from './HotContest'
   import PopularProject from '../Square/PopularProject'
   import Http from '@/js/http.js'
-
+  import {mapActions,mapGetters} from 'vuex'
+  // import vueWaterfallEasy from 'vue-waterfall-easy'
+  import Waterfall from 'vue-waterfall/lib/waterfall'
+  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
   export default {
     name: 'Homepage',
     components: {
@@ -57,11 +69,13 @@
       LoginCard,
       TestCard,
       BrandCard,
-      ResourceAndTool
+      ResourceAndTool,
+      Waterfall,
+      WaterfallSlot
+      // vueWaterfallEasy
     },
     data() {
       return {
-        activeTab:'homepage',
         tabArr: [
           {label: "项目", name: "project"},
           {label: "工具", name: "tool"},
@@ -90,17 +104,781 @@
             {label: "更多", name: "findMore"},
           ],
         },
-        homeData:{}
+        homeData:{
+          "testTypeList": [
+            {
+              "code": "JKCS",
+              "name": "接口测试"
+            },
+            {
+              "code": "JRXCE",
+              "name": "兼容性测试"
+            },
+            {
+              "code": "KKXCS",
+              "name": "可靠性测试"
+            },
+            {
+              "code": "WDXCS",
+              "name": "稳定性测试"
+            },
+            {
+              "code": "GNCS",
+              "name": "功能测试"
+            },
+            {
+              "code": "XNCS",
+              "name": "性能测试"
+            },
+            {
+              "code": "AQCS",
+              "name": "安全测试"
+            },
+            {
+              "code": "YYXCS",
+              "name": "易用性测试"
+            },
+            {
+              "code": "YYGGZD",
+              "name": "应用故障诊断"
+            },
+            {
+              "code": "YYLDSM",
+              "name": "应用漏洞扫描"
+            },
+            {
+              "code": "DMAQSJ",
+              "name": "代码安全审计"
+            },
+            {
+              "code": "FXPG",
+              "name": "风险评估"
+            },
+            {
+              "code": "DBCP",
+              "name": "等保测评"
+            },
+            {
+              "code": "PGPJ",
+              "name": "评估评价"
+            },
+            {
+              "code": "DZCS",
+              "name": "定制测试"
+            }
+          ],
+          "applicationTypeList": [
+            {
+              "code": "ANDROID",
+              "name": "Android APP",
+              "count": null,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/%E5%AE%89%E5%8D%93.png",
+              "testTypeList": [
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "ANDROIDaa",
+              "name": "Androidaa APP",
+              "count": null,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/%E5%AE%89%E5%8D%93.png",
+              "testTypeList": [
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "IOS",
+              "name": "IOS APP",
+              "count": null,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/ios.png",
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+
+                {
+                  "code": "KKXCS",
+                  "name": "可靠性测试"
+                },
+                {
+                  "code": "WDXCS",
+                  "name": "稳定性测试"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "WEB",
+              "name": "Web应用",
+              "count": null,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/WEB%E5%BA%94%E7%94%A8.png",
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "C/S",
+              "name": "C/S应用软件",
+              "count": null,
+              "image": null,
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "JRXCE",
+                  "name": "兼容性测试"
+                },
+                {
+                  "code": "KKXCS",
+                  "name": "可靠性测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },{
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "FLUSHBONAD",
+              "name": "嵌入式软件",
+              "count": null,
+              "image": null,
+              "testTypeList": [
+
+                {
+                  "code": "WDXCS",
+                  "name": "稳定性测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "INDUSTRY",
+              "name": "工业控制软件",
+              "count": null,
+              "image": null,
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "TECHNOLOGY",
+              "name": "信息技术产品",
+              "count": null,
+              "image": null,
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "JRXCE",
+                  "name": "兼容性测试"
+                },
+                {
+                  "code": "KKXCS",
+                  "name": "可靠性测试"
+                },
+                {
+                  "code": "WDXCS",
+                  "name": "稳定性测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "KKXCS",
+                  "name": "可靠性测试"
+                },
+                {
+                  "code": "WDXCS",
+                  "name": "稳定性测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            },
+            {
+              "code": "OTHER",
+              "name": "其他",
+              "count": null,
+              "image": null,
+              "testTypeList": [
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "JKCS",
+                  "name": "接口测试"
+                },
+                {
+                  "code": "JRXCE",
+                  "name": "兼容性测试"
+                },
+                {
+                  "code": "KKXCS",
+                  "name": "可靠性测试"
+                },
+                {
+                  "code": "WDXCS",
+                  "name": "稳定性测试"
+                },
+                {
+                  "code": "GNCS",
+                  "name": "功能测试"
+                },
+                {
+                  "code": "XNCS",
+                  "name": "性能测试"
+                },
+                {
+                  "code": "AQCS",
+                  "name": "安全测试"
+                },
+                {
+                  "code": "YYXCS",
+                  "name": "易用性测试"
+                },
+                {
+                  "code": "YYGGZD",
+                  "name": "应用故障诊断"
+                },
+                {
+                  "code": "YYLDSM",
+                  "name": "应用漏洞扫描"
+                },
+                {
+                  "code": "DMAQSJ",
+                  "name": "代码安全审计"
+                },
+                {
+                  "code": "FXPG",
+                  "name": "风险评估"
+                },
+                {
+                  "code": "DBCP",
+                  "name": "等保测评"
+                },
+                {
+                  "code": "PGPJ",
+                  "name": "评估评价"
+                },
+                {
+                  "code": "DZCS",
+                  "name": "定制测试"
+                }
+              ]
+            }
+          ],
+          "applicationTypeRank": [
+            {
+              "code": "ANDROID",
+              "name": "Android APP",
+              "count": 9,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/%E5%AE%89%E5%8D%93.png",
+              "testTypeList": null
+            },
+            {
+              "code": "IOS",
+              "name": "IOS APP",
+              "count": 5,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/ios.png",
+              "testTypeList": null
+            },
+            {
+              "code": "WEB",
+              "name": "Web应用",
+              "count": 3,
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/ApplicationType/WEB%E5%BA%94%E7%94%A8.png",
+              "testTypeList": null
+            }
+          ],
+          "agencyRank": [
+            {
+              "id": 1,
+              "userId": 12,
+              "logo": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/logo_20471_1566375776184.png",
+              "name": "测评机构",
+              "allTaskPrice": null,
+              "taskCount": 4
+            }
+          ],
+          "userRank": [
+            {
+              "id": 20471,
+              "name": "郭超",
+              "userName": "郭超",
+              "gender": null,
+              "email": "dazao.yi@gmail.com",
+              "mobile": null,
+              "password": "********",
+              "province": null,
+              "city": null,
+              "photoUrl": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/WechatIMG3_99232_1566382744769.jpeg",
+              "allProjectPrice": null,
+              "authType": "agency",
+              "taskCount": 5,
+              "birthday": null,
+              "detailedAddress": null,
+              "personalCompetence": null,
+              "unit": null,
+              "county": null
+            },
+            {
+              "id": 99236,
+              "name": "huangyong",
+              "userName": "huangyong",
+              "gender": null,
+              "email": "huangyong@mooctest.com",
+              "mobile": "18861906033",
+              "password": "********",
+              "province": null,
+              "city": null,
+              "photoUrl": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/WechatIMG3_99232_1566382744769.jpeg",
+              "allProjectPrice": null,
+              "authType": "agency",
+              "taskCount": 4,
+              "birthday": null,
+              "detailedAddress": null,
+              "personalCompetence": null,
+              "unit": null,
+              "county": null
+            },
+            {
+              "id": 99179,
+              "name": "申玉强_教师",
+              "userName": "申玉强_教师",
+              "gender": null,
+              "email": "951775089@qq.com",
+              "mobile": null,
+              "password": "********",
+              "province": null,
+              "city": null,
+              "photoUrl": "https://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/timg.jpg",
+              "allProjectPrice": null,
+              "authType": "agency",
+              "taskCount": 3,
+              "birthday": null,
+              "detailedAddress": null,
+              "personalCompetence": null,
+              "unit": null,
+              "county": null
+            }
+          ],
+          "fieldList": [
+            {
+              "code": "KJFW",
+              "name": "科技服务"
+            },
+            {
+              "code": "HLWFW",
+              "name": "互联网服务"
+            },
+            {
+              "code": "JCDL",
+              "name": "集成电路"
+            },
+            {
+              "code": "GYKZ",
+              "name": "工业控制"
+            },
+            {
+              "code": "BDYY",
+              "name": "北斗应用"
+            },
+            {
+              "code": "OTHER",
+              "name": "其他"
+            }
+          ],
+          "competitionList": [
+            {
+              "id": 2,
+              "name": "2020全国大学生软件测试大赛",
+              "linkUrl": "http://www.mooctest.org/#/NoticeDetail/61",
+              "startTime": "2020-06-28T02:13:15.000+0000",
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/mooctest.png",
+              "isDeleted": 0
+            },
+            {
+              "id": 1,
+              "name": "5月份移动众测月度赛",
+              "linkUrl": "http://www.mooctest.org/#/NoticeDetail/69",
+              "startTime": "2020-06-23T02:12:58.000+0000",
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/mooctest.png",
+              "isDeleted": 0
+            },
+            {
+              "id": 3,
+              "name": "鲲鹏生态的表达能力评测系统众测比赛",
+              "linkUrl": "http://www.mooctest.org/#/NoticeDetail/71",
+              "startTime": "2020-06-22T02:13:55.000+0000",
+              "image": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/mooctest.png",
+              "isDeleted": 0
+            }
+          ],
+          "resourceList": [
+            {
+              "code": "ANDROID",
+              "name": "Android自动化测试工具"
+            },
+            {
+              "code": "WEB",
+              "name": "WEB自动化测试工具"
+            },
+            {
+              "code": "DEVELOPE",
+              "name": "开发者测试工具"
+            },
+            {
+              "code": "REPORT",
+              "name": "报告服务"
+            }
+          ],
+          "residentAgencyList": [
+            {
+              "id": 60,
+              "userId": 99237,
+              "logo": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/7f5497ce69ba414589dc52750e9ed5c9!400x400_99222_1567075603729.jpeg",
+              "name": "慕测科技",
+              "allTaskPrice": null,
+              "taskCount": null
+            },
+            {
+              "id": 51,
+              "userId": 99233,
+              "logo": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Image/logo_99222_1566377628139.png",
+              "name": "百度众测公司",
+              "allTaskPrice": null,
+              "taskCount": null
+            }
+          ],
+          "partnerList": [
+            {
+              "id": 1,
+              "name": "南京大学",
+              "imageUrl": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/NJULogo%20%E7%B4%AB.png"
+            },
+            {
+              "id": 2,
+              "name": "慕测科技",
+              "imageUrl": "http://mooctest-crowd-service.oss-cn-hangzhou.aliyuncs.com/Partner/mooctest.png"
+            }
+          ]
+        }
       }
     },
     methods:{
+      ...mapActions(['setActiveTab','setHomeData']),
       loadData(){
-        Http.get('/api/common/index/info').then((res)=>{
-          this.homeData = res.data;
+         this.homeData.applicationTypeList.map((item)=>{
+           item.height = (item.testTypeList.length / 2) * 24 + 100;
+           return item;
         })
+        this.setHomeData(this.homeData);
+        // Http.get('/api/common/index/info').then((res)=>{
+        //   this.setHomeData(res.data);
+        // })
       }
     },
+    computed:{
+      ...mapGetters(['getHomeData']),
+    },
     mounted() {
+      this.setActiveTab('homepage');
       this.loadData();
     }
   }

src/pages/Homepage/TestCard.vue

@@ -1,36 +1,69 @@
 <template>
-  <div>
-    <el-row :gutter="10" v-for="(item,index) in applicationTypeArr" :key="index">
-      <el-col :span="8" v-for="application in item" :key="application.code">
-        <el-card class="test-card">
-          <div slot="header" class="clearfix test-card-header">
-            <span>{{application.name}}</span>
-          </div>
-          <div>
-            <span v-for="type in application.testTypeList" :key="type.code" style="width: 50%">{{type.name}}</span>
-          </div>
-        </el-card>
-      </el-col>
+  <div class="card-waterfull">
+    <el-row :gutter="10">
+<!--      <el-col :span="8"   style="margin-bottom: 15px">-->
+
+<!--      </el-col>-->
+
+      <waterfall
+                        :line-gap="400"
+                        :min-line-gap="150"
+                        :max-line-gap="220"
+                        :single-max-width="300"
+        :watch="getHomeData.applicationTypeList">
+        <!-- each component is wrapped by a waterfall slot -->
+        <waterfall-slot
+          v-for="(item, index) in getHomeData.applicationTypeList"
+          width="300"
+          :height="item.height"
+          :order="index"
+          :key="item.code"
+        >
+          <el-card class="test-card" :body-style="{width:'300'}">
+            <div slot="header" class="clearfix test-card-header">
+              <span>{{item.name}}</span>
+            </div>
+            <div>
+              <el-row :gutter="20">
+                <el-col :span="12"v-for="type in item.testTypeList" :key="type.code">
+                  <span>{{type.name}}</span>
+                </el-col>
+              </el-row>
+            </div>
+          </el-card>
+        </waterfall-slot>
+      </waterfall>
+
+<!--      <div style=" ">-->
+<!--        -->
+<!--      </div>-->
     </el-row>
   </div>
 </template>
 
 <script>
+  import Waterfall from 'vue-waterfall/lib/waterfall'
+  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
+  import {mapGetters} from  'vuex'
   export default {
     name: "TestCard",
-    props:['applicationTypeList'],
     data(){
       return{
-        applicationTypeArr:[]
       }
     },
+    components:{
+      Waterfall,
+      WaterfallSlot
+    },
+    computed:{
+      ...mapGetters(['getHomeData'])
+    },
     mounted() {
-      // console.log(this.applicationTypeList);
-      // for(var i=0;i<this.applicationTypeList.length;i+=3){
-      //   this.applicationTypeArr.push(this.applicationTypeList.slice(i,i+3));
-      // }
+
     }
   }
+
+
 </script>
 
 <style lang="less">
@@ -46,4 +79,13 @@
     padding-left: 5px;
   }
 }
+
+  .card-waterfull {
+    .el-card {
+      width: 300px !important;
+    }
+    .el-row {
+      margin:  0 !important;
+    }
+  }
 </style>

src/pages/Square/Square2.0.vue

@@ -1,6 +1,6 @@
 <template>
   <div>
-    <SearchBar :tabArr="tabArr" :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
+    <SearchBar :tabArr="tabArr" :menuArr="menuArr"></SearchBar>
     <div class="container">
       <el-row>
         <el-col :span="18" class="project-task">
@@ -30,23 +30,25 @@
   import SquareCard from './SquareCard'
   import PopularProject from './PopularProject'
   import PopularTask from './PopularTask'
+  import { mapActions ,mapGetters} from 'vuex';
   export default {
     name: 'Square2.0',
     data(){
       return {
-        activeTab:'home',
         tabArr : [
-          {label:"项目",name:"project"},
+          {label:"项目",name:"project",searchUrl:"",targetPage:""},
           {label:"任务",name:"task"}
         ],
         menuArr: [
-          {label:"首页",name:"home"},
+          {label:"首页",name:"squareHome"},
           {label:"测试项目",name:"testProject"},
           {label:"测试任务",name:"teskTask"}
         ],
         projectAndTaskArr:[],
         hotCrowdTestProjectVOs:[],
         hotCrowdTaskVOs:[],
+        activePage:1,
+        keyword:''
       }
     },
     components: {
@@ -55,7 +57,23 @@
       PopularProject,
       PopularTask
     },
+    computed:{
+      ...mapGetters(['getActiveTab']),
+      currTab: {
+        get() {
+          if(this.getActiveTab === 'squareHome'){
+            this.loadData();
+          }
+          if(this.getActiveTab === 'testProject'){
+            this.loadTestProject();
+          }
+          return this.getActiveTab;
+        },
+        set(){}
+      }
+    },
     methods:{
+      ...mapActions(['setActiveTab']),
       loadData(){
         Http.get('/api/square/list').then((res)=>{
           let crowdTestProjectVOs = res.data.crowdTestProjectVOs;
@@ -68,10 +86,20 @@
           //   this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
           // }
         })
-      }
+      },
+      loadTestProject(){
+        let url = '/api/square/project/list';
+        let params = {"keyword": this.keyword,"activePage":this.activePage}
+        Http.get(url,params)
+          .then(res=>{
+            console.log(res);
+          })
+      },
     },
     mounted() {
       this.loadData();
+      this.setActiveTab('squareHome');
+      this.loadTestProject();
     }
   }
 </script>

src/pages/Technology/HotActicle.vue

@@ -14,7 +14,7 @@
               <div class="list-item-title">
                 {{item.name}}
               </div>
-              <div class="project-people-number">
+              <div class="project-people-reading">
                 {{item.reading}}阅读
               </div>
             </div>
@@ -100,7 +100,7 @@
         display: inline-block;
         margin: 2px 0;
       }
-      .project-people-number {
+      .project-people-reading {
         font-size:16px;
         font-family:Roboto;
         font-weight:400;

src/pages/Technology/Technology2.0.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="technology-container">
-    <SearchBar :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
+    <SearchBar :menuArr="menuArr"></SearchBar>
     <div class="container" style="margin: 15px auto">
       <el-row>
         <el-col :span="18" class="project-task">
@@ -29,7 +29,7 @@
   import HotActicle from './HotActicle'
   import PopularProject from '../Square/PopularProject'
   import qs from 'querystring'
-  import { mapActions } from 'vuex';
+  import { mapActions ,mapGetters} from 'vuex';
 
   export default {
     name: 'Technology2.0',
@@ -41,7 +41,6 @@
     },
     data(){
       return {
-        activeTab:'article',
         menuArr: [
           {label:"技术文章",name:"article"},
           {label:"技术专著",name:"monograph"},
@@ -52,8 +51,23 @@
         techArticleList:{}
       }
     },
+    computed:{
+      ...mapGetters(['getActiveTab']),
+      currTab: {
+        get() {
+          if(this.getActiveTab === 'article'){
+            this.loadTechnologyArticles();
+          }
+          if(this.getActiveTab === 'monograph'){
+            this.loadTechnologyMG();
+          }
+          return this.getActiveTab;
+        },
+        set(){}
+      }
+    },
     methods:{
-      ...mapActions(['setTechArticleList','setCurrentTab']),
+      ...mapActions(['setTechArticleList','setActiveTab']),
       loadHotArticles(){
         Http.get('/api/technical/ranking').then((res)=>{
           this.articleArr = res;
@@ -70,6 +84,15 @@
             this.setTechArticleList(this.techArticleList);
           })
       },
+      loadTechnologyMG(){
+        let url = '/api/technical/articles';
+        let params = {"keyword": this.keyword,"activePage":this.activePage}
+        Http.post(url,params)
+          .then(res=>{
+            this.techArticleList = res.data.technicalArticlespage;
+            this.setTechArticleList(this.techArticleList);
+          })
+      },
       handlePageChange(index){
         this.activePage = index;
         this.loadTechnologyArticles();
@@ -78,8 +101,8 @@
     mounted() {
       this.loadHotArticles();
       this.loadTechnologyArticles();
-      this.setCurrentTab('technology');
-      this.setCurrentTab('article');
+      this.setActiveTab('article');
+      this.loadTechnologyMG();
     }
   }
 </script>

src/pages/Technology/TechnologyMG2.0.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="technology-container">
+    <SearchBar :menuArr="menuArr"></SearchBar>
+    <div class="container" style="margin: 15px auto">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <TechnologyCard></TechnologyCard>
+          <el-pagination
+            :page-size="10"
+            layout="prev, pager, next"
+            :total="techArticleList.totalElements"
+            @current-change="handlePageChange"
+            class="pull-right"
+          >
+          </el-pagination>
+        </el-col>
+        <el-col :span="6"  class="popular-modules">
+          <HotActicle :articleArr="articleArr"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import SearchBar from '../../components/commons/SearchBar'
+  import TechnologyCard from './TechnologyCard'
+  import HotActicle from './HotActicle'
+  import PopularProject from '../Square/PopularProject'
+  import qs from 'querystring'
+  import { mapActions } from 'vuex';
+
+  export default {
+    name: 'TechnologyMG2.0',
+    components: {
+      SearchBar,
+      TechnologyCard,
+      PopularProject,
+      HotActicle
+    },
+    data(){
+      return {
+        activeTab:'article',
+        menuArr: [
+          {label:"技术文章",name:"article"},
+          {label:"技术专著",name:"monograph"},
+        ],
+        articleArr:[],
+        keyword:"",
+        activePage:1,
+        techArticleList:{}
+      }
+    },
+    methods:{
+      ...mapActions(['setTechArticleList','setCurrentTab']),
+      loadHotArticles(){
+        Http.get('/api/technical/ranking').then((res)=>{
+          this.articleArr = res;
+        })
+      },
+      loadTechnologyArticles(){
+        // let url=`/api/technical/articles?searchCondition={"keyword":"${this.keyword}","activePage":${this.activePage}}`;
+        // Http.get(encodeURI(url))
+        let url = '/api/technical/articles';
+        let params = {"keyword": this.keyword,"activePage":this.activePage}
+        Http.post(url,params)
+          .then(res=>{
+            this.techArticleList = res.data.technicalArticlespage;
+            this.setTechArticleList(this.techArticleList);
+          })
+      },
+      handlePageChange(index){
+        this.activePage = index;
+        this.loadTechnologyArticles();
+      }
+    },
+    mounted() {
+      this.loadHotArticles();
+      this.loadTechnologyArticles();
+      this.setCurrentTab('technology');
+      this.setCurrentTab('article');
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-container {
+    /deep/ .search-input,/deep/ .releaseBtn{
+      margin: 20px 0 0 0 !important;
+    }
+
+    .popular-modules {
+      padding-left: 15px;
+    }
+  }
+
+</style>

src/router/index.js

@@ -255,11 +255,30 @@ export default new Router({
     {
       path: '/technology',
       name: 'Technology',
+      // redirect: '/technology/article',
       component: resolve => require(['@/pages/Technology/Technology2.0.vue'], resolve),
       meta: {
         title: '',
         requireAuth: false,
       },
     },
+    // {
+    //   path: '/technology/article',
+    //   name: 'Technology',
+    //   component: resolve => require(['@/pages/Technology/Technology2.0.vue'], resolve),
+    //   meta: {
+    //     title: '',
+    //     requireAuth: false,
+    //   },
+    // },
+    // {
+    //   path: '/technology/monograph',
+    //   name: 'Technology',
+    //   component: resolve => require(['@/pages/Technology/TechnologyMG2.0.vue'], resolve),
+    //   meta: {
+    //     title: '',
+    //     requireAuth: false,
+    //   },
+    // },
   ]
 })

src/store/index.js

@@ -7,30 +7,41 @@ const store = new Vuex.Store({
   state: {
     isLogin:false,
     techArticleList: ['sss'],// 技术文章
-    currentTab:[],
+    activeTab:'',
+    homeData:{}
+
   },
   mutations:{
     setTechArticleList(state,techArticleList){
       store.state.techArticleList = techArticleList;
     },
-    setCurrentTab(state,currentTab){
-      store.state.currentTab.push(currentTab);
-    }
+    setActiveTab(state,activeTab){
+      store.state.activeTab = activeTab;
+    },
+    setHomeData(state,homeData){
+      store.state.homeData = homeData;
+    },
   },
   actions:{
     setTechArticleList({commit},techArticleList){
       commit('setTechArticleList', techArticleList)
     },
-    setCurrentTab({commit},currentTab){
-      commit('setCurrentTab', currentTab)
+    setActiveTab({commit},activeTab){
+      commit('setActiveTab', activeTab)
+    },
+    setHomeData({commit},homeData){
+      commit('setHomeData', homeData)
     }
   },
   getters:{
     getTechArticleList: () => {
       return store.state.techArticleList;
     },
-    getCurrentTab: () => {
-      return store.state.currentTab;
+    getActiveTab: () => {
+      return store.state.activeTab;
+    },
+    getHomeData: () => {
+      return store.state.homeData;
     },
   },
   modules:{