You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
905 lines
18 KiB
905 lines
18 KiB
<!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>
|
|
<!--- Link to the last version of BabylonJS --->
|
|
<script src="./js/jquery-3.5.1.min.js"></script>
|
|
|
|
<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>
|
|
|
|
</body>
|
|
|
|
</html>
|