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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
  | .container{ 
 |    width: 670rpx; 
 |    margin: 0 auto; 
 |    background-color: #fff; 
 |    padding: 10rpx 10rpx; 
 |  } 
 |  .wrap1{ 
 |    display: flex; 
 |    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(176,135,113,0.2); 
 |    border-radius: 8rpx; 
 |    padding: 30rpx; 
 |    height: 140rpx; 
 |    .ai{ 
 |      width: 80rpx; 
 |      height: 80rpx; 
 |      display: flex; 
 |      border-radius: 50%; 
 |      justify-content: center; 
 |      align-items: center; 
 |      margin-right: 24rpx; 
 |      background: rgba(176,135,113,0.14); 
 |      image{ 
 |        width: 56rpx; 
 |        height: 56rpx; 
 |      } 
 |    } 
 |    .content{ 
 |      flex: 1; 
 |      .name{ 
 |        font-weight: 600; 
 |        font-size: 32rpx; 
 |        color: #111111; 
 |        margin-bottom: 6rpx; 
 |      } 
 |      .desc{ 
 |        font-weight: 300; 
 |        font-size: 24rpx; 
 |        color: #333333; 
 |      } 
 |    } 
 |    .btn{ 
 |      font-weight: 300; 
 |      font-size: 26rpx; 
 |      line-height: 32rpx; 
 |      width: 68rpx; 
 |      height: 140rpx; 
 |      display: flex; 
 |      flex-direction: column; 
 |      align-items: center; 
 |      justify-content: center; 
 |      margin: -30rpx -30rpx -30rpx 24rpx; 
 |      color: #FFFFFF; 
 |      background: #B08771; 
 |      border-radius: 0rpx 8rpx 8rpx 0rpx; 
 |    } 
 |  } 
 |  .wrap2{ 
 |    .header{ 
 |      display: flex; 
 |      align-items: center; 
 |      .left{ 
 |        flex: 1; 
 |        .name{ 
 |          display: flex; 
 |          align-items: center; 
 |          font-weight: 600; 
 |          font-size: 36rpx; 
 |          .icon{ 
 |            width: 36rpx; 
 |            margin-right: 12rpx; 
 |             
 |          } 
 |        } 
 |        .desc{ 
 |          margin-top: 10rpx; 
 |          font-weight: 300; 
 |          font-size: 26rpx; 
 |          color: #333333; 
 |        } 
 |      } 
 |      .right{ 
 |        width: 16rpx; 
 |      } 
 |    } 
 |    .list{ 
 |      padding: 40rpx 8rpx; 
 |      display: flex; 
 |      width: 710rpx; 
 |      overflow: auto; 
 |      .item{ 
 |        flex-shrink: 0; 
 |        width: 305rpx; 
 |        height: 184rpx; 
 |        background: rgba(176,135,113,0.05) #FFFFFF; 
 |        box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0,0,0,0.12); 
 |        border-radius: 8rpx; 
 |        padding: 20rpx; 
 |        margin-right: 20rpx; 
 |        .name{ 
 |          display: flex; 
 |          margin-bottom: 20rpx; 
 |          font-size: 28rpx; 
 |          .icon{ 
 |            width: 60rpx; 
 |            height: 60rpx; 
 |            background: rgba(176,135,113,0.14); 
 |            border-radius: 50%; 
 |            display: flex; 
 |            justify-content: center; 
 |            align-items: center; 
 |            margin-right: 20rpx; 
 |            image{ 
 |              width: 36rpx; 
 |            } 
 |          } 
 |          .text{ 
 |            flex: 1; 
 |            overflow : hidden; 
 |            text-overflow: ellipsis; 
 |            display: -webkit-box; 
 |            -webkit-line-clamp: 2; 
 |            -webkit-box-orient: vertical; 
 |          } 
 |        } 
 |        .addr{ 
 |          display: flex; 
 |          justify-content: space-between; 
 |          align-items: center; 
 |          .left{ 
 |            display: flex; 
 |            align-items: center; 
 |            font-size: 24rpx; 
 |            color: #999999; 
 |            .icon{ 
 |              width: 24rpx; 
 |            } 
 |          } 
 |          .right{ 
 |            display: flex; 
 |            align-items: center; 
 |            color: #B08771; 
 |            font-size: 26rpx; 
 |          } 
 |        } 
 |      } 
 |    } 
 |  } 
 |  .wrap3{ 
 |    display: flex; 
 |    box-shadow: 0rpx 4rpx 16rpx 0rpx rgba(176,135,113,0.2); 
 |    border-radius: 8rpx; 
 |    padding: 30rpx; 
 |    height: 140rpx; 
 |    .ai{ 
 |      image{ 
 |        width: 40rpx; 
 |        height: 40rpx; 
 |      } 
 |    } 
 |  } 
 |  
  |