展品详情页面样式按照设计稿修改

code/src/components/Audio.vue

@@ -287,18 +287,35 @@ export default {
 @media screen and (max-width: 1000px) {
   .audiocon {
     width: 100%;
+    top: 43%;
+    > .audiotop {
+      .img-con {
+        margin: 0;
+        .videoTxtInfo {
+          > span {
+          }
+
+          > p {
+            display: none;
+          }
+        }
+      }
+
+      > img {
+        width: 18px;
+        cursor: pointer;
+      }
+    }
+
     .audiobtm {
-      width: 100%;
       height: 33%;
-      margin: 0 auto;
-      padding-left: 13px;
-
+      padding-left: 0;
       .barcon {
         display: flex;
-        justify-content: space-between;
+        flex-direction: column-reverse;
         align-items: center;
         width: 100%;
-        margin: 20px 0;
+        margin: 0 0 45px 0;
         .bar {
           position: relative;
           background: none;
@@ -308,7 +325,7 @@ export default {
           border-radius: 4px;
           margin: 0 10px 0 16px;
           flex: auto;
-
+          width: 84%;
           .activeLine {
             cursor: pointer;
             height: 100%;
@@ -351,7 +368,8 @@ export default {
         .time {
           width: 100px;
           text-align: center;
-          margin: 0 auto;
+          margin-top: 9px;
+          margin-bottom: 49px;
 
           > span {
             font-size: 12px;

code/src/components/mb_select/index.vue

@@ -53,7 +53,6 @@ const emit = defineEmits(['handleOption'])
 const isShow = ref(false)
 
 const onClickOutSide = (e) => {
-  console.log(e, 'e');
   isShow.value = false
 }
 

code/src/components/showCollection/index.vue

@@ -1,29 +1,31 @@
 <template>
-  <div class="wrapper">
-    <showCollection
-      @hideSlide="
-        (data) => {
-          showSidebar = data;
-        }
-      "
-      class="ui-broadcast"
-      :item="cItem"
-    ></showCollection>
+  <div
+    class="wrapper"
+    :class="{
+      mobile: isMobile,
+    }"
+  >
+    <showCollection v-if="isMobile === false" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollection>
+    <showCollectionMobile v-if="isMobile === true" @hideSlide="data=>{showSidebar = data}" class="ui-broadcast" :item="cItem"></showCollectionMobile>
   </div>
 </template>
 <script>
-import showCollection from "./showCollection";
+import showCollection from './showCollection'
+import showCollectionMobile from './showCollectionMobile'
 import { getDetailById } from "@/config/api";
+import browser from '@/utils/browser'
 
 export default {
   props: ["item"],
   components: {
     showCollection,
+    showCollectionMobile,
   },
   data() {
     return {
       cItem: { ...this.item },
       showSidebar: false,
+      isMobile: undefined,
     };
   },
   methods: {
@@ -31,15 +33,20 @@ export default {
       this.cItem = data;
     },
     getCollectionDetail() {
-      getDetailById("goods", { id: this.cItem.id }, (res) => {
+      getDetailById("goods", { id: this.item.id }, (res) => {
         console.log(res.data);
         this.cItem = res.data;
       });
     },
   },
   mounted() {
-    this.getCollectionDetail();
-  },
+    this.getCollectionDetail()
+    if (browser.isMobile()) {
+      this.isMobile = true
+    } else {
+      this.isMobile = false
+    }
+  }
 };
 </script>
 
@@ -61,4 +68,8 @@ export default {
     background: linear-gradient(#595959, #8A8A8A);
   }
 }
+
+.mobile.wrapper {
+  height: calc(100% - 60px);
+}
 </style>

code/src/components/showCollection/showCollectionMobile.vue

@@ -0,0 +1,339 @@
+<template>
+  <div v-if="cItem.entity">
+    <div class="first" v-show="!isShowDesc">
+      
+      <p  class="title" v-if="cItem.entity.type != 'audio'">
+        {{ cItem.entity.name }}
+      </p>
+
+      <template v-if="cItem.entity.type == 'img'">
+        <div class="swcon swiper-container" id="imglist">
+          <ul class="swiper-wrapper">
+            <li
+              class="swiper-slide"
+              v-for="(sub, index) in cItem.file"
+              :key="index"
+            >
+              <div class="sl-item">
+                <img :src="sub.filePath" />
+              </div>
+            </li>
+          </ul>
+        </div>
+        <template v-if="cItem.file.length > 1">
+          <img
+            class="vpagination left"
+            :src="require('@/assets/images/icon/left.png')"
+            @click="slide('slidePrev')"
+            alt=""
+          />
+          <img
+            class="vpagination right"
+            :src="require('@/assets/images/icon/right.png')"
+            @click="slide('slideNext')"
+            alt=""
+          />
+        </template>
+        <!-- <ul class="pagna" v-if="cItem.file.length > 1">
+          <li
+            v-for="(sub, i) in cItem.file"
+            :class="{ active: i == active }"
+            :key="i"
+          ></li>
+        </ul> -->
+      </template>
+
+      <template v-else>
+        <iframe
+          v-if="cItem.entity.type == 'model'"
+          :src="`/model-page/model.html?m=${cItem.entity.filePath}`"
+          frameborder="0"
+        ></iframe>
+        <video
+          ref="itemvideo"
+          controlslist="nodownload noplaybackrate"
+          :disablePictureInPicture="true"
+          v-else-if="cItem.entity.type == 'video'"
+          controls
+          :src="cItem.entity.filePath"
+          loop
+          autoplay
+        ></video>
+
+        <vAudio v-else :adata="cItem.entity"></vAudio>
+      </template>
+
+      <div class="bottom-area">
+        <img
+          class="desc"
+          src="@/assets/images/icon/desc-mobile.png"
+          @click="isShowDesc = true"
+        />
+        <img
+          class="close"
+          @click.stop="hideBroadcast"
+          :src="require(`@/assets/images/icon/close.png`)"
+        />
+      </div>
+
+    </div>
+
+    <div class="second" v-show="isShowDesc">
+      <article>
+        <h1>
+          {{item.entity.name}}
+        </h1>
+        <span class="age">
+        {{item.entity.ageName}}
+        </span>
+        &nbsp;
+        <span class="texture">
+        {{item.entity.textureName}}
+        </span>
+        <p>{{item.entity.description}}</p>
+      </article>
+      <div class="bottom-area">
+        <img
+          class="close"
+          @click="isShowDesc = false"
+          :src="require(`@/assets/images/icon/close.png`)"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+import emitter from "@/mitt/index";
+import vAudio from "@/components/Audio";
+
+export default {
+  name: "showCollection",
+  props: ["item",],
+  data() {
+    return {
+      isShowDesc: false,
+      active: 0,
+      swInstance: null,
+    };
+  },
+  components: { vAudio },
+  computed: {
+    cItem() {
+      return { ...this.item };
+    },
+  },
+  watch: {
+  },
+  methods: {
+    slide(type) {
+      this.swInstance[type]();
+    },
+    hideBroadcast() {
+      emitter.emit("closeCollection");
+    },
+  },
+  mounted() {
+    console.log('item: ', this.item);
+    let that = this;
+    this.$nextTick(() => {
+      let t = setTimeout(() => {
+        clearTimeout(t);
+        this.swInstance = new Swiper("#imglist", {
+          slidesPerView: "auto",
+          normalizeSlideIndex: false,
+          on: {
+            slideChange() {
+              that.active = this.realIndex;
+              if (this.realIndex > that.cItem.file.length - 1)
+                that.active = that.cItem.file.length - 1;
+            },
+          },
+        });
+      }, 200);
+    });
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.first {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #fff;
+  > .title {
+    position: absolute;
+    top: 33px;
+    left: 27px;
+    font-size: 18px;
+    line-height: 24px;
+    font-weight: bold;
+    width: 45%;
+    z-index: 1;
+    word-break: break-all;
+  }
+
+  > .swcon {
+    position: absolute;
+    top: 10%;
+    width: 90%;
+    height: 66%;
+    .swiper-wrapper {
+      padding: 0;
+      width: 100%;
+
+      .swiper-slide {
+        width: 100%;
+        transform-style: preserve-3d;
+        position: relative;
+        height: 100%;
+        margin: 0 auto;
+        transform: translate3d(0, 0, 0);
+
+        .sl-item {
+          width: 100%;
+          height: 90%;
+          position: relative;
+
+          > img {
+            width: auto;
+            max-height: 90vh;
+            max-width: 100%;
+            cursor: pointer;
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+          }
+        }
+      }
+    }
+  }
+
+  .vpagination {
+    position: absolute;
+    top: 33px;
+    cursor: pointer;
+    width: 40px;
+  }
+  .left {
+    right: calc(23px + 40px + 23px);
+  }
+  .right {
+    right: 23px;
+  }
+
+  .pagna {
+    position: absolute;
+    bottom: 20px;
+    left: 50%;
+    transform: translateX(-50%);
+    text-align: center;
+    z-index: 999;
+
+    > li {
+      width: 10px;
+      border-radius: 50%;
+      height: 10px;
+      background: rgba(51, 143, 123, 0.24);
+      display: inline-block;
+      margin: 0 4px;
+
+      &.active {
+        background: #338f7b;
+      }
+    }
+  }
+
+  iframe,
+  audio,
+  video {
+    position: absolute;
+    transform: translate(-50%, -50%);
+    top: 45%;
+    left: 50%;
+    width: 90%;
+    height: 66%;
+  }
+
+  audio {
+    width: 50%;
+    height: 20%;
+  }
+
+  > .bottom-area {
+    position: absolute;
+    bottom: 54px;
+    left: 50%;
+    transform: translateX(-50%);
+    .desc {
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+    .close {
+      margin-left: 29px;
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+}
+
+.second {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  color: #333;
+  > article {
+    position: absolute;
+    top: 62px;
+    left: 42px;
+    right: 42px;
+    bottom: 144px;
+    background: #FFFEF6;
+    opacity: 0.95;
+    border-radius: 4px 4px 4px 4px;
+    overflow: auto;
+    padding: 55px 28px 28px 28px;
+    word-break: break-all;
+
+    > h1 {
+      font-size: 18px;
+      font-weight: bold;
+      line-height: 24px;
+      margin-bottom: 30px;
+      width: 65%;
+    }
+    > .age {
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+    }
+    > .texture {
+      font-weight: bold;
+      font-size: 15px;
+      line-height: 30px;
+      margin-bottom: 8px;
+    }
+    p {
+      line-height: 30px;
+      font-size: 15px;
+    }
+  }
+  > .bottom-area {
+    position: absolute;
+    bottom: 54px;
+    left: 50%;
+    transform: translateX(-50%);
+    .close {
+      width: 56px;
+      height: 56px;
+      cursor: pointer;
+      z-index: 1;
+    }
+  }
+}
+</style>