diff options
Diffstat (limited to 'site/src/views')
| -rw-r--r-- | site/src/views/404.vue | 18 | ||||
| -rw-r--r-- | site/src/views/index/Left.vue | 84 | ||||
| -rw-r--r-- | site/src/views/index/Notepad/changelog.ts | 16 | ||||
| -rw-r--r-- | site/src/views/index/Notepad/index.vue | 53 | ||||
| -rw-r--r-- | site/src/views/index/Right.vue | 160 | ||||
| -rw-r--r-- | site/src/views/index/index.vue | 82 |
6 files changed, 0 insertions, 413 deletions
diff --git a/site/src/views/404.vue b/site/src/views/404.vue deleted file mode 100644 index 7462697..0000000 --- a/site/src/views/404.vue +++ /dev/null @@ -1,18 +0,0 @@ -<template> - <div>404</div> -</template> - -<script lang='ts'> -export default { - setup() { - return {} - }, - beforeCreate() { - location.href = '/' - } -} -</script> - -<style lang='scss' scoped> - -</style> diff --git a/site/src/views/index/Left.vue b/site/src/views/index/Left.vue deleted file mode 100644 index f774223..0000000 --- a/site/src/views/index/Left.vue +++ /dev/null @@ -1,84 +0,0 @@ -<script lang="ts"> -export default { - data(){ - return{ - day:0, - hour:0, - min:0, - sec:0, - timer:0 - } - }, - props:{ - msg:{ - type:String, - require:true - }, - date:{ - type:Date, - default:new Date('2024-07-14T12:00:00Z') - } - }, - methods:{ - getTime(){ - this.timer=window.setTimeout(()=>{ - const date1 = new Date(); - const date2 = new Date(this.date); - const timeDiff = Math.abs(date2.getTime() - date1.getTime()); - this.day = Math.floor(timeDiff / (1000 * 60 * 60 * 24)); - this.hour = Math.floor(timeDiff / (1000 * 60 * 60)%24); - this.min = Math.floor((timeDiff / (1000 * 60)) % 60); - this.sec = Math.floor((timeDiff / 1000) % 60); - this.getTime() - },1000) - } - }, - beforeMount() { - this.getTime() - } - -} -</script> - -<template> - <div class="greetings"> - <h1 class="green">{{ msg }}</h1> - <h3> - 距离水系公测计划: - </h3> - <h2> - {{ day }} 天 {{ hour }} 时 {{ min }} 分 {{ sec }} 秒 - </h2> - </div> -</template> - -<style scoped> -h1 { - font-weight: 500; - font-size: 2.6rem; - position: relative; - top: -10px; -} - -h3 { - font-size: 1.2rem; -} - -.greetings h1, -.greetings h2 { - text-align: center; -} -.greetings h3 { - text-align: center; -} - -@media screen and (orientation:landscape) { - .greetings h1, - .greetings h2 { - text-align: left; - } - .greetings h3 { - text-align: left; - } -} -</style> diff --git a/site/src/views/index/Notepad/changelog.ts b/site/src/views/index/Notepad/changelog.ts deleted file mode 100644 index 111f8f2..0000000 --- a/site/src/views/index/Notepad/changelog.ts +++ /dev/null @@ -1,16 +0,0 @@ -import axios from 'axios'; - -export const getChangeLog = async() => -{ - const changeLog = axios.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest') - .then(res => { - console.log(res.data); - const ChangeLogMessage ="## "+ res.data['tag_name']+"\n"+res.data['body']; - return ChangeLogMessage; - }) - .catch(err => { - console.log(err); - return err.toString(); - }) - return changeLog; -} diff --git a/site/src/views/index/Notepad/index.vue b/site/src/views/index/Notepad/index.vue deleted file mode 100644 index fde6e90..0000000 --- a/site/src/views/index/Notepad/index.vue +++ /dev/null @@ -1,53 +0,0 @@ -<script lang="ts"> -export default { - props: { - title: { - type: String, - default: "1", - }, - message: { - type: String, - require: true - }, - date: { - type: Date, - default: new Date('2024-07-14T12:00:00Z') - } - }, -} -</script> - - -<template> - <div class="details" style="overflow-y:scroll;overflow-x:hidden;height:100%"> - <h3> - {{ title }} - </h3> - <v-md-preview :text="message" ></v-md-preview> - </div> -</template> - - -<style scoped> - - -h3 { - font-size: 1.2rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -.details { - flex: 1; - width: 60dvw; - float: right; -} - -@media screen and (orientation:landscape) { - .details { - flex: 1; - width: 30dvw; - } -} -</style> diff --git a/site/src/views/index/Right.vue b/site/src/views/index/Right.vue deleted file mode 100644 index d76397e..0000000 --- a/site/src/views/index/Right.vue +++ /dev/null @@ -1,160 +0,0 @@ -<script lang="ts"> -import Notepad from './Notepad/index.vue' -import DocumentationIcon from '@/components/icons/IconDocumentation.vue' -import { getChangeLog } from './Notepad/changelog' - - -export default { - data() { - return { - mainPage: 0, - tooltip: [ - "ChangeLog", - "What's new?", - "敬请期待", - "敬请期待", - ], - title: "", - message:"", - changeLogMessage:"", - } - }, - components: { - Notepad, - DocumentationIcon - }, - methods: { - change_page(n: number) { - this.mainPage = n; - this.title = this.tooltip[n]; - switch (n) { - case 0: - this.message = this.changeLogMessage; - break; - default: - this.message = "敬请期待"; - break; - } - }, - getBgColor(index: number) { - if (index < this.mainPage) { - return "var(--color-border)" - } else if (index == this.mainPage) { - return "var(--icon-highlight)" - } else { - return "var(--color-border-hover)" - } - } - }, - beforeCreate() { - getChangeLog().then(res => { - this.changeLogMessage = res; - this.change_page(this.mainPage); - }) - }, -} - -</script> - -<template> - <div class="messageBar"> - <div class="options"> - <li v-for="(item, index) in tooltip" :key="index" class="item"> - <el-tooltip :content="item" placement="left" > - <i :style="{background:getBgColor(index)}" @mouseover="change_page(index)"> - <DocumentationIcon/> - </i> - </el-tooltip> - </li> - </div> - <div class="messageBox"> - <Notepad :title="title" :message="message"/> - </div> - </div> -</template> - -<style lang="scss"> - -.messageBar { - display: flex; - height: 500px; - margin-top: 2rem; - position: relative; - flex-direction: row; -} - -.messageBar .options{ - display: flex; - flex-direction: column; - flex-grow: 1; - width: 32px; - color: var(--color-text); -} - -.messageBar .options .item{ - display: flex; - margin: auto; -} - -.messageBar .messageBox { - height: 100%; - width: 100%; - overflow-y: auto; - overflow-x: hidden; -} - -i { - display: flex; - align-items: center; - justify-content: center; - font-size: 1.2rem; - color: var(--color-text); - width: 50px; - height: 50px; - border-radius: 8px; -} - -@media screen and (orientation:landscape) { - .messageBar { - margin-top: 0; - padding: 5rem 0 5rem calc(var(--section-gap) / 2); - } - - i { - left: -21px; - position: absolute; - border-radius: 8px; - width: 40px; - height: 40px; - } - - // 黑线 - .messageBar:before { - content: ' '; - border-left: 1px solid var(--color-border); - position: absolute; - left: 0; - bottom: calc(50% + 25px); - height: calc(50% - 25px); - } - - // 画白线 - .messageBar:after { - content: ' '; - border-left: 1px solid var(--vt-c-divider-dark-2); - position: absolute; - left: 0; - top: calc(15%); - height: calc(75%); - z-index: -10; - } - - .messageBar:first-of-type:before { - display: none; - } - - .item:last-of-type:after { - display: none; - } -} -</style> diff --git a/site/src/views/index/index.vue b/site/src/views/index/index.vue deleted file mode 100644 index 003f752..0000000 --- a/site/src/views/index/index.vue +++ /dev/null @@ -1,82 +0,0 @@ -<script setup lang="ts"> -import Left from './Left.vue' -import Right from './Right.vue' -</script> - -<script lang="ts"> -export default { - data() { - return { - isplay: false - } - }, - methods: { - PlayOn() { - this.isplay = true - } - } -} -</script> - -<template> - <header> - <img src="@/assets/Hydroroll-small.svg" - alt="Vue logo" - class="logo" - width="125" height="125" /> - - <div class="wrapper"> - <Left msg="饼在画了!" /> - </div> - </header> - - <main class="main"> - <video loop=true preload="auto" muted="true" autoplay @canplay="PlayOn" v-show="isplay" > - <source src="@/assets/video/bg.mp4" type="video/mp4" /> - </video> - <Right /> - </main> -</template> - -<style scoped> -header { - display: flex; - flex-flow: column; - line-height: 1.5; -} - -.logo { - display: block; - margin: 0 auto 2rem; -} - -@media screen and (orientation:landscape) { - header { - place-items: center; - flex-flow: row; - padding-right: calc(var(--section-gap) / 2); - } - - .logo { - margin: 0 2rem 0 0; - } - - header .wrapper { - display: flex; - place-items: flex-start; - flex-wrap: wrap; - } -} - -video{ - position: fixed; - right: 0; - bottom: 0; - min-width: 100%; - min-height: 100%; - width: auto; - height: auto; - z-index: -100; - filter: grayscale(20%); -} -</style> |
