From 7f9ac707a5343ff2b0c202fba4b2184d9dbc68df Mon Sep 17 00:00:00 2001
From: "lily.zhang" <daylily.zhang@akuhome.com>
Date: Tue, 19 Oct 2021 19:55:50 +0800
Subject: [PATCH] cxw-010203

---
 src/views/EventDEC/esprocess/index.vue | 227 +++++++++++++++++++++++++
 src/views/EventDEC/index.vue           |   7 +-
 2 files changed, 232 insertions(+), 2 deletions(-)
 create mode 100644 src/views/EventDEC/esprocess/index.vue

diff --git a/src/views/EventDEC/esprocess/index.vue b/src/views/EventDEC/esprocess/index.vue
new file mode 100644
index 0000000..b336819
--- /dev/null
+++ b/src/views/EventDEC/esprocess/index.vue
@@ -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>
\ No newline at end of file
diff --git a/src/views/EventDEC/index.vue b/src/views/EventDEC/index.vue
index 0575117..2880e29 100644
--- a/src/views/EventDEC/index.vue
+++ b/src/views/EventDEC/index.vue
@@ -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() {