Skip to content

M
marketing
Commit 77e8acff by crushh
Options

update: dist

parent b16ca4c6
Showing with 71 additions and 56 deletions
index.html
......@@ -9,8 +9,8 @@
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/fonts/iconfont.css">
<link rel="stylesheet" type="text/css" href="<%= htmlWebpackPlugin.options.BASE_URL %>static/css/common.css">
<!-- <link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_93aeeozj35q.css"> -->
<link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_y7sxqipi2a.css"> <!--GIC3.0营销-->
<script src="//at.alicdn.com/t/font_3229694_y7sxqipi2a.js"></script> <!--GIC3.0营销-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_3229694_f4zx0uhc8y.css"> <!--GIC3.0营销-->
<script src="//at.alicdn.com/t/font_3229694_f4zx0uhc8y.js"></script> <!--GIC3.0营销-->
<link rel="stylesheet" href="//at.alicdn.com/t/font_2996579_875h3lycepk.css"> <!-- 3.0企业 -->
<script src="//at.alicdn.com/t/font_2996579_875h3lycepk.js"></script><!-- 3.0企业 -->
<link src="//at.alicdn.com/t/font_2859043_udehp133w1.css"><!--3.0组件库-->
......
src/views/game/cmh/form.vue
......@@ -18,11 +18,9 @@
</el-menu-item>
</el-menu>
<div class="iphone" v-if="menuActive == 0">
<!-- <img src="../../../assets/img/Navbar.png" alt="" />
<img :src="templateData.length && templateData[0].materialMap.backImageUrl[0].materialValue" style="width: 375px;height: 724px;" />
<div class="mhcontent"></div> -->
<span class="gameTitle">{{ gameName }}</span>
<img src="../../../assets/img/Navbar.png" alt="" />
<gameTemplate />
<gameTemplate :bgImg="bgImg" :tipsImg="tipsImg" :boxImg="boxImg" :adImg="adImg" />
</div>
<div class="iphone" v-else>
<img :src="bcImg[menuActive]" />
......@@ -35,7 +33,7 @@
<dm-step title="步骤三" @click.native="active = 2"></dm-step>
</dm-steps>
<div class="formContent">
<baseConfig :templateArr="templateData" v-if="active == 0" @change="handleBaseConfigChange" />
<baseConfig :templateArr="templateData" v-show="active == 0" @change="handleBaseConfigChange" />
</div>
<dm-form-bottom class="footer">
<el-button type="primary">保存并下一步</el-button>
......@@ -50,7 +48,6 @@ import steps from '@/views/game/dm-steps/steps';
import step from '@/views/game/dm-step/step';
import baseConfig from './base-config.vue';
import { getGameTemplateByType } from '@/service/api/gameApi.js';
import gameTemplate from './gameTemplate';
export default {
data() {
......@@ -60,10 +57,19 @@ export default {
templateData: [],
prizeMax: 10,
prizeMin: 1,
gameName: '游戏名称',
bcImg: {
1: ''
1: require('@/assets/img/mould_01_rule_page.png'),
2: require('@/assets/img/mould_01_prize_page.png'),
3: require('@/assets/img/mould_01_success_page.png'),
4: require('@/assets/img/mould_01_fail_page.png'),
5: require('@/assets/img/mould_01_share_page.png')
},
menuList: ['首页', '活动规则', '我的奖品', '中奖', '未中奖', '分享效果']
menuList: ['首页', '活动规则', '我的奖品', '中奖', '未中奖', '分享效果'],
bgImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png',
tipsImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/tips_btn.png',
boxImg: 'https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png',
adImg: ''
};
},
components: {
......@@ -72,21 +78,28 @@ export default {
baseConfig,
gameTemplate
},
mounted() {
this.getGameTemplateByType();
},
destroyed() {
this.$store.dispatch('setShowLayout', true);
},
methods: {
handleBaseConfigChange(data) {
console.log('handleBaseConfigChange----->');
console.log(data);
const { backImageUrl, noticeImageUrl, adsImageUrl, gameName } = data;
this.bgImg = backImageUrl;
this.tipsImg = noticeImageUrl;
this.boxImg = data.prizeStyleJson[0].imageNoSelectUrl;
this.adImg = adsImageUrl;
this.gameName = gameName;
},
returnNext() {
this.$store.dispatch('setShowLayout', true);
this.$router.go(-1);
},
handleMenuSelect(index, indexPath) {
console.log(index, indexPath);
handleMenuSelect(index) {
this.menuActive = index;
},
getGameTemplateByType() {
......@@ -190,10 +203,22 @@ export default {
}
.iphone {
width: 375px;
background: #ffffff;
border-radius: 8px 8px 0px 0px;
margin: 0 20px 0 13px;
position: relative;
img {
width: 375px;
}
}
.gameTitle {
font-size: 17px;
position: absolute;
color: #000000;
font-weight: 600;
z-index: 100;
top: 56px;
left: 154px;
}
.rightForm {
padding: 30px 20px 0 30px;
......
src/views/game/cmh/gameTemplate.vue
<template>
<div class="template-game">
<img class="bg-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_bg.png" />
<router-link :to="'/rule'">
<img class="bg-image" :src="bgImg" />
<div class="content">
<div class="right-btn rule">游戏规则</div>
</router-link>
<router-link :to="'/rule'">
<div class="right-btn award">我的奖品</div>
</router-link>
<div class="content">
<div class="music-icon iconfont" :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'" @click="playMusic"></div>
<div class="music-icon iconfont" :class="isPlay ? 'icon-yinfu' : 'icon-xingzhuangjiehe2x'"></div>
<div class="integral">100积分/次</div>
<!-- <swiper
......@@ -31,7 +25,7 @@
</swiper> -->
<div class="box-box">
<img v-for="item in boxList" :key="item" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/mould_01_box01.png" :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 }" @click="showOpenBoxDialog = true" />
</div>
<div class="points-count-box">
......@@ -41,9 +35,7 @@
<img class="title-image" src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/我的积分.png" />
</div>
<div class="game-name-box">
<div class="line left"></div>
<div class="game-name">点击盲盒抽取好礼</div>
<div class="line right"></div>
<img :src="tipsImg" style="width: 224px;height: 22px;" />
</div>
<div class="text-box">
<div class="text">55</div>
......@@ -52,20 +44,21 @@
</div>
</div>
<img class="ad-image" src="" mode="widthFix" />
<div class="share-box" @click="clickShareBtn">
<img class="ad-image" :src="adImg" mode="widthFix" v-id="adImg" />
<!-- <div class="share-box" @click="clickShareBtn">
<div class="icon">
<div class="iconfont icon-yaoqing"></div>
</div>
<img src="https://pic01-10001430.cos.ap-shanghai.myqcloud.com/game/template1/邀请助力.png" />
</div>
</div> -->
</div>
</div>
</template>
<script>
import img from '../../../components/upload/img.vue';
export default {
components: { img },
data() {
return {
list: ['刷卡拉拉卡', '阿拉卡萨卢克和史莱克', '刷卡拉拉卡', '阿拉卡萨卢克和史莱克'],
......@@ -112,6 +105,24 @@ export default {
name: '猜盲盒'
};
},
props: {
bgImg: {
type: String,
default: ''
},
tipsImg: {
type: String,
default: ''
},
boxImg: {
type: String,
default: ''
},
adImg: {
type: String,
default: ''
}
},
created() {
document.title = '猜盲盒';
}
......@@ -119,6 +130,9 @@ export default {
</script>
<style lang="scss" scoped>
img {
object-fit: fill;
}
.template-game {
}
.bg-image {
......@@ -176,7 +190,7 @@ export default {
.right-btn {
writing-mode: tb-rl;
position: fixed;
position: absolute;
right: 0;
top: 20px;
padding: 7px 5px;
......@@ -330,31 +344,7 @@ export default {
width: 48px;
height: 16px;
}
.game-name-box {
display: flex;
align-items: center;
position: relative;
}
.game-name-box .line {
width: 13px;
height: 3px;
border-radius: 1px;
}
.game-name-box .line.left {
background: linear-gradient(90deg, rgba(39, 41, 43, 0) 0%, #27292b 100%);
margin-right: 3px;
}
.game-name-box .line.right {
background: linear-gradient(90deg, #27292b 0%, rgba(39, 41, 43, 0) 100%);
margin-left: 3px;
}
.game-name-box .game-name {
color: #27292b;
font-size: 18px;
font-weight: 600;
}
.ad-image {
......
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