<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>