|
|
|
@ -1,7 +1,7 @@
|
|
|
|
|
<!--
|
|
|
|
|
* @Author: your name
|
|
|
|
|
* @Date: 2021-10-19 19:45:01
|
|
|
|
|
* @LastEditTime: 2021-11-17 10:17:53
|
|
|
|
|
* @LastEditTime: 2021-11-17 11:02:04
|
|
|
|
|
* @LastEditors: Please set LastEditors
|
|
|
|
|
* @Description: In User Settings Edit
|
|
|
|
|
* @FilePath: /data-show/src/views/EventDEC/esprocess/index.vue
|
|
|
|
@ -11,89 +11,28 @@
|
|
|
|
|
<v-label-div title="事件传播历程">
|
|
|
|
|
</v-label-div>
|
|
|
|
|
<div class="coe-ts">
|
|
|
|
|
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
|
|
|
|
|
<div class="coe-ts-d1" @click="goL"><img src="../../../assets/images/EventInsight/img_zuo.png" /></div>
|
|
|
|
|
<div class="coe-ts-d2">
|
|
|
|
|
<vue-scroll>
|
|
|
|
|
<vue-scroll ref="vs">
|
|
|
|
|
<div class="dd1-label">
|
|
|
|
|
<div class="d1x">新车上市</div>
|
|
|
|
|
<div class="d2">状态:事件发生</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:26</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" style="margin-top: 158px">
|
|
|
|
|
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">今日头条</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:26</div>
|
|
|
|
|
<template v-for="(item,index) in list">
|
|
|
|
|
<div class="dd1-item" :key="index">
|
|
|
|
|
<img class="m1" :src="index % 2 === 0 ? m2 : m1" :style="index % 2 === 0 ? 'margin-top: 8.2rem' : ''" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" :style="index % 2 === 0 ? 'margin-top: 8.6rem' : ''">
|
|
|
|
|
<div class="d1" :style="index % 2 === 0 ? 'color: #3373CC' : 'color:#CC7733'" @click="openUrl(item._source.url)">{{item._source.title|doStr(30)}}</div>
|
|
|
|
|
<div class="d2">{{item._source.source}}</div>
|
|
|
|
|
<div class="d3">{{item._source.sourcetime}}</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m1" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1">
|
|
|
|
|
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">易车</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:28</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m2" style="margin-top: 140px" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" style="margin-top: 158px">
|
|
|
|
|
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">今日头条</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:26</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1">
|
|
|
|
|
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">海报新闻</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:28</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m1" style="transform:rotate(180deg); margin-top: 140px" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" style="margin-top: 158px">
|
|
|
|
|
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">今日头条</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:26</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1">
|
|
|
|
|
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">海报新闻</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:28</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m1" style="transform:rotate(180deg);margin-top: 140px" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1" style="margin-top: 158px">
|
|
|
|
|
<div class="d1" style="color: #CC7733">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">今日头条</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:26</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="dd1-item">
|
|
|
|
|
<img class="m1" :src="m2" style="transform:rotate(180deg);" />
|
|
|
|
|
<div class="dd1-fen"></div>
|
|
|
|
|
<div class="dt-d1">
|
|
|
|
|
<div class="d1" style="color: #3373CC">东莞奥迪Q5L可以试乘降价达…</div>
|
|
|
|
|
<div class="d2">海报新闻</div>
|
|
|
|
|
<div class="d3">2021-06-01 11:28</div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
</vue-scroll>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
|
|
|
|
|
<div class="coe-ts-d1" @click="goR"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
@ -105,8 +44,8 @@ export default {
|
|
|
|
|
props: {
|
|
|
|
|
id: {
|
|
|
|
|
type: String,
|
|
|
|
|
default: ""
|
|
|
|
|
}
|
|
|
|
|
default: "",
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
@ -116,6 +55,7 @@ export default {
|
|
|
|
|
sTimeType: "",
|
|
|
|
|
},
|
|
|
|
|
list: [],
|
|
|
|
|
x: 0,
|
|
|
|
|
m1: require("../../../assets/images/EventInsight/img_ct.png"),
|
|
|
|
|
m2: require("../../../assets/images/EventInsight/img_lt.png"),
|
|
|
|
|
};
|
|
|
|
@ -129,7 +69,7 @@ export default {
|
|
|
|
|
getDdta() {
|
|
|
|
|
let obj = Object.assign({}, this.form);
|
|
|
|
|
getEventSpreadProcess0528(obj).then((res) => {
|
|
|
|
|
let data = res.data;
|
|
|
|
|
let data = res.data || [];
|
|
|
|
|
this.list = data;
|
|
|
|
|
this.load = false;
|
|
|
|
|
});
|
|
|
|
@ -137,6 +77,35 @@ export default {
|
|
|
|
|
goback() {
|
|
|
|
|
this.$router.go(-1);
|
|
|
|
|
},
|
|
|
|
|
openUrl(url) {
|
|
|
|
|
window.open(url);
|
|
|
|
|
},
|
|
|
|
|
goL() {
|
|
|
|
|
const {h} = this.$refs.vs.getScrollProcess();
|
|
|
|
|
if(h === 0) return;
|
|
|
|
|
const { scrollLeft } = this.$refs.vs.getPosition();
|
|
|
|
|
this.x = scrollLeft;
|
|
|
|
|
this.x -= 150;
|
|
|
|
|
this.$refs.vs.scrollTo(
|
|
|
|
|
{
|
|
|
|
|
x: this.x,
|
|
|
|
|
},
|
|
|
|
|
300
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
goR() {
|
|
|
|
|
const {h} = this.$refs.vs.getScrollProcess();
|
|
|
|
|
if(h === 1) return;
|
|
|
|
|
const { scrollLeft } = this.$refs.vs.getPosition();
|
|
|
|
|
this.x = scrollLeft;
|
|
|
|
|
this.x += 150;
|
|
|
|
|
this.$refs.vs.scrollTo(
|
|
|
|
|
{
|
|
|
|
|
x: this.x,
|
|
|
|
|
},
|
|
|
|
|
300
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
@ -216,7 +185,7 @@ export default {
|
|
|
|
|
}
|
|
|
|
|
.dd1-item {
|
|
|
|
|
position: relative;
|
|
|
|
|
width: 214px;
|
|
|
|
|
width: 260px;
|
|
|
|
|
height: 320px;
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
@ -232,6 +201,7 @@ export default {
|
|
|
|
|
padding-top: 16px;
|
|
|
|
|
height: 88px;
|
|
|
|
|
font-size: 16px;
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
}
|
|
|
|
|
.d2 {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|