返回

前端工作总结106-小程序学习2开始布局页面2

发布时间:2023-12-07 06:17:47 161
<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>

前端工作总结106-小程序学习2开始布局页面2_css

 



特别声明:以上内容(图片及文字)均为互联网收集或者用户上传发布,本站仅提供信息存储服务!如有侵权或有涉及法律问题请联系我们。
举报
评论区(0)
按点赞数排序
用户头像
精选文章
thumb 中国研究员首次曝光美国国安局顶级后门—“方程式组织”
thumb 俄乌线上战争,网络攻击弥漫着数字硝烟
thumb 从网络安全角度了解俄罗斯入侵乌克兰的相关事件时间线