Startseite Erkunden Hilfe
Registrieren Anmelden
shaogen1995
/
CQLJQWXY
1
0
Fork 0
Dateien Issues 0 Pull-Requests 0 Wiki
Quellcode durchsuchen

初步完成文物典藏模块

shaogen1995 vor 4 Jahren
Ursprung
41c31cd349
Commit
36575cc2dd
20 geänderte Dateien mit 1510 neuen und 42 gelöschten Zeilen
Gesamtansicht Diff-Statistik anzeigen
  1. 9 2
      index/package-lock.json
  2. 1 0
      index/package.json
  3. 55 0
      index/public/4dage/Model.html
  4. 301 0
      index/public/4dage/css/index.css
  5. 156 0
      index/public/4dage/css/main.css
  6. 59 0
      index/public/4dage/css/reset.css
  7. 272 0
      index/public/4dage/css/wx.css
  8. 45 0
      index/public/4dage/index.html
  9. 1 0
      index/public/4dage/js/4dage.js
  10. 30 0
      index/public/4dage/js/browser.min.js
  11. 152 0
      index/public/4dage/js/data.js
  12. 18 0
      index/public/4dage/js/info.js
  13. 4 0
      index/public/4dage/js/jquery.js
  14. 0 0
      index/public/4dage/js/model.js
  15. 26 0
      index/public/4dage/js/ui.js
  16. 131 0
      index/public/4dage/js/weixin.js
  17. 4 0
      index/src/assets/css/base.css
  18. 16 0
      index/src/utils/api.js
  19. 38 0
      index/src/utils/request.js
  20. 192 40
      index/src/views/tab3/index.vue

+ 9 - 2
index/package-lock.json
Datei anzeigen 

@@ -2469,6 +2469,14 @@
 
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
 
       "integrity": "sha1-1h9G2DslGSUOJ4Ta9bCUeai0HFk=",
 
       "dev": true
 
       "dev": true
 
     },
 
     },
 
+    "axios": {
 
+      "version": "0.24.0",
 
+      "resolved": "https://registry.npmjs.org/axios/-/axios-0.24.0.tgz",
 
+      "integrity": "sha512-Q6cWsys88HoPgAaFAVUb0WpPk0O8iTeisR9IMqy9G8AbO4NlpVknrnQS03zzF9PGAWgO3cgletO3VjV/P7VztA==",
 
+      "requires": {
 
+        "follow-redirects": "^1.14.4"
 
+      }
 
+    },
 
     "babel-eslint": {
 
     "babel-eslint": {
 
       "version": "10.1.0",
 
       "version": "10.1.0",
 
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611946434496&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
 
       "resolved": "https://registry.npm.taobao.org/babel-eslint/download/babel-eslint-10.1.0.tgz?cache=0&sync_timestamp=1611946434496&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fbabel-eslint%2Fdownload%2Fbabel-eslint-10.1.0.tgz",
 
@@ -5950,8 +5958,7 @@
 
     "follow-redirects": {
 
     "follow-redirects": {
 
       "version": "1.14.4",
 
       "version": "1.14.4",
 
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz",
 
       "resolved": "https://registry.nlark.com/follow-redirects/download/follow-redirects-1.14.4.tgz",
 
-      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k=",
 
-      "dev": true
 
+      "integrity": "sha1-g4/fSKi73XnlLuUfsclOPtmLk3k="
 
     },
 
     },
 
     "for-in": {
 
     "for-in": {
 
       "version": "1.0.2",
 
       "version": "1.0.2",

+ 1 - 0
index/package.json
Datei anzeigen 

@@ -8,6 +8,7 @@
 
     "lint": "vue-cli-service lint"
 
     "lint": "vue-cli-service lint"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
+    "axios": "^0.24.0",
 
     "core-js": "^3.6.5",
 
     "core-js": "^3.6.5",
 
     "element-ui": "^2.15.6",
 
     "element-ui": "^2.15.6",
 
     "moment": "^2.29.1",
 
     "moment": "^2.29.1",

+ 55 - 0
index/public/4dage/Model.html
Datei anzeigen 

@@ -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('http://192.168.0.135:8012'+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>

+ 301 - 0
index/public/4dage/css/index.css
Datei anzeigen 

@@ -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;
 
+}

+ 156 - 0
index/public/4dage/css/main.css
Datei anzeigen 

@@ -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;
 
+    }
 
+}

+ 59 - 0
index/public/4dage/css/reset.css
Datei anzeigen 

@@ -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;
 
+}

+ 272 - 0
index/public/4dage/css/wx.css
Datei anzeigen 

@@ -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;
 
+      }
 
+}

+ 45 - 0
index/public/4dage/index.html
Datei anzeigen 

@@ -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>

Datei-Diff unterdrückt, da er zu groß ist
+ 1 - 0
index/public/4dage/js/4dage.js


Datei-Diff unterdrückt, da er zu groß ist
+ 30 - 0
index/public/4dage/js/browser.min.js


+ 152 - 0
index/public/4dage/js/data.js
Datei anzeigen 

@@ -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)
 
+})()

+ 18 - 0
index/public/4dage/js/info.js
Datei anzeigen 

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

Datei-Diff unterdrückt, da er zu groß ist
+ 4 - 0
index/public/4dage/js/jquery.js


+ 0 - 0
index/public/4dage/js/model.js
Datei anzeigen


+ 26 - 0
index/public/4dage/js/ui.js
Datei anzeigen 

@@ -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);
 
+    
+})()

+ 131 - 0
index/public/4dage/js/weixin.js
Datei anzeigen 

@@ -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();
 
+

+ 4 - 0
index/src/assets/css/base.css
Datei anzeigen 

@@ -44,4 +44,8 @@ ul li {
 
 }
 
 }
 
 .el-pagination button:hover{
 
 .el-pagination button:hover{
 
   color: #b9412e;
 
   color: #b9412e;
 
+}
 
+.el-image__preview{
 
+  object-fit: cover;
 
+  border: 2px solid #b9412e;
 
 }
 
 }

+ 16 - 0
index/src/utils/api.js
Datei anzeigen 

@@ -0,0 +1,16 @@
 
+import axios from './request'
 
+// 用户登录接口
 
+export const goodList = (data) => {
 
+  return axios({
 
+    method: 'post',
 
+    url: '/web/goodList',
 
+    data
 
+  })
 
+}
 
+// 图片拿到所有图片
 
+export const goodDetail = (id) => {
 
+  return axios({
 
+    method: 'get',
 
+    url: `/web/goodDetail/${id}`
 
+  })
 
+}

+ 38 - 0
index/src/utils/request.js
Datei anzeigen 

@@ -0,0 +1,38 @@
 
+import axios from 'axios'
 
+const service = axios.create({
 
+  baseURL: 'http://192.168.0.135:8012/', // 本地调试
 
+  // 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

+ 192 - 40
index/src/views/tab3/index.vue
Datei anzeigen 

@@ -4,10 +4,10 @@
 
     <div class="left">
 
     <div class="left">
 
       <ul>
 
       <ul>
 
         <li
 
         <li
 
-          :class="{ active: listInd === item.id }"
 
+          :class="{ active: formData.type === item.type }"
 
           v-for="item in listData"
 
           v-for="item in listData"
 
           :key="item.id"
 
           :key="item.id"
 
-          @click="cutTab(item.id)"
 
+          @click="cutTab(item)"
 
         >
 
         >
 
           <span>·</span> {{ item.name }}
 
           <span>·</span> {{ item.name }}
 
         </li>
 
         </li>
 
@@ -16,61 +16,108 @@
 
         <el-input
 
         <el-input
 
           placeholder="搜索"
 
           placeholder="搜索"
 
           suffix-icon="el-icon-search"
 
           suffix-icon="el-icon-search"
 
-          v-model="search"
 
+          v-model="formData.searchKey"
 
         >
 
         >
 
         </el-input>
 
         </el-input>
 
         <span class="btn" @click="mySearch"></span>
 
         <span class="btn" @click="mySearch"></span>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <!-- 右侧内容 -->
 
     <!-- 右侧内容 -->
 
-    <div class="right">
 
-      <div class="row" v-for="i in 9" :key="i" @click="modelFu">
 
-        <img src="../../assets/img/swiper.png" alt="" />
 
-        <p>123</p>
 
+    <!-- 没有数据时 -->
 
+    <div class="hint" v-if="myArr.length===0">暂 无 数 据</div>
 
+    <div class="right" v-else>
 
+      <div
 
+        class="row"
 
+        v-for="item in myArr"
 
+        :key="item.id"
 
+        @click="goodClick(item)"
 
+      >
 
+        <!-- 模型/视频 -->
 
+        <img
 
+          :src="baseURL + item.thumb"
 
+          alt=""
 
+          v-if="formData.type === 'model'||formData.type === 'video'"
 
+        />
 
+        <!-- 图库 -->
 
+          <el-image
 
+            v-else-if="formData.type === 'img'"
 
+            style="width: 418px; height: 200px"
 
+            :src="baseURL+item.thumb"
 
+            :preview-src-list="srcList"
 
+          >
 
+          </el-image>
 
+        <p class="listTxt" :title="item.name">{{ item.name }}</p>
 
       </div>
 
       </div>
 
       <!-- 分页 -->
 
       <!-- 分页 -->
 
-      <!-- :page-sizes="[15, 30, 45, 60]"
 
-        :current-page="from2.pageNum"
 
-        @current-change="currentChange"
 
-        @size-change="sizeChange"
 
-      -->
 
       <div class="paging">
 
       <div class="paging">
 
-        <el-pagination layout="prev,pager,next,jumper" :total="100">
 
+        <el-pagination
 
+          layout="prev,pager,next,jumper"
 
+          :total="total"
 
+          :page-size='9'
 
+          :current-page="formData.pageNum"
 
+          @current-change="currentChange"
 
+          @size-change="sizeChange"
 
+        >
 
         </el-pagination>
 
         </el-pagination>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
     <!-- 点击文物出现的弹窗 -->
 
     <!-- 点击文物出现的弹窗 -->
 
     <div class="model" v-if="modelShow">
 
     <div class="model" v-if="modelShow">
 
       <div class="ifrCon" ref="ifrCon">
 
       <div class="ifrCon" ref="ifrCon">
 
-        <iframe
 
-          src="https://4dscene.4dage.com/culturalrelics/ZSBWG/Model.html?m=zsbb12&v=1"
 
-          frameborder="0"
 
-        ></iframe>
 
+        <iframe :src="mySrc" frameborder="0"></iframe>
 
         <!-- 关闭按钮 -->
 
         <!-- 关闭按钮 -->
 
         <div class="btnX el-icon-close" @click="modelShow = false"></div>
 
         <div class="btnX el-icon-close" @click="modelShow = false"></div>
 
         <!-- 全屏按钮 -->
 
         <!-- 全屏按钮 -->
 
         <div class="full" @click="screen"></div>
 
         <div class="full" @click="screen"></div>
 
       </div>
 
       </div>
 
     </div>
 
     </div>
 
+    <!-- 大图预览里面的文字显示 -->
 
+    <div class="imgBigShow" v-if="imgBigShow">{{imgBigNum}} / {{srcList.length}}</div>
 
+    <!-- 视频档案里面的弹窗 -->
 
+    <div class="model" v-if="myVideoShow">
 
+        <!-- 关闭按钮 -->
 
+      <div class=" btnX el-icon-close" @click="myVideoShow = false"></div>
 
+      <div class="videoPlay">
 
+      <video :src="myVideoSrc" v-if="myVideoSrc" controls></video>
 
+      </div>
 
+    </div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
+import axios from '@/utils/request'
 
+import { goodList, goodDetail } from '@/utils/api'
 
 export default {
 
 export default {
 
   name: 'tab3',
 
   name: 'tab3',
 
   components: {},
 
   components: {},
 
   data () {
 
   data () {
 
     // 这里存放数据
 
     // 这里存放数据
 
     return {
 
     return {
 
+      total: 0,
 
+      baseURL: '',
 
       fullscreen: false,
 
       fullscreen: false,
 
       modelShow: false,
 
       modelShow: false,
 
       listData: [
 
       listData: [
 
-        { id: 1, name: '实物模型', type: '' },
 
-        { id: 2, name: '专题图库', type: '' },
 
-        { id: 3, name: '视频档案', type: '' }
 
+        { id: 1, name: '实物模型', type: 'model' },
 
+        { id: 2, name: '专题图库', type: 'img' },
 
+        { id: 3, name: '视频档案', type: 'video' }
 
       ],
 
       ],
 
-      listInd: 1,
 
-      search: ''
 
+      formData: {
 
+        sortType: 0,
 
+        pageNum: 1,
 
+        pageSize: 9,
 
+        searchKey: '',
 
+        type: 'model'
 
+      },
 
+      myArr: [],
 
+      mySrc: '',
 
+      srcList: [''],
 
+      // 大图预览里面的文字显示
 
+      imgBigShow: false,
 
+      imgBigNum: 1,
 
+      // 视频档案数据
 
+      myVideoShow: false,
 
+      myVideoSrc: ''
 
     }
 
     }
 
   },
 
   },
 
   // 监听属性 类似于data概念
 
   // 监听属性 类似于data概念
 
@@ -79,6 +126,18 @@ export default {
 
   watch: {},
 
   watch: {},
 
   // 方法集合
 
   // 方法集合
 
   methods: {
 
   methods: {
 
+    // 分页器方法
 
+    currentChange (val) {
 
+      // console.log('当前页改变了', val)
 
+      this.formData.pageNum = val
 
+      this.goodList(this.formData)
 
+    },
 
+    sizeChange (val) {
 
+      // console.log('条数改变了', val)
 
+      this.formData.pageNum = 1
 
+      this.formData.pageSize = val
 
+      this.goodList(this.formData)
 
+    },
 
     // 点击模型全屏
 
     // 点击模型全屏
 
     screen () {
 
     screen () {
 
       const element = this.$refs.ifrCon // 获取容器
 
       const element = this.$refs.ifrCon // 获取容器
 
@@ -111,23 +170,79 @@ export default {
 
       this.fullscreen = !this.fullscreen
 
       this.fullscreen = !this.fullscreen
 
     },
 
     },
 
     // 点击模型
 
     // 点击模型
 
-    modelFu () {
 
-      this.modelShow = true
 
+    async goodClick (item) {
 
+      if (item.type === 'model') {
 
+        this.mySrc = '/4dage/Model.html?m=' + item.filePath
 
+        // this.mySrc = '/4dage/Model.html'
 
+        this.modelShow = true
 
+      } else if (item.type === 'img') {
 
+        const res = await goodDetail(item.id)
 
+        // console.log(998, res)
 
+        const temp = []
 
+        res.data.file.forEach(v => {
 
+          temp.push(this.baseURL + v.filePath)
 
+        })
 
+        this.srcList = temp
 
+        this.$nextTick(() => {
 
+          setTimeout(() => {
 
+            this.imgBigShow = true
 
+            // 左按钮
 
+            const tempLeft = document.querySelector('.el-image-viewer__prev')
 
+            tempLeft.addEventListener('click', () => {
 
+              this.imgBigNum--
 
+              if (this.imgBigNum === 0) this.imgBigNum = this.srcList.length
 
+            })
 
+            // 左按钮
 
+            const tempRight = document.querySelector('.el-image-viewer__next')
 
+            tempRight.addEventListener('click', () => {
 
+              this.imgBigNum++
 
+              if (this.imgBigNum === this.srcList.length + 1) this.imgBigNum = 1
 
+            })
 
+            const temp = document.querySelector('.el-image-viewer__close')
 
+            temp.addEventListener('click', () => {
 
+              this.imgBigShow = false
 
+              // console.log('我点了里面的关闭')
 
+            })
 
+          }, 100)
 
+        })
 
+      } else if (item.type === 'video') {
 
+        this.myVideoShow = true
 
+        this.myVideoSrc = this.baseURL + item.filePath
 
+      }
 
     },
 
     },
 
-    cutTab (id) {
 
-      this.listInd = id
 
+    cutTab (val) {
 
+      if (this.formData.type === val.type) return
 
+      this.formData.type = val.type
 
+      this.goodList(this.formData)
 
     },
 
     },
 
     mySearch () {
 
     mySearch () {
 
-      console.log('点击了搜索')
 
+      this.formData.pageNum = 1
 
+      this.goodList(this.formData)
 
+    },
 
+    // 封装获取列表函数
 
+    async goodList (data) {
 
+      const res = await goodList(data)
 
+      this.total = res.data.total
 
+      this.myArr = res.data.records
 
+      // if (this.formData.type === 'img') {
 
+      //   this.myArr.forEach(v => {
 
+      //     this.srcList = [this.baseURL + v.thumb]
 
+      //   })
 
+      // }
 
+      // console.log(998, res)
 
     }
 
     }
 
   },
 
   },
 
   // 生命周期 - 创建完成（可以访问当前this实例）
 
   // 生命周期 - 创建完成（可以访问当前this实例）
 
-  created () {},
 
+  created () {
 
+    // 获取服务器前缀地址
 
+    this.baseURL = axios.defaults.baseURL
 
+    this.goodList(this.formData)
 
+  },
 
   // 生命周期 - 挂载完成（可以访问DOM元素）
 
   // 生命周期 - 挂载完成（可以访问DOM元素）
 
   mounted () {
 
   mounted () {
 
     // 监听esc事件
 
     // 监听esc事件
 
     document.addEventListener('webkitfullscreenchange', (e) => {
 
     document.addEventListener('webkitfullscreenchange', (e) => {
 
-      if (!(e.currentTarget.webkitIsFullScreen)) {
 
+      if (!e.currentTarget.webkitIsFullScreen) {
 
         // console.log('退出啊webkitIsFullScreen11111111111')
 
         // console.log('退出啊webkitIsFullScreen11111111111')
 
         setTimeout(() => {
 
         setTimeout(() => {
 
           this.fullscreen = false
 
           this.fullscreen = false
 
@@ -227,18 +342,27 @@ export default {
 
       }
 
       }
 
     }
 
     }
 
   }
 
   }
 
+  .hint{
 
+    font-size: 36px;
 
+    min-width: 1200px;
 
+    flex: 1;
 
+    height: 825px;
 
+    display: flex;
 
+    justify-content: center;
 
+    align-items: center;
 
+  }
 
   .right {
 
   .right {
 
     position: relative;
 
     position: relative;
 
-    justify-content: space-between;
 
+    justify-content: start;
 
     align-content: flex-start;
 
     align-content: flex-start;
 
     display: flex;
 
     display: flex;
 
     flex-wrap: wrap;
 
     flex-wrap: wrap;
 
     min-width: 1200px;
 
     min-width: 1200px;
 
-    margin-left: 40px;
 
     flex: 1;
 
     flex: 1;
 
     height: 825px;
 
     height: 825px;
 
     .row {
 
     .row {
 
       margin-bottom: 20px;
 
       margin-bottom: 20px;
 
+      margin-left: 40px;
 
       cursor: pointer;
 
       cursor: pointer;
 
       width: 30%;
 
       width: 30%;
 
       text-align: center;
 
       text-align: center;
 
@@ -258,6 +382,11 @@ export default {
 
       bottom: 0;
 
       bottom: 0;
 
       transform: translateX(-50%);
 
       transform: translateX(-50%);
 
     }
 
     }
 
+    .listTxt {
 
+      overflow: hidden;
 
+      text-overflow: ellipsis;
 
+      white-space: nowrap;
 
+    }
 
   }
 
   }
 
   .model {
 
   .model {
 
     position: fixed;
 
     position: fixed;
 
@@ -280,18 +409,10 @@ export default {
 
         width: 100%;
 
         width: 100%;
 
         height: 100%;
 
         height: 100%;
 
       }
 
       }
 
-      .btnX {
 
-        cursor: pointer;
 
-        position: absolute;
 
-        right: 10px;
 
-        top: 10px;
 
-        color: #fff;
 
-        font-size: 40px;
 
-      }
 
       .full {
 
       .full {
 
         width: 30px;
 
         width: 30px;
 
         height: 30px;
 
         height: 30px;
 
-        background: url('../../assets/img/tab3Full.png');
 
+        background: url("../../assets/img/tab3Full.png");
 
         background-size: 30px 30px;
 
         background-size: 30px 30px;
 
         cursor: pointer;
 
         cursor: pointer;
 
         position: absolute;
 
         position: absolute;
 
@@ -300,6 +421,37 @@ export default {
 
         color: #fff;
 
         color: #fff;
 
       }
 
       }
 
     }
 
     }
 
+          .btnX {
 
+        cursor: pointer;
 
+        position: absolute;
 
+        right: 10px;
 
+        top: 10px;
 
+        color: #fff;
 
+        font-size: 40px;
 
+      }
 
+
 
+    .videoPlay{
 
+      border: 2px solid #b9412e;
 
+      position: absolute;
 
+      top: 50%;
 
+      left: 50%;
 
+      transform: translate(-50%,-50%);
 
+      width: 800px;
 
+      height: auto;
 
+      video{
 
+        vertical-align:top;
 
+        width: 100%;
 
+      }
 
+    }
 
+  }
 
+  .imgBigShow{
 
+    z-index: 9999;
 
+    position: fixed;
 
+    left: 50%;
 
+    transform: translateX(-50%);
 
+    bottom:100px;
 
+    color: #fff;
 
+    font-size: 16px;
 
   }
 
   }
 
 }
 
 }
 
 </style>
 
 </style>