文物页、首页、精品展首屏布局修改

src/components/ReaderOperations/like.vue

@@ -2,13 +2,21 @@
     <span>
       <span class="operations">
         <span class="operation-item">
-          <svg-icon
+          <!-- <svg-icon
             @click="handleLike"
             :icon-class="loveCountStatus ? 'like-s' : 'like'"
             :style="{
               fontSize: iconSize + 'px',
               color: loveCountStatus ? selectColor : '#61666d',
             }"
+          ></svg-icon> -->
+          <svg-icon
+            @click="handleLike"
+            :icon-class="loveCountStatus ? 'like-s' : 'like'"
+            :style="{
+              fontSize: iconSize + 'px',
+              color: loveCountStatus ? selectColor : '#ddd',
+            }"
           ></svg-icon>
           <span>{{
             formatNum(loveCount) == 0 ? "点赞" : formatNum(loveCount)

src/components/SlideImage/slider.vue

+<template>
+  <div class="card-slider">
+    <div class="swiper">
+      <swiper
+        class="swiper gallery-top"
+        :options="swiperOptionTop"
+        ref="swiperTop"
+      >
+        <swiper-slide
+          class="slide-item"
+          v-for="(item, index) in imgList"
+          :key="index"
+        >
+          <img :src="item.pressUrl" alt="" />
+          <!-- <div class="enlarge" @click="handelPreviewImages(imgList)">
+            <img src="@/assets/imgs/enlarge-s.png" alt="" />
+          </div> -->
+        </swiper-slide>
+      </swiper>
+    </div>
+
+    <!-- <el-image-viewer
+      v-if="imgViewerVisible"
+      :on-close="closeImgViewer"
+      :url-list="previewList"
+    /> -->
+  </div>
+</template>
+
+<script>
+import { swiper, swiperSlide } from "vue-awesome-swiper";
+import "swiper/dist/css/swiper.css";
+export default {
+  name: "SlideImage",
+  components: {
+    swiper,
+    swiperSlide,
+    /* "el-image-viewer": () =>
+      import("element-ui/packages/image/src/image-viewer"), */
+  },
+  props: {
+    imgKey: {
+      type: String,
+      default: "pressUrl",
+    },
+    imgList: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      swiperOptionTop: {
+        loop: true,
+        loopedSlides: 8, // looped slides should be the same
+        spaceBetween: 10,
+        navigation: {
+          nextEl: ".swiper-button-next",
+          prevEl: ".swiper-button-prev",
+        },
+      },
+      imgViewerVisible: false,
+    };
+  },
+  /* mounted() {
+    this.$nextTick(() => {
+      const swiperTop = this.$refs.swiperTop.swiper;
+      const swiperThumbs = this.$refs.swiperThumbs.swiper;
+      swiperTop.controller.control = swiperThumbs;
+      swiperThumbs.controller.control = swiperTop;
+    });
+  }, */
+  methods: {
+    handelPreviewImages(items) {
+      this.imgViewerVisible = true;
+      this.previewList = items.map((item) => this.$getFullUrl(item.url));
+    },
+    closeImgViewer() {
+      this.imgViewerVisible = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.card-slider {
+  width: 100%;
+  height: 100%;
+  .slide-item {
+    background: transparent;
+    position: relative;
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: contain;
+    }
+  }
+}
+</style>

src/views/boutique/index.vue

@@ -10,7 +10,7 @@
         </li>
       </ul>
     </div> -->
-    <ul class="fixed-tabs">
+    <!-- <ul class="fixed-tabs">
       <li v-for="node in tabs" :key="node.tab" @click="handleTabClick(node)">
         <div class="tab-container">
           <img
@@ -22,7 +22,10 @@
           <span class="name">{{ node.name }}</span>
         </div>
       </li>
-    </ul>
+    </ul> -->
+    <div class="boutique-tabs">
+      <m-tabs></m-tabs>
+    </div>
 
     <div class="boutique-content" ref="boutiqueContent">
       <div class="focus-content" v-if="activeTab">
@@ -48,6 +51,7 @@
 </template>
 
 <script>
+import mTabs from '@/views/home/components/Boutique.vue'
 import NavBar from "@/components/NavBar";
 import Footer from "@/components/Footer";
 import SMGZ from "./components/SMGZ";
@@ -55,7 +59,7 @@ import SMGZ from "./components/SMGZ";
 import { mapGetters } from "vuex";
 export default {
   name: "Boutique",
-  components: { NavBar, Footer, SMGZ },
+  components: { NavBar, Footer, SMGZ, mTabs },
   data() {
     return {
       tabs: [
@@ -141,6 +145,10 @@ export default {
   //     object-fit: cover;
   //   }
   // }
+  .boutique-tabs {
+    width: 100%;
+    height: 100vh;
+  }
   .fixed-tabs {
     position: fixed;
     left: 0;
@@ -149,6 +157,7 @@ export default {
     height: calc(100vh - 100px);
     display: flex;
     flex-direction: column;
+    display: none;
     li {
       flex: 1;
       position: relative;

src/views/home/components/Boutique.vue

@@ -42,7 +42,7 @@
 </template>
 
 <script>
-import mSmgz from "./topic/smgz.vue"
+import mSmgz from "./topic/smgz2.vue"
 import mJyycc from './topic/jyycc.vue'
 import mYlgdyw from './topic/ylgdyw.vue'
 import mSdcs from './topic/sdcs.vue'

src/views/home/components/banner.vue

+<template>
+  <div class="boutique">
+    <div class="banner">
+      <img src="@/assets/imgs/banner.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.boutique {
+  .banner {
+    width: 100%;
+    height: 100%;
+    > img {
+      width: 100%;
+    }
+  }
+}
+</style>

src/views/home/components/swiper.vue

@@ -15,7 +15,7 @@
 </template>
 
 <script>
-import pic0 from "@/assets/imgs/boutique/1.jpg";
+import pic0 from "@/assets/imgs/topic/smgz/dzbwg.png";
 import pic1 from "@/assets/imgs/topic/jyycc/jyycc.jpg";
 import pic2 from "@/assets/imgs/topic/ylgdyw/ylgdyw.png";
 import pic3 from "@/assets/imgs/topic/sdcs/sdcs.png";

src/views/home/components/topic/smgz2.vue

+<template>
+  <div class="m-smgz">
+    <div class="banner">
+      <img src="@/assets/imgs/topic/smgz/dzbwg.png" alt="" />
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style lang="scss" scoped>
+.m-smgz {
+  .banner {
+    width: 100%;
+    height: 100%;
+    > img {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+</style>

src/views/home/index.vue

@@ -12,7 +12,8 @@
 </template>
 
 <script>
-import Boutique from "./components/Boutique.vue";
+// import Boutique from "./components/Boutique.vue";
+import Boutique from './components/banner.vue'
 import MuseumMap from "./components/MuseumMap.vue";
 import Virtural from "./components/Virtural.vue";
 import Display from "./components/Display.vue";