布展默认主题、中国风主题的适配调整

src/components/EntranceIcon/index.vue

@@ -51,8 +51,8 @@ export default {
     height: 2px;
     transform: rotate(45deg);
     position: absolute;
-    right: -3px;
-    top: -5px;
+    right: -2px;
+    top: -3px;
   }
 }
 </style>

src/views/culturalRelic/index.vue

@@ -12,7 +12,7 @@
           <el-input
             class="input item"
             v-model="keyword"
-                placeholder="关键词"
+            placeholder="请输入关键词"
             @keyup.enter.native="search"
             clearable
           >
@@ -23,7 +23,7 @@
           <el-select
             class="type item"
             v-model="type"
-                placeholder="所属类别"
+            placeholder="请选择所属类别"
             filterable
             @change="handleTypeChange"
             clearable
@@ -67,7 +67,7 @@
             <svg-icon
               :icon-class="onlyShow3d ? 'filter-s' : 'filter'"
             ></svg-icon>
-              <div class="text">3D</div>
+            <div class="text">3D文物</div>
           </el-col>
           <!-- </el-row> -->
         </div>
@@ -148,7 +148,7 @@
                       <span>{{ item.deptName }}</span>
                     </div>
                   </div>
-                  <div class="right">
+                  <!-- <div class="right">
                     <span class="collect">
                       <svg-icon icon-class="collect"></svg-icon>
                       <span>{{
@@ -159,7 +159,7 @@
                       <svg-icon icon-class="view"></svg-icon>
                       <span>{{ item.browseCount }}</span>
                     </span>
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -337,6 +337,10 @@ $text-indent: 16px;
       height: 214px;
       .item {
         margin-right: 20px;
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
       }
       .input-icon {
         height: 100%;
@@ -349,23 +353,18 @@ $text-indent: 16px;
       .threeD {
         display: flex;
         cursor: pointer;
-        font-size: 18px;
+        font-size: 20px;
         color: #666;
         margin-left: 20px;
-        transition: all ease .5s;
-        .svg-icon{
+        transition: all ease 0.3s;
+        // -webkit-box-reflect: below 10px linear-gradient(transparent, rgba(0, 0, 0, 0.4));
+        .svg-icon {
           margin-right: 4px;
-          font-size: 20px;
+          font-size: 24px;
         }
-        &:hover{
-          text-shadow: 0 0 5px #fff,
-                     0 0 10px #fff,
-                     0 0 15px #fff,
-                     0 0 20px #2069c4,
-                     0 0 35px #2069c4,
-                     0 0 40px #2069c4,
-                     0 0 50px #2069c4,
-                     0 0 75px #2069c4;
+        &:hover {
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.5));
         }
         // .box {
         //   width: 28px;
@@ -393,10 +392,16 @@ $text-indent: 16px;
         display: flex;
         justify-content: center;
         align-items: center;
-        background: url("@/assets/imgs/list/search-button-bg.png");
+        background: url("@/assets/imgs/list/search-button-bg.png") transparent;
         background-size: 100% 100%;
         color: #444;
         font-size: 14px;
+        transition: all 0.2s ease;
+
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
         .svg-icon {
           margin-right: 4px;
         }

src/views/display/components/BlueStyle.vue

@@ -21,6 +21,7 @@
       ></el-image>
     </div>
     <div class="wrapper wow animate__animated animate__fadeInUpBig">
+      <div class="inner">
         <!-- 展览基本信息 -->
         <div class="content-item display-detail_basic_info">
           <div class="info-container">
@@ -31,22 +32,6 @@
                 animate__animated animate__fadeInLeft
               "
             >
-            <!-- <swiper :options="swiperOption" ref="mySwiper">
-              <swiper-slide
-                v-for="(item, index) in displayDetail.imagesVo"
-                :key="index"
-              >
-                <div
-                  class="img-container"
-                  @click="handelPreviewImages(displayDetail.imagesVo)"
-                >
-                  <img :src="item.url" alt="" srcset="" />
-                </div>
-              </swiper-slide>
-              <div class="swiper-pagination" slot="pagination"></div>
-              <div class="swiper-button-prev" slot="button-prev"></div>
-              <div class="swiper-button-next" slot="button-next"></div>
-            </swiper> -->
               <el-carousel>
                 <el-carousel-item
                   v-for="(item, index) in displayDetail.imagesVo"
@@ -219,7 +204,11 @@
           </div>
           <div class="unit-container">
             <div
-            class="unit-content-menu wow animate__animated animate__fadeInLeft"
+              class="
+                unit-content-menu
+                wow
+                animate__animated animate__fadeInLeft
+              "
             >
               <!-- 只能单开 unique-opened -->
               <menu-list
@@ -229,7 +218,9 @@
                 style="height: 100%"
               ></menu-list>
             </div>
-          <div class="unit-content wow animate__animated animate__fadeInRight">
+            <div
+              class="unit-content wow animate__animated animate__fadeInRight"
+            >
               <div
                 class="text-indent unit-content_intro"
                 v-if="curUnit.intro"
@@ -326,7 +317,10 @@
                 class="img-container wow animate__animated animate__fadeInUp"
                 @click="handleToCr(item)"
               >
-              <img :src="item.faceImagePressUrl || item.faceImageUrl" alt="" />
+                <img
+                  :src="item.faceImagePressUrl || item.faceImageUrl"
+                  alt=""
+                />
                 <div class="cr-name-intro" v-if="index == 0">
                   <div class="cr-name">{{ item.name }}</div>
                   <div class="cr-intro">{{ item.intro }}</div>
@@ -405,6 +399,7 @@
           </div>
         </div>
       </div>
+    </div>
     <el-image-viewer
       v-if="imgViewerVisible"
       :on-close="closeImgViewer"
@@ -523,7 +518,7 @@ export default {
           this.displayDetail.audiosVo &&
           this.displayDetail.audiosVo.length > 0
         ) {
-          // this.$message.info("正在播放当前文物讲解音频，点击按钮可关闭");
+          this.$message.info("正在播放当前文物讲解音频，点击旋转按钮可关闭");
           this.$refs.AudioPlayer.play();
         }
       });
@@ -721,7 +716,12 @@ export default {
     }
   }
   .wrapper {
-    width: 1200px;
+    // width: 1200px;
+    padding: 0 13%;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    .inner {
       box-shadow: 0px 1px 56px 4px rgba(0, 0, 0, 0.16);
       display: flex;
       flex-direction: column;
@@ -784,7 +784,7 @@ export default {
                 .label {
                   display: flex;
                   align-items: center;
-                width: 120px;
+                  width: 140px;
                   margin-right: 26px;
                   margin-bottom: 10px;
                   font-weight: bold;
@@ -838,7 +838,7 @@ export default {
         }
         .audio {
           position: absolute;
-        right: -100px;
+          right: -120px;
           top: 34px;
           cursor: pointer;
           animation: audioRotate 8s linear infinite;
@@ -899,7 +899,7 @@ export default {
         overflow-x: hidden;
 
         .unit-container {
-        height: 100%;
+          // height: 100%;
           margin-bottom: 40px;
           display: flex;
         }
@@ -1027,6 +1027,7 @@ export default {
         }
       }
     }
+  }
 }
 ::v-deep .el-carousel__item--card {
   width: 100%;

src/views/display/components/ChStyle-unit.vue

@@ -163,6 +163,7 @@ export default {
       }
       .unit-node {
         width: 1200px;
+        // width: calc(100vw - 26%);
         height: 550px;
         display: flex;
         overflow: hidden;
@@ -196,7 +197,7 @@ export default {
             position: absolute;
             top: 200px;
             height: 70%;
-            padding: 0 20px;
+            padding: 0 80px;
           }
         }
       }

src/views/display/components/ChStyle.vue

@@ -463,7 +463,8 @@ export default {
 // 中国风主题样式
 /**公共样式开始 */
 .wrapper {
-  width: 1200px;
+  // width: 1200px;
+  width: calc(100% - 26%); //左右两边各自留13%
 }
 .custom-title {
   display: flex;
@@ -546,6 +547,7 @@ export default {
           filter: drop-shadow(2px 4px 6px #f8f8f8);
           img {
             transform: translateX(-10px);
+            width: 1230px;
           }
         }
         .left-layer,
@@ -609,7 +611,7 @@ export default {
             }
           }
           .tools {
-            width: 230px;
+            width: 280px;
           }
         }
 
@@ -661,7 +663,7 @@ export default {
 
         .audio {
           position: absolute;
-          right: -100px;
+          right: -120px;
           top: 34px;
           cursor: pointer;
           animation: audioRotate 8s linear infinite;

src/views/display/index.vue

@@ -8,7 +8,7 @@
           <el-input
             class="input item"
             v-model="keyword"
-            placeholder="关键词"
+            placeholder="请输入关键词"
             @keyup.enter.native="search"
             clearable
           >
@@ -19,7 +19,7 @@
           <el-select
             class="type item"
             v-model="type"
-            placeholder="所属类别"
+            placeholder="请选择所属类别"
             filterable
             @change="handleTypeChange"
             clearable
@@ -124,7 +124,7 @@
                       <span>{{ item.deptName }}</span>
                     </div>
                   </div>
-                  <div class="right">
+                  <!-- <div class="right">
                     <span class="collect">
                       <svg-icon icon-class="collect"></svg-icon>
                       <span>{{
@@ -135,7 +135,7 @@
                       <svg-icon icon-class="view"></svg-icon>
                       <span>{{ item.browseCount }}</span>
                     </span>
-                  </div>
+                  </div> -->
                 </div>
               </div>
             </div>
@@ -320,6 +320,10 @@ $text-indent: 16px;
       padding: 90px 70px 80px;
       .item {
         margin-right: 20px;
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
       }
       .input-icon {
         height: 100%;
@@ -342,6 +346,10 @@ $text-indent: 16px;
         font-size: 14px;
         width: 156px;
         height: 40px;
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
         // height: 100%;
         .svg-icon {
           margin-right: 4px;

src/views/home/components/Virtural.vue

@@ -109,7 +109,7 @@ $blue: #2069c4;
       .intro {
         font-family: "Alibaba PuHuiTi";
         color: #ffffff;
-        margin-top: 74px;
+        margin-top: 110px;
         .name {
           margin-bottom: 27px;
           font-size: 20px;

src/views/home/index-manual.vue

-<template>
-  <div id="wrap" :style="{ height: screenHeight + 'px' }">
-    <div id="main" :style="{ top: nowTop + 'px' }">
-      <ul
-        id="pageUl"
-        type="circle"
-        v-for="(item, index) in buttons"
-        :key="index"
-      >
-        <li :id="item" :class="{ item, active: curIndex == index + 1 }">
-          &nbsp;
-        </li>
-      </ul>
-      <div id="page1" class="page">
-        <!-- <NavBar :class="[curIndex != 1 ? 'navBarFixed' : 'navBar']" /> -->
-        <NavBar class='navBar'/>
-        <Boutique class="home-item" ref="Boutique" />
-      </div>
-      <div id="page2" class="page">
-        <Virtural class="home-item" ref="Virtural" />
-      </div>
-      <div id="page3" class="page">
-        <CulturalRelic class="home-item" ref="CulturalRelic" />
-      </div>
-      <div id="page4" class="page">
-        <Display class="home-item" ref="Display" />
-      </div>
-      <div id="page5" class="page">
-        <MuseumMap class="home-item" ref="MuseumMap" />
-      </div>
-      <!-- <div id="page6" class="page">
-        <Footer />
-      </div> -->
-      <div class="down-arrow">
-        <img src="@/assets/imgs/home/down.png" alt="" />
-      </div>
-    </div>
-  </div>
-</template>
- 
-<script>
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
-import Boutique from "./components/Boutique.vue";
-import MuseumMap from "./components/MuseumMap.vue";
-import Virtural from "./components/Virtural.vue";
-import Display from "./components/Display.vue";
-import CulturalRelic from "./components/CulturalRelic.vue";
-export default {
-  components: {
-    NavBar,
-    Footer,
-    MuseumMap,
-    Boutique,
-    Virtural,
-    Display,
-    CulturalRelic,
-  },
-  name: "Home",
-  data() {
-    return {
-      screenWeight: 0, // 屏幕宽度
-      screenHeight: 0, // 屏幕高度
-      index: 1, // 用于判断翻页
-      curIndex: 1, // 当前页的index
-      startTime: 0, // 翻屏起始时间
-      endTime: 0, // 上一次翻屏结束时间
-      nowTop: 0, // 翻屏后top的位置
-      pageNum: 0, // 一共有多少页
-      main: Object,
-      obj: Object,
-      buttons: [
-        "pageUlLi1",
-        "pageUlLi2",
-        "pageUlLi3",
-        "pageUlLi4",
-        "pageUlLi5",
-      ],
-      navBarFixed: false,
-    };
-  },
-  mounted() {
-    this.screenWeight = document.documentElement.clientWidth;
-    this.screenHeight = document.documentElement.clientHeight;
-    this.main = document.getElementById("main");
-    this.obj = document.getElementsByTagName("div");
-    for (let i = 0; i < this.obj.length; i++) {
-      if (this.obj[i].className == "page") {
-        this.obj[i].style.height = this.screenHeight + "px";
-      }
-    }
-    this.pageNum = document.querySelectorAll(".page").length;
-
-    // 浏览器兼容
-    if (navigator.userAgent.toLowerCase().indexOf("firefox") != -1) {
-      document.addEventListener("DOMMouseScroll", this.scrollFun, false);
-    } else if (document.addEventListener) {
-      document.addEventListener("mousewheel", this.scrollFun, false);
-    } else if (document.attachEvent) {
-      document.attachEvent("onmousewheel", this.scrollFun);
-    } else {
-      document.onmousewheel = this.scrollFun;
-    }
-  },
-  methods: {
-    scrollFun(event) {
-      this.startTime = new Date().getTime();
-      // mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
-      // DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
-      let delta = event.detail || -event.wheelDelta;
-      // 如果当前滚动开始时间和上次滚动结束时间的差值小于1.5s，则不执行翻页动作，这样做是为了实现类似节流的效果
-      if (this.startTime - this.endTime > 1000) {
-        if (
-          delta > 0 &&
-          parseInt(this.main.offsetTop) >=
-            -(this.screenHeight * (this.pageNum - 2))
-        ) {
-          // 向下滚动
-          this.index++;
-          this.toPage(this.index);
-        } else if (delta < 0 && parseInt(this.main.offsetTop) < 0) {
-          // 向上滚动
-          this.index--;
-          this.toPage(this.index);
-        }
-        // 本次翻页结束，记录结束时间，用于下次判断
-        this.endTime = new Date().getTime();
-      }
-    },
-    // 翻页
-    toPage(index) {
-      if (index != this.curIndex) {
-        let delta = index - this.curIndex;
-        this.nowTop = this.nowTop - delta * this.screenHeight;
-        this.curIndex = index;
-      }
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-html,
-body {
-  height: 100%;
-}
-
-body,
-ul,
-li,
-a,
-p,
-div {
-  /*慎删*/
-  padding: 0px;
-  margin: 0px;
-}
-
-#wrap {
-  overflow: hidden;
-  width: 100%;
-}
-
-#main {
-  position: relative;
-  transition: top 1.5s;
-}
-
-.page {
-  /*谨删*/
-  width: 100%;
-  margin: 0;
-}
-
-#pageUl {
-  position: fixed;
-  right: 10px;
-  bottom: 50%;
-}
-
-.active {
-  color: red;
-}
-
-#page1 {
-  position: relative;
-  flex-direction: column;
-  .navBar {
-    position: absolute;
-    top: 0;
-    background: rgba(0, 0, 0, 0.25); // left: 0;
-    transition: all 1s ease;
-  }
-  .navBarFixed {
-    position: fixed;
-    top: 0;
-    z-index: 999;
-    background: #2069c4;
-    transition: all 1s ease;
-  }
-}
-.home-item {
-  height: 100%;
-}
-.down-arrow {
-  position: fixed;
-  bottom: 20px;
-  left: 0;
-  right: 0;
-  display: flex;
-  justify-content: center;
-  animation: arrowBounce 2s infinite;
-  z-index: 999;
-}
-
-@keyframes arrowBounce {
-  0%,
-  20%,
-  50%,
-  80%,
-  100% {
-    transform: translateY(0);
-  }
-  40% {
-    transform: translateY(-30px);
-  }
-  60% {
-    transform: translateY(-15px);
-  }
-}
-</style>
\ No newline at end of file

src/views/home/index-swiper.vue

-<template>
-  <div>
-    
-    <swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
-      <swiper-slide class="swiper-slide">
-        <NavBar class="NavBar"/>
-        <Boutique class="home-item" ref="Boutique" />
-      </swiper-slide>
-      <swiper-slide class="swiper-slide">
-        <Virtural class="home-item" ref="Virtural" />
-      </swiper-slide>
-      <swiper-slide class="swiper-slide">
-        <CulturalRelic class="home-item" ref="CulturalRelic" />
-      </swiper-slide>
-      <swiper-slide class="swiper-slide">
-        <Display class="home-item" ref="Display" />
-      </swiper-slide>
-      <swiper-slide class="swiper-slide">
-        <MuseumMap class="home-item" ref="MuseumMap" />
-      </swiper-slide>
-      <div class="swiper-pagination" slot="pagination"></div>
-    </swiper>
-    <Footer/>
-  </div>
-</template>
- 
-<script>
-import NavBar from "@/components/NavBar";
-import Footer from "@/components/Footer";
-import Boutique from "./components/Boutique.vue";
-import MuseumMap from "./components/MuseumMap.vue";
-import Virtural from "./components/Virtural.vue";
-import Display from "./components/Display.vue";
-import CulturalRelic from "./components/CulturalRelic.vue";
-import { swiper, swiperSlide } from "vue-awesome-swiper";
-export default {
-  components: {
-    NavBar,
-    Footer,
-    swiper,
-    swiperSlide,
-    MuseumMap,
-    Boutique,
-    Virtural,
-    Display,
-    CulturalRelic,
-  },
-  name: "Home",
-  data() {
-    return {
-      list: [1, 2, 3, 4],
-      swiperOption: {
-        notNextTick: true, //notNextTick是一个组件自有属性，如果notNextTick设置为true，组件则不会通过NextTick来实例化swiper，也就意味着你可以在第一时间获取到swiper对象，假如你需要刚加载遍使用获取swiper对象来做什么事，那么这个属性一定要是true
-        direction: "vertical", //垂直方向移动
-        grabCursor: true, //鼠标覆盖Swiper时指针会变成手掌形状，拖动时指针会变成抓手形状
-        setWrapperSize: true, //Swiper使用flexbox布局(display: flex)，开启这个设定会在Wrapper上添加等于slides相加的宽或高，在对flexbox布局的支持不是很好的浏览器中可能需要用到。
-        autoHeight: true, //自动高度。设置为true时，wrapper和container会随着当前slide的高度而发生变化
-        slidesPerView: 1, //设置slider容器能够同时显示的slides数量(carousel模式)。可以设置为数字（可为小数，小数不可loop），或者 'auto'则自动根据slides的宽度来设定数量。loop模式下如果设置为'auto'还需要设置另外一个参数loopedSlides。
-        mousewheel: true, //开启鼠标滚轮控制Swiper切换。可设置鼠标选项，默认值false
-        mousewheelControl: true, //同上
-        height: window.innerHeight, // 高度设置，占满设备高度
-        resistanceRatio: 0, //抵抗率。边缘抵抗力的大小比例。值越小抵抗越大越难将slide拖离边缘，0时完全无法拖离。本业务需要
-        observeParents: true, //将observe应用于Swiper的父元素。当Swiper的父元素变化时，例如window.resize，Swiper更新
-        // 分页器
-        pagination: {
-          el: ".swiper-pagination",
-          bulletClass: "my-bullet", //自定义分页器样式
-          bulletActiveClass: "my-bullet-active", //自定义当前选中样式
-          clickable: true, //点击切换轮播
-        },
-      },
-    };
-  },
-
-  computed: {
-    swiper() {
-      return this.$refs.mySwiper.swiper;
-    },
-  },
-};
-</script>
-<style lang="scss" scoped>
-.my-bullet {
-  display: block;
-  width: 11px;
-  height: 11px;
-  background: rgba(255, 255, 255, 0.5);
-  border-radius: 50%;
-  margin: 10px 0;
-}
-.my-bullet-active {
-  width: 11px;
-  height: 25px;
-  background: #fff;
-  border-radius: 20px;
-  margin: 10px 0;
-}
-
-.home-item {
-  height: 100vh;
-  width: 100%;
-}
-  .navBar {
-    position: absolute;
-    top: 0;
-    background: rgba(0, 0, 0, 0.25); // left: 0;
-    transition: all 1s ease;
-  }
-</style>
\ No newline at end of file

src/views/museum/index.vue

@@ -9,7 +9,7 @@
             class="input item"
             suffix-icon="el-icon-search"
             v-model="keyword"
-            placeholder="关键词"
+            placeholder="请输入关键词"
             @keyup.enter.native="search"
             clearable
           >

src/views/virtual/index.vue

@@ -7,7 +7,7 @@
           <el-input
             class="input item"
             v-model="keyword"
-            placeholder="关键词"
+            placeholder="请输入关键词"
             @keyup.enter.native="search"
             clearable
           >
@@ -286,6 +286,10 @@ $text-indent: 16px;
       margin-bottom: 63px;
       .item {
         margin-right: 20px;
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
       }
       .input-icon {
         height: 100%;
@@ -307,6 +311,10 @@ $text-indent: 16px;
         background-size: 100% 100%;
         color: #444;
         font-size: 14px;
+        &:hover{
+          -webkit-box-reflect: below 2px
+            linear-gradient(transparent, rgba(0, 0, 0, 0.3));
+        }
         .svg-icon {
           margin-right: 4px;
         }