<template>
  <view class="container">
    <view class="TypesItem" v-for="(item,index) in TypesItem" :key="index" :class="{active: activeIndex === index}" @click="handleClick(index)">
      <div class="icon" :style="{'background-color': item.color}"></div>
      <span>{{ item.text }}</span>
    </view>
  </view>
</template>

<style>
.container {
  padding: 20px;
}

.TypesItem {
  display: flex;
  align-items: center;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 10px;
}

.active {
  border-color: red;
}

.icon {
  width: 20px;
  height: 20px;
  margin-right: 10px;
}

span {
  font-size: 16px;
  color: #333;
}
</style>

<script>
export default {
  data() {
    return {
      TypesItem: [
        { text: '类型1', color: 'red' },
        { text: '类型2', color: 'blue' },
        { text: '类型3', color: 'green' },
      ],
      activeIndex: 0,
    };
  },
  methods: {
    handleClick(index) {
      this.activeIndex = index;
      console.log(`点击了第${index + 1}个TypesItem`);
    },
  },
};
</script>