temp

bookmark_front/src/App.vue

@@ -1,30 +1,23 @@
 <template>
   <div id="app">
-    <Top />
+    <router-view />
-    <Content>
-      <router-view />
-    </Content>
-    <Bottom />
   </div>
 </template>
 
 <script>
-import Top from "@/components/layout/Top.vue";
-import Content from "@/components/layout/Content.vue";
-import Bottom from "@/components/layout/Bottom.vue";
-
 export default {
-  name: "App",
+  name: "App"
-  components: { Top, Content, Bottom }
 };
 </script>
 
 <style lang="less">
+@import "./global.less";
 html,
 body {
   margin: 0;
   padding: 0;
   font-size: 100px;
+  background-color: @bgColor;
 }
 #app {
   font-family: Avenir, Helvetica, Arial, sans-serif;

bookmark_front/src/components/public/LoginRegisterHeader.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="location">
-    <template v-if="type !== 'reset'">
-      <span :class="[{ current: type === 'login' }, 'text']">登陆</span>
-      <span class="point"></span>
-      <span class="text">注册</span>
-    </template>
-    <template v-else>
-      <span class="text">重置密码</span>
-    </template>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "LoginRegisterHeader",
-  props: {
-    type: String
-  }
-};
-</script>
-
-<style lang="less" scoped>
-@textColor: #969696;
-.location {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  color: @textColor;
-  .point {
-    width: 0.05rem;
-    height: 0.05rem;
-    border-radius: 50%;
-    background-color: @textColor;
-    margin-left: 0.1rem;
-    margin-right: 0.1rem;
-  }
-  .text {
-    font-size: 0.4rem;
-    vertical-align: middle;
-    line-height: 0.4rem;
-    font-weight: 600;
-  }
-}
-.current {
-  color: black;
-}
-</style>

bookmark_front/src/global.less

@@ -1,3 +1,5 @@
+@bgColor: rgba(211, 211, 205, 0.3); //全局背景色
+
 /**
  * header 配置
  */
@@ -12,5 +14,4 @@
 /**
  * content配置
  */
-@bgColor: rgba(211, 211, 205, 0.3); //背景色
+@contentBgColor: rgb(255, 255, 255); //登录页背景色
-@loginBgColor: rgb(255, 255, 255); //登录页背景色

bookmark_front/src/router/index.js

@@ -1,21 +1,43 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
-import Home from "../views/Home.vue";
+import Main from "../views/main/Main.vue";
+import UserInfo from "../views/main/pages/personSpace/UserInfo.vue";
+import BookmarkTree from "../views/main/pages/things/BookmarkTree.vue";
 
-import Login from "../views/public/Login.vue";
+import Public from "../views/public/Public.vue";
+import Login from "../views/public/pages/Login.vue";
 
 Vue.use(VueRouter);
 
 const routes = [
   {
     path: "/",
-    name: "Home",
+    name: "Main",
-    component: Home
+    component: Main,
+    children: [
+      {
+        path: "",
+        name: "BookmarkTree",
+        component: BookmarkTree
+      },
+      {
+        path: "personSpakce/userInfo",
+        name: "UserInfo",
+        component: UserInfo
+      }
+    ]
   },
   {
-    path: "/public/login",
+    path: "/public",
-    name: "Login",
+    name: "Public",
-    component: Login
+    component: Public,
+    children: [
+      {
+        path: "login",
+        name: "Login",
+        component: Login
+      }
+    ]
   }
 ];
 

bookmark_front/src/store/index.js

@@ -1,6 +1,6 @@
 import Vue from "vue";
 import Vuex from "vuex";
-import count from "./modules/count";
+import globalConfig from "./modules/globalConfig";
 
 Vue.use(Vuex);
 
@@ -9,6 +9,6 @@ export default new Vuex.Store({
   mutations: {},
   actions: {},
   modules: {
-    count
+    globalConfig
   }
 });

bookmark_front/src/store/modules/globalConfig.js

@@ -0,0 +1,28 @@
+/**
+ * 存储全局配置
+ */
+const state = {
+  /**
+   * 是否处于登录、注册页
+   */
+  isLogReg: false
+};
+
+const getters = {};
+
+const actions = {};
+
+const mutations = {
+  setCount(oState, isLogReg) {
+    // eslint-disable-next-line no-param-reassign
+    oState.isLogReg = isLogReg;
+  }
+};
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+};

bookmark_front/src/store/modules/globalHeader.js

@@ -1,31 +0,0 @@
-const state = {
-  isLogin: 0
-};
-
-const getters = {};
-
-const actions = {
-  asyncAdd({ commit }, data) {
-    return new Promise(resolve => {
-      setTimeout(() => {
-        commit("setCount", data);
-        resolve();
-      }, 2000);
-    });
-  }
-};
-
-const mutations = {
-  setCount(state1, data) {
-    // eslint-disable-next-line no-param-reassign
-    state1.count += data;
-  }
-};
-
-export default {
-  namespaced: true,
-  state,
-  getters,
-  actions,
-  mutations
-};

bookmark_front/src/views/Home.vue

@@ -1,29 +0,0 @@
-<template>
-  <div class="home">
-    <!-- {{ count}}
-    <div><button @click="setCount(1)">增加1</button></div>
-    <div><button @click="asyncAdd(10)">异步增加</button></div>
-    <Button type="primary">button</Button> -->
-  </div>
-</template>
-
-<script>
-// @ is an alias to /src
-// import { mapState, mapActions, mapMutations } from 'vuex';
-
-export default {
-  name: "Home",
-  computed: {
-    // ...mapState({
-    //   count: (state) => state.count.count,
-    // }),
-  },
-  watch: {},
-  methods: {
-    // ...mapActions('count', ['asyncAdd']),
-    // ...mapMutations('count', ['setCount']),
-  }
-};
-</script>
-
-<style lang="less" scoped></style>

bookmark_front/src/views/main/Main.vue

@@ -0,0 +1,22 @@
+<template>
+  <div class="home">
+    <Top />
+    <Content>
+      <router-view />
+    </Content>
+    <Bottom />
+  </div>
+</template>
+
+<script>
+import Top from "@/components/layout/Top.vue";
+import Content from "@/components/layout/Content.vue";
+import Bottom from "@/components/layout/Bottom.vue";
+
+export default {
+  name: "Home",
+  components: { Top, Content, Bottom }
+};
+</script>
+
+<style lang="less" scoped></style>

bookmark_front/src/views/main/pages/personSpace/UserInfo.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>个人空间</div>
+</template>
+
+<script>
+export default {
+  name: "UserInfo"
+};
+</script>
+
+<style></style>

bookmark_front/src/views/main/pages/things/BookmarkTree.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>书签树</div>
+</template>
+
+<script>
+export default {
+  name: "BookmarkTree"
+};
+</script>
+
+<style></style>

bookmark_front/src/views/public/Public.vue

@@ -1,17 +1,15 @@
 <template>
   <div class="main">
+    <img class="ico" src="/static/img/bookmarkLogo.png" />
     <div class="main-body">
-      <login-register-header type="login"></login-register-header>
+      <router-view />
     </div>
   </div>
 </template>
 
 <script>
-import LoginRegisterHeader from "../../components/public/LoginRegisterHeader.vue";
-
 export default {
-  name: "Login",
+  name: "Public"
-  components: { LoginRegisterHeader }
 };
 </script>
 
@@ -19,14 +17,21 @@ export default {
 @import "../../global.less";
 .main {
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+
+  .ico {
+    position: fixed;
+    left: 5%;
+    top: 5%;
+    width: 2rem;
+  }
   .main-body {
     width: 5rem;
-    height: 3.5rem;
+    min-height: 3.5rem;
-    background-color: @loginBgColor;
+    background-color: @contentBgColor;
     border-radius: 5px;
     padding: 0.1rem;
   }

bookmark_front/src/views/public/pages/Login.vue

@@ -0,0 +1,11 @@
+<template>
+  <div>登录页面</div>
+</template>
+
+<script>
+export default {
+  name: "Login"
+};
+</script>
+
+<style></style>