|
|
|
|
|
<!--
|
|
|
|
|
|
* @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>
|
