init

src/App.vue

@@ -0,0 +1,108 @@
+<template>
+  <div id="app" @mousedown="windowMove(true)" @mouseup="windowMove(false)">
+    <Home/>
+  </div>
+</template>
+
+<script>
+import {isPc} from '@/util/util.js'
+import Home from './view/home.vue'
+
+export default {
+  name: 'App',
+  components: {
+    Home
+  },
+  methods: {
+    windowMove(canMove) {
+      if (isPc()) {
+        import("electron").then(({ipcRenderer}) => {
+          ipcRenderer.send('window-move-open', canMove ?? false);
+        });
+      }
+    },
+  }
+}
+</script>
+
+<style lang="scss">
+@import url(./assets/font/iconfont.css);
+
+@each $v in (333, 666, 888, 999, '26f', 'f46') {
+  .color-#{$v} {
+    color: \##{$v};
+  }
+}
+
+@each $v in (8, 10, 12, 14, 16, 20, 24, 32, 48, 56, 64, 80) {
+  //gap
+  .gap-#{$v} {
+    gap: #{$v}px
+  }
+  .font-#{$v} {
+    font-size: #{$v}px;
+  }
+  @each $padMar, $pm in (mar:margin, pad:padding) {
+    .#{$padMar}-#{$v} {
+      #{$pm}: #{$v}px
+    }
+    //纵向
+    .#{$padMar}-v#{$v} {
+      #{$pm}-top: #{$v}px;
+      #{$pm}-bottom: #{$v}px;
+    }
+    //横向
+    .#{$padMar}-h#{$v} {
+      #{$pm}-left: #{$v}px;
+      #{$pm}-right: #{$v}px;
+    }
+    @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+      .#{$padMar}-#{$pos+$v} {
+        #{$pm}-#{$p}: #{$v}px
+      }
+    }
+  }
+}
+
+@each $where in (sticky, fixed) {
+  @each $pos, $p in (l:left, r:right, t:top, b:bottom) {
+    .#{$where}-#{$pos} {
+      position: fixed;
+      #{$p}: 0;
+      z-index: 202301031019;
+      width: 100%;
+    }
+  }
+}
+
+.w100 {
+  width: 100%;
+}
+
+.iconfont {
+  font-family: "iconfont" !important;
+  font-style: normal;
+  font-size: 25px;
+  vertical-align: middle;
+  color: rgb(117, 120, 137);
+  transition: .3s;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}
+
+#app {
+  width: 100vw;
+  height: 100vh;
+  background-size: cover;
+  position: absolute;
+}
+
+::-webkit-scrollbar {
+  display: none; /* Chrome Safari */
+}
+</style>