hxgksystemapp/src/components/DesignForm/app/cardPage.vue

<!--
@ 作者: 秦东
@ 时间: 2024-07-17 15:35:39
@ 备注: 卡片视图
-->
<script lang='ts' setup>
import type { ComponentSize } from 'element-plus'
const props = defineProps({
	searchSend:{
		type:Object,
		default(){
			return {}
		}
	},
	viewSetup:{
		type:Object,
		default(){
			return {}
		}
	},
	drawerWith:{
		type:Number,
		default:0
	}
});
const size = ref<ComponentSize>('default')
const lineRanks = ref(1)
const imgBox = computed(() => {
	let cssStyle:any = {}
	if(props.viewSetup.form.imgWidth != 0){
		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
	}else{
		cssStyle['width'] = "50px";
	}
	if(props.viewSetup.form.imgHeight != 0){
		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
	}else{
		cssStyle['height'] = "50px";
	}
	
	return  cssStyle
})
/**
@ 作者: 秦东
@ 时间: 2024-07-18 14:26:46
@ 功能: 图像设定Css
*/
const imgStyle = computed(() => {
	let cssStyle:any = {}
	cssStyle['border'] = "1px solid #ccc";
	cssStyle['border-radius'] = props.viewSetup.form.imgBorderRadius + "px";
	cssStyle['padding'] = props.viewSetup.form.imgPadding + "px";
	if(props.viewSetup.form.imgWidth != 0){
		cssStyle['width'] = props.viewSetup.form.imgWidth + "px";
	}else{
		cssStyle['width'] = "50px";
	}
	if(props.viewSetup.form.imgHeight != 0){
		cssStyle['height'] = props.viewSetup.form.imgHeight + "px";
	}else{
		cssStyle['height'] = "50px";
	}
	console.log("自定义样式",cssStyle)
	return  cssStyle
})

/**
@ 作者: 秦东
@ 时间: 2024-07-18 14:26:57
@ 功能: 内容设定css
*/
const cardInfoBox = computed(() => {
	let cssStyle:any = {}
	
	cssStyle['width'] = (Math.round(24/props.viewSetup.form.ranks) - props.viewSetup.form.imgWidth) + "px";
	return  cssStyle
})
onMounted(()=>{
	lineRanks.value = Math.round(24/props.viewSetup.form.ranks)
})
// const url = ref()
// const srcList = ref([])
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}

const url =
  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg'
const srcList = (url:string) =>{
	return [url]
	return [
		'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
		'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
		'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
		'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
		'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
		'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
		'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
	]
} 
</script>
<template>
	<div>

		<el-row :gutter="20">
			
			<el-col :span="lineRanks"  class="cardBox">
				
				<el-card >
					<div class="cardContBox">
						<el-image
							:style="imgStyle"
							:src="url"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="srcList(url)"
							:initial-index="4"
							fit="cover"
						/>
						<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
							<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
							<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
						</div>
					</div>
				</el-card>
			
			</el-col>
			<el-col :span="lineRanks"  class="cardBox">
				
				<el-card >
					<div class="cardContBox">
						<el-image
							:style="imgStyle"
							:src="url"
							:zoom-rate="1.2"
							:max-scale="7"
							:min-scale="0.2"
							:preview-src-list="srcList(url)"
							:initial-index="4"
							fit="cover"
						/>
						<div class="cardInfo" :style="'width: calc(100% - '+props.viewSetup.form.imgWidth+'px); height:'+props.viewSetup.form.imgHeight+'px; overflow: hidden;' ">
							<div class="title">标题标题标题标题标题标题标题标题标题标题标题标题标题标题</div>
							<div class="content">内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容内容</div>
						</div>
					</div>
				</el-card>
			
			</el-col>
			
			
		</el-row>
		<div class="pageBox">
			<el-pagination
				v-model:current-page="props.searchSend.page"
				v-model:page-size="props.searchSend.pagesize"
				:page-sizes="[100, 200, 300, 400]"
				:size="size"
				:background="true"
				layout="total, sizes, prev, pager, next, jumper"
				:total="400"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				class="page"
			/>
		</div>

	</div>
	
</template>
<style  lang='scss' scoped>
.demo-image__error .image-slot {
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
.demo-image__error .el-image {
  width: 100%;
  height: 200px;
}
.cardBox{
	padding: 10px 0 5px 0;
	:deep .el-card__body{
		padding:10px;
	}
	.title{
		font-size:14px;
		font-weight:bold;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}
	.content{
		color: #909399;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.cardContBox{
		display: flex;
		width: 100%;
		justify-content: flex-start;
	}
	.cardInfo{
		padding-left: 5px;
	}
	
}
.pageBox{
	display:flex;
	justify-content: center;
	width: 100%;
	text-align: center;
	margin-top: 10px;
}
</style>