Skip to content

G
game-h5
Commit eab56125 by 曾经
Options

no message

parent 9c5fcec1
Showing with 733 additions and 3 deletions
package-lock.json 0 → 100644
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
......@@ -9,8 +9,10 @@
},
"dependencies": {
"axios": "^0.27.2",
"core-js": "^3.6.5",
"core-js": "^3.22.5",
"swiper": "^5.2.0",
"vue": "^2.6.11",
"vue-awesome-swiper": "^4.1.1",
"vue-router": "^3.2.0"
},
"devDependencies": {
......
public/index.html
......@@ -6,6 +6,7 @@
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title>
<link rel="stylesheet" href="//at.alicdn.com/t/font_2844902_uelk5f2sikk.css">
</head>
<body>
<noscript>
......
src/components/cmh/components/alert.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<div class="content">
<div class="content-detail">
</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean
},
data() {
return {};
},
methods: {
again(){
this.$emit('again');
this.close();
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.dialog-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg .content{
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
text-align: center;
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/components/open-box.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box_bg.png" class="dialog-bg-img">
<div class="content">
<div class="title">每次消耗100积分</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box02.png" class="box-img" mode="widthFix">
<div class="handle-btn" @click="open">立即拆开</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean
},
data() {
return {};
},
methods: {
open(){
this.$emit('open');
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.dialog-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content{
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
text-align: center;
width: 82%;
}
.dialog-bg .content .title{
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 100%;
margin: 0 auto;
}
.dialog-bg .content .handle-btn{
margin: -12px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #12B4BB;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/components/reward-dialog.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<img
src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box_bg.png"
class="dialog-bg-img"
/>
<div class="content">
<div class="title">恭喜获得</div>
<div class="subtitle">50元抵金券</div>
<div class="reward-box">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png" class="reward-img" mode="widthFix"/>
<div class="reward-log-text">
<span>奖品已放置</span>
<span class="color-text">【我的奖品】</span>
</div>
</div>
<div class="handle-btn" @click="close">收下</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
reward: Object,
show: Boolean,
},
data() {
return {};
},
methods: {
close() {
this.$emit("update:show", false);
},
},
};
</script>
<style scoped>
.dialog-bg {
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg-img {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 1;
}
.dialog-bg .content {
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%, -50%);
text-align: center;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .reward-box{
width: 218px;
border-radius: 5px;
background: linear-gradient(90deg, #E8FFFD 0%, #FAFFE7 100%);
text-align: center;
margin-top: 38px;
}
.dialog-bg .content .reward-img{
margin: 0 auto;
padding: 54px 0 0;
width: 150px;
}
.dialog-bg .content .reward-log-text{
padding: 36px 0 14px;
font-size: 12px;
color: #27292B;
}
.dialog-bg .content .reward-log-text .color-text{
color: #12B4BB;
}
.dialog-bg .content .handle-btn {
margin: 42px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #12b4bb;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
}
.dialog-bg .content .icon-guanbi {
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/components/reward-fail.vue 0 → 100644
<template>
<div class="dialog-bg" v-if="show">
<div class="content">
<div class="title">差一点就中奖了</div>
<div class="subtitle">一定是姿势不对，换个姿势试试</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_fail_pic.png" class="box-img" mode="widthFix">
<div class="handle-btn" @click="again">再抽一个</div>
<div class="iconfont icon-guanbi" @click="close"></div>
</div>
</div>
</template>
<script>
export default {
props: {
show: Boolean
},
data() {
return {};
},
methods: {
again(){
this.$emit('again');
this.close();
},
close(){
this.$emit('update:show', false);
},
},
};
</script>
<style scoped>
.dialog-bg{
position: fixed;
left: 0;
top: 0;
width: 100%;
height: 100%;
z-index: 99;
background: rgba(0, 0, 0, 0.85);
}
.dialog-bg .content{
position: absolute;
z-index: 2;
left: 50%;
top: 45%;
transform: translate(-50%,-50%);
text-align: center;
min-width: 224px;
}
.dialog-bg .content .title {
color: white;
font-size: 24px;
font-weight: 500;
}
.dialog-bg .content .subtitle {
color: white;
font-size: 16px;
font-weight: 500;
}
.dialog-bg .content .box-img{
width: 300px;
margin: 76px auto 0;
}
.dialog-bg .content .handle-btn{
margin: 78px auto 0;
width: 180px;
height: 40px;
border-radius: 20px;
background: #12B4BB;
text-align: center;
line-height: 40px;
color: white;
font-size: 20px;
font-weight: 500;
box-shadow: inset 0px 3px 3px 0px rgba(255, 255, 255, 0.8);
}
.dialog-bg .content .icon-guanbi{
margin: 40px auto 0;
color: white;
opacity: 0.8;
padding: 15px;
font-size: 28px;
height: 28px;
width: 28px;
}
</style>
src/components/cmh/my-reward.vue 0 → 100644
<template>
<div class="box">
<div class="page-bg">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix">
</div>
<div class="content">
<div class="content-cell">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">我的奖品</div>
<div class="iconfont icon-duobianxing"></div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components:{},
data(){
return {
}
},
created(){
document.title = "我的奖品"
this.loadData();
},
methods:{
loadData(){
}
}
}
</script>
<style scoped>
.box{
position: relative;
}
.page-bg{
position: fixed;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ADDFCD;
}
.page-bg .bg-img{
width: 100%;
}
.content{
position: relative;
z-index: 1;
}
.content-cell{
border-radius: 8px;
border: 1px solid #06B0B2;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
min-height: 600px;
}
.cell-top{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(180deg, #DFF7F4 0%, rgba(223, 247, 244, 0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title{
color: #27292B;
font-size: 17px;
padding: 0 10px;
font-weight: 600;
}
.cell-top .iconfont{
color: #38BDCD;
font-size: 15px;
}
</style>
\ No newline at end of file
src/components/cmh/rule.vue
<template>
<div>游戏规则</div>
<div class="box">
<div class="page-bg">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_rulebg.png" class="bg-img" mode="widthFix">
</div>
<div class="content">
<div class="content-cell">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">游戏奖品</div>
<div class="iconfont icon-duobianxing"></div>
</div>
<div class="reward-box">
<div class="reward-item-box">
<div class="reward-item-detail">
<div class="img-box">
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_coupon1.png" class="reward-img" mode="widthFix">
</div>
<div class="reward-name">100元无门槛券</div>
<div class="reward-des">线下门店消费满500使用</div>
</div>
</div>
</div>
</div>
<div class="content-cell">
<div class="cell-top">
<div class="iconfont icon-duobianxing"></div>
<div class="title">游戏规则</div>
<div class="iconfont icon-duobianxing"></div>
</div>
<div class="rule-box">
<div class="rule-item">
<div class="title">游戏时间</div>
<div class="value">2022年3月1日 10:00-2022年4月1日 10:00</div>
</div>
<div class="rule-item">
<div class="title">参与门槛</div>
<div class="value point">每邀请 1 位用户，增加 1 次游戏机会</div>
<div class="value point">每参加 1 次游戏消耗 100 积分</div>
</div>
<div class="rule-item">
<div class="title">游戏参与次数</div>
<div class="value">无限制</div>
</div>
<div class="rule-item">
<div class="title">适用人群</div>
<div class="value">所有会员</div>
</div>
<div class="rule-item">
<div class="title">参与门槛</div>
<div class="value point">每邀请 1 位用户，增加 1 次游戏机会</div>
<div class="value point">每参加 1 次游戏消耗 100 积分</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
components:{},
data(){
return {
}
},
created(){
document.title = "游戏规则"
this.loadData();
},
methods:{
loadData(){
}
}
}
</script>
<style>
<style scoped>
.box{
position: relative;
}
.page-bg{
position: fixed;
z-index: 0;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: #ADDFCD;
}
.page-bg .bg-img{
width: 100%;
}
.content{
position: relative;
z-index: 1;
}
.content-cell{
border-radius: 8px;
border: 1px solid #06B0B2;
background: white;
margin: 12px 12px 3px;
width: calc(100% - 24px);
box-sizing: border-box;
}
.cell-top{
display: flex;
align-items: center;
justify-content: center;
height: 50px;
background: linear-gradient(180deg, #DFF7F4 0%, rgba(223, 247, 244, 0.3) 100%);
border-radius: 8px 8px 0 0;
}
.cell-top .title{
color: #27292B;
font-size: 17px;
padding: 0 10px;
font-weight: 600;
}
.cell-top .iconfont{
color: #38BDCD;
font-size: 15px;
}
.reward-box{
padding: 15px 0 6px;
display: flex;
flex-wrap: wrap;
}
.reward-item-box{
width: calc(50% - 19px);
padding: 0 6px 12px;
}
.reward-item-box:nth-child(2n + 1){
padding-left: 13px;
}
.reward-item-box:nth-child(2n + 2){
padding-right: 13px;
}
.reward-item-detail{
background: #F6F6F6;
border-radius: 4px;
padding: 6px;
}
.reward-item-detail .img-box{
padding-top: 100%;
position: relative;
background: white;
}
.reward-item-detail .img-box .reward-img{
position: absolute;
z-index: 1;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
width: calc(100% - 20px);
}
.reward-item-detail .reward-name{
color: #21252B;
font-size: 14px;
font-weight: 500;
padding: 11px 0 0;
}
.reward-item-detail .reward-des{
color: #21252B;
font-size: 11px;
font-weight: 300;
padding: 4px 0 7px;
}
.rule-box{
}
.rule-item{
padding: 15px 13px 0;
}
.rule-item:last-child{
padding-bottom: 16px;
}
.rule-item .title{
color: #21252B;
font-size: 14px;
font-weight: 600;
}
.rule-item .value{
color: #21252B;
font-size: 13px;
margin-top: 8px;
}
.rule-item .value.point{
padding-left: 10px;
position: relative;
}
.rule-item .value.point::before{
content: " ";
position: absolute;
width: 4px;
height: 4px;
border-radius: 50%;
background: #38BDCD;
top: 7px;
left: 0;
z-index: 1;
}
</style>
\ No newline at end of file
src/router/index.js
......@@ -13,6 +13,11 @@ const routes = [
component: () => import('@/components/cmh/rule.vue'),
name: '游戏规则'
},
{
path: '/my-reward',
component: () => import('@/components/cmh/my-reward.vue'),
name: '我的奖品'
},
];
const router = new VueRouter({
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment