init
This commit is contained in:
jiangrui
commit
55050d9c3a
|
|
@ -0,0 +1,36 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
window.addEventListener("message", (e) => {
|
||||||
|
console.log(e.data);
|
||||||
|
// console.log(parent.$(window.parent.document).find("#regis"));
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// window.onload = function () {
|
||||||
|
// var iframe = document.getElementById("myiframe");
|
||||||
|
// var iframeDoc = iframe.contentDocument || iframe.contentWindow.document;
|
||||||
|
|
||||||
|
// // 获取子页面的元素
|
||||||
|
// var elementInChildPage = iframeDoc.getElementById(
|
||||||
|
// "element_id_in_child"
|
||||||
|
// );
|
||||||
|
|
||||||
|
// // 对获取到的元素进行操作
|
||||||
|
// if (elementInChildPage) {
|
||||||
|
// // 例如，改变背景颜色
|
||||||
|
// elementInChildPage.style.backgroundColor = "red";
|
||||||
|
// }
|
||||||
|
// };
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe src="demo1.html" frameborder="0"></iframe>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,19 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script>
|
||||||
|
window.addEventListener("message", (e) => {
|
||||||
|
console.log(e.data);
|
||||||
|
console.log(document.getElementById('b'));
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="b">bbbb</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,252 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>云看达州</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 212px;
|
||||||
|
/* background: url("./img/bg.png"); */
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
padding: 140px 0 0 13px;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* margin: 60px 0 0 13px; */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.searchList {
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
left: 0;
|
||||||
|
top: 50px;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.searchItem {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
.iframe {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function share() {}
|
||||||
|
$(function () {
|
||||||
|
let id = getParameterByName("id");
|
||||||
|
let url = getParameterByName("url");
|
||||||
|
$("#iframe").attr("src", url);
|
||||||
|
// console.log(payload);
|
||||||
|
getWebPage(id);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<iframe id="iframe" src="" class="iframe" frameborder="0"></iframe>
|
||||||
|
<div class="body">
|
||||||
|
<!-- -->
|
||||||
|
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Binary file not shown.
|
After Width: | Height: | Size: 951 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 787 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 80 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 870 B |
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 2.0 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 22 KiB |
|
|
@ -0,0 +1,293 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>云看达州</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 212px;
|
||||||
|
/* background: url("./img/bg.png"); */
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
/* overflow: hidden; */
|
||||||
|
padding: 140px 0 0 13px;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
/* margin: 60px 0 0 13px; */
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.searchList {
|
||||||
|
position: absolute;
|
||||||
|
background: #fff;
|
||||||
|
border: 1px solid #eee;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
left: 0;
|
||||||
|
top: 50px;
|
||||||
|
border-radius: 15px;
|
||||||
|
padding: 20px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
.searchItem {
|
||||||
|
margin-bottom: 5px;
|
||||||
|
border-bottom: 1px solid #eee;
|
||||||
|
padding-bottom: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
function share() {}
|
||||||
|
$(function () {
|
||||||
|
getWebPage();
|
||||||
|
console.log(
|
||||||
|
document.querySelector(".searchList"),
|
||||||
|
document.querySelector(".btn_search")
|
||||||
|
);
|
||||||
|
window.searchList = document.querySelector(".searchList");
|
||||||
|
|
||||||
|
window.btnSearch = document.querySelector(".btn_search");
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<!-- <div class="slogan"></div> -->
|
||||||
|
<div class="searchBox">
|
||||||
|
<input class="searchInput" type="text" />
|
||||||
|
<button class="btn_search" onclick="handleSearch()">搜索</button>
|
||||||
|
<div class="searchList" id="searchList">
|
||||||
|
<!-- <div class="searchItem">1</div>
|
||||||
|
<div class="searchItem">2</div>
|
||||||
|
<div class="searchItem">3</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">推荐直播</div>
|
||||||
|
<div class="videoList scroll" id="liveList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">云看达州</div>
|
||||||
|
<div class="videoList scroll" id="blockList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,318 @@
|
||||||
|
var BASE = "https://ykdz.yundazhou.com/api";
|
||||||
|
var currentId = undefined;
|
||||||
|
|
||||||
|
function getParameterByName(name) {
|
||||||
|
name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
|
||||||
|
var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
|
||||||
|
results = regex.exec(location.search);
|
||||||
|
return results === null
|
||||||
|
? ""
|
||||||
|
: decodeURIComponent(results[1].replace(/\+/g, " "));
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWebPage(id) {
|
||||||
|
console.log(id);
|
||||||
|
$.ajax({
|
||||||
|
url: BASE + "/pageInfo/getWebPage?id=" + (id ? id : ""),
|
||||||
|
type: "GET",
|
||||||
|
// data: JSON.stringify(param),
|
||||||
|
// data: { },
|
||||||
|
// params: { id },
|
||||||
|
async: true,
|
||||||
|
dataType: "json",
|
||||||
|
contentType: "application/json; charset=UTF-8",
|
||||||
|
success: function (data) {
|
||||||
|
if (data.c === 200) {
|
||||||
|
console.log(data);
|
||||||
|
currentId = data.d.id;
|
||||||
|
|
||||||
|
$(".body").css("background", data.d.pageColor);
|
||||||
|
$(".footer").css("background", data.d.pageColor);
|
||||||
|
$("html").css("background", data.d.pageColor);
|
||||||
|
|
||||||
|
$("#shadow").css(
|
||||||
|
"background",
|
||||||
|
`linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 151, 45, 0) 0%,
|
||||||
|
${data.d.pageColor} 100%
|
||||||
|
)`
|
||||||
|
);
|
||||||
|
$("#liveList").empty();
|
||||||
|
$("#blockList").empty();
|
||||||
|
if (data.d.videoInfo2 !== null) {
|
||||||
|
data.d.videoInfo2.map((item) => {
|
||||||
|
let str = `<div class="videoItem videoItem_${
|
||||||
|
data.d.pageStyle === "" ? "theme2" : data.d.pageStyle
|
||||||
|
}" onclick="jumpLiveDetail('${item.id}')">
|
||||||
|
<div class="dz">${item.numLike}人点赞</div>
|
||||||
|
<img class="poster poster_${
|
||||||
|
data.d.pageStyle === "" ? "theme2" : data.d.pageStyle
|
||||||
|
}" src="${item.imageUrl}" alt="" />
|
||||||
|
<div class="videoItemTitle">${item.name}</div>
|
||||||
|
</div>`;
|
||||||
|
$("#liveList").append(str);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
$("#numShare").text(data.d.numShare);
|
||||||
|
$("#numLike").text(data.d.numLike);
|
||||||
|
|
||||||
|
$("#bottomInfo1").text(data.d.bottomInfo1);
|
||||||
|
$("#bottomInfo2").text(data.d.bottomInfo2);
|
||||||
|
$("#bottomInfo3").text(data.d.bottomInfo3);
|
||||||
|
|
||||||
|
if (id) {
|
||||||
|
$(".header").css("background", `url(${data.d.mainImageUrl})`);
|
||||||
|
|
||||||
|
if (data.d.videoInfo1) {
|
||||||
|
$("#video").attr("src", data.d.videoInfo1.playUrl);
|
||||||
|
} else {
|
||||||
|
$("video").parent().remove();
|
||||||
|
}
|
||||||
|
|
||||||
|
if (data.d.pageInfoResponseInfos) {
|
||||||
|
data.d.pageInfoResponseInfos.map((item) => {
|
||||||
|
let strBlock = `<div class="videoItem" onclick="jumpBlock('${item.pageUrl}','${item.id}')">
|
||||||
|
<img src="${item.pageImageUrl}" alt="" />
|
||||||
|
<div>${item.name}</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
$("#blockList").append(strBlock);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
$("#blockList").parent().remove();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
$(".header").css("background", `url(${data.d.mainImageUrl})`);
|
||||||
|
data.d.pageInfoResponseInfos.map((item) => {
|
||||||
|
let strBlock = `<div class="videoItem" onclick="jumpTheme('${item.pageUrl}','${item.pageStyle}','${item.id}')">
|
||||||
|
<img src="${item.pageImageUrl}" alt="" />
|
||||||
|
<div>${item.name}</div>
|
||||||
|
</div>`;
|
||||||
|
|
||||||
|
$("#blockList").append(strBlock);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function getWebVideoInfo(id) {
|
||||||
|
// /pageInfo/getWebVideoInfo
|
||||||
|
currentId = id;
|
||||||
|
$.ajax({
|
||||||
|
url: BASE + "/pageInfo/getWebVideoInfo?id=" + (id ? id : ""),
|
||||||
|
type: "GET",
|
||||||
|
// data: JSON.stringify(param),
|
||||||
|
// data: { },
|
||||||
|
// params: { id },
|
||||||
|
async: true,
|
||||||
|
dataType: "json",
|
||||||
|
contentType: "application/json; charset=UTF-8",
|
||||||
|
success: function (data) {
|
||||||
|
if (data.c === 200) {
|
||||||
|
console.log(data);
|
||||||
|
player = TCPlayer("player-container-id", {
|
||||||
|
sources: [
|
||||||
|
{
|
||||||
|
src: data.d.playUrl,
|
||||||
|
},
|
||||||
|
],
|
||||||
|
licenseUrl:
|
||||||
|
"https://license.vod2.myqcloud.com/license/v2/1329781370_1/v_cube.license",
|
||||||
|
licenseKey: "42d4b304d6b3ea8b3f80906fd6f48a2d",
|
||||||
|
});
|
||||||
|
$(".btn_shareBox .right").text(data.d.numShare);
|
||||||
|
$(".btn_thumbBox .right").text(data.d.numLike);
|
||||||
|
$(".video-title").text(data.d.name);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
function jumpLiveDetail(id) {
|
||||||
|
location.href = "live.html?id=" + id;
|
||||||
|
}
|
||||||
|
function jumpTheme(pageUrl, theme, id) {
|
||||||
|
if (pageUrl !== "null" && pageUrl !== "") {
|
||||||
|
location.href = `frame.html?url=${pageUrl}&id=${id}`;
|
||||||
|
} else {
|
||||||
|
location.href = `${theme}.html?id=${id}`;
|
||||||
|
}
|
||||||
|
// location.href = `${theme}`;
|
||||||
|
// '${item.pageStyle}.html?id=${item.id}'
|
||||||
|
}
|
||||||
|
function jumpBlock(pageUrl, id) {
|
||||||
|
// location.href = "qk.html?id=" + id;
|
||||||
|
if (pageUrl !== "null" && pageUrl !== "") {
|
||||||
|
location.href = `frame.html?url=${pageUrl}&id=${id}`;
|
||||||
|
} else {
|
||||||
|
location.href = `qk.html?id=${id}`;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function likeShare(type, page) {
|
||||||
|
// /pageInfo/likeShare
|
||||||
|
let payload = {
|
||||||
|
id: currentId,
|
||||||
|
type: type,
|
||||||
|
type2: page,
|
||||||
|
};
|
||||||
|
$.ajax({
|
||||||
|
url: BASE + "/pageInfo/likeShare",
|
||||||
|
type: "POST",
|
||||||
|
// data: JSON.stringify(param),
|
||||||
|
data: JSON.stringify(payload),
|
||||||
|
// params: { id },
|
||||||
|
async: true,
|
||||||
|
dataType: "json",
|
||||||
|
contentType: "application/json; charset=UTF-8",
|
||||||
|
success: function (data) {
|
||||||
|
if (data.c === 200) {
|
||||||
|
$("#numLike").text();
|
||||||
|
if (type === 2) {
|
||||||
|
copyTextToClipboard(location.href);
|
||||||
|
msg.info("链接已复制到剪贴板");
|
||||||
|
}
|
||||||
|
if (!getParameterByName("id")) {
|
||||||
|
getWebPage();
|
||||||
|
} else {
|
||||||
|
if (page === 2) {
|
||||||
|
$.ajax({
|
||||||
|
url: BASE + "/pageInfo/getWebVideoInfo?id=" + currentId,
|
||||||
|
type: "GET",
|
||||||
|
async: true,
|
||||||
|
dataType: "json",
|
||||||
|
contentType: "application/json; charset=UTF-8",
|
||||||
|
success: function (data) {
|
||||||
|
if (data.c === 200) {
|
||||||
|
console.log(data);
|
||||||
|
|
||||||
|
$(".btn_shareBox .right").text(data.d.numShare);
|
||||||
|
$(".btn_thumbBox .right").text(data.d.numLike);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
getWebPage(currentId);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
}
|
||||||
|
async function copyTextToClipboard(text) {
|
||||||
|
try {
|
||||||
|
await navigator.clipboard.writeText(text);
|
||||||
|
console.log("Text copied to clipboard");
|
||||||
|
} catch (err) {
|
||||||
|
console.error("Failed to copy: ", err);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
function handleSearch() {
|
||||||
|
let keyword = $(".searchInput").val();
|
||||||
|
$(".searchList").show();
|
||||||
|
window.btnSearch.addEventListener("click", toggleSearchList);
|
||||||
|
document.addEventListener("click", closeSearchList);
|
||||||
|
// console.log(temp);
|
||||||
|
|
||||||
|
$.ajax({
|
||||||
|
url: BASE + "/pageInfo/searchList?keyword=" + keyword,
|
||||||
|
type: "GET",
|
||||||
|
// data: JSON.stringify(param),
|
||||||
|
// data: JSON.stringify(payload),
|
||||||
|
// params: keyword ,
|
||||||
|
async: true,
|
||||||
|
dataType: "json",
|
||||||
|
contentType: "application/json; charset=UTF-8",
|
||||||
|
success: function (data) {
|
||||||
|
if (data.c === 200) {
|
||||||
|
console.log(data);
|
||||||
|
$(".searchList").empty();
|
||||||
|
data.d.map((item) => {
|
||||||
|
let str = `<div class="searchItem" onclick=jumpSearch('${item.id}',${item.type},'${item.pageStyle}','${item.pageUrl}')>${item.name}</div>`;
|
||||||
|
$(".searchList").append(str);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
});
|
||||||
|
// $(".searchList").focus();
|
||||||
|
|
||||||
|
// var _searchList = $(".searchList");
|
||||||
|
// console.log(searchList, searchList.style.display, _searchList.is(":hidden"));
|
||||||
|
// if (_searchList.is(":hidden")) {
|
||||||
|
// $(".searchList").show();
|
||||||
|
// setTimeout(() => {
|
||||||
|
// document.addEventListener("click", function (e) {
|
||||||
|
// console.log(
|
||||||
|
// "addEventListener",
|
||||||
|
// "searchList:",
|
||||||
|
// searchList,
|
||||||
|
// "e.target:",
|
||||||
|
// e.target
|
||||||
|
// );
|
||||||
|
// if (!searchList.contains(e.target)) {
|
||||||
|
// searchList.style.display = "none";
|
||||||
|
// document.removeEventListener("click");
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
// }, 1000);
|
||||||
|
// } else {
|
||||||
|
// $(".searchList").hide();
|
||||||
|
// }
|
||||||
|
|
||||||
|
// 当点击searchList外部时，关闭searchList
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleSearchList() {
|
||||||
|
// var searchList = document.querySelector(".searchList");
|
||||||
|
console.log(12);
|
||||||
|
if ($(".searchList").is(":hidden")) {
|
||||||
|
setTimeout(() => {
|
||||||
|
document.addEventListener("click", function (e) {
|
||||||
|
console.log(
|
||||||
|
"addEventListener",
|
||||||
|
"searchList:",
|
||||||
|
searchList,
|
||||||
|
"e.target:",
|
||||||
|
e.target
|
||||||
|
);
|
||||||
|
if (!searchList.contains(e.target)) {
|
||||||
|
searchList.style.display = "none";
|
||||||
|
document.removeEventListener("click");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}, 1000);
|
||||||
|
} else {
|
||||||
|
$(".searchList").hide();
|
||||||
|
// 移除事件监听器
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSearchList(e) {
|
||||||
|
console.log(22);
|
||||||
|
if (!window.searchList.contains(e.target) && e.target !== window.btnSearch) {
|
||||||
|
window.searchList.style.display = "none";
|
||||||
|
btnSearch.removeEventListener("click", toggleSearchList);
|
||||||
|
document.removeEventListener("click", closeSearchList);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function jumpSearch(id, type, theme, pageUrl) {
|
||||||
|
if (pageUrl) {
|
||||||
|
location.href = `frame.html?id=${id}&url=${pageUrl}`;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
switch (type) {
|
||||||
|
case 2:
|
||||||
|
location.href = `${theme}.html?id=${id}`;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
location.href = "qk.html?id=" + id;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
location.href = "live.html?id=" + id;
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,721 @@
|
||||||
|
/**
|
||||||
|
* 信息提醒，不依赖任何乱七八糟框架及其他文件，导入 msg.js ，msg.info('哈哈哈') 一句代码使用！
|
||||||
|
* 作者：管雷鸣
|
||||||
|
* 个人网站：www.guanleiming.com
|
||||||
|
* 个人微信: xnx3com
|
||||||
|
* 公司：潍坊雷鸣云网络科技有限公司
|
||||||
|
* 公司官网：www.leimingyun.com
|
||||||
|
*/
|
||||||
|
var msg = {
|
||||||
|
/*
|
||||||
|
* 当前msg的版本
|
||||||
|
*/
|
||||||
|
version:1.11,
|
||||||
|
/*
|
||||||
|
* 错误的图
|
||||||
|
*/
|
||||||
|
errorIcon:'<svg style="width: 3rem; height:3rem; padding: 1.5rem; padding-bottom: 1.1rem; box-sizing: content-box;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6977"><path d="M696.832 326.656c-12.8-12.8-33.28-12.8-46.08 0L512 465.92 373.248 327.168c-12.8-12.8-33.28-12.8-46.08 0s-12.8 33.28 0 46.08L466.432 512l-139.264 139.264c-12.8 12.8-12.8 33.28 0 46.08s33.28 12.8 46.08 0L512 558.08l138.752 139.264c12.288 12.8 32.768 12.8 45.568 0.512l0.512-0.512c12.8-12.8 12.8-33.28 0-45.568L557.568 512l139.264-139.264c12.8-12.8 12.8-33.28 0-46.08 0 0.512 0 0 0 0zM512 51.2c-254.464 0-460.8 206.336-460.8 460.8s206.336 460.8 460.8 460.8 460.8-206.336 460.8-460.8-206.336-460.8-460.8-460.8z m280.064 740.864c-74.24 74.24-175.104 116.224-280.064 115.712-104.96 0-205.824-41.472-280.064-115.712S115.712 616.96 115.712 512s41.472-205.824 116.224-280.064C306.176 157.696 407.04 115.712 512 116.224c104.96 0 205.824 41.472 280.064 116.224 74.24 74.24 116.224 175.104 115.712 280.064 0.512 104.448-41.472 205.312-115.712 279.552z" fill="#ffffff" p-id="6978"></path></svg>',
|
||||||
|
/*
|
||||||
|
* 当前弹出窗口显示的id。每次弹出窗口都会生成一个随机id
|
||||||
|
*/
|
||||||
|
currentWindowsId:0,
|
||||||
|
/*
|
||||||
|
* 弹出层的div id相关
|
||||||
|
*/
|
||||||
|
id:{
|
||||||
|
/*
|
||||||
|
* 弹出层 div id 的随机命名数组。这里存的是精确到毫秒的时间戳。 比如命名时会采用 wangmarket_loading + 此处id时间戳 的方式
|
||||||
|
*/
|
||||||
|
idArray : new Array(),
|
||||||
|
/*
|
||||||
|
* 从数组中增加一个值，这个值增加到数组最后，并将增加的值返回
|
||||||
|
*/
|
||||||
|
create:function(){
|
||||||
|
//创建一个随机id
|
||||||
|
var thisId = new Date().getTime()+'';
|
||||||
|
//将随机id加入弹窗id序列
|
||||||
|
msg.id.idArray[msg.id.idArray.length] = thisId;
|
||||||
|
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 从数组中删除值。并将删除的值返回。
|
||||||
|
* id 要删除的value。如果不传入，那默认删除最后一个
|
||||||
|
*/
|
||||||
|
delete:function(id = ''){
|
||||||
|
var thisId = '';
|
||||||
|
if(id == ''){
|
||||||
|
//取出数组最后一个值
|
||||||
|
thisId = msg.id.idArray[msg.id.idArray.length-1];
|
||||||
|
//删除数组最后一个值
|
||||||
|
msg.id.idArray.pop();
|
||||||
|
}else{
|
||||||
|
thisId = id;
|
||||||
|
|
||||||
|
//删除指定的id
|
||||||
|
for(var i = 0; i<msg.id.idArray.length; i++){
|
||||||
|
if(msg.id.idArray[i] == id){
|
||||||
|
msg.id.idArray.splice(i,1); //删除这个元素
|
||||||
|
return id;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
/*
|
||||||
|
* 这里就只是单纯存放 info\success\failure 这三个，免得同时点了几个后不自动取消的bug
|
||||||
|
*/
|
||||||
|
tishiIdArray: new Array()
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 成功的提醒
|
||||||
|
* @param text 提示文字
|
||||||
|
* @param func 关闭提示后，要执行的方法
|
||||||
|
*/
|
||||||
|
success:function(text,func){
|
||||||
|
this.closeAllSimpleMsg();
|
||||||
|
|
||||||
|
var thisId = this.show(text, '<svg style="width: 3rem; height:3rem; padding: 1.5rem; padding-bottom: 1.1rem; box-sizing: content-box;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2351"><path d="M384 887.456L25.6 529.056 145.056 409.6 384 648.544 878.944 153.6 998.4 273.056z" p-id="2352" fill="#ffffff"></path></svg>');
|
||||||
|
msg.id.tishiIdArray[msg.id.tishiIdArray.length] = thisId;
|
||||||
|
this.delayClose(1800, func, thisId);
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取元素距离body距离
|
||||||
|
* @param {*} element
|
||||||
|
* @returns
|
||||||
|
*/
|
||||||
|
getElementDistanceToTop: function (element) {
|
||||||
|
var rect = element.getBoundingClientRect();
|
||||||
|
var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
|
||||||
|
return rect.top + scrollTop;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 显示tips提示窗口
|
||||||
|
* @param options 参数(id、text、tip宽度、高度、背景色、字体色、显示方向direction)
|
||||||
|
* @return 返回弹出层的id。可以使用 msg.close(id) 来关闭指定的弹出层
|
||||||
|
*/
|
||||||
|
showTips:function(options){
|
||||||
|
// 获取元素
|
||||||
|
var dom = document.getElementById(options.id);
|
||||||
|
|
||||||
|
var rect=dom.getBoundingClientRect()
|
||||||
|
// console.log(rect)
|
||||||
|
|
||||||
|
// 获取元素距离上方的距离
|
||||||
|
var topDistance=this.getElementDistanceToTop(dom)
|
||||||
|
// 获取元素距离左侧的距离
|
||||||
|
, leftDistance =rect.x
|
||||||
|
// 获取元素宽度
|
||||||
|
,widthDom = dom.offsetWidth
|
||||||
|
// 获取元素高度
|
||||||
|
,heightDom = dom.offsetHeight
|
||||||
|
// 获取视口的高度和宽度
|
||||||
|
,windowHeight = window.innerHeight
|
||||||
|
,windowWidth = window.innerWidth
|
||||||
|
// 计算元素距离下方的距离
|
||||||
|
,bottomDistance = windowHeight - topDistance - dom.offsetHeight
|
||||||
|
// 计算元素距离右侧的距离
|
||||||
|
,rightDistance = windowWidth - leftDistance - widthDom;
|
||||||
|
|
||||||
|
// console.log("距离上方的距离：" + topDistance);
|
||||||
|
// console.log("距离下方的距离：" + bottomDistance);
|
||||||
|
// console.log("距离左侧的距离：" + leftDistance);
|
||||||
|
// console.log("距离右侧的距离：" + rightDistance);
|
||||||
|
|
||||||
|
// 提示框离内容的距离
|
||||||
|
const specd="20px"
|
||||||
|
// 默认背景色#10a6a8
|
||||||
|
// const bg_color="rgba(46, 196, 182, 0.75)";
|
||||||
|
,background="#10a6a8"
|
||||||
|
// 默认颜色
|
||||||
|
,color="#FFFFFF"
|
||||||
|
// 默认宽度
|
||||||
|
,width="200px"
|
||||||
|
// 默认高度
|
||||||
|
,height="auto"
|
||||||
|
//默认方向
|
||||||
|
,direction="right";
|
||||||
|
|
||||||
|
if(!options.background) options.background=background;
|
||||||
|
if(!options.color) options.color=color;
|
||||||
|
if(!options.width) options.width=width;
|
||||||
|
if(!options.height) options.height=height;
|
||||||
|
if(!options.direction) options.direction=direction;
|
||||||
|
|
||||||
|
// console.log(options)
|
||||||
|
|
||||||
|
if(options.direction!=="left" && options.direction!=="right"&&options.direction!=="top"&&options.direction!=="bottom") return console.log("请输入正确的tips方向")
|
||||||
|
|
||||||
|
//创建一个随机id
|
||||||
|
var thisId = msg.id.create();
|
||||||
|
|
||||||
|
/** 显示前，如果还有其他正在显示的，将其都关掉 **/
|
||||||
|
//this.close();
|
||||||
|
if(document.getElementsByTagName("body") != null && document.getElementsByTagName("body").length > 0 && dom instanceof Element){
|
||||||
|
var div=document.createElement("div");
|
||||||
|
div.id = 'wangmarket_popup_'+thisId;
|
||||||
|
|
||||||
|
div.style = `position:absolute;padding:10px;border-radius:2px;
|
||||||
|
${options.direction == "left" || options.direction == "right" ? `top: ${topDistance}px;`:""}
|
||||||
|
${options.direction == "left" ? `right: calc(${rightDistance}px + ${widthDom}px + ${parseInt(specd)/2}px);`:""}
|
||||||
|
${options.direction == "right" ? `left: calc(${leftDistance}px + ${widthDom}px + ${parseInt(specd) / 2}px);`:""}
|
||||||
|
|
||||||
|
${options.direction == "top" || options.direction == "bottom" ? `left:${leftDistance}px;`:""}
|
||||||
|
${options.direction == "top" ? `bottom: calc(${bottomDistance}px + ${heightDom}px + ${parseInt(specd) / 2}px);`:""}
|
||||||
|
${options.direction == "bottom" ? `top: calc(${topDistance}px + ${heightDom}px + ${parseInt(specd) / 2}px);`:""}
|
||||||
|
background:${options.background};
|
||||||
|
z-index: 2147483647;width: ${options.width};
|
||||||
|
box-shadow: 0px 3px 10px 0px rgba(143, 140, 140, 0.31);
|
||||||
|
height:${options.height};box-sizing:border-box`;
|
||||||
|
|
||||||
|
// 添加一个初始样式，使创建的元素在初始时缩放为0
|
||||||
|
div.style.transform = "scale(0.8)";
|
||||||
|
// 添加过渡效果
|
||||||
|
div.style.transition = "transform 0.1s ease-in-out";
|
||||||
|
div.innerHTML = ''
|
||||||
|
+ `<div id="tip" style="font-size:12px;line-height:18px;text-align:left;color:${options.color};white-space: initial">`+
|
||||||
|
options.text
|
||||||
|
+'</div>';
|
||||||
|
|
||||||
|
div.classList.add('_custom_deng');
|
||||||
|
var pseudoElementStyle = `
|
||||||
|
content: " ";
|
||||||
|
position: absolute;
|
||||||
|
${options.direction=="left"||options.direction=="right"?"top: 13px;":""}
|
||||||
|
${options.direction=="top"||options.direction=="bottom"?"left: 10%;":""}
|
||||||
|
${options.direction}: 100%;
|
||||||
|
border: ${parseInt(specd)/4}px solid transparent;
|
||||||
|
border-${options.direction}: ${parseInt(specd)/2}px solid ${options.background};
|
||||||
|
`;
|
||||||
|
// console.log(this.flag)
|
||||||
|
var existingStyle = document.getElementById("_custom_deng_style");
|
||||||
|
|
||||||
|
if (!existingStyle) {
|
||||||
|
var styleSheet = document.createElement("style");
|
||||||
|
styleSheet.type = "text/css";
|
||||||
|
styleSheet.id = "_custom_deng_style";
|
||||||
|
styleSheet.innerText = `._custom_deng::before { ${pseudoElementStyle} }`;
|
||||||
|
document.head.appendChild(styleSheet);
|
||||||
|
} else {
|
||||||
|
existingStyle.innerText = `._custom_deng::before { ${pseudoElementStyle} }`;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 触发缩放动画效果
|
||||||
|
setTimeout(function () {
|
||||||
|
div.style.transform = "scale(1)"; // 缩放为1，显示动画效果
|
||||||
|
}, 10);
|
||||||
|
|
||||||
|
document.body.appendChild(div);
|
||||||
|
|
||||||
|
}else{
|
||||||
|
alert('提示，body中没有子元素，无法显示 msg.js 的提示');
|
||||||
|
}
|
||||||
|
// 触发动画
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 鼠标跟随提示
|
||||||
|
* @param options 弹出层的其他属性。传入如：
|
||||||
|
* <pre>
|
||||||
|
* {
|
||||||
|
* id:'元素属性id值'。 //要显示文字提示的元素属性id。 ****必传项****
|
||||||
|
* text:'提示的文字内容', //显示的内容，支持html。 ****必传项****
|
||||||
|
* direction:'right', //弹出层要显示的方位。不传默认 right。传入如 left、right、top、bottom。
|
||||||
|
* height:'auto', //弹出层显示的高度。不传默认是 auto。 传入如 100px 、 10rem 等。不能使用%百分比。
|
||||||
|
* width:'200px', //弹出层显示的宽度。不传默认是 200px。传入如 100px 、 10rem 、 50% 等。
|
||||||
|
* background:'#10a6a8'//背景颜色。十六进制颜色编码。不传默认是 '#10a6a8'
|
||||||
|
* color:'#FFFFFF' //字体颜色。十六进制颜色编码。不传默认是 '#FFFFFF'
|
||||||
|
* }
|
||||||
|
* </pre>
|
||||||
|
* @return 返回弹出层的id。可以使用 msg.close(id) 来关闭指定的弹出层
|
||||||
|
*/
|
||||||
|
tip:function(options){
|
||||||
|
if(!options||!options.id||!options.text) return console.log("msg.tip()方法中请传入基本的选项(包括id和显示文本)")
|
||||||
|
var dom=document.getElementById(options.id)
|
||||||
|
if(!dom) return
|
||||||
|
var thisId
|
||||||
|
//mouseover mouseout
|
||||||
|
//mouseenter mouseleave 防止内部子元素触发
|
||||||
|
dom.addEventListener("mouseenter",(event)=>{
|
||||||
|
event.stopPropagation()
|
||||||
|
this.closeAllSimpleMsg();
|
||||||
|
thisId = this.showTips(options);
|
||||||
|
msg.id.tishiIdArray[msg.id.tishiIdArray.length] = thisId;
|
||||||
|
})
|
||||||
|
dom.addEventListener("mouseleave",()=>{
|
||||||
|
this.close(thisId)
|
||||||
|
})
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 失败、错误的提醒
|
||||||
|
* @param text 提示文字
|
||||||
|
* @param func 关闭提示后，要执行的方法
|
||||||
|
*/
|
||||||
|
failure:function(text, func){
|
||||||
|
this.closeAllSimpleMsg();
|
||||||
|
|
||||||
|
var thisId = this.show(text, this.errorIcon);
|
||||||
|
msg.id.tishiIdArray[msg.id.tishiIdArray.length] = thisId;
|
||||||
|
this.delayClose(1800, func, thisId);
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 提示信息
|
||||||
|
* @param text 提示文字
|
||||||
|
* @param func 关闭提示后，要执行的方法
|
||||||
|
*/
|
||||||
|
info:function(text, func){
|
||||||
|
this.closeAllSimpleMsg();
|
||||||
|
|
||||||
|
var thisId = this.show(text, '<svg style="width: 3rem; height:3rem; padding: 1.5rem; padding-bottom: 1.1rem; box-sizing: content-box;" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7996"><path d="M509.979 959.316c-247.308 0-447.794-200.486-447.794-447.794S262.671 63.728 509.979 63.728s447.794 200.486 447.794 447.794-200.485 447.794-447.794 447.794z m0-814.171c-202.346 0-366.377 164.031-366.377 366.377s164.031 366.377 366.377 366.377c202.342 0 366.377-164.031 366.377-366.377S712.321 145.145 509.979 145.145z m-40.708 610.628c-40.709 0-40.709-40.708-40.709-40.708l40.709-203.543s0-40.709-40.709-40.709c0 0-40.709 0-40.709-40.709h122.126s40.709 0 40.709 40.709-40.709 162.834-40.709 203.543 40.709 40.709 40.709 40.709h40.709c-0.001 0-0.001 40.708-122.126 40.708z m81.417-407.085c-22.483 0-40.709-18.225-40.709-40.709s18.225-40.709 40.709-40.709 40.709 18.225 40.709 40.709-18.226 40.709-40.709 40.709z" p-id="7997" fill="#ffffff"></path></svg>');
|
||||||
|
msg.id.tishiIdArray[msg.id.tishiIdArray.length] = thisId;
|
||||||
|
this.delayClose(1800, func, thisId);
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 关闭info、success、failure 这几个的所有提示消息
|
||||||
|
*/
|
||||||
|
closeAllSimpleMsg:function(){
|
||||||
|
for(var i = 0; i<msg.id.tishiIdArray.length; i++){
|
||||||
|
msg.close(msg.id.tishiIdArray[i]);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹出询问选择框：确定、取消
|
||||||
|
*/
|
||||||
|
confirm:function(text){
|
||||||
|
return confirm(text);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 加载中、等待中的动画效果
|
||||||
|
* @param text 提示文字
|
||||||
|
*/
|
||||||
|
loading:function(text){
|
||||||
|
this.show(text, '<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRjlGOUY5Ij4KICA8Y2lyY2xlIGN4PSIxNiIgY3k9IjMiIHI9IjAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgdmFsdWVzPSIwOzM7MDswIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoNDUgMTYgMTYpIiBjeD0iMTYiIGN5PSIzIiByPSIwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHZhbHVlcz0iMDszOzA7MCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjEyNXMiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoOTAgMTYgMTYpIiBjeD0iMTYiIGN5PSIzIiByPSIwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHZhbHVlcz0iMDszOzA7MCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjI1cyIga2V5U3BsaW5lcz0iMC4yIDAuMiAwLjQgMC44OzAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjgiIGNhbGNNb2RlPSJzcGxpbmUiIC8+CiAgPC9jaXJjbGU+CiAgPGNpcmNsZSB0cmFuc2Zvcm09InJvdGF0ZSgxMzUgMTYgMTYpIiBjeD0iMTYiIGN5PSIzIiByPSIwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHZhbHVlcz0iMDszOzA7MCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjM3NXMiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoMTgwIDE2IDE2KSIgY3g9IjE2IiBjeT0iMyIgcj0iMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiB2YWx1ZXM9IjA7MzswOzAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC41cyIga2V5U3BsaW5lcz0iMC4yIDAuMiAwLjQgMC44OzAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjgiIGNhbGNNb2RlPSJzcGxpbmUiIC8+CiAgPC9jaXJjbGU+CiAgPGNpcmNsZSB0cmFuc2Zvcm09InJvdGF0ZSgyMjUgMTYgMTYpIiBjeD0iMTYiIGN5PSIzIiByPSIwIj4KICAgIDxhbmltYXRlIGF0dHJpYnV0ZU5hbWU9InIiIHZhbHVlcz0iMDszOzA7MCIgZHVyPSIxcyIgcmVwZWF0Q291bnQ9ImluZGVmaW5pdGUiIGJlZ2luPSIwLjYyNXMiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoMjcwIDE2IDE2KSIgY3g9IjE2IiBjeT0iMyIgcj0iMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiB2YWx1ZXM9IjA7MzswOzAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC43NXMiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgogIDxjaXJjbGUgdHJhbnNmb3JtPSJyb3RhdGUoMzE1IDE2IDE2KSIgY3g9IjE2IiBjeT0iMyIgcj0iMCI+CiAgICA8YW5pbWF0ZSBhdHRyaWJ1dGVOYW1lPSJyIiB2YWx1ZXM9IjA7MzswOzAiIGR1cj0iMXMiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBiZWdpbj0iMC44NzVzIiBrZXlTcGxpbmVzPSIwLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44OzAuMiAwLjIgMC40IDAuOCIgY2FsY01vZGU9InNwbGluZSIgLz4KICA8L2NpcmNsZT4KICA8Y2lyY2xlIHRyYW5zZm9ybT0icm90YXRlKDE4MCAxNiAxNikiIGN4PSIxNiIgY3k9IjMiIHI9IjAiPgogICAgPGFuaW1hdGUgYXR0cmlidXRlTmFtZT0iciIgdmFsdWVzPSIwOzM7MDswIiBkdXI9IjFzIiByZXBlYXRDb3VudD0iaW5kZWZpbml0ZSIgYmVnaW49IjAuNXMiIGtleVNwbGluZXM9IjAuMiAwLjIgMC40IDAuODswLjIgMC4yIDAuNCAwLjg7MC4yIDAuMiAwLjQgMC44IiBjYWxjTW9kZT0ic3BsaW5lIiAvPgogIDwvY2lyY2xlPgo8L3N2Zz4K" style="width: 3rem; height:3rem; padding: 1.5rem; padding-bottom: 1.1rem; box-sizing: content-box;" />');
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 关闭各种提示，包括加载中、成功、失败、提示信息等，都可以用此强制关闭
|
||||||
|
* id 弹出层的id。正常使用无需传入 。这里传入的是 msg.id.idArray 中的某个值
|
||||||
|
*/
|
||||||
|
close:function(id = ''){
|
||||||
|
this.currentWindowsId = 0; //当前没有任何窗口
|
||||||
|
//取出数组的值
|
||||||
|
var thisId = msg.id.delete(id);
|
||||||
|
|
||||||
|
var loadingDiv = document.getElementById('wangmarket_popup_'+thisId);
|
||||||
|
if(loadingDiv != null){
|
||||||
|
var loadingDivParent = loadingDiv.parentNode;
|
||||||
|
if(loadingDivParent != null){
|
||||||
|
loadingDivParent.removeChild(loadingDiv);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
//关闭pupups相关
|
||||||
|
//var popupsDiv = document.getElementById('wangmarket_popups')
|
||||||
|
//if(popupsDiv != null){
|
||||||
|
// var popupsDivParent = popupsDiv.parentNode;
|
||||||
|
// if(popupsDivParent != null){
|
||||||
|
// popupsDivParent.removeChild(popupsDiv);
|
||||||
|
// }
|
||||||
|
//}
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 延迟几秒后关闭弹出提示
|
||||||
|
* @param time 延迟多长时间，单位是毫秒
|
||||||
|
* @param func 关闭提示后，要执行的方法
|
||||||
|
* @param id 弹出窗口的id
|
||||||
|
*/
|
||||||
|
delayClose: function(time, func, id=''){
|
||||||
|
var cid = parseInt(Math.random()*100000);
|
||||||
|
this.currentWindowsId = cid;
|
||||||
|
var that = this;
|
||||||
|
setTimeout(function(){
|
||||||
|
if(that.currentWindowsId == cid){
|
||||||
|
/* 能对应起来，才会关闭。避免关闭别的刚显示的窗口 */
|
||||||
|
msg.close(id);
|
||||||
|
}
|
||||||
|
if(func != null){
|
||||||
|
func();
|
||||||
|
}
|
||||||
|
},time);
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 显示提示窗口，私有方法
|
||||||
|
* text 提示文字
|
||||||
|
* img 显示的图片或者svg
|
||||||
|
* @return 返回弹出层的id。可以使用 msg.close(id) 来关闭指定的弹出层
|
||||||
|
*/
|
||||||
|
show:function(text, img){
|
||||||
|
/** 是否是横向显示 **/
|
||||||
|
var wangmarket_loading_hengxiang = false;
|
||||||
|
if(text != null && text.length > 10){
|
||||||
|
wangmarket_loading_hengxiang = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
//创建一个随机id
|
||||||
|
var thisId = msg.id.create();
|
||||||
|
|
||||||
|
/** 显示前，如果还有其他正在显示的，将其都关掉 **/
|
||||||
|
//this.close();
|
||||||
|
if(document.getElementsByTagName("body") != null && document.getElementsByTagName("body").length > 0){
|
||||||
|
var div=document.createElement("div");
|
||||||
|
div.id = 'wangmarket_popup_'+thisId;
|
||||||
|
div.style = 'position: fixed;z-index: 2147483647;margin: 0 auto;text-align: center;width: 100%;';
|
||||||
|
div.innerHTML = ''
|
||||||
|
+'<div id="loading" style="position: fixed;top: 30%;text-align: center;font-size: 1rem;color: #dedede;margin: 0px auto;left: 50%;margin-left: -'+(wangmarket_loading_hengxiang? '9':'3.5')+'rem;">'
|
||||||
|
+'<div style="width: 7rem;background-color: #2e2d3c;border-radius: 0.3rem; filter: alpha(Opacity=80); -moz-opacity: 0.8; opacity: 0.8; min-height: 4.8rem;'+(wangmarket_loading_hengxiang? 'width: 18rem;':'')+'">'
|
||||||
|
+'<div'+(wangmarket_loading_hengxiang? ' style="float:left;height: 20rem; margin-top: -0.6rem; position: fixed;"':'')+'>'+img+'</div>'
|
||||||
|
+'<div style="width: 100%;padding-bottom: 1.4rem; font-size: 1.1rem; padding-left: 0.3rem;padding-right: 0.3rem; box-sizing: border-box;line-height: 1.2rem;color: white;'+(wangmarket_loading_hengxiang? 'padding: 1rem; text-align: left; padding-right: 0.3rem; line-height: 1.5rem;margin-left: 4.8rem; padding-right: 5.5rem; padding-top: 0.7rem;':'')+'">'+text+'</div>'
|
||||||
|
+'</div>';
|
||||||
|
+'</div>';
|
||||||
|
document.getElementsByTagName("body")[0].appendChild(div);
|
||||||
|
}else{
|
||||||
|
alert('提示，body中没有子元素，无法显示 msg.js 的提示');
|
||||||
|
}
|
||||||
|
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 弹出层，弹出窗口
|
||||||
|
* @param attribute 弹出层的其他属性。传入如：
|
||||||
|
* <pre>
|
||||||
|
* {
|
||||||
|
* text:'弹窗的内容', //弹出窗显示的内容，支持html
|
||||||
|
* url:'https://www.leimingyun.com/index.html' //设置弹出窗口要打开的网址，如果url跟text同时设置，那么优先采用url， text设置将无效
|
||||||
|
* top:'30%', //弹出层距离顶部的距离，不传默认是30%。 可以传入如 30%、 5rem、 10px 等
|
||||||
|
* left:'5%', //弹出层距离浏览器左侧的距离，不传默认是5%
|
||||||
|
* height:'100px', //弹出层显示的高度。不传默认是 auto。 传入如 100px 、 10rem 等。不能使用%百分比。
|
||||||
|
* width:'90%', //弹出层显示的宽度。不传默认是 90%。传入如 100px 、 10rem 、 50% 等。
|
||||||
|
* bottom:'1rem', //弹出层距离底部的距离。不传默认是 auto 。 height 跟 bottom 如果这两个同时设置了，那么height生效，bottom是不生效的
|
||||||
|
* close:false //是否显示右上角的关闭按钮，不传默认是true，显示关闭按钮
|
||||||
|
* background:'#2e2d3c' //背景颜色。十六进制颜色编码。不传默认是 '#2e2d3c'
|
||||||
|
* opacity:92 //弹出层的透明度，默认是92, 取值0~100，0是不透明，100是全部透明
|
||||||
|
* padding:'10px' //弹出层四周留的空隙，默认是1rem。可传入如 10px 、 1rem 等
|
||||||
|
* }
|
||||||
|
* </pre>
|
||||||
|
* @return 返回弹出层的id。可以使用 msg.close(id) 来关闭指定的弹出层
|
||||||
|
*/
|
||||||
|
popups:function(attribute){
|
||||||
|
var setLeftPosition = false; //是否设置了距离左侧距离
|
||||||
|
var setTopPosition = false; //是否设置了距离顶部距离
|
||||||
|
|
||||||
|
if(typeof(attribute) == 'undefined'){
|
||||||
|
attribute = {};
|
||||||
|
}else if(typeof(attribute) == 'string'){
|
||||||
|
//直接传入了 string 格式的提示文本
|
||||||
|
attribute = {text:attribute};
|
||||||
|
}
|
||||||
|
if(attribute == null){
|
||||||
|
attribute = {}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attribute.left != null){
|
||||||
|
setLeftPosition = true;
|
||||||
|
}
|
||||||
|
if(attribute.top != null || attribute.bottom != null){
|
||||||
|
setTopPosition = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attribute.url != null){
|
||||||
|
if(attribute.text != null){
|
||||||
|
//友好提醒
|
||||||
|
console.log('友好提醒：您已经设置了 attribute.url ，但是您又设置了 attribute.text ，根据优先级， 将采用 attribute.url ，而 attribute.text 设置无效。 ');
|
||||||
|
}
|
||||||
|
|
||||||
|
var suiji_load_id = 'msg_popups_loading_'+new Date().getTime();
|
||||||
|
attribute.text = '<iframe src="'+attribute.url+'" frameborder="0" style="width:100%;height:100%; display:none;" onload="document.getElementById(\''+suiji_load_id+'\').style.display=\'none\'; this.style.display=\'\';"></iframe><div id="'+suiji_load_id+'" style="width: 100%; height: 100%; text-align: center; padding-top: 30%; font-size: 1.4rem; box-sizing: border-box; overflow: hidden; ">加载中...</div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
//如果text为空，那么提示一下
|
||||||
|
if(attribute.text == null){
|
||||||
|
attribute.text = '您未设置text的值，所以这里出现提醒文字。您可以这样用: <pre>msg.popups(\'我是提示文字\');</pre>';
|
||||||
|
}
|
||||||
|
//判断一下 height 跟 bottom 是否同时设置了，因为如果这两个同时设置了，bottom是不生效的
|
||||||
|
if(attribute.height != null && attribute.bottom != null){
|
||||||
|
console.log('msg.js -- function popups() : 友情提示:您同时设置了height、bottom两个属性，此时height属性生效，bottom属性将会不起作用');
|
||||||
|
}
|
||||||
|
|
||||||
|
//赋予默认属性
|
||||||
|
if(attribute.close == null){
|
||||||
|
attribute.close = true;
|
||||||
|
}
|
||||||
|
if(attribute.top == null){
|
||||||
|
attribute.top = 'auto';
|
||||||
|
}
|
||||||
|
if(attribute.bottom == null || attribute.bottom.length < 1){
|
||||||
|
attribute.bottom = 'auto';
|
||||||
|
}
|
||||||
|
if(attribute.background == null){
|
||||||
|
attribute.background = '#2e2d3c';
|
||||||
|
}
|
||||||
|
if(attribute.opacity == null){
|
||||||
|
attribute.opacity = 92;
|
||||||
|
}
|
||||||
|
if(attribute.height == null){
|
||||||
|
attribute.height = 'auto';
|
||||||
|
}
|
||||||
|
if(attribute.left == null){
|
||||||
|
attribute.left = '5%';
|
||||||
|
}
|
||||||
|
if(attribute.width == null){
|
||||||
|
attribute.width = '90%';
|
||||||
|
}
|
||||||
|
if(attribute.padding == null){
|
||||||
|
attribute.padding = '1rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
//创建一个随机id
|
||||||
|
var thisId = msg.id.create();
|
||||||
|
|
||||||
|
var div=document.createElement("div");
|
||||||
|
//div.id = 'wangmarket_popups';
|
||||||
|
div.id = 'wangmarket_popup_'+thisId;
|
||||||
|
div.style = 'position: fixed; z-index: 2147483647; margin: 0px auto; text-align: center; width: 100%; ';
|
||||||
|
div.innerHTML = '<div style="position: fixed; top:'+attribute.top+'; bottom:'+attribute.bottom+'; text-align: center;font-size: 1rem;color: #dedede;margin: 0px auto;width: '+attribute.width+';left: '+attribute.left+'; height: '+attribute.height+'; overflow-y: initial; overflow-x: initial;">'+
|
||||||
|
'<div style="padding:0rem">'+
|
||||||
|
'<div style="width: 100%;background-color: '+attribute.background+';border-radius: 0.3rem;filter: alpha(Opacity='+attribute.opacity+');-moz-opacity: '+(attribute.opacity/100)+';opacity: '+(attribute.opacity/100)+';min-height: 4.8rem; height: 100%;">'+
|
||||||
|
'<div style=" width: 100%; font-size: 1rem; box-sizing: border-box; line-height: 1.3rem; color: white; text-align: left; padding: '+attribute.padding+'; overflow-y: auto; height: '+attribute.height+'; display: flex; border-radius: 0.4rem;">'+
|
||||||
|
attribute.text+
|
||||||
|
'</div>'+
|
||||||
|
(attribute.close? '<div class="msg_close" style="top: -0.8rem;position: absolute;right: -0.6rem;background-color: aliceblue;border-radius: 50%;height: 2rem;width: 2rem; z-index: 2147483647;" onclick="msg.close('+thisId+');"><svg style="width: 2rem; height:2rem; cursor: pointer;" t="1601801323865" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4482" width="48" height="48"><path d="M512.001 15.678C237.414 15.678 14.82 238.273 14.82 512.86S237.414 1010.04 512 1010.04s497.18-222.593 497.18-497.18S786.589 15.678 512.002 15.678z m213.211 645.937c17.798 17.803 17.798 46.657 0 64.456-17.798 17.797-46.658 17.797-64.456 0L512.001 577.315 363.241 726.07c-17.799 17.797-46.652 17.797-64.45 0-17.804-17.799-17.804-46.653 0-64.456L447.545 512.86 298.79 364.104c-17.803-17.798-17.803-46.657 0-64.455 17.799-17.798 46.652-17.798 64.45 0l148.761 148.755 148.755-148.755c17.798-17.798 46.658-17.798 64.456 0 17.798 17.798 17.798 46.657 0 64.455L576.456 512.86l148.756 148.755z m0 0" fill="'+attribute.background+'" p-id="4483"></path></svg></div>':'')+
|
||||||
|
'</div>'+
|
||||||
|
'</div>'+
|
||||||
|
'</div>';
|
||||||
|
|
||||||
|
//<div style="width: 100%;padding-bottom: 1rem;font-size: 1.1rem;padding-left: 0.3rem;padding-right: 2.0rem;box-sizing: border-box;line-height: 1.2rem;color: white;text-align: right;"> <button style=" border: aliceblue; padding: 0.4rem; padding-left: 1rem; padding-right: 1rem; font-size: 0.8rem; background-color: darkcyan; " onclick="close1();">确定</button> </div>
|
||||||
|
if(document.getElementsByTagName("body") != null && document.getElementsByTagName("body").length > 0){
|
||||||
|
document.getElementsByTagName("body")[0].appendChild(div);
|
||||||
|
|
||||||
|
/** 计算位置，剧中显示 **/
|
||||||
|
|
||||||
|
//弹窗位置控制元素
|
||||||
|
//var msgPositionDom = document.getElementById('wangmarket_popups').firstChild;
|
||||||
|
var msgPositionDom = document.getElementById('wangmarket_popup_'+thisId).firstChild;
|
||||||
|
|
||||||
|
if(!setLeftPosition){
|
||||||
|
//如果没有设置left，那么设置宽度居中
|
||||||
|
try {
|
||||||
|
var htmlWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth; //html可见区域宽度
|
||||||
|
var msgWidth = msgPositionDom.clientWidth||msgPositionDom.offsetWidth; //当前弹窗的宽度
|
||||||
|
msgPositionDom.style.left = ((htmlWidth - msgWidth)/2) + 'px';
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(!setTopPosition){
|
||||||
|
//如果没有设置top、bottom，那么设置高度居中
|
||||||
|
try {
|
||||||
|
var htmlHeight = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight; //html可见区域高度
|
||||||
|
var msgHeight = msgPositionDom.clientHeight||msgPositionDom.offsetHeight; //当前弹窗的高度
|
||||||
|
if(msgHeight > htmlHeight){
|
||||||
|
//如果弹窗高度比body还高，那么直接就显示到顶部
|
||||||
|
msgPositionDom.style.top = '20px';
|
||||||
|
}else{
|
||||||
|
msgPositionDom.style.top = ((htmlHeight - msgHeight)/2) + 'px';
|
||||||
|
}
|
||||||
|
} catch (e) {
|
||||||
|
console.log(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}else{
|
||||||
|
alert('提示，body中没有子元素，无法显示 msg.js 的提示');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* 确认弹出提示
|
||||||
|
* @param attribute 弹出层的其他属性。传入如：
|
||||||
|
* <pre>
|
||||||
|
* {
|
||||||
|
* text:'弹窗的内容', //弹出窗显示的内容，支持html
|
||||||
|
* width:'17rem', //弹出层显示的宽度。不传默认是 17rem。传入如 100px 、 17rem 、 50% 等。
|
||||||
|
* close:false //是否显示右上角的关闭按钮，不传默认是false，不显示关闭按钮
|
||||||
|
* background:'#2e2d3c' //背景颜色。十六进制颜色编码。不传默认是 '#2e2d3c'
|
||||||
|
* opacity:92, //弹出层的透明度，默认是92, 取值0~100，0是不透明，100是全部透明
|
||||||
|
* padding:'10px', //弹出层四周留的空隙，默认是1rem。可传入如 10px 、 1rem 等
|
||||||
|
* buttons:{
|
||||||
|
* '确定':function(){
|
||||||
|
* console.log('点击了确定');
|
||||||
|
* },
|
||||||
|
* '取消':function(){
|
||||||
|
* console.log('点击了取消');
|
||||||
|
* }
|
||||||
|
* },
|
||||||
|
* buttonStyle:'padding-left:0.6rem; padding-right:0.6rem; font-size: 0.9rem;' //弹出的confirm右下角的几个按钮的样式，会直接加到 <button style="....这里" 不传入默认则是padding-left:0.6rem; padding-right:0.6rem; font-size: 0.9rem;
|
||||||
|
* }
|
||||||
|
* </pre>
|
||||||
|
* @param okFunc 如果上面attribute使用的是最简单使用方式，attribute传入的是 text显示的内容，那么这里就是点了确定按钮后执行的方法
|
||||||
|
*/
|
||||||
|
confirm:function(attribute, okFunc){
|
||||||
|
//这里存在一种最简单的弹出方式，直接传入提示内容跟点击确定后执行的方法，所以要在前面判断一下
|
||||||
|
if(typeof(attribute) == 'string'){
|
||||||
|
//attribute 是 confirm弹出的内容
|
||||||
|
|
||||||
|
attribute = {text:attribute}
|
||||||
|
attribute.buttons = {
|
||||||
|
'确定':okFunc,
|
||||||
|
'取消':function(){}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if(attribute.buttonStyle == null){
|
||||||
|
attribute.buttonStyle = 'padding-left:0.6rem; padding-right:0.6rem; font-size: 0.9rem;';
|
||||||
|
}
|
||||||
|
|
||||||
|
//如果text为空，那么提示一下
|
||||||
|
if(attribute.text == null){
|
||||||
|
attribute.text = '您未设置text的值，所以这里出现提醒文字。您可以这样用: <pre>msg.popups(\'我是提示文字\');</pre>';
|
||||||
|
}else{
|
||||||
|
|
||||||
|
if(attribute.buttons == null){
|
||||||
|
attribute.text = '您还未设置 buttons 属性';
|
||||||
|
}
|
||||||
|
//统计自定义了几个button
|
||||||
|
var i = 0;
|
||||||
|
for(let key in attribute.buttons){
|
||||||
|
i++;
|
||||||
|
}
|
||||||
|
//取出button来
|
||||||
|
var buttonsHtml = ''; //button显示的html
|
||||||
|
for(let key in attribute.buttons){
|
||||||
|
i--;
|
||||||
|
//新取一个函数名
|
||||||
|
var name = ''+key+'_'+new Date().getTime();
|
||||||
|
window.msg.confirm[name] = function(){ msg.close(); attribute.buttons[key](); };
|
||||||
|
buttonsHtml = buttonsHtml+'<button onclick="window.msg.confirm[\''+name+'\']();" style="'+attribute.buttonStyle+'">'+key+'</button>'+(i>0? ' ':'');
|
||||||
|
}
|
||||||
|
|
||||||
|
attribute.text = '<div style="line-height: 1.4rem; width:100%; padding-right: 0.2rem;">'+attribute.text+'<div style=" display: inherit; width: 100%; text-align: right;margin-top: 1rem;">'+buttonsHtml+'</div></div>';
|
||||||
|
}
|
||||||
|
|
||||||
|
//赋予默认属性
|
||||||
|
if(attribute.close == null){
|
||||||
|
attribute.close = false;
|
||||||
|
}
|
||||||
|
if(attribute.width == null){
|
||||||
|
attribute.width = '17rem';
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
return msg.popups(attribute);
|
||||||
|
},
|
||||||
|
//需要确认的弹出提示，替代js原本的alert弹窗
|
||||||
|
alert:function(text){
|
||||||
|
return msg.confirm({
|
||||||
|
text:text,
|
||||||
|
buttons:{
|
||||||
|
确定:function(){}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹出 input 输入框
|
||||||
|
* options 设置，包含：
|
||||||
|
text: 提示的文字，必填
|
||||||
|
okFunc 点击了确定按钮执行的方法。,必填， 这里传入 function(value){ //这里拿到的value 就是用户自己输入的 }
|
||||||
|
defaultValue 输入框中的默认值，如果不传此参数，那输入框中默认就是没有任何值
|
||||||
|
type: input 普通单行文本输入、 textarea 多行文本输入，不传默认是input
|
||||||
|
width: 弹出输入框的宽度，传入如 20rem 、 200px ，不穿默认是 20rem
|
||||||
|
height: 弹出输入框的高度，传入如 20rem 、 200px，不传默认是初始高度，也就是input是1行，textarea是两行
|
||||||
|
* okFunc [废弃]点击了确定按钮执行的方法。,必填， 这里传入 function(value){ //这里拿到的value 就是用户自己输入的 }
|
||||||
|
* defaultValue [废弃]输入框中的默认值，非必填，如果不传此参数，那输入框中默认就是没有任何值
|
||||||
|
* isTextarea [废弃]是否是textarea输入框，默认是false，不是，只是单纯的input输入框。这个参数默认不用传入。
|
||||||
|
*/
|
||||||
|
input:function(options, okFunc, defaultValue, isTextarea=false){
|
||||||
|
if(typeof(defaultValue) == 'undefined' || defaultValue == null){
|
||||||
|
defaultValue = '';
|
||||||
|
}
|
||||||
|
|
||||||
|
//v1.10之前的方式，进行兼容
|
||||||
|
if(typeof(options) == 'string'){
|
||||||
|
var textStr = options+'';
|
||||||
|
options = {
|
||||||
|
text:textStr
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if(typeof(options.type) == 'undefined'){
|
||||||
|
if(isTextarea == true){
|
||||||
|
//textarea输入方式
|
||||||
|
options.type = 'textarea';
|
||||||
|
}else{
|
||||||
|
//input 文本输入方式
|
||||||
|
options.type = 'input';
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if(typeof(options.defaultValue) == 'undefined'){
|
||||||
|
options.defaultValue = defaultValue;
|
||||||
|
}
|
||||||
|
if(typeof(options.okFunc) == 'undefined'){
|
||||||
|
options.okFunc = okFunc;
|
||||||
|
}
|
||||||
|
|
||||||
|
//输入判断
|
||||||
|
if(typeof(options.okFunc) == 'undefined' || options.okFunc == null){
|
||||||
|
msg.failure('请传入点击确定按钮要执行的方法');
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//设置初始属性
|
||||||
|
if(typeof(options.width) == 'undefined'){
|
||||||
|
options.width = '20rem';
|
||||||
|
}
|
||||||
|
if(typeof(options.height) == 'undefined'){
|
||||||
|
options.height = 'auto';
|
||||||
|
}
|
||||||
|
|
||||||
|
//默认是input
|
||||||
|
var inputHTML = '<input type="text" id="msg_input_id" style="width: 100%; line-height: 1.6rem; margin-right: 1rem; box-sizing: border-box; height:'+options.height+';" value="'+options.defaultValue+'" >';
|
||||||
|
if(options['type'] == 'textarea'){
|
||||||
|
//textarea输入框
|
||||||
|
inputHTML = '<textarea id="msg_input_id" style="width: 100%; line-height: 1.1rem; margin-right: 1rem; box-sizing: border-box; height:'+options.height+';">'+options.defaultValue+'</textarea>';
|
||||||
|
}
|
||||||
|
|
||||||
|
var enterButtonId = 'msg_input_enterButtonId_'+new Date().getTime(); //确认按钮的id
|
||||||
|
var text = ''+
|
||||||
|
'<div style="width: 100%; height:auto;">'+
|
||||||
|
'<div style=" padding-bottom: 0.8rem; font-size: 1.2rem; line-height: 1.7rem;">'+options.text+'</div>'+
|
||||||
|
'<div>'+inputHTML+'</div>'+
|
||||||
|
'<div style=" display: inherit; width: 100%; text-align: right;margin-top: 1rem;"><button id='+enterButtonId+' style="padding-left:0.8rem; padding-right:0.8rem; font-size: 1rem;">确定</button></div>'+
|
||||||
|
'</div>';
|
||||||
|
var thisId = msg.popups({
|
||||||
|
text:text,
|
||||||
|
width:options.width,
|
||||||
|
height:'auto'
|
||||||
|
});
|
||||||
|
var enter = document.getElementById(enterButtonId);
|
||||||
|
enter.onclick = function(){
|
||||||
|
var msg_input_value = document.getElementById('msg_input_id').value;
|
||||||
|
msg.close();
|
||||||
|
options.okFunc(msg_input_value);
|
||||||
|
}
|
||||||
|
|
||||||
|
return thisId;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 弹出 textarea 输入框
|
||||||
|
* text 提示文字,必填
|
||||||
|
* okFunc 点击了确定按钮执行的方法。,必填， 这里传入 function(value){ //这里拿到的value 就是用户自己输入的 }
|
||||||
|
* defaultValue 输入框中的默认值，非必填，如果不传此参数，那输入框中默认就是没有任何值
|
||||||
|
*/
|
||||||
|
textarea:function(options, okFunc, defaultValue){
|
||||||
|
return msg.input(options, okFunc, defaultValue, true);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,122 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>Document</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
.video-container {
|
||||||
|
width: 375px;
|
||||||
|
height: 240px;
|
||||||
|
}
|
||||||
|
.liveBtns {
|
||||||
|
background: url("./img/bg_live.png") no-repeat;
|
||||||
|
background-size: 100%;
|
||||||
|
height: 484px;
|
||||||
|
padding: 17px 22px;
|
||||||
|
}
|
||||||
|
.btn_shareBox,
|
||||||
|
.btn_thumbBox {
|
||||||
|
width: 330px;
|
||||||
|
height: 80px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.02);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
/* margin-bottom: 40px; */
|
||||||
|
margin-top: 40px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding: 20px 30px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
.video-title {
|
||||||
|
/* width: 268px; */
|
||||||
|
/* height: 30px; */
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 20px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
margin-bottom: 87px;
|
||||||
|
}
|
||||||
|
.pic_share {
|
||||||
|
background: url("./img/pic_share.png");
|
||||||
|
background-size: 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.pic_thumb {
|
||||||
|
background: url("./img/pic_thumbsup.png");
|
||||||
|
background-size: 100%;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
display: inline-block;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
.left,
|
||||||
|
.right {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<link
|
||||||
|
href="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.min.css"
|
||||||
|
rel="stylesheet"
|
||||||
|
/>
|
||||||
|
<!--播放器脚本文件-->
|
||||||
|
<script src="https://web.sdk.qcloud.com/player/tcplayer/release/v5.1.0/tcplayer.v5.1.0.min.js"></script>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
console.log(payload);
|
||||||
|
getWebVideoInfo(payload);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<!-- <div class=""></div> -->
|
||||||
|
<div class="body">
|
||||||
|
<div class="video-container">
|
||||||
|
<video
|
||||||
|
id="player-container-id"
|
||||||
|
style="width: 100%"
|
||||||
|
height="240"
|
||||||
|
muted
|
||||||
|
autoplay
|
||||||
|
preload="auto"
|
||||||
|
playsinline
|
||||||
|
webkit-playsinline
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="liveBtns">
|
||||||
|
<div class="video-title">直击节前出行高峰(直播名称)</div>
|
||||||
|
<div class="btn_shareBox" onclick="likeShare(2,2)">
|
||||||
|
<div class="left"><i class="pic_share"></i>分享</div>
|
||||||
|
<div class="right">2568</div>
|
||||||
|
</div>
|
||||||
|
<div class="btn_thumbBox" onclick="likeShare(1,2)">
|
||||||
|
<div class="left"><i class="pic_thumb"></i>点赞</div>
|
||||||
|
<div class="right">2568</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,291 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>主题2</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 212px;
|
||||||
|
background: url("./img/bg.png");
|
||||||
|
background-size: cover;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 40px 0 0 13px;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 330px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 2px solid #a38c81;
|
||||||
|
}
|
||||||
|
.body,
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
top: -55px;
|
||||||
|
}
|
||||||
|
.videoList_theme2 {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.videoItem_theme2 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.poster_theme2 {
|
||||||
|
width: 330px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
console.log(payload);
|
||||||
|
getWebPage(payload);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header"></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="layer">
|
||||||
|
<video
|
||||||
|
id="video"
|
||||||
|
src=""
|
||||||
|
class="player"
|
||||||
|
controls
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">直播列表</div>
|
||||||
|
<div class="videoList videoList_theme2" id="liveList">
|
||||||
|
<!-- <div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div class="layer">
|
||||||
|
<div class="layerTitle">区块列表</div>
|
||||||
|
<div class="videoList scroll">
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div> -->
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,302 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>主题1</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 212px;
|
||||||
|
/* background: url("./img/bg.png"); */
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 40px 0 0 13px;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 330px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 2px solid #a38c81;
|
||||||
|
}
|
||||||
|
.body,
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
top: -6px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
// let bgColor= getParameterByName("bgColor");
|
||||||
|
// $('.body').css('background',bgColor);
|
||||||
|
console.log(payload);
|
||||||
|
getWebPage(payload);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<!-- <div class="slogan"></div> -->
|
||||||
|
<!-- <div class="searchBox">
|
||||||
|
<input class="searchInput" type="text" placeholder="达州" />
|
||||||
|
<button class="btn_search">搜索</button>
|
||||||
|
</div> -->
|
||||||
|
<div
|
||||||
|
id="shadow"
|
||||||
|
style="
|
||||||
|
width: 375px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="body">
|
||||||
|
<div class="layer">
|
||||||
|
<video
|
||||||
|
id="video"
|
||||||
|
src=""
|
||||||
|
class="player"
|
||||||
|
controls
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">直播列表</div>
|
||||||
|
<div class="videoList scroll" id="liveList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">区块列表</div>
|
||||||
|
<div class="videoList scroll" id="blockList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,305 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>主题2</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 212px;
|
||||||
|
/* background: url("./img/bg.png"); */
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 40px 0 0 13px;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 330px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 2px solid #a38c81;
|
||||||
|
}
|
||||||
|
.body,
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
top: -6px;
|
||||||
|
}
|
||||||
|
.videoList_theme2 {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.videoItem_theme2 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.poster_theme2 {
|
||||||
|
width: 330px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
// let bgColor= getParameterByName("bgColor");
|
||||||
|
|
||||||
|
console.log(payload);
|
||||||
|
getWebPage(payload);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header"><div
|
||||||
|
id="shadow"
|
||||||
|
style="
|
||||||
|
width: 375px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
"
|
||||||
|
></div></div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="layer">
|
||||||
|
<video
|
||||||
|
id="video"
|
||||||
|
src=""
|
||||||
|
class="player"
|
||||||
|
controls
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">直播列表</div>
|
||||||
|
<div class="videoList videoList_theme2" id="liveList">
|
||||||
|
<!-- <div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">区块列表</div>
|
||||||
|
<div class="videoList scroll" id="blockList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,326 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>主题3</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
/* background: #2d8bff; */
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
background: url("./img/bg3.png");
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 40px 0 0 13px;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
/* body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
} */
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
/* background: #2d8bff; */
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 330px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 2px solid #a38c81;
|
||||||
|
}
|
||||||
|
.body,
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
.videoList_theme2 {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.videoItem_theme2 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.poster_theme2 {
|
||||||
|
width: 330px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.shadow {
|
||||||
|
width: 375px;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(45, 140, 255, 0) 0%,
|
||||||
|
#2d8cff 100%
|
||||||
|
);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
// let bgColor= getParameterByName("bgColor");
|
||||||
|
// $('.body').css('background',bgColor);
|
||||||
|
// console.log(payload);
|
||||||
|
getWebPage(payload);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div
|
||||||
|
id="shadow"
|
||||||
|
style="
|
||||||
|
width: 375px;
|
||||||
|
height: 50px;
|
||||||
|
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<video
|
||||||
|
id="video"
|
||||||
|
src=""
|
||||||
|
class="player"
|
||||||
|
controls
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">区块列表</div>
|
||||||
|
<div class="videoList scroll" id="blockList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">直播列表</div>
|
||||||
|
<div class="videoList videoList_theme3 scroll" id="liveList">
|
||||||
|
<!-- <div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div> -->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div id="bottomInfo1"></div>
|
||||||
|
<div id="bottomInfo2"></div>
|
||||||
|
<div id="bottomInfo3"></div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
@ -0,0 +1,304 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>主题4</title>
|
||||||
|
<style>
|
||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
html,
|
||||||
|
body {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background: #2d8bff;
|
||||||
|
}
|
||||||
|
.scroll {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
.videoList {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.videoItem {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 10px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
img {
|
||||||
|
width: 100px;
|
||||||
|
height: 100px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.socialBox {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
background: #fff;
|
||||||
|
border-radius: 8px;
|
||||||
|
padding: 15px 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.socialItem {
|
||||||
|
width: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.socialItem:first-child {
|
||||||
|
border-right: 1px solid #eeeeee;
|
||||||
|
}
|
||||||
|
.header {
|
||||||
|
width: 100%;
|
||||||
|
height: 300px;
|
||||||
|
background: url("./img/bg3.png");
|
||||||
|
background-size: cover !important;
|
||||||
|
/* padding: 37px 50px 0 52px; */
|
||||||
|
box-sizing: border-box;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
.slogan {
|
||||||
|
background: url("./img/slogan.png");
|
||||||
|
background-size: cover;
|
||||||
|
width: 273px;
|
||||||
|
height: 80px;
|
||||||
|
margin: 37px 50px 0 52px;
|
||||||
|
}
|
||||||
|
.searchBox {
|
||||||
|
width: 350px;
|
||||||
|
height: 40px;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0px 4px 10px 0px rgba(72, 118, 255, 0.1);
|
||||||
|
border-radius: 20px 20px 20px 20px;
|
||||||
|
display: flex;
|
||||||
|
padding: 2px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
margin: 40px 0 0 13px;
|
||||||
|
}
|
||||||
|
.searchInput {
|
||||||
|
border: 0;
|
||||||
|
width: 100%;
|
||||||
|
background: url("./img//icon_search.png") no-repeat;
|
||||||
|
background-position: 16px;
|
||||||
|
background-size: 16px 16px;
|
||||||
|
padding-left: 42px;
|
||||||
|
outline: none;
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.btn_search {
|
||||||
|
width: 72px;
|
||||||
|
height: 36px;
|
||||||
|
background: #4876ff;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 16px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 25px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border: 0;
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
body {
|
||||||
|
background: #f5f5f6;
|
||||||
|
}
|
||||||
|
.body {
|
||||||
|
padding-left: 13px;
|
||||||
|
padding-right: 12px;
|
||||||
|
background: #ff972d;
|
||||||
|
}
|
||||||
|
.layer {
|
||||||
|
background: #fff;
|
||||||
|
padding: 13px 10px 23px 10px;
|
||||||
|
border-radius: 8px;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
}
|
||||||
|
.layerTitle {
|
||||||
|
margin-bottom: 8px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 17px;
|
||||||
|
color: #333333;
|
||||||
|
line-height: 26px;
|
||||||
|
text-align: left;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.poster {
|
||||||
|
width: 160px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.icon_share {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_share.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.icon_thumbs_up {
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
display: inline-block;
|
||||||
|
background: url("./img/icon_thumbsup.png");
|
||||||
|
background-size: cover;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
.footer {
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 12px;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 30px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
text-align: center;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
padding-top: 10px;
|
||||||
|
}
|
||||||
|
.dz {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
background: rgba(51, 51, 51, 0.5);
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 10px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 15px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
border-radius: 8px 0 8px 0;
|
||||||
|
padding: 4px;
|
||||||
|
}
|
||||||
|
.videoItemTitle {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 7px;
|
||||||
|
left: 10px;
|
||||||
|
font-family: Source Han Sans CN, Source Han Sans CN;
|
||||||
|
font-weight: 500;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 21px;
|
||||||
|
text-align: justify;
|
||||||
|
font-style: normal;
|
||||||
|
text-transform: none;
|
||||||
|
}
|
||||||
|
.player {
|
||||||
|
width: 330px;
|
||||||
|
height: 160px;
|
||||||
|
border-radius: 8px 8px 8px 8px;
|
||||||
|
border: 2px solid #a38c81;
|
||||||
|
}
|
||||||
|
.body,
|
||||||
|
.footer {
|
||||||
|
position: relative;
|
||||||
|
top: -8px;
|
||||||
|
}
|
||||||
|
.videoList_theme2 {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.videoItem_theme2 {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
.poster_theme2 {
|
||||||
|
width: 330px;
|
||||||
|
height: 150px;
|
||||||
|
}
|
||||||
|
.shadow {
|
||||||
|
width: 375px;
|
||||||
|
height: 50px;
|
||||||
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(255, 151, 45, 0) 0%,
|
||||||
|
#ff972d 100%
|
||||||
|
);
|
||||||
|
border-radius: 0px 0px 0px 0px;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
<script src="./js/jquery.min.js"></script>
|
||||||
|
<script src="./js/msg.js"></script>
|
||||||
|
<script src="./js/api.js"></script>
|
||||||
|
<script>
|
||||||
|
$(function () {
|
||||||
|
let payload = getParameterByName("id");
|
||||||
|
console.log(payload);
|
||||||
|
getWebPage(payload);
|
||||||
|
// parameterValue = getParameterByName("id");
|
||||||
|
// console.log(parameterValue);
|
||||||
|
// getInfo(parameterValue);
|
||||||
|
});
|
||||||
|
|
||||||
|
function share() {}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="header">
|
||||||
|
<div class="shadow"></div>
|
||||||
|
</div>
|
||||||
|
<div class="body">
|
||||||
|
<div class="socialBox">
|
||||||
|
<div class="socialItem" onclick="likeShare(2,1)">
|
||||||
|
<i class="icon_share"></i><span id="numShare"></span>
|
||||||
|
</div>
|
||||||
|
<div class="socialItem" onclick="likeShare(1,1)">
|
||||||
|
<i class="icon_thumbs_up"></i><span id="numLike"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="layer">
|
||||||
|
<video src="" class="player"></video>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">区块列表</div>
|
||||||
|
<div class="videoList scroll">
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>文化中国韵</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>自然美如画</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>平面简洁风</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem">
|
||||||
|
<img src="" alt="" />
|
||||||
|
<div>直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="layer">
|
||||||
|
<div class="layerTitle">直播列表</div>
|
||||||
|
<div class="videoList videoList_theme2">
|
||||||
|
<div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
<div class="videoItem videoItem_theme2">
|
||||||
|
<div class="dz">3.2万人点赞</div>
|
||||||
|
<img class="poster poster_theme2" src="" alt="" />
|
||||||
|
<div class="videoItemTitle">直击节前出行高峰</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="footer">
|
||||||
|
<div>数据来源：四川XX科技有限公司提供技术支持</div>
|
||||||
|
<div>由四川XX科技有限公司提供技术支持</div>
|
||||||
|
</div>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
Loading…
Reference in New Issue