lineage-app/pages/main/configure/notice/notice.vue

<template>
	<view class="container">
		<tui-list-view >
			<tui-list-cell :hover="false" :lineLeft="false">
					<view class="tui-goods-title">
						<view>申请加入家族通知</view>
						<view class="tui-order-status"><switch style="" color="#19be6b" class="tui-switch" ></switch></view>
					</view>
				</tui-list-cell>
		</tui-list-view>
	</view>
</template>

<script>
	import tuiButton from "@/components/thorui/tui-button/tui-button"
	import tuiListView from '@/components/thorui/tui-list-view/tui-list-view';
	import tuiListCell from '@/components/thorui/tui-list-cell/tui-list-cell';
	import tuiIcon from '@/components/thorui/tui-icon/tui-icon';
	import tuiTag from '@/components/thorui/tui-tag/tui-tag';
	import tuiBadge from '@/components/thorui/tui-badge/tui-badge';

export default {
	components: {
		tuiListView,
		tuiListCell,
		tuiIcon,
		tuiTag,
		tuiButton,
		tuiBadge
	},
	data() {
		return {

		};
	},
	methods: {

	}
};
</script>

<style>
.container {
	padding-bottom: 120rpx;
	width: 100%;
}
.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
.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;
}
</style>