下载页完成

1

src/views/downLoad/index.module.less

@@ -1,12 +1,98 @@
-
 .bgWhite {
-  background: url("./images/downBg.png") no-repeat cover;
+  background-color: #fff;
+  background: url('./images/downBg.png') no-repeat center;
+  background-size: cover;
   .container {
     width: 1200px;
     margin: 0 auto;
-    .finch {
-      width: 155px;
-      height: 194px;
+    padding: 127px 0 122px;
+    display: flex;
+    flex-direction: row;
+    // align-items: center;
+    justify-content: space-between;
+    .imgWrap {
+      position: relative;
+      .finch {
+        width: 155px;
+        height: 194px;
+        position: absolute;
+        bottom: 0;
+        left: -126px;
+      }
+      .demo {
+        width: 427px;
+      }
+    }
+    .textWrap {
+      h4 {
+        font-size: 32px;
+        font-weight: 600;
+        color: #333333;
+        line-height: 45px;
+        margin-bottom: 24px;
+      }
+      .subtitle {
+        font-size: 18px;
+        font-weight: 400;
+        color: #666666;
+        line-height: 25px;
+        margin-bottom: 7px;
+        .dot {
+          display: inline-block;
+          width: 14px;
+          height: 14px;
+          background: #2dc7aa;
+          border: 4px solid #e0f7f3;
+          border-radius: 50%;
+          margin-right: 10px;
+        }
+      }
+      .codeList {
+        display: flex;
+        flex-direction: row;
+        margin-top: 60px;
+        .codeItem {
+          background-color: #fff;
+          box-shadow: 0px 1px 4px 0px rgba(0, 0, 0, 0.08);
+          border-radius: 14px;
+          margin-right: 40px;
+          h5 {
+            color: #000;
+            font-size: 20px;
+            margin-bottom: 16px;
+            font-weight: 500;
+            line-height: 28px;
+            text-align: center;
+          }
+          padding: 20px 42px;
+          .code {
+            width: 140px;
+            height: 140px;
+            background-color: #666;
+          }
+          .iconWrap {
+            display: flex;
+            flex-direction: row;
+            align-items: center;
+            .iconItem {
+              display: flex;
+              flex-direction: row;
+              align-items: center;
+              margin-top: 16px;
+              font-size: 12px;
+              font-family: PingFangSC-Regular, PingFang SC;
+              font-weight: 400;
+              color: #666666;
+              line-height: 17px;
+              img {
+                width: 20px;
+                height: 20px;
+                margin-right: 5px;
+              }
+            }
+          }
+        }
+      }
     }
   }
 }

src/views/downLoad/index.tsx

@@ -3,16 +3,59 @@ import { defineComponent } from 'vue'
 import styles from './index.module.less'
 import finch from './images/finch.png'
 import demo from './images/demo.png'
+import ios from './images/iosIcon.png'
+import andIcon from './images/andIcon.png'
 export default defineComponent({
   name: 'downLoad',
   render() {
     return (
       <div class={styles.bgWhite}>
         <div class={styles.container}>
-          <div class="imgWrap">
-            <img src={demo} alt="" />
+          <div class={styles.imgWrap}>
+            <img src={demo} class={styles.demo} alt="" />
             <img src={finch} class={styles.finch} alt="" />
           </div>
+          <div class={styles.textWrap}>
+            <h4>下载酷乐秀APP</h4>
+            <p class={styles.subtitle}>
+              <span class={styles.dot}></span>
+              酷乐秀老师端：器乐教学平台，课程信息一目了然,专业网络教室
+            </p>
+            <p class={styles.subtitle}>
+              <span class={styles.dot}></span>
+              酷乐秀学生端：您的学习好帮手，专业教师一对一，器乐练习云教练
+            </p>
+            <div class={styles.codeList}>
+              <div class={styles.codeItem}>
+                <h5>学生端APP</h5>
+                <div class={styles.code}></div>
+                <div class={styles.iconWrap}>
+                  <div class={styles.iconItem} style="margin-right:20px;margin-left:6px;">
+                    <img src={ios} alt="" />
+                    <span>ios</span>
+                  </div>
+                  <div class={styles.iconItem}>
+                    <img src={andIcon} alt="" />
+                    <span>Andrid</span>
+                  </div>
+                </div>
+              </div>
+              <div class={styles.codeItem}>
+                <h5>老师端APP</h5>
+                <div class={styles.code}></div>
+                <div class={styles.iconWrap}>
+                  <div class={styles.iconItem} style="margin-right:20px;margin-left:6px;">
+                    <img src={ios} alt="" />
+                    <span>ios</span>
+                  </div>
+                  <div class={styles.iconItem}>
+                    <img src={andIcon} alt="" />
+                    <span>Andrid</span>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
     )