homePage.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942
  1. <template>
  2. <view class="content">
  3. <view class="topSection">
  4. <image class="bg_top" src="https://dm.static.elab-plus.com/yezhu/h5/backgroundImg.png" mode=""></image>
  5. <view class="liveContent">
  6. <view class="backDiv"></view>
  7. <view class="title">分享好房 · 躺平赚钱</view>
  8. <view class="subTitle" @click="setEnv">新手赚钱帮助 ></view>
  9. <view class="levelDiv" v-if="userInfo.ownersUnion"
  10. style="background: url('https://dm.static.elab-plus.com/yezhu/h5/icon_line_back.png') center/100% 100% no-repeat;">
  11. <view class="level_top">
  12. <image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
  13. </image>
  14. <view class="level_text">{{userInfo.curlevel}}</view>
  15. <view class="level_des">/达到 {{userInfo.nextIncome}} 收益可升级</view>
  16. <view class="level_update">
  17. <text>升级攻略</text>
  18. <image class="level_right_icon"
  19. src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
  20. </view>
  21. </view>
  22. <view class="level_bottom">
  23. <levelView :currentLevel='userInfo.curIncome' :nextLevel='userInfo.nextIncome' :currentLevelTxt='userInfo.curlevel' nextLevelTxt='userInfo.nextLevel'>
  24. </levelView>
  25. </view>
  26. </view>
  27. </view>
  28. </view>
  29. <view class="content_body" :style="{background:color4}">
  30. <view class="content_beginner_guide">
  31. <view class="title">
  32. <text class="title_txt">- 新手引导 -</text>
  33. <view class="title_right">
  34. <text class="title_right_txt">收起</text>
  35. <image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png"
  36. mode=""></image>
  37. </view>
  38. </view>
  39. <view class="guide_content">
  40. <view class="item_guide">
  41. <image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode="">
  42. </image>
  43. <text class="guide_title">注册业主</text>
  44. <text class="guide_desc">业主注册审核\n实时等级升级</text>
  45. </view>
  46. <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
  47. </image>
  48. <view class="item_guide">
  49. <image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;"
  50. src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
  51. <text class="guide_title">分享项目</text>
  52. <text class="guide_desc">分享到朋友圈\n自动计算收益</text>
  53. </view>
  54. <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
  55. </image>
  56. <view class="item_guide">
  57. <image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;"
  58. src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
  59. <text class="guide_title">提现到微信</text>
  60. <text class="guide_desc">实时查看收益\n快速提现到账</text>
  61. </view>
  62. </view>
  63. </view>
  64. <view class="content_tab">
  65. <view class="tab_item" @click="toYezhu">
  66. <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_zcyz.png" mode=""></image>
  67. <text class="txt_tab">注册业主</text>
  68. </view>
  69. <view class="tab_item" @click="toShouYiPage">
  70. <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_shouyi.png" mode=""></image>
  71. <text class="txt_tab">收益排行榜</text>
  72. </view>
  73. <view class="tab_item" @click="goReportPage">
  74. <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_report.png" mode=""></image>
  75. <text class="txt_tab">效果报表</text>
  76. </view>
  77. <view class="tab_item">
  78. <image class="icon_tab" src="https://dm.static.elab-plus.com/yezhu/icon_myinfo.png" mode=""></image>
  79. <text class="txt_tab">我的信息</text>
  80. </view>
  81. </view>
  82. <view class="content_tuiguang">
  83. <view class="content_tuiguang_city">
  84. <text class="city_num">{{userInfo.taskCount||0}}个</text>
  85. <text class="city_num_desc">推广任务</text>
  86. <view class="city_list">
  87. <text class="city_name">城市</text>
  88. <image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  89. mode=""></image>
  90. </view>
  91. </view>
  92. <view class="content_tuiguang_money">
  93. <text class="money_num">¥{{userInfo.surplusTaskAmount||0}}</text>
  94. <text class="money_num_des">剩余任务金额</text>
  95. <view class="money_list">
  96. <text class="money_name">类型</text>
  97. <image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  98. mode=""></image>
  99. </view>
  100. <image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode="">
  101. </image>
  102. </view>
  103. </view>
  104. <view class="content_list">
  105. <view class="content_title">
  106. <view class="content_title_poi">
  107. </view>
  108. 任务列表
  109. </view>
  110. <view class="content_hongbao">
  111. <view class="hongbao_left">
  112. <image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png"
  113. mode=""></image>
  114. <view class="hongbao_left_info">
  115. <text class="hongbao_title">邀请好友注册</text>
  116. <text class="hongbao_money">完成邀请,可获得 ¥1/人</text>
  117. </view>
  118. </view>
  119. <view class="hongbao_right">
  120. 邀请好友
  121. </view>
  122. </view>
  123. <view class="list_item" v-for="(item,index) in houseList" :key='index'>
  124. <image class="house_img" :src="item.image" mode=""></image>
  125. <view class="item_content" @click="goDetailAction(item)">
  126. <text class="house_name">{{item.name}}</text>
  127. <view class="house_hk" v-if="item.taskCategory">
  128. <text class="house_hk_" v-for="(item1,index1) in item.taskCategory" :key='index1'>{{item1.category}} ¥{{item1.unitPrice}}/人</text>
  129. </view>
  130. <text class="house_hk" v-else></text>
  131. <view class="house_address">
  132. <image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
  133. <text>{{item.city}} · {{item.minPrice}}-{{item.maxPrice}}万/m² · {{item.bizFormat}}</text>
  134. </view>
  135. <view class="house_num">
  136. <image src="https://dm.static.elab-plus.com/yezhu/icon_family.png" mode=""></image>
  137. <text>{{item.cusGroup}}</text>
  138. </view>
  139. <text class="house_desc">{{item.shareRemark}}</text>
  140. </view>
  141. <view class="item_share" @click="toShareCard(item,2)">
  142. <image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png"
  143. mode=""></image>
  144. <text class="icon_text">分享</text>
  145. </view>
  146. <view class="item_bg"></view>
  147. </view>
  148. </view>
  149. </view>
  150. </view>
  151. </template>
  152. <script>
  153. import levelView from '@/components/leve-view/leve-view.vue';
  154. let app = getApp();
  155. export default {
  156. data() {
  157. return {
  158. color4: '#F5F5F7',
  159. houseList: [],
  160. userId: "",
  161. token: "",
  162. clickCount:8,
  163. userInfo: {
  164. "userId": "",
  165. "name": null,
  166. "head": null,
  167. "curlevel": null,
  168. "curIncome": null,
  169. "nextLevel": null,
  170. "nextIncome": null,
  171. "ownersUnion": false,
  172. "totalIncome": null,
  173. "taskCount": null,
  174. "surplusTaskAmount": null
  175. }
  176. }
  177. },
  178. mounted() {
  179. let token = this.$cache.get('_token_owner_union');
  180. let userId = this.$cache.get('_user_id');
  181. if(userId){
  182. app.globalData.userId = userId;
  183. }
  184. if (!token) {
  185. this.regist();
  186. } else {
  187. app.globalData.token = token;
  188. this.getUserInfo();
  189. }
  190. this.color4 = app.globalData.color4;
  191. this.getHomePage();
  192. },
  193. methods: {
  194. async getHomePage() {
  195. let ret = await this.$myRequest({
  196. url: "/project/homePage",
  197. data: {
  198. "city": "",
  199. "pageNo": 1,
  200. "pageSize": 20,
  201. "taskCategoryId": ""
  202. }
  203. })
  204. if (ret.data.success) {
  205. let pageModel = ret.data.pageModel;
  206. this.houseList = pageModel.resultSet || [];
  207. }
  208. },
  209. async regist() {
  210. let ret = await this.$myRequest({
  211. url: "/regist",
  212. data: {
  213. "code": "o08gpwOfRgwnhh1WCBYGLbaszur8",
  214. "shareToken": ""
  215. }
  216. });
  217. if (ret.data.success) {
  218. this.userId = ret.data.single.userId;
  219. this.$cache.set("_user_id",this.userId);
  220. app.globalData.userId = this.userId;
  221. if (ret.data.single.authed == 1) {
  222. this.token = ret.data.single.token;
  223. this.$cache.set('_token_owner_union', this.token);
  224. app.globalData.token = this.token
  225. this.getUserInfo()
  226. } else {
  227. this.getToken()
  228. }
  229. }
  230. },
  231. async getToken() {
  232. let ret = await this.$myRequest({
  233. url: "/authorizedPhone",
  234. data: {
  235. "code": (new Date()).getTime(),
  236. "phone": "18721775127",
  237. "userId": this.userId
  238. }
  239. });
  240. if (ret.data.success) {
  241. this.token = ret.data.single;
  242. this.$cache.set('_token_owner_union', this.token);
  243. app.globalData.token = this.token
  244. this.getUserInfo()
  245. }
  246. },
  247. async getUserInfo() {
  248. let ret = await this.$myRequest({
  249. url: "/user/userInfo",
  250. data: {
  251. },
  252. method: "GET"
  253. });
  254. if (ret.data.success) {
  255. this.userInfo = ret.data.single || null;
  256. }
  257. },
  258. // 调准项目详情
  259. goDetailAction(e) {
  260. uni.setStorageSync('projectId', e.projectId)
  261. uni.navigateTo({
  262. url: '../houseDetail/houseDetail'
  263. })
  264. },
  265. // 跳转至效果报表
  266. goReportPage() {
  267. uni.navigateTo({
  268. url: '../reportPage/reportPage'
  269. })
  270. },
  271. toShouYiPage() {
  272. uni.navigateTo({
  273. url: '../revenueRankingPage/revenueRankingPage'
  274. })
  275. },
  276. async toYezhu(){
  277. let ret = await this.$myRequest({
  278. url: "/user/regist/get",
  279. data: {
  280. "userId": app.globalData.userId,
  281. },
  282. method:"GET"
  283. })
  284. if (ret.data.success) {
  285. let single = ret.data.single||null;//:0待审核1通过2拒绝
  286. if(single.approvalStatus==0||single.approvalStatus==1){
  287. uni.navigateTo({
  288. url: '../certificationResultPage/certificationResultPage'
  289. })
  290. }else{
  291. uni.navigateTo({
  292. url: '../ownerCertification/ownerCertification'
  293. })
  294. }
  295. }
  296. },
  297. setEnv(){
  298. if (this.clickCount < 0) {
  299. this.clickCount = 8;
  300. uni.navigateTo({
  301. url:"../developSetting/developSetting"
  302. })
  303. } else {
  304. this.clickCount--;
  305. }
  306. },
  307. toShareCard(item,type){
  308. uni.navigateTo({
  309. url:'../shareCardPage/shareCardPage?page='+item.xcxPage+"&projectId="+item.projectId+"&type="+type
  310. })
  311. }
  312. },
  313. components: {
  314. levelView
  315. }
  316. }
  317. </script>
  318. <style lang="scss" scoped>
  319. page {
  320. width: 100vw;
  321. height: 100vh;
  322. }
  323. .content {
  324. width: 100%;
  325. height: 100%;
  326. position: relative;
  327. .topSection {
  328. position: relative;
  329. z-index: 100;
  330. }
  331. .bg_top {
  332. width: 100%;
  333. height: 470rpx;
  334. position: absolute;
  335. top: 0;
  336. left: 0;
  337. z-index: 100;
  338. }
  339. .liveContent {
  340. width: 100%;
  341. height: 470rpx;
  342. z-index: 100;
  343. display: flex;
  344. flex-direction: column;
  345. align-items: center;
  346. position: relative;
  347. .backDiv {
  348. top: 0;
  349. left: 0;
  350. position: absolute;
  351. width: 100%;
  352. height: 100%;
  353. background-color: rgba($color: #000000, $alpha: 0.1);
  354. z-index: 1;
  355. }
  356. .title {
  357. margin-top: 96rpx;
  358. font-size: 44rpx;
  359. font-weight: 700;
  360. text-align: center;
  361. color: #ffffff;
  362. z-index: 2;
  363. }
  364. .subTitle {
  365. font-size: 28rpx;
  366. font-family: Verdana, Verdana-Regular;
  367. font-weight: 400;
  368. text-align: left;
  369. color: #ffffff;
  370. margin-top: 20rpx;
  371. z-index: 2;
  372. }
  373. .levelDiv {
  374. margin-top: 82rpx;
  375. width: calc(100% - 60rpx);
  376. height: 152rpx;
  377. z-index: 2;
  378. display: flex;
  379. flex-direction: column;
  380. padding: 25rpx 30rpx;
  381. box-sizing: border-box;
  382. .level_top {
  383. width: 100%;
  384. display: flex;
  385. justify-content: space-between;
  386. flex-wrap: nowrap;
  387. align-items: center;
  388. margin-top: 5rpx;
  389. .level_icon {
  390. width: 37rpx;
  391. min-width: 37rpx;
  392. max-width: 37rpx;
  393. height: 35rpx;
  394. margin-right: 13rpx;
  395. margin-top: -5rpx;
  396. }
  397. .level_text {
  398. font-size: 48rpx;
  399. font-family: FontName, FontName-Regular;
  400. font-weight: 500;
  401. text-align: left;
  402. font-style: oblique;
  403. color: #f5c8a8;
  404. line-height: 40rpx;
  405. letter-spacing: 1.92rpx;
  406. margin-right: 8rpx;
  407. margin-top: -7rpx;
  408. }
  409. .level_des {
  410. font-size: 22rpx;
  411. font-family: Verdana, Verdana-Regular;
  412. font-weight: 400;
  413. text-align: left;
  414. color: #f5c8a8;
  415. white-space: nowrap;
  416. flex-grow: 1;
  417. }
  418. .level_update {
  419. font-size: 24rpx;
  420. font-family: Verdana, Verdana-Bold;
  421. font-weight: 700;
  422. text-align: right;
  423. color: #f5c8a8;
  424. letter-spacing: 0.96rpx;
  425. display: flex;
  426. align-items: center;
  427. .level_right_icon {
  428. margin-left: 8rpx;
  429. width: 6rpx;
  430. height: 7rpx;
  431. }
  432. }
  433. }
  434. }
  435. }
  436. .content_body {
  437. border-radius: 20rpx 20rpx 0rpx 0rpx;
  438. height: calc(100% - 470rpx);
  439. margin-top: -24rpx;
  440. z-index: 102;
  441. position: relative;
  442. padding: 1rpx;
  443. .content_beginner_guide {
  444. height: 354rpx;
  445. margin-left: 30rpx;
  446. margin-right: 30rpx;
  447. margin-top: 40rpx;
  448. background: #ffffff;
  449. border-radius: 16rpx;
  450. box-sizing: border-box;
  451. .title {
  452. width: 100%;
  453. position: relative;
  454. height: 110rpx;
  455. .title_txt {
  456. font-size: 32rpx;
  457. font-family: FontName, FontName-Regular;
  458. font-weight: 400;
  459. text-align: left;
  460. color: #b1b1b1;
  461. font-style: italic;
  462. position: absolute;
  463. left: 50%;
  464. top: 30rpx;
  465. transform: translateX(-50%);
  466. }
  467. .title_right {
  468. position: absolute;
  469. right: 20rpx;
  470. top: 40rpx;
  471. display: flex;
  472. align-items: center;
  473. .title_right_txt {
  474. font-size: 24rpx;
  475. font-family: Verdana, Verdana-Regular;
  476. font-weight: 400;
  477. text-align: right;
  478. color: #b1b1b1;
  479. }
  480. .title_right_cion {
  481. width: 10rpx;
  482. height: 6rpx;
  483. margin-left: 10rpx;
  484. }
  485. }
  486. }
  487. .guide_content {
  488. display: flex;
  489. padding-left: 40rpx;
  490. padding-right: 40rpx;
  491. box-sizing: border-box;
  492. justify-content: space-between;
  493. .item_guide {
  494. display: flex;
  495. flex-direction: column;
  496. align-items: center;
  497. .guide_img {
  498. width: 58rpx;
  499. height: 74rpx;
  500. margin-bottom: 17rpx;
  501. }
  502. .guide_title {
  503. font-size: 26rpx;
  504. font-family: Verdana, Verdana-Bold;
  505. font-weight: 700;
  506. text-align: center;
  507. color: #2c2c2c;
  508. margin-bottom: 8rpx;
  509. }
  510. .guide_desc {
  511. font-size: 22rpx;
  512. font-family: Verdana, Verdana-Regular;
  513. font-weight: 400;
  514. text-align: center;
  515. color: #b1b1b1;
  516. }
  517. }
  518. .icon_guide {
  519. width: 48rpx;
  520. height: 32rpx;
  521. margin-top: 20rpx;
  522. }
  523. }
  524. }
  525. .content_tab {
  526. display: flex;
  527. box-sizing: border-box;
  528. height: 180rpx;
  529. background: #ffffff;
  530. border-radius: 16rpx;
  531. margin-top: 14rpx;
  532. padding-left: 40rpx;
  533. padding-right: 40rpx;
  534. margin-left: 30rpx;
  535. margin-right: 30rpx;
  536. justify-content: space-between;
  537. .tab_item {
  538. display: flex;
  539. flex-direction: column;
  540. align-items: center;
  541. justify-content: center;
  542. .icon_tab {
  543. width: 96rpx;
  544. height: 96rpx;
  545. }
  546. .txt_tab {
  547. font-size: 24rpx;
  548. font-family: Verdana, Verdana-Regular;
  549. font-weight: 400;
  550. text-align: center;
  551. color: #262626;
  552. margin-top: 2rpx;
  553. }
  554. }
  555. }
  556. .content_tuiguang {
  557. height: 220rpx;
  558. display: flex;
  559. box-sizing: border-box;
  560. background: #ffffff;
  561. border-radius: 16rpx;
  562. margin-top: 14rpx;
  563. padding-left: 40rpx;
  564. padding-right: 40rpx;
  565. margin-left: 30rpx;
  566. margin-right: 30rpx;
  567. justify-content: space-between;
  568. position: relative;
  569. .content_tuiguang_city {
  570. display: flex;
  571. flex-direction: column;
  572. justify-content: center;
  573. align-items: center;
  574. width: 50%;
  575. .city_num {
  576. font-size: 40rpx;
  577. font-family: DIN Alternate, DIN Alternate-Bold;
  578. font-weight: 700;
  579. text-align: center;
  580. color: #262626;
  581. }
  582. .city_num_desc {
  583. font-size: 24rpx;
  584. font-family: Verdana, Verdana-Regular;
  585. font-weight: 400;
  586. text-align: center;
  587. color: #b1b1b1;
  588. }
  589. .city_list {
  590. display: flex;
  591. justify-content: center;
  592. margin-top: 52rpx;
  593. align-items: center;
  594. .city_name {
  595. font-size: 26rpx;
  596. font-family: Verdana, Verdana-Regular;
  597. font-weight: 400;
  598. text-align: left;
  599. color: #262626;
  600. }
  601. .city_more {
  602. width: 26rpx;
  603. height: 26rpx;
  604. margin-left: 8rpx;
  605. }
  606. }
  607. }
  608. .content_tuiguang_money {
  609. display: flex;
  610. flex-direction: column;
  611. justify-content: center;
  612. align-items: center;
  613. width: 50%;
  614. .money_num {
  615. font-size: 40rpx;
  616. font-family: DIN Alternate, DIN Alternate-Bold;
  617. font-weight: 700;
  618. text-align: center;
  619. color: #fd8f3c;
  620. }
  621. .money_num_des {
  622. font-size: 24rpx;
  623. font-family: Verdana, Verdana-Regular;
  624. font-weight: 400;
  625. text-align: center;
  626. color: #b1b1b1;
  627. }
  628. .money_list {
  629. display: flex;
  630. justify-content: center;
  631. margin-top: 52rpx;
  632. align-items: center;
  633. .money_name {
  634. font-size: 26rpx;
  635. font-family: Verdana, Verdana-Regular;
  636. font-weight: 400;
  637. text-align: left;
  638. color: #262626;
  639. }
  640. .money_more {
  641. width: 26rpx;
  642. height: 26rpx;
  643. margin-left: 8rpx;
  644. }
  645. }
  646. .money_bg {
  647. position: absolute;
  648. right: 0rpx;
  649. top: 0;
  650. width: 220rpx;
  651. height: 220rpx;
  652. }
  653. }
  654. }
  655. .content_list {
  656. margin-top: 60rpx;
  657. margin-left: 30rpx;
  658. margin-right: 30rpx;
  659. padding-bottom: 50rpx;
  660. .content_title {
  661. display: flex;
  662. font-size: 32rpx;
  663. font-family: Verdana, Verdana-Bold;
  664. font-weight: 700;
  665. text-align: left;
  666. color: #262626;
  667. align-items: center;
  668. .content_title_poi {
  669. width: 8rpx;
  670. height: 12rpx;
  671. background: #f07423;
  672. border-radius: 2rpx;
  673. margin-right: 8rpx;
  674. }
  675. }
  676. .content_hongbao {
  677. margin-top: 20rpx;
  678. height: 140rpx;
  679. background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
  680. border-radius: 16rpx;
  681. display: flex;
  682. justify-content: space-between;
  683. align-items: center;
  684. .hongbao_left {
  685. display: flex;
  686. margin-left: 26rpx;
  687. .icon_hongbao {
  688. width: 60rpx;
  689. height: 80rpx;
  690. margin-right: 20rpx;
  691. }
  692. .hongbao_left_info {
  693. display: flex;
  694. flex-direction: column;
  695. .hongbao_title {
  696. font-size: 30rpx;
  697. font-family: Verdana, Verdana-Bold;
  698. font-weight: 700;
  699. text-align: left;
  700. color: #ffffff;
  701. }
  702. .hongbao_money {
  703. font-size: 24rpx;
  704. font-family: Verdana, Verdana-Regular;
  705. font-weight: 400;
  706. text-align: left;
  707. color: #ffead8;
  708. }
  709. }
  710. }
  711. .hongbao_right {
  712. width: 140rpx;
  713. height: 56rpx;
  714. line-height: 56rpx;
  715. background: #ffffff;
  716. border-radius: 12rpx;
  717. font-size: 24rpx;
  718. font-family: Verdana, Verdana-Bold;
  719. font-weight: 700;
  720. text-align: center;
  721. color: #f07423;
  722. margin-right: 20rpx;
  723. }
  724. }
  725. .list_item {
  726. width: 100%;
  727. min-height: 280rpx;
  728. border-radius: 16rpx;
  729. display: flex;
  730. position: relative;
  731. margin-top: 20rpx;
  732. .house_img {
  733. width: 200rpx;
  734. height: 240rpx;
  735. min-width: 200rpx;
  736. z-index: 11;
  737. margin-top: 20rpx;
  738. margin-left: 20rpx;
  739. border-radius: 10rpx;
  740. }
  741. .item_content {
  742. display: flex;
  743. flex-direction: column;
  744. margin-left: 50rpx;
  745. z-index: 11;
  746. max-width: 360rpx;
  747. .house_name {
  748. font-size: 30rpx;
  749. font-family: Verdana, Verdana-Bold;
  750. font-weight: 700;
  751. text-align: left;
  752. color: #262626;
  753. margin-top: 20rpx;
  754. }
  755. .house_hk {
  756. font-size: 26rpx;
  757. font-family: Verdana, Verdana-Regular;
  758. font-weight: 400;
  759. text-align: left;
  760. color: #fd8f3c;
  761. margin-top: 8rpx;
  762. .house_hk_{
  763. margin-right: 10rpx;
  764. }
  765. }
  766. .house_address {
  767. display: flex;
  768. font-size: 24rpx;
  769. font-family: Verdana, Verdana-Regular;
  770. font-weight: 400;
  771. text-align: left;
  772. color: #b1b1b1;
  773. margin-top: 16rpx;
  774. image {
  775. width: 20rpx;
  776. height: 28rpx;
  777. margin-right: 8rpx;
  778. margin-top: 6rpx;
  779. }
  780. text {
  781. width: 80%;
  782. }
  783. }
  784. .house_num {
  785. display: flex;
  786. font-size: 24rpx;
  787. font-family: Verdana, Verdana-Regular;
  788. font-weight: 400;
  789. text-align: left;
  790. color: #b1b1b1;
  791. margin-top: 12rpx;
  792. image {
  793. width: 24rpx;
  794. height: 26rpx;
  795. margin-right: 8rpx;
  796. margin-top: 6rpx;
  797. }
  798. text {
  799. width: 80%;
  800. }
  801. }
  802. .house_desc {
  803. margin-top: 24rpx;
  804. font-size: 24rpx;
  805. font-family: Verdana, Verdana-Regular;
  806. font-weight: 400;
  807. text-align: left;
  808. color: #b1b1b1;
  809. margin-bottom: 20rpx;
  810. }
  811. }
  812. .item_share {
  813. z-index: 11;
  814. display: flex;
  815. flex-direction: column;
  816. width: 70rpx;
  817. height: 100rpx;
  818. background: #f07423;
  819. border-radius: 12rpx;
  820. position: absolute;
  821. right: 0;
  822. top: 50%;
  823. transform: translateY(-50%);
  824. justify-content: center;
  825. align-items: center;
  826. .icon_share {
  827. width: 32rpx;
  828. height: 32rpx;
  829. margin-bottom: 6rpx;
  830. }
  831. .icon_text {
  832. font-size: 24rpx;
  833. font-family: Verdana, Verdana-Bold;
  834. font-weight: 700;
  835. text-align: center;
  836. color: #ffffff;
  837. }
  838. }
  839. .item_bg {
  840. position: absolute;
  841. left: 0;
  842. top: 0;
  843. width: 95%;
  844. height: 100%;
  845. background-color: #FFFFFF;
  846. border-radius: 16rpx;
  847. z-index: 10;
  848. }
  849. }
  850. }
  851. }
  852. }
  853. </style>