feat: 增加包码结算
This commit is contained in:
zhangds
parent
81061414ac
commit
999d4695e6
|
|
@ -0,0 +1,124 @@
|
|||
<!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="main">
|
||||
<!-- 直充和卡密 -->
|
||||
<div class="get-go main-input" v-if="goodsType === 0">
|
||||
<div class="input-style">
|
||||
<span>账 号:</span>
|
||||
<input type="text" placeholder="请输入手机号" style="padding-left: 0.78rem;">
|
||||
</div>
|
||||
|
||||
<div class="input-style">
|
||||
<span>再次输入:</span>
|
||||
<input type="text" placeholder="请再次输入手机号" style="padding-left: 0.3rem;">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card-pwd main-input" v-if="goodsType === 1">
|
||||
<div class="input-style">
|
||||
<span>卡密账号:</span>
|
||||
<input type="text" style="padding-left: 0.3rem;" disabled="{{true}}" value="1256466161444644">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/bm-copy_btn.png" alt="">
|
||||
</div>
|
||||
|
||||
<div class="input-style">
|
||||
<span>卡密密码:</span>
|
||||
<input type="text" style="padding-left: 0.3rem;" disabled="{{true}}"
|
||||
value="dsfnog54er4twer7789q123">
|
||||
<img src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/MarketingSystem/img/bm-copy_btn.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" disabled="{{true}}">立即兑换</button>
|
||||
</footer>
|
||||
|
||||
</div>
|
||||
|
||||
<script>
|
||||
|
||||
</script>
|
||||
<script>
|
||||
const { createApp, ref, onMounted } = Vue
|
||||
createApp({
|
||||
setup() {
|
||||
const step = ref(0);
|
||||
|
||||
// 0直充 1卡密 2无
|
||||
const goodsType = ref(1);
|
||||
|
||||
onMounted(() => {
|
||||
// swiper
|
||||
const swiper = new Swiper('.swiper', {
|
||||
loop: true,
|
||||
});
|
||||
})
|
||||
|
||||
return {
|
||||
goodsType
|
||||
}
|
||||
}
|
||||
}).mount('#app')
|
||||
</script>
|
||||
</body>
|
||||
|
||||
|
||||
</html>
|
||||
|
|
@ -0,0 +1,95 @@
|
|||
<!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>
|
||||
|
|
@ -0,0 +1,98 @@
|
|||
/* 公用css */
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
#app {
|
||||
width: 100%;
|
||||
min-height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
padding-bottom: 2rem;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
width: 7.5rem;
|
||||
height: 7.5rem;
|
||||
background-color: #bbb;
|
||||
}
|
||||
|
||||
.swiper-slide img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.use-marek {
|
||||
padding-top: 1px;
|
||||
margin: 0.16rem auto 0 auto;
|
||||
}
|
||||
|
||||
.use-marek img {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.footer {
|
||||
width: 7.5rem;
|
||||
height: 1.8rem;
|
||||
background-color: #ffffff;
|
||||
text-align: center;
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
padding-top: 0.1rem;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.footer-btn {
|
||||
width: 6.86rem;
|
||||
height: 0.88rem;
|
||||
background: #437fff;
|
||||
border-radius: 0.88rem;
|
||||
border: none;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
/* 直充还是卡密 */
|
||||
.main {
|
||||
width: 100%;
|
||||
background-color: #fff;
|
||||
margin-top: 0.16rem;
|
||||
padding: 0.36rem;
|
||||
}
|
||||
|
||||
.main-input {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.main-input .input-style:last-child {
|
||||
margin-top: 0.36rem;
|
||||
}
|
||||
|
||||
.input-style {
|
||||
width: 6.78rem;
|
||||
height: 0.84rem;
|
||||
background: #f2f4f6;
|
||||
border-radius: 0.42rem;
|
||||
opacity: 1;
|
||||
border: none;
|
||||
padding-left: 0.36rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.input-style span {
|
||||
font-size: 0.3rem;
|
||||
font-weight: 400;
|
||||
color: #333333;
|
||||
}
|
||||
|
||||
.input-style input {
|
||||
width: 4.5rem;
|
||||
height: 0.84rem;
|
||||
font-size: 0.3rem;
|
||||
border: none;
|
||||
background-color: #f2f4f6;
|
||||
outline: none;
|
||||
}
|
||||
Loading…
Reference in New Issue