Skip to content

M
marketing
Commit 6f38100b by crushh
Options

update: 第四套模板

parent 0ce89773
Showing with 185 additions and 94 deletions
src/views/game/cmh/form.vue
......@@ -18,11 +18,15 @@
{{ el }}
</el-menu-item>
</el-menu>
<div class="iphone">
<span class="gameTitle">{{ gameName }}</span>
<img src="../../../assets/img/Navbar.png" class="braImg" alt="" />
<gameTemplate :ruleData="ruleData" :templateId="templateId" :basicData="previewData" v-show="menuActive == 0" />
<img :src="computedImg" v-show="menuActive != 0" style="min-height:724px;margin-top: 70px;" />
<div style="margin: 0 20px 0 13px;">
<div class="nav">
<span class="gameTitle">{{ gameName }}</span>
<img src="../../../assets/img/Navbar.png" class="braImg" alt="" />
</div>
<div class="iphone">
<gameTemplate :ruleData="ruleData" :templateId="templateId" :basicData="previewData" v-show="menuActive == 0" />
<img :src="computedImg" v-show="menuActive != 0" style="min-height:724px; " />
</div>
</div>
</div>
<div class="rightForm" v-show="!isInfo">
......@@ -105,7 +109,7 @@ export default {
},
computed: {
computedImg() {
if (!['1', '2', '3', '4'].includes(this.templateId)) {
if (!['1', '2', '3', '5'].includes(this.templateId)) {
return '';
}
const bcImg = {
......@@ -490,13 +494,19 @@ export default {
}
}
}
.nav {
height: 83px;
img {
width: 375px;
border-radius: 8px 8px 0px 0px;
}
}
.iphone {
width: 375px;
border-radius: 8px 8px 0px 0px;
margin: 0 20px 0 13px;
position: relative;
overflow-y: auto;
overflow-x: hidden;
height: 100%;
img {
width: 375px;
}
......@@ -507,7 +517,7 @@ export default {
color: #000000;
font-weight: 600;
z-index: 101;
top: 56px;
top: 82px;
width: 100%;
height: 20px;
display: flex;
......
src/views/game/cmh/gameTemplate.vue
<template>
<div class="template-game">
<img class="bg-image" :src="backImageUrl" />
<div class="bg-image-box">
<img class="bg-image" :src="backImageUrl" />
</div>
<div class="content">
<div class="right-btn rule">游戏规则</div>
<div class="right-btn award">我的奖品</div>
<div class="right-btn rule" :style="rightBtn[templateId]">游戏规则</div>
<div class="right-btn award" :style="rightBtn[templateId]">我的奖品</div>
<div class="music-icon iconfont icon-yinfu" v-show="backMusicFlag"></div>
<div class="integral" v-if="ruleData[0].type == 0">{{ ruleData[0].val }}积分/次</div>
<div class="swiper-item" v-if="bulletFlag == 1">
......@@ -11,20 +13,20 @@
<span>恭喜 张* 获得 100元优惠券</span>
</div>
<div class="box-box">
<img v-for="item in boxList" :key="item" :src="boxImg" :style="{ left: item.left, top: item.top }" @click="showOpenBoxDialog = true" />
<img v-for="item in boxList" :key="item" :src="boxImg" :style="{ left: item.left, top: item.top, width: item.width, height: item.height }" @click="showOpenBoxDialog = true" />
</div>
<div class="points-count-box">
<div class="text-box">
<div class="text">1500</div>
<img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
<img class="text-shadow" :src="'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template' + templateId + '/circle_bg.png'" />
<img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/我的积分.png" />
</div>
<div class="game-name-box">
<img :src="noticeImageUrl" style="width: 224px;height: 22px;" />
<img :src="noticeImageUrl" style="height: 17px;" />
</div>
<div class="text-box">
<div class="text">55</div>
<img class="text-shadow" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/circle_bg.png" />
<div class="text" style="font-size:40px">55</div>
<img class="text-shadow" :src="'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template' + templateId + '/circle_bg.png'" />
<img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/剩余次数.png" />
</div>
</div>
......@@ -45,142 +47,208 @@ import img from '../../../components/upload/img.vue';
const template3Box = [
{
left: '24%',
top: '202px'
top: '192px',
height: '120px',
width: '120px'
},
{
left: '50%',
top: '266px'
top: '243px',
height: '120px',
width: '120px'
},
{
left: '77%',
top: '202px'
top: '192px',
height: '120px',
width: '120px'
},
{
left: '24%',
top: '338px'
top: '330px',
height: '120px',
width: '120px'
},
{
left: '50%',
top: '393px'
top: '376px',
height: '120px',
width: '120px'
},
{
left: '77%',
top: '338px'
top: '330px',
height: '120px',
width: '120px'
}
];
const leftVal = 0;
// const leftVal = 0;
const template1Box = [
{
left: 'calc(51% - 0px)',
top: '204px'
left: 'calc(51%)',
top: '200px',
height: '110px',
width: '110px'
},
{
left: 'calc(33% - 0px)',
top: '252px'
left: 'calc(33%)',
top: '244px',
height: '110px',
width: '110px'
},
{
left: 'calc(66% - 0px)',
top: '248px'
left: 'calc(69%)',
top: '244px',
height: '110px',
width: '110px'
},
{
left: 'calc(16% - 0px)',
top: '297px'
left: 'calc(16%)',
top: '291px',
height: '110px',
width: '110px'
},
{
left: 'calc(52% - 0px)',
top: '296px'
left: 'calc(52%)',
top: '288px',
height: '110px',
width: '110px'
},
{
left: 'calc(84% - 0px)',
top: '297px'
left: 'calc(84%)',
top: '294px',
height: '110px',
width: '110px'
},
{
left: 'calc(35% - 0px)',
top: '341px'
left: 'calc(35%)',
top: '335px',
height: '110px',
width: '110px'
},
{
left: 'calc(68% - 0px)',
top: '345px'
left: 'calc(70%)',
top: '338px',
height: '110px',
width: '110px'
},
{
left: 'calc(53% - 0px)',
top: '390px'
left: 'calc(53%)',
top: '385px',
height: '110px',
width: '110px'
}
];
const template2Box = [
{
left: 'calc(24.5% -0)',
top: '202px'
left: 'calc(24.5% - 0px)',
top: '202px',
height: '90px',
width: '90px'
},
{
left: 'calc(50% -0)',
top: '202px'
left: 'calc(50% - 0px)',
top: '202px',
height: '90px',
width: '90px'
},
{
left: 'calc(75.5% -0)',
top: '202px'
left: 'calc(75.5% - 0px)',
top: '202px',
height: '90px',
width: '90px'
},
{
left: 'calc(24.5% -0)',
top: '287px'
left: 'calc(24.5% - 0px)',
top: '287px',
height: '90px',
width: '90px'
},
{
left: 'calc(50% -0)',
top: '287px'
left: 'calc(50% - 0px)',
top: '287px',
height: '90px',
width: '90px'
},
{
left: 'calc(75.5% -0)',
top: '287px'
left: 'calc(75.5% - 0px)',
top: '287px',
height: '90px',
width: '90px'
},
{
left: 'calc(24.5% -0)',
top: '379px'
left: 'calc(24.5% - 0px)',
top: '379px',
height: '90px',
width: '90px'
},
{
left: 'calc(50% -0)',
top: '379px'
left: 'calc(50% - 0px)',
top: '379px',
height: '90px',
width: '90px'
},
{
left: 'calc(75.5% -0)',
top: '379px'
left: 'calc(75.5% - 0px)',
top: '379px',
height: '90px',
width: '90px'
}
];
const template4Box = [
const template5Box = [
{
left: `calc(24.4% - ${leftVal}px)`,
top: '153px'
left: 'calc(24.4%)',
top: '187px',
height: '90px',
width: '90px'
},
{
left: `calc(50% - ${leftVal}px)`,
top: '153px'
left: 'calc(50%)',
top: '187px',
height: '90px',
width: '90px'
},
{
left: `calc(76.6% - ${leftVal}px)`,
top: '153px'
left: 'calc(76.6%)',
top: '187px',
height: '90px',
width: '90px'
},
{
left: `calc(24.4% - ${leftVal}px)`,
top: '261px'
left: 'calc(24.4%)',
top: '295px',
height: '90px',
width: '90px'
},
{
left: `calc(50% - ${leftVal}px)`,
top: '261px'
left: 'calc(50%)',
top: '295px',
height: '90px',
width: '90px'
},
{
left: `calc(76.6% - ${leftVal}px)`,
top: '261px'
left: 'calc(76.6%)',
top: '295px',
height: '90px',
width: '90px'
},
{
left: `calc(24.4% - ${leftVal}px)`,
top: '370px'
left: 'calc(24.4%)',
top: '403px',
height: '90px',
width: '90px'
},
{
left: `calc(50% - ${leftVal}px)`,
top: '370px'
left: 'calc(50%)',
top: '403px',
height: '90px',
width: '90px'
},
{
left: `calc(76.6% - ${leftVal}px)`,
top: '370px'
left: 'calc(76.6%)',
top: '403px',
height: '90px',
width: '90px'
}
];
export default {
......@@ -191,7 +259,7 @@ export default {
boxList: [],
template2Box,
template3Box,
template4Box,
template5Box,
backImageUrl: '',
noticeImageUrl: '',
boxImg: '',
......@@ -199,7 +267,13 @@ export default {
bulletFlag: 0,
bulletImageUrl: '',
backMusicFlag: 0,
adsFlag: 0
adsFlag: 0,
rightBtn: {
5: 'background: #0CC6DA;box-shadow: inset 2px 1px 1px 0px rgba(255, 255, 255, 0.5);',
3: 'background: #27292B;opacity: 0.5;',
2: 'background: #27292B;opacity: 0.75;',
1: 'background: ##27292B;opacity: 0.5;'
}
};
},
props: {
......@@ -216,7 +290,7 @@ export default {
watch: {
templateId(val) {
if (!val) return;
if (['1', '2', '3', '4'].includes(val)) {
if (['1', '2', '3', '5'].includes(val)) {
this.boxList = this['template' + val + 'Box'];
} else {
this.boxList = this.template1Box;
......@@ -252,14 +326,20 @@ img {
}
.template-game {
height: 724px;
margin-top: 70px;
// margin-top: 62px;
}
.bg-image {
width: 375px;
.bg-image-box {
position: absolute;
height: 724px;
overflow-y: auto;
left: 0;
width: 100%;
height: 723px;
max-height: 100%;
overflow: hidden;
}
.bg-image {
width: 100%;
}
.content {
position: relative;
z-index: 1;
......@@ -292,7 +372,6 @@ img {
z-index: 10;
color: white;
font-size: 11px;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
}
......@@ -361,8 +440,6 @@ img {
.box-box img {
position: absolute;
transform: translate(-50%, 0);
width: 90px;
height: 90px;
animation-timing-function: ease-in;
/* animation-name: box-animation; */
animation-duration: 1s;
......@@ -396,10 +473,14 @@ img {
}
.points-count-box {
font-family: DINAlternate-Bold, DINAlternate;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 18px;
position: relative;
height: 57px;
margin-top: 30px;
}
.text-box {
......@@ -408,9 +489,9 @@ img {
}
.text-box .text {
font-family: DINAlternate-Bold, DINAlternate;
font-size: 20px;
font-size: 26px;
font-weight: 600;
color: #388ccc;
color: #000000;
line-height: 23px;
position: relative;
z-index: 2;
......@@ -419,7 +500,7 @@ img {
.text-box .text-shadow {
position: absolute;
left: 50%;
top: 17px;
top: 21px;
transform: translateX(-50%);
width: 41px;
height: 8px;
......@@ -427,7 +508,7 @@ img {
}
.text-box .title-image {
padding-top: 5px;
margin-top: 8px;
width: 48px;
height: 16px;
}
......
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