From 08e9a67dd679f311e79a27b04cd0c53a30b4bccf Mon Sep 17 00:00:00 2001
From: doum <doum>
Date: 星期四, 04 六月 2026 18:33:22 +0800
Subject: [PATCH] aaa
---
h5/components/bigImg.vue | 129 ++++++++++++++++++++++++------------------
1 files changed, 73 insertions(+), 56 deletions(-)
diff --git a/h5/components/bigImg.vue b/h5/components/bigImg.vue
index 2cf1eef..ec5c66c 100644
--- a/h5/components/bigImg.vue
+++ b/h5/components/bigImg.vue
@@ -1,21 +1,39 @@
<template>
- <view class="img" :style="{ opacity: opacity, zIndex: zindex }">
- <view class="img_content">
+ <view class="img" :class="{ 'img--open': opacity === 1 }" :style="{ opacity: opacity, zIndex: zindex }" @click="close">
+ <view class="img_content" @click.stop>
<view class="img_content_tu">
- <image class="left" src="@/static/ic_left@2x.png" mode="widthFix" @click="jian"></image>
+ <image
+ v-if="imgList.length > 1"
+ class="arrow"
+ src="@/static/ic_left@2x.png"
+ mode="widthFix"
+ @click="prev"></image>
<view class="img_content_tu_nr">
- <swiper style="width: 100%; height: 100%;" @change="handlechange" :current="mycurrent" :indicator-dots="false" :circular="true" :interval="1000" :duration="1000">
- <swiper-item v-for="(item,index) in imgList" :key="index">
- <view :class="['swiper-item',index == mycurrent ? 'active' : '']">
- <image :src="item" style="width: 150%;height: 150%;" mode="aspectFit" />
+ <swiper
+ style="width: 100%; height: 100%;"
+ @change="handlechange"
+ :current="mycurrent"
+ :indicator-dots="imgList.length > 1"
+ indicator-color="rgba(255,255,255,0.35)"
+ indicator-active-color="#ffffff"
+ :circular="imgList.length > 1"
+ :duration="300">
+ <swiper-item v-for="(item, index) in imgList" :key="index">
+ <view class="swiper-item">
+ <image :src="item" class="preview-image" mode="aspectFit" />
</view>
</swiper-item>
</swiper>
</view>
- <image class="right" src="@/static/ic_right@2x.png" mode="widthFix" @click="add"></image>
+ <image
+ v-if="imgList.length > 1"
+ class="arrow"
+ src="@/static/ic_right@2x.png"
+ mode="widthFix"
+ @click="next"></image>
</view>
- <view class="img_content_close">
- <image src="@/static/ic_close@2x.png" mode="widthFix" @click="close"></image>
+ <view class="img_content_close" @click="close">
+ <image src="@/static/ic_close@2x.png" mode="widthFix"></image>
</view>
</view>
</view>
@@ -37,20 +55,20 @@
}
},
methods: {
- add() {
- if (this.imgList.length - 1 === this.mycurrent) return
- this.mycurrent++
+ next() {
+ if (this.imgList.length <= 1) return
+ this.mycurrent = (this.mycurrent + 1) % this.imgList.length
},
- jian() {
- if (this.mycurrent === 0) return
- this.mycurrent--
+ prev() {
+ if (this.imgList.length <= 1) return
+ this.mycurrent = (this.mycurrent - 1 + this.imgList.length) % this.imgList.length
},
- handlechange(e){
- this.mycurrent=e.detail.current
+ handlechange(e) {
+ this.mycurrent = e.detail.current
},
open(i) {
- this.mycurrent = i
- this.zindex = 3
+ this.mycurrent = i || 0
+ this.zindex = 9999
this.opacity = 1
},
close() {
@@ -65,77 +83,76 @@
.img {
width: 100vw;
height: 100vh;
- background: rgba(0,0,0,0.4);
+ background: rgba(0, 0, 0, 0.65);
position: fixed;
- transition: .2s;
+ transition: opacity 0.2s;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
-
+ pointer-events: none;
+
+ &.img--open {
+ pointer-events: auto;
+ }
+
.img_content {
display: flex;
flex-direction: column;
+ pointer-events: auto;
+
.img_content_tu {
display: flex;
align-items: center;
+
.img_content_tu_nr {
width: 600px;
height: 600px;
- padding: 30px;
+ padding: 24px;
box-sizing: border-box;
- background: rgba(255,255,255,0.9);
+ background: rgba(255, 255, 255, 0.95);
border-radius: 8px;
- margin: 0 32px;
+ margin: 0 24px;
display: flex;
align-items: center;
- flex-wrap: nowrap;
- .swiper-item{
+ justify-content: center;
+
+ .swiper-item {
width: 100%;
- border-radius: 30rpx;
- overflow: hidden;
- // 鍍忚繖绉嶅寮犺疆鎾浘鍚屾椂鍑虹幇鍦ㄤ竴灞忕殑鎯呭喌涓嬪氨涓嶈鎸囧畾width浜嗭紝涓嶇劧浣犱細鍙戠幇previous-margin鍜� next-margin浼氬嚭鐜版兂涓嶅埌鐨勬晥鏋�
- // 濡傛灉鎯宠璁剧疆瀹芥瘡涓�寮犺疆鎾浘鐨勫搴︼紝鍙渶瑕佽缃畃revious-margin鍜宯ext-margin灏卞彲浠ヤ簡锛屾兂瑕佽缃珮搴︾洿鎺ユ敼涓嬮潰鐨刪eight灏卞彲浠ヤ簡
- // width: 450rpx;
height: 100%;
- // transform: scale(1);
- // transition: all 0.5s ease;
- text-align: center;
- // transition: all 0.5s ease-in-out;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
- .img_content_tu_nr_item {
+
+ .preview-image {
width: 100%;
- height: 600px;
- image {
- width: 100%;
- height: 100%;
- }
+ height: 100%;
}
}
- .left {
- width: 80px;
- height: 80px;
- cursor: pointer;
- }
- .right {
- width: 80px;
- height: 80px;
+
+ .arrow {
+ width: 64px;
+ height: 64px;
+ flex-shrink: 0;
cursor: pointer;
}
}
+
.img_content_close {
width: 100%;
display: flex;
align-items: center;
justify-content: center;
- margin-top: 40px;
+ margin-top: 32px;
+ cursor: pointer;
+
image {
- width: 60px;
- height: 60px;
- cursor: pointer;
+ width: 56px;
+ height: 56px;
}
}
}
}
-</style>
\ No newline at end of file
+</style>
--
Gitblit v1.9.3