kuaiyidian-HD/package1/other/tutorialDetail.vue

<template>
	<view>
		<view class="formBox">
			<view class="swipe-action">
				<view class="swipe-action__content" @tap="onItemClick(item)" v-for="(item,index) in dataList" :key="index">
					<view class="swipe-action__content__left">
						<view class="swipe-action__content__text">{{item.name}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				dataList:[{
					name:'开单',
					id:'kaidan'
				},{
					name:'入库',
					id:'ruku'
				},{
					name:'挂单',
					id:'guadan'
				},{
					name:'推款',
					id:'tuikuan'
				},{
					name:'邀请返佣',
					id:'fanyong'
				},{
					name:'盘点',
					id:'pandian'
				},{
					name:'打卡规则',
					id:'guize'
				},{
					name:'新增商品',
					id:'xinzengshangpin'
				}]
			}
		},
		methods: {
			onItemClick(item) {
				uni.navigateTo({
					url: '/package1/other/tutorialDetail?id='+item.id
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.formBox {
		.uni-data-select {
			width: 100%;
		}

		.tui-order-title {
			position: relative;
			font-size: 28upx;
			line-height: 28upx;
			padding-left: 16upx;
			box-sizing: border-box;
		}

		.tui-order-title::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			border-left: 8upx solid $u-primary;
			height: 120%;
			border-radius: 4upx;
		}
	}

	.tui-tabbar {
		width: 100%;
		height: 98rpx;
		background: #fff;
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		font-size: 26rpx;
		box-shadow: 0 0 1px rgba(0, 0, 0, .3);
		padding-bottom: env(safe-area-inset-bottom);
		z-index: 996;
	}

	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			background-color: #fff;
			margin-bottom: 25rpx;
			padding: 25rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;

			&__left {
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			&__right {
				display: flex;
				align-items: center;
				flex-basis: 300rpx;
				justify-content: space-between;

				&__text {
					color: firebrick;
				}

				&__money {
					flex-basis: 100rpx;
					color: red;
					text-align: right;
				}
			}

			&__text {
				padding: 12rpx 0;
				width: 100%;
			}

			&__time {
				font-size: 22rpx;
				color: #3a3a3a;
			}

			&__icon {
				flex-basis: 20rpx;
			}
		}
	}

	.edit-info {
		height: 450 rpx;
		padding: 25rpx;

		.title {
			text-align: center;
			font-size: 32rpx;
		}

		.info-name {
			display: flex;
			align-items: center;
			margin: 35rpx 0;
		}
	}
</style>
<style>
	.u-radio {
		margin: 15 upx 0;
	}
</style>