84 lines
1.7 KiB
Vue
84 lines
1.7 KiB
Vue
|
<template>
|
||
|
|
<div
|
||
|
|
class="preview-container flex"
|
||
|
|
:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
|
||
|
|
>
|
||
|
|
<template v-if="type === 'sketch'">
|
||
|
|
<div class="sketch-item" v-for="item in 12">
|
||
|
|
<Menu class="menu-btn" @click="handleClickMenu" />
|
||
|
|
<div class="edit-btn flex align-center space-between" @click="handleClickEdit">
|
||
|
|
<div>Edit</div>
|
||
|
|
<img src="@/assets/images/arrow-top-right.png" alt="" />
|
||
|
|
</div>
|
||
|
|
<img :src="LoadingImg" alt="" />
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup lang="ts">
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import Menu from './Menu.vue'
|
||
|
|
import LoadingImg from '@/assets/images/sketch-loading.gif'
|
||
|
|
|
||
|
|
const props = withDefaults(
|
||
|
|
defineProps<{
|
||
|
|
type: 'sketch' | 'report'
|
||
|
|
}>(),
|
||
|
|
{
|
||
|
|
type: 'sketch'
|
||
|
|
}
|
||
|
|
)
|
||
|
|
|
||
|
|
|
||
|
|
const handleClickEdit = () => {
|
||
|
|
// 编辑按钮点击逻辑
|
||
|
|
console.log('Edit button clicked')
|
||
|
|
}
|
||
|
|
const handleClickMenu = () => {
|
||
|
|
// 菜单按钮点击逻辑
|
||
|
|
console.log('Menu button clicked')
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="less" scoped>
|
||
|
|
.preview-container {
|
||
|
|
gap: 1.2rem;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
.sketch-item {
|
||
|
|
position: relative;
|
||
|
|
&,
|
||
|
|
img {
|
||
|
|
width: 21.9rem;
|
||
|
|
height: 21.9rem;
|
||
|
|
border-radius: 1.6rem;
|
||
|
|
}
|
||
|
|
.menu-btn {
|
||
|
|
position: absolute;
|
||
|
|
top: 2.1rem;
|
||
|
|
right: 1.5rem;
|
||
|
|
}
|
||
|
|
.edit-btn {
|
||
|
|
position: absolute;
|
||
|
|
right: 1rem;
|
||
|
|
bottom: 1.1rem;
|
||
|
|
width: 7.8rem;
|
||
|
|
height: 3.59rem;
|
||
|
|
border-radius: 2rem;
|
||
|
|
background-color: #fff;
|
||
|
|
border: 0.2rem solid #e5e5e5;
|
||
|
|
font-family: 'GeneralMedium';
|
||
|
|
font-size: 1.4rem;
|
||
|
|
padding: 0 0.9rem 0 1.4rem;
|
||
|
|
cursor: pointer;
|
||
|
|
img{
|
||
|
|
width: 1.8rem;
|
||
|
|
height: 1.8rem;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|