1203 lines
29 KiB
HTML
1203 lines
29 KiB
HTML
<!--#
|
|
layout("/mobile/platform.html"){
|
|
#-->
|
|
|
|
<style>
|
|
.happy-border {
|
|
background-color: white;
|
|
height: 100vh;
|
|
width: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.happy {
|
|
height: 100%;
|
|
width: 100%;
|
|
position: relative;
|
|
background-color: #feb0bd;
|
|
background-position: 0 0, 100px 100px;
|
|
background-size: 200px 200px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/*absolute 定位*/
|
|
|
|
.triangle,
|
|
.cord {
|
|
position: absolute;
|
|
}
|
|
|
|
/*菜带*/
|
|
|
|
.ribbon,
|
|
.ribbon1,
|
|
.ribbon2,
|
|
.ribbon3,
|
|
.ribbon4 {
|
|
position: absolute;
|
|
}
|
|
|
|
.ribbon1 {
|
|
top: -105px;
|
|
left: 210px;
|
|
transform: rotate(35deg);
|
|
}
|
|
|
|
.ribbon2 {
|
|
top: 505px;
|
|
left: 10px;
|
|
transform: rotate(-90deg) scale(0.5);
|
|
}
|
|
|
|
.ribbon4 {
|
|
top: 705px;
|
|
left: -60px;
|
|
width: 400px;
|
|
height: 100px;
|
|
transform: rotate(0deg) scale(0.6) rotateX(180deg);
|
|
z-index: 5;
|
|
}
|
|
|
|
/**绳子*/
|
|
|
|
.cord {
|
|
width: 800px;
|
|
height: 300px;
|
|
left: -180px;
|
|
top: -310px;
|
|
background-color: transparent;
|
|
border: 1px solid rgba(41, 41, 41, 0.5);
|
|
border-radius: 100%;
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
/*旗子的三角形*/
|
|
|
|
.triangle {
|
|
width: 50px;
|
|
height: 50px;
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7f7c5 50%, #e7f7c5 100%);
|
|
}
|
|
|
|
.triangle-1 {
|
|
top: 30px;
|
|
left: -10px;
|
|
transform: rotate(-30deg);
|
|
}
|
|
|
|
.triangle-2 {
|
|
top: 30px;
|
|
left: 30px;
|
|
transform: rotate(-45deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #c5e4f9 50%, #c5e4f9 100%);
|
|
}
|
|
|
|
.triangle-3 {
|
|
top: 27px;
|
|
left: 80px;
|
|
transform: rotate(-65deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #b3fdc4 50%, #b3fdc4 100%);
|
|
}
|
|
|
|
.triangle-4 {
|
|
top: 13px;
|
|
left: 120px;
|
|
transform: rotate(-25deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #e7d7ff 50%, #e7d7ff 100%);
|
|
}
|
|
|
|
.triangle-5 {
|
|
top: 10px;
|
|
left: 170px;
|
|
transform: rotate(-55deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f466b1 50%, #f466b1 100%);
|
|
}
|
|
|
|
.triangle-6 {
|
|
top: -3px;
|
|
left: 220px;
|
|
transform: rotate(-75deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f1c13b 50%, #f1c13b 100%);
|
|
}
|
|
|
|
.triangle-7 {
|
|
top: -11px;
|
|
left: 260px;
|
|
transform: rotate(-45deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #f74631 50%, #f74631 100%);
|
|
}
|
|
|
|
.triangle-8 {
|
|
top: -36px;
|
|
left: 310px;
|
|
transform: rotate(-25deg);
|
|
background: linear-gradient(to bottom right, transparent 0%, transparent 50%, #d279b3 50%, #d279b3 100%);
|
|
}
|
|
|
|
/*气球*/
|
|
|
|
.balloon-main,
|
|
.balloon,
|
|
.balloon > .circle,
|
|
.balloon-line,
|
|
.balloon-cord,
|
|
.balloon-cord1 {
|
|
position: absolute;
|
|
}
|
|
|
|
.balloon-main {
|
|
transform: rotate(5deg);
|
|
z-index: 3;
|
|
}
|
|
|
|
.balloon-main1 {
|
|
top: 50px;
|
|
right: 190px;
|
|
transform: rotate(-35deg) scale(0.5);
|
|
}
|
|
|
|
.balloon-main2 {
|
|
top: 480px;
|
|
right: 90px;
|
|
transform: rotate(11deg) scale(0.3);
|
|
}
|
|
|
|
.balloon-main3 {
|
|
top: 630px;
|
|
right: 190px;
|
|
transform: rotate(-31deg) scale(0.3);
|
|
}
|
|
|
|
.balloon > .circle {
|
|
width: 60px;
|
|
height: 60px;
|
|
border-radius: 100%;
|
|
background-color: #f74631;
|
|
border: 2px solid black;
|
|
}
|
|
|
|
.balloon > .circle::after {
|
|
position: absolute;
|
|
content: "";
|
|
width: 10px;
|
|
height: 10px;
|
|
left: 25px;
|
|
top: 30px;
|
|
background-color: #ee8377;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.balloon > .circle::before {
|
|
position: absolute;
|
|
content: "";
|
|
width: 6px;
|
|
height: 6px;
|
|
left: 35px;
|
|
top: 40px;
|
|
background-color: #ee8377;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.balloon1,
|
|
.balloon2,
|
|
.balloon3,
|
|
.balloon4 {
|
|
z-index: 3;
|
|
}
|
|
|
|
.balloon1 {
|
|
top: 100px;
|
|
left: 100px;
|
|
}
|
|
|
|
.balloon2 {
|
|
top: 120px;
|
|
left: 30px;
|
|
transform: rotate(-45deg) scale(0.9);
|
|
}
|
|
|
|
.balloon2 > .circle {
|
|
background-color: #c6feff;
|
|
}
|
|
|
|
.balloon2 > .circle::after,
|
|
.balloon2 > .circle::before {
|
|
background-color: #a3e7f8;
|
|
}
|
|
|
|
.balloon3 {
|
|
top: 150px;
|
|
left: 30px;
|
|
transform: rotate(-45deg) scale(1.1);
|
|
}
|
|
|
|
.balloon3 > .circle {
|
|
background-color: #ffd458;
|
|
}
|
|
|
|
.balloon3 > .circle::after,
|
|
.balloon3 > .circle::before {
|
|
background-color: #ffedbe;
|
|
}
|
|
|
|
.balloon4 {
|
|
top: 150px;
|
|
left: 85px;
|
|
transform: rotate(15deg) scale(1.5);
|
|
}
|
|
|
|
.balloon4 > .circle {
|
|
background-color: #d179b3;
|
|
}
|
|
|
|
.balloon4 > .circle::after,
|
|
.balloon4 > .circle::before {
|
|
background-color: #f78ed2;
|
|
}
|
|
|
|
.balloon5 {
|
|
top: 150px;
|
|
left: -20px;
|
|
transform: rotate(-15deg) scale(2);
|
|
z-index: 2;
|
|
}
|
|
|
|
.balloon5 > .circle {
|
|
background-color: #b3fec4;
|
|
}
|
|
|
|
.balloon5 > .circle::after,
|
|
.balloon5 > .circle::before {
|
|
background-color: #ceeed5;
|
|
}
|
|
|
|
.balloon6 {
|
|
top: 110px;
|
|
left: 150px;
|
|
transform: rotate(35deg) scale(2.2);
|
|
z-index: 1;
|
|
}
|
|
|
|
.balloon6 > .circle {
|
|
background-color: #7b9bce;
|
|
}
|
|
|
|
.balloon6 > .circle::after,
|
|
.balloon6 > .circle::before {
|
|
background-color: #c2d6f2;
|
|
}
|
|
|
|
.balloon-line {
|
|
height: 30px;
|
|
width: 2px;
|
|
background-color: black;
|
|
left: 30px;
|
|
top: 62px;
|
|
}
|
|
|
|
/*绑气球的线*/
|
|
|
|
.balloon-cord {
|
|
height: 10px;
|
|
width: 10px;
|
|
top: 305px;
|
|
left: 82px;
|
|
background-color: pink;
|
|
border-radius: 100%;
|
|
transform: rotate(20deg);
|
|
border-bottom: 3px solid black;
|
|
border-left: 2px solid black;
|
|
border-right: 2px solid black;
|
|
z-index: 3;
|
|
}
|
|
|
|
.balloon-cord1 {
|
|
height: 100px;
|
|
width: 100px;
|
|
top: 315px;
|
|
left: 65px;
|
|
z-index: 3;
|
|
background-color: transparent;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.balloon-cord1 > .line {
|
|
position: absolute;
|
|
}
|
|
|
|
.balloon-cord1 > .line1,
|
|
.balloon-cord1 > .line2 {
|
|
width: 120px;
|
|
height: 180px;
|
|
border: 2px solid black;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.balloon-cord1 > .line1 {
|
|
top: -23px;
|
|
left: 10px;
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
.balloon-cord1 > .line2 {
|
|
top: -23px;
|
|
left: 20px;
|
|
transform: rotate(-30deg);
|
|
}
|
|
|
|
/*相框*/
|
|
|
|
.frame,
|
|
.frame > .box1,
|
|
.frame > .box2 {
|
|
position: absolute;
|
|
}
|
|
|
|
.frame {
|
|
top: 180px;
|
|
left: 35px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.frame > .box1 {
|
|
width: 400px;
|
|
height: 400px;
|
|
border: 10px solid white;
|
|
background-color: #fbdadf;
|
|
}
|
|
|
|
.frame > .box2 {
|
|
top: 30px;
|
|
left: 45px;
|
|
width: 350px;
|
|
height: 350px;
|
|
border: 10px solid white;
|
|
background-color: #feb0bd;
|
|
transform: rotate(-15deg);
|
|
}
|
|
|
|
/*蛋糕*/
|
|
|
|
.cake-main,
|
|
.cake1,
|
|
.icing,
|
|
.candle,
|
|
.cream,
|
|
.cake,
|
|
.flame {
|
|
position: absolute;
|
|
}
|
|
|
|
.cake-main {
|
|
transform: rotate(-15deg) scale(1.2);
|
|
right: -85px;
|
|
}
|
|
|
|
.cake {
|
|
height: 80px;
|
|
width: 190px;
|
|
background-color: #fcf18e;
|
|
}
|
|
|
|
.cake1 {
|
|
top: -70px;
|
|
transform: scale(0.8);
|
|
}
|
|
|
|
.cake2 {
|
|
top: -125px;
|
|
transform: scale(0.6);
|
|
}
|
|
|
|
.cake-main {
|
|
left: 180px;
|
|
top: 490px;
|
|
z-index: 3;
|
|
}
|
|
|
|
.cream {
|
|
background-color: white;
|
|
height: 20px;
|
|
width: 100%;
|
|
top: 40px;
|
|
}
|
|
|
|
.icing {
|
|
background-color: white;
|
|
height: 15px;
|
|
width: 30px;
|
|
border-radius: 0 0 100% 100%;
|
|
}
|
|
|
|
.icing1 {
|
|
left: 5px;
|
|
}
|
|
|
|
.icing2 {
|
|
left: 35px;
|
|
}
|
|
|
|
.icing3 {
|
|
left: 65px;
|
|
}
|
|
|
|
.icing4 {
|
|
left: 95px;
|
|
}
|
|
|
|
.icing5 {
|
|
left: 125px;
|
|
}
|
|
|
|
.icing6 {
|
|
left: 155px;
|
|
}
|
|
|
|
.candle {
|
|
background-color: #f8f8f8;
|
|
height: 50px;
|
|
width: 15px;
|
|
z-index: -3;
|
|
bottom: 60px;
|
|
left: 88px;
|
|
top: -152px;
|
|
}
|
|
|
|
.flame {
|
|
background-color: #fbb200;
|
|
height: 18px;
|
|
width: 18px;
|
|
border-radius: 0 50% 50% 50%;
|
|
top: -22px;
|
|
transform: rotate(45deg);
|
|
}
|
|
|
|
/*礼盒*/
|
|
|
|
.gift-main,
|
|
.gift-main > .box-bottom,
|
|
.gift-main > .box-top,
|
|
.gift-main > .cord,
|
|
.gift-main > .gift-cord,
|
|
.gift-main > .gift-flower {
|
|
position: absolute;
|
|
}
|
|
|
|
.gift-main {
|
|
top: 690px;
|
|
left: 30px;
|
|
}
|
|
|
|
.gift-main > .box-bottom {
|
|
width: 100px;
|
|
height: 110px;
|
|
background: repeating-linear-gradient(to right bottom, #cce1f9 0%, #cce1f9 5%, #f7f1c1 10%, #f7f1c1 15%);
|
|
}
|
|
|
|
.gift-main > .box-top {
|
|
width: 110px;
|
|
height: 20px;
|
|
background-color: #a2b9e3;
|
|
left: -5px;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.gift-main > .gift-cord {
|
|
height: 130px;
|
|
width: 15px;
|
|
background-color: #f1f4fb;
|
|
left: 40px;
|
|
}
|
|
|
|
.gift-main > .gift-flower {
|
|
height: 30px;
|
|
width: 20px;
|
|
background-color: transparent;
|
|
border: 3px #efeff4 solid;
|
|
top: -30px;
|
|
left: 35px;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.gift-main > .gift-flower1 {
|
|
left: 45px;
|
|
transform: rotate(35deg) rotateY(60deg);
|
|
}
|
|
|
|
.gift-main > .gift-flower2 {
|
|
left: 23px;
|
|
transform: rotate(-35deg) rotateY(-60deg);
|
|
}
|
|
|
|
.gift-main > .gift-flower3 {
|
|
top: -25px;
|
|
left: 16px;
|
|
transform: rotate(-85deg) rotateY(-60deg);
|
|
}
|
|
|
|
.gift-main > .gift-flower4 {
|
|
top: -25px;
|
|
left: 52px;
|
|
transform: rotate(85deg) rotateY(60deg);
|
|
}
|
|
|
|
.gift-main1 {
|
|
top: 730px;
|
|
left: 140px;
|
|
}
|
|
|
|
.gift-main1 > .box-bottom,
|
|
.gift-main3 > .box-bottom,
|
|
.gift-main5 > .box-bottom {
|
|
background: repeating-linear-gradient(to left bottom, #fdf6c0 0%, #fdf6c0 5%, #f2e280 10%, #f2e280 15%);
|
|
}
|
|
|
|
.gift-main1 > .box-top,
|
|
.gift-main3 > .box-top,
|
|
.gift-main5 > .box-top {
|
|
background-color: #f2e280;
|
|
}
|
|
|
|
.gift-main1 > .gift-cord,
|
|
.gift-main3 > .gift-cord,
|
|
.gift-main5 > .gift-cord {
|
|
background-color: #c9dafb;
|
|
}
|
|
|
|
.gift-main2 {
|
|
top: 700px;
|
|
left: 240px;
|
|
}
|
|
|
|
.gift-main3 {
|
|
top: 780px;
|
|
left: 350px;
|
|
}
|
|
|
|
.gift-main4 {
|
|
top: 730px;
|
|
left: 450px;
|
|
}
|
|
|
|
.gift-main5 {
|
|
top: 730px;
|
|
left: 0px;
|
|
}
|
|
|
|
/* 文本内容 */
|
|
|
|
.text,
|
|
.textbg,
|
|
.textbg > .text,
|
|
.textbg1,
|
|
.bybg {
|
|
position: absolute;
|
|
}
|
|
|
|
.text {
|
|
width: 100%;
|
|
height: 100%;
|
|
text-align: center;
|
|
position: absolute;
|
|
z-index: 4;
|
|
right: 0;
|
|
top: 239px;
|
|
color: #f74232;
|
|
}
|
|
|
|
.text15 {
|
|
transform: rotate(15deg);
|
|
left: 360px;
|
|
top: 180px;
|
|
color: rgb(110, 110, 226);
|
|
}
|
|
|
|
.text1 {
|
|
font-size: 71px;
|
|
}
|
|
|
|
.textbg,
|
|
.bybg {
|
|
width: 350px;
|
|
height: 80px;
|
|
border: 3px #c2364b solid;
|
|
background-color: #ffeae8;
|
|
top: 550px;
|
|
left: 20px;
|
|
z-index: 3;
|
|
transform: rotate(10deg);
|
|
}
|
|
|
|
/*.textbg1 {
|
|
top: 7px;
|
|
width: 450px;
|
|
height: 40px;
|
|
border: 2px #c2364b dashed;
|
|
z-index: 4;
|
|
}*/
|
|
|
|
.textbg > .text {
|
|
top: 20px;
|
|
/*left: 11px;*/
|
|
text-align: center;
|
|
font-size: 20px;
|
|
font-weight: 800;
|
|
color: #cc5c4b;
|
|
}
|
|
|
|
.bybg {
|
|
width: 300px;
|
|
margin-top: 25px;
|
|
text-align: center;
|
|
height: 40px;
|
|
border: 3px #c2364b solid;
|
|
background-color: #f54a3b;
|
|
top: 610px;
|
|
}
|
|
|
|
.bybg > .text {
|
|
top: 6px;
|
|
left: 70px;
|
|
font-size: 10px;
|
|
font-weight: 800;
|
|
color: white;
|
|
}
|
|
|
|
/*帽子*/
|
|
|
|
.hat,
|
|
.hat > .body,
|
|
.hat > .top,
|
|
.hat > .bottom,
|
|
.hat > .bottom1,
|
|
.hat > .bottom2,
|
|
.hat > .bottom3,
|
|
.hat > .bottom4,
|
|
.hat > .bottom5,
|
|
.hat > .bottom6,
|
|
.hat > .bottom7,
|
|
.hat > .bottom8,
|
|
.hat > .bottom9,
|
|
.hat > .bottom10,
|
|
.hat > .bottom11 {
|
|
position: absolute;
|
|
z-index: 3;
|
|
}
|
|
|
|
.hat {
|
|
width: 100px;
|
|
height: 150px;
|
|
top: 100px;
|
|
left: 240px;
|
|
z-index: 4;
|
|
transform: rotate(-30deg);
|
|
}
|
|
|
|
.hat > .body {
|
|
width: 0;
|
|
border-top: 50px solid transparent;
|
|
border-left: 50px solid transparent;
|
|
border-right: 50px solid transparent;
|
|
border-bottom: 130px solid #799cce;
|
|
top: -40px;
|
|
}
|
|
|
|
.hat > .top,
|
|
.hat > .bottom,
|
|
.hat > .bottom1,
|
|
.hat > .bottom2,
|
|
.hat > .bottom3,
|
|
.hat > .bottom4,
|
|
.hat > .bottom5,
|
|
.hat > .bottom6,
|
|
.hat > .bottom7,
|
|
.hat > .bottom8,
|
|
.hat > .bottom9,
|
|
.hat > .bottom10,
|
|
.hat > .bottom11 {
|
|
height: 20px;
|
|
width: 20px;
|
|
left: 42px;
|
|
background-color: #f74232;
|
|
border-radius: 100%;
|
|
}
|
|
|
|
.hat > .bottom1 {
|
|
bottom: 0;
|
|
background-color: #d4f3dc;
|
|
}
|
|
|
|
.hat > .bottom2 {
|
|
bottom: 1px;
|
|
left: 25px;
|
|
}
|
|
|
|
.hat > .bottom3 {
|
|
bottom: 1px;
|
|
left: 60px;
|
|
}
|
|
|
|
.hat > .bottom4 {
|
|
bottom: 2px;
|
|
left: 10px;
|
|
background-color: #d4f3dc;
|
|
}
|
|
|
|
.hat > .bottom5 {
|
|
bottom: 2px;
|
|
left: 76px;
|
|
background-color: #d4f3dc;
|
|
}
|
|
|
|
.hat > .bottom6 {
|
|
bottom: 3px;
|
|
left: 0px;
|
|
}
|
|
|
|
.hat > .bottom7 {
|
|
bottom: 3px;
|
|
left: 85px;
|
|
}
|
|
|
|
.hat > .bottom8 {
|
|
bottom: 5px;
|
|
left: -13px;
|
|
background-color: #d4f3dc;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hat > .bottom9 {
|
|
bottom: 5px;
|
|
left: 92px;
|
|
background-color: #d4f3dc;
|
|
z-index: 2;
|
|
}
|
|
|
|
.hat > .bottom10 {
|
|
bottom: 10px;
|
|
left: -11px;
|
|
z-index: 1;
|
|
}
|
|
|
|
.hat > .bottom11 {
|
|
bottom: 10px;
|
|
left: 88px;
|
|
z-index: 1;
|
|
}
|
|
|
|
|
|
#music {
|
|
width: 50px;
|
|
height: 50px;
|
|
position: absolute;
|
|
top: 15px;
|
|
right: 15px;
|
|
animation: playing infinite linear 2s;
|
|
z-index: 99;
|
|
border-radius: 150px
|
|
}
|
|
|
|
@keyframes playing {
|
|
from {
|
|
transform: rotate(0deg);
|
|
}
|
|
to {
|
|
transform: rotate(360deg);
|
|
}
|
|
}
|
|
|
|
.button {
|
|
width: 20px;
|
|
height: 20px;
|
|
background-color: Transparent;
|
|
background-repeat: no-repeat;
|
|
border: none;
|
|
cursor: pointer;
|
|
overflow: hidden;
|
|
}
|
|
</style>
|
|
|
|
<div class="happy-border" id="app">
|
|
<div class="happy">
|
|
<!--小旗子-->
|
|
<div class="ribbon">
|
|
<div class="cord"></div>
|
|
<div class="triangle triangle-1"></div>
|
|
<div class="triangle triangle-2"></div>
|
|
<div class="triangle triangle-3"></div>
|
|
<div class="triangle triangle-4"></div>
|
|
<div class="triangle triangle-5"></div>
|
|
<div class="triangle triangle-6"></div>
|
|
<div class="triangle triangle-7"></div>
|
|
<div class="triangle triangle-8"></div>
|
|
</div>
|
|
|
|
<!--彩旗-->
|
|
<div class="ribbon1">
|
|
<div class="cord"></div>
|
|
<div class="triangle triangle-1"></div>
|
|
<div class="triangle triangle-2"></div>
|
|
<div class="triangle triangle-3"></div>
|
|
<div class="triangle triangle-4"></div>
|
|
<div class="triangle triangle-5"></div>
|
|
<div class="triangle triangle-6"></div>
|
|
<div class="triangle triangle-7"></div>
|
|
<div class="triangle triangle-8"></div>
|
|
</div>
|
|
<!--旗子-->
|
|
<div class="ribbon4">
|
|
<div class="cord"></div>
|
|
<div class="triangle triangle-1"></div>
|
|
<div class="triangle triangle-2"></div>
|
|
<div class="triangle triangle-3"></div>
|
|
<div class="triangle triangle-4"></div>
|
|
<div class="triangle triangle-5"></div>
|
|
<div class="triangle triangle-6"></div>
|
|
<div class="triangle triangle-7"></div>
|
|
<div class="triangle triangle-8"></div>
|
|
</div>
|
|
<!--气球-->
|
|
<div class="balloon-main">
|
|
<div class="balloon balloon1">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon2">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon3">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon4">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon5">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon6">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
|
|
<div class="balloon-cord"></div>
|
|
<div class="balloon-cord1">
|
|
<div class="line line1"></div>
|
|
<div class="line line2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="balloon-main balloon-main1">
|
|
<div class="balloon balloon1">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon2">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon3">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon4">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon5">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon6">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon-cord"></div>
|
|
<div class="balloon-cord1">
|
|
<div class="line line1"></div>
|
|
<div class="line line2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="balloon-main balloon-main2">
|
|
<div class="balloon balloon1">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon2">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon3">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon4">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon5">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon6">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon-cord"></div>
|
|
<div class="balloon-cord1">
|
|
<div class="line line1"></div>
|
|
<div class="line line2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="balloon-main balloon-main3">
|
|
<div class="balloon balloon1">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon2">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon3">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon4">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon5">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon balloon6">
|
|
<div class="circle"></div>
|
|
<div class="balloon-line"></div>
|
|
</div>
|
|
<div class="balloon-cord"></div>
|
|
<div class="balloon-cord1">
|
|
<div class="line line1"></div>
|
|
<div class="line line2"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--相框-->
|
|
<div class="frame">
|
|
<div class="box1"></div>
|
|
<div class="box2"></div>
|
|
</div>
|
|
|
|
<!--蛋糕-->
|
|
<div class="cake-main">
|
|
<div class="cake">
|
|
<div class="cream"></div>
|
|
<div class="icing icing1"></div>
|
|
<div class="icing icing2"></div>
|
|
<div class="icing icing3"></div>
|
|
<div class="icing icing4"></div>
|
|
<div class="icing icing5"></div>
|
|
<div class="icing icing6"></div>
|
|
</div>
|
|
<div class="cake cake1">
|
|
<div class="cream"></div>
|
|
<div class="icing icing1"></div>
|
|
<div class="icing icing2"></div>
|
|
<div class="icing icing3"></div>
|
|
<div class="icing icing4"></div>
|
|
<div class="icing icing5"></div>
|
|
<div class="icing icing6"></div>
|
|
</div>
|
|
<div class="cake cake2">
|
|
<div class="cream"></div>
|
|
<div class="icing icing1"></div>
|
|
<div class="icing icing2"></div>
|
|
<div class="icing icing3"></div>
|
|
<div class="icing icing4"></div>
|
|
<div class="icing icing5"></div>
|
|
<div class="icing icing6"></div>
|
|
</div>
|
|
<div class="candle">
|
|
<div class="flame"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--礼盒-->
|
|
<div>
|
|
<div class="gift-main">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
|
|
<div class="gift-main gift-main1">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
|
|
<div class="gift-main gift-main2">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
|
|
<div class="gift-main gift-main3">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
|
|
<div class="gift-main gift-main4">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
|
|
<div class="gift-main gift-main5">
|
|
<div class="box-bottom"></div>
|
|
<div class="box-top"></div>
|
|
<div class="gift-cord"></div>
|
|
<div class="gift-flower"></div>
|
|
<div class="gift-flower gift-flower1"></div>
|
|
<div class="gift-flower gift-flower2"></div>
|
|
<div class="gift-flower gift-flower3"></div>
|
|
<div class="gift-flower gift-flower4"></div>
|
|
</div>
|
|
</div>
|
|
|
|
<!--帽子-->
|
|
<div class="hat">
|
|
<div class="body"></div>
|
|
<div class="top"></div>
|
|
<div class="bottom1"></div>
|
|
<div class="bottom2"></div>
|
|
<div class="bottom3"></div>
|
|
<div class="bottom4"></div>
|
|
<div class="bottom5"></div>
|
|
<div class="bottom6"></div>
|
|
<div class="bottom7"></div>
|
|
<div class="bottom8"></div>
|
|
<div class="bottom9"></div>
|
|
<div class="bottom10"></div>
|
|
<div class="bottom11"></div>
|
|
</div>
|
|
|
|
<!--生日快乐-->
|
|
<div class="text" style="-webkit-text-stroke: 3px white;">
|
|
<h1 class="text1">
|
|
<span class="span1">Happy</span>
|
|
<span>Birthday</span>
|
|
</h1>
|
|
</div>
|
|
<!--<div class="text text15" style="-webkit-text-stroke: 3px white;">
|
|
<h1 class="text1">
|
|
<span class="span1">23</span>
|
|
</h1>
|
|
</div>-->
|
|
<!--板块文本-->
|
|
<div class="textbg">
|
|
<div class=" textbg1"></div>
|
|
<div class="text">
|
|
{{message}}
|
|
</div>
|
|
</div>
|
|
<!--by 署名-->
|
|
<div class="bybg">
|
|
<div class="text" style="font-size: 16px; text-align: left;">
|
|
{{presenter}}祝<span style="color: greenyellow; font-size: 20px;">{{received}}</span>生日快乐！
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<img id="music" @click="startOrStop()" src="/assets/mobile/img/birthday/music.png"/>
|
|
<audio id="audio" ref="audio" autoplay loop
|
|
src="/assets/mobile/img/birthday/birthdaySong.mp3"></audio>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
//--创建触摸监听，当浏览器打开页面时，触摸屏幕触发事件，进行音频播放
|
|
document.addEventListener('touchstart', function() {
|
|
document.getElementById('audio').play()
|
|
})
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data() {
|
|
return {
|
|
//赠送者
|
|
presenter: '张三',
|
|
//收礼者
|
|
received: '您',
|
|
//祝福语
|
|
message: '生日快乐',
|
|
state: '1',
|
|
id: window.location.search.substring(1).substring(3, window.location.search.substring(1).length)
|
|
}
|
|
},
|
|
methods: {
|
|
startOrStop() {
|
|
var audio = document.getElementById("audio")
|
|
if (this.state === '1') {;
|
|
document.getElementById("music").style['animationPlayState'] = 'paused';
|
|
audio.pause()
|
|
this.state = '0';
|
|
} else if (this.state === '0') {
|
|
document.getElementById("music").style['animationPlayState'] = 'running';
|
|
this.state = '1';
|
|
audio.play();
|
|
}
|
|
},
|
|
async searchGreetingById() {
|
|
const resp = await $.get('/mobile/birthday/greeting/findOne?id=' + this.id)
|
|
if (resp.code === 0) {
|
|
this.presenter = resp.data.username
|
|
if (resp.data.message) {
|
|
this.message = resp.data.message
|
|
} else {
|
|
this.message = '生日快乐'
|
|
}
|
|
}
|
|
}
|
|
},
|
|
async created() {
|
|
await this.searchGreetingById();
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<!--#
|
|
}
|
|
#-->
|