<template><view class="box u-p-l-35 u-p-r-35 "><view class="title"><text>请选择您要管理的市场</text></view><view :class=" ['u-flex','u-row-center',{'choose_market': selectIndex ==0},{'market' : selectIndex != 0}] " @click="choose(0)"><view class=" u-row-center  ">苏州花开农创智慧科技</view></view><view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 1},{'market' : selectIndex != 1}] " @click="choose(1)"style="justify-content: center;"><text class="u-row-center">长江农副产品综合市场</text></view><view :class=" ['u-flex','u-row-center',{'choose_market' : selectIndex == 2},{'market' : selectIndex != 2 }] " @click="choose(2)"><text>体育路农贸市场</text></view><u-button class="determine">确定</u-button></view>
</template><script>export default {data() {return {selectIndex: 0}},methods: {//提交sub: function() {},//切换choose: function(e) {this.selectIndex = e},},}
</script><style lang="scss">.box {background-color: white;.title {color: #333333;font-size: 34rpx;margin-bottom: 50rpx;padding-top: 224rpx;}.choose_market {width: 100%;height: 120rpx;background: #F0F8FC;border: 2rpx solid #1FB5FE;opacity: 1;border-radius: 8rpx;font-size: 30rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #1FB5FE;margin-bottom: 30rpx;}.market {width: 100%;height: 120rpx;background: #F1F1F1;opacity: 1;border-radius: 8rpx;font-size: 30rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #666666;margin-bottom: 30rpx;}.determine {width: 684rpx;height: 96rpx;background: linear-gradient(91deg, #43B9FD 0%, #1FB5FE 100%);border-radius: 66rpx;font-size: 36rpx;font-family: PingFangSC;font-weight: 400;line-height: 40rpx;color: #FFFFFF;opacity: 1;position: absolute;bottom: 18rpx;}}
</style>

 

运行结果