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

?

運行結果

?

總結

以上是生活随笔為你收集整理的工作228:小程序学习2开始布局页面2的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。