crm-app-vue3/pages/about/index.vue

<template>
	<view class="about_wrap">
		<u-navbar title="关于" :autoBack="true" :placeholder="true" v-hideNav></u-navbar>
		<view class="about_top">
			<view class="box">
				<image src="@/static/about/logo.png" mode=""></image>
				<view class="title">时与</view>
				<view class="desc">客户关系管理</view>
				<view class="version">v{{currentVersion}}</view>
			</view>
		</view>
		<view class="about_main_wrap">
			<view class="option_item" @click="handleUpdateDynamic">
				<view class="item_left">
					<text class="label">更新动态</text>
				</view>
				<view class="item-right">
					<u-icon name="arrow-right" color="#aaa"></u-icon>
				</view>
			</view>
			<view class="option_item" @click="handleCheckVersion">
				<view class="item_left">
					<text class="label">最新版本</text>
				</view>
				<view class="item-right">
					<text>v{{lastVersion}}</text>
					<u-icon name="arrow-right" color="#aaa"></u-icon>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import APPUpdate from '@/uni_modules/zhouWei-APPUpdate/js_sdk/appUpdate';
	export default {
		data() {
			return {
			}
		},
		computed : {
			lastVersion(){
				return this.$store.state.app.lastVersion;
			},
			currentVersion(){
				return this.$store.state.app.currentVersion;
			},
		},
		methods: {
			handleUpdateDynamic(){
				uni.navigateTo({
					url : "/pages/updateDynamic/index"
				})
			},
			handleCheckVersion(){
				APPUpdate(true);
			},
		},
	}
</script>

<style lang="scss" scoped>
	.about_wrap {
		.about_top {
			width: 100%;
			height: 514rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.box {
				text-align: center;

				image {
					width: 156rpx;
					height: 156rpx;
				}

				.desc {
					margin: 20rpx 0 10rpx 0;
					color: #999999;
					font-size: 26rpx;
				}

				.version {
					color: #999999;
					font-size: 26rpx;
				}

				.title {
					margin-top: 30rpx;
					font-size: 40rpx;
					color: #30323a;
				}

			}
		}

		.option_item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 100rpx;
			background-color: #fff;
			border-bottom: 1px solid #ddd;
			padding: 0 30rpx;
			&:last-child{
				border: none;
			}
			.item_left {
				display: flex;
				align-items: center;

				.label {
					font-size: 28rpx;
					color: #202020;
				}
			}

			.item-right {
				display: flex;
				justify-content: space-between;
				align-items: center;

				::v-deep .u-icon__icon {
					font-size: 30rpx !important;
				}

				text {
					font-size: 24rpx;
					color: #999999;
					margin-right: 20rpx;
				}

				.copy_btn {
					display: flex;
					font-size: 24rpx;
					color: #108CFF;
					margin-right: 30rpx;
				}
			}
		}
	}
</style>