95 lines
3.2 KiB
HTML
95 lines
3.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<!-- A11Y：注意设置页面的 lang 属性 -->
|
|||
|
|
<html lang="zh">
|
|||
|
|
|
|||
|
|
<head>
|
|||
|
|
<meta charset="utf-8" />
|
|||
|
|
<!-- A11Y：打开页面时，屏幕阅读器会首先阅读 title 的内容，确保 title 准确描述页面 -->
|
|||
|
|
<title>领取详情</title>
|
|||
|
|
<meta name="description" content="" />
|
|||
|
|
<meta name="keywords" content="" />
|
|||
|
|
<meta name="apple-mobile-web-app-capable" content="yes" />
|
|||
|
|
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
|
|||
|
|
<meta name="format-detection" content="telephone=no, email=no" />
|
|||
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|||
|
|
<script>
|
|||
|
|
var docEl = document.documentElement;
|
|||
|
|
docEl.style.fontSize = 100 / 750 * docEl.clientWidth + 'px';
|
|||
|
|
window.addEventListener('resize', function () {
|
|||
|
|
docEl.style.fontSize = 100 / 750 * docEl.clientWidth + 'px';
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/vue.global.js"></script>
|
|||
|
|
<link rel="stylesheet"
|
|||
|
|
href="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/swiper-bundle.min.css" />
|
|||
|
|
<script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/libs/swiper-bundle.min.js"></script>
|
|||
|
|
|
|||
|
|
<link rel="stylesheet" href="./style.css">
|
|||
|
|
|
|||
|
|
</head>
|
|||
|
|
|
|||
|
|
<body ontouchstart="">
|
|||
|
|
<div id="app">
|
|||
|
|
<!-- 轮播 -->
|
|||
|
|
<div class="swiper">
|
|||
|
|
<div class="swiper-wrapper">
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/bm-img/bm_img_banner.png"
|
|||
|
|
alt="">
|
|||
|
|
</div>
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/bm-img/bm_img_banner.png"
|
|||
|
|
alt="">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<div class="swiper-slide">
|
|||
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/bm-img/bm_img_banner.png"
|
|||
|
|
alt="">
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 说明 -->
|
|||
|
|
<div class="use-marek">
|
|||
|
|
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/bm-img/bm_img_banner.png"
|
|||
|
|
alt="使用说明">
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 底部 -->
|
|||
|
|
<footer class="footer">
|
|||
|
|
<button type="button" class="footer-btn" @click="goToExchange">立即领取</button>
|
|||
|
|
</footer>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
<script>
|
|||
|
|
const { createApp, ref, onMounted } = Vue
|
|||
|
|
createApp({
|
|||
|
|
setup() {
|
|||
|
|
|
|||
|
|
onMounted(() => {
|
|||
|
|
// swiper
|
|||
|
|
const swiper = new Swiper('.swiper', {
|
|||
|
|
loop: true,
|
|||
|
|
});
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
// 兑换
|
|||
|
|
const goToExchange = () => {
|
|||
|
|
// 跳转到兑换页面
|
|||
|
|
window.location.href = './exchange.html'
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
goToExchange
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}).mount('#app')
|
|||
|
|
</script>
|
|||
|
|
</body>
|
|||
|
|
|
|||
|
|
|
|||
|
|
</html>
|