智能驾驶舱页面样式布局

yangfeng

2023-12-01 753365c5db3be3be4f40234f21f77635c5270a49

智能驾驶舱页面样式布局

 public/cockpit-bg.jpg

 src/components/cockpitPage/BackgroundBoardLayout.vue

New file
@@ -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>

 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;

 src/views/cockpitPage/index.vue

New file
@@ -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>