From 4f912f23e61912cb3195ca168f23bb521bf8b309 Mon Sep 17 00:00:00 2001
From: Mr.Shi <1878285526@qq.com>
Date: 星期四, 21 九月 2023 13:37:16 +0800
Subject: [PATCH] 企业端
---
h5/components/bigImg1.vue | 140 ++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 140 insertions(+), 0 deletions(-)
diff --git a/h5/components/bigImg1.vue b/h5/components/bigImg1.vue
new file mode 100644
index 0000000..404f165
--- /dev/null
+++ b/h5/components/bigImg1.vue
@@ -0,0 +1,140 @@
+<template>
+ <view class="img" :style="{ opacity: opacity, zIndex: zindex }">
+ <view class="img_content">
+ <view class="img_content_tu">
+ <image class="left" src="@/static/ic_left@2x.png" mode="widthFix" @click="jian"></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: 100%;height: 100%;" mode="aspectFit" />
+ </view>
+ </swiper-item>
+ </swiper>
+ </view>
+ <image class="right" src="@/static/ic_right@2x.png" mode="widthFix" @click="add"></image>
+ </view>
+ <view class="img_content_close">
+ <image src="@/static/ic_close@2x.png" mode="widthFix" @click="close"></image>
+ </view>
+ </view>
+ </view>
+</template>
+
+<script>
+ export default {
+ data() {
+ return {
+ opacity: 0,
+ zindex: '-1',
+ mycurrent: 0
+ }
+ },
+ props: {
+ imgList: {
+ type: Array,
+ default: () => []
+ }
+ },
+ methods: {
+ add() {
+ if (this.imgList.length - 1 === this.mycurrent) return
+ this.mycurrent++
+ },
+ jian() {
+ if (this.mycurrent === 0) return
+ this.mycurrent--
+ },
+ handlechange(e){
+ this.mycurrent=e.detail.current
+ },
+ open(i) {
+ this.mycurrent = i
+ this.zindex = 3
+ this.opacity = 1
+ },
+ close() {
+ this.zindex = '-1'
+ this.opacity = 0
+ }
+ }
+ }
+</script>
+
+<style lang="scss" scoped>
+ .img {
+ width: 100vw;
+ height: 100vh;
+ background: rgba(0,0,0,0.4);
+ position: fixed;
+ transition: .2s;
+ top: 0;
+ left: 0;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+
+ .img_content {
+ display: flex;
+ flex-direction: column;
+ .img_content_tu {
+ display: flex;
+ align-items: center;
+ .img_content_tu_nr {
+ width: 600px;
+ height: 600px;
+ padding: 30px;
+ box-sizing: border-box;
+ border-radius: 8px;
+ margin: 0 32px;
+ display: flex;
+ align-items: center;
+ flex-wrap: nowrap;
+ .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;
+ }
+ .img_content_tu_nr_item {
+ width: 100%;
+ height: 600px;
+ image {
+ width: 100%;
+ height: 100%;
+ }
+ }
+ }
+ .left {
+ width: 80px;
+ height: 80px;
+ cursor: pointer;
+ }
+ .right {
+ width: 80px;
+ height: 80px;
+ cursor: pointer;
+ }
+ }
+ .img_content_close {
+ width: 100%;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ margin-top: 40px;
+ image {
+ width: 60px;
+ height: 60px;
+ cursor: pointer;
+ }
+ }
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.3