1026 lines
34 KiB
Vue
1026 lines
34 KiB
Vue
<template>
|
||
<div>
|
||
<!-- 首页导航 -->
|
||
<Navs></Navs>
|
||
<!-- content -->
|
||
<section class="content">
|
||
<!-- swiper -->
|
||
<swiper :options="swiperOption" class="swipersty">
|
||
<swiper-slide v-for="(item,index) in bannerLuBo" :key="index">
|
||
<img
|
||
@click="loctionHref(item.url)"
|
||
:src="item.img"
|
||
alt
|
||
style="width: 100%;height: 33.25rem;cursor:pointer;"
|
||
/>
|
||
</swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
<div
|
||
class="swiper-button-prev"
|
||
slot="button-prev"
|
||
:style="{'background-image':'url('+lunboUp+')'}"
|
||
></div>
|
||
<div
|
||
class="swiper-button-next"
|
||
slot="button-next"
|
||
:style="{'background-image':'url('+lunboNext+')'}"
|
||
></div>
|
||
</swiper>
|
||
<div class="content_cont">
|
||
<!-- 全局搜索 -->
|
||
<search></search>
|
||
<!-- 主内容 -->
|
||
<div class="mainCont">
|
||
<div class="mainCont_left">
|
||
<div class="left1">
|
||
<div class="header">快速查询（专题统计报表）</div>
|
||
<img :src="titleimg" alt />
|
||
<el-tabs v-model="activeName" @tab-click="handleClick">
|
||
<el-tab-pane
|
||
:label="item.label"
|
||
:name="item.name"
|
||
v-for="(item,index) in dataSearchDatas"
|
||
:key="index"
|
||
class="Listpane"
|
||
>
|
||
<div class="ListpaneLeft">
|
||
<div
|
||
v-for="(listLeft,keyLeft) in item.textArrLeft"
|
||
:key="keyLeft"
|
||
>{{listLeft.name}}</div>
|
||
</div>
|
||
<div class="center"></div>
|
||
<div class="ListpaneRight">
|
||
<div
|
||
v-for="(listRight,keyRight) in item.textArrRight"
|
||
:key="keyRight"
|
||
class="ListpaneRight"
|
||
>{{listRight.name}}</div>
|
||
</div>
|
||
</el-tab-pane>
|
||
</el-tabs>
|
||
</div>
|
||
<div class="left2">
|
||
<div class="header">可视化图表</div>
|
||
<img :src="titleimg" alt />
|
||
<div class="top">可视化统计图秉持方便易用的理念展示统计数字，通过简单的图像或动态界面及互动式统计图，您可更清楚了解一些统计指标。</div>
|
||
<!-- swiper -->
|
||
<swiper :options="swiperOptionS" class="swipersty" style="margin-top:1.2rem;">
|
||
<swiper-slide v-for="(item,index) in dataSwiperS" :key="index">
|
||
<img :src="item.url" alt style="width:16.125rem;height:11.25rem;" />
|
||
<div class="cont">
|
||
<div class="top">
|
||
{{item.label}}
|
||
<span>/{{'0'}}{{index+1}}</span>
|
||
</div>
|
||
<div class="bottom">{{item.compone}}</div>
|
||
</div>
|
||
</swiper-slide>
|
||
<div class="swiper-pagination" slot="pagination"></div>
|
||
<div
|
||
class="swiper-button-prev"
|
||
slot="button-prev"
|
||
:style="{'background-image':'url('+ksLeft+')'}"
|
||
></div>
|
||
<div
|
||
class="swiper-button-next"
|
||
slot="button-next"
|
||
:style="{'background-image':'url('+ksRight+')'}"
|
||
></div>
|
||
</swiper>
|
||
</div>
|
||
<div class="left3">
|
||
<div class="header">数据资讯</div>
|
||
<img :src="titleimg" alt />
|
||
<div class="dataMessage" v-for="(item,index) in dataZxun" :key="index">
|
||
<div class="message_left">
|
||
<div class="top">{{item.title}}</div>
|
||
<div class="center">{{item.cont}}</div>
|
||
<div class="bottom">
|
||
<span>{{item.time}}</span>
|
||
<span @click="$router.push({path:'/listDetails',query:{id:item.id}})">查看详情</span>
|
||
</div>
|
||
</div>
|
||
<img :src="item.url" alt />
|
||
</div>
|
||
<div class="moreD">
|
||
<div @click="$router.push('/dataList')">查看更多-></div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="mainCont_right">
|
||
<div class="right1">
|
||
<div class="title">数据更新</div>
|
||
<div class="content">
|
||
<div v-for="(item,index) in dataUpdata" :key="index">
|
||
<div class="up">
|
||
{{computedStr(item.title)}}
|
||
<!-- <div style="border:1px solid red;width:12rem;height: 2.125rem;"></div> -->
|
||
<div class="next">({{item.updataTime}})</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="right2">
|
||
<div class="title">24小时热文</div>
|
||
<div class="content">
|
||
<div v-for="(item,index) in twentyFourtimeData" :key="index">
|
||
<img :src="item.url" alt />
|
||
<div>
|
||
<div class="top">{{item.title}}</div>
|
||
<div class="bottom">{{item.content}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</section>
|
||
<!-- 页脚信息 -->
|
||
<FooterInfors></FooterInfors>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
// 导航
|
||
import Nav from '@/components/nav/Nav.vue'
|
||
// 页脚信息
|
||
import FooterInfor from '@/components/footerInfor/FooterInfor.vue'
|
||
// 全局搜索
|
||
import search from '@/components/search/search.vue'
|
||
export default {
|
||
name: 'index',
|
||
components: {
|
||
Navs: Nav,
|
||
FooterInfors: FooterInfor,
|
||
search: search
|
||
},
|
||
data () {
|
||
return {
|
||
swiperOption: {
|
||
spaceBetween: 30,
|
||
centeredSlides: true,
|
||
autoplay: {
|
||
delay: 2500,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev'
|
||
}
|
||
},
|
||
bannerLuBo: [
|
||
{
|
||
img: require('../../../static/index/banner1.png'),
|
||
url: 'http://www.baidu.com'
|
||
},
|
||
{
|
||
img: require('../../../static/index/banner1.png'),
|
||
url: 'http://www.baidu.com'
|
||
}
|
||
],
|
||
lunboUp: require('../../../static/index/leftS.png'),
|
||
lunboNext: require('../../../static/index/rightS.png'),
|
||
titleimg: require('../../../static/index/title12.png'),
|
||
ksLeft: require('../../../static/index/ksLeft.png'),
|
||
ksRight: require('../../../static/index/ksRight.png'),
|
||
// 默认选中
|
||
activeName: 'first',
|
||
// 月度、季度、年度数据
|
||
dataSearchDatas: [
|
||
{
|
||
label: '月度 /Monthly',
|
||
name: 'first',
|
||
textArrLeft: [
|
||
'月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'月度工业增加值增工业增加值增速工业速。',
|
||
'月度工业增加值增速。',
|
||
'月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
],
|
||
textArrRight: [
|
||
'月度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'月度工业增加值增工业增加值增速工业速。',
|
||
'月度工业增加值增速。',
|
||
'月度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
]
|
||
},
|
||
{
|
||
label: '季度 /Quarter',
|
||
name: 'second',
|
||
textArrLeft: [
|
||
'季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'季度工业增加值增工业增加值增速工业速。',
|
||
'季度工业增加值增速。',
|
||
'季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
],
|
||
textArrRight: [
|
||
'季度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'季度工业增加值增工业增加值增速工业速。',
|
||
'季度工业增加值增速。',
|
||
'季度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
]
|
||
},
|
||
{
|
||
label: '年度 /Year',
|
||
name: 'third',
|
||
textArrLeft: [
|
||
'年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'年度工业增加值增工业增加值增速工业速。',
|
||
'年度工业增加值增速。',
|
||
'年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
],
|
||
textArrRight: [
|
||
'年度增加值增速工业，增加值增速增加值增速工业增加值增速增加值增速工业，增加值增速。',
|
||
'年度工业增加值增工业增加值增速工业速。',
|
||
'年度工业增加值增速。',
|
||
'年度工业增加值增速，工业工业增加值增工业增加值增工业增加值增工业，增加值增工业增加值增。'
|
||
]
|
||
}
|
||
],
|
||
swiperOptionS: {
|
||
spaceBetween: 30,
|
||
centeredSlides: true,
|
||
autoplay: {
|
||
delay: 2500,
|
||
disableOnInteraction: false
|
||
},
|
||
pagination: {
|
||
el: '.swiper-pagination',
|
||
clickable: true
|
||
},
|
||
navigation: {
|
||
nextEl: '.swiper-button-next',
|
||
prevEl: '.swiper-button-prev'
|
||
}
|
||
},
|
||
dataSwiperS: [
|
||
{
|
||
url: require('../../../static/index/luboer.png'),
|
||
label: '大中城市住宅销售价格',
|
||
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
|
||
},
|
||
{
|
||
url: require('../../../static/index/luboer.png'),
|
||
label: '大中城市住宅销售价格',
|
||
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
|
||
},
|
||
{
|
||
url: require('../../../static/index/luboer.png'),
|
||
label: '大中城市住宅销售价格',
|
||
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
|
||
},
|
||
{
|
||
url: require('../../../static/index/luboer.png'),
|
||
label: '大中城市住宅销售价格',
|
||
compone: '这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释这里时解释。'
|
||
}
|
||
],
|
||
// 资讯数据
|
||
dataZxun: [
|
||
{
|
||
title: '这里是资讯',
|
||
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
|
||
time: '57分钟前',
|
||
url: require('../../../static/index/zixuntu.png')
|
||
},
|
||
{
|
||
title: '这里是资讯',
|
||
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
|
||
time: '57分钟前',
|
||
url: require('../../../static/index/zixuntu.png')
|
||
},
|
||
{
|
||
title: '这里是资讯',
|
||
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
|
||
time: '57分钟前',
|
||
url: require('../../../static/index/zixuntu.png')
|
||
},
|
||
{
|
||
title: '这里是资讯',
|
||
cont: '这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里这里是资讯这里是资讯，这里是资讯这里是资讯这里是资这里...',
|
||
time: '57分钟前',
|
||
url: require('../../../static/index/zixuntu.png')
|
||
}
|
||
],
|
||
// 数据更新
|
||
dataUpdata: [
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
},
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
},
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
},
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
},
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
},
|
||
{
|
||
title: '数据库：农村居民国内游客对服务质量的评价统计（按旅游目的分组）（按旅游目的分组）',
|
||
updataTime: '2019-09-06 17:47:39'
|
||
}
|
||
],
|
||
// 24小时热闻数据
|
||
twentyFourtimeData: [
|
||
{
|
||
url: require('../../../static/index/timeLZ.png'),
|
||
title: '这是标题',
|
||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||
},
|
||
{
|
||
url: require('../../../static/index/timeLZ.png'),
|
||
title: '这是标题',
|
||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||
},
|
||
{
|
||
url: require('../../../static/index/timeLZ.png'),
|
||
title: '这是标题',
|
||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||
},
|
||
{
|
||
url: require('../../../static/index/timeLZ.png'),
|
||
title: '这是标题',
|
||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||
},
|
||
{
|
||
url: require('../../../static/index/timeLZ.png'),
|
||
title: '这是标题',
|
||
content: '数据热文数据热文数据热文数据热文数据热文数据热文'
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
loctionHref (url) {
|
||
console.log(url)
|
||
window.location.href = url
|
||
},
|
||
handleClick (tab, event) {
|
||
console.log(tab, event)
|
||
},
|
||
// 获取banner
|
||
getBanner () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/banner',
|
||
parmas: {
|
||
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, '获取banner')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
this.bannerLuBo = res.data.data.list
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 快速查询
|
||
getClassify (type) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/classify',
|
||
params: {
|
||
type: type,
|
||
limit: 8
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, '快速查询')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let brrtLeft = []
|
||
let brrtRight = []
|
||
res.data.data.list.forEach((item, index) => {
|
||
if (index < 4) {
|
||
brrtLeft.push(item)
|
||
} else {
|
||
brrtRight.push(item)
|
||
}
|
||
})
|
||
if (type === 'A') {
|
||
this.dataSearchDatas[0].textArrLeft = brrtLeft
|
||
this.dataSearchDatas[0].textArrRight = brrtRight
|
||
} else if (type === 'B') {
|
||
this.dataSearchDatas[1].textArrLeft = brrtLeft
|
||
this.dataSearchDatas[1].textArrRight = brrtRight
|
||
} else if (type === 'C') {
|
||
this.dataSearchDatas[2].textArrLeft = brrtLeft
|
||
this.dataSearchDatas[2].textArrRight = brrtRight
|
||
}
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 可视化图表
|
||
viewChart () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/view-chart',
|
||
params: {}
|
||
}).then(res => {
|
||
// console.log(res, '可视化图表')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let arrts = []
|
||
res.data.data.list.forEach((item, index) => {
|
||
let srtAs = {
|
||
url: item.img,
|
||
label: item.title,
|
||
compone: item.content
|
||
}
|
||
arrts.push(srtAs)
|
||
})
|
||
this.dataSwiperS = arrts
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 数据咨询、资讯列表
|
||
article (page) {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/article',
|
||
params: {
|
||
page: page,
|
||
limit: 4
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, '数据咨询、资讯列表')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let arrts = []
|
||
res.data.data.list.forEach((item, index) => {
|
||
let objuu = {
|
||
title: item.title,
|
||
cont: item.desc,
|
||
time: item.update_time,
|
||
url: item.thumb,
|
||
id: item.id
|
||
}
|
||
arrts.push(objuu)
|
||
})
|
||
this.dataZxun = arrts
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 数据更新
|
||
dataUpdating () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/data-updating',
|
||
params: {
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, '数据更新')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let arrts = []
|
||
res.data.data.list.forEach((item, index) => {
|
||
let objuu = {
|
||
title: item.name,
|
||
updataTime: item.time,
|
||
table_name: item.table_name,
|
||
type: item.type
|
||
}
|
||
arrts.push(objuu)
|
||
})
|
||
this.dataUpdata = arrts
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
},
|
||
// 24小时热闻
|
||
hotArticle () {
|
||
this.$axios({
|
||
method: 'GET',
|
||
url: 'index/index/hot-article',
|
||
params: {
|
||
}
|
||
}).then(res => {
|
||
// console.log(res, '24小时热闻')
|
||
// 请求接口完成 请求成功
|
||
if (res.data.code === 200) {
|
||
let arrts = []
|
||
res.data.data.list.forEach((item, index) => {
|
||
let objuu = {
|
||
url: item.thumb,
|
||
title: item.title,
|
||
content: item.desc,
|
||
id: item.id
|
||
}
|
||
arrts.push(objuu)
|
||
})
|
||
this.twentyFourtimeData = arrts
|
||
}
|
||
}).catch((fail) => {
|
||
console.log(fail)
|
||
})
|
||
}
|
||
|
||
},
|
||
computed: {
|
||
// 计算字符串
|
||
computedStr () {
|
||
return (str) => {
|
||
let Strs = ''
|
||
str.length <= 32 ? (Strs = str) : (Strs = str.slice(0, 31) + '...')
|
||
return Strs
|
||
}
|
||
}
|
||
},
|
||
mounted () {
|
||
// 获取banner
|
||
this.getBanner()
|
||
// 获取快速查询// A月度 B季度 C年度
|
||
this.getClassify('A')
|
||
this.getClassify('B')
|
||
this.getClassify('C')
|
||
// 可视化图表
|
||
this.viewChart()
|
||
// 数据咨询、资讯列表
|
||
this.article(1)
|
||
// 数据更新
|
||
this.dataUpdating()
|
||
// 24小时热闻
|
||
this.hotArticle()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
& > .swipersty {
|
||
width: 100%;
|
||
height: 33.25rem;
|
||
}
|
||
& > .content_cont {
|
||
width: 84.25rem;
|
||
// border: 1px solid red;
|
||
& > .mainCont {
|
||
margin-top: 3.125rem;
|
||
margin-bottom: 3.125rem;
|
||
width: 100%;
|
||
// border: 0.0625rem solid red;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: flex-start;
|
||
& > .mainCont_left {
|
||
// border: 0.0625rem solid red;
|
||
width: 55.625rem;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
background-color: #fff;
|
||
& > .left1 {
|
||
margin-top: 2.5rem;
|
||
width: 100%;
|
||
& > .header {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 1.625rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.375rem;
|
||
color: #000000;
|
||
}
|
||
& > img {
|
||
width: 100%;
|
||
height: 0.75rem;
|
||
}
|
||
/deep/ .el-tabs__item {
|
||
font-size: 1.4rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
}
|
||
.Listpane {
|
||
padding: 1.25rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
|
||
& > .ListpaneLeft {
|
||
width: 24.75rem;
|
||
height: 17rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > div {
|
||
width: 100%;
|
||
height: 4.375rem;
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #666666;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > div:nth-last-child(n + 2) {
|
||
border-bottom: 0.0625rem solid #f0f0f0;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
& > .center {
|
||
width: 0.125rem;
|
||
height: 17rem;
|
||
background-color: #dbdbdb;
|
||
}
|
||
& > .ListpaneRight {
|
||
width: 24.75rem;
|
||
height: 17rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > div {
|
||
width: 100%;
|
||
height: 4.375rem;
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #666666;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: flex-start;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > div:nth-last-child(n + 2) {
|
||
border-bottom: 0.0625rem solid #f0f0f0;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > .left2 {
|
||
width: 100%;
|
||
& > .header {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 1.625rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.375rem;
|
||
color: #000000;
|
||
}
|
||
& > img {
|
||
width: 100%;
|
||
height: 0.75rem;
|
||
}
|
||
& > .top {
|
||
margin: 0 auto;
|
||
width: 39.75rem;
|
||
text-align: center;
|
||
font-size: 1rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.125rem;
|
||
color: #565656;
|
||
}
|
||
/deep/.swiper-slide {
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-evenly;
|
||
align-items: flex-start;
|
||
& > .cont {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: flex-start;
|
||
& > .top {
|
||
font-size: 1.375rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
line-height: 1.125rem;
|
||
letter-spacing: 0.125rem;
|
||
color: #333333;
|
||
& > span {
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
& > .bottom {
|
||
width: 32.125rem;
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 2.125rem;
|
||
letter-spacing: 0rem;
|
||
color: #2d2d2d;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 4; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > .left3 {
|
||
margin-top: 1.5rem;
|
||
width: 100%;
|
||
& > .header {
|
||
width: 100%;
|
||
text-align: center;
|
||
font-size: 1.625rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.375rem;
|
||
color: #000000;
|
||
}
|
||
& > img {
|
||
width: 100%;
|
||
height: 0.75rem;
|
||
}
|
||
& > .dataMessage {
|
||
width: 100%;
|
||
height: 10.625rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
& > .message_left {
|
||
width: 39.125rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
& > .top {
|
||
width: 39.125rem;
|
||
font-size: 1.375rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 1.375rem;
|
||
letter-spacing: 0.125rem;
|
||
color: #232323;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 1; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > .center {
|
||
width: 39.125rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 2rem;
|
||
letter-spacing: 0rem;
|
||
color: #424242;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
& > .bottom {
|
||
width: 37.625rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
& > span:nth-child(1) {
|
||
font-size: 1rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 1.875rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
}
|
||
& > span:nth-child(2) {
|
||
padding: 0.125rem 0.75rem;
|
||
font-size: 1rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 1.875rem;
|
||
letter-spacing: 0rem;
|
||
color: #999999;
|
||
border: 0.0625rem solid #999;
|
||
border-radius: 0.9375rem;
|
||
}
|
||
& > span:nth-child(2):hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
border: 0.0625rem solid #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
& > img {
|
||
width: 13.125rem;
|
||
height: 7.5rem;
|
||
border-radius: 0.725rem;
|
||
}
|
||
}
|
||
& > .dataMessage:nth-last-child(n + 1) {
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
}
|
||
& > .moreD {
|
||
width: 100%;
|
||
height: 7.5rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
& > div {
|
||
margin-right: 1.5rem;
|
||
font-size: 1.25rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.125rem;
|
||
color: #9ea5a7;
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
& > .mainCont_right {
|
||
width: 27.375rem;
|
||
& > .right1 {
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
& > .title {
|
||
width: 24.875rem;
|
||
height: 3.75rem;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.3125rem;
|
||
color: #000000;
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
& > .content {
|
||
width: 24.875rem;
|
||
& > div {
|
||
width: 100%;
|
||
height: 5.25rem;
|
||
// border:1px solid red;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: space-around;
|
||
& > .up {
|
||
position: relative;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
font-size: 1.125rem;
|
||
line-height: 2.625rem;
|
||
color: #333333;
|
||
padding-bottom: 1.75rem;
|
||
// border: 1px solid red;
|
||
& > .next {
|
||
width: 12.625rem;
|
||
position: absolute;
|
||
right: 0;
|
||
bottom: 0;
|
||
font-size: 1.125rem;
|
||
}
|
||
}
|
||
& > .up:hover {
|
||
cursor: pointer;
|
||
color: #52b6e3;
|
||
}
|
||
}
|
||
& > div:nth-last-child(n + 2) {
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
}
|
||
}
|
||
}
|
||
& > .right2 {
|
||
margin-top: 1.25rem;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
background-color: #ffffff;
|
||
box-shadow: 0rem 0.1875rem 1rem 0rem rgba(172, 172, 172, 0.38);
|
||
& > .title {
|
||
width: 24.875rem;
|
||
height: 3.75rem;
|
||
font-size: 1.5rem;
|
||
font-weight: bold;
|
||
font-stretch: normal;
|
||
letter-spacing: 0.3125rem;
|
||
color: #000000;
|
||
border-bottom: 0.0625rem solid #dbdbdb;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: flex-start;
|
||
align-items: center;
|
||
}
|
||
& > .content {
|
||
width: 24.875rem;
|
||
& > div {
|
||
width: 100%;
|
||
height: 7.625rem;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
& > img {
|
||
width: 7.25rem;
|
||
height: 5.125rem;
|
||
}
|
||
& > div {
|
||
width: 16rem;
|
||
height: 5.125rem;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-around;
|
||
align-items: flex-start;
|
||
& > .top {
|
||
font-size: 1.125rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
// line-height: 23px;
|
||
letter-spacing: 0rem;
|
||
color: #333333;
|
||
}
|
||
& > .bottom {
|
||
width: 16rem;
|
||
font-size: 1rem;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 1.5rem;
|
||
letter-spacing: 0rem;
|
||
color: #666666;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
-webkit-line-clamp: 2; /* 省略号在第几行 */
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
}
|
||
}
|
||
& > div:hover {
|
||
cursor: pointer;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|