|
|
@@ -11,7 +11,7 @@
|
|
|
frameborder="0"
|
|
|
class="display-3d"
|
|
|
/>
|
|
|
- <div
|
|
|
+ <!-- <div
|
|
|
v-if="dimNumber === 2"
|
|
|
v-viewer="{
|
|
|
button: true,
|
|
|
@@ -37,7 +37,48 @@
|
|
|
alt=""
|
|
|
draggable="false"
|
|
|
>
|
|
|
+ </div> -->
|
|
|
+
|
|
|
+ <div
|
|
|
+ v-if="dimNumber === 2"
|
|
|
+ class="swiper-wrapper-mine"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ class="swiper-root"
|
|
|
+ >
|
|
|
+ <div
|
|
|
+ v-viewer="{
|
|
|
+ button: true,
|
|
|
+ navbar: false,
|
|
|
+ title: false,
|
|
|
+ toolbar: false,
|
|
|
+ tooltip: false,
|
|
|
+ movable: true,
|
|
|
+ zoomable: true,
|
|
|
+ rotatable: true,
|
|
|
+ scalable: true,
|
|
|
+ transition: false,
|
|
|
+ fullscreen: false,
|
|
|
+ keyboard: true,
|
|
|
+ loop: false,
|
|
|
+ }"
|
|
|
+ class="swiper-wrapper"
|
|
|
+ >
|
|
|
+ <img
|
|
|
+ v-for="(item, index) in imageList"
|
|
|
+ :key="index"
|
|
|
+ class="swiper-slide"
|
|
|
+ :src="item"
|
|
|
+ alt=""
|
|
|
+ draggable="false"
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ <div class="swiper-pagination" />
|
|
|
+ <div class="swiper-button-prev" />
|
|
|
+ <div class="swiper-button-next" />
|
|
|
+ </div>
|
|
|
</div>
|
|
|
+
|
|
|
<div class="btn-group">
|
|
|
<button
|
|
|
@click="isShowDesc = true"
|
|
|
@@ -94,6 +135,9 @@
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
+import Swiper from 'swiper/swiper-bundle.esm.js'
|
|
|
+import 'swiper/swiper-bundle.css'
|
|
|
+
|
|
|
export default {
|
|
|
props: {
|
|
|
id: {
|
|
|
@@ -113,6 +157,21 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ new Swiper('.swiper-root', {
|
|
|
+ // If we need pagination
|
|
|
+ pagination: {
|
|
|
+ el: '.swiper-pagination',
|
|
|
+ },
|
|
|
+
|
|
|
+ // Navigation arrows
|
|
|
+ navigation: {
|
|
|
+ nextEl: '.swiper-button-next',
|
|
|
+ prevEl: '.swiper-button-prev',
|
|
|
+ },
|
|
|
+ })
|
|
|
+ })
|
|
|
+
|
|
|
this.title = this.$route.query.name
|
|
|
this.dimNumber = this.$route.query.dimNumber
|
|
|
|
|
|
@@ -185,13 +244,68 @@ export default {
|
|
|
> .photos {
|
|
|
width: 100%;
|
|
|
max-height: 60%;
|
|
|
- img {
|
|
|
+ > img {
|
|
|
width: 100%;
|
|
|
height: 100%;
|
|
|
object-fit: contain;
|
|
|
}
|
|
|
}
|
|
|
- .btn-group {
|
|
|
+ .swiper-wrapper-mine {
|
|
|
+ width: calc(100% - 1.67rem * 2 - 1.83rem * 2 - 1.67rem * 2);
|
|
|
+ height: 60%;
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ position: relative;
|
|
|
+ .swiper-root {
|
|
|
+ overflow: hidden;
|
|
|
+ height: 100%;
|
|
|
+ .swiper-wrapper {
|
|
|
+ // 用类选择器不会生效
|
|
|
+ img {
|
|
|
+ object-fit: contain;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-pagination {
|
|
|
+ top: 100%;
|
|
|
+ bottom: initial;
|
|
|
+ height: 0.42rem;
|
|
|
+ /deep/.swiper-pagination-bullet {
|
|
|
+ width: 5.34rem;
|
|
|
+ height: 0.42rem;
|
|
|
+ background-color: #999999;
|
|
|
+ margin-right: 0.79rem;
|
|
|
+ // background-color: #930909;
|
|
|
+ border-radius: initial;
|
|
|
+ }
|
|
|
+ /deep/.swiper-pagination-bullet.swiper-pagination-bullet-active {
|
|
|
+ background-color: #930909;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-prev {
|
|
|
+ left: calc(-1.67rem - 1.83rem);
|
|
|
+ width: 1.83rem;
|
|
|
+ height: 3.58rem;
|
|
|
+ background-image: url(@/assets/images/arrow-left.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .swiper-button-next {
|
|
|
+ right: calc(-1.67rem - 1.83rem);
|
|
|
+ width: 1.83rem;
|
|
|
+ height: 3.58rem;
|
|
|
+ background-image: url(@/assets/images/arrow-right.png);
|
|
|
+ background-size: contain;
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ > .btn-group {
|
|
|
flex: 0 0 auto;
|
|
|
> button {
|
|
|
width: 6.25rem;
|
任一存
