init

1.初始化项目
2023-11-21 14:31:55 +08:00
commit e54c697d7a
23 changed files with 1179 additions and 0 deletions
@@ -0,0 +1,96 @@
+<script setup lang="ts">
+
+import OneL from "../components/body-d-left/oneL.vue";
+import TwoL from "../components/body-d-left/twoL.vue";
+import OneR from "../components/body-d-right/oneR.vue";
+import TwoR from "../components/body-d-right/twoR.vue";
+import ThreeR from "../components/body-d-right/threeR.vue";
+</script>
+
+<template>
+    <div class="outer">
+        <div class="title-d">
+            <div class="title-d-left">
+                left
+            </div>
+            <div class="title-d-middle">
+            </div>
+            <div class="title-d-right">
+                right
+            </div>
+        </div>
+        <div class="body-d">
+            <div class="body-d-left">
+                <one-l/>
+                <two-l/>
+                <two-l/>
+            </div>
+            <div class="body-d-middle">
+                <div></div>
+            </div>
+            <div class="body-d-right">
+                <one-r/>
+                <two-r/>
+                <three-r/>
+            </div>
+        </div>
+    </div>
+</template>
+
+<style lang="less" scoped>
+.outer {
+    height: 100%;
+    box-sizing: border-box;
+    background: url("../assets/bg.png") no-repeat;
+    background-size: 100% 100%;
+}
+
+.title-d {
+    height: 80px;
+    line-height: 80px;
+    display: flex;
+    padding-bottom: 9px;
+    border-bottom: 1px dashed #e6e6e6;
+    background: url("../assets/top-title.png") no-repeat;
+    background-size: 100% 100%;
+
+    .title-d-left, .title-d-middle, .title-d-right {
+        width: calc(100% / 3);
+        text-align: center;
+        border-right: 1px solid red;
+    }
+
+}
+
+.body-d {
+    display: flex;
+    height: calc(100% - 80px);
+    padding-top: 10px;
+
+    > :nth-child(1) {
+        width: 25%;
+    }
+
+    > :nth-child(2) {
+        width: 50%;
+    }
+
+    > :nth-child(3) {
+        width: 25%;
+    }
+
+    .body-d-left, .body-d-middle, .body-d-right {
+        text-align: center;
+    }
+
+    .body-d-left, .body-d-right {
+
+        > :nth-child(n) {
+            width: 100%;
+            height: calc(100% / 3);
+            border: 1px solid red;
+            padding: 10px;
+        }
+    }
+}
+</style>