model.vue 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973974
  1. <template>
  2. <view class="content mone" v-if="baseURL">
  3. <view class="m-top">
  4. <image :src="baseURL + '/resource/icon/model1/top-base.png'" mode="" class="top-bg"></image>
  5. <!-- <image :src="baseURL + '/resource/icon/model1/resume.png'" mode="" class="readme"></image> -->
  6. <view class="top-user flex">
  7. <image :src="cardInfo.avatar" mode="" class="user-logo"></image>
  8. <!-- <image :src="baseURL + '/resource/icon/model1/jpfw.png'" mode="" class="gp"></image> -->
  9. </view>
  10. <view class="user-name">
  11. {{cardInfo.name || '暂无'}}
  12. </view>
  13. <button type="default" class="top-btn fx-btn" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look" open-type="share">
  14. <image :src="baseURL + '/resource/icon/model1/fx.png'" mode=""></image>
  15. </button>
  16. <!-- 模板查看次数 -->
  17. <view class="top-btn visit mvisit" v-if="look">
  18. 浏览:{{modelInfo.look_count}}
  19. </view>
  20. <!-- 别人查看次数 -->
  21. <view class="top-btn visit">
  22. 浏览:
  23. </view>
  24. </view>
  25. <view class="m-body gr">
  26. <!-- 个人信息 -->
  27. <view class="hua2">
  28. <view class="m-card">
  29. <image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
  30. <view class="card-tit flex">
  31. <image :src="baseURL + '/resource/icon/model1/m1.png'" mode="" class="tit-logo"></image>个人信息
  32. </view>
  33. <view class="card-content">
  34. <view class="user-info flex">
  35. <view class="info-item-b">
  36. 年<text class="qianger"></text>龄: {{cardInfo.age|| '暂无'}}
  37. </view>
  38. <view class="info-item-b">
  39. 属<text class="qianger"></text>相: {{cardInfo.twelve|| '暂无'}}
  40. </view>
  41. <view class="info-item-b">
  42. 从<text class="qianger"></text>业: {{(cardInfo.work_year + '年')|| '暂无'}}
  43. </view>
  44. <view class="info-item-b">
  45. 星<text class="qianger"></text>座: {{cardInfo.constellation || '暂无'}}
  46. </view>
  47. <view class="info-item-b">
  48. 籍<text class="qianger"></text>贯: {{cardInfo.ancestral_place || '暂无'}}
  49. </view>
  50. <view class="info-item-b">
  51. 民<text class="qianger"></text>族: {{cardInfo.minority || '暂无'}}
  52. </view>
  53. <view class="info-item-b">
  54. 学<text class="qianger"></text>历: {{cardInfo.education || '暂无'}}
  55. </view>
  56. <!-- <view class="info-item-b">
  57. 综 <text class="laner"></text> 合<text class="laner"></text>分: 50
  58. </view> -->
  59. <view class="info-item-q flex" style="align-items: flex-start;">
  60. <text style="flex-shrink: 0;">服务地区:</text>
  61. <view class="fwdz flex">
  62. <view v-for="(fwitem,fwindex) in cardInfo.service_area_all">
  63. {{fwitem}}{{fwindex ==(cardInfo.service_area_all.length -1) ?'': '、' }}
  64. </view>
  65. </view>
  66. </view>
  67. <view class="info-item-q flex" style="align-items: flex-start;">
  68. <text style="flex-shrink: 0;">服务价格: </text>
  69. <view class="gzt">
  70. <image :src="baseURL + '/resource/icon/model1/tiao.png'" mode=""></image>
  71. <view class="gzt-price">
  72. <text>{{cardInfo.service_min_price}}</text>元/{{ cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
  73. </view>
  74. <view class=" gzt-price-b">
  75. <text>{{cardInfo.service_max_price}}</text>元/{{cardInfo.service_time_type_title && cardInfo.service_time_type_title.replace('每','')}}
  76. </view>
  77. </view>
  78. <image :src="baseURL + '/resource/icon/model1/yrz.png'" mode="" class="rz" v-if="cardInfo.is_type_audit == 1"></image>
  79. </view>
  80. </view>
  81. </view>
  82. <view class="" style="height: 80rpx;"></view>
  83. </view>
  84. </view>
  85. <!-- 自我评价 -->
  86. <view class="hua4">
  87. <view class="hua3">
  88. <view class="m-card">
  89. <image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
  90. <view class="card-tit flex">
  91. <image :src="baseURL + '/resource/icon/model1/m2.png'" mode="" class="tit-logo"></image>自我评价
  92. </view>
  93. <view class="card-content">
  94. {{cardInfo.service_intro_content}}
  95. </view>
  96. <view class="img-list flex" style="padding-top: 0;">
  97. <image :src="siiitem" mode="" v-for="siiitem in cardInfo.service_intro_imgs"></image>
  98. </view>
  99. </view>
  100. </view>
  101. </view>
  102. <!-- 我的证书 -->
  103. <view class="hua5" v-if="cardInfo.service_audit_imgs && cardInfo.service_audit_imgs.length > 0">
  104. <view class="m-card">
  105. <image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
  106. <view class="card-tit flex">
  107. <image :src="baseURL + '/resource/icon/model1/m3.png'" mode="" class="tit-logo"></image>我的证书
  108. </view>
  109. <view class="img-list flex">
  110. <image :src="saiitem" mode="" v-for="saiitem in cardInfo.service_audit_imgs"></image>
  111. </view>
  112. </view>
  113. </view>
  114. <!-- 服务内容 -->
  115. <view class="hua6">
  116. <view class="m-card">
  117. <image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
  118. <view class="card-tit flex">
  119. <image :src="baseURL + '/resource/icon/model1/m4.png'" mode="" class="tit-logo"></image>服务内容
  120. </view>
  121. <view class="card-content">
  122. <view class="fw" v-for="spaitem in cardInfo.service_project_ar">
  123. <view class="fw-tit">
  124. <text class="yg"></text>{{spaitem.title}}
  125. </view>
  126. <view class="fw-content">
  127. {{spaitem.content}}
  128. </view>
  129. </view>
  130. </view>
  131. </view>
  132. </view>
  133. <!-- 服务照片 -->
  134. <view class="m-card" v-if="cardInfo.service_imgs && cardInfo.service_imgs.length > 0">
  135. <image :src="baseURL + '/resource/icon/model1/card-bg.png'" mode="" class="card-bg"></image>
  136. <view class="card-tit flex">
  137. <image :src="baseURL + '/resource/icon/model1/m5.png'" mode="" class="tit-logo"></image>服务照片
  138. </view>
  139. <view class="img-list flex">
  140. <image :src="siitem" mode="" v-for="siitem in cardInfo.service_imgs"></image>
  141. </view>
  142. </view>
  143. <!-- 底部图片 -->
  144. <image :src="baseURL + '/resource/icon/model1/m-btm.png'" mode="" class="m-btm"></image>
  145. </view>
  146. <view class="create-model-ts">
  147. </view>
  148. <view class="fxmp flex" v-if="!shareId && modelInfo.is_use== 1 && !is_yl && userInfo.work_type_id >0 && !look">
  149. <button class="share" type="default" open-type="share" >
  150. <view class="">
  151. 分享名片
  152. </view>
  153. </button>
  154. <view class="nav-model" @click="navto('/pages/user/model/modelrz?type=1')">
  155. 修改名片
  156. </view>
  157. </view>
  158. <view class="ljrz" v-if="userInfo.work_type_id <=0" @click="navto('/pages/user/model/modelrz?modelid=' + mtype + '&type=2')">
  159. 立即认证
  160. </view>
  161. <view class="create-model flex" v-if="!shareId && !is_yl && userInfo.work_type_id >0 && look">
  162. <view class="price-show">
  163. 模板费用:<text>{{modelInfo.price*1}}</text>
  164. </view>
  165. <view class="to-show" @click="is_yl = true">
  166. 模板预览
  167. </view>
  168. <view class="by-now" @click="gobuy">
  169. 购买使用
  170. </view>
  171. </view>
  172. <view class="yl" v-if="is_yl" @click="is_yl = false">
  173. 结束预览
  174. </view>
  175. </view>
  176. </template>
  177. <script>
  178. import {
  179. mapState,
  180. mapMutations
  181. } from 'vuex';
  182. import {
  183. getUserCardInfo,
  184. getCommonUserCardInfo,
  185. getShowTemplateItem,
  186. subShowTemplateOrder
  187. } from '@/api/model.js'
  188. import {
  189. getUser
  190. } from '@/api/user.js';
  191. export default {
  192. data() {
  193. return {
  194. mtype: 1,
  195. shareId: '',
  196. cardInfo: {},
  197. modelInfo: {},
  198. payType: 'wxpay',
  199. is_yl: false,
  200. look: true,
  201. }
  202. },
  203. onLoad(opt) {
  204. // #ifndef MP
  205. if (opt.spread) {
  206. // 存储其他邀请人
  207. uni.setStorageSync('spread', opt.spread);
  208. }
  209. // #endif
  210. // #ifdef MP
  211. if (opt.scene) {
  212. // 存储小程序邀请人
  213. uni.setStorage({
  214. key: 'spread_code',
  215. data: opt.scene
  216. });
  217. }
  218. // #endif
  219. // this.getUserCardInfo()
  220. this.mtype = opt.mtype
  221. uni.hideShareMenu();
  222. if (opt.look && opt.look == 1) {
  223. uni.showShareMenu();
  224. this.look = false
  225. }
  226. if (opt.uid) {
  227. this.shareId = opt.uid
  228. this.getCommonUserCardInfo(opt.uid)
  229. } else {
  230. this.getShowTemplateItem()
  231. }
  232. },
  233. computed: {
  234. ...mapState(['baseURL']),
  235. ...mapState('user', ['userInfo'])
  236. },
  237. onShow() {
  238. this.getUser()
  239. },
  240. onShareAppMessage(options) {
  241. // 设置菜单中的转发按钮触发转发事件时的转发内容
  242. let pages = getCurrentPages(); //获取加载的页面
  243. let currentPage = pages[pages.length - 1]; //获取当前页面的对象
  244. let url = currentPage.route; //当前页面url
  245. let item = currentPage.options; //如果要获取url中所带的参数可以查看options
  246. let shareObj = {}
  247. shareObj = {
  248. title: this.cardInfo.name + '母婴界数字名片', // 默认是小程序的名称(可以写slogan等)
  249. path: url + '?uid=' + this.userInfo.uid + '&mtype=' + this.mtype, // 默认是当前页面,必须是以‘/’开头的完整路径
  250. imageUrl: '',
  251. success: function(res) {
  252. // 转发成功之后的回调
  253. if (res.errMsg == 'shareAppMessage:ok') {}
  254. },
  255. fail: function() {
  256. // 转发失败之后的回调
  257. if (res.errMsg == 'shareAppMessage:fail cancel') {
  258. // 用户取消转发
  259. } else if (res.errMsg == 'shareAppMessage:fail') {
  260. // 转发失败,其中 detail message 为详细失败信息
  261. }
  262. }
  263. };
  264. console.log(shareObj)
  265. return shareObj;
  266. },
  267. onUnload() {
  268. let pages = getCurrentPages(); //获取加载的页面
  269. let currentPage = pages[pages.length - 2]; //获取当前页面的对象
  270. // console.log(currentPage.route)
  271. if (currentPage.route == 'pages/public/wxLogin') {
  272. uni.switchTab({
  273. url: '/pages/index/index'
  274. })
  275. }
  276. },
  277. onUnload() {
  278. let pages = getCurrentPages(); //获取加载的页面
  279. let currentPage = pages[pages.length - 2]; //获取当前页面的对象
  280. // console.log(currentPage.route)
  281. if (currentPage.route == 'pages/public/wxLogin') {
  282. uni.switchTab({
  283. url: '/pages/index/index'
  284. })
  285. }
  286. },
  287. methods: {
  288. ...mapMutations('user', ['setUserInfo']),
  289. navto(url) {
  290. uni.navigateTo({
  291. url
  292. })
  293. },
  294. getUser() {
  295. const that = this;
  296. getUser({}).then((e) => {
  297. that.setUserInfo(e.data)
  298. if (e.data.work_type_id >0 && that.shareId == '') {
  299. that.getUserCardInfo()
  300. } else {
  301. that.cardInfo = {
  302. name: '佚名',
  303. avatar: 'https://api.myjie.cn/resource/icon/base/f.png',
  304. age: '41',
  305. twelve: '鼠',
  306. work_year: '10',
  307. constellation: '处女座',
  308. ancestral_place: '浙江',
  309. minority: '汉族',
  310. education: '本科',
  311. service_area_all: ['浙江省台州市路桥区'],
  312. service_min_price: 100,
  313. service_max_price: 200,
  314. service_time_type_title: '每小时',
  315. service_intro_content: '高级育婴师证|高级催乳师证|早产儿护理师母婴护理证|金牌月嫂证|产后恢复师证|公共营养师证|月子药膳调理师证|国际宝宝睡眠咨询师证|普通话二级甲等|中央广播电视大学学历|学前教育专业,深耕幼教十年,技能全面,性格活泼,有亲和力,做事干净利落,有很强的责任心。对宝宝有爱心,体贴新手妈妈。专业技能熟练。应急能力强。让家人放心、产妇舒心的坐好月子。',
  316. service_intro_imgs: ['https://api.myjie.cn/resource/icon/base/pj1.png',
  317. 'https://api.myjie.cn/resource/icon/base/pj2.png',
  318. 'https://api.myjie.cn/resource/icon/base/pj3.png',
  319. 'https://api.myjie.cn/resource/icon/base/pj4.png'
  320. ],
  321. service_audit_imgs: ['https://api.myjie.cn/resource/icon/base/zs1.png',
  322. 'https://api.myjie.cn/resource/icon/base/zs2.png',
  323. 'https://api.myjie.cn/resource/icon/base/zs3.png',
  324. 'https://api.myjie.cn/resource/icon/base/zs4.png'
  325. ],
  326. service_project_ar: [{
  327. title: '婴幼儿睡眠管理',
  328. content: '如:日夜颠倒、睡眠不规律、乳头混淆、奶睡、抱睡等问题,帮助宝爸宝妈规律孩子作息、解决婴幼儿喂养困扰,培养良好的生活、学习习惯。'
  329. }, {
  330. title: '特色月子餐',
  331. content: '套用客户的一句话“养眼、养心更养胃”!家常菜、面食、点心、甜品、靓汤、五谷杂粮粥、婴幼儿花样辅食等。'
  332. },
  333. {
  334. title: '早产儿特殊护理',
  335. content: '包括早产儿基础护理、安全喂养方法、追赶性生长、消化与免疫系统等技能,根据宝宝具体情况给予早产儿家长的科学入户指导。'
  336. },
  337. {
  338. title: '0-6岁早期教育',
  339. content: '在婴孩最敏感最能接受的时期进行事半功倍的适时教育,针对不同年龄段的孩子,开发婴幼儿潜能的教育,为孩子多元化和健康人格打下良好基础。'
  340. }
  341. ],
  342. is_type_audit: 1
  343. }
  344. }
  345. }).catch((e) => {})
  346. },
  347. gobuy() {
  348. let that = this
  349. subShowTemplateOrder({
  350. id: that.mtype,
  351. pay_type: that.payType
  352. }).then(res => {
  353. let da = res.data.jsApiParameters;
  354. let data = {
  355. appId: da.appId,
  356. // #ifdef H5
  357. timestamp: da.timeStamp,
  358. // #endif
  359. // #ifdef MP
  360. timeStamp: da.timeStamp + '',
  361. // #endif
  362. nonceStr: da.nonceStr,
  363. package: da.package,
  364. signType: da.signType,
  365. paySign: da.paySign,
  366. success: function(res) {
  367. // obj.paySuccessTo();
  368. // alert('支付成功')
  369. uni.showModal({
  370. title: '提示',
  371. content: '支付成功!',
  372. cancelText: '关闭',
  373. confirmText: '查看模板',
  374. success: res => {
  375. if (res.confirm) {
  376. uni.reLaunch({
  377. url: '/pages/user/model/model?mtype=' +
  378. that.mtype,
  379. });
  380. }
  381. },
  382. fail: () => {},
  383. complete: () => {}
  384. });
  385. console.log('支付成功')
  386. },
  387. fail: (err) => {
  388. console.log(err)
  389. // alert('支付失败')
  390. // uni.navigateTo({
  391. // url: '/pages/order/order?state=0'
  392. // });
  393. }
  394. };
  395. console.log(data, 'timeStamp')
  396. if (that.payType == 'wxpay') {
  397. console.log('到这里')
  398. wx.requestPayment(data)
  399. }
  400. })
  401. },
  402. // 获取模板详情
  403. getShowTemplateItem() {
  404. let that = this
  405. getShowTemplateItem({
  406. id: that.mtype
  407. }).then(res => {
  408. that.modelInfo = res.data
  409. })
  410. },
  411. getCommonUserCardInfo(uid) {
  412. let that = this
  413. getCommonUserCardInfo({
  414. uid: uid
  415. }).then(res => {
  416. let arr = []
  417. let basearr = res.data.service_area_all
  418. basearr.forEach(item => {
  419. arr.push(item[0].name + item[1].name + item[2].name)
  420. })
  421. res.data.service_area_all = arr
  422. that.cardInfo = res.data
  423. })
  424. },
  425. getUserCardInfo() {
  426. let that = this
  427. getUserCardInfo().then(res => {
  428. console.log(res)
  429. let arr = []
  430. let basearr = res.data.service_area_all
  431. basearr.forEach(item => {
  432. arr.push(item[0].name + item[1].name + item[2].name)
  433. })
  434. res.data.service_area_all = arr
  435. that.cardInfo = res.data
  436. })
  437. }
  438. }
  439. }
  440. </script>
  441. <style lang="scss">
  442. .mone {
  443. background-color: #f8e1df;
  444. .m-top {
  445. width: 750rpx;
  446. position: relative;
  447. width: 750rpx;
  448. height: 370rpx;
  449. .top-bg {
  450. position: relative;
  451. width: 750rpx;
  452. height: 370rpx;
  453. }
  454. .readme {
  455. width: 534rpx;
  456. height: 83rpx;
  457. position: absolute;
  458. top: 172rpx;
  459. left: 0;
  460. right: 0;
  461. margin: auto;
  462. }
  463. .top-user {
  464. width: 222rpx;
  465. height: 222rpx;
  466. background: #FEFEFE;
  467. box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(50, 50, 52, 0.06);
  468. border-radius: 50%;
  469. position: absolute;
  470. left: 0;
  471. right: 0;
  472. top: 80rpx;
  473. justify-content: center;
  474. align-items: center;
  475. margin: auto;
  476. .user-logo {
  477. width: 200rpx;
  478. height: 200rpx;
  479. border-radius: 50%;
  480. background-color: #fff;
  481. }
  482. .gp {
  483. width: 133rpx;
  484. height: 38rpx;
  485. position: absolute;
  486. bottom: 0;
  487. left: 0;
  488. right: 0;
  489. margin: auto;
  490. }
  491. }
  492. .user-name {
  493. width: 750rpx;
  494. font-size: 38rpx;
  495. font-weight: bold;
  496. color: #000000;
  497. text-align: center;
  498. position: absolute;
  499. top: 318rpx;
  500. }
  501. .fx-btn {
  502. padding: 0;
  503. &::after {
  504. border: none;
  505. }
  506. border-radius: 24rpx 0 0 24rpx;
  507. image {
  508. width: 150rpx;
  509. height: 48rpx;
  510. display: block;
  511. }
  512. }
  513. .top-btn {
  514. width: 150rpx;
  515. height: 48rpx;
  516. position: absolute;
  517. right: 0;
  518. top: 70rpx;
  519. line-height: 48rpx;
  520. font-size: 24rpx;
  521. }
  522. .visit {
  523. border-radius: 24rpx 0 0 24rpx;
  524. top: 130rpx;
  525. border:1px solid #f65486;
  526. color: #f65486;
  527. padding-left: 24rpx;
  528. }
  529. }
  530. }
  531. .m-body {
  532. width: 705rpx;
  533. margin: auto;
  534. margin-top: 20rpx;
  535. background-color: #fff;
  536. border-left: 8rpx solid #efa0ab;
  537. border-right: 8rpx solid #efa0ab;
  538. padding: 45rpx 0;
  539. }
  540. .gr {
  541. position: relative;
  542. &::before {
  543. content: '';
  544. position: absolute;
  545. // left: 75px;
  546. right: 0;
  547. top: -30rpx;
  548. width: 120px;
  549. height: 174px;
  550. background: url('https://api.myjie.cn/resource/icon/model1/hua1.png') no-repeat;
  551. background-size: 100% 100%;
  552. }
  553. }
  554. .m-card {
  555. width: 640rpx;
  556. background: #fcf4f1;
  557. border-radius: 20rpx;
  558. position: relative;
  559. // min-height: 270rpx;
  560. margin: 0 auto 46rpx;
  561. .card-tit {
  562. width: 219rpx;
  563. height: 57rpx;
  564. background: #F46C85;
  565. border-radius: 20rpx 28rpx 29rpx 0rpx;
  566. justify-content: flex-start;
  567. align-items: center;
  568. padding: 0 20rpx;
  569. font-size: 32rpx;
  570. font-weight: bold;
  571. color: #FFFFFF;
  572. .tit-logo {
  573. width: 32rpx;
  574. height: 32rpx;
  575. margin-right: 18rpx;
  576. }
  577. }
  578. .card-bg {
  579. width: 100%;
  580. height: 270rpx;
  581. position: absolute;
  582. bottom: 0rpx;
  583. }
  584. .card-content {
  585. padding: 25rpx 35rpx;
  586. font-size: 26rpx;
  587. font-weight: 500;
  588. color: #2C2E35;
  589. position: relative;
  590. }
  591. .img-list {
  592. justify-content: space-between;
  593. flex-wrap: wrap;
  594. margin: auto;
  595. padding: 30rpx 30rpx 0;
  596. position: relative;
  597. image {
  598. width: 270rpx;
  599. height: 270rpx;
  600. background-color: #fff;
  601. margin-bottom: 30rpx;
  602. box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.6);
  603. }
  604. }
  605. .fw {
  606. font-size: 26rpx;
  607. font-weight: 500;
  608. color: #2C2E35;
  609. padding: 10rpx 0;
  610. .fw-tit {
  611. color: #F46C85;
  612. display: flex;
  613. align-items: center;
  614. .yg {
  615. background-color: #F46C85;
  616. display: inline-block;
  617. width: 10rpx;
  618. height: 10rpx;
  619. border-radius: 50%;
  620. margin-right: 10rpx;
  621. }
  622. }
  623. .fw-content {
  624. padding-top: 10rpx;
  625. padding-left: 18rpx;
  626. text-align: justify;
  627. }
  628. }
  629. .user-info {
  630. flex-wrap: wrap;
  631. font-size: 26rpx;
  632. font-weight: 500;
  633. color: #000000;
  634. position: relative;
  635. .info-item-b,
  636. .info-item-q {
  637. padding: 10rpx 0;
  638. color: #000000;
  639. position: relative;
  640. padding-left: 20rpx;
  641. &::before {
  642. display: inline-block;
  643. content: '';
  644. width: 10rpx;
  645. height: 10rpx;
  646. border-radius: 50%;
  647. background-color: #F46C85;
  648. position: absolute;
  649. top: 22rpx;
  650. left: 0;
  651. }
  652. .qianger {
  653. width: 2em;
  654. display: inline-block;
  655. }
  656. .laner {
  657. width: 0.5em;
  658. display: inline-block;
  659. }
  660. }
  661. .info-item-b {
  662. width: 50%;
  663. }
  664. .info-item-q {
  665. width: 100%;
  666. display: flex;
  667. align-items: flex-start;
  668. justify-content: start;
  669. .fwdz {
  670. flex-direction: column;
  671. align-items: flex-start;
  672. }
  673. .gzt {
  674. width: 312rpx;
  675. height: 24rpx;
  676. padding-top: 10rpx;
  677. position: relative;
  678. image {
  679. width: 312rpx;
  680. height: 24rpx;
  681. position: relative;
  682. }
  683. .gzt-price,
  684. .gzt-price-b {
  685. width: 200rpx;
  686. text-align: center;
  687. position: absolute;
  688. padding-top: 20rpx;
  689. &::after {
  690. content: '';
  691. width: 0px;
  692. height: 0rpx;
  693. // background: #FEB8C6;
  694. border: 14rpx solid;
  695. border-color: transparent transparent #FEB8C6;
  696. // border-top:transparent;
  697. // border-left: transparent;
  698. // border-right: transparent;
  699. position: absolute;
  700. top: -14rpx;
  701. left: 0;
  702. right: 0;
  703. margin: auto;
  704. }
  705. text {
  706. color: #F46C85;
  707. }
  708. }
  709. .gzt-price {
  710. left: -100rpx;
  711. }
  712. .gzt-price-b {
  713. right: -100rpx;
  714. }
  715. }
  716. .rz {
  717. margin-top: 10rpx;
  718. margin-left: 10rpx;
  719. width: 87rpx;
  720. height: 26rpx;
  721. }
  722. }
  723. }
  724. }
  725. .m-btm {
  726. width: 660rpx;
  727. height: 384rpx;
  728. }
  729. .hua2 {
  730. position: relative;
  731. &::before {
  732. content: '';
  733. width: 199rpx;
  734. height: 298rpx;
  735. background: url('https://api.myjie.cn/resource/icon/model1/hua2.png') no-repeat;
  736. position: absolute;
  737. bottom: -100rpx;
  738. right: 0;
  739. background-size: 100% 100%;
  740. }
  741. }
  742. .hua3 {
  743. position: relative;
  744. &::before {
  745. content: '';
  746. width: 192rpx;
  747. height: 223rpx;
  748. background: url('https://api.myjie.cn/resource/icon/model1/hua3.png') no-repeat;
  749. position: absolute;
  750. top: 0;
  751. bottom: 0;
  752. left: 0;
  753. margin: auto;
  754. background-size: 100% 100%;
  755. }
  756. }
  757. .hua4 {
  758. position: relative;
  759. &::before {
  760. content: '';
  761. width: 128rpx;
  762. height: 145rpx;
  763. background: url('https://api.myjie.cn/resource/icon/model1/hua4.png') no-repeat;
  764. position: absolute;
  765. bottom: -70rpx;
  766. right: 0;
  767. background-size: 100% 100%;
  768. }
  769. }
  770. .hua5 {
  771. position: relative;
  772. &::before {
  773. content: '';
  774. width: 199rpx;
  775. height: 298rpx;
  776. background: url('https://api.myjie.cn/resource/icon/model1/hua2.png') no-repeat;
  777. position: absolute;
  778. bottom: -100rpx;
  779. left: 0;
  780. background-size: 100% 100%;
  781. transform: rotateY(180deg);
  782. }
  783. }
  784. .hua6 {
  785. position: relative;
  786. &::before {
  787. content: '';
  788. width: 192rpx;
  789. height: 223rpx;
  790. background: url('https://api.myjie.cn/resource/icon/model1/hua3.png') no-repeat;
  791. position: absolute;
  792. bottom: -110rpx;
  793. right: 0;
  794. background-size: 100% 100%;
  795. transform: rotateY(180deg);
  796. }
  797. }
  798. .create-model-ts {
  799. width: 750rpx;
  800. height: 30rpx;
  801. }
  802. .fxmp {
  803. width: 750rpx;
  804. .share {
  805. width: 50%;
  806. padding: 0;
  807. border-radius: 0;
  808. &::after {
  809. border: none;
  810. }
  811. }
  812. .nav-model {
  813. background-color: #FFF;
  814. color: $base-color;
  815. width: 50%;
  816. }
  817. }
  818. .fxmp {
  819. position: fixed;
  820. width: 750rpx;
  821. height: 78rpx;
  822. bottom: 0;
  823. padding: 0;
  824. view {
  825. background: #f65486;
  826. // border-radius: 5rpx;
  827. font-size: 30rpx;
  828. font-weight: 500;
  829. color: #FFFFFF;
  830. text-align: center;
  831. line-height: 78rpx;
  832. }
  833. }
  834. .create-model {
  835. position: fixed;
  836. width: 750rpx;
  837. bottom: 0;
  838. // border-radius: 5rpx;
  839. font-size: 32rpx;
  840. font-weight: 500;
  841. text-align: center;
  842. line-height: 98rpx;
  843. .price-show {
  844. font-size: 32rpx;
  845. font-weight: 500;
  846. color: #333333;
  847. background-color: #fff;
  848. flex-grow: 1;
  849. text {
  850. font-size: 48rpx;
  851. font-weight: 500;
  852. color: #FC6F6D;
  853. }
  854. }
  855. .to-show,
  856. .by-now {
  857. width: 223rpx;
  858. height: 98rpx;
  859. background: #fa98b6;
  860. flex-shrink: 0;
  861. font-size: 34rpx;
  862. color: #fff;
  863. }
  864. .by-now {
  865. background: #f65486;
  866. }
  867. }
  868. .yl {
  869. position: fixed;
  870. bottom: 0;
  871. width: 750rpx;
  872. font-size: 32rpx;
  873. font-weight: 500;
  874. text-align: center;
  875. line-height: 98rpx;
  876. color: #fff;
  877. text-align: center;
  878. font-size: 34rpx;
  879. background-color: #f65486;
  880. }
  881. .ljrz {
  882. position: fixed;
  883. width: 750rpx;
  884. bottom: 0;
  885. font-size: 32rpx;
  886. font-weight: 500;
  887. text-align: center;
  888. line-height: 98rpx;
  889. background-color: #f65486;
  890. color: #fff;
  891. }
  892. </style>