parent
4abec38679
commit
836eb7cab1
@ -0,0 +1,63 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-03 11:45:09
|
||||||
|
* @LastEditTime: 2021-11-03 16:00:45
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Edit
|
||||||
|
* @FilePath: /data-show/src/views/MarketingComparison/index.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="d-container">
|
||||||
|
<div class="mc-outter">
|
||||||
|
<mcChooseModel></mcChooseModel>
|
||||||
|
<div class="mc-d1">
|
||||||
|
<mcOSVC></mcOSVC>
|
||||||
|
<mcIVC></mcIVC>
|
||||||
|
</div>
|
||||||
|
<mcTOPMedia></mcTOPMedia>
|
||||||
|
<mcChannelDistribution></mcChannelDistribution>
|
||||||
|
<div class="mc-d2">
|
||||||
|
<mcCTNF></mcCTNF>
|
||||||
|
<salesComparison></salesComparison>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mcChooseModel from "./mcChooseModel"
|
||||||
|
import mcOSVC from "./mcOSVC"
|
||||||
|
import mcIVC from "./mcIVC"
|
||||||
|
import mcTOPMedia from "./mcTOPMedia"
|
||||||
|
import mcChannelDistribution from "./mcChannelDistribution"
|
||||||
|
import mcCTNF from "./mcCTNF"
|
||||||
|
import salesComparison from "./salesComparison"
|
||||||
|
export default {
|
||||||
|
name: "marketingComparison",
|
||||||
|
components: {
|
||||||
|
mcChooseModel, // 选择车型
|
||||||
|
mcOSVC, // 整体声量对比
|
||||||
|
mcIVC, // 互动量对比
|
||||||
|
mcTOPMedia, // 车型传播TOP媒体
|
||||||
|
mcChannelDistribution, // 渠道分布对比
|
||||||
|
mcCTNF, // 论坛总量对比
|
||||||
|
salesComparison // 销量对比
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mc-outter {
|
||||||
|
padding: 0px 16px 16px 16px;
|
||||||
|
}
|
||||||
|
.mc-d1 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
.mc-d2 {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
|
margin-top: 16px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,101 @@
|
|||||||
|
<!--
|
||||||
|
* @Author: your name
|
||||||
|
* @Date: 2021-11-03 17:12:47
|
||||||
|
* @LastEditTime: 2021-11-03 18:11:43
|
||||||
|
* @LastEditors: Please set LastEditors
|
||||||
|
* @Description: In User Settings Editiv
|
||||||
|
* @FilePath: /data-show/src/views/MarketingComparison/mcBeginCompare.vue
|
||||||
|
-->
|
||||||
|
<template>
|
||||||
|
<div class="d-container">
|
||||||
|
<div class="mbc-outter">
|
||||||
|
<mcChooseModel></mcChooseModel>
|
||||||
|
<div class="mbc-inner">
|
||||||
|
<v-label-div title="车型推荐">
|
||||||
|
</v-label-div>
|
||||||
|
<div class="mbc-dd">
|
||||||
|
<ul class="mb-ul">
|
||||||
|
<li class="mbc-d-item" :class="chooseArr.includes(item) ? 'liActive': ''" v-for="(item,index) in models" :key="index" @click="handlerModel(item)">{{item}}</li>
|
||||||
|
</ul>
|
||||||
|
<div style="clear: both"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import mcChooseModel from "./mcChooseModel";
|
||||||
|
export default {
|
||||||
|
name: "mcBeginCompare",
|
||||||
|
components: {
|
||||||
|
mcChooseModel,
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
chooseArr: [],
|
||||||
|
models: ["奥迪A4", "奥迪A6", "奥迪S3", "奥迪S4", "奥迪RS3", "奥迪RS4", "宝马1系",
|
||||||
|
"宝马2系","宝马3系","宝马M5","宝马M4","宝马M3","本田凌派","本田雅阁","本田缤智","本田冠道",
|
||||||
|
"本田奥德赛", "本田艾力绅", "比亚迪宋PRO", "比亚迪唐","比亚迪汉EV", "比亚迪秦", "比亚迪元", "比亚迪宋Max"
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
handlerModel(ele) {
|
||||||
|
let n = this.chooseArr.findIndex(e => e === ele);
|
||||||
|
if(n === -1 && this.chooseArr.length < 6) {
|
||||||
|
this.chooseArr.push(ele)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.mbc-outter {
|
||||||
|
width: 100%;
|
||||||
|
padding: 0px 16px 16px 16px;
|
||||||
|
}
|
||||||
|
.mbc-inner {
|
||||||
|
width: 100%;
|
||||||
|
height: 488px;
|
||||||
|
border: 2px solid #0f2a4d;
|
||||||
|
margin-top: 16px;
|
||||||
|
.mbc-dd {
|
||||||
|
width: 100%;
|
||||||
|
height: calc(100% - 48px);
|
||||||
|
.mb-ul {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
li {
|
||||||
|
float: left;
|
||||||
|
width: 295px;
|
||||||
|
height: 89px;
|
||||||
|
background-color: #0f2b47;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-top: 16px;
|
||||||
|
color: #fff;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 2px;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
line-height: 89px;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 500;
|
||||||
|
cursor: pointer;
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid #0058e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.liActive {
|
||||||
|
color: #0058e6;
|
||||||
|
border: 1px solid #0058e6;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in new issue