parent
b91ffb6127
commit
5d25c8fc9a
@ -0,0 +1,160 @@
|
||||
<!--
|
||||
* @Author: your name
|
||||
* @Date: 2021-11-05 13:18:12
|
||||
* @LastEditTime: 2021-11-26 11:39:40
|
||||
* @LastEditors: Please set LastEditors
|
||||
* @Description: In User Settings Edit
|
||||
* @FilePath: /data-show/src/views/BrandComparison/brandCompateHeader/index.vue
|
||||
-->
|
||||
<template>
|
||||
<div class="bc-d1">
|
||||
<v-label-div title="品牌对比">
|
||||
<v-btn @click="goback">返回洞察详情</v-btn>
|
||||
</v-label-div>
|
||||
<div class="bc-d1-inner">
|
||||
<template v-for="(item,index) in brands">
|
||||
<div class="bc-d1-item" :key="index">
|
||||
<div class="d1-item" :style="index === 0 ? 'margin-left: 16px' : ''">
|
||||
<span class="s1">{{item.name|doStr(4)}}</span>
|
||||
<span class="s2">{{item.name|doStr(10)}}</span>
|
||||
<span class="s3" v-if="item.isDel">删除</span>
|
||||
<span class="s3" v-else>切换品牌</span>
|
||||
</div>
|
||||
<img v-if="index != brands.length -1" src="../../../assets/images/comm/img_vs.png" class="d1-m1">
|
||||
</div>
|
||||
</template>
|
||||
</div>
|
||||
<iSwitchBrand :visible.sync="brandShow"></iSwitchBrand>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "brandCompateHeaderStoken",
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
},
|
||||
// watch: {
|
||||
// data: {
|
||||
// handler(val) {
|
||||
// if (val.length > 0) {
|
||||
// val.forEach((ele, index) => {
|
||||
// this.brands[index] = Object.assign(
|
||||
// this.brands[index],
|
||||
// ele
|
||||
// );
|
||||
// });
|
||||
// }
|
||||
// },
|
||||
// immediate: true,
|
||||
// },
|
||||
// },
|
||||
data() {
|
||||
return {
|
||||
brandShow: false,
|
||||
brandIndex: 0,
|
||||
btnLoading: false,
|
||||
brands: [
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
{
|
||||
name: "",
|
||||
isDel: false,
|
||||
},
|
||||
],
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
goback() {
|
||||
this.$router.go(-1);
|
||||
},
|
||||
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.bc-d1 {
|
||||
width: 100%;
|
||||
height: 222px;
|
||||
border: 2px solid #0f2a4d;
|
||||
.bc-d1-inner {
|
||||
width: 100%;
|
||||
height: calc(100% - 48px);
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
.bc-d1-item {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
.d1-m1 {
|
||||
width: 96px;
|
||||
height: 102px;
|
||||
}
|
||||
.d1-item {
|
||||
position: relative;
|
||||
width: 228.5px;
|
||||
height: 120px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_pd.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: 100% 100%;
|
||||
|
||||
.s1 {
|
||||
position: absolute;
|
||||
font-size: 14px;
|
||||
color: #b2daf8;
|
||||
top: 52px;
|
||||
left: 43px;
|
||||
}
|
||||
.s2 {
|
||||
position: absolute;
|
||||
top: 50px;
|
||||
left: 110px;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
}
|
||||
.s3 {
|
||||
display: block;
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
right: 0px;
|
||||
width: 95px;
|
||||
height: 28px;
|
||||
background-image: url("../../../assets/images/BrandInsight/img_xbut.png");
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
color: #4390ba;
|
||||
text-align: center;
|
||||
line-height: 28px;
|
||||
font-size: 12px;
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Loading…
Reference in new issue