diff options
Diffstat (limited to 'src/views/index')
| -rw-r--r-- | src/views/index/Left.vue | 84 | ||||
| -rw-r--r-- | src/views/index/Notepad/changelog.ts | 16 | ||||
| -rw-r--r-- | src/views/index/Notepad/index.vue | 55 | ||||
| -rw-r--r-- | src/views/index/Notepad/type.ts | 9 | ||||
| -rw-r--r-- | src/views/index/Right.vue | 173 | ||||
| -rw-r--r-- | src/views/index/index.vue | 82 |
6 files changed, 0 insertions, 419 deletions
diff --git a/src/views/index/Left.vue b/src/views/index/Left.vue deleted file mode 100644 index f774223..0000000 --- a/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/src/views/index/Notepad/changelog.ts b/src/views/index/Notepad/changelog.ts deleted file mode 100644 index 00ff4a4..0000000 --- a/src/views/index/Notepad/changelog.ts +++ /dev/null @@ -1,16 +0,0 @@ -import http from '@/utils/http' - -import { NotepadContent } from "@/views/index/Notepad/type"; -export const changelog = async ():Promise<NotepadContent> => -{ - const title = "Changelog" - return http.get('https://api.github.com/repos/HydroRoll-Team/HydroRoll/releases/latest') - .then(res => { - const message = "## " + res.data['tag_name'] + "\n" + res.data['body'].trimEnd(); - return new NotepadContent(title,message) - }) - .catch(err => { - console.log(err) - return new NotepadContent(title,err.toString()) - }) -} diff --git a/src/views/index/Notepad/index.vue b/src/views/index/Notepad/index.vue deleted file mode 100644 index 4dcde33..0000000 --- a/src/views/index/Notepad/index.vue +++ /dev/null @@ -1,55 +0,0 @@ -<script lang="ts"> -import { NotepadContent } from "@/views/index/Notepad/type"; - -export default { - props: { - content: { - type: NotepadContent, - require: true, - default: new NotepadContent(), - }, - }, -} -</script> - - -<template> - <div class="details" style="height:100%"> - <h3> - {{ content.title }} - </h3> - <div class="content"> - <v-md-preview :text="content.message"></v-md-preview> - </div> - </div> -</template> - - -<style scoped> - -.details { - flex: 1; - float: right; - height: 100%; - padding: 0 10dvw; -} - -h3 { - font-size: 1.5rem; - font-weight: 500; - margin-bottom: 0.4rem; - color: var(--color-heading); -} - -.content { - overflow-x: auto; -} - -@media screen and (orientation:landscape) { - .details { - flex: 1; - width: 32dvw; - padding: 0; - } -} -</style> diff --git a/src/views/index/Notepad/type.ts b/src/views/index/Notepad/type.ts deleted file mode 100644 index 9147341..0000000 --- a/src/views/index/Notepad/type.ts +++ /dev/null @@ -1,9 +0,0 @@ -export class NotepadContent { - title: string = ""; - message: string = ""; - - constructor(title:string="", message:string="") { - this.title=title; - this.message=message; - } -} diff --git a/src/views/index/Right.vue b/src/views/index/Right.vue deleted file mode 100644 index 706b8c4..0000000 --- a/src/views/index/Right.vue +++ /dev/null @@ -1,173 +0,0 @@ -<script lang="ts"> -import Notepad from './Notepad/index.vue' -import DocumentationIcon from '@/components/icons/IconDocumentation.vue' -import { NotepadContent } from "@/views/index/Notepad/type"; -import { changelog } from './Notepad/changelog' - - - -export default { - data() { - return { - mainPage: 0, - tooltip: [ - "ChangeLog", - "What's new?", - "敬请期待", - "敬请期待", - ], - notepadContents: [] as NotepadContent[], - } - }, - components: { - Notepad: Notepad, - DocumentationIcon - }, - methods: { - change_page(n: number) { - this.mainPage = n; - return this.notepadContents[n] - }, - 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() { - changelog().then(res => { - this.notepadContents.push(res); - }); - changelog().then(res => { - this.notepadContents.push(res); - }); - changelog().then(res => { - this.notepadContents.push(res); - }); - changelog().then(res => { - this.notepadContents.push(res); - }); - }, -} - -</script> - -<template> - <div class="messageBar"> - <ul class="options"> - <li v-for="(item, index) in notepadContents" :key="index" class="item"> - <el-tooltip :content="item.title" placement="left" > - <i :style="{background:getBgColor(index)}" @mouseover="change_page(index)"> - <DocumentationIcon/> - </i> - </el-tooltip> - </li> - </ul> - <div class="messageBox"> - <Notepad :content="notepadContents[mainPage]" /> - </div> - </div> -</template> - -<style lang="scss"> - -.messageBar { - display: flex; - flex-direction: column; - height: 500px; - margin-top: 2rem; - position: relative; -} - -.messageBar .options{ - display: flex; - flex-direction: row; - margin: auto; - flex-grow: 1; - color: var(--color-text); -} - -.messageBar .options .item{ - display: flex; - margin: auto; - padding: 0.7rem; -} - -.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 { - flex-direction: row; - height: 600px; - margin-top: 0; - padding: 5rem 0 5rem 0rem; - } - - .messageBar .options{ - flex-direction: column; - } - - .messageBar .options .item{ - padding: 1.8rem; - } - - .item { - text-align: center; - width: 100%; - } - - i { - margin: auto; - border-radius: 8px; - - } - - // .messageBar:before { - // content: ' '; - // border-left: 1px solid var(--color-border); - // position: absolute; - // left: 0; - // bottom: calc(50% + 25px); - // height: calc(50% - 25px); - // } - - // 画白线 - .options:after { - content: ' '; - border-left: 1px solid var(--vt-c-divider-dark-2); - position: absolute; - left: 3.25rem; - top: calc(10%); - height: calc(80%); - z-index: -10; - } - - // .messageBar:first-of-type:before { - // display: none; - // } - - // .item:last-of-type:after { - // display: none; - // } -} -</style> diff --git a/src/views/index/index.vue b/src/views/index/index.vue deleted file mode 100644 index db25a43..0000000 --- a/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="/src/assets/logo_white_trans.png" - alt="HydroRoll Logo" - class="logo" - width="125" height="125" /> - - <div class="wrapper"> - <Left msg="饼在画了!" /> - </div> - </header> - - <main class="main"> - <video loop preload="auto" muted 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: 0rem; - } - - .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> |
