作者 mxd

学员档案

1 <template> 1 <template>
2 <view class="wrap_box"> 2 <view class="wrap_box">
3 - <!-- <uParse v-if="datas" :content="datas"></uParse> -->  
4 - <view class="tel_index_bg"></view>  
5 <view class="stu_list"> 3 <view class="stu_list">
6 <view class="stu_search"> 4 <view class="stu_search">
7 - <u-icon name="search" size="30" color="#659ff5"></u-icon> 5 + <u-icon name="search" size="30" color="#979797"></u-icon>
8 <input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text" 6 <input v-model="keywords" confirm-type="search" @confirm="confirm" class="stu_search-input" type="text"
9 - placeholder="搜索姓名" placeholder-style="color: #428DFE"> 7 + placeholder="搜索姓名" placeholder-style="color: #C3C3C3">
10 </view> 8 </view>
11 <view class="stu_num"> 9 <view class="stu_num">
12 - <image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image>  
13 - <text class="stu_num-text">共{{datas.length}}人</text>  
14 - <image class="stu_num-icon" src="@/static/images/xh_icon13.png"></image> 10 + 共<text class="stu_num-text">{{datas.length}}</text>人
15 </view> 11 </view>
16 <scroll-view style="height: 1200rpx;" :scroll-y="true"> 12 <scroll-view style="height: 1200rpx;" :scroll-y="true">
17 - <view class="stuli_box">  
18 - <view v-for="(item,index) in datas" class="stu_li dis_flex">  
19 - <view class="flex_1">  
20 - <view class="stu_li_name"> 13 + <view class="stu_item" v-for="(item,index) in datas">
  14 + <view class="info">
  15 + <view class="name" >
21 {{item.name}} 16 {{item.name}}
22 - <image v-if="item.sex!=1" src="/static/images/tch/icon_female.png" mode="aspectFit">  
23 - </image>  
24 - <image v-else src="/static/images/tch/icon_male.png" mode="aspectFit"></image>  
25 </view> 17 </view>
  18 + <image class="gender" v-if="item.sex!=1" src="/static/imagesV2/stu_selection/icon_female.png" mode="aspectFit"></image>
  19 + <image class="gender" v-else src="/static/imagesV2/stu_selection/icon_male.png" mode="aspectFit"></image>
  20 + </view>
  21 + <view class="operate">
  22 + <view class="btn" @click="$service.jump" :data-url="'/pagesA/stu_bz_index/stu_bz_index?id='+item.id">
  23 + <view class="icon">
  24 + <image src="/static/imagesV2/tch_index/icon11.png" mode=""></image>
26 </view> 25 </view>
27 - <view class="stu_bz" @click="$service.jump"  
28 - :data-url="'/pagesA/stu_bz_index/stu_bz_index?id='+item.id">  
29 备注信息 26 备注信息
30 </view> 27 </view>
31 - <view class="stu_bz" @click="$service.jump" :data-url="'/pagesA/stu_msg/stu_msg?id='+item.id"> 28 + <view class="btn" @click="$service.jump" :data-url="'/pagesA/stu_msg/stu_msg?id='+item.id">
  29 + <view class="icon">
  30 + <image src="/static/imagesV2/tch_index/icon10.png" mode=""></image>
  31 + </view>
32 查看档案 32 查看档案
33 </view> 33 </view>
34 </view> 34 </view>
35 </view> 35 </view>
36 </scroll-view> 36 </scroll-view>
37 </view> 37 </view>
38 - <!-- 阻止滑动 -->  
39 - <!-- <view @touchmove.stop.prevent='test'></view> --> 38 +
40 </view> 39 </view>
41 </template> 40 </template>
42 41
@@ -180,86 +179,74 @@ @@ -180,86 +179,74 @@
180 position: relative; 179 position: relative;
181 } 180 }
182 181
183 - .tel_index_bg {  
184 - position: absolute;  
185 - top: 0;  
186 - z-index: 1;  
187 - width: 100%;  
188 - min-height: 220rpx;  
189 - background: linear-gradient(0deg, #f8f8f8 0%, #5D9DFD 60%, #428EFE 70%, #2D81FF 100%);  
190 - }  
191 -  
192 .stu_list { 182 .stu_list {
193 position: relative; 183 position: relative;
194 z-index: 2; 184 z-index: 2;
195 width: 100%; 185 width: 100%;
196 - padding: 0 30rpx 30rpx; 186 + padding: 30rpx;
197 187
198 .stu_search { 188 .stu_search {
199 - background-color: rgba(#fff, 0.4);  
200 - height: 68rpx; 189 + background-color:#fff;
201 display: flex; 190 display: flex;
202 - border-radius: 200rpx; 191 + border-radius: 36rpx;
203 align-items: center; 192 align-items: center;
204 - padding: 0 20rpx;  
205 - 193 + padding: 15rpx 20rpx 15rpx 30rpx;
  194 + border-radius: 36rpx;
206 .stu_search-input { 195 .stu_search-input {
207 flex-grow: 1; 196 flex-grow: 1;
208 } 197 }
209 } 198 }
210 199
211 .stu_num { 200 .stu_num {
212 - width: 100%;  
213 - height: 80rpx;  
214 - display: flex;  
215 - align-items: center;  
216 - font-size: 30rox;  
217 - color: #477FF6;  
218 - justify-content: center;  
219 -  
220 - .stu_num-icon {  
221 - height: 12rpx;  
222 - width: 50rpx;  
223 - }  
224 - 201 + font-size: 26rpx;
  202 + font-family: PingFang SC;
  203 + font-weight: 500;
  204 + color: #323232;
  205 + padding: 20rpx 0;
225 .stu_num-text { 206 .stu_num-text {
226 - color: #477FF6;  
227 - margin: 0 20rpx; 207 + color: #2D81FF;
228 } 208 }
229 } 209 }
230 210
231 - .stuli_box {  
232 - border-radius: 10rpx; 211 + .stu_item {
233 background: #FFFFFF; 212 background: #FFFFFF;
234 - }  
235 -  
236 - .stu_li {  
237 - width: 100%;  
238 - min-height: 120rpx;  
239 - // border-radius: 10rpx;  
240 - padding: 24rpx 30rpx; 213 + border-radius: 20rpx;
  214 + padding: 30rpx;
  215 + display: flex;
241 align-items: center; 216 align-items: center;
242 217
243 - &+.stu_li {  
244 - border-top: 1px solid #eee; 218 + & + .stu_item {
  219 + margin-top: 20rpx;
245 } 220 }
246 -  
247 - .stu_li_name {  
248 - font-size: 30rpx;  
249 - color: #545D71;  
250 - margin-bottom: 10rpx;  
251 -  
252 - image {  
253 - width: 28rpx;  
254 - height: 28rpx;  
255 - margin-left: 5rpx; 221 + .info {
  222 + flex: 1;
  223 + display: flex;
  224 + align-items: center;
256 } 225 }
  226 + .gender {
  227 + width: 29rpx !important;
  228 + height: 24rpx !important;
  229 + margin-left: 20rpx;
257 } 230 }
258 231
259 - .stu_bz {  
260 - font-size: 30rpx;  
261 - color: #9699A9;  
262 - margin-left: 35rpx; 232 + .operate {
  233 + display: flex;
  234 + align-items: center;
  235 + justify-content: flex-end;
  236 + .btn {
  237 + display: flex;
  238 + align-items: center;
  239 + font-size: 26rpx;
  240 + font-family: PingFang SC;
  241 + font-weight: 500;
  242 + color: #646464;
  243 + margin-left: 30rpx;
  244 + .icon {
  245 + margin-right: 10rpx;
  246 + width: 30rpx;
  247 + height: 30rpx;
  248 + }
  249 + }
263 } 250 }
264 } 251 }
265 } 252 }