连云港陪玩陪聊
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.
 
 
 
 
 
 
chunwan/pages/xiaoxi/fangke.vue

107 lines
2.0 KiB

<template>
<view class="dashan">
<view class="list">
<view class="item" v-for="i in 5" :key="i" @longpress="openSheet()">
<view class="pic">
<!-- 只有会员才可以看到 -->
<image src="@/static/avatar.png"></image>
</view>
<view class="content">
<view class="info">
<view class="name">李同学<image src="@/static/name.png"></image></view>
<view class="desc">世间无敌,舍我其谁。霸气长存,风...</view>
</view>
<view class="btn">搭讪</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
methods: {
openSheet() {
uni.showActionSheet({
itemList: ["删除会话"],
success: function (res) {
console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
},
})
}
}
}
</script>
<style scoped lang="scss">
page{
background-color: #fff;
}
.dashan{
padding: 0 25rpx;
overflow: hidden;
.item{
display: flex;
align-items: center;
.pic{
width: 90rpx;
height: 90rpx;
margin-right: 20rpx;
position: relative;
image{
width: 100%;
height: 100%;
border-radius: 50%;
}
}
.content{
padding: 30rpx 0;
flex: 1;
border-bottom: 1px solid #EAEAEA;
display: flex;
align-items: center;
justify-content: space-between;
.info{
.name{
font-weight: 400;
font-size: 30rpx;
color: #222222;
image{
width: 95rpx;
height: 30rpx;
display: block;
}
}
.desc{
font-weight: 400;
font-size: 24rpx;
color: #AAAAAA;
margin-top: 15rpx;
max-width: 400rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}
.btn{
width: 150rpx;
line-height: 70rpx;
background: linear-gradient(0deg, #000000, #3D3B38);
box-shadow: 0px 4rpx 18rpx 0px rgba(42,41,39,0.34);
border-radius: 70rpx;
text-align: center;
font-weight: 500;
font-size: 24rpx;
color: #FFFFFF;
text-align: center;
}
}
}
}
</style>