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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
| <template>
| <div>
| <div>嚴選顧問推薦</div>
| <ul class="pam-rec-agent__list">
| <li class="pam-rec-agent-card" v-for="(info,index) in recAgentList" :key="index">
| <div class="pam-rec-agent-card__content">
| <div class="pam-rec-agent-card__avatar">
| <img :src="info.avatar" class="avatar">
| <div class="pam-rec-agent-card__main-info">
| <div class="fz-20 pt-10">{{ info.name }}</div>
| <div class="rec-company">{{ info.company }}</div>
| <span class="rec-detail pt-30">詳細資料</span>
| </div>
| </div>
| <span class="rec-sub-title">專長領域</span>
| <div>
| {{info.expertise}}
| </div>
| </div>
| </li>
| </ul>
|
| </div>
| </template>
| <script>
| import {Vue,Component} from 'vue-property-decorator';
|
| @Component
| export default class Reslut extends Vue{
|
| recAgentList =[
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'蔡美莓',
| company:'伯樂保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| },
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'賈斯町',
| company:'鮭魚保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| },
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'陳家婷',
| company:'千里馬保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| },
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'張小美',
| company:'鮭魚保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| },
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'林美女',
| company:'千里馬保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| },
| {
| avatar:'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png',
| name:'蔣帥哥',
| company:'鮭魚保險經紀人',
| expertise:'#財務規劃 #資產轉移 #節稅 #樂活退休',
| seniority:'1年2個月',
| avgScore:4.8
| }
| ];
|
|
| }
| </script>
|
| <style lang="scss" scoped>
| .pam-rec-agent-card {
| border-radius: 10px;
| border: 1px solid $LIGHT_GREY;
| padding: 20px 33px;
| .pam-rec-agent-card__content {
| width: 270px;
| .pam-rec-agent-card__avatar {
| display: flex;
| flex-direction: row;
| .avatar{
| width: 120px;
| height: 120px;
| border-radius: 50%;
| }
| }
| .pam-rec-agent-card__main-info {
| display: flex;
| flex-direction: column;
| margin-left:19px;
| .rec-company{
| font-size: 16px;
| color: $PRUDENTIAL_GREY;
| font-weight:bold;
| margin-top: 4px;
| margin-bottom: 30px;
| }
| .rec-detail{
| font-size: 20px;
| color:$PRIMARY_RED;
| font-weight: bold;
| }
| }
| .rec-sub-title{
| font-size: 16px;
| color: $PRUDENTIAL_GREY;
| font-weight:bold;
| }
| }
| }
| </style>
|
|
