You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
916 lines
25 KiB
916 lines
25 KiB
<!--
|
|
* @Version: 1.0
|
|
* @Author: kery.chen
|
|
* @Description: 总体概览右侧
|
|
* @Date: 2021-11-30 11:08:50
|
|
* @LastEditTime: 2023-08-22 08:57:33
|
|
* @FilePath : \\tcingiocpro\\src\\views\\privateOrder\\ecosphere\\components\\componentRight.vue
|
|
-->
|
|
<template>
|
|
<div class="container">
|
|
<div class="module-container">
|
|
<div class="section-reportingProcess">
|
|
<div class="processflow">
|
|
<div class="processTitle">举报流程</div>
|
|
<div class="processIcon">
|
|
<div style="top: -33px; left: 303px">
|
|
<img src="@/assets/ecosphere/网络举报事件.png" alt="" />
|
|
<span style="margin-left: -40px; color: #fbe84f">
|
|
网络举报事件
|
|
</span>
|
|
</div>
|
|
<div style="top: 73px; left: 499px">
|
|
<img src="@/assets/ecosphere/举报中心.png" alt="" />
|
|
<span style="margin-left: -12px">举报中心</span>
|
|
</div>
|
|
<div style="top: 266px; left: 499px">
|
|
<img src="@/assets/ecosphere/研判分析.png" alt="" />
|
|
<span style="margin-left: -15px">研判分析</span>
|
|
</div>
|
|
<div style="top: 365px; left: 303px">
|
|
<img src="@/assets/ecosphere/事件办理处置.png" alt="" />
|
|
<span style="margin-left: -40px">事件办理处置</span>
|
|
</div>
|
|
<div style="top: 266px; left: 98px">
|
|
<img src="@/assets/ecosphere/汇总结果.png" alt="" />
|
|
<span style="margin-left: -15px">汇总结果</span>
|
|
</div>
|
|
<div style="top: 73px; left: 98px">
|
|
<img src="@/assets/ecosphere/反馈举报人.png" alt="" />
|
|
<span style="margin-left: -25px">反馈举报人</span>
|
|
</div>
|
|
</div>
|
|
<div id="processRotate"></div>
|
|
</div>
|
|
</div>
|
|
<div class="section">
|
|
<module-title> 举报事件年度分类统计 </module-title>
|
|
<div id="pie" />
|
|
</div>
|
|
<div class="section" style="padding-top: 35px">
|
|
<module-title> 清朗专项行动数据统计</module-title>
|
|
<div class="qlzfsjtj">
|
|
<div class="qlzf-head">
|
|
<div>处理有害信息数量(条)</div>
|
|
<div>关闭直播平台违规账号(个)</div>
|
|
</div>
|
|
<div class="qlzf-box">
|
|
<div class="qlzf-left">
|
|
<div
|
|
v-for="(item, index) in qlzfDataStatistics[0].data"
|
|
:key="index"
|
|
class="left-item"
|
|
>
|
|
<span>{{ item.num }}</span>
|
|
<div class="processBox">
|
|
<!-- 分母是为了数据展示好看 要求这样 -->
|
|
<div
|
|
class="process"
|
|
:style="{ width: (item.num / 25000) * 251 + 'px' }"
|
|
></div>
|
|
<div class="dark"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="qlzf-right">
|
|
<div
|
|
v-for="(item, index) in qlzfDataStatistics[1].data"
|
|
:key="index"
|
|
class="right-item"
|
|
>
|
|
<span class="month">{{ item.name }}</span>
|
|
<div class="processBox">
|
|
<!-- 分母是为了数据展示好看 要求这样 -->
|
|
<div
|
|
class="process"
|
|
:style="{ width: (item.num / 230) * 251 + 'px' }"
|
|
></div>
|
|
<div class="dark"></div>
|
|
</div>
|
|
<span class="num">{{ item.num }}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="section" style="padding-top: 35px">
|
|
<module-title> 清朗专项行动动态 </module-title>
|
|
<div @click.stop="itemClick($event)">
|
|
<vueSeamlessScroll
|
|
style="overflow: hidden"
|
|
:data="qlzxdtList"
|
|
:class-option="classOption"
|
|
>
|
|
<div class="zxxd">
|
|
<div
|
|
v-for="(item, index) in qlzxdtList"
|
|
:key="index"
|
|
style="width: 458px"
|
|
>
|
|
<div class="img-item" :data-curData="index">
|
|
<div
|
|
:style="{
|
|
backgroundImage: 'url(' + item.imgList[0].url + ')',
|
|
}"
|
|
:data-curData="index"
|
|
style="
|
|
width: 383px;
|
|
height: 291px;
|
|
background-size: 100% 100%;
|
|
position: relative;
|
|
"
|
|
>
|
|
<div class="footer" :data-curData="index">
|
|
{{ item.title }}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</vueSeamlessScroll>
|
|
</div>
|
|
<div class="leftmh"></div>
|
|
<div class="rightmh"></div>
|
|
</div>
|
|
<!-- 地图右边框 -->
|
|
<div class="bcRight"></div>
|
|
<!-- 弹窗 -->
|
|
<div v-if="qlzfDialogFlag" class="qlzf-dialog">
|
|
<div class="close" @click="qlzfDialogFlag = false"></div>
|
|
<div class="title">{{ eldialogData.title }}</div>
|
|
<div class="qlzf-dialog_left">
|
|
<div
|
|
v-for="(item, index) in eldialogData.imgList"
|
|
:key="index"
|
|
style="margin-bottom: 18px"
|
|
>
|
|
<img
|
|
:src="item.url"
|
|
style="width: 355px; height: 269px; background-size: 100% 100%"
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="right">
|
|
<div class="qlzf-dialog_right" v-html="eldialogData.content"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
window.JSZip = require('jszip')
|
|
import { qlzxdtData } from './json'
|
|
import { getreportNum } from '@/api/common'
|
|
import { zhuanxiang, managescreen } from '@/api/zongzhi/st.js'
|
|
import { echartsJump } from '../../../../../public/static/echartsJump'
|
|
import { download } from "@/utils/safesoft"
|
|
import vueSeamlessScroll from 'vue-seamless-scroll'
|
|
import image from '../../../../assets/ecosphere/饼图标注.png'
|
|
import ModuleTitle from '../../common/ModuleTitle.vue'
|
|
export default {
|
|
components: {
|
|
vueSeamlessScroll,
|
|
ModuleTitle
|
|
},
|
|
data() {
|
|
return {
|
|
imgList: [
|
|
{ url: require('@/assets/ecosphere/清朗专项行动图/1-1.png') },
|
|
{ url: require('@/assets/ecosphere/清朗专项行动图/1-2.png') },
|
|
{ url: require('@/assets/ecosphere/清朗专项行动图/1-3.png') },
|
|
{ url: require('@/assets/ecosphere/清朗专项行动图/1-4.png') }
|
|
],
|
|
qlzxdtList: null,
|
|
number: 0,
|
|
reportingTimer: null,
|
|
pieData: [
|
|
{ value: 25, name: '上级下发' },
|
|
{ value: 4, name: '部门转办' },
|
|
{ value: 8, name: '小程序' },
|
|
{ value: 4, name: '无效' }
|
|
],
|
|
qlzfDataStatistics: [
|
|
{
|
|
title: '处理有害信息数量(条)',
|
|
data: [
|
|
{
|
|
name: '2月',
|
|
num: 19552
|
|
},
|
|
{
|
|
name: '1月',
|
|
num: 9938
|
|
},
|
|
{
|
|
name: '12月',
|
|
num: 16495
|
|
},
|
|
{
|
|
name: '11月',
|
|
num: 12379
|
|
},
|
|
{
|
|
name: '10月',
|
|
num: 12753
|
|
},
|
|
{
|
|
name: '9月',
|
|
num: 17786
|
|
},
|
|
{
|
|
name: '8月',
|
|
num: 16668
|
|
},
|
|
{
|
|
name: '7月',
|
|
num: 16427
|
|
},
|
|
{
|
|
name: '6月',
|
|
num: 15503
|
|
},
|
|
{
|
|
name: '5月',
|
|
num: 21079
|
|
},
|
|
{
|
|
name: '4月',
|
|
num: 13871
|
|
},
|
|
{
|
|
name: '3月',
|
|
num: 12166
|
|
}
|
|
|
|
]
|
|
},
|
|
{
|
|
title: '关闭直播平台违规账号(个)',
|
|
data: [
|
|
{
|
|
name: '2月',
|
|
num: 64
|
|
},
|
|
{
|
|
name: '1月',
|
|
num: 36
|
|
},
|
|
{
|
|
name: '12月',
|
|
num: 48
|
|
},
|
|
{
|
|
name: '11月',
|
|
num: 68
|
|
},
|
|
{
|
|
name: '10月',
|
|
num: 86
|
|
},
|
|
{
|
|
name: '9月',
|
|
num: 20
|
|
},
|
|
{
|
|
name: '8月',
|
|
num: 199
|
|
},
|
|
{
|
|
name: '7月',
|
|
num: 183
|
|
},
|
|
{
|
|
name: '6月',
|
|
num: 220
|
|
},
|
|
{
|
|
name: '5月',
|
|
num: 111
|
|
},
|
|
{
|
|
name: '4月',
|
|
num: 116
|
|
},
|
|
{
|
|
name: '3月',
|
|
num: 39
|
|
}
|
|
|
|
]
|
|
}
|
|
],
|
|
qlzfDialogFlag: false,
|
|
eldialogData: null,
|
|
yhxiTotal: 0,
|
|
wgptTotal: 0
|
|
}
|
|
},
|
|
computed: {
|
|
classOption() {
|
|
return {
|
|
step: 1, // 数值越大速度滚动越快
|
|
limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
|
|
hoverStop: true, // 是否开启鼠标悬停stop
|
|
direction: 2, // 0向下 1向上 2向左 3向右
|
|
openWatch: true, // 开启数据实时监控刷新dom
|
|
singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
|
|
singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
|
|
waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
|
|
}
|
|
}
|
|
},
|
|
created() {},
|
|
destroyed() {
|
|
clearInterval(this.reportingTimer)
|
|
},
|
|
mounted() {
|
|
this.qlzxdtList = qlzxdtData
|
|
// this.zhuanxiangList()
|
|
// 开启定时器旋转
|
|
this.reportingProcessTimer()
|
|
|
|
this.inItPie()
|
|
// getreportNum().then(res => {
|
|
// this.pieData[0].value = res.data.reportTotalCount - 12
|
|
// this.inItPie()
|
|
// })
|
|
},
|
|
methods: {
|
|
itemClick(e) {
|
|
this.eldialogData = this.qlzxdtList[e.target.dataset.curdata]
|
|
this.qlzfDialogFlag = true
|
|
},
|
|
changeImg(item, index) {
|
|
item.index = index
|
|
},
|
|
// 清朗专项行动动态
|
|
async zhuanxiangList(){
|
|
let res = await zhuanxiang();
|
|
let imgArr
|
|
let qlzxdtList = JSON.parse(JSON.stringify(res.rows))
|
|
this.qlzxdtList = qlzxdtList
|
|
for(let i = 0; i < qlzxdtList.length; i++){
|
|
imgArr = qlzxdtList[i].zhuanxiangImg
|
|
imgArr = imgArr.split(',')
|
|
this.qlzxdtList[i].zhuanxiangImg = imgArr
|
|
for(let j = 0; j < imgArr.length; j++){
|
|
imgArr[j] = process.env.VUE_APP_BASE_API3 + imgArr[j]
|
|
}
|
|
}
|
|
// zhuanxiang().then(res => {
|
|
|
|
// console.log(this.qlzxdtList)
|
|
// })
|
|
},
|
|
// 饼图
|
|
inItPie() {
|
|
const chartDom = document.getElementById('pie')
|
|
const myChart = this.$echarts.init(chartDom)
|
|
const optionSecond = {
|
|
tooltip: {
|
|
trigger: 'item',
|
|
formatter: '{a} <br/>{b} : {c} ({d}%)'
|
|
},
|
|
emphasis: {
|
|
show: true,
|
|
formatter: '{fz41|{a}\n{az24|{b}个}',
|
|
textStyle: {
|
|
rich: {
|
|
fz41: {
|
|
fontSize: 41,
|
|
padding: [0, 5, 0, 0]
|
|
},
|
|
fz24: {
|
|
fontSize: 24
|
|
}
|
|
}
|
|
}
|
|
},
|
|
color: ['#6bd3ff', '#2590fd', '#f6ff00', '#ffd616'],
|
|
legend: {
|
|
orient: 'vertical',
|
|
icon: 'circle',
|
|
left: '55%',
|
|
top: '10%',
|
|
itemGap: 50,
|
|
padding: 5,
|
|
formatter: (name) => {
|
|
const data = this.pieData
|
|
let target
|
|
data.forEach((v) => {
|
|
if (v.name === name) {
|
|
target = v.value + '件'
|
|
}
|
|
})
|
|
const arr = [
|
|
`{a|${name}}{b|${String(target).replace(
|
|
/(\d)(?=(\d{3})+$)/g,
|
|
'$1,'
|
|
)}}`
|
|
]
|
|
return arr.join('\n')
|
|
},
|
|
textStyle: {
|
|
rich: {
|
|
a: {
|
|
width: 180,
|
|
fontSize: 28,
|
|
// fontWeight: 'bold',
|
|
color: '#ffffff'
|
|
},
|
|
b: {
|
|
fontSize: 28,
|
|
color: 'rgba(251,232,79)',
|
|
backgroundColor: {
|
|
image: image
|
|
},
|
|
align: 'center'
|
|
}
|
|
},
|
|
fontSize: 18,
|
|
color: 'rgba(255, 255, 255, .5)'
|
|
}
|
|
},
|
|
series: [
|
|
{
|
|
name: '举报事件年度分类统计',
|
|
type: 'pie',
|
|
radius: ['55%', '78%'],
|
|
avoidLabelOverlap: false,
|
|
center: ['24%', '48%'],
|
|
label: {
|
|
show: false,
|
|
position: 'center',
|
|
formatter: (params) => {
|
|
return `{a| ${params.name}} \n {b|${params.value}}`
|
|
},
|
|
rich: {
|
|
a: {
|
|
fontFamily: 'SourceHanSansCN-Regular',
|
|
color: '#ffffff',
|
|
fontSize: 28
|
|
},
|
|
b: {
|
|
fontFamily: 'DIN-Medium',
|
|
color: '#6ddefb',
|
|
fontSize: 32,
|
|
lineHeight: 50
|
|
}
|
|
}
|
|
},
|
|
emphasis: {
|
|
label: {
|
|
show: true,
|
|
fontSize: '25',
|
|
fontWeight: 'bold'
|
|
}
|
|
},
|
|
labelLine: {
|
|
show: false
|
|
},
|
|
data: this.pieData
|
|
}
|
|
]
|
|
}
|
|
myChart.setOption(optionSecond, true)
|
|
echartsJump(myChart, optionSecond)
|
|
},
|
|
// 定时器旋转+字体颜色变
|
|
reportingProcessTimer() {
|
|
let index = 0
|
|
this.reportingTimer = setInterval(() => {
|
|
this.number += 60
|
|
const content = document.getElementById('processRotate')
|
|
content.style.transform = 'rotateZ(' + this.number + 'deg)'
|
|
if (index === 5) {
|
|
document.getElementsByClassName(
|
|
'processIcon'
|
|
)[0].children[0].children[1].style.color = '#fbe84f'
|
|
document.getElementsByClassName(
|
|
'processIcon'
|
|
)[0].children[5].children[1].style.color = '#ffffff'
|
|
} else {
|
|
document.getElementsByClassName('processIcon')[0].children[
|
|
index + 1
|
|
].children[1].style.color = '#fbe84f'
|
|
document.getElementsByClassName('processIcon')[0].children[
|
|
index
|
|
].children[1].style.color = '#ffffff'
|
|
}
|
|
if (index > 4) {
|
|
index = 0
|
|
} else {
|
|
index++
|
|
}
|
|
}, 4000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.bcRight {
|
|
width: 210px;
|
|
height: 924px;
|
|
position: absolute;
|
|
top: 156px;
|
|
left: -220px;
|
|
background: url("~@/assets/ecosphere/右.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
}
|
|
.container {
|
|
width: 100%;
|
|
height: 100%;
|
|
.module-container {
|
|
width: 1540px;
|
|
height: 955px;
|
|
float: right;
|
|
margin: 130px 50px 0 0;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
justify-content: space-between;
|
|
align-content: space-between;
|
|
.section {
|
|
width: 720px;
|
|
height: 487px;
|
|
}
|
|
.section-reportingProcess {
|
|
width: 720px;
|
|
height: 500px;
|
|
.processflow {
|
|
position: relative;
|
|
top: 26px;
|
|
left: 70px;
|
|
width: auto;
|
|
height: 500px;
|
|
background: url("~@/assets/ecosphere/环形图-bg.png") no-repeat 26px -8px;
|
|
.processTitle {
|
|
width: 90px;
|
|
position: absolute;
|
|
left: 305px;
|
|
top: 180px;
|
|
font-family: PangMenZhengDao, sans-serif;
|
|
font-size: 44px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
line-height: 41px;
|
|
letter-spacing: 0;
|
|
color: rgb(111, 226, 251);
|
|
background-image: -webkit-linear-gradient(
|
|
#feffff 0%,
|
|
rgba(111, 226, 251, 1) 100%
|
|
);
|
|
background-clip: text;
|
|
-webkit-background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
.processIcon {
|
|
div {
|
|
position: absolute;
|
|
img {
|
|
display: block;
|
|
}
|
|
span {
|
|
font-family: SourceHanSansCN-Regular;
|
|
font-size: 28px;
|
|
font-weight: normal;
|
|
font-stretch: normal;
|
|
letter-spacing: 0px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
#processRotate {
|
|
top: 86px;
|
|
left: 213px;
|
|
position: absolute;
|
|
height: 259px;
|
|
width: 259px;
|
|
background: url("~@/assets/ecosphere/高亮箭头.png") no-repeat;
|
|
transform-origin: center;
|
|
transition: transform 0.5s ease-in 0s;
|
|
}
|
|
@keyframes rotate {
|
|
0% {
|
|
transform: rotateZ(0deg);
|
|
transform-origin: center;
|
|
}
|
|
8% {
|
|
transform: rotateZ(60deg);
|
|
transform-origin: center;
|
|
}
|
|
16% {
|
|
transform: rotateZ(60deg);
|
|
transform-origin: center;
|
|
}
|
|
24% {
|
|
transform: rotateZ(120deg);
|
|
transform-origin: center;
|
|
}
|
|
32% {
|
|
transform: rotateZ(120deg);
|
|
transform-origin: center;
|
|
}
|
|
40% {
|
|
transform: rotateZ(180deg);
|
|
transform-origin: center;
|
|
}
|
|
48% {
|
|
transform: rotateZ(180deg);
|
|
transform-origin: center;
|
|
}
|
|
56% {
|
|
transform: rotateZ(240deg);
|
|
transform-origin: center;
|
|
}
|
|
64% {
|
|
transform: rotateZ(240deg);
|
|
transform-origin: center;
|
|
}
|
|
72% {
|
|
transform: rotateZ(300deg);
|
|
transform-origin: center;
|
|
}
|
|
80% {
|
|
transform: rotateZ(300deg);
|
|
transform-origin: center;
|
|
}
|
|
89% {
|
|
transform: rotateZ(360deg);
|
|
transform-origin: center;
|
|
}
|
|
100% {
|
|
transform: rotateZ(360deg);
|
|
transform-origin: center;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
#pie {
|
|
position: relative;
|
|
top: 43px;
|
|
left: 5px;
|
|
width: 100%;
|
|
height: 344px;
|
|
background: url("~@/assets/ecosphere/bg-饼图.png") no-repeat;
|
|
}
|
|
.qlzfsjtj {
|
|
margin-left: 54px;
|
|
.qlzf-head {
|
|
margin-top: 28px;
|
|
margin-left: 73px;
|
|
width: 555px;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
> div {
|
|
text-align: center;
|
|
width: 251px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
color: #68cff9;
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
font-size: 20px;
|
|
background: url("~@/assets/ecosphere/二级标题-bg.png") no-repeat;
|
|
}
|
|
}
|
|
.qlzf-box {
|
|
width: 740px;
|
|
height: 320px;
|
|
margin-left: -31px;
|
|
overflow: auto;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.qlzf-left {
|
|
height: 291px;
|
|
margin-top: 20px;
|
|
margin-left: 15px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.left-item {
|
|
position: relative;
|
|
left: 70px;
|
|
width: 251px;
|
|
margin-bottom: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
> span {
|
|
position: absolute;
|
|
left: -86px;
|
|
font-size: 22px;
|
|
color: #65cd93;
|
|
}
|
|
.processBox {
|
|
position: relative;
|
|
height: 8px;
|
|
width: 251px;
|
|
overflow: hidden;
|
|
}
|
|
.dark {
|
|
position: absolute;
|
|
width: 251px;
|
|
height: 8px;
|
|
background-color: #557591;
|
|
opacity: 0.5;
|
|
}
|
|
.process {
|
|
position: absolute;
|
|
right: 0;
|
|
z-index: 999;
|
|
height: 8px;
|
|
background-image: linear-gradient(90deg, #8ceace 0%, #66cd93 100%);
|
|
animation: move 2s ease-in;
|
|
}
|
|
}
|
|
}
|
|
.qlzf-right {
|
|
height: 291px;
|
|
width: 400px;
|
|
margin-top: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
.right-item {
|
|
position: relative;
|
|
left: 75px;
|
|
width: 251px;
|
|
margin-bottom: 44px;
|
|
display: flex;
|
|
align-items: center;
|
|
.month {
|
|
position: absolute;
|
|
left: -55px;
|
|
font-family: SourceHanSansCN-Medium, sans-serif;
|
|
font-size: 24px;
|
|
color: #ffffff;
|
|
}
|
|
.num {
|
|
position: absolute;
|
|
right: -55px;
|
|
font-family: DIN-Medium, sans-serif;
|
|
color: #50a2f8;
|
|
font-size: 22px;
|
|
}
|
|
.processBox {
|
|
position: relative;
|
|
height: 8px;
|
|
width: 251px;
|
|
overflow: hidden;
|
|
}
|
|
.dark {
|
|
position: absolute;
|
|
width: 251px;
|
|
height: 8px;
|
|
background-color: #557591;
|
|
opacity: 0.5;
|
|
}
|
|
.process {
|
|
position: absolute;
|
|
// right: 0;
|
|
z-index: 999;
|
|
height: 8px;
|
|
background-image: linear-gradient(90deg, #50a1f8 0%, #94d8fb 100%);
|
|
animation: move2 2s ease-in;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.zxxd {
|
|
margin-left: 20px;
|
|
margin-top: 35px;
|
|
width: 3350px;
|
|
display: flex;
|
|
justify-content: space-around;
|
|
.img-item {
|
|
margin-right: 20px;
|
|
width: 457px;
|
|
height: 365px;
|
|
background: url("~@/assets/ecosphere/照片框.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
cursor: pointer;
|
|
.footer {
|
|
position: absolute;
|
|
width: 383px;
|
|
height: 38px;
|
|
line-height: 38px;
|
|
background-color: #000000;
|
|
opacity: 0.8;
|
|
bottom: 0;
|
|
font-size: 20px;
|
|
color: #ffffff;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
.dotList {
|
|
top: 291px;
|
|
position: absolute;
|
|
z-index: 999;
|
|
display: flex;
|
|
.dot {
|
|
margin-right: 20px;
|
|
width: 13px;
|
|
height: 13px;
|
|
border-radius:50%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.qlzf-dialog {
|
|
width: 1200px;
|
|
height: 677px;
|
|
position: relative;
|
|
left: -107%;
|
|
top: -83%;
|
|
background: url("~@/assets/ecosphere/弹窗 拷贝.png") no-repeat;
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
.close {
|
|
position: absolute;
|
|
right: 15px;
|
|
top: 15px;
|
|
cursor: pointer;
|
|
height: 30px;
|
|
width: 30px;
|
|
z-index: 22;
|
|
}
|
|
.title {
|
|
width: 1200px;
|
|
height: 60px;
|
|
line-height: 60px;
|
|
text-indent: 43px;
|
|
letter-spacing: 1px;
|
|
color: #fbe84f;
|
|
font-size: 24px;
|
|
position: absolute;
|
|
}
|
|
&_left {
|
|
overflow: auto;
|
|
height: 550px;
|
|
margin-top: 90px;
|
|
margin-left: 30px;
|
|
}
|
|
.right {
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
}
|
|
|
|
.qlzf-dialog_right {
|
|
margin-top: 102px;
|
|
margin-left: 61px;
|
|
overflow: auto;
|
|
text-align: justify;
|
|
width: 736px;
|
|
padding-right: 23px;
|
|
height: 528px;
|
|
font-family: SourceHanSansCN-Regular, sans-serif;
|
|
font-size: 24px;
|
|
line-height: 38px;
|
|
letter-spacing: 1px;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
.leftmh {
|
|
position: relative;
|
|
top: -362px;
|
|
left: -28px;
|
|
height: 365px;
|
|
width: 20px;
|
|
box-shadow: 21px 0 20px 15px #051831;
|
|
}
|
|
.rightmh {
|
|
position: relative;
|
|
top: -731px;
|
|
left: 723px;
|
|
height: 365px;
|
|
width: 20px;
|
|
box-shadow: -21px 0 20px 15px #051831;
|
|
}
|
|
}
|
|
}
|
|
@keyframes move {
|
|
from {
|
|
transform: translateX(100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
@keyframes move2 {
|
|
from {
|
|
transform: translateX(-100%);
|
|
}
|
|
|
|
to {
|
|
transform: translateX(0px);
|
|
}
|
|
}
|
|
</style>
|