gas-cylinder-h5/pages/mine/system.vue

<template>
	<!-- 系统设置 -->
	<view>
		<u-navbar title="系统设置" autoBack placeholder></u-navbar>
		<view class="card_system">
			<view class="space_between card_mine_option frame" @click="logOut">
				<view class="option_title">退出登录</view>
				<u-icon name="arrow-right" size="20"></u-icon>
			</view>
			<u-modal :show="logoutShow" showCancelButton :title="title" :content='content' @cancel="cancel"
				@confirm="confirm"></u-modal>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				logoutShow: false,
				title: '确定退出？',
				content: '退出登录后将无法查看订单，重新登录后即可查看'
			}
		},
		methods: {
			// 退出登录
			logOut() {
				this.logoutShow = true
			},
			// 确定退出登录
			confirm() {
				this.$cache.removeToken()
				this.$cache.removeCache('userInfo')
				uni.redirectTo({
					url: '/pages/login'
				})
			},
			// 取消
			cancel() {
				this.logoutShow = false
			},
		}
	}
</script>

<style lang="scss">
	.card_system {
		margin: 30rpx 30rpx 30rpx 30rpx;
	}

	.card_mine_option {
		margin: 40rpx 0rpx;
		// border-bottom: 2rpx solid #E4E7ED;
		padding-bottom: 30rpx;
	}

	.frame {
		position: relative; //重要
	}

	.frame::after {
		position: absolute;
		content: '';
		border-bottom: 2rpx solid #e7e6e4;
		// border-radius: 16rpx;
		width: 200%;
		height: 200%;
		top: 0;
		left: 0;
		transform: scale(0.5);
		transform-origin: 0 0;
		pointer-events: none;
		/* 使伪元素不会阻止鼠标事件 */
	}

	.option_title {
		font-size: 32rpx;
		font-weight: bold;
	}
</style>