Merge branch 'feature-2.0' into 'Dev'

Feature 2.0

See merge request crowd-2019/crowd-test-service-front!53

package.json

@@ -18,8 +18,11 @@
     "element-ui": "^2.11.0",
     "font-awesome": "^4.7.0",
     "mockjs": "^1.0.1-beta3",
+    "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/App.vue

@@ -1,16 +1,20 @@
 <template>
-  <div style="height:100%;width:100%;">
+  <div>
     <header-container/>
-    <div class="main-container">
-      <router-view/>
+    <div class="container-wrapper">
+      <slot>
+        <div class="main-container">
+          <router-view/>
+        </div>
+      </slot>
     </div>
     <footer-container/>
   </div>
 </template>
 
 <script>
-import HeaderContainer from '@/components/commons/Header'
-import FooterContainer from '@/components/commons/Footer'
+import HeaderContainer from '@/components/commons/Header2.0'
+import FooterContainer from '@/components/commons/Footer2.0'
 import {getCurrentUser, storageGet, storageSave} from '@/js/index'
 
 export default {

src/components/Home.vue

@@ -151,7 +151,7 @@
           </span>
         </div>
         <el-row :gutter="20">
-          <el-col :span="6" v-for="item,index in hotTaskList" :key="index">
+          <el-col :span="6" v-for="(item,index) in hotTaskList" :key="index">
             <task-card :item="item"/>
           </el-col>
         </el-row>

src/components/commons/Footer.vue

@@ -1,68 +1,67 @@
 <template>
   <div class="footer-nav">
-    <div class="container">
-      <nav class="pull-left">
-        <ul>
-          <li>
-            <a href="#">商务合作</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">关于众测</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">友情链接</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-          <li>
-            <a href="#">用户协议</a>
-          </li>
-          &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
-           <li>
-            <a href="#">隐私政策</a>
-          </li>
-        </ul>
-      </nav>
-      <div class="copyright pull-right">
-        ©{{time}}
-        <a target="_blank" href="http://www.beian.miit.gov.cn">  粤ICP备09019504号</a>
-      </div>
+    <nav class="pull-left">
+      <ul>
+        <li>
+          <a href="#">商务合作</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">关于众测</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">友情链接</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">用户协议</a>
+        </li>
+        &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+        <li>
+          <a href="#">隐私政策</a>
+        </li>
+      </ul>
+    </nav>
+    <div class="copyright pull-right">
+      ©{{time}}
+      <a target="_blank" href="http://www.beian.miit.gov.cn"> 粤ICP备09019504号</a>
     </div>
   </div>
 </template>
 
 <script>
-export default {
-  name: "footer-container",
-  data() {
-    return {
-      time: new Date().getFullYear()
-    };
-  }
-};
+  export default {
+    name: "footer-container",
+    data() {
+      return {
+        time: new Date().getFullYear()
+      };
+    }
+  };
 </script>
 
 <style scoped>
-.footer-nav {
-    background-color:#f0f0f0;
+  .footer-nav {
+    background-color: #f0f0f0;
     padding: 15px 0;
     text-align: center;
     display: flex;
     font-size: 1.2rem;
     color: #666;
-}
-.footer-nav ul{
+  }
+
+  .footer-nav ul {
     margin-bottom: 0;
     padding: 0;
     list-style: none;
-}
+  }
 
-.footer-nav ul li {
+  .footer-nav ul li {
     display: inline-block;
-}
+  }
 
-.footer-nav ul li a {
+  .footer-nav ul li a {
     color: inherit;
     padding: 5px;
     font-weight: 500;
@@ -70,13 +69,14 @@ export default {
     border-radius: 3px;
     position: relative;
     display: block;
-}
+  }
 
-.footer-nav .copyright {
+  .footer-nav .copyright {
     padding: 5px 0;
-    color:#333;
-}
-.copyright a{
-    color:#666;
-}
+    color: #333;
+  }
+
+  .copyright a {
+    color: #666;
+  }
 </style>

src/components/commons/Footer2.0.vue

@@ -0,0 +1,62 @@
+<template>
+  <div class="footer-nav">
+    <div class="container">
+      <el-row style="height: 120px">
+        <el-col :span="5" class="nav-logo-block">
+          <div class="nav-title-wrapper">
+            <img src="../../assets/img/logo-white.png" alt="logo" class="nav-logo">
+            <div class="nav-title">
+              标准驱动的集成化众测服务<br/>
+              平台及示范应用
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="19" style="padding-left: 15%">
+          <div class="copyright-block pull-left" style="margin: 12px 0">
+            版权所有 © 信息产品及科技服务集成化众测服务平台研发与应用项目组<br/>
+            京ICP备xxxxxxx号　文保网安备xxxxxxx<br/>
+            电话：86-10-xxxxxxxx　传真：86-10-xxxxxxx<br/>
+            电子邮箱：xxx@xxxxxxx.com
+          </div>
+          <div class="code-block pull-right">
+            <img src="../../assets/img/QRcode.png" alt="QRcode" class="mooctest-code" style="width: 110px;height: 110px;display: block">
+            <div style="width: 110px;text-align: center">官方微信公众号</div>
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Footer2.0"
+  }
+</script>
+
+<style scoped>
+  .footer-nav{
+    height: 120px;
+    background:rgba(47,48,48,1);
+    color: white;
+    padding: 30px 0;
+    font-size: 14px;
+    font-family:Source Han Sans CN;
+  }
+  .nav-title{
+    display: inline-block;
+  }
+  .nav-logo{
+    height: 40px;
+    width: 40px;
+    margin-right: 10px;
+  }
+  .nav-logo-block{
+    border-right: 1px solid white;
+    padding: 10px 0;
+    margin: 20px 0
+  }
+  .copyright-block , .code-block{
+    display: inline-block;
+  }
+</style>

src/components/commons/Header2.0.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="header-nav">
+    <div class="container">
+        <div class="nav-location pull-left">
+          <i class="el-icon-location-outline" style="margin-right: 5px"></i>
+          <span style="line-height: 34px">广州</span>
+        </div>
+        <div class="nav-list pull-right">
+          <ul>
+            <li>
+              <a href="#">请登录</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">免费注册</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">我的众测</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">机构入驻</a>
+            </li>
+            &nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;
+            <li>
+              <a href="#">客服中心</a>
+            </li>
+          </ul>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "Header2.0"
+  }
+</script>
+
+<style scoped>
+  .header-nav {
+    padding: 10px 0;
+    text-align: center;
+    display: flex;
+    font-size: 16px;
+    color: rgba(153, 153, 153, 1);
+    /*height:58px;*/
+    background:rgba(243,244,247,1);
+  }
+  .header-nav ul{
+    margin-bottom: 0;
+    padding: 0;
+    list-style: none;
+  }
+
+  .header-nav ul li {
+    display: inline-block;
+  }
+
+  .header-nav ul li a {
+    color: inherit;
+    padding: 5px;
+    font-weight: 500;
+    text-transform: uppercase;
+    border-radius: 3px;
+    position: relative;
+    display: block;
+  }
+
+  .header-nav .copyright {
+    padding: 5px 0;
+    color:#333;
+  }
+  .copyright a{
+    color:#666;
+  }
+</style>

src/components/commons/SearchBar.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="nav" stype="height:500px">
+    <!--搜索框-->
+    <el-row class="search-nav" style="padding: 30px 0 20px 0">
+      <el-col :span="6">
+        <div class="pull-left">
+          <img class="logo-img" src="../../assets/img/logo-blue.png"/>
+          <span class="logo-title">群智众测平台</span>
+        </div>
+      </el-col>
+      <el-col :span="12">
+        <div class="search-nav">
+          <div id="search-block " class="">
+            <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick" v-if="tabArr">
+              <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">
+              <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+                <el-button class="search-button" slot="append"  type="primary" @click="handleSearchData()">搜索</el-button>
+              </el-input>
+            </div>
+          </div>
+        </div>
+      </el-col>
+      <el-col :span="6">
+        <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
+      </el-col>
+    </el-row>
+    <!--TabNav-->
+    <el-tabs :value="currTab" @tab-click="handleTabClick" 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>
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr1" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+<!--      <el-tab-pane v-if="menuArr.menuArr1" name="name"  class="tab-menu1" label="|">|</el-tab-pane>-->
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr2" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+      <el-tab-pane v-if="menuArr.menuArr1" v-for="item in menuArr.menuArr3" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+    </el-tabs>
+    <div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  import { mapGetters , mapActions} from 'vuex'
+  import  commonData  from '../../constants/tabMenu'
+  import Http from '@/js/http.js'
+  export default {
+    name: 'SearchBar',
+    // components:{},
+    props: ['tabArr', 'menuArr'],
+    data() {
+      return {
+        searchType: 'project',
+        searchVal: '',
+        // currTab:''
+      }
+    },
+
+    methods: {}
+  }
+
+</script>
+
+
+<style>
+
+</style>

src/constants/tabMenu.js

@@ -0,0 +1,32 @@
+const menuData =  [
+  {label:"首页",name:"squareHome",searchUrl:"/api/square/search/list",targetPage:"/square"},
+  {label:"测试项目",name:"testProject",searchUrl:"/api/square/search/list",targetPage:"/square/project"},
+  {label:"测试任务",name:"testTask",searchUrl:"/api/square/search/list",targetPage:"/square/task"},
+  {label:"技术文章",name:"article",searchUrl:"/api/technical/articles",targetPage:"/technology/article"},
+  {label:"技术专著",name:"monograph",searchUrl:"/api/technical/articles",targetPage:"/technology/monograph"},
+
+];
+const homeTabArr = {
+  menuArr1: [
+    {label: "首页", name: "homepage"},
+    {label: "众测广场", name: "square"},
+    {label: "众测技术", name: "technology"}
+  ],
+  menuArr2:[
+    {label: "科技服务", name: "monograph"},
+    {label: "服务互联网", name: "Internet"},
+    {label: "集成电路", name: "integratedCircuit"},
+    {label: "智能传感器", name: "Sensor"},
+    {label: "高端装备", name: "Assembly"},
+    {label: "更多", name: "more"}
+  ],
+  menuArr3:[
+    {label: "找机构", name: "findInstitution"},
+    {label: "找专家", name: "finfExpert"},
+    {label: "更多", name: "findMore"},
+  ],
+};
+
+export default {
+  menuData, homeTabArr
+}

src/main.js

@@ -7,6 +7,7 @@ import 'font-awesome/css/font-awesome.css'
 import './style/main.scss'
 import {getAuthUrls, getCurrentUser, getRolesPermissions, storageGet, storageSave} from '@/js/index'
 import {notify} from '@/constants/index'
+import store from './store'
 import {
   Avatar,
   Badge,
@@ -200,5 +201,6 @@ new Vue({
     Bus:new Vue()
   },
   components: {App},
-  template: '<App/>'
+  template: '<App/>',
+  store
 })

src/pages/Homepage/BrandCard.vue

@@ -0,0 +1,26 @@
+<template>
+  <el-card class="test-card">
+    <div slot="header" class="clearfix test-card-header">
+      <span>入驻品牌机构</span>
+      <a class="pull-right" style="color: rgba(0, 118, 203, 1)" href="#">more>></a>
+    </div>
+    <div style="height: 96px">
+      <el-row :gutter="15">
+        <el-col v-for="item in residentAgencyList" :key="item.id" :span="6" style="height: 50px">
+          <img :src="item.logo" :alt="item.name" style="width: 100%;height: 100%"/>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "BrandCard",
+    props:['residentAgencyList']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/Homepage.vue

@@ -0,0 +1,228 @@
+<template>
+  <div class="home-wrapper">
+    <div class="nav" stype="height:500px">
+      <!--搜索框-->
+      <el-row class="search-nav" style="padding: 30px 0 20px 0">
+        <el-col :span="6">
+          <div class="pull-left">
+            <img class="logo-img" src="../../assets/img/logo-blue.png"/>
+            <span class="logo-title">群智众测平台</span>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-nav">
+            <div id="search-block ">
+              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick">
+                <el-tab-pane  v-for="item in searchTypeArr" v-if="item.value!=='all'" :label="item.name" :name="item.value" :key="item.value"></el-tab-pane>
+              </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" @click="handleSearchData">搜索</el-button>
+                </el-input>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
+        </el-col>
+      </el-row>
+      <!--TabNav-->
+      <el-tabs v-model="currTab" @tab-click="handleTabClick" class="square-tab">
+        <el-tab-pane v-for="item in homeTabArr.menuArr1" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+        <el-tab-pane v-for="item in homeTabArr.menuArr2" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+        <el-tab-pane v-for="item in homeTabArr.menuArr3" :label="item.label" :name="item.name" :key="item.name"></el-tab-pane>
+      </el-tabs>
+      <div>
+      </div>
+    </div>
+
+    <div class="home-page container">
+      <el-row>
+        <el-col :span="19" class="test-type-wrapper">
+          <TestMenu :testTypeList="homeData.testTypeList"></TestMenu>
+          <TestCard :homeData="homeData"></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"/>
+        </el-col>
+      </el-row>
+      <el-row :gutter="15">
+        <el-col :span="12">
+          <ResourceAndTool :resourceList="homeData.resourceList"></ResourceAndTool>
+        </el-col>
+        <el-col :span="12">
+          <BrandCard :residentAgencyList = homeData.residentAgencyList></BrandCard>
+        </el-col>
+      </el-row>
+      <InstitutionCard></InstitutionCard>
+    </div>
+  </div>
+</template>
+
+<script>
+  // import commonData from '../../constants/tabMenu'
+  import SearchBar from '../../components/commons/SearchBar'
+  import TestMenu from './TestMenu'
+  import LoginCard from './LoginCard'
+  import BrandCard from './BrandCard'
+  import ResourceAndTool from './ResourceAndTool'
+  import TestCard from './TestCard'
+  import InstitutionCard from './InstitutionCard'
+  import HotCrowd from './HotCrowd'
+  import HotAgency from './HotAgency'
+  import HotUser from './HotUser'
+  import HotContest from './HotContest'
+  import PopularProject from '../Square/PopularProject'
+  import Http from '@/js/http.js'
+  import {mapActions,mapGetters} from 'vuex'
+  import Waterfall from 'vue-waterfall/lib/waterfall'
+  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
+  // console.log(commonData);
+  export default {
+    name: 'Homepage',
+    components: {
+      HotCrowd,
+      HotContest,
+      HotUser,
+      HotAgency,
+      InstitutionCard,
+      SearchBar,
+      TestMenu,
+      PopularProject,
+      LoginCard,
+      TestCard,
+      BrandCard,
+      ResourceAndTool,
+      Waterfall,
+      WaterfallSlot
+      // vueWaterfallEasy
+    },
+    data() {
+      return {
+        searchType:'0',
+        searchTypeArr:[
+          {
+            "name": "全部",
+            "value": "all"
+          },
+          {
+            "name": "项目",
+            "value": "0"
+          },
+          {
+            "name": "工具",
+            "value": "1"
+          },
+          {
+            "name": "机构",
+            "value": "2"
+          },
+          {
+            "name": "专家",
+            "value": "3"
+          }],
+        searchVal: '',
+        homeTabArr:{
+          menuArr1: [
+            {label: "首页", name: "homepage"},
+            {label: "众测广场", name: "square"},
+            {label: "众测技术", name: "technology"}
+          ],
+          menuArr2:[
+            {label: "科技服务", name: "monograph"},
+            {label: "服务互联网", name: "Internet"},
+            {label: "集成电路", name: "integratedCircuit"},
+            {label: "智能传感器", name: "Sensor"},
+            {label: "高端装备", name: "Assembly"},
+            {label: "更多", name: "more"}
+          ],
+          menuArr3:[
+            {label: "找机构", name: "findInstitution"},
+            {label: "找专家", name: "finfExpert"},
+            {label: "更多", name: "findMore"},
+          ],
+        },
+        homeData:{},
+        currTab:'homepage'
+      }
+    },
+    methods:{
+      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;
+          })
+        })
+      },
+      handleTabClick(tab){
+        this.currTab = tab.name
+      },
+      handleTypeClick(tab){
+        this.searchType = tab.name
+      },
+      handleSearchData(){
+        let url = '/api/common/index/page';
+        let params = {
+          "keyword": this.searchVal,
+          "activePage": 1,
+          "columnFilters": [
+            {
+              "field": "type",
+              "type": "enums",
+              "enums":this.searchTypeArr,
+              "value": this.searchType
+            }
+          ]
+        }
+        Http.post(url,params).then((res)=>{
+          console.log(res);
+        })
+
+      }
+    },
+
+    mounted() {
+      this.loadData();
+    }
+  }
+</script>
+
+<style lang="less">
+  @import "../../style/search-nav";
+
+  .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;
+      margin-bottom: 15px;
+    }
+    .homepage-right-modules {
+      .login-card .el-card__body {
+        padding: 10px !important;
+      }
+      .popular-card .el-card__header {
+        padding: 10px !important;
+      }
+      .popular-card .el-card__body {
+        padding: 10px !important;
+      }
+    }
+  }
+
+</style>

src/pages/Homepage/HotAgency.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/agency.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">评测机构排行榜</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in agencyRank" :key="item.id">
+        <el-col :span="19">
+          <img :src="item.logo" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.taskCount}}次
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotAgency',
+    props:['agencyRank']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/HotContest.vue

@@ -0,0 +1,105 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/crowd-contest.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">众测大赛</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in competitionList" :key="item.id">
+        <el-col :span="23">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+              {{item.startTime}}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="1">
+          <div class="project-people-number">
+            >
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotContest',
+    props:['competitionList']
+  }
+</script>
+
+<style lang="less">
+  .popular-card {
+    margin-bottom: 15px;
+  }
+  .popular-header .el-card__header{
+    border-bottom: 2px solid rgba(0,117,203,1) !important;
+  }
+
+  .popular-card .el-card__body{
+    padding: 0 !important;
+  }
+  .popular-header {
+    height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-title {
+    display: inline-block;
+    line-height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-img {
+    height: 25px;
+    width: 25px;
+    vertical-align:middle;
+  }
+
+  .popular-list {
+    .popular-list-item {
+      padding: 5px 10px;
+      border-bottom: 1px solid #ccc !important;
+
+      .list-item-title {
+        font-size: 14px;
+        font-family: Source Han Sans CN;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 1);
+        overflow: hidden;
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+
+      .list-item-info {
+        font-size: 14px;
+        font-family: Adobe Heiti Std;
+        font-weight: normal;
+        color: rgba(153, 153, 153, 1);
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+      }
+
+      .project-logo-img {
+        width: 44px;
+        height: 44px;
+        display: inline-block;
+        margin: 2px 0;
+      }
+
+      .project-people-number {
+        font-size: 16px;
+        font-family: Roboto;
+        font-weight: 400;
+        color: rgba(0, 117, 203, 1);
+        line-height: 48px;
+      }
+    }
+  }
+</style>

src/pages/Homepage/HotCrowd.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/HotCrowd.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">热门众测</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in applicationTypeRank" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.count}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotCrowd',
+    props:['applicationTypeRank']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/HotUser.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/userRank.png" alt="hot-crowd" class="popular-header-img"/>
+      <span class="popular-header-title">众测人员排行榜</span>
+      <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in userRank" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.taskCount}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'HotCrowd',
+    props:['userRank']
+  }
+</script>
+
+<style lang="less">
+
+</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/ResourceAndTool.vue

@@ -0,0 +1,22 @@
+<template>
+  <el-card class="test-card">
+    <div slot="header" class="clearfix test-card-header">
+      <span>众测资源和工具</span>
+      <a class="pull-right" style="color: rgba(0, 118, 203, 1)" href="#">more>></a>
+    </div>
+    <div>
+      <div v-for="item in resourceList" :key="item.code">{{item.name}}</div>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: "ResourceAndTool",
+    props:['resourceList']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Homepage/TestCard.vue

@@ -0,0 +1,81 @@
+<template>
+  <div class="card-waterfull">
+    <el-row :gutter="10">
+      <waterfall
+                        :line-gap="400"
+                        :min-line-gap="150"
+                        :max-line-gap="220"
+                        :single-max-width="300"
+        :watch="homeData.applicationTypeList">
+        <!-- each component is wrapped by a waterfall slot -->
+        <waterfall-slot
+          v-for="(item, index) in homeData.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>
+    </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:['homeData'],
+    data(){
+      return{
+      }
+    },
+    components:{
+      Waterfall,
+      WaterfallSlot
+    },
+    mounted() {
+
+    }
+  }
+
+
+</script>
+
+<style lang="less">
+.test-card {
+  border: none;
+  .el-card__header{
+    height:48px !important;
+    background:rgba(233,240,250,1) !important;
+    padding: 12px 15px !important;
+  }
+  .test-card-header {
+    border-left: 5px solid #0076cb;
+    padding-left: 5px;
+  }
+}
+
+  .card-waterfull {
+    .el-card {
+      width: 300px !important;
+    }
+    .el-row {
+      margin:  0 !important;
+    }
+  }
+</style>

src/pages/Homepage/TestMenu.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="test-menu-wrapper">
+    <div class="test-menu-item-wrapper">
+      <div class="test-menu-item" v-for="(item,index) in testTypeList" :key="item.code" v-if="index<8">
+        <img src="../../assets/img/testType.png" alt="testType" class="test-menu-item-img">
+        {{item.name}}
+      </div>
+      <div class="more-test-wrapper">
+        <i class="el-icon-arrow-right more-test"></i>更多分类
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: "TestMenu",
+    props:['testTypeList'],
+    data() {
+      return {
+
+      }
+    }
+  }
+</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-bottom: 15px;
+    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/PopularProject.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="popular-card">
+  <el-card>
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/popular-project.png" alt="popular-project" class="popular-header-img"/>
+      <span class="popular-header-title">热门项目</span>
+      <el-button style="float: right; padding: 3px 0" type="text">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in hotCrowdTestProjectVOs" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-project.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.name}}
+            </div>
+            <div class="list-item-info">
+              {{item.description}}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.joinCount}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+  </div>
+</template>
+
+<script>
+  export default {
+    name: 'PopularProject',
+    props:['hotCrowdTestProjectVOs']
+  }
+</script>
+
+<style lang="less">
+  .popular-card {
+    margin-bottom: 15px;
+  }
+  .popular-header .el-card__header{
+    border-bottom: 2px solid rgba(0,117,203,1) !important;
+  }
+
+  .popular-card .el-card__body{
+    padding: 0 !important;
+  }
+  .popular-header {
+    height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-title {
+    display: inline-block;
+    line-height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-img {
+    height: 25px;
+    width: 25px;
+    vertical-align:middle;
+  }
+
+  .popular-list {
+    .popular-list-item {
+      padding: 5px 10px;
+      border-bottom: 1px solid #ccc !important;
+      .list-item-title{
+        font-size:14px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+        overflow: hidden;
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
+      }
+      .list-item-info{
+        font-size:14px;
+        font-family:Adobe Heiti Std;
+        font-weight:normal;
+        color:rgba(153,153,153,1);
+        overflow:hidden; //超出的文本隐藏
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
+      }
+      .project-logo-img {
+        width: 44px;
+        height: 44px;
+        display: inline-block;
+        margin: 2px 0;
+      }
+      .project-people-number {
+        font-size:16px;
+        font-family:Roboto;
+        font-weight:400;
+        color:rgba(0,117,203,1);
+        line-height: 48px;
+      }
+    }
+
+  }
+
+
+
+</style>

src/pages/Square/PopularTask.vue

@@ -0,0 +1,40 @@
+<template>
+  <el-card class="popular-card">
+    <div slot="header" class="popular-header">
+      <img src="../../assets/img/popularTask.png" alt="popular-project" class="popular-header-img"/>
+      <span class="popular-header-title">热门项目</span>
+      <el-button style="float: right; padding: 3px 0" type="text" class="pull-right">more>></el-button>
+    </div>
+    <div class="popular-list">
+      <el-row class="popular-list-item" v-for="item in hotCrowdTaskVOs" :key="item.id">
+        <el-col :span="19">
+          <img src="../../assets/img/logo-blue.png" alt="logo-project" class="pull-left project-logo-img">
+          <div style="margin-left: 55px">
+            <div class="list-item-title">
+              {{item.title}}
+            </div>
+            <div class="list-item-info">
+              {{item.description}}
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            {{item.participantHasCommittedCount}}人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'PopularTask',
+    props:['hotCrowdTaskVOs']
+  }
+</script>
+
+<style lang="less">
+
+</style>

src/pages/Square/Square2.0.vue

@@ -0,0 +1,177 @@
+<template>
+  <div>
+    <div class="nav" stype="height:500px">
+      <!--搜索框-->
+      <el-row class="search-nav" style="padding: 30px 0 20px 0">
+        <el-col :span="6">
+          <div class="pull-left">
+            <img class="logo-img" src="../../assets/img/logo-blue.png"/>
+            <span class="logo-title">群智众测平台</span>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-nav">
+            <div id="search-block " class="">
+              <el-tabs v-model="searchType" type="card" @tab-click="handleTypeClick" v-if="tabArr">
+                <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">
+                <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+                  <el-button class="search-button" slot="append"  type="primary" @click="handleSearchData">搜索</el-button>
+                </el-input>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
+        </el-col>
+      </el-row>
+      <!--TabNav-->
+      <el-tabs v-model="currTab" @tab-click="handleTabClick" class="square-tab" >
+        <el-tab-pane  v-for="item in menuArr" :name="item.name" :key="item.name">
+          <span slot="label" style="font-size: 18px">{{item.label}}</span>
+        </el-tab-pane>
+      </el-tabs>
+      <div>
+      </div>
+    </div>
+    <div class="container">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <el-row :gutter="15"  style="margin-bottom: 10px">
+            <el-col :span="8" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 15px">
+              <SquareCard :card="item"></SquareCard>
+            </el-col>
+          </el-row>
+          <el-pagination
+            v-if="currTab!=='squareHome'&&projectAndTaskArr&&projectAndTaskArr.length"
+            :page-size="9"
+            layout="prev, pager, next"
+            :total="totalElements"
+            :current-page = "activePage"
+            @current-change="handlePageChange"
+            class="pull-right"
+          >
+          </el-pagination>
+        </el-col>
+        <el-col :span="6"  class="popular-modules" style="padding-left: 15px">
+          <PopularProject :hotCrowdTestProjectVOs="hotCrowdTestProjectVOs" style="margin-bottom: 15px"/>
+          <PopularTask :hotCrowdTaskVOs="hotCrowdTaskVOs"/>
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import Http from '@/js/http.js'
+  import SearchBar from '../../components/commons/SearchBar'
+  import SquareCard from './SquareCard'
+  import PopularProject from './PopularProject'
+  import PopularTask from './PopularTask'
+  import { mapActions ,mapGetters} from 'vuex';
+  export default {
+    name: 'Square2.0',
+    data(){
+      return {
+        searchType:'project',
+        searchVal: '',
+        currTab:'squareHome',
+        tabArr : [
+          {label:"项目",name:"project"},
+          {label:"任务",name:"task"}
+        ],
+        menuArr: [
+          {label:"首页",name:"squareHome"},
+          {label:"测试项目",name:"project"},
+          {label:"测试任务",name:"task"}
+        ],
+        projectAndTaskArr:[],
+        hotCrowdTestProjectVOs:[],
+        hotCrowdTaskVOs:[],
+        activePage:1,
+        totalElements:0
+      }
+    },
+    components: {
+      SearchBar,
+      SquareCard,
+      PopularProject,
+      PopularTask
+    },
+    computed:{
+    },
+    methods:{
+      handleTabClick(tab){
+        this.currTab = tab.name
+        this.activePage = 1;
+        this.searchVal = '';
+        this.searchData()
+      },
+      searchData(){
+        if(this.currTab === 'squareHome'){
+          this.loadData();
+        }else{
+          this.searchType = this.currTab;
+          this.handleSearchData();
+        }
+      },
+      handleTypeClick(tab){
+        this.searchType = tab.name;
+      },
+
+      loadData(){
+        Http.get('/api/square/list').then((res)=>{
+          let crowdTestProjectVOs = res.data.crowdTestProjectVOs;
+          let crowdTestTaskVOS = res.data.crowdTestTaskVOS;
+          let projectAndTaskArr = crowdTestProjectVOs.concat(crowdTestTaskVOS);
+          this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
+          this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
+          this.projectAndTaskArr = projectAndTaskArr;
+        })
+      },
+      handleSearchData(){
+        let url = '/api/square/search/list';
+        let params = {
+          "keyword": this.searchVal,//搜索关键字
+          "activePage": this.activePage,//指定页面
+          "columnFilters":
+            [
+              {
+                "type": this.searchType // 查询项目就是project,任务就是task
+              }
+            ]
+        };
+        Http.post(url,params).then((res)=>{
+          this.currTab = this.searchType;
+          this.projectAndTaskArr = res.data.content;
+          this.activePage = 1;
+          this.totalElements=res.data.totalElements;
+        })
+      },
+      handlePageChange(index){
+        this.activePage = index;
+        this.searchData();
+      }
+    },
+    mounted() {
+      this.loadData();
+    }
+  }
+</script>
+
+<style lang="less">
+  @import "../../style/search-nav";
+  .project-task {
+     padding: 15px 0;
+    .el-card {
+      border: none;
+    }
+   }
+
+  .popular-modules {
+    padding: 15px 0 15px 15px;
+  }
+
+</style>

src/pages/Square/SquareCard.vue

@@ -0,0 +1,103 @@
+<template>
+  <el-card class="square-card">
+    <div class="card-title" >
+      {{card.name ? card.name :card.title}}
+    </div>
+    <div class="card-content">
+      {{card.description}}
+    </div>
+    <div class="card-detail">
+      <el-row>
+        <el-col :span="6">
+          <span class="card-detail-money">￥{{card.quotedPrice ? card.quotedPrice : card.quotePrice}}</span>
+        </el-col>
+        <el-col :span="18">
+          <span class="card-detail-info pull-right">14分钟前发布/5人参与</span>
+        </el-col>
+      </el-row>
+    </div>
+    <div class="card-footer">
+      <el-row class="card-footer-row">
+        <el-col :span="12" class="pull-left">
+          {{card.platform}}
+        </el-col>
+        <el-col :span="12" class=" test-btn">
+          <el-button type="primary" round size="mini" class="pull-right">我要众测</el-button>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'SquareCard',
+    props: ['card'],
+    mounted() {
+
+    }
+  }
+</script>
+
+<style lang="less">
+  .square-card .el-card__body{
+    padding: 0 !important;
+  }
+
+  .square-card {
+    .card-title {
+      font-size:16px;
+      font-family:Source Han Sans CN;
+      font-weight:500;
+      color:rgba(0,0,0,1);
+      line-height:30px;
+      margin: 10px 0;
+    }
+
+    .card-content {
+      font-size:14px;
+      font-family:Source Han Sans CN;
+      font-weight:400;
+      color:rgba(0,0,0,1);
+      height: 70px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display:-webkit-box; //作为弹性伸缩盒子模型显示。
+      -webkit-box-orient:vertical; //设置伸缩盒子的子元素排列方式--从上到下垂直排列
+      -webkit-line-clamp:3; //显示的行
+    }
+
+    .card-detail {
+      margin: 10px 0;
+      .card-detail-money{
+        font-size:14px;
+        font-family:Source Han Sans CN;
+        font-weight:bold;
+        color:rgba(0,117,203,1);
+      }
+      .card-detail-info {
+        font-size:14px;
+        font-family:Roboto;
+        font-weight:400;
+        color:rgba(153,153,153,1);
+      }
+    }
+  }
+
+  .card-title,.card-content,.card-detail{
+    padding: 0 10px !important;
+  }
+
+  .card-footer {
+    background:rgba(233,239,249,1);
+    /*height: 40px;*/
+
+    .card-footer-row {
+      padding: 15px 10px;
+      font-size:14px;
+      font-family:Source Han Sans CN;
+      font-weight:bold;
+    }
+  }
+
+</style>

src/pages/Technology/HotActicle.vue

@@ -0,0 +1,114 @@
+<template>
+  <div class="hot-article">
+    <el-card class="popular-card">
+      <div slot="header" class="popular-header">
+        <img src="../../assets/img/hot-article.jpg" alt="hot-crowd" class="popular-header-img"/>
+        <span class="popular-header-title">热门文章</span>
+        <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text">more>></el-button>
+      </div>
+      <div class="popular-list">
+        <el-row class="popular-list-item" v-for="(item,index) in articleArr" :key="item.id" v-if="index<7">
+          <el-col :span=24  @click.native="gotoArticle(item)">
+            <img :src="item.photoUrl" alt="logo-project" class="pull-left project-logo-img">
+            <div style="margin-left: 55px">
+              <div class="list-item-title">
+                {{item.name}}
+              </div>
+              <div class="project-people-reading">
+                {{item.reading}}阅读
+              </div>
+            </div>
+          </el-col>
+        </el-row>
+      </div>
+    </el-card>
+  </div>
+
+</template>
+
+<script>
+  export default {
+    name: 'HotArticle',
+    props:['articleArr'],
+    data(){
+      return {
+
+      }
+    },
+    methods:{
+      gotoArticle(item){
+        console.log('sss')
+        window.open(item.articles);
+      }
+    },
+    mounted() {
+    }
+  }
+</script>
+
+<style lang="less">
+  .popular-card {
+    margin-bottom: 15px;
+  }
+  .popular-header .el-card__header{
+    border-bottom: 2px solid rgba(0,117,203,1) !important;
+  }
+
+  .popular-card .el-card__body{
+    padding: 0 !important;
+  }
+  .popular-header {
+    height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-title {
+    display: inline-block;
+    line-height: 25px;
+    vertical-align:middle;
+  }
+  .popular-header-img {
+    height: 25px;
+    width: 25px;
+    vertical-align:middle;
+  }
+
+  .popular-list {
+    .popular-list-item {
+      padding: 5px 10px;
+      border-bottom: 1px solid #ccc !important;
+      .list-item-title{
+        font-size:14px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+        overflow: hidden;
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
+      }
+      .list-item-info{
+        font-size:14px;
+        font-family:Adobe Heiti Std;
+        font-weight:normal;
+        color:rgba(153,153,153,1);
+        overflow:hidden; //超出的文本隐藏
+        text-overflow:ellipsis; //溢出用省略号显示
+        white-space:nowrap; //溢出不换行
+      }
+      .project-logo-img {
+        width: 44px;
+        height: 44px;
+        display: inline-block;
+        margin: 2px 0;
+      }
+      .project-people-reading {
+        font-size:16px;
+        font-family:Roboto;
+        font-weight:400;
+        color:rgba(0,117,203,1);
+      }
+    }
+
+  }
+
+
+</style>

src/pages/Technology/Technology2.0.vue

@@ -0,0 +1,166 @@
+<template>
+  <div class="technology-container">
+    <div class="nav" stype="height:500px">
+      <!--搜索框-->
+      <el-row class="search-nav" style="padding: 30px 0 20px 0">
+        <el-col :span="6">
+          <div class="pull-left">
+            <img class="logo-img" src="../../assets/img/logo-blue.png"/>
+            <span class="logo-title">群智众测平台</span>
+          </div>
+        </el-col>
+        <el-col :span="12">
+          <div class="search-nav">
+            <div id="search-block " class="">
+              <div class="search-input">
+                <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+                  <el-button class="search-button" slot="append"  type="primary" @click="loadTechnologyArticles">搜索</el-button>
+                </el-input>
+              </div>
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="6">
+          <el-button type="primary pull-right" class="releaseBtn">免费发布众测需求</el-button>
+        </el-col>
+      </el-row>
+      <!--TabNav-->
+      <el-tabs v-model="searchType" @tab-click="handleTabClick" class="square-tab">
+        <el-tab-pane v-for="item in searchTypeArr" :name="item.value" :key="item.value">
+          <span slot="label" style="font-size: 18px">{{item.name}}</span>
+        </el-tab-pane>
+      </el-tabs>
+      <div>
+      </div>
+    </div>
+    <div class="container" style="margin: 15px auto">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <TechnologyCard
+            :techArticleList = techArticleList.content v-if="searchType=='0'" @refreshList="loadTechnologyArticles">
+          </TechnologyCard>
+          <TechnologyMG :techArticleList = techArticleList.content v-if="searchType=='1'"></TechnologyMG>
+          <el-pagination
+            v-if="techArticleList.content&&techArticleList.content.length"
+            :page-size="10"
+            layout="prev, pager, next"
+            :total="techArticleList.totalElements"
+            @current-change="handlePageChange"
+            :current-page = activePage
+            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 TechnologyMG from './TechnologyMG'
+  import HotActicle from './HotActicle'
+  import PopularProject from '../Square/PopularProject'
+  import qs from 'querystring'
+  import { mapActions ,mapGetters} from 'vuex';
+
+  export default {
+    name: 'Technology2.0',
+    components: {
+      SearchBar,
+      TechnologyCard,
+      TechnologyMG,
+      PopularProject,
+      HotActicle
+    },
+    data(){
+      return {
+        searchVal: '',
+        searchType:'',
+        searchTypeArr:[
+          {
+            "name": "技术文章",
+            "value": "0"
+          },
+          {
+            "name": "论文专著",
+            "value": "1"
+          }
+        ],
+        articleArr:[],
+        keyword:"",
+        activePage:1,
+        techArticleList:{},
+      }
+    },
+    methods:{
+      handleTabClick(tab){
+        this.searchType = tab.name
+        this.activePage = 1;
+        this.searchVal = '';
+        this.loadTechnologyArticles();
+      },
+      loadHotArticles(){
+        Http.get('/api/technical/ranking').then((res)=>{
+          this.articleArr = res.data.technicalArticlesPage.content;
+        })
+      },
+      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.searchVal,//查询条件，分页展示时就不填
+          "activePage": this.activePage,//指定页数
+          "columnFilters": [
+            {
+              "field": "type",
+              "type": "enums",
+              "enums": this.searchTypeArr,
+              "value": this.searchType//展示技术文章value为0
+            }
+          ]
+        }
+        Http.post(url,params)
+          .then(res=>{
+            if(res.data.technicalArticlesPage){
+              this.techArticleList = res.data.technicalArticlesPage;
+              this.searchType = '0';
+            }
+            else if(res.data.publicationsPage){
+              this.techArticleList = res.data.publicationsPage;
+              this.searchType = '1';
+            }
+          })
+      },
+      handlePageChange(index){
+        this.activePage = index;
+        this.loadTechnologyArticles();
+      }
+    },
+    mounted() {
+      this.loadHotArticles();
+      this.loadTechnologyArticles();
+    }
+  }
+</script>
+
+<style lang="less">
+  @import "../../style/search-nav";
+  .technology-container {
+    /deep/ .search-input,/deep/ .releaseBtn{
+      margin: 20px 0 0 0 !important;
+    }
+
+    .popular-modules {
+      padding-left: 15px;
+    }
+
+  }
+
+</style>

src/pages/Technology/TechnologyCard.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="technology-card">
+    <div class="card-wrapper" v-if="techArticleList&&techArticleList.length">
+      <el-card  v-for="item in techArticleList" :key="item.id"  style="margin-bottom: 15px">
+        <el-row @click.native="gotoDetail(item)">
+          <el-col :span="6">
+            <img :src="item.photoUrl" alt="technology-img" class="pull-left technology-img">
+          </el-col>
+          <el-col :span="18" class="technology-detail">
+
+            <div class="technology-title">
+              {{item.name}}
+            </div>
+            <div class="technology-info">
+              <el-row >
+                <el-col :span="6">
+                  原创：{{item.author}}
+                </el-col>
+                <el-col :span="6">
+                  来源：{{item.source}}
+                </el-col>
+                <el-col :span="4" style="color: rgba(103,103,103,0.7)">
+                  {{item.time_interval}}
+                </el-col>
+                <el-col :span="8">
+                  <span style="color: rgba(0,117,203,1)">{{item.reading}}</span>阅读
+                </el-col>
+              </el-row>
+            </div>
+          </el-col>
+        </el-row>
+      </el-card>
+    </div>
+    <div v-else>
+      暂无内容
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  import Http from '@/js/http.js'
+  export default {
+    name: 'TechnologyCard',
+    props:['techArticleList'],
+    methods:{
+      gotoDetail(item){
+        //增加访问量
+        Http.get(`/api/technical/updateranking/${item.id}`).then(()=>{
+          this.$emit('refreshList');
+          window.open(item.articlesUrl);
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-card {
+    .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/pages/Technology/TechnologyMG.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="technology-card">
+    <div class="card-wrapper" v-if="techArticleList&&techArticleList.length">
+      <el-card  v-for="item in techArticleList" :key="item.id"  style="margin-bottom: 15px">
+        <el-row @click.native="gotoDetail(item)">
+            <div class="technology-title">
+              {{item.longTitle}}
+            </div>
+          <div class="technology-info">
+            发表年份：{{item.publicYear}}
+          </div>
+          <div class="technology-info">
+            会议：{{item.conferenceJournal}}
+          </div>
+            <div class="technology-info">
+              <el-row >
+                作者：{{item.author}}
+              </el-row>
+            </div>
+        </el-row>
+      </el-card>
+    </div>
+    <div v-else>
+      暂无内容
+    </div>
+  </div>
+</template>
+
+<script>
+  import { mapGetters } from 'vuex';
+  export default {
+    name: 'TechnologyMG',
+    props:['techArticleList'],
+    methods:{
+      gotoDetail(item){
+        console.log('aaa');
+        item.chineseBrief ? window.open(item.chineseBrief) : null
+      }
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-card {
+    .card-wrapper {
+      .technology-img {
+        width: 100%;
+        height: 130px;
+      }
+      .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);
+        margin: 10px 0
+      }
+    }
+  }
+</style>

src/router/index.js

@@ -1,7 +1,7 @@
 import Vue from 'vue'
 import Router from 'vue-router'
 import Home from '@/components/Home'
-import Square from '@/components/Square'
+// import Square from '@/components/Square'
 import Mine from '@/components/Mine'
 
 import Task from '@/components/task/Task'
@@ -30,21 +30,30 @@ export default new Router({
     {
       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),
+      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),
+    //   meta: {
+    //     title: '',
+    //     requireAuth: false,
+    //   },
+    // },
     {
       path: '/mine',
       name: 'Mine',
@@ -234,5 +243,27 @@ export default new Router({
         requireAuth: false,
       },
     },
+    {
+      path: '/square',
+      name: 'Square',
+      component: resolve => require(['@/pages/Square/Square2.0.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
+    {
+      path: '/technology',
+      name: 'Technology',
+      component: resolve => require(['@/pages/Technology/Technology2.0.vue'], resolve),
+      meta: {
+        title: '',
+        requireAuth: false,
+      },
+    },
   ]
 })
+const originalPush = Router.prototype.push
+Router.prototype.push = function push (location) {
+  return originalPush.call(this, location).catch(err => err)
+}

src/store/index.js

@@ -5,13 +5,44 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
-    isLogin:false
+    isLogin:false,
+    techArticleList: ['sss'],// 技术文章
+    activeTab:'',
+    homeData:{}
+
   },
   mutations:{
-
+    setTechArticleList(state,techArticleList){
+      store.state.techArticleList = techArticleList;
+    },
+    setActiveTab(state,activeTab){
+      store.state.activeTab = activeTab;
+    },
+    setHomeData(state,homeData){
+      store.state.homeData = homeData;
+    },
   },
   actions:{
-
+    setTechArticleList({commit},techArticleList){
+      commit('setTechArticleList', techArticleList)
+    },
+    setActiveTab({commit},activeTab){
+      commit('setActiveTab', activeTab)
+    },
+    setHomeData({commit},homeData){
+      commit('setHomeData', homeData)
+    }
+  },
+  getters:{
+    getTechArticleList: () => {
+      return store.state.techArticleList;
+    },
+    getActiveTab: () => {
+      return store.state.activeTab;
+    },
+    getHomeData: () => {
+      return store.state.homeData;
+    },
   },
   modules:{
 

src/style/main.scss

@@ -57,33 +57,31 @@ a {
 
 .container {
     width: 100%;
-    padding-right: 15px;
-    padding-left: 15px;
     margin-right: auto;
     margin-left: auto
 }
 
 @media (min-width: 576px) {
     .container {
-        max-width:540px
+      width: 70%;
     }
 }
 
 @media (min-width: 768px) {
     .container {
-        max-width:720px
+        width: 70%;
     }
 }
 
 @media (min-width: 992px) {
     .container {
-        max-width:960px
+      width: 70%;
     }
 }
 
 @media (min-width: 1200px) {
     .container {
-        max-width:1140px
+      width: 70%;
     }
 }
 

src/style/search-nav.less

@@ -0,0 +1,57 @@
+.nav{
+  background:rgba(255,255,255,1);
+  box-shadow:0px 4px 30px 0px rgba(8,5,6,0.08);
+  padding: 0 15%;
+}
+
+.logo-img{
+  width: 50px;
+  height: 50px;
+  margin: 2px 23px;
+  display: block;
+}
+.logo-title{
+  width: 100px;
+  text-align: center;
+}
+.nav .el-tabs__header{
+  margin: 0 !important;
+}
+
+.nav .el-tabs--card>.el-tabs__header{
+  border-bottom: none !important;
+}
+
+.nav .el-tabs__nav-wrap::after{
+  width: 0;
+  height: 0;
+}
+
+/*.square-tab .el-tabs__item {*/
+/*  font-size: 18px;*/
+/*  margin-right: 35px;*/
+/*}*/
+
+.search-button{
+  background-color: rgb(0, 118, 203) !important;
+  border: none;
+  border-radius: initial;
+  padding: -1px;
+  color: white !important;
+  height: 39px;
+  margin-right: -100px;
+}
+
+.search-block{
+  width: 500px;
+}
+
+.releaseBtn{
+  background-color: rgb(0, 118, 203);
+  margin-top: 40px;
+}
+
+.tab-menu1 {
+  border: 1px solid #ccc;
+  width: 1px;
+}