171 lines
3.8 KiB
Vue
171 lines
3.8 KiB
Vue
|
<template>
|
||
|
|
<view class="">
|
||
|
|
<view class="head_box">
|
||
|
|
<u-search shape="round" placeholder="搜索任务状态、优先级、部门等" :showAction="false"></u-search>
|
||
|
|
<view class="btn">筛选</view>
|
||
|
|
</view>
|
||
|
|
<view class="list">
|
||
|
|
<view class="item" v-for="item in 10" :key="item">
|
||
|
|
<view class="left">
|
||
|
|
<view class="top">
|
||
|
|
<image class="avatar" src="../../static/logo.png"></image>
|
||
|
|
<view class="text">
|
||
|
|
<view class="name">经理名称</view>
|
||
|
|
<view class="mobile">
|
||
|
|
联系人-13565632345
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="bottom">
|
||
|
|
<view class="circle"></view>
|
||
|
|
<view class="green">所属片区</view>
|
||
|
|
<view>片区详情XXXX</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="right">
|
||
|
|
<view class="top">
|
||
|
|
发消息
|
||
|
|
</view>
|
||
|
|
<view class="bottom">
|
||
|
|
拨打电话
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
|
||
|
|
}
|
||
|
|
},
|
||
|
|
onReady() {
|
||
|
|
uni.setNavigationBarColor({
|
||
|
|
frontColor: '#ffffff',
|
||
|
|
backgroundColor: '#3175f9'
|
||
|
|
})
|
||
|
|
},
|
||
|
|
onLoad() {},
|
||
|
|
onShow() {},
|
||
|
|
methods: {},
|
||
|
|
onPullDownRefresh() {
|
||
|
|
uni.stopPullDownRefresh()
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.head_box{
|
||
|
|
width: 750rpx;
|
||
|
|
height: 98rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 0 28rpx;
|
||
|
|
background-color: #FFFFFF;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-around;
|
||
|
|
align-items: center;
|
||
|
|
.btn{
|
||
|
|
width: 149rpx;
|
||
|
|
height: 63rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 35rpx 35rpx 35rpx 35rpx;
|
||
|
|
opacity: 1;
|
||
|
|
border: 2rpx solid #E6E5E5;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.list{
|
||
|
|
margin: 21rpx 28rpx 0 28rpx;
|
||
|
|
.item{
|
||
|
|
width: 694rpx;
|
||
|
|
height: 231rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 14rpx 14rpx 14rpx 14rpx;
|
||
|
|
opacity: 1;
|
||
|
|
margin-bottom: 21rpx;
|
||
|
|
box-sizing: border-box;
|
||
|
|
padding: 28rpx;
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
.left{
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: space-between;
|
||
|
|
.top{
|
||
|
|
display: flex;
|
||
|
|
justify-content: left;
|
||
|
|
align-items: center;
|
||
|
|
.avatar{
|
||
|
|
width: 88rpx;
|
||
|
|
height: 88rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
margin-right: 18rpx;
|
||
|
|
}
|
||
|
|
.text{
|
||
|
|
display: flex;
|
||
|
|
justify-content: space-between;
|
||
|
|
flex-direction: column;
|
||
|
|
height: 100%;
|
||
|
|
.name{
|
||
|
|
font-size: 32rpx;
|
||
|
|
font-weight: 500;
|
||
|
|
color: #333333;
|
||
|
|
}
|
||
|
|
.mobile {
|
||
|
|
color: #999999;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.bottom{
|
||
|
|
display: flex;
|
||
|
|
justify-content: left;
|
||
|
|
align-items: center;
|
||
|
|
.circle{
|
||
|
|
width: 11rpx;
|
||
|
|
height: 11rpx;
|
||
|
|
opacity: 1;
|
||
|
|
border: 2rpx solid #34A853;
|
||
|
|
margin-right: 10rpx;
|
||
|
|
border-radius: 50%;
|
||
|
|
}
|
||
|
|
.green{
|
||
|
|
font-weight: 400;
|
||
|
|
color: #34A853;
|
||
|
|
line-height: 0rpx;
|
||
|
|
margin-right: 18rpx;
|
||
|
|
-webkit-background-clip: text;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.right{
|
||
|
|
height: 100%;
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
justify-content: center;
|
||
|
|
.top, .bottom{
|
||
|
|
width: 158rpx;
|
||
|
|
height: 53rpx;
|
||
|
|
background: #FFFFFF;
|
||
|
|
border-radius: 26rpx 26rpx 26rpx 26rpx;
|
||
|
|
opacity: 1;
|
||
|
|
border: 2rpx solid #3274F9;
|
||
|
|
color: #3274F9;
|
||
|
|
display: flex;
|
||
|
|
align-items: center;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
.bottom{
|
||
|
|
border: 2rpx solid #F9AA32;
|
||
|
|
color: #F9AA32;
|
||
|
|
margin-top: 18rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|