You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
164 lines
4.5 KiB
164 lines
4.5 KiB
<!--
|
|
* @Author: your name
|
|
* @Date: 2021-10-18 09:55:16
|
|
* @LastEditTime: 2021-11-15 16:16:38
|
|
* @LastEditors: Please set LastEditors
|
|
* @Description: In User Settings Edit
|
|
* @FilePath: /data-show/src/views/EventComparison/index.vue
|
|
-->
|
|
|
|
<template>
|
|
<div class="ise-container">
|
|
<div class="ec-outter">
|
|
<ec-top ref="ect" @del="handlerDel"></ec-top>
|
|
<eventRecommendationList ref="erdl" @change="chooseChange"></eventRecommendationList>
|
|
<div align="center" class="ec-footer">
|
|
<!-- <img src="../../assets/images/EventInsight/img_sjdb_nor.png"/> -->
|
|
<img src="../../assets/images/EventInsight/img_sjdb_sel.png" @click="handlerBegin"/>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import ecTop from "./ec-top"
|
|
import eventRecommendationList from "./eventRecommendationList"
|
|
export default {
|
|
name: "iSwitchEvent",
|
|
components: {
|
|
ecTop,
|
|
eventRecommendationList // 事件推荐列表
|
|
},
|
|
data() {
|
|
return {
|
|
subList: []
|
|
}
|
|
},
|
|
methods: {
|
|
// 选择事件
|
|
chooseChange(arr) {
|
|
this.$refs.ect.list = arr;
|
|
this.subList = arr;
|
|
},
|
|
// 删除事件
|
|
handlerDel(arr) {
|
|
this.$nextTick(() => {
|
|
this.$refs.erdl.chooseList = arr;
|
|
this.subList = arr;
|
|
})
|
|
|
|
},
|
|
// 开始对比
|
|
handlerBegin() {
|
|
if(this.subList.length < 2) {
|
|
this.$message.warning('至少2个事件进行对比');
|
|
return
|
|
}
|
|
this.setEComparison(this.subList);
|
|
this.$router.push({path: '/eventComparison'})
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.ise-container {
|
|
width: 100%;
|
|
height: auto;
|
|
position: relative;
|
|
background-color: rgba(0, 0, 0, 0.45);
|
|
}
|
|
.ec-outter {
|
|
position: absolute;
|
|
padding: 0px 16px 16px 16px;
|
|
width: auto;
|
|
height: auto;
|
|
background: #010b19;
|
|
.ec-footer {
|
|
padding: 10px 0px;
|
|
img {
|
|
width: 480px;
|
|
height: 80px;
|
|
}
|
|
}
|
|
}
|
|
.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;
|
|
.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>
|