57 lines
1.5 KiB
Vue
57 lines
1.5 KiB
Vue
<script setup lang="ts">
|
|
import ItemCard from './itemCard.vue'
|
|
const time = ref('')
|
|
</script>
|
|
|
|
<template>
|
|
<!-- 寻源大厅 -->
|
|
<el-form :inline="true">
|
|
<el-form-item label="寻源大厅" style="font-weight: bold"></el-form-item>
|
|
<el-form-item label="寻源标题">
|
|
<el-input />
|
|
</el-form-item>
|
|
<el-form-item label="日期范围">
|
|
<el-date-picker
|
|
v-model="time"
|
|
type="daterange"
|
|
unlink-panels
|
|
range-separator="-"
|
|
start-placeholder="开始时间"
|
|
end-placeholder="结束时间"
|
|
style="width: 220px" />
|
|
</el-form-item>
|
|
<el-form-item>
|
|
<el-button type="primary">查询</el-button>
|
|
<el-button>重置</el-button>
|
|
</el-form-item>
|
|
</el-form>
|
|
|
|
<!-- 卡片详情 -->
|
|
<div class="card-details">
|
|
<div class="card-item">
|
|
<ItemCard />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.card-details {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.card-item {
|
|
width: calc((100% - 24px) / 4);
|
|
// height: 200px;
|
|
// background-color: pink;
|
|
margin-right: 8px;
|
|
margin-bottom: 8px;
|
|
border: 1px solid #1e9fff;
|
|
border-radius: 5px;
|
|
}
|
|
|
|
.card-item:nth-child(4n) {
|
|
margin-right: 0;
|
|
}
|
|
}
|
|
</style>
|