Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 5001ae2

Browse files
deancndeancn
authored
Merge pull request #20 from studygolang/whxcode
Whxcode
2 parents 47af14f + c176c66 commit 5001ae2

File tree

4 files changed

+8164
-108
lines changed

4 files changed

+8164
-108
lines changed

‎src/article/Index.vue

Lines changed: 44 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,16 @@
11
<template>
2-
<div class="cnt">
3-
<div>
4-
首页文章内容页 id = {{this.$route.params.id}} <br>
5-
</div>
2+
<div class="page_article">
3+
<header class="header">
4+
<h1 class="title">
5+
{{ article.title }} + {{ this.$route.params.id }}
6+
</h1>
7+
<p class="desc">
8+
{{ article.description }}
9+
</p>
10+
</header>
11+
<article class="content">
12+
这里面是内容
13+
</article>
614
</div>
715
</template>
816

@@ -11,8 +19,39 @@ import Vue from 'vue'
1119
1220
export default Vue.extend({
1321
name: 'Article',
22+
data() {
23+
return {
24+
article:{
25+
author: {
26+
avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
27+
nickname: '昵称'
28+
},
29+
title: '什么是协程（goroutine），它们是怎样作的呢?',
30+
description: '这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述这是描述',
31+
like: 6,
32+
comments: 10,
33+
id: 12,
34+
cover: ''
35+
}
36+
}
37+
}
1438
})
1539
</script>
1640
<style lang="less">
17-
41+
.page_article {
42+
padding: 0 20px;
43+
.header {
44+
.title {
45+
color:#333;
46+
font-size: 34rpx;
47+
border-bottom: 2px solid #eee;
48+
padding: 10px 0;
49+
}
50+
.desc {
51+
color:#555;
52+
font-size: 30rpx;
53+
margin: 20px 0 30px;
54+
}
55+
}
56+
}
1857
</style>

‎src/doc/Index.vue

Lines changed: 36 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<view>
2+
<view class="page_doc">
33
<view class="doc_info">
44
<view class="doc_item"
55
v-for="(item,index) in docTitleList"
@@ -45,39 +45,43 @@ export default Vue.extend({
4545
4646
</script>
4747
<style lang="less">
48-
.doc_info{
49-
width: 100%;
50-
box-sizing: border-box;
51-
-webkit-box-sizing: border-box;
52-
padding: 10px 20px 20px 20px;
53-
}
48+
.page_doc {
5449
55-
.doc_item{
56-
width:100%;
57-
height:80px;
58-
background:rgba(255,255,255,1);
59-
border-radius:4px;
60-
line-height:80px;
61-
margin-bottom: 10px;
62-
position: relative;
63-
}
50+
.doc_info{
51+
width: 100%;
52+
box-sizing: border-box;
53+
-webkit-box-sizing: border-box;
54+
padding: 10px 20px 20px 20px;
55+
}
6456
65-
.doc_item_title {
66-
position: absolute;
67-
left: 20px;
68-
font-family: PingFangSC-Regular;
69-
font-size: 16px;
70-
color: #333333;
71-
letter-spacing: 0;
72-
line-height: 80px;
73-
font-weight: 400;
74-
}
57+
.doc_item{
58+
width:100%;
59+
height:160rpx;
60+
background:rgba(255,255,255,1);
61+
border-radius:4px;
62+
line-height:160rpx;
63+
margin-bottom: 10px;
64+
position: relative;
65+
}
7566
76-
.doc_item_icon_right{
77-
position: absolute;
78-
width: 12px;
79-
height: 15px;
80-
top: 35px;
81-
right: 16px;
67+
.doc_item_title {
68+
position: absolute;
69+
left: 20px;
70+
font-family: PingFangSC-Regular;
71+
font-size: 34rpx;
72+
color: #333333;
73+
letter-spacing: 0;
74+
line-height: 160rpx;
75+
font-weight: 700;
76+
}
77+
78+
.doc_item_icon_right{
79+
position: absolute;
80+
width: 12px;
81+
height: 15px;
82+
top: 35px;
83+
right: 16px;
84+
}
8285
}
86+
8387
</style>

‎src/me/Index.vue

Lines changed: 74 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
/* eslint-disable vue/no-shared-component-data */
22
<template>
3-
<view>
3+
<view class="page_me">
44
<img class="bg" :src="bgImg"/>
55
<view class="baseinfo1">
66
<!-- <image class="head" src="{{headUrl}}"/> -->
@@ -79,75 +79,78 @@ export default Vue.extend({
7979
})
8080
</script>
8181
<style lang="less">
82-
.bg {
83-
width: 100%;
84-
position: absolute;
85-
z-index: 1;
86-
height: 146px;
87-
top: 0;
88-
}
89-
.baseinfo1 {
90-
width: 94%;
91-
height: 170px;
92-
margin: 40px auto 23px;
93-
background: #FFFFFF;
94-
box-shadow: 0 2px 10px 4px rgba(239,68,49,0.12);
95-
border-radius: 10px;
96-
position: relative;
97-
z-index: 2;
98-
}
99-
.head {
100-
display: block;
101-
margin: 21px auto 0;
102-
padding-top: 21px;
103-
width: 82px;
104-
height: 82px;
105-
border-radius: 82px;
106-
}
107-
.name {
108-
display: block;
109-
margin-top: 14px;
110-
width: 100%;
111-
text-align: center;
112-
font-family: PingFangSC-Medium;
113-
font-size: 16px;
114-
color: #4A4A4A;
115-
letter-spacing: 0;
116-
line-height: 25px;
117-
}
118-
.info {
119-
margin-bottom: 24px;
120-
width: 100%;
121-
border-top: .5px solid #DCDEDF;
122-
background: white;
123-
}
124-
.info-item {
125-
width: 100%;
126-
min-height: 46px;
127-
position: relative;
128-
border-bottom: .5px solid #DCDEDF;
129-
}
130-
.item-icon {
131-
position: absolute;
132-
width: 18px;
133-
top: 14px;
134-
left: 17px;
135-
height: 18px;
136-
}
137-
.info-title {
138-
position: absolute;
139-
left: 54px;
140-
font-family: PingFangSC-Regular;
141-
font-size: 16px;
142-
color: #4A4A4A;
143-
letter-spacing: 0;
144-
line-height: 46px;
145-
}
146-
.right-icon {
147-
position: absolute;
148-
width: 12px;
149-
height: 15px;
150-
top: 17px;
151-
right: 16px;
82+
.page_me {
83+
.bg {
84+
width: 100%;
85+
position: absolute;
86+
z-index: 1;
87+
height: 352rpx;
88+
top: 0;
89+
}
90+
.baseinfo1 {
91+
width: 94%;
92+
height: 240rpx;
93+
margin: 40px auto 23px;
94+
background: #FFFFFF;
95+
box-shadow: 0 2px 10px 4px rgba(239,68,49,0.12);
96+
border-radius: 10px;
97+
position: relative;
98+
z-index: 2;
99+
}
100+
.head {
101+
display: block;
102+
margin: 21px auto 0;
103+
padding-top: 21px;
104+
width: 164rpx;
105+
height: 164rpx;
106+
border-radius: 82px;
107+
}
108+
.name {
109+
display: block;
110+
margin-top: 14px;
111+
width: 100%;
112+
text-align: center;
113+
font-family: PingFangSC-Medium;
114+
font-size: 32rpx;
115+
color: #4A4A4A;
116+
letter-spacing: 0;
117+
line-height: 32rpx;
118+
}
119+
.info {
120+
margin-bottom: 24px;
121+
width: 100%;
122+
border-top: .5px solid #DCDEDF;
123+
background: white;
124+
}
125+
.info-item {
126+
width: 100%;
127+
display: flex;
128+
align-items: center;
129+
height: 82rpx;
130+
position: relative;
131+
border-bottom: .5px solid #DCDEDF;
132+
}
133+
.item-icon {
134+
position: absolute;
135+
width: 36rpx;
136+
left: 34rpx;
137+
height: 32rpx;
138+
}
139+
.info-title {
140+
position: absolute;
141+
left: 54px;
142+
font-family: PingFangSC-Regular;
143+
font-size: 32rpx;
144+
color: #4A4A4A;
145+
letter-spacing: 0;
146+
}
147+
.right-icon {
148+
position: absolute;
149+
width: 24rpx;
150+
height: 30rpx;
151+
top: 34rpx;
152+
right: 32rpx;
153+
}
152154
}
155+
153156
</style>

0 commit comments

Comments
 (0)