|
|
@ -13,6 +13,8 @@ onMounted(()=>{
|
|
|
|
clickCrop(item)
|
|
|
|
clickCrop(item)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
|
|
|
|
}else{
|
|
|
|
|
|
|
|
clickCrop(cropList.value[0])
|
|
|
|
}
|
|
|
|
}
|
|
|
|
})
|
|
|
|
})
|
|
|
|
const currentCrop = defineModel({type:Object,default:()=>({})})
|
|
|
|
const currentCrop = defineModel({type:Object,default:()=>({})})
|
|
|
@ -31,9 +33,9 @@ const clickCrop = (item) => {
|
|
|
|
<div class="Crop-box" :style="{height:maxHeight+'px'}">
|
|
|
|
<div class="Crop-box" :style="{height:maxHeight+'px'}">
|
|
|
|
<title-divider title="作物列表"></title-divider>
|
|
|
|
<title-divider title="作物列表"></title-divider>
|
|
|
|
<div class="Crop-list">
|
|
|
|
<div class="Crop-list">
|
|
|
|
<div class="Crop-item" v-for="item in cropList" @click="clickCrop(item)">
|
|
|
|
<div class="Crop-item" :class="{'Crop-active':currentCrop.cropId === item.cropId}" v-for="item in cropList" @click="clickCrop(item)">
|
|
|
|
<i-local-two theme="filled" size="22" :fill="currentCrop.cropId !== item.cropId ? '#6c6c6c' : theme"/>
|
|
|
|
<i-local-two theme="filled" size="22" :fill="currentCrop.cropId !== item.cropId ? '#6c6c6c' : theme"/>
|
|
|
|
<div class="Crop-name" :class="{'Crop-active':currentCrop.cropId === item.cropId}">{{item.cropName}}</div>
|
|
|
|
<div class="Crop-name" >{{item.cropName}}</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
@ -47,9 +49,15 @@ const clickCrop = (item) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.Crop-list{
|
|
|
|
.Crop-list{
|
|
|
|
.Crop-item{
|
|
|
|
.Crop-item{
|
|
|
|
margin: 10px 20px;
|
|
|
|
text-align: center;
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
//鼠标悬浮变成点击
|
|
|
|
cursor: pointer;
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
|
|
padding: 10px 20px;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
&:hover {
|
|
|
|
|
|
|
|
background-color: var(--el-color-primary-light-9);
|
|
|
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
|
|
|
}
|
|
|
|
display: flex;
|
|
|
|
display: flex;
|
|
|
|
.Crop-name{
|
|
|
|
.Crop-name{
|
|
|
|
margin-left: 10px;
|
|
|
|
margin-left: 10px;
|
|
|
@ -57,6 +65,8 @@ const clickCrop = (item) => {
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
.Crop-active{
|
|
|
|
.Crop-active{
|
|
|
|
color: v-bind(theme);
|
|
|
|
background-color: var(--el-color-primary-light-9);
|
|
|
|
|
|
|
|
color: var(--el-color-primary);
|
|
|
|
|
|
|
|
border-right: 3px solid var(--el-color-primary);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|