feat: Home view

2023-06-07 21:12:30 +08:00 · 2023-06-07 21:12:30 +08:00 · af7091837d
commit af7091837d
20 changed files with 5610 additions and 0 deletions
--- a/.eslintrc.json
+++ b/.eslintrc.json
@ -0,0 +1,19 @@
+{
+    "env": {
+        "browser": true,
+        "es2021": true
+    },
+    "extends": [
+        "standard",
+        "plugin:vue/vue3-essential"
+    ],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module"
+    },
+    "plugins": [
+        "vue"
+    ],
+    "rules": {
+    }
+}
--- a/.gitignore
+++ b/.gitignore
@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@ -0,0 +1,3 @@
+{
+  "recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
+}
--- a/README.md
+++ b/README.md
@ -0,0 +1,29 @@
+# Final-web
+
+This template should help get you started developing with Vue 3 in Vite.
+
+## Recommended IDE Setup
+
+[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
+
+## Customize configuration
+
+See [Vite Configuration Reference](https://vitejs.dev/config/).
+
+## Project Setup
+
+```sh
+npm install
+```
+
+### Compile and Hot-Reload for Development
+
+```sh
+npm run dev
+```
+
+### Compile and Minify for Production
+
+```sh
+npm run build
+```
--- a/index.html
+++ b/index.html
@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8">
+    <link rel="icon" href="/favicon.ico">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>Ghost Style Blog - Free Bulma template</title>
+    <script src="https://kit.fontawesome.com/15181efa86.js" crossorigin="anonymous"></script>
+    <link rel="stylesheet" href="https://unpkg.com/bulma@0.9.4/css/bulma.min.css" />
+    <link rel="stylesheet" type="text/css" href="/src/assets/ghost-blog.css">
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.js"></script>
+  </body>
+</html>
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@ -0,0 +1,25 @@
+{
+  "name": "final-web",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "pinia": "^2.0.36",
+    "vue": "^3.3.2",
+    "vue-router": "^4.2.0"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "eslint": "^8.42.0",
+    "eslint-config-standard": "^17.1.0",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-n": "^16.0.0",
+    "eslint-plugin-promise": "^6.1.1",
+    "eslint-plugin-vue": "^9.14.1",
+    "vite": "^4.3.5"
+  }
+}
--- a/public/favicon.ico
+++ b/public/favicon.ico
--- a/src/App.vue
+++ b/src/App.vue
@ -0,0 +1,18 @@
+<script setup>
+import { RouterView } from 'vue-router'
+import PageNavbar from './components/PageNavbar.vue'
+import PageFooter from './components/PageFooter.vue'
+</script>
+
+<template>
+  <!-- Navbar  -->
+  <PageNavbar></PageNavbar>
+
+  <!-- body  -->
+  <body>
+    <RouterView />
+  </body>
+
+  <!-- footer -->
+  <PageFooter></PageFooter>
+</template>
--- a/src/assets/NCNU_Bank.png
+++ b/src/assets/NCNU_Bank.png
--- a/src/assets/Screenshot_20230607_013528.png
+++ b/src/assets/Screenshot_20230607_013528.png
--- a/src/assets/SoulBound-Token-SBT.jpeg
+++ b/src/assets/SoulBound-Token-SBT.jpeg
--- a/src/assets/ghost-blog.css
+++ b/src/assets/ghost-blog.css
@ -0,0 +1,113 @@
+@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Serif&family=Nunito+Sans:wght@400;600&display=swap');
+
+.va {
+  display: flex;
+  align-items: center;
+}
+
+html {
+  font-family: 'Nunito Sans', sans-serif;
+  color: white;
+}
+
+a {
+  color: #3b7adf;
+}
+
+a:hover {
+  text-decoration: underline;
+  color: #3b7adf;
+}
+
+hr {
+  background: #24272c;
+}
+
+.message.is-link {
+  background: #191b1f;
+}
+.message-body {
+  background: white;
+}
+
+/*
+.message-header {
+  background: white;
+  color: #060606;
+}
+.message-body {
+  background: #060606;
+  color: white;
+} */
+.footer {
+  background: #060606;
+  color: white;
+}
+
+.footer strong {
+  color: #BEBEBE;
+}
+
+.hero {
+  background: #060606;
+}
+
+.title,
+.subtitle {
+  color: white;
+}
+
+.navbar .navbar-item {
+  color: #e4e2ff;
+}
+
+.navbar .navbar-item.is-active {
+  color: #e4e2ff;
+  font-weight: 700;
+}
+
+.navbar .navbar-item:hover {
+  background: transparent;
+  color: white;
+}
+
+.navbar .navbar-item a {
+  margin-left: 1rem;
+  color: #e4e2ff;
+}
+
+.blog-posts {
+  min-height: 100vh;
+  background: #191b1f;
+  padding-top: 4rem;
+  padding-bottom: 10rem;
+}
+
+.blog-posts article {
+  padding: 1.5rem;
+}
+
+.blog-posts .post img {
+  border-radius: 6px;
+}
+
+.blog-posts .post .post-category {
+  color: #3b7adf;
+}
+
+.blog-posts .post .post-title {
+  font-size: 2.2rem;
+}
+
+.blog-posts .post .post-excerpt {
+  line-height: 1.5rem;
+  letter-spacing: .03rem;
+  font-size: 1.2rem;
+  font-family: 'IBM Plex Serif', serif;
+  color: #92a3ab;
+}
+
+.blog-posts .post .featured .featured-image img {
+  height: 380px;
+}
+    ::-webkit-scrollbar{height:10px;width:10px}::-webkit-scrollbar-track{background:#efefef;border-radius:6px}::-webkit-scrollbar-thumb{background:#d5d5d5;border-radius:6px}::-webkit-scrollbar-thumb:hover{background:#c4c4c4}
--- a/src/assets/logo.svg
+++ b/src/assets/logo.svg
@ -0,0 +1,7 @@
+<svg id="eLyDoQsPgTU1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 256 256" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" width="256" height="256"><g transform="translate(.000003 0.000004)"><g transform="matrix(2.81 0 0 2.81 1.55 1.549995)"><path d="M84.83,72.913h-79.66c-2.855,0-5.17-2.315-5.17-5.17v-45.486c0-2.855,2.315-5.17,5.17-5.17h79.66c2.855,0,5.17,2.315,5.17,5.17v45.485c0,2.856-2.315,5.171-5.17,5.171Z" fill="#3364b5" stroke-miterlimit="10"/><path d="M84.83,17.087h-1.404v23.531c0,16.021-12.987,29.008-29.008,29.008h-54.052c.754,1.922,2.615,3.287,4.804,3.287h79.66c2.855,0,5.17-2.315,5.17-5.17v-45.486c0-2.855-2.315-5.17-5.17-5.17Z" fill="#3f61b1" stroke-miterlimit="10"/><path d="M18.972,35.272h-11.041c-1.173,0-2.123-.951-2.123-2.123v-5.945c0-1.173.951-2.123,2.123-2.123h11.041c1.173,0,2.123.951,2.123,2.123v5.945c0,1.172-.95,2.123-2.123,2.123Z" fill="#eaa500" stroke-miterlimit="10"/><path d="M19.885,46.116h-12.867c-.617,0-1.117-.499-1.117-1.117s.5-1.117,1.117-1.117h12.868c.617,0,1.117.499,1.117,1.117s-.501,1.117-1.118,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M38.684,46.116h-12.867c-.617,0-1.117-.499-1.117-1.117s.5-1.117,1.117-1.117h12.868c.617,0,1.117.499,1.117,1.117s-.501,1.117-1.118,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M57.484,46.116h-12.869c-.617,0-1.117-.499-1.117-1.117s.499-1.117,1.117-1.117h12.869c.617,0,1.117.499,1.117,1.117s-.5,1.117-1.117,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M76.283,46.116h-12.869c-.617,0-1.117-.499-1.117-1.117s.499-1.117,1.117-1.117h12.869c.617,0,1.117.499,1.117,1.117s-.5,1.117-1.117,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M31.052,65.099h-24.034c-.617,0-1.117-.499-1.117-1.117c0-.617.5-1.117,1.117-1.117h24.034c.617,0,1.117.499,1.117,1.117s-.5,1.117-1.117,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M31.052,58.399h-8.401c-.617,0-1.117-.499-1.117-1.117s.5-1.117,1.117-1.117h8.401c.617,0,1.117.499,1.117,1.117s-.5,1.117-1.117,1.117Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M73.658,55.457c-1.58,0-2.974.734-3.908,1.862-.935-1.128-2.329-1.862-3.908-1.862-2.814,0-5.096,2.282-5.096,5.096s2.282,5.096,5.096,5.096c1.58,0,2.974-.734,3.908-1.862.935,1.128,2.329,1.862,3.908,1.862c2.814,0,5.096-2.282,5.096-5.096c0-2.815-2.282-5.096-5.096-5.096Z" fill="#5b89c6" stroke-miterlimit="10"/><path d="M70.668,64.649c.838.622,1.865.999,2.99.999c2.814,0,5.096-2.282,5.096-5.096c0-1.064-.328-2.05-.885-2.867-1.98,2.716-4.415,5.077-7.201,6.964Z" fill="#5382d8" stroke-miterlimit="10"/></g></g><text dx="0" dy="0" font-family="&quot;eLyDoQsPgTU1:::Concert One&quot;" font-size="16" font-weight="700" transform="translate(43.585846 186.974201)" fill="#f3f3f3" stroke-width="0"><tspan y="0" font-weight="700" stroke-width="0"><![CDATA[
+0 1 2 3
+]]></tspan></text>
+<style><![CDATA[
+@font-face {font-family: 'eLyDoQsPgTU1:::Concert One';font-style: normal;font-weight: 400;src: url(data:font/ttf;charset=utf-8;base64,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) format('truetype');}
+]]></style>
+</svg>
--- a/src/components/PageFooter.vue
+++ b/src/components/PageFooter.vue
@ -0,0 +1,18 @@
+<script>
+export default {
+  name: 'PageFooter'
+}
+
+</script>
+
+<template>
+    <section class="hero">
+        <footer class="footer">
+            <div class="content has-text-centered">
+                <p>
+                    <strong>暨大區塊鏈銀行</strong> by <a href="https://www.csie.ncnu.edu.tw/home">NCNU CSIE</a>.
+                </p>
+            </div>
+        </footer>
+    </section>
+</template>
--- a/src/components/PageNavbar.vue
+++ b/src/components/PageNavbar.vue
@ -0,0 +1,45 @@
+<script>
+export default {
+  name: 'PageNavbar'
+}
+
+</script>
+
+<template>
+    <section class="hero is-large">
+        <div class="hero-head">
+            <div class="container">
+                <nav class="navbar" role="navigation" aria-label="main navigation">
+                    <div class="navbar-brand">
+                        <a class="navbar-item" href="https://bulma.io">
+                            <img src="@/assets/NCNU_Bank.png" width="112" height="28">
+                        </a>
+
+                        <a role="button" class="navbar-burger" aria-label="menu" aria-expanded="false"
+                            data-target="navbarBasicExample">
+                            <span aria-hidden="true"></span>
+                            <span aria-hidden="true"></span>
+                            <span aria-hidden="true"></span>
+                        </a>
+                    </div>
+
+                    <div id="navbarBasicExample" class="navbar-menu">
+                        <div class="navbar-start">
+                            <RouterLink to="/" class="navbar-item">Home</RouterLink>
+                            <RouterLink to="/document" class="navbar-item">Documentation</RouterLink>
+                        </div>
+
+                        <div class="navbar-end">
+                            <div class="navbar-item">
+                                <div class="buttons">
+                                    <RouterLink to="/signup" class="button is-primary is-outlined">Sign up</RouterLink>
+                                    <RouterLink to="/login" class="button is-info is-outlined">Log in</RouterLink>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                </nav>
+            </div>
+        </div>
+    </section>
+</template>
--- a/src/main.js
+++ b/src/main.js
@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import { createPinia } from 'pinia'
+
+import App from './App.vue'
+import router from './router'
+
+const app = createApp(App)
+
+app.use(createPinia())
+app.use(router)
+
+app.mount('#app')
--- a/src/router/index.js
+++ b/src/router/index.js
@ -0,0 +1,15 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    }
+  ]
+})
+
+export default router
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@ -0,0 +1,93 @@
+<script>
+</script>
+
+<template>
+  <section class="hero is-large">
+    <div class="hero-body">
+      <div class="container has-text-centered">
+        <div class="block">
+          <img src="@/assets//NCNU_Bank.png" width="400" height="85">
+        </div>
+        <div class="block">
+          <h2 class="subtitle">
+            在區塊鏈金融世界中暢遊無阻！ </h2>
+        </div>
+      </div>
+    </div>
+  </section>
+  <section class="blog-posts">
+    <div class="container">
+      <div class="columns">
+        <div class="column is-10 is-offset-1">
+          <div class="columns featured-post is-multiline">
+            <div class="column is-12 post">
+              <article class="columns featured">
+                <div class="column is-7 post-img ">
+                  <img src="@/assets/Screenshot_20230607_013528.png" alt="">
+                </div>
+                <div class="column is-5 featured-content va">
+                  <div>
+                    <h3 class="heading post-category">方便的支付方式</h3>
+                    <h1 class="title post-title">Crypto Credit Card</h1>
+                    <p class="post-excerpt">在區塊鏈世代中使用最方便的支付方式，透過具有公信力的 Soulbound Token
+                      (SBT)進行信用認證、方便信用評分，直接透過區塊鏈銀行進行消費，QRcode掃完就走</p>
+                    <br>
+                    <a href="#" class="button is-info">
+                      <p>馬上申辦</p>
+                      <span class="icon">
+                        <i class="fas fa-arrow-right"></i>
+                      </span>
+                    </a>
+                  </div>
+
+                </div>
+              </article>
+            </div>
+          </div>
+          <hr>
+          <div class="columns is-multiline">
+            <div class="column post is-6">
+              <article class="columns is-multiline">
+                <div class="column is-12 post-img">
+                  <img src="@/assets/SoulBound-Token-SBT.jpeg" alt="Featured Image">
+                </div>
+                <div class="column is-12 featured-content ">
+                  <h3 class="heading post-category">Soulbound Token</h3>
+                  <h1 class="title post-title">透過 SBT 進行信用紀錄</h1>
+                  <div class="block">
+                    <p class="post-excerpt">Soulbound Token(SBT) 是使用區塊鏈技術來代表個人身份的不可轉讓代幣，我們與其他銀行共同承認並使用 SBT
+                      紀錄用戶的所有信用紀錄，透明化所有信用評分機制。</p>
+                  </div>
+                  <div class="block">
+                    <span class="icon-text">
+                      <span class="icon">
+                        <i class="fas fa-arrow-right"></i>
+                      </span>
+                      <span class="post-excerpt">只要擁有 SBT 就能馬上註冊線上信用支付。</span>
+                    </span>
+
+                  </div>
+                  <a href="#" class="button is-info is-outlined">Mint 自己的 SBT</a>
+                </div>
+              </article>
+            </div>
+            <div class="column post is-6">
+              <article class="columns is-multiline">
+                <div class="column is-12 post-img">
+                  <img src="https://cdn.emk.dev/templates/post-img.png" alt="Featured Image">
+                </div>
+                <div class="column is-12 featured-content ">
+                  <h3 class="heading post-category">Simplest Payment</h3>
+                  <h1 class="title post-title">一支手機就取代收銀機、刷卡機</h1>
+                  <p class="post-excerpt">店家註冊後可以直接產生 QRcode 進行收款、交易紀錄、店內貨物數量管理，更可以自動化產出智能合約讓客戶進行集點活動。</p>
+                  <br>
+                  <a href="#" class="button is-info is-outlined">成為合作店家</a>
+                </div>
+              </article>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </section>
+</template>
--- a/vite.config.js
+++ b/vite.config.js
@ -0,0 +1,14 @@
+import { fileURLToPath, URL } from 'node:url'
+
+import { defineConfig } from 'vite'
+import vue from '@vitejs/plugin-vue'
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [vue()],
+  resolve: {
+    alias: {
+      '@': fileURLToPath(new URL('./src', import.meta.url))
+    }
+  }
+})