|
|
- <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>
-
|