mirror of
https://github.com/algerkong/AlgerMusicPlayer.git
synced 2026-05-18 03:17:29 +08:00
✨ feat: 修改样式和启动命令
This commit is contained in:
alger
+17
-16
@@ -1,16 +1,18 @@
|
||||
<template>
|
||||
<n-layout class="main-page" :native-scrollbar="false">
|
||||
<!-- 推荐歌手 -->
|
||||
<recommend-singer />
|
||||
<div class="main-content">
|
||||
<!-- 歌单分类列表 -->
|
||||
<playlist-type />
|
||||
<!-- 本周最热音乐 -->
|
||||
<recommend-songlist />
|
||||
<!-- 推荐最新专辑 -->
|
||||
<recommend-album />
|
||||
</div>
|
||||
</n-layout>
|
||||
<div class="main-page">
|
||||
<n-scrollbar>
|
||||
<!-- 推荐歌手 -->
|
||||
<recommend-singer />
|
||||
<div class="main-content">
|
||||
<!-- 歌单分类列表 -->
|
||||
<playlist-type />
|
||||
<!-- 本周最热音乐 -->
|
||||
<recommend-songlist />
|
||||
<!-- 推荐最新专辑 -->
|
||||
<recommend-album />
|
||||
</div>
|
||||
</n-scrollbar>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
@@ -22,11 +24,10 @@ const RecommendAlbum = defineAsyncComponent(() => import("@/components/Recommend
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.main-page {
|
||||
@apply mt-4 h-full;
|
||||
.main-page{
|
||||
@apply pt-4 h-full w-full;
|
||||
}
|
||||
|
||||
.main-content {
|
||||
@apply mt-6 flex;
|
||||
@apply mt-6 flex pb-28;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -105,7 +105,7 @@ const handlePlay = (item: any) => {
|
||||
<template>
|
||||
<div class="list-page">
|
||||
<!-- 歌单列表 -->
|
||||
<n-layout class="recommend" :native-scrollbar="false" @click="showMusic = false">
|
||||
<n-scrollbar class="recommend" @click="showMusic = false" :size="100">
|
||||
<div
|
||||
class="recommend-title"
|
||||
:class="setAnimationClass('animate__bounceInLeft')"
|
||||
@@ -133,7 +133,7 @@ const handlePlay = (item: any) => {
|
||||
<div class="recommend-item-title">{{ item.name }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</n-layout>
|
||||
</n-scrollbar>
|
||||
|
||||
<transition name="musicPage">
|
||||
<div class="music-page" v-if="showMusic">
|
||||
@@ -157,7 +157,7 @@ const handlePlay = (item: any) => {
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.list-page {
|
||||
@apply relative h-full;
|
||||
@apply relative h-full w-full pt-4;
|
||||
}
|
||||
|
||||
.musicPage-enter-active {
|
||||
@@ -169,13 +169,13 @@ const handlePlay = (item: any) => {
|
||||
}
|
||||
|
||||
.recommend {
|
||||
@apply w-full h-full;
|
||||
@apply w-full h-full bg-none;
|
||||
&-title {
|
||||
@apply text-lg font-bold text-white py-4;
|
||||
@apply text-lg font-bold text-white pb-4;
|
||||
}
|
||||
|
||||
&-list {
|
||||
@apply grid gap-6 pb-28;
|
||||
@apply grid gap-6 pb-28 pr-3;
|
||||
grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
|
||||
}
|
||||
&-item {
|
||||
|
||||
+170
-167
@@ -1,168 +1,171 @@
|
||||
<script lang="ts" setup>
|
||||
import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
|
||||
import { onMounted } from '@vue/runtime-core';
|
||||
import { ref } from 'vue';
|
||||
import { getUserDetail, loginByCellphone } from '@/api/login';
|
||||
import { useStore } from 'vuex';
|
||||
import { useMessage } from 'naive-ui'
|
||||
import { setAnimationClass, setAnimationDelay } from "@/utils";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
const message = useMessage()
|
||||
const store = useStore();
|
||||
const router = useRouter()
|
||||
|
||||
const qrUrl = ref<string>()
|
||||
onMounted(() => {
|
||||
loadLogin()
|
||||
})
|
||||
|
||||
const loadLogin = async () => {
|
||||
const qrKey = await getQrKey()
|
||||
const key = qrKey.data.data.unikey
|
||||
const { data } = await createQr(key)
|
||||
qrUrl.value = data.data.qrimg
|
||||
timerIsQr(key)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const timerIsQr = (key: string) => {
|
||||
const timer = setInterval(async () => {
|
||||
const { data } = await checkQr(key)
|
||||
|
||||
if (data.code === 800) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (data.code === 803) {
|
||||
// 将token存入localStorage
|
||||
localStorage.setItem('token', data.cookie)
|
||||
const user = await getUserDetail()
|
||||
store.state.user = user.data.profile
|
||||
message.success('登录成功')
|
||||
|
||||
await getLoginStatus().then(res => {
|
||||
console.log(res);
|
||||
})
|
||||
clearInterval(timer)
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
// 是否扫码登陆
|
||||
const isQr = ref(true)
|
||||
const chooseQr = () => {
|
||||
isQr.value = !isQr.value
|
||||
}
|
||||
|
||||
// 手机号登录
|
||||
const phone = ref('')
|
||||
const password = ref('')
|
||||
const loginPhone = async () => {
|
||||
const { data } = await loginByCellphone(phone.value, password.value)
|
||||
if (data.code === 200) {
|
||||
message.success('登录成功')
|
||||
store.state.user = data.profile
|
||||
localStorage.setItem('token', data.cookie)
|
||||
setTimeout(() => {
|
||||
router.push('/')
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="phone-login">
|
||||
<div class="bg"></div>
|
||||
<div class="content">
|
||||
<div class="phone" v-if="isQr" :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div class="login-title">扫码登陆</div>
|
||||
<img class="qr-img" :src="qrUrl" />
|
||||
<div class="text">使用网易云APP扫码登录</div>
|
||||
</div>
|
||||
<div class="phone" v-else :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div class="login-title">手机号登录</div>
|
||||
<div class="phone-page">
|
||||
<input v-model="phone" class="phone-input" type="text" placeholder="手机号" />
|
||||
<input v-model="password" class="phone-input" type="password" placeholder="密码" />
|
||||
</div>
|
||||
<n-button class="btn-login" @click="loginPhone()">登录</n-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="title" @click="chooseQr()">{{ isQr ? '手机号登录' : '扫码登录' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
@apply p-4 flex flex-col items-center justify-center p-20;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
@apply text-2xl font-bold mb-6;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply mt-4 text-green-500 text-xs;
|
||||
}
|
||||
|
||||
.phone-login {
|
||||
width: 350px;
|
||||
height: 550px;
|
||||
@apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
|
||||
background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
|
||||
background-color: #383838;
|
||||
box-shadow: inset 0px 0px 20px 5px #0000005e;
|
||||
|
||||
.bg {
|
||||
@apply absolute w-full h-full bg-black opacity-30;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 200%;
|
||||
height: 250px;
|
||||
bottom: -180px;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
padding: 10px;
|
||||
transform: translateX(-50%);
|
||||
color: #ffffff99;
|
||||
@apply absolute bg-black flex justify-center text-lg font-bold cursor-pointer;
|
||||
box-shadow: 10px 0px 20px #000000a9;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply absolute w-full h-full p-4 flex flex-col items-center justify-center pb-20 text-center;
|
||||
.qr-img {
|
||||
@apply opacity-80 rounded-2xl cursor-pointer;
|
||||
}
|
||||
|
||||
.phone {
|
||||
animation-duration: 0.5s;
|
||||
&-page {
|
||||
background-color: #ffffffdd;
|
||||
width: 250px;
|
||||
@apply rounded-2xl overflow-hidden;
|
||||
}
|
||||
|
||||
&-input {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@apply w-full text-black px-4 outline-none;
|
||||
}
|
||||
}
|
||||
.btn-login {
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
@apply mt-10 text-white rounded-xl bg-black opacity-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
<script lang="ts" setup>
|
||||
import { getQrKey, createQr, checkQr, getLoginStatus } from '@/api/login'
|
||||
import { onMounted } from '@vue/runtime-core';
|
||||
import { ref } from 'vue';
|
||||
import { getUserDetail, loginByCellphone } from '@/api/login';
|
||||
import { useStore } from 'vuex';
|
||||
import { useMessage } from 'naive-ui'
|
||||
import { setAnimationClass, setAnimationDelay } from "@/utils";
|
||||
import { useRouter } from 'vue-router';
|
||||
|
||||
|
||||
const message = useMessage()
|
||||
const store = useStore();
|
||||
const router = useRouter()
|
||||
|
||||
const qrUrl = ref<string>()
|
||||
onMounted(() => {
|
||||
loadLogin()
|
||||
})
|
||||
|
||||
const loadLogin = async () => {
|
||||
const qrKey = await getQrKey()
|
||||
const key = qrKey.data.data.unikey
|
||||
const { data } = await createQr(key)
|
||||
qrUrl.value = data.data.qrimg
|
||||
timerIsQr(key)
|
||||
}
|
||||
|
||||
|
||||
|
||||
const timerIsQr = (key: string) => {
|
||||
const timer = setInterval(async () => {
|
||||
const { data } = await checkQr(key)
|
||||
|
||||
if (data.code === 800) {
|
||||
clearInterval(timer)
|
||||
}
|
||||
if (data.code === 803) {
|
||||
// 将token存入localStorage
|
||||
localStorage.setItem('token', data.cookie)
|
||||
const user = await getUserDetail()
|
||||
store.state.user = user.data.profile
|
||||
message.success('登录成功')
|
||||
|
||||
await getLoginStatus().then(res => {
|
||||
console.log(res);
|
||||
})
|
||||
clearInterval(timer)
|
||||
setTimeout(() => {
|
||||
router.push('/user')
|
||||
}, 1000);
|
||||
}
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
|
||||
// 是否扫码登陆
|
||||
const isQr = ref(true)
|
||||
const chooseQr = () => {
|
||||
isQr.value = !isQr.value
|
||||
}
|
||||
|
||||
// 手机号登录
|
||||
const phone = ref('')
|
||||
const password = ref('')
|
||||
const loginPhone = async () => {
|
||||
const { data } = await loginByCellphone(phone.value, password.value)
|
||||
if (data.code === 200) {
|
||||
message.success('登录成功')
|
||||
store.state.user = data.profile
|
||||
localStorage.setItem('token', data.cookie)
|
||||
setTimeout(() => {
|
||||
router.push('/user')
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="login-page">
|
||||
<div class="phone-login">
|
||||
<div class="bg"></div>
|
||||
<div class="content">
|
||||
<div class="phone" v-if="isQr" :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div class="login-title">扫码登陆</div>
|
||||
<img class="qr-img" :src="qrUrl" />
|
||||
<div class="text">使用网易云APP扫码登录</div>
|
||||
</div>
|
||||
<div class="phone" v-else :class="setAnimationClass('animate__fadeInUp')">
|
||||
<div class="login-title">手机号登录</div>
|
||||
<div class="phone-page">
|
||||
<input v-model="phone" class="phone-input" type="text" placeholder="手机号" />
|
||||
<input v-model="password" class="phone-input" type="password" placeholder="密码" />
|
||||
</div>
|
||||
<n-button class="btn-login" @click="loginPhone()">登录</n-button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bottom">
|
||||
<div class="title" @click="chooseQr()">{{ isQr ? '手机号登录' : '扫码登录' }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.login-page {
|
||||
@apply p-4 flex flex-col items-center justify-center p-20;
|
||||
}
|
||||
|
||||
.login-title {
|
||||
@apply text-2xl font-bold mb-6;
|
||||
}
|
||||
|
||||
.text {
|
||||
@apply mt-4 text-green-500 text-xs;
|
||||
}
|
||||
|
||||
.phone-login {
|
||||
width: 350px;
|
||||
height: 550px;
|
||||
@apply rounded-2xl rounded-b-none bg-cover bg-no-repeat relative overflow-hidden;
|
||||
background-image: url(http://tva4.sinaimg.cn/large/006opRgRgy1gw8nf6no7uj30rs15n0x7.jpg);
|
||||
background-color: #383838;
|
||||
box-shadow: inset 0px 0px 20px 5px #0000005e;
|
||||
|
||||
.bg {
|
||||
@apply absolute w-full h-full bg-black opacity-30;
|
||||
}
|
||||
|
||||
.bottom {
|
||||
width: 200%;
|
||||
height: 250px;
|
||||
bottom: -180px;
|
||||
border-radius: 50%;
|
||||
left: 50%;
|
||||
padding: 10px;
|
||||
transform: translateX(-50%);
|
||||
color: #ffffff99;
|
||||
@apply absolute bg-black flex justify-center text-lg font-bold cursor-pointer;
|
||||
box-shadow: 10px 0px 20px #000000a9;
|
||||
}
|
||||
|
||||
.content {
|
||||
@apply absolute w-full h-full p-4 flex flex-col items-center justify-center pb-20 text-center;
|
||||
.qr-img {
|
||||
@apply opacity-80 rounded-2xl cursor-pointer;
|
||||
}
|
||||
|
||||
.phone {
|
||||
animation-duration: 0.5s;
|
||||
&-page {
|
||||
background-color: #ffffffdd;
|
||||
width: 250px;
|
||||
@apply rounded-2xl overflow-hidden;
|
||||
}
|
||||
|
||||
&-input {
|
||||
height: 40px;
|
||||
border-bottom: 1px solid #e5e5e5;
|
||||
@apply w-full text-black px-4 outline-none;
|
||||
}
|
||||
}
|
||||
.btn-login {
|
||||
width: 250px;
|
||||
height: 40px;
|
||||
@apply mt-10 text-white rounded-xl bg-black opacity-60;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -89,7 +89,7 @@ const handlePlay = (item: any) => {
|
||||
<div class="page">
|
||||
<div class="user-name">{{ user.nickname }}</div>
|
||||
<div class="user-info">
|
||||
<n-avatar round :size="50" :src="user.avatarUrl" />
|
||||
<n-avatar round :size="50" :src="getImgUrl(user.avatarUrl)" />
|
||||
<div class="user-info-list">
|
||||
<div class="user-info-item">
|
||||
<div class="label">{{ userDetail.profile.followeds }}</div>
|
||||
|
||||
Reference in New Issue
Block a user