主页排版修改

src/components/commons/Header2.0.vue

@@ -44,8 +44,9 @@
             <li v-if="!isLogin">
               <a :href="registerUrl">免费注册</a>
             </li>
-              <span v-if="!isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
+
             <li v-if="isLogin">
+              <span v-if="!isLogin">&nbsp;&nbsp;&nbsp;|&nbsp;&nbsp;&nbsp;</span>
               <router-link v-if="isLogin" to="/mine">
                 <a class="dropdown-toggle nav-link" data-toggle="dropdown">
 <!--                  <img class="icon" src="@/assets/img/mine_icon.svg">-->

src/components/commons/HomeSlice.vue

@@ -29,10 +29,12 @@ export default {
   data() {
     return {
       user: {},
+      home_background_url:CONFIG.home_background_url,
       isLogin: false,
       loading: false,
       title:CONFIG.title,
-      subtitle:CONFIG.subtitle
+      subtitle:CONFIG.subtitle,
+
     }
   },
   methods: {
@@ -97,7 +99,7 @@ export default {
 <style scoped lang="scss">
 @import "../../style/main";
 .home-slice {
-  background-image: url("../../assets/image/slice.png");
+  background-image: var(home_background_url);
   text-align: center;
 }
 .slice-title {

src/pages/Homepage/Homepage.vue

@@ -43,24 +43,25 @@
     </div>
 
     <div class="home-page container">
-      <el-row>
+      <el-row :gutter="15">
+        <el-col :span="5" class="homepage-right-modules">
+          <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_contest"/>
+        </el-col>
+
         <el-col :span="19" class="test-type-wrapper">
           <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>
+            <ResourceAndTool :resourceList="homeData.toolList"></ResourceAndTool>
           </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 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_contest"/>
-        </el-col>
       </el-row>
       <InstitutionCard v-if="HOME_DISPLAY.institution_card"></InstitutionCard>
     </div>

src/pages/Homepage/ResourceAndTool.vue

@@ -1,7 +1,7 @@
 <template>
   <el-card class="test-card">
     <div slot="header" class="clearfix test-card-header">
-      <span>众测资源</span>
+      <span>众测工具</span>
       <el-button style="float: right; padding: 3px 0;line-height: 25px" type="text"  @click="getMore()">more>></el-button>
     </div>
     <div>
@@ -15,13 +15,16 @@
 </template>
 
 <script>
+  import {CONFIG} from "../../config";
+  import Http from '@/js/http.js'
+
   export default {
     name: "ResourceAndTool",
     props:['resourceList'],
     methods:{
         getMore(){
             this.$router.push({
-                name: 'ResourceList',
+                path: '/technology',
             });
         },
         goToDetail(code) {

src/pages/Homepage/TestCard.vue

@@ -1,79 +1,54 @@
 <template>
-  <div class="card-waterfull">
-    <el-row :gutter="20">
-      <waterfall
-        :line-gap="400"
-        :min-line-gap="150"
-        :max-line-gap="200"
-        :single-max-width="400"
-        :watch="applicationTypeList">
-        <!-- each component is wrapped by a waterfall slot -->
-
-        <waterfall-slot
-          v-for="(item, index) in applicationTypeList"
-          width="310"
-          :height="200"
-          :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>
-              <span>{{item.introduction}}</span>
-            </div>
-          </el-card>
-        </waterfall-slot>
-      </waterfall>
-    </el-row>
-  </div>
+  <el-row :gutter="20">
+    <el-col :span="8" v-for="item in applicationTypeList" :key="item.name" style="height: 160px;margin-bottom: 10px">
+      <el-card class="test-card">
+        <div slot="header" class="clearfix test-card-header">
+          <span>{{ item && item.name }}</span>
+        </div>
+        <div>
+          <span>{{ item && item.introduction }}</span>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
 </template>
 
 <script>
-  import Waterfall from 'vue-waterfall/lib/waterfall'
-  import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
-
-  export default {
-    name: "TestCard",
-    props: ['applicationTypeList'],
-    data() {
-      return {}
-    },
-    components: {
-      Waterfall,
-      WaterfallSlot
-    },
-    methods: {},
-    mounted() {}
+// import Waterfall from 'vue-waterfall/lib/waterfall'
+// import WaterfallSlot from 'vue-waterfall/lib/waterfall-slot'
+
+export default {
+  name: "TestCard",
+  props: ['applicationTypeList'],
+  data() {
+    return {}
+  },
+  components: {
+    Waterfall,
+    WaterfallSlot
+  },
+  methods: {},
+  mounted() {
   }
+}
 </script>
 
 <style lang="scss">
-  @import "../../style/main";
-
-  .test-card {
-    border: none;
+@import "../../style/main";
 
-    .el-card__header {
-      height: 48px !important;
-      background: $__color-primary-background !important;
-      padding: 12px 15px !important;
-    }
+.test-card {
+  border: none;
 
-    .test-card-header {
-      border-left: 5px solid $__color-primary;
-      padding-left: 5px;
-    }
+  .el-card__header {
+    height: 48px !important;
+    background: $__color-primary-background !important;
+    padding: 12px 15px !important;
   }
 
-  .card-waterfull {
-    .el-card {
-      width: 98% !important;
-    }
-
-    .el-row {
-      margin: 0 !important;
-    }
+  .test-card-header {
+    border-left: 5px solid $__color-primary;
+    padding-left: 5px;
   }
+}
+
 </style>