0726修改

src/assets/index.scss

@@ -64,6 +64,13 @@ html, body, #app{
 .large-icon {
   font-size: 2em;
 }
+@media (max-width: 1650px) {
+  .foots {
+    .main {
+      width: 70% !important;
+    }
+  }
+}
 @media screen {
   @media (max-width: 1366px) {
     h4 {
@@ -90,7 +97,7 @@ html, body, #app{
     }
     .foots {
       .main {
-        width: 70% !important;
+        width: 80% !important;
       }
     }
     // 列表
@@ -145,7 +152,7 @@ html, body, #app{
     }
     .foots {
       .main {
-        width: 80% !important;
+        width: 85% !important;
       }
     }
     // 列表

src/components/foots/index.vue

@@ -6,12 +6,11 @@
         <p class="itemBox itemBox1">
           <span class="item">{{ infos.record && infos.record.name }}{{ infos.record && infos.record.value }}</span>
           <span class="item">{{ infos.title && infos.title.name }}{{ infos.title && infos.title.value }}</span>
-          <span class="item">{{ infos.address && infos.address.name }}{{ infos.address && infos.address.value }}</span>
+          <span class="item item2">{{ infos.postalCode && infos.postalCode.name }}{{ infos.postalCode && infos.postalCode.value }}</span>
         </p>
         <p class="itemBox itemBox2">
-          <span class="item"></span>
-          <span class="item item2">{{ infos.postalCode && infos.postalCode.name }}{{ infos.postalCode && infos.postalCode.value }}</span>
           <span class="item">{{ infos.phone && infos.phone.name }}{{ infos.phone && infos.phone.value }}</span>
+          <span class="item item3">{{ infos.address && infos.address.name }}{{ infos.address && infos.address.value }}</span>
         </p>
         <!-- <p class="itemBox itemBox3">
           <span class="item">{{ infos.fax && infos.fax.name }}{{ infos.fax && infos.fax.value }}</span>
@@ -56,36 +55,32 @@ export default {
 <style lang="scss" scoped>
 .foots {
   width: 100%;
-  height: 300px;
+  height: 150px;
   background-color: #f5f5fb;
   .main {
-    width: 50%;
+    width: 55%;
     display: flex;
     margin: 0 auto;
-    padding-top: 5%;
+    padding-top: 2%;
     .sign {
-      width: 15%;
+      width: 80px;
+      height: 80px;
+      margin-top: 10px;
     }
     .info {
-      width: 80%;
-      margin-left: 8%;
-      display: flex;
+      width: 90%;
+      margin-left: 20px;
+      // display: flex;
       .itemBox {
-        // display: flex;
+        display: flex;
         .item {
           display: block;
-          margin: 10px;
-        }
-      }
-      .itemBox1, .itemBox2 {
-        width: 50%;
-        .item {
+          width: 33%;
           text-align: left;
         }
-      }
-      .itemBox3 .item {
-        width: 0%;
-        // text-align: center;
+        .item3 {
+          width: 50%;
+        }
       }
     }
   }

src/components/link/index.vue

@@ -10,7 +10,7 @@
         <div class="sj"></div>
       </div>
     </div>
-    <div class="itemBox">
+    <div class="itemBox" v-if="itemId !== null">
       <a v-for="(item, index) in linkList" :key="index" :href="item.url">{{ item.title }}</a>
     </div>
   </div>
@@ -30,12 +30,16 @@ export default {
     };
   },
   async mounted() {
-    const res = await this.linkTypeQuery();
-    if (res.errcode == 0) this.itemClick(this.linkTypeList[0]);
+    await this.linkTypeQuery();
+    // if (res.errcode == 0) this.itemClick(this.linkTypeList[0]);
   },
   methods: {
     ...mapActions(['linkTypeQuery', 'linkQuery']),
     async itemClick(e) {
+      if (this.itemId == e._id) {
+        this.itemId = null;
+        return;
+      }
       this.itemId = e._id;
       await this.linkQuery({ code: e.code });
     }
@@ -73,6 +77,7 @@ export default {
       text-align: center;
       line-height: 3em;
       cursor: pointer;
+      color: #007ce2;
     }
     .item {
       position: relative;
@@ -93,14 +98,20 @@ export default {
   }
   .itemBox {
     width: 100%;
-    min-height: 200px;
+    min-height: 150px;
     border: 1px solid #999;
     margin: 2% 0;
+    display: flex;
+    flex-wrap: wrap;
+    // overflow-y: auto;
     a {
       color: #999;
-      line-height: 2em;
+      // line-height: 1em;
       margin: 0 10px;
-      text-decoration:none
+      text-decoration:none;
+      display: block;
+      width: 15%;
+      text-align: center;
     }
   }
 }

src/components/list/index.vue

@@ -9,20 +9,23 @@
       </div>
     </div>
     <el-tabs :stretch="false" v-model="activeName" :type="tabsType" @tab-click="handleClick" :class="{ borderCard: tabsType == 'border-card' }">
-      <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.title" :name="item.code">
-        <div class="isimg" v-if="isImg && items.list" @click="itemClick(items.item)">
-          <el-image class="isimg-img" v-if="items.item && items.item.thumbnail" :src="items.item && items.item.thumbnail"></el-image>
-          <el-image class="isimg-img" v-if="items.item && !items.item.thumbnail" :src="thumbnail"></el-image>
-          <div class="isimg-text">
-            <div class="isimg-title">{{ items.item && items.item.title }}</div>
-            <div class="isimg-describe">{{ items.item && items.item.describe }}</div>
+      <el-tab-pane v-for="(item, index) in tabsList" :key="index" :label="item.title" :name="item.code" :parentCode="item.parentCode">
+        <div v-if="items.list.length > 0">
+          <div class="isimg" v-if="isImg && items.list" @click="itemClick(items.item)">
+            <el-image class="isimg-img" v-if="items.item && items.item.thumbnail" :src="items.item && items.item.thumbnail"></el-image>
+            <el-image class="isimg-img" v-if="items.item && !items.item.thumbnail" :src="thumbnail"></el-image>
+            <div class="isimg-text">
+              <div class="isimg-title">{{ items.item && items.item.title }}</div>
+              <div class="isimg-describe">{{ items.item && items.item.describe }}</div>
+            </div>
+          </div>
+          <div class="isList" :class="{ borderList: tabsType == 'border-card' }" v-for="(i, index) in items.list" :key="index"  @click="itemClick(i)">
+            <el-image class="isList-img" :src="icon"></el-image>
+            <div class="isList-title">{{ i.title }}</div>
+            <div class="isList-date">{{ i.date | dates }}</div>
           </div>
         </div>
-        <div class="isList" :class="{ borderList: tabsType == 'border-card' }" v-for="(i, index) in items.list" :key="index"  @click="itemClick(i)">
-          <el-image class="isList-img" :src="icon"></el-image>
-          <div class="isList-title">{{ i.title }}</div>
-          <div class="isList-date">{{ i.date | dates }}</div>
-        </div>
+        <el-divider class="divider" v-else>暂无数据</el-divider>
       </el-tab-pane>
     </el-tabs>
   </div>
@@ -75,9 +78,15 @@ export default {
   },
   methods: {
     handleClick(e) {
+      console.log(e);
+      // console.log(this.parentCode);
       // 菜单编码
       this.code = e.name || e.code;
-      this.$emit('tabClick', { name: this.code });
+      const item = this.tabsList.find(i => i.code == this.code);
+      console.log(item, 'item');
+      const data = { name: this.code };
+      if (item.parentCode) data.parentCode = true;
+      this.$emit('tabClick', data);
     },
     itemClick(e) {
       // 获取最后一级菜单
@@ -105,6 +114,10 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.divider {
+  width: 70%;
+  margin: 15% auto;
+}
 .borderCard {
   border-top: 5px solid #007ce2;
 }
@@ -113,6 +126,12 @@ export default {
 }
 .lists {
   width: 30%;
+  height: 360px;
+  .el-tabs{
+    ::v-deep .el-tabs__content {
+      height: 280px;
+    }
+  }
   .title {
     display: flex;
     margin: 5px 0;
@@ -125,6 +144,8 @@ export default {
       width: 60%;
       margin: 0 15px;
       color: #007ce2;
+      font-size: 16px;
+      font-weight: 600;
     }
     .more {
       width: 35%;

src/components/list/threeList.vue

@@ -82,11 +82,12 @@ export default {
 <style lang="scss" scoped>
 .lists {
   // margin-left: 5%;
+  height: 360px;
   width: 30%;
   .titleImg {
     display: block;
     width: 100%;
-    height: 27%;
+    height: 70px;
   }
   .title {
     display: flex;
@@ -103,6 +104,8 @@ export default {
       margin: 0 15px;
       color: #007ce2;
       width: 78%;
+      font-size: 16px;
+      font-weight: 600;
     }
   }
   .more {

src/views/Home.vue

@@ -60,9 +60,9 @@ export default {
       prize: [],
       prizeImgUrl: require('../assets/icon3.png'),
       prizeList: [
-        { title: '科普讲座', code: '041' },
-        { title: '科普活动', code: '042' },
-        { title: '科普周', code: '043' }
+        { title: '科普讲座', code: '041', parentCode: true },
+        { title: '科普活动', code: '042', parentCode: true },
+        { title: '科普周', code: '043', parentCode: true }
       ],
       // 社科奖项
       universal: [],
@@ -78,7 +78,7 @@ export default {
       buildsList: [
         { title: '申报评审', code: '051' },
         { title: '立项管理', code: '052' },
-        { title: '服务平台', code: '053' }
+        { title: '服务平台', code: '053', parentCode: true }
       ],
       // 社科要闻
       news: [],
@@ -96,9 +96,9 @@ export default {
   },
   async mounted() {
     // 社会组织建设
-    await this.btnClick({ name: '031', type: 'corporation' });
+    // await this.btnClick({ name: '031', type: 'corporation' });
     // 社科普及
-    await this.btnClick({ name: '041', type: 'prize', parentCode: true });
+    // await this.btnClick({ name: '041', type: 'prize', parentCode: true });
     // 科学评奖
     await this.btnClick({ name: '061', type: 'universal', limit: 6 });
     // 智库基金
@@ -193,7 +193,7 @@ export default {
       width: 100%;
       position: absolute;
       bottom: 0;
-      height: 20%;
+      height: 70px;
     }
   }
 }