add:square + technology page

src/components/commons/SearchBar.vue

@@ -0,0 +1,122 @@
+<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="handleClick" v-if="tabArr">
+<!--              <el-tab-pane label="项目" name="project"></el-tab-pane>-->
+<!--              <el-tab-pane label="任务" name="task"></el-tab-pane>-->
+              <el-tab-pane v-for="item in tabArr" :label="item.label" :name="item.name" :key="item.label"></el-tab-pane>
+            </el-tabs>
+            <div class="search-input">
+              <el-input placeholder="请输入内容" v-model="searchVal" class="input-with-select">
+                <el-button class="search-button" slot="append"  type="primary" >搜索</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="activeTab" @tab-click="handleClick" class="square-tab">
+      <el-tab-pane label="首页" name="homepage"></el-tab-pane>
+      <el-tab-pane label="测试项目" name="testProject"></el-tab-pane>
+      <el-tab-pane label="测试任务" name="testTask"></el-tab-pane>
+    </el-tabs>
+    <div>
+    </div>
+  </div>
+</template>
+
+
+<script>
+  export default {
+    name: 'SearchBar',
+    // components:{},
+    props: ['tabArr'],
+    data(){
+      return {
+        searchType:'project',
+        searchVal: '',
+        activeTab:'homepage'
+      }
+    },
+    computed:{
+
+    },
+    methods:{
+      handleClick(){
+
+      }
+    }
+  }
+
+</script>
+
+
+<style>
+
+  .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;
+  }
+</style>

src/pages/Square/PopularProjext.vue

@@ -0,0 +1,118 @@
+<template>
+  <el-card class="popular-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">
+        <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">
+              XXXXXXX项目
+            </div>
+            <div class="list-item-info">
+              描述XXXXXXXXXX
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            100人
+          </div>
+        </el-col>
+      </el-row>
+      <el-row class="popular-list-item">
+        <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">
+              XXXXXXX项目
+            </div>
+            <div class="list-item-info">
+              描述XXXXXXXXXX
+            </div>
+          </div>
+        </el-col>
+        <el-col :span="5">
+          <div class="project-people-number">
+            100人
+          </div>
+        </el-col>
+      </el-row>
+    </div>
+  </el-card>
+</template>
+
+<script>
+  export default {
+    name: 'PopularProject'
+  }
+</script>
+
+<style lang="less">
+  .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 {
+    padding: 0 15px 15px 15px;
+    .popular-list-item {
+      padding: 10px 0;
+      border-bottom: 1px solid #ccc;
+      .list-item-title{
+        font-size:14px;
+        font-family:Source Han Sans CN;
+        font-weight:400;
+        color:rgba(0,0,0,1);
+      }
+      .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/Square2.0.vue

@@ -0,0 +1,72 @@
+<template>
+  <div>
+    <SearchBar :tabArr="tabArr"></SearchBar>
+    <div class="container" >
+      <el-row >
+        <el-col :span="18" class="project-task">
+          <el-row :gutter="15" style="margin-bottom: 20px">
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+          </el-row>
+          <el-row :gutter="15">
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6"  class="popular-modules">
+          <PopularProject />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import SearchBar from '../../components/commons/SearchBar'
+  import SquareCard from './SquareCard'
+  import PopularProject from './PopularProjext'
+  export default {
+    name: 'Square2.0',
+    data(){
+      return {
+        tabArr : [
+          {label:"项目",name:"project"},
+          {label:"任务",name:"task"}
+        ]
+      }
+    },
+    components: {
+      SearchBar,
+      SquareCard,
+      PopularProject
+    }
+  }
+</script>
+
+<style scoped>
+  .project-task {
+     padding: 15px 0;
+   }
+
+  .popular-modules {
+    padding: 15px 0 15px 15px;
+  }
+
+  .search-nav {
+    margin: 20px 0;
+  }
+</style>

src/pages/Square/SquareCard.vue

@@ -0,0 +1,99 @@
+<template>
+  <el-card class="square-card">
+    <div class="card-title" >
+      XXXXXX卡片标题
+    </div>
+    <div class="card-content">
+      卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容卡片内容
+    </div>
+    <div class="card-detail">
+      <el-row>
+        <el-col :span="6">
+          <span class="card-detail-money">￥10000</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">
+          性能测试项目
+        </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'
+  }
+</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/Technology2.0.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="technology-container">
+    <SearchBar></SearchBar>
+    <div class="container">
+      <el-row>
+        <el-col :span="18" class="project-task">
+          <el-row :gutter="15" style="margin-bottom: 20px">
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+          </el-row>
+          <el-row :gutter="15">
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+            <el-col :span="8">
+              <SquareCard></SquareCard>
+            </el-col>
+          </el-row>
+        </el-col>
+        <el-col :span="6"  class="popular-modules">
+          <PopularProject />
+        </el-col>
+      </el-row>
+    </div>
+  </div>
+</template>
+
+<script>
+  import SearchBar from '../../components/commons/SearchBar'
+  import SquareCard from '../Square/SquareCard'
+  import PopularProject from '../Square/PopularProjext'
+  export default {
+    name: 'Technology2.0',
+    components: {
+      SearchBar,
+      SquareCard,
+      PopularProject
+    }
+  }
+</script>
+
+<style scoped lang="less">
+  .technology-container {
+    .search-nav,.releaseBtn{
+      margin: 20px 0 !important;
+      background-color: red !important;
+    }
+    .project-task {
+      padding: 15px 0;
+    }
+
+    .popular-modules {
+      padding: 15px 0 15px 15px;
+    }
+  }
+
+</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'
@@ -36,15 +36,15 @@ export default new Router({
         requireAuth: false,
       },
     },
-    {
-      path: '/square',
-      name: 'Square',
-      component: resolve => require(['@/components/Square.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 +234,23 @@ 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,
+      },
+    },
   ]
 })

src/style/main.scss

@@ -65,25 +65,25 @@ a {
 
 @media (min-width: 576px) {
     .container {
-      width: 80%;
+      width: 70%;
     }
 }
 
 @media (min-width: 768px) {
     .container {
-        width: 80%;
+        width: 70%;
     }
 }
 
 @media (min-width: 992px) {
     .container {
-      width: 80%;
+      width: 70%;
     }
 }
 
 @media (min-width: 1200px) {
     .container {
-      width: 80%;
+      width: 70%;
     }
 }