.nav-outer[data-v-26b91514] {
    width: 100%;
    height: 100%;
}
.header-title[data-v-26b91514] {
    font-size: 1.5rem;
    /* cursor: pointer; */
    font-weight: 500;
    padding: 1rem;
    -webkit-app-region: drag;
}
span {
  margin: 0;
}
.header {
  padding: 0.5rem;
  padding-top: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  -webkit-app-region: drag;
  -webkit-user-select: none;
     -moz-user-select: none;
          user-select: none;
}
.header * {
  -webkit-app-region: no-drag;
}
.header-search {
  margin-left: 2rem;
  display: flex;
}
.header-user {
  margin-right: 2rem;
  cursor: pointer;
}
.header-nav {
  position: fixed;
  top: 0;
  left: -100%;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  z-index: 10;
}
@media screen and (min-width: 600px) {
.header-menu {
    display: none;
}
}
@media screen and (max-width: 600px) {
.header-user {
    margin-right: 0;
}
.header-search {
    margin-left: 0;
}
}

.playinglist[data-v-efb69968] {
    height: 100%;
    width: 100%;
}
ul[data-v-efb69968] {
    list-style: none;
    padding: 0;
}
.playinglist-item[data-v-efb69968] {
    padding: 0.5rem;
    margin: 0.5rem;
    border-radius: 0.5rem;
    cursor: pointer;
    box-shadow: 0 0 2px var(--60b674d8);
    display: flex;
    background-color: var(--7e926fa7);
}
.playinglist-item.playinglist-item-current[data-v-efb69968] {
    padding: calc(0.5rem - 2px);
    border: 2px solid var(--60b649fa);
    background-color: var(--12d782bd);
}
.playinglist-img[data-v-efb69968] {
    height: 2.5rem;
    width: 2.5rem;
    border-radius: 0.5rem;
    box-shadow: 0 0 0.2rem var(--60b674d8);
    margin-right: 0.5rem;
}
.text[data-v-efb69968] {
    width: calc(100% - 3rem)
}
.name[data-v-efb69968],
.tns[data-v-efb69968],
.artist[data-v-efb69968] {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
}

[data-v-58277894] {
  box-sizing: border-box;
}
.player-outer[data-v-58277894] {

  position: absolute;
  z-index: 10;

  left: 0;
  top: 0;
  width: 100%;
  height: 100%;


  display: flex;

  /* 配合下面content的最大宽度 实现居中 */
  justify-content: center;
  /* 背景渐变 */
  background-image: var(--e0490ef0);
}
.player-content[data-v-58277894] {
  display: flex;
  height: 100%;
  min-width: 400px;
  width: 100%;
  max-width: calc(100 * var(--vh, 1vh) / 4 * 6);
  /* max-width: calc(100vh/9*16); */
}
.player-background[data-v-58277894] {
  /* 半透明遮罩 */
  position: absolute;
  display: block;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  background-color: var(--644873bb);
}

/************************歌词部分**********************************************************************/
.lyric-item[data-v-58277894] {
  transform: scale(0.95);
}
.lyric-lrc[data-v-58277894] {
  /* 歌词原文 */
  color: rgba(68, 68, 68, 0.8);
  font-size: var(--eadad1e8);
  margin-top: 0.5rem;
}
.lyric-roma[data-v-58277894] {
  /* 歌词罗马音 */
  color: rgba(87, 87, 87, 0.8);
  font-size: calc(var(--eadad1e8) - 0.3rem);
}
.lyric-tran[data-v-58277894] {
  /* 歌词翻译 */
  color: rgba(87, 87, 87, 0.8);
  font-size: calc(var(--eadad1e8) - 0.2rem);
}
.lyric-active[data-v-58277894] {
  /* 当前歌词 */
  font-weight: 500;
  transform: scale(1);
}
.lyric-active .lyric-roma[data-v-58277894] {
  /* 当前歌词罗马音 */
  color: rgb(50, 50, 50);
  /* font-size: 1.3rem; */
}
.lyric-active .lyric-tran[data-v-58277894] {
  /* 当前歌词翻译 */
  color: rgb(45, 45, 45);
  /* font-size: 1.5rem; */
}
.column-lyric[data-v-58277894] {
  position: relative;
  display: flex;
  flex: 50%;
  height: 100%;
  padding: 2rem;
}
.container-lyric[data-v-58277894] {
  width: 100%;
  height: 100%;
  /* overflow-y: scroll; */
}
.lyric-list[data-v-58277894] {
  padding-top: 50%;
  padding-bottom: 50%;
}

/********************************播放控件**********************************************************/
.column-player[data-v-58277894] {
  display: flex;
  flex: 50%;
  height: 100%;
  align-items: center;
  justify-content: center;
  min-width: 300px;
  position: relative;
}
.music-name[data-v-58277894] {
  font-size: 2rem;
}
.button[data-v-58277894] {
  cursor: pointer;
}
.player-ctrl-top[data-v-58277894] {
  display: flex;
  margin-bottom: 1rem;
  margin-top: 2rem;
}
.btn-like[data-v-58277894],
.btn-comments[data-v-58277894] {
  margin-left: 0.5rem;
}
.btn-control[data-v-58277894] {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.btn-play-control[data-v-58277894] {
  /* 上一曲 暂停 下一曲 按钮 */
  display: flex;
}
.container-player[data-v-58277894] {
  margin-left: 10%;
  margin-right: 10%;
  width: 80%;
}
.player-centerblock[data-v-58277894] {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.music-img-container[data-v-58277894] {
  margin-top: 1rem;
  margin-bottom: 1rem;
  position: relative;
  border-radius: 1rem;
  width: 80%;
  /* 宽度等于父元素宽度 */
  height: 0;
  /* 初始高度为0 */
  padding-bottom: 80%;
  /* 高度被撑开为宽度的100% */
  overflow: hidden;
  /* 隐藏溢出部分 */
}
.music-img[data-v-58277894] {
  position: absolute;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.music-progress[data-v-58277894] {
  width: 100%;
}
.player-ctrl[data-v-58277894] {
  width: 90%;
}
ul[data-v-58277894] {
  list-style: none;
  padding: 0;
}
.player-playinglist-box[data-v-58277894] {
  position: fixed;
  will-change: transform;
  left: 0;
  top: 100%;
  height: 100%;
  background: none;
  width: 100%;
  z-index: 11;
}
.player-playinglist[data-v-58277894] {
  position: absolute;
  top: 20%;
  left: 5%;
  width: 90%;
  height: 80%;
  z-index: 1;
  background-color: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(20px);
  border-radius: 0.8rem;
  overflow: hidden;
}
@media (max-width: 600px) {

  /* 0-600px 竖屏设备 */
.column-lyric[data-v-58277894] {
    display: var(--e03132f6);
    transition: all 0.7s ease-in-out;
}
.column-player[data-v-58277894] {
    display: var(--bb9bcb3a);
    transition: all 0.7s ease-in-out;
}
.container-player[data-v-58277894] {
    height: calc(100% - 3rem);
    transform: translateY(3rem);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.player-centerblock[data-v-58277894] {
    flex: 1;
    justify-content: space-around;
}
.player-ctrl-top[data-v-58277894] {
    margin-top: 0;
}
}

[data-v-86679578] {
    box-sizing: border-box;
}
.ctrl-outer-outer[data-v-86679578] {
    position: relative;
}
.ctrl-outer[data-v-86679578] {
    position: fixed;
    z-index: 1;
    top: calc(var(--vh, 1vh) * 100 - var(--70141896));
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    overflow: hidden;
    /* border: 1px solid grey; */
    box-shadow: 0 0 0.2rem grey;
    border-radius: 1rem 1rem 0 0;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    background-color: rgba(255, 255, 255, 0.65);
    backdrop-filter: blur(20px);
    /* transition: all 0.5s ease-in-out; */
}
.ctrl-box[data-v-86679578] {
    flex: 0 0 auto;
    display: flex;
    justify-content: space-between;
}
.ctrl-left[data-v-86679578] {
    flex: 1;
    display: flex;
    max-width: calc(100% / 3.5);
    cursor: pointer;
}
.ctrl-img-box[data-v-86679578] {
    position: relative;
    border-radius: 1rem;
    box-shadow: 0 0 0.2rem grey;
    width: 5rem;
    /* 宽度等于父元素宽度 */
    height: 0;
    /* 初始高度为0 */
    padding-bottom: 5rem;
    /* 高度被撑开为宽度的100% */
    overflow: hidden;
    /* 隐藏溢出部分 */
}
.ctrl-img[data-v-86679578] {
    position: absolute;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
}
.ctrl-info-box[data-v-86679578] {
    padding-left: 1rem;
    width: 70%;
}
.ctrl-info-title[data-v-86679578] {
    font-size: 1.3rem;
}

/* 
center--------------------------------------------------------
 */
.ctrl-center[data-v-86679578] {
    flex: 1;
    padding-top: 0.8rem;
    max-width: calc(100% / 3.5);
}
.button[data-v-86679578] {
    cursor: pointer;
}
.btn-control[data-v-86679578] {
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
}
.btn-play-control[data-v-86679578] {
    /* 上一曲 暂停 下一曲 按钮 */
    display: flex;
}

/* 
right---------------------------------------------------------
*/
.ctrl-right[data-v-86679578] {
    flex: 1;
    max-width: calc(100% / 3.5);
    display: flex;
    justify-content: flex-end;
    align-items: center;
}
.btn-desktop-lyric[data-v-86679578],
.btn-comments[data-v-86679578] {
    margin-right: 1rem;
}
.btn-desktop-lyric[data-v-86679578] {
    font-weight: 400;
    font-size: 1.2rem;
    vertical-align: text-top;
    padding-bottom: 0.35rem;
    transition: all 0.2s linear;
}
.btn-desktop-lyric-active[data-v-86679578] {
    font-weight: 800 !important;
}

/*************************************************************
播放列表-------------------------------------------------------------------===================
************************************************/
.ctrl-playinglist[data-v-86679578] {
    margin-top: 1rem;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100 - var(--70141896));
    flex: 1;
}

/* ***************************************************************
播放器-------------------------------------------------------------------===================
*****************************************************************/
.ctrl-player[data-v-86679578] {
    position: fixed;
    top: calc(var(--vh, 1vh) * 100);
    left: 0;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;

    z-index: 10;
}
@media screen and (max-width: 600px) {
.ctrl-info-box[data-v-86679578] {
        display: none;
}
.btn-like[data-v-86679578],
    .btn-loop[data-v-86679578] {
        display: none;
}
}

.container[data-v-fe4748a6] {
  height: calc(var(--vh, 1vh) * 100);
  width: calc(var(--vw, 1vw) * 100);
  max-width: calc(var(--vw, 1vw) * 100);
  overflow: hidden;
}
.container-main[data-v-fe4748a6] {
  display: flex;
  height: calc(var(--vh, 1vh) * 100 - 7rem);
}
.container-nav[data-v-fe4748a6] {
  flex: 0 0 auto;
  width: 12rem;
}
.container-content[data-v-fe4748a6] {
  flex: 1;
  display: flex;
  flex-direction: column;
}
.container-router-view[data-v-fe4748a6] {
  max-width: 100%;
  overflow-y: hidden;
  flex: 1;
}
.route-enter-active[data-v-fe4748a6],
.route-leave-active[data-v-fe4748a6] {
  transition: opacity 0.25s ease;
}
.route-enter-to[data-v-fe4748a6],
.route-leave-from[data-v-fe4748a6] {
  opacity: 1;
}
.route-enter-from[data-v-fe4748a6],
.route-leave-to[data-v-fe4748a6] {
  opacity: 0;
}
@media screen and (min-width: 600px) {
.container-content[data-v-fe4748a6] {
    max-width: calc(var(--vw, 1vw) * 100 - 12rem);
}
}
@media screen and (max-width: 600px) {
.container-content[data-v-fe4748a6] {
    max-width: calc(var(--vw, 1vw) * 100);
}
.container-nav[data-v-fe4748a6] {
    display: none;
}
}

.app,
.bg {
  background-color: var(--60c13a27);
}
* {
  --color-0: var(--60c13a27);
  --color-1: var(--60c13a46);
  --color-2: var(--60c13a65);
  --color-3: var(--60c13a84);
  --color-4: var(--60c13aa3);
  --color-5: var(--60c13ac2);
  --color-6: var(--60c13ae1);
  --color-7: var(--60c13b00);
  --color-8: var(--60c13b1f);
  --color-9: var(--60c13b3e);
}
.icon,
.n-icon {
  color: var(--color-8);
}
.text1 {
  color: var(--color-9);
}
.text2 {
  color: var(--color-7);
}
.text3 {
  color: var(--color-6);
}


/* 主题色 */
.color0 {
  color: var(--color-0);
}
.color1 {
  color: var(--color-1);
}
.color2 {
  color: var(--color-2);
}
.color3 {
  color: var(--color-3);
}
.color4 {
  color: var(--color-4);
}
.color5 {
  color: var(--color-5);
}
.color6 {
  color: var(--color-6);
}
.color7 {
  color: var(--color-7);
}
.color8 {
  color: var(--color-8);
}
.color9 {
  color: var(--color-9);
}
.loading-center {
  width: 100%;
  height: calc(70 * var(--vh, 1vh));
  display: flex;
  justify-content: center;
  align-items: center;
}