|
|
@@ -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
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|