You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
123 lines
3.0 KiB
123 lines
3.0 KiB
<template>
|
|
<view>
|
|
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20 lf-m-l-30">新招呼 <text class="lf-m-l-10 lf-color-primary">2</text></view>
|
|
<view class="content">
|
|
<view class="card" v-for="(item,index) in 7" :key="index">
|
|
<lf-image class="cover" src="../../static/logo.png"></lf-image>
|
|
<view class="contact-flex">
|
|
<view class="lf-line-1 lf-font-28 lf-color-222" style="font-weight: 500;">嘉宾xxx <text class="lf-iconfont icon-nan lf-m-l-10 lf-color-blue"></text></view>
|
|
<view class="lf-line-1 lf-font-24 lf-color-555">25岁·牛·180cm·本科·未婚</view>
|
|
<view class="lf-font-222 lf-color-777 lf-m-t-16" v-if="index == 2">申请中，等待对方同意</view>
|
|
<view class="lf-m-t-10 lf-row-between" v-else>
|
|
<button class="refuse-btn">拒绝</button>
|
|
<button class="agree-btn">同意</button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="lf-color-222 lf-font-32 authen-title lf-p-l-20 lf-m-l-30">历史记录</view>
|
|
<view class="content">
|
|
<view class="card">
|
|
<lf-image class="cover" src="../../static/logo.png"></lf-image>
|
|
<view class="contact-flex">
|
|
<view class="lf-line-1 lf-font-28 lf-color-222" style="font-weight: 500;">嘉宾xxx <text class="lf-iconfont icon-nan lf-m-l-10 lf-color-blue"></text></view>
|
|
<view class="lf-line-1 lf-font-24 lf-color-555">25岁·牛·180cm·本科·未婚</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<!-- 加载更多 -->
|
|
<view class="loading-more">
|
|
<text>没有更多数据啦~</text>
|
|
</view>
|
|
|
|
<!-- 回到顶部 -->
|
|
<u-back-top :scrollTop="pageScrollTop"></u-back-top>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return {
|
|
|
|
}
|
|
},
|
|
onLoad(){
|
|
|
|
},
|
|
methods: {
|
|
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped="scoped">
|
|
.refuse-btn {
|
|
width: 140rpx;
|
|
height: 42rpx;
|
|
background: #D8D8D8;
|
|
border-radius: 5rpx;
|
|
color: #555;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.agree-btn {
|
|
width: 140rpx;
|
|
height: 42rpx;
|
|
background: #E21196;
|
|
border-radius: 5rpx;
|
|
color: #FFF;
|
|
font-size: 24rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
.contact-flex {
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin: 10rpx 20rpx 26rpx 20rpx;
|
|
justify-content: space-around;
|
|
}
|
|
.authen-title {
|
|
position: relative;
|
|
font-size: 32rpx;
|
|
color: #131315;
|
|
font-weight: 500;
|
|
}
|
|
.authen-title::after {
|
|
content: '';
|
|
position: absolute;
|
|
left: 0;
|
|
top: 8rpx;
|
|
width: 8rpx;
|
|
height: 30rpx;
|
|
background: #E21196;
|
|
border-radius: 4rpx;
|
|
}
|
|
.content{
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
padding: 44rpx 32rpx;
|
|
}
|
|
.card{
|
|
width: 333rpx;
|
|
height: 100%;
|
|
border-radius: 10rpx;
|
|
position: relative;
|
|
overflow: hidden;
|
|
margin-right: 18rpx;
|
|
margin-bottom: 18rpx;
|
|
background: rgba(255, 255, 255, 0.5);
|
|
box-shadow: 0px 2rpx 4rpx 2rpx rgba(0, 0, 0, 0.08);
|
|
&:nth-child(2n){
|
|
margin-right: 0rpx;
|
|
}
|
|
|
|
}
|
|
.cover {
|
|
width: 333rpx;
|
|
height: 333rpx;
|
|
}
|
|
</style>
|