提交

1

src/components/hotSearch/index.module.less

@@ -5,6 +5,8 @@
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
+  padding-bottom: 45px;
+  border-bottom: 1px solid #e8e8e8;
   .wrapLeft {
     display: flex;
     flex-direction: row;
@@ -64,7 +66,7 @@
     }
     &:hover {
       background-color: #fff;
-      box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.1000);
+      box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
       span {
         color: #2dc7aa;
       }
@@ -82,12 +84,13 @@
     margin-bottom: 18px;
     .resultTitle {
       // padding: 0 20px 0 14px;
-      width: 80px;
+      // width: 80px;
       display: flex;
       flex-direction: row;
       align-items: center;
       color: #999;
       font-size: 16px;
+      margin-right: 10px;
       // img {
       //   width: 14px;
       //   height: 14px;
@@ -95,10 +98,33 @@
       // }
     }
     .tagList {
-      width: 931px;
+      width: 715px;
       display: flex;
       flex-direction: row;
       align-items: center;
+      :global {
+        .el-tag--large {
+          height: 36px;
+          padding: 0 14px 0 18px;
+          font-size: 16px;
+          border-radius: 10px;
+          .el-tag__close {
+            font-size: 20px;
+          }
+          &:hover {
+            background: #ffe4df;
+            border-radius: 10px;
+            border: 1px solid #e74000;
+            color: #f04020;
+            .el-tag__close {
+              color: #f04020;
+              &:hover {
+                background-color: #FFE4DF ;
+              }
+            }
+          }
+        }
+      }
     }
 
     .searchResultRight {
@@ -107,19 +133,26 @@
       // align-items: center;
       .clearBtn {
         margin-left: 8px;
-        line-height: 24px;
-        height: 24px;
+        width: 90px;
+        height: 36px;
+        background: #ffffff;
+        border-radius: 18px;
+        border: 1px solid #ededed;
+        align-items: center;
+        justify-content: center;
         cursor: pointer;
         display: flex;
         flex-direction: row;
-        align-items: center;
-        border-radius: 2px;
-        border: 1px solid #e5e5e5;
-        padding: 0 8px;
+        &:hover {
+          box-shadow: 0px 2px 8px 0px rgba(0, 0, 0, 0.1);
+        }
         span {
-          color: #666 !important;
+          color: #11bf9f !important;
           line-height: 24px;
-          font-size: 13px;
+          font-size: 16px;
+        }
+        .clearText {
+          color: #ff3a31 !important;
         }
         .clearIcon {
           width: 14px;
@@ -130,49 +163,85 @@
     }
   }
   .searchChioseWrap {
-    background-color: #fff;
-    border-radius: 8px;
-    padding: 20px 20px 5px;
+    background: #f8f8f8;
+    border-radius: 10px;
+    padding: 20px 35px 18px 0;
     .chioseLineWrap {
       // border-bottom: 1px solid #ededed;
+      display: flex;
+      flex-direction: row;
+
       .chioseRow {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 30px;
-        p {
-          line-height: 48px;
-          width: 112px;
-          text-align: center;
-          margin-right: 5px;
-        }
-        .chioseTagWrap {
-          flex: 1;
+        width: 50%;
+        // display: flex;
+        // flex-direction: row;
+        // align-items: center;
+        padding-bottom: 30px;
+        padding-left: 35px;
+        position: relative;
+        &:nth-child(2n) {
           &::before {
             position: absolute;
             content: '';
-            width: 1px;
+            width: 0px;
             height: 100%;
             // height: calc(100% - 14px);
             background: #ededed;
-            left: 0;
+            right: 0;
           }
+        }
+        &::before {
+          position: absolute;
+          content: '';
+          width: 1px;
+          height: 100%;
+          // height: calc(100% - 14px);
+          background: #ededed;
+          right: 0;
+        }
+        p {
+          font-size: 18px;
+          line-height: 48px;
+          width: 112px;
+          // text-align: center;
+          font-weight: 500;
+          color: #000000;
+          margin-bottom: 23px;
+        }
+        .chioseTagWrap {
+          flex: 1;
+
           position: relative;
-          padding-left: 20px;
+          // padding-left: 20px;
           /deep/.el-tag {
             margin-bottom: 14px;
           }
         }
         .tags {
           // height: 24px;
-          background: #e0f7f3;
-          line-height: 24px;
+          // background: #e0f7f3;
+          line-height: 40px;
           display: inline-block;
-          margin-right: 40px;
-          color: #2dc7aa;
-          padding: 2px 11px;
-          border-radius: 6px;
+          margin-right: 14px;
+          margin-bottom: 14px;
+          color: #666;
           font-size: 15px;
+          width: 80px;
+          height: 40px;
+          text-align: center;
+          border-radius: 10px;
+          border: 1px solid #dcdcdc;
+          cursor: pointer;
+          &:hover {
+            // background: #e0f7f3;
+            border: 1px solid #4bb39e;
+            color: #07b491;
+          }
+        }
+        .check.tags {
+          background: #2dc7aa;
+          border: 1px solid #4bb39e;
+          color: #fff;
         }
         .tagText {
           margin-right: 40px;

src/components/hotSearch/index.tsx

@@ -8,7 +8,7 @@ import search from '@/components/hotSearch/images/search.png'
 import searchActive from '@/components/hotSearch/images/searchActive.png'
 
 import request from '@/helpers/request'
-import arrows from './images/arrow.png'
+import arrows from './images/selectArrow.png'
 import clearIcon from './images/clearIcon.png'
 import item from '@/views/user-info/components/item'
 import { useRouter } from 'vue-router'
@@ -45,7 +45,7 @@ export default defineComponent({
       chioseParentList: [],
       searchTagList: [],
       searchType: props.searchType,
-      searchHover:false
+      searchHover: false
     })
     const router = useRouter()
     const getHotList = async () => {
@@ -215,10 +215,13 @@ export default defineComponent({
                 onMouseout={() => {
                   state.searchHover = false
                 }}
-
               >
                 <span>筛选</span>
-                <img class={classes.search} src={ state.searchHover?searchActive:search} alt="" />
+                <img
+                  class={classes.search}
+                  src={state.searchHover ? searchActive : search}
+                  alt=""
+                />
               </div>
             ) : null}
           </div>
@@ -226,13 +229,14 @@ export default defineComponent({
           <div class={classes.searchDetail}>
             <div class={classes.searchResult}>
               <div class={classes.resultTitle}>
-                <span>已选类型:</span>
+                <span>已选类型：</span>
                 {/* <img src={arrow} alt="" /> */}
               </div>
               <div class={classes.tagList}>
                 {state.searchTagList.map((item: any) => {
                   return (
                     <ElTag
+                    size="large"
                       closable
                       onClose={() => closeChioseTag(item)}
                       class="chioseTag"
@@ -244,7 +248,7 @@ export default defineComponent({
               </div>
               <div class={classes.searchResultRight}>
                 <div class={classes.clearBtn} onClick={clearSearch}>
-                  <span>清空</span>
+                  <span class={classes.clearText}>清空</span>
                   <img src={clearIcon} class={classes.clearIcon} alt="" />
                 </div>
                 <div
@@ -268,26 +272,16 @@ export default defineComponent({
                         {tree.children.map((tag: any) => {
                           return (
                             //  effect={isChiose(tag)}
-                            tag.isCheck ? (
-                              <div
-                                class={classes.tags}
-                                onClick={() => {
-                                  chioseTag(tag)
-                                }}
-                              >
-                                {' '}
-                                {tag.name}
-                              </div>
-                            ) : (
-                              <span
-                                onClick={() => {
-                                  chioseTag(tag)
-                                }}
-                                class={classes.tagText}
-                              >
-                                {tag.name}
-                              </span>
-                            )
+
+                            <div
+                              class={[classes.tags,tag.isCheck?classes.check:'']}
+                              onClick={() => {
+                                chioseTag(tag)
+                              }}
+                            >
+                              {' '}
+                              {tag.name}
+                            </div>
                           )
                         })}
                       </div>

src/views/App.tsx

@@ -29,7 +29,8 @@ export default defineComponent({
         <ColHeader />
         <div
           style={{
-            minHeight: 'calc(100vh - 263.5px)'
+            minHeight: 'calc(100vh - 263.5px)',
+            background:'#fff'
           }}
         >
           <ElConfigProvider locale={zhCn} message={{ max: 1 }}>

src/views/musicLibrary/index.module.less

@@ -11,27 +11,45 @@
 
 .w1200 {
   width: 1002px !important;
+
   margin: 0 auto;
   .myTabWrap {
     :global {
       margin-top: 28px;
       font-size: 20px;
-
+      .el-tabs__nav-wrap {
+        &::after {
+          height: 0px;
+        }
+      }
       .el-tabs__item {
         font-size: 20px;
         margin-bottom: 8px;
         color: #666;
-        margin-left: 40px;
+        // margin-left: 40px;
+        width: 100px;
+        height: 48px;
+        line-height: 48px;
+        background: #fff;
+        border-radius: 23px;
+        text-align: center;
+        padding: 0;
+        color: #000;
+        margin-right: 20px;
       }
-      .el-tabs__item.is-active{
-        font-weight: bold;
-        color: #2dc7aa;
+      .el-tabs__item.is-active {
+        color: #fff;
+        font-weight: 500;
+        width: 100px;
+        height: 48px;
+        line-height: 48px;
+        background: #2dc7aa;
+        border-radius: 23px;
       }
       .el-tabs__active-bar {
-        height: 4px;
+        height: 0px;
         background: #2dc7aa;
         border-radius: 3px;
-
       }
       .el-tabs__header {
         margin: 0 !important;

src/views/musicLibrary/modals/albumItem/index.module.less

@@ -0,0 +1,122 @@
+.itemWrap {
+  margin-bottom: 30px;
+  margin-right: 18px;
+  position: relative;
+
+  &:hover {
+    .hold {
+      // transform: translateY(-10px);
+      transition: linear 0.1s;
+      .masker {
+        // transition: all linear 0.2s;
+        visibility: visible;
+        img {
+          width: 48px;
+          height: 48px;
+          animation-name: showPaly;
+          animation-duration: .6s;
+          animation-timing-function: linear;
+          animation-fill-mode: forwards;
+          // animation-delay: 1s;
+        }
+      }
+      @keyframes showPaly {
+        0% {
+         transform: scale(.5);
+
+        }
+        50% {
+          transform: scale(1.2);
+
+        }
+        100% {
+          transform: scale(1);
+        }
+      }
+      // img {
+      //   transform: scale(1.1);
+      //   transition: all 0.3s ease-in-out;
+      // }
+    }
+  }
+  .hold {
+    .masker {
+      visibility: hidden;
+      width: 180px;
+      height: 180px;
+      background-color: rgba(0, 0, 0, 0.4);
+      position: absolute;
+      top: 0;
+      left: 0;
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      position: absolute;
+      img {
+        width: 48px;
+        height: 48px;
+      }
+    }
+    position: relative;
+    width: 180px;
+    height: 180px;
+    border-radius: 10px;
+    overflow: hidden;
+    img {
+      width: 100%;
+      transition: all 0.3s ease-in-out;
+    }
+  }
+  cursor: pointer;
+  &:nth-child(5n) {
+    margin-right: 0;
+  }
+  .startImage {
+    width: 24px;
+    height: 24px;
+    z-index: 1000;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+  h2 {
+    line-height: 30px;
+    font-size: 18px;
+    font-weight: 400;
+    color: #000;
+    line-height: 25px;
+    margin: 18px 0 3px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 180px;
+  }
+
+  span {
+    color: #999;
+    font-size: 14px;
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    img {
+      width: 18px;
+      margin-right: 4px;
+      // height: 18px;
+    }
+    .itemBottomR {
+      margin-right: 1px;
+    }
+    .itemBottomL,
+    .itemBottomR {
+      display: flex;
+      flex-direction: row;
+      justify-content: flex-start;
+      align-items: center;
+      font-size: 14px;
+      line-height: 20px;
+    }
+  }
+}

src/views/musicLibrary/modals/albumItem/index.tsx

@@ -0,0 +1,88 @@
+import { defineComponent, toRefs, reactive, onMounted, ref, watch } from 'vue'
+
+import classes from './index.module.less'
+import hold from './images/hold.png'
+import start from './images/start.png'
+import lineStart from './images/lineStart.png'
+import pan from './images/pan.png'
+import player from './images/player.png'
+import { useRouter } from 'vue-router'
+export default defineComponent({
+  name: 'albumItem',
+  props: {
+    detail: {
+      type: Object,
+      default: {
+        albumCoverUrl: '',
+        albumDesc: '',
+        albumFavoriteCount: 0,
+        albumName: '',
+        albumStatus: 0,
+        albumTag: '',
+        auditVersion: 0,
+        createBy: 0,
+        createTime: '',
+        delFlag: null,
+        hotFlag: null,
+        id: 0,
+        musicSheetCount: 0,
+        musicTagNames: '',
+        sortNumber: 0,
+        topFlag: null,
+        updateBy: 34,
+        updateTime: '',
+        favorite:0
+      } as any
+    }
+  },
+  setup(props) {
+    const state = reactive({
+      detail: props.detail
+    })
+    watch(
+      () => props.detail,
+      detail => {
+        state.detail = detail
+      }
+    )
+    const router = useRouter()
+    const gotoAlbum = () => {
+      router.push({ path: '/albumDetail', query: { id: state.detail.id } })
+    }
+    return () => (
+      <>
+        <div
+          class={classes.itemWrap}
+          onClick={() => {
+            gotoAlbum()
+          }}
+        >
+          <img class={classes.startImage} src={state.detail.favorite?lineStart:start} alt="" />
+          <div class={classes.hold}>
+            <div class={classes.masker}>
+              <img src={player} alt="" />
+            </div>
+            <img
+              src={
+                state.detail.albumCoverUrl ? state.detail.albumCoverUrl : hold
+              }
+              alt=""
+            />
+          </div>
+
+          <h2>{state.detail.albumName}</h2>
+          <div class={classes.itemBottom}>
+            <div class={classes.itemBottomL}>
+              {/* <img src={pan} alt="" /> */}
+              <span>{state.detail.musicSheetCount}曲目</span>
+            </div>
+            <div class={classes.itemBottomR}>
+              {/* <img src={start} alt="" /> */}
+              <span>{state.detail.albumFavoriteCount}收藏</span>
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -2,7 +2,7 @@
 import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
 import arrow from '@/components/musicLIstItem/images/arrow.png'
 import styles from '../index.module.less'
-import albumItem from '@/components/albumItem'
+import albumItem from './albumItem'
 import videoDetailItem from '@/components/videoDetailItem'
 import musicLIstItem from '@/components/musicLIstItem'
 import hotSearch from '@/components/hotSearch'