Home Explore Help
Sign In
skl
/
skl-www
2
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

修改主页显示样式

asd123a20 2 years ago
parent
6d735582a2
commit
932a174a8a
8 changed files with 45 additions and 35 deletions
Split View Show Diff Stats
  1. BIN
      public/favicon.ico
  2. 1 1
      public/index.html
  3. 1 1
      src/components/foots/index.vue
  4. 1 1
      src/components/link/index.vue
  5. 16 15
      src/components/list/index.vue
  6. 12 9
      src/components/list/threeList.vue
  7. 5 3
      src/views/Home.vue
  8. 9 5
      src/views/list.vue

BIN
public/favicon.ico
View File


+ 1 - 1
public/index.html
View File 

@@ -5,7 +5,7 @@
 
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 
-    <title><%= htmlWebpackPlugin.options.title %></title>
 
+    <title>吉林省社会科学联合会</title>
 
   </head>
 
   <body>
 
     <noscript>

+ 1 - 1
src/components/foots/index.vue
View File 

@@ -64,7 +64,7 @@ export default {
 
     margin: 0 auto;
 
     padding-top: 5%;
 
     .sign {
 
-      width: 13%;
 
+      width: 15%;
 
     }
 
     .info {
 
       width: 80%;

+ 1 - 1
src/components/link/index.vue
View File 

@@ -99,7 +99,7 @@ export default {
 
     a {
 
       color: #999;
 
       line-height: 2em;
 
-      margin-left: 10px;
 
+      margin: 0 10px;
 
       text-decoration:none
 
     }
 
   }

+ 16 - 15
src/components/list/index.vue
View File 

@@ -2,25 +2,25 @@
 
   <div class="lists">
 
     <div class="title">
 
       <el-image class="titleImg" :src="imgUrl"></el-image>
 
-      <h2 class="titleText">{{ title }}</h2>
 
+      <div class="titleText">{{ title }}</div>
 
       <div class="more" @click="moreClick">
 
         <span class="el-icon-plus plus"></span>
 
         更多
 
       </div>
 
     </div>
 
-    <el-tabs v-model="activeName" :type="tabsType" @tab-click="handleClick" :class="{ borderCard: tabsType == 'border-card' }">
 
+    <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" @click="itemClick(items.item)">
 
+        <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-else :src="thumbnail"></el-image>
 
+          <el-image class="isimg-img" v-if="items.item && !items.item.thumbnail" :src="thumbnail"></el-image>
 
           <div class="isimg-text">
 
-            <h4 class="isimg-title">{{ items.item && items.item.title }}</h4>
 
+            <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>
 
-          <h4 class="isList-title">{{ i.title }}</h4>
 
+          <div class="isList-title">{{ i.title }}</div>
 
           <div class="isList-date">{{ i.date | dates }}</div>
 
         </div>
 
       </el-tab-pane>
 
@@ -151,7 +151,7 @@ export default {
 
       display: block;
 
       width: 30%;
 
       margin-right: 5%;
 
-      height: 100px;
 
+      height: 3%;
 
     }
 
     .isimg-text {
 
       width: 65%;
 
@@ -162,8 +162,8 @@ export default {
 
         overflow: hidden;
 
         text-overflow: ellipsis;
 
         white-space: nowrap;
 
-        line-height: 2em;
 
-        font-size: 1.2em;
 
+        line-height: 35px;
 
+        font-size: 14px;
 
       }
 
       .isimg-describe {
 
         width: 100%;
 
@@ -173,18 +173,18 @@ export default {
 
         -webkit-line-clamp: 2;
 
         -webkit-box-orient: vertical;
 
         color: #999;
 
-        font-size: 14px;
 
+        font-size: 12px;
 
       }
 
     }
 
   }
 
   .isList {
 
     display: flex;
 
-    margin: 10px 0;
 
+    margin: 5px 0;
 
     .isList-img {
 
       width: 10px;
 
       height: 10px;
 
       display: block;
 
-      margin-top: 6%;
 
+      margin-top: 4%;
 
     }
 
     .isList-title {
 
       width: 70%;
 
@@ -195,14 +195,15 @@ export default {
 
       margin-right: 5%;
 
       margin-left: 3%;
 
       cursor: pointer;
 
-      line-height: 3em;
 
-      font-size: 1.2em;
 
+      line-height: 35px;
 
+      font-size: 14px;
 
     }
 
     .isList-date {
 
       color: #999;
 
       width: 20%;
 
       text-align: right;
 
-      line-height: 2em;
 
+      line-height: 35px;
 
+      font-size: 14px;
 
     }
 
   }
 
 }

+ 12 - 9
src/components/list/threeList.vue
View File 

@@ -1,9 +1,9 @@
 
 <template>
 
   <div class="lists" :style="{ backgroundColor: isImg ? '#f4f4f4' : '', border: isImg ? '1px solid #dfdfdf' : 'none' }">
 
-    <el-image class="titleImg" :src="imgUrl" v-if="isImg"></el-image>
 
+    <el-image class="titleImg topimg" :src="imgUrl" v-if="isImg"></el-image>
 
     <div class="title" v-else>
 
       <el-image class="titleImg" :src="imgUrl"></el-image>
 
-      <h2 class="titleText">{{ title }}</h2>
 
+      <div class="titleText">{{ title }}</div>
 
       <div class="more" @click="moreClick">
 
         <span class="el-icon-plus plus"></span>
 
         更多
 
@@ -11,7 +11,7 @@
 
     </div>
 
     <div class="isList" v-for="(i, index) in data" :key="index"  @click="itemClick(i)">
 
       <el-image class="isList-img" :src="icon"></el-image>
 
-      <h4 class="isList-title">{{ i.title }}</h4>
 
+      <div class="isList-title">{{ i.title }}</div>
 
       <span class="isList-date">{{ i.date | dates }}</span>
 
     </div>
 
     <div class="more more2" @click="moreClick" v-if="isImg">
 
@@ -86,15 +86,17 @@ export default {
 
   .titleImg {
 
     display: block;
 
     width: 100%;
 
-    height: 20%;
 
+    height: 27%;
 
   }
 
   .title {
 
     display: flex;
 
     // margin: 15px 0;
 
     .titleImg {
 
+      display: block;
 
       width: 8%;
 
-      height: 5%;
 
+      height: 3%;
 
       margin-top: 1%;
 
+      margin-left: 3%;
 
     }
 
 
     .titleText {
 
@@ -131,7 +133,7 @@ export default {
 
       width: 10px;
 
       height: 10px;
 
       display: block;
 
-      margin-top: 6%;
 
+      margin-top: 4%;
 
     }
 
     .isList-title {
 
       width: 80%;
 
@@ -142,15 +144,16 @@ export default {
 
       margin-right: 5%;
 
       margin-left: 3%;
 
       cursor: pointer;
 
-      line-height: 3em;
 
-      font-size: 1.2em;
 
+      line-height: 35px;
 
+      font-size: 14px;
 
     }
 
     .isList-date {
 
       font-size: 1em;
 
       color: #999;
 
-      line-height: 3.5em;
 
+      line-height: 35px;
 
       text-align: right;
 
       width: 20%;
 
+      font-size: 14px;
 
     }
 
   }
 
 }

+ 5 - 3
src/views/Home.vue
View File 

@@ -66,7 +66,7 @@ export default {
 
       ],
 
       // 社科奖项
 
       universal: [],
 
-      universalImgUrl: require('../assets/icon3.png'),
 
+      universalImgUrl: require('../assets/icon2.png'),
 
       universalList: [
 
         { title: '评奖信息', code: '061' },
 
         { title: '获奖成果', code: '062' },
 
@@ -104,13 +104,13 @@ export default {
 
     // 智库基金
 
     await this.btnClick({ name: '051', type: 'builds', limit: 6 });
 
     // 社科要闻
 
-    await this.btnClick({ name: '02', type: 'news', limit: 4 });
 
+    await this.btnClick({ name: '02', type: 'news', limit: 6 });
 
     // 成果发布
 
     await this.btnClick({ name: '07', type: 'threeData', limit: 5, parentCode: true });
 
     // 政策法规
 
     await this.btnClick({ name: '09', type: 'threeDatazc', limit: 3, parentCode: true });
 
     // 通知公告
 
-    await this.btnClick({ name: '10', type: 'threeDatagg', limit: 4, parentCode: true });
 
+    await this.btnClick({ name: '10', type: 'threeDatagg', limit: 6, parentCode: true });
 
     // 所有菜单
 
     await this.menusQueryAll();
 
   },
 
@@ -187,11 +187,13 @@ export default {
 
     position: relative;
 
     .three {
 
       width: 100%;
 
+      height: 75%;
 
     }
 
     .xz {
 
       width: 100%;
 
       position: absolute;
 
       bottom: 0;
 
+      height: 20%;
 
     }
 
   }
 
 }

+ 9 - 5
src/views/list.vue
View File 

@@ -10,7 +10,7 @@
 
           <el-image v-if="item && item.thumbnail" :src="item.thumbnail" class="listimg" @click="newClick(item)"></el-image>
 
           <el-image v-else :src="thumbnail" class="listimg" @click="newClick(item)"></el-image>
 
           <div class="text">
 
-            <h2 class="title" @click="newClick(item)">{{ item.title }}</h2>
 
+            <div class="title" @click="newClick(item)">{{ item.title }}</div>
 
             <span class="describe">{{ item.describe }}</span>
 
             <span class="date">{{ item.date | dates }}</span>
 
           </div>
 
@@ -111,22 +111,22 @@ export default {
 
     display: flex;
 
     .listBoxLeft {
 
       width: 20%;
 
-      margin-top: 5%;
 
+      margin-top: 3%;
 
       margin-right: 5%;
 
     }
 
     .listBoxRight {
 
       width: 75%;
 
-      margin-top: 5%;
 
+      margin-top: 3%;
 
       .listBox {
 
         width: 100%;
 
         margin: 0 auto;
 
-        margin-bottom: 5%;
 
+        margin-bottom: 3%;
 
         ::v-deep .el-card__body {
 
           display: flex;
 
           .listimg {
 
             display: block;
 
             width: 15%;
 
-            height: 150px;
 
+            height: 5%;
 
             cursor: pointer;
 
           }
 
           .text {
 
@@ -138,6 +138,9 @@ export default {
 
               overflow: hidden;
 
               text-overflow: ellipsis;
 
               white-space: nowrap;
 
+              font-size: 16px;
 
+              line-height: 35px;
 
+              font-weight: 600;
 
             }
 
             .describe {
 
               width: 100%;
 
@@ -147,6 +150,7 @@ export default {
 
               -webkit-line-clamp: 2;
 
               -webkit-box-orient: vertical;
 
               color: #999;
 
+              font-size: 12px;
 
             }
 
             .date {
 
               width: 100%;