diff --git a/src/assets/img/bg_profile_unlogin.jpg b/src/assets/img/bg_profile_unlogin.jpg
new file mode 100644
index 0000000000000000000000000000000000000000..975f2c2d95380afd1292feb2380bcf966a968919
Binary files /dev/null and b/src/assets/img/bg_profile_unlogin.jpg differ
diff --git a/src/components/common/ShowAlbums.vue b/src/components/common/ShowAlbums.vue
new file mode 100644
index 0000000000000000000000000000000000000000..ca03d4368b68cd355c603fc9c277cca7f857929b
--- /dev/null
+++ b/src/components/common/ShowAlbums.vue
@@ -0,0 +1,164 @@
+<template>
+  <div
+    class="js_search_tab_cont search_tab_cont"
+    id="album_box"
+    style="display: block"
+  >
+    <div class="mod_playlist_text">
+      <ul class="playlist__header">
+        <li class="playlist__header_name">专辑</li>
+        <li class="playlist__header_author">歌手</li>
+        <li class="playlist__header_other">发行时间</li>
+      </ul>
+      <ul class="playlist__list">
+        <li class="playlist__item" v-for="album in albums" :key="album.id">
+          <div class="playlist__cover" style="visibility: visible">
+            <a class="js_album"
+              ><img
+                class="playlist__pic"
+                style="display: block; visibility: visible"
+                onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
+                :alt="album.name"
+                :src="album.img"
+            /></a>
+          </div>
+          <h4 class="playlist__title">
+            <span class="playlist__title_txt"
+              ><a class="js_album" :title="album.name">{{
+                album.name
+              }}</a></span
+            >
+          </h4>
+          <div class="playlist__author">
+            <a class="js_singer" :title="album.artistsText">{{
+              album.artistsText
+            }}</a>
+          </div>
+          <div class="playlist__other">{{ album.publishTime }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    albums: {
+      type: Array,
+      default: [],
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mod_playlist_text {
+  zoom: 1;
+  font-size: 14px;
+}
+.mod_lyric_list,
+.mod_mv_list,
+.mod_playlist_text,
+.mod_songlist {
+  padding-bottom: 40px;
+}
+.mod_playlist_text .playlist__header {
+  height: 50px;
+  line-height: 50px;
+  background-color: #fbfbfd;
+  color: #999;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author,
+.mod_playlist_text .playlist__header_name,
+.mod_playlist_text .playlist__header_number,
+.mod_playlist_text .playlist__number {
+  float: left;
+  padding-left: 20px;
+}
+.mod_playlist_text .playlist__header_name {
+  width: 57%;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author {
+  width: 30%;
+}
+.mod_playlist_text .playlist__header_other,
+.mod_playlist_text .playlist__other {
+  width: 7.5%;
+}
+.mod_playlist_text .playlist__header_other,
+.mod_playlist_text .playlist__other {
+  float: right;
+  padding-right: 20px;
+  text-align: right;
+}
+.mod_playlist_text .playlist__item {
+  position: relative;
+  height: 70px;
+  line-height: 70px;
+  zoom: 1;
+  overflow: hidden;
+  clear: both;
+  font-size: 0;
+}
+.mod_playlist_text .playlist__cover {
+  float: left;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  margin-top: 10px;
+  padding-left: 20px;
+}
+.mod_playlist_text .playlist__pic {
+  height: 100%;
+  object-fit: cover;
+}
+.mod_playlist_text .playlist__pic {
+  display: block;
+  width: 100%;
+  min-height: 50px;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__other,
+.mod_playlist_text .playlist__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.mod_playlist_text .playlist__title {
+  width: 52.66667%;
+  font-weight: 400;
+  text-indent: 15px;
+  overflow: hidden;
+}
+.mod_playlist_text .playlist__title_txt {
+  float: left;
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__count,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__title {
+  float: left;
+  height: 70px;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author {
+  width: 30%;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__other,
+.mod_playlist_text .playlist__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/common/ShowMvs.vue b/src/components/common/ShowMvs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..e33376ea0f3bbdba67b1201d58887ed9012dab5d
--- /dev/null
+++ b/src/components/common/ShowMvs.vue
@@ -0,0 +1,74 @@
+<template>
+  <div
+    class="js_search_tab_cont search_tab_cont"
+    id="mv_box"
+    style="display: block"
+  >
+    <div class="mod_mv_list">
+      <ul class="mv_list__list">
+        <li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
+          <div class="mv_list__item_box" style="visibility: visible">
+            <a class="mv_list__cover mod_cover js_mv" hidefocus="true">
+              <img
+                class="mv_list__pic"
+                style="display: block; visibility: visible"
+                onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
+                :alt="mv.name"
+                :src="mv.img"
+              />
+              <i class="mod_cover__icon_play"></i>
+              <!--div class="mv_list__time">04:10</div-->
+            </a>
+            <h3 class="mv_list__title">
+              <a class="js_mv" :title="mv.name">{{ mv.name }}</a>
+            </h3>
+            <p class="mv_list__singer">
+              <a class="js_singer" :title="mv.artistsText">{{
+                mv.artistsText
+              }}</a>
+            </p>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    mvs: { type: Array, default: [] },
+  },
+};
+</script>
+
+<style scoped>
+h3,
+hr,
+li,
+ol,
+p,
+td,
+th,
+ul {
+  margin: 0;
+  padding: 0;
+}
+.mod_lyric_list,
+.mod_mv_list,
+.mod_playlist_text,
+.mod_songlist {
+  padding-bottom: 40px;
+}
+
+.mv_list__list {
+  margin-right: -20px;
+  zoom: 1;
+}
+.mv_list__item {
+  float: left;
+  width: 25%;
+  padding-bottom: 44px;
+  overflow: hidden;
+}
+</style>
diff --git a/src/components/common/ShowPlaylist.vue b/src/components/common/ShowPlaylist.vue
new file mode 100644
index 0000000000000000000000000000000000000000..96dbeffb925a3b82c4d6029966f80ddc07a746d0
--- /dev/null
+++ b/src/components/common/ShowPlaylist.vue
@@ -0,0 +1,168 @@
+<template>
+  <div
+    class="js_search_tab_cont search_tab_cont"
+    id="playlist_box"
+    style="display: block"
+  >
+    <div class="mod_playlist_text">
+      <ul class="playlist__header">
+        <li class="playlist__header_name">歌单</li>
+        <li class="playlist__header_author">创建人</li>
+        <li class="playlist__header_other">播放量</li>
+      </ul>
+      <ul class="playlist__list">
+        <li
+          class="playlist__item"
+          v-for="playlist in playlists"
+          :key="playlist.id"
+        >
+          <div class="playlist__cover" style="visibility: visible">
+            <a class="js_playlist"
+              ><img
+                class="playlist__pic"
+                style="display: block; visibility: visible"
+                onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
+                :src="playlist.img"
+                :alt="playlist.name"
+            /></a>
+          </div>
+          <h4 class="playlist__title">
+            <span class="playlist__title_txt"
+              ><a class="js_playlist" :title="playlist.name">{{
+                playlist.name
+              }}</a></span
+            >
+          </h4>
+          <div class="playlist__author">
+            <a class="js_user" title="playlist.creatorName">{{
+              playlist.creatorName
+            }}</a>
+          </div>
+          <div class="playlist__other">{{ playlist.playCount }}</div>
+        </li>
+      </ul>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {
+    playlists: {
+      type: Array,
+      default: [],
+    },
+  },
+};
+</script>
+
+<style scoped>
+.mod_playlist_text {
+  zoom: 1;
+  font-size: 14px;
+}
+.mod_lyric_list,
+.mod_mv_list,
+.mod_playlist_text,
+.mod_songlist {
+  padding-bottom: 40px;
+}
+.mod_playlist_text .playlist__header {
+  height: 50px;
+  line-height: 50px;
+  background-color: #fbfbfd;
+  color: #999;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author,
+.mod_playlist_text .playlist__header_name,
+.mod_playlist_text .playlist__header_number,
+.mod_playlist_text .playlist__number {
+  float: left;
+  padding-left: 20px;
+}
+.mod_playlist_text .playlist__header_name {
+  width: 57%;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author {
+  width: 30%;
+}
+.mod_playlist_text .playlist__header_other,
+.mod_playlist_text .playlist__other {
+  width: 7.5%;
+}
+.mod_playlist_text .playlist__header_other,
+.mod_playlist_text .playlist__other {
+  float: right;
+  padding-right: 20px;
+  text-align: right;
+}
+.mod_playlist_text .playlist__item {
+  position: relative;
+  height: 70px;
+  line-height: 70px;
+  zoom: 1;
+  overflow: hidden;
+  clear: both;
+  font-size: 0;
+}
+.mod_playlist_text .playlist__cover {
+  float: left;
+  width: 50px;
+  height: 50px;
+  overflow: hidden;
+  margin-top: 10px;
+  padding-left: 20px;
+}
+.mod_playlist_text .playlist__pic {
+  height: 100%;
+  object-fit: cover;
+}
+.mod_playlist_text .playlist__pic {
+  display: block;
+  width: 100%;
+  min-height: 50px;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__other,
+.mod_playlist_text .playlist__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+.mod_playlist_text .playlist__title {
+  width: 52.66667%;
+  font-weight: 400;
+  text-indent: 15px;
+  overflow: hidden;
+}
+.mod_playlist_text .playlist__title_txt {
+  float: left;
+  max-width: 90%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__count,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__title {
+  float: left;
+  height: 70px;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__header_author {
+  width: 30%;
+}
+.mod_playlist_text .playlist__author,
+.mod_playlist_text .playlist__number,
+.mod_playlist_text .playlist__other,
+.mod_playlist_text .playlist__title {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  font-size: 14px;
+}
+</style>
diff --git a/src/components/common/ShowSongs.vue b/src/components/common/ShowSongs.vue
new file mode 100644
index 0000000000000000000000000000000000000000..009819c3ff053d5f309c45ac651893b0548d8d6a
--- /dev/null
+++ b/src/components/common/ShowSongs.vue
@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="js_search_tab_cont search_tab_cont"
+    id="song_box"
+    style="display: block"
+  >
+    <div class="mod_songlist_toolbar">
+      <a href="javascript:;" class="mod_btn js_all_play"
+        ><i class="mod_btn__icon_play"></i>播放全部</a
+      >
+      <a href="javascript:;" class="mod_btn js_all_fav"
+        ><i class="mod_btn__icon_add"></i>添加到</a
+      >
+      <a href="javascript:;" class="mod_btn js_all_down"
+        ><i class="mod_btn__icon_down"></i>下载</a
+      >
+      <a href="javascript:;" class="mod_btn js_batch"
+        ><i class="mod_btn__icon_batch"></i>批量操作</a
+      >
+    </div>
+    <detail-songlist :songs="songs" :listType="'playlist'" />
+  </div>
+</template>
+
+<script>
+import DetailSonglist from "components/common/DetailSonglist";
+
+export default {
+  props: {
+    songs: {
+      type: Array,
+      default: [],
+    },
+  },
+  components: { DetailSonglist },
+};
+</script>
+
+<style lscoped>
+</style>
diff --git a/src/views/My.vue b/src/views/My.vue
index 8e81b0479d81bceeb4cda3a39581f6c66c05e2d2..d2a466c347d74503e93d0d6bfd60b2153f5570b2 100644
--- a/src/views/My.vue
+++ b/src/views/My.vue
@@ -1,9 +1,69 @@
 <template>
-    <h1>My</h1>
+  <div class="mod_profile_unlogin" style="display: none">
+    <div class="section_inner">
+      <h2 class="profile_unlogin__tit">
+        <div class="icon_txt">听我喜欢听的歌</div>
+      </h2>
+      <div class="profile_unlogin__desc"></div>
+      <a
+        href="javascript:;"
+        data-stat="y_new.profile.login"
+        class="mod_btn_green profile_unlogin__btn js_login"
+        >立即登录</a
+      >
+    </div>
+  </div>
 </template>
 
-  <script>
-  </script>
+<script>
+</script>
 
 <style scoped>
-</style>
\ No newline at end of file
+.mod_profile_unlogin {
+  height: 922px;
+  background: url(../assets/img/bg_profile_unlogin.jpg) 50% no-repeat;
+  background-size: auto;
+  background-size: cover;
+  overflow: hidden;
+}
+.mod_profile_unlogin {
+  height: 622px;
+}
+.section_inner {
+  max-width: 1200px;
+  margin: 0 auto;
+  position: relative;
+}
+
+.profile_unlogin__desc,
+.profile_unlogin__tit {
+  background-image: url(https://y.gtimg.cn/mediastyle/yqq/img/profile_tit.png?max_age=2592000&v=e6091d7cd6e4142e075c91798c5d51cc);
+  margin-left: auto;
+  margin-right: auto;
+}
+.profile_unlogin__tit {
+  width: 735px;
+  height: 64px;
+  background-position: 0 0;
+  margin-top: 350px;
+}
+.profile_unlogin__tit {
+  margin-top: 210px;
+}
+.profile_unlogin__desc {
+  width: 345px;
+  height: 30px;
+  background-position: 0 -70px;
+  margin-top: 30px;
+  margin-bottom: 36px;
+}
+.profile_unlogin__btn {
+  display: block;
+  font-size: 20px;
+  height: 48px;
+  line-height: 48px;
+  width: 128px;
+  text-align: center;
+  margin: 0 auto;
+}
+</style>
diff --git a/src/views/musicLibrary/SearchResultDetail.vue b/src/views/musicLibrary/SearchResultDetail.vue
index b61d13ff533b1e7fffce4a1218bbc3d2e00f921e..c2689a17d5c4b4a3ea171f0069502d6d323d5edb 100644
--- a/src/views/musicLibrary/SearchResultDetail.vue
+++ b/src/views/musicLibrary/SearchResultDetail.vue
@@ -19,155 +19,13 @@
         </div>
 
         <!-- song -->
-        <div
-          class="js_search_tab_cont search_tab_cont"
-          id="song_box"
-          style="display: block"
-          v-if="selectedType == 1"
-        >
-          <div class="mod_songlist_toolbar">
-            <a href="javascript:;" class="mod_btn js_all_play"
-              ><i class="mod_btn__icon_play"></i>播放全部</a
-            >
-            <a href="javascript:;" class="mod_btn js_all_fav"
-              ><i class="mod_btn__icon_add"></i>添加到</a
-            >
-            <a href="javascript:;" class="mod_btn js_all_down"
-              ><i class="mod_btn__icon_down"></i>下载</a
-            >
-            <a href="javascript:;" class="mod_btn js_batch"
-              ><i class="mod_btn__icon_batch"></i>批量操作</a
-            >
-          </div>
-          <detail-songlist :songs="songs" :listType="'playlist'" />
-        </div>
+        <show-songs :songs="songs" v-if="selectedType == 1" />
         <!-- album -->
-        <div
-          class="js_search_tab_cont search_tab_cont"
-          id="album_box"
-          style="display: block"
-          v-if="selectedType == 10"
-        >
-          <div class="mod_playlist_text">
-            <ul class="playlist__header">
-              <li class="playlist__header_name">专辑</li>
-              <li class="playlist__header_author">歌手</li>
-              <li class="playlist__header_other">发行时间</li>
-            </ul>
-            <ul class="playlist__list">
-              <li
-                class="playlist__item"
-                v-for="album in albums"
-                :key="album.id"
-              >
-                <div class="playlist__cover" style="visibility: visible">
-                  <a class="js_album"
-                    ><img
-                      class="playlist__pic"
-                      style="display: block; visibility: visible"
-                      onerror="this.src='//y.gtimg.cn/mediastyle/global/img/album_300.png?max_age=31536000';this.onerror=null;"
-                      :alt="album.name"
-                      :src="album.img"
-                  /></a>
-                </div>
-                <h4 class="playlist__title">
-                  <span class="playlist__title_txt"
-                    ><a class="js_album" :title="album.name">{{
-                      album.name
-                    }}</a></span
-                  >
-                </h4>
-                <div class="playlist__author">
-                  <a class="js_singer" :title="album.artistsText">{{
-                    album.artistsText
-                  }}</a>
-                </div>
-                <div class="playlist__other">{{ album.publishTime }}</div>
-              </li>
-            </ul>
-          </div>
-        </div>
+        <show-albums :albums="albums" v-if="selectedType == 10" />
         <!-- mv -->
-        <div
-          class="js_search_tab_cont search_tab_cont"
-          id="mv_box"
-          style="display: block"
-          v-if="selectedType == 1004"
-        >
-          <div class="mod_mv_list">
-            <ul class="mv_list__list">
-              <li class="mv_list__item" v-for="mv in mvs" :key="mv.id">
-                <div class="mv_list__item_box" style="visibility: visible">
-                  <a class="mv_list__cover mod_cover js_mv" hidefocus="true">
-                    <img
-                      class="mv_list__pic"
-                      style="display: block; visibility: visible"
-                      onerror="this.src='//y.gtimg.cn/mediastyle/global/img/mv_300.png?max_age=31536000';this.onerror=null;"
-                      :alt="mv.name"
-                      :src="mv.img"
-                    />
-                    <i class="mod_cover__icon_play"></i>
-                    <!--div class="mv_list__time">04:10</div-->
-                  </a>
-                  <h3 class="mv_list__title">
-                    <a class="js_mv" :title="mv.name">{{ mv.name }}</a>
-                  </h3>
-                  <p class="mv_list__singer">
-                    <a class="js_singer" :title="mv.artistsText">{{
-                      mv.artistsText
-                    }}</a>
-                  </p>
-                </div>
-              </li>
-            </ul>
-          </div>
-        </div>
+        <show-mvs :mvs="mvs" v-if="selectedType == 1004" />
         <!-- playlist -->
-        <div
-          class="js_search_tab_cont search_tab_cont"
-          id="playlist_box"
-          style="display: block"
-          v-if="selectedType == 1000"
-        >
-          <div class="mod_playlist_text">
-            <ul class="playlist__header">
-              <li class="playlist__header_name">歌单</li>
-              <li class="playlist__header_author">创建人</li>
-              <li class="playlist__header_other">播放量</li>
-            </ul>
-            <ul class="playlist__list">
-              <li
-                class="playlist__item"
-                v-for="playlist in playlists"
-                :key="playlist.id"
-              >
-                <div class="playlist__cover" style="visibility: visible">
-                  <a class="js_playlist"
-                    ><img
-                      class="playlist__pic"
-                      style="display: block; visibility: visible"
-                      onerror="this.src='//y.gtimg.cn/mediastyle/global/img/playlist_300.png?max_age=31536000';this.onerror=null;"
-                      :src="playlist.img"
-                      :alt="playlist.name"
-                  /></a>
-                </div>
-                <h4 class="playlist__title">
-                  <span class="playlist__title_txt"
-                    ><a class="js_playlist" :title="playlist.name">{{
-                      playlist.name
-                    }}</a></span
-                  >
-                </h4>
-                <div class="playlist__author">
-                  <a class="js_user" title="playlist.creatorName">{{
-                    playlist.creatorName
-                  }}</a>
-                </div>
-                <div class="playlist__other">{{ playlist.playCount }}</div>
-              </li>
-            </ul>
-          </div>
-        </div>
+        <show-playlist :playlists="playlists" v-if="selectedType == 1000" />
         <!-- user -->
         <div
           class="js_search_tab_cont search_tab_cont"
@@ -264,6 +122,10 @@
 </template>
 
 <script>
+import ShowSongs from "components/common/ShowSongs";
+import ShowAlbums from "components/common/ShowAlbums";
+import ShowMvs from "components/common/ShowMvs";
+import ShowPlaylist from "components/common/ShowPlaylist";
 import DetailSonglist from "components/common/DetailSonglist";
 import ModListMenu from "components/common/ModListMenu";
 import { getSearchResult } from "api";
@@ -335,6 +197,10 @@ export default {
     selectedType(v) {},
   },
   components: {
+    ShowSongs,
+    ShowAlbums,
+    ShowMvs,
+    ShowPlaylist,
     DetailSonglist,
     ModListMenu,
   },
@@ -342,14 +208,10 @@ export default {
 </script>
 
 <style scoped>
-blockquote,
-body,
 button,
 dd,
 dl,
 dt,
-fieldset,
-form,
 h1,
 h2,
 h3,
@@ -357,15 +219,11 @@ h4,
 h5,
 h6,
 hr,
-html,
-input,
-lengend,
 li,
 ol,
 p,
 pre,
 td,
-textarea,
 th,
 ul {
   margin: 0;
@@ -536,17 +394,6 @@ button {
   font-size: 14px;
 }
 
-.mv_list__list {
-  margin-right: -20px;
-  zoom: 1;
-}
-.mv_list__item {
-  float: left;
-  width: 25%;
-  padding-bottom: 44px;
-  overflow: hidden;
-}
-
 .singer_list__item {
   position: relative;
   height: 80px;