首页积木完成

src/components/lessonitem.vue

@@ -0,0 +1,109 @@
+<template>
+<div class="lessonitem">
+  <div class="fengmian">
+    <div class="content">
+      <h1>工程造价</h1>
+      <h2>电路工程技术</h2>
+    </div>
+    <div class="jiaobiao">
+     <div class="ad">
+       <img src="../static/img/jiaobiao.png" class="freeicon">
+       <p class="free">免费</p>
+     </div>
+    </div>
+  </div>
+  <p class="lessonname">工程造价电路工程技术</p>
+  <div class="auth">
+    <div class="left">
+      <img src="../static/img/tx.png" class="touxiang">
+      <span>张三</span>
+    </div>
+    <div class="date">2019-07-15  09:00</div>
+
+  </div>
+</div>
+</template>
+
+<script>
+export default {
+  name: "lessonitem"
+}
+</script>
+
+<style lang="scss" scoped>
+.lessonitem{
+  width:405px;
+  height:297px;
+  background: white;
+  border-radius: 8px;
+
+  .fengmian{
+    width: 100%;
+    height: 182px;
+    position: relative;
+    background: linear-gradient(-32deg, #F65934, #FF7F46);
+    margin-bottom: 5px;
+    .content{
+      padding-top: 43px;
+      padding-left: 41px;
+      color: white;
+      h1{
+        font-size: 38px;
+      }
+      h2{
+        font-size: 21px;
+        margin-top:9px;
+      }
+    }
+    .jiaobiao{
+      position: absolute;
+      top:0;
+      right:20px;
+      //color:white;
+      font-size: 15px;
+      .ad{
+        position: relative;
+      }
+      .freeicon{
+        width:76px;
+        //height: 49px;
+      }
+      .free{
+        position: absolute;
+        top:3px;
+        left:5px;
+        color:white;
+      }
+    }
+  }
+
+  .lessonname{
+    font-size:20px;
+    color: #333333;
+    font-weight: bold;
+    text-align: center;
+  }
+
+  .auth{
+    width:400px;
+    margin: 0 auto;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 20px;
+    .left{
+      line-height:80px;
+    }
+    .touxiang{
+      width:38px;
+      height:38px;
+      margin-right:20px;
+    }
+    .date{
+      font-size: 20px;
+      color: #666666;
+
+    }
+  }
+}
+</style>

src/components/navitem.vue

@@ -1,15 +1,28 @@
 <template>
   <div class="navitem">
-
+    <div class="left">最新课程</div>
+    <div class="right">
+      <span>查看更多</span>
+      <span> > </span>
+    </div>
   </div>
 </template>
 
 <script>
-export default {
 
+export default {
+  name:"navitem"
 }
 </script>
 
 <style lang="scss">
-
+.navitem{
-</style>
+  width: 900px;
+  display:flex;
+  justify-content: space-between;
+  margin:0 auto;
+  .left{
+    font-weight: bold;
+  }
+}
+</style>

src/views/Home.vue

@@ -26,14 +26,24 @@
         <p>下载管理</p>
       </div>
     </div>
+
+    <navitem class="title"></navitem>
+
+    <lessonitem></lessonitem>
   </div>
 </template>
 
 <script lang="ts">
 import { defineComponent } from "vue";
 import {login} from "../api/index"
+import navitem from "../components/navitem.vue"
+import lessonitem from "../components/lessonitem.vue"
 export default defineComponent({
   name: "Home",
+  components:{
+    navitem,
+    lessonitem
+  },
   setup() {
     function denglu() {
      login().then((res:any)=>{
@@ -88,5 +98,10 @@ export default defineComponent({
     align-items: center;
     text-align: center;
   }
+
+  .title{
+    margin-top:40px;
+    font-size: 34px;
+  }
 }
 </style>

yarn.lock

@@ -1981,7 +1981,7 @@ aws4@^1.8.0:
 
 axios@^0.24.0:
   version "0.24.0"
-  resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
+  resolved "https://registry.npmmirror.com/axios/download/axios-0.24.0.tgz?cache=0&sync_timestamp=1635213986012&other_urls=https%3A%2F%2Fregistry.npmmirror.com%2Faxios%2Fdownload%2Faxios-0.24.0.tgz#804e6fa1e4b9c5288501dd9dff56a7a0940d20d6"
   integrity sha1-gE5voeS5xSiFAd2d/1anoJQNINY=
   dependencies:
     follow-redirects "^1.14.4"