eud-gk-share/pages/result/result1.vue

<template>
	<view class="result">
		<view class="bless">
			<image src="../../static/bless.png" mode="aspectFit"></image>
			<!-- <view>以梦为马</view>
			<view>不负韶华</view> -->
		</view>
		<view class="link">
			<view class="type">
				<image class="dn" src="../../static/diannao.png" mode="aspectFit"></image>
				<image class="copy" src="../../static/copy.png" mode="aspectFit" @click="copy"></image>
			</view>
			<view class="address">
				<image src="../../static/address.png" mode="aspectFit"></image>
			</view>
		</view>
		<view class="prompt">
			<view>努力，是最好的答案！</view>
			<view>德立信志愿祝您金榜题名！</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
	const copy = () => {
		uni.setClipboardData({
			data: 'https://www.dlxgk.com',
			success: () => {
				uni.showToast({
					title: '复制成功',
					icon: 'none'
				});
			}
		});

	}
</script>

<style lang="scss" scoped>
	@media screen and (min-width: 500px) {
		.bless {
			padding-top: 20rpx !important;
		}
		.prompt {
			bottom: 20rpx !important;
		}
	}
	@media screen and (max-width: 430px) {
		.bless {
			padding-top: 30% !important;
		}
	}

	@media screen and (max-width: 375px) {
		.bless {
			padding-top: 26% !important;
		}
	}

	@media screen and (max-width: 360px) {
		.bless {
			padding-top: 30% !important;
		}
	}

	.result {
		width: 100vw;
		height: auto;
		min-height: 100vh;
		background: url('../../static/beijing.png') no-repeat;
		background-size: 100% 100%;

		.bless {
			display: flex;
			align-items: center;
			flex-direction: column;
			padding-top: 30%;

			image {
				width: 448rpx;
				height: 268rpx;
			}
		}

		.link {
			width: 356rpx;
			margin: 32rpx auto;
			padding-bottom: 140rpx;

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

				.dn {
					width: 130rpx;
					height: 34rpx;
				}

				.copy {
					width: 130rpx;
					height: 34rpx;
				}
			}

			.address {
				margin: 16rpx auto;
				width: 356rpx;

				image {
					width: 356rpx;
					height: 96rpx;
				}
			}

			.desc {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 24rpx;
				color: #FFFFFF;
				line-height: 28rpx;
				text-stroke: 2px #35A5FF;
				text-align: left;
				font-style: normal;
				text-transform: none;
				-webkit-text-stroke: .5px #35A5FF;
				text-align: center;
			}
		}

		.prompt {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			position: fixed;
			bottom: 104rpx;
			left: 50%;
			transform: translateX(-50%);

			view {
				font-family: Alimama ShuHeiTi, Alimama ShuHeiTi;
				font-weight: bold;
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 38rpx;
				letter-spacing: 3px;
				text-align: left;
				font-style: normal;
				text-transform: none;
				margin-bottom: 20rpx;
			}
		}
	}
</style>