|
|
<!DOCTYPE html><html>
<head> <meta http-equiv="Content-Type" content="text/html" charset="UTF-8" /> <meta name="screen-orientation" content="landscape" charset="UTF-8" /> <meta content="width=device-width, initial-scale=0.4, maximum-scale=0.4, user-scalable=0" name="viewport"> <meta http-equiv="Pragma" content="Cache-control: max-age=10000" /> <title>全景图</title> <style> html, body { overflow: hidden; margin: 0; padding: 0; }
img { width: 100%; height: auto; }
video { width: 100%; height: auto; }
.font22 { font-size: 20px; }
.jiazaiimg { width: 436px; height: auto; margin: 50% auto 0; padding: 0px 200px; font-size: 30px; }
.zc { color: white; width: 436px; height: 140px; margin: 85% auto 0; padding: 0px 240px; font-size: 30px; }
.zcpc { color: white; width: 100%; height: 40px;
font-size: 20px; position: fixed; bottom: 10px; text-align: center; }
.divTransform { position: absolute; width: 100%; height: 100%; }
#renderCanvas { width: 100%; height: 100vh; touch-action: none;
outline: none; -webkit-tap-highlight-color: rgba(255, 255, 255, 0); /* mobile webkit */ touch-action: none;
background-repeat: no-repeat no-repeat; background-size: cover;
}
#show { width: 100%; font-size: 35px; line-height: 70px; }
.mytitle { width: 100%; text-align: center; font-size: 43px; font-weight: 700; color: white; margin-top: 75px; margin-bottom: 20px; }
.introduce { width: 600px; height: auto; background: url('img/shuomingkuang@2x.png') no-repeat; background-size: 100% 100%; position: fixed; top: 38%; left: 19%; z-index: 99; color: white; padding: 35px 28px; font-size: 10px; display: none; }
.introduce2 { width: 520px; height: auto; background: url('img/shuomingkuang@2x.png') no-repeat; background-size: 100% 100%; position: fixed; bottom: 10%; left: 30%; z-index: 99; color: white; padding: 20px; font-size: 14px; line-height: 19px; display: none; }
.xingshang { width: 100%; position: fixed; bottom: 0px; left: 0; height: 340px; box-sizing: border-box; padding: 20px 30px; color: white; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: hidden; border-radius: 35px 35px 0 0; display: none; }
.xingshangpc { width: 520px; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 20px 30px; color: white; }
.zuoimg { width: 38px; height: 72px; margin: 48px 29px; }
.zuoimgpc { width: 13px; height: 22px; margin: 18px 7px; }
.xsul { width: 100%; display: flex; justify-content: space-between; margin-top: 50px; }
.xsli { /* margin: 0 10px; */ font-size: 28px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.xslipc { font-size: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.xsimg { width: 72px; height: 72px; margin: 25px; }
.xsimgpc { width: 32px; height: 32px; margin: 12px; }
.jiange { width: 22px; height: 22px; margin-top: 53px; }
.jiangepc { width: 15px; height: 15px; margin-top: 22px; }
.beijing { width: 100%; position: fixed; bottom: 0px; left: 0; height: 420px; box-sizing: border-box; padding: 20px 30px; color: white; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: hidden; border-radius: 35px 35px 0 0; display: none; }
.beijingpc-di, .xingsh-di { width: 81.2%; position: fixed; bottom: 30px; left: 0px; height: 220px; background-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0, rgba(0, 0, 0, 0.3) 8%, rgba(0, 0, 0, 0.5) 18%, rgba(0, 0, 0, 0.5) 80%, rgba(0, 0, 0, 0.3) 90%, rgba(0, 0, 0, 0) 100%); display: none; }
/*.xingsh-di{ display: block; }*/ .beijingpc { width: 50%; height: 100%; margin: 0 auto; box-sizing: border-box; padding: 10px 15px; color: white; display: flex; justify-content: center; align-items: center; }
.leftpc, .rightpc { width: 12px; height: 21px; margin: 0 12px; display: flex; align-items: center; }
.leftimgpc, .rightimgpc { width: 12px; height: 21px; margin-top: 25px; }
.zhongj { width: 93%; max-width: 880px; height: 100%; overflow-x: auto; overflow-y: hidden;
}
.bjtit { font-size: 38px; display: flex; justify-content: space-between; margin: 37px 0 27px; }
.bjtitpc { font-size: 18px; display: flex; justify-content: space-between; margin: 14px 0; }
.ycdiv { display: flex; justify-content: space-between; align-items: center; width: 132px; }
.ycdivpc { display: flex; justify-content: space-between; align-items: center; width: 45px; font-size: 11px; }
.ycimg { width: 38px; height: 28px; }
.ycimgpc { width: 16px; height: 12px; }
.bjul { width: 100%; display: flex; margin: 0; padding: 0; overflow-y: hidden; overflow-x: auto; }
.bjulpc { /*width: 100%;*/ height: 140px; display: flex; }
.bjulpc-di { width: 100%; height: 140px; display: flex; margin: 0; padding: 0; overflow-y: hidden; overflow-x: auto; }
.bjulpc-di::-webkit-scrollbar { display: none }
.bjli { margin: 0 10px; font-size: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.bjlipc { margin: 0 5px; font-size: 14px; display: flex; flex-direction: column; justify-content: center; align-items: center; }
.bjdiv { height: 188px; display: flex; justify-content: center; align-items: flex-end; }
.bjdivpc { height: 120px; display: flex; justify-content: center; align-items: flex-end; }
.bjimg { width: 138px; height: 138px; margin-bottom: 20px; border-radius: 14px; }
.bjimgpc { width: 98px; height: 98px; margin-bottom: 10px; border-radius: 6px; }
.contint2 { width: 100%; position: fixed; bottom: 0px; left: 0; height: 300px; box-sizing: border-box; padding: 20px 30px; color: white; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: hidden; border-radius: 35px 35px 0 0;
}
.contint2::-webkit-scrollbar { display: none; }
.main2 { width: 100%; height: auto; display: none; }
.shangla, .xiala { width: 100%; height: 160px; text-align: center; position: fixed; bottom: 140px; left: 0; border-radius: 35px 35px 0 0; display: block; z-index: 99; background-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.18)); }
.xialaimg { width: 80px; height: 11px; margin-top: 44px; }
.oprition { width: 100%; position: fixed; top: 30px; left: 0; z-index: 999; display: flex; justify-content: center; }
.listimg { width: 150px; position: relative; display: flex; flex-direction: column; align-items: center; }
.listimg img { width: 103px; height: 103px; }
.conts { width: 100%; font-size: 28px; color: white; height: 101px; box-sizing: border-box; padding: 30px; text-align: center; border-radius: 5px; text-align: center; }
.contcj, .contzk, .contxx { width: 124px; }
.contbj, .conthy, .contcz { width: 178px; }
.mengban { position: fixed; top: 0; left: 0; width: 100%; z-index: 1000; background-color: rgba(0, 0, 0, 0); }
/* .articcont { width: 100%;
position: fixed; top: 30%; left: 0; z-index: 9999; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 30px; box-sizing: border-box; display: none; }
.articcont:after { content: ''; display: inline-block; width: 0; height: 0; border: 20px solid transparent; border-bottom: 20px solid rgba(0, 0, 0, 0.6); position: absolute; top: -38px; right: 48%; } */
.ul { width: 100%; }
.shoushi { width: 800px; height: auto; padding: 110px }
.span1 { font-size: 66px; color: white; margin-right: 13px; position: relative; bottom: 10px; }
.know { width: 200px; text-align: center; padding: 16px 0; font-size: 32px; margin: 30px auto 0; border-radius: 10px; color: white; font-weight: 600; }
.ikngb { width: 57px; height: 57px; }
/*pc端*/ .mains { width: 18.8%; display: none; box-sizing: border-box; }
.contint { width: 100%; /*height: 250px;*/ box-sizing: border-box; color: white; background-color: rgba(0, 0, 0, 0.6); overflow-x: hidden; overflow-y: hidden; background: #151837; }
.title2 { width: 100%; height: 62px; background-color: #151837; color: white; display: flex; justify-content: space-between; align-items: center; box-sizing: border-box; padding: 0 20px; font-size: 22px; font-weight: 700; }
.oprition2 { position: fixed; top: 10px; right: 19%; width: 56px; }
.listimg2 { margin-top: 20px; position: relative; }
.listimg2 img { width: 47px; height: 47px; }
.conts2 { background: rgb(0, 0, 0, 0.5); font-size: 14px; color: white; height: 32px; line-height: 32px; box-sizing: border-box; text-align: center; border-radius: 3px; position: absolute; right: 73px; top: 10px; display: none; }
.conts2:after { content: ''; display: inline-block; width: 0; height: 0; border: 7px solid transparent; border-left: 7px solid rgba(0, 0, 0, 0.8); position: absolute; top: 7px; right: -14px; }
/* .articcont2 { width: 800px; height: 700px; margin: 50px auto; background-color: rgba(0, 0, 0, 0.6); border-radius: 10px; padding: 20px; box-sizing: border-box; }
.articcont2:after { content: ''; display: inline-block; width: 0; height: 0; border: 10px solid transparent; border-top: 10px solid rgba(0, 0, 0, 0.6); position: absolute; top: 202px; right: 48%; } */
.ul2 { width: 100%; color: white; }
.li2 { width: 100%; font-size: 14px; line-height: 19px; }
.mengban2 { position: fixed; top: 0; left: 0; width: 81.2%; background-color: rgba(0, 0, 0, 0.2); display: none; z-index: 10; }
.knowpc { font-size: 14px; width: 83px; height: 33px; line-height: 33px; text-align: center; background-color: #008aff; margin: 20px auto 0; border-radius: 5px; color: white; font-weight: 600; cursor: pointer; }
.span2 { font-size: 36px; color: white; margin-right: 13px; position: relative; bottom: 3px; }
.shuop1 { font-size: 15px; }
.oka { width: 100%; height: 100%; background: #021941; position: fixed; z-index: 99; /* padding: 35px 28px; */ font-size: 30px; /*display: none;*/ }
/*下面是音乐的css*/ .lohingif { width: 100%; height: auto; display: flex; justify-content: center; }
.lohingifpc { width: 100%; height: auto; display: flex; top: 50%; /*偏移*/ transform: translateY(-50%); }
.feitimg { width: 20px; height: auto; position: relative; top: 3px; }
.fatherdiv { margin: 25px; width: 72px; height: 72px;
position: relative; background-color: #f3f3f3; border-radius: 50%; }
.persentdiv { display: none; margin: -24px 0px 0px 0px; width: 72px; height: 72px; border-radius: 50%; position: absolute; clip: rect(0, 72px, 72px, 36px); }
.persentleft { position: absolute; width: 72px; height: 72px; border: 10px solid #1890ff; box-sizing: border-box; border-radius: 50%; clip: rect(0, 36px, 72px, 0); }
.persentright { position: absolute; width: 72px; height: 72px; border: 10px solid #1890ff; box-sizing: border-box; border-radius: 50%; clip: rect(0, 72px, 72px, 36px); }
.persentdivpc { display: none; margin: -10px 0px 0px 0px; width: 32px; height: 32px; border-radius: 50%; position: absolute; clip: rect(0, 32px, 32px, 16px); }
.persentleftpc { position: absolute; width: 32px; height: 32px; border: 5px solid #1890ff; box-sizing: border-box; border-radius: 50%; clip: rect(0, 16px, 32px, 0); }
.persentrightpc { position: absolute; width: 32px; height: 32px; border: 5px solid #1890ff; box-sizing: border-box; border-radius: 50%; clip: rect(0, 32px, 32px, 16px); }
.wth0 { width: 0; }
.num { position: absolute; box-sizing: border-box; width: 130px; height: 130px; line-height: 130px; text-align: center; font-size: 32px; left: 10px; top: 10px; border-radius: 50%; background-color: #fff; color: #1890ff; z-index: 1; }
.clip-auto { clip: rect(auto, auto, auto, auto); }
.rotate { -webkit-animation: rotating 3s linear infinite; animation: rotating 3s linear infinite;
animation-play-state: running; -webkit-animation-play-state: running; /* Safari 和 Chrome */ }
.rotate-pause { animation-play-state: paused; -webkit-animation-play-state: paused; /* Safari 和 Chrome */ }
@-webkit-keyframes rotating { from { -webkit-transform: rotate(0) }
to { -webkit-transform: rotate(360deg) } }
@keyframes rotating { from { transform: rotate(0) }
to { transform: rotate(360deg) } }
@-moz-keyframes rotating { from { -moz-transform: rotate(0) }
to { -moz-transform: rotate(360deg) } }
</style></head>
<body> <div class="divTransform"> <canvas id="renderCanvas" touch-action="none"></canvas> </div> <div id="customLoadingScreenDiv_first" style="position: absolute; left: 0px; top: 0px; width: 1158.1px; height: 1211px; display: initial;"> <!-- <div class="oka">
<div class="lohingif"> <img src="./logok.gif" class="jiazaiimg"> </div> <div class="zcpc"> </div> </div> --> </div> <script src="./js/jquery-3.5.1.min.js"></script>
<script src="./js/pep.js"></script> <script src="./js/babylon.js"></script> <script src="./js/babylonjs.loaders.min.js"></script> <script src="./js/babylon.gui.min.js"></script> <script src="./js/draco_wasm_wrapper_gltf.js"></script> <script src="./index.js"></script></body>
</html>
|
