模型页面ifr

houtai/src/utils/http.ts

@@ -7,10 +7,10 @@ import { domShowFu, progressDomFu } from "./domShow";
 // 请求基地址
 export const baseURL =
   // 线下的图片地址需要加上/api/
-  process.env.NODE_ENV === "development"
-    ? "http://192.168.20.55:8042/api/"
-    : "";
-// process.env.NODE_ENV === "development" ? "https://xuzhouwall.4dage.com" : "";
+  // process.env.NODE_ENV === "development"
+  //   ? "http://192.168.20.55:8042/api/"
+  //   : "";
+process.env.NODE_ENV === "development" ? "https://bengbubwg.4dage.com" : "";
 
 // 处理  类型“AxiosResponse<any, any>”上不存在属性“code”
 declare module "axios" {
@@ -23,10 +23,10 @@ declare module "axios" {
 // 创建 axios 实例
 const http = axios.create({
   // --------线下的地址不用加/api/
-  baseURL: baseURL,
+  // baseURL: baseURL,
 
   // --------打包或线上环境接口需要加上api/
-  // baseURL: baseURL + "/api/",
+  baseURL: baseURL + "/api/",
   timeout: 5000,
 });
 

modelPage/index.css

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

modelPage/index.html

@@ -0,0 +1,101 @@
+<!DOCTYPE html>
+<html lang="ch-zh">
+<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="./index.css">
+
+<head>
+    <title>模型</title>
+    <script src="./4dage.js"></script>
+    <style>
+        html {
+            overflow: hidden;
+        }
+
+        .outerImg {
+            transition: all 1s;
+            opacity: 1;
+            position: absolute;
+            z-index: 998;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background-color: #1a1b20;
+        }
+
+        .outerImg img {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="outerImg">
+        <img src="./bg.jpg" alt="">
+    </div>
+    <div id="ui">
+    </div>
+    <script>
+        // const baseUrl =window.location.origin
+        const baseUrl = 'https://bengbubwg.4dage.com'
+
+        const url = window.location.search
+
+
+        // 获取地址栏参数
+        const urlParameter = (data) => {
+            if (data) {
+                const query = data.substring(data.indexOf("?") + 1);
+                const arr = query.split("&");
+                const params = {};
+                arr.forEach((v) => {
+                    const key = v.substring(0, v.indexOf("="));
+                    const val = v.substring(v.indexOf("=") + 1);
+                    params[key] = val;
+                });
+                return params;
+            } else return {};
+        };
+
+
+
+        const urlObj = urlParameter(url)
+
+        if (urlObj.id) {
+            fetch(`${baseUrl}/api/show/goods/detail/${urlObj.id}`)
+                .then(response => response.json())
+                .then(res => {
+                    const thumb = res.data.entity.thumb
+                    let modelUrl = ''
+                    res.data.file.forEach(v => {
+                        if (v.type === 'model') {
+                            modelUrl = v.filePath
+                        }
+                    })
+                    // 设置背景封面
+                    document.querySelector('.outerImg img').setAttribute('src', thumb)
+
+                    // 加载模型
+                    if (urlObj.r) window.autoRotate = true;
+                    fdage.embed(modelUrl, {
+                        width: 800,
+                        height: 600,
+                        autoStart: true,
+                        fullFrame: true,
+                        pagePreset: false
+                    });
+
+                    // console.log(res)
+                });
+        } else alert('id is null!')
+    </script>
+</body>
+
+</html>