add:technology page

package.json

@@ -18,6 +18,7 @@
     "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",
     "vuex": "^3.1.1"

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/SearchBar.vue

@@ -28,7 +28,13 @@
     </el-row>
     <!--TabNav-->
     <el-tabs v-model="activeTab" @tab-click="handleClick" class="square-tab" v-if="menuArr">
-      <el-tab-pane v-for="item in menuArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
+      <el-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" class="tab-menu1"></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" class="tab-menu2"></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" class="tab-menu3"></el-tab-pane>
     </el-tabs>
     <div>
     </div>
@@ -91,10 +97,10 @@
     height: 0;
   }
 
-  .square-tab .el-tabs__item {
-    font-size: 18px;
-    margin-right: 35px;
-  }
+  /*.square-tab .el-tabs__item {*/
+  /*  font-size: 18px;*/
+  /*  margin-right: 35px;*/
+  /*}*/
 
   .search-button{
     background-color: rgb(0, 118, 203) !important;
@@ -114,4 +120,9 @@
     background-color: rgb(0, 118, 203);
     margin-top: 40px;
   }
+
+  .tab-menu1 {
+    border: 1px solid #ccc;
+    width: 1px;
+  }
 </style>

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/Homepage.vue

@@ -68,22 +68,28 @@
           {label: "机构", name: "institution"},
           {label: "专家", name: "expert"}
         ],
-        menuArr: [
-          {label: "首页", name: "homepage"},
-          {label: "众测广场", name: "square"},
-          {label: "众测技术", name: "technology"},
-          // {label: "|", name: "segmentation"},
-          {label: "科技服务", name: "monograph"},
-          {label: "服务互联网", name: "Internet"},
-          {label: "集成电路", name: "integratedCircuit"},
-          {label: "智能传感器", name: "Sensor"},
-          {label: "高端装备", name: "Assembly"},
-          {label: "更多", name: "more"},
-          // {label: "|", name: "segmentation"},
-          {label: "找机构", name: "findInstitution"},
-          {label: "找专家", name: "finfExpert"},
-          // {label: "更多", name: "findMore"},
-        ],
+        menuArr:{
+          menuArr1: [
+            {label: "首页", name: "homepage"},
+            {label: "众测广场", name: "square"},
+            {label: "众测技术", name: "technology"}
+          ],
+          menuArr2:[
+            // {label: "|", name: "segmentation"},
+            {label: "科技服务", name: "monograph"},
+            {label: "服务互联网", name: "Internet"},
+            {label: "集成电路", name: "integratedCircuit"},
+            {label: "智能传感器", name: "Sensor"},
+            {label: "高端装备", name: "Assembly"},
+            {label: "更多", name: "more"}
+          ],
+          menuArr3:[
+            // {label: "|", name: "segmentation"},
+            {label: "找机构", name: "findInstitution"},
+            {label: "找专家", name: "finfExpert"},
+            {label: "更多", name: "findMore"},
+          ],
+        },
         homeData:{}
       }
     },
@@ -120,6 +126,12 @@
       .login-card .el-card__body {
         padding: 10px !important;
       }
+      .popular-card .el-card__header {
+        padding: 10px !important;
+      }
+      .popular-card .el-card__body {
+        padding: 10px !important;
+      }
     }
   }
 

src/pages/Homepage/HotContest.vue

@@ -36,5 +36,70 @@
 </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

@@ -2,7 +2,7 @@
   <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>
+      <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">

src/pages/Homepage/TestCard.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <el-row :gutter="10" v-for="(item,index) in applicationTypeArr" :key="index">
-      <el-col :span="8" v-for="application in item">
+      <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>
@@ -37,10 +37,9 @@
 .test-card {
   border: none;
   .el-card__header{
-    height:48px;
+    height:48px !important;
     background:rgba(233,240,250,1) !important;
-    padding: 12px 15px;
-    margin-bottom: 10%;
+    padding: 12px 15px !important;
   }
   .test-card-header {
     border-left: 5px solid #0076cb;

src/pages/Square/PopularProject.vue

@@ -1,5 +1,6 @@
 <template>
-  <el-card class="popular-card">
+  <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>
@@ -26,6 +27,7 @@
       </el-row>
     </div>
   </el-card>
+  </div>
 </template>
 
 <script>
@@ -54,7 +56,6 @@
     display: inline-block;
     line-height: 25px;
     vertical-align:middle;
-
   }
   .popular-header-img {
     height: 25px;
@@ -65,7 +66,7 @@
   .popular-list {
     .popular-list-item {
       padding: 5px 10px;
-      border-bottom: 1px solid #ccc;
+      border-bottom: 1px solid #ccc !important;
       .list-item-title{
         font-size:14px;
         font-family:Source Han Sans CN;

src/pages/Square/Square2.0.vue

@@ -4,9 +4,14 @@
     <div class="container">
       <el-row>
         <el-col :span="18" class="project-task">
-          <el-row :gutter="15" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 10px">
-            <el-col :span="8" v-for="card in item" :key="card.id">
-              <SquareCard :card="card"></SquareCard>
+<!--          <el-row :gutter="15" v-for="(item,index) in projectAndTaskArr" :key="index" style="margin-bottom: 10px">-->
+<!--            <el-col :span="8" v-for="card in item" :key="card.id">-->
+<!--              <SquareCard :card="card"></SquareCard>-->
+<!--            </el-col>-->
+<!--          </el-row>-->
+          <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-col>
@@ -58,9 +63,10 @@
           let projectAndTaskArr = crowdTestProjectVOs.concat(crowdTestTaskVOS);
           this.hotCrowdTestProjectVOs = res.data.hotCrowdTestProjectVOs;
           this.hotCrowdTaskVOs = res.data.hotCrowdTaskVOs;
-          for(var i=0;i<projectAndTaskArr.length;i+=3){
-            this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
-          }
+          this.projectAndTaskArr = projectAndTaskArr;
+          // for(var i=0;i<projectAndTaskArr.length;i+=3){
+          //   this.projectAndTaskArr.push(projectAndTaskArr.slice(i,i+3));
+          // }
         })
       }
     },

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-number">
+                {{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-number {
+        font-size:16px;
+        font-family:Roboto;
+        font-weight:400;
+        color:rgba(0,117,203,1);
+      }
+    }
+
+  }
+
+
+</style>

src/pages/Technology/Technology2.0.vue

@@ -1,14 +1,21 @@
 <template>
   <div class="technology-container">
     <SearchBar :menuArr="menuArr" :activeTab="activeTab"></SearchBar>
-    <div class="container">
+    <div class="container" style="margin: 15px auto">
       <el-row>
         <el-col :span="18" class="project-task">
           <TechnologyCard></TechnologyCard>
-          <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">
-          <PopularProject />
+          <HotActicle :articleArr="articleArr"/>
         </el-col>
       </el-row>
     </div>
@@ -16,15 +23,21 @@
 </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: 'Technology2.0',
     components: {
       SearchBar,
       TechnologyCard,
-      PopularProject
+      PopularProject,
+      HotActicle
     },
     data(){
       return {
@@ -32,8 +45,41 @@
         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>

src/pages/Technology/TechnologyCard.vue

@@ -1,47 +1,51 @@
 <template>
-  <el-card class="technology-card">
+  <div class="technology-card">
     <div class="card-wrapper">
-      <el-row>
-        <el-col :span="6">
-          <img src="../../assets/img/technology-img.png" alt="technology-img" class="pull-left technology-img">
-        </el-col>
-        <el-col :span="18" class="technology-detail">
-          <div class="technology-title">
-            安卓应用自动化测试中台系统
-          </div>
-          <div class="technology-info">
-            <el-row >
-              <el-col :span="6">
-                原创：慕测科技
-              </el-col>
-              <el-col :span="6">
-                来源：今日头条
-              </el-col>
-              <el-col :span="4" style="color: rgba(103,103,103,0.7)">
-                10天前
-              </el-col>
-              <el-col :span="8">
-                <span style="color: rgba(0,117,203,1)">1000</span>阅读
-              </el-col>
-            </el-row>
-          </div>
-        </el-col>
-      </el-row>
+      <el-card  v-for="item in getTechArticleList.content" :key="item.id"  style="margin-bottom: 15px">
+        <el-row>
+          <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.creatrTime}}
+                </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>
-  </el-card>
+  </div>
 </template>
 
 <script>
-
+  import { mapGetters } from 'vuex';
   export default {
     name: 'TechnologyCard',
-
+    computed: {
+      ...mapGetters(['getTechArticleList']),
+    },
   }
 </script>
 
 <style scoped lang="less">
   .technology-card {
-    margin-bottom: 20px;
     .card-wrapper {
       .technology-img {
         width: 100%;

src/store/index.js

@@ -5,13 +5,33 @@ Vue.use(Vuex)
 
 const store = new Vuex.Store({
   state: {
-    isLogin:false
+    isLogin:false,
+    techArticleList: ['sss'],// 技术文章
+    currentTab:[],
   },
   mutations:{
-
+    setTechArticleList(state,techArticleList){
+      store.state.techArticleList = techArticleList;
+    },
+    setCurrentTab(state,currentTab){
+      store.state.currentTab.push(currentTab);
+    }
   },
   actions:{
-
+    setTechArticleList({commit},techArticleList){
+      commit('setTechArticleList', techArticleList)
+    },
+    setCurrentTab({commit},currentTab){
+      commit('setCurrentTab', currentTab)
+    }
+  },
+  getters:{
+    getTechArticleList: () => {
+      return store.state.techArticleList;
+    },
+    getCurrentTab: () => {
+      return store.state.currentTab;
+    },
   },
   modules:{