feat: 布局修改
This commit is contained in:
wf
parent
2fa8df00af
commit
9f4ac72ebd
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="fill-page-size">
|
||||
<div class="fill-page-size" :style="{ height: viewportHeight }">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</template>
|
||||
@ -31,8 +31,7 @@ const viewportHeight = computed(() => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.fill-page-size {
|
||||
height: 100%;
|
||||
box-sizing: border-box;
|
||||
box-shadow: $shadow-border-1;
|
||||
// box-shadow: $shadow-border-1;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -3,13 +3,15 @@
|
||||
<a-layout-content class="layout-main-content">
|
||||
<Tabs v-if="isTabs" />
|
||||
<a-scrollbar style="height: 100%; overflow: auto" :outer-class="isTabs ? 'scrollbar' : 'scrollbar-no-tabs'">
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<MainTransition>
|
||||
<keep-alive :include="cacheRoutes">
|
||||
<component :is="Component" :key="route.name" v-if="refreshPage" />
|
||||
</keep-alive>
|
||||
</MainTransition>
|
||||
</router-view>
|
||||
<div>
|
||||
<router-view v-slot="{ Component, route }">
|
||||
<MainTransition>
|
||||
<keep-alive :include="cacheRoutes">
|
||||
<component :is="Component" :key="route.name" v-if="refreshPage" />
|
||||
</keep-alive>
|
||||
</MainTransition>
|
||||
</router-view>
|
||||
</div>
|
||||
</a-scrollbar>
|
||||
</a-layout-content>
|
||||
</a-watermark>
|
||||
|
||||
@ -27,6 +27,7 @@ let { isFooter } = storeToRefs(themeStore);
|
||||
.layout {
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.layout-right {
|
||||
display: grid;
|
||||
grid-template-rows: auto 1fr auto;
|
||||
|
||||
@ -1,62 +1,15 @@
|
||||
<template>
|
||||
<div class="container-page">
|
||||
<a-form :model="formData.form" :label-col-props="{ span: 6 }" :wrapper-col-props="{ span: 18 }">
|
||||
<a-row :gutter="16">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="name" label="姓名">
|
||||
<a-input v-model="formData.form.name" placeholder="请输入姓名" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="phone" label="手机号">
|
||||
<a-input v-model="formData.form.phone" placeholder="请输入手机号" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="email" label="邮箱">
|
||||
<a-input v-model="formData.form.email" placeholder="请输入邮箱" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-space>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<icon-search />
|
||||
</template>
|
||||
<template #default>查询</template>
|
||||
</a-button>
|
||||
<a-button>
|
||||
<template #icon>
|
||||
<icon-refresh />
|
||||
</template>
|
||||
<template #default>重置</template>
|
||||
</a-button>
|
||||
<a-button type="text" @click="formData.search = !formData.search">
|
||||
<template #icon>
|
||||
<icon-up v-if="formData.search" />
|
||||
<icon-down v-else />
|
||||
</template>
|
||||
<template #default>{{ formData.search ? "收起" : "展开" }}</template>
|
||||
</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="16" v-if="formData.search">
|
||||
<a-col :span="6">
|
||||
<a-form-item field="address" label="地址">
|
||||
<a-input v-model="formData.form.address" placeholder="请输入地址" allow-clear />
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="6">
|
||||
<a-form-item field="status" label="用户状态">
|
||||
<a-select v-model="formData.form.status" placeholder="请选择用户状态" allow-clear>
|
||||
<a-option value="1">停用</a-option>
|
||||
<a-option value="2">启用</a-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-form>
|
||||
<a-row :gutter="16" class="bottom-gap">
|
||||
<a-col :span="6">
|
||||
<a-space>
|
||||
<a-button type="primary">新增</a-button>
|
||||
<a-button type="primary" status="danger">删除</a-button>
|
||||
<a-button>导出</a-button>
|
||||
</a-space>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<a-table
|
||||
row-key="key"
|
||||
size="small"
|
||||
@ -90,11 +43,11 @@
|
||||
</template>
|
||||
<template #optional>
|
||||
<a-space>
|
||||
<a-button size="mini" type="primary">编辑</a-button>
|
||||
<a-button size="mini" type="primary">详情</a-button>
|
||||
<a-button size="mini">修改</a-button>
|
||||
<a-popconfirm content="确定删除这条数据吗?" type="warning">
|
||||
<a-button size="mini">删除</a-button>
|
||||
<a-button size="mini" type="primary" status="danger">删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button size="mini" type="primary" status="danger">修改</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
@ -273,4 +226,8 @@ const data = reactive([
|
||||
box-sizing: border-box;
|
||||
padding: $padding;
|
||||
}
|
||||
|
||||
.bottom-gap {
|
||||
margin-bottom: $padding;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -90,11 +90,11 @@
|
||||
</template>
|
||||
<template #optional>
|
||||
<a-space>
|
||||
<a-button size="mini" type="primary">编辑</a-button>
|
||||
<a-button size="mini" type="primary">详情</a-button>
|
||||
<a-button size="mini">修改</a-button>
|
||||
<a-popconfirm content="确定删除这条数据吗?" type="warning">
|
||||
<a-button size="mini">删除</a-button>
|
||||
<a-button size="mini" type="primary" status="danger">删除</a-button>
|
||||
</a-popconfirm>
|
||||
<a-button size="mini" type="primary" status="danger">修改</a-button>
|
||||
</a-space>
|
||||
</template>
|
||||
</a-table>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user