lineage-app/pages/family/switch/switch.vue

<template>
	<view class="container">
		<tui-swipe-action :actions="actions">
			<template v-slot:content>
				<tui-list-view>
					<tui-list-cell last="true">
						<view class="tui-item-box">
							<image src="/static/images/my/thorui.png" class="tui-logo" mode="widthFix"></image>
							<text class="tui-list-cell_name">陕西凤翔-余姓家族</text>
						</view>
					</tui-list-cell>
				</tui-list-view>
			</template>
		</tui-swipe-action>
		<tui-swipe-action :actions="actions">
			<template v-slot:content>
				<tui-list-view>
					<tui-list-cell last="true">
						<view class="tui-item-box">
							<image src="/static/images/my/thorui.png" class="tui-logo" mode="widthFix"></image>
							<text class="tui-list-cell_name">广西桂林-余姓家族</text>
						</view>
					</tui-list-cell>
				</tui-list-view>
			</template>
		</tui-swipe-action>
		<tui-swipe-action :actions="actions">
			<template v-slot:content>
				<tui-list-view>
					<tui-list-cell last="true">
						<view class="tui-item-box">
							<image src="/static/images/my/thorui.png" class="tui-logo" mode="widthFix"></image>
							<text class="tui-list-cell_name">广东广州-余姓家族</text>
						</view>
					</tui-list-cell>
				</tui-list-view>
			</template>
		</tui-swipe-action>
		<tui-list-view>
			<tui-list-cell :arrow="true" last="true">
				<view class="tui-item-box">
					<image src="../../../static/images/mall/my/icon_addr_edit.png" class="tui-logo" mode="widthFix"></image>
					<text class="tui-list-cell_name">添加或创建家族</text>
				</view>
			</tui-list-cell>
		</tui-list-view>
	</view>
</template>

<script>
	import tuiSwipeAction from "@/components/thorui/tui-swipe-action/tui-swipe-action"
		import tuiIcon from "@/components/thorui/tui-icon/tui-icon"
		import tuiListView from "@/components/thorui/tui-list-view/tui-list-view"
		import tuiListCell from "@/components/thorui/tui-list-cell/tui-list-cell"
	
export default {
	components: {
	tuiSwipeAction,
	tuiIcon,
	tuiListView,
	tuiListCell
		},
	data() {
		return {
			actions: [
				{
					name: '删除',
					color: '#fff',
					fontsize: 30, //单位rpx
					width: 70, //单位px
					background: '#FD3B31'
				}
			],
			open:false
		};
	},
	methods: {
		switchChange: function(e) {
			this.open = e.target.value;
		}
	}
};
</script>

<style>
.container {
	width: 100%;
	padding-bottom: 120rpx;
}

.header {
	padding: 80rpx 90rpx 60rpx 90rpx;
	box-sizing: border-box;
}

.title {
	font-size: 34rpx;
	color: #333;
	font-weight: 500;
}

.sub-title {
	font-size: 24rpx;
	color: #7a7a7a;
	padding-top: 18rpx;
}

.tui-list-item {
	padding: 40rpx 30rpx;
	display: flex;
	align-items: item;
}

.tui-title {
	width: 100%;
	padding: 50rpx 30rpx 30rpx;
	box-sizing: border-box;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.tui-switch {
	transform: scale(0.8);
	transform-origin: 100% center;
}

.tui-custom-btn_box {
	width: 140px;
	height: 100%;
	padding: 0 20rpx;
	box-sizing: border-box;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: #fafafa;
}

.tui-custom-btn {
	width: 100rpx;
	height: 100rpx;
	border-radius: 50%;
	background-color: #fff;
	color: #333;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
}

.tui-custom-mr {
	margin-right: 20rpx;
}
.container {
		padding-bottom: env(safe-area-inset-bottom);
	}

	.tui-item-box {
		width: 100%;
		display: flex;
		align-items: center;
	}

	.tui-list-cell_name {
		padding-left: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.tui-ml-auto {
		margin-left: auto;
	}

	.tui-right {
		margin-left: auto;
		margin-right: 34rpx;
		font-size: 26rpx;
		color: #999;
	}

	.tui-logo {
		height: 52rpx;
		width: 52rpx;
		flex-shrink: 0;
	}

	.tui-flex {
		display: flex;
		align-items: center;
	}

	.tui-msg-box {
		display: flex;
		align-items: center;
	}

	.tui-msg-pic {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		display: block;
		margin-right: 24rpx;
		flex-shrink: 0;
	}

	.tui-msg-item {
		max-width: 500rpx;
		min-height: 80rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.tui-msg-name {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 34rpx;
		line-height: 1;
		color: #262b3a;
	}

	.tui-msg-content {
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size: 26rpx;
		line-height: 1;
		color: #9397a4;
	}

	.tui-msg-right {
		max-width: 120rpx;
		height: 88rpx;
		margin-left: auto;
		text-align: right;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		align-items: flex-end;
	}

	.tui-right-dot {
		height: 76rpx !important;
		padding-bottom: 10rpx !important;

	}

	.tui-msg-time {
		width: 100%;
		font-size: 24rpx;
		line-height: 24rpx;
		color: #9397a4;
	}
</style>