|
|
@@ -1,41 +1,47 @@
|
|
|
<template>
|
|
|
<div class="home">
|
|
|
-
|
|
|
- <div class="news-wrapper">
|
|
|
- <div class="new-pic" @click="navTo('/news/detail?id='+ showNew.id)">
|
|
|
- <img :src="showNew.img">
|
|
|
- <div class="title clamp hand">
|
|
|
- {{showNew.title}}
|
|
|
+ <div class="company">
|
|
|
+ <div class="company-left">
|
|
|
+ <div class="title-box">
|
|
|
+ <item-title title="公司介绍" :topath="'/publicity'"></item-title>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="news">
|
|
|
- <item-title title="红会新闻" :topath="'/news'"></item-title>
|
|
|
- <div class="item-wrapper">
|
|
|
- <div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
|
|
|
- <div class="title clamp ">
|
|
|
- <span></span>
|
|
|
- {{ item.title }}
|
|
|
- </div>
|
|
|
- <div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="company-right">
|
|
|
+ <img src="" >
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="home-body">
|
|
|
- <div class="body-left moren">
|
|
|
- <div class="red-new">
|
|
|
- <item-title title="信息公示" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="news-wrapper">
|
|
|
+ <div class="new-pic" @click="navTo('/news/detail?id=' + showNew.id)">
|
|
|
+ <img :src="showNew.img" />
|
|
|
+ <div class="title clamp hand">{{ showNew.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="body-left moren">
|
|
|
+ <div class="red-new">
|
|
|
+ <item-title title="案例展示" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="item-wrapper">
|
|
|
+ <div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id=' + item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
+ <span></span>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="news">
|
|
|
+ <item-title title="新闻动态" :topath="'/news'"></item-title>
|
|
|
<div class="item-wrapper">
|
|
|
- <div class="new-item hand" v-for="item in openNews" :key="item.id" @click="navTo('/publicity/detail?id='+ item.id)">
|
|
|
- <div class="title clamp ">
|
|
|
+ <div class="new-item hand" v-for="item in redNews" :key="item.id" @click="navTo('/news/detail?id=' + item.id)">
|
|
|
+ <div class="title clamp">
|
|
|
<span></span>
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
- <div class="time">{{ item.release_time?item.release_time:item.add_time | time }}</div>
|
|
|
+ <div class="time">{{ item.release_time ? item.release_time : item.add_time | time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
-
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -44,15 +50,13 @@
|
|
|
<script>
|
|
|
import ItemTitle from './homeChild/ItemTitle.vue';
|
|
|
|
|
|
-import { loadIndexs, splist, loveList, friendList , newsList, openList, banner, regulationList } from '../request/api.js';
|
|
|
+import { loadIndexs, splist, loveList, friendList, newsList, openList, banner, regulationList } from '../request/api.js';
|
|
|
export default {
|
|
|
components: {
|
|
|
ItemTitle
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
-
|
|
|
-
|
|
|
// jxList: [],
|
|
|
spList: [],
|
|
|
imgList: [],
|
|
|
@@ -68,45 +72,42 @@ export default {
|
|
|
getTime(val) {
|
|
|
let date = new Date(val * 1000);
|
|
|
let Y = date.getFullYear();
|
|
|
- let M = date.getMonth() +1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
+ let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
let D = date.getDate() < 10 ? '0' + date.getDay() : date.getDate();
|
|
|
return Y + '.' + M + '.' + D;
|
|
|
},
|
|
|
time(val) {
|
|
|
- let arr = val.split(' ')
|
|
|
- let str = arr[0]
|
|
|
- str = str.replace(/-/g, '.')
|
|
|
- return str
|
|
|
+ let arr = val.split(' ');
|
|
|
+ let str = arr[0];
|
|
|
+ str = str.replace(/-/g, '.');
|
|
|
+ return str;
|
|
|
}
|
|
|
},
|
|
|
- computed:{
|
|
|
+ computed: {
|
|
|
jxList() {
|
|
|
- return this.moreJxList.slice(0,3)
|
|
|
+ return this.moreJxList.slice(0, 3);
|
|
|
},
|
|
|
showNew() {
|
|
|
-
|
|
|
- let obj =this
|
|
|
- if(obj.redNews[0]){
|
|
|
+ let obj = this;
|
|
|
+ if (obj.redNews[0]) {
|
|
|
let data = {
|
|
|
id: obj.redNews[0].id,
|
|
|
img: obj.redNews[0].image_input[0],
|
|
|
title: obj.redNews[0].title
|
|
|
-
|
|
|
- }
|
|
|
- return data
|
|
|
+ };
|
|
|
+ return data;
|
|
|
}
|
|
|
-
|
|
|
- return {}
|
|
|
+
|
|
|
+ return {};
|
|
|
}
|
|
|
},
|
|
|
created() {
|
|
|
- this.getSwiperList()
|
|
|
+ this.getSwiperList();
|
|
|
this.getIndex();
|
|
|
this.getFirstAidList();
|
|
|
this.getJxList();
|
|
|
- this.getNewsList()
|
|
|
- this.getOpenList(),
|
|
|
- this.getRegulationList()
|
|
|
+ this.getNewsList();
|
|
|
+ this.getOpenList(), this.getRegulationList();
|
|
|
},
|
|
|
methods: {
|
|
|
navTo(url) {
|
|
|
@@ -139,65 +140,64 @@ export default {
|
|
|
}
|
|
|
let date = new Date(item.add_time * 1000);
|
|
|
let Y = date.getFullYear();
|
|
|
- let M = date.getMonth()+1 < 10 ? '0' + (date.getMonth()+1) : date.getMonth() + 1;
|
|
|
+ let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
|
|
|
let D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate();
|
|
|
item.time = Y + '/' + M + '/' + D;
|
|
|
return item;
|
|
|
});
|
|
|
- obj.gundong()
|
|
|
+ obj.gundong();
|
|
|
});
|
|
|
},
|
|
|
gundong() {
|
|
|
- let obj = this
|
|
|
- obj.timer = setTimeout(()=> {
|
|
|
- obj.moreJxList.push(obj.moreJxList.shift())
|
|
|
+ let obj = this;
|
|
|
+ obj.timer = setTimeout(() => {
|
|
|
+ obj.moreJxList.push(obj.moreJxList.shift());
|
|
|
// console.log(obj.moreJxList)
|
|
|
- obj.gundong()
|
|
|
- },2000)
|
|
|
+ obj.gundong();
|
|
|
+ }, 2000);
|
|
|
},
|
|
|
getNewsList() {
|
|
|
- let obj = this
|
|
|
+ let obj = this;
|
|
|
newsList({
|
|
|
page: 1,
|
|
|
limit: 9
|
|
|
}).then(res => {
|
|
|
- obj.redNews = res.data.list
|
|
|
- })
|
|
|
+ obj.redNews = res.data.list;
|
|
|
+ });
|
|
|
},
|
|
|
getOpenList() {
|
|
|
- let obj = this
|
|
|
+ let obj = this;
|
|
|
openList({
|
|
|
page: 1,
|
|
|
limit: 9
|
|
|
}).then(res => {
|
|
|
- obj.openNews = res.data.list
|
|
|
+ obj.openNews = res.data.list;
|
|
|
// console.log(obj.openNews)
|
|
|
- })
|
|
|
+ });
|
|
|
},
|
|
|
getSwiperList() {
|
|
|
- let obj = this
|
|
|
+ let obj = this;
|
|
|
banner().then(res => {
|
|
|
- let list = res.data.list.map( item => {
|
|
|
- return item.image_input[0]
|
|
|
- })
|
|
|
- obj.swiperList= list
|
|
|
- })
|
|
|
+ let list = res.data.list.map(item => {
|
|
|
+ return item.image_input[0];
|
|
|
+ });
|
|
|
+ obj.swiperList = list;
|
|
|
+ });
|
|
|
},
|
|
|
getRegulationList() {
|
|
|
- let obj = this
|
|
|
+ let obj = this;
|
|
|
regulationList({
|
|
|
page: 1,
|
|
|
limit: 6
|
|
|
}).then(res => {
|
|
|
- obj.regulationList = res.data.list
|
|
|
- })
|
|
|
+ obj.regulationList = res.data.list;
|
|
|
+ });
|
|
|
}
|
|
|
}
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" spcode>
|
|
|
-
|
|
|
.news-wrapper {
|
|
|
width: 1200px;
|
|
|
display: flex;
|
|
|
@@ -223,7 +223,7 @@ export default {
|
|
|
font-size: 24px;
|
|
|
font-family: inpinheiti;
|
|
|
font-weight: 400;
|
|
|
- color: #FFFFFF;
|
|
|
+ color: #ffffff;
|
|
|
position: absolute;
|
|
|
bottom: 0;
|
|
|
}
|
|
|
@@ -231,10 +231,27 @@ export default {
|
|
|
.news {
|
|
|
width: 659px;
|
|
|
height: 344px;
|
|
|
- background: #FFFFFF;
|
|
|
+ background: #ffffff;
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
+.company {
|
|
|
+ margin-top: 49px;
|
|
|
+ width: 1980px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: start;
|
|
|
+ padding: 0 75px 72px 51px;
|
|
|
+ .company-left{
|
|
|
+ padding-top: 21px;
|
|
|
+ width: 900px;
|
|
|
+ height: 414px;
|
|
|
+ }
|
|
|
+ .company-right {
|
|
|
+ width: 917px;
|
|
|
+ height: 414px;
|
|
|
+ background: #55aaff;
|
|
|
+ }
|
|
|
+}
|
|
|
.home-body {
|
|
|
width: 1200px;
|
|
|
margin: 24px auto;
|
|
|
@@ -258,7 +275,7 @@ export default {
|
|
|
}
|
|
|
.item-wrapper {
|
|
|
padding: 20px 15px 0 13px;
|
|
|
-
|
|
|
+
|
|
|
.new-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
@@ -282,7 +299,6 @@ export default {
|
|
|
// border-radius: 50%;
|
|
|
transform: rotate(45deg);
|
|
|
margin-right: 8px;
|
|
|
-
|
|
|
}
|
|
|
.title {
|
|
|
width: 400px;
|
|
|
@@ -442,50 +458,49 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.item-wrapper {
|
|
|
- padding: 20px 15px 0 13px;
|
|
|
-
|
|
|
- .new-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 17px;
|
|
|
- &:hover {
|
|
|
- span {
|
|
|
- background: red;
|
|
|
- }
|
|
|
- .title {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- .time {
|
|
|
- color: red;
|
|
|
- }
|
|
|
- }
|
|
|
- span {
|
|
|
- display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #d8d8d8;
|
|
|
- // border-radius: 50%;
|
|
|
- transform: rotate(45deg);
|
|
|
- margin-right: 8px;
|
|
|
-
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 400px;
|
|
|
- height: 14px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #101010;
|
|
|
- // &:hover {
|
|
|
- // color: red;
|
|
|
- // }
|
|
|
- }
|
|
|
- .time {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: 500;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
+ padding: 20px 15px 0 13px;
|
|
|
+
|
|
|
+ .new-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ margin-bottom: 17px;
|
|
|
+ &:hover {
|
|
|
+ span {
|
|
|
+ background: red;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ color: red;
|
|
|
}
|
|
|
+ .time {
|
|
|
+ color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span {
|
|
|
+ display: inline-block;
|
|
|
+ width: 8px;
|
|
|
+ height: 8px;
|
|
|
+ background: #d8d8d8;
|
|
|
+ // border-radius: 50%;
|
|
|
+ transform: rotate(45deg);
|
|
|
+ margin-right: 8px;
|
|
|
}
|
|
|
+ .title {
|
|
|
+ width: 400px;
|
|
|
+ height: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #101010;
|
|
|
+ // &:hover {
|
|
|
+ // color: red;
|
|
|
+ // }
|
|
|
+ }
|
|
|
+ .time {
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
