beelink/public/share.html

291 lines
7.5 KiB
HTML
Raw Normal View History

2020-12-09 17:56:55 +08:00
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
//designWidth:设计稿的实际宽度值,需要根据实际设置
//maxWidth:制作稿的最大宽度值,需要根据实际设置
//这段js的最后面有两个参数记得要设置一个为设计稿实际宽度一个为制作稿最大宽度例如设计稿为750最大宽度为750则为(750,750)
(function (designWidth, maxWidth) {
var doc = document,
win = window,
docEl = doc.documentElement,
remStyle = document.createElement("style"),
tid;
function refreshRem() {
var width = docEl.getBoundingClientRect().width;
// maxWidth = maxWidth || 540; //不需要判断最大宽度
// width > maxWidth && (width = maxWidth);
var rem = width / designWidth;
console.log(rem)
remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';
}
if (docEl.firstElementChild) {
docEl.firstElementChild.appendChild(remStyle);
} else {
var wrap = doc.createElement("div");
wrap.appendChild(remStyle);
doc.write(wrap.innerHTML);
wrap = null;
}
//要等 wiewport 设置好后才能执行 refreshRem不然 refreshRem 会执行2次
refreshRem();
win.addEventListener("resize", function () {
clearTimeout(tid); //防止执行两次
tid = setTimeout(refreshRem, 300);
}, false);
win.addEventListener("pageshow", function (e) {
if (e.persisted) { // 浏览器后退的时候重新计算
clearTimeout(tid);
tid = setTimeout(refreshRem, 300);
}
}, false);
if (doc.readyState === "complete") {
doc.body.style.fontSize = "16px";
} else {
doc.addEventListener("DOMContentLoaded", function (e) {
doc.body.style.fontSize = "px";
}, false);
}
})(1366, 1024);
</script>
<style>
.share {
min-width: 100%;
/* height: 100vh; */
background: url("../../static/images/loginbg.png");
background-size: 100% 130%;
background-repeat: no-repeat;
overflow-x: hidden;
}
.share .active {
background: #f6fcfb !important;
border: 1rem solid #0ebba4 !important;
box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07) !important;
}
.share .box .top {
padding-top: 97rem;
margin-left: 144rem;
color: #121212;
font-weight: bold;
font-size: 18rem;
}
.share .box .top .org_name {
color: #0ebca4;
font-size: 29rem;
margin-left: 7rem;
}
.share .box .mid {
width: 998rem;
margin: 0 auto;
display: flex;
justify-content: space-between;
margin-top: 44rem;
}
.share .box .mid .left {
width: 314rem;
border: 1rem solid #eeeeee;
box-shadow: 1rem 5rem 7rem 0rem rgba(14, 188, 164, 0.07);
border-radius: 8rem;
background: white;
text-align: center;
}
.share .box .mid .left .title {
font-size: 15rem;
color: #121212;
font-weight: bold;
padding-top: 41rem;
margin-bottom: 33rem;
}
.share .box .mid .left .pic {
width: 114rem;
height: 114rem;
}
.share .box .mid .left .ale {
color: #121212;
font-size: 12rem;
margin-top: 70rem;
margin-bottom: 17rem;
}
.share .box .mid .left .link {
color: #4992ec;
font-size: 12rem;
margin-bottom: 31rem;
}
.share .box .mid .right {
width: 627rem;
display: flex;
padding-left: 65rem;
}
.share .box .mid .right .line {
width: 1rem;
height: 221rem;
background: #eeeeee;
margin: auto 0;
margin-left: 65rem;
}
.share .box .mid .right .ewms {
font-size: 12rem;
color: #121212;
align-items: center;
display: flex;
flex-direction: column;
justify-content: center;
margin: 0 auto;
}
.share .box .mid .right .ewms > div {
margin-bottom: 57rem;
}
.share .box .mid .right .ewms .ewm {
width: 61rem;
height: 63rem;
margin-left: 12rem;
}
.share .box .mid .right .ewms .ewm1 {
margin-left: 20rem;
}
.share .bottom {
height: 317rem;
margin-top: 44rem;
background: #08ae98;
color: white;
font-size: 10rem;
}
.share .bottom .content {
width: 415rem;
padding-top: 59rem;
margin-left: 144rem;
}
.share .bottom .content .title {
font-size: 18rem;
font-weight: 800;
}
.share .bottom .content .rowline {
width: 46rem;
height: 2rem;
background: #68df7e;
margin-top: 18rem;
margin-bottom: 34rem;
}
.share .bottom .content .texts {
text-align: left;
margin: 0 auto;
}
.share .bottom .content .relation {
height: 29rem;
display: flex;
line-height: 29rem;
margin-top: 52rem;
color: white;
}
.share .bottom .content .relation .more {
width: 86rem;
height: 29rem;
background: #68df7e;
color: white;
text-align: center;
line-height: 29rem;
border-radius: 15rem;
}
.share .bottom .content .relation .icon {
width: 9rem;
height: 12rem;
margin: auto 0;
margin-right: 6rem;
margin-left: 29rem;
}
.share .bottom .content .relation .email {
width: 15rem;
}
</style>
</head>
<body style="margin: 0">
<div class="share">
<div class="box">
<div class="top">
您好,欢迎来到
<span class="org_name">Beelink</span>
</div>
<div class="mid">
<div class="left active">
<div class="title">如果您是老师</div>
<img src="@/static/images/teacher.png" alt="" class="pic" />
<div class="ale">想要赚取直播收益,请使用电脑端访问一下域名</div>
<div class="link">https://www.beelinkXXXX.com</div>
</div>
<div class="left right">
<div>
<div class="title">如果您是老师</div>
<img src="@/static/images/teacher.png" alt="" class="pic" />
<div class="ale">想要赚取直播收益,请使用电脑端访问一下域名</div>
<div class="link">https://www.beelinkXXXX.com</div>
</div>
<div class="line"></div>
<div class="ewms">
<div>
<span>Google play </span>
<img src="@/static/images/ewm1.png" alt="" class="ewm" />
</div>
<div>
<span> App store </span>
<img src="@/static/images/ewm1.png" alt="" class="ewm ewm1" />
</div>
</div>
</div>
</div>
</div>
<div class="bottom">
<div class="content">
<div class="title">关于 Beelink</div>
<div class="rowline"></div>
<div class="texts">
Beelink平台拥有数千名优秀老师丰富的教育经验和有趣的课堂环境一对一辅导
平台的教务管理、线上课堂、线下课堂、助学互动,课程回放等多项教学功能,让
您利用碎片时间,轻轻松松学会各种语言。
</div>
<div class="relation">
<img src="@/static/images/tel.png" alt="" class="icon" />
<div>136-0111-1111</div>
<img src="@/static/images/email.png" alt="" class="icon email" />
<div>136-0111-1111</div>
</div>
</div>
</div>
</div>
</body>
</html>