yunyang
/
carInsightSystem
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

cxw-010203

Browse Source
prod
lily.zhang 4 years ago
parent edebbdd921
commit 7f9ac707a5
2 changed files with 232 additions and 2 deletions
Show Stats Download Patch File Download Diff File

227
src/views/EventDEC/esprocess/index.vue
Unescape View File

@ -0,0 +1,227 @@
<!--
* @Author: your name
* @Date: 2021-10-19 19:45:01
* @LastEditTime: 2021-10-19 19:52:39
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDEC/esprocess/index.vue
-->
<template>
<div class="esp-outter">
<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-d2">
<vue-scroll>
<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>
</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>
</vue-scroll>
</div>
<div class="coe-ts-d1"><img src="../../../assets/images/EventInsight/img_xan.png" /></div>
</div>
</div>
</template>
<script>
export default {
name: "esprocess",
};
</script>
<style lang="less" scoped>
.esp-outter {
width: 100%;
height: 460px;
border: 2px solid #0f2a4d;
margin-top: 16px;
.coe-ts {
position: relative;
width: 100%;
padding: 0px 16px;
height: calc(100% - 48px);
display: flex;
justify-content: space-between;
align-items: center;
.coe-ts-s1 {
position: absolute;
color: #fff;
top: 16px;
left: 16px;
font-size: 16px;
color: #3373cc;
}
.coe-ts-d2 {
width: 1726px;
height: 400px;
display: flex;
justify-content: flex-start;
align-items: center;
position: relative;
.dd1-label {
.d1x {
width: 120px;
height: 120px;
background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
color: #b0deff;
text-align: center;
line-height: 120px;
}
.d1 {
width: 120px;
height: 120px;
background-image: url("../../../assets/images/EventInsight/img_xlq.png");
background-repeat: no-repeat;
background-size: cover;
font-size: 14px;
color: #b0deff;
text-align: center;
line-height: 120px;
}
.d2 {
font-size: 16px;
color: #fff;
text-align: center;
}
.d3 {
font-size: 14px;
font-family: Bebas;
color: #616974;
text-align: center;
}
}
.dd1-fen {
position: absolute;
width: 100%;
height: 2px;
background: #004877;
left: 0px;
top: 136px;
}
.dd1-item {
position: relative;
width: 214px;
height: 320px;
display: flex;
flex-shrink: 0;
padding-left: 84px;
justify-content: flex-start;
.m1 {
height: 148px;
}
.dt-d1 {
margin-left: 18px;
.d1 {
width: 120px;
padding-top: 16px;
height: 88px;
font-size: 16px;
}
.d2 {
font-size: 14px;
color: #fff;
}
.d3 {
font-size: 13px;
font-family: Bebas;
color: #616974;
}
}
}
}
.coe-ts-d1 {
width: 32px;
height: 100%;
display: flex;
justify-content: flex-start;
align-items: center;
img {
cursor: pointer;
}
}
}
}
/deep/ .__view {
display: flex !important;
justify-content: flex-start !important;
align-items: center !important;
}
</style>

7
src/views/EventDEC/index.vue
Unescape View File

@ -1,7 +1,7 @@
<!--
* @Author: your name
* @Date: 2021-10-19 15:57:11
* @LastEditTime: 2021-10-19 19:38:19
* @LastEditTime: 2021-10-19 19:51:38
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: /data-show/src/views/EventDEC/index.vue
@ -40,17 +40,20 @@
</div>
<incidentSpreadSituation></incidentSpreadSituation>
<tonalCommunicationPosture></tonalCommunicationPosture>
<esprocess></esprocess>
</div>
</div>
</template>
<script>
import incidentSpreadSituation from "./incidentSpreadSituation"
import tonalCommunicationPosture from "./tonalCommunicationPosture"
import esprocess from "./esprocess"
export default {
name: "eventDEC",
components: {
incidentSpreadSituation,
tonalCommunicationPosture
tonalCommunicationPosture,
esprocess
},
methods: {
goback() {

Write Preview
Loading…
Cancel
Save