邓宏
2 years ago
7 changed files with 128 additions and 2 deletions
@ -0,0 +1,99 @@ |
|||
<style lang="less" scoped> |
|||
.container{ |
|||
height:100%; |
|||
&>.d-search{ |
|||
&/deep/ .search{ |
|||
margin-bottom:0; |
|||
} |
|||
} |
|||
&>.u-tabs{ |
|||
&/deep/ .u-tabs__wrapper__nav__line{ |
|||
box-shadow:0 4rpx 6rpx 2rpx rgba(16,193,118,0.1); |
|||
} |
|||
} |
|||
&>.tabs{ |
|||
margin:10rpx 30rpx 0; |
|||
background:#EEFBF5; |
|||
border-radius: 8rpx; |
|||
padding:0 15rpx; |
|||
display:flex; |
|||
flex-wrap: wrap; |
|||
text{ |
|||
color:#999; |
|||
padding:15rpx; |
|||
&.active{ |
|||
color:#10C176; |
|||
} |
|||
} |
|||
} |
|||
&>.title{ |
|||
color:#333; |
|||
margin:30rpx; |
|||
&:before{ |
|||
content:"*"; |
|||
color:#EE263A; |
|||
} |
|||
} |
|||
&>.items{ |
|||
display:flex; |
|||
flex-wrap: wrap; |
|||
margin:30rpx; |
|||
text{ |
|||
background:#eee; |
|||
color:#999; |
|||
height:54rpx; |
|||
line-height: 54rpx; |
|||
border-radius: 54rpx; |
|||
font-size:24rpx; |
|||
margin:0 30rpx 20rpx 0; |
|||
width:calc(100%/4 - 30rpx); |
|||
text-align: center; |
|||
&.active{ |
|||
background:#10C176; |
|||
color:#fff; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
<template> |
|||
<view class="container"> |
|||
<d-navbar style="--bg:#10C176;--c:#fff;" isBack text="添加农事"> |
|||
<button slot="right" class="cu-btn round" @click="submit">提交</button> |
|||
</d-navbar> |
|||
|
|||
<d-search background="#f6f6f6"/> |
|||
<u-tabs :list="cropList" activeStyle="color:#10C176" lineWidth="60rpx" lineHeight="8rpx" inactiveStyle="color:#333" lineColor="#10C176"></u-tabs> |
|||
<view class="tabs"> |
|||
<text>玉米</text> |
|||
<text class="active">水稻</text> |
|||
</view> |
|||
<view class="title">害虫类型</view> |
|||
<view class="items"> |
|||
<text class="active">黄地老虎</text> |
|||
<text v-for="k in 20" :key="k">黄地老虎</text> |
|||
<text>自定义+</text> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
<script> |
|||
export default { |
|||
data(){ |
|||
return{ |
|||
cropList:[ |
|||
{name:'粮食作物',}, |
|||
{name:'油料作物',}, |
|||
{name:'经济作物',}, |
|||
{name:'药用作物',}, |
|||
{name:'牧草',}, |
|||
{name:'树林'}, |
|||
] |
|||
} |
|||
}, |
|||
methods:{ |
|||
submit(){ |
|||
|
|||
}, |
|||
} |
|||
} |
|||
</script> |
Loading…
Reference in new issue