diff --git a/src/views/artist.vue b/src/views/artist.vue index 33e75a3..e9e27f9 100644 --- a/src/views/artist.vue +++ b/src/views/artist.vue @@ -20,6 +20,9 @@ >{{ artist.mvSize }} {{ $t('artist.videos') }} +
+ {{ artist.briefDesc }} +
{{ $t('common.play') }} @@ -140,6 +143,18 @@ :items="similarArtists.slice(0, 12)" />
+ + +

+ {{ artist.briefDesc }} +

+
@@ -153,6 +168,7 @@ import { similarArtists, } from '@/api/artist'; import { isAccountLoggedIn } from '@/utils/auth'; +import { disableScrolling, enableScrolling } from '@/utils/ui'; import NProgress from 'nprogress'; import ButtonTwoTone from '@/components/ButtonTwoTone.vue'; @@ -160,10 +176,11 @@ import TrackList from '@/components/TrackList.vue'; import CoverRow from '@/components/CoverRow.vue'; import Cover from '@/components/Cover.vue'; import MvRow from '@/components/MvRow.vue'; +import Modal from '@/components/Modal.vue'; export default { name: 'Artist', - components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow }, + components: { Cover, ButtonTwoTone, TrackList, CoverRow, MvRow, Modal }, beforeRouteUpdate(to, from, next) { NProgress.start(); this.artist.img1v1Url = @@ -188,6 +205,7 @@ export default { size: '', }, showMorePopTracks: false, + showFullDescription: false, mvs: [], hasMoreMV: false, similarArtists: [], @@ -285,6 +303,14 @@ export default { block, }); }, + toggleFullDescription() { + this.showFullDescription = !this.showFullDescription; + if (this.showFullDescription) { + disableScrolling(); + } else { + enableScrolling(); + } + }, }, }; @@ -329,6 +355,23 @@ export default { } } } + + .description { + user-select: none; + font-size: 14px; + opacity: 0.68; + margin-top: 24px; + display: -webkit-box; + -webkit-box-orient: vertical; + -webkit-line-clamp: 3; + overflow: hidden; + cursor: pointer; + white-space: pre-line; + &:hover { + transition: opacity 0.3s; + opacity: 0.88; + } + } } .section-title { @@ -443,4 +486,13 @@ export default { opacity: 0; } } + +.description-fulltext { + font-size: 16px; + margin-top: 24px; + display: -webkit-box; + -webkit-box-orient: vertical; + overflow: hidden; + white-space: pre-line; +}