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

<template>
	<view class="container">
		<view class="tui-flex">
			<view class="tui-cube-box">
				<image style="width: 100%;height: 100%;" src="../../../../static/images/basic/color.png"></image>
			</view>
		</view>
		<view style="text-align: center;margin-top: 60rpx;">v1.0版本</view>
		
		<view class="tui-content-box">
			<tui-list-view >
				<tui-list-cell :hover="false" :lineLeft="false">
						<view class="tui-goods-title">
							<view>开发公司</view>
							<view>盛世云智能科技有限公司</view>
						</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false">
						<view class="tui-goods-title">
							<view>邮箱</view>
							<view>88888@ssy.com</view>
						</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false">
						<view class="tui-goods-title">
							<view>联系电话</view>
							<view>400-222-8888</view>
						</view>
				</tui-list-cell>
				<tui-list-cell :hover="false" :lineLeft="false">
						<view class="tui-goods-title">
							<view>地址</view>
							<view>南宁市青秀区金旺角大酒店</view>
						</view>
				</tui-list-cell>
			</tui-list-view>
		</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'
				})
			}
		}
	}
</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: 60px;
		height: 60px;
		position: relative;
		-webkit-transform-style: preserve-3d;
		transform-style: preserve-3d;
		animation: tui-go 4s linear infinite;
		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 {
		width: 100%;
		margin-top: 30px;
		box-sizing: border-box;
		background-color: #fff;
		border-radius: 10rpx;
		box-shadow: 0 0 10rpx #eee;
	}

	.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>