72 lines
2.2 KiB
Vue
72 lines
2.2 KiB
Vue
<template>
|
||
<div class="show-image-div">
|
||
<div class="show-image-item" v-for="(item, index) in data" :key="index">
|
||
<ShowImage :data="item" :haveFooter="true">
|
||
<template #footer>
|
||
<div class="footer-div">
|
||
<a-button size="small">展示统计表</a-button>
|
||
</div>
|
||
</template>
|
||
</ShowImage>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import { ref } from "vue"
|
||
import ShowImage from '@/views/dashboard/test/components/ShowImage/index.vue'
|
||
const data = ref([
|
||
{
|
||
time: '20210111',
|
||
specialText: '卫星：GF2',
|
||
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||
screenshotText: '截图1',
|
||
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||
},
|
||
{
|
||
time: '20210112',
|
||
specialText: '卫星：GF3',
|
||
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||
screenshotText: '截图2',
|
||
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||
},
|
||
{
|
||
time: '20210113',
|
||
specialText: '卫星：GF4',
|
||
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||
screenshotText: '截图34',
|
||
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||
},
|
||
{
|
||
time: '20210114',
|
||
specialText: '卫星：GF5',
|
||
specialUrl: 'https://gw.alipayobjects.com/zos/antfincdn/x43I27A55%26/photo-1438109491414-7198515b166b.webp',
|
||
screenshotText: '截图4',
|
||
screenshotUrl: 'https://gw.alipayobjects.com/zos/antfincdn/cV16ZqzMjW/photo-1473091540282-9b846e7965e3.webp',
|
||
},
|
||
])
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.footer-div{
|
||
width: 100%;
|
||
height: 100%;
|
||
color: #fff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
padding-right: 30px;
|
||
}
|
||
.show-image-div{
|
||
max-height: 690px;
|
||
overflow: auto;
|
||
.show-image-item{
|
||
width: 470px;
|
||
height: 470px;
|
||
background: cadetblue;
|
||
margin-bottom: 5px;
|
||
position: relative;
|
||
}
|
||
}
|
||
</style>
|