liupeng преди 3 години
родител
ревизия
3d9ecf132b
променени са 3 файла, в които са добавени 62 реда и са изтрити 1 реда
  1. 7 0
      index.html
  2. 10 1
      src/App.vue
  3. 45 0
      src/component/Header/index.vue

+ 7 - 0
index.html

@@ -3,6 +3,13 @@
 <head>
   <meta charset="UTF-8"/>
   <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+
+  <link rel="stylesheet" href="./public/static/css/ext/ext-all.css">
+  <link rel="stylesheet" href="./public/static/css/destktop/desktop.css">
+  <link rel="stylesheet" href="./public/static/css/ux/ux-all.css">
+  <link rel="stylesheet" href="./public/static/css/sds/sds.css">
+  <link rel="stylesheet" href="./public/static/css/syno/syno-vue.css">
+  <link rel="stylesheet" href="./public/static/css/style/style.css">
 </head>
 <body>
 <div id="root"></div>

+ 10 - 1
src/App.vue

@@ -1,13 +1,22 @@
 <template>
-  <div>测试 {{ num }}</div>
+  <div class="container">
+    <div class="contain">
+      <Header></Header>
+    </div>
+  </div>
 </template>
 
 <script>
+import Header from '@/components/Header/index.vue'
 export default {
   data() {
     return {
       num: 123456
     }
   },
+  components:{
+    Header
+  }
+
 }
 </script>

+ 45 - 0
src/component/Header/index.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="taskbar-wrapper">
+        <div class="taskbar-left-wrapper">
+            <div class="show-all-button" aria-label="显示桌面"></div>
+            <div class="start-button" aria-label="主菜单">
+                <button class="start-button-img">
+                    <div class="sds-notify-badge-num"></div>
+                </button>
+            </div>
+        </div>
+        <div class="taskbar-buttons-container">
+            <div class="taskbar-buttons-wrapper" style="display: none;"></div>
+        </div>
+        <div class="tray-container">
+            <span class="system-tray-wrapper">
+                <button class="tray-item notify-button system">
+                    <div></div>
+                </button>
+                <button class="tray-item user-button system">
+                    <div></div>
+                </button>
+                <button class="tray-item widget-button system">
+                    <div></div>
+                </button>
+                <button class="tray-item search-button system">
+                    <div></div>
+                </button>
+            </span>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      num: 123456
+    }
+  },
+  name:'Header',
+}
+</script>
+<style lang="">
+    
+</style>