init

css/index.css

@@ -0,0 +1,301 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    font-family: PingFangSC-Regular, sans-serif;
+}
+
+html, body, h1, h2, h3, h4, h5, h6, div, dl, dt, dd, ul, ol, li, p, blockquote, pre, hr, figure, table, caption, th, td, form, fieldset, legend, input, button, textarea, menu {
+    margin: 0;
+    padding: 0;
+}
+
+/* ::-webkit-scrollbar {
+    display: none;
+} */
+
+iframe {
+    width: 100%;
+    height: 100%;
+}
+
+#ui {
+    position: absolute;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    /* color: #494949; */
+    letter-spacing: 3px;
+}
+
+#logoText {
+    z-index: 1;
+    position: absolute;
+    bottom: 20px;
+    font-size: 18px;
+    font-weight: 100;
+    letter-spacing: 4px;
+}
+
+.switch-btn-Wrap {
+    z-index: 1;
+    position: absolute;
+    top: 20px;
+    right: 20px;
+}
+
+.switch-btn-Wrap img {
+    width: 75px;
+    ;
+}
+
+#objName {
+    z-index: 1;
+    position: absolute;
+    top: 20px;
+    left: 32px;
+    font-size: 22px;
+    font-weight: 100;
+    letter-spacing: 4px;
+    color: #ffffff;
+}
+
+#iconWrap {
+    position: absolute;
+    bottom: 30px;
+    width: 200px;
+    display: flex;
+    justify-content: center;
+    z-index: 1;
+}
+
+.mar-right {
+    margin-right: 120px;
+}
+
+#iconLeft {
+    cursor: not-allowed;
+}
+
+#iconRight {
+    cursor: pointer;
+}
+
+#introductionWrap{
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    left: 20px;
+    text-align: left;
+    top: 20px;
+    font-size: 16px;
+    color: #ffffff;
+    font-weight: 100;
+    line-height: 30px;
+    letter-spacing: 2px;
+    width: 500px;
+    display:none;
+}
+#companyText{
+    position: absolute;
+    z-index: 1;
+    font-size: 16px;
+    color:rgb(153, 153, 153);
+    font-weight: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    letter-spacing: 1px;
+    text-shadow:rgb(51, 51, 51) 0px 1px 1px;
+}
+.bg-audio {
+    display:block;
+    position:absolute;
+    bottom:30px;
+    right:10px;
+    width:30px;
+    height:30px;
+    background:url(../images/bgmusic-play-icon.png)center/100% no-repeat;
+    z-index:99;
+}
+.iconHome{
+    top:30px;
+}
+.iconMenu {
+    position:absolute;
+    z-index:2;
+    right:52px;
+    display:flex;
+    align-items: center;
+    flex-direction: column;
+    text-align: center;
+}
+.iconInfo {
+    top:150px;
+}
+.iconMenu span {
+    color:#fff;
+}
+#time, #size, #content,#excavated_time{
+    margin-top: 8px;
+}
+#content p {
+    text-indent:2em;
+}
+@media screen and (max-width: 600px) {
+     #introductionWrap {
+        width:70%;
+        height:60%;
+        overflow-y:scroll;
+        position:absolute;
+        margin:0 auto;
+        top:10%;
+        font-size:14px;
+        line-height: 20px;
+        display:none;
+    }
+    #time, #size, #content,#excavated_time {
+        margin-top:4px;
+    }
+    #content {
+       
+    }
+    #name {
+        font-weight:bold;
+    }
+    #iconAction {
+        position:absolute;
+        z-index:99;
+    }
+    .iconMenu {
+        width:60px;
+        right:10px;
+    }
+    .iconMenu img {
+        width:50%;
+    }
+    .iconHome {
+
+    }
+    .iconInfo {
+        top:90px;
+    }
+    .iconMenu span {
+        font-size:10px;
+    }
+    #iconWrap {
+        width:50%;
+        z-index:2;
+
+    }
+    #iconLeft,#iconRight {
+        width:30px;
+        height:30px;
+    }
+    #companyText{
+        font-size:13px;
+    }
+}
+@media only screen and (max-height:480px) {
+    .center img, .center-first img {
+        width: 52vw;
+        max-width: 250px;
+        max-height: 110px;
+    }
+    .center:nth-child(8) img {
+        width: 30vw;
+        max-width: 153px;
+        max-height: 127px;
+    }
+    .center:nth-child(17) img {
+        width: 30vw;
+        max-width: 165px;
+        max-height: 176px;
+    }
+   
+}
+.animated {
+    -webkit-animation-duration:1s;
+    animation-duration:1s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both
+}
+@-webkit-keyframes fadeInRight {
+    0% {
+        opacity:0;
+        -webkit-transform:translate3d(100%, 0, 0);
+        transform:translate3d(100%, 0, 0)
+    }
+    to {
+        opacity:1;
+        -webkit-transform:translateZ(0);
+        transform:translateZ(0)
+    }
+}
+@keyframes fadeInRight {
+    0% {
+        opacity:0;
+        -webkit-transform:translate3d(100%, 0, 0);
+        transform:translate3d(100%, 0, 0)
+    }
+    to {
+        opacity:1;
+        -webkit-transform:translateZ(0);
+        transform:translateZ(0)
+    }
+}
+.fadeInRight {
+    -webkit-animation-name:fadeInRight;
+    animation-name:fadeInRight
+}
+
+@-webkit-keyframes fadeOutRight {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0;
+        -webkit-transform:translate3d(100%, 0, 0);
+        transform:translate3d(100%, 0, 0)
+    }
+}
+@keyframes fadeOutRight {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0;
+        -webkit-transform:translate3d(100%, 0, 0);
+        transform:translate3d(100%, 0, 0)
+    }
+}
+.fadeOutRight {
+    -webkit-animation-name:fadeOutRight;
+    animation-name:fadeOutRight
+}
+
+@-webkit-keyframes fadeOut {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0
+    }
+}
+@keyframes fadeOut {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0
+    }
+}
+.fadeOut {
+    -webkit-animation-name:fadeOut;
+    animation-name:fadeOut;
+    -webkit-animation-duration:2s;
+    animation-duration: 2s;
+}

css/main.css

@@ -0,0 +1,187 @@
+body {
+    background: #dddada;
+    font-family: '微软雅黑';
+}
+
+.containers {
+    width: 1080px;
+    /* overflow: hidden; */
+    min-height: 80vh;
+    margin: 0 auto;
+}
+
+.con-title {
+    width: 300px;
+    margin: 0 auto;
+    margin-top: 20px;
+    display: inline-block;
+    font-size: 20px;
+    text-align: center;
+    font-weight: bold;
+    padding: 20px;
+}
+
+.con {
+    padding-right: 20px !important;
+    /* width: 100%; */
+    height: auto;
+    overflow: hidden;
+    /* background: #f9fafc; */
+    /* margin: 0 auto 0; */
+    display: flex;
+    flex-wrap: wrap;
+    /* padding: 20px 2%; */
+    justify-content: center;
+}
+
+.con li {
+    text-align: center;
+    width: 17%;
+    height: 80vh;
+    display: inline-block;
+    margin: 25px 10px;
+    position: relative;
+    cursor: pointer;
+}
+
+.case {
+    /* padding: 10px; */
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    background: url(../img/divBac.png);
+    background-size: 100% 100%;
+    /* border-radius: 10px; */
+    box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.4);
+    transition: all 0.3s;
+}
+}
+
+.case:hover {
+    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.6);
+    transform: translateY(-15px);
+}
+
+.case .card-img {
+    width: 100%;
+    height: 80vh;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: top center;
+    width: 100%;
+    height: 100%;
+    background-size: 100% 100%;
+}
+
+.con li p {
+    color: #fff;
+    margin-top: 10px;
+    font-size: 16px;
+    font-weight: 100;
+}
+
+.link-a {
+    width: 100%;
+    height: 100%;
+    display: inline-block;
+}
+
+#introductionWrap {
+    position: absolute;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    right: 20px;
+    text-align: right;
+    top: 20px;
+    font-size: 18px;
+    color: #ffffff;
+    font-weight: 100;
+    line-height: 30px;
+    letter-spacing: 2px;
+}
+
+#companyText {
+    position: absolute;
+    z-index: 1;
+    font-size: 16px;
+    color: rgb(153, 153, 153);
+    font-weight: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    letter-spacing: 1px;
+    text-shadow: rgb(51, 51, 51) 0px 1px 1px;
+}
+
+@media screen and (max-width: 600px) {
+    .containers {
+        width: 100%;
+    }
+
+    .con {
+        padding: 0;
+    }
+
+    .case .card-img {
+        background-size: auto 100%;
+        height: 90px;
+    }
+
+    .con li {
+        width: 44%;
+    }
+
+    #introductionWrap {
+        position: absolute;
+        z-index: 1;
+        display: flex;
+        flex-direction: column;
+        right: 10px;
+        text-align: right;
+        top: 16px;
+        font-size: 16px;
+        color: #ffffff;
+        font-weight: 100;
+        line-height: 28px;
+        letter-spacing: 1px;
+    }
+
+    /* .con li p {
+        font-size: 16px;
+    } */
+}
+
+@media screen and (max-width: 350px) {
+    .con li {
+        margin: 20px auto;
+    }
+}
+
+.hide {
+    display: none;
+}
+
+#companyText {
+    position: absolute;
+    z-index: 1;
+    font-size: 16px;
+    font-weight: 100;
+    left: 50%;
+    transform: translateX(-50%);
+    bottom: 20px;
+    letter-spacing: 1px;
+}
+
+
+@media screen and (max-width: 320px) {
+    .con li {
+        width: 43%;
+    }
+
+    .con li p {
+        font-size: 14px;
+        font-weight: 100;
+    }
+}

css/reset.css

@@ -0,0 +1,59 @@
+/* http://meyerweb.com/eric/tools/css/reset/ 
+   v2.0 | 20110126
+   License: none (public domain)
+*/
+
+html, body, div, span, applet, object, iframe,
+h1, h2, h3, h4, h5, h6, p, blockquote, pre,
+a, abbr, acronym, address, big, cite, code,
+del, dfn, em, img, ins, kbd, q, s, samp,
+small, strike, strong, sub, sup, tt, var,
+b, u, i, center,
+dl, dt, dd, ol, ul, li,
+fieldset, form, label, legend,
+table, caption, tbody, tfoot, thead, tr, th, td,
+article, aside, canvas, details, embed, 
+figure, figcaption, footer, header, hgroup, 
+menu, nav, output, ruby, section, summary,
+time, mark, audio, video {
+	margin: 0;
+	padding: 0;
+	border: 0;
+	font-size: 100%;
+	font: inherit;
+	vertical-align: baseline;
+}
+/* HTML5 display-role reset for older browsers */
+article, aside, details, figcaption, figure, 
+footer, header, hgroup, menu, nav, section, main {
+	display: block;
+}
+a{
+  text-decoration: none;
+  color: #000;
+}
+body {
+	line-height: 1;
+}
+ol, ul {
+	list-style: none;
+}
+blockquote, q {
+	quotes: none;
+}
+blockquote:before, blockquote:after,
+q:before, q:after {
+	content: '';
+	content: none;
+}
+table {
+	border-collapse: collapse;
+	border-spacing: 0;
+}
+button{outline:none;}
+input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{
+        -webkit-appearance:textfield;
+}
+input[type="number"]{
+        -moz-appearance:textfield;
+}

css/wechat.css

@@ -0,0 +1,107 @@
+@font-face
+	{
+	font-family: "SourceHanSerifCN Bold";
+	src: url('../font/SourceHanSerifCN-Bold.otf'); 
+	}
+    @font-face
+	{
+	font-family: "SourceHanSerifCN Regular";
+	src: url('../font/SourceHanSerifCN-Regular.otf'); 
+	}
+  
+    
+/* 设置滚动条的样式 */
+::-webkit-scrollbar {
+    width:4px;
+    }
+    /* 滚动槽 */
+    ::-webkit-scrollbar-track {
+    border-radius:2px;
+    background:url(../img/line-bg.jpg)center/2px 100% no-repeat;
+    }
+    /* 滚动条滑块 */
+    ::-webkit-scrollbar-thumb {
+    width:4px;
+    border-radius:4px;
+    background:#890d12;
+   
+    }
+    /* ::-webkit-scrollbar-thumb:window-inactive {
+    background: #890d02;
+    } */
+
+* {
+    margin:0;
+    padding:0;
+}
+.ui {
+    
+}
+.top-name {
+    position:absolute;
+    z-index:22;
+    width:100%;
+    text-align:center;
+    font-family: "SourceHanSerifCN Bold";
+    font-size:5.6vw;
+    color:#890d12;
+    margin:2vh auto;
+}
+.bottom-description {
+    position:absolute;
+    z-index:22;
+    left:0;
+    right:0;
+    bottom:5vh;
+    margin:auto;
+    width:94.67vw;
+    height:44.53vw;
+    background:url(../img/info-bg.png)center/100% no-repeat;
+    padding:5vw 8vw 5vw 10vw;
+    box-sizing:border-box;
+}
+.bottom-description .inner {
+    height:100%;
+    overflow-y: scroll;
+    padding-right:4vw;
+}
+.bottom-description p {
+    font-size:2.53vw;
+    line-height:6vw;
+    color:#151c2c;
+}.bottom-description .item p#info {
+    width:58vw;
+    text-align:justify;
+}
+.bottom-description .item {
+    display:flex;
+    align-items: flex-start;
+}
+.bottom-description .item  span {
+    display:block;
+    width:15vw;
+    font-size:2.53vw;
+    font-family: "SourceHanSerifCN Regular";
+    line-height:6vw;
+}
+.audio {
+    position:absolute;
+    z-index:22;
+    top:10vh;
+    right:2vw;
+    width:12.26vw;
+    height:19.33vw;
+    background:url(../img/music-on.png)center/100% no-repeat;
+}
+.audio.on {
+    background:url(../img/music-off.png)center/100% no-repeat;
+}
+#companyText {
+    position:absolute;
+    z-index:22;
+    width:100%;
+    bottom:10px;
+    text-align:center;
+    font-size:10px;
+    color:rgb(255 255 255 / 0.5);
+}

index.html

@@ -0,0 +1,99 @@
+<!DOCTYPE html>
+<html lang="ch-zh">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
+    <link rel="shortcut icon" href="./img/favicon.ico" type="image/x-icon" />
+    <link rel="stylesheet" href="./css/reset.css" />
+    <link rel="stylesheet" href="./css/main.css" />
+    <title>-</title>
+  </head>
+  <style>
+    .myTitle {
+      letter-spacing: 4px;
+      margin: 0 auto;
+      color: #fff;
+      display: flex;
+      font-size: 20px;
+      justify-content: center;
+      align-items: center;
+      width: 270px;
+      height: 50px;
+      background: url("./img/titleBac.png") no-repeat center;
+      background-size: 100% 100%;
+    }
+    .options {
+      display: flex;
+      justify-content: space-between;
+      margin: 20px auto;
+      width: 300px;
+    }
+    .btn {
+      width: 120px;
+      height: 35px;
+      border-radius: 10px;
+      box-shadow: none;
+      border: 1px solid #9d917f;
+      background: #ffffff21;
+      color: white;
+      font-size: 14px;
+    }
+    .active {
+      background: #ffffff21;
+    }
+
+    .containers {
+      padding-top: 40px;
+      width: 100vw;
+      box-sizing: border-box;
+      height: 100vh;
+      background-color: #285b5e;
+    }
+
+    .pageBox {
+      position: fixed;
+      z-index: 99;
+      right: 20px;
+      top: 10px;
+      display: flex;
+    }
+
+    .pageBox > div {
+      width: 24px;
+      height: 24px;
+      background-color: #fff;
+      cursor: pointer;
+      margin-left: 15px;
+      line-height: 24px;
+      text-align: center;
+      border-radius: 5px;
+      border: 1px solid #ccc;
+    }
+
+    .pageBox > div:hover {
+      background-color: #285b5e;
+      color: #fff;
+    }
+
+    .pageBox .active {
+      pointer-events: none;
+      background-color: #285b5e;
+      color: #fff;
+    }
+  </style>
+
+  <body>
+    <div class="containers">
+      <div class="myTitle"></div>
+      <ul class="con"></ul>
+    </div>
+    <script src="./info.js"></script>
+    <script src="js/jquery.js"></script>
+    <script src="js/ui.js"></script>
+    <script>
+      document.title = titleInfo;
+      $(".myTitle").text(titleInfo);
+    </script>
+  </body>
+</html>

info.js

@@ -0,0 +1,43 @@
+// **注意不要手打任何符号，请全部使用 复制 粘贴，以免格式错误，程序无法运行！**
+//（所有标点符号都不要删除，你只需要修改文字和编号）
+
+// 定义网址的 标题
+let titleInfo = "场景展示云平台";
+
+// 是否开启模型自动旋转功能  开启:true  关闭:false
+let spinInfo = false;
+
+// 是否开启分页  开启:true  关闭:false
+let pageOpen = false;
+
+// 分页条数 在9-100之间
+let pageNum = 5;
+
+//配置  模型文件名字
+// 左边的是编号
+// 右边的是 模型名称
+// 这里举一个模型例子（这里的书写顺序就是网址的排列顺序）
+// （所有标点符号都不要删除，你只需要修改文字和编号，添加的时候复制粘贴即可）
+
+// 复制模板    '':``,
+
+// 3d
+let objInfo = {
+  // 慧严寺 （无）
+  "WK1714580180988624896": `fd720_hcUwrBw1J`,
+  // 宝梵寺
+  "WK1714580861933879296": `fd720_6tr9fLQql`,
+  // 金仙寺
+  "WK1714560172254330880": `fd720_nzbmzkkzu`,
+  // 饶益寺
+  "WK1714581156072030208": `fd720_cUzbspaAT`,
+
+};
+
+// 2d
+let objInfo2d = {
+
+};
+
+
+

js/ui.js

@@ -0,0 +1,131 @@
+(function () {
+  let fragment = document.createDocumentFragment();
+  // 记录当前是选中的维度
+  let dimensionality = "3d";
+  $("#3dbtn").css("background", "#ffffff70");
+  $("#2dbtn").css("cursor", "pointer");
+  $("#3dbtn").css("cursor", "pointer");
+
+  // 获取地址栏信息
+  let GetQueryString = (name) => {
+    let reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+    let r = window.location.search.substr(1).match(reg);
+    if (r != null) return unescape(r[2]);
+    return "";
+  };
+  let temp = GetQueryString("m");
+
+  const arrAll = [];
+
+  // 开启了分页得到的数组
+  let arr = [];
+  // 总数组分割
+  let arrSpile = [];
+
+  const getData = (infos) => {
+    arrAll.length = 0;
+    // 获取总数组
+    for (let k in infos) {
+      arrAll.push({
+        id: k,
+        vr: infos[k],
+      });
+    }
+    if (pageOpen) {
+      // 数据的总数
+      const total = arrAll.length;
+
+      // 计算出分页的个数
+      const pageSize = Math.ceil(total / pageNum);
+      // 生成 分页 指示器
+      const body = document.querySelector("body");
+      const pageBox = document.createElement("div");
+      pageBox.classList.add("pageBox");
+      for (let i = 0; i < pageSize; i++) {
+        const pageBoxSon = document.createElement("div");
+        pageBoxSon.innerHTML = i + 1;
+        pageBox.appendChild(pageBoxSon);
+
+        // 当前的裁剪数据-联合数组类型
+        arrSpile.push(arrAll.slice(i * pageNum, (i + 1) * pageNum));
+      }
+      body.appendChild(pageBox);
+
+      // 为分页绑定点击事件
+      const pageDomSonAll = document.querySelectorAll(".pageBox div");
+      pageDomSonAll.forEach((v, i) => {
+        v.addEventListener("click", () => {
+          pageDomCreateFu(i);
+        });
+      });
+    } else arr = arrAll;
+  };
+
+  getData(objInfo);
+
+  // // 绑定2D/3D按钮事件
+  // $("#2dbtn").on("click", function () {
+  //   // alert("2dbtn被点击了!");
+  //   dimensionality = "2d";
+  //   $("#2dbtn").css("background", "#ffffff70");
+  //   $("#3dbtn").css("background", "#ffffff21");
+  //   // alert(dimensionality);
+  //   getData(objInfo2d);
+  //   pageDomCreateFu(0);
+  // });
+
+  // $("#3dbtn").on("click", function () {
+  //   // alert("3dbtn被点击了!");
+  //   dimensionality = "3d";
+  //   $("#3dbtn").css("background", "#ffffff70");
+  //   $("#2dbtn").css("background", "#ffffff21");
+  //   // alert(dimensionality);
+  //   getData(objInfo);
+  //   pageDomCreateFu(0);
+  // });
+
+  // 向页面创建元素
+  const pageDomCreateFu = (acNum) => {
+    if (pageOpen) {
+      arr = arrSpile[acNum];
+      //高亮当前
+      const pageDomSonAll = document.querySelectorAll(".pageBox div");
+      pageDomSonAll.forEach((v) => {
+        v.classList.remove("active");
+      });
+      pageDomSonAll[acNum].classList.add("active");
+    }
+
+    let ul = document.querySelector(".con");
+    ul.innerHTML = "";
+
+    arr.forEach((v) => {
+      let li = document.createElement("li");
+      let divWrap = document.createElement("div");
+      let a = document.createElement("a");
+      let div = document.createElement("div");
+      // let p = document.createElement("p");
+      divWrap.classList.add("case");
+      a.classList.add("link-a");
+
+      divWrap.addEventListener("click", function () {
+        window.open(
+          `https://www.4dkankan.com/panorama/showMobile.html?id=${v.id}&vr=${v.vr}&lang=zh`
+        );
+      });
+
+      div.classList.add("card-img");
+      div.style = `background-image: url(images/${v.id}.jpg); width: 100%; height: 100%; background-size: 100% 100%`;
+      // p.innerHTML = v.vr;
+      a.appendChild(div);
+      // divWrap.appendChild(a);
+      li.appendChild(a);
+      li.appendChild(divWrap);
+      // li.appendChild(p);
+      fragment.appendChild(li);
+    });
+    ul.appendChild(fragment);
+  };
+
+  pageDomCreateFu(0);
+})();