lineage-app/pages/main/personal/phone/phone.vue

<template>
	<view class="container">
		<view class="tui-flex">
			<view class="tui-cube-box">
				<image style="width: 100%;height: 100%;" src="../../../../static/img/phone.png"></image>
			</view>
		</view>
		<view style="text-align: center;margin-top: 30rpx;font-size: 14px;">绑定的手机号:188888888888</view>
		
		<view class="tui-content-box" @tap="replace">
			<tui-button>更换手机号</tui-button>
		</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';
	
	const thorui = require("@/components/common/tui-clipboard/tui-clipboard.js")
	import {
		mapState
	} from 'vuex'
	export default {
		components: {
			tuiListView,
			tuiListCell,
			tuiIcon,
			tuiTag,
			tuiButton,
			tuiBadge
		},
		computed: mapState(['version']),
		data() {
			return {

			}
		},
		methods: {
			copy: function(text,msg) {
				const that = this
				thorui.getClipboardData(text, (res) => {
					// #ifdef H5 || MP-ALIPAY
					if (res) {
						this.tui.toast(msg)
					} else {
						this.tui.toast("内容复制失败")
					}
					// #endif
				})
			},
			log: function() {
				uni.navigateTo({
					url: '../log/log'
				})
			},
			replace: function() {
				uni.navigateTo({
					url: './replace'
				});
			},
		}
	}
</script>

<style>
	.container {
		box-sizing: border-box;
		width: 100%;
		background-color: #fff;
	}
.tui-goods-title {
		width: 100%;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.tui-flex {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 40px;
	}

	.tui-cube-box {
		width: 128px;
		height: 128px;
		position: relative;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		z-index: 99;
	}

	@keyframes tui-go {
		0% {
			-webkit-transform: rotateX(0) rotateY(0);
			transform: rotateX(0) rotateY(0);
		}

		100% {
			-webkit-transform: rotateX(360deg) rotateY(360deg);
			transform: rotateX(360deg) rotateY(360deg);
		}
	}

	.tui-cube {
		width: 60px;
		height: 60px;
		position: absolute;
		display: flex;
		align-items: center;
		justify-content: center;
		padding: 5px;
		box-sizing: border-box;
		font-size: 24rpx;
		color: #fff;
		text-align: center;
		/* word-break: break-all;
		word-wrap: break-word; */
	}

	.tui-cube-1 {
		background-color: #fff;
		-webkit-transform: rotateY(90deg) translateZ(-30px);
		transform: rotateY(90deg) translateZ(-30px);
		color: #333 !important;
	}

	.tui-cube-2 {
		background-color: #8a5966;
		-webkit-transform: rotateY(90deg) translateZ(30px);
		transform: rotateY(90deg) translateZ(30px);
	}

	.tui-cube-3 {
		background-color: #5c8dff;
		-webkit-transform: rotateX(90deg) translateZ(30px);
		transform: rotateX(90deg) translateZ(30px);
	}

	.tui-cube-4 {
		background-color: #ed3f14;
		-webkit-transform: rotateX(90deg) translateZ(-30px);
		transform: rotateX(90deg) translateZ(-30px);
	}

	.tui-cube-5 {
		background-color: #ff7900;
		-webkit-transform: translateZ(30px);
		transform: translateZ(30px);
	}

	.tui-cube-6 {
		background-color: #19be6b;
		-webkit-transform: translateZ(-30px);
		transform: translateZ(-30px);
	}

	.tui-content-box {
		padding: 0 40rpx;
		width: 100%;
		margin-top: 10px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
	}

	.tui-content {
		color: #333;
		font-size: 30rpx;
		line-height: 44rpx;
		padding: 10rpx 0;
		text-align: justify;
	}

	.tui-content-email {
		color: #5677fc !important;
	}

	.tui-footer {
		display: flex;
		align-items: center;
		padding-top: 30rpx;
	}

	.tui-applets {
		width: 80px;
		height: 80px;
		display: block;
	}

	.tui-footer-text {
		font-size: 24rpx;
		color: #999;
		padding-left: 20rpx;
		width: 300rpx;
	}
</style>