homePage.vue 29 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132113311341135113611371138113911401141114211431144114511461147114811491150115111521153115411551156
  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"
  10. style="background: url('https://dm.static.elab-plus.com/yezhu/h5/icon_line_back.png') center/100% 100% no-repeat;">
  11. <view class="" v-if="userInfo.userId">
  12. <view class="level_top" v-if="userInfo.ownersUnion">
  13. <image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
  14. </image>
  15. <view class="level_text">{{userInfo.curlevel?'Lv'+userInfo.curlevel:''}}</view>
  16. <view class="level_des" v-if="(userInfo.curIncome&&userInfo.nextIncome&&userInfo.curIncome==userInfo.nextIncome)">/当前已达到最高等级</view>
  17. <view class="level_des" v-else>/达到 {{userInfo.nextIncome}} 收益可升级</view>
  18. <view class="level_update">
  19. <text>升级攻略</text>
  20. <image class="level_right_icon"
  21. src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
  22. </view>
  23. </view>
  24. <view class="level_top" v-else @click="toYezhu">
  25. <image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
  26. </image>
  27. <view class="level_text_login">业主认证</view>
  28. <view class="level_des"></view>
  29. <view class="level_update">
  30. <text>立即认证</text>
  31. <image class="level_right_icon"
  32. src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
  33. </view>
  34. </view>
  35. </view>
  36. <view class="level_top" v-else @click="toLogin">
  37. <image class="level_icon" src="https://dm.static.elab-plus.com/yezhu/h5/icon_Level.png" mode="">
  38. </image>
  39. <view class="level_text_login">登录</view>
  40. <view class="level_des"></view>
  41. <view class="level_update">
  42. <text>立即登录</text>
  43. <image class="level_right_icon"
  44. src="https://dm.static.elab-plus.com/yezhu/h5/icon_right.png" mode=""></image>
  45. </view>
  46. </view>
  47. <view class="" v-if="userInfo.userId">
  48. <view class="level_bottom" v-if="userInfo.ownersUnion">
  49. <levelView :currentLevel='userInfo.curIncome' :nextLevel='userInfo.nextIncome' :currentLevelTxt='userInfo.curlevel' :nextLevelTxt='userInfo.nextLevel'>
  50. </levelView>
  51. </view>
  52. <view class="level_bottom_login" v-else >
  53. 点此进行业主认证,审核后实时等级升级
  54. </view>
  55. </view>
  56. <view class="level_bottom_login" v-else >
  57. 点此进行登录注册,开始赚钱吧
  58. </view>
  59. </view>
  60. </view>
  61. </view>
  62. <view class="content_body" :style="{background:color4}">
  63. <view class="content_beginner_guide" v-if="showGuide">
  64. <view class="title">
  65. <text class="title_txt">- 新手引导 -</text>
  66. <view class="title_right">
  67. <text class="title_right_txt" @click="upLoadView(false)">收起</text>
  68. <image class="title_right_cion" src="https://dm.static.elab-plus.com/yezhu/icon_shouqi.png"
  69. mode=""></image>
  70. </view>
  71. </view>
  72. <view class="guide_content">
  73. <view class="item_guide">
  74. <image class="guide_img" src="https://dm.static.elab-plus.com/yezhu/icon_yezhu.png" mode="">
  75. </image>
  76. <text class="guide_title" @click="clearToken">业主认证</text>
  77. <text class="guide_desc">业主认证审核\n实时等级升级</text>
  78. </view>
  79. <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
  80. </image>
  81. <view class="item_guide">
  82. <image class="guide_img" style="width: 72rpx;height: 72rpx;margin-top: 5rpx;"
  83. src="https://dm.static.elab-plus.com/yezhu/icon_pyq.png" mode=""></image>
  84. <text class="guide_title">分享项目</text>
  85. <text class="guide_desc">分享到朋友圈\n自动计算收益</text>
  86. </view>
  87. <image class="icon_guide" src="https://dm.static.elab-plus.com/yezhu/icon_to_guide.png" mode="">
  88. </image>
  89. <view class="item_guide">
  90. <image class="guide_img" style="width: 58rpx;height: 68rpx;margin-top: 9rpx;"
  91. src="https://dm.static.elab-plus.com/yezhu/icon_yz_money.png" mode=""></image>
  92. <text class="guide_title">提现到微信</text>
  93. <text class="guide_desc">实时查看收益\n快速提现到账</text>
  94. </view>
  95. </view>
  96. </view>
  97. <view class="content_beginner_guide_" v-else @click="upLoadView(true)">
  98. <text class="title_txt">展开新手引导</text>
  99. <image class="title_right_cion" src="../../static/icons/icon_down_.png"
  100. mode=""></image>
  101. </view>
  102. <view class="content_tab">
  103. <view class="tab_item" @click="toYezhu">
  104. <image class="icon_tab" src="../../static/icons/icon_zcyz_user.png" mode=""></image>
  105. <text class="txt_tab">业主认证</text>
  106. </view>
  107. <view class="tab_item" @click="toShouYiPage">
  108. <image class="icon_tab" src="../../static/icons/icon_shouyi_user.png" mode=""></image>
  109. <text class="txt_tab">收益排行榜</text>
  110. </view>
  111. <view class="tab_item" @click="goReportPage">
  112. <image class="icon_tab" src="../../static/icons/icon_report_user.png" mode=""></image>
  113. <text class="txt_tab">效果报表</text>
  114. </view>
  115. <view class="tab_item" @click="showMine">
  116. <image class="icon_tab" src="../../static/icons/icon_user_mine.png" mode=""></image>
  117. <text class="txt_tab">我的信息</text>
  118. </view>
  119. </view>
  120. <view class="content_tuiguang" v-if="userInfo.userId">
  121. <view class="content_tuiguang_city">
  122. <text class="city_num">{{userInfo.taskCount||0}}个</text>
  123. <text class="city_num_desc">推广任务</text>
  124. <view class="city_list" @click="showOptions(1)">
  125. <text class="city_name">{{city}}</text>
  126. <image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  127. mode=""></image>
  128. </view>
  129. </view>
  130. <view class="content_tuiguang_money">
  131. <text class="money_num">¥{{Number(userInfo.surplusTaskAmount).toFixed(2)||'0.00'}}</text>
  132. <text class="money_num_des">剩余任务金额</text>
  133. <view class="money_list" @click="showOptions(2)">
  134. <text class="money_name" >{{typeName}}</text>
  135. <image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  136. mode=""></image>
  137. </view>
  138. <image class="money_bg" src="https://dm.static.elab-plus.com/yezhu/icon_money_bg.png" mode="">
  139. </image>
  140. </view>
  141. </view>
  142. <view class="content_tuiguang" style="height: auto;" v-else>
  143. <view class="content_tuiguang_city">
  144. <view class="city_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(1)">
  145. <text class="city_name">{{city}}</text>
  146. <image class="city_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  147. mode=""></image>
  148. </view>
  149. </view>
  150. <view class="content_tuiguang_money" >
  151. <view class="money_list" style="margin-top: 30rpx;margin-bottom: 30rpx;" @click="showOptions(2)">
  152. <text class="money_name" >{{typeName}}</text>
  153. <image class="money_more" src="https://dm.static.elab-plus.com/yezhu/icon_ios_back%402x.png"
  154. mode=""></image>
  155. </view>
  156. </view>
  157. </view>
  158. <view class="content_list">
  159. <view class="content_title">
  160. <view class="content_title_poi">
  161. </view>
  162. 任务列表
  163. </view>
  164. <view class="content_hongbao">
  165. <view class="hongbao_left">
  166. <image class="icon_hongbao" src="https://dm.static.elab-plus.com/yezhu/icon_hongbao.png"
  167. mode=""></image>
  168. <view class="hongbao_left_info">
  169. <text class="hongbao_title">邀请好友注册</text>
  170. <text class="hongbao_money">完成邀请,可获得 ¥1/人</text>
  171. </view>
  172. </view>
  173. <view class="hongbao_right" @click="toShareCard('',1)">
  174. 邀请好友
  175. </view>
  176. </view>
  177. <view class="list_item" v-for="(item,index) in houseList" :key='index'>
  178. <image class="house_img" :src="item.image" mode="aspectFill"></image>
  179. <view class="item_content" @click="goDetailAction(item,1)">
  180. <text class="house_name">{{item.name}}</text>
  181. <view class="house_hk" v-if="item.taskCategory">
  182. <text class="house_hk_" v-for="(item1,index1) in item.taskCategory" :key='index1'>{{item1.category}} ¥{{item1.unitPrice}}/人</text>
  183. </view>
  184. <text class="house_hk" v-else></text>
  185. <view class="house_address">
  186. <image src="https://dm.static.elab-plus.com/yezhu/icon_location.png" mode=""></image>
  187. <text style="width: 100%;">{{item.city}} · {{item.minPrice}}-{{item.maxPrice}}元/m² {{item.bizFormat?'· '+item.bizFormat:''}}</text>
  188. </view>
  189. <view class="house_num">
  190. <image src="https://dm.static.elab-plus.com/yezhu/icon_family.png" mode=""></image>
  191. <text style="width: 100%;">{{item.projectLayout}}</text>
  192. </view>
  193. <text class="house_desc">{{item.shareRemark}}</text>
  194. </view>
  195. <view class="item_share" @click="toShareCard(item.projectId,2)">
  196. <image class="icon_share" src="https://dm.static.elab-plus.com/yezhu/icon_small_share.png"
  197. mode=""></image>
  198. <text class="icon_text">分享</text>
  199. </view>
  200. <view class="item_bg"></view>
  201. </view>
  202. <view class="com_noMore_text" v-if="noMore && houseList.length > 0">没有更多了</view>
  203. <view class="empty" v-if="houseList.length == 0">
  204. <image class="emptyImg" src="https://dm.static.elab-plus.com/yezhu/h5/icon_empty.png" mode=""></image>
  205. <view class="text">暂无数据</view>
  206. </view>
  207. </view>
  208. </view>
  209. <login ref='login'></login>
  210. <login-notice ref='login_notice'></login-notice>
  211. <dmMine ref='mine' :userInfo='userInfo'></dmMine>
  212. <dmHomeChoose ref='chooseType' :option='optionType' @chooiceType="chooiceType"></dmHomeChoose>
  213. </view>
  214. </template>
  215. <script>
  216. import levelView from '@/components/leve-view/leve-view.vue';
  217. import dmMine from '@/components/subComponents/dmMine.vue'
  218. import dmHomeChoose from "@/components/subComponents/dmHomeChoose.vue"
  219. let app = getApp();
  220. export default {
  221. data() {
  222. return {
  223. color4: '#F5F5F7',
  224. houseList: [],
  225. userId: "",
  226. token: "",
  227. clickCount:8,
  228. userInfo: {
  229. "userId": "",
  230. "name": null,
  231. "head": null,
  232. "curlevel": null,
  233. "curIncome": null,
  234. "nextLevel": null,
  235. "nextIncome": null,
  236. "ownersUnion": false,
  237. "totalIncome": null,
  238. "taskCount": null,
  239. "surplusTaskAmount": null,
  240. "cardNo":"",
  241. "phone":"",
  242. "room":"",
  243. "sex":""
  244. },
  245. showGuide:true,
  246. total:0,
  247. pageNo:1,
  248. pageSize:10,
  249. noMore:false,
  250. city:"城市",
  251. type:"",
  252. typeName:"类型",
  253. optionType:1
  254. }
  255. },
  256. mounted() {
  257. this.color4 = app.globalData.color4;
  258. this.getData();
  259. uni.$on("request",()=>{
  260. this.getData();
  261. this.$refs.login_notice.hide();
  262. this.$refs.login.hide();
  263. })
  264. let projectId = this.getQueryString('projectId');
  265. if(projectId){
  266. let e = {
  267. projectId
  268. }
  269. this.goDetailAction(e,2)
  270. }
  271. },
  272. onPullDownRefresh() {
  273. this.getData();
  274. },
  275. onReachBottom() {
  276. if(this.houseList.length<this.total){
  277. this.pageNo ++;
  278. this.getHomePage();
  279. }
  280. },
  281. methods: {
  282. getQueryString(name){
  283. var reg = new RegExp("(^|\\?|&)"+ name +"=([^&]*)(\\s|&|$)", "i");
  284. return reg.test(location.href) ? unescape(RegExp.$2.replace(/\+/g, " ")) : ""
  285. },
  286. clearToken(){
  287. },
  288. getData(){
  289. this.pageNo = 1;
  290. this.getUserInfo();
  291. this.getHomePage();
  292. },
  293. chooiceType(e){
  294. this.city = e.city==''?"城市":(e.city).split('市')[0];
  295. this.type = e.type;
  296. this.typeName = e.typeName==''?'类型':e.typeName;
  297. this.pageNo = 1;
  298. this.getHomePage();
  299. },
  300. async getHomePage() {
  301. let ret = await this.$myRequest({
  302. url: "/project/homePage",
  303. data: {
  304. "city": this.city=='城市'?'':this.city,
  305. "pageNo": this.pageNo,
  306. "pageSize": this.pageSize,
  307. "taskCategoryId": this.type,
  308. }
  309. })
  310. if (ret.data.success) {
  311. let pageModel = ret.data.pageModel;
  312. let houseList = pageModel.resultSet || [];
  313. if(this.pageNo==1){
  314. this.houseList = [];
  315. }
  316. this.houseList = this.houseList.concat(houseList);
  317. this.total = pageModel.total||0;
  318. this.noMore = this.houseList.length==this.total
  319. }
  320. },
  321. async getUserInfo() {
  322. if(app.globalData.userId){
  323. let ret = await this.$myRequest({
  324. url: "/user/userInfo",
  325. data: {},
  326. method: "GET"
  327. });
  328. if (ret.data.success) {
  329. this.userInfo = ret.data.single || null;
  330. this.showGuide = this.userInfo.userId?this.userInfo.ownersUnion?false:true:true;
  331. }
  332. }
  333. },
  334. // 调准项目详情
  335. goDetailAction(e,type) {
  336. if(type==1){
  337. if(this.userInfo.userId){
  338. uni.navigateTo({
  339. url: '../houseDetail/houseDetail?projectId='+e.projectId
  340. })
  341. }else{
  342. uni.$emit('unLogin')
  343. }
  344. }else{
  345. uni.navigateTo({
  346. url: '../houseDetail/houseDetail?projectId='+e.projectId
  347. })
  348. }
  349. },
  350. // 跳转至效果报表
  351. goReportPage() {
  352. if(this.userInfo.userId){
  353. uni.navigateTo({
  354. url: '../reportPage/reportPage'
  355. })
  356. }else{
  357. uni.$emit('unLogin')
  358. }
  359. },
  360. toShouYiPage() {
  361. if(this.userInfo.userId){
  362. uni.navigateTo({
  363. url: '../revenueRankingPage/revenueRankingPage'
  364. })
  365. }else{
  366. uni.$emit('unLogin')
  367. }
  368. },
  369. async toYezhu(){
  370. let ret = await this.$myRequest({
  371. url: "/user/regist/get",
  372. data: {
  373. "userId": app.globalData.userId,
  374. },
  375. method:"GET"
  376. })
  377. if (ret.data.success) {
  378. let single = ret.data.single||null;//:0待审核1通过2拒绝
  379. if(single){
  380. if(single.approvalStatus==0||single.approvalStatus==1){
  381. uni.navigateTo({
  382. url: '../certificationResultPage/certificationResultPage'
  383. })
  384. }else if(single.approvalStatus==2){
  385. uni.navigateTo({
  386. url: '../ownerCertification/ownerCertification?mobile='+this.userInfo.phone
  387. })
  388. }
  389. }else{
  390. uni.navigateTo({
  391. url: '../ownerCertification/ownerCertification?mobile='+this.userInfo.phone
  392. })
  393. }
  394. }else{
  395. uni.showToast({
  396. icon:"none",
  397. title:ret.data.message
  398. })
  399. }
  400. },
  401. setEnv(){
  402. if (this.clickCount < 0) {
  403. this.clickCount = 8;
  404. uni.navigateTo({
  405. url:"../developSetting/developSetting"
  406. })
  407. } else {
  408. this.clickCount--;
  409. }
  410. },
  411. toShareCard(projectId,type){
  412. if(this.userInfo.userId){
  413. let href = location.origin+location.pathname;
  414. uni.navigateTo({
  415. url:'../shareCardPage/shareCardPage?page='+href+"&projectId="+projectId+"&type="+type
  416. })
  417. }else{
  418. uni.$emit('unLogin')
  419. }
  420. },
  421. toLogin(){
  422. uni.$emit('login')
  423. },
  424. upLoadView(isShow){
  425. this.showGuide = isShow;
  426. },
  427. showMine(){
  428. if(this.userInfo.userId){
  429. this.$refs.mine.show()
  430. }else{
  431. uni.$emit('unLogin')
  432. }
  433. },
  434. showOptions(option){
  435. this.$refs.chooseType.setOptionType(option);
  436. this.$forceUpdate();
  437. this.$refs.chooseType.show()
  438. }
  439. },
  440. components: {
  441. levelView,
  442. dmMine,
  443. dmHomeChoose
  444. }
  445. }
  446. </script>
  447. <style lang="scss" scoped>
  448. .content {
  449. width: 100%;
  450. height: 100%;
  451. position: relative;
  452. .topSection {
  453. position: relative;
  454. z-index: 100;
  455. }
  456. .bg_top {
  457. width: 100%;
  458. height: 470rpx;
  459. position: absolute;
  460. top: 0;
  461. left: 0;
  462. z-index: 100;
  463. }
  464. .liveContent {
  465. width: 100%;
  466. height: 470rpx;
  467. z-index: 100;
  468. display: flex;
  469. flex-direction: column;
  470. align-items: center;
  471. position: relative;
  472. .backDiv {
  473. top: 0;
  474. left: 0;
  475. position: absolute;
  476. width: 100%;
  477. height: 100%;
  478. background-color: rgba($color: #000000, $alpha: 0.1);
  479. z-index: 1;
  480. }
  481. .title {
  482. margin-top: 96rpx;
  483. font-size: 44rpx;
  484. font-weight: 700;
  485. text-align: center;
  486. color: #ffffff;
  487. z-index: 2;
  488. }
  489. .subTitle {
  490. font-size: 28rpx;
  491. font-family: Verdana, Verdana-Regular;
  492. font-weight: 400;
  493. text-align: left;
  494. color: #ffffff;
  495. margin-top: 20rpx;
  496. z-index: 2;
  497. }
  498. .levelDiv {
  499. margin-top: 82rpx;
  500. width: calc(100% - 60rpx);
  501. height: 152rpx;
  502. z-index: 2;
  503. display: flex;
  504. flex-direction: column;
  505. padding: 25rpx 30rpx;
  506. box-sizing: border-box;
  507. .level_top {
  508. width: 100%;
  509. display: flex;
  510. justify-content: space-between;
  511. flex-wrap: nowrap;
  512. align-items: center;
  513. margin-top: 5rpx;
  514. .level_icon {
  515. width: 37rpx;
  516. min-width: 37rpx;
  517. max-width: 37rpx;
  518. height: 35rpx;
  519. margin-right: 13rpx;
  520. margin-top: -5rpx;
  521. }
  522. .level_text {
  523. font-size: 48rpx;
  524. font-family: FontName, FontName-Regular;
  525. font-weight: 500;
  526. text-align: left;
  527. font-style: oblique;
  528. color: #f5c8a8;
  529. line-height: 40rpx;
  530. letter-spacing: 1.92rpx;
  531. margin-right: 8rpx;
  532. margin-top: -7rpx;
  533. }
  534. .level_text_login{
  535. font-size: 40rpx;
  536. font-family: FontName, FontName-Regular;
  537. font-weight: 400;
  538. text-align: left;
  539. color: #f5c8a8;
  540. }
  541. .level_des {
  542. font-size: 22rpx;
  543. font-family: Verdana, Verdana-Regular;
  544. font-weight: 400;
  545. text-align: left;
  546. color: #f5c8a8;
  547. white-space: nowrap;
  548. flex-grow: 1;
  549. }
  550. .level_update {
  551. font-size: 24rpx;
  552. font-family: Verdana, Verdana-Bold;
  553. font-weight: 700;
  554. text-align: right;
  555. color: #f5c8a8;
  556. letter-spacing: 0.96rpx;
  557. display: flex;
  558. align-items: center;
  559. .level_right_icon {
  560. margin-left: 8rpx;
  561. width: 6rpx;
  562. height: 7rpx;
  563. }
  564. }
  565. }
  566. .level_bottom_login{
  567. font-size: 22rpx;
  568. font-family: Verdana, Verdana-Regular;
  569. font-weight: 400;
  570. text-align: left;
  571. color: #f5c8a8;
  572. margin-top: 20rpx;
  573. }
  574. }
  575. }
  576. .content_body {
  577. border-radius: 20rpx 20rpx 0rpx 0rpx;
  578. height: calc(100% - 470rpx);
  579. margin-top: -24rpx;
  580. z-index: 102;
  581. position: relative;
  582. padding: 1rpx;
  583. .content_beginner_guide {
  584. height: 354rpx;
  585. margin-left: 30rpx;
  586. margin-right: 30rpx;
  587. margin-top: 40rpx;
  588. background: #ffffff;
  589. border-radius: 16rpx;
  590. box-sizing: border-box;
  591. .title {
  592. width: 100%;
  593. position: relative;
  594. height: 110rpx;
  595. .title_txt {
  596. font-size: 32rpx;
  597. font-family: FontName, FontName-Regular;
  598. font-weight: 400;
  599. text-align: left;
  600. color: #b1b1b1;
  601. position: absolute;
  602. left: 50%;
  603. top: 30rpx;
  604. transform: translateX(-50%);
  605. }
  606. .title_right {
  607. position: absolute;
  608. right: 20rpx;
  609. top: 40rpx;
  610. display: flex;
  611. align-items: center;
  612. .title_right_txt {
  613. font-size: 24rpx;
  614. font-family: Verdana, Verdana-Regular;
  615. font-weight: 400;
  616. text-align: right;
  617. color: #b1b1b1;
  618. }
  619. .title_right_cion {
  620. width: 10rpx;
  621. height: 6rpx;
  622. margin-left: 10rpx;
  623. }
  624. }
  625. }
  626. .guide_content {
  627. display: flex;
  628. padding-left: 40rpx;
  629. padding-right: 40rpx;
  630. box-sizing: border-box;
  631. justify-content: space-between;
  632. .item_guide {
  633. display: flex;
  634. flex-direction: column;
  635. align-items: center;
  636. .guide_img {
  637. width: 58rpx;
  638. height: 74rpx;
  639. margin-bottom: 17rpx;
  640. }
  641. .guide_title {
  642. font-size: 26rpx;
  643. font-family: Verdana, Verdana-Bold;
  644. font-weight: 700;
  645. text-align: center;
  646. color: #2c2c2c;
  647. margin-bottom: 8rpx;
  648. }
  649. .guide_desc {
  650. font-size: 22rpx;
  651. font-family: Verdana, Verdana-Regular;
  652. font-weight: 400;
  653. text-align: center;
  654. color: #b1b1b1;
  655. }
  656. }
  657. .icon_guide {
  658. width: 48rpx;
  659. height: 32rpx;
  660. margin-top: 20rpx;
  661. }
  662. }
  663. }
  664. .content_beginner_guide_{
  665. width: 100%;
  666. position: relative;
  667. margin-left: 30rpx;
  668. margin-right: 30rpx;
  669. margin-top: 20rpx;
  670. margin-bottom: 30rpx;
  671. display: flex;
  672. justify-content: center;
  673. align-items: center;
  674. .title_txt {
  675. font-size: 32rpx;
  676. font-family: FontName, FontName-Regular;
  677. font-weight: 400;
  678. text-align: left;
  679. color: #b1b1b1;
  680. }
  681. .title_right_cion {
  682. width: 10rpx;
  683. height: 6rpx;
  684. margin-left: 10rpx;
  685. }
  686. }
  687. .content_tab {
  688. display: flex;
  689. box-sizing: border-box;
  690. height: 180rpx;
  691. background: #ffffff;
  692. border-radius: 16rpx;
  693. margin-top: 14rpx;
  694. padding-left: 40rpx;
  695. padding-right: 40rpx;
  696. margin-left: 30rpx;
  697. margin-right: 30rpx;
  698. justify-content: space-between;
  699. .tab_item {
  700. display: flex;
  701. flex-direction: column;
  702. align-items: center;
  703. justify-content: center;
  704. .icon_tab {
  705. width: 96rpx;
  706. height: 96rpx;
  707. }
  708. .txt_tab {
  709. font-size: 24rpx;
  710. font-family: Verdana, Verdana-Regular;
  711. font-weight: 400;
  712. text-align: center;
  713. color: #262626;
  714. margin-top: 2rpx;
  715. }
  716. }
  717. }
  718. .content_tuiguang {
  719. height: 220rpx;
  720. display: flex;
  721. box-sizing: border-box;
  722. background: #ffffff;
  723. border-radius: 16rpx;
  724. margin-top: 14rpx;
  725. padding-left: 40rpx;
  726. padding-right: 40rpx;
  727. margin-left: 30rpx;
  728. margin-right: 30rpx;
  729. justify-content: space-between;
  730. position: relative;
  731. .content_tuiguang_city {
  732. display: flex;
  733. flex-direction: column;
  734. justify-content: center;
  735. align-items: center;
  736. width: 50%;
  737. .city_num {
  738. font-size: 40rpx;
  739. font-family: DIN Alternate, DIN Alternate-Bold;
  740. font-weight: 700;
  741. text-align: center;
  742. color: #262626;
  743. }
  744. .city_num_desc {
  745. font-size: 24rpx;
  746. font-family: Verdana, Verdana-Regular;
  747. font-weight: 400;
  748. text-align: center;
  749. color: #b1b1b1;
  750. }
  751. .city_list {
  752. display: flex;
  753. justify-content: center;
  754. margin-top: 52rpx;
  755. align-items: center;
  756. .city_name {
  757. font-size: 26rpx;
  758. font-family: Verdana, Verdana-Regular;
  759. font-weight: 400;
  760. text-align: left;
  761. color: #262626;
  762. }
  763. .city_more {
  764. width: 26rpx;
  765. height: 26rpx;
  766. margin-left: 8rpx;
  767. }
  768. }
  769. }
  770. .content_tuiguang_money {
  771. display: flex;
  772. flex-direction: column;
  773. justify-content: center;
  774. align-items: center;
  775. width: 50%;
  776. .money_num {
  777. font-size: 40rpx;
  778. font-family: DIN Alternate, DIN Alternate-Bold;
  779. font-weight: 700;
  780. text-align: center;
  781. color: #fd8f3c;
  782. }
  783. .money_num_des {
  784. font-size: 24rpx;
  785. font-family: Verdana, Verdana-Regular;
  786. font-weight: 400;
  787. text-align: center;
  788. color: #b1b1b1;
  789. }
  790. .money_list {
  791. display: flex;
  792. justify-content: center;
  793. margin-top: 52rpx;
  794. align-items: center;
  795. z-index: 11;
  796. .money_name {
  797. font-size: 26rpx;
  798. font-family: Verdana, Verdana-Regular;
  799. font-weight: 400;
  800. text-align: left;
  801. color: #262626;
  802. }
  803. .money_more {
  804. width: 26rpx;
  805. height: 26rpx;
  806. margin-left: 8rpx;
  807. }
  808. }
  809. .money_bg {
  810. position: absolute;
  811. right: 0rpx;
  812. top: 0;
  813. width: 220rpx;
  814. height: 220rpx;
  815. }
  816. }
  817. }
  818. .content_list {
  819. margin-top: 60rpx;
  820. margin-left: 30rpx;
  821. margin-right: 30rpx;
  822. padding-bottom: 50rpx;
  823. .content_title {
  824. display: flex;
  825. font-size: 32rpx;
  826. font-family: Verdana, Verdana-Bold;
  827. font-weight: 700;
  828. text-align: left;
  829. color: #262626;
  830. align-items: center;
  831. .content_title_poi {
  832. width: 8rpx;
  833. height: 12rpx;
  834. background: #f07423;
  835. border-radius: 2rpx;
  836. margin-right: 8rpx;
  837. }
  838. }
  839. .content_hongbao {
  840. margin-top: 20rpx;
  841. height: 140rpx;
  842. background: linear-gradient(108deg, #ffb55f 9%, #f87523 96%);
  843. border-radius: 16rpx;
  844. display: flex;
  845. justify-content: space-between;
  846. align-items: center;
  847. .hongbao_left {
  848. display: flex;
  849. margin-left: 26rpx;
  850. .icon_hongbao {
  851. width: 60rpx;
  852. height: 80rpx;
  853. margin-right: 20rpx;
  854. }
  855. .hongbao_left_info {
  856. display: flex;
  857. flex-direction: column;
  858. .hongbao_title {
  859. font-size: 30rpx;
  860. font-family: Verdana, Verdana-Bold;
  861. font-weight: 700;
  862. text-align: left;
  863. color: #ffffff;
  864. }
  865. .hongbao_money {
  866. font-size: 24rpx;
  867. font-family: Verdana, Verdana-Regular;
  868. font-weight: 400;
  869. text-align: left;
  870. color: #ffead8;
  871. }
  872. }
  873. }
  874. .hongbao_right {
  875. width: 140rpx;
  876. height: 56rpx;
  877. line-height: 56rpx;
  878. background: #ffffff;
  879. border-radius: 12rpx;
  880. font-size: 24rpx;
  881. font-family: Verdana, Verdana-Bold;
  882. font-weight: 700;
  883. text-align: center;
  884. color: #f07423;
  885. margin-right: 20rpx;
  886. }
  887. }
  888. .list_item {
  889. width: 100%;
  890. min-height: 280rpx;
  891. border-radius: 16rpx;
  892. display: flex;
  893. position: relative;
  894. margin-top: 20rpx;
  895. .house_img {
  896. width: 200rpx;
  897. height: 240rpx;
  898. min-width: 200rpx;
  899. z-index: 11;
  900. margin-top: 20rpx;
  901. margin-left: 20rpx;
  902. border-radius: 10rpx;
  903. }
  904. .item_content {
  905. display: flex;
  906. flex-direction: column;
  907. margin-left: 50rpx;
  908. z-index: 11;
  909. max-width: 51%;
  910. .house_name {
  911. width: 100%;
  912. word-break:break-all;
  913. font-size: 30rpx;
  914. font-family: Verdana, Verdana-Bold;
  915. font-weight: 700;
  916. text-align: left;
  917. color: #262626;
  918. margin-top: 20rpx;
  919. }
  920. .house_hk {
  921. width: 100%;
  922. font-size: 26rpx;
  923. font-family: Verdana, Verdana-Regular;
  924. font-weight: 400;
  925. text-align: left;
  926. color: #fd8f3c;
  927. margin-top: 8rpx;
  928. .house_hk_{
  929. margin-right: 10rpx;
  930. }
  931. }
  932. .house_address {
  933. width: 100%;
  934. display: flex;
  935. font-size: 24rpx;
  936. font-family: Verdana, Verdana-Regular;
  937. font-weight: 400;
  938. text-align: left;
  939. color: #b1b1b1;
  940. margin-top: 16rpx;
  941. image {
  942. width: 20rpx;
  943. height: 28rpx;
  944. margin-right: 8rpx;
  945. margin-top: 6rpx;
  946. }
  947. text {
  948. width: 80%;
  949. }
  950. }
  951. .house_num {
  952. display: flex;
  953. font-size: 24rpx;
  954. font-family: Verdana, Verdana-Regular;
  955. font-weight: 400;
  956. text-align: left;
  957. color: #b1b1b1;
  958. margin-top: 12rpx;
  959. image {
  960. width: 24rpx;
  961. height: 26rpx;
  962. margin-right: 8rpx;
  963. margin-top: 6rpx;
  964. }
  965. text {
  966. width: 80%;
  967. }
  968. }
  969. .house_desc {
  970. margin-top: 24rpx;
  971. font-size: 24rpx;
  972. font-family: Verdana, Verdana-Regular;
  973. font-weight: 400;
  974. text-align: left;
  975. color: #b1b1b1;
  976. margin-bottom: 20rpx;
  977. word-break:break-all;
  978. }
  979. }
  980. .item_share {
  981. z-index: 11;
  982. display: flex;
  983. flex-direction: column;
  984. width: 70rpx;
  985. height: 100rpx;
  986. background: #f07423;
  987. border-radius: 12rpx;
  988. position: absolute;
  989. right: 0;
  990. top: 50%;
  991. transform: translateY(-50%);
  992. justify-content: center;
  993. align-items: center;
  994. .icon_share {
  995. width: 32rpx;
  996. height: 32rpx;
  997. margin-bottom: 6rpx;
  998. }
  999. .icon_text {
  1000. font-size: 24rpx;
  1001. font-family: Verdana, Verdana-Bold;
  1002. font-weight: 700;
  1003. text-align: center;
  1004. color: #ffffff;
  1005. }
  1006. }
  1007. .item_bg {
  1008. position: absolute;
  1009. left: 0;
  1010. top: 0;
  1011. width: 95%;
  1012. height: 100%;
  1013. background-color: #FFFFFF;
  1014. border-radius: 16rpx;
  1015. z-index: 10;
  1016. }
  1017. }
  1018. }
  1019. }
  1020. .com_noMore_text{
  1021. margin-top: 40rpx;
  1022. font-size: 24rpx;
  1023. font-family: Verdana, Verdana-Regular;
  1024. font-weight: 400;
  1025. text-align: center;
  1026. color: #999999;
  1027. }
  1028. .empty {
  1029. display: flex;
  1030. flex-direction: column;
  1031. align-items: center;
  1032. .emptyImg {
  1033. width: 283rpx;
  1034. height: 227rpx;
  1035. margin-top: 100rpx;
  1036. }
  1037. .text {
  1038. margin-top: -20rpx;
  1039. font-size: 28rpx;
  1040. margin-bottom: 50rpx;
  1041. font-family: PingFang SC, PingFang SC-Medium;
  1042. font-weight: 500;
  1043. text-align: center;
  1044. color: #b1b3ba;
  1045. }
  1046. }
  1047. }
  1048. </style>