home data&display config

README.md

@@ -1,8 +1,8 @@
 # crowd-test-service
 
-> A Vue.js project
+> A crowd test system
 
-## Build Setup
+## 群智众测
 
 ``` bash
 # install dependencies
@@ -25,8 +25,10 @@ For a detailed explanation on how things work, check out the [guide](http://vuej
 
 - 主题色配置
 > /src/style/main.scss 中更改 `$--color-primary`，`$color-primary-background`
-- 文字配置
+- 数据配置
+> /src/config/index.js
 - logo配置
+
 - 组件展示配置
 
 

src/components/commons/Footer2.0.vue

@@ -34,11 +34,12 @@
   }
 </script>
 
-<style scoped>
+<style scoped lang="scss">
+  @import "../../style/main";
   .footer-nav{
     height: 120px;
-    background:rgba(47,48,48,1);
-    color: white;
+    background:$--color-primary;
+    color: $--color-title-color;
     padding: 30px 0;
     font-size: 14px;
     font-family:Source Han Sans CN;
@@ -52,7 +53,7 @@
     margin-right: 10px;
   }
   .nav-logo-block{
-    border-right: 1px solid white;
+    border-right: 1px solid $--color-title-color;
     padding: 10px 0;
     margin: 20px 0
   }

src/config/index.js

@@ -3,3 +3,59 @@ export const title = '信创产业 领引国产新未来';
 export const subtitle = '共/建/信/创/生/态/共/推/产/业/发/展';
 //配置logo标题
 export const logoTitle = '群智众测平台';
+//配置logo src
+
+
+//home页配置(导航数据 + 组件展示)
+//home_searchTypeArr
+export const home_searchTypeArr = [
+  {
+    "name": "全部",
+    "value": "all"
+  },
+  {
+    "name": "项目",
+    "value": "0"
+  },
+  {
+    "name": "机构",
+    "value": "1"
+  },
+  {
+    "name": "资源",
+    "value": "2"
+  },
+  {
+    "name": "专家",
+    "value": "3"
+  }
+];
+//home_homeTabArr_default
+export const home_homeTabArr_left = [
+  //注意：这里的第一个元素的name是"homepage"
+  {label: "首页", name: "homepage", linkTo: '/home'},
+  {label: "众测广场", name: "square", linkTo: '/square'},
+  {label: "众测技术", name: "technology", linkTo: 'technology'}
+];
+//home_homeTabArr_right
+export const home_homeTabArr_right = [
+  {label: "找机构", name: "findInstitution", linkTo: '/agency/list/show'},
+  {label: "找专家", name: "findExpert", linkTo: '/expert/list'},
+];
+//home_homeTabArr_default，注意这里的值一定要和一个home_homeTabArr_*中的name值对应
+export const home_homeTabArr_default = "homepage";
+
+//home页container组件展示
+export const HOME_DISPLAY = {
+  test_menu: true,
+  test_card: true,
+  resource_and_tool: true,
+  brand_card: true,
+  institution_card: false,
+  login_card: true,
+  hot_crowd: true,
+  hot_agency: true,
+  hot_user: true,
+  hot_contest: true
+}
+

src/pages/Homepage/BrandCard.vue

@@ -6,7 +6,7 @@
         more>>
       </el-button>
     </div>
-    <div style="height: 238px">
+    <div>
       <el-row :gutter="15">
         <el-col v-for="item in residentAgencyList" :key="item.id" :span="4" style="height: 90px; margin-bottom: 28px">
           <img :src="item.agencyPhoto==null?defaultValue.image:item.agencyPhoto" :alt="item.evaluationAgencyName"

src/pages/Homepage/Homepage.vue

@@ -6,7 +6,7 @@
         <el-col :span="6">
           <div class="pull-left">
             <img class="logo-img" src="../../assets/image/logo-transparent.png" :to="'/home'"/>
-            <span class="logo-title">{{logoTitle}}</span>
+            <span class="logo-title">{{ logoTitle }}</span>
           </div>
         </el-col>
         <el-col :span="12">
@@ -42,273 +42,246 @@
       </div>
     </div>
 
-    <div class="home-page container" >
+    <div class="home-page container">
       <el-row>
         <el-col :span="19" class="test-type-wrapper">
-          <TestMenu :testTypeList="homeData.testTypeList"></TestMenu>
-          <TestCard :applicationTypeList="homeData.applicationTypeList"></TestCard>
-          <el-row style="margin-top: 10px">
+          <TestMenu :testTypeList="homeData.testTypeList" v-if="HOME_DISPLAY.test_menu"></TestMenu>
+          <TestCard :applicationTypeList="homeData.applicationTypeList" v-if="HOME_DISPLAY.test_card"></TestCard>
+          <el-row style="margin-top: 10px" v-if="HOME_DISPLAY.resource_and_tool">
             <ResourceAndTool :resourceList="homeDataNoCache.resourceList"></ResourceAndTool>
           </el-row>
-          <el-row>
+          <el-row v-if="HOME_DISPLAY.brand_card">
             <BrandCard :residentAgencyList=homeData.residentAgencyList></BrandCard>
           </el-row>
         </el-col>
         <el-col :span="5" class="homepage-right-modules">
-          <LoginCard/>
-          <HotCrowd :applicationTypeRank="homeDataNoCache.applicationTypeRank"/>
-          <HotAgency :agencyRank="homeDataNoCache.agencyRank"/>
-          <HotUser :userRank="homeDataNoCache.userRank"/>
-          <HotContest :competitionList="homeData.competitionList"/>
+          <LoginCard v-if="HOME_DISPLAY.login_card"/>
+          <HotCrowd :applicationTypeRank="homeDataNoCache.applicationTypeRank" v-if="HOME_DISPLAY.hot_crowd"/>
+          <HotAgency :agencyRank="homeDataNoCache.agencyRank" v-if="HOME_DISPLAY.hot_agency"/>
+          <HotUser :userRank="homeDataNoCache.userRank" v-if="HOME_DISPLAY.hot_user"/>
+          <HotContest :competitionList="homeData.competitionList" v-if="HOME_DISPLAY.hot_crowd"/>
         </el-col>
       </el-row>
-      <InstitutionCard></InstitutionCard>
+      <InstitutionCard v-if="HOME_DISPLAY.institution_card"></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 {mapGetters} from 'vuex'
-  import Waterfall from 'vue-waterfall/lib/waterfall'
-  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
-  import {getAllFields, storageGet} from '@/js/index.js'
-  import {notify} from "../../constants";
-  import Apis from '@/js/api'
-  import {logoTitle} from "../../config";
+// 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 {mapGetters} from 'vuex'
+import Waterfall from 'vue-waterfall/lib/waterfall'
+import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
+import {getAllFields, storageGet} from '@/js/index.js'
+import {notify} from "../../constants";
+import Apis from '@/js/api'
+import {logoTitle, home_searchTypeArr, home_homeTabArr_left,
+  home_homeTabArr_right,home_homeTabArr_default,HOME_DISPLAY} from "../../config";
 
-  // 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 {
-        logoTitle,
-        user: {},
-        isLogin: false,
-        loading: false,
-        searchType: '0',
-        searchTypeArr: [
-          {
-            "name": "全部",
-            "value": "all"
-          },
-          {
-            "name": "项目",
-            "value": "0"
-          },
-          {
-            "name": "机构",
-            "value": "1"
-          },
-          {
-            "name": "资源",
-            "value": "2"
-          },
-          {
-            "name": "专家",
-            "value": "3"
-          }],
-        searchVal: '',
-        homeTabArr: {
-          menuArr1: [
-            {label: "首页", name: "homepage", linkTo: '/home'},
-            {label: "众测广场", name: "square", linkTo: '/square'},
-            {label: "众测技术", name: "technology", linkTo: 'technology'}
-          ],
-          menuArr2: [
-            {code: '', name: ''}
-          ],
-          menuArr3: [
-            {label: "找机构", name: "findInstitution", linkTo: '/agency/list/show'},
-            {label: "找专家", name: "findExpert", linkTo: '/expert/list'},
-          ],
-        },
-        homeData: {},
-        homeDataNoCache: {},
-        currTab: 'homepage'
+// 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 {
+      logoTitle,
+      HOME_DISPLAY,
+      user: {},
+      isLogin: false,
+      loading: false,
+      searchType: '0',
+      searchTypeArr: home_searchTypeArr,
+      searchVal: '',
+      homeTabArr: {
+        menuArr1: home_homeTabArr_left,
+        menuArr2: [{code: '', name: ''}],
+        menuArr3: home_homeTabArr_right
+      },
+      homeData: {},
+      homeDataNoCache: {},
+      currTab: home_homeTabArr_default
+    }
+  },
+  computed: {
+    ...mapGetters(['getUserInfo'])
+  },
+  methods: {
+    loadData() {
+      this.showLoading();
+      if (storageGet('user') != null) {
+        this.isLogin = true;
       }
-    },
-    computed: {
-      ...mapGetters(['getUserInfo'])
-    },
-    methods: {
-      loadData() {
-        this.showLoading();
-        if (storageGet('user') != null) {
-          this.isLogin = true;
-        }
-        this.setFields();
-        let p1 = new Promise((resolve, reject) => {
-          Http.get('/api/common/index/info/cache').then((res) => {
-            this.homeData = res.data;
-            // this.homeData.applicationTypeList.map((item)=>{
-            //   item.height = (item.testTypeList.length / 2) * 24 + 100;
-            //   return item;
-            // })
-            resolve(res.data);
-          }).catch((error) => {
-            notify('error', error.data)
-            reject(error)
-          })
-        });
-        let p2 = new Promise((resolve, reject) => {
-          Http.get('/api/common/index/info/nocache').then((res) => {
-            this.homeDataNoCache = res.data;
-            resolve(res.data);
-          }).catch((error) => {
-            notify('error', error.data)
-            reject(error)
-          })
-        });
-        Promise.all([p1, p2]).then((result) => {
-          this.hideLoading();
+      this.setFields();
+      let p1 = new Promise((resolve, reject) => {
+        Http.get('/api/common/index/info/cache').then((res) => {
+          this.homeData = res.data;
+          // this.homeData.applicationTypeList.map((item)=>{
+          //   item.height = (item.testTypeList.length / 2) * 24 + 100;
+          //   return item;
+          // })
+          resolve(res.data);
         }).catch((error) => {
           notify('error', error.data)
+          reject(error)
         })
-      },
-      setFields() {
-        getAllFields().then((res) => {
-          this.homeTabArr.menuArr2 = res
+      });
+      let p2 = new Promise((resolve, reject) => {
+        Http.get('/api/common/index/info/nocache').then((res) => {
+          this.homeDataNoCache = res.data;
+          resolve(res.data);
+        }).catch((error) => {
+          notify('error', error.data)
+          reject(error)
         })
-      },
-      checkLogin() {
-        this.checkCreateProjectAuth();
-      },
-      checkCreateProjectAuth() {
-        if (!this.isLogin) {
-          notify('warning', '请登录后访问');
-        } else if (this.isLogin) {
-          Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
-            this.$router.push('/project/create');
-          }).catch((error) => {
-            notify('error', error)
-          })
-        }
-      },
-      handleTabClick(tab) {
-        this.currTab = tab.name;
-        // console.log(this.currTab +  "  "  + tab.index +  "  "  + tab.name );
-        for (let i = 0; i < this.homeTabArr.menuArr3.length; i++) {
-          if (this.currTab === this.homeTabArr.menuArr3[i].name) {
-            this.$router.push(this.homeTabArr.menuArr3[i].linkTo);
-          }
+      });
+      Promise.all([p1, p2]).then((result) => {
+        this.hideLoading();
+      }).catch((error) => {
+        notify('error', error.data)
+      })
+    },
+    setFields() {
+      getAllFields().then((res) => {
+        this.homeTabArr.menuArr2 = res
+      })
+    },
+    checkLogin() {
+      this.checkCreateProjectAuth();
+    },
+    checkCreateProjectAuth() {
+      if (!this.isLogin) {
+        notify('warning', '请登录后访问');
+      } else if (this.isLogin) {
+        Http.get(Apis.USER.IS_PART.replace('{userId}', this.user.id)).then((res) => {
+          this.$router.push('/project/create');
+        }).catch((error) => {
+          notify('error', error)
+        })
+      }
+    },
+    handleTabClick(tab) {
+      this.currTab = tab.name;
+      // console.log(this.currTab +  "  "  + tab.index +  "  "  + tab.name );
+      for (let i = 0; i < this.homeTabArr.menuArr3.length; i++) {
+        if (this.currTab === this.homeTabArr.menuArr3[i].name) {
+          this.$router.push(this.homeTabArr.menuArr3[i].linkTo);
         }
+      }
 
-        for (let i = 0; i < this.homeTabArr.menuArr2.length; i++) {
-          if (this.currTab === this.homeTabArr.menuArr2[i].code) {
-            this.$router.push('/field/detail');
-          }
-        }
-        this.$router.push(this.homeTabArr.menuArr1[Number(tab.index)]&&this.homeTabArr.menuArr1[Number(tab.index)].linkTo);
-      },
-      handleTypeClick(tab,e) {
-        this.searchType = tab.name;
-        // e.target.style.backgroundColor = $color-primary
-        this.$refs.searchInput.focus()
-      },
-      handleSearchData() {
-        if (this.searchType == 0) {
-          this.$router.push({
-            name: 'Square',
-            params: {searchVal: this.searchVal, searchType: "project", currTab: "project"}
-          });
-        } else if (this.searchType == 1) {
-          this.$router.push({name: 'AgencyList', params: {searchVal: this.searchVal}});
-        } else if (this.searchType == 2) {
-          this.$router.push({name: 'ResourceList', params: {searchVal: this.searchVal}});
-        } else if (this.searchType == 3) {
-          this.$router.push({name: 'ExpertList', params: {searchVal: this.searchVal}});
+      for (let i = 0; i < this.homeTabArr.menuArr2.length; i++) {
+        if (this.currTab === this.homeTabArr.menuArr2[i].code) {
+          this.$router.push('/field/detail');
         }
-      },
-      showLoading() {
-        this.loading = true
-      },
-      hideLoading() {
-        this.loading = false
-      },
-      setUserInfo() {
-        this.user = storageGet('user') && storageGet('user').userVO;
       }
+      this.$router.push(this.homeTabArr.menuArr1[Number(tab.index)] && this.homeTabArr.menuArr1[Number(tab.index)].linkTo);
     },
-    mounted(){
-      this.setUserInfo();
-      this.loadData();
+    handleTypeClick(tab, e) {
+      this.searchType = tab.name;
+      // e.target.style.backgroundColor = $color-primary
       this.$refs.searchInput.focus()
     },
-    watch:{
-      getUserInfo(val){
-        this.setUserInfo();
-        this.loadData();
+    handleSearchData() {
+      if (this.searchType == 0) {
+        this.$router.push({
+          name: 'Square',
+          params: {searchVal: this.searchVal, searchType: "project", currTab: "project"}
+        });
+      } else if (this.searchType == 1) {
+        this.$router.push({name: 'AgencyList', params: {searchVal: this.searchVal}});
+      } else if (this.searchType == 2) {
+        this.$router.push({name: 'ResourceList', params: {searchVal: this.searchVal}});
+      } else if (this.searchType == 3) {
+        this.$router.push({name: 'ExpertList', params: {searchVal: this.searchVal}});
       }
+    },
+    showLoading() {
+      this.loading = true
+    },
+    hideLoading() {
+      this.loading = false
+    },
+    setUserInfo() {
+      this.user = storageGet('user') && storageGet('user').userVO;
+    }
+  },
+  mounted() {
+    this.setUserInfo();
+    this.loadData();
+    this.$refs.searchInput.focus()
+  },
+  watch: {
+    getUserInfo(val) {
+      this.setUserInfo();
+      this.loadData();
     }
   }
+}
 </script>
 
 <style lang="scss">
-  @import "../../style/search-nav.scss";
+@import "../../style/search-nav.scss";
 
-  .home-wrapper {
-    /deep/ .square-tab .el-tabs__item {
-      font-size: 16px !important;
-      margin-right: 0px !important;
-    }
+.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;
-    }
+  /deep/ .login-card .popular-list {
+    padding: 0 10px !important;
+  }
 
-    .home-page {
-      padding: 15px 0;
-    }
+  .home-page {
+    padding: 15px 0;
+  }
 
-    .test-type-wrapper {
-      padding-right: 15px;
-      margin-bottom: 15px;
-    }
+  .test-type-wrapper {
+    padding-right: 15px;
+    margin-bottom: 15px;
+  }
 
-    .homepage-right-modules {
-      .login-card .el-card__body {
-        padding: 10px !important;
-      }
+  .homepage-right-modules {
+    .login-card .el-card__body {
+      padding: 10px !important;
+    }
 
-      .popular-card .el-card__header {
-        padding: 10px !important;
-      }
+    .popular-card .el-card__header {
+      padding: 10px !important;
+    }
 
-      .popular-card .el-card__body {
-        padding: 10px !important;
-      }
+    .popular-card .el-card__body {
+      padding: 10px !important;
     }
   }
+}
 
 </style>

src/style/basic.scss

@@ -8,3 +8,7 @@ $color-publish-background:#FFE400;
 $color-participate-background:#FF1800;
 //配置slice title文本颜色
 $color-title-color:#FFFFFF;
+
+.el-input-group__append {
+  border-radius: 0 !important;
+}