|
|
|
|
<!--
|
|
|
|
|
@ 作者: 秦东
|
|
|
|
|
@ 时间: 2024-02-20 08:59:00
|
|
|
|
|
@ 备注: 实验表单
|
|
|
|
|
-->
|
|
|
|
|
<!-- 应用管理父组件 -->
|
|
|
|
|
<script setup>
|
|
|
|
|
import cardedit from './cardedit.vue';
|
|
|
|
|
import cardadd from './cardadd.vue';
|
|
|
|
|
import {ref,onMounted,onUnmounted,watch} from 'vue';
|
|
|
|
|
import {Delete,Edit,View,MoreFilled} from '@element-plus/icons-vue'
|
|
|
|
|
|
|
|
|
|
const props = defineProps({
|
|
|
|
|
visible:Boolean
|
|
|
|
|
});
|
|
|
|
|
// 弹窗状态
|
|
|
|
|
const drawerRefadd = ref();
|
|
|
|
|
const drawerRefedit = ref(false)
|
|
|
|
|
// 卡片数据
|
|
|
|
|
const cardData = ref([]);
|
|
|
|
|
const emits = defineEmits(["update:visible", "data"]);
|
|
|
|
|
|
|
|
|
|
//添加
|
|
|
|
|
const opencardadd = () => {
|
|
|
|
|
drawerRefadd.value = true;
|
|
|
|
|
};
|
|
|
|
|
//编辑
|
|
|
|
|
const opencardedit = (index) => {
|
|
|
|
|
drawerRefedit.value = true;
|
|
|
|
|
}
|
|
|
|
|
//删除
|
|
|
|
|
const deleteCard = (index) => {
|
|
|
|
|
cardData.value.splice(index, 1);
|
|
|
|
|
emits('data', cardData.value);
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
<template>
|
|
|
|
|
<cardadd v-model:visible="drawerRefadd" :keyval="props.visible"/>
|
|
|
|
|
<cardedit v-model:visible="drawerRefedit" :keyval="props.visible" />
|
|
|
|
|
<el-row :gutter="10">
|
|
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
|
|
<div class="grid-content ep-bg-purple" >
|
|
|
|
|
<el-card class="cardlarge">
|
|
|
|
|
<template #header>
|
|
|
|
|
<div class="cardhead-large">
|
|
|
|
|
<el-row class="block-col-2">
|
|
|
|
|
<el-col style="text-align: right;">
|
|
|
|
|
<el-dropdown>
|
|
|
|
|
<span class="el-dropdown-link">
|
|
|
|
|
<el-icon><MoreFilled /></el-icon>
|
|
|
|
|
</span>
|
|
|
|
|
<template #dropdown>
|
|
|
|
|
<el-dropdown-menu>
|
|
|
|
|
<el-dropdown-item @click="opencardadd" >添加</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item >编辑</el-dropdown-item>
|
|
|
|
|
<el-dropdown-item @click="deleteCard(index)">删除</el-dropdown-item>
|
|
|
|
|
</el-dropdown-menu>
|
|
|
|
|
</template>
|
|
|
|
|
</el-dropdown>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col style="text-align: left;">
|
|
|
|
|
<span>标题一</span>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
<div class="grid-content ep-bg-purple" >
|
|
|
|
|
<el-row :gutter="10" >
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片1</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="() => opencardedit(index)"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="() => deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片2</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片3</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片4</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片5</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片6</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片7</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片8</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="8" :sm="12" :md="8" :lg="8" :xl="8">
|
|
|
|
|
<el-card class="cardpattern">
|
|
|
|
|
<img
|
|
|
|
|
src="../assets/image/1.png"
|
|
|
|
|
title="示例图片"
|
|
|
|
|
class="picture"
|
|
|
|
|
/>
|
|
|
|
|
<div class="cardhead">
|
|
|
|
|
<span>卡片9</span>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="bottom">
|
|
|
|
|
<el-button size="small" circle class="button" :icon="View"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Edit" @click="opencardedit"></el-button>
|
|
|
|
|
<el-button size="small" circle class="button" :icon="Delete" @click="deleteCard(index)"></el-button>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
|
|
<div class="grid-content ep-bg-purple-light">
|
|
|
|
|
<el-card class="cardlarge">
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
|
|
<div class="grid-content ep-bg-purple">
|
|
|
|
|
<el-card class="cardlarge">
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
<el-col :xs="24" :sm="12" :md="12" :lg="6" :xl="6">
|
|
|
|
|
<div class="grid-content ep-bg-purple-light">
|
|
|
|
|
<el-card class="cardlarge">
|
|
|
|
|
|
|
|
|
|
</el-card>
|
|
|
|
|
</div>
|
|
|
|
|
</el-col>
|
|
|
|
|
</el-row>
|
|
|
|
|
|
|
|
|
|
<!-- 分页 -->
|
|
|
|
|
<div class="example-pagination-block">
|
|
|
|
|
<div class="example-demonstration"></div>
|
|
|
|
|
<el-pagination layout="prev, pager, next" :total="50" />
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
</template>
|
|
|
|
|
<style scoped>
|
|
|
|
|
/* 小卡片 */
|
|
|
|
|
.cardpattern{
|
|
|
|
|
padding-bottom: 0px;
|
|
|
|
|
margin-bottom: 10px;
|
|
|
|
|
min-width: 100px;
|
|
|
|
|
}
|
|
|
|
|
/* 小卡片标题 */
|
|
|
|
|
.cardhead{
|
|
|
|
|
padding: 10px;
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
}
|
|
|
|
|
/* 大卡片 */
|
|
|
|
|
.cardlarge{
|
|
|
|
|
max-width: 480px;
|
|
|
|
|
}
|
|
|
|
|
/* 大卡片标题 */
|
|
|
|
|
.cardhead-large{
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
/* 按钮整体 */
|
|
|
|
|
.bottom {
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
line-height: 10px;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-evenly;
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
/* 单个按钮 */
|
|
|
|
|
.button {
|
|
|
|
|
padding: 0px;
|
|
|
|
|
min-height: auto;
|
|
|
|
|
margin-bottom: 1px;
|
|
|
|
|
}
|
|
|
|
|
/* 图片 */
|
|
|
|
|
.picture {
|
|
|
|
|
height: 100%;
|
|
|
|
|
min-height: 50px;
|
|
|
|
|
max-height: 100px;
|
|
|
|
|
display: block;
|
|
|
|
|
width: 100%;
|
|
|
|
|
min-width: 50px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.el-col {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.grid-content {
|
|
|
|
|
border-radius: 4px;
|
|
|
|
|
min-height: 36px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.app_box{
|
|
|
|
|
margin: 15px 0 0 0px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block-col-2 .demonstration {
|
|
|
|
|
display: block;
|
|
|
|
|
color: var(--el-text-color-secondary);
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.block-col-2 .el-dropdown-link {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
/* 分页 */
|
|
|
|
|
.example-pagination-block + .example-pagination-block {
|
|
|
|
|
margin-top: 10px;
|
|
|
|
|
}
|
|
|
|
|
.example-pagination-block .example-demonstration {
|
|
|
|
|
margin-bottom: 16px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
