提交

1

src/components/albumItem/index.module.less

@@ -1,4 +1,5 @@
 .itemWrap {
+  margin-bottom: 28px;
   h2 {
     line-height: 30px;
     font-size: 22px;

src/components/col-footer/index.module.less

@@ -1,12 +1,12 @@
 .footerSection {
   overflow: hidden;
   margin: 0 auto;
-  background: #262D45;
+  background: #30343E;
 }
 
 .footerInfo {
   color: #cecece;
-  background: #262D45;
+  background:#30343E;
   padding: 77px 0 35px;
   .width1200 {
     display: flex;
@@ -47,7 +47,6 @@
         display: flex;
         flex-direction: row;
         justify-content: flex-start;
-
         .friendshipItem {
           a {
             font-size: 12px;

src/components/musicLIstItem/index.module.less

@@ -0,0 +1,84 @@
+.itemWrap {
+  height: 94px;
+  background: #ffffff;
+  border-radius: 12px;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  width: 100%;
+  border-radius: 12px;
+  .left {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    .imgWrap {
+      width: 62px;
+      height: 62px;
+      margin-right: 18px;
+    }
+    .textWrap {
+      p {
+        font-weight: 600;
+        color: #333333;
+        line-height: 22px;
+        font-size: 16px;
+        margin-bottom: 10px;
+        span {
+          font-weight: 400;
+          color: #6a6a6a;
+          margin-left: 10px;
+        }
+      }
+      .authorInfo {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        .icon {
+          width: 20px;
+          height: 20px;
+          border-radius: 27px;
+          margin-right: 6px;
+        }
+        .authorName {
+          color: #333;
+          font-size: 12px;
+          margin-right: 8px;
+        }
+        .tagList {
+          display: flex;
+          flex-direction: row;
+          align-items: center;
+          .tag {
+            background-color: #fff1de;
+            color: #ff8c00;
+            padding: 2px 4px;
+            font-size: 12px;
+            margin-right: 5px;
+            border-radius: 4px;
+          }
+        }
+      }
+    }
+  }
+  .right {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    cursor: pointer;
+    .touchButton {
+      width: 48px;
+      height: 22px;
+      background: #e1f0ff;
+      border-radius: 12px;
+      line-height: 22px;
+      color: #0086FF;
+      text-align: center;
+      font-size: 13px;
+    }
+    .arrow {
+      width: 20px;
+      height: 20px;
+      margin-left: 12px;
+    }
+  }
+}

src/components/musicLIstItem/index.tsx

@@ -0,0 +1,42 @@
+import { defineComponent } from 'vue'
+import icon from '../videoDetailItem/images/icon.png'
+import classes from './index.module.less'
+import detaile from './images/detaile.png'
+import music from './images/music.png'
+import arrow from './images/arrow.png'
+
+export default defineComponent({
+  name: 'musicLIstItem',
+  setup() {
+    return () => (
+      <>
+        <div>
+          <div class={classes.itemWrap}>
+            <div class={classes.left}>
+              <div class={classes.imgWrap}>
+                <img src={music} alt="" />
+              </div>
+              <div class={classes.textWrap}>
+                <p>
+                  孤勇者（《英雄联盟：双城之战》主题曲） <span>作曲: 钱雷</span>
+                </p>
+                <div class={classes.authorInfo}>
+                  <img class={classes.icon} src={icon} alt="" />
+                  <span class={classes.authorName}>李佳怡</span>
+                  <div class={classes.tagList}>
+                    <div class={classes.tag}>单簧管</div>
+                    <div class={classes.tag}>圆号</div>
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class={classes.right}>
+              <div class={classes.touchButton}>点播</div>
+              <img class={classes.arrow} src={arrow} alt="" />
+            </div>
+          </div>
+        </div>
+      </>
+    )
+  }
+})

src/components/videoDetailItem/index.module.less

@@ -0,0 +1,48 @@
+.itemWrap {
+  width: 387px;
+  margin-bottom: 20px;
+  border-radius: 4px;
+  .detaile {
+    width: 387px;
+  }
+  .itemBottom {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding: 12px;
+    justify-content: space-between;
+    .itemBottomL {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      .itemHead {
+        width: 28px;
+        height: 28px;
+        vertical-align: bottom;
+        margin-right: 10px;
+      }
+      .itemTitle {
+        color: #333;
+        font-weight: 500;
+        font-size: 16px;
+        line-height: 22px;
+      }
+      .line {
+        width: 1px;
+        height: 10px;
+        border: 1px solid #d3d3d3;
+        margin: 0 10px;
+      }
+      .course {
+        color: #666;
+        font-size: 16px;
+        line-height: 22px;
+      }
+    }
+    .buy {
+      color: #ff802c;
+      font-size: 16px;
+      line-height: 22px;
+    }
+  }
+}

src/components/videoDetailItem/index.tsx

@@ -12,11 +12,13 @@ export default defineComponent({
           <img src={detaile} alt="" class={classes.detaile} />
           <div class={classes.itemBottom}>
             <div class={classes.itemBottomL}>
-              <img src={icon} alt="" />
-              <span>24首</span>
+              <img src={icon} class={classes.itemHead} alt="" />
+              <span class={classes.itemTitle}>李老师</span>
+              <div class={classes.line}></div>
+              <span  class={classes.course}>12课时</span>
             </div>
             <div class={classes.itemBottomR}>
-              <span>24收藏</span>
+              <span  class={classes.buy} >6人购买</span>
             </div>
           </div>
         </div>

src/views/home/index.module.less

@@ -1,4 +1,8 @@
-.title {
-  font-size: 20px;
-  color: red;
-}
+.title {
+  font-size: 20px;
+  color: red;
+}
+.container {
+  width: 1200px;
+  margin: 0 auto;
+}

src/views/home/index.tsx

@@ -3,18 +3,22 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import albumItem from '@/components/albumItem'
 import videoDetailItem from '@/components/videoDetailItem'
+import musicLIstItem from '@/components/musicLIstItem'
 export default defineComponent({
   name: 'home',
-  components:{
+  components: {
     albumItem,
-    videoDetailItem
+    videoDetailItem,
+    musicLIstItem
   },
   render() {
     return (
       <div class="bg-white">
-        <albumItem></albumItem>
-        <videoDetailItem></videoDetailItem>
-        <div class="container mx-auto">内容</div>
+        <div class="container mx-auto">
+          <albumItem></albumItem>
+          <videoDetailItem></videoDetailItem>
+          <musicLIstItem></musicLIstItem>
+        </div>
       </div>
     )
   }