chatGpt/pages/main/jump-default-browser.vue

<template>
	<view style="background: rgb(255, 255, 255);height: 100vh;">
		<view class="top-bg">
			<view class="top-bg-icon display-row align-center">
				<span>点击右上角</span>
				<view class="icon-bg"></view>
				<span>可以继续浏览本站哦</span>
			</view>
		</view>
		<view class="center-bg display-column align-center justify-center">
			<view class="center-bg-icon"></view>
		</view>
		<view class="tip display-column align-center">
			<span>您也可以复制本站网址，到默认浏览器中打开</span>
			<button class="tip-btn" @tap="copy">点此复制</button>
		</view>
	</view>
</template>

<script>
import {
	isWechat
} from '@/util/squ.js'
export default {
	data() {
		return {
			
		}
	},
	created () {
		// #ifdef H5
		if(!isWechat()) {
			window.location.href = this.$squni.getCurQuery('_originHref')
		}
		// #endif
	},
	methods: {
		copy() {
			this.$squni.copy(this.$squni.getCurQuery('_originHref'))
		}
	}
}
</script>

<style>
.top-bg {
	width: 100%;
	background-image: url(https://cdn7.aezo.cn/common/others/guide-browser-1.png);
	background-size: 100% 100%;
	height: 102px;
	position: relative;
}
.top-bg .top-bg-icon {
    position: absolute;
    top: 22px;
    left: 22px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
}
.top-bg .top-bg-icon .icon-bg {
    width: 22px;
    height: 22px;
    margin: 0 11px;
	background-image: url(https://cdn7.aezo.cn/common/others/guide-browser-3.png);
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.center-bg {
    width: 100%;
}
.center-bg .center-bg-icon {
	width: 342px;
	height: 50vh;
	background-image: url(https://cdn7.aezo.cn/common/others/guide-browser-2.png);
	background-position: 0% 0%;
	background-size: 100% 100%;
	background-repeat: no-repeat;
}
.tip {
	margin-top: 80rpx;
}
.tip .tip-btn {
    width: 171px;
    height: 39px;
    border-radius: 57px;
    background-color: #3082ff;
    font-size: 14px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    line-height: 39px;
	margin-top: 30rpx;
}
.align-center {
    align-items: center;
}
.display-row {
    display: flex;
    flex-direction: row;
}
.display-column {
    display: flex;
    flex-direction: column;
}
</style>