pc端ui更新

.gitignore

@@ -0,0 +1,23 @@
+.DS_Store
+node_modules
+/dist
+edit-backstage
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

web/public/static/css/main.css

@@ -4034,7 +4034,7 @@ a.hasHover:hover, a:active {
     float: left;
     display: flex;
     justify-content: center;
-    background-color: rgba(255, 246, 210, 1);
+    background-color: #A1653B;
     position: relative;
 }
 
@@ -4060,7 +4060,7 @@ a.hasHover:hover, a:active {
     height: 30px;
     line-height: 30px;
     padding: 0;
-    color: #774926;
+    color: #FFF6D2;
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
@@ -4096,7 +4096,7 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.hasHover>img:hover {
     opacity: 1;
-    border-color: #CC946D;
+    border-color: #FFF6D2;
 }
 
 .playing .frame .slidee li.thumbImg.hasHover>img:hover {
@@ -4116,11 +4116,11 @@ a.hasHover:hover, a:active {
 
 .frame .slidee li.thumbImg.active>img, .frame .slidee li.thumbImg.hasHover.active>img:hover {
     opacity: 1;
-    border: 2px solid #CC946D;
+    border: 2px solid #FFF6D2;
 }
 
 .frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {
-    color: #774926;
+    color: #fff6d2;
 }
 
 .scrollbar {
@@ -4199,7 +4199,7 @@ a.hasHover:hover, a:active {
 }
 
 #progressBar .step.active::before, #progressBar .step.recent::before {
-    background-color: #CC946D;
+    background-color: #FFF6D2;
 }
 
 #progressBar .step.upcoming::before {

web/src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 const service = axios.create({
-  baseURL: 'http://192.168.0.135:8017', // 本地调试
-  // baseURL: '', // 线上调试
-  // baseURL: '', // build
+  // baseURL: 'http://192.168.0.135:8017', // 本地调试
+  // baseURL: 'http://project.4dage.com:8017', // 线上调试
+  baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器

web/src/views/gui/compomemt/mapNav.vue

@@ -4,12 +4,19 @@
     <div class="meanPageMBL"></div>
 
     <div class="main">
-      <div class="row" :class="{noneAc:refer.includes(item.url)}" v-for="item in data" :key="item.id">
-        <img :src="require(`@/assets/img/${item.url}.jpg`)" alt="" />
-        <p>{{ item.name }}</p>
+      <div
+        class="row"
+        :class="{ noneAc: refer.includes(item.url) }"
+        v-for="item in data"
+        :key="item.id"
+      >
+        <div class="rowtxt" v-html="item.name"></div>
+        <img :src="require(`@/assets/img/${item.url}.png`)" alt="" />
+        <p class="bs">·</p>
+        <p v-html="item.name"></p>
         <!-- 背景遮造 -->
         <div class="smak" @click="cutScene(item.url)">
-          <div>点击<br/>浏览</div>
+          <div>点击<br />浏览</div>
         </div>
       </div>
     </div>
@@ -32,13 +39,18 @@ export default {
     //这里存放数据
     return {
       data: [
-        { name: "-", url: "1185" },
-        { name: "-", url: "1186" },
-        { name: "-", url: "1187" },
-        { name: "-", url: "1188" },
-        { name: "临洮5000年历史文物展", url: "1189" },
+        { name: "前沿", url: "1185" },
+        {
+          name: "<span>第一单元</span><br/>三大文明的发现地和革命地",
+          url: "1186",
+        },
+        { name: "<span>第二单元</span><br/>战国秦长城西端起首地", url: "1187" },
+        {
+          name: "<span>第三单元</span><br/>丝绸之路南线的枢纽和重镇",
+          url: "1188",
+        },
       ],
-      refer:''
+      refer: "",
     };
   },
   //监听属性 类似于data概念
@@ -48,15 +60,16 @@ export default {
   //方法集合
   methods: {
     // 点击切换场景
-    cutScene(url){
-      window.location.href = window.location.origin +window.location.pathname+ `#/?m=${url}`;
+    cutScene(url) {
+      window.location.href =
+        window.location.origin + window.location.pathname + `#/?m=${url}`;
       location.reload(true);
-    }
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
     // 获取当前地址栏参数
-    this.refer = window.location.hash
+    this.refer = window.location.hash;
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {},
@@ -105,16 +118,39 @@ export default {
       cursor: pointer;
       width: 230px;
       height: 620px;
+      .rowtxt {
+        color: #774926;
+        font-size: 22px;
+        letter-spacing: 4px;
+        writing-mode: vertical-lr;
+        position: absolute;
+        top: 55px;
+        left: 50%;
+        transform: translateX(-50%);
+        /deep/span {
+          padding-top: 2px;
+          font-size: 18px;
+        }
+      }
+      &:nth-of-type(1) .rowtxt {
+        font-size: 24px;
+        top: 150px;
+        letter-spacing: 40px;
+      }
+
       & > img {
         width: 100%;
         height: 100%;
         object-fit: cover;
       }
+      .bs{
+        font-size: 80px;
+        margin: 10px 0;
+      }
       & > p {
-        height: 40px;
-        line-height: 60px;
         text-align: center;
-        font-size: 20px;
+        line-height: 30px;
+        font-size: 16px;
         color: #fff6d2;
       }
       .smak {
@@ -125,7 +161,7 @@ export default {
         height: 100%;
         opacity: 0;
         transition: opacity 1s;
-        background: url("../../../assets/img/mapAc.png") rgba(116, 72, 38, 0.8);
+        background: url("../../../assets/img/mapAc.png") rgba(116, 72, 38, 0.9);
         background-size: 100% 100%;
         display: flex;
         justify-content: center;
@@ -133,7 +169,7 @@ export default {
         & > div {
           padding-top: 22px;
           text-align: center;
-          color: #FFF6D2;
+          color: #fff6d2;
           font-size: 20px;
           width: 100px;
           height: 100px;
@@ -142,12 +178,15 @@ export default {
         }
       }
       &:hover {
-        .smak{
+          & > p{
+            color: #3f1e05;
+          }
+        .smak {
           opacity: 1;
         }
       }
     }
-    .noneAc{
+    .noneAc {
       pointer-events: none;
     }
   }

web/src/views/gui/compomemt/share.vue

@@ -1,7 +1,5 @@
 <template>
   <div class="share" :class="{ full: smBtn }">
-    <!-- 毛玻璃 -->
-    <div class="meanPageMBL"></div>
 
     <div class="main">
       <h3>分享页面</h3>
@@ -85,17 +83,6 @@ export default {
   z-index: 998;
   width: calc(100% - 200px);
   height: 100%;
-  // m毛玻璃
-  .meanPageMBL {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background: rgba(161, 101, 59, 0.8);
-    backdrop-filter: blur(4px);
-    z-index: -1;
-  }
   .main {
     border-radius: 10px;
     padding-top: 50px;
@@ -105,10 +92,7 @@ export default {
     transform: translate(-50%, -50%);
     width: 400px;
     height: 550px;
-    background-image: linear-gradient(
-      rgba(204, 148, 109, 0.8),
-      rgba(119, 73, 38, 0.8)
-    );
+    background-color: rgba(161, 101, 59, .8);
     & > h3 {
       font-size: 30px;
       text-align: center;

web/src/views/gui/guide.vue

@@ -31,8 +31,8 @@ export default {
 </script>
 <style lang="less" scoped>
 #status {
-  background-color: rgba(255, 246, 210, 1);
-  color: #774926;
+  background-color: #A1653B;
+  color: #FFF6D2;
 }
 #progressBar {
   transition: all 0.3s;
@@ -40,7 +40,7 @@ export default {
   height: 100%;
   display: flex;
   align-items: center;
-  background-color: rgba(255, 246, 210, 1);
+  background-color: #A1653B;
 }
 #playHead {
   background-color: transparent;

web/src/views/gui/menu.vue

@@ -161,12 +161,10 @@
               <img
                 class="icon icon-inside"
                 :src="require('@/assets/images/hotlist.png')"
-                
               />
               <img
                 class="icon icon-inside active"
                 :src="require('@/assets/images/hotlist.png')"
-                
               />
             </div>
             <div
@@ -248,7 +246,9 @@
         <div class="share" @click="meanInd = -1">
           <img
             title="分享"
-            :src="require(`@/assets/img/share${meanInd===-1 ? 'Ac' : ''}.png`)"
+            :src="
+              require(`@/assets/img/share${meanInd === -1 ? 'Ac' : ''}.png`)
+            "
             alt=""
           />
         </div>
@@ -293,13 +293,13 @@
       </div>
     </div>
     <!-- 分享组件 -->
-    <Share v-if="meanInd===-1" @close="meanInd = null" :smBtn="smBtn" />
+    <Share v-if="meanInd === -1" @close="meanInd = null" :smBtn="smBtn" />
     <!-- 地图导航组件 -->
-    <MapNav v-else-if="meanInd===1" @close="meanInd = null" :smBtn="smBtn" />
+    <MapNav v-else-if="meanInd === 1" @close="meanInd = null" :smBtn="smBtn" />
     <!-- 精品文物组件 -->
-    <Antique v-else-if="meanInd===2" @close="meanInd = null" :smBtn="smBtn" />
+    <Antique v-else-if="meanInd === 2" @close="meanInd = null" :smBtn="smBtn" />
     <!-- 热点列表组件 -->
-    <Hotspot v-else-if="meanInd===3" @close="meanInd = null" :smBtn="smBtn" />
+    <Hotspot v-else-if="meanInd === 3" @close="meanInd = null" :smBtn="smBtn" />
   </div>
 </template>
 
@@ -355,7 +355,7 @@ export default {
 </script>
 
 <style lang="less" scoped>
-#hotList{
+#hotList {
   display: none !important;
 }
 ::-webkit-scrollbar {
@@ -419,8 +419,20 @@ export default {
   transition: all 0.3s;
   z-index: 999;
   height: 100%;
-  background-color: rgba(119, 73, 38, 0.8);
+  background-color: #774926;
   text-align: center;
+  ::before {
+    opacity: 0.07;
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -10;
+    background-image: url("../../assets/img/tabBac.png");
+    background-size: 100% 100%;
+  }
   .smBtn {
     text-align: center;
     line-height: 60px;
@@ -431,12 +443,12 @@ export default {
     left: -18px;
     width: 18px;
     height: 60px;
-    background-color: rgba(119, 73, 38, 0.8);
+    background-color: #774926;
     border-radius: 5px 0 0 5px;
   }
   .logo {
     margin: 20px 0 30px;
-    width: 180px;
+    width: 166px;
   }
   .rowBox {
     display: flex;

webM/src/utils/request.js

@@ -1,8 +1,8 @@
 import axios from 'axios'
 const service = axios.create({
-  baseURL: 'http://192.168.0.135:8017', // 本地调试
-  // baseURL: '', // 线上调试
-  // baseURL: '', // build
+  // baseURL: 'http://192.168.0.135:8017', // 本地调试
+  // baseURL: 'http://project.4dage.com:8017', // 线上调试
+  baseURL: '', // build
   timeout: 5000
 })
 // 请求拦截器