工作228:小程序学习2开始布局页面2

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

 

运行结果