Home Explore Help
Register Sign In
shaogen1995
/
WuZhongBWG
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

up

shaogen1995 3 years ago
parent
d1157d3eb2
commit
6afaed695d
20 changed files with 1452 additions and 17 deletions
Split View Show Diff Stats
  1. 55 0
      web/public/4dage/Model.html
  2. 301 0
      web/public/4dage/css/index.css
  3. 156 0
      web/public/4dage/css/main.css
  4. 59 0
      web/public/4dage/css/reset.css
  5. 272 0
      web/public/4dage/css/wx.css
  6. 45 0
      web/public/4dage/index.html
  7. 1 0
      web/public/4dage/js/4dage.js
  8. 30 0
      web/public/4dage/js/browser.min.js
  9. 152 0
      web/public/4dage/js/data.js
  10. 18 0
      web/public/4dage/js/info.js
  11. 4 0
      web/public/4dage/js/jquery.js
  12. 0 0
      web/public/4dage/js/model.js
  13. 26 0
      web/public/4dage/js/ui.js
  14. 131 0
      web/public/4dage/js/weixin.js
  15. BIN
      web/src/assets/img/serachNull.png
  16. BIN
      web/src/assets/img/tab3Full.png
  17. BIN
      web/src/assets/img/tab3FullX.png
  18. 1 0
      web/src/assets/style/reset.css
  19. 1 0
      web/src/assets/style/reset.less
  20. 200 17
      web/src/views/gui/compomemt/antique.vue

+ 55 - 0
web/public/4dage/Model.html
View File 

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

+ 301 - 0
web/public/4dage/css/index.css
View File 

@@ -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
web/public/4dage/css/main.css
View File 

@@ -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
web/public/4dage/css/reset.css
View File 

@@ -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
web/public/4dage/css/wx.css
View File 

@@ -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
web/public/4dage/index.html
View File 

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

File diff suppressed because it is too large
+ 1 - 0
web/public/4dage/js/4dage.js


File diff suppressed because it is too large
+ 30 - 0
web/public/4dage/js/browser.min.js


+ 152 - 0
web/public/4dage/js/data.js
View File 

@@ -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
web/public/4dage/js/info.js
View File 

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

File diff suppressed because it is too large
+ 4 - 0
web/public/4dage/js/jquery.js


+ 0 - 0
web/public/4dage/js/model.js
View File


+ 26 - 0
web/public/4dage/js/ui.js
View File 

@@ -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
web/public/4dage/js/weixin.js
View File 

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

BIN
web/src/assets/img/serachNull.png
View File


BIN
web/src/assets/img/tab3Full.png
View File


BIN
web/src/assets/img/tab3FullX.png
View File


+ 1 - 0
web/src/assets/style/reset.css
View File 

@@ -244,6 +244,7 @@ a {
 
 .el-pagination__editor.el-input {
 
   width: 28px;
 
   height: 28px;
 
+  margin-right: 4px;
 
 }
 
 .el-pagination__editor.el-input .el-input__inner {
 
   width: 26px;

+ 1 - 0
web/src/assets/style/reset.less
View File 

@@ -112,6 +112,7 @@ a{text-decoration: none;}
 
 .el-pagination__editor.el-input{
 
   width: 28px;
 
   height: 28px;
 
+  margin-right: 4px;
 
 }
 
 .el-pagination__editor.el-input .el-input__inner{
 
   width: 26px;

+ 200 - 17
web/src/views/gui/compomemt/antique.vue
View File 

@@ -9,12 +9,13 @@
 
         <div
 
           class="row"
 
           v-for="item in topData"
 
+          @click="cutType(item.type)"
 
           :key="item.name"
 
           :class="{ active: item.type === formData.type }"
 
         >
 
           {{ item.name }}
 
         </div>
 
-        <div class="search">
 
+        <div class="search" @keyup.enter="mySearch">
 
           <el-input
 
             prefix-icon="el-icon-search"
 
             type="text"
 
@@ -22,17 +23,30 @@
 
             v-model="formData.searchKey"
 
             maxlength="10"
 
           />
 
+          <span class="btnn" @click="mySearch"></span>
 
         </div>
 
       </div>
 
+      <!-- 没有数据的时候 -->
 
+      <div class="hint" v-if="myArr.length === 0">
 
+        <img src="@/assets/img/serachNull.png" alt="" />
 
+        <p>暂时没有数据</p>
 
+        <p>请试一下其他关键字</p>
 
+      </div>
 
       <!-- 渲染的内容 -->
 
-      <div class="infoBox">
 
-        <div class="infoRow" :title="item.name" v-for="item in myArr" :key="item.id">
 
+      <div class="infoBox" v-else>
 
+        <div
 
+          @click="lookInfo(item)"
 
+          class="infoRow"
 
+          :title="item.name"
 
+          v-for="item in myArr"
 
+          :key="item.id"
 
+        >
 
           <img :src="baseURL + item.thumb" alt="" />
 
           <p>{{ item.name }}</p>
 
         </div>
 
       </div>
 
       <!-- 分页 -->
 
-      <div class="paging">
 
+      <div class="paging" v-show="myArr.length !== 0">
 
         <el-pagination
 
           layout="prev,pager,next,jumper"
 
           :total="total"
 
@@ -45,6 +59,24 @@
 
       <!-- 关闭按钮 -->
 
       <div class="close el-icon-close" @click="$emit('close')"></div>
 
     </div>
 
+    <!-- 模型和图片 -->
 
+    <div class="model" v-if="modelShow">
 
+      <div class="ifrCon" ref="ifrCon">
 
+        <img :src="baseURL + txtInfo.thumb" alt="" v-if="formData.type==='img'">
 
+        <iframe :src="mySrc" frameborder="0" v-else></iframe>
 
+        <!-- 全屏按钮 -->
 
+        <div class="full" @click="screen" v-if="formData.type==='model'">
 
+          <img src="@/assets/img/tab3FullX.png" alt="" v-if="fullscreen" />
 
+          <img src="@/assets/img/tab3Full.png" alt="" v-else />
 
+        </div>
 
+      </div>
 
+      <div class="rightTxt">
 
+        <h3>{{ txtInfo.name }}</h3>
 
+        <p>{{txtInfo.description}}</p>
 
+      </div>
 
+      <!-- 返回按钮 -->
 
+      <div class="close el-icon-arrow-left" @click="modelShow = false"></div>
 
+    </div>
 
   </div>
 
 </template>
 
 
@@ -74,9 +106,14 @@ export default {
 
         pageNum: 1,
 
         pageSize: 10,
 
         searchKey: "",
 
-        type: "img",
 
+        type: "",
 
       },
 
       myArr: [],
 
+      // 有关三维模型的数据
 
+      mySrc: "",
 
+      modelShow: false,
 
+      fullscreen: false,
 
+      txtInfo: {},
 
     };
 
   },
 
   //监听属性 类似于data概念
 
@@ -85,6 +122,51 @@ export default {
 
   watch: {},
 
   //方法集合
 
   methods: {
 
+    // 点击模型全屏
 
+    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;
 
+    },
 
+    lookInfo(item) {
 
+        this.txtInfo = item;
 
+        // 三维模型
 
+        this.mySrc ="4dage/Model.html?m=" + item.filePath;
 
+        this.modelShow = true;
 
+    },
 
+    mySearch() {
 
+      this.formData.pageNum = 1;
 
+      this.goodList(this.formData);
 
+    },
 
+    cutType(type) {
 
+      this.formData.type = type;
 
+      this.goodList(this.formData);
 
+    },
 
     // 分页器方法
 
     currentChange(val) {
 
       // console.log('当前页改变了', val)
 
@@ -102,7 +184,6 @@ export default {
 
       const res = await goodList(data);
 
       this.total = res.data.total;
 
       this.myArr = res.data.records;
 
-      console.log(998, res);
 
     },
 
   },
 
   //生命周期 - 创建完成（可以访问当前this实例）
 
@@ -143,9 +224,17 @@ export default {
 
     backdrop-filter: blur(4px);
 
     z-index: -1;
 
   }
 
+  .close {
 
+    color: #cc946d;
 
+    font-size: 34px;
 
+    cursor: pointer;
 
+    position: absolute;
 
+    right: 40px;
 
+    top: 55px;
 
+  }
 
   .main {
 
     color: #774926;
 
-    padding: 55px 40px 0;
 
+    padding: 55px 26px 0;
 
     position: absolute;
 
     top: 50%;
 
     left: 50%;
 
@@ -154,14 +243,6 @@ export default {
 
     height: 700px;
 
     background: url("../../../assets/img/goodBg.png");
 
     background-size: 100% 100%;
 
-    .close {
 
-      color: #cc946d;
 
-      font-size: 34px;
 
-      cursor: pointer;
 
-      position: absolute;
 
-      right: 40px;
 
-      top: 55px;
 
-    }
 
     .top {
 
       height: 36px;
 
       display: flex;
 
@@ -184,19 +265,45 @@ export default {
 
         color: #fff6d2;
 
       }
 
       .search {
 
+        position: relative;
 
         /deep/.el-icon-search {
 
           color: #774926;
 
           font-size: 20px;
 
           margin-top: -1px;
 
         }
 
+        .btnn {
 
+          z-index: 10;
 
+          cursor: pointer;
 
+          position: absolute;
 
+          left: 0;
 
+          top: 0;
 
+          height: 36px;
 
+          width: 36px;
 
+          border-radius: 50%;
 
+          background-color: transparent;
 
+        }
 
+      }
 
+    }
 
+    .hint {
 
+      text-align: center;
 
+      margin-top: 100px;
 
+      width: 100%;
 
+      height: 380px;
 
+      & > p {
 
+        color: #cc946d;
 
+        font-size: 20px;
 
+        margin-top: 20px;
 
       }
 
     }
 
     .infoBox {
 
-      margin-top: 50px;
 
+      display: flex;
 
+      flex-wrap: wrap;
 
+      margin-top: 55px;
 
       width: 100%;
 
       height: 410px;
 
-      background-color: aqua;
 
       .infoRow {
 
+        margin-right: 12px;
 
+        margin-bottom: 26px;
 
         cursor: pointer;
 
         overflow: hidden;
 
         width: 220px;
 
@@ -209,6 +316,7 @@ export default {
 
           object-fit: cover;
 
         }
 
         & > p {
 
+          padding: 0 10px;
 
           width: 100%;
 
           height: 38px;
 
           line-height: 38px;
 
@@ -218,6 +326,14 @@ export default {
 
           text-overflow: ellipsis;
 
           white-space: nowrap;
 
         }
 
+        &:nth-of-type(5n) {
 
+          margin-right: 0;
 
+        }
 
+        &:hover {
 
+          & > p {
 
+            color: #cc946d;
 
+          }
 
+        }
 
       }
 
     }
 
     .paging {
 
@@ -229,7 +345,74 @@ export default {
 
       justify-content: center;
 
     }
 
   }
 
+  // 模型
 
+  .model {
 
+    color: #774926;
 
+    padding: 110px 26px 0;
 
+    position: absolute;
 
+    top: 50%;
 
+    left: 50%;
 
+    transform: translate(-50%, -50%);
 
+    width: 1200px;
 
+    height: 700px;
 
+    background: url("../../../assets/img/goodBg.png");
 
+    background-size: 100% 100%;
 
+    display: flex;
 
+    .ifrCon {
 
+      position: relative;
 
+      width: 558px;
 
+      height: 478px;
 
+      iframe {
 
+        width: 100%;
 
+        height: 100%;
 
+      }
 
+      &>img{
 
+        max-width: 100%;
 
+        max-height: 100%;
 
+        position: absolute;
 
+        left: 50%;
 
+        top: 50%;
 
+        transform: translate(-50%,-50%);
 
+      }
 
+      .full {
 
+        width: 30px;
 
+        height: 30px;
 
+        cursor: pointer;
 
+        position: absolute;
 
+        right: 10px;
 
+        bottom: 10px;
 
+        color: #fff;
 
+        & > img {
 
+          width: 30px;
 
+          height: 30px;
 
+        }
 
+      }
 
+    }
 
+    .rightTxt {
 
+      padding-right: 20px;
 
+      height: 478px;
 
+      flex: 1;
 
+      margin-left: 110px;
 
+      display: flex;
 
+      flex-direction: column;
 
+      justify-content: center;
 
+      align-items: center;
 
+      &>h3{
 
+        width: 100%;
 
+        word-break:break-all;
 
+        font-size: 30px;
 
+        margin-bottom: 30px;
 
+      }
 
+      &>P{
 
+        width: 100%;
 
+        word-break:break-all;
 
+        color: #CC946D;
 
+        font-size: 14px;
 
+      }
 
+    }
 
+  }
 
 }
 
+
 
 .full {
 
   width: 100%;
 
 }