home

src/components/home/articleitem.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="articleitem">
+    <div class="title">这是标题这是标题这是标题这是标题</div>
+    <div class="neirong">
+      这是内容这是内容这是内容这是内容这是内容这是内容这是内容是内容这是
+      内容这是内容这是内容这是内容这是内容这是内容这是内容这是内容这是内
+      容这是内容...
+    </div>
+    <div class="other">
+        <p class="auth">猫猫子</p>
+        <p class="data">2021/09/09</p>
+        <p class="type">分类</p>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "articleitem",
+};
+</script>
+
+<style lang="scss" scoped>
+.articleitem {
+  width: 899px;
+//   height: 248px;
+  border: 1px solid #707070;
+  margin: 0 auto;
+  padding-left:38px;
+  .title {
+    width: 764px;
+    font-size: 25px;
+    font-weight:bold;
+    margin-bottom:20px;
+    margin-top:16px;
+  }
+  .neirong{
+      width:764px;
+      font-size:20px;
+  }
+  .other{
+        width:300px;
+        display: flex;
+        justify-content: space-between;
+        font-size:20px;
+        margin-top:40px;
+        margin-bottom:10px
+  }
+}
+</style>

src/components/home/topnav.vue

@@ -1,21 +1,48 @@
 <template>
   <div class="topnav">
-    <div class="left">dsadsa</div>
+    <div class="left">{{ blogname }}</div>
+    <div class="right">
+      <n-button class="btn">首页</n-button>
+      <n-button class="btn">发布</n-button>
+      <n-button class="btn">后台</n-button>
+    </div>
   </div>
 </template>
 
 <script>
 export default {
-  name: "topnav"
-}
+  name: "topnav",
+  setup() {
+    return {
+      blogname: "猫猫子的小窝",
+    };
+  },
+};
 </script>
 
 <style scoped lang="scss">
-.topnav{
-  .left{
+.topnav {
+  display: flex;
+  justify-content: space-between;
+  padding-top:24px;
+  .left {
     width: 370px;
     height: 88px;
-    background: rgba(212, 223, 230, 0.66);;
+    border-radius: 50px;
+    background: rgba(212, 223, 230, 0.66);
+    text-align: center;
+    line-height: 88px;
+    font-size: 40px;
+    font-weight: bold;
+    margin-left:35px;
+  }
+  .right{
+    .btn{
+      width:149px;
+      height:60px;
+      font-size:25px;
+      margin-right:25px;
+    }
   }
 }
 </style>

src/components/home/uinfo.vue

@@ -0,0 +1,34 @@
+<template>
+  <div class="uinfo">
+      <div class="photo"></div>
+      <div class="info">猫猫子</div>
+      <div class="info">xxx@126.com</div>
+      <div class="info">xxxx.git</div>
+  </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style lang="scss" scoped> 
+.uinfo{
+    border:1px solid #707070;
+    .photo{
+        width:186px;
+        height: 174px;
+        border-radius: 90%;
+        background: blue;
+        margin:0 auto;
+        margin-bottom:46px;
+    }
+    .info{
+        font-size:25px;
+        color:#0f0f0f;
+        margin-bottom:79px;
+        text-align: center;
+    }
+}
+</style>

src/page/add.vue

@@ -0,0 +1,13 @@
+<template>
+  add
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>

src/page/home.vue

@@ -1,19 +1,37 @@
 <template>
 <div class="top">
   <topnav></topnav>
-  {{aaa}}
 </div>
+<div class="main">
+  <div class="list">
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+    <articleitem class="item"></articleitem>
+  </div>
+
+  <div >
+    <uinfo></uinfo>
+  </div>
+</div>
+
 
 </template>
 
 <script>
 import {defineComponent} from 'vue'
 import topnav from "@/components/home/topnav.vue"
+import articleitem from "@/components/home/articleitem.vue"
+import uinfo from "@/components/home/uinfo.vue"
 export default defineComponent({
  name: 'home',
  props: {},
   components:{
-   topnav:topnav
+   topnav:topnav,
+   articleitem:articleitem,
+   uinfo
   },
   setup(props) {
     // console.log(props.title)
@@ -25,12 +43,26 @@ export default defineComponent({
 
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
 .top{
   width: 100vw;
   height: 100vh;
   background:url("../static/img/topbg.jpg")  no-repeat;
   background-size: cover;
-
+}
+.main{
+  width:1644px;
+  margin:0 auto;
+  display:flex;
+  justify-content: space-between;
+  .list{
+    .item{
+      margin-bottom:43px;
+    }
+  }
+  .uinfo{
+    width:333px;
+    height:577px;
+  }
 }
 </style>

src/page/login.vue

@@ -1,5 +1,7 @@
 <template>
-  login
+  <div class="login">
+    
+  </div>
 </template>
 
 <script>

src/route/index.ts

@@ -17,6 +17,7 @@ for(let i in files){
   }
 
 }
+console.log(routes1)
 
 // for(let i in zujian){
 //   console.log(i)