feat: 对话显示sketch
This commit is contained in:
@@ -4,13 +4,21 @@
|
||||
:class="type === 'sketch' ? 'sketch-preview' : 'report-preview'"
|
||||
>
|
||||
<template v-if="type === 'sketch'">
|
||||
<div class="sketch-item" v-for="item in 12">
|
||||
<div
|
||||
class="sketch-item"
|
||||
v-for="(item, index) in sketchList"
|
||||
:key="'sketch-item-' + index"
|
||||
>
|
||||
<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="" />
|
||||
<img src="@/assets/images/arrow-top-right.png" />
|
||||
</div>
|
||||
<img :src="LoadingImg" alt="" />
|
||||
<img
|
||||
:src="getImageSrc(item, index)"
|
||||
:alt="'sketch-' + index"
|
||||
@load="handleImageLoad(index)"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<div v-else class="reportBorder">
|
||||
@@ -28,116 +36,127 @@
|
||||
</div>
|
||||
</div>
|
||||
<div class="content">
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题 <br />
|
||||
# 一级标题
|
||||
<br />
|
||||
# 一级标题
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref } from 'vue'
|
||||
import { ref, reactive } from 'vue'
|
||||
import Menu from './Menu.vue'
|
||||
import LoadingImg from '@/assets/images/sketch-loading.gif'
|
||||
import reportNull from '@/assets/images/reportNull.png'
|
||||
import LoadingImg from '@/assets/images/sketch-loading.gif'
|
||||
import reportNull from '@/assets/images/reportNull.png'
|
||||
|
||||
// 存储每个图片的加载状态
|
||||
const loadedStatus = reactive<Record<number, boolean>>({})
|
||||
|
||||
const props = withDefaults(
|
||||
defineProps<{
|
||||
type: 'sketch' | 'report'
|
||||
sketchList: Array<string>
|
||||
}>(),
|
||||
{
|
||||
type: 'sketch'
|
||||
type: 'sketch',
|
||||
sketchList: []
|
||||
}
|
||||
)
|
||||
|
||||
// 图片加载完成时触发
|
||||
const handleImageLoad = (index: number) => {
|
||||
loadedStatus[index] = true
|
||||
}
|
||||
|
||||
const handleClickEdit = () => {
|
||||
// 编辑按钮点击逻辑
|
||||
console.log('Edit button clicked')
|
||||
}
|
||||
const handleClickMenu = () => {
|
||||
// 菜单按钮点击逻辑
|
||||
console.log('Menu button clicked')
|
||||
}
|
||||
|
||||
// 获取当前显示的图片源
|
||||
const getImageSrc = (item: string, index: number) => {
|
||||
return loadedStatus[index] ? item : LoadingImg
|
||||
}
|
||||
|
||||
const handleClickEdit = () => {
|
||||
// 编辑按钮点击逻辑
|
||||
console.log('Edit button clicked')
|
||||
}
|
||||
const handleClickMenu = () => {
|
||||
// 菜单按钮点击逻辑
|
||||
console.log('Menu button clicked')
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
@@ -172,13 +191,13 @@
|
||||
font-size: 1.4rem;
|
||||
padding: 0 0.9rem 0 1.4rem;
|
||||
cursor: pointer;
|
||||
img{
|
||||
img {
|
||||
width: 1.8rem;
|
||||
height: 1.8rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.reportBorder{
|
||||
.reportBorder {
|
||||
position: relative;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
@@ -190,7 +209,11 @@
|
||||
&::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
background: linear-gradient(119.03deg, rgba(233, 121, 60, 0.3) 1.61%, rgba(255, 207, 144, 0.3) 101.01%);
|
||||
background: linear-gradient(
|
||||
119.03deg,
|
||||
rgba(233, 121, 60, 0.3) 1.61%,
|
||||
rgba(255, 207, 144, 0.3) 101.01%
|
||||
);
|
||||
border-radius: 2.3rem;
|
||||
z-index: -1;
|
||||
width: 100%;
|
||||
@@ -205,20 +228,20 @@
|
||||
height: calc(100% - var(--border-width) * 2);
|
||||
border-radius: 2rem;
|
||||
display: flex;
|
||||
.report-content-null{
|
||||
.report-content-null {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.report-content{
|
||||
.report-content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
overflow: hidden;
|
||||
.downBtnBox{
|
||||
.downBtnBox {
|
||||
padding: 2.2rem 5.2rem 0;
|
||||
.downBtn{
|
||||
.downBtn {
|
||||
display: flex;
|
||||
width: 11.2rem;
|
||||
justify-content: center;
|
||||
@@ -228,16 +251,16 @@
|
||||
background-color: #ff7a51;
|
||||
color: #fff;
|
||||
cursor: pointer;
|
||||
.icon{
|
||||
margin-right: .02rem;
|
||||
.icon {
|
||||
margin-right: 0.02rem;
|
||||
}
|
||||
span{
|
||||
span {
|
||||
font-weight: 500;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
.content{
|
||||
.content {
|
||||
word-break: break-word;
|
||||
white-space: pre-wrap;
|
||||
overflow-y: auto;
|
||||
|
||||
Reference in New Issue
Block a user