プルリクエスト #17 のマージ

サイトの完成(Ver 1.0)
ynufes-tech · Sep 9, 2022 · 1acdd7c · 1acdd7c
2 parents 5236b89 + 0e9c6a3
commit 1acdd7c
Show file tree

Hide file tree

Showing 15 changed files with 1,486 additions and 953 deletions.
diff --git a/package.json b/package.json
@@ -8,9 +8,14 @@
     "lint": "vue-cli-service lint"
   },
   "dependencies": {
+    "@chenfengyuan/vue-countdown": "2",
     "core-js": "^3.8.3",
+    "sass": "^1.54.5",
+    "sass-loader": "^13.0.2",
+    "tsparticles": "^2.2.4",
     "vue": "^3.2.13",
     "vue-router": "^4.0.3",
+    "vue3-particles": "^2.2.4",
     "vuex": "^4.0.0"
   },
   "devDependencies": {

diff --git a/public/favicon.ico b/public/favicon.ico
diff --git a/public/index.html b/public/index.html
@@ -1,17 +1,21 @@
 <!DOCTYPE html>
 <html lang="">
-  <head>
-    <meta charset="utf-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
-    <title><%= htmlWebpackPlugin.options.title %></title>
-  </head>
-  <body>
-    <noscript>
-      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
-    </noscript>
-    <div id="app"></div>
-    <!-- built files will be auto injected -->
-  </body>
+<head>
+  <meta charset="utf-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width,initial-scale=1.0">
+  <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+  <title>【星彩】22常盤祭 - 横浜国立大学大学祭 準備中</title>
+  <link rel="preconnect" href="https://fonts.googleapis.com">
+  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+  <link href="https://fonts.googleapis.com/css2?family=Klee+One&family=Petit+Formal+Script&display=swap" rel="stylesheet">
+</head>
+<body>
+<noscript>
+  <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
+    Please enable it to continue.</strong>
+</noscript>
+<div id="app"></div>
+<!-- built files will be auto injected -->
+</body>
 </html>
diff --git a/src/App.vue b/src/App.vue
@@ -1,18 +1,95 @@
+<script setup>
+import CountDown from "@/components/CountDown";
+</script>
+
+
 <template>
-  <nav>
-    <router-link to="/">Home</router-link> |
-    <router-link to="/about">About</router-link>
-  </nav>
-  <router-view/>
+  <div class="container">
+    <div class="countdown-frame">
+      <div class="theme">
+        <div class="theme-label">2022横浜国立大学<br>常盤祭 テーマ</div>
+        <div class="theme-title">星彩</div>
+      </div>
+      <div class="date">開催期間: 10/28~30</div>
+      <CountDown/>
+      <div class="image-button-area">
+        <img src="@/assets/funding.webp" alt="クラウドファンディングのご案内"/>
+        <img src="@/assets/pokemon.webp" alt="ポケモン企画の紹介"/>
+      </div>
+    </div>
+
+    <router-view class="router-view"/>
+  </div>
 </template>
 
-<style>
+<style lang="scss">
+body{
+  margin: 0;
+}
+
 #app {
-  font-family: Avenir, Helvetica, Arial, sans-serif;
+  font-family: 'Klee One', cursive;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   text-align: center;
-  color: #2c3e50;
+  color: #FFFFFF;
+}
+
+.image-button-area{
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  gap: 3vw;
+  >img{
+    width: min(40vw, 30vh);
+  }
+}
+
+
+.container {
+  position: relative;
+  height: 100vh;
+  width: 100vw;
+}
+
+.countdown-frame {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+  width: 100%;
+  height: fit-content;
+  display: flex;
+  flex-direction: column;
+}
+
+.theme {
+  font-size: min(1.5vw, 2vh);
+}
+
+.theme-title {
+  font-size: 10em;
+}
+
+.theme-label {
+  font-size: 2em;
+  margin-bottom: -1em;
+}
+
+.date{
+  font-size: 1.2em;
+  margin-top: -0.7em;
+  margin-bottom: 2em;
+}
+
+.countdown-label{
+  font-size: 1.5em;
+}
+
+.count-down{
+  font-size: 4em;
 }
 
 nav {
@@ -27,4 +104,27 @@ nav a {
 nav a.router-link-exact-active {
   color: #42b983;
 }
+
+@media screen and (max-width: 520px){
+
+  .theme-label{
+    font-size: 3em;
+  }
+
+  .theme-title{
+    font-size: 12em;
+  }
+
+  .date{
+    font-size: 1em;
+  }
+
+  .countdown-label{
+    font-size: 1.5em;
+  }
+
+  .count-down{
+    font-size: 10vw;
+  }
+}
 </style>
diff --git a/src/assets/funding.webp b/src/assets/funding.webp
diff --git a/src/assets/logo.png b/src/assets/logo.png
diff --git a/src/assets/pokemon.webp b/src/assets/pokemon.webp
diff --git a/src/components/CountDown.vue b/src/components/CountDown.vue
@@ -0,0 +1,55 @@
+<script setup>
+import VueCountdown from '@chenfengyuan/vue-countdown';
+
+// 時間を計算する。
+// 10月28日13:00のUNIX時間(1970年からのミリ秒)は1666929600000
+// 現在のUNIX時間(ミリ秒)を取得してその差をVueCountdownに渡す。
+let remainingTime = 1666929600000 - new Date().getTime();
+</script>
+
+<template>
+  <div>
+    <VueCountdown
+        :time="remainingTime" v-slot="{ days, hours, minutes, seconds }">
+      <div class="countdown-label">常盤祭まであと</div>
+      <br><span class="count-down">
+      <span><span class="number">{{ days }}</span> <span>日</span>
+      <span class="number">{{ hours }}</span> <span>時間</span></span>
+      <span><span class="number">{{ minutes }}</span> <span>分</span>
+      <span class="number">{{ seconds }}</span> <span>秒</span></span>
+    </span>
+    </VueCountdown>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CountDown"
+}
+</script>
+
+<style scoped lang="scss">
+
+.countdown-label {
+  margin-bottom: -1em;
+}
+
+.count-down {
+
+  > span .number {
+    display: inline-block;
+    font-size: 1em;
+    width: 1em;
+    text-align: right;
+    font-family: 'Petit Formal Script', cursive;
+  }
+
+  > span > span {
+    font-size: 0.5em;
+  }
+
+  > span {
+    display: inline-block;
+  }
+}
+</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
diff --git a/src/main.js b/src/main.js
@@ -2,5 +2,6 @@ import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
 import store from './store'
+import Particles from 'vue3-particles'
 
-createApp(App).use(store).use(router).mount('#app')
+createApp(App).use(store).use(Particles).use(router).mount('#app')
diff --git a/src/router/index.js b/src/router/index.js
@@ -1,19 +1,11 @@
-import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
+import {createRouter, createWebHistory} from 'vue-router'
+import HoshizoraBackground from '../views/HoshizoraBackground.vue'
 
 const routes = [
   {
     path: '/',
     name: 'home',
-    component: HomeView
-  },
-  {
-    path: '/about',
-    name: 'about',
-    // route level code-splitting
-    // this generates a separate chunk (about.[hash].js) for this route
-    // which is lazy-loaded when the route is visited.
-    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
+    component: HoshizoraBackground
   }
 ]
 

diff --git a/src/views/AboutView.vue b/src/views/AboutView.vue
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue