Kaynağa Gözat

'新闻资讯'

chending1994 5 yıl önce
ebeveyn
işleme
f13f48ecc3

BIN
assets/images/contact/contact_bg.png


BIN
assets/images/cooperate/cooperateBg.png


BIN
assets/images/merchants/bg.png


BIN
assets/images/news/newsBg.png


BIN
assets/images/news/time.png


+ 27 - 4
components/common/banner.vue

@@ -1,7 +1,9 @@
 <template>
   <div class="common-banner" :style="{'height': height + 'px'}">
     <img class="bg-img" :src="img" :style="{'height': height + 'px', 'max-height': height + 'px'}" alt="" srcset="">
-    <slot></slot>
+    <div class="bg-content">
+      <slot></slot>
+    </div>
   </div>
 </template>
 
@@ -27,12 +29,12 @@ export default {
 
 <style lang="scss">
 .common-banner {
-  width: 100%;
   // height: 521px;
   position: relative;
   margin: 0 auto;
   overflow: hidden;
   text-align: center;
+  max-width: 1920px;
   .bg-img {
     position: absolute;
     top: 0px;
@@ -42,11 +44,19 @@ export default {
     z-index: 1;
     -webkit-transform: translateX(-50%);
     transform: translateX(-50%);
-    max-width: 2560px;
+    max-width: 1920px;
     // max-height: 521px;
     // height: 521px;
     display: block;
   }
+  .bg-content {
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    height: 100%;
+    width: 100%;
+    background: rgba(13, 92, 250, 0.8);
+  }
   h2 {
     position: absolute;
     top: 50%;
@@ -58,9 +68,22 @@ export default {
     color: #FFFFFF;
     z-index: 10;
   }
+  h4 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 18px;
+    font-family: PingFangSC-Regular, PingFang SC;
+    font-weight: 400;
+    color: #FFFFFF;
+    line-height: 25px;
+    z-index: 10;
+    margin-top: 82px;
+  }
 }
 .content-wrap {
-  margin-top: 94px;
+  margin-top: 85px;
   width: 100%;
   position: absolute;
   z-index: 10;

+ 1 - 1
pages/about/contact.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <common-banner :img="bgImg" :height="718">
+    <common-banner :img="bgImg" :height="644">
       <div class="content-wrap">
         <div class="content w1200">
           <no-ssr>

+ 49 - 3
pages/about/team.vue

@@ -1,10 +1,14 @@
 <template>
   <div class="container">
-    <common-banner
+    <div class="common-banner" style="height:324px">
+      <img class="bg-img" :src="bgImg">
+      <h2>专家团队</h2>
+    </div>
+    <!-- <common-banner
       :img="bgImg"
       :height="324">
       <h2>专家团队</h2>
-    </common-banner>
+    </common-banner> -->
     <!-- 专家团队 -->
     <div class="expert">
       <div class="e-content w1200">
@@ -169,7 +173,7 @@ export default {
   },
   mounted() {},
   components: {
-    CommonBanner,
+    // CommonBanner,
   },
   methods: {},
 };
@@ -178,6 +182,48 @@ export default {
 <style lang="scss" scoped>
 @import "~static/common/style.sass";
 
+.common-banner {
+  // height: 521px;
+  position: relative;
+  margin: 0 auto;
+  overflow: hidden;
+  text-align: center;
+  max-width: 1920px;
+  .bg-img {
+    position: absolute;
+    top: 0px;
+    left: 50%;
+    bottom: 0px;
+    right: 0px;
+    z-index: 1;
+    -webkit-transform: translateX(-50%);
+    transform: translateX(-50%);
+    max-width: 1920px;
+    // max-height: 521px;
+    // height: 521px;
+    display: block;
+  }
+  .bg-content {
+    position: absolute;
+    top: 0;
+    z-index: 10;
+    height: 100%;
+    width: 100%;
+    background: rgba(13, 92, 250, 0.8);
+  }
+  h2 {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    font-size: 66px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #FFFFFF;
+    z-index: 10;
+  }
+}
+
 .title-content {
   position: relative;
   text-align: center;

+ 3 - 2
pages/cooperate/index.vue

@@ -2,8 +2,9 @@
   <div class="coopetate">
     <common-banner
       :img="bgImg"
-      :height="324">
+      :height="510">
       <h2>加盟合作</h2>
+      <h4>合作热线:400-6807300</h4>
     </common-banner>
     <!-- 项目介绍 -->
     <div class="project">
@@ -298,7 +299,7 @@ export default {
   data() {
     return {
       currentMtab: 0,
-      bgImg: require("~/assets/images/team/teamBg@2x.png"),
+      bgImg: require("~/assets/images/cooperate/cooperateBg.png"),
       projectImg: require("~/assets/images/cooperate/project_img.png"),
       tabContent01: require('~/assets/images/cooperate/tab_content_01@2x.png'),
       tabContent02: require('~/assets/images/cooperate/tab_content_02@2x.png'),

+ 1 - 1
pages/merchants/campus/_id.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="container">
-    <common-banner :img="bgImg" :height="718">
+    <common-banner :img="bgImg" :height="644">
       <div class="content-wrap">
         <div class="content w1200">
           <div class="left title">中德校区详情</div>

+ 1 - 1
pages/merchants/campus/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="campus">
-    <common-banner :img="bgImg" :height="718">
+    <common-banner :img="bgImg" :height="644">
       <div class="content-wrap">
         <div class="content w1200">
           <div class="left title">中德全国校区</div>

+ 1 - 1
pages/merchants/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="merchants">
-    <common-banner :img="bgImg" :height="718">
+    <common-banner :img="bgImg" :height="644">
       <div class="content-wrap">
         <div class="content w1200">
           <div class="left title">招商加盟体系</div>

+ 46 - 31
pages/news/index.vue

@@ -1,10 +1,11 @@
 <template>
 	<div class="container news">
-    <div class="banner">
-      <div class="banner-content">
-        <h3 class="title">新闻中心</h3>
-      </div>
-    </div>
+    <common-banner
+      :img="bgImg"
+      :height="644">
+      <h2>新闻中心</h2>
+    </common-banner>
+    <!-- 专家团队 -->
     <section class="content w1200">
       <div class="aside">
         <ul class="news-cate-list">
@@ -32,7 +33,10 @@
                 </nuxt-link>
               </div>
               <div class="news-list-desc">{{ item.articleIntroduction }}</div>
-              <div class="news-list-bottom">{{ item.createTime }}</div>
+              <div class="news-list-bottom">
+                <img class="icon" :src="timeIcon" alt="" srcset="">
+                {{ item.createTime }}
+              </div>
             </div>
           </div>
         </section>
@@ -55,15 +59,15 @@
 
 <script>
 import axios from "axios";
+import CommonBanner from "@/components/common/banner";
 
-if (process.browser) { 
-  var {WOW} = require('wowjs')
-}
 export default {
   name: 'news',
   data() {
     return {
       isEmpty: false,
+      bgImg: require("~/assets/images/news/newsBg.png"),
+      timeIcon: require("~/assets/images/news/time.png"),
       currentPage: 1,
       total: 0,
       cateId: '',
@@ -72,6 +76,7 @@ export default {
     }
   },
   components: {
+    CommonBanner
   },
   head() {
     return {
@@ -109,12 +114,6 @@ export default {
     this.cateId = cateId;
   },
   mounted() {
-    if (process.browser) {
-      new WOW({
-        offset: 0,
-        live: true
-      }).init()
-    }
     this.loadNewsList();
   },
   methods: {
@@ -187,11 +186,12 @@ export default {
       box-sizing: border-box;
       width: 200px;
       background: #FFFFFF;
-      box-shadow: 0px 2px 9px 0px rgba(211, 213, 212, 0.5);
-      border-radius: 6px;
-      padding: 8px 0 36px 16px;
+      border-radius: 20px;
+      padding: 20px 0 36px 16px;
       margin-right: 15px;
       height: 224px;
+      box-shadow: 6px 6px 25px 0px rgba(211, 229, 255, 0.33);
+
     }
     .news-cate-item {
       display: flex;
@@ -201,17 +201,20 @@ export default {
         margin-right: 18px;
       }
       .title {
-        font-size: 20px;
+        font-size: 18px;
         font-weight: 500;
-        color: #959698;
+        color: #999999;
         line-height: 28px;
         padding: 12px 0;
         &.active {
-          font-size: 30px;
           font-weight: 500;
           color: #262626;
-          line-height: 42px;
           transition: .3s;
+          font-size: 26px;
+          font-family: PingFangSC-Semibold, PingFang SC;
+          font-weight: 600;
+          color: #262626;
+          line-height: 37px;
         }
       }
     }
@@ -224,9 +227,12 @@ export default {
         display: flex;
         height: 212px;
         background: #FFFFFF;
-        box-shadow: 0px 2px 15px 0px rgba(206, 209, 217, 0.42);
+        // box-shadow: 0px 2px 15px 0px rgba(206, 209, 217, 0.42);
         border-radius: 10px;
         margin-bottom: 20px;
+        &:hover {
+          box-shadow: 6px 6px 25px 0px rgba(211, 229, 255, 0.33);
+        }
         .news-list-left {
           margin-right: 28px;
           width: 266px;
@@ -237,9 +243,9 @@ export default {
             height: 100%;
             border-radius: 4px;
             transition: all .5s ease;
-            &:hover {
-              transform: scale(1.2);
-            }
+            // &:hover {
+            //   transform: scale(1.2);
+            // }
           }
         }
         .news-list-right {
@@ -247,11 +253,13 @@ export default {
           display: flex;
           flex-direction: column;
           justify-content: space-between;
+          padding: 10px 0;
           .news-list-title {
-            font-size: 22px;
+            font-size: 18px;
             font-weight: 500;
+            font-family: PingFangSC-Medium, PingFang SC;
             color: #242424;
-            line-height: 44px;
+            line-height: 27px;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -262,10 +270,10 @@ export default {
             }
           }
           .news-list-desc {
-            font-size: 16px;
+            font-size: 14px;
             font-weight: 400;
-            color: #797979;
-            line-height: 32px;
+            color: #787878;
+            line-height: 21px;
             overflow: hidden;
             text-overflow: ellipsis;
             display: -webkit-box;
@@ -277,6 +285,13 @@ export default {
             font-weight: 400;
             color: #ABABAB;
             line-height: 14px;
+            display: flex;
+            align-items: center;
+            .icon {
+              width: 12px;
+              height: 12px;
+              margin-right: 10px
+            }
           }
         }
       }