mirror of https://github.com/rocboss/paopao-ce
You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
280 lines
10 KiB
280 lines
10 KiB
3 years ago
|
<template>
|
||
|
<div class="images-wrap">
|
||
|
<n-image-group v-if="[1].includes(props.imgs.length)">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="2">
|
||
|
<template v-for="img in props.imgs" :key="img.id">
|
||
|
<n-gi>
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x1"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="[2, 3].includes(props.imgs.length)">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3">
|
||
|
<template v-for="img in props.imgs" :key="img.id">
|
||
|
<n-gi>
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="[4].includes(props.imgs.length)">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="4">
|
||
|
<template v-for="img in props.imgs" :key="img.id">
|
||
|
<n-gi>
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x3"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="[5].includes(props.imgs.length)">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3">
|
||
|
<template v-for="(img, idx) in props.imgs" :key="img.id">
|
||
|
<n-gi v-if="idx < 3">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="2" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs" :key="img.id">
|
||
|
<n-gi v-if="idx >= 3">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x1"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="[6].includes(props.imgs.length)">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3">
|
||
|
<template v-for="(img, idx) in props.imgs" :key="img.id">
|
||
|
<n-gi v-if="idx < 3">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs" :key="img.id">
|
||
|
<n-gi v-if="idx >= 3">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="props.imgs.length === 7">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="4">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx < 4">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x3"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx >= 4">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="props.imgs.length === 8">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="4">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx < 4">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x3"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="4" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx >= 4">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x3"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
|
||
|
<n-image-group v-if="props.imgs.length === 9">
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx < 3">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx >= 3 && idx < 6">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
<n-grid :x-gap="4" :y-gap="4" :cols="3" style="margin-top: 4px">
|
||
|
<template v-for="(img, idx) in props.imgs">
|
||
|
<n-gi :key="img.id" v-if="idx >= 6">
|
||
|
<n-image
|
||
|
@error="() => (img.content = defaultImg)"
|
||
|
@click.stop
|
||
|
class="post-img x2"
|
||
|
object-fit="cover"
|
||
|
:src="img.content + thumbnail"
|
||
|
:preview-src="img.content"
|
||
|
/>
|
||
|
</n-gi>
|
||
|
</template>
|
||
|
</n-grid>
|
||
|
</n-image-group>
|
||
|
</div>
|
||
|
</template>
|
||
|
|
||
3 years ago
|
<script setup lang="ts">
|
||
3 years ago
|
import { ref, onMounted } from 'vue';
|
||
|
|
||
|
const defaultImg =
|
||
|
'https://paopao-assets.oss-cn-shanghai.aliyuncs.com/public/404.png';
|
||
|
const thumbnail =
|
||
|
'?x-oss-process=image/resize,m_fill,w_300,h_300,limit_0/auto-orient,1/format,png';
|
||
3 years ago
|
const props = withDefaults(defineProps<{
|
||
|
imgs: Item.PostProps[],
|
||
|
}>(), {
|
||
|
imgs: () => []
|
||
3 years ago
|
});
|
||
|
</script>
|
||
|
|
||
|
<style lang="less">
|
||
|
.images-wrap {
|
||
|
margin-top: 10px;
|
||
|
}
|
||
|
.post-img {
|
||
|
display: flex;
|
||
|
margin: 0;
|
||
|
border-radius: 3px;
|
||
|
overflow: hidden;
|
||
|
background: rgba(0, 0, 0, 0.1);
|
||
|
border: 1px solid #eee;
|
||
|
img {
|
||
|
width: 100%;
|
||
|
height: 100%;
|
||
|
}
|
||
|
}
|
||
|
.x1 {
|
||
|
height: 140px;
|
||
|
}
|
||
|
.x2 {
|
||
|
height: 90px;
|
||
|
}
|
||
|
.x3 {
|
||
|
height: 80px;
|
||
|
}
|
||
|
.dark {
|
||
|
.post-img {
|
||
|
border: 1px solid #333;
|
||
|
}
|
||
|
}
|
||
|
@media screen and (max-width: 821px) {
|
||
|
.x1 {
|
||
|
height: 100px;
|
||
|
}
|
||
|
.x2 {
|
||
|
height: 70px;
|
||
|
}
|
||
|
.x3 {
|
||
|
height: 50px;
|
||
|
}
|
||
|
}
|
||
|
</style>
|