初步完工

webM/package-lock.json

@@ -8,6 +8,7 @@
       "name": "code",
       "version": "0.1.0",
       "dependencies": {
+        "axios": "^0.27.2",
         "core-js": "^3.6.5",
         "element-ui": "^2.15.6",
         "html2canvas": "^1.3.3",
@@ -3065,8 +3066,7 @@
     "node_modules/asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "node_modules/atob": {
       "version": "2.1.2",
@@ -3119,6 +3119,28 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "node_modules/axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "dependencies": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      }
+    },
+    "node_modules/axios/node_modules/form-data": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+      "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+      "dependencies": {
+        "asynckit": "^0.4.0",
+        "combined-stream": "^1.0.8",
+        "mime-types": "^2.1.12"
+      },
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -4275,7 +4297,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "dependencies": {
         "delayed-stream": "~1.0.0"
       },
@@ -5455,7 +5476,6 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
       "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true,
       "engines": {
         "node": ">=0.4.0"
       }
@@ -6810,10 +6830,9 @@
       }
     },
     "node_modules/follow-redirects": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
-      "dev": true,
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ==",
       "engines": {
         "node": ">=4.0"
       },
@@ -9221,7 +9240,6 @@
       "version": "1.50.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
       "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
-      "dev": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -9230,7 +9248,6 @@
       "version": "2.1.33",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
       "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
-      "dev": true,
       "dependencies": {
         "mime-db": "1.50.0"
       },
@@ -17363,8 +17380,7 @@
     "asynckit": {
       "version": "0.4.0",
       "resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
-      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k=",
-      "dev": true
+      "integrity": "sha1-x57Zf380y48robyXkLzDZkdLS3k="
     },
     "atob": {
       "version": "2.1.2",
@@ -17407,6 +17423,27 @@
       "integrity": "sha512-xh1Rl34h6Fi1DC2WWKfxUTVqRsNnr6LsKz2+hfwDxQJWmrx8+c7ylaqBMcHfl1U1r2dsifOvKX3LQuLNZ+XSvA==",
       "dev": true
     },
+    "axios": {
+      "version": "0.27.2",
+      "resolved": "https://registry.npmmirror.com/axios/-/axios-0.27.2.tgz",
+      "integrity": "sha512-t+yRIyySRTp/wua5xEr+z1q60QmLq8ABsS5O9Me1AsE5dfKqgnCFzwiCZZ/cGNd1lq4/7akDWMxdhVlucjmnOQ==",
+      "requires": {
+        "follow-redirects": "^1.14.9",
+        "form-data": "^4.0.0"
+      },
+      "dependencies": {
+        "form-data": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmmirror.com/form-data/-/form-data-4.0.0.tgz",
+          "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
+          "requires": {
+            "asynckit": "^0.4.0",
+            "combined-stream": "^1.0.8",
+            "mime-types": "^2.1.12"
+          }
+        }
+      }
+    },
     "babel-eslint": {
       "version": "10.1.0",
       "resolved": "https://registry.npmjs.org/babel-eslint/-/babel-eslint-10.1.0.tgz",
@@ -18397,7 +18434,6 @@
       "version": "1.0.8",
       "resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
       "integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
-      "dev": true,
       "requires": {
         "delayed-stream": "~1.0.0"
       }
@@ -19366,8 +19402,7 @@
     "delayed-stream": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
-      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk=",
-      "dev": true
+      "integrity": "sha1-3zrhmayt+31ECqrgsp4icrJOxhk="
     },
     "depd": {
       "version": "1.1.2",
@@ -20511,10 +20546,9 @@
       }
     },
     "follow-redirects": {
-      "version": "1.14.5",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.14.5.tgz",
-      "integrity": "sha512-wtphSXy7d4/OR+MvIFbCVBDzZ5520qV8XfPklSN5QtxuMUJZ+b0Wnst1e1lCDocfzuCkHqj8k0FpZqO+UIaKNA==",
-      "dev": true
+      "version": "1.15.0",
+      "resolved": "https://registry.npmmirror.com/follow-redirects/-/follow-redirects-1.15.0.tgz",
+      "integrity": "sha512-aExlJShTV4qOUOL7yF1U5tvLCB0xQuudbf6toyYA0E/acBNw71mvjFTnLaRp50aQaYocMR0a/RMMBIHeZnGyjQ=="
     },
     "for-in": {
       "version": "1.0.2",
@@ -22463,14 +22497,12 @@
     "mime-db": {
       "version": "1.50.0",
       "resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.50.0.tgz",
-      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A==",
-      "dev": true
+      "integrity": "sha512-9tMZCDlYHqeERXEHO9f/hKfNXhre5dK2eE/krIvUjZbS2KPcqGDfNShIWS1uW9XOTKQKqK6qbeOci18rbfW77A=="
     },
     "mime-types": {
       "version": "2.1.33",
       "resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.33.tgz",
       "integrity": "sha512-plLElXp7pRDd0bNZHw+nMd52vRYjLwQjygaNg7ddJ2uJtTlmnTCjWuPKxVu6//AdaRuME84SvLW91sIkBqGT0g==",
-      "dev": true,
       "requires": {
         "mime-db": "1.50.0"
       }

webM/package.json

@@ -10,6 +10,7 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
     "html2canvas": "^1.3.3",

webM/public/4dage/Model.html

@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<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="icon" type="image/png" sizes="32x32" href="images/favicon.png" class="keep">
+<link rel="stylesheet" href="css/index.css">
+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
+<html>
+
+<head>
+    <title>文物展示</title>
+    <script src="js/4dage.js"></script>
+    <style>
+        html {
+            overflow: hidden;
+        }
+    </style>
+</head>
+
+<body>
+    <div id="ui">
+    </div>
+    <script src="js/jquery.js"></script>
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+
+    <script type="text/javascript" src="js/info.js"></script>
+    <script type="text/javascript" src="js/model.js"></script>
+    <script type="text/javascript" src="js/weixin.js"></script>
+    <script>
+         var number = getQueryVariable("m");
+       fdage.embed(number, { width: 800, height: 600, autoStart: true, fullFrame: true, pagePreset: false });
+
+        var number = getQueryVariable("m");
+        let pageNum = number.split("_")[1];
+
+        let iconLeft = document.querySelector('#iconLeft');
+        let iconRight = document.querySelector('#iconRight');
+        let iframe = document.querySelector('iframe');
+        let iconHome = document.querySelector('#iconHome');
+        let iconInfo = document.querySelector('#iconInfo');
+        var URL=window.location.href;
+        var n = -1;//当前位置
+        let list = ['yp01','yp02','yp03','yp04','yp05','yp06','yp07','yp08','yp09','yp09_1','yp10','yp11','yp12','yp13','yp14','yp15','yp16','yp17','yp18','yp19','yp20'];
+        list.forEach(function(val,index) {
+            if(val==number){
+                n= index;
+            }
+        })
+        function goToUrl(n) {
+            window.location.href = URL.replace(number,list[n]);
+        }
+    </script>
+</body>
+
+</html>

webM/public/4dage/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;
+}

webM/public/4dage/css/main.css

@@ -0,0 +1,156 @@
+body {
+    background: #dddada;
+    font-family: '微软雅黑';
+}
+
+.containers {
+    width: 1080px;
+    /* overflow: hidden; */
+    min-height: 80vh;
+    margin: 0 auto;
+}
+
+.con-title {
+    font-size: 24px;
+    background: #f9fafc;
+    text-align: center;
+    font-weight: bold;
+    padding-top: 40px;
+}
+
+.con {
+    /* 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: 30%;
+    display: inline-block;
+    margin: 25px 10px;
+}
+
+.case {
+    padding: 10px;
+    background: #fff;
+    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: 180px;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: top center;
+}
+
+.con li p {
+    margin-top: 10px;
+    font-size: 18px;
+    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;
+    } */
+}
+
+.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: 16px;
+        font-weight: 100;
+    }
+}

webM/public/4dage/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;
+}

webM/public/4dage/css/wx.css

@@ -0,0 +1,272 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    font-family: PingFangSC-Regular, sans-serif;
+}
+* {
+    margin:0;
+    padding:0;
+    list-style-type:none;
+    box-sizing:border-box
+}
+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;
+}
+img {
+    max-width:100%;
+}
+/* ::-webkit-scrollbar {
+    display: none;
+} */
+.flexs {
+    display:flex;
+    justify-content: space-between;
+    align-items:center;
+}
+.flex {
+    display:flex;
+    justify-content: center;
+    align-items:center;
+}
+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;
+}
+.antique-name {
+    font-size:20px;
+    text-align:center;
+    color:#fff;
+    width:70%;
+    margin:21vw auto 0;
+}
+.comment_wrapper {
+    position:relative;
+    z-index:9999;
+    width:83vw;
+    margin:0 auto;
+    display:none;
+}
+.introductionWrap {
+    width:100%;
+    background:#1d1d1d;
+    height:28vw;   
+    font-size:12px;
+    color:#ffffffba;
+    padding:4vw;
+
+}
+.introductionWrap .introduction {
+    overflow:scroll;
+    height: 100%;
+}
+.bg-audio {
+    display:block;
+    position:absolute;
+    z-index:2;
+    top:8.5vw;
+    right:7.4vw;
+    width:7.4vw;
+    height:7.4vw;
+    background:url(../images/bgmusic_icon_play.png)center/100% no-repeat;
+}
+.iconAction {
+    position:relative;
+    width:100%;
+
+    
+}
+.iconAction ul {
+    position: relative;
+    z-index: 999;
+    width:100%;
+    padding:0 17.6vw 9vw;
+;
+}
+.iconAction ul li {
+    width:12vw;
+    text-align:center;
+    cursor:pointer;
+}
+.iconAction ul li i{
+    display:block;
+    width:9vw;
+    height:9vw;
+    width:12vw;
+    margin:0 auto;
+}
+/* .iconAction ul li i.explain_icon{
+    background:url(../images/explain_icon.png)center/100% no-repeat;
+}
+.iconAction ul li i.explain_icon2{
+    background:url(../images/explain_icon2.png)center/100% no-repeat;
+} */
+#explain.active p{
+    color:#9a2e2c;
+}
+#explain .explain_icon {
+    background:url(../images/explain_icon.png)center/100% no-repeat;
+}
+#explain.active .explain_icon {
+    background:url(../images/explain_icon2.png)center/100% no-repeat;
+}
+.iconAction ul li i.comment_icon{
+    background:url(../images/comment_icon.png)center/100% no-repeat;
+}
+#favorite .favorite_icon {
+    background:url(../images/favorite_icon1.png)center/100% no-repeat;
+}
+#favorite.active p {
+    color:#9a2e2c;
+}
+#favorite.active .favorite_icon {
+    background:url(../images/favorite_icon2.png)center/100% no-repeat;
+    
+}
+/* .iconAction ul li i.favorite_icon1{
+    background:url(../images/favorite_icon1.png)center/100% no-repeat;
+}
+.iconAction ul li i.favorite_icon2{
+    background:url(../images/favorite_icon2.png)center/100% no-repeat;
+} */
+.iconAction ul li p {
+    font-size:16px;
+    color:#fff;
+}
+.info_voice {
+    margin:0 auto;
+    text-align:center;    
+}
+.audio_controls .icon_play {
+    display:inline-block;
+    width:3.4vw;
+    margin-right:5px;
+}
+.audio_controls .progress {
+    position:relative;
+    display:inline-block;
+    width:60vw;
+    background:#fff;
+    height:2px;
+}
+.audio_controls .progress i {
+    position:absolute;
+    top:-3px;
+    left:0;
+    display:inline-block;
+    width:8px;
+    height:8px;
+    background:#fff;
+    border-radius:4px;
+    -webkit-border-radius:4px;
+}
+.audio_controls .audio_time {
+    font-size:10px;
+    color:#fff;
+    margin-left:5px;
+}
+/* audio::-webkit-media-controls-panel {
+    background:rgba(255,255,255,1);
+}
+audio::-webkit-media-controls-mute-button {}
+audio::-webkit-media-controls-play-button {}
+audio::-webkit-media-controls-timeline-container {
+    background:none;
+}
+audio::-webkit-media-controls-current-time-display {}
+audio::-webkit-media-controls-time-remaining-display {}
+audio::-webkit-media-controls-timeline {}
+audio::-webkit-media-controls-volume-slider-container {
+    background:none;
+}
+audio::-webkit-media-controls-volume-slider {}
+audio::-webkit-media-controls-seek-back-button {}
+audio::-webkit-media-controls-seek-forward-button {}
+audio::-webkit-media-controls-fullscreen-button {}
+audio::-webkit-media-controls-rewind-button {}
+audio::-webkit-media-controls-return-to-realtime-button {}
+audio::-webkit-media-controls-toggle-closed-captions-button {} */
+.animated {
+    -webkit-animation-duration:1s;
+    animation-duration:1s;
+    -webkit-animation-fill-mode:both;
+    animation-fill-mode:both
+}
+@-webkit-keyframes fadeInBottom {
+    0% {
+        opacity:0;
+        -webkit-transform:translate3d(0, 100%, 0);
+        transform:translate3d(0, 100%, 0)
+    }
+    to {
+        opacity:1;
+        -webkit-transform:translateZ(0);
+        transform:translateZ(0)
+    }
+}
+@keyframes fadeInBottom {
+    0% {
+        opacity:0;
+        -webkit-transform:translate3d(0, 100%, 0);
+        transform:translate3d(0, 100%, 0)
+    }
+    to {
+        opacity:1;
+        -webkit-transform:translateZ(0);
+        transform:translateZ(0)
+    }
+}
+.fadeInBottom {
+    -webkit-animation-name:fadeInBottom;
+    animation-name:fadeInBottom
+}
+
+@-webkit-keyframes fadeOutBottom {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0;
+        -webkit-transform:translate3d(0, 100%, 0);
+        transform:translate3d(0, 100%, 0)
+    }
+}
+@keyframes fadeOutBottom {
+    0% {
+        opacity:1
+    }
+    to {
+        opacity:0;
+        -webkit-transform:translate3d(0, 100%, 0);
+        transform:translate3d(0, 100%, 0)
+    }
+}
+.fadeOutBottom {
+    -webkit-animation-name:fadeOutBottom;
+    animation-name:fadeOutBottom
+}
+
+.musicRotate {
+    -webkit-animation: musicRotate 5s linear infinite;
+    animation: musicRotate 5s linear infinite;
+} 
+@keyframes musicRotate {
+    from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+        transition: all 5s;
+      }
+}

webM/public/4dage/index.html

@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<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=icon type=image/png sizes=32x32 href='./images/favicon.png' class=keep>
+    <link rel="stylesheet" href="./css/reset.css">
+    <link rel="stylesheet" href="./css/main.css">
+    <title>文物展示</title>
+</head>
+
+<body>
+    <div class="containers">
+        <p class="con-title">文物展示</p>
+        <ul class="con">
+            <!-- <li>
+                <div class="case">
+                    <a class="link-a" href="Model.html?m=YL01&v=1">
+                        <div class="card-img" style="background-image: url(images/YL01.jpg)">
+                        </div>
+                    </a>
+                </div>
+                <p>鸡娄鼓</p>
+            </li> -->
+        </ul>
+    </div>
+    <script>
+        let yp_num = ['nCR01','nCR02','nCR03','nCR04','nCR05']
+        // let notIn = [82,85,87,88,96,107,111,112,113,114,115,117,118]
+        //     for (let i = 0; i < 126; i++) {
+        //         if (!notIn.includes(i+1)) {
+        //             yp_num.push('jgs'+String(i+1).padStart(2,'0'))
+        //         }
+        //     }
+    </script>
+    <script src="js/jquery.js"></script>
+    <script src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
+    <script src="js/weixin.js"></script>
+    <script src="js/info.js"></script>
+    <script src="js/ui.js"></script>
+</body>
+
+</html>

webM/public/4dage/js/data.js

@@ -0,0 +1,152 @@
+const objNames = {
+    'YL01': {
+        name: '鸡娄鼓',
+        content: '高:30厘米<br>宽:20厘米'
+    },
+    'YL02': {
+        name: '鞉牢鼓',
+        content: '高:60厘米<br>直径:20厘米'
+    },
+    'YL03': {
+        name: '毛员鼓',
+        content: '高:61厘米<br>直径:20厘米'
+    },
+    'YL04': {
+        name: '和鼓',
+        content: '高:50厘米<br>直径:30厘米'
+    },
+    'YL05': {
+        name: '答腊鼓',
+        content: '高:24厘米<br>直径:28厘米'
+    },
+    'YL06': {
+        name: '正鼓',
+        content: '高:71厘米<br>直径:30厘米'
+    },
+    'YL07': {
+        name: '齐鼓',
+        content: '高:71厘米<br>直径:30厘米'
+    },
+    'YL08': {
+        name: '羯鼓',
+        content: '高:50厘米<br>直径:38厘米'
+    },
+    'YL09': {
+        name: '拍板',
+        content: '高:37厘米<br>宽:6厘米'
+    },
+    'YL10': {
+        name: '钹',
+        content: '直径:30厘米'
+    },
+    'YL11': {
+        name: '篪',
+        content: '长65厘米'
+    },
+    'YL12': {
+        name: '筚篥',
+        content: '长35厘米'
+    },
+    'YL13': {
+        name: '短笛',
+        content: '长:48厘米<br>直径:2.8厘米'
+    },
+    'YL14': {
+        name: '长笛',
+        content: '长:65厘米<br>直径:2.8厘米'
+    },
+    'YL15': {
+        name: '尺八',
+        content: '长:70厘米<br>直径:2.8厘米'
+    },
+    'YL16': {
+        name: '箫',
+        content: '长:70厘米<br>直径:2.8厘米'
+    },
+    'YL17': {
+        name: '排箫',
+        content: '长:45厘米<br>宽:40厘米'
+    },
+    'YL18': {
+        name: '双翼排箫',
+        content: '长:55厘米<br>宽:55厘米'
+    },
+    'YL19': {
+        name: '笙',
+        content: '长:48.3厘米<br>直径:9.6厘米<br>宽:26厘米'
+    },
+    'YL20': {
+        name: '吹叶',
+        content: '正常一片树叶大小'
+    },
+    'YL21': {
+        name: '螺贝',
+        content: '长:27厘米<br>宽:15厘米'
+    },
+    'YL22': {
+        name: '箜篌',
+        content: '长:115厘米<br>宽:64厘米<br>高:11厘米'
+    },
+    'YL23': {
+        name: '阮',
+        content: '长:120厘米<br>宽:48厘米<br>高:18厘米'
+    },
+    'YL24': {
+        name: '五弦琵琶',
+        content: '长:113厘米<br>宽:30厘米<br>高:9厘米'
+    },
+    'YL25': {
+        name: '周后石像',
+    },
+    'YL26': {
+        name: '抬棺武士石像',
+    },
+    'YL27': {
+        name: '抬棺武士石像',
+    },
+    'YL28': {
+        name: '四弦琵琶',
+        content: '长:113厘米<br>宽:30厘米<br>高:9厘米'
+    },
+    'YL29': {
+        name: '筝',
+        content: '长:165厘米<br>宽:18厘米'
+    },
+    'YL30': {
+        name: '地宫薄形砖',
+    },
+    'YL31': {
+        name: '地宫方形砖',
+    },
+    'YL32': {
+        name: '地宫小方砖',
+    },
+    'YL33': {
+        name: '地宫楔形石',
+    },
+    'YL34': {
+        name: '地宫楔形砖',
+    },
+    'YL35': {
+        name: '唐邛窑绿釉省油灯',
+    },
+    'YL36': {
+        name: '“东川”铭文地宫方形砖',
+    },
+    'YL37': {
+        name: '“金水”铭文地宫方形砖',
+    },
+    'YL38': {
+        name: '王建石像',
+    },
+};
+
+(function () {
+    var m = getQueryVariable('m');
+    var objName = objNames[m]['name']? objNames[m]['name'] : '';
+    var content = objNames[m]['content'];
+    var objNameElem = document.querySelector('#name');
+    objNameElem.innerHTML = objName;
+    var contentElem = document.querySelector('#content');
+    content && (contentElem.innerHTML = content)
+})()

webM/public/4dage/js/info.js

@@ -0,0 +1,18 @@
+
+// const modelInfos = {
+// }
+
+// yp_num.forEach(item => {
+//   modelInfos[item] = {
+//     name: '',
+//     time: '',
+//     size: '',
+//     texture: '',
+//     level: '',
+//     num: '',
+//     keep: '',
+//     unit: '精品文物数字化保护',
+//     voice: '',
+//     content: []
+//   }
+// })

webM/public/4dage/js/ui.js

@@ -0,0 +1,26 @@
+(function () {
+    let fragment = document.createDocumentFragment();
+ 
+    for (let i=0;i<yp_num.length;i++) {
+        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');
+            a.href = `Model.html?m=${yp_num[i]}&v=1`;
+            div.classList.add('card-img');
+            div.style = `background-image: url(images/${yp_num[i]}.jpg)`;
+            let key = yp_num[i];
+            p.innerHTML = modelInfos[key].name;
+            a.appendChild(div);           
+            divWrap.appendChild(a);
+            li.appendChild(divWrap);
+            li.appendChild(p);
+            fragment.appendChild(li);
+    }
+    let ul = document.querySelector('.con');
+    ul.appendChild(fragment);
+    
+})()

webM/public/4dage/js/weixin.js

@@ -0,0 +1,131 @@
+var lineLink = window.location.href;
+var desc = '点击进入：在线720°鉴赏精品文物';
+var projectName = 'DG';
+
+var getQueryVariable = function(variable){
+  var query = window.location.search.substring(1);
+  var vars = query.split("&");
+  for (var i=0;i<vars.length;i++) {
+          var pair = vars[i].split("=");
+          if(pair[0] == variable){return pair[1];}
+  }
+  return(false);
+};
+
+let param = getQueryVariable('m');
+// let desc = param?;
+
+function jssdk() {
+	 $.ajax({    
+		url:'http://www.4dage.com/wechat/jssdk/share/', 
+		type: "post",
+		data : {
+            'uri' : location.href.split('#')[0],
+            'name': '厦门四维时代微信公众号'
+		}, 
+		dataType:"jsonp",     
+		jsonpCallback:"success_jsonp",         
+		success:function(data,textStatus){
+			wx.config({
+				// debug : true,
+				appId : data.appId,
+				timestamp : data.timestamp,
+				nonceStr : data.nonceStr,
+				signature : data.signature,
+				jsApiList : [ 'checkJsApi', 'onMenuShareTimeline',
+						'onMenuShareAppMessage', 'onMenuShareQQ',
+						'onMenuShareWeibo', 'hideMenuItems',
+						'showMenuItems', 'hideAllNonBaseMenuItem',
+						'showAllNonBaseMenuItem', 'translateVoice',
+						'startRecord', 'stopRecord', 'onRecordEnd',
+						'playVoice', 'pauseVoice', 'stopVoice',
+						'uploadVoice', 'downloadVoice', 'chooseImage',
+						'previewImage', 'uploadImage', 'downloadImage',
+						'getNetworkType', 'openLocation', 'getLocation',
+						'hideOptionMenu', 'showOptionMenu', 'closeWindow',
+						'scanQRCode', 'chooseWXPay',
+						'openProductSpecificView', 'addCard', 'chooseCard',
+						'openCard' ]
+			});
+		},    
+		error:function(XMLHttpRequest,textStatus,errorThrown){    
+			console.log("jsonp.error:"+textStatus);    
+		}    
+	 }); 
+	
+	 var success_jsonp = function(json){
+		console.log(json);
+	 };
+}
+
+wx.ready(function(){ 
+	// config信息验证后会执行ready方法，所有接口调用都必须在config接口获得结果之后，config是一个客户端的异步操作，所以如果需要在页面加载时就调用相关接口，则须把相关接口放在ready函数中调用来确保正确执行〿
+	//对于用户触发时才调用的接口，则可以直接调用，不需要放在ready函数中〿
+	//分享到朋友圈 
+	wx.onMenuShareTimeline({ 
+	title: document.querySelector("head title").innerHTML, // 分享标题 
+	link: lineLink, // 分享链接 
+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标 
+	desc: desc
+	}); 
+
+	//获取“分享给朋友”按钮点击状态及自定义分享内容接叿
+	wx.onMenuShareAppMessage({ 
+        title: '义乌博物馆', // 分享标题 
+        desc: param?modelData[param].CN_Name:'',  // 分享描述 
+        link: lineLink + '?t=' + new Date().getTime(), // 分享链接 
+        // imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标 
+        imgUrl: 'https://model3d.4dage.com/3D/2018/model/sh/images/bg.jpg', // 分享图标 
+        type: '', // 分享类型,music、video或link，不填默认为link 
+        dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空 
+        success: function () {
+        },
+	}); 
+});
+
+wx.onMenuShareWeibo({
+	title: document.querySelector("head title").innerHTML, // 分享标题
+	desc: desc, // 分享描述
+	link: lineLink, // 分享链接
+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
+	success: function () { 
+	   // 用户确认分享后执行的回调函数
+	},
+	cancel: function () { 
+		// 用户取消分享后执行的回调函数
+	}
+});
+
+wx.onMenuShareQZone({
+	title: document.querySelector("head title").innerHTML, // 分享标题
+	desc: desc, // 分享描述
+	link: lineLink, // 分享链接
+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
+	success: function () { 
+	   // 用户确认分享后执行的回调函数
+	},
+	cancel: function () { 
+		// 用户取消分享后执行的回调函数
+	}
+});
+
+wx.onMenuShareQQ({
+	title: document.querySelector("head title").innerHTML, // 分享标题
+	desc: desc, // 分享描述
+	link: lineLink, // 分享链接
+	imgUrl: 'http://model3d.4dage.com/3D/2018/model/'+projectName+'/images/weixin/'+getQueryVariable("m")+'.jpg', // 分享图标
+	success: function () { 
+	   // 用户确认分享后执行的回调函数
+	},
+	cancel: function () { 
+	   // 用户取消分享后执行的回调函数
+	}
+});
+
+wx.error(function(res){ 
+// config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名〿
+
+});
+
+jssdk();
+

webM/public/static/js/main_2020_show.js

@@ -8884,6 +8884,7 @@ window.Modernizr = function(n, e, t) {
             } */
         }
         function u(e, t) {
+            if(window.myKeyBlank) return
             if (t) {
                 var i = "keydown" === t.type
                   , n = t.which === f.SPACE || C.tourIsPlaying;
@@ -17537,7 +17538,7 @@ window.Modernizr = function(n, e, t) {
                             })
                         } 
                         this.createHotItem( ); 
-                        // Hot.createHotList();
+                        Hot.createHotList();
                         Hot.startLoad()  
                          
                         

webM/src/main.js

@@ -4,6 +4,9 @@ import '@/mixins'
 import router from './router'
 import 'viewerjs/dist/viewer.css'
 import Viewer from 'v-viewer'
+import ElementUI from 'element-ui';
+import 'element-ui/lib/theme-chalk/index.css';
+Vue.use(ElementUI);
 Vue.use(Viewer,{
   defaultOptions: {
     navbar:false,

webM/src/utils/api.js

@@ -0,0 +1,9 @@
+import axios from './request'
+// 获取文物列表
+export const goodList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/goods/list',
+    data
+  })
+}

webM/src/utils/request.js

@@ -0,0 +1,38 @@
+import axios from 'axios'
+const service = axios.create({
+  baseURL: 'http://192.168.0.135:8017', // 本地调试
+  // baseURL: '', // 线上调试
+  // baseURL: '', // build
+  timeout: 5000
+})
+// 请求拦截器
+// service.interceptors.request.use(function (config) {
+//   // console.log('触发拦截器')
+//   // 在发送请求之前做些什么：看看有没有token，如果有通过请求头的方式传递token
+//   const token = localStorage.getItem('CQLJXU_token')
+//   if (token) { // 判断是否有token,有，则
+//     // config.headers['Authorization'] = token
+//     config.headers.token = token
+//   }
+
+//   return config
+// }, function (error) {
+//   // 对请求错误做些什么
+//   return Promise.reject(error)
+// })
+
+// 添加响应拦截器
+service.interceptors.response.use(function (response) {
+  // console.log('触发相应拦截器', response)
+  // 对响应数据做点什么--response就是发送每个请求的返回值
+  // if (response.data.code === 5001 || response.data.code === 5002) {
+  //   // Toast.fail('未登录，请先登录')
+  //   localStorage.removeItem('CQLJXU_token')
+  // }
+  return response.data
+}, function (error) {
+  // 对响应错误做点什么
+  return Promise.reject(error)
+})
+
+export default service

webM/src/views/gui/component/antique.vue

@@ -1,28 +1,192 @@
 <!--  -->
 <template>
-  <div class="antique">
-    <div class="main"></div>
+  <div class="antique" :class="{ full: modelShow }">
+    <div class="main">
+      <div class="top">
+        <div class="left">
+          <div>类型：</div>
+          <div
+            v-for="item in topData"
+            :key="item.name"
+            :class="{ active: item.type === formData.type }"
+            @click="cutType(item.type)"
+          >
+            {{ item.name }}
+          </div>
+        </div>
+        <div class="search el-icon-search" @click="inputShow = true"></div>
+        <div class="input" v-show="inputShow" @keyup.enter="mySearch">
+          <div class="searBtn" @click="mySearch"></div>
+          <el-input
+            ref="myInput"
+            suffix-icon="el-icon-search"
+            v-model="formData.searchKey"
+            placeholder="请输入搜索内容"
+          ></el-input>
+        </div>
+      </div>
+      <!-- 内容 -->
+      <div class="conten">
+        <!-- 没有数据的时候 -->
+        <div class="hint" v-if="myArr.length === 0">
+          <img src="@/assets/img/serachNull.png" alt="" />
+          <p>暂时没有数据</p>
+          <p>请试一下其他关键字</p>
+        </div>
+        <div class="contenBox" v-else>
+          <div
+            class="row"
+            @click="lookInfo(item)"
+            v-for="item in myArr"
+            :key="item.id"
+          >
+            <img :src="baseURL + item.thumb" alt="" />
+            <p>{{ item.name }}</p>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 关闭按钮 -->
-    <div class="close" @click="$emit('close')"></div>
+    <div class="close" @click="$emit('close')" v-show="!modelShow"></div>
+    <!-- 模型和图片 -->
+    <div class="model" v-if="modelShow">
+      <div class="ifrCon" ref="ifrCon">
+        <!-- 全屏显示的标题 -->
+        <div class="fullTitle" v-if="fullscreen">{{ txtInfo.name }}</div>
+        <img
+          :src="baseURL + txtInfo.thumb"
+          alt=""
+          v-if="formData.type === 'img'"
+        />
+        <iframe :src="mySrc" frameborder="0" v-else></iframe>
+        <!-- 全屏按钮 -->
+        <div
+          class="fullM"
+          :class="{ fullX: fullscreen }"
+          @click="screen"
+          v-if="formData.type === 'model'"
+        >
+          <img src="@/assets/img/close.png" alt="" v-if="fullscreen" />
+          <img src="@/assets/img/tab3Full.png" alt="" v-else />
+        </div>
+      </div>
+      <div class="rightTxt">
+        <h3>{{ txtInfo.name }}</h3>
+        <div>{{ txtInfo.description }}</div>
+      </div>
+      <!-- 返回按钮 -->
+      <div class="close" @click="modelShow = false"></div>
+    </div>
   </div>
 </template>
 
 <script>
+import axios from "@/utils/request";
+import { goodList } from "@/utils/api";
+
 export default {
   name: "antique",
   components: {},
   data() {
     //这里存放数据
-    return {};
+    return {
+      inputShow: false,
+      baseURL: "",
+      topData: [
+        { name: "全部", type: "" },
+        { name: "精品图片", type: "img" },
+        { name: "三维模型", type: "model" },
+      ],
+      formData: {
+        pageNum: 1,
+        pageSize: 99999,
+        searchKey: "",
+        type: "",
+      },
+      myArr: [],
+      // 有关三维模型的数据
+      mySrc: "",
+      modelShow: false,
+      fullscreen: false,
+      txtInfo: {},
+    };
   },
   //监听属性 类似于data概念
   computed: {},
   //监控data中的数据变化
-  watch: {},
+  watch: {
+    inputShow(val) {
+      if (val) {
+        setTimeout(() => {
+          this.$refs.myInput.focus();
+        }, 100);
+      }
+    },
+  },
   //方法集合
-  methods: {},
+  methods: {
+    lookInfo(item) {
+      this.txtInfo = item;
+      // 三维模型
+      this.mySrc = "4dage/Model.html?m=" + item.filePath;
+      this.modelShow = true;
+    },
+    // 点击模型全屏
+    screen() {
+      const element = this.$refs.ifrCon; // 获取容器
+      if (this.fullscreen) {
+        // 如果已经全屏了就退出全屏
+
+        if (document.exitFullscreen) {
+          document.exitFullscreen();
+        } else if (document.webkitCancelFullScreen) {
+          document.webkitCancelFullScreen();
+        } else if (document.mozCancelFullScreen) {
+          document.mozCancelFullScreen();
+        } else if (document.msExitFullscreen) {
+          document.msExitFullscreen();
+        }
+      } else {
+        // 如果不是全屏就变成全屏
+        if (element.requestFullscreen) {
+          element.requestFullscreen();
+        } else if (element.webkitRequestFullScreen) {
+          element.webkitRequestFullScreen();
+        } else if (element.mozRequestFullScreen) {
+          element.mozRequestFullScreen();
+        } else if (element.msRequestFullscreen) {
+          // IE11
+          element.msRequestFullscreen();
+        }
+      }
+
+      this.fullscreen = !this.fullscreen;
+    },
+    mySearch() {
+      this.formData.pageNum = 1;
+      this.goodList(this.formData);
+      setTimeout(() => {
+        this.inputShow = false;
+      }, 100);
+    },
+    cutType(type) {
+      this.formData.type = type;
+      this.goodList(this.formData);
+    },
+    // 封装获取列表函数
+    async goodList(data) {
+      const res = await goodList(data);
+      this.myArr = res.data.records;
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    this.goodList(this.formData);
+    // 设置一个全局变量控制空格建的监听
+    window.myKeyBlank = true;
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
   beforeCreate() {}, //生命周期 - 创建之前
@@ -35,7 +199,106 @@ export default {
 };
 </script>
 <style lang='less' scoped>
+.full {
+  height: 100vh !important;
+  z-index: 10000 !important;
+}
 .antique {
+  .model {
+    padding: 15px 10px 50px;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 99;
+    &::before {
+      content: "";
+      position: absolute;
+      left: 0;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background: rgba(161, 101, 59, 0.8);
+      backdrop-filter: blur(4px);
+      z-index: -1;
+    }
+    .ifrCon {
+      position: relative;
+      width: 100%;
+      height: calc(100% - 60px);
+      text-align: center;
+      max-height: 60%;
+      iframe {
+        width: 100%;
+        height: 100%;
+      }
+      .fullM {
+        width: 30px;
+        height: 30px;
+        cursor: pointer;
+        position: absolute;
+        right: 10px;
+        bottom: 10px;
+        color: #fff;
+        & > img {
+          width: 30px;
+          height: 30px;
+        }
+      }
+      .fullX {
+        left: 50%;
+        transform: translateX(-50%);
+      }
+      & > img {
+        width: 100%;
+        max-height: 100%;
+      }
+      .fullTitle {
+        width: 100%;
+        z-index: 10;
+        padding: 0 10px;
+        position: absolute;
+        left: 50%;
+        top: 20px;
+        transform: translateX(-50%);
+        text-align: center;
+        color: #774926;
+        font-weight: 700;
+        font-size: 20px;
+      }
+    }
+    .rightTxt::-webkit-scrollbar {
+      width: 4px;
+    }
+    .rightTxt::-webkit-scrollbar-thumb {
+      outline: 2px solid #cc946d;
+    }
+
+    .rightTxt {
+      overflow-y: auto;
+      padding: 10px 0;
+      background-color: #fff6d2;
+      width: 100%;
+      height: 40%;
+      & > h3 {
+        text-align: center;
+        padding: 0 15px;
+        color: #774926;
+        font-weight: 700;
+        font-size: 20px;
+      }
+      & > div {
+        margin-top: 5px;
+        padding: 0 15px;
+        word-break: break-all;
+        width: 100%;
+        color: #cc946d;
+        font-size: 14px;
+      }
+    }
+  }
+
   position: fixed;
   width: 100vw;
   height: calc(100vh - 50px);
@@ -54,10 +317,147 @@ export default {
     z-index: -1;
   }
   .main {
-    padding: 20px;
+    padding: 15px 10px 0;
     width: 100%;
     height: calc(100% - 60px);
-    overflow-y: auto;
+    .top {
+      width: 100%;
+      padding-left: 10px;
+      max-width: 334px;
+      position: relative;
+      display: flex;
+      justify-content: space-between;
+      height: 36px;
+      color: #fff6d2;
+      font-size: 14px;
+      margin: 0 auto;
+      .left {
+        display: flex;
+        & > div {
+          padding: 0 12px;
+          height: 36px;
+          line-height: 36px;
+          margin-right: 5px;
+          &:nth-of-type(1) {
+            padding: 0;
+            margin-right: 0;
+          }
+        }
+        .active {
+          background-color: #cc946d;
+          border-radius: 20px;
+          color: #774926;
+          pointer-events: none;
+        }
+      }
+      .input {
+        position: absolute;
+        top: 0;
+        left: 0px;
+        width: 100%;
+        height: 100%;
+        .searBtn {
+          position: absolute;
+          width: 36px;
+          height: 36px;
+          right: 0;
+          top: 0;
+          z-index: 111;
+        }
+        /deep/.el-input {
+          height: 100%;
+        }
+        /deep/.el-input__inner {
+          height: 100%;
+          line-height: 36px;
+          color: #cc946d;
+          border-color: transparent;
+          background-color: #fff6d2;
+        }
+        /deep/.el-icon-search {
+          line-height: 36px;
+          color: #cc946d;
+          font-size: 20px;
+        }
+      }
+      .search {
+        text-align: center;
+        line-height: 30px;
+        background-color: #fff6d2;
+        color: #cc946d;
+        font-size: 20px;
+        border-radius: 2px;
+        margin-top: 3px;
+        width: 30px;
+        height: 30px;
+      }
+    }
+    .contenBox::-webkit-scrollbar {
+      width: 4px;
+    }
+    .contenBox::-webkit-scrollbar-thumb {
+      outline: 2px solid #cc946d;
+    }
+    .conten {
+      border-radius: 8px;
+      width: 334px;
+      height: calc(100% - 45px);
+      margin: 15px auto 0;
+      background-color: #fff6d2;
+      padding: 10px 0 10px 10px;
+      .contenBox {
+        padding-right: 10px;
+        display: flex;
+        flex-wrap: wrap;
+        align-content: flex-start;
+        width: 100%;
+        height: 100%;
+        overflow-y: auto;
+      }
+      .row {
+        margin-right: 10px;
+        margin-bottom: 15px;
+        background-color: #fff;
+        border-radius: 3px;
+        overflow: hidden;
+        width: 150px;
+        height: 120px;
+        & > img {
+          width: 100%;
+          height: 90px;
+          object-fit: cover;
+        }
+        &:nth-of-type(2n) {
+          margin-right: 0;
+        }
+        & > p {
+          height: 30px;
+          line-height: 30px;
+          font-size: 12px;
+          color: #999999;
+          text-align: center;
+          padding: 0 10px;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+      .hint {
+        height: 100%;
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        & > img {
+          width: 240px;
+        }
+        & > p {
+          margin-top: 20px;
+          color: #cc946d;
+        }
+      }
+    }
   }
   .close {
     cursor: pointer;
@@ -70,5 +470,17 @@ export default {
     background: url("../../../assets/img/close.png");
     background-size: 100% 100%;
   }
+  @media screen and (max-width: 350px) {
+    .top{
+      font-size: 12px !important;
+    }
+    .conten {
+      width: 100% !important;
+    }
+    .contenBox {
+      width: 100% !important;
+      justify-content: center;
+    }
+  }
 }
 </style>

webM/src/views/gui/component/hotspot.vue

@@ -0,0 +1,120 @@
+<template>
+  <div class="hotspot">
+    <div class="main">
+      <div class="mainBox">
+        <div
+          v-for="(item, index) in data"
+          :key="index"
+          :class="{ active: hotInd === index }"
+          @click="openHot(item, index)"
+        >
+          {{ item.info.title ? item.info.title : "热点" }}
+        </div>
+      </div>
+    </div>
+    <!-- 关闭按钮 -->
+    <div class="close" @click="$emit('close')"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "hotspot",
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [],
+      hotInd: null,
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    openHot(e, index) {
+      e && e.examine(window.player, true);
+      this.hotInd = index;
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    this.data = window.myHotList;
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.hotspot {
+  position: fixed;
+  width: 100vw;
+  height: calc(100vh - 50px);
+  bottom: 0;
+  left: 0;
+  z-index: 9998;
+  padding: 30px 20px 0;
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(161, 101, 59, 0.8);
+    backdrop-filter: blur(4px);
+    z-index: -1;
+  }
+  .main {
+    border-radius: 8px;
+    padding: 10px 0;
+    background-color: #fff6d2;
+    width: 100%;
+    height: calc(100% - 60px);
+    .mainBox::-webkit-scrollbar {
+      width: 4px;
+    }
+    .mainBox::-webkit-scrollbar-thumb {
+      outline: 2px solid #cc946d;
+    }
+    .mainBox {
+      padding: 0 15px;
+      width: 100%;
+      height: 100%;
+      overflow-y: auto;
+      & > div {
+        font-size: 16px;
+        color: #774926;
+        text-align: center;
+        width: 100%;
+        height: 34px;
+        line-height: 34px;
+      }
+      .active {
+        color: #d4a781;
+        pointer-events: none;
+      }
+    }
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    left: 50%;
+    bottom: 15px;
+    transform: translateX(-50%);
+    width: 30px;
+    height: 30px;
+    background: url("../../../assets/img/close.png");
+    background-size: 100% 100%;
+  }
+}
+</style>

webM/src/views/gui/menu.vue

@@ -3,7 +3,7 @@
     <div class="pinBottom center">
       <div id="view-controllers"></div>
     </div>
-    <div class="pinBottom left" :class="{ packDoCla: packDo }">
+    <div class="pinBottom left" id="moveChange">
       <div>
         <div class="viewContainer">
           <!-- 展开和收起按钮 -->
@@ -150,24 +150,21 @@
                 :src="require('@/assets/images/VR.png')"
               />
             </div>
-            <!-- <div
+            <div
               data-original-title="热点列表"
               id="hotList"
               rel="tooltip"
               title=""
-              style="display: none"
             >
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/hotlist.png')"
-                
               />
               <img
                 class="icon icon-inside active"
                 :src="require('@/assets/images/hotlist.png')"
-                
               />
-            </div> -->
+            </div>
             <div
               data-original-title="消除外壳"
               id="gui-remove-face"
@@ -305,14 +302,17 @@
     <MapNav v-if="meanInd === 1" @close="meanInd = null" />
     <!-- 精品文物 -->
     <Antique v-if="meanInd === 2" @close="meanInd = null" />
+    <!-- 热点列表 -->
+    <Hotspot v-if="meanInd === 3" @close="meanInd = null" />
   </div>
 </template>
 <script>
 import Share from "./component/share.vue";
 import MapNav from "./component/mapNav.vue";
 import Antique from "./component/antique.vue";
+import Hotspot from "./component/hotspot";
 export default {
-  components: { Share, MapNav, Antique },
+  components: { Share, MapNav, Antique, Hotspot },
   data() {
     return {
       isGuide: true,
@@ -333,6 +333,11 @@ export default {
   computed: {},
   mounted() {},
   watch: {
+    packDo(val){
+      let dom = document.querySelector('#moveChange')
+      if(val) dom.classList.add('packDoCla')
+      else dom.classList.remove('packDoCla')
+    },
     meanInd() {
       this.topMean = false;
     },
@@ -356,6 +361,9 @@ export default {
 </script>
 
 <style lang="less" scoped>
+#hotList {
+  display: none !important;
+}
 .topMean {
   z-index: 9999;
   position: fixed;