TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

调整聊聊页面

Browse Source
This commit is contained in:
唐明明
2022-01-24 14:09:10 +08:00
parent 92c6b37229
commit 15c83ad6bd
8 changed files with 76 additions and 31 deletions
Download Patch File Download Diff File Expand all files Collapse all files

73
pages/im/index.vue
View File

@@ -1,5 +1,25 @@
<template>
<view class="content">
<view class="content">
<!-- header -->
<view class="custom-header">
<view class="header-flex">
<view class="tabs">
<view class="item show">私聊</view>
<view class="item">群聊</view>
</view>
<view class="btns">
<view class="item">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-sousuo" size="22"></uni-icons>
</view>
<view class="item">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-gengduo2" size="22"></uni-icons>
</view>
<view class="item">
<uni-icons color="#555" custom-prefix="iconfont" type="icon-tuandui" size="22"></uni-icons>
</view>
</view>
</view>
</view>
<view v-if="$store.state.token != ''">
<block v-if="conversations.length < 1">
<view class="vertical null-list">
@@ -14,9 +34,7 @@
<view v-for="(item, index) in conversations" :key="index" class="mssage-box" @click="toDetail(item)">
<view class="mssage-action">
<block v-if="!friend(item.targetId).portraitUrl">
<u-avatar clsss="mssage-action-cover" size="44"
:text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'"
font-size="14" randomBgColor></u-avatar>
<u-avatar clsss="mssage-action-cover" size="44" :text="friend(item.targetId).name ? friend(item.targetId).name.substring(0,1) : '未'" font-size="14" randomBgColor></u-avatar>
</block>
<block v-else>
<u-avatar clsss="mssage-action-cover" :src="friend(item.targetId).portraitUrl" size="44">
@@ -138,7 +156,50 @@
}
</script>
<style lang="scss" scoped>
<style lang="scss" scoped>
// header
.custom-header{
@extend .ios-top;
background: white;
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 99;
.header-flex{
padding: 20rpx $padding;
display: flex;
justify-content: space-between;
height: 60rpx;
line-height: 60rpx;
.tabs{
.item{
margin-left: $margin;
display: inline-block;
font-size: $title-size-lg;
color: $text-gray;
padding: 0 ($padding - 10);
border-radius: 30rpx;
&:first-child{
margin: 0;
}
&.show{
background: rgba($color: $main-color, $alpha: .1);
color: $main-color;
font-weight: bold;
}
}
}
.btns{
.item{
display: inline-block;
margin-left: $margin;
}
}
}
}
// content
.content {
background-color: $window-color;
min-height: 100vh;
@@ -151,7 +212,7 @@
margin-top: $margin * 2;
line-height: 70rpx;
color: $main-color;
border: solid 1rpx $main-color;
border: solid 2rpx $main-color;
padding: 0 ($padding*3);
font-size: $title-size-m;
border-radius: 35rpx;