home静态页面
This commit is contained in:
parent
a793a95da0
commit
8716e35d55
|
|
@ -18,7 +18,7 @@ const router = createRouter({
|
||||||
*/
|
*/
|
||||||
router.beforeEach((to: any, from: any, next: any) => {
|
router.beforeEach((to: any, from: any, next: any) => {
|
||||||
//动态设置标题
|
//动态设置标题
|
||||||
const title: string = "后台管理系统";
|
const title: string = "智慧食堂系统";
|
||||||
document.title = to.meta.name ? `${to.meta.name} - ${title}` : title;
|
document.title = to.meta.name ? `${to.meta.name} - ${title}` : title;
|
||||||
//todo 鉴权操作...
|
//todo 鉴权操作...
|
||||||
const userStore = useUserStore();
|
const userStore = useUserStore();
|
||||||
|
|
|
||||||
|
|
@ -1,161 +1,301 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="home">
|
|
||||||
<a-card :bordered="false" style="width: 100%">
|
<div class="home" >
|
||||||
<div class="homeIndex">
|
<div style="width: 74%">
|
||||||
<div>
|
<div class="homeItem">
|
||||||
<a-form name="horizontal_login" layout="inline" autocomplete="off">
|
<blockquote class="homeItemIndex">
|
||||||
<a-form-item label="名字" name="username">
|
系统公告
|
||||||
<a-input placeholder="请输入名字"> </a-input>
|
<span class="homeSpan">2024-11-25</span>
|
||||||
</a-form-item>
|
</blockquote>
|
||||||
<a-form-item label="年龄" name="username">
|
<span>【系统菜单调整通知】</span>
|
||||||
<a-input placeholder="请输入名字"> </a-input>
|
<span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
|
||||||
</a-form-item>
|
</div>
|
||||||
<a-form-item label="地址" name="username">
|
<div class="home2Item">
|
||||||
<a-input placeholder="请输入名字"> </a-input>
|
<blockquote class="homeItem2Index">
|
||||||
</a-form-item>
|
<div class="header-wrapper">
|
||||||
<a-form-item label="时间" name="range-picker">
|
<span>公司</span>
|
||||||
<a-range-picker value-format="YYYY-MM-DD" />
|
<div class="fold-button" @click="toggleFold">
|
||||||
</a-form-item>
|
<span>{{ isFold ? '展开' : '收起' }}</span>
|
||||||
<a-form-item label="名字" name="username">
|
<caret-right-outlined :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }" />
|
||||||
<a-input placeholder="请输入名字"> </a-input>
|
</div>
|
||||||
</a-form-item>
|
</div>
|
||||||
</a-form>
|
</blockquote>
|
||||||
</div>
|
<!-- 折叠内容区域 -->
|
||||||
<div>
|
<div :style="{height:isFold?'420px':'600px'}">
|
||||||
<a-button type="primary">
|
<div class="fold-content">
|
||||||
<template #icon>
|
<!-- 这里放具体内容 -->
|
||||||
<ZoomInOutlined />
|
<div class="fold-content_item">
|
||||||
</template>
|
<!-- 1-->
|
||||||
搜索</a-button
|
<div class="fold-content_item_index">
|
||||||
>
|
<div class="fold-content_item_index_top">
|
||||||
|
<div class="content">某某央厨</div>
|
||||||
|
<span>屏幕</span>
|
||||||
|
</div>
|
||||||
|
<div class="intermediate" v-for="item in List" :key="item.key">
|
||||||
|
<span style="width: 50px">{{item.name}}</span>
|
||||||
|
<span style="width: 50px">{{item.digital}}</span>
|
||||||
|
<span style="width: 50px">{{item.mechanism}}</span>
|
||||||
|
<span style="width: 50px">{{item.digitalKey}}</span>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="risk">低风险</div>
|
||||||
|
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div>排名</div>
|
||||||
|
<div style="margin-left: 10px">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 2-->
|
||||||
|
<div class="fold-content_item_index">
|
||||||
|
<div class="fold-content_item_index_top">
|
||||||
|
<div class="content">某某央厨</div>
|
||||||
|
<span>屏幕</span>
|
||||||
|
</div>
|
||||||
|
<div class="intermediate" v-for="item in List" :key="item.key">
|
||||||
|
<span style="width: 50px">{{item.name}}</span>
|
||||||
|
<span style="width: 50px">{{item.digital}}</span>
|
||||||
|
<span style="width: 50px">{{item.mechanism}}</span>
|
||||||
|
<span style="width: 50px">{{item.digitalKey}}</span>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="risk">低风险</div>
|
||||||
|
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div>排名</div>
|
||||||
|
<div style="margin-left: 10px">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 3-->
|
||||||
|
<div class="fold-content_item_index">
|
||||||
|
<div class="fold-content_item_index_top">
|
||||||
|
<div class="content">某某央厨</div>
|
||||||
|
<span>屏幕</span>
|
||||||
|
</div>
|
||||||
|
<div class="intermediate" v-for="item in List" :key="item.key">
|
||||||
|
<span style="width: 50px">{{item.name}}</span>
|
||||||
|
<span style="width: 50px">{{item.digital}}</span>
|
||||||
|
<span style="width: 50px">{{item.mechanism}}</span>
|
||||||
|
<span style="width: 50px">{{item.digitalKey}}</span>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="risk">低风险</div>
|
||||||
|
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div>排名</div>
|
||||||
|
<div style="margin-left: 10px">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 4-->
|
||||||
|
<div class="fold-content_item_index">
|
||||||
|
<div class="fold-content_item_index_top">
|
||||||
|
<div class="content">某某央厨</div>
|
||||||
|
<span>屏幕</span>
|
||||||
|
</div>
|
||||||
|
<div class="intermediate" v-for="item in List" :key="item.key">
|
||||||
|
<span style="width: 50px">{{item.name}}</span>
|
||||||
|
<span style="width: 50px">{{item.digital}}</span>
|
||||||
|
<span style="width: 50px">{{item.mechanism}}</span>
|
||||||
|
<span style="width: 50px">{{item.digitalKey}}</span>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="risk">低风险</div>
|
||||||
|
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div>排名</div>
|
||||||
|
<div style="margin-left: 10px">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 5-->
|
||||||
|
<div class="fold-content_item_index">
|
||||||
|
<div class="fold-content_item_index_top">
|
||||||
|
<div class="content">某某央厨</div>
|
||||||
|
<span>屏幕</span>
|
||||||
|
</div>
|
||||||
|
<div class="intermediate" v-for="item in List" :key="item.key">
|
||||||
|
<span style="width: 50px">{{item.name}}</span>
|
||||||
|
<span style="width: 50px">{{item.digital}}</span>
|
||||||
|
<span style="width: 50px">{{item.mechanism}}</span>
|
||||||
|
<span style="width: 50px">{{item.digitalKey}}</span>
|
||||||
|
</div>
|
||||||
|
<hr/>
|
||||||
|
<div style="display: flex;align-items: center;justify-content: space-between">
|
||||||
|
<div style="display: flex;">
|
||||||
|
<div class="risk">低风险</div>
|
||||||
|
<div style="font-weight: bold;color: #009688 !important;margin-left: 10px;line-height: 18px">100分</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<div>排名</div>
|
||||||
|
<div style="margin-left: 10px">1</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</div>
|
||||||
<a-card :bordered="false" class="homeItem">
|
<div style="width: 25%"></div>
|
||||||
<div>
|
|
||||||
<a-button type="primary" style="margin-right: 10px">
|
|
||||||
<template #icon>
|
|
||||||
<PlusOutlined />
|
|
||||||
</template>
|
|
||||||
新增</a-button
|
|
||||||
>
|
|
||||||
<a-button
|
|
||||||
type="primary"
|
|
||||||
:disabled="!hasSelected"
|
|
||||||
:loading="state.loading"
|
|
||||||
@click="start"
|
|
||||||
>
|
|
||||||
Reload {{ state.selectedRowKeys.length }}
|
|
||||||
</a-button>
|
|
||||||
</div>
|
|
||||||
<div style="margin-bottom: 16px"></div>
|
|
||||||
<a-table
|
|
||||||
:row-selection="{
|
|
||||||
selectedRowKeys: state.selectedRowKeys,
|
|
||||||
onChange: onSelectChange,
|
|
||||||
}"
|
|
||||||
:columns="columns"
|
|
||||||
:data-source="data"
|
|
||||||
:scroll="{ x: 1500, y: 430 }"
|
|
||||||
/>
|
|
||||||
</a-card>
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="tsx" setup>
|
<script setup lang="ts">
|
||||||
import { PlusOutlined, ZoomInOutlined } from "@ant-design/icons-vue";
|
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||||||
import {computed, reactive, ref} from "vue";
|
import {ref} from "vue";
|
||||||
|
import {CollapseProps} from "ant-design-vue";
|
||||||
|
|
||||||
type Key = string | number;
|
const isFold = ref(true)
|
||||||
|
const toggleFold = ()=>{
|
||||||
interface DataType {
|
isFold.value = !isFold.value
|
||||||
key: Key;
|
|
||||||
name: string;
|
|
||||||
age: number;
|
|
||||||
address: string;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const columns = [
|
const List = ref([
|
||||||
{
|
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
|
||||||
title: "名字",
|
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
|
||||||
dataIndex: "name",
|
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
|
||||||
customRender: (text: any) => {
|
])
|
||||||
return text.value;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "年龄",
|
|
||||||
dataIndex: "age",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: "地址",
|
|
||||||
dataIndex: "address",
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: " 操作",
|
|
||||||
dataIndex: "operation",
|
|
||||||
customRender: () => {
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<a-button type="primary" danger class="margin-right-sm" >
|
|
||||||
删除
|
|
||||||
</a-button>
|
|
||||||
<a-button class="margin-right-sm">查看</a-button>
|
|
||||||
<a-button type="primary">编辑</a-button>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const dataSource = ref([])
|
|
||||||
const data: DataType[] = [];
|
|
||||||
for (let i = 0; i < 100; i++) {
|
|
||||||
dataSource.value = data.push({
|
|
||||||
key: i,
|
|
||||||
name: `小明 ${i}`,
|
|
||||||
age: 32 + i,
|
|
||||||
address: `湖南省长沙市岳麓区. ${i}`,
|
|
||||||
})as any;
|
|
||||||
}
|
|
||||||
|
|
||||||
const state = reactive<{
|
|
||||||
selectedRowKeys: Key[];
|
|
||||||
loading: boolean;
|
|
||||||
}>({
|
|
||||||
selectedRowKeys: [], //单击此处配置默认列
|
|
||||||
loading: false,
|
|
||||||
});
|
|
||||||
const hasSelected = computed(() => state.selectedRowKeys.length > 0);
|
|
||||||
|
|
||||||
const start = () => {
|
|
||||||
state.loading = true;
|
|
||||||
// ajax request after empty completing
|
|
||||||
setTimeout(() => {
|
|
||||||
state.loading = false;
|
|
||||||
state.selectedRowKeys = [];
|
|
||||||
}, 1000);
|
|
||||||
};
|
|
||||||
const onSelectChange = (selectedRowKeys: Key[]) => {
|
|
||||||
console.log("selectedRowKeys changed: ", selectedRowKeys);
|
|
||||||
state.selectedRowKeys = selectedRowKeys;
|
|
||||||
};
|
|
||||||
</script>
|
</script>
|
||||||
|
<style scoped lang="scss">
|
||||||
<style lang="scss" scoped>
|
.home{
|
||||||
.home {
|
display: flex;
|
||||||
height: calc(100vh - 130px);
|
justify-content: space-between;
|
||||||
// background: #fff;
|
align-items: center;
|
||||||
overflow: hidden;
|
font-size: 14px;
|
||||||
.homeIndex {
|
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||||
display: flex;
|
.homeItem{
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
.homeItem {
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: calc(100vh - 100px);
|
background: #ffffff;
|
||||||
overflow: hidden;
|
margin-bottom: 10px;
|
||||||
margin-top: 20px;
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
|
||||||
|
padding: 10px 15px;
|
||||||
|
.homeItemIndex{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
line-height: 1.6;
|
||||||
|
border-left: 5px solid #5FB878;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
padding-left: 10px;
|
||||||
|
.homeSpan{
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #FF5722;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 2px
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.home2Item{
|
||||||
|
width: 100%;
|
||||||
|
background: #ffffff;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
box-shadow: 0 1px 2px 0 rgba(0, 0, 0, .05);
|
||||||
|
padding: 10px 15px;
|
||||||
|
.header-wrapper {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fold-button {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
gap: 8px;
|
||||||
|
color: #1890ff;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fold-button:hover {
|
||||||
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fold-button i {
|
||||||
|
transition: transform 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fold-content {
|
||||||
|
border-top: 1px solid #f0f0f0;
|
||||||
|
.fold-content_item{
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
.fold-content_item_index{
|
||||||
|
padding: 10px;
|
||||||
|
min-height: 90px;
|
||||||
|
border-radius: 5px;
|
||||||
|
border-color: #eee;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
background-color: #fff;
|
||||||
|
color: #666;
|
||||||
|
box-shadow: 1px 1px 4px rgb(0 0 0 / 8%);
|
||||||
|
width: 24%;
|
||||||
|
margin-right: 5px;
|
||||||
|
margin-bottom: 15px;
|
||||||
|
.fold-content_item_index_top{
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
.content{
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 16px !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.intermediate{
|
||||||
|
padding: 5px 7px;
|
||||||
|
margin-top: 5px;
|
||||||
|
font-size: 12px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
hr{
|
||||||
|
line-height: 0;
|
||||||
|
margin: 10px 0;
|
||||||
|
padding: 0;
|
||||||
|
border: none !important;
|
||||||
|
border-bottom: 1px solid #eee !important;
|
||||||
|
clear: both;
|
||||||
|
background: 0 0
|
||||||
|
}
|
||||||
|
.risk{
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0 6px;
|
||||||
|
font-size: 12px;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #FF5722;
|
||||||
|
color: #fff;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.homeItem2Index{
|
||||||
|
margin-bottom: 10px;
|
||||||
|
border-left: 5px solid #5FB878;
|
||||||
|
border-radius: 0 2px 2px 0;
|
||||||
|
padding-left: 10px;
|
||||||
|
height: 18px;
|
||||||
|
line-height: 18px
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue