# 话题介绍组件开发
<template>
<view>
<!-- 模糊背景 -->
<view class="topic-bg">
<image src="../../static/demo/topicpic/6.jpeg" mode="aspectFill" lazy-load></image>
</view>
<!-- 话题信息 -->
<view class="topic-info">
<view class="topic-info-t u-f-ac">
<image src="../../static/demo/topicpic/6.jpeg" mode="widthFix" lazy-load></image>
<view>#忆往事, 敬余生#</view>
</view>
<view class="topic-info-c u-f-ac">
<view>动态 1000</view>
<view>今日 1000</view>
</view>
<view class="topic-info-b">我是描述</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
}
},
methods: {
}
}
</script>
<style lang="less" scoped>
.topic-bg {
width: 100%;
height: 300rpx;
position: relative;
overflow: hidden;
image {
width: 100%;
position: absolute;
filter: blur(10px);
}
}
.topic-info {
padding: 0 25rpx;
.topic-info-t {
position: relative;
image {
width: 150rpx;
height: 150rpx;
border-radius: 20rpx;
position: absolute;
top: -75rpx;
}
view {
font-size: 35rpx;
margin-left: 180rpx;
flex: 1
}
}
.topic-info-c {
padding-top: 35rpx;
view {
color: #cdcdcd;
&:first-child {}
&:last-child {}
}
}
.topic-info-b {
color: #a3a3a3;
font-size: 32rpx;
padding-bottom: 10rpx;
}
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
← page.json配置 封装话题介绍组件 →