Merge branch 'master' of http://git.dayaedu.com/lex/colexiu-project

src/components/col-header/index.css

@@ -10,9 +10,13 @@
 .logoWrap {
   @apply w-28
 }
-.navWrap {
 
+.navWrap {}
+
+.normalItem {
+  color: #fff;
 }
+
 .activeItem {
   color: #1FF0C9 !important;
   font-weight: 600;
@@ -28,11 +32,14 @@
   background-color: #1FF0C9;
   z-index: 100;
   transform: scaleX(1);
+  transition: all 0.5s;
   transform-origin: left;
 }
+.activeItem:hover::after {
+  transform: scaleX(1);
+}
 
 .itemCenter {
   position: relative;
   @apply text-lg h-full flex items-center box-border
-
 }

src/components/col-header/index.tsx

@@ -9,13 +9,14 @@ export default defineComponent({
   data() {
     return {
       navigator: [
-        { name: '首页', href: '#', current: false },
+        { name: '首页', href: '/home', current: false },
         { name: '曲谱', href: '#', current: false },
         { name: '视频课', href: '#', current: false },
         { name: '云教练', href: '#', current: false },
         { name: '社区', href: '#', current: false },
         { name: '下载', href: '/downLoad', current: false }
-      ]
+      ],
+      navPath:   ['','','','','/downLoad']
     }
   },
   mounted() {},
@@ -39,8 +40,8 @@ export default defineComponent({
                   }}
                   class={[
                     item.current
-                      ? 'text-[#1FF0C9] border-b-[3px] border-b-[#1FF0C9]'
-                      : 'activeItem',
+                      ? 'activeItem'
+                      : 'normalItem',
                     'itemCenter'
                   ]}
                 >

src/components/hotSearch/index.module.less

@@ -0,0 +1,39 @@
+.wrap {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  .wrapLeft {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .hotIcon {
+      width: 24px;
+      height: 28px;
+      margin-right: 10px;
+    }
+    .tagWrap {
+      display: flex;
+      flex-direction: row;
+    }
+    h5 {
+      font-weight: 500;
+      color: #000000;
+      line-height: 28px;
+      font-size: 20px;
+    }
+  }
+  .wrapRight {
+    display: flex;
+    flex-direction: row;
+    cursor: pointer;
+    span {
+      color: #666;
+    }
+    .arrow {
+      width: 20px;
+      height: 20px;
+      margin-left: 8px;
+    }
+  }
+}

src/components/hotSearch/index.tsx

@@ -0,0 +1,32 @@
+import { defineComponent, toRefs, reactive, onMounted, ref } from 'vue'
+
+import classes from './index.module.less'
+import tagItem from '@/components/tagItem'
+import hot from './images/hot.png'
+import arrow from '@/components/musicLIstItem/images/arrow.png'
+export default defineComponent({
+  name: 'hotSearch',
+  components: { tagItem },
+  props: {},
+  setup() {
+    const state = reactive({})
+    return () => (
+      <>
+        <div class={classes.wrap}>
+          <div  class={classes.wrapLeft}>
+            <img src={hot} class={classes.hotIcon} alt="" />
+            <h5>热门搜索：</h5>
+            <div class={classes.tagWrap}>
+              <tagItem title="考级"></tagItem>
+              <tagItem title="古典"></tagItem>
+            </div>
+          </div>
+          <div class={classes.wrapRight}>
+            <span>更多</span>
+            <img class={classes.arrow} src={arrow} alt="" />
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/components/tagItem/index.module.less

@@ -0,0 +1,14 @@
+.tag {
+  color: #2dc7aa;
+  height: 28px;
+  line-height: 28px;
+  background: #e9f6f4;
+  border-radius: 6px;
+  border: 1px solid #2dc7aa;
+  padding: 0 14px;
+  margin-right: 12px;
+  &:last-child{
+    margin-right: 0!important;
+  }
+}
+

src/components/tagItem/index.tsx

@@ -0,0 +1,24 @@
+
+import { defineComponent , toRefs, reactive, onMounted, ref } from 'vue'
+
+import classes from './index.module.less'
+
+export default defineComponent({
+  name: 'tagItem',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  },
+  setup(props, conent) {
+    const state = reactive({
+      title:props.title
+    })
+    return () => (
+      <>
+        <div class={classes.tag}>{state.title}</div>
+      </>
+    )
+  }
+})

src/views/home/index.module.less

@@ -6,3 +6,25 @@
   width: 1200px;
   margin: 0 auto;
 }
+.section {
+  padding: 34px 0;
+  .titleWrap {
+    text-align: center;
+    margin: 0 auto;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: center;
+    .dotImg {
+      width: 54px;
+      height: 54px;
+    }
+    h4 {
+      margin: 0 10px;
+      font-size: 32px;
+      font-weight: 600;
+      color: #333333;
+      line-height: 45px;
+    }
+  }
+}

src/views/home/index.tsx

@@ -4,17 +4,42 @@ import styles from './index.module.less'
 import albumItem from '@/components/albumItem'
 import videoDetailItem from '@/components/videoDetailItem'
 import musicLIstItem from '@/components/musicLIstItem'
+import titleDot from './images/titleDot.png'
+import hotSearch from '@/components/hotSearch'
 export default defineComponent({
   name: 'home',
   components: {
     albumItem,
     videoDetailItem,
-    musicLIstItem
+    musicLIstItem,
+    hotSearch
   },
   render() {
     return (
       <div class="bg-white">
+        轮播图
         <div class="container mx-auto">
+          <div class={styles.section}>
+            <div class={styles.titleWrap}>
+              <img src={titleDot} class={styles.dotImg} alt="" />
+              <h4>热门专辑</h4>
+              <img src={titleDot} class={styles.dotImg} alt="" />
+            </div>
+            <hotSearch></hotSearch>
+            <div class={styles.albumList}>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+              <albumItem></albumItem>
+            </div>
+          </div>
+
           <albumItem></albumItem>
           <videoDetailItem></videoDetailItem>
           <musicLIstItem></musicLIstItem>