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

  1. <template>
  2. <view class="container">
  3. <view class="ant-nav-compat"/>
  4. <view class="ant-nav-container">
  5. <view class="ant-nav-back" @click="goback"/>
  6. <view class="ant-nav-title">发布文章</view>
  7. </view>
  8. <view class="ant-from-container">
  9. <view class="ant-from">
  10. <view class="from-item">
  11. <view class="from-label">话题</view>
  12. <view class="from-line">
  13. <view class="from-view">有房</view>
  14. <view class="from-view">无房</view>
  15. <view class="from-view">地铁</view>
  16. </view>
  17. <view class="from-line">
  18. <view class="from-view">合租</view>
  19. <view class="from-view">爱干净</view>
  20. <view class="from-view">朝南</view>
  21. </view>
  22. <view class="from-line">
  23. <view class="from-view">智能家居</view>
  24. </view>
  25. </view>
  26. <view class="from-item">
  27. <view class="from-label">图片</view>
  28. <view class="form-upload"></view>
  29. <view class="from-tips">
  30. *最多可以上传9张不超过3Mb为最佳必须包含卧室与卫生间不含截图或水印合租单间或1室整请不要上传多个不同卧室照片
  31. </view>
  32. </view>
  33. <view class="from-item">
  34. <view class="from-label">内容</view>
  35. <view class="from-textarea">
  36. <textarea placeholder="要说点什么嘛?"></textarea>
  37. </view>
  38. </view>
  39. <view class="from-item">
  40. <view class="from-label">位置</view>
  41. <view class="from-address">
  42. </view>
  43. </view>
  44. </view>
  45. <view class="ant-from-submit" @click="next">发布</view>
  46. <view class="ant-from-submit-tip">
  47. *仅支持个人发布房源信息公寓或公司等经营性组织请联系<span>平台客服</span>
  48. </view>
  49. </view>
  50. </view>
  51. </template>
  52. <style lang="scss">
  53. .form-upload{
  54. position: relative;
  55. height: 168rpx;
  56. width: 168rpx;
  57. border-radius: 8rpx;
  58. border: 2rpx solid #ccc;
  59. &::after{
  60. content: "";
  61. width: 80rpx;
  62. height: 4rpx;
  63. border-radius: 2rpx;
  64. background: #ccc;
  65. position: absolute;
  66. top: 80rpx;
  67. left: 40rpx;
  68. }
  69. &::before{
  70. content: "";
  71. width: 4rpx;
  72. height: 80rpx;
  73. border-radius: 2rpx;
  74. background: #ccc;
  75. position: absolute;
  76. top: 40rpx;
  77. left: 80rpx;
  78. }
  79. }
  80. .container{
  81. background-color: #fff !important;
  82. .ant-nav-compat{
  83. content: "";
  84. background-color: #F5F5F5;
  85. height: 88rpx;
  86. width: 100vw;
  87. }
  88. .ant-nav-container{
  89. height: 88rpx;
  90. width: 100vw;
  91. line-height: 88rpx;
  92. background-color: #F5F5F5;
  93. text-align: center;
  94. vertical-align: top;
  95. position: relative;
  96. color: #333;
  97. font-size: 36rpx;
  98. font-weight: bold;
  99. letter-spacing: -0.1rpx;
  100. .ant-nav-back {
  101. content: "";
  102. position: absolute;
  103. top: 35rpx;
  104. left: 30rpx;
  105. width: 18rpx;
  106. height: 18rpx;
  107. border-bottom: 3rpx solid #333;
  108. border-right: 3rpx solid #333;
  109. transform: rotate(135deg);
  110. }
  111. }
  112. .ant-from-container{
  113. padding: 40rpx 30rpx;
  114. .from-item{
  115. margin-bottom: 50rpx;
  116. .from-tips{
  117. font-size: 26rpx;
  118. font-weight: 400;
  119. letter-spacing: 0rpx;
  120. line-height: 38rpx;
  121. color: #b2b2b2;
  122. margin-bottom: 30rpx;
  123. }
  124. .from-label{
  125. font-weight: 400;
  126. font-size: 32rpx;
  127. line-height: 40rpx;
  128. color: #000;
  129. letter-spacing: 0rpx;
  130. line-height: 62rpx;
  131. }
  132. .from-line{
  133. display: flex;
  134. justify-content: space-between;
  135. margin: 15rpx 0;
  136. .from-view{
  137. min-width: 208rpx;
  138. min-height: 88rpx;
  139. line-height: 88rpx;
  140. background: #f3f7fa;
  141. text-align: center;
  142. color: #333;
  143. font-weight: 500;
  144. font-size: 26rpx;
  145. }
  146. }
  147. }
  148. .ant-from-submit{
  149. width: 100%;
  150. height: 92rpx;
  151. line-height: 92rpx;
  152. background-color: #00b2ff;
  153. border-radius: 8rpx;
  154. color: #fff;
  155. text-align: center;
  156. font-size: 36rpx;
  157. }
  158. .from-textarea{
  159. background: #f4f4f4;
  160. border-radius: 8rpx;
  161. padding: 30rpx;
  162. min-height: 176rpx;
  163. color: #666;
  164. line-height: 37rpx;
  165. font-size: 28rpx;
  166. font-weight: 400;
  167. }
  168. .from-address{
  169. background: #f4f4f4;
  170. border-radius: 8rpx;
  171. padding: 30rpx;
  172. height: 376rpx;
  173. background: url('https://img.js.design/assets/img/6229c52ff89eeabd92fe8663.png');
  174. background-size: cover;
  175. position: relative;
  176. }
  177. .from-address::after{
  178. position: absolute;
  179. background: #FF9954;
  180. height: 108rpx;
  181. height: 108rpx;
  182. opacity: .6;
  183. border: 2rpx solid #ff9954;
  184. left: 238rpx;
  185. top: 139rpx
  186. }
  187. .ant-from-submit-tip{
  188. width: calc(100vw - 90rpx);
  189. padding: 30rpx;
  190. color: #999;
  191. font-size: 26rpx;
  192. font-weight: 400;
  193. line-height: 36rpx;
  194. letter-spacing: 0rpx;
  195. span{
  196. color: #00b2ff;
  197. text-decoration: underline;
  198. }
  199. }
  200. }
  201. .form-lentx{
  202. padding: 30rpx 40rpx;
  203. display: flex;
  204. .me-icon{
  205. width: 52rpx;
  206. height: 52rpx;
  207. border: 1rpx dashed #ccc;
  208. border-radius: 12rpx;
  209. margin: 20rpx 30rpx 0 0;
  210. }
  211. .form-text{
  212. width: 160rpx;
  213. line-height: 40rpx;
  214. text-align: left;
  215. .head{
  216. font-size: 26rpx;
  217. color: #333;
  218. font-weight: 500;
  219. }
  220. .body{
  221. line-height: 28rpx;
  222. font-size: 20rpx;
  223. color: #999;
  224. font-weight: 400;
  225. }
  226. }
  227. }
  228. }
  229. </style>
  230. <script>
  231. export default {
  232. data() {
  233. return {
  234. show: false,
  235. }
  236. },
  237. onReachBottom() {
  238. console.log("reach bottom")
  239. },
  240. methods: {
  241. next: function(){
  242. },
  243. goback: function(){
  244. uni.switchTab({
  245. url:"/pages/index/icone"
  246. })
  247. }
  248. }
  249. }
  250. </script>