Kezdőlap Felfedezés Súgó
Regisztráció Bejelentkezés
shaogen1995
/
HNBWY_Model
1
0
Másolás 0
Fájlok Problémák 0 Beolvasztási kérések 0 Wiki
Forráskód Böngészése

up

shaogen1995 2 éve
szülő
9278579b27
commit
5940f274c5
17 módosított fájl, 861 hozzáadás és 0 törlés
Osztott Nézet Diff Statisztika Mutatása
  1. 57 0
      web/Model.html
  2. 301 0
      web/css/index.css
  3. 166 0
      web/css/main.css
  4. 59 0
      web/css/reset.css
  5. 107 0
      web/css/wechat.css
  6. BIN
      web/images/back.png
  7. BIN
      web/images/logo.png
  8. BIN
      web/images/play.png
  9. BIN
      web/images/searImg.png
  10. BIN
      web/img/bigBac.png
  11. BIN
      web/img/divBac.png
  12. BIN
      web/img/favicon.ico
  13. BIN
      web/img/titleBac.png
  14. 94 0
      web/index.html
  15. 1 0
      web/js/4dage.js
  16. 4 0
      web/js/jquery.js
  17. 72 0
      web/js/ui.js

+ 57 - 0
web/Model.html
Fájl Megtekintése 

@@ -0,0 +1,57 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+<link rel="stylesheet" href="css/index.css">
 
+<script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
 
+
 
+<head>
 
+    <title>河南博物院</title>
 
+    <script src="js/4dage.js"></script>
 
+    <style>
 
+        html {
 
+            overflow: hidden;
 
+        }
 
+
 
+        .back {
 
+            z-index: 9999;
 
+            cursor: pointer;
 
+            width: 30px;
 
+            height: 30px;
 
+            position: absolute;
 
+            top: 10px;
 
+            left: 10px;
 
+        }
 
+
 
+        .back img {
 
+            width: 100%;
 
+            height: 100%;
 
+        }
 
+    </style>
 
+</head>
 
+
 
+<body>
 
+    <div class="back" onclick="javascript:history.go(-1);">
 
+        <img src="./images/back.png" alt="">
 
+    </div>
 
+
 
+    <div id="ui">
 
+    </div>
 
+    <script src="js/jquery.js"></script>
 
+    <script>
 
+        var number = getQueryVariable("m");
 
+        /*  window.autoRotate = true; */ // 是否自动旋转
 
+
 
+        fdage.embed('/goods/model/' + number, {
 
+            width: 800,
 
+            height: 600,
 
+            autoStart: true,
 
+            fullFrame: true,
 
+            pagePreset: false
 
+        });
 
+    </script>
 
+</body>
 
+
 
+</html>

+ 301 - 0
web/css/index.css
Fájl Megtekintése 

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

+ 166 - 0
web/css/main.css
Fájl Megtekintése 

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

+ 59 - 0
web/css/reset.css
Fájl Megtekintése 

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

+ 107 - 0
web/css/wechat.css
Fájl Megtekintése 

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

BIN
web/images/back.png
Fájl Megtekintése


BIN
web/images/logo.png
Fájl Megtekintése


BIN
web/images/play.png
Fájl Megtekintése


BIN
web/images/searImg.png
Fájl Megtekintése


BIN
web/img/bigBac.png
Fájl Megtekintése


BIN
web/img/divBac.png
Fájl Megtekintése


BIN
web/img/favicon.ico
Fájl Megtekintése


BIN
web/img/titleBac.png
Fájl Megtekintése


+ 94 - 0
web/index.html
Fájl Megtekintése 

@@ -0,0 +1,94 @@
 
+<!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="shortcut icon" href="./img/favicon.ico" type="image/x-icon">
 
+    <link rel="stylesheet" href="./css/reset.css">
 
+    <link rel="stylesheet" href="./css/main.css">
 
+    <title>河南博物院</title>
 
+</head>
 
+<style>
 
+    .myTitle {
 
+        letter-spacing: 4px;
 
+        margin: 0 auto;
 
+        color: #fff;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+        width: 270px;
 
+        height: 50px;
 
+        background: url('./img/titleBac.png') no-repeat center;
 
+        background-size: 100% 100%;
 
+    }
 
+
 
+    .containers {
 
+        padding-top: 40px;
 
+        width: 100vw;
 
+        max-width: 1080px;
 
+        /* height: 100vh; */
 
+        background-color: #285b5e;
 
+        position: relative;
 
+    }
 
+
 
+    .none {
 
+        opacity: 0;
 
+        pointer-events: none;
 
+        letter-spacing: 4px;
 
+        position: absolute;
 
+        top: 0;
 
+        left: 0;
 
+        width: 100%;
 
+        height: 100%;
 
+        font-size: 30px;
 
+        color: #fff;
 
+        display: flex;
 
+        justify-content: center;
 
+        align-items: center;
 
+    }
 
+
 
+    .search {
 
+        width: 280px;
 
+        height: 30px;
 
+        position: absolute;
 
+        top: 50px;
 
+        right: 20px;
 
+        display: flex;
 
+    }
 
+
 
+    .search input {
 
+        padding: 0 10px;
 
+        border: none;
 
+        width: 200px;
 
+    }
 
+
 
+    input:focus {
 
+        outline: none;
 
+    }
 
+    .searImg{
 
+        cursor: pointer;
 
+        width: 30px;
 
+        height: 30px;
 
+        background: url('./images/searImg.png') #fff no-repeat center;
 
+        background-size: 20px 20px;
 
+    }
 
+</style>
 
+
 
+<body>
 
+    <div class="containers">
 
+        <div class="myTitle">河南博物院</div>
 
+        <ul class="con"> </ul>
 
+        <div class="none">暂无文物...</div>
 
+        <div class="search">
 
+            <input class="myInp" type="text" placeholder="请输入文物名称搜索" />
 
+            <div class="searImg"></div>
 
+        </div>
 
+    </div>
 
+
 
+    <script src="js/jquery.js"></script>
 
+    <script src="js/ui.js"></script>
 
+</body>
 
+
 
+</html>

A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 1 - 0
web/js/4dage.js


A különbségek nem kerülnek megjelenítésre, a fájl túl nagy
+ 4 - 0
web/js/jquery.js


+ 72 - 0
web/js/ui.js
Fájl Megtekintése 

@@ -0,0 +1,72 @@
 
+(function () {
 
+    let baseUrl = '' //打包
 
+    // let baseUrl = 'http://hnbwg.4dage.com' //本地测试
 
+
 
+    let arr = []
 
+
 
+    const getList = function (searchKey) {
 
+        fetch(`${baseUrl}/api/show/goods/list`, {
 
+            method: 'post',
 
+            body: JSON.stringify({
 
+                type: 'model',
 
+                searchKey,
 
+                pageSize:99999
 
+            }),
 
+            headers: {
 
+                'Content-Type': 'application/json'
 
+            }
 
+        }).then(res => res.text()) //请求得到的数据转换为text
 
+            .then(res => {
 
+                let ul = document.querySelector('.con');
 
+                ul.innerHTML = ''
 
+
 
+                let res2 = JSON.parse(res)
 
+                arr = res2.data.records
 
+
 
+                // 如果没有数据
 
+                if (arr.length === 0) {
 
+                    $('.none').css({ opacity: 1, pointerEvents: 'auto' })
 
+                } else {
 
+                    $('.none').css({ opacity: 0, pointerEvents: 'none' })
 
+                    let fragment = document.createDocumentFragment();
 
+                    arr.forEach(v => {
 
+                        let li = document.createElement('li');
 
+                        let divWrap = document.createElement('div');
 
+                        let a = document.createElement('a');
 
+                        let div = document.createElement('div');
 
+                        let p = document.createElement("p");
 
+                        divWrap.classList.add('case');
 
+                        a.classList.add('link-a');
 
+                        a.href = `Model.html?m=${v.fileName}`;
 
+                        div.classList.add('card-img');
 
+                        div.style = `background-image: url(${v.thumb})`;
 
+                        p.innerHTML = v.name;
 
+                        a.appendChild(div);
 
+                        divWrap.appendChild(a);
 
+                        li.appendChild(divWrap);
 
+                        li.appendChild(p);
 
+                        fragment.appendChild(li);
 
+                    })
 
+
 
+                    ul.appendChild(fragment);
 
+
 
+                }
 
+            })
 
+    }
 
+
 
+    getList('')
 
+
 
+    $('.search').keyup(function (e) {
 
+        if (e.key === 'Enter') {
 
+            let txt = $('.myInp').val().trim()
 
+            getList(txt)
 
+        }
 
+    })
 
+
 
+    $('.searImg').click(function () {
 
+        let txt = $('.myInp').val().trim()
 
+        getList(txt)
 
+    })
 
+
 
+
 
+})()