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) => {
|
||||
//动态设置标题
|
||||
const title: string = "后台管理系统";
|
||||
const title: string = "智慧食堂系统";
|
||||
document.title = to.meta.name ? `${to.meta.name} - ${title}` : title;
|
||||
//todo 鉴权操作...
|
||||
const userStore = useUserStore();
|
||||
|
|
|
|||
|
|
@ -1,161 +1,301 @@
|
|||
<template>
|
||||
<div class="home">
|
||||
<a-card :bordered="false" style="width: 100%">
|
||||
<div class="homeIndex">
|
||||
<div>
|
||||
<a-form name="horizontal_login" layout="inline" autocomplete="off">
|
||||
<a-form-item label="名字" name="username">
|
||||
<a-input placeholder="请输入名字"> </a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="年龄" name="username">
|
||||
<a-input placeholder="请输入名字"> </a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="地址" name="username">
|
||||
<a-input placeholder="请输入名字"> </a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="时间" name="range-picker">
|
||||
<a-range-picker value-format="YYYY-MM-DD" />
|
||||
</a-form-item>
|
||||
<a-form-item label="名字" name="username">
|
||||
<a-input placeholder="请输入名字"> </a-input>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
<div>
|
||||
<a-button type="primary">
|
||||
<template #icon>
|
||||
<ZoomInOutlined />
|
||||
</template>
|
||||
搜索</a-button
|
||||
>
|
||||
|
||||
<div class="home" >
|
||||
<div style="width: 74%">
|
||||
<div class="homeItem">
|
||||
<blockquote class="homeItemIndex">
|
||||
系统公告
|
||||
<span class="homeSpan">2024-11-25</span>
|
||||
</blockquote>
|
||||
<span>【系统菜单调整通知】</span>
|
||||
<span>为了更方便功能查找使用，从新编排了菜单位置，基础信息相关的页面都在顶部”基础信息“下</span>
|
||||
</div>
|
||||
<div class="home2Item">
|
||||
<blockquote class="homeItem2Index">
|
||||
<div class="header-wrapper">
|
||||
<span>公司</span>
|
||||
<div class="fold-button" @click="toggleFold">
|
||||
<span>{{ isFold ? '展开' : '收起' }}</span>
|
||||
<caret-right-outlined :style="{ transform: isFold ? 'rotate(90deg)' : 'rotate(265deg)' }" />
|
||||
</div>
|
||||
</div>
|
||||
</blockquote>
|
||||
<!-- 折叠内容区域 -->
|
||||
<div :style="{height:isFold?'420px':'600px'}">
|
||||
<div class="fold-content">
|
||||
<!-- 这里放具体内容 -->
|
||||
<div class="fold-content_item">
|
||||
<!-- 1-->
|
||||
<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>
|
||||
</a-card>
|
||||
<a-card :bordered="false" class="homeItem">
|
||||
<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 style="width: 25%"></div>
|
||||
</div>
|
||||
</template>
|
||||
<script lang="tsx" setup>
|
||||
import { PlusOutlined, ZoomInOutlined } from "@ant-design/icons-vue";
|
||||
import {computed, reactive, ref} from "vue";
|
||||
<script setup lang="ts">
|
||||
import { CaretRightOutlined } from '@ant-design/icons-vue';
|
||||
import {ref} from "vue";
|
||||
import {CollapseProps} from "ant-design-vue";
|
||||
|
||||
type Key = string | number;
|
||||
|
||||
interface DataType {
|
||||
key: Key;
|
||||
name: string;
|
||||
age: number;
|
||||
address: string;
|
||||
const isFold = ref(true)
|
||||
const toggleFold = ()=>{
|
||||
isFold.value = !isFold.value
|
||||
}
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: "名字",
|
||||
dataIndex: "name",
|
||||
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;
|
||||
};
|
||||
const List = ref([
|
||||
{key:1,name:'环境监测',digital:'0 / 0', mechanism:'留样柜',digitalKey:'1 / 1'},
|
||||
{key:2,name:'晨检机',digital:'1 / 1',mechanism:'点评机',digitalKey:'0 / 0'},
|
||||
{key:3,name:'资质',digital:'19',mechanism:'健康证',digitalKey:'94'}
|
||||
])
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.home {
|
||||
height: calc(100vh - 130px);
|
||||
// background: #fff;
|
||||
overflow: hidden;
|
||||
.homeIndex {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.homeItem {
|
||||
<style scoped lang="scss">
|
||||
.home{
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 14px;
|
||||
font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||
.homeItem{
|
||||
width: 100%;
|
||||
height: calc(100vh - 100px);
|
||||
overflow: hidden;
|
||||
margin-top: 20px;
|
||||
background: #ffffff;
|
||||
margin-bottom: 10px;
|
||||
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