工作227:小程序学习1开始布局页面
生活随笔
收集整理的這篇文章主要介紹了
工作227:小程序学习1开始布局页面
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
<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>
運行結果
創作挑戰賽新人創作獎勵來咯，堅持創作打卡瓜分現金大獎總結
以上是生活随笔為你收集整理的工作227:小程序学习1开始布局页面的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： vb实现随机生成100个整数，将其中的奇
- 下一篇： PCSCHEMATIC ELAUTOMA