提交

1

src/components/banner/index.module.less

@@ -46,4 +46,7 @@
       transform: rotate(180deg);
     }
   }
+  .swiper-pagination-bullet-active {
+    background-color: #fff!important;
+  }
 }

src/components/col-header/index.css

@@ -75,3 +75,7 @@
 .top.header-container {
   border-bottom: 1px solid rgba(255, 255, 255, 0.2);
 }
+
+.wall {
+  height: 70px;
+}

src/components/col-header/index.tsx

@@ -40,6 +40,8 @@ export default defineComponent({
   },
   render() {
     return (
+      <>
+      {/* <div class='wall' style={{height:70px;}}></div> */}
       <div class={["headerSection",this.isTop?'':'top']} >
 
           <div class="flex items-center h-full">
@@ -81,6 +83,7 @@ export default defineComponent({
             </ElButton>
           </div>
         </div>
+        </>
     )
   }
 })

src/components/searchInput/index.module.less

@@ -1,3 +1,4 @@
+
 .wrap {
   margin-bottom: 20px;
 }
@@ -39,14 +40,21 @@
   }
   .el-select {
     --el-select-input-focus-border-color: transparent;
+    color: #000!important;;
+
+    font-weight: 500;
   }
   .el-select .el-input.is-focus .el-input__inner {
     border: 0px !important;
+    color: #000!important;;
+
+    font-weight: 500;
   }
   .el-input__inner {
     background-color: #f6f7f8 !important;
     border: none !important;
     box-shadow: none !important;
+
     &:hover {
       border: none !important;
       box-shadow: none !important;
@@ -138,11 +146,15 @@
   .line {
     width: 1px;
     height: 26px;
-    background: #D8D8D8;
+    background: #D8D8D8!important;
     position: absolute;
     right: -20px;
     top:2px
   }
 }
 
+.searchIcon {
+  font-size: 20px!important;
+}
+
 

src/components/searchInput/index.tsx

@@ -6,8 +6,11 @@ import {
   ElFormItem,
   ElInput,
   ElSelect,
-  ElOption
+  ElOption,
+  ElIcon
 } from 'element-plus'
+
+import white from './while.module.less';
 import classes from './index.module.less'
 import request from '@/helpers/request'
 
@@ -17,6 +20,10 @@ export default defineComponent({
     title: {
       type: String,
       default: ''
+    },
+    isWhile:{
+      type: Boolean,
+      default: true
     }
   },
   setup(props, conent) {
@@ -26,6 +33,7 @@ export default defineComponent({
       subject: '',
       subjectList:[]
     })
+
     const getSubjectList = async ()=>{
       try {
         const res = await request.get('/api-website/open/subject/subjectSelect', {
@@ -39,36 +47,41 @@ export default defineComponent({
     onMounted(()=>{
       getSubjectList()
     })
+    let classStyle
+    props.isWhile? classStyle=white: classStyle=classes
     return () => (
       <>
-        <div class={classes.wrap}>
+        <div class={[classStyle.wrap,props.isWhile?'While':'']}>
           <ElInput
             v-model={state.search}
             placeholder="搜一搜你想练习的曲目"
-            class={classes.inputSelect}
+            class={classStyle.inputSelect}
             v-slots={{
               prepend: () => (
-                <div   class={classes.selectWrap}>
+                <div   class={classStyle.selectWrap}>
                   <ElSelect
                     v-model={state.subject}
                     placeholder="请选择声部"
                     style="width: 115px"
                     popper-class="subSelect"
                     v-slots={{
-                      suffix: () => <div class={classes.san}></div>
+                      suffix: () => <div class={classStyle.san}></div>
                     }}
                   >
-                    <ElOption label="Restaurant" value="1" />
-                    <ElOption label="Order No." value="2" />
-                    <ElOption label="Tel" value="3" />
+                    {state.subjectList.map((item:any) => <ElOption label={item.name} value={item.id} />)}
                   </ElSelect>
-                  <div class={classes.line}></div>
+                  <div class={classStyle.line}></div>
                 </div>
               ),
               append: () => (
                 <ElButton
+                  v-slots={{
+                    icon:()=><ElIcon  class={classStyle.searchIcon} >
+                      <Search></Search>
+                    </ElIcon>
+                  }}
                   style={{ color: '#2DC7AA', font: '20px' }}
-                  icon="Search"
+
                 />
               )
             }}

src/components/searchInput/while.module.less

@@ -0,0 +1,164 @@
+.wrap {
+  margin-bottom: 20px;
+}
+.inputSelect {
+  line-height: 54px;
+  height: 54px;
+  background: #fff;
+  border-radius: 30px;
+  overflow: hidden;
+  border: none !important;
+  padding: 0 20px;
+}
+:global {
+  .While {
+    .inputSelect {
+      .el-input__wrapper.is-focus {
+        border: none !important;
+        box-shadow: none !important;
+        &:hover {
+          .el-input__wrapper {
+            border: none !important;
+            box-shadow: none !important;
+          }
+          .el-input__inner {
+            border: none !important;
+            box-shadow: none !important;
+          }
+          border: none !important;
+          box-shadow: none !important;
+        }
+      }
+    }
+    .el-input__wrapper {
+      border: none !important;
+      box-shadow: none !important;
+    }
+    .el-input__inner {
+      border: none !important;
+      box-shadow: none !important;
+    }
+    .el-select {
+      --el-select-input-focus-border-color: transparent;
+      color: #000 !important;
+
+      font-weight: 500;
+    }
+    .el-select .el-input.is-focus .el-input__inner {
+      border: 0px !important;
+      color: #000 !important;
+
+      font-weight: 500;
+    }
+    .el-input__inner {
+      background-color: #fff !important;
+      border: none !important;
+      box-shadow: none !important;
+
+      &:hover {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+    .el-input__wrapper {
+      background-color: #fff !important;
+      border: none !important;
+      box-shadow: none !important;
+      &:hover {
+        border: none !important;
+        box-shadow: none !important;
+      }
+    }
+    .el-input-group--prepend {
+      .el-select {
+        &:hover {
+          background-color: #fff !important;
+          border: none !important;
+          box-shadow: none !important;
+        }
+        .select-trigger {
+          &:hover {
+            background-color: #fff !important;
+            border: none !important;
+            box-shadow: none !important;
+          }
+          .el-input--suffix.is-focus {
+            .el-input__wrapper {
+              box-shadow: none !important;
+              &:hover {
+                border: none !important;
+                box-shadow: none !important;
+              }
+            }
+            .is-focus {
+              background-color: #fff !important;
+              border: none !important;
+              box-shadow: none !important;
+            }
+          }
+        }
+      }
+    }
+
+    .el-input-group__prepend {
+      box-shadow: none;
+    }
+    .el-input-group__append {
+      box-shadow: none !important;
+    }
+
+    .subSelect {
+      .el-input-group--prepend
+        .el-input-group__prepend
+        .el-select
+        .el-input.is-focus
+        .el-input__wrapper {
+        border: none !important;
+        box-shadow: none !important;
+        &:hover {
+          border: none !important;
+          box-shadow: none !important;
+        }
+      }
+    }
+    .el-input-group--prepend .el-input-group__prepend .el-select {
+      border: none !important;
+      box-shadow: none !important;
+      &:hover {
+        border: none !important;
+        box-shadow: none !important;
+        .el-input__wrapper {
+          border: none !important;
+          box-shadow: none !important;
+          &:hover {
+            border: none !important;
+            box-shadow: none !important;
+          }
+        }
+      }
+    }
+    .el-input-group__prepend {
+      background-color: #fff !important;
+    }
+    .el-input-group__append {
+      background-color: #fff !important;
+    }
+  }
+}
+.selectWrap {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  .line {
+    width: 1px;
+    height: 26px;
+    background: #fff;
+    position: absolute;
+    right: -20px;
+    top: 2px;
+  }
+}
+
+.searchIcon {
+  font-size: 20px !important;
+}

src/router/routes-admin.ts

@@ -32,7 +32,7 @@ export default [
     },
   },
   {
-    path: '/musicLibrary/searchdetail',
+    path: '/searchdetail',
     name: 'searchdetail',
     component: () => import('@/views/musicLibrary/searchdetail'),
     meta: {

src/style/index.css

@@ -11,6 +11,7 @@
   --el-color-primary-light-8: #bbffef !important;
   --el-color-primary-light-9: #ecf9f6 !important;
   --el-color-primary-dark-2: #24ad93 !important;
+  --searchbgColor:'#f6f7f8' !important;
 }
 
 
@@ -20,4 +21,4 @@ body {
 
 .user-shadow {
   box-shadow: 0px 2px 7px 0px rgba(0, 0, 0, 0.04);
-}
+}

src/views/login/components/img-code/index.tsx

@@ -84,7 +84,7 @@ export default defineComponent({
               this.onClose()
             }}
           >
-            <ElIcon class={styles.loginClose} size={18}>
+            <ElIcon class={styles.loginClose}>
               <Close />
             </ElIcon>
           </div>

src/views/musicLibrary/index.module.less

@@ -1,4 +1,3 @@
-
 .mySwiper {
   min-height: 300px;
   /deep/.swiper-slide {
@@ -86,4 +85,19 @@
 
 .myTab {
   margin-top: 28px;
+  font-size: 20px;
+}
+:global {
+  .el-tabs__item {
+    font-size: 22px;
+    margin-bottom: 14px;
+  }
+  .el-tabs__active-bar {
+    height: 6px;
+    background: #2dc7aa;
+    border-radius: 3px;
+  }
+  .el-tabs__header {
+    margin: 0!important;
+  }
 }

src/views/musicLibrary/modals/searchAlbum.tsx

@@ -66,7 +66,7 @@ export default defineComponent({
     })
     return () => (
       <div>
-        <div class="bg-white">
+        <div >
           <div class={styles.w1200}>
             <div class={styles.section}>
             <div class={styles.albumList}>

src/views/musicLibrary/modals/searchMusic.tsx

@@ -0,0 +1,84 @@
+// import { PaperClipIcon } from '@heroicons/vue/solid'
+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 videoDetailItem from '@/components/videoDetailItem'
+import musicListItem from '@/components/musicLIstItem'
+import hotSearch from '@/components/hotSearch'
+import request from '@/helpers/request'
+import silder from '@/components/silder'
+import searchInput from '@/components/searchInput'
+import 'swiper/css'
+import 'swiper/css/navigation'
+import 'swiper/css/pagination'
+import 'swiper/css/scrollbar'
+import { ElTabPane, ElTabs } from 'element-plus'
+export default defineComponent({
+  name: 'searchMusic',
+  components: {
+    hotSearch,
+    silder,
+    searchInput,
+    albumItem,
+    musicListItem
+  },
+  setup() {
+    const state = reactive({
+      albumList: [],
+      musicList: []
+    })
+
+    // const getAlbumList = async () => {
+    //   try {
+    //     const res = await request.post('/api-website/open/music/album/list', {
+    //       data: {
+    //         albumStatus: 1,
+    //         page: 1,
+    //         rows: 10
+    //       }
+    //     })
+
+    //     state.albumList = res.data.rows
+    //   } catch (e) {
+    //     console.log(e)
+    //   }
+    // }
+    const getMusicList = async () => {
+      try {
+        const res = await request.post('/api-website/open/music/sheet/list', {
+          data: {
+            albumStatus: 'PASS',
+            page: 1,
+            rows: 5,
+            state: 1
+          }
+        })
+
+        state.musicList = res.data.rows
+      } catch (e) {
+        console.log(e)
+      }
+    }
+
+    onMounted(() => {
+      // getAlbumList()
+      getMusicList()
+    })
+    return () => (
+      <div>
+        <div >
+          <div class={styles.w1200}>
+            <div class={styles.section}>
+            <div class={styles.musicList}>
+                {state.musicList.map(item=>{
+                  return  <musicListItem item={item}></musicListItem>
+                })}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    )
+  }
+})

src/views/musicLibrary/searchdetail.tsx

@@ -2,14 +2,12 @@
 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 videoDetailItem from '@/components/videoDetailItem'
-import musicLIstItem from '@/components/musicLIstItem'
 import hotSearch from '@/components/hotSearch'
 import request from '@/helpers/request'
 import silder from '@/components/silder'
 import searchInput from '@/components/searchInput'
 import searchAlbum from './modals/searchAlbum'
+import searchMusic from './modals/searchMusic'
 import 'swiper/css'
 import 'swiper/css/navigation'
 import 'swiper/css/pagination'
@@ -21,12 +19,14 @@ export default defineComponent({
     hotSearch,
     silder,
     searchInput,
-    searchAlbum
+    searchAlbum,
+    searchMusic
   },
   setup() {
     const state = reactive({
       albumList: [],
-      musicList: []
+      musicList: [],
+      chiose:'album'
     })
 
     const getAlbumList = async () => {
@@ -67,17 +67,18 @@ export default defineComponent({
     })
     return () => (
       <div>
-        <div class="bg-white">
+        <div class="">
+        <div class='wall' style={{height:'70px'}}></div>
           <div class={styles.w1200}>
             <div class={styles.section}>
-              <searchInput></searchInput>
+              <searchInput isWhile={true}></searchInput>
               <hotSearch type={'search'}></hotSearch>
-              <ElTabs class={styles.myTab}>
+              <ElTabs class={styles.myTab} v-model={state.chiose}>
                 <ElTabPane label="专辑" name="album">
                   <searchAlbum/>
                 </ElTabPane>
                 <ElTabPane label="乐谱" name="music">
-
+                    <searchMusic/>
                 </ElTabPane>
               </ElTabs>
             </div>