核心提示：html：!DOCTYPE htmlhtml lang=enheadmeta charset=UTF-8title择天记活动/titlemeta name=keywords content=择天记活动...
html：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>择天记活动</title>
<meta name="keywords" content="择天记活动 - 中国东方航空">
<meta name="description" content="择天记活动 - 中国东方航空">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"
/>
<script src="./js/lib/flexible.min.js?_=1526889405610"></script>
<link href="./css/index.css?_=1526889405610" rel="stylesheet">
</head>
<body>
<p id="content">
<!-- 主页 -->
<p class="home" v-show="turntableShow">
<p class="luckyDraw" id="turntable" :style="rotateDeg"></p>
<p class="start" @click="start"></p>
<p class="ruleTip" @click="ifshowRule">活动规则</p>
<p class="cover" v-show="ifLoading">
<p class="loading" v-show="ifLoading"> </p>
</p>
</p>
<!-- 活动规则 -->
<p class="rule" v-show="ruleShow">
<ul class="ruleBox">
<li>2018年6月1日起至2018年7月18日，凡“择天记手游”玩家注册成为东方万里行会员即可抽取专属礼包一份。</li>
<li>点击抽取礼包，中奖后请登记您的联系方式，我们将在30个工作日内将礼品快递给您。</li>
<li>每个账户仅限抽奖一次，抽奖礼品包含东航蛋机、毛绒小飞机、择天记纪念笔记本、择天记充电线。</li>
<li>在活动过程中，若发现有用户使用不正当手段参与活动，一旦被认定为作弊行为，东航有权单方面取消其活动资格，且不予发放任何活动礼品。</li>
<li>如有疑问，可联系客服邮箱helloceair@ceair.com进行联系。</li>
</ul>
<p class="ruleClick" @click="toPrize"></p>
</p>
</p>
<script type="text/javascript" src="./js/lib/vue.js?_=1526563504633"></script>
<script type="text/javascript" src="./js/lib/axios.min.js?_=1526563504633"></script>
<script src="./js/index.min.js?_=1526889405610"></script>
</body>
</html>
js：
/**
* Created by 000140 on 2018/4/9.
*/
import 'es5';
import {
ga
} from 'ga';
import "./component/background"
import {
message,
isInApp,
saveP,
parse_url,
APPLogin
} from './lib/utils-fn.js';
import {
api
} from "./lib/utils-config.js"
ga();
const {
prizeCode,
p = ""
} = parse_url();
p && saveP(p);
const prizeNum = {
"zetianji2-xiaofeiji": "3",
"zetianji2-danji": "1",
"zetianji2-bijiben": "2",
"zetianji2-chongdianxian": "0",
"thanks": "4"
};
var app = new Vue({
el: "#content",
data: {
ruleShow: false,
turntableShow: true,
rotateDeg: {},
ifLoading: false
},
methods: {
ifshowRule: function () {
this.ruleShow = true;
this.turntableShow = false;
},
toPrize: function () {
this.ruleShow = false;
this.turntableShow = true;
},
getPrize: function () {
location.href = "prize.html"
},
start: function () {
this.ifLoading = true;
axios.post(api.baseUrl + api.lucky, {
PValue: p,
ActivityCode: "HThNyydb/x1HEfo/Z71KIw=="
})
.then(response => {
const {
data
} = response;
this.ifLoading = false;
if (data && data.BCode != "0") {
switch (data.BCode) {
case -1:
APPLogin(data.Data.LoginRedirectUrl, '择天记2活动', "HThNyydb/x1HEfo/Z71KIw==");
break;
case -2:
APPLogin(data.Data.LoginRedirectUrl, '择天记2活动', "HThNyydb/x1HEfo/Z71KIw==");
break;
case -3:
message("活动尚未开始");
break;
case -4:
message("活动已结束");
break;
case -5:
message("每人限抽奖一次，谢谢您的参与！");
return setTimeout(function () {
location.href = "prize.html?prizeCode=" + data.Data.prizeCode + "&p=" + p + "&hasPrize=已";
}, 1000)
break;
case -10:
message("服务排队中，请稍后再试");
}
} else if (data && data.Code == "200") {
this.rotate(prizeNum[data.Data.LotteryList[0].prizeCode], data.Data.LotteryList[0].prizeCode)
}
})
},
rotate: function (num, prizeCode) {
const q = num,
d = 36;
this.rotateDeg = {
webkitTransform: "rotate(" + (2880 + d - (72 * q) + 72) + "deg)",
transform: "rotate(" + (2880 + d - (72 * q) + 72) + "deg)",
transition: "6s",
webkitTransition: "6s"
}
window.setTimeout(() => {
location.href = "prize.html?prizeCode=" + prizeCode + "&p=" + p;
}, 6000)
}
}
});
less：
@import "base";
*{
margin:0;
padding:0;
font-family: "黑体";
}
html,body{
width: 100%;
height: 100%;
overflow-x: hidden;
}
//首页
.home{
width: 100%;
background-image: url("../images/bg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 508px;
padding-bottom:72px;
position: relative;
//display: none;
.luckyDraw{
margin: 0 auto;
background: url("../images/lucky.png") no-repeat;
height: 686px;
width: 686px;
background-size:100% 100%;
margin-bottom: 39px;
}
.start{
width: 173px;
height: 225px;
background-image: url(../images/go.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 289px;
top:714px;
}
.ruleTip{
margin: 0 auto;
width: 180px;
height: 30px;
text-align: center;
color: #282f4f;
font-size: 28px;
font-style: italic;
text-decoration: underline;
}
}
//规则
.rule{
width: 100%;
height: 1334px;
background-image: url("../images/ruleBg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 261px;
padding-bottom: 255px;
//display: none;
.ruleBox{
margin: 0 auto;
padding: 23px;
height: 490px;
width: 705px;
color: #368ebb;
margin-left: 37px;
}
ul {
font-size: 24px;
font-family: "宋体";
li{
list-style-type:disc;
margin: 13px 0;
}
}
.ruleClick{
margin: 0 auto;
margin-top:234px;
width: 638px;
height: 86px;
background-image: url(../images/ruleClick.png);
background-size: 100% auto;
background-repeat: no-repeat;
}
}
//未抽中
.fail{
width: 100%;
height: 1334px;
background-image: url("../images/fail.jpg");
background-repeat:no-repeat;
background-size: 100% 100%;
}
// information获奖
.information{
width: 100%;
height: 1334px;
background-image: url("../images/submitBg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 193px;
color: #1f3d77;
//display: none;
.infoBox{
margin: 0 auto;
height: 207px;
width: 750px;
text-align: center;
:nth-child(1){
font-size: 48px;
}
:nth-child(2){
display: block;
margin: 0 auto;
width: auto;
height: 65px;
background: url() center center no-repeat;
background-size: auto 100%;
}
:nth-child(3){
font-size: 24px;
}
:nth-child(4){
font-size: 24px;
}
}
.infoSubBox{
margin: 0 auto;
margin-top:65px;
width: 705px;
height: 430px;
padding: 38px 25px;
}
.formBox{
width: 750px;
height: 76px;
line-height: 76px;
overflow: hidden;
margin-bottom: 20px;
span{
display: block;
float: left;
width: 20px;
text-align: left;
color: #f34609;
}
input{
display: block;
float: left;
width: 630px;
height: 76px;
border: 2px solid #ab712c;
border-radius:10px;
padding-left:30px;
box-sizing: border-box;
}
}
.insubBtn{
margin:0 auto;
margin-top:109px;
width: 637px;
height: 86px;
background-image: url("../images/submit.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
}
.personlSucc{
position: absolute;
top:424px;
left:144px;
width: 460px;
height: 380px;
background-color: white;
border-radius: 10px;
z-index: 10;
overflow: hidden;
text-align: center;
font-size: 36px;
.shutDown{
width: 31px;
height: 31px;
float: right;
margin-top:21px;
margin-right:31px;
background-image: url("../images/shutdown.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
.perCenter{
margin:0px auto;
margin-top:56px;
width: 144px;
height: 144px;
background-image: url("../images/tipSuccess.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
.perTip{
margin-top:38px;
}
}
.loading{
background-image: url(../images/loading.gif);
width: 120px;
height: 60px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: auto;
}
[v-cloak]{
display: none;
}
.checkBox{
background-color: #ffe6ad;
border: 1px solid #fb3c55;
width: 600px;
margin: 20px auto;
#title{
width: 450px;
height: 80px;
background-color: #ff3948;
text-align: center;
line-height: 80px;
margin: 20px auto;
color:#efe6ad;
letter-spacing: 20px;
}
.contact{
font-size: 30px;
color: #a2a2a2;
}
.addrDetail, .addrDistrict{
font-size: 24px;
color:#a2a2a2;
}
.infoBox{
width: 450px;
margin: 20px auto;
background-color: #ffeec6;
padding: 20px 10px;
span{
display: inline-block;
width: 30px;
height: 30px;
font-size: 20px;
color:#ffe6ad;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
p{
margin-left: 35px;
}
.contact{
margin-top: -40px;
}
}
}
.flexBox{display: flex;}
.addrBtn{
flex: 1;
margin: 20px ;
border-radius: 15px;
background-color: #fede2b;
color: #fb3157;
text-align: center;
line-height: 80px;
font-size: 38px;
}
.editBox{
width: 600px;
margin:200px auto;
.inputBox{
padding-top: 20px;
height:550px;
background-color: #ffe6ad;
}
#title{
width: 450px;
height: 80px;
background-color: #ff3948;
text-align: center;
line-height: 80px;
margin: 20px auto;
color:#efe6ad;
letter-spacing: 20px;
}
input{
display: block;
width: 450px;
height: 80px;
border: none;
margin: 20px auto;
padding-left: 20px;
}
#district{
width: 450px;
height: 80px;
border: none;
line-height: 80px;
margin: 20px auto;
padding-left: 20px;
background-color: #fff;
}
.word{
padding-top: 50px;
color: #ff3948;
text-align: center
}
.saveAddr{
width: 450px;
height: 80px;
background-color: #fede2b;
color: #ff3948;
font-size: 34px;
margin: 40px auto;
text-align: center;
line-height: 80px;
letter-spacing: 20px;
border-radius: 15px;
}
}
@import "base";
*{
margin:0;
padding:0;
font-family: "黑体";
}
html,body{
width: 100%;
height: 100%;
overflow-x: hidden;
}
//首页
.home{
width: 100%;
background-image: url("../images/bg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 508px;
padding-bottom:72px;
position: relative;
//display: none;
.luckyDraw{
margin: 0 auto;
background: url("../images/lucky.png") no-repeat;
height: 686px;
width: 686px;
background-size:100% 100%;
margin-bottom: 39px;
}
.start{
width: 173px;
height: 225px;
background-image: url(../images/go.png);
background-size: 100% 100%;
background-repeat: no-repeat;
position: absolute;
left: 289px;
top:714px;
}
.ruleTip{
margin: 0 auto;
width: 180px;
height: 30px;
text-align: center;
color: #282f4f;
font-size: 28px;
font-style: italic;
text-decoration: underline;
}
}
//规则
.rule{
width: 100%;
height: 1334px;
background-image: url("../images/ruleBg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 261px;
padding-bottom: 255px;
//display: none;
.ruleBox{
margin: 0 auto;
padding: 23px;
height: 490px;
width: 705px;
color: #368ebb;
margin-left: 37px;
}
ul {
font-size: 24px;
font-family: "宋体";
li{
list-style-type:disc;
margin: 13px 0;
}
}
.ruleClick{
margin: 0 auto;
margin-top:234px;
width: 638px;
height: 86px;
background-image: url(../images/ruleClick.png);
background-size: 100% auto;
background-repeat: no-repeat;
}
}
//未抽中
.fail{
width: 100%;
height: 1334px;
background-image: url("../images/fail.jpg");
background-repeat:no-repeat;
background-size: 100% 100%;
}
// information获奖
.information{
width: 100%;
height: 1334px;
background-image: url("../images/submitBg.jpg");
background-repeat:no-repeat;
background-size: 100% auto;
padding-top: 193px;
color: #1f3d77;
//display: none;
.infoBox{
margin: 0 auto;
height: 207px;
width: 750px;
text-align: center;
:nth-child(1){
font-size: 48px;
}
:nth-child(2){
display: block;
margin: 0 auto;
width: auto;
height: 65px;
background: url() center center no-repeat;
background-size: auto 100%;
}
:nth-child(3){
font-size: 24px;
}
:nth-child(4){
font-size: 24px;
}
}
.infoSubBox{
margin: 0 auto;
margin-top:65px;
width: 705px;
height: 430px;
padding: 38px 25px;
}
.formBox{
width: 750px;
height: 76px;
line-height: 76px;
overflow: hidden;
margin-bottom: 20px;
span{
display: block;
float: left;
width: 20px;
text-align: left;
color: #f34609;
}
input{
display: block;
float: left;
width: 630px;
height: 76px;
border: 2px solid #ab712c;
border-radius:10px;
padding-left:30px;
box-sizing: border-box;
}
}
.insubBtn{
margin:0 auto;
margin-top:109px;
width: 637px;
height: 86px;
background-image: url("../images/submit.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
}
.personlSucc{
position: absolute;
top:424px;
left:144px;
width: 460px;
height: 380px;
background-color: white;
border-radius: 10px;
z-index: 10;
overflow: hidden;
text-align: center;
font-size: 36px;
.shutDown{
width: 31px;
height: 31px;
float: right;
margin-top:21px;
margin-right:31px;
background-image: url("../images/shutdown.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
.perCenter{
margin:0px auto;
margin-top:56px;
width: 144px;
height: 144px;
background-image: url("../images/tipSuccess.png");
background-repeat:no-repeat;
background-size: 100% auto;
}
.perTip{
margin-top:38px;
}
}
.loading{
background-image: url(../images/loading.gif);
width: 120px;
height: 60px;
background-size: 100% 100%;
background-repeat: no-repeat;
margin: auto;
}
[v-cloak]{
display: none;
}
.checkBox{
background-color: #ffe6ad;
border: 1px solid #fb3c55;
width: 600px;
margin: 20px auto;
#title{
width: 450px;
height: 80px;
background-color: #ff3948;
text-align: center;
line-height: 80px;
margin: 20px auto;
color:#efe6ad;
letter-spacing: 20px;
}
.contact{
font-size: 30px;
color: #a2a2a2;
}
.addrDetail, .addrDistrict{
font-size: 24px;
color:#a2a2a2;
}
.infoBox{
width: 450px;
margin: 20px auto;
background-color: #ffeec6;
padding: 20px 10px;
span{
display: inline-block;
width: 30px;
height: 30px;
font-size: 20px;
color:#ffe6ad;
border-radius: 50%;
text-align: center;
line-height: 30px;
}
p{
margin-left: 35px;
}
.contact{
margin-top: -40px;
}
}
}
.flexBox{display: flex;}
.addrBtn{
flex: 1;
margin: 20px ;
border-radius: 15px;
background-color: #fede2b;
color: #fb3157;
text-align: center;
line-height: 80px;
font-size: 38px;
}
.editBox{
width: 600px;
margin:200px auto;
.inputBox{
padding-top: 20px;
height:550px;
background-color: #ffe6ad;
}
#title{
width: 450px;
height: 80px;
background-color: #ff3948;
text-align: center;
line-height: 80px;
margin: 20px auto;
color:#efe6ad;
letter-spacing: 20px;
}
input{
display: block;
width: 450px;
height: 80px;
border: none;
margin: 20px auto;
padding-left: 20px;
}
#district{
width: 450px;
height: 80px;
border: none;
line-height: 80px;
margin: 20px auto;
padding-left: 20px;
background-color: #fff;
}
.word{
padding-top: 50px;
color: #ff3948;
text-align: center
}
.saveAddr{
width: 450px;
height: 80px;
background-color: #fede2b;
color: #ff3948;
font-size: 34px;
margin: 40px auto;
text-align: center;
line-height: 80px;
letter-spacing: 20px;
border-radius: 15px;
}
}
