兼兼街租房小程序
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.
 
 
 

299 lines
5.6 KiB

<template>
<view class="container">
<view class="ant-nav-compat"/>
<view class="ant-nav-container">
<view class="ant-nav-back" @click="goback"/>
<view class="ant-nav-title">发布文章</view>
</view>
<view class="ant-from-container">
<view class="ant-from">
<view class="from-item">
<view class="from-label">话题</view>
<view class="from-line">
<view class="from-view">有房</view>
<view class="from-view">无房</view>
<view class="from-view">地铁</view>
</view>
<view class="from-line">
<view class="from-view">合租</view>
<view class="from-view">爱干净</view>
<view class="from-view">朝南</view>
</view>
<view class="from-line">
<view class="from-view">智能家居</view>
</view>
</view>
<view class="from-item">
<view class="from-label">图片</view>
<view class="form-upload"></view>
<view class="from-tips">
*最多可以上传9张不超过3Mb为最佳必须包含卧室与卫生间不含截图或水印合租单间或1室整请不要上传多个不同卧室照片
</view>
</view>
<view class="from-item">
<view class="from-label">内容</view>
<view class="from-textarea">
<textarea placeholder="要说点什么嘛?"></textarea>
</view>
</view>
<view class="from-item">
<view class="from-label">位置</view>
<view class="from-address">
</view>
</view>
</view>
<view class="ant-from-submit" @click="next">发布</view>
<view class="ant-from-submit-tip">
*仅支持个人发布房源信息公寓或公司等经营性组织请联系<span>平台客服</span>
</view>
</view>
</view>
</template>
<style lang="scss">
.form-upload{
position: relative;
height: 168rpx;
width: 168rpx;
border-radius: 8rpx;
border: 2rpx solid #ccc;
&::after{
content: "";
width: 80rpx;
height: 4rpx;
border-radius: 2rpx;
background: #ccc;
position: absolute;
top: 80rpx;
left: 40rpx;
}
&::before{
content: "";
width: 4rpx;
height: 80rpx;
border-radius: 2rpx;
background: #ccc;
position: absolute;
top: 40rpx;
left: 80rpx;
}
}
.container{
background-color: #fff !important;
.ant-nav-compat{
content: "";
background-color: #F5F5F5;
height: 88rpx;
width: 100vw;
}
.ant-nav-container{
height: 88rpx;
width: 100vw;
line-height: 88rpx;
background-color: #F5F5F5;
text-align: center;
vertical-align: top;
position: relative;
color: #333;
font-size: 36rpx;
font-weight: bold;
letter-spacing: -0.1rpx;
.ant-nav-back {
content: "";
position: absolute;
top: 35rpx;
left: 30rpx;
width: 18rpx;
height: 18rpx;
border-bottom: 3rpx solid #333;
border-right: 3rpx solid #333;
transform: rotate(135deg);
}
}
.ant-from-container{
padding: 40rpx 30rpx;
.from-item{
margin-bottom: 50rpx;
.from-tips{
font-size: 26rpx;
font-weight: 400;
letter-spacing: 0rpx;
line-height: 38rpx;
color: #b2b2b2;
margin-bottom: 30rpx;
}
.from-label{
font-weight: 400;
font-size: 32rpx;
line-height: 40rpx;
color: #000;
letter-spacing: 0rpx;
line-height: 62rpx;
}
.from-line{
display: flex;
justify-content: space-between;
margin: 15rpx 0;
.from-view{
min-width: 208rpx;
min-height: 88rpx;
line-height: 88rpx;
background: #f3f7fa;
text-align: center;
color: #333;
font-weight: 500;
font-size: 26rpx;
}
}
}
.ant-from-submit{
width: 100%;
height: 92rpx;
line-height: 92rpx;
background-color: #00b2ff;
border-radius: 8rpx;
color: #fff;
text-align: center;
font-size: 36rpx;
}
.from-textarea{
background: #f4f4f4;
border-radius: 8rpx;
padding: 30rpx;
min-height: 176rpx;
color: #666;
line-height: 37rpx;
font-size: 28rpx;
font-weight: 400;
}
.from-address{
background: #f4f4f4;
border-radius: 8rpx;
padding: 30rpx;
height: 376rpx;
background: url('https://img.js.design/assets/img/6229c52ff89eeabd92fe8663.png');
background-size: cover;
position: relative;
}
.from-address::after{
position: absolute;
background: #FF9954;
height: 108rpx;
height: 108rpx;
opacity: .6;
border: 2rpx solid #ff9954;
left: 238rpx;
top: 139rpx
}
.ant-from-submit-tip{
width: calc(100vw - 90rpx);
padding: 30rpx;
color: #999;
font-size: 26rpx;
font-weight: 400;
line-height: 36rpx;
letter-spacing: 0rpx;
span{
color: #00b2ff;
text-decoration: underline;
}
}
}
.form-lentx{
padding: 30rpx 40rpx;
display: flex;
.me-icon{
width: 52rpx;
height: 52rpx;
border: 1rpx dashed #ccc;
border-radius: 12rpx;
margin: 20rpx 30rpx 0 0;
}
.form-text{
width: 160rpx;
line-height: 40rpx;
text-align: left;
.head{
font-size: 26rpx;
color: #333;
font-weight: 500;
}
.body{
line-height: 28rpx;
font-size: 20rpx;
color: #999;
font-weight: 400;
}
}
}
}
</style>
<script>
export default {
data() {
return {
show: false,
}
},
onReachBottom() {
console.log("reach bottom")
},
methods: {
next: function(){
},
goback: function(){
uni.switchTab({
url:"/pages/index/icone"
})
}
}
}
</script>