no message
This commit is contained in:
A1300399510
parent
f077d5c10e
commit
aa94efc54d
310
src/App.vue
310
src/App.vue
@ -4,6 +4,7 @@ import { nextTick, onMounted, ref } from "vue"
|
|||||||
|
|
||||||
import { getQrcode, getList, monitorState, Generate, monitorMusic, getDetails, lyricsGenerateHttp, lyricsMonitorHttp, quitLoginHttp, likeDetailsHttp } from "./utils/api"
|
import { getQrcode, getList, monitorState, Generate, monitorMusic, getDetails, lyricsGenerateHttp, lyricsMonitorHttp, quitLoginHttp, likeDetailsHttp } from "./utils/api"
|
||||||
import { ElMessage } from "element-plus"
|
import { ElMessage } from "element-plus"
|
||||||
|
import triangleIcon from "@/components/triangle-icon.vue"
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
// getLoginQrcode()
|
// getLoginQrcode()
|
||||||
@ -22,14 +23,18 @@ const getListData = () => {
|
|||||||
|
|
||||||
if (res.code != 200) return
|
if (res.code != 200) return
|
||||||
const data = res.data || []
|
const data = res.data || []
|
||||||
|
let isNeedMonitor = false
|
||||||
data.forEach(element => {
|
data.forEach(element => {
|
||||||
// console.log("element", element.metadataid)
|
if (element.status != "complete") {
|
||||||
|
isNeedMonitor = true
|
||||||
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// console.log(data[0])
|
if (isNeedMonitor) {
|
||||||
|
monitorMusicState()
|
||||||
|
}
|
||||||
|
|
||||||
// data[0].audio_url = "./b91dc2e6-120b-4979-9007-347d74a01561.mp3"
|
// data[0].audio_url = "./21be5d73-221f-4e7b-82f0-26c7c71b797e.mp3"
|
||||||
|
|
||||||
islogin.value = true
|
islogin.value = true
|
||||||
list.value = data || []
|
list.value = data || []
|
||||||
@ -189,7 +194,7 @@ const handleMusicList = index => {
|
|||||||
listIndex.value = index
|
listIndex.value = index
|
||||||
|
|
||||||
// console.log(target.metadataid)
|
// console.log(target.metadataid)
|
||||||
if (target.status !== "complete" && target.metadataid) {
|
if (target.status !== "complete") {
|
||||||
monitorMusicState(target.metadataid || "没有metadataid")
|
monitorMusicState(target.metadataid || "没有metadataid")
|
||||||
}
|
}
|
||||||
getMusicDetails(target.id)
|
getMusicDetails(target.id)
|
||||||
@ -268,10 +273,12 @@ const getMusicDetails = id => {
|
|||||||
|
|
||||||
const audio = ref(null)
|
const audio = ref(null)
|
||||||
const isPlaying = ref(false)
|
const isPlaying = ref(false)
|
||||||
|
let audioSrc = ref("")
|
||||||
|
|
||||||
let previewState = ref(false)
|
let previewState = ref(false)
|
||||||
const closeInfo = () => {
|
const closeInfo = () => {
|
||||||
previewState.value = false
|
// previewState.value = false
|
||||||
|
songInfo.value = {}
|
||||||
}
|
}
|
||||||
|
|
||||||
const playAudio = index => {
|
const playAudio = index => {
|
||||||
@ -280,10 +287,13 @@ const playAudio = index => {
|
|||||||
}
|
}
|
||||||
let targetlist = list.value || []
|
let targetlist = list.value || []
|
||||||
let target = targetlist[index] || {}
|
let target = targetlist[index] || {}
|
||||||
audio.value.src = target.audio_url || ""
|
const url = target.audio_url || ""
|
||||||
|
if (audioSrc.value != url) {
|
||||||
|
audio.value.src = url
|
||||||
|
currentTime.value = 0
|
||||||
|
}
|
||||||
audio.value.play()
|
audio.value.play()
|
||||||
listIndex.value = index
|
listIndex.value = index
|
||||||
currentTime.value = 0
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const togglePlayPause = () => {
|
const togglePlayPause = () => {
|
||||||
@ -296,6 +306,7 @@ const togglePlayPause = () => {
|
|||||||
|
|
||||||
const updatePlayStatus = () => {
|
const updatePlayStatus = () => {
|
||||||
isPlaying.value = !audio.value.paused
|
isPlaying.value = !audio.value.paused
|
||||||
|
audioSrc.value = audio.value.src || ""
|
||||||
}
|
}
|
||||||
|
|
||||||
const pauseAudio = () => {
|
const pauseAudio = () => {
|
||||||
@ -310,6 +321,7 @@ const nextAudio = () => {
|
|||||||
let target = targetlist[index]
|
let target = targetlist[index]
|
||||||
audio.value.src = target.audio_url
|
audio.value.src = target.audio_url
|
||||||
audio.value.play()
|
audio.value.play()
|
||||||
|
|
||||||
listIndex.value = index
|
listIndex.value = index
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -352,6 +364,7 @@ const seekAudio = value => {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const formatTime = time => {
|
const formatTime = time => {
|
||||||
|
if (isNaN(time)) return "0:00"
|
||||||
if (time == Infinity) {
|
if (time == Infinity) {
|
||||||
return "-- : --"
|
return "-- : --"
|
||||||
}
|
}
|
||||||
@ -490,6 +503,9 @@ const handlelike = index => {
|
|||||||
<!-- <div class="flexflex" style="height: calc(100vh - 69px); overflow: auto;"> -->
|
<!-- <div class="flexflex" style="height: calc(100vh - 69px); overflow: auto;"> -->
|
||||||
<div class="flexflex">
|
<div class="flexflex">
|
||||||
<div class="left-box">
|
<div class="left-box">
|
||||||
|
<img class="left-bj left-bj1" src="./assets/img/left-bj1.png" />
|
||||||
|
<img class="left-bj left-bj2" src="./assets/img/left-bj2.png" />
|
||||||
|
<img class="left-bj left-bj3" src="./assets/img/left-bj1.png" />
|
||||||
<img class="hemisphere-icon" src="./assets/img/hemisphere-icon.png" />
|
<img class="hemisphere-icon" src="./assets/img/hemisphere-icon.png" />
|
||||||
<img class="logo" src="./assets/img/logo-icon.png" />
|
<img class="logo" src="./assets/img/logo-icon.png" />
|
||||||
<img class="star" src="./assets/img/star-icon.png" />
|
<img class="star" src="./assets/img/star-icon.png" />
|
||||||
@ -536,7 +552,7 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-select v-model="obj.mv" placeholder="选择模型" size="large" popper-class="model-select" :popper-append-to-body="false">
|
<el-select v-model="obj.mv" placeholder="选择模型" size="large" popper-class="model-select" :popper-append-to-body="false" :suffix-icon="triangleIcon">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
@ -619,7 +635,7 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="40" placeholder="请输入歌曲名称" />
|
<el-input class="name-input" v-model="obj.title" style="width: 300px;" maxlength="50" placeholder="请输入歌曲名称" />
|
||||||
</div>
|
</div>
|
||||||
<div class="section model">
|
<div class="section model">
|
||||||
<div class="title-box flexacenter">
|
<div class="title-box flexacenter">
|
||||||
@ -633,13 +649,13 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-select v-model="obj.mv" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select">
|
<el-select v-model="obj.mv" placeholder="选择模型" size="large" style="width: 100%;" popper-class="model-select" :suffix-icon="triangleIcon">
|
||||||
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
|
||||||
</el-select>
|
</el-select>
|
||||||
</div>
|
</div>
|
||||||
<div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
|
<div class="creation-btn flexcenter" @click="creativeMusic()">创作</div>
|
||||||
</template>
|
</template>
|
||||||
<div class="flex1"></div>
|
<!-- <div class="flex1"></div> -->
|
||||||
<!-- <div class="user-box" v-if="islogin"> -->
|
<!-- <div class="user-box" v-if="islogin"> -->
|
||||||
<div class="user-box" v-if="false">
|
<div class="user-box" v-if="false">
|
||||||
<img class="user-img" src="https://cdn1.suno.ai/defaultPink.jpg" />
|
<img class="user-img" src="https://cdn1.suno.ai/defaultPink.jpg" />
|
||||||
@ -661,14 +677,14 @@ const handlelike = index => {
|
|||||||
</template>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="list">
|
<div class="list">
|
||||||
<div class="item flexflex" :class="{ 'sel': listIndex == index }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
|
<div class="item flexflex" :class="{ 'sel': listIndex == index, 'playing': audioSrc == item.audio_url }" v-for="(item, index) in list" :key="index" @click="handleMusicList(index)">
|
||||||
<!-- <div class="progress-bar" :style="{ 'width': item.progress + '%' }"></div> -->
|
|
||||||
<div class="progress-bar" v-if="item.status != 'complete'">生成中...</div>
|
<div class="progress-bar" v-if="item.status != 'complete'">生成中...</div>
|
||||||
<div class="img-box" @click="playAudio(index)">
|
<div class="img-box" @click="isPlaying && audioSrc == item.audio_url ? pauseAudio() : playAudio(index)">
|
||||||
<img v-if="item.image_url" class="img" :src="item.image_url" />
|
<img v-if="item.image_url" class="img" :src="item.image_url" />
|
||||||
<img v-else class="img" src="https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xG7avCGHpt5oNTyM1Nwws44-UqaPEyOpLewjBmkLTe6SsJ5o8oxYDW_C7QrwtE0o7mQElMUC3lm6UrpsPr3ey21qvjUeOOPrNv6_QpsEVrOxyJ36niqc_cWN6UYoEk7POhf2DtewNDQyOQ~~" />
|
<img v-else class="img" src="https://suno.ansnid.com/attachment/Zvt57TuJSUvkyhw-xG7avCGHpt5oNTyM1Nwws44-UqaPEyOpLewjBmkLTe6SsJ5o8oxYDW_C7QrwtE0o7mQElMUC3lm6UrpsPr3ey21qvjUeOOPrNv6_QpsEVrOxyJ36niqc_cWN6UYoEk7POhf2DtewNDQyOQ~~" />
|
||||||
<div class="play flexcenter">
|
<div class="play flexcenter">
|
||||||
<img class="play-btn" src="./assets/img/play-icon.png" />
|
<img v-if="audioSrc == item.audio_url && isPlaying" class="suspend-btn" src="./assets/img/suspend.png" />
|
||||||
|
<img v-else class="play-btn" src="./assets/img/play-icon.png" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="content flexflex flex1">
|
<div class="content flexflex flex1">
|
||||||
@ -677,8 +693,8 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="like-box flexcenter" @click.stop="handlelike(index)">
|
<div class="like-box flexcenter" @click.stop="handlelike(index)">
|
||||||
<img v-if="item.is_upvote == 0" class="like-icon" src="./assets/img/like-icon.png" />
|
<img v-if="item.is_upvote == 1" class="like-icon" src="./assets/img/like-c-icon.png" />
|
||||||
<img v-else class="like-icon" src="./assets/img/like-c-icon.png" />
|
<img v-else class="like-icon" src="./assets/img/like-icon.png" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-popover popper-class="dot-popover" placement="bottom" :width="220" trigger="click" :teleported="false">
|
<el-popover popper-class="dot-popover" placement="bottom" :width="220" trigger="click" :teleported="false">
|
||||||
@ -728,30 +744,28 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="base-bottom flexacenter">
|
<div class="base-bottom flexflex">
|
||||||
<!-- <div class="base-side"></div> -->
|
<div class="base-middle flexflex">
|
||||||
<div class="base-middle flexacenter">
|
|
||||||
<div class="btn flexacenter">
|
<div class="btn flexacenter">
|
||||||
<div class="btn-item btn-left flexcenter" @click="prevAudio()">
|
<div class="btn-item btn-left flexcenter" @click="prevAudio()">
|
||||||
<el-icon color="#fff" :size="18"><DArrowLeft /></el-icon>
|
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-item btn-centre flexcenter" @click="togglePlayPause()">
|
<div class="btn-item btn-centre flexcenter" @click="togglePlayPause()">
|
||||||
<img v-if="isPlaying" class="suspend" src="./assets/img/suspend.png" />
|
<img v-if="isPlaying" class="suspend" src="./assets/img/suspend-icon.svg" />
|
||||||
<img v-else class="suspend" src="./assets/img/play-icon.png" />
|
<img v-else class="suspend" src="./assets/img/play-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-item btn-right flexcenter" @click="nextAudio()">
|
<div class="btn-item btn-right flexcenter" @click="nextAudio()">
|
||||||
<el-icon color="#fff" :size="18"><DArrowRight /></el-icon>
|
<img class="btn-icon" src="./assets/img/arrows-icon.svg" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="audio-box flexacenter">
|
<div class="audio-box flexacenter">
|
||||||
<div class="time">{{ formatTime(currentTime) }}</div>
|
<div class="time">{{ formatTime(currentTime) }}</div>
|
||||||
<el-slider class="progress-box" :show-tooltip="false" v-model="currentTime" :min="0" :max="duration" @change="seekAudio" />
|
<el-slider class="progress-box" :show-tooltip="false" v-model="currentTime" :min="0" :max="duration" @change="seekAudio" />
|
||||||
<div class="time">{{ formatTime(duration) }}</div>
|
<div class="time time-right">{{ formatTime(duration) }}</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <img class="cyclical-icon" src="./assets/img/loop.png" />
|
<!-- <img class="cyclical-icon" src="./assets/img/loop.png" />
|
||||||
<img class="cyclical-icon" src="./assets/img/single.png" /> -->
|
<img class="cyclical-icon" src="./assets/img/single.png" /> -->
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="base-side"></div> -->
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<el-dialog class="wxlogin" v-model="wxloginVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
|
<el-dialog class="wxlogin" v-model="wxloginVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
|
||||||
@ -767,26 +781,8 @@ const handlelike = index => {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="hint">扫码关注【SunoAI音乐创作工具】即可登录</div>
|
<div class="hint">扫码关注【SunoAI音乐创作工具】即可登录</div>
|
||||||
<!-- <div class="remark flexacenter">
|
|
||||||
注册/登录表示您已同意
|
|
||||||
<a>《用户协议》</a>
|
|
||||||
及
|
|
||||||
<a>《隐私政策》</a>
|
|
||||||
</div> -->
|
|
||||||
</div>
|
</div>
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
<!-- 风格 -->
|
|
||||||
<!-- <el-dialog class="style-dialog" v-model="styleVisible" width="480" :before-close="handleClose" align-center="true" :show-close="false">
|
|
||||||
<div class="style-box">
|
|
||||||
<div class="title">音乐流派</div>
|
|
||||||
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
|
|
||||||
<el-tab-pane label="User" name="first">User</el-tab-pane>
|
|
||||||
<el-tab-pane label="Config" name="second">Config</el-tab-pane>
|
|
||||||
<el-tab-pane label="Role" name="third">Role</el-tab-pane>
|
|
||||||
<el-tab-pane label="Task" name="fourth">Task</el-tab-pane>
|
|
||||||
</el-tabs>
|
|
||||||
</div>
|
|
||||||
</el-dialog> -->
|
|
||||||
|
|
||||||
<audio ref="audio" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" @ended="nextAudio" @play="updatePlayStatus" @pause="updatePlayStatus"></audio>
|
<audio ref="audio" @timeupdate="updateCurrentTime" @loadedmetadata="updateDuration" @ended="nextAudio" @play="updatePlayStatus" @pause="updatePlayStatus"></audio>
|
||||||
</div>
|
</div>
|
||||||
@ -807,16 +803,38 @@ body {
|
|||||||
overflow: auto;
|
overflow: auto;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
background-color: #000;
|
background-color: #000;
|
||||||
background-image: url("./assets/img/left-bj.svg");
|
// background-image: url("./assets/img/left-bj.svg");
|
||||||
background: -webkit-linear-gradient(289.179008025811deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
background: -webkit-linear-gradient(289.179008025811deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||||||
background: -moz-linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
background: -moz-linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||||||
background: linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
background: linear-gradient(160.820991974189deg, rgba(107, 77, 229, 1) 0%, rgba(144, 91, 212, 1) 38%, rgba(83, 37, 142, 1) 70%, rgba(47, 51, 145, 1) 100%);
|
||||||
border-right: 1px solid #252323;
|
// border-right: 1px solid #252323;
|
||||||
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
// height: calc(100vh - 69px);
|
// height: calc(100vh - 69px);
|
||||||
position: relative;
|
position: relative;
|
||||||
z-index: 1;
|
z-index: 1;
|
||||||
display: flex;
|
// display: flex;
|
||||||
flex-direction: column;
|
// flex-direction: column;
|
||||||
|
|
||||||
|
.left-bj {
|
||||||
|
&.left-bj1 {
|
||||||
|
top: 0;
|
||||||
|
height: 341px;
|
||||||
|
}
|
||||||
|
&.left-bj2 {
|
||||||
|
top: 341px;
|
||||||
|
height: 551px;
|
||||||
|
transform: rotate(180deg);
|
||||||
|
}
|
||||||
|
&.left-bj3 {
|
||||||
|
top: 892px;
|
||||||
|
}
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
width: 319px;
|
||||||
|
// height: 440px;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
.hemisphere-icon {
|
.hemisphere-icon {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
@ -825,9 +843,10 @@ body {
|
|||||||
height: 83px;
|
height: 83px;
|
||||||
}
|
}
|
||||||
.logo {
|
.logo {
|
||||||
width: 138px;
|
width: 131px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
margin: 20px auto 44px;
|
margin: 20px auto 44px;
|
||||||
|
display: block;
|
||||||
}
|
}
|
||||||
.star {
|
.star {
|
||||||
z-index: -1;
|
z-index: -1;
|
||||||
@ -874,7 +893,7 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
padding: 0 5px;
|
padding: 0 5px;
|
||||||
height: 50px;
|
height: 46px;
|
||||||
border: 1px solid rgba(255, 255, 255, 0.196078);
|
border: 1px solid rgba(255, 255, 255, 0.196078);
|
||||||
background: rgba(255, 255, 255, 0.0980392);
|
background: rgba(255, 255, 255, 0.0980392);
|
||||||
border-radius: 10px;
|
border-radius: 10px;
|
||||||
@ -885,9 +904,9 @@ body {
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
font-size: 20px;
|
font-size: 18px;
|
||||||
height: 40px;
|
height: 36px;
|
||||||
line-height: 40px;
|
line-height: 36px;
|
||||||
color: rgba(255, 255, 255, 0.8);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
&:first-of-type {
|
&:first-of-type {
|
||||||
margin-right: 5px;
|
margin-right: 5px;
|
||||||
@ -1053,13 +1072,14 @@ body {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
min-height: 107px !important;
|
min-height: 107px !important;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
|
padding: 16px 13px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-input__count {
|
.el-input__count {
|
||||||
background: transparent;
|
background: transparent;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
padding-bottom: 5px;
|
padding-bottom: 7px;
|
||||||
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.196078) inset !important;
|
||||||
// border: 1px solid rgba(255, 255, 255, 0.196078);
|
// border: 1px solid rgba(255, 255, 255, 0.196078);
|
||||||
background: rgba(255, 255, 255, 0.0980392);
|
background: rgba(255, 255, 255, 0.0980392);
|
||||||
@ -1088,6 +1108,7 @@ body {
|
|||||||
min-height: 100px !important;
|
min-height: 100px !important;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
max-height: 300px;
|
max-height: 300px;
|
||||||
|
padding: 16px 13px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
padding-bottom: 5px;
|
padding-bottom: 5px;
|
||||||
@ -1108,7 +1129,6 @@ body {
|
|||||||
|
|
||||||
.style-item {
|
.style-item {
|
||||||
padding: 0 8px;
|
padding: 0 8px;
|
||||||
margin-right: 6px;
|
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #000000;
|
color: #000000;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
@ -1116,8 +1136,11 @@ body {
|
|||||||
height: 26px;
|
height: 26px;
|
||||||
line-height: 26px;
|
line-height: 26px;
|
||||||
background-color: rgba(255, 255, 255, 0.6);
|
background-color: rgba(255, 255, 255, 0.6);
|
||||||
border-radius: 10px;
|
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-right: 6px;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&::-webkit-scrollbar {
|
&::-webkit-scrollbar {
|
||||||
@ -1138,7 +1161,7 @@ body {
|
|||||||
.random-btn {
|
.random-btn {
|
||||||
// background: rgba(255, 255, 255, 0.16);
|
// background: rgba(255, 255, 255, 0.16);
|
||||||
// width: 120px;
|
// width: 120px;
|
||||||
margin-left: 5px;
|
margin-left: 7px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
// padding: 0 12px;
|
// padding: 0 12px;
|
||||||
// min-width: 32px;
|
// min-width: 32px;
|
||||||
@ -1169,7 +1192,7 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.name {
|
.name {
|
||||||
margin-bottom: 10px;
|
margin-bottom: 24px;
|
||||||
|
|
||||||
.name-input {
|
.name-input {
|
||||||
/deep/ .el-input__wrapper {
|
/deep/ .el-input__wrapper {
|
||||||
@ -1275,6 +1298,7 @@ body {
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
padding: 0 15px;
|
padding: 0 15px;
|
||||||
|
border-top: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
background-color: rgba(51, 51, 51, 1);
|
background-color: rgba(51, 51, 51, 1);
|
||||||
|
|
||||||
.register-text {
|
.register-text {
|
||||||
@ -1292,10 +1316,12 @@ body {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.middle-box {
|
.middle-box {
|
||||||
border-right: 1px solid #252323;
|
border-right: 1px solid rgba(255, 255, 255, 0.2);
|
||||||
// height: calc(100vh - 69px);
|
// height: calc(100vh - 69px);
|
||||||
height: 100vh;
|
height: 100vh;
|
||||||
overflow: auto;
|
overflow: auto;
|
||||||
|
padding-top: 10px;
|
||||||
|
padding-bottom: 120px;
|
||||||
.nodata {
|
.nodata {
|
||||||
color: #a0aec0;
|
color: #a0aec0;
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
@ -1305,10 +1331,9 @@ body {
|
|||||||
|
|
||||||
.list {
|
.list {
|
||||||
.item {
|
.item {
|
||||||
padding-top: 8px;
|
padding-left: 30px;
|
||||||
padding-bottom: 8px;
|
padding-right: 30px;
|
||||||
padding-left: 20px;
|
margin-bottom: 10px;
|
||||||
padding-right: 20px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
&.sel,
|
&.sel,
|
||||||
@ -1316,16 +1341,29 @@ body {
|
|||||||
background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%) !important;
|
background: radial-gradient(3010.06% 152.11% at 27.33% 38.98%, rgba(61, 58, 58, 0.43) 0%, rgba(25, 24, 24, 0.57) 100%) !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
&.playing {
|
||||||
|
.img-box {
|
||||||
|
.play {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.content {
|
||||||
|
.name {
|
||||||
|
color: #e7c25b;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.img-box {
|
.img-box {
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 60px;
|
width: 80px;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
margin-right: 10px;
|
margin-right: 20px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
|
|
||||||
.img {
|
.img {
|
||||||
width: 60px;
|
width: 80px;
|
||||||
height: 60px;
|
height: 80px;
|
||||||
border-radius: 6px;
|
border-radius: 6px;
|
||||||
}
|
}
|
||||||
&:hover {
|
&:hover {
|
||||||
@ -1333,8 +1371,8 @@ body {
|
|||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.suspend-box,
|
||||||
.play {
|
.play {
|
||||||
display: none;
|
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
left: 0;
|
left: 0;
|
||||||
@ -1342,8 +1380,16 @@ body {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.6);
|
background: rgba(0, 0, 0, 0.6);
|
||||||
.play-btn {
|
.play-btn {
|
||||||
width: 22px;
|
width: 36px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.suspend-btn {
|
||||||
|
width: 46px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.play {
|
||||||
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1388,6 +1434,9 @@ body {
|
|||||||
font-weight: 700;
|
font-weight: 700;
|
||||||
color: #fff;
|
color: #fff;
|
||||||
word-break: break-word;
|
word-break: break-word;
|
||||||
|
font-size: 18px;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
margin-bottom: 6px;
|
||||||
}
|
}
|
||||||
.desc {
|
.desc {
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
@ -1398,7 +1447,8 @@ body {
|
|||||||
word-break: break-all;
|
word-break: break-all;
|
||||||
word-wrap: break-word;
|
word-wrap: break-word;
|
||||||
white-space: normal;
|
white-space: normal;
|
||||||
color: rgb(203 213 224);
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -1459,12 +1509,15 @@ body {
|
|||||||
|
|
||||||
.base-bottom {
|
.base-bottom {
|
||||||
background-color: rgb(22 22 22);
|
background-color: rgb(22 22 22);
|
||||||
border-top: 1px solid #222222;
|
border: 1px solid rgba(255, 255, 255, 0.19);
|
||||||
|
// border-top: 1px solid #222222;
|
||||||
padding-left: 24px;
|
padding-left: 24px;
|
||||||
padding-right: 24px;
|
padding-right: 24px;
|
||||||
|
// padding-top: 24px;
|
||||||
height: 68px;
|
height: 68px;
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
// align-items: center;
|
||||||
position: fixed;
|
position: fixed;
|
||||||
bottom: 10px;
|
bottom: 10px;
|
||||||
width: 540px;
|
width: 540px;
|
||||||
@ -1473,58 +1526,87 @@ body {
|
|||||||
z-index: 10;
|
z-index: 10;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translateX(-50%);
|
transform: translateX(-50%);
|
||||||
.base-side {
|
|
||||||
width: 450px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.base-middle {
|
.base-middle {
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: center;
|
||||||
|
padding-top: 18px;
|
||||||
|
margin-bottom: 6px;
|
||||||
.btn {
|
.btn {
|
||||||
margin-right: 24px;
|
// margin-right: 24px;
|
||||||
|
|
||||||
.btn-item {
|
.btn-item {
|
||||||
width: 32px;
|
width: 36px;
|
||||||
height: 32px;
|
height: 36px;
|
||||||
border-radius: 50% !important;
|
background: inherit;
|
||||||
background: rgba(255, 255, 255, 0.08);
|
background-color: rgba(255, 255, 255, 0.8);
|
||||||
|
border: none;
|
||||||
|
border-radius: 18px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 0.3s;
|
transition: all 0.3s;
|
||||||
&:hover {
|
// &:hover {
|
||||||
.el-icon {
|
// .el-icon {
|
||||||
font-size: 30px;
|
// font-size: 30px;
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
.btn-icon {
|
||||||
|
width: 15px;
|
||||||
|
height: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.btn-left {
|
||||||
|
.btn-icon {
|
||||||
|
transform: rotate(180deg);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
&.btn-centre {
|
&.btn-centre {
|
||||||
margin-left: 6px;
|
margin-left: 20px;
|
||||||
margin-right: 6px;
|
margin-right: 20px;
|
||||||
background-color: #fbd38d;
|
// background-color: #fbd38d;
|
||||||
|
background: transparent;
|
||||||
img {
|
img {
|
||||||
width: 20px;
|
width: 36px;
|
||||||
|
height: 36px;
|
||||||
|
// width: 20px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.audio-box {
|
.audio-box {
|
||||||
|
position: relative;
|
||||||
|
margin-left: 16px;
|
||||||
|
margin-right: 16px;
|
||||||
.time {
|
.time {
|
||||||
color: rgb(160 174 192);
|
top: -17px;
|
||||||
font-size: 12px;
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
color: rgba(255, 255, 255, 0.8);
|
||||||
|
font-size: 14px;
|
||||||
|
&.time-right {
|
||||||
|
right: 0;
|
||||||
|
left: auto;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.progress-box {
|
.progress-box {
|
||||||
width: 390px;
|
width: 500px;
|
||||||
margin-left: 16px;
|
|
||||||
margin-right: 16px;
|
|
||||||
/deep/ .el-slider__runway {
|
/deep/ .el-slider__runway {
|
||||||
height: 4px;
|
height: 6px;
|
||||||
|
background-color: rgba(255, 255, 255, 0.803921568627451);
|
||||||
.el-slider__bar {
|
.el-slider__bar {
|
||||||
background: #fbd38d;
|
background: rgba(128, 128, 255, 1);
|
||||||
height: 4px;
|
height: 6px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/deep/ .el-slider__button {
|
/deep/ .el-slider__button {
|
||||||
border: none;
|
border: none;
|
||||||
height: 14px;
|
height: 16px;
|
||||||
width: 14px;
|
width: 16px;
|
||||||
|
background: rgba(128, 128, 255, 1);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -1610,16 +1692,6 @@ body {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
&.style-dialog {
|
|
||||||
.el-dialog__body {
|
|
||||||
.style-box {
|
|
||||||
.title {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
@ -1662,4 +1734,26 @@ body {
|
|||||||
color: #fff;
|
color: #fff;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
.el-switch__core {
|
||||||
|
height: 24px;
|
||||||
|
min-width: 48px;
|
||||||
|
border-radius: 48px;
|
||||||
|
.el-switch__action {
|
||||||
|
width: 18px;
|
||||||
|
height: 18px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-checked .el-switch__core {
|
||||||
|
background: -webkit-linear-gradient(350.53767779deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||||||
|
background: -moz-linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||||||
|
background: linear-gradient(99.46232221deg, #fee97d 0%, #e7c25b 49%, #fe8c7d 100%);
|
||||||
|
border: none;
|
||||||
|
.el-switch__action {
|
||||||
|
left: calc(100% - 21px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
6
src/assets/img/arrows-icon.svg
Normal file
6
src/assets/img/arrows-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="15px" height="16px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -957 -842 )">
|
||||||
|
<path d="M 6.11801242236025 14.3006012024048 C 6.01449275362319 14.4074816299265 5.96273291925466 14.5303941215765 5.96273291925466 14.6693386773547 C 5.96273291925466 14.8082832331329 6.01449275362319 14.9311957247829 6.11801242236025 15.0380761523046 L 6.8944099378882 15.8396793587174 C 6.99792960662526 15.9465597862391 7.11697722567288 16 7.25155279503106 16 C 7.38612836438923 16 7.50517598343685 15.9465597862391 7.60869565217391 15.8396793587174 L 14.8447204968944 8.3687374749499 C 14.9482401656315 8.26185704742819 15 8.13894455577822 15 8 C 15 7.86105544422178 14.9482401656315 7.73814295257181 14.8447204968944 7.6312625250501 L 7.60869565217391 0.160320641282565 C 7.50517598343685 0.0534402137608545 7.38612836438923 0 7.25155279503106 0 C 7.11697722567288 0 6.99792960662526 0.0534402137608545 6.8944099378882 0.160320641282565 L 6.11801242236025 0.96192384769539 C 6.01449275362319 1.0688042752171 5.96273291925466 1.19171676686707 5.96273291925466 1.33066132264529 C 5.96273291925466 1.46960587842351 6.01449275362319 1.59251837007348 6.11801242236025 1.69939879759519 L 12.2204968944099 8 L 6.11801242236025 14.3006012024048 Z M 0.15527950310559 14.3006012024048 C 0.0517598343685288 14.4074816299265 0 14.5303941215765 0 14.6693386773547 C 0 14.8082832331329 0.0517598343685288 14.9311957247829 0.15527950310559 15.0380761523046 L 0.93167701863354 15.8396793587174 C 1.0351966873706 15.9465597862391 1.15424430641822 16 1.2888198757764 16 C 1.42339544513457 16 1.54244306418219 15.9465597862391 1.64596273291925 15.8396793587174 L 8.88198757763975 8.3687374749499 C 8.98550724637681 8.26185704742819 9.03726708074534 8.13894455577822 9.03726708074534 8 C 9.03726708074534 7.86105544422178 8.98550724637681 7.73814295257181 8.88198757763975 7.6312625250501 L 1.64596273291925 0.160320641282565 C 1.54244306418219 0.0534402137608545 1.42339544513457 0 1.2888198757764 0 C 1.15424430641822 0 1.0351966873706 0.0534402137608545 0.93167701863354 0.160320641282565 L 0.15527950310559 0.96192384769539 C 0.0517598343685288 1.0688042752171 0 1.19171676686707 0 1.33066132264529 C 0 1.46960587842351 0.0517598343685288 1.59251837007348 0.15527950310559 1.69939879759519 L 6.25776397515528 8 L 0.15527950310559 14.3006012024048 Z " fill-rule="nonzero" fill="#000000" stroke="none" transform="matrix(1 0 0 1 957 842 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
BIN
src/assets/img/left-bj1.png
Normal file
BIN
src/assets/img/left-bj1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
src/assets/img/left-bj2.png
Normal file
BIN
src/assets/img/left-bj2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 283 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.6 KiB |
13
src/assets/img/play-icon.svg
Normal file
13
src/assets/img/play-icon.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="36px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="36" y2="36" id="LinearGradient81">
|
||||||
|
<stop id="Stop82" stop-color="#fee97d" offset="0" />
|
||||||
|
<stop id="Stop83" stop-color="#e7c25b" offset="0.49" />
|
||||||
|
<stop id="Stop84" stop-color="#fe8c7d" offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -889 -832 )">
|
||||||
|
<path d="M 8.96484375 2.4140625 C 11.72265625 0.804687499999997 14.734375 0 18 0 C 21.265625 0 24.27734375 0.804687499999997 27.03515625 2.4140625 C 29.79296875 4.0234375 31.9765625 6.20703125 33.5859375 8.96484375 C 35.1953125 11.72265625 36 14.734375 36 18 C 36 21.265625 35.1953125 24.27734375 33.5859375 27.03515625 C 31.9765625 29.79296875 29.79296875 31.9765625 27.03515625 33.5859375 C 24.27734375 35.1953125 21.265625 36 18 36 C 14.734375 36 11.72265625 35.1953125 8.96484375 33.5859375 C 6.20703125 31.9765625 4.0234375 29.79296875 2.4140625 27.03515625 C 0.8046875 24.27734375 0 21.265625 0 18 C 0 14.734375 0.8046875 11.72265625 2.4140625 8.96484375 C 4.0234375 6.20703125 6.20703125 4.0234375 8.96484375 2.4140625 Z M 14.25 26.7890625 L 27 19.2890625 C 27.5 19.0078125 27.75 18.578125 27.75 18 C 27.75 17.421875 27.5 16.9921875 27 16.7109375 L 14.25 9.2109375 C 13.765625 8.9140625 13.265625 8.90625 12.75 9.1875 C 12.25 9.484375 12 9.921875 12 10.5 L 12 25.5 C 12 26.078125 12.25 26.515625 12.75 26.8125 C 13 26.9375 13.25 27 13.5 27 C 13.765625 27 14.015625 26.9296875 14.25 26.7890625 Z " fill-rule="nonzero" fill="url(#LinearGradient81)" stroke="none" transform="matrix(1 0 0 1 889 832 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
13
src/assets/img/suspend-icon.svg
Normal file
13
src/assets/img/suspend-icon.svg
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="36px" height="36px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<defs>
|
||||||
|
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="36" y2="36" id="LinearGradient89">
|
||||||
|
<stop id="Stop90" stop-color="#fee97d" offset="0" />
|
||||||
|
<stop id="Stop91" stop-color="#e7c25b" offset="0.49" />
|
||||||
|
<stop id="Stop92" stop-color="#fe8c7d" offset="1" />
|
||||||
|
</linearGradient>
|
||||||
|
</defs>
|
||||||
|
<g transform="matrix(1 0 0 1 -889 -832 )">
|
||||||
|
<path d="M 16.2890625 25.2890625 C 16.4296875 25.1484375 16.5 24.96875 17 24.75 L 17 11.25 C 16.5 11.03125 16.4296875 10.8515625 16.2890625 10.7109375 C 16.1484375 10.5703125 15.96875 10.5 15.75 10.5 L 9.75 10.5 C 9.53125 10.5 9.3515625 10.5703125 9.2109375 10.7109375 C 9.0703125 10.8515625 9 11.03125 9 11.25 L 9 24.75 C 9 24.96875 9.0703125 25.1484375 9.2109375 25.2890625 C 9.3515625 25.4296875 9.53125 25.5 9.75 25.5 L 15.75 25.5 C 15.96875 25.5 16.1484375 25.4296875 16.2890625 25.2890625 Z M 26.7890625 25.2890625 C 26.9296875 25.1484375 27 24.96875 27 24.75 L 27 11.25 C 27 11.03125 26.9296875 10.8515625 26.7890625 10.7109375 C 26.6484375 10.5703125 26.46875 10.5 26.25 10.5 L 20.25 10.5 C 20.03125 10.5 19.8515625 10.5703125 19.7109375 10.7109375 C 19.5703125 10.8515625 19.5 11.03125 19 11.25 L 19 24.75 C 19.5 24.96875 19.5703125 25.1484375 19.7109375 25.2890625 C 19.8515625 25.4296875 20.03125 25.5 20.25 25.5 L 26.25 25.5 C 26.46875 25.5 26.6484375 25.4296875 26.7890625 25.2890625 Z M 33.5859375 8.96484375 C 35.1953125 11.72265625 36 14.734375 36 18 C 36 21.265625 35.1953125 24.27734375 33.5859375 27.03515625 C 31.9765625 29.79296875 29.79296875 31.9765625 27.03515625 33.5859375 C 24.27734375 35.1953125 21.265625 36 18 36 C 14.734375 36 11.72265625 35.1953125 8.96484375 33.5859375 C 6.20703125 31.9765625 4.0234375 29.79296875 2.4140625 27.03515625 C 0.8046875 24.27734375 0 21.265625 0 18 C 0 14.734375 0.8046875 11.72265625 2.4140625 8.96484375 C 4.0234375 6.20703125 6.20703125 4.0234375 8.96484375 2.4140625 C 11.72265625 0.804687499999997 14.734375 0 18 0 C 21.265625 0 24.27734375 0.804687499999997 27.03515625 2.4140625 C 29.79296875 4.0234375 31.9765625 6.20703125 33.5859375 8.96484375 Z " fill-rule="nonzero" fill="url(#LinearGradient89)" stroke="none" transform="matrix(1 0 0 1 889 832 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
6
src/assets/img/triangle-icon.svg
Normal file
6
src/assets/img/triangle-icon.svg
Normal file
@ -0,0 +1,6 @@
|
|||||||
|
<?xml version="1.0" encoding="utf-8"?>
|
||||||
|
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="12px" height="7px" xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<g transform="matrix(1 0 0 1 -285 -760 )">
|
||||||
|
<path d="M 11.77734375 0.230902777777778 C 11.92578125 0.384837962962962 12 0.567129629629628 12 0.777777777777778 C 12 0.988425925925925 11.92578125 1.17071759259259 11.77734375 1.32465277777778 L 6.52734375 6.76909722222222 C 6.37890625 6.92303240740741 6.203125 7 6 7 C 5.796875 7 5.62109375 6.92303240740741 5.47265625 6.76909722222222 L 0.22265625 1.32465277777778 C 0.07421875 1.17071759259259 0 0.988425925925925 0 0.777777777777778 C 0 0.567129629629628 0.07421875 0.384837962962962 0.22265625 0.230902777777778 C 0.37109375 0.0769675925925917 0.546875 0 0.75 0 L 11.25 0 C 11.453125 0 11.62890625 0.0769675925925917 11.77734375 0.230902777777778 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 285 760 )" />
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
@ -5,6 +5,13 @@
|
|||||||
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 修改placeholder的颜色，兼容性更好的写法 */
|
||||||
|
textarea::placeholder,
|
||||||
|
.el-input .el-input__inner::placeholder {
|
||||||
|
color: rgba(255, 255, 255, 0.498039215686275) !important;
|
||||||
|
/* 设置placeholder的颜色为灰色 */
|
||||||
|
}
|
||||||
|
|
||||||
*::-webkit-scrollbar-track-piece {
|
*::-webkit-scrollbar-track-piece {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,44 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
defineProps({
|
|
||||||
msg: {
|
|
||||||
type: String,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<div class="greetings">
|
|
||||||
<h1 class="green">{{ msg }}</h1>
|
|
||||||
<h3>
|
|
||||||
You’ve successfully created a project with
|
|
||||||
<a href="https://vitejs.dev/" target="_blank" rel="noopener">Vite</a> +
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">Vue 3</a>.
|
|
||||||
</h3>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
h1 {
|
|
||||||
font-weight: 500;
|
|
||||||
font-size: 2.6rem;
|
|
||||||
position: relative;
|
|
||||||
top: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.greetings h1,
|
|
||||||
.greetings h3 {
|
|
||||||
text-align: left;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,88 +0,0 @@
|
|||||||
<script setup>
|
|
||||||
import WelcomeItem from './WelcomeItem.vue'
|
|
||||||
import DocumentationIcon from './icons/IconDocumentation.vue'
|
|
||||||
import ToolingIcon from './icons/IconTooling.vue'
|
|
||||||
import EcosystemIcon from './icons/IconEcosystem.vue'
|
|
||||||
import CommunityIcon from './icons/IconCommunity.vue'
|
|
||||||
import SupportIcon from './icons/IconSupport.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<DocumentationIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Documentation</template>
|
|
||||||
|
|
||||||
Vue’s
|
|
||||||
<a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
|
|
||||||
provides you with all information you need to get started.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<ToolingIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Tooling</template>
|
|
||||||
|
|
||||||
This project is served and bundled with
|
|
||||||
<a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
|
|
||||||
recommended IDE setup is
|
|
||||||
<a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
|
|
||||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
|
|
||||||
you need to test your components and web pages, check out
|
|
||||||
<a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
|
|
||||||
<a href="https://on.cypress.io/component" target="_blank" rel="noopener"
|
|
||||||
>Cypress Component Testing</a
|
|
||||||
>.
|
|
||||||
|
|
||||||
<br />
|
|
||||||
|
|
||||||
More instructions are available in <code>README.md</code>.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<EcosystemIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Ecosystem</template>
|
|
||||||
|
|
||||||
Get official tools and libraries for your project:
|
|
||||||
<a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
|
|
||||||
<a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
|
|
||||||
<a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
|
|
||||||
<a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
|
|
||||||
you need more resources, we suggest paying
|
|
||||||
<a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
|
|
||||||
a visit.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<CommunityIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Community</template>
|
|
||||||
|
|
||||||
Got stuck? Ask your question on
|
|
||||||
<a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
|
|
||||||
Discord server, or
|
|
||||||
<a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
|
|
||||||
>StackOverflow</a
|
|
||||||
>. You should also subscribe to
|
|
||||||
<a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
|
|
||||||
the official
|
|
||||||
<a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
|
|
||||||
twitter account for latest news in the Vue world.
|
|
||||||
</WelcomeItem>
|
|
||||||
|
|
||||||
<WelcomeItem>
|
|
||||||
<template #icon>
|
|
||||||
<SupportIcon />
|
|
||||||
</template>
|
|
||||||
<template #heading>Support Vue</template>
|
|
||||||
|
|
||||||
As an independent project, Vue relies on community backing for its sustainability. You can help
|
|
||||||
us by
|
|
||||||
<a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
|
|
||||||
</WelcomeItem>
|
|
||||||
</template>
|
|
||||||
@ -1,86 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="item">
|
|
||||||
<i>
|
|
||||||
<slot name="icon"></slot>
|
|
||||||
</i>
|
|
||||||
<div class="details">
|
|
||||||
<h3>
|
|
||||||
<slot name="heading"></slot>
|
|
||||||
</h3>
|
|
||||||
<slot></slot>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.item {
|
|
||||||
margin-top: 2rem;
|
|
||||||
display: flex;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.details {
|
|
||||||
flex: 1;
|
|
||||||
margin-left: 1rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
display: flex;
|
|
||||||
place-items: center;
|
|
||||||
place-content: center;
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
color: var(--color-text);
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 1.2rem;
|
|
||||||
font-weight: 500;
|
|
||||||
margin-bottom: 0.4rem;
|
|
||||||
color: var(--color-heading);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.item {
|
|
||||||
margin-top: 0;
|
|
||||||
padding: 0.4rem 0 1rem calc(var(--section-gap) / 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
top: calc(50% - 25px);
|
|
||||||
left: -26px;
|
|
||||||
position: absolute;
|
|
||||||
border: 1px solid var(--color-border);
|
|
||||||
background: var(--color-background);
|
|
||||||
border-radius: 8px;
|
|
||||||
width: 50px;
|
|
||||||
height: 50px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:before {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
bottom: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:after {
|
|
||||||
content: ' ';
|
|
||||||
border-left: 1px solid var(--color-border);
|
|
||||||
position: absolute;
|
|
||||||
left: 0;
|
|
||||||
top: calc(50% + 25px);
|
|
||||||
height: calc(50% - 25px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:first-of-type:before {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item:last-of-type:after {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M15 4a1 1 0 1 0 0 2V4zm0 11v-1a1 1 0 0 0-1 1h1zm0 4l-.707.707A1 1 0 0 0 16 19h-1zm-4-4l.707-.707A1 1 0 0 0 11 14v1zm-4.707-1.293a1 1 0 0 0-1.414 1.414l1.414-1.414zm-.707.707l-.707-.707.707.707zM9 11v-1a1 1 0 0 0-.707.293L9 11zm-4 0h1a1 1 0 0 0-1-1v1zm0 4H4a1 1 0 0 0 1.707.707L5 15zm10-9h2V4h-2v2zm2 0a1 1 0 0 1 1 1h2a3 3 0 0 0-3-3v2zm1 1v6h2V7h-2zm0 6a1 1 0 0 1-1 1v2a3 3 0 0 0 3-3h-2zm-1 1h-2v2h2v-2zm-3 1v4h2v-4h-2zm1.707 3.293l-4-4-1.414 1.414 4 4 1.414-1.414zM11 14H7v2h4v-2zm-4 0c-.276 0-.525-.111-.707-.293l-1.414 1.414C5.42 15.663 6.172 16 7 16v-2zm-.707 1.121l3.414-3.414-1.414-1.414-3.414 3.414 1.414 1.414zM9 12h4v-2H9v2zm4 0a3 3 0 0 0 3-3h-2a1 1 0 0 1-1 1v2zm3-3V3h-2v6h2zm0-6a3 3 0 0 0-3-3v2a1 1 0 0 1 1 1h2zm-3-3H3v2h10V0zM3 0a3 3 0 0 0-3 3h2a1 1 0 0 1 1-1V0zM0 3v6h2V3H0zm0 6a3 3 0 0 0 3 3v-2a1 1 0 0 1-1-1H0zm3 3h2v-2H3v2zm1-1v4h2v-4H4zm1.707 4.707l.586-.586-1.414-1.414-.586.586 1.414 1.414z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11 2.253a1 1 0 1 0-2 0h2zm-2 13a1 1 0 1 0 2 0H9zm.447-12.167a1 1 0 1 0 1.107-1.666L9.447 3.086zM1 2.253L.447 1.42A1 1 0 0 0 0 2.253h1zm0 13H0a1 1 0 0 0 1.553.833L1 15.253zm8.447.833a1 1 0 1 0 1.107-1.666l-1.107 1.666zm0-14.666a1 1 0 1 0 1.107 1.666L9.447 1.42zM19 2.253h1a1 1 0 0 0-.447-.833L19 2.253zm0 13l-.553.833A1 1 0 0 0 20 15.253h-1zm-9.553-.833a1 1 0 1 0 1.107 1.666L9.447 14.42zM9 2.253v13h2v-13H9zm1.553-.833C9.203.523 7.42 0 5.5 0v2c1.572 0 2.961.431 3.947 1.086l1.107-1.666zM5.5 0C3.58 0 1.797.523.447 1.42l1.107 1.666C2.539 2.431 3.928 2 5.5 2V0zM0 2.253v13h2v-13H0zm1.553 13.833C2.539 15.431 3.928 15 5.5 15v-2c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM5.5 15c1.572 0 2.961.431 3.947 1.086l1.107-1.666C9.203 13.523 7.42 13 5.5 13v2zm5.053-11.914C11.539 2.431 12.928 2 14.5 2V0c-1.92 0-3.703.523-5.053 1.42l1.107 1.666zM14.5 2c1.573 0 2.961.431 3.947 1.086l1.107-1.666C18.203.523 16.421 0 14.5 0v2zm3.5.253v13h2v-13h-2zm1.553 12.167C18.203 13.523 16.421 13 14.5 13v2c1.573 0 2.961.431 3.947 1.086l1.107-1.666zM14.5 13c-1.92 0-3.703.523-5.053 1.42l1.107 1.666C11.539 15.431 12.928 15 14.5 15v-2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="18" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M11.447 8.894a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm0 1.789a1 1 0 1 0 .894-1.789l-.894 1.789zM7.447 7.106a1 1 0 1 0-.894 1.789l.894-1.789zM10 9a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0H8zm9.447-5.606a1 1 0 1 0-.894-1.789l.894 1.789zm-2.894-.789a1 1 0 1 0 .894 1.789l-.894-1.789zm2 .789a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zM18 5a1 1 0 1 0-2 0h2zm-2 2.5a1 1 0 1 0 2 0h-2zm-5.447-4.606a1 1 0 1 0 .894-1.789l-.894 1.789zM9 1l.447-.894a1 1 0 0 0-.894 0L9 1zm-2.447.106a1 1 0 1 0 .894 1.789l-.894-1.789zm-6 3a1 1 0 1 0 .894 1.789L.553 4.106zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zm-2-.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 2.789a1 1 0 1 0 .894-1.789l-.894 1.789zM2 5a1 1 0 1 0-2 0h2zM0 7.5a1 1 0 1 0 2 0H0zm8.553 12.394a1 1 0 1 0 .894-1.789l-.894 1.789zm-1.106-2.789a1 1 0 1 0-.894 1.789l.894-1.789zm1.106 1a1 1 0 1 0 .894 1.789l-.894-1.789zm2.894.789a1 1 0 1 0-.894-1.789l.894 1.789zM8 19a1 1 0 1 0 2 0H8zm2-2.5a1 1 0 1 0-2 0h2zm-7.447.394a1 1 0 1 0 .894-1.789l-.894 1.789zM1 15H0a1 1 0 0 0 .553.894L1 15zm1-2.5a1 1 0 1 0-2 0h2zm12.553 2.606a1 1 0 1 0 .894 1.789l-.894-1.789zM17 15l.447.894A1 1 0 0 0 18 15h-1zm1-2.5a1 1 0 1 0-2 0h2zm-7.447-5.394l-2 1 .894 1.789 2-1-.894-1.789zm-1.106 1l-2-1-.894 1.789 2 1 .894-1.789zM8 9v2.5h2V9H8zm8.553-4.894l-2 1 .894 1.789 2-1-.894-1.789zm.894 0l-2-1-.894 1.789 2 1 .894-1.789zM16 5v2.5h2V5h-2zm-4.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zm-2.894-1l-2 1 .894 1.789 2-1L8.553.106zM1.447 5.894l2-1-.894-1.789-2 1 .894 1.789zm-.894 0l2 1 .894-1.789-2-1-.894 1.789zM0 5v2.5h2V5H0zm9.447 13.106l-2-1-.894 1.789 2 1 .894-1.789zm0 1.789l2-1-.894-1.789-2 1 .894 1.789zM10 19v-2.5H8V19h2zm-6.553-3.894l-2-1-.894 1.789 2 1 .894-1.789zM2 15v-2.5H0V15h2zm13.447 1.894l2-1-.894-1.789-2 1 .894 1.789zM18 15v-2.5h-2V15h2z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@ -1,7 +0,0 @@
|
|||||||
<template>
|
|
||||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" fill="currentColor">
|
|
||||||
<path
|
|
||||||
d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.666.105 5.5 5.5 0 0 0-.114 7.665L10 18.78l8.39-8.4a5.5 5.5 0 0 0-.114-7.665 5.5 5.5 0 0 0-7.666-.105l-.61.61z"
|
|
||||||
/>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
@ -1,19 +0,0 @@
|
|||||||
<!-- This icon is from <https://github.com/Templarian/MaterialDesign>, distributed under Apache 2.0 (https://www.apache.org/licenses/LICENSE-2.0) license-->
|
|
||||||
<template>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
|
||||||
aria-hidden="true"
|
|
||||||
role="img"
|
|
||||||
class="iconify iconify--mdi"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
preserveAspectRatio="xMidYMid meet"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
d="M20 18v-4h-3v1h-2v-1H9v1H7v-1H4v4h16M6.33 8l-1.74 4H7v-1h2v1h6v-1h2v1h2.41l-1.74-4H6.33M9 5v1h6V5H9m12.84 7.61c.1.22.16.48.16.8V18c0 .53-.21 1-.6 1.41c-.4.4-.85.59-1.4.59H4c-.55 0-1-.19-1.4-.59C2.21 19 2 18.53 2 18v-4.59c0-.32.06-.58.16-.8L4.5 7.22C4.84 6.41 5.45 6 6.33 6H7V5c0-.55.18-1 .57-1.41C7.96 3.2 8.44 3 9 3h6c.56 0 1.04.2 1.43.59c.39.41.57.86.57 1.41v1h.67c.88 0 1.49.41 1.83 1.22l2.34 5.39z"
|
|
||||||
fill="currentColor"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
</template>
|
|
||||||
9
src/components/triangle-icon.vue
Normal file
9
src/components/triangle-icon.vue
Normal file
@ -0,0 +1,9 @@
|
|||||||
|
<template>
|
||||||
|
<img src="@/assets/img/triangle-icon.svg" />
|
||||||
|
</template>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
img {
|
||||||
|
width: 12px;
|
||||||
|
height: 7px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -3,7 +3,6 @@ import "./assets/main.css"
|
|||||||
import { createApp } from "vue"
|
import { createApp } from "vue"
|
||||||
import ElementPlus from "element-plus"
|
import ElementPlus from "element-plus"
|
||||||
import "element-plus/dist/index.css"
|
import "element-plus/dist/index.css"
|
||||||
// 如果您正在使用CDN引入，请删除下面一行。
|
|
||||||
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
|
import * as ElementPlusIconsVue from "@element-plus/icons-vue"
|
||||||
|
|
||||||
import App from "./App.vue"
|
import App from "./App.vue"
|
||||||
|
|||||||
@ -9,14 +9,6 @@ const router = createRouter({
|
|||||||
name: 'home',
|
name: 'home',
|
||||||
component: HomeView
|
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('../views/AboutView.vue')
|
|
||||||
}
|
|
||||||
]
|
]
|
||||||
})
|
})
|
||||||
|
|
||||||
|
|||||||
@ -1,15 +0,0 @@
|
|||||||
<template>
|
|
||||||
<div class="about">
|
|
||||||
<h1>This is an about page</h1>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<style>
|
|
||||||
@media (min-width: 1024px) {
|
|
||||||
.about {
|
|
||||||
min-height: 100vh;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
@ -1,9 +1,3 @@
|
|||||||
<script setup>
|
|
||||||
import TheWelcome from '../components/TheWelcome.vue'
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
<main>
|
|
||||||
<TheWelcome />
|
|
||||||
</main>
|
|
||||||
</template>
|
</template>
|
||||||
Loading…
x
Reference in New Issue
Block a user