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>
|