Commit 4c0dd041 authored by luofangping's avatar luofangping

fix:落地页

parent 311df345
...@@ -211,7 +211,7 @@ class MyAdvideo { ...@@ -211,7 +211,7 @@ class MyAdvideo {
videoRaw: {}; videoRaw: {};
playResolve: any; playResolve: any;
playPromise: Promise<{}>; playPromise: Promise<{}>;
playReport: any playReport: any
macro: any; macro: any;
constructor(config) { constructor(config) {
this.videoReady = false; this.videoReady = false;
...@@ -380,16 +380,16 @@ class MyAdvideo { ...@@ -380,16 +380,16 @@ class MyAdvideo {
// //
} else if (this.macro === 2) { } else if (this.macro === 2) {
this.landpage = replaceMacro2(this.videoRaw["landingpage"], event, { this.landpage = replaceMacro2(this.videoRaw["landingpage"], event, {
responseTime: this._responseTime+"", responseTime: this._responseTime + "",
readyTime: this._readyTime+"", readyTime: this._readyTime + "",
clickTime: +new Date()+"", clickTime: +new Date() + "",
showTime: this._showTime, showTime: this._showTime,
}); });
const clicknotice = (this.videoRaw["clicknotice"] || []).map(e => { const clicknotice = (this.videoRaw["clicknotice"] || []).map(e => {
return replaceMacro2(e, event, { return replaceMacro2(e, event, {
responseTime: this._responseTime+"", responseTime: this._responseTime + "",
readyTime: this._readyTime+"", readyTime: this._readyTime + "",
clickTime: +new Date()+"", clickTime: +new Date() + "",
showTime: this._showTime showTime: this._showTime
}); });
}); });
......
...@@ -2,96 +2,90 @@ ...@@ -2,96 +2,90 @@
0% { 0% {
transform: translate(0, 100%); transform: translate(0, 100%);
} }
100% { 100% {
transform: translate(0, 0); transform: translate(0, 0);
} }
} }
.video-land-page {
.video-land-page-content {
position: absolute; position: absolute;
width: 100%; width: 100%;
height: 658px; height: 100%;
left: 0;
top: 0;
display: flex;
flex-direction: column;
align-items: center;
background: rgba(0, 0, 0, 0.6);
}
.app-close {
position: absolute;
width: 5.6vw;
height: 3.1vh;
top: 10.7vw;
right: 3.75vh;
}
.app-info-wrap {
padding: 3vh 0;
box-sizing: border-box;
width: 84vw;
height: 51.9vh;
background-color: #fff;
position: absolute;
top: 0;
right: 0;
left: 0;
bottom: 0; bottom: 0;
background:rgba(255,255,255,1); margin: auto;
.video-land-page-content { display: flex;
position: absolute; flex-direction: column;
width: 100%; align-items: center;
height: 100%;
left:0;
top:0;
display:flex;
flex-direction: column;
align-items: center;
}
.app-logo {
width: 125px;
height: 125px;
background-repeat: no-repeat;
background-size: contain;
border-radius: 12px;
margin-top: 40px;
}
.app-name {
width:544px;
font-size:32px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(74,74,74,1);
line-height:45px;
text-align: center;
margin-top:24px;
}
.app-star-num {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 33px;
margin-bottom: 43px;
}
.app-star-icon {
width: 40px;
height: 40px;
background-size: contain;
background-repeat: no-repeat;
margin-right: 10px;
}
.app-star-yellow {
background-image: url('/dafuweng/star-y.png');
}
.app-star-gray {
background-image: url('/dafuweng/star-g.png')
}
.app-star-half {
background-image: url('/dafuweng/star-half.png');
}
.app-button {
width:322px;
height:74px;
background:rgba(74,144,226,1);
border-radius:4px;
margin-top: 74px;
font-size: 34px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(255,255,255,1);
display: flex;
justify-content: center;
align-items: center;
}
.app-comment {
display: flex;
flex-direction: row;
align-content: center;
}
.app-comment-num {
font-size:32px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(153,153,153,1);
line-height:45px
}
} }
.bottom-slide-in {
animation: bottomSlideIn 0.3s forwards; .app-logo {
width: 18.7vw;
margin-top: 4vh;
height: 10.5vh;
background-size: 100%;
} }
.app-name {
font-size: 24px;
font-weight: 400;
color: rgb(70, 63, 63);
line-height: 3.4vh;
text-align: center;
margin-top: 3vh;
}
.app-tips {
margin: 4vh 0;
font-size: 17px;
color: #D2B488;
font-weight: 500;
}
.app-button {
width: 75.2vw;
height: 6.9vh;
margin-bottom: 2vh;
background: rgba(110, 166, 232, 1);
border-radius: 4px;
font-size: 17px;
color: rgba(255, 255, 255, 1);
display: flex;
justify-content: center;
align-items: center;
}
.app-download-num {
font-size: 14px;
font-weight: 400;
color: rgba(132, 132, 132, 1);
line-height: 3vh;
}
\ No newline at end of file
...@@ -14,25 +14,28 @@ export default { ...@@ -14,25 +14,28 @@ export default {
this.el.classList.add('video-land-page'); this.el.classList.add('video-land-page');
this.el.innerHTML = ` this.el.innerHTML = `
<div class="video-land-page-content"> <div class="video-land-page-content">
<div class="app-logo"></div> <img class="app-close"
<div class="app-name"></div> src="data:image/png;base64,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">
<div class="app-star-num"></div> </img>
<div class="app-comment"> <div class="app-info-wrap">
<div class="app-person-icon"></div> <div class="app-logo"></div>
<div class="app-comment-num"></div> <div class="app-name"></div>
<div class="app-tips">新人下载立领60元现金礼包</div>
<div class="app-button"></div>
<div class="app-download-num"></div>
</div> </div>
<div class="app-button"></div>
</div> </div>
`; `;
this.appNameEl = this.el.querySelector('.app-name'); this.appNameEl = this.el.querySelector('.app-name');
this.appCommentNumEl = this.el.querySelector('.app-comment-num'); this.appClose = this.el.querySelector(".app-close");
this.appLogoEl = this.el.querySelector('.app-logo');
this.appButtonEl = this.el.querySelector('.app-button'); this.appButtonEl = this.el.querySelector('.app-button');
this.appIcon = this.el.querySelector('.app-logo'); this.appIcon = this.el.querySelector('.app-logo');
this.starNumEl = this.el.querySelector('.app-star-num'); this.appDownloadNum = this.el.querySelector('.app-download-num');
this.el.addEventListener('click', (e) => { this.el.addEventListener('click', (e) => {
if (e.target === this.appButton) { if (e.target === this.appButton) {
this.$player.event.emit('$footerPageButtonClick'); this.$player.event.emit('$footerPageButtonClick');
} else if (e.target === this.appClose) {
this.hide();
} else { } else {
this.$player.event.emit('$footerPageClick'); this.$player.event.emit('$footerPageClick');
} }
...@@ -40,34 +43,15 @@ export default { ...@@ -40,34 +43,15 @@ export default {
this.hide(); this.hide();
}, },
methods: { methods: {
renderStarNum(num) {
let dom = '';
let renderNum = 5;
while (renderNum > 0) {
if (num >= 1) {
dom += '<div class="app-star-yellow app-star-icon"></div>';
} else if (num === 0.5) {
dom += '<div class="app-star-half app-star-icon"></div>';
} else {
dom += '<div class="app-star-gray app-star-icon"></div>';
}
renderNum -= 1;
num -= 1;
}
console.log(dom);
this.starNumEl.innerHTML = dom;
},
hide() { hide() {
this.el.classList.remove('bottom-slide-in');
this.el.style.display = 'none'; this.el.style.display = 'none';
}, },
show() { show() {
this.el.classList.add('bottom-slide-in');
this.el.style.display = 'block'; this.el.style.display = 'block';
} }
}, },
event: { event: {
$landPageChangeApp({ name, commentNum, starNum, appIcon, buttonText }, show = true) { $landPageChangeApp({ name, appIcon, buttonText, donloadNum }, show = true) {
if (!show) { if (!show) {
this.hide(); this.hide();
return; return;
...@@ -78,12 +62,9 @@ export default { ...@@ -78,12 +62,9 @@ export default {
console.log(name); console.log(name);
this.appNameEl.innerText = name; this.appNameEl.innerText = name;
}; };
if (commentNum) { if (donloadNum) {
this.appCommentNumEl.innerText = `${padNum(commentNum)}个评分`; this.appDownloadNum.innerText = `今天有${donloadNum}人已下载`;
} }
if (typeof starNum === 'number') {
this.renderStarNum(starNum);
};
if (buttonText) { if (buttonText) {
this.appButtonEl.innerText = buttonText; this.appButtonEl.innerText = buttonText;
} }
......
...@@ -674,10 +674,10 @@ class CusButton extends eui.Component { ...@@ -674,10 +674,10 @@ class CusButton extends eui.Component {
} }
//播放时的ui //播放时的ui
var element1:HTMLDivElement=document.createElement("div"); var element1: HTMLDivElement = document.createElement("div");
element1.style.margin="auto"; element1.style.margin = "auto";
element1.style.width="100%"; element1.style.width = "100%";
element1.style.height="100%"; element1.style.height = "100%";
element1.style.overflow="hidden"; element1.style.overflow = "hidden";
element1.style.position="absolute"; element1.style.position = "absolute";
//静音按钮 //静音按钮
This diff is collapsed.
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