|
|
@@ -1,297 +1,292 @@
|
|
|
<!DOCTYPE html>
|
|
|
<html lang="en">
|
|
|
-<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
|
|
|
-<meta name="viewport"
|
|
|
- content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
|
|
|
-<link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
|
|
|
-<link rel="stylesheet" href="css/index.css">
|
|
|
-<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
|
|
-
|
|
|
-<head>
|
|
|
+ <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
|
|
+ <meta
|
|
|
+ name="viewport"
|
|
|
+ content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"
|
|
|
+ />
|
|
|
+ <script src="./info.js"></script>
|
|
|
+ <script>
|
|
|
+ document.title = titleInfo;
|
|
|
+ </script>
|
|
|
+ <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
|
|
|
+ <link rel="stylesheet" href="css/index.css" />
|
|
|
+ <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
|
|
|
+
|
|
|
+ <head>
|
|
|
<title>-</title>
|
|
|
<script src="js/4dage.js"></script>
|
|
|
-
|
|
|
- <style>
|
|
|
- html {
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
-
|
|
|
- .logo {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- z-index: 9999;
|
|
|
- width: 90vw;
|
|
|
- position: absolute;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 10px;
|
|
|
- height: 50px;
|
|
|
- }
|
|
|
-
|
|
|
- .logo .img {
|
|
|
- background: url('./img/logo.png');
|
|
|
- background-size: 100% 100%;
|
|
|
- max-width: 40vw;
|
|
|
- max-height: 50px;
|
|
|
- height: 40px;
|
|
|
- width: 150px;
|
|
|
- }
|
|
|
-
|
|
|
- .logo .logotxt {
|
|
|
- padding-bottom: 5px;
|
|
|
- color: #666;
|
|
|
- border-bottom: 1px solid #666;
|
|
|
- }
|
|
|
-
|
|
|
- .back {
|
|
|
- z-index: 998;
|
|
|
- cursor: pointer;
|
|
|
- width: 30px;
|
|
|
- height: 30px;
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- left: 10px;
|
|
|
- }
|
|
|
-
|
|
|
- .back img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .outerImg {
|
|
|
- transition: all 1s;
|
|
|
- opacity: 1;
|
|
|
- position: absolute;
|
|
|
- z-index: 998;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- background-color: #1a1b20;
|
|
|
- }
|
|
|
-
|
|
|
- .outerImg img {
|
|
|
- position: absolute;
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- object-fit: cover;
|
|
|
- }
|
|
|
-
|
|
|
- /* ---------------按钮和文字介绍------------- */
|
|
|
- body {
|
|
|
- user-select: none;
|
|
|
- }
|
|
|
-
|
|
|
|
|
|
+ <style>
|
|
|
+ html {
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ z-index: 9999;
|
|
|
+ width: 90vw;
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 10px;
|
|
|
+ height: 50px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo .img {
|
|
|
+ background: url("./img/logo.png");
|
|
|
+ background-size: 100% 100%;
|
|
|
+ max-width: 40vw;
|
|
|
+ max-height: 50px;
|
|
|
+ height: 40px;
|
|
|
+ width: 150px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .logo .logotxt {
|
|
|
+ padding-bottom: 5px;
|
|
|
+ color: #666;
|
|
|
+ border-bottom: 1px solid #666;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back {
|
|
|
+ z-index: 998;
|
|
|
+ cursor: pointer;
|
|
|
+ width: 30px;
|
|
|
+ height: 30px;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .back img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outerImg {
|
|
|
+ transition: all 1s;
|
|
|
+ opacity: 1;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 998;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: #1a1b20;
|
|
|
+ }
|
|
|
+
|
|
|
+ .outerImg img {
|
|
|
+ position: absolute;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ object-fit: cover;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* ---------------按钮和文字介绍------------- */
|
|
|
+ body {
|
|
|
+ user-select: none;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topButn {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+ z-index: 999;
|
|
|
+ position: absolute;
|
|
|
+ top: 50px;
|
|
|
+ left: 10px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .topButn div {
|
|
|
+ padding: 0 5px;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ width: 100%;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 18px;
|
|
|
+ color: #fff;
|
|
|
+ cursor: pointer;
|
|
|
+ text-align: center;
|
|
|
+ /* background-color: #f2cd83; */
|
|
|
+ background-color: #ccc;
|
|
|
+ border-radius: 5px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con::-webkit-scrollbar {
|
|
|
+ /*滚动条整体样式*/
|
|
|
+ width: 3px;
|
|
|
+ /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
+ height: 1px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con::-webkit-scrollbar-thumb {
|
|
|
+ /*滚动条里面小方块*/
|
|
|
+ border-radius: 10px;
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ background: #f2cd83;
|
|
|
+ }
|
|
|
+
|
|
|
+ .con::-webkit-scrollbar-track {
|
|
|
+ /*滚动条里面轨道*/
|
|
|
+ box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
+ border-radius: 10px;
|
|
|
+ background: #ededed;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txtOne {
|
|
|
+ opacity: 0;
|
|
|
+ pointer-events: none;
|
|
|
+
|
|
|
+ padding: 30px 15px 30px 30px;
|
|
|
+ z-index: 1000;
|
|
|
+ position: absolute;
|
|
|
+ top: 150px;
|
|
|
+ left: 10px;
|
|
|
+ background-image: url("./img/divBac.png");
|
|
|
+ background-color: rgba(0, 0, 0, 0.6);
|
|
|
+ background-size: 100% 100%;
|
|
|
+ width: 400px;
|
|
|
+ height: 500px;
|
|
|
+ z-index: 9999;
|
|
|
+ color: #a08742;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txtOne .con {
|
|
|
+ text-align: justify;
|
|
|
+ padding-right: 28px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ overflow-y: auto;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txtOne .con > h3 {
|
|
|
+ margin-left: -5px;
|
|
|
+ font-size: 18px;
|
|
|
+ font-weight: 700;
|
|
|
+ margin-bottom: 15px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txtOne .close {
|
|
|
+ cursor: pointer;
|
|
|
+ position: absolute;
|
|
|
+ right: 24px;
|
|
|
+ top: 20px;
|
|
|
+ width: 20px;
|
|
|
+ height: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .txtOne .close img {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* 手机端的样式 */
|
|
|
+ @media screen and (max-width: 600px) {
|
|
|
.topButn {
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- z-index: 999;
|
|
|
- position: absolute;
|
|
|
- top: 50px;
|
|
|
- left: 10px;
|
|
|
+ width: 220px;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ margin: 0;
|
|
|
+ top: 5px;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ pointer-events: auto;
|
|
|
}
|
|
|
|
|
|
.topButn div {
|
|
|
- padding: 0 5px;
|
|
|
- margin-bottom: 10px;
|
|
|
- width: 100%;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- border-radius: 20px;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- cursor: pointer;
|
|
|
- text-align: center;
|
|
|
- /* background-color: #f2cd83; */
|
|
|
- background-color: #ccc;
|
|
|
- border-radius: 5px;
|
|
|
- }
|
|
|
-
|
|
|
- .con::-webkit-scrollbar {
|
|
|
- /*滚动条整体样式*/
|
|
|
- width: 3px;
|
|
|
- /*高宽分别对应横竖滚动条的尺寸*/
|
|
|
- height: 1px;
|
|
|
- }
|
|
|
-
|
|
|
- .con::-webkit-scrollbar-thumb {
|
|
|
- /*滚动条里面小方块*/
|
|
|
- border-radius: 10px;
|
|
|
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- background: #f2cd83;
|
|
|
- }
|
|
|
-
|
|
|
- .con::-webkit-scrollbar-track {
|
|
|
- /*滚动条里面轨道*/
|
|
|
- box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
|
|
|
- border-radius: 10px;
|
|
|
- background: #ededed;
|
|
|
+ width: 90px;
|
|
|
+ font-size: 14px;
|
|
|
+ background-color: #f2cd83;
|
|
|
}
|
|
|
|
|
|
.txtOne {
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
-
|
|
|
- padding: 30px 15px 30px 30px;
|
|
|
- z-index: 1000;
|
|
|
- position: absolute;
|
|
|
- top: 150px;
|
|
|
- left: 10px;
|
|
|
- background-image: url('./img/divBac.png');
|
|
|
- background-color: rgba(0, 0, 0, .6);
|
|
|
- background-size: 100% 100%;
|
|
|
- width: 400px;
|
|
|
- height: 500px;
|
|
|
- z-index: 9999;
|
|
|
- color: #a08742;
|
|
|
+ display: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ transform: translate(0, 0);
|
|
|
+ max-height: 100vh;
|
|
|
+ color: #fff;
|
|
|
}
|
|
|
|
|
|
.txtOne .con {
|
|
|
- text-align: justify;
|
|
|
- padding-right: 28px;
|
|
|
- line-height: 30px;
|
|
|
- margin-bottom: 30px;
|
|
|
- overflow-y: auto;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- .txtOne .con>h3 {
|
|
|
- margin-left: -5px;
|
|
|
- font-size: 18px;
|
|
|
- font-weight: 700;
|
|
|
- margin-bottom: 15px;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .txtOne .close {
|
|
|
- cursor: pointer;
|
|
|
- position: absolute;
|
|
|
- right: 24px;
|
|
|
- top: 20px;
|
|
|
- width: 20px;
|
|
|
- height: 20px;
|
|
|
- }
|
|
|
-
|
|
|
- .txtOne .close img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
- }
|
|
|
-
|
|
|
- /* 手机端的样式 */
|
|
|
- @media screen and (max-width: 600px) {
|
|
|
- .topButn {
|
|
|
- width: 220px;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- margin: 0;
|
|
|
- top: 5px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- pointer-events: auto;
|
|
|
-
|
|
|
- }
|
|
|
-
|
|
|
- .topButn div {
|
|
|
- width: 90px;
|
|
|
- font-size: 14px;
|
|
|
- background-color: #f2cd83;
|
|
|
- }
|
|
|
-
|
|
|
- .txtOne {
|
|
|
- display: none;
|
|
|
- box-sizing: border-box;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- top: 0;
|
|
|
- left: 0;
|
|
|
- transform: translate(0, 0);
|
|
|
- max-height: 100vh;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .txtOne .con {
|
|
|
- color: #fff;
|
|
|
- height: calc(100vh - 100px);
|
|
|
- }
|
|
|
-
|
|
|
+ color: #fff;
|
|
|
+ height: calc(100vh - 100px);
|
|
|
}
|
|
|
+ }
|
|
|
</style>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
+ </head>
|
|
|
|
|
|
+ <body>
|
|
|
<!-- 新加的按钮 -->
|
|
|
<div class="topButn">
|
|
|
- <div class="topButnOne">文物介绍</div>
|
|
|
+ <div class="topButnOne">文物介绍</div>
|
|
|
</div>
|
|
|
<!-- 专家鉴定意见的文字 -->
|
|
|
<div class="txtOne">
|
|
|
- <div class="close">
|
|
|
- <img src="./img/close.png" alt="">
|
|
|
- </div>
|
|
|
- <p class="con"></p>
|
|
|
+ <div class="close">
|
|
|
+ <img src="./img/close.png" alt="" />
|
|
|
+ </div>
|
|
|
+ <p class="con"></p>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
<div class="back" onclick="javascript:history.go(-1);">
|
|
|
- <img src="./img/back.png" alt="">
|
|
|
+ <img src="./img/back.png" alt="" />
|
|
|
</div>
|
|
|
<div class="logo">
|
|
|
- <div class="img"></div>
|
|
|
- <div class="logotxt"> 提 供 技 术 支 持 </div>
|
|
|
+ <div class="img"></div>
|
|
|
+ <div class="logotxt">提 供 技 术 支 持</div>
|
|
|
</div>
|
|
|
<div class="outerImg">
|
|
|
- <img src="./img/bg.jpg" alt="">
|
|
|
- </div>
|
|
|
- <div id="ui">
|
|
|
+ <img src="./img/bg.jpg" alt="" />
|
|
|
</div>
|
|
|
+ <div id="ui"></div>
|
|
|
<script src="js/jquery.js"></script>
|
|
|
<script src="./txt.js"></script>
|
|
|
|
|
|
<script>
|
|
|
- var number = getQueryVariable("m");
|
|
|
- if (spinInfo) window.autoRotate = true;
|
|
|
- fdage.embed('4dage/' + number + '.4dage', {
|
|
|
- width: 800,
|
|
|
- height: 600,
|
|
|
- autoStart: true,
|
|
|
- fullFrame: true,
|
|
|
- pagePreset: false
|
|
|
+ var number = getQueryVariable("m");
|
|
|
+ if (spinInfo) window.autoRotate = true;
|
|
|
+ fdage.embed("4dage/" + number + ".4dage", {
|
|
|
+ width: 800,
|
|
|
+ height: 600,
|
|
|
+ autoStart: true,
|
|
|
+ fullFrame: true,
|
|
|
+ pagePreset: false,
|
|
|
+ });
|
|
|
+ $(".outerImg img").attr("src", `./images/${number}.jpg`);
|
|
|
+
|
|
|
+ // 获取文字介绍
|
|
|
+ if (txtShow && txtObj[number]) {
|
|
|
+ const btnDom = document.querySelector(".topButn");
|
|
|
+ btnDom.style.opacity = 1;
|
|
|
+ // btnDom.style.pointerEvents = 'auto'
|
|
|
+ const txtDom = document.querySelector(".txtOne");
|
|
|
+ txtDom.style.opacity = 1;
|
|
|
+ txtDom.style.pointerEvents = "auto";
|
|
|
+
|
|
|
+ const txtButton = document.querySelector(".topButnOne");
|
|
|
+ // 获取文本
|
|
|
+ const txtInfo = txtObj[number] || "（空）";
|
|
|
+ $(".txtOne .con").html(txtInfo);
|
|
|
+ // 点击关闭
|
|
|
+ $(".txtOne .close").click(() => {
|
|
|
+ $(".txtOne").hide();
|
|
|
+ btnDom.style.pointerEvents = "auto";
|
|
|
+ txtButton.style.backgroundColor = "#f2cd83";
|
|
|
});
|
|
|
- $('.outerImg img').attr('src', `./images/${number}.jpg`)
|
|
|
-
|
|
|
-
|
|
|
- // 获取文字介绍
|
|
|
- if (txtShow&&txtObj[number]) {
|
|
|
- const btnDom = document.querySelector('.topButn')
|
|
|
- btnDom.style.opacity = 1
|
|
|
- // btnDom.style.pointerEvents = 'auto'
|
|
|
- const txtDom = document.querySelector('.txtOne')
|
|
|
- txtDom.style.opacity = 1
|
|
|
- txtDom.style.pointerEvents = 'auto'
|
|
|
+ $(".topButnOne").click(() => {
|
|
|
+ $(".txtOne").show();
|
|
|
+ btnDom.style.pointerEvents = "none";
|
|
|
|
|
|
- const txtButton = document.querySelector('.topButnOne')
|
|
|
- // 获取文本
|
|
|
- const txtInfo = txtObj[number] || '（空）'
|
|
|
- $('.txtOne .con').html(txtInfo)
|
|
|
- // 点击关闭
|
|
|
- $('.txtOne .close').click(() => {
|
|
|
- $('.txtOne').hide()
|
|
|
- btnDom.style.pointerEvents = 'auto'
|
|
|
- txtButton.style.backgroundColor = '#f2cd83'
|
|
|
- })
|
|
|
- $('.topButnOne').click(() => {
|
|
|
- $('.txtOne').show()
|
|
|
- btnDom.style.pointerEvents = 'none'
|
|
|
-
|
|
|
- txtButton.style.backgroundColor = '#ccc'
|
|
|
-
|
|
|
- })
|
|
|
-
|
|
|
- }
|
|
|
+ txtButton.style.backgroundColor = "#ccc";
|
|
|
+ });
|
|
|
+ }
|
|
|
</script>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|
|
|
+ </body>
|
|
|
+</html>
|
aamin