FiDA_Front/src/views/home/agent/components/Preview.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 v-else class="reportBorder">
			<div class="report">
				<div v-if="false" class="report-content-null">
					<img :src="reportNull" alt="" />
				</div>
				<div v-else class="report-content">
					<div class="downBtnBox">
						<div class="downBtn">
							<div class="icon">
								<SvgIcon name="reportDown" size="16"></SvgIcon>
							</div>
							<span>{{ $t('agent.Download') }}</span>
						</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 />				
						# 一级标题  
					</div>
				</div>
			</div>
			
		</div>
	</div>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import Menu from './Menu.vue'
  import LoadingImg from '@/assets/images/sketch-loading.gif'
  import reportNull from '@/assets/images/reportNull.png'

	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 {
		width: 100%;
		height: 100%;
		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;
				}
			}
		}
		.reportBorder{
			position: relative;
			display: flex;
			align-items: center;
			justify-content: center;
			--border-width: 3px;
			flex: 1;
			overflow: hidden;
			height: 100%;
			&::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%);
				border-radius: 2.3rem;
				z-index: -1;
				width: 100%;
				height: 100%;
				left: -50%;
				top: -50%;
				transform: translate(50%, 50%);
			}
			.report {
				background-color: #fff;
				width: calc(100% - var(--border-width) * 2);
				height: calc(100% - var(--border-width) * 2);
				border-radius: 2rem;
				display: flex;
				.report-content-null{
					flex: 1;
					display: flex;
					align-items: center;
					justify-content: center;
				}
				.report-content{
					flex: 1;
					display: flex;
					flex-direction: column;
					overflow: hidden;
					.downBtnBox{
						padding: 2.2rem 5.2rem 0;
						.downBtn{
							display: flex;
							width: 11.2rem;
							justify-content: center;
							margin-left: auto;
							line-height: 3.2rem;
							border-radius: 5px;
							background-color: #ff7a51;
							color: #fff;
							cursor: pointer;
							.icon{
								margin-right: .02rem;
							}
							span{
								font-weight: 500;
								font-size: 1.2rem;
							}
						}
					}
					.content{
						word-break: break-word;
						white-space: pre-wrap;
						overflow-y: auto;
						margin: 2rem;
					}
				}
			}
		}
	}
</style>