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

307 lines
6.1 KiB

  1. <template>
  2. <view class="container">
  3. <view class="ant-banner-box ">
  4. <image class="ant-banner" mode="aspectFill" src=""/>
  5. <view class="ant-banner-card ">
  6. <image class="ant-banner-header" mode="aspectFill" src="https://img0.baidu.com/it/u=1429435380,946942033&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"/>
  7. <view class="ant-banner-panl">
  8. <view class="ant-banner-name">和平发展</view>
  9. <view class="ant-banner-tag">成长值857</view>
  10. </view>
  11. </view>
  12. <view class="ant-card">
  13. <view class="ant-art-font">SVIP</view>
  14. <view class="ant-art-span">开团 VIP 会员享受超多便捷服务</view>
  15. <view class="ant-art-more">查看更多</view>
  16. </view>
  17. </view>
  18. <view class="ant-home-content">
  19. <view class="ant-menu-card">
  20. <view class="ant-flex-line">
  21. <view class="ant-icon-menu">
  22. <view class="ant-icon-menu-box">
  23. <view class="ant-icon"></view>
  24. <view class="ant-text">足迹</view>
  25. </view>
  26. </view>
  27. <view class="ant-icon-menu">
  28. <view class="ant-icon-menu-box">
  29. <view class="ant-icon"></view>
  30. <view class="ant-text">收藏</view>
  31. </view>
  32. </view>
  33. <view class="ant-icon-menu">
  34. <view class="ant-icon-menu-box">
  35. <view class="ant-icon"></view>
  36. <view class="ant-text">关注</view>
  37. </view>
  38. </view>
  39. <view class="ant-icon-menu">
  40. <view class="ant-icon-menu-box">
  41. <view class="ant-icon"></view>
  42. <view class="ant-text">在聊</view>
  43. </view>
  44. </view>
  45. </view>
  46. </view>
  47. <view class="ant-pand-item-box">
  48. <view class="ant-flex-line" v-for="i in 5">
  49. <view class="ant-icon-image"></view>
  50. <view class="ant-pand-item">
  51. 我的足迹
  52. </view>
  53. </view>
  54. </view>
  55. </view>
  56. <!-- <view class="content-end">
  57. <view class="line"/>
  58. <view class="center">瀚海黎明技术支持</view>
  59. </view> -->
  60. </view>
  61. </template>
  62. <style lang="scss">
  63. .ant-menu-card{
  64. top: -40rpx;
  65. z-index: 1;
  66. margin: 0 24rpx;
  67. width: calc(100vw - 96rpx);
  68. border-radius: 16rpx;
  69. min-height: 100rpx;
  70. padding: 24rpx;
  71. .ant-icon-menu{
  72. width: 150rpx;
  73. flex: 1;
  74. .ant-icon-menu-box{
  75. width: 100rpx;
  76. height: 100rpx;
  77. padding: 20rpx;
  78. border-radius: 20rpx;
  79. margin: 10rpx auto;
  80. background: linear-gradient(180deg, #f7f7fc -10%, #ffffff);
  81. box-shadow: 8rpx 8rpx 20rpx rgba(134, 136, 136, 0.2);
  82. .ant-icon{
  83. width: 60rpx;
  84. height: 60rpx;
  85. margin: 8rpx auto;
  86. border-radius: 12rpx;
  87. border: 1rpx dashed #ccc;
  88. }
  89. .ant-text{
  90. width: 100%;
  91. font-size: 24rpx;
  92. color: #222;
  93. font-weight: bolder;
  94. line-height: 42rpx;
  95. text-align: center;
  96. }
  97. }
  98. }
  99. }
  100. .ant-banner-box{
  101. position: fixed;
  102. top: 0;
  103. left: 0;
  104. .ant-banner{
  105. width: 100vw;
  106. height: 480rpx;
  107. background: radial-gradient(circle farthest-side at top left,
  108. rgb(65,117,255) 0, rgb(92,221,224) 20%,
  109. rgb(65,117,255) 60%, rgb(61,221,209) 100%)
  110. }
  111. .ant-banner-card{
  112. position: fixed;
  113. top: 140rpx;
  114. left: 42rpx;
  115. display: flex;
  116. .ant-banner-header{
  117. width: 120rpx;
  118. height: 120rpx;
  119. border-radius: 50%;
  120. border: 1rpx solid #FFF;
  121. }
  122. .ant-banner-panl{
  123. padding: 10rpx 30rpx;
  124. .ant-banner-name{
  125. font-weight: bolder;
  126. color: #FFF;
  127. font-size: 34rpx;
  128. margin-bottom: 20rpx;
  129. }
  130. .ant-banner-tag{
  131. background-color: rgba(255, 255, 255, .4);
  132. width: 120rpx;
  133. height: 30rpx;
  134. line-height: 30rpx;
  135. border-radius: 40rpx;
  136. color: #FFF;
  137. font-size: 22rpx;
  138. padding: 5rpx 20rpx;
  139. }
  140. }
  141. }
  142. .ant-card{
  143. padding: 24rpx;
  144. width: calc(100vw - 72rpx - 48rpx);
  145. height: 160rpx;
  146. background: linear-gradient(155deg,
  147. rgb(22,24,184), rgb(77, 78, 255), rgb(26,83,204));
  148. border-top-left-radius: 42rpx;
  149. border-top-right-radius: 42rpx;
  150. position: absolute;
  151. bottom: -20rpx;
  152. left: 36rpx;
  153. }
  154. .ant-art-font{
  155. font-size: 48rpx;
  156. font-weight: bolder;
  157. padding: 25rpx 20rpx 0;
  158. }
  159. .ant-art-span{
  160. font-size: 24rpx;
  161. padding: 10rpx 20rpx 10rpx;
  162. }
  163. .ant-art-more{
  164. font-size: 24rpx;
  165. padding: 10rpx 20rpx 10rpx;
  166. position: absolute;
  167. top: 50rpx;
  168. right: 40rpx;
  169. }
  170. .ant-art-more::after{
  171. content: "";
  172. position: absolute;
  173. top: 17.5rpx;
  174. right: 6rpx;
  175. width: 10rpx;
  176. height: 10rpx;
  177. border-bottom: 1rpx solid #FFF;
  178. border-right: 1rpx solid #FFF;
  179. transform: rotate(-45deg);
  180. }
  181. }
  182. .ant-home-content{
  183. width: 100vw;
  184. min-height: calc(100vh - 460rpx);
  185. background: linear-gradient(0deg, rgb(255,255,255), rgb(224,224,250), rgb(249, 249, 252));
  186. position: absolute;
  187. top: 460rpx;
  188. margin-bottom: 100rpx;
  189. .ant-pand-item-box{
  190. width: calc(100vw - 186rpx);
  191. min-height: 400rpx;
  192. background: #fff;
  193. border-radius: 18rpx;
  194. margin: 10rpx auto;
  195. padding: 36rpx;
  196. color: #000;
  197. font-weight: bolder;
  198. .ant-flex-line{
  199. height: 120rpx;
  200. line-height: 120rpx;
  201. border-bottom: 1rpx solid #eee;
  202. position: relative;
  203. .ant-icon-image{
  204. width: 60rpx;
  205. height: 60rpx;
  206. border-radius: 12rpx;
  207. border: 1rpx dashed #ccc;
  208. margin-right: 24rpx;
  209. }
  210. }
  211. .ant-flex-line:last-of-type{
  212. border-bottom: 0 !important;
  213. }
  214. .ant-flex-line::after{
  215. content: "";
  216. position: absolute;
  217. top: 62rpx;
  218. right: 15rpx;
  219. width: 12rpx;
  220. height: 12rpx;
  221. border-bottom: 2rpx solid;
  222. border-right: 2rpx solid;
  223. transform: rotate(-45deg);
  224. }
  225. }
  226. }
  227. .ant-home-content::after{
  228. content: " ";
  229. position: absolute;
  230. top: -1rpx;
  231. left: calc(50vw - 25rpx);
  232. width: 50rpx;
  233. height: 25rpx;
  234. background-color: #454ff7;
  235. clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  236. -webkit-clip-path: polygon(0% 0%, 50% 100%, 100% 0%);
  237. }
  238. </style>
  239. <script>
  240. export default {
  241. data() {
  242. return {
  243. banner: {url:''},
  244. information: [],
  245. id: ''
  246. }
  247. },
  248. onReachBottom() {
  249. console.log("reach bottom")
  250. },
  251. methods: {
  252. toUri(uri) {
  253. uni.navigateTo({url: uri})
  254. },
  255. getImageUrl(uri){
  256. return baseUrl + "/" + uri;
  257. },
  258. getDayString(str){
  259. return str.substr(0, 16)
  260. },
  261. }
  262. }
  263. </script>