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