carInsightSystem/src/views/BrandComparison/brandCompateHeaderStoken/index.vue

<!--
 * @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;
                font-weight: bold;
                cursor: pointer;
            }
        }
    }
}
</style>