@@ -58,12 +58,30 @@ | |||
"navigationBarTitleText": "出租专区", | |||
"navigationBarTextStyle": "black" | |||
} | |||
},{ | |||
"path": "pages/otherPage/rentDetail", | |||
"style": { | |||
"navigationBarTitleText": "出租专区详情", | |||
"navigationBarTextStyle": "black" | |||
} | |||
},{ | |||
"path": "pages/otherPage/jjrent", | |||
"style": { | |||
"navigationBarTitleText": "居间出租", | |||
"navigationBarTextStyle": "black" | |||
} | |||
},{ | |||
"path": "pages/otherPage/mywarReport", | |||
"style": { | |||
"navigationBarTitleText": "我的战报", | |||
"navigationBarTextStyle": "black" | |||
} | |||
},{ | |||
"path": "pages/otherPage/companywayReport", | |||
"style": { | |||
"navigationBarTitleText": "公司战报", | |||
"navigationBarTextStyle": "black" | |||
} | |||
} | |||
], | |||
"globalStyle": { | |||
@@ -0,0 +1,197 @@ | |||
<template> | |||
<view class="container"> | |||
<view class="report-tab"> | |||
<u-tabs :list="tabList" bar-width="60" bar-height="6" active-color="#FF6D25" inactive-color="#666666" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs> | |||
</view> | |||
<view class="my-btn"> | |||
<view class="dot"></view>部门战报<view class="dot"></view> | |||
</view> | |||
<view class="list-box"> | |||
<view class="list-item" v-for="(item, index) in listData" :key="index"> | |||
<view class="item-top"> | |||
<view class="left"> | |||
<image class="house-icon" src="/static/house.png" mode="" /> | |||
芍药居一店一部 | |||
</view> | |||
<view class="right"> | |||
我的战报 | |||
<image class="path" src="/static/path.png" mode="" /> | |||
</view> | |||
</view> | |||
<view class="item-bottom"> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增成交/单</view> | |||
</view> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增客户/位</view> | |||
</view> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增带看/位</view> | |||
</view> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增代理合同/单</view> | |||
</view> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增客户跟进/位</view> | |||
</view> | |||
<view class="subitem-box"> | |||
<view class="number">32</view> | |||
<view class="text">新增拜访/位</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
tabList: [{ | |||
name: '今日' | |||
}, { | |||
name: '本周' | |||
}, { | |||
name: '本月' | |||
}], | |||
current: 0, | |||
listData: [{},{},{}], | |||
}; | |||
}, | |||
onLoad(options) { | |||
}, | |||
onShow() { | |||
}, | |||
methods: { | |||
change(index){ | |||
this.current = index | |||
}, | |||
}, | |||
onLoad: function(options) { | |||
}, | |||
onHide: function() {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.container{ | |||
width: 100%; | |||
min-height: 100vh; | |||
background: #F8F8F8; | |||
overflow: auto; | |||
padding-bottom: 60rpx; | |||
.report-tab{ | |||
border-bottom: 1px solid rgba(224,224,224,0.5); | |||
} | |||
.my-btn{ | |||
width: 280rpx; | |||
height: 88rpx; | |||
line-height: 88rpx; | |||
background: linear-gradient(360deg, #FECF3F 0%, #DD1F10 0%, #FF6D25 100%); | |||
box-shadow: inset 0px -8rpx 2rpx 0px #CD0000; | |||
border-radius: 46rpx; | |||
margin: 20rpx auto; | |||
color: #fff; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
padding: 0 28rpx; | |||
box-sizing: border-box; | |||
.dot{ | |||
width: 20rpx; | |||
height: 20rpx; | |||
background: #FFEEB7; | |||
border-radius: 10rpx; | |||
box-shadow: inset 2rpx -5rpx 0px 0px #FFD244; | |||
} | |||
} | |||
.list-box{ | |||
width: 750rpx; | |||
.list-item{ | |||
background:#fff; | |||
margin-bottom: 20rpx; | |||
padding: 30rpx; | |||
.item-top{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
margin-bottom: 24rpx; | |||
.left{ | |||
display: flex; | |||
align-items: center; | |||
font-size: 30rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 42rpx; | |||
.house-icon{ | |||
width: 30rpx; | |||
height: 30rpx; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
.right{ | |||
display: flex; | |||
align-items: center; | |||
font-size: 30rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
.path{ | |||
width: 14rpx; | |||
height: 30rpx; | |||
margin-left: 12rpx; | |||
} | |||
} | |||
} | |||
.item-bottom{ | |||
width: 690rpx; | |||
height: 286rpx; | |||
background: #F8F8F8; | |||
border-radius: 12rpx; | |||
display: flex; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
.subitem-box{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: space-between; | |||
width: 33.333%; | |||
.number{ | |||
margin-bottom: 6rpx; | |||
height: 56rpx; | |||
font-size: 40rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 56rpx; | |||
} | |||
.text{ | |||
height: 36rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,142 @@ | |||
<template> | |||
<view class="container"> | |||
<view class="info u-line-1" > | |||
<image class="avatar" src="/static/avatar.png" mode="" /> | |||
章三章三章三 | |||
</view> | |||
<view class="cont-box"> | |||
<view class="my-title"> | |||
<image class="cup" src="/static/cup.png" mode="" /> | |||
我的战报</view> | |||
<view class="top-tabs"> | |||
<view class="tab"> | |||
<view class="number">2</view> | |||
新增成交/单 | |||
</view> | |||
<view class="tab"> | |||
<view class="number">32</view> | |||
新增客户/位 | |||
</view> | |||
<view class="tab"> | |||
<view class="number">12</view> | |||
新增带看/位 | |||
</view> | |||
<view class="tab"> | |||
<view class="number">22</view> | |||
新增代理合同/单 | |||
</view> | |||
<view class="tab"> | |||
<view class="number">42</view> | |||
新增客户跟进/位 | |||
</view> | |||
<view class="tab"> | |||
<view class="number">12</view> | |||
新增拜访/位 | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return {}; | |||
}, | |||
onLoad(options) { | |||
}, | |||
onShow() { | |||
}, | |||
methods: { | |||
}, | |||
onLoad: function(options) { | |||
}, | |||
onHide: function() {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.container{ | |||
width: 100%; | |||
height: 100vh; | |||
background: url('https://static.quhouse.com/26c187820b534a47a60c46663d480547.png') no-repeat #F8F8F8;; | |||
background-size: contain; | |||
padding: 40rpx 0; | |||
.info{ | |||
padding: 0 48rpx; | |||
display: flex; | |||
align-items: center; | |||
font-size: 30rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #FFFFFF; | |||
line-height: 42rpx; | |||
.avatar{ | |||
width: 100rpx; | |||
height: 100rpx; | |||
flex: 0 0 100rpx; | |||
border-radius: 50%; | |||
border: 2rpx solid #FFFFFF; | |||
margin-right: 24rpx; | |||
} | |||
} | |||
.cont-box{ | |||
width: 690rpx; | |||
height: 376rpx; | |||
background: url('https://static.quhouse.com/85043277616540cea74cc69d200bf369.png')no-repeat; | |||
background-size: contain; | |||
margin: 40rpx 30rpx; | |||
padding-top: 26rpx; | |||
.my-title{ | |||
display: flex; | |||
align-items: center; | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #303030; | |||
line-height: 44rpx; | |||
margin-bottom: 34rpx; | |||
padding-left: 30rpx; | |||
.cup{ | |||
width: 40rpx; | |||
height: 40rpx; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
.top-tabs{ | |||
width: 690rpx; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
flex-wrap: wrap; | |||
.tab{ | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
margin-bottom: 30rpx; | |||
width: 33.333%; | |||
.number{ | |||
height: 56rpx; | |||
font-size: 40rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 56rpx; | |||
margin-bottom: 6rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -1,19 +1,70 @@ | |||
<template> | |||
<view class="container"> | |||
出租专区 | |||
<view class="top-box"> | |||
<view class="search-box"> | |||
<u-search v-model="keyword" placeholder="请输入小区名/台账号" :show-action="false" :clearabled="true" bg-color="#F8F8F8" shape="round" height="78"></u-search> | |||
</view> | |||
</view> | |||
<view class="select-box"> | |||
<view class="select-item" @click="huxingshow=true">位置</view> | |||
<view class="select-item" @click="zujinshow=true">价格</view> | |||
<view class="select-item" @click="zujinshow=true">开盘</view> | |||
<view class="select-item" @click="zujinshow=true">更多</view> | |||
</view> | |||
<u-picker v-model="huxingshow" @confirm="confirm1" range-key="cateName" :range="selectorObj" mode="selector"></u-picker> | |||
<u-picker v-model="zujinshow" @confirm="confirm2" range-key="cateName" :range="selectorObj" mode="selector"></u-picker> | |||
<view class="list-box"> | |||
<view class="list-item" @click="topage(item)" v-for="(item,index) in listData" :key="index"> | |||
<image class="house-img" src="/static/kehu/pic1.png" mode="" /> | |||
<view class="item-info"> | |||
<view class="house-name u-line-1">吉利家园 3号楼21层</view> | |||
<view class="type">3改4 / 20㎡</view> | |||
<view class="rent-time">剩余租期:11个月</view> | |||
<view class="bot-wrap"> | |||
<view class="left u-line-1"><image class="person-icon" src="/static/kehu/person.png" mode="" />邵海波</view> | |||
<view class="money">3600/月</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return {}; | |||
return { | |||
keyword: '', | |||
listData: [{},{},{},{},{}], | |||
selectorObj: [ | |||
{ | |||
cateName: '1', | |||
id: 1 | |||
}, | |||
{ | |||
cateName: '2', | |||
id: 2 | |||
} | |||
], | |||
zujinshow: false, | |||
huxingshow: false, | |||
}; | |||
}, | |||
onLoad(options) { | |||
}, | |||
onShow() { | |||
}, | |||
methods: {}, | |||
methods: { | |||
confirm1(e) { | |||
}, | |||
confirm2(e) { | |||
}, | |||
topage(item){ | |||
uni.navigateTo({ | |||
url: '/pages/otherPage/rentDetail?id=' + item.id | |||
}) | |||
} | |||
}, | |||
onLoad: function(options) { | |||
}, | |||
@@ -22,4 +73,110 @@ | |||
</script> | |||
<style lang="scss" scoped> | |||
.container{ | |||
width: 750rpx; | |||
min-height: 100vh; | |||
.top-box{ | |||
padding: 0 30rpx; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
background: #fff; | |||
.search-box{ | |||
width: 690rpx; | |||
height: 78rpx; | |||
} | |||
} | |||
.select-box{ | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
background: #fff; | |||
padding: 30rpx 0; | |||
border-bottom: 1px solid #e0e0e0; | |||
.select-item{ | |||
height: 36rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
letter-spacing: 1px; | |||
position: relative; | |||
&::after{ | |||
position: absolute; | |||
content: ''; | |||
top: 16rpx; | |||
right: -24rpx; | |||
border-color: #969696; | |||
border: 8rpx solid transparent; | |||
border-top: 8rpx solid #969696; | |||
} | |||
} | |||
} | |||
.list-box{ | |||
padding: 30rpx; | |||
.list-item{ | |||
width: 690rpx; | |||
height: 202rpx; | |||
margin-bottom: 30rpx; | |||
display: flex; | |||
.house-img{ | |||
width: 248rpx; | |||
height: 202rpx; | |||
border-radius: 8rpx; | |||
margin-right: 24rpx; | |||
flex: 0 0 248rpx; | |||
} | |||
.item-info{ | |||
flex: 1; | |||
.house-name{ | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 44rpx; | |||
margin-bottom: 2rpx; | |||
max-width: 410rpx; | |||
} | |||
.type,.rent-time{ | |||
height: 36rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
margin-bottom: 12rpx; | |||
} | |||
.bot-wrap{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.left{ | |||
display: flex; | |||
align-items: center; | |||
.person-icon{ | |||
width: 32rpx; | |||
height: 32rpx; | |||
border-radius: 50%; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
.money{ | |||
height: 48rpx; | |||
font-size: 34rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #FF6D25; | |||
line-height: 48rpx; | |||
} | |||
} | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -0,0 +1,338 @@ | |||
<template> | |||
<view class="container"> | |||
<view class="pic-wrap"> | |||
<u-swiper height="460" :list="picList" :autoplay="true" mode="number" indicator-pos="bottomRight"></u-swiper> | |||
</view> | |||
<view class="house-info"> | |||
<view class="top-cont"> | |||
<view class="title"><view class="u-line-1">莲竹花园8号楼1层莲竹花园8号楼1层莲竹花园8号楼1层</view> | |||
<image class="map" src="/static/czDetail/map.png" mode="" /></view> | |||
<view class="call-info"> | |||
<image class="call" src="/static/czDetail/call.png" mode="" />杜鹏飞 | |||
</view> | |||
</view> | |||
<view class="mid-cont"> | |||
<view class="item"> | |||
<view class="item-val">2改3</view> | |||
<view class="item-type">房型</view> | |||
</view> | |||
<view class="item"> | |||
<view class="item-val">正规间</view> | |||
<view class="item-type">户型</view> | |||
</view> | |||
<view class="item"> | |||
<view class="item-val">18㎡</view> | |||
<view class="item-type">面积</view> | |||
</view> | |||
</view> | |||
<view class="bot-cont"> | |||
<view class="item-btn color1">改价历史</view> | |||
<view class="item-btn color2">改价审核</view> | |||
<view class="item-btn color3">成交合同</view> | |||
</view> | |||
</view> | |||
<view class="detail-info"> | |||
<view class="info-item"><view class="label">台账号:</view>刘572A</view> | |||
<view class="info-item"><view class="label">区域:</view>空巷</view> | |||
<view class="info-item"><view class="label">部门:</view>二区五部</view> | |||
<view class="info-item"><view class="label">代理人:</view>杜鹏飞</view> | |||
<view class="info-item"><view class="label">剩余期限:</view>10个月</view> | |||
<view class="info-item"><view class="label">截止日期:</view>2023-03-20</view> | |||
</view> | |||
<!-- 房间信息 --> | |||
<view class="room-info"> | |||
<view class="title">房间信息</view> | |||
<view class="item" v-for="(item,index) in roomList" :key="index"> | |||
<view class="left"> | |||
<image class="sex" src="/static/czDetail/woman.png" mode="" /> | |||
<!-- <image class="sex" src="/static/czDetail/man.png" mode="" /> --> | |||
<view class="number">01</view> | |||
<view class="other-info">卧·宁371A|17㎡|朝南</view> | |||
</view> | |||
<view class="right"> | |||
男|白领 | |||
</view> | |||
</view> | |||
</view> | |||
<view class="bottom-box"> | |||
<view class="item"> | |||
<image class="item-icon" src="/static/czDetail/money.png" mode="" /> | |||
<view class="item-text">改价申请</view> | |||
</view> | |||
<view class="line"></view> | |||
<view class="item"> | |||
<image class="item-icon" src="/static/czDetail/lock.png" mode="" /> | |||
<view class="item-text">门锁密码</view> | |||
</view> | |||
<view class="line"></view> | |||
<view class="item"> | |||
<image class="item-icon" src="/static/czDetail/money1.png" mode="" /> | |||
<view class="item-text">收定</view> | |||
</view> | |||
<view class="line"></view> | |||
<view class="item"> | |||
<image class="item-icon" src="/static/czDetail/book.png" mode="" /> | |||
<view class="item-text">带看历史</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
<script> | |||
export default { | |||
data() { | |||
return { | |||
picList: [{ | |||
image: 'https://cdn.uviewui.com/uview/swiper/1.jpg', | |||
title: '昨夜星辰昨夜风,画楼西畔桂堂东' | |||
}, | |||
{ | |||
image: 'https://cdn.uviewui.com/uview/swiper/2.jpg', | |||
title: '身无彩凤双飞翼,心有灵犀一点通' | |||
}, | |||
{ | |||
image: 'https://cdn.uviewui.com/uview/swiper/3.jpg', | |||
title: '谁念西风独自凉,萧萧黄叶闭疏窗,沉思往事立残阳' | |||
}], | |||
roomList: [{},{},{}] | |||
}; | |||
}, | |||
onLoad(options) { | |||
}, | |||
onShow() { | |||
}, | |||
methods: { | |||
}, | |||
onLoad: function(options) { | |||
}, | |||
onHide: function() {}, | |||
}; | |||
</script> | |||
<style lang="scss" scoped> | |||
.container{ | |||
width: 750rpx; | |||
min-height: 100vh; | |||
background: #f8f8f8; | |||
padding-bottom: 210rpx; | |||
.pic-wrap{ | |||
width: 750rpx; | |||
height: 460rpx; | |||
} | |||
.house-info{ | |||
padding: 30rpx; | |||
margin-bottom: 20rpx; | |||
background: #fff; | |||
.top-cont{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
.title{ | |||
max-width: 460rpx; | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 44rpx; | |||
letter-spacing: 1rpx; | |||
display: flex; | |||
align-items: center; | |||
.map{ | |||
flex: 0 0 32rpx; | |||
width: 32rpx; | |||
height: 32rpx; | |||
margin-left: 12rpx; | |||
} | |||
} | |||
.call-info{ | |||
height: 42rpx; | |||
font-size: 30rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 42rpx; | |||
display: flex; | |||
align-items: center; | |||
.call{ | |||
width: 38rpx; | |||
height: 38rpx; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
} | |||
.mid-cont{ | |||
margin: 28rpx 0; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-around; | |||
.item{ | |||
display: flex; | |||
flex-direction: column; | |||
align-items: center; | |||
justify-content: center; | |||
.item-val{ | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #FF6D25; | |||
line-height: 44rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
.item-type{ | |||
height: 40rpx; | |||
font-size: 28rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #666666; | |||
line-height: 40rpx; | |||
} | |||
} | |||
} | |||
.bot-cont{ | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
.item-btn{ | |||
width: 210rpx; | |||
height: 64rpx; | |||
line-height:64rpx; | |||
text-align: center; | |||
font-size: 28rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #FFFFFF; | |||
border-radius: 8rpx; | |||
&.color1{ | |||
background: #2671E2; | |||
} | |||
&.color2{ | |||
background: #07B79D; | |||
} | |||
&.color3{ | |||
background: #FF6D25; | |||
} | |||
} | |||
} | |||
} | |||
.detail-info{ | |||
background-color: #fff; | |||
margin-bottom: 20rpx; | |||
padding: 30rpx; | |||
.info-item{ | |||
display: flex; | |||
align-items: center; | |||
font-size: 28rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
margin-bottom: 24rpx; | |||
.label{ | |||
width: 140rpx; | |||
color: #666666; | |||
} | |||
} | |||
} | |||
.room-info{ | |||
width: 750rpx; | |||
padding: 30rpx; | |||
background: #fff; | |||
.title{ | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 44rpx; | |||
margin-bottom: 24rpx; | |||
} | |||
.item{ | |||
margin-bottom: 24rpx; | |||
width: 690rpx; | |||
height: 80rpx; | |||
line-height: 80rpx; | |||
background: #F8F8F8; | |||
border-radius: 8rpx; | |||
padding: 30rpx; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
.left{ | |||
height: 40rpx; | |||
font-size: 28rpx; | |||
color: #333333; | |||
line-height: 40rpx; | |||
display: flex; | |||
align-items: center; | |||
.sex{ | |||
width: 40rpx; | |||
height: 40rpx; | |||
margin-right: 12rpx; | |||
} | |||
.number{ | |||
font-weight: 500; | |||
} | |||
.other-info{ | |||
font-weight: 400; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
} | |||
} | |||
.right{ | |||
height: 40rpx; | |||
font-size: 28rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 40rpx; | |||
} | |||
} | |||
} | |||
.bottom-box{ | |||
position: fixed; | |||
/* iphonex 等安全区设置,底部安全区适配 */ | |||
bottom: constant(safe-area-inset-bottom); /* 兼容 iOS < 11.2 */ | |||
bottom: env(safe-area-inset-bottom); /* 兼容 iOS >= 11.2 */ | |||
// box-sizing: content-box; | |||
width: 750rpx; | |||
height: 122rpx; | |||
background: #FFFFFF; | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: center; | |||
padding: 20rpx 46rpx; | |||
.line{ | |||
width: 1px; | |||
height: 50rpx; | |||
background: #E0E0E0; | |||
} | |||
.item{ | |||
display: flex; | |||
flex-direction: column; | |||
justify-content: center; | |||
align-items: center; | |||
.item-icon{ | |||
width: 40rpx; | |||
height: 40rpx; | |||
margin-bottom: 10rpx; | |||
} | |||
.item-text{ | |||
height: 32rpx; | |||
font-size: 24rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 32rpx; | |||
} | |||
} | |||
} | |||
} | |||
</style> |
@@ -5,7 +5,32 @@ | |||
<u-search v-model="keyword" :show-action="false" :clearabled="true" bg-color="#F8F8F8" shape="round" height="78"></u-search> | |||
</view> | |||
<view class="addCustomer">增加客户</view> | |||
</view> | |||
<view class="select-box"> | |||
<view class="select-item" @click="huxingshow=true">户型</view> | |||
<view class="select-item" @click="zujinshow=true">租金</view> | |||
</view> | |||
<u-picker v-model="huxingshow" @confirm="confirm1" range-key="cateName" :range="selectorObj" mode="selector"></u-picker> | |||
<u-picker v-model="zujinshow" @confirm="confirm2" range-key="cateName" :range="selectorObj" mode="selector"></u-picker> | |||
<view class="list-box"> | |||
<view class="list-item" v-for="(item,index) in listData" :key="index"> | |||
<view class="item-top"> | |||
<view class="item-left"> | |||
<view class="person">颂女士<image class="love" src="/static/kehu/love.png" mode="" /></view> | |||
<view class="time">刘晓洁于2019-01-17录入</view> | |||
<view class="diffDay">未跟进时间:1239天</view> | |||
</view> | |||
<view class="item-right"> | |||
<image style="margin-right: 40rpx;" src="/static/kehu/news.png" mode="" /> | |||
<image src="/static/kehu/call.png" mode="" /> | |||
</view> | |||
</view> | |||
<view class="item-bot"> | |||
<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />带看录入</view><view class="border"></view> | |||
<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />放弃</view><view class="border"></view> | |||
<view class="btn"><image class="icon" src="/static/kehu/edit.png" mode="" />带看记录</view> | |||
</view> | |||
</view> | |||
</view> | |||
</view> | |||
</template> | |||
@@ -13,7 +38,20 @@ | |||
export default { | |||
data() { | |||
return { | |||
keyword: '' | |||
keyword: '', | |||
listData: [{},{},{},{},{}], | |||
selectorObj: [ | |||
{ | |||
cateName: '1', | |||
id: 1 | |||
}, | |||
{ | |||
cateName: '2', | |||
id: 2 | |||
} | |||
], | |||
zujinshow: false, | |||
huxingshow: false, | |||
}; | |||
}, | |||
onLoad(options) { | |||
@@ -21,7 +59,12 @@ | |||
onShow() { | |||
}, | |||
methods: {}, | |||
methods: { | |||
confirm1(e) { | |||
}, | |||
confirm2(e) { | |||
}, | |||
}, | |||
onLoad: function(options) { | |||
}, | |||
@@ -30,23 +73,147 @@ | |||
</script> | |||
<style lang="scss" scoped> | |||
.top-box{ | |||
display: flex; | |||
align-items: center; | |||
.container{ | |||
width: 750rpx; | |||
min-height: 100vh; | |||
background: #F8F8F8; | |||
.top-box{ | |||
padding: 0 30rpx; | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-between; | |||
background: #fff; | |||
.search-box{ | |||
width: 532rpx; | |||
height: 78rpx; | |||
} | |||
.addCustomer{ | |||
width: 128rpx; | |||
height: 44rpx; | |||
font-size: 32rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #FF6D25; | |||
line-height: 44rpx; | |||
} | |||
} | |||
.select-box{ | |||
display: flex; | |||
justify-content: space-around; | |||
align-items: center; | |||
background: #fff; | |||
padding: 30rpx 0; | |||
.select-item{ | |||
height: 36rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
letter-spacing: 1px; | |||
position: relative; | |||
&::after{ | |||
position: absolute; | |||
content: ''; | |||
top: 16rpx; | |||
right: -24rpx; | |||
border-color: #969696; | |||
border: 8rpx solid transparent; | |||
border-top: 8rpx solid #969696; | |||
} | |||
} | |||
} | |||
.list-box{ | |||
padding: 0 30rpx 30rpx; | |||
margin-top: 20rpx; | |||
.list-item{ | |||
width: 690rpx; | |||
height: 270rpx; | |||
background: #FFFFFF; | |||
border-radius: 12rpx; | |||
padding: 30rpx; | |||
box-sizing: border-box; | |||
margin-bottom: 20rpx; | |||
.item-top{ | |||
display: flex; | |||
justify-content: space-between; | |||
align-items: top; | |||
.item-left{ | |||
display: flex; | |||
flex-direction: column; | |||
.person{ | |||
max-width: 200rpx; | |||
height: 42rpx; | |||
font-size: 30rpx; | |||
font-family: PingFangSC-Medium, PingFang SC; | |||
font-weight: 500; | |||
color: #333333; | |||
line-height: 42rpx; | |||
margin-bottom: 15rpx; | |||
display: flex; | |||
align-items: center; | |||
.love{ | |||
width: 34rpx; | |||
height: 30rpx; | |||
margin-left: 24rpx; | |||
} | |||
} | |||
.time{ | |||
height: 37rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 37rpx; | |||
margin-bottom: 15rpx; | |||
} | |||
.diffDay{ | |||
height: 37rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #FF6D25; | |||
line-height: 37rpx; | |||
} | |||
} | |||
.item-right{ | |||
display: flex; | |||
image{ | |||
width: 88rpx; | |||
height: 88rpx; | |||
} | |||
} | |||
} | |||
.item-bot{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: space-around; | |||
margin-top: 28rpx; | |||
.btn{ | |||
display: flex; | |||
align-items: center; | |||
justify-content: center; | |||
height: 36rpx; | |||
font-size: 26rpx; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #333333; | |||
line-height: 36rpx; | |||
.icon{ | |||
width: 36rpx; | |||
height: 36rpx; | |||
margin-right: 12rpx; | |||
} | |||
} | |||
.border{ | |||
width: 1px; | |||
height: 30rpx; | |||
background-color: #e0e0e0 | |||
} | |||
} | |||
} | |||
} | |||
} | |||
.search-box{ | |||
width: 532rpx; | |||
height: 78rpx; | |||
} | |||
.addCustomer{ | |||
width: 128px; | |||
height: 44px; | |||
font-size: 32px; | |||
font-family: PingFangSC-Regular, PingFang SC; | |||
font-weight: 400; | |||
color: #FF6D25; | |||
line-height: 44px; | |||
} | |||
</style> |
@@ -37,8 +37,8 @@ | |||
<view class="num">{{item.num}}</view> | |||
<view class="text">{{item.text}}</view> | |||
</view> | |||
<view class="lookall" @click="topage(1)">查看全部 | |||
<image class="more-icon" src="/static/index/right-arrow.png" mode="" /> | |||
<view class="lookall" @click="topage('companywayReport')">查看全部 | |||
<image class="more-icon" src="/static/index/more.png" mode="" /> | |||
</view> | |||
</view> | |||
<view class="report-tab"> | |||
@@ -96,15 +96,7 @@ | |||
{ | |||
num: 9, | |||
text: '新增客户' | |||
}, | |||
{ | |||
num: 0, | |||
text: '新增带看' | |||
}, | |||
{ | |||
num: 9, | |||
text: '新增客户' | |||
}, | |||
} | |||
], | |||
rankList: [{},{},{}], | |||
current: 0, | |||