<template> <div class="tab-style"> <div :class="{'tab-content-bg':tabNum == 0}" class="tab-content" @click="tabNum = 0;sendTabNum()"><img :src="tabNum == 0?base:unbase"><span :class="{'colored':tabNum == 0}">基本信息</span></div> <div :class="{'tab-content-bg':tabNum == 1}" class="tab-content" @click="tabNum = 1;sendTabNum()"><img :src="tabNum == 1?trial:untrial"><span :class="{'colored':tabNum == 1}">租赁信息</span></div> <div :class="{'tab-content-bg':tabNum == 2}" class="tab-content" @click="tabNum = 2;sendTabNum()"><img :src="tabNum == 2?sign:unsigned"><span :class="{'colored':tabNum == 2}">担保协议</span></div> </div> </template> <script> import base from '@/assets/distributorSign/base.png' import sign from '@/assets/distributorSign/sign.png' import trial from '@/assets/distributorSign/trial.png' import unbase from '@/assets/distributorSign/unbase.png' import unsigned from '@/assets/distributorSign/unsigned.png' import untrial from '@/assets/distributorSign/untrial.png' export default { props: { tabNums: { type: Number, default: 0, }, }, data () { return { tabNum: 0, base: base, unbase: unbase, sign: sign, unsigned: unsigned, trial: trial, untrial: untrial, } }, watch: { tabNums () { this.tabNum = this.tabNums }, }, methods: { sendTabNum () { this.$emit('getTabNum', this.tabNum) }, }, } </script> <style lang="less" scoped> .tab-style { position: relative; z-index: 50; background-color: #fff; display: flex; justify-content: center; padding-top: 12px; padding-bottom: 8px; align-items: center; box-shadow: 0 2px 3px 0 rgba(220, 220, 221, 0.50); .tab-content { display: block; width: 45.9%; height: 32px; background: rgba(220, 220, 221, 0.26); border-radius: 16px; display: flex; justify-content: center; align-items: center; span { margin-left: 2%; font-size: 14px; color: #383F45; font-weight: 600; font-family: PingFangSC-Semibold; } .colored { color: @headerColor } } .tab-content-bg{ background: rgba(0,70,156,0.10); } img { height: 16px; // margin-right:5.7px; } .tab-content:nth-of-type(2) { margin: 0 8px; } .tab-content:nth-of-type(1) { margin-left: 10px } .tab-content:nth-of-type(3) { margin-right: 10px } } </style>