44 lines
1.2 KiB
Vue
44 lines
1.2 KiB
Vue
<script setup>
|
|
import {ref} from "vue";
|
|
import testIcon from '../static/images/test.png';
|
|
import XImage from "./XImage.vue";
|
|
import ICON from "../static/icons/水印_素材案例.png";
|
|
|
|
const XImageRef = ref();
|
|
const {list, showSY} = defineProps({
|
|
list: {
|
|
type: Array,
|
|
default: [
|
|
testIcon, testIcon, testIcon, testIcon
|
|
],
|
|
},
|
|
showSY: {
|
|
type: Boolean,
|
|
default: false,
|
|
}
|
|
});
|
|
|
|
const openPrew = () => {
|
|
XImageRef.value.open();
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view class="relative">
|
|
<x-image :sy="showSY" ref="XImageRef" class="!w-[160rpx] !h-[160rpx]" mode="aspectFill" :src="list[0]"
|
|
:list="list"></x-image>
|
|
|
|
<image v-if="showSY" class="!size-full !absolute left-0 top-0" :src="ICON" mode="aspectFill"
|
|
@click="openPrew"></image>
|
|
|
|
<view class="!flex absolute left-1/2 -translate-x-1/2 bottom-[20rpx] z-10 gap-[8rpx]">
|
|
<view v-for="(_v, index) in list"
|
|
:class="[`rounded-[50%] !size-[12rpx] ${index === 0 ? 'bg-[rgba(255,255,255,1)]' : 'bg-[rgba(255,255,255,.67)]'}`]"></view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped lang="scss">
|
|
|
|
</style>
|