|
|
@@ -13,7 +13,8 @@
|
|
|
#container {
|
|
|
overflow: hidden;
|
|
|
width: 100%;
|
|
|
- height: 938px;
|
|
|
+ height: 51.1733rem;
|
|
|
+ margin-bottom: 1.8667rem;
|
|
|
background: url('./img/bg.jpg') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
}
|
|
|
@@ -21,12 +22,11 @@
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
justify-content: space-between;
|
|
|
- margin: 30px auto;
|
|
|
+ margin: 5.2267rem auto;
|
|
|
width: 9.0133rem;
|
|
|
height: 3.4667rem;
|
|
|
padding: 14px 10px;
|
|
|
box-sizing: border-box;
|
|
|
- background: white;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
.commodity {
|
|
|
@@ -58,6 +58,34 @@
|
|
|
background: url('./img/15.png');
|
|
|
background-size: contain;
|
|
|
}
|
|
|
+ .payBox {
|
|
|
+ position: fixed;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ box-sizing: border-box;
|
|
|
+ left: 0;
|
|
|
+ bottom: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 15px 18px;
|
|
|
+ background: white;
|
|
|
+ }
|
|
|
+ .payBox .left {
|
|
|
+ font-size: 0.48rem;
|
|
|
+ }
|
|
|
+ .price {
|
|
|
+ color: #ff9108;
|
|
|
+ font-size: 0.64rem;
|
|
|
+ font-weight: bold;
|
|
|
+ }
|
|
|
+ .pay {
|
|
|
+ padding: 0.1867rem 0.6933rem;
|
|
|
+ background: #ff9108;
|
|
|
+ color: white;
|
|
|
+ font-weight: 500;
|
|
|
+ border-radius: 0.6133rem;
|
|
|
+ font-size: 0.48rem;
|
|
|
+ }
|
|
|
</style>
|
|
|
<body>
|
|
|
<div id="container">
|
|
|
@@ -72,23 +100,42 @@
|
|
|
<img src="./img/active.png" class="active" v-show="active==3" />
|
|
|
</div>
|
|
|
</div>
|
|
|
+ <div class="payBox">
|
|
|
+ <div class="left">
|
|
|
+ 终身会员
|
|
|
+ <span class="price">299</span>
|
|
|
+ 元
|
|
|
+ </div>
|
|
|
+ <div class="pay">立即支付</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</body>
|
|
|
<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
|
|
|
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
|
|
|
<script>
|
|
|
+ let xhr = new XMLHttpRequest()
|
|
|
let app = new Vue({
|
|
|
el: '#container',
|
|
|
data: {
|
|
|
active: 1
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.request('https://reader-api.efunbox.cn/wx/v3/product/learn')
|
|
|
},
|
|
|
methods: {
|
|
|
selected(e) {
|
|
|
this.active = e
|
|
|
+ },
|
|
|
+ request(url) {
|
|
|
+ xhr.onreadystatechange = function () {
|
|
|
+ if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
|
|
|
+ console.log(xhr.responseText)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ xhr.open('get', url, true)
|
|
|
+ xhr.send()
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
</script>
|
|
|
-</html>
|
|
|
+</html>
|
bayi
