字体

src/apps/AppVillagersCircle/detail.vue

@@ -1,8 +1,19 @@
 <template>
   <div class="detail">
-    <div>
-
+    <div class="avatar-info">
+      <div class="avatar-img">
+        <img src="./img/tx@2x.png" alt="">
+        <!-- <img src="./img/tx@2x.png" alt=""> -->
+      </div>
+      <div class="avatar-title">
+        <div class="name">雷洋</div>
+        <div class="time">
+          <span>美丽庭院</span>
+          <span>2020-10-28 12:30</span>
+        </div>
+      </div>
     </div>
+    <div class="textarea">⾦秋穿上⽑⾐，漫步森林，在阳光下呼吸伸展，⾃在安逸的天⼈。也许是兰天名字的由来吧。</div>
   </div>
 </template>
 
@@ -24,6 +35,38 @@ export default {
 
 <style lang="scss" scoped>
 .detail {
+  background: #FFFFFF;
+  padding: 30px 32px;
+  box-sizing: border-box;
+
+  .avatar-info {
+    display: flex;
+    margin-bottom: 30px;
+    .avatar-img {
+      margin-right: 20px;
+      img {
+        width: 88px;
+        height: 88px;
+        border-radius: 50%;
+      }
+    }
+    .avatar-title {
+      .name {
+        font-size: 32px;
+        color: #333333;
+        font-weight: 600;
+        margin-bottom: 12px;
+      }
+      .time {
+        font-size: 26px;
+        color: #999999;
+      }
+    }
+  }
+  .textarea {
+    font-style: 32px;
+  }
+
 
 }
 </style>