314 lines
7.9 KiB
HTML
314 lines
7.9 KiB
HTML
<!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("./img/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;
|
||
margin-right: 58rem;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
.pagetop{
|
||
display: flex;
|
||
/* height: 36px; */
|
||
/* align-items: center; */
|
||
}
|
||
.pagename{
|
||
color: #08AE98;
|
||
font-size: 17rem;
|
||
font-weight: bold;
|
||
line-height: 20rem;
|
||
margin-left: 9rem;
|
||
}
|
||
.logo{
|
||
width: 38rem;
|
||
height: 36rem;
|
||
margin-top: 11rem;
|
||
margin-left: 14rem;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body style="margin: 0">
|
||
<div class="share">
|
||
|
||
<div class="box">
|
||
<div class="pagetop">
|
||
<img src="./img/logo1.png" alt="" class="logo">
|
||
<p class="pagename">Beelink</p>
|
||
</div>
|
||
<div class="top">
|
||
您好，欢迎来到
|
||
<span class="org_name">Beelink</span>
|
||
</div>
|
||
<div class="mid">
|
||
<div class="left active">
|
||
<div class="title">如果您是老师</div>
|
||
<img src="./img/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="./img/xuesheng.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="./img/googleplay.png" alt="" class="ewm" />
|
||
</div>
|
||
<div>
|
||
<span> App store </span>
|
||
<img src="./img/appstore.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="./img/tel.png" alt="" class="icon" />
|
||
<div>136-0111-1111</div>
|
||
|
||
<img src="./img/email.png" alt="" class="icon email" />
|
||
<div>136-0111-1111</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html> |