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.
238 lines
5.2 KiB
238 lines
5.2 KiB
<template>
|
|
<view class="app-container">
|
|
<u-navbar
|
|
title="通讯录"
|
|
:autoBack="true"
|
|
:placeholder="true"
|
|
leftText="返回"
|
|
>
|
|
<view slot="right">
|
|
<text class="nav-right">消息</text>
|
|
</view>
|
|
</u-navbar>
|
|
<u-search
|
|
placeholder="搜索关键词"
|
|
v-model="keyword"
|
|
shape="square"
|
|
:showAction="false"
|
|
bgColor="#FFFFFF"
|
|
class="view-global"
|
|
height="74rpx"
|
|
></u-search>
|
|
<view class="grid-title">
|
|
<image
|
|
src="/static/images/grid-icon.png"
|
|
mode="aspectFit"
|
|
class="grid-icon"
|
|
></image>
|
|
<text class="grid-main-title">常用联系人</text>
|
|
</view>
|
|
<view class="linkMan-list view-global">
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">张三</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">李四</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">王五</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">陈二</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">葛云</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
<view class="link-item">
|
|
<view class="link-data">
|
|
<image
|
|
src="/static/images/linkMan.png"
|
|
class="linkMan-icon"
|
|
mode=""
|
|
></image>
|
|
<text class="linkMan-name">马天笑</text>
|
|
</view>
|
|
<view class="link-btn"
|
|
><u-button
|
|
text="呼叫"
|
|
icon="mic"
|
|
size="small"
|
|
color="#32B78B"
|
|
iconColor="#fff"
|
|
></u-button
|
|
></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
keyword: null,
|
|
sysHeigth: 0,
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.sysHeigth = uni.$u.sys().statusBarHeight + (44 + 12.5);
|
|
console.log(this.sysHeigth);
|
|
},
|
|
methods: {
|
|
back() {
|
|
uni.navigateBack({
|
|
delta: 1,
|
|
});
|
|
},
|
|
//单击了导航栏右侧按钮
|
|
rightClick() {
|
|
console.log("单击了");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.app-container {
|
|
box-sizing: border-box;
|
|
padding: 25rpx 20rpx;
|
|
|
|
.grid-title {
|
|
margin: 30rpx 0 20rpx 0;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.grid-icon {
|
|
width: 40rpx;
|
|
height: 25rpx;
|
|
}
|
|
|
|
.grid-main-title {
|
|
margin-left: 25rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #0f1316;
|
|
}
|
|
}
|
|
|
|
.linkMan-list {
|
|
background-color: #fff;
|
|
border-radius: 16rpx;
|
|
box-sizing: border-box;
|
|
padding: 25rpx;
|
|
|
|
.link-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
margin-bottom: 30rpx;
|
|
|
|
.link-data {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.linkMan-icon {
|
|
height: 55rpx;
|
|
width: 55rpx;
|
|
}
|
|
|
|
.linkMan-name {
|
|
margin-left: 25rpx;
|
|
font-size: 32rpx;
|
|
font-weight: 400;
|
|
color: #34373b;
|
|
}
|
|
}
|
|
|
|
.link-btn {
|
|
width: 132rpx;
|
|
}
|
|
}
|
|
|
|
& > .link-item:last-child {
|
|
margin-bottom: 0;
|
|
}
|
|
}
|
|
}
|
|
</style>
|