|
|
|
<template>
|
|
|
|
<view>
|
|
|
|
<uni-search-bar
|
|
|
|
@confirm="search"
|
|
|
|
:radius="16"
|
|
|
|
:focus="true"
|
|
|
|
v-model="searchValue"
|
|
|
|
@input="input"
|
|
|
|
@clear="clear"
|
|
|
|
:clearButton="'always'"
|
|
|
|
:cancelButton="'none'"
|
|
|
|
:bgColor="'#f6f8fa'"
|
|
|
|
></uni-search-bar>
|
|
|
|
<view class="yaoqingList">
|
|
|
|
<view class="yaoqingHeader flex justifyBetween alignC">
|
|
|
|
<view class="yaoqingHeaderLift flex justifyC alignC">
|
|
|
|
全部
|
|
|
|
<image src="../../static/evering/ic_21.png" mode="widthFix"></image>
|
|
|
|
</view>
|
|
|
|
<view class="yaoqingHeaderRight">共有120人</view>
|
|
|
|
</view>
|
|
|
|
<view class="yaoqingPerson flex" v-for="(item, i) in yaoqingPerson" :key="i">
|
|
|
|
<image :src="item.personImage" mode="widthFix" class="personImage"></image>
|
|
|
|
<view class="personMessage">
|
|
|
|
<view class="personMessageOne flex justifyBetween">
|
|
|
|
<view class="personName">{{ item.personName }}</view>
|
|
|
|
<view class="personXX">{{ item.personXX }}</view>
|
|
|
|
</view>
|
|
|
|
<view class="personMessageTwo flex justifyBetween" style="margin-top: 10rpx;">
|
|
|
|
<view class="personPhone">{{ item.personPhone }}</view>
|
|
|
|
<view class="personTime">{{ item.personTime }}</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</view>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
<script>
|
|
|
|
export default {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
searchValue: '',
|
|
|
|
yaoqingPerson: [
|
|
|
|
{
|
|
|
|
personImage: '/static/evering/touXiang.png',
|
|
|
|
personName: '孙美丽',
|
|
|
|
personXX: '已报名',
|
|
|
|
personPhone: '18742564459',
|
|
|
|
personTime: '2020-12-19'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
personImage: '/static/evering/touXiang.png',
|
|
|
|
personName: '孙美丽',
|
|
|
|
personXX: '已报名',
|
|
|
|
personPhone: '18742564459',
|
|
|
|
personTime: '2020-12-19'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
personImage: '/static/evering/touXiang.png',
|
|
|
|
personName: '孙美丽',
|
|
|
|
personXX: '',
|
|
|
|
personPhone: '18742564459',
|
|
|
|
personTime: '2020-12-19'
|
|
|
|
},
|
|
|
|
{
|
|
|
|
personImage: '/static/evering/touXiang.png',
|
|
|
|
personName: '孙美丽',
|
|
|
|
personXX: '已报名',
|
|
|
|
personPhone: '18742564459',
|
|
|
|
personTime: '2020-12-19'
|
|
|
|
}
|
|
|
|
]
|
|
|
|
};
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
input(res) {
|
|
|
|
console.log('----input:', res);
|
|
|
|
},
|
|
|
|
clear(res) {
|
|
|
|
console.log('----clear:', res);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
};
|
|
|
|
</script>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
.yaoqingList {
|
|
|
|
margin-top: 12rpx;
|
|
|
|
padding: 0 32rpx;
|
|
|
|
}
|
|
|
|
.yaoqingHeader {
|
|
|
|
margin-bottom: 40rpx;
|
|
|
|
}
|
|
|
|
.yaoqingHeaderLift {
|
|
|
|
width: 156rpx;
|
|
|
|
height: 64rpx;
|
|
|
|
background-image: url(/static/evering/ic_20.png);
|
|
|
|
background-size: cover;
|
|
|
|
color: rgba(50, 50, 51, 1);
|
|
|
|
font-size: 28rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
}
|
|
|
|
.yaoqingHeaderLift image {
|
|
|
|
width: 20rpx;
|
|
|
|
height: 20rpx;
|
|
|
|
margin-left: 18rpx;
|
|
|
|
}
|
|
|
|
.yaoqingHeaderRight {
|
|
|
|
height: 36rpx;
|
|
|
|
color: rgba(50, 50, 51, 1);
|
|
|
|
font-size: 26rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.yaoqingPerson {
|
|
|
|
width: 686rpx;
|
|
|
|
height: 112rpx;
|
|
|
|
margin-top: 32rpx;
|
|
|
|
}
|
|
|
|
|
|
|
|
.personImage {
|
|
|
|
width: 80rpx;
|
|
|
|
height: 80rpx;
|
|
|
|
margin-right: 26rpx;
|
|
|
|
border-radius: 40rpx;
|
|
|
|
}
|
|
|
|
.personMessage {
|
|
|
|
width: 580rpx;
|
|
|
|
height: 112rpx;
|
|
|
|
border-bottom: 1rpx #ebedf0 solid;
|
|
|
|
}
|
|
|
|
.personName {
|
|
|
|
height: 40rpx;
|
|
|
|
color: rgba(50, 50, 51, 1);
|
|
|
|
font-size: 28rpx;
|
|
|
|
font-weight: 600;
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
}
|
|
|
|
.personXX {
|
|
|
|
width: 72rpx;
|
|
|
|
height: 34rpx;
|
|
|
|
opacity: 1;
|
|
|
|
color: rgba(254, 149, 21, 1);
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 600;
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
}
|
|
|
|
.personPhone {
|
|
|
|
height: 34rpx;
|
|
|
|
opacity: 1;
|
|
|
|
color: rgba(50, 50, 51, 1);
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
.personTime {
|
|
|
|
height: 34rpx;
|
|
|
|
opacity: 1;
|
|
|
|
color: rgba(50, 50, 51, 1);
|
|
|
|
font-size: 24rpx;
|
|
|
|
font-weight: 400;
|
|
|
|
font-family: 'PingFang SC';
|
|
|
|
text-align: left;
|
|
|
|
}
|
|
|
|
</style> |
...
|
...
|
|
