BiKing/components/add-optional/add-optional.vue

<template>
	<view class="optional-box">
		<view class="optional" v-for="item in 20">
			<view class="optional-item" v-for="item in optionalList" @click.stop="item.status = !item.status">
				<text class="item-text">{{ item.title }}</text>
				<text :class="['item-icon', 'iconfont' , item.status ? 'active-item-icon' : '']">&#xe627;</text>
			</view>
		</view>
		<view class="optional-btn">添加自选</view>
	</view>
</template>

<script>
	export default {
		name: "add-optional",
		data() {
			return {
				optionalList: [{
						title: 'ETH/USDT',
						status: true
					},
					{
						title: 'FIL/USDT',
						status: true
					},
					{
						title: 'BTC/USDT',
						status: true
					},
					{
						title: 'LTC/USDT',
						status: true
					},
					{
						title: 'DOGE/USDT',
						status: true
					},
					{
						title: 'DOT/USDT',
						status: true
					}
				]
			};
		}
	}
</script>

<style lang="scss" scoped>
	.optional-box {
		width: 100%;
		background-color: #fff;

		padding: 0 $pages-padding ;
		.optional {
			width: 100%;
			display: flex;
			flex-wrap: wrap;

			.optional-item {
				width: 50%;
				flex-shrink: 0;
				padding: 10rpx 0 40rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 28rpx;
 
				.item-text {
					font-family: PingFang SC, PingFang SC-Bold;
					font-weight: 700;

				}

				.item-icon {
					color: #ccc;
				}

				.active-item-icon {
					color: $Theme-Color;
				}

				&:nth-child(2n - 1) {
					padding-right: 30rpx;
				}

				&:nth-child(2n) {
					padding-left: 30rpx;
				}
			}
		}

		.optional-btn {
			width: 300rpx;
			height: 90rpx;
			background-color: $Theme-Color;
			color: #fff;
			font-size: 28rpx;
			text-align: center;
			line-height: 90rpx;
			margin: 20rpx auto 0;
			border-radius: 10rpx;
		} 
	}
</style>