|
|
@@ -5,79 +5,131 @@
|
|
|
<el-carousel-item v-for="(item, index) in swiperList" :key="index"><el-image :src="item" alt="" class="swiper-img" /></el-carousel-item>
|
|
|
</el-carousel>
|
|
|
</div>
|
|
|
- <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}}
|
|
|
+ <img src="../assets/img/m3.png" class="home-tit">
|
|
|
+ <div class="new-wrapper">
|
|
|
+ <div class="main-new flex">
|
|
|
+ <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>
|
|
|
- <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 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 class="sj"></span>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ item.add_time }}</div>
|
|
|
</div>
|
|
|
- <div class="time">{{ item.add_time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
-
|
|
|
- <div class="home-body">
|
|
|
-
|
|
|
- <div class="body-left moren">
|
|
|
- <div class="red-new">
|
|
|
- <item-title title="信息公示" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="area-new flex">
|
|
|
+ <div class="area-item">
|
|
|
+ <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="new-item hand" v-for="item in ezqList" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
|
|
|
<div class="title clamp ">
|
|
|
- <span></span>
|
|
|
+ <span class="sj"></span>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="area-item">
|
|
|
+ <item-title title="华容区" :topath="'/news'"></item-title>
|
|
|
+ <div class="item-wrapper">
|
|
|
+ <div class="new-item hand" v-for="item in hrqList" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
+ <span class="sj"></span>
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
- <div class="time">{{ item.add_time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="new-open">
|
|
|
- <item-title title="政策法规" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="area-item">
|
|
|
+ <item-title title="梁子湖区" :topath="'/news'"></item-title>
|
|
|
<div class="item-wrapper">
|
|
|
- <div class="new-item hand" v-for="item in regulationList" :key="item.id" @click="navTo('/regulations/detail?id='+item.id)">
|
|
|
- <div class="title clamp">
|
|
|
- <span></span>
|
|
|
+ <div class="new-item hand" v-for="item in lzhqList" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
+ <span class="sj"></span>
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
- <div class="time">{{ item.add_time}}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="body-right">
|
|
|
- <div class="join">
|
|
|
- <item-title title="善行参与" :topath="'/donation'"></item-title>
|
|
|
- <div class="join-main">
|
|
|
- <div class="join-item" v-for="item in miniNavList" @click="navTo(item.path)" :key="item.title">
|
|
|
- <div class="logo hand"><img :src="item.image" /></div>
|
|
|
- <div class="title hand">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="home-main1 flex">
|
|
|
+ <div class="home-join">
|
|
|
+ <item-title title="善行参与" :topath="'/donation'" isShow="0"></item-title>
|
|
|
+ <div class="join-main">
|
|
|
+ <div class="join-item" v-for="item in miniNavList1" @click="navTo(item.path)" :key="item.title">
|
|
|
+ <div class="logo hand"><img :src="item.image" /></div>
|
|
|
+ <div class="title hand">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="join-main">
|
|
|
+ <div class="join-item" v-for="item in miniNavList2" @click="navTo(item.path)" :key="item.title">
|
|
|
+ <div class="logo hand"><img :src="item.image" /></div>
|
|
|
+ <div class="title hand">{{ item.title }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-open">
|
|
|
+ <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('/news/detail?id='+ item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
+ <span class="sj"></span>
|
|
|
+ {{ item.title }}
|
|
|
</div>
|
|
|
+ <div class="time">{{ item.add_time }}</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="list">
|
|
|
- <item-title title="爱心榜" :topath="'/loveList'"></item-title>
|
|
|
- <el-table :data="jxList" style="width: 100%">
|
|
|
- <el-table-column prop="time" label="捐献时间"></el-table-column>
|
|
|
- <el-table-column prop="donate_er" label="捐献者"></el-table-column>
|
|
|
- <el-table-column prop="money" label="捐献金额"></el-table-column>
|
|
|
- <el-table-column prop="intention" label="捐献意向"></el-table-column>
|
|
|
- </el-table>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-nav flex">
|
|
|
+ <img src="../assets/img/z1.png" >
|
|
|
+ <img src="../assets/img/z2.png" >
|
|
|
+ <img src="../assets/img/z3.png" >
|
|
|
+ <img src="../assets/img/z4.png" >
|
|
|
+ </div>
|
|
|
+ <div class="home-main2 flex">
|
|
|
+ <div class="love-wrapper">
|
|
|
+ <item-title title="爱心榜" :topath="'/loveList'"></item-title>
|
|
|
+ <div class="list-title flex">
|
|
|
+ <div>捐献时间</div>
|
|
|
+ <div>捐献者</div>
|
|
|
+ <div>捐献金额</div>
|
|
|
+ <div>捐献意向</div>
|
|
|
+ </div>
|
|
|
+ <div class="list-item flex" v-for="(item, index) in jxList" :key="index">
|
|
|
+ <div class="clamp">{{item.time}}</div>
|
|
|
+ <div class="clamp">{{item.donate_er}}</div>
|
|
|
+ <div class="clamp">{{item.money}}</div>
|
|
|
+ <div class="clamp">{{item.intention}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="home-pub">
|
|
|
+ <item-title title="政策法规" :topath="'/publicity'"></item-title>
|
|
|
+ <div class="item-wrapper">
|
|
|
+ <div class="new-item hand" v-for="item in regulationList" :key="item.id" @click="navTo('/news/detail?id='+ item.id)">
|
|
|
+ <div class="title clamp ">
|
|
|
+ <span class="sj"></span>
|
|
|
+ {{ item.title }}
|
|
|
+ </div>
|
|
|
+ <div class="time">{{ item.add_time }}</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<img src="../assets/img/m2.png" class="show-live" />
|
|
|
<div class="show-pic">
|
|
|
- <item-title title="图片展示" isShow="2"></item-title>
|
|
|
+ <item-title title="红会风采" isShow="2"></item-title>
|
|
|
<div class="imgs-wrapper">
|
|
|
<div class="imgs"><img v-for="(item, index) in imgList" :key="item.id" :src="item.picture" /></div>
|
|
|
</div>
|
|
|
@@ -96,14 +148,14 @@
|
|
|
<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, ezqList, hrqList, lzhqList } from '../request/api.js';
|
|
|
export default {
|
|
|
components: {
|
|
|
ItemTitle
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- miniNavList: [
|
|
|
+ miniNavList1: [
|
|
|
{
|
|
|
path: '/donation/contribution',
|
|
|
title: '爱心捐款',
|
|
|
@@ -124,6 +176,8 @@ export default {
|
|
|
title: '救护员登记',
|
|
|
image: require('@/assets/img/i4.png')
|
|
|
},
|
|
|
+ ],
|
|
|
+ miniNavList2: [
|
|
|
{
|
|
|
path: '/join/member',
|
|
|
title: '个人会员登记',
|
|
|
@@ -146,7 +200,6 @@ export default {
|
|
|
}
|
|
|
],
|
|
|
swiperList: [],
|
|
|
- // jxList: [],
|
|
|
spList: [],
|
|
|
imgList: [],
|
|
|
friendList: [],
|
|
|
@@ -154,7 +207,26 @@ export default {
|
|
|
openNews: [],
|
|
|
regulationList: [],
|
|
|
moreJxList: [],
|
|
|
- timer: null
|
|
|
+ timer: null,
|
|
|
+ ezqList: [],
|
|
|
+ hrqList: [],
|
|
|
+ lzhqList: [],
|
|
|
+ ceshi: [
|
|
|
+ { id: 1, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 2, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 3, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 4, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 5, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 6, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 7, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 8, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ { id: 9, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ // { id: 10, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ // { id: 11, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ // { id: 12, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ // { id: 13, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ // { id: 14, title: '测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据测试数据', add_time: '2021-05-09' },
|
|
|
+ ]
|
|
|
};
|
|
|
},
|
|
|
filters: {
|
|
|
@@ -168,7 +240,7 @@ export default {
|
|
|
},
|
|
|
computed:{
|
|
|
jxList() {
|
|
|
- return this.moreJxList.slice(0,3)
|
|
|
+ return this.moreJxList.slice(0,6)
|
|
|
},
|
|
|
showNew() {
|
|
|
|
|
|
@@ -192,8 +264,11 @@ export default {
|
|
|
this.getFirstAidList();
|
|
|
this.getJxList();
|
|
|
this.getNewsList()
|
|
|
- this.getOpenList(),
|
|
|
+ this.getOpenList()
|
|
|
this.getRegulationList()
|
|
|
+ this.getEzqList()
|
|
|
+ this.getHrqList()
|
|
|
+ this.getLzhqList()
|
|
|
},
|
|
|
methods: {
|
|
|
navTo(url) {
|
|
|
@@ -248,20 +323,29 @@ export default {
|
|
|
let obj = this
|
|
|
newsList({
|
|
|
page: 1,
|
|
|
- limit: 9
|
|
|
+ limit: 8
|
|
|
}).then(res => {
|
|
|
console.log(res.data.list,'0000000000')
|
|
|
- obj.redNews = res.data.list
|
|
|
+ obj.redNews = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
getOpenList() {
|
|
|
let obj = this
|
|
|
openList({
|
|
|
page: 1,
|
|
|
- limit: 9
|
|
|
+ limit: 7
|
|
|
}).then(res => {
|
|
|
- console.log(res.data.list,'0000000000')
|
|
|
- obj.openNews = res.data.list
|
|
|
+ console.log(res.data.list,'0000000000++++++++')
|
|
|
+
|
|
|
+ obj.openNews = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
})
|
|
|
},
|
|
|
getSwiperList() {
|
|
|
@@ -280,10 +364,56 @@ export default {
|
|
|
let obj = this
|
|
|
regulationList({
|
|
|
page: 1,
|
|
|
- limit: 6
|
|
|
+ limit: 7
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data.list,'0000000000')
|
|
|
+ obj.regulationList = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getEzqList() {
|
|
|
+ let obj = this
|
|
|
+ ezqList({
|
|
|
+ page: 1,
|
|
|
+ limit: 5
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data.list,'0000000000')
|
|
|
+ obj.ezqList = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getHrqList() {
|
|
|
+ let obj = this
|
|
|
+ hrqList({
|
|
|
+ page: 1,
|
|
|
+ limit: 5
|
|
|
}).then(res => {
|
|
|
console.log(res.data.list,'0000000000')
|
|
|
- obj.regulationList = res.data.list
|
|
|
+ obj.hrqList = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getLzhqList() {
|
|
|
+ let obj = this
|
|
|
+ lzhqList({
|
|
|
+ page: 1,
|
|
|
+ limit: 5
|
|
|
+ }).then(res => {
|
|
|
+ console.log(res.data.list,'0000000000')
|
|
|
+ obj.lzhqList = res.data.list.map(item => {
|
|
|
+ let arr = item.add_time.split(' ')
|
|
|
+ item.add_time = arr[0]+''
|
|
|
+ return item
|
|
|
+ })
|
|
|
})
|
|
|
}
|
|
|
}
|
|
|
@@ -292,14 +422,14 @@ export default {
|
|
|
|
|
|
<style lang="scss" spcode>
|
|
|
.home-swiper {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
height: 484px;
|
|
|
// background: pink;
|
|
|
- margin: -20px auto 24px;
|
|
|
+ margin: -20px auto 0px;
|
|
|
el-carousel {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
el-carousel-item {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
height: 484px;
|
|
|
}
|
|
|
}
|
|
|
@@ -309,7 +439,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.news-wrapper {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin: 24px auto;
|
|
|
@@ -345,156 +475,25 @@ export default {
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
}
|
|
|
}
|
|
|
-.home-body {
|
|
|
- width: 1200px;
|
|
|
- margin: 24px auto;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- .body-left {
|
|
|
- .red-new {
|
|
|
- width: 588px;
|
|
|
- height: 344px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-bottom: 24px;
|
|
|
- // padding: 20px 15px 0 13px;
|
|
|
- }
|
|
|
- .new-open {
|
|
|
- // padding: 20px 15px 0 13px;
|
|
|
- width: 588px;
|
|
|
- height: 262px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- }
|
|
|
- .item-wrapper {
|
|
|
- padding: 20px 15px 0 13px;
|
|
|
-
|
|
|
- .new-item {
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- margin-bottom: 17px;
|
|
|
-
|
|
|
- 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;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .body-right {
|
|
|
- .join {
|
|
|
- width: 588px;
|
|
|
- height: 344px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- margin-bottom: 24px;
|
|
|
- .join-main {
|
|
|
- padding-left: 46px;
|
|
|
- padding-top: 15px;
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- .join-item {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- margin-right: 28px;
|
|
|
- margin-bottom: 14px;
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #323131;
|
|
|
- line-height: 1;
|
|
|
- .logo {
|
|
|
- width: 103px;
|
|
|
- height: 103px;
|
|
|
- border: 1px solid #dadada;
|
|
|
- border-radius: 10px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 50px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
- }
|
|
|
- .title {
|
|
|
- padding-top: 10px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .list {
|
|
|
- width: 588px;
|
|
|
- height: 262px;
|
|
|
- background: #ffffff;
|
|
|
- box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
- .is-leaf {
|
|
|
- font-size: 17px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #d82020 !important;
|
|
|
- text-align: center;
|
|
|
- // line-height: 54px;
|
|
|
- height: 54px;
|
|
|
- }
|
|
|
- .el-table__row > td {
|
|
|
- font-size: 17px;
|
|
|
- font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #101010;
|
|
|
- text-align: center;
|
|
|
- height: 55px;
|
|
|
- .cell {
|
|
|
- overflow: hidden;
|
|
|
- text-overflow: ellipsis;
|
|
|
- white-space: nowrap;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
-}
|
|
|
.show-live {
|
|
|
display: block;
|
|
|
- width: 1200px;
|
|
|
- height: 160px;
|
|
|
- margin: 24px auto;
|
|
|
+ width: 1202px;
|
|
|
+ height: 91px;
|
|
|
+ margin: 20px auto;
|
|
|
// background-color: #cbb385;
|
|
|
}
|
|
|
.show-pic {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
// height: 192px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
margin: 24px auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
.imgs-wrapper {
|
|
|
- padding: 14px 12px;
|
|
|
+ padding: 27px 0px;
|
|
|
.imgs {
|
|
|
- width: 1176px;
|
|
|
+ width: 1160px;
|
|
|
// height: 124px;
|
|
|
display: flex;
|
|
|
flex-wrap: nowrap;
|
|
|
@@ -503,18 +502,23 @@ export default {
|
|
|
width: 186px;
|
|
|
height: 124px;
|
|
|
margin-right: 12px;
|
|
|
+ &:last-of-type {
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.friends {
|
|
|
- width: 1200px;
|
|
|
+ width: 1202px;
|
|
|
// height: 96px;
|
|
|
background: #ffffff;
|
|
|
box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
|
|
|
margin: 24px auto;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
.friend-list-wrapper {
|
|
|
- padding: 20px 28px 10px 28px;
|
|
|
+ padding: 26px 0 0px 0;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
.friend-item {
|
|
|
@@ -522,8 +526,9 @@ export default {
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: bold;
|
|
|
color: #323131;
|
|
|
- margin-left: 51px;
|
|
|
+ margin-right: 51px;
|
|
|
margin-bottom: 15px;
|
|
|
+
|
|
|
.item-a {
|
|
|
color: #323131;
|
|
|
}
|
|
|
@@ -542,40 +547,209 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
.item-wrapper {
|
|
|
- padding: 20px 15px 0 13px;
|
|
|
-
|
|
|
+ padding: 9px 0px 0 13px;
|
|
|
+ color: #666666;
|
|
|
.new-item {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
- margin-bottom: 17px;
|
|
|
-
|
|
|
- span {
|
|
|
+ height: 39px;
|
|
|
+ border-bottom: 1px solid #E5E5E5;
|
|
|
+ align-items: center;
|
|
|
+ &:last-child{
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ &:hover {
|
|
|
+ color: red;
|
|
|
+ .sj {
|
|
|
+ border-left-color: red;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sj {
|
|
|
display: inline-block;
|
|
|
- width: 8px;
|
|
|
- height: 8px;
|
|
|
- background: #d8d8d8;
|
|
|
- // border-radius: 50%;
|
|
|
- transform: rotate(45deg);
|
|
|
- margin-right: 8px;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ width: 0;
|
|
|
+ height: 0;
|
|
|
+ border-top: 6px solid transparent;
|
|
|
+ border-left: 8px solid #d2d2d2;
|
|
|
+ border-bottom: 6px solid transparent;
|
|
|
+ margin-right: 5px;
|
|
|
|
|
|
}
|
|
|
.title {
|
|
|
width: 400px;
|
|
|
- height: 14px;
|
|
|
- font-size: 14px;
|
|
|
+ // height: 14px;
|
|
|
+ font-size: 18px;
|
|
|
font-family: PingFang SC;
|
|
|
- font-weight: bold;
|
|
|
- color: #101010;
|
|
|
- &:hover {
|
|
|
- color: red;
|
|
|
- }
|
|
|
+ letter-spacing: 1px;
|
|
|
}
|
|
|
.time {
|
|
|
- font-size: 14px;
|
|
|
+ font-size: 18px;
|
|
|
font-family: PingFang SC;
|
|
|
font-weight: 500;
|
|
|
- color: #999999;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+ .home-tit {
|
|
|
+ margin: 20px 0;
|
|
|
+ width: 1202px;
|
|
|
+ height: 70px;
|
|
|
+ }
|
|
|
+ .new-wrapper {
|
|
|
+ width: 1202px;
|
|
|
+ height: 710px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .main-new {
|
|
|
+ padding: 18px 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ .new-pic {
|
|
|
+ width: 525px;
|
|
|
+ height: 378px;
|
|
|
+ position: relative;
|
|
|
+ img {
|
|
|
+ width: 525px;
|
|
|
+ height: 378px;
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ width: 485px;
|
|
|
+ height: 55px;
|
|
|
+ padding-left: 20px;
|
|
|
+ padding-right: 20px;
|
|
|
+ line-height: 55px;
|
|
|
+ font-size: 24px;
|
|
|
+ font-family: inpinheiti;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #FFFFFF;
|
|
|
+ position: absolute;
|
|
|
+ bottom: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .news {
|
|
|
+ width: 607px;
|
|
|
+ height: 378px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .area-new {
|
|
|
+ padding: 20px;
|
|
|
+ justify-content: space-between;
|
|
|
+ .area-item {
|
|
|
+ width: 372px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-main1 {
|
|
|
+ margin: 20px 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ .home-join {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ width: 588px;
|
|
|
+ height: 379px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .join-main {
|
|
|
+ padding: 29px 56px 0;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ .join-item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ font-size: 14px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #323131;
|
|
|
+ line-height: 1;
|
|
|
+ .logo {
|
|
|
+ width: 84px;
|
|
|
+ height: 84px;
|
|
|
+ // border: 1px solid #dadada;
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ // margin-right: 47px;
|
|
|
+ img {
|
|
|
+ width: 84px;
|
|
|
+ height: 84px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .title {
|
|
|
+ padding-top: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-open {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ width: 592px;
|
|
|
+ height: 379px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ .new-item {
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-nav {
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ width: 296px;
|
|
|
+ height: 108px;
|
|
|
+ // background: #000000;
|
|
|
+ // opacity: 0.34;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-main2 {
|
|
|
+ margin: 20px 0;
|
|
|
+ justify-content: space-between;
|
|
|
+ .love-wrapper {
|
|
|
+ width: 590px;
|
|
|
+ height: 479px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ .list-title {
|
|
|
+ padding-top: 6px;
|
|
|
+ div {
|
|
|
+ width: 25%;;
|
|
|
+ font-size: 17px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #BF3333;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 57px;
|
|
|
+ height: 57px;
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-item {
|
|
|
+ border-bottom: 1px solid #F2F2F2;
|
|
|
+ &:last-of-type {
|
|
|
+ border-bottom:none;
|
|
|
+ }
|
|
|
+ div {
|
|
|
+ width: 25%;
|
|
|
+ height: 55px;
|
|
|
+ line-height: 55px;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 17px;
|
|
|
+ font-family: PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #666666;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .home-pub {
|
|
|
+ box-sizing: border-box;
|
|
|
+ padding: 20px;
|
|
|
+ width: 592px;
|
|
|
+ height: 479px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
</style>
|
2312970463@qq.com
