@ -0,0 +1,99 @@ | |||||
<template> | |||||
<scroll-view | |||||
scroll-y="true" | |||||
:style="{height: height}" | |||||
@scrolltolower="loadMoreData"> | |||||
<view class="workList"> | |||||
<view | |||||
@click="$utils.navigateTo('/pages_order/recruit/recruitDetail?id=' + item.id)" | |||||
:key="index" | |||||
v-for="(item, index) in list"> | |||||
<workItem :item="item"/> | |||||
</view> | |||||
</view> | |||||
</scroll-view> | |||||
</template> | |||||
<script> | |||||
import workItem from './workItem.vue' | |||||
export default { | |||||
components : { | |||||
workItem, | |||||
}, | |||||
props : { | |||||
height : { | |||||
default : 'auto' | |||||
}, | |||||
api : { | |||||
default : 'employeeQueryJobList' | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
queryParams: { | |||||
pageNo: 1, | |||||
pageSize: 10, | |||||
}, | |||||
total : 0, | |||||
list : [ | |||||
{ | |||||
title : 'Java工程师', | |||||
salaryLow : 9000, | |||||
salaryUp : 12000, | |||||
tab : '应届生、包吃', | |||||
workAddress : '长沙', | |||||
}, | |||||
{ | |||||
title : 'Java工程师', | |||||
salaryLow : 9000, | |||||
salaryUp : 12000, | |||||
tab : '应届生、包吃', | |||||
workAddress : '长沙', | |||||
}, | |||||
{ | |||||
title : 'Java工程师', | |||||
salaryLow : 9000, | |||||
salaryUp : 12000, | |||||
tab : '应届生、包吃', | |||||
workAddress : '长沙', | |||||
}, | |||||
{ | |||||
title : 'Java工程师', | |||||
salaryLow : 9000, | |||||
salaryUp : 12000, | |||||
tab : '应届生、包吃', | |||||
workAddress : '长沙', | |||||
}, | |||||
], | |||||
} | |||||
}, | |||||
methods: { | |||||
getData(){ | |||||
if(uni.getStorageSync('token')){ | |||||
this.queryParams.token = uni.getStorageSync('token') | |||||
} | |||||
this.$api(this.api, this.queryParams, res => { | |||||
if(res.code == 200){ | |||||
this.list = res.result.records || res.result | |||||
this.total = res.result.total || res.result.length | |||||
} | |||||
}) | |||||
}, | |||||
loadMoreData(){ | |||||
if(this.queryParams.pageSize <= this.list.length){ | |||||
this.queryParams.pageSize += 10 | |||||
this.getData() | |||||
} | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.workList { | |||||
&>view{ | |||||
margin: 20rpx; | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,123 @@ | |||||
<template> | |||||
<view class="work-item"> | |||||
<view class="top"> | |||||
<view class="title"> | |||||
{{ item.title }} | |||||
</view> | |||||
<view class="price" | |||||
v-if="item.salaryLow > 1000"> | |||||
<text> | |||||
{{ (item.salaryLow / 1000).toFixed(0) }} | |||||
</text> | |||||
<text | |||||
v-if="item.salaryUp"> | |||||
-{{ (item.salaryUp / 1000).toFixed(0) }} | |||||
</text> | |||||
K | |||||
</view> | |||||
<view class="price" v-else> | |||||
<text>{{ item.salaryLow }}</text> | |||||
<text | |||||
v-if="item.salaryUp">-{{ item.salaryUp }}</text> | |||||
</view> | |||||
</view> | |||||
<view class="tag-list"> | |||||
<view | |||||
v-for="(t, i) in item.tab && item.tab.split('、')" | |||||
:key="i"> | |||||
{{ t }} | |||||
</view> | |||||
</view> | |||||
<view class="bottom"> | |||||
<view class="address"> | |||||
<!-- <text>2.5km | 楚河汉区</text> --> | |||||
{{ item.workAddress }} | |||||
</view> | |||||
<view class="time"> | |||||
<!-- 09月23日 16:20 --> | |||||
{{ $dayjs(item.createTime).format('YYYY-MM-DD') }} | |||||
</view> | |||||
<view class="phone" | |||||
@click.stop="callPhone"> | |||||
<image src="/static/image/home/phone.png" mode=""></image> | |||||
联系老板 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
props : { | |||||
item : { | |||||
default : {} | |||||
} | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
callPhone(){ | |||||
uni.makePhoneCall({ | |||||
phoneNumber: this.item.phone, | |||||
success() { | |||||
console.log('安卓拨打成功'); | |||||
}, | |||||
fail() { | |||||
console.log('安卓拨打失败'); | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.work-item{ | |||||
background-color: #fff; | |||||
padding: 20rpx; | |||||
border-radius: 20rpx; | |||||
.top{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
font-weight: 900; | |||||
.title{ | |||||
} | |||||
.price{ | |||||
color: $uni-color; | |||||
} | |||||
} | |||||
.bottom{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: flex-end; | |||||
font-size: 24rpx; | |||||
.time{ | |||||
color: #999999; | |||||
} | |||||
.phone{ | |||||
background-color: rgba($uni-color, 0.2); | |||||
color: $uni-color; | |||||
padding: 8rpx 16rpx; | |||||
border-radius: 10rpx; | |||||
image{ | |||||
width: 20rpx; | |||||
height: 20rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.tag-list{ | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
} | |||||
.tag-list > view{ | |||||
margin: 10rpx; | |||||
padding: 10rpx; | |||||
background-color: #EFF2F1; | |||||
font-size: 24rpx; | |||||
border-radius: 10rpx; | |||||
} | |||||
</style> |
@ -0,0 +1,57 @@ | |||||
<template> | |||||
<uv-swipe-action> | |||||
<view | |||||
v-for="(item, index) in list" | |||||
class="item" | |||||
:key="index" | |||||
> | |||||
<uv-swipe-action-item | |||||
@click="e => clickSwipeAction(e, item)" | |||||
:options="options"> | |||||
<workItem :item="item"/> | |||||
</uv-swipe-action-item> | |||||
</view> | |||||
</uv-swipe-action> | |||||
</template> | |||||
<script> | |||||
import workItem from './workItem.vue' | |||||
export default { | |||||
components : { | |||||
workItem | |||||
}, | |||||
props : { | |||||
options : { | |||||
default : [ | |||||
{ | |||||
text: '删除', | |||||
style: { | |||||
backgroundColor: '#FA5A0A' | |||||
} | |||||
}, | |||||
], | |||||
}, | |||||
list : { | |||||
default : [] | |||||
}, | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
clickSwipeAction(e, item){ | |||||
this.$emit('clickSwipeAction', {e, item}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.item{ | |||||
margin: 20rpx; | |||||
border-radius: 20rpx; | |||||
overflow: hidden; | |||||
} | |||||
</style> |
@ -0,0 +1,22 @@ | |||||
<template> | |||||
<view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style> | |||||
</style> |
@ -0,0 +1,137 @@ | |||||
<template> | |||||
<view class="postDetail"> | |||||
<navbar leftClick @leftClick="$utils.navigateBack" title="动态详情" /> | |||||
<view class="swipe"> | |||||
<uv-swiper :list="item.image && | |||||
item.image.split(',')" indicator height="420rpx"></uv-swiper> | |||||
</view> | |||||
<view class="box"> | |||||
<view class="title"> | |||||
{{ item.title }} | |||||
</view> | |||||
<view class="createBy"> | |||||
<view class=""> | |||||
发布人:{{ item.userId }} | |||||
</view> | |||||
<view class=""> | |||||
发布时间:{{ $dayjs(item.createTime).format('YYYY-MM-DD') }} | |||||
</view> | |||||
</view> | |||||
<view class="content"> | |||||
<uv-parse :content="item.content"></uv-parse> | |||||
</view> | |||||
<!-- <view class="controls"> | |||||
<contentControls | |||||
:type="2" | |||||
:up="isThumbs_up" | |||||
:down="isThumbs_down" | |||||
@loadData="getData" | |||||
:detail="item"/> | |||||
</view> --> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
// import contentControls from '@/components/content/contentControls.vue' | |||||
export default { | |||||
components: { | |||||
// contentControls | |||||
}, | |||||
data() { | |||||
return { | |||||
list: [ | |||||
], | |||||
item: {}, | |||||
isThumbs_up: undefined,//是否点赞 | |||||
isThumbs_down: undefined,//是否踩 | |||||
id : 0, | |||||
} | |||||
}, | |||||
onLoad(options) { | |||||
// this.$route.query的参数 | |||||
console.log(options) | |||||
this.id = options.id | |||||
}, | |||||
onPullDownRefresh(){ | |||||
this.getData() | |||||
}, | |||||
onShow() { | |||||
this.getData() | |||||
}, | |||||
onShareAppMessage(res) { | |||||
// if (res.from === 'button') {// 来自页面内分享按钮 | |||||
// console.log(res.target) | |||||
// } | |||||
return { | |||||
title: this.item.title, | |||||
desc: this.item.content && this.item.content.slice(0, 30), | |||||
path: '/pages/publish/postDetail?id=' + this.id | |||||
} | |||||
}, | |||||
methods: { | |||||
getData() { | |||||
this.$api('indexGetTrendsDetail', { | |||||
id : this.id | |||||
}, res => { | |||||
uni.stopPullDownRefresh() | |||||
if (res.code == 200) { | |||||
this.item = res.result.details | |||||
this.isThumbs_up = res.result.isThumbs_up//是否点赞 | |||||
this.isThumbs_down = res.result.isThumbs_down//是否踩 | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style lang="scss" scoped> | |||||
.postDetail { | |||||
.box { | |||||
padding: 20rpx; | |||||
width: 100vw; | |||||
.title { | |||||
font-size: 34rpx; | |||||
font-weight: 600; | |||||
color: #000; | |||||
} | |||||
.createBy { | |||||
display: flex; | |||||
margin-top: auto; | |||||
margin-bottom: 10rpx; | |||||
font-size: 24rpx; | |||||
margin-top: 20rpx; | |||||
color: #555; | |||||
&>view { | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
padding-right: 20rpx; | |||||
} | |||||
} | |||||
.controls { | |||||
margin-top: 30rpx; | |||||
} | |||||
.content { | |||||
margin-top: 30rpx; | |||||
font-size: 28rpx; | |||||
} | |||||
} | |||||
} | |||||
</style> |
@ -0,0 +1,22 @@ | |||||
<template> | |||||
<view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style> | |||||
</style> |
@ -0,0 +1,224 @@ | |||||
<template> | |||||
<view class="page"> | |||||
<navbar title="工作详情" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="box"> | |||||
<view class="title"> | |||||
{{ detail.title }} | |||||
</view> | |||||
<view class="price"> | |||||
{{ detail.salaryLow }}-{{ detail.salaryUp }}元 | |||||
</view> | |||||
<view class="line"> | |||||
<!-- <view> | |||||
<image src="../static/work/address.png" mode=""></image> | |||||
{{ detail.workAge }} | |||||
</view> --> | |||||
<view> | |||||
<image src="../static/work/g.png" mode=""></image> | |||||
{{ detail.workAge }} | |||||
</view> | |||||
<view> | |||||
<image src="../static/work/x.png" mode=""></image> | |||||
{{ detail.qulification }} | |||||
</view> | |||||
</view> | |||||
<view class="line"> | |||||
该职位位于{{ $dayjs(detail.createTime).format('YYYY-MM-DD') }} | |||||
</view> | |||||
<!-- <view class="userHead"> | |||||
<userHead :headImage="detail.headImage" | |||||
:name="detail.name" :phoneCall="detail.phone"/> | |||||
</view> --> | |||||
<view class="address"> | |||||
<view class="title2"> | |||||
工作地址 | |||||
</view> | |||||
<!-- | |||||
深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东深圳罗湖区深圳市百货广场大厦罗湖区百货广场大厦东 | |||||
--> | |||||
<view class="line" | |||||
style="justify-content: space-between;"> | |||||
{{ detail.workAddress }} | |||||
<uv-icon | |||||
size="30rpx" | |||||
color="666" | |||||
name="arrow-right" | |||||
></uv-icon> | |||||
</view> | |||||
<view class="tag-list"> | |||||
<view> | |||||
距您14.6千米 | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="info"> | |||||
<view class="title2"> | |||||
<text>职位详情</text> | |||||
<view> | |||||
<uv-icon | |||||
size="30rpx" | |||||
color="666" | |||||
name="star" | |||||
></uv-icon> | |||||
收藏 | |||||
</view> | |||||
</view> | |||||
<view class="tag-list"> | |||||
<view v-for="(t, i) in detail.tab && detail.tab.split('、')"> | |||||
{{ t }} | |||||
</view> | |||||
</view> | |||||
<view | |||||
class="text" | |||||
v-html="text"> | |||||
</view> | |||||
<!-- <view | |||||
class="text"> | |||||
<uv-parse :content="detail.workDetail"></uv-parse> | |||||
</view> --> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
let text = `岗位要求 | |||||
1、全日制大专以上学历,艺术设计类相关专业; | |||||
2、两年以上平面、品牌、视觉设计等相关工作经验,能独立完成项目的设计工作,有 3C数码/个护健 康 类产品服务经验优先,有乙方工作经验佳; | |||||
3、具备一定的设计提案能力,能完整的呈现设计思路与创意,能清晰的表达设计逻辑与思考; | |||||
4、热爱设计,平面基本功扎实,拥有优良的审美与创意想法,对版式、色彩把控能力强;对工作富有责任心,具备团队沟通与协作能力; | |||||
5、精通 PS、AI、CDR 等平面设计软件,能独立完成日常平面设计工作内容,熟练使用 PPT/Keynote,能完成提案内容的材料美化工作。 | |||||
` | |||||
export default { | |||||
components : { | |||||
}, | |||||
data() { | |||||
return { | |||||
text : '', | |||||
id : 0, | |||||
detail : { | |||||
title : 'Java工程师', | |||||
salaryLow : 9000, | |||||
salaryUp : 12000, | |||||
tab : '应届生、包吃', | |||||
workAddress : '长沙', | |||||
}, | |||||
collectionFlag : false, | |||||
} | |||||
}, | |||||
onLoad({id}) { | |||||
this.id = id | |||||
}, | |||||
onShow() { | |||||
this.text = this.$utils.stringFormatHtml(text) | |||||
this.getData() | |||||
}, | |||||
methods: { | |||||
getData(){ | |||||
let data = { | |||||
jobId : this.id | |||||
} | |||||
if(uni.getStorageSync('token')){ | |||||
data.token = uni.getStorageSync('token') | |||||
} | |||||
this.$api('employeeQueryJobById', data, res => { | |||||
if(res.code == 200){ | |||||
this.detail = res.result.employJob | |||||
this.collectionFlag = res.result.collectionFlag | |||||
} | |||||
}) | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.page{ | |||||
background-color: #fff; | |||||
min-height: 100vh; | |||||
.box{ | |||||
padding: 30rpx; | |||||
.title{ | |||||
font-size: 34rpx; | |||||
font-weight: 900; | |||||
padding-bottom: 20rpx; | |||||
} | |||||
.title2{ | |||||
font-size: 28rpx; | |||||
font-weight: 900; | |||||
display: flex; | |||||
justify-content: space-between; | |||||
align-items: center; | |||||
view{ | |||||
display: flex; | |||||
align-items: center; | |||||
justify-content: center; | |||||
} | |||||
} | |||||
.price{ | |||||
font-size: 30rpx; | |||||
font-weight: 900; | |||||
color: $uni-color; | |||||
} | |||||
.line{ | |||||
display: flex; | |||||
font-size: 24rpx; | |||||
color: #666666; | |||||
margin-top: 30rpx; | |||||
image{ | |||||
width: 30rpx; | |||||
height: 30rpx; | |||||
} | |||||
&>view{ | |||||
margin-right: 50rpx; | |||||
display: flex; | |||||
justify-content: center; | |||||
align-items: center; | |||||
} | |||||
} | |||||
.userHead{ | |||||
padding: 50rpx 0; | |||||
border-bottom: 1px solid #00000011; | |||||
} | |||||
.address{ | |||||
padding: 30rpx 0; | |||||
.line{ | |||||
margin-top: 20rpx; | |||||
} | |||||
} | |||||
.info{ | |||||
.text{ | |||||
font-size: 24rpx; | |||||
color: #666666; | |||||
line-height: 44rpx; | |||||
} | |||||
} | |||||
} | |||||
} | |||||
.tag-list{ | |||||
display: flex; | |||||
flex-wrap: wrap; | |||||
} | |||||
.tag-list > view{ | |||||
margin: 10rpx; | |||||
padding: 10rpx; | |||||
background-color: #EFF2F1; | |||||
font-size: 24rpx; | |||||
border-radius: 10rpx; | |||||
} | |||||
</style> |
@ -0,0 +1,29 @@ | |||||
<template> | |||||
<view> | |||||
<navbar title="招聘列表" leftClick @leftClick="$utils.navigateBack" /> | |||||
<workList ref="workList"/> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
import workList from '../components/list/workList/index.vue' | |||||
export default { | |||||
components : { | |||||
workList, | |||||
}, | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
</style> |
@ -0,0 +1,22 @@ | |||||
<template> | |||||
<view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
methods: { | |||||
} | |||||
} | |||||
</script> | |||||
<style> | |||||
</style> |
@ -0,0 +1,216 @@ | |||||
<template> | |||||
<view> | |||||
<view style="width: 100vw; height: 553rpx;"> | |||||
<image style="width: 100vw; height: 553rpx;" | |||||
src="https://pic1.ajkimg.com/display/anjuke/ea5773-%E8%83%9C%E9%80%B8%E5%9C%B0%E4%BA%A7/3b5e900e0ed231e6154759c8c885b6cc-800x650.jpg?frame=1" | |||||
mode="scaleToFill" /> | |||||
</view> | |||||
<view | |||||
style="padding: 36rpx; background: #FFF; position: absolute; z-index: 1; width: calc(100vw - 72rpx); min-height: 780rpx; border-radius: 20rpx 20rpx 20rpx 20rpx;margin-top: -20rpx;"> | |||||
<view class="t0">2400元/月</view> | |||||
<view class="t1">整租·康卓新城 1室1卫</view> | |||||
<view class="t2">房源编号:HC42012205JC33V</view> | |||||
<view class="t2">今天10:33更新·浏览 168</view> | |||||
<view class="driver"></view> | |||||
<view class="flex-wrap xr"> | |||||
<view class="sb-w4 h70"> | |||||
<view class="font-a">南</view> | |||||
<view class="font-b">朝向</view> | |||||
</view> | |||||
<view class="sb-w4 h70"> | |||||
<view class="font-a">60</view> | |||||
<view class="font-b">面积</view> | |||||
</view> | |||||
<view class="sb-w4 h70"> | |||||
<view class="font-a">32层/32层</view> | |||||
<view class="font-b">楼层</view> | |||||
</view> | |||||
<view class="sb-w4 h70"> | |||||
<view class="font-a">精装</view> | |||||
<view class="font-b">装修</view> | |||||
</view> | |||||
</view> | |||||
<view class="driver"></view> | |||||
<view class="line64"> | |||||
<view class="flex-sb"> | |||||
<view class="w50"> | |||||
<span class="font-b">付款:</span> | |||||
<span class="font-c">季付</span> | |||||
</view> | |||||
<view class="w50"> | |||||
<span class="font-b">电梯:</span> | |||||
<span class="font-c">有</span> | |||||
</view> | |||||
</view> | |||||
<view class="flex-sb"> | |||||
<view class="w50"> | |||||
<span class="font-b">交付:</span> | |||||
<span class="font-c">即时交付</span> | |||||
</view> | |||||
<view class="w50"> | |||||
<span class="font-b">看房:</span> | |||||
<span class="font-c">随时可看</span> | |||||
</view> | |||||
</view> | |||||
<view class="flex-sb"> | |||||
<view> | |||||
<span class="font-b">投诉:</span> | |||||
<span class="font-c"> | |||||
<uni-icons type="phone" size="12" /> | |||||
199 1888 8888 | |||||
</span> | |||||
</view> | |||||
</view> | |||||
<view class="flex-sb"> | |||||
<view> | |||||
<span class="font-b">小区:</span> | |||||
<span class="font-c"> | |||||
<uni-icons type="paperplane" size="12" /> | |||||
长岸江边新民小区 | |||||
</span> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
<view class="b-fiexd flex" style="height: 98rpx; z-index: 2;"> | |||||
<view style="padding-left: 20rpx;"> | |||||
<image src="/static/logo.png" class="radius80 test" /> | |||||
</view> | |||||
<view style="padding: 12rpx 20rpx; width: 280rpx;"> | |||||
<view class="font-d">廖吃翔</view> | |||||
<view class="font-b">新城国际花都</view> | |||||
</view> | |||||
<view style="padding: 20rpx" @click="clickShare()"> | |||||
<uni-icons type="redo"></uni-icons> | |||||
</view> | |||||
<view class="d-btn" @click="clickService"> | |||||
<span>打电话</span> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
} | |||||
}, | |||||
onShow() { | |||||
}, | |||||
methods: { | |||||
clickShare() { | |||||
uni.share({ | |||||
provider: 'weixin', | |||||
type: 5, | |||||
success: (res) => { | |||||
console.log(res); | |||||
} | |||||
}); | |||||
}, | |||||
clickService() { | |||||
uni.makePhoneCall({ | |||||
phoneNumber: '10086', | |||||
}); | |||||
}, | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.t0 { | |||||
font-weight: 1000; | |||||
font-size: 32rpx; | |||||
color: #FF0000; | |||||
line-height: 64rpx; | |||||
} | |||||
.t1 { | |||||
font-weight: bold; | |||||
font-size: 36rpx; | |||||
color: #3D3D3D; | |||||
line-height: 64rpx; | |||||
} | |||||
.t2 { | |||||
font-weight: 400; | |||||
font-size: 24rpx; | |||||
color: #ADADAD; | |||||
line-height: 42rpx; | |||||
} | |||||
.driver { | |||||
width: 100%; | |||||
height: 2rpx; | |||||
background-color: #D5D5D5; | |||||
opacity: .4; | |||||
margin: 20rpx auto; | |||||
} | |||||
.xr { | |||||
padding: 10rpx 0 20rpx; | |||||
} | |||||
.font-a { | |||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||||
font-weight: 400; | |||||
font-size: 30rpx; | |||||
color: #3D3D3D; | |||||
line-height: 46rpx; | |||||
text-align: center; | |||||
} | |||||
.font-b { | |||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||||
font-weight: 400; | |||||
font-size: 24rpx; | |||||
color: #ADADAD; | |||||
line-height: 46rpx; | |||||
} | |||||
.font-d { | |||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||||
font-weight: 800; | |||||
font-size: 28rpx; | |||||
color: #333; | |||||
line-height: 32rpx; | |||||
} | |||||
.font-c { | |||||
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; | |||||
font-weight: 400; | |||||
font-size: 24rpx; | |||||
color: #333; | |||||
line-height: 46rpx; | |||||
} | |||||
.d-btn { | |||||
width: 200rpx; | |||||
height: 72rpx; | |||||
line-height: 72rpx; | |||||
background: #4255E4; | |||||
border-radius: 36rpx 36rpx 36rpx 36rpx; | |||||
font-weight: 400; | |||||
font-size: 28rpx; | |||||
color: #FFFFFF; | |||||
text-align: center; | |||||
margin: 12rpx; | |||||
} | |||||
</style> |
@ -0,0 +1,187 @@ | |||||
<template> | |||||
<view> | |||||
<navbar title="租房列表" leftClick @leftClick="$utils.navigateBack" /> | |||||
<view class="flex" | |||||
style="padding: 30rpx;"> | |||||
<!-- <view class="flex area"> | |||||
<view>永州</view> | |||||
<uv-icon name="down" color="#333" size="30rpx" /> | |||||
</view> | |||||
<view class="s-div b-relative"> | |||||
</view> --> | |||||
<uv-search | |||||
bgColor="#fff" | |||||
@search="getData" | |||||
@custom="getData" | |||||
searchIconSize="30rpx" | |||||
placeholder="请输入搜索关键字..." | |||||
v-model="queryParams.title"></uv-search> | |||||
</view> | |||||
<view class="flex-wrap rx"> | |||||
<view class="sb-w3"> | |||||
<image src="/static/image/home/1.png" /> | |||||
<view>居住</view> | |||||
</view> | |||||
<view class="sb-w3"> | |||||
<image src="/static/2.png" /> | |||||
<view>办公</view> | |||||
</view> | |||||
<view class="sb-w3"> | |||||
<image src="/static/3.png" /> | |||||
<view>做生意</view> | |||||
</view> | |||||
</view> | |||||
<view class="container"> | |||||
<view class="re-empty font-c" style="display: none;">暂无数据</view> | |||||
<view class="card-item flex-sb" v-for="i in 10" @click="clickDetail()"> | |||||
<view> | |||||
<image class="imx" src="/static/R01.png" /> | |||||
</view> | |||||
<view style="width: calc(100% - 330rpx);"> | |||||
<view class="t1">整租·康卓新城</view> | |||||
<view class="t2">1室1卫 | 60m2 | 南</view> | |||||
<view class="flex"> | |||||
<view class="t3">优选</view> | |||||
<view class="t3">低价</view> | |||||
</view> | |||||
<view class="t4">2400元/月</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</view> | |||||
</template> | |||||
<script> | |||||
export default { | |||||
data() { | |||||
return { | |||||
keyword : '', | |||||
} | |||||
}, | |||||
methods: { | |||||
clickDetail(){ | |||||
uni.navigateTo({ | |||||
url: '/pages_order/renting/rentingDetail' | |||||
}) | |||||
} | |||||
} | |||||
} | |||||
</script> | |||||
<style scoped lang="scss"> | |||||
.container { | |||||
padding: 0 30rpx; | |||||
} | |||||
.area { | |||||
width: 154rpx; | |||||
line-height: 78rpx; | |||||
margin: 0 20rpx; | |||||
} | |||||
.s-div { | |||||
margin: 0 10rpx; | |||||
} | |||||
.seacher { | |||||
width: 486rpx; | |||||
height: 78rpx; | |||||
background: #F3F3F3; | |||||
border-radius: 44rpx 44rpx 44rpx 44rpx; | |||||
font-weight: 400; | |||||
font-size: 28rpx; | |||||
text-align: left; | |||||
font-style: normal; | |||||
text-transform: none; | |||||
padding: 0 0 0 80rpx; | |||||
} | |||||
.seacher-placeholder { | |||||
color: #BFBFBF; | |||||
} | |||||
.icon { | |||||
position: absolute; | |||||
left: 30rpx; | |||||
top: 18rpx; | |||||
} | |||||
.rx { | |||||
height: 214rpx; | |||||
width: 100%; | |||||
padding: 40rpx 0 0; | |||||
} | |||||
.sb-w3 image { | |||||
width: 100rpx; | |||||
height: 100rpx; | |||||
} | |||||
.sb-w3 view { | |||||
line-height: 52rpx; | |||||
font-weight: 400; | |||||
font-size: 28rpx; | |||||
color: #3D3D3D; | |||||
} | |||||
.card-item { | |||||
width: 690rpx; | |||||
height: 250rpx; | |||||
background: #FFFFFF; | |||||
box-shadow: 0rpx 3rpx 6rpx 1rpx rgba(0, 0, 0, 0.16); | |||||
border-radius: 8rpx 8rpx 8rpx 8rpx; | |||||
margin-bottom: 36rpx; | |||||
} | |||||
.imx { | |||||
width: 300rpx; | |||||
height: 250rpx; | |||||
} | |||||
.t1 { | |||||
font-weight: 400; | |||||
font-size: 32rpx; | |||||
color: #3D3D3D; | |||||
line-height: 80rpx; | |||||
text-align: left; | |||||
} | |||||
.t2 { | |||||
font-weight: 400; | |||||
font-size: 20rpx; | |||||
color: #656565; | |||||
line-height: 20rpx; | |||||
text-align: left; | |||||
} | |||||
.t3 { | |||||
font-weight: 400; | |||||
font-size: 20rpx; | |||||
line-height: 32rpx; | |||||
color: #00B90C; | |||||
text-align: center; | |||||
height: 32rpx; | |||||
width: 60rpx; | |||||
margin: 15rpx 10rpx 0 0; | |||||
background: rgba(121, 255, 179, 0.21); | |||||
border-radius: 4rpx 4rpx 4rpx 4rpx; | |||||
} | |||||
.t4 { | |||||
font-weight: 400; | |||||
font-size: 32rpx; | |||||
color: #FF0000; | |||||
line-height: 100rpx; | |||||
text-align: left; | |||||
} | |||||
</style> |
@ -0,0 +1,616 @@ | |||||
:root { | |||||
font-family: PingFang SC; | |||||
--re-color: #F40000; | |||||
--re-backage: #F6F6F6; | |||||
} | |||||
.re-fcolor{ | |||||
color: #F40000 !important; | |||||
} | |||||
.test{ | |||||
border: 1rpx dashed red; | |||||
} | |||||
.re-card{ | |||||
background-color: #FFFFFF; | |||||
border-radius: 20rpx; | |||||
width: 690rpx; | |||||
min-height: 120rpx; | |||||
margin: 0 calc(50vw - 690rpx / 2); | |||||
margin-bottom: 30rpx; | |||||
position: relative; | |||||
} | |||||
.re-card-p32{ | |||||
background-color: #FFFFFF; | |||||
border-radius: 20rpx; | |||||
width: calc(690rpx - 64rpx); | |||||
min-height: 120rpx; | |||||
margin: 0 calc(50vw - 690rpx / 2); | |||||
margin-bottom: 30rpx; | |||||
padding: 32rpx; | |||||
position: relative; | |||||
} | |||||
.re-from-line{ | |||||
margin-bottom: 28rpx; | |||||
} | |||||
.re-from-label{ | |||||
font-size: 28rpx; | |||||
font-weight: normal; | |||||
letter-spacing: 0px; | |||||
margin-bottom: 10rpx; | |||||
color: #1c1c1c; | |||||
} | |||||
.re-from-input{ | |||||
box-sizing: border-box; | |||||
width: 630rpx; | |||||
height: 70rpx; | |||||
line-height: 70rpx; | |||||
border-radius: 10rpx; | |||||
padding-left: 70rpx; | |||||
border: 2rpx solid #CCCCCC; | |||||
font-size: 28rpx; | |||||
font-weight: normal; | |||||
letter-spacing: 0px; | |||||
color: #000; | |||||
} | |||||
.re-card-textarea{ | |||||
width: 570rpx; | |||||
height: 152rpx; | |||||
border-radius: 8rpx; | |||||
padding: 20rpx; | |||||
background: #EEEEEE; | |||||
font-size: 26rpx; | |||||
line-height: normal; | |||||
letter-spacing: 0em; | |||||
color: #0d0d0d; | |||||
} | |||||
.re-from-icon { | |||||
position: absolute; | |||||
left: 26rpx; | |||||
top: 18rpx; | |||||
width: 32rpx; | |||||
height: 32rpx; | |||||
} | |||||
.re-card-context{ | |||||
font-size: 24rpx; | |||||
font-weight: normal; | |||||
line-height: normal; | |||||
letter-spacing: 0em; | |||||
color: #9E9E9E; | |||||
line-height: 36rpx; | |||||
} | |||||
/* | |||||
.re-card-context span { | |||||
color: #F40000; | |||||
} | |||||
*/ | |||||
.re-card-context label { | |||||
color: #F40000; | |||||
} | |||||
.re-card-show{ | |||||
color: #9E9E9E; | |||||
font-size: 24rpx; | |||||
font-weight: normal; | |||||
line-height: normal; | |||||
letter-spacing: 0em; | |||||
} | |||||
.re-card-select{ | |||||
height: 72rpx; | |||||
line-height: 72rpx; | |||||
font-size: 28rpx; | |||||
color: #333333;; | |||||
} | |||||
.re-end-pand{ | |||||
width: 100vw; | |||||
height: 88rpx; | |||||
opacity: 1; | |||||
background: #FFFFFF; | |||||
box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.2); | |||||
padding: 30rpx 0; | |||||
} | |||||
.re-end-pand button{ | |||||
width: 620rpx; | |||||
height: 88rpx; | |||||
line-height: 88rpx; | |||||
border-radius: 10rpx; | |||||
background: #F40000; | |||||
color: #FFF; | |||||
text-align: center; | |||||
margin: 0 auto; | |||||
font-size: 30rpx; | |||||
font-weight: 400; | |||||
transition: all 0.2s ease-in-out; | |||||
} | |||||
.re-end-pand button:active{ | |||||
transform: translateY(2rpx) translateX(1rpx); | |||||
} | |||||
.re-item{ | |||||
width: calc(100% - 64rpx); | |||||
height: 120rpx; | |||||
line-height: 120rpx; | |||||
background-color: #FFF; | |||||
margin: 0 32rpx; | |||||
font-size: 32rpx; | |||||
color: #152748; | |||||
} | |||||
.re-empty { | |||||
position: absolute; | |||||
color: #888; | |||||
top: 50%; | |||||
text-align: center; | |||||
width: 100%; | |||||
} | |||||
/* 定制机型-微信单选框 */ | |||||
radio .wx-radio-input{ | |||||
border-color: #000000; | |||||
width: 32rpx !important; | |||||
height: 32rpx !important; | |||||
} | |||||
::v-deep .wx-radio-input.wx-radio-input-checked { | |||||
background-color: #F40000 !important; | |||||
border-color: #F40000 !important; | |||||
background-clip: content-box !important; | |||||
box-sizing: content-box; | |||||
} | |||||
::v-deep .wx-radio-input.wx-radio-input-checked::before { | |||||
/* transform: scale(0.7); */ | |||||
} | |||||
/* radio[checked]{ | |||||
background-color: #F40000 !important; | |||||
border-color: #F40000 !important; | |||||
} */ | |||||
.font-title{ | |||||
font-size: 36rpx; | |||||
font-weight: 500; | |||||
line-height: 36rpx; | |||||
letter-spacing: 0; | |||||
color: #333333; | |||||
} | |||||
.font-subtitle{ | |||||
font-size: 32rpx; | |||||
font-weight: 500; | |||||
line-height: 36rpx; | |||||
letter-spacing: 0px; | |||||
color: #9E9E9E; | |||||
} | |||||
.font-botton{ | |||||
font-size: 36rpx; | |||||
font-weight: bolder; | |||||
line-height: 36rpx; | |||||
color: #F40000; | |||||
} | |||||
.font-justify{ | |||||
text-align: justify; | |||||
} | |||||
.re-radio{ | |||||
transform: scale(0.7); | |||||
margin-left:-48rpx | |||||
} | |||||
.re-width2{ | |||||
width:50%; | |||||
} | |||||
.re-width3{ | |||||
width:33.33%; | |||||
} | |||||
.uni-checkbox-input-checked, | |||||
.uni-radio-input-checked, | |||||
.uni-switch-input-checked { | |||||
background-color:var(--re-color) !important; | |||||
border-color: var(--re-color) !important; | |||||
} | |||||
uni-checkbox:not([disabled]) .uni-checkbox-input:hover { | |||||
border-color: var(--re-color); | |||||
} | |||||
.uni-radio-wrapper, | |||||
.uni-radio-input{ | |||||
margin: 0; | |||||
} | |||||
.wx-checkbox-input-checked, | |||||
.wx-radio-input-checked, | |||||
.wx-switch-input-checked { | |||||
background-color: var(--re-color) !important; | |||||
border-color: var(--re-color) !important; | |||||
} | |||||
.wx-checkbox-input, | |||||
.wx-radio-input, | |||||
.wx-switch-input { | |||||
border-color: var(--re-color) !important; | |||||
} | |||||
.font-c{ | |||||
color: #ccc; | |||||
font-size: 26rpx; | |||||
} | |||||
.w50{ | |||||
width: 50%; | |||||
} | |||||
.h375{ | |||||
width: 100%; | |||||
height: 375rpx; | |||||
} | |||||
.h238{ | |||||
width: 238rpx; | |||||
height: 238rpx; | |||||
margin: auto; | |||||
} | |||||
.h220{ | |||||
width: 100%; | |||||
height: 220rpx; | |||||
} | |||||
.h120 { | |||||
width: 100%; | |||||
height: 120rpx; | |||||
line-height: 120rpx; | |||||
} | |||||
.h70{ | |||||
width: 100%; | |||||
height: 70rpx; | |||||
line-height: 70rpx; | |||||
} | |||||
.h22{ | |||||
width: 100%; | |||||
height: 22rpx; | |||||
line-height: 22rpx; | |||||
} | |||||
.h32{ | |||||
width: 100%; | |||||
height: 32rpx; | |||||
line-height: 32rpx; | |||||
} | |||||
.h44{ | |||||
width: 100%; | |||||
height: 44rpx; | |||||
line-height: 44rpx; | |||||
} | |||||
.h88{ | |||||
width: 100%; | |||||
height: 88rpx; | |||||
line-height: 88rpx; | |||||
} | |||||
.mb120{ | |||||
margin-bottom: 120rpx; | |||||
} | |||||
.mb88{ | |||||
margin-bottom: 88rpx; | |||||
} | |||||
.mb80{ | |||||
margin-bottom: 80rpx; | |||||
} | |||||
.mb40{ | |||||
margin-bottom: 40rpx; | |||||
} | |||||
.mb22{ | |||||
margin-bottom: 22rpx; | |||||
} | |||||
.mb20{ | |||||
margin-bottom: 20rpx; | |||||
} | |||||
.mt20{ | |||||
margin-top: 20rpx; | |||||
} | |||||
.mt22{ | |||||
margin-top: 22rpx; | |||||
} | |||||
.mt32{ | |||||
margin-top: 32rpx; | |||||
} | |||||
.mt56{ | |||||
margin-top: 56rpx; | |||||
} | |||||
.mt100{ | |||||
margin-top: 100rpx; | |||||
} | |||||
.mt40{ | |||||
margin-top: 40rpx; | |||||
} | |||||
.m120{ | |||||
margin-top: 120rpx; | |||||
margin-bottom: 120rpx; | |||||
} | |||||
.mr5{ | |||||
margin-right: 5rpx; | |||||
} | |||||
.mr10{ | |||||
margin-right: 10rpx; | |||||
} | |||||
.mr20{ | |||||
margin-right: 20rpx; | |||||
} | |||||
.m5{ | |||||
margin-top: 5rpx; | |||||
margin-bottom: 5rpx; | |||||
} | |||||
.m10{ | |||||
margin-top: 10rpx; | |||||
margin-bottom: 10rpx; | |||||
} | |||||
.m20{ | |||||
margin-top: 20rpx; | |||||
margin-bottom: 20rpx; | |||||
} | |||||
.m36{ | |||||
margin-top: 36rpx; | |||||
margin-bottom: 36rpx; | |||||
} | |||||
.pt10{ | |||||
padding-top: 10rpx; | |||||
} | |||||
.pb10{ | |||||
padding-bottom: 10rpx; | |||||
} | |||||
.pb20{ | |||||
padding-bottom: 20rpx; | |||||
} | |||||
.pb120{ | |||||
padding-bottom: 120rpx; | |||||
} | |||||
.m10auto{ | |||||
margin: 10 auto; | |||||
} | |||||
.m20auto{ | |||||
margin: 20 auto; | |||||
} | |||||
.flex{ | |||||
display: flex; | |||||
} | |||||
.flex-sb{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
} | |||||
.flex-wrap{ | |||||
display: flex; | |||||
justify-content: space-between; | |||||
flex-wrap: wrap; | |||||
} | |||||
.flex-reverse{ | |||||
display: flex; | |||||
flex-direction: row-reverse; | |||||
} | |||||
.sb-w2{ | |||||
width: calc(100% / 2); | |||||
text-align: center; | |||||
} | |||||
.sb-w3{ | |||||
width: calc(100% / 3); | |||||
text-align: center; | |||||
} | |||||
.sb-w4{ | |||||
width: calc(100% / 4); | |||||
text-align: center; | |||||
} | |||||
.sb-w5{ | |||||
width: calc(100% / 5); | |||||
text-align: center; | |||||
} | |||||
.sb-w8{ | |||||
width: calc(100% / 8); | |||||
text-align: center; | |||||
} | |||||
.line36{ | |||||
line-height: 36rpx; | |||||
font-size: 30rpx; | |||||
} | |||||
.line42{ | |||||
line-height: 42rpx; | |||||
font-size: 32rpx; | |||||
} | |||||
.line64{ | |||||
line-height: 64rpx; | |||||
font-size: 36rpx; | |||||
} | |||||
.line72{ | |||||
line-height: 72rpx; | |||||
font-size: 42rpx; | |||||
} | |||||
.bottom-line{ | |||||
border-bottom: 2rpx solid #eee; | |||||
} | |||||
.bottom-line:last-child{ | |||||
border-bottom: none; | |||||
} | |||||
.square20{ | |||||
width: 20rpx; | |||||
height: 20rpx; | |||||
} | |||||
.square32{ | |||||
width: 32rpx; | |||||
height: 32rpx; | |||||
} | |||||
.square40{ | |||||
width: 40rpx; | |||||
height: 40rpx; | |||||
} | |||||
.square80{ | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
} | |||||
.square120{ | |||||
width: 120rpx; | |||||
height: 120rpx; | |||||
} | |||||
.square256{ | |||||
width: 256rpx; | |||||
height: 256rpx; | |||||
} | |||||
.square375{ | |||||
width: 375rpx; | |||||
height: 375rpx; | |||||
} | |||||
.garden{ | |||||
overflow: hidden; | |||||
border-radius: 50%; | |||||
box-shadow: 0 10rpx 20rpx rgba(0, 0, 0, 0.4); | |||||
} | |||||
.b-fiexd{ | |||||
min-height: 120rpx; | |||||
width: calc(100vw - 40rpx); | |||||
padding: 0 20rpx; | |||||
position: fixed; | |||||
left: 0; | |||||
bottom: 0; | |||||
box-shadow: -20rpx 10rpx 10rpx #000; | |||||
background-color: #ffffff; | |||||
} | |||||
.b-relative{ | |||||
position: relative; | |||||
} | |||||
.b-button{ | |||||
background-color: 10rpx; | |||||
height:72rpx; | |||||
line-height: 72rpx; | |||||
text-align:center; | |||||
color: #ffffff; | |||||
width: 376rpx; | |||||
background-color: #fe8a00; | |||||
border-radius: 10rpx; | |||||
margin: 24rpx auto; | |||||
} | |||||
/** | |||||
* 滑动定位 | |||||
*/ | |||||
.bg-white{ | |||||
background-color: white; | |||||
} | |||||
.box-shadow-gray{ | |||||
box-shadow: #ccc 0 0rpx 40rpx 0.1rpx; | |||||
} | |||||
.box-shadow-light{ | |||||
box-shadow: #ccc 0 1rpx 8rpx; | |||||
} | |||||
.sticky{ | |||||
position: -webkit-sticky; | |||||
position: sticky; | |||||
top: 0; | |||||
z-index: 100; | |||||
transition: background-color 0.3s; | |||||
} | |||||
/** | |||||
* 模拟药丸 | |||||
*/ | |||||
.back-feixd { | |||||
background-color: #fff8ef; | |||||
border: 1rpx solid #dbc9ba; | |||||
border-radius: 50%; | |||||
width: 60rpx; | |||||
height: 60rpx; | |||||
position: fixed; | |||||
top: 100rpx; | |||||
left: 12rpx; | |||||
z-index: 101; | |||||
line-height: 60rpx; | |||||
text-align: center; | |||||
opacity: .7; | |||||
} | |||||
/** | |||||
* 搜索 | |||||
*/ | |||||
.s-input { | |||||
padding: 16rpx 40rpx; | |||||
margin: 0 20rpx; | |||||
width: 590rpx; | |||||
border-radius: 40rpx; | |||||
height: 40rpx; | |||||
line-height: 40rpx; | |||||
border: 1rpx solid #ccc; | |||||
color: #0d0d0d; | |||||
font-size: 28rpx; | |||||
} | |||||
.s-input-line { | |||||
height: 72rpx; | |||||
line-height: 72rpx; | |||||
margin: 0 78rpx; | |||||
color: #666; | |||||
font-size: 28rpx; | |||||
} | |||||
/** | |||||
* 超出隐藏 | |||||
*/ | |||||
.ellipsis { | |||||
overflow: hidden; | |||||
white-space: nowrap; | |||||
text-overflow: ellipsis; | |||||
} | |||||
/** | |||||
* 圆形图片 | |||||
*/ | |||||
.radius80{ | |||||
width: 80rpx; | |||||
height: 80rpx; | |||||
border-radius: 50%; | |||||
} | |||||
/** | |||||
* 隐藏滚动条 | |||||
*/ | |||||
/* env(safe-area-inset-top) */ | |||||
.driver{ | |||||
width: 100%; | |||||
height: 2rpx; | |||||
background-color: #D5D5D5; | |||||
opacity: .4; | |||||
margin: 20rpx auto; | |||||
} |