|
|
<!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" /> <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"> <script type="text/javascript" src="./js/qrcode.min.js"></script> <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; } .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; } */
.jiazaiimg { width: 436px; height: auto; margin: 50% auto 0; padding: 0px 200px; font-size: 30px; } .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-color: #031435; background-repeat: no-repeat no-repeat; background-size: cover; overflow: hidden; }
/* #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 { 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; }s
/*pc端*/ .mains { width: 18.8%; display: none; box-sizing: border-box; }
.contint { width: 100%; 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: rgba(0, 0, 0, 1); position: fixed; z-index: 99; font-size: 30px; }
/*下面是音乐的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; } .rotate-pause { animation-play-state: paused; -webkit-animation-play-state: paused; }
@-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 id="app"> <!-- <el-button @click="visible = true">Button</el-button>
<el-dialog :visible.sync="visible" title="Hello world"> <p>Try Element</p> </el-dialog> --> </div> <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="https://cdn.bootcss.com/vue/2.5.16/vue.js"></script> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!-- https://unpkg.com/vue@2.6.14/dist/vue.min.js --> <script src="./js/pep.js"></script> <script src="https://qiniu.aiyxlib.com/babylon.js"></script> <script src="https://qiniu.aiyxlib.com/babylonjs.loaders.min.js"></script> <script src="https://qiniu.aiyxlib.com/babylon.gui.min.js"></script> <script src="https://qiniu.aiyxlib.com/draco_wasm_wrapper_gltf.js"></script> <script src="./index.js"></script> <script> var app = new Vue({ el: '#app', data: { name: 'Vue.js', visible: false }, methods: { } }) </script></body>
</html>
|
