Add front - home.vue

1e85f41e · YongJae · 9faa8f8d · 1e85f41e
Commit 1e85f41e authored 5 years ago by YongJae
--- a/frontend/src/components/home.vue
+++ b/frontend/src/components/home.vue
+<template>
+  <!DOCTYPE html>
+  <html lang="en">
+    <head>
+      <title>Majorbook</title>
+    </head>
+
+    <body>
+      <header class="header">
+        <h1>Majorbook</h1>
+        <div align="right">
+          <Login />
+        </div>
+      </header>
+      <nav class="nav">
+        <button v-on:click="gotoMyPage()">My Page</button>
+        <button v-on:click="gotoBuyPage()">buy</button>
+        <button v-on:click="gotoSellPage()">sell</button>
+        <button v-on:click="gotoBookIndexPage()">전공서적보기</button>
+      </nav>
+      <section class="section">
+        <img src="../../static/img/img1.jpg" />
+      </section>
+      <aside class="aside">이용방법</aside>
+      <footer class="footer">Implemented by 202-WebSysDesign</footer>
+    </body>
+  </html>
+</template>
+
+<script>
+import Login from "./login/Login";
+
+export default {
+  data() {
+    return {};
+  },
+
+  components: {
+    Login
+  },
+
+  methods: {
+    checkisLoggedIn() {
+      // this.$http.get('/api/login/checkLogin', {
+      //   user: this.user
+      // })
+      console.log(user.isLoggedIn);
+      if (user.isLoggedIn === false) {
+        alert("Log In First");
+        return 0;
+      } else {
+        return 1;
+      }
+    },
+
+    gotoMyPage() {
+      if (this.checkisLoggedIn()) {
+        this.$router.push("/myPage");
+      }
+    },
+    gotoBuyPage() {
+      if (this.checkisLoggedIn()) {
+        this.$router.push("/buy");
+      }
+    },
+    gotoSellPage() {
+      if (this.checkisLoggedIn()) {
+        this.$router.push("/sell");
+      }
+    },
+    gotoBookIndexPage() {
+      if (this.checkisLoggedIn()) {
+        this.$router.push("/BookIndexPage");
+      }
+    }
+  }
+};
+</script>
+
+<style lang="css">
+html,
+body {
+  text-align: center;
+  /* margin:0; */
+  /* width:100%; */
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+.nav button {
+  color: #00b7ff;
+  text-align: center;
+  padding-right: 8%;
+  padding-left: 8%;
+  font-size: 18px;
+  text-decoration: none;
+}
+
+.nav {
+  background-color: #333;
+  overflow: hidden;
+}
+
+.header {
+  margin: 15px;
+  height: 12%;
+  font-size: 10px;
+}
+
+.btn {
+  color: #00b7ff;
+  background-color: #333;
+  border-radius: 15%;
+}
+
+h1 {
+  text-align: left;
+  font-size: 35px;
+}
+
+.section {
+  height: 500px;
+}
+
+img {
+  height: 100%;
+  width: 100%;
+}
+
+.aside {
+  height: 40px;
+  background-color: rgb(255, 220, 123);
+}
+
+.footer {
+  height: 20px;
+  color: white;
+  background-color: #333;
+}
+
+.myPage {
+  display: block;
+  margin-left: auto;
+  margin-right: auto;
+  height: 400px;
+}
+</style>