From 753365c5db3be3be4f40234f21f77635c5270a49 Mon Sep 17 00:00:00 2001
From: yangfeng <wanwan926_4@163.com>
Date: 星期五, 01 十二月 2023 10:13:43 +0800
Subject: [PATCH] 智能驾驶舱页面样式布局
---
src/components/cockpitPage/BackgroundBoardLayout.vue | 171 ++++++++++++++++++++++++++++++++++++++++++
public/cockpit-bg.jpg | 0
src/views/cockpitPage/index.vue | 21 +++++
src/router/index.js | 25 +++---
4 files changed, 205 insertions(+), 12 deletions(-)
diff --git a/public/cockpit-bg.jpg b/public/cockpit-bg.jpg
new file mode 100644
index 0000000..0858029
--- /dev/null
+++ b/public/cockpit-bg.jpg
Binary files differ
diff --git a/src/components/cockpitPage/BackgroundBoardLayout.vue b/src/components/cockpitPage/BackgroundBoardLayout.vue
new file mode 100644
index 0000000..bd0f3a4
--- /dev/null
+++ b/src/components/cockpitPage/BackgroundBoardLayout.vue
@@ -0,0 +1,171 @@
+<template>
+ <div class="dashboard-layout">
+ <div class="dashboard-title">鏅鸿兘椹鹃┒鑸�</div>
+ <div class="left">
+ <div class="left-header-block">
+ <slot name="leftBlock1"></slot>
+ </div>
+ <div class="left-bottom-block">
+ <div class="left-bottom-left-block">
+ <div class="left-bottom-top-block">
+ <slot name="leftBlock2"></slot>
+ </div>
+ <div class="left-bottom-middle-block">
+ <slot name="leftBlock3"></slot>
+ </div>
+ <div class="left-bottom-bottom-block">
+ <slot name="leftBlock4"></slot>
+ </div>
+ </div>
+ <div class="left-bottom-right-block">
+ <div class="right-bottom-top-block">
+ <slot name="leftBlock2"></slot>
+ </div>
+ <div class="right-bottom-bottom-block">
+ <slot name="leftBlock3"></slot>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="right">
+ <div class="right-bg">
+ <div class="right-top-block">
+ <slot name="rightBlock1"></slot>
+ </div>
+ <div class="right-middle-block">
+ <slot name="rightBlock2"></slot>
+ </div>
+ <div class="right-bottom-block">
+ <slot name="rightBlock3"></slot>
+ </div>
+ </div>
+ </div>
+ </div>
+</template>
+
+<script></script>
+
+<style scoped lang="scss">
+// 宸︿晶鍖哄煙瀹�
+$leftWidth: 73%;
+// 鍙充晶鍖哄煙瀹�
+$rightWidth: 27%;
+// 鏁翠綋鍐呰竟璺�
+$layoutPadding: 12px;
+// 涓婅竟鍥哄畾楂�
+$topBlockHeight: 100px;
+// 宸︿晶澶撮儴鏁版嵁楂樺害
+$leftHeaderHeight: 85px;
+// 鏁翠綋鍐呭宸﹁竟璺�
+$leftMargin: 80px;
+// 鏁翠綋鍐呭鍙宠竟璺�
+$rightMargin: 65px;
+// 宸︿晶甯冨眬鍧楅珮搴�
+$leftBlockHeight: calc(100vh - 225px);
+// 鍙充晶甯冨眬鍧楅珮搴�
+$rightBlockHeight: calc(100vh - 120px);
+// 宸︿笅宸︿晶鍖哄煙瀹�
+$leftBottomLeftWidth: 35%;
+// 宸︿笅鍙充晶鍖哄煙瀹�
+$leftBottomRightWidth: 65%;
+
+.dashboard-layout {
+ background-image: url("/cockpit-bg.jpg");
+ background-position-x: center;
+ background-repeat: no-repeat;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ height: 100vh;
+ width: 100vw;
+ .dashboard-title {
+ width: 100%;
+ text-align: center;
+ position: absolute;
+ top: 10px;
+ font-size: 32px;
+ color: #01f5fe;
+ font-weight: 700;
+ font-family: "Arial Negreta", "Arial Normal", "Arial";
+ }
+ &.debug {
+ & > div {
+ border: 1px solid red;
+ & > div {
+ border: 1px solid red;
+ }
+ }
+ }
+}
+
+.left {
+ width: $leftWidth;
+ margin-left: $leftMargin;
+}
+.right {
+ width: $rightWidth;
+ margin-right: $rightMargin;
+}
+
+.left,
+.right {
+ height: 100%;
+ overflow: hidden;
+}
+
+.left-header-block {
+ height: $leftHeaderHeight;
+ margin-top: $topBlockHeight;
+ background: #dd3535;
+}
+.left-bottom-block {
+ margin-top: 20px;
+ height: $leftBlockHeight;
+ display: flex;
+ .left-bottom-left-block {
+ width: $leftBottomLeftWidth;
+ height: 100%;
+ .left-bottom-top-block {
+ height: 40%;
+ background: #9135dd;
+ }
+ .left-bottom-middle-block {
+ height: 25%;
+ background: #dd35a5;
+ }
+ .left-bottom-bottom-block {
+ height: 35%;
+ background: #dd355f;
+ }
+ }
+ .left-bottom-right-block {
+ width: $leftBottomRightWidth;
+ height: 100%;
+ .right-bottom-top-block {
+ height: 60%;
+ background: #35ddc7;
+ }
+ .right-bottom-bottom-block {
+ height: 40%;
+ background: #35dd8f;
+ }
+ }
+}
+
+.right-bg {
+ margin-top: $topBlockHeight;
+ height: $rightBlockHeight;
+}
+.right-top-block {
+ height: 30%;
+ background: #9135dd;
+}
+.right-middle-block {
+ height: 35%;
+ background: #dd35a5;
+}
+.right-bottom-block {
+ height: 35%;
+ background: #dd355f;
+}
+</style>
diff --git a/src/router/index.js b/src/router/index.js
index 663c8b9..d739c6f 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,19 +1,19 @@
-import Vue from "vue"
-import VueRouter from "vue-router"
-import HomeView from "../views/visualization.vue"
+import Vue from "vue";
+import VueRouter from "vue-router";
+import HomeView from "../views/cockpitPage/index.vue";
-Vue.use(VueRouter)
+Vue.use(VueRouter);
const routes = [
{
path: "/",
name: "home",
- component: HomeView
+ component: HomeView,
},
{
path: "/set",
name: "set",
- component: () => import(/* webpackChunkName: "about" */ "../views/set.vue")
+ component: () => import(/* webpackChunkName: "about" */ "../views/set.vue"),
},
{
path: "/about",
@@ -21,14 +21,15 @@
// route level code-splitting
// this generates a separate chunk (about.[hash].js) for this route
// which is lazy-loaded when the route is visited.
- component: () => import(/* webpackChunkName: "about" */ "../views/AboutView.vue")
- }
-]
+ component: () =>
+ import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
+ },
+];
const router = new VueRouter({
mode: "history",
base: process.env.BASE_URL,
- routes
-})
+ routes,
+});
-export default router
+export default router;
diff --git a/src/views/cockpitPage/index.vue b/src/views/cockpitPage/index.vue
new file mode 100644
index 0000000..ffaeb1d
--- /dev/null
+++ b/src/views/cockpitPage/index.vue
@@ -0,0 +1,21 @@
+<template>
+ <BackgroundBoardLayout></BackgroundBoardLayout>
+</template>
+
+<script>
+import BackgroundBoardLayout from "@/components/cockpitPage/BackgroundBoardLayout.vue";
+export default {
+ components: {
+ BackgroundBoardLayout,
+ },
+ props: {},
+ data() {
+ return {};
+ },
+ mounted() {},
+ watch: {},
+ methods: {},
+};
+</script>
+
+<style scoped lang="scss"></style>
--
Gitblit v1.8.0