up

houtai/src/apis/tab2.js

@@ -34,3 +34,12 @@ export const goodsDetail = (id) => {
     url: `/cms/goods/detail/${id}`
   })
 }
+
+// ------------------------------操作日志列表
+export const logList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/sys/log/list',
+    data
+  })
+}

houtai/src/views/tab3/index.vue

@@ -1,42 +1,108 @@
 <template>
-  <div class="tab3">
+  <div class="tab6">
     <div class="insideTop">
-      数据统计
+      操作日志
     </div>
     <div class="obstruct"></div>
+    <!-- 主要内容 -->
     <div class="conten">
-
+      <div class="search">
+        <el-input
+          v-model="formData.searchKey"
+          placeholder="请输入关键字"
+          style="width: 240px"
+        ></el-input>
+        <!-- 右侧按钮 -->
+        <div class="search_btn">
+          <el-button type="primary" @click="searchBtn">查 询</el-button>
+        </div>
+      </div>
+      <!-- 表格 -->
+      <div class="table">
+        <el-table :data="tableData" style="width: 100%">
+          <el-table-column label="序号" width="80">
+            <template slot-scope="scope">
+              {{
+                scope.$index + (formData.pageNum - 1) * formData.pageSize + 1
+              }}
+            </template>
+          </el-table-column>
+          <el-table-column prop="userName" label="账号"> </el-table-column>
+          <el-table-column prop="type" label="操作模块"> </el-table-column>
+          <el-table-column prop="description" label="操作事件"></el-table-column>
+          <el-table-column prop="createTime" label="操作时间"></el-table-column>
+        </el-table>
+      </div>
+    </div>
+    <!-- 分页 -->
+    <div class="paging">
+      <el-pagination
+        layout="sizes,prev, pager, next,jumper"
+        :total="total"
+        :current-page="formData.pageNum"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+      >
+      </el-pagination>
     </div>
-
   </div>
 </template>
 
 <script>
+import { logList } from '@/apis/tab2'
 export default {
-  name: 'tab3',
+  name: 'tab6',
   components: {},
   data () {
     // 这里存放数据
     return {
-
+      total: 0,
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: ''
+      },
+      tableData: []
     }
   },
   // 监听属性 类似于data概念
   computed: {},
   // 监控data中的数据变化
-  watch: {},
+  watch: {
+  },
   // 方法集合
   methods: {
-
+    // 点击查询
+    searchBtn () {
+      this.formData.pageNum = 1
+      this.logList(this.formData)
+    },
+    // 封装获取列表的函数
+    async logList (data) {
+      const res = await logList(data)
+      this.total = res.data.total
+      this.tableData = res.data.records
+      // console.log(998, res)
+    },
+    // 分页器方法
+    currentChange (val) {
+      // console.log('当前页改变了', val)
+      this.formData.pageNum = val
+      this.logList(this.formData)
+    },
+    sizeChange (val) {
+      // console.log('条数改变了', val)
+      this.formData.pageNum = 1
+      this.formData.pageSize = val
+      this.logList(this.formData)
+    }
   },
   // 生命周期 - 创建完成（可以访问当前this实例）
   created () {
-
+    this.logList(this.formData)
   },
   // 生命周期 - 挂载完成（可以访问DOM元素）
-  mounted () {
-
-  },
+  mounted () {},
   beforeCreate () {}, // 生命周期 - 创建之前
   beforeMount () {}, // 生命周期 - 挂载之前
   beforeUpdate () {}, // 生命周期 - 更新之前
@@ -47,6 +113,49 @@ export default {
 }
 </script>
 <style lang='less' scoped>
-//@import url(); 引入公共css类
-
+.tab6 {
+  height: 100%;
+  .insideTop .add{
+    right: 55px;
+  }
+  .conten {
+    padding: 15px 30px 0;
+    height: calc(100% - 32px);
+    .classify {
+      text-align: center;
+      width: 40px;
+      padding-bottom: 10px;
+      color: #b9412e;
+      border-bottom: 2px solid #b9412e;
+    }
+    .search {
+      display: flex;
+      margin-bottom: 20px;
+      position: relative;
+      margin-top: 12px;
+      height: 40px;
+      .search_k {
+        margin-left: 30px;
+      }
+      .search_btn {
+        margin-left: 30px;
+        display: flex;
+        justify-content: space-between;
+        width: 100px;
+      }
+    }
+    .table {
+      max-width: 1533px;
+    }
+    /deep/.el-table__body-wrapper {
+      max-height: 528px;
+      overflow-y: auto;
+    }
+  }
+  .paging {
+    position: absolute;
+    bottom: 15px;
+    right: 50px;
+  }
+}
 </style>

web/package.json

@@ -10,9 +10,12 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "axios": "^0.27.2",
     "core-js": "^3.6.5",
     "element-ui": "^2.15.6",
     "html2canvas": "^1.3.3",
+    "install": "^0.13.0",
+    "npm": "^8.10.0",
     "swiper": "^5.3.8",
     "v-viewer": "^1.6.4",
     "vue": "^2.6.11",

web/public/static/css/main.css

@@ -4028,11 +4028,14 @@ a.hasHover:hover, a:active {
 }
 
 .frame {
-    width: calc(100% - 20px);
-    margin: 9px 10px;
+    padding-top: 8px;
+    width: 100%;
+    height: 100%;
     float: left;
     display: flex;
     justify-content: center;
+    background-color: rgba(255, 246, 210, 0.8);
+    position: relative;
 }
 
 .frame.noScroll {
@@ -4057,12 +4060,17 @@ a.hasHover:hover, a:active {
     height: 30px;
     line-height: 30px;
     padding: 0;
-    color: #fff;
+    color: #774926;
     overflow: hidden;
     white-space: nowrap;
     text-align: center;
     z-index: 100;
-    transform: translate3d(0, 0, 0)
+    transform: translate3d(0, 0, 0);
+    position: absolute;
+    width: 100%;
+    bottom: -30px;
+    left: 50%;
+    transform: translateX(-50%);
 }
 
 .frame .slidee li .mark360View, .frame .slidee li .markInsideView {
@@ -4082,13 +4090,13 @@ a.hasHover:hover, a:active {
 }
 
 .frame .slidee li img {
-    border: 2px solid transparent;
+    border: 3px solid transparent;
     transition: all .5s
 }
 
 .frame .slidee li.thumbImg.hasHover>img:hover {
     opacity: 1;
-    border-color: #fff
+    border-color: #CC946D;
 }
 
 .playing .frame .slidee li.thumbImg.hasHover>img:hover {
@@ -4108,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 #EE3E41;
+    border: 2px solid #CC946D;
 }
 
 .frame .slidee li.thumbImg.active>.overlay, .frame .slidee li.thumbImg.hasHover.active>.overlay:hover {
-    color: #fff;
+    color: #774926;
 }
 
 .scrollbar {
@@ -4184,14 +4192,14 @@ a.hasHover:hover, a:active {
 
 #progressBar .step::before {
     content: '';
-    background-color: #575757;
+    background-color: #774926;
     width: 100%;
     height: 100%;
     display: block
 }
 
 #progressBar .step.active::before, #progressBar .step.recent::before {
-    background-color: #00b4ed
+    background-color: #CC946D;
 }
 
 #progressBar .step.upcoming::before {
@@ -7041,7 +7049,7 @@ a.hasHover.tag-link:hover {
         display: block !important;
     }
     .viewContainer{
-        padding: 10px 20px 10px 0;
+        padding: 10px 20px 10px 10px;
         display: flex !important;
         align-items: center;
         border-radius: 0 20px 20px 0;

web/src/assets/style/reset.css

@@ -0,0 +1,294 @@
+/* reset */
+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;
+}
+header,
+footer,
+section,
+article,
+aside,
+nav,
+hgroup,
+address,
+figure,
+figcaption,
+menu,
+details {
+  display: block;
+}
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+caption,
+th {
+  text-align: left;
+  font-weight: normal;
+}
+html,
+body,
+fieldset,
+img,
+iframe,
+abbr {
+  border: 0;
+}
+i,
+cite,
+em,
+var,
+address,
+dfn {
+  font-style: normal;
+}
+[hidefocus],
+summary {
+  outline: 0;
+}
+li {
+  list-style: none;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+small {
+  font-size: 100%;
+}
+sup,
+sub {
+  font-size: 83%;
+}
+pre,
+code,
+kbd,
+samp {
+  font-family: inherit;
+}
+q:before,
+q:after {
+  content: none;
+}
+textarea {
+  overflow: auto;
+  resize: none;
+}
+label,
+summary {
+  cursor: default;
+}
+a,
+button {
+  cursor: pointer;
+}
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+em,
+strong,
+b {
+  font-weight: bold;
+}
+del,
+ins,
+u,
+s,
+a,
+a:hover {
+  text-decoration: none;
+}
+body,
+textarea,
+input,
+button,
+select,
+keygen,
+legend {
+  font: 14px/1.14;
+  outline: 0;
+}
+body {
+  background: #fff;
+}
+* {
+  box-sizing: border-box;
+}
+a {
+  text-decoration: none;
+}
+::-webkit-scrollbar {
+  width: 2px;
+  height: 8px;
+}
+::-webkit-scrollbar-thumb {
+  height: 50px;
+  background-color: #ddd;
+  -webkit-border-radius: 4px;
+  outline: 2px solid #fff;
+  outline-offset: -2px;
+}
+::-webkit-scrollbar-thumb:hover {
+  height: 50px;
+  background-color: #9f9f9f;
+  -webkit-border-radius: 4px;
+}
+.el-pagination button:disabled {
+  background-color: transparent;
+}
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+  background-color: transparent;
+}
+.el-dialog,
+.el-pager li {
+  background-color: transparent;
+}
+.el-pagination {
+  color: #f0af7c;
+}
+.el-pager li.active {
+  color: black;
+}
+.el-pager li:hover {
+  color: black;
+}
+.el-pagination .btn-next,
+.el-pagination .btn-prev {
+  color: #f0af7c;
+}
+.el-pagination button:hover {
+  color: black;
+}
+.el-textarea__inner {
+  background-color: rgba(237, 211, 176, 0.3);
+  color: #f0af7c;
+  border: none;
+}
+.el-textarea__inner::-webkit-input-placeholder {
+  color: #EDD3B0;
+}
+.el-radio {
+  color: #f0af7c;
+}
+.el-radio__input.is-checked + .el-radio__label {
+  color: #f0af7c;
+}
+.el-radio__inner {
+  width: 24px;
+  height: 24px;
+}
+.el-radio__input.is-checked .el-radio__inner {
+  border-color: red;
+  background: #f0af7c;
+}
+.el-radio__inner:hover {
+  border-color: red;
+}
+.el-radio__input.is-checked .el-radio__inner::after {
+  transform: translate(-50%, -50%) scale(0);
+}
+.search .el-input__inner {
+  width: 340px;
+  height: 36px;
+  background-color: transparent;
+  color: #774926;
+  border: 1px solid #774926;
+  border-radius: 18px;
+}
+.el-input__inner {
+  background-color: transparent;
+  color: #774926;
+  border: 1px solid #774926;
+  border-radius: 13px;
+}
+.el-input.is-active .el-input__inner,
+.el-input__inner:focus {
+  border: 1px solid #cc946d;
+}
+.el-pagination__editor.el-input {
+  width: 28px;
+  height: 28px;
+}
+.el-pagination__editor.el-input .el-input__inner {
+  width: 26px;
+  height: 26px;
+}
+input::-webkit-input-placeholder {
+  color: #cc946d !important;
+}
+.el-select-dropdown__item.hover,
+.el-select-dropdown__item:hover {
+  background-color: rgba(237, 211, 176, 0.3);
+}
+.el-select-dropdown__item.selected {
+  color: #f0af7c;
+}
+/* 分页 */
+.el-pagination {
+  display: flex;
+  align-items: center;
+}
+.el-pager li {
+  font-weight: 400;
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 8px;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+}
+.el-pager li:hover {
+  color: #CC946D;
+}
+.el-pager li.active {
+  width: 26px;
+  height: 26px;
+  background-color: #CC946D;
+  border-radius: 50%;
+  color: #fff;
+}
+.el-pager li.active + li {
+  border: none;
+  background-color: transparent;
+}
+.el-pagination button:hover {
+  color: #CC946D;
+}

web/src/assets/style/reset.less

@@ -92,14 +92,33 @@ a{text-decoration: none;}
 .el-radio__input.is-checked .el-radio__inner::after{
   transform: translate(-50%,-50%) scale(0);
 }
+.search .el-input__inner{
+  width: 340px;
+  height: 36px;
+  background-color: transparent;
+  color: #774926;
+  border:1px solid #774926;
+  border-radius: 18px;
+}
 .el-input__inner{
-  height: 30px;
-  background-color: rgba(237, 211, 176, .3);
-  color: #f0af7c;
-  border:none;
+  background-color: transparent;
+  color: #774926;
+  border:1px solid #774926;
+  border-radius: 13px;
+}
+.el-input.is-active .el-input__inner, .el-input__inner:focus{
+  border:1px solid #cc946d;
+}
+.el-pagination__editor.el-input{
+  width: 28px;
+  height: 28px;
+}
+.el-pagination__editor.el-input .el-input__inner{
+  width: 26px;
+  height: 26px;
 }
 input::-webkit-input-placeholder {
-  color: #EDD3B0 !important;
+  color: #cc946d !important;
 }
 .el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
   background-color: rgba(237, 211, 176, .3);;
@@ -107,7 +126,37 @@ input::-webkit-input-placeholder {
 .el-select-dropdown__item.selected{
   color: #f0af7c;
 }
+
+/* 分页 */
 .el-pagination{
   display: flex;
-  justify-content: center;
-}
+  align-items: center;
+}
+.el-pager li{
+  font-weight: 400;
+  min-width: 24px;
+  width: 24px;
+  height: 24px;
+  padding: 0;
+  margin: 0 8px;
+  border: none;
+  background-color: transparent;
+  border-radius: 50%;
+}
+.el-pager li:hover{
+  color: #CC946D;
+}
+.el-pager li.active{
+  width: 26px;
+  height: 26px;
+  background-color: #CC946D;
+  border-radius: 50%;
+  color: #fff;
+}
+.el-pager li.active+li{
+  border: none;
+  background-color: transparent;
+}
+.el-pagination button:hover{
+  color: #CC946D;
+}

web/src/components/welcome/index.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="welcome">
+  <div class="welcome" v-if="0">
     <div
       class="btn"
       @click.stop="$emit('close')"

web/src/pages/Home.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="parent-body">
+  <div class="parent-body" @click="musicPlay" @touchstart="musicPlay">
     <!-- 热点 -->
     <!-- <hot/> -->
     <!-- 热点弹出框 -->
@@ -11,7 +11,7 @@
     <div id="player"></div>
 
     <!-- 底部菜单 -->
-    <div id="gui-parent" :class="{guiParent:pageFlag}">
+    <div id="gui-parent" :class="{ guiParent: pageFlag }">
       <!-- 进度条加载 -->
       <gui-loading />
       <div id="hot"></div>
@@ -28,10 +28,10 @@
         <v-title />
 
         <!-- 底部菜单 -->
-        <v-menu @hndeMenu='hndeMenu'/>
+        <v-menu @hndeMenu="hndeMenu" />
 
         <!-- 导览 -->
-        <v-guide />
+        <v-guide :pageFlag="pageFlag" />
 
         <!-- logo -->
         <div
@@ -115,15 +115,22 @@ export default {
       hotspots: "",
       loading: true,
       // 控制页面宽度（通过菜单的展开和隐藏）
-      pageFlag:false
+      pageFlag: false,
+      // 控制背景音乐
+      musicFlag: true,
     };
   },
 
   methods: {
-    hndeMenu(val){
-      this.pageFlag=val
+    musicPlay() {
+      if (this.musicFlag) window.manage.switchBgmState(true);
+      this.musicFlag = false;
     },
-    // 字组件菜单传递过来隐藏和展开事件 👆
+    // 控制背景音乐播放👆
+    hndeMenu(val) {
+      this.pageFlag = val;
+    },
+    // 子组件菜单传递过来隐藏和展开事件 👆
     hideWelcome() {
       this.showWelcome = false;
       window.manage.switchBgmState(true);
@@ -198,11 +205,11 @@ export default {
 #gui-parent {
   width: calc(100% - 200px);
 }
-.guiParent{
+.guiParent {
   width: 100% !important;
 }
-/deep/#drawer{
-  transition: all .3s;
+/deep/#drawer {
+  transition: all 0.3s;
   width: calc(100% - 200px);
 }
 </style>

web/src/utils/api.js

@@ -0,0 +1,9 @@
+import axios from './request'
+// 获取文物列表
+export const goodList = (data) => {
+  return axios({
+    method: 'post',
+    url: '/web/goods/list',
+    data
+  })
+}

web/src/utils/request.js

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

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

@@ -0,0 +1,236 @@
+<template>
+  <div class="antique" :class="{ full: smBtn }">
+    <!-- 毛玻璃 -->
+    <div class="meanPageMBL"></div>
+
+    <div class="main">
+      <div class="top">
+        <div class="row">类型：</div>
+        <div
+          class="row"
+          v-for="item in topData"
+          :key="item.name"
+          :class="{ active: item.type === formData.type }"
+        >
+          {{ item.name }}
+        </div>
+        <div class="search">
+          <el-input
+            prefix-icon="el-icon-search"
+            type="text"
+            placeholder="搜索"
+            v-model="formData.searchKey"
+            maxlength="10"
+          />
+        </div>
+      </div>
+      <!-- 渲染的内容 -->
+      <div class="infoBox">
+        <div 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">
+        <el-pagination
+          layout="prev,pager,next,jumper"
+          :total="total"
+          :current-page="formData.pageNum"
+          @current-change="currentChange"
+          @size-change="sizeChange"
+        >
+        </el-pagination>
+      </div>
+      <!-- 关闭按钮 -->
+      <div class="close el-icon-close" @click="$emit('close')"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "@/utils/request";
+import { goodList } from "@/utils/api";
+export default {
+  name: "antique",
+  props: {
+    smBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      total: 0,
+      baseURL: "",
+      topData: [
+        { name: "全部", type: "" },
+        { name: "精品图片", type: "img" },
+        { name: "三维模型", type: "model" },
+      ],
+      formData: {
+        pageNum: 1,
+        pageSize: 10,
+        searchKey: "",
+        type: "img",
+      },
+      myArr: [],
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  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);
+    },
+    // 封装获取列表函数
+    async goodList(data) {
+      const res = await goodList(data);
+      this.total = res.data.total;
+      this.myArr = res.data.records;
+      console.log(998, res);
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取服务器前缀地址
+    this.baseURL = axios.defaults.baseURL;
+    this.goodList(this.formData);
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.antique {
+  transition: width 0.3s;
+  color: #fff6d2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  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 {
+    color: #774926;
+    padding: 55px 40px 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%;
+    .close {
+      color: #cc946d;
+      font-size: 34px;
+      cursor: pointer;
+      position: absolute;
+      right: 40px;
+      top: 55px;
+    }
+    .top {
+      height: 36px;
+      display: flex;
+      align-items: center;
+      font-size: 16px;
+      .row {
+        cursor: pointer;
+        height: 36px;
+        line-height: 36px;
+        padding: 0 20px;
+        border-radius: 18px;
+        margin-right: 15px;
+        &:nth-of-type(1) {
+          pointer-events: none;
+          margin-right: 0;
+        }
+      }
+      .active {
+        background-color: #cc946d;
+        color: #fff6d2;
+      }
+      .search {
+        /deep/.el-icon-search {
+          color: #774926;
+          font-size: 20px;
+          margin-top: -1px;
+        }
+      }
+    }
+    .infoBox {
+      margin-top: 50px;
+      width: 100%;
+      height: 410px;
+      background-color: aqua;
+      .infoRow {
+        cursor: pointer;
+        overflow: hidden;
+        width: 220px;
+        height: 192px;
+        border-radius: 6px;
+        background-color: #fff;
+        & > img {
+          width: 100%;
+          height: 154px;
+          object-fit: cover;
+        }
+        & > p {
+          width: 100%;
+          height: 38px;
+          line-height: 38px;
+          font-size: 14px;
+          text-align: center;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+    }
+    .paging {
+      position: absolute;
+      bottom: 70px;
+      left: 0;
+      width: 100%;
+      display: flex;
+      justify-content: center;
+    }
+  }
+}
+.full {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <div class="hotspot" :class="{ full: smBtn }">
+    <!-- 毛玻璃 -->
+    <div class="meanPageMBL"></div>
+
+    <div class="main">
+      <h3>热点列表</h3>
+      <div class="code">
+        <img src="@/assets/img/code.png" alt="" />
+        <p>保存二维码，或点击复制链接</p>
+      </div>
+      <div class="btnn" @click="copyPcTxt">复制分享链接</div>
+      <!-- 关闭按钮 -->
+      <div class="close" @click="$emit('close')"></div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "hotspot",
+  props: {
+    smBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {};
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    //点击复制链接
+    copyPcTxt() {
+      // 存储传递过来的数据
+      let OrderNumber = "9999999999";
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement("input");
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber;
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput);
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select();
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand("Copy");
+      // 清空输入框
+      newInput.remove();
+      // 下面是element的弹窗 不需要的自行删除就好
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {},
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.hotspot {
+  transition: width 0.3s;
+  color: #fff6d2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  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;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 400px;
+    height: 550px;
+    background-image: linear-gradient(
+      rgba(204, 148, 109, 0.8),
+      rgba(119, 73, 38, 0.8)
+    );
+    & > h3 {
+      font-size: 30px;
+      text-align: center;
+    }
+    .code {
+      padding-top: 15px;
+      background-color: #fff6d2;
+      border-radius: 5px;
+      width: 260px;
+      height: 300px;
+      margin: 30px auto;
+      text-align: center;
+      & > img {
+        width: 240px;
+      }
+      & > p {
+        color: #774926;
+        margin-top: 15px;
+        font-size: 12px;
+      }
+    }
+    .btnn {
+      cursor: pointer;
+      margin: 0 auto;
+      width: 260px;
+      height: 60px;
+      border-radius: 30px;
+      border: 2px solid #fff6d2;
+      font-size: 20px;
+      color: #fff6d2;
+      text-align: center;
+      line-height: 56px;
+    }
+    .close {
+      cursor: pointer;
+      position: absolute;
+      right: -18px;
+      top: -18px;
+      width: 44px;
+      height: 44px;
+      background: url("../../../assets/img/close.png");
+      background-size: 100% 100%;
+    }
+  }
+}
+.full {
+  width: 100%;
+}
+</style>

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

@@ -0,0 +1,166 @@
+<template>
+  <div class="mapNav" :class="{ full: smBtn }">
+    <!-- 毛玻璃 -->
+    <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="smak" @click="cutScene(item.url)">
+          <div>点击<br/>浏览</div>
+        </div>
+      </div>
+    </div>
+    <!-- 关闭按钮 -->
+    <div class="close el-icon-close" @click="$emit('close')"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "mapNav",
+  props: {
+    smBtn: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {},
+  data() {
+    //这里存放数据
+    return {
+      data: [
+        { name: "-", url: "1185" },
+        { name: "-", url: "1186" },
+        { name: "-", url: "1187" },
+        { name: "-", url: "1188" },
+        { name: "临洮5000年历史文物展", url: "1189" },
+      ],
+      refer:''
+    };
+  },
+  //监听属性 类似于data概念
+  computed: {},
+  //监控data中的数据变化
+  watch: {},
+  //方法集合
+  methods: {
+    // 点击切换场景
+    cutScene(url){
+      window.location.href = window.location.origin +window.location.pathname+ `#/?m=${url}`;
+      location.reload(true);
+    }
+  },
+  //生命周期 - 创建完成（可以访问当前this实例）
+  created() {
+    // 获取当前地址栏参数
+    this.refer = window.location.hash
+  },
+  //生命周期 - 挂载完成（可以访问DOM元素）
+  mounted() {},
+  beforeCreate() {}, //生命周期 - 创建之前
+  beforeMount() {}, //生命周期 - 挂载之前
+  beforeUpdate() {}, //生命周期 - 更新之前
+  updated() {}, //生命周期 - 更新之后
+  beforeDestroy() {}, //生命周期 - 销毁之前
+  destroyed() {}, //生命周期 - 销毁完成
+  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
+};
+</script>
+<style lang='less' scoped>
+.mapNav {
+  transition: width 0.3s;
+  color: #fff6d2;
+  position: fixed;
+  top: 0;
+  left: 0;
+  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;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 1400px;
+    height: 660px;
+    display: flex;
+    justify-content: space-between;
+    .row {
+      position: relative;
+      cursor: pointer;
+      width: 230px;
+      height: 620px;
+      & > img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+      & > p {
+        height: 40px;
+        line-height: 60px;
+        text-align: center;
+        font-size: 20px;
+        color: #fff6d2;
+      }
+      .smak {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        opacity: 0;
+        transition: opacity 1s;
+        background: url("../../../assets/img/mapAc.png") rgba(116, 72, 38, 0.8);
+        background-size: 100% 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        & > div {
+          padding-top: 22px;
+          text-align: center;
+          color: #FFF6D2;
+          font-size: 20px;
+          width: 100px;
+          height: 100px;
+          background: url("../../../assets/img/mapBS.png");
+          background-size: 100% 100%;
+        }
+      }
+      &:hover {
+        .smak{
+          opacity: 1;
+        }
+      }
+    }
+    .noneAc{
+      pointer-events: none;
+    }
+  }
+  .close {
+    cursor: pointer;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    font-size: 40px;
+    color: #fff;
+  }
+}
+.full {
+  width: 100%;
+}
+</style>

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

@@ -9,7 +9,7 @@
         <img src="@/assets/img/code.png" alt="" />
         <p>保存二维码，或点击复制链接</p>
       </div>
-      <div class="btnn">复制分享链接</div>
+      <div class="btnn" @click="copyPcTxt">复制分享链接</div>
       <!-- 关闭按钮 -->
       <div class="close" @click="$emit('close')"></div>
     </div>
@@ -35,7 +35,33 @@ export default {
   //监控data中的数据变化
   watch: {},
   //方法集合
-  methods: {},
+  methods: {
+    //点击复制链接
+    copyPcTxt() {
+      // 存储传递过来的数据
+      let OrderNumber = "9999999999";
+      // 创建一个input 元素
+      // createElement() 方法通过指定名称创建一个元素
+      let newInput = document.createElement("input");
+      // 讲存储的数据赋值给input的value值
+      newInput.value = OrderNumber;
+      // appendChild() 方法向节点添加最后一个子节点。
+      document.body.appendChild(newInput);
+      // 选中input元素中的文本
+      // select() 方法用于选择该元素中的文本。
+      newInput.select();
+      // 执行浏览器复制命令
+      //  execCommand方法是执行一个对当前文档，当前选择或者给出范围的命令
+      document.execCommand("Copy");
+      // 清空输入框
+      newInput.remove();
+      // 下面是element的弹窗 不需要的自行删除就好
+      this.$message({
+        message: "复制成功",
+        type: "success",
+      });
+    },
+  },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
   //生命周期 - 挂载完成（可以访问DOM元素）

web/src/views/gui/guide.vue

@@ -1,21 +1,51 @@
 <template>
   <div id="drawer-container">
-                <div id="drawer" class="fullWidth">
-                    <div class="frame-container darkGlass">
-                        <div id="scrollFrame" class="frame">
-                            <ul id="thumb-container" class="slidee"></ul>
-                        </div>
-                        <div class="scrollbar" id="scroller">
-                            <div class="handle"></div>
-                        </div>
-                    </div>
-                </div>
-                <div id="playHead">
-                    <div id="status">
-                        <span class="curIdx">1</span>
-                        of <span class="totalSteps"></span>
-                    </div>
-                    <div id="progressBar"></div>
-                </div>
-            </div>
-</template>
+    <div id="drawer" class="fullWidth">
+      <div class="frame-container darkGlass">
+        <div id="scrollFrame" class="frame">
+          <ul id="thumb-container" class="slidee"></ul>
+        </div>
+        <div class="scrollbar" id="scroller">
+          <div class="handle"></div>
+        </div>
+      </div>
+    </div>
+    <div id="playHead">
+      <div id="status">
+        <span class="curIdx">1</span>
+        of <span class="totalSteps"></span>
+      </div>
+      <div id="progressBar" :class="{ full: pageFlag }"></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    pageFlag: {
+      type: Boolean,
+      default: false,
+    },
+  },
+};
+</script>
+<style lang="less" scoped>
+#status {
+  background-color: rgba(255, 246, 210, 0.8);
+  color: #774926;
+}
+#progressBar {
+  transition: all 0.3s;
+  width: calc(100% - 200px);
+  height: 100%;
+  display: flex;
+  align-items: center;
+  background-color: rgba(255, 246, 210, 0.8);
+}
+#playHead {
+  background-color: transparent;
+}
+.full {
+  width: 100% !important;
+}
+</style>

web/src/views/gui/menu.vue

@@ -28,9 +28,10 @@
             rel="tooltip"
             data-original-title="播放"
           >
+            <!-- 鼠标移入的显示 -->
+            <div class="hoverTit">自动导览</div>
             <a>
               <img
-                title="自动导览"
                 :src="require('@/assets/images/icon/play.png')"
                 width="24"
                 height="24"
@@ -38,6 +39,9 @@
             </a>
           </div>
           <div id="pause" class="ui-icon" style="display: none">
+            <!-- 鼠标移入的显示 -->
+            <div class="hoverTit">自动导览</div>
+
             <a>
               <img
                 rel="tooltip"
@@ -71,8 +75,11 @@
               rel="tooltip"
               title="场景导览"
             >
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">导览列表</div>
+
               <img
-                title="导览列表"
+                title=""
                 class="icon icon-inside"
                 :src="
                   require(`@/assets/images/icon/auto${
@@ -83,18 +90,18 @@
             </div>
 
             <div
-              title="全景漫游"
               data-original-title="全景漫游"
               id="gui-modes-inside"
               rel="tooltip"
             >
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">自由漫游</div>
+
               <img
-                title="自由漫游"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/inside.png')"
               />
               <img
-                title="自由漫游"
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/inside_active.png')"
               />
@@ -105,13 +112,13 @@
               id="gui-modes-dollhouse"
               rel="tooltip"
             >
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">三维视角</div>
               <img
-                title="三维视角"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/dollhouse.png')"
               />
               <img
-                title="三维视角"
                 class="icon icon-inside active"
                 :src="require('@/assets/images/icon/dollhouse_active.png')"
               />
@@ -122,13 +129,13 @@
               rel="tooltip"
               title="顶部俯视"
             >
+              <!-- 鼠标移入的显示 -->
+              <div class="hoverTit">平面视角</div>
               <img
-                title="平面视角"
                 class="icon icon-inside"
                 :src="require('@/assets/images/icon/floor.png')"
               />
               <img
-                title="平面视角"
                 class="active icon icon-inside active"
                 :src="require('@/assets/images/icon/floor_active.png')"
               />
@@ -220,12 +227,17 @@
       <!-- 左侧按钮 -->
       <img class="logo" src="@/assets/img/logo.png" alt="" />
       <div class="rowBox">
-        <div class="row" v-for="item in rightList" :key="item.id">
+        <div
+          class="row"
+          @click="meanInd = item.id"
+          v-for="item in rightList"
+          :key="item.id"
+        >
           <img
             :src="
               require(`@/assets/img/${item.img}${
                 meanInd === item.id ? 'Ac' : ''
-              }.jpg`)
+              }.png`)
             "
             alt=""
           />
@@ -234,10 +246,10 @@
       </div>
       <div class="bottBtn">
         <!-- 分享 -->
-        <div class="share" @click="shareShow = true">
+        <div class="share" @click="meanInd = -1">
           <img
             title="分享"
-            :src="require(`@/assets/img/share${shareShow ? 'Ac' : ''}.png`)"
+            :src="require(`@/assets/img/share${meanInd===-1 ? 'Ac' : ''}.png`)"
             alt=""
           />
         </div>
@@ -282,29 +294,36 @@
       </div>
     </div>
     <!-- 分享组件 -->
-    <Share v-if="shareShow" @close='shareShow=false' :smBtn='smBtn'/>
+    <Share v-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" />
+    <!-- 热点列表组件 -->
+    <Hotspot v-else-if="meanInd===3" @close="meanInd = null" :smBtn="smBtn" />
   </div>
 </template>
 
 <script>
 //引入组件
-import Share from './compomemt/share.vue'
+import Share from "./compomemt/share.vue";
+import MapNav from "./compomemt/mapNav";
+import Antique from "./compomemt/antique.vue";
+import Hotspot from "./compomemt/hotspot";
 export default {
-  components: {Share},
+  components: { Share, MapNav, Antique, Hotspot },
   data() {
     return {
       isGuide: true,
       bgmPlay: false,
       // 右侧菜单数据
       smBtn: false,
-      meanInd: 1,
+      meanInd: null,
       rightList: [
         { id: 1, name: "地图导航", img: "navigation" },
         { id: 2, name: "精品文物", img: "antique" },
         { id: 3, name: "热点列表", img: "hotspot" },
       ],
-      // 分享
-      shareShow: false,
     };
   },
   watch: {
@@ -347,7 +366,49 @@ export default {
   color: #edd3b0;
   outline: none;
 }
-
+// 鼠标移入显示的文字和图片
+#gui-modes-inside {
+  position: relative;
+}
+#gui-modes-dollhouse {
+  position: relative;
+}
+#gui-modes-floorplan {
+  position: relative;
+}
+.hoverTit {
+  pointer-events: none;
+  transition: all 0.5s;
+  opacity: 0;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  top: -40px;
+  width: 80px;
+  height: 37px;
+  line-height: 30px;
+  text-align: center;
+  background: url("../../assets/img/hoverTit.png");
+  background-size: 100% 100%;
+  font-size: 14px;
+  color: #fff6d2;
+}
+#play:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+#pause:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+#gui-modes-map > div:hover {
+  .hoverTit {
+    opacity: 1;
+  }
+}
+// -------------
 .rightMenu {
   position: fixed;
   top: 0;
@@ -356,7 +417,7 @@ export default {
   transition: all 0.3s;
   z-index: 999;
   height: 100%;
-  background-color: rgba(119,73,38,.8);
+  background-color: rgba(119, 73, 38, 0.8);
   text-align: center;
   .smBtn {
     text-align: center;
@@ -368,7 +429,7 @@ export default {
     left: -18px;
     width: 18px;
     height: 60px;
-    background-color: rgba(119,73,38,.8);
+    background-color: rgba(119, 73, 38, 0.8);
     border-radius: 5px 0 0 5px;
   }
   .logo {
@@ -390,8 +451,8 @@ export default {
       height: 30%;
       margin-bottom: 25px;
       & > img {
-        max-width: 164px;
-        max-height: 164px;
+        max-width: 140px;
+        max-height: 140px;
         object-fit: cover;
         height: calc(100% - 30px);
       }

web/src/views/gui/other.vue

@@ -65,7 +65,7 @@
             <img
               :src="require('@/assets/images/pc_step1.png')"
               class="icon"
-              title="navigation icon"
+              title="使用指南"
               data-page="1"
             />
             <div class="nav-help-button">