<template> <div> <el-row :gutter="12"> <el-col class="card1" :span="8"> <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> </el-col> <el-col class="card2" :span="8"> <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> </el-col> <el-col class="card3" :span="8"> <el-card shadow="hover"> 鼠标悬浮时显示 </el-card> </el-col> </el-row> </div> </template> <script> import Battery from "./battery"; export default { name: "car", components: { Battery, }, data() { return { quantity: 50, }; }, }; </script> <style> .el-row { display: flex; justify-content: center; align-items: center; height: 100vh; } .el-col { border-radius: 4px; flex-grow: 1; background-color: #f0f0f0; border-radius: 10px; padding: 20px; margin: 10px; box-sizing: border-box; transition: transform 0.3s ease; } .card3 { flex-basis: 50%; } .bg-purple-dark { background: #99a9bf; } .bg-purple { background: #d3dce6; } .bg-purple-light { background: #e5e9f2; } .grid-content { border-radius: 4px; min-height: 36px; } </style>修改一下这段代码,使得card1和card2在左侧上下排列,card3在card1和2右侧单独排列,三个卡片之间都有间隙,去掉el-col的颜色和空隙,使el-card的边就是整体的边,三个卡片要将屏幕部分覆盖全,不能小
相关推荐
















<template> <a-card :bordered="false"> <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form"> <a-row :gutter="24"> <a-col :span="6"> <a-form-item label="名称" name="username"> <a-input v-model:value="searchFormState.username" placeholder="请输入名称" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="身份证号" name="identityNo"> <a-input v-model:value="searchFormState.identityNo" placeholder="请输入身份证号" /> </a-form-item> </a-col> <a-col :span="6"> <a-form-item label="语言" name="language"> <a-input v-model:value="searchFormState.language" placeholder="请输入语言" /> </a-form-item> </a-col> <a-col :span="6" v-show="advanced"> <a-form-item label="信用分,默认100分" name="creditScore"> <a-input v-model:value="searchFormState.creditScore" placeholder="请输入信用分,默认100分" /> </a-form-item> </a-col> <a-col :span="6"> <a-button type="primary" @click="tableRef.refresh()">查询</a-button> <a-button style="margin: 0 8px" @click="reset">重置</a-button> {{ advanced ? '收起' : '展开' }} <component :is="advanced ? 'up-outlined' : 'down-outlined'"/> </a-col> </a-row> </a-form> <s-table ref="tableRef" :columns="columns" :data="loadData" :alert="options.alert.show" bordered :row-key="(record) => record.passengerId" :tool-config="toolConfig" :row-selection="options.rowSelection" > <template #operator class="table-operator"> <a-space> <a-button type="primary" @click="formRef.onOpen()" v-if="hasPerm('opsPassengerAdd')"> <template #icon></template> 新增 </a-button> <xn-batch-button v-if="hasPerm('opsPassengerBatchDelete')" buttonName="批量删除" icon="DeleteOutlined" buttonDanger :selectedRowKeys="selectedRowKeys" @batchCallBack="deleteBatchOpsPassenger" /> </a-space> </template> <template #bodyCell="{ column, record }"> <template v-if="column.dataIndex === 'action'"> <a-space> 编辑 <a-divider type="vertical" v-if="hasPerm(['opsPassengerEdit', 'opsPassengerDelete'], 'and')" /> <a-popconfirm title="确定要删除吗?" @confirm="deleteOpsPassenger(record)"> <a-button type="link" danger size="small" v-if="hasPerm('opsPassengerDelete')">删除</a-button> </a-popconfirm> </a-space> </template> </template> </s-table> </a-card> <Form ref="formRef" @successful="tableRef.refresh()" /> </template> <script setup name="passenger"> import { cloneDeep } from 'lodash-es' import Form from './form.vue' import opsPassengerApi from '@/api/ops/opsPassengerApi' const searchFormState = ref({}) const searchFormRef = ref() const tableRef = ref() const formRef = ref() const toolConfig = { refresh: true, height: true, columnSetting: true, striped: false } // 查询区域显示更多控制 const advanced = ref(false) const toggleAdvanced = () => { advanced.value = !advanced.value } const columns = [ { title: '名称', dataIndex: 'username' }, { title: '联系方式', dataIndex: 'mobile' }, { title: '累计消费金额', dataIndex: 'accumulatedConsumption' }, { title: '消费次数', dataIndex: 'cumulativeNumber' }, { title: '状态', dataIndex: 'userStatus' }, { title: '上一次消费时间', dataIndex: 'lastConsumption' }, ] // 操作栏通过权限判断是否显示 if (hasPerm(['opsPassengerEdit', 'opsPassengerDelete'])) { columns.push({ title: '操作', dataIndex: 'action', align: 'center', width: 150 }) } const selectedRowKeys = ref([]) // 列表选择配置 const options = { // columns数字类型字段加入 needTotal: true 可以勾选自动算账 alert: { show: true, clear: () => { selectedRowKeys.value = ref([]) } }, rowSelection: { onChange: (selectedRowKey, selectedRows) => { selectedRowKeys.value = selectedRowKey } } } const loadData = (parameter) => { const searchFormParam = cloneDeep(searchFormState.value) return opsPassengerApi.opsPassengerPage(Object.assign(parameter, searchFormParam)).then((data) => { return data }) } // 重置 const reset = () => { searchFormRef.value.resetFields() tableRef.value.refresh(true) } // 删除 const deleteOpsPassenger = (record) => { let params = [ { passengerId: record.passengerId } ] opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.refresh(true) }) } // 批量删除 const deleteBatchOpsPassenger = (params) => { opsPassengerApi.opsPassengerDelete(params).then(() => { tableRef.value.clearRefreshSelected() }) } </script> 寻找前端列表渲染操作


