<template>
<view>
<view>
<view v-for="(item, index) in itemList"
:key="index"
:class="{ 'item': true, 'active': activeIndex === index }"
@click="toggleActive(index)">{{item}}</view>
<button type="primary">保存</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
itemList: ['生物', '微生物', '化学', '合成生物'],
activeIndex: null
}
},
methods: {
toggleActive(index) {
this.activeIndex = index;
}
}
}
</script>
<style scoped>
.content{
padding: 10px;
}
.box{
display: flex;
flex-wrap: wrap;
}
.box .item{
width: 200rpx;
height: 200rpx;
border-radius: 50%;
margin: 17rpx;
border: 1px solid #ddd;
display: flex;
align-items: center;
justify-content: center;
}
.btn{
background-color: $main_green;
border-radius: 50px;
width:600rpx;
margin-top: 50px;
position: fixed;
bottom: 20px;
left: 75rpx;
}
.active{
background-color: $main_green;
color: #fff;
}
</style>
