mirroring/cool-admin-vue
1
0
Fork 0
mirror of https://github.com/cool-team-official/cool-admin-vue.git synced 2024-11-01 14:10:27 +08:00
Code Issues Projects Releases Wiki Activity

修改home页

Browse Source
This commit is contained in:
icssoa 2021-04-05 11:20:15 +08:00
parent 3862f9d382
commit e61870cc26
1 changed files with 116 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

169
src/views/home/index.vue
View File

@ -1,67 +1,130 @@
<template> <template>
<cl-crud :ref="setRefs('crud')" @load="onLoad"> <div class="view-home scroller1">
<el-row type="flex" align="middle"> <el-row :gutter="15">
<!-- 刷新按钮 --> <el-col :lg="6" :md="12" :xs="24">
<cl-refresh-btn /> <div class="card">
<!-- 新增按钮 --> <count-sales />
<cl-add-btn /> </div>
<!-- 删除按钮 --> </el-col>
<cl-multi-delete-btn /> <el-col :lg="6" :md="12" :xs="24">
<cl-flex1 /> <div class="card">
<!-- 关键字搜索 --> <count-views />
<cl-search-key /> </div>
</el-col>
<el-col :lg="6" :md="12" :xs="24">
<div class="card">
<count-paid />
</div>
</el-col>
<el-col :lg="6" :md="12" :xs="24">
<div class="card">
<count-effect />
</div>
</el-col>
</el-row> </el-row>
<el-row> <el-row :gutter="15">
<!-- 数据表格 --> <el-col :lg="14" :xs="24">
<cl-table :ref="setRefs('table')" v-bind="table" /> <div class="card">
<tab-chart />
</div>
</el-col>
<el-col :lg="10" :xs="24">
<div class="card">
<sales-rank />
</div>
</el-col>
</el-row> </el-row>
<el-row type="flex"> <el-row :gutter="15">
<cl-flex1 /> <el-col :lg="14" :sm="24">
<!-- 分页控件 --> <div class="card card--last">
<cl-pagination /> <hot-search />
</div>
</el-col>
<el-col :lg="10" :sm="24">
<div class="card card--last">
<category-ratio />
</div>
</el-col>
</el-row> </el-row>
</div>
<!-- 新增、编辑 -->
<cl-upsert :ref="setRefs('upsert')" v-bind="upsert" />
</cl-crud>
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, inject, reactive } from "vue"; import { defineComponent } from "vue";
import { CrudLoad, Upsert, Table } from "/$/crud/types"; import CategoryRatio from "./components/category-ratio.vue";
import { useRefs } from "/@/core"; import CountSales from "./components/count-sales.vue";
import CountViews from "./components/count-views.vue";
import CountPaid from "./components/count-paid.vue";
import CountEffect from "./components/count-effect.vue";
import TabChart from "./components/tab-chart.vue";
import SalesRank from "./components/sales-rank.vue";
import HotSearch from "./components/hot-search.vue";
export default defineComponent({ export default defineComponent({
setup() { components: {
const service = inject<any>("service"); CategoryRatio,
const { refs, setRefs } = useRefs(); CountSales,
CountViews,
// 新增、编辑配置 CountPaid,
const upsert = reactive<Upsert>({ CountEffect,
items: [] TabChart,
}); SalesRank,
HotSearch
// 表格配置
const table = reactive<Table>({
columns: []
});
// crud 加载
function onLoad({ ctx, app }: CrudLoad) {
// 绑定 service
ctx.service(service.xx).done();
app.refresh();
}
return {
refs,
setRefs,
upsert,
table,
onLoad
};
} }
}); });
</script> </script>
<style lang="scss">
.view-home {
.card {
background-color: #fff;
border-radius: 5px;
margin-bottom: 15px;
font-size: 12px;
letter-spacing: 0.5px;
&__header {
display: flex;
align-items: center;
height: 50px;
padding: 0 20px;
.label {
font-size: 12px;
}
.value {
font-size: 18px;
font-weight: bold;
margin-left: 10px;
}
}
&__container {
padding: 0 20px;
height: 50px;
}
&__footer {
display: flex;
align-items: center;
height: 50px;
border-top: 1px solid #f7f7f7;
font-size: 12px;
margin: 0 5px;
padding: 0 15px;
box-sizing: border-box;
.label {
margin-right: 10px;
}
.value {
font-size: 13px;
}
}
}
}
</style>