bsdgy-front/src/pages/activity/useActivityStepTwo.vue

<template>
  <div style="padding: 0 40px;">
    <div class="selectClass">
      <Radio v-model="allSelect">全选</Radio>
      <i-input icon="search" placeholder="请输入零售公司名称或编码" style="width: 250px"></i-input>
    </div>
    <div class="companyTable">
      <div class="companyListClass">
          <div :class="companyColorIndex == index ? 'tagColorClass' : ''" class="tagClass" @click="selectTag(index)" v-for="(item, index) in companyList" :key="index" >{{item.name}}</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "useActivityStepTwo",
  data() {
		return {
      allSelect: false,
      companyList: [{
        name: '111'
      },{
        name: '111'
      },{
        name: '111'
      },{
        name: '111'
      },{
        name: '111'
      },{
        name: '111'
      },{
        name: '111'
      }],
      companyColorIndex: -1
		}
  },
	mounted() {
  },
  methods: {
    selectTag(val) {
      this.companyColorIndex = val
    }
  }
}
</script>

<style  scoped>
.selectClass {
  display: flex;
  justify-content: space-between;
}
.companyTable {
  width: 3150px;
  height: 1000px;
  border: 1px solid;
  margin-top: 40px;
  padding: 40px;
  overflow:scroll;
}
.companyListClass {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.tagClass {
  width: 31%;
  margin-bottom: 30px;
  height: 120px;
  line-height: 120px;
  border: 1px solid #e3e8ee!important;
  color: #657180!important;
  background: #fff;
  padding: 0 12px;
}
.tagColorClass {
  background: #6ac1d1;
}
</style>