框架-菜单

src/assets/base.css

@@ -1,74 +1,16 @@
 /* color palette from <https://github.com/vuejs/theme> */
 :root {
-  --vt-c-white: #ffffff;
-  --vt-c-white-soft: #f8f8f8;
-  --vt-c-white-mute: #f2f2f2;
-
-  --vt-c-black: #181818;
-  --vt-c-black-soft: #222222;
-  --vt-c-black-mute: #282828;
-
-  --vt-c-indigo: #2c3e50;
-
-  --vt-c-divider-light-1: rgba(60, 60, 60, 0.29);
-  --vt-c-divider-light-2: rgba(60, 60, 60, 0.12);
-  --vt-c-divider-dark-1: rgba(84, 84, 84, 0.65);
-  --vt-c-divider-dark-2: rgba(84, 84, 84, 0.48);
-
-  --vt-c-text-light-1: var(--vt-c-indigo);
-  --vt-c-text-light-2: rgba(60, 60, 60, 0.66);
-  --vt-c-text-dark-1: var(--vt-c-white);
-  --vt-c-text-dark-2: rgba(235, 235, 235, 0.64);
+  --vt-c-white: #fff2cc;
+  --vt-c-black: #66363c;
 }
 
-/* semantic color variables for this project */
 :root {
   --color-background: var(--vt-c-white);
-  --color-background-soft: var(--vt-c-white-soft);
-  --color-background-mute: var(--vt-c-white-mute);
-
-  --color-border: var(--vt-c-divider-light-2);
-  --color-border-hover: var(--vt-c-divider-light-1);
-
-  --color-heading: var(--vt-c-text-light-1);
-  --color-text: var(--vt-c-text-light-1);
-
-  --section-gap: 160px;
-}
-
-@media (prefers-color-scheme: dark) {
-  :root {
-    --color-background: var(--vt-c-black);
-    --color-background-soft: var(--vt-c-black-soft);
-    --color-background-mute: var(--vt-c-black-mute);
-
-    --color-border: var(--vt-c-divider-dark-2);
-    --color-border-hover: var(--vt-c-divider-dark-1);
-
-    --color-heading: var(--vt-c-text-dark-1);
-    --color-text: var(--vt-c-text-dark-2);
-  }
-}
-
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-  margin: 0;
-  position: relative;
-  font-weight: normal;
 }
 
 body {
   min-height: 100vh;
-  color: var(--color-text);
-  background: var(--color-background);
-  transition: color 0.5s, background-color 0.5s;
-  line-height: 1.6;
-  font-family: Inter, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu,
-    Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
-  font-size: 15px;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
+  color: var(--vt-c-black);
+  background: var(--vt-c-white);
+
 }

src/assets/main.css

@@ -1,35 +1,5 @@
 @import './base.css';
 
 #app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-
-  font-weight: normal;
-}
-
-a,
-.green {
-  text-decoration: none;
-  color: hsla(160, 100%, 37%, 1);
-  transition: 0.4s;
-}
-
-@media (hover: hover) {
-  a:hover {
-    background-color: hsla(160, 100%, 37%, 0.2);
-  }
-}
-
-@media (min-width: 1024px) {
-  body {
-    display: flex;
-    place-items: center;
-  }
-
-  #app {
-    display: grid;
-    grid-template-columns: 1fr 1fr;
-    padding: 0 2rem;
-  }
+  width: 100%;
 }

src/components/studio-one-green/home-1.vue

@@ -1,41 +1,46 @@
 <template>
   <div id="home">
-    <el-container>
-      <el-header>
-        <HomeHead></HomeHead>
-      </el-header>
-      <el-container>
-        <el-aside class="one">
-          <HomeLeft></HomeLeft>
-        </el-aside>
-        <el-main class="two">
-          <el-scrollbar>
-            <router-view></router-view>
-          </el-scrollbar>
+    <el-container class="main" :style="{ background: styleInfo.main_bg_color }">
+      <el-aside class="one" :style="{ background: styleInfo.aside_bg_color, 'border-color': styleInfo.aside_border_color }">
+        <HomeLeft></HomeLeft>
+      </el-aside>
+      <el-container class="two" :style="{ background: styleInfo.con_bg_color }">
+        <el-header class="two_1">
+          <HomeHead></HomeHead>
+        </el-header>
+        <el-main class="two_2" :style="{ background: styleInfo.conmain_bg_color, 'border-color': styleInfo.aside_border_color }">
+          <router-view></router-view>
         </el-main>
       </el-container>
     </el-container>
   </div>
 </template>
 <script setup lang="ts">
+import { studio_style_Info } from '../../layout/site';
 import HomeLeft from './homeParts/left-1.vue';
 import HomeHead from './homeParts/header-1.vue';
+let styleInfo = studio_style_Info;
 </script>
 
 <style scoped lang="scss">
-.el-header {
-  padding: 0;
-  background-color: $red;
-  border-bottom: 2px solid $white;
-}
-.one {
-  width: 200px;
-  border-right: 2px solid $white;
-}
-.two {
-  height: 92vh;
-  .router-view {
-    height: 92vh;
+.main {
+  display: flex;
+  width: 100vw;
+  height: 100vh;
+  .one {
+    border-radius: 10px;
+    margin: 0.5vw;
+    padding: 0.5vw;
+    border: 1px solid;
+  }
+  .two {
+    min-width: 1200px;
+    .two_2 {
+      border-radius: 10px;
+      margin: 0.5vw;
+      padding: 0.5vw;
+      border: 1px solid;
+    }
   }
 }
 </style>

src/components/studio-one-green/home-2.vue

@@ -1,13 +1,63 @@
 <template>
   <div id="home-2">
-    <el-row>
-      <el-col :span="24" class="main"> test </el-col>
-    </el-row>
+    <el-container class="main">
+      <el-header>
+        <HomeHead></HomeHead>
+      </el-header>
+      <el-container class="two">
+        <el-aside width="300px">
+          <HomeLeft></HomeLeft>
+        </el-aside>
+        <el-main>
+          <el-col :span="24" class="two_1">
+            <router-view></router-view>
+          </el-col>
+        </el-main>
+      </el-container>
+    </el-container>
   </div>
 </template>
 
 <script setup lang="ts">
-import type { Ref } from 'vue';
-import { ref, toRefs } from 'vue';
+import HomeLeft from './parts/left-1.vue';
+import HomeHead from './parts/header-1.vue';
 </script>
-<style scoped></style>
+
+<style scoped lang="scss">
+.main {
+  display: flex;
+  overflow: hidden;
+  width: 100vw;
+  height: 100vh;
+  padding: 10px;
+  // background-color: #fff2cc;
+  .el-header {
+    padding: 10px;
+    margin: 0 0 10px 0;
+    background-color: #e2f0d9;
+    border-radius: 10px;
+    border: 1px solid #727e96;
+  }
+  .two {
+    .el-aside {
+      background-color: #e2f0d9;
+      border-radius: 10px;
+      padding: 0.5vw;
+      margin: 0 0.5vw 0 0;
+      border: 1px solid #727e96;
+    }
+    .el-main {
+      padding: 0;
+      border-radius: 10px;
+      background-color: #dae3f3;
+      border: 1px solid #727e96;
+      .two_1 {
+        display: flex;
+        height: 90vh;
+        padding: 10px;
+        flex-direction: column;
+      }
+    }
+  }
+}
+</style>

src/components/studio-one-green/home-3.vue

@@ -1,13 +1,9 @@
 <template>
-  <div id="home-3">
-    <el-row>
-      <el-col :span="24" class="main"> test </el-col>
-    </el-row>
+  <div id="home-2">
+    <router-view></router-view>
   </div>
 </template>
 
-<script setup lang="ts">
-import type { Ref } from 'vue';
-import { ref, toRefs } from 'vue';
-</script>
-<style scoped></style>
+<script setup lang="ts"></script>
+
+<style scoped lang="scss"></style>

src/components/studio-one-green/home.vue

@@ -1,64 +1,17 @@
 <template>
   <div id="home">
-    <el-container class="main">
-      <el-header>
-        <HomeHead></HomeHead>
-      </el-header>
-      <el-container>
-        <el-aside class="two">
-          <HomeLeft></HomeLeft>
-        </el-aside>
-        <el-main class="two">
-          <el-scrollbar>
-            <el-col :span="24" class="two_1">
-              <router-view></router-view>
-            </el-col>
-          </el-scrollbar>
-        </el-main>
-      </el-container>
-    </el-container>
+    <home1 v-if="type == '1'"></home1>
+    <home2 v-else-if="type == '2'"></home2>
+    <home3 v-else-if="type == '3'"></home3>
   </div>
 </template>
 <script setup lang="ts">
-import HomeLeft from './homeParts/left-1.vue';
-import HomeHead from './homeParts/header-1.vue';
+import { ref } from 'vue';
+import type { Ref } from 'vue';
+import home1 from './home-1.vue';
+import home2 from './home-2.vue';
+import home3 from './home-3.vue';
+let type: Ref<string> = ref('2');
 </script>
 
-<style scoped lang="scss">
-.main {
-  display: flex;
-  overflow: hidden;
-  width: 100vw;
-  height: 100vh;
-  padding: 10px;
-  background-color: #fff2cc;
-  .el-header {
-    padding: 10px;
-    margin: 0 0 10px 0;
-    background-color: #e2f0d9;
-    border-radius: 10px;
-    border: 1px solid #727e96;
-  }
-  .two {
-    .el-aside {
-      background-color: #e2f0d9;
-      border-radius: 10px;
-      padding: 0.5vw;
-      margin: 0 0.5vw 0 0;
-      border: 1px solid #727e96;
-    }
-    .el-main {
-      padding: 0;
-      border-radius: 10px;
-      background-color: #dae3f3;
-      border: 1px solid #727e96;
-      .two_1 {
-        display: flex;
-        height: 90vh;
-        padding: 10px;
-        flex-direction: column;
-      }
-    }
-  }
-}
-</style>
+<style scoped lang="scss"></style>

src/components/studio-one-green/homeParts/header-1.vue

@@ -49,6 +49,8 @@ const modulePath = (value: any) => {
 
 <style lang="scss" scoped>
 .main {
+  display: flex;
+  flex-direction: row;
   .one {
     text-align: left;
     margin: 1vw 0;

src/components/studio-one-green/parts/header-1.vue

@@ -48,6 +48,8 @@ const modulePath = (value: any) => {
 
 <style lang="scss" scoped>
 .main {
+  display: flex;
+  flex-direction: row;
   .one {
     span {
       display: inline-block;

src/stores/user/mutations.ts

@@ -1,3 +0,0 @@
-export const setUser = (state: { user: { role_type: string; lab_id: string } }, payload: { role_type: string; lab_id: string }) => {
-  state.user = payload;
-};

src/stores/user/state.ts

@@ -1 +0,0 @@
-export const user = {};