Merge pull request #20 from studygolang/whxcode

Whxcode
studygolang · Mar 15, 2020 · 5001ae2 · 5001ae2
2 parents 47af14f + c176c66
commit 5001ae2
Show file tree

Hide file tree

Showing 4 changed files with 8,164 additions and 108 deletions.
diff --git a/src/article/Index.vue b/src/article/Index.vue
@@ -1,8 +1,16 @@
 <template>
-  <div class="cnt">
-    <div>
-      首页文章内容页 id = {{this.$route.params.id}} <br>
-    </div>
+  <div class="page_article">
+    <header class="header">
+        <h1 class="title">
+            {{ article.title }} + {{ this.$route.params.id }}
+        </h1>
+        <p class="desc">
+            {{ article.description }}
+        </p>
+    </header>
+    <article class="content">
+        这里面是内容
+    </article>
   </div>
 </template>
 
@@ -11,8 +19,39 @@ import Vue from 'vue'
 
 export default Vue.extend({
   name: 'Article',
+  data() {
+    return {
+      article:{
+        author: {
+          avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
+          nickname: '昵称'
+        },
+        title: '什么是协程（goroutine），它们是怎样作的呢?',
+        description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
+        like: 6,
+        comments: 10,
+        id: 12,
+        cover: ''
+      }
+    }
+  }
 })
 </script>
 <style lang="less">
-
+.page_article {
+     padding: 0 20px;
+    .header {
+        .title {
+            color:#333;
+            font-size: 34rpx;
+            border-bottom: 2px solid #eee;
+            padding: 10px 0;
+        }
+        .desc {
+            color:#555;
+            font-size: 30rpx;
+            margin: 20px 0 30px;
+        }
+    }
+}
 </style>
diff --git a/src/doc/Index.vue b/src/doc/Index.vue
@@ -1,5 +1,5 @@
 <template>
-    <view>
+    <view class="page_doc">
         <view class="doc_info">
             <view class="doc_item"
             v-for="(item,index) in docTitleList"
@@ -45,39 +45,43 @@ export default Vue.extend({
 
 </script>
 <style lang="less">
-    .doc_info{
-        width: 100%;
-        box-sizing: border-box;
-        -webkit-box-sizing: border-box;
-        padding: 10px 20px 20px 20px;
-    }
+    .page_doc {
 
-    .doc_item{
-        width:100%;
-        height:80px;
-        background:rgba(255,255,255,1);
-        border-radius:4px;
-        line-height:80px;
-        margin-bottom: 10px;
-        position: relative;
-    }
+        .doc_info{
+            width: 100%;
+            box-sizing: border-box;
+            -webkit-box-sizing: border-box;
+            padding: 10px 20px 20px 20px;
+        }
 
-    .doc_item_title {
-        position: absolute;
-        left: 20px;
-        font-family: PingFangSC-Regular;
-        font-size: 16px;
-        color: #333333;
-        letter-spacing: 0;
-        line-height: 80px;
-        font-weight: 400;
-    }
+        .doc_item{
+            width:100%;
+            height:160rpx;
+            background:rgba(255,255,255,1);
+            border-radius:4px;
+            line-height:160rpx;
+            margin-bottom: 10px;
+            position: relative;
+        }
 
-    .doc_item_icon_right{
-        position: absolute;
-        width: 12px;
-        height: 15px;
-        top: 35px;
-        right: 16px;
+        .doc_item_title {
+            position: absolute;
+            left: 20px;
+            font-family: PingFangSC-Regular;
+            font-size: 34rpx;
+            color: #333333;
+            letter-spacing: 0;
+            line-height: 160rpx;
+            font-weight: 700;
+        }
+
+        .doc_item_icon_right{
+            position: absolute;
+            width: 12px;
+            height: 15px;
+            top: 35px;
+            right: 16px;
+        }
     }
+
 </style>
diff --git a/src/me/Index.vue b/src/me/Index.vue
@@ -1,6 +1,6 @@
 /* eslint-disable vue/no-shared-component-data */
 <template>
-    <view>
+    <view class="page_me">
         <img class="bg" :src="bgImg"/>
         <view class="baseinfo1">
             <!-- <image class="head" src="{{headUrl}}"/> -->
@@ -79,75 +79,78 @@ export default Vue.extend({
 })
 </script>
 <style lang="less">
-    .bg {
-        width: 100%;
-        position: absolute;
-        z-index: 1;
-        height: 146px;
-        top: 0;
-    }
-    .baseinfo1 {
-        width: 94%;
-        height: 170px;
-        margin: 40px auto 23px;
-        background: #FFFFFF;
-        box-shadow: 0 2px 10px 4px rgba(239,68,49,0.12);
-        border-radius: 10px;
-        position: relative;
-        z-index: 2;
-    }
-    .head {
-        display: block;
-        margin: 21px auto 0;
-        padding-top: 21px;
-        width: 82px;
-        height: 82px;
-        border-radius: 82px;
-    }
-    .name {
-        display: block;
-        margin-top: 14px;
-        width: 100%;
-        text-align: center;
-        font-family: PingFangSC-Medium;
-        font-size: 16px;
-        color: #4A4A4A;
-        letter-spacing: 0;
-        line-height: 25px;
-    }
-    .info {
-        margin-bottom: 24px;
-        width: 100%;
-        border-top: .5px solid #DCDEDF;
-        background: white;
-    }
-    .info-item {
-        width: 100%;
-        min-height: 46px;
-        position: relative;
-        border-bottom: .5px solid #DCDEDF;
-    }
-    .item-icon {
-        position: absolute;
-        width: 18px;
-        top: 14px;
-        left: 17px;
-        height: 18px;
-    }
-    .info-title {
-        position: absolute;
-        left: 54px;
-        font-family: PingFangSC-Regular;
-        font-size: 16px;
-        color: #4A4A4A;
-        letter-spacing: 0;
-        line-height: 46px;
-    }
-    .right-icon {
-        position: absolute;
-        width: 12px;
-        height: 15px;
-        top: 17px;
-        right: 16px;
+    .page_me {
+        .bg {
+            width: 100%;
+            position: absolute;
+            z-index: 1;
+            height: 352rpx;
+            top: 0;
+        }
+        .baseinfo1 {
+            width: 94%;
+            height: 240rpx;
+            margin: 40px auto 23px;
+            background: #FFFFFF;
+            box-shadow: 0 2px 10px 4px rgba(239,68,49,0.12);
+            border-radius: 10px;
+            position: relative;
+            z-index: 2;
+        }
+        .head {
+            display: block;
+            margin: 21px auto 0;
+            padding-top: 21px;
+            width: 164rpx;
+            height: 164rpx;
+            border-radius: 82px;
+        }
+        .name {
+            display: block;
+            margin-top: 14px;
+            width: 100%;
+            text-align: center;
+            font-family: PingFangSC-Medium;
+            font-size: 32rpx;
+            color: #4A4A4A;
+            letter-spacing: 0;
+            line-height: 32rpx;
+        }
+        .info {
+            margin-bottom: 24px;
+            width: 100%;
+            border-top: .5px solid #DCDEDF;
+            background: white;
+        }
+        .info-item {
+            width: 100%;
+            display: flex;
+            align-items: center;
+            height: 82rpx;
+            position: relative;
+            border-bottom: .5px solid #DCDEDF;
+        }
+        .item-icon {
+            position: absolute;
+            width: 36rpx;
+            left: 34rpx;
+            height: 32rpx;
+        }
+        .info-title {
+            position: absolute;
+            left: 54px;
+            font-family: PingFangSC-Regular;
+            font-size: 32rpx;
+            color: #4A4A4A;
+            letter-spacing: 0;
+        }
+        .right-icon {
+            position: absolute;
+            width: 24rpx;
+            height: 30rpx;
+            top: 34rpx;
+            right: 32rpx;
+        }
     }
+
 </style>