<!--
 * @Author: your name
 * @Date: 2021-10-18 10:42:29
 * @LastEditTime: 2021-10-18 13:44:52
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: /data-show/src/views/EventComparison/ec-d1/index.vue
-->
<template>
    <div class="ec-d1">
        <v-label-div title="切换事件">
            <span class="iconfont icon-guanbi v-m-close" @click="handlerClose"></span>
        </v-label-div>
        <div class="ec-d1-inner">
            <div class="ec-d1-dd1">
                <div class="d1">新车上市</div>
                <div class="d2">
                    <div class="d2-d1">全“星”宠爱 东风日产启辰重庆“驾练营”公益项目重庆车asdasdasdasdasd</div>
                    <div class="d2-d2">
                        <span class="s1">开始时间：</span><span class="s2">2021-05-30 20:20:24</span>
                        <span class="s1" style="margin-left: 40px">信息总量</span><span class="s2" style="margin-left: 8px">76446条</span>
                    </div>
                </div>
                <div class="ec-btn">
                   删除事件
                </div>
            </div>
            <div class="ec-d1-dd2">
                <img src="../../../assets/images/comm/img_vs.png" />
            </div>
            <div class="ec-d1-dd1">
                <div class="dx1">新车上市</div>
                <div class="d2">
                    <div class="d2-d1">今日，长安福特在重庆车展主场以全明星阵容开启新纪元…</div>
                    <div class="d2-d2">
                        <span class="s1">开始时间：</span><span class="s2">2021-05-30 20:20:24</span>
                        <span class="s1" style="margin-left: 40px">信息总量</span><span class="s2" style="margin-left: 8px">76446条</span>
                    </div>
                </div>
                <div class="ec-btn">
                   删除事件
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "ec-top",
    methods: {
        handlerClose() {
            this.$emit("close")
        }
    }

};
</script>

<style lang="less" scoped>
.ec-d1 {
    width: 100%;
    height: 222px;
    border: 2px solid #0f2a4d;
    .ec-d1-inner {
        width: 100%;
        height: calc(100% - 48px);
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .ec-d1-dd2 {
            margin-left: 68px;
            margin-right: 68px;
        }
        .ec-d1-dd1 {
            width: 800px;
            height: 120px;
            background: linear-gradient(180deg, #0088c9 0%, #001c43 100%);
            border-radius: 4px;
            border: 2px solid #0091ff;
            margin-left: 16px;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            .ec-btn {
                position: absolute;
                width: 137px;
                height: 37px;
                background-image: url("../../../assets/images/EventInsight/img_zbut.png");
                text-align: center;
                line-height: 37px;
                color: #60abcb;
                right: 0px;
                top: 0px;
                cursor: pointer;
            }
            .d1 {
                width: 86px;
                height: 86px;
                background-image: url("../../../assets/images/EventInsight/img_xlq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .dx1 {
                width: 86px;
                height: 86px;
                background-image: url("../../../assets/images/EventInsight/img_xlvq.png");
                background-repeat: no-repeat;
                background-size: cover;
                margin-left: 14px;
                text-align: center;
                line-height: 86px;
                font-size: 14px;
                color: #97c6ec;
            }
            .d2 {
                margin-left: 14px;
                .d2-d1 {
                    font-size: 20px;
                    color: #fff;
                    font-weight: 500;
                    width: 515px;
                    overflow: hidden;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                }
                .d2-d2 {
                    display: flex;
                    justify-content: flex-start;
                    .s1 {
                        display: block;
                        font-size: 14px;
                        color: #7b93a5;
                    }
                    .s2 {
                        display: block;
                        color: #fff;
                        font-size: 14px;
                    }
                }
            }
        }
    }
}
</style>
