feat: 园区布局完成
This commit is contained in:
parent
40fbf97519
commit
179ac9accd
|
|
@ -27,4 +27,9 @@ const route = useRoute();
|
|||
background: url('@/assets/images/bg/bg-layout.png') no-repeat center;
|
||||
background-size: cover;
|
||||
}
|
||||
|
||||
main {
|
||||
width: 100%;
|
||||
height: calc(100% - 108px);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@ const routes: RouteRecordRaw[] = [...remaining, ...error];
|
|||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
routes,
|
||||
scrollBehavior: () => ({ x: 0, y: 0, behavior: 'smooth' }),
|
||||
scrollBehavior: () => ({ top: 0, behavior: 'smooth' }),
|
||||
});
|
||||
|
||||
/** 全局注册 router */
|
||||
|
|
|
|||
|
|
@ -4,7 +4,7 @@ const routes: RouteConfigsTable[] = [
|
|||
{
|
||||
path: '/welcome',
|
||||
name: 'welcome',
|
||||
component: () => import('@/views/home/index.vue'),
|
||||
component: () => import('@/views/welcome/index.vue'),
|
||||
meta: { transition: 'fade', title: '后台管理系统大标题' },
|
||||
},
|
||||
{
|
||||
|
|
@ -13,6 +13,12 @@ const routes: RouteConfigsTable[] = [
|
|||
component: () => import('@/views/smart-parking/index.vue'),
|
||||
meta: { title: '智慧智能监管中心', subtitle: '车辆监控中心' },
|
||||
},
|
||||
{
|
||||
path: '/manage-forms',
|
||||
name: 'manageForms',
|
||||
component: () => import('@/views/manage-forms/index.vue'),
|
||||
meta: { title: '智慧经营监管中心', subtitle: '园区经营可视化' },
|
||||
},
|
||||
];
|
||||
|
||||
export default routes;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,17 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="content-container">
|
||||
<ul class="card-list">
|
||||
<li>进出口</li>
|
||||
</ul>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.content-container {
|
||||
width: 759px;
|
||||
height: 100%;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="manage-container flex-y-between">
|
||||
<div class="money">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
|
||||
<div class="enterprise-info">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
|
||||
<div class="plan">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage-container {
|
||||
width: 530px;
|
||||
height: 100%;
|
||||
|
||||
.money {
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
|
||||
.enterprise-info {
|
||||
width: 530px;
|
||||
height: 354px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
|
||||
.plan {
|
||||
width: 530px;
|
||||
height: 294px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,42 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template>
|
||||
<div class="manage-container flex-y-between">
|
||||
<div class="money">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
|
||||
<div class="enterprise-info">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
|
||||
<div class="plan">
|
||||
<h1>园区进出口金额</h1>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage-container {
|
||||
width: 530px;
|
||||
height: 100%;
|
||||
|
||||
.money {
|
||||
width: 100%;
|
||||
height: 246px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
|
||||
.enterprise-info {
|
||||
width: 530px;
|
||||
height: 354px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
|
||||
.plan {
|
||||
width: 530px;
|
||||
height: 294px;
|
||||
background: mediumpurple;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
<script lang="ts" setup>
|
||||
import MangeContent from '@/views/manage-forms/components/manage-content/index.vue';
|
||||
import ManageLeft from '@/views/manage-forms/components/manage-left/index.vue';
|
||||
import ManageRight from '@/views/manage-forms/components/manage-right/index.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="manage flex-x-between">
|
||||
<manage-left />
|
||||
<mange-content />
|
||||
<manage-right />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.manage {
|
||||
padding: 19px 25px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: #20a0ff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,5 +0,0 @@
|
|||
<script lang="ts" setup></script>
|
||||
|
||||
<template></template>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
|
|
@ -5,7 +5,7 @@ import TruckMonitor from '@/views/smart-parking/components/parking-content/truck
|
|||
</script>
|
||||
|
||||
<template>
|
||||
<main class="mt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
|
||||
<main class="pt-[78px] mx-auto flex-center w-[1620px] h-[650px]">
|
||||
<road-condition />
|
||||
<truck-monitor />
|
||||
<traffic-overview />
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts" setup>
|
||||
import PageList from '@/views/home/layout-content/page-list.vue';
|
||||
import PageList from '@/views/welcome/components/welcome-content/page-list.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -7,23 +7,23 @@ const router = useRouter();
|
|||
<template>
|
||||
<ul class="page-list flex-x-between">
|
||||
<li class="flex-y-center" @click="router.push('/smart-parking')">
|
||||
<img alt="car" src="../../../assets/images/icon/smart/car.png" />
|
||||
<img alt="car" src="@/assets/images/icon/smart/car.png" />
|
||||
<span>智慧停车</span>
|
||||
</li>
|
||||
<li class="flex-y-center">
|
||||
<img alt="distribution" src="../../../assets/images/icon/smart/distribution.png" />
|
||||
<img alt="distribution" src="@/assets/images/icon/smart/distribution.png" />
|
||||
<span>智慧配送</span>
|
||||
</li>
|
||||
<li class="flex-y-center">
|
||||
<img alt="muck" src="../../../assets/images/icon/smart/muck.png" />
|
||||
<img alt="muck" src="@/assets/images/icon/smart/muck.png" />
|
||||
<span>智慧渣土</span>
|
||||
</li>
|
||||
<li class="flex-y-center">
|
||||
<img alt="clean-city" src="../../../assets/images/icon/smart/clean-city.png" />
|
||||
<img alt="clean-city" src="@/assets/images/icon/smart/clean-city.png" />
|
||||
<span>智慧洁城</span>
|
||||
</li>
|
||||
<li class="flex-y-center">
|
||||
<img alt="lamp" src="../../../assets/images/icon/smart/lamp.png" />
|
||||
<img alt="lamp" src="@/assets/images/icon/smart/lamp.png" />
|
||||
<span>智慧路灯</span>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
@ -5,8 +5,8 @@ const router = useRouter();
|
|||
|
||||
const list = [
|
||||
{ icon: 'material-symbols:home-and-garden', name: '园区', target: '/' },
|
||||
{ icon: 'ri:community-fill', name: '园区', target: '/' },
|
||||
{ icon: 'ri:community-fill', name: '园区', target: '/' },
|
||||
{ icon: 'fa:building', name: '园区', target: '/' },
|
||||
{ icon: 'fa-solid:chart-line', name: '经营', target: '/manage-forms' },
|
||||
{ icon: 'ri:community-fill', name: '园区', target: '/' },
|
||||
];
|
||||
</script>
|
||||
|
|
@ -14,7 +14,7 @@ const list = [
|
|||
<template>
|
||||
<footer class="flex-y-around">
|
||||
<ul class="flex-x-between">
|
||||
<li v-for="(item, index) in list" :key="index">
|
||||
<li v-for="(item, index) in list" :key="index" @click="router.push(item.target)">
|
||||
<i :class="`i-${item.icon}`" />
|
||||
<span class="hover">{{ item.name }}</span>
|
||||
</li>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts" setup>
|
||||
import LayoutContent from '@/views/home/layout-content/index.vue';
|
||||
import LayoutFooter from '@/views/home/layout-footer/index.vue';
|
||||
import LayoutContent from '@/views/welcome/components/welcome-content/index.vue';
|
||||
import LayoutFooter from '@/views/welcome/components/welcome-footer/index.vue';
|
||||
</script>
|
||||
|
||||
<template>
|
||||
Loading…
Reference in New Issue