index.vue 22 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940941942943944945946947948949950951952953954955956957958959960961962963964965966967968969970971972973
  1. <template>
  2. <view class="">
  3. <view class="box">
  4. <!-- <u-navbar title="个人中心" :placeholder="true" bgColor="rgba(255,255,255,0.3)" :leftIconSize="0" titleStyle="font-weight:bold;color:#7a5831"></u-navbar> -->
  5. <view class="group_1">
  6. <view class="group_6">
  7. <view class="group_7">
  8. <view @click="modifyShow = true" class="section_14">
  9. <view class="single-avatar_1">
  10. <image style="width: 100%; height: 100%; border-radius: 50%" :src="userAvatar" class=""></image>
  11. </view>
  12. <text lines="1" class="text_9">{{ userNickname }}</text>
  13. <view style="position: absolute; right: 50rpx; top: 190rpx">
  14. <u-icon name="arrow-right" color="#312520" size="24"></u-icon>
  15. </view>
  16. </view>
  17. <view class="mn_wd">
  18. <view v-for="(item, index) in myLike" :key="item.id" class="" @click="myLiktBtn(index)">
  19. <view class="md_item_wd">
  20. <uni-icons :type="item.type" :color="item.color" size="25"></uni-icons>
  21. </view>
  22. <view style="margin-top: 10rpx">{{ item.title }}</view>
  23. </view>
  24. </view>
  25. <!-- 订单管理 -->
  26. <view class="mn_dd">
  27. <view class="block_9">
  28. <view class="image-text_15">
  29. <uni-icons type="cart-filled" color="#312520" size="24"></uni-icons>
  30. <text lines="1" class="text-group_4">订单管理</text>
  31. </view>
  32. <text lines="1" class="text_10">查看更多》</text>
  33. </view>
  34. </view>
  35. <view class="mn_dd_item">
  36. <view class="juli">
  37. <view style="margin-bottom: 10rpx">待付款</view>
  38. <view class="">
  39. <uni-icons type="wallet" color="#ca5642" size="25"></uni-icons>
  40. </view>
  41. </view>
  42. <view class="juli">
  43. <view style="margin-bottom: 10rpx">待收货</view>
  44. <view class="">
  45. <uni-icons type="wallet-filled" color="#ca5642" size="25"></uni-icons>
  46. </view>
  47. </view>
  48. <view class="juli">
  49. <view style="margin-bottom: 10rpx">待评价</view>
  50. <view class="">
  51. <uni-icons type="chat-filled" color="#ca5642" size="25"></uni-icons>
  52. </view>
  53. </view>
  54. <view class="juli">
  55. <view style="margin-bottom: 10rpx">已完成</view>
  56. <view class="">
  57. <uni-icons type="checkbox-filled" color="#ca5642" size="25"></uni-icons>
  58. </view>
  59. </view>
  60. <view class="juli">
  61. <view style="margin-bottom: 10rpx">售后</view>
  62. <view class="">
  63. <uni-icons type="headphones" color="#ca5642" size="25"></uni-icons>
  64. </view>
  65. </view>
  66. </view>
  67. <!-- 订单管理 -->
  68. </view>
  69. <view class="image-text_14">
  70. <u-icon name="bookmark" color="#312520" size="24"></u-icon>
  71. <text lines="1" class="text-group_1">文化之路</text>
  72. </view>
  73. <view class="group_11">
  74. <!-- <view class="" style="background-color: rgba(255, 255, 255, 1)"> -->
  75. <view class="block_8">
  76. <view class="group_12"></view>
  77. <text lines="1" class="text_16">已参加课程</text>
  78. <text lines="1" class="text_17">查看更多》</text>
  79. </view>
  80. <!-- 已参加课程 -->
  81. <view class="section_5" v-for="item in 2" :key="item">
  82. <view class="section_6">
  83. <image style="width: 100%; height: 100%; border-radius: 10rpx" src="../../static/image/mn.png"></image>
  84. </view>
  85. <view class="group_21">
  86. <text lines="1" class="text_18">1天前</text>
  87. <text lines="1" class="text_19">青少年闽南话讲古传承红色历史</text>
  88. <view class="" style="margin-top: 18rpx">
  89. <u-line-progress :showText="false" height="4" :percentage="30" activeColor="#CA5642"></u-line-progress>
  90. </view>
  91. </view>
  92. </view>
  93. <!-- </view> -->
  94. <!-- 已参加课程end -->
  95. <!-- 已参加活动 -->
  96. <view class="section_9"></view>
  97. <view class="section_10">
  98. <view class="box_18">
  99. <view class="group_13"></view>
  100. <text lines="1" class="text_22">已参加活动</text>
  101. <text lines="1" class="text_23">查看更多》</text>
  102. </view>
  103. <view class="box_7" v-for="item in 2" :key="item">
  104. <view class="group_14">
  105. <image style="width: 100%; height: 100%; border-radius: 10rpx" src="../../static/image/hd.png"></image>
  106. </view>
  107. <view class="text-wrapper_11">
  108. <text lines="1" class="text_24">活动未开始</text>
  109. <text lines="1" class="text_25">非遗大课堂·漆线雕丨盘它!</text>
  110. </view>
  111. </view>
  112. </view>
  113. <!-- 已参加活动end -->
  114. <!-- 已分享文章 -->
  115. <view class="section_9"></view>
  116. <view class="section_12">
  117. <view class="box_19">
  118. <view class="box_10"></view>
  119. <text lines="1" class="text_28">已分享文章</text>
  120. <text lines="1" class="text_29">查看更多》</text>
  121. </view>
  122. <view class="group_16" v-for="item in 2" :key="item">
  123. <view class="block_5"><image style="width: 100%; height: 100%; border-radius: 10rpx" src="../../static/image/fx.png"></image></view>
  124. <view class="text-wrapper_13">
  125. <text lines="1" class="text_30">1天前</text>
  126. <text lines="1" class="text_31">国家级“非遗”邂逅“闽南儿歌”</text>
  127. </view>
  128. </view>
  129. </view>
  130. </view>
  131. <!-- 已分享文章end -->
  132. <!-- 文化收藏 -->
  133. <view class="block_9">
  134. <view class="image-text_15">
  135. <u-icon name="bookmark" color="#312520" size="24"></u-icon>
  136. <text lines="1" class="text-group_4">文化收藏</text>
  137. </view>
  138. <text lines="1" class="text_10">查看更多》</text>
  139. </view>
  140. <view class="block_10">
  141. <view class="block_4">
  142. <view class="text-wrapper_1">
  143. <text lines="1" class="text_11">非遗文化</text>
  144. </view>
  145. </view>
  146. <view class="block_4">
  147. <view class="text-wrapper_1">
  148. <text lines="1" class="text_11">非遗文化</text>
  149. </view>
  150. </view>
  151. </view>
  152. <!-- 文化收藏end -->
  153. </view>
  154. <!-- 文化笔记 -->
  155. <view class="block_11">
  156. <view class="image-text_16">
  157. <u-icon name="bookmark" color="#312520" size="24"></u-icon>
  158. <text lines="1" class="text-group_5">文化笔记</text>
  159. </view>
  160. <text lines="1" class="text_13">查看更多》</text>
  161. </view>
  162. <view class="group_23">
  163. <view class="list_8" v-for="item in 2" :key="item">
  164. <view class="list-items_3-0">
  165. <view class="image-text_17-0">
  166. <!-- 六边形 -->
  167. <text lines="1" class="text-group_6-0">闽南传统工艺蔡氏漆线雕</text>
  168. </view>
  169. <text lines="1" class="text_14-0">厦门漆线雕技艺形成于明末清初,至晚清逐渐成熟,是厦门传统的手工线雕技艺。</text>
  170. <text lines="1" decode="true" class="text_15-0">2023年05月23日&nbsp;20:14</text>
  171. </view>
  172. </view>
  173. <!-- 文化笔记end -->
  174. </view>
  175. </view>
  176. <u-popup :show="modifyShow" mode="bottom">
  177. <view class="ziLiao">
  178. <button open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
  179. <image style="width: 100rpx; height: 100rpx" :src="userAvatar"></image>
  180. </button>
  181. <input class="ipt" @change="blurname" v-model="userNickname" type="nickname" placeholder="请输入昵称" />
  182. <button class="isOK" type="primary" @click="isOk">确定</button>
  183. </view>
  184. </u-popup>
  185. <mntabBar footerTab="4" :messageCount="0"></mntabBar>
  186. </view>
  187. </view>
  188. </template>
  189. <script>
  190. var _token = '';
  191. var _this;
  192. import { uploadImage } from '@/service/api/common.js';
  193. import { mapState } from 'vuex';
  194. export default {
  195. components: {},
  196. data() {
  197. return {
  198. id: '',
  199. body_id: '',
  200. modifyShow: false /*修改资料 */,
  201. isLogin: false,
  202. show: false,
  203. user: {
  204. nickname: '',
  205. avatar: 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'
  206. },
  207. mainBodyUserInfo: {},
  208. avatarUrl: '',
  209. getFace: false,
  210. myLike: [
  211. {
  212. title: '我的投稿',
  213. id: 0,
  214. type: 'upload-filled',
  215. color: '#329fff'
  216. },
  217. {
  218. title: '我的收藏',
  219. id: 1,
  220. type: 'star-filled',
  221. color: '#ff9617'
  222. },
  223. {
  224. title: '我的喜欢',
  225. id: 2,
  226. type: 'heart-filled',
  227. color: '#ff6644'
  228. }
  229. ]
  230. };
  231. },
  232. onShow() {
  233. this.mainBodyUserInfo = this.$db.get('mainBodyUserInfo');
  234. this.id = this.mainBodyUserInfo.id;
  235. this.body_id = this.$db.get('main_body_id');
  236. this.refreshUser();
  237. /* 调用userInfo()从本地获取用户信息 */
  238. this.user = this.$common.userInfo();
  239. if (this.user && this.user.nickname.indexOf('微信') >= 0) {
  240. this.getFace = true;
  241. }
  242. },
  243. onLoad(option) {
  244. /* 来到我的页面判断用户是否登录 */
  245. _this = this;
  246. this.user = this.$common.userInfo();
  247. this.mainBodyUserInfo = this.$db.get('mainBodyUserInfo');
  248. console.log(this.user, 9999999999);
  249. if (this.user === 'undefined' || this.user === '' || this.user === [] || this.user === null) {
  250. /* 跳转到登录页 */
  251. this.$common.toLogin();
  252. } else {
  253. /* 刷新 */
  254. // this.refreshUser();
  255. this.isLogin = true;
  256. }
  257. },
  258. computed: {
  259. userAvatar() {
  260. return this.user.avatar || 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0';
  261. },
  262. userNickname() {
  263. return this.mainBodyUserInfo.nickname ? this.mainBodyUserInfo.nickname : this.user.nickname;
  264. }
  265. },
  266. methods: {
  267. // 刷新信息
  268. refreshUser() {
  269. this.$api.refreshUser(
  270. {
  271. main_body_id: this.body_id
  272. // main_body_user_id: this.id
  273. },
  274. (val) => {
  275. console.log(val, '刷新成功');
  276. if (val.code == 401) {
  277. this.$common.navigateTo('/pages/user/login');
  278. return;
  279. }
  280. _this.user = val.data.user;
  281. _this.avatarUrl = _this.user.avatar;
  282. _this.auth = val.data.auth;
  283. _this.$db.set('user', val.data.user);
  284. _this.$db.set('auth', val.data.auth);
  285. _this.$db.set('mainBodyUserInfo', val.data.mainBodyUserInfo);
  286. }
  287. );
  288. },
  289. // 获取头像
  290. onChooseAvatar(e) {
  291. this.user.avatar = e.detail.avatarUrl;
  292. _this.$db.set('user', _this.user);
  293. },
  294. // 获取昵称
  295. blurname(e) {
  296. this.mainBodyUserInfo.nickname = e.detail.value;
  297. },
  298. isOk() {
  299. this.modifyShow = false;
  300. // 修改信息
  301. this.$api.editMainBodyUser(
  302. {
  303. main_body_id: this.body_id,
  304. main_body_user_id: this.id,
  305. nickname: this.mainBodyUserInfo.nickname,
  306. avatar: this.user.avatar
  307. },
  308. function (res) {
  309. if (res.code == 1) {
  310. _this.$common.successToShow('修改成功');
  311. _this.$db.set('user', _this.user);
  312. _this.$db.set('mainBodyUserInfo', _this.mainBodyUserInfo);
  313. }
  314. }
  315. );
  316. },
  317. myLiktBtn(i) {
  318. uni.navigateTo({
  319. url: '/user_fenbao/myLike?id=' + this.myLike[i].id
  320. });
  321. },
  322. // 积分
  323. jifenBtn() {
  324. uni.navigateTo({
  325. url: '/user_fenbao/cs_fenbao/jiFen/jiFen'
  326. });
  327. }
  328. }
  329. };
  330. </script>
  331. <style>
  332. .mn_wd {
  333. display: flex;
  334. justify-content: space-between;
  335. align-items: center;
  336. background: #ffffff;
  337. padding: 35rpx;
  338. border-radius: 20rpx;
  339. margin: 20rpx 32rpx 0 32rpx;
  340. }
  341. .ipt {
  342. height: 60rpx;
  343. border: 1px solid #efefef;
  344. }
  345. .isOK {
  346. margin-top: 30rpx;
  347. }
  348. .md_item_wd {
  349. text-align: center;
  350. }
  351. .mn_dd {
  352. margin-bottom: 20rpx;
  353. }
  354. .mn_dd_item {
  355. padding: 35rpx;
  356. display: flex;
  357. justify-content: space-around;
  358. background-color: #ffffff;
  359. border-radius: 20rpx;
  360. }
  361. .juli {
  362. text-align: center;
  363. }
  364. .box {
  365. height: auto;
  366. width: 100%;
  367. /* background-image: url('https://huli-app.wenlvti.net/app_static/wuyuan/static/shouhu/wyj-feiyi3-001.png'); */
  368. /* background-size: 100% 100%; */
  369. background-color: #f0f2f5;
  370. background-attachment: fixed;
  371. border-radius: 16px 16px 0 0;
  372. position: relative;
  373. display: flex;
  374. flex-direction: column;
  375. }
  376. /* .u-icon__icon.data-v-2ee87dc9 {
  377. left: 200rpx;
  378. } */
  379. .fenge {
  380. width: 638rpx;
  381. height: 1rpx;
  382. background: #dedede;
  383. margin: auto;
  384. }
  385. .group_1 {
  386. width: 750rpx;
  387. display: flex;
  388. flex-direction: column;
  389. }
  390. .section_9 {
  391. background-color: #f8f8f8;
  392. border-radius: 15rpx;
  393. width: 640rpx;
  394. height: 30rpx;
  395. display: flex;
  396. flex-direction: column;
  397. margin: 30rpx 0 0 25rpx;
  398. }
  399. .group_6 {
  400. background-color: rgba(248, 248, 248, 1);
  401. width: 750rpx;
  402. display: flex;
  403. flex-direction: column;
  404. }
  405. .group_7 {
  406. position: relative;
  407. width: 750rpx;
  408. height: 452rpx;
  409. background: linear-gradient(180deg, #ffe7ba, #f8f8f8);
  410. display: flex;
  411. flex-direction: column;
  412. }
  413. .section_14 {
  414. width: 674rpx;
  415. height: 120rpx;
  416. flex-direction: row;
  417. display: flex;
  418. margin: 150rpx 0 0 45rpx;
  419. }
  420. .single-avatar_1 {
  421. width: 120rpx;
  422. height: 120rpx;
  423. border-radius: 50%;
  424. }
  425. .text_9 {
  426. width: 243rpx;
  427. height: 40rpx;
  428. overflow-wrap: break-word;
  429. color: rgba(49, 37, 32, 1);
  430. font-size: 42rpx;
  431. font-family: SourceHanSansCN-Regular;
  432. font-weight: normal;
  433. text-align: left;
  434. white-space: nowrap;
  435. line-height: 42rpx;
  436. margin: 41rpx 0 0 35rpx;
  437. }
  438. .icon_2-0 {
  439. width: 15rpx;
  440. height: 25rpx;
  441. margin: 39rpx 35rpx 0 493rpx;
  442. }
  443. .image-text_14 {
  444. width: 160rpx;
  445. height: 32rpx;
  446. flex-direction: row;
  447. display: flex;
  448. justify-content: space-between;
  449. margin: 300rpx 0 0 53rpx;
  450. }
  451. xt-group_3 {
  452. width: 119rpx;
  453. height: 29rpx;
  454. overflow-wrap: break-word;
  455. color: rgba(49, 37, 32, 1);
  456. font-size: 30rpx;
  457. font-family: SourceHanSansCN-Bold;
  458. font-weight: 700;
  459. text-align: left;
  460. white-space: nowrap;
  461. line-height: 30rpx;
  462. margin-top: 2rpx;
  463. }
  464. .group_11 {
  465. background-color: rgba(255, 255, 255, 1);
  466. border-radius: 20rpx;
  467. width: 690rpx;
  468. display: flex;
  469. flex-direction: column;
  470. justify-content: flex-end;
  471. margin: 23rpx 0 0 30rpx;
  472. }
  473. .block_8 {
  474. width: 671rpx;
  475. height: 41rpx;
  476. margin-top: 24rpx;
  477. flex-direction: row;
  478. display: flex;
  479. }
  480. .group_12 {
  481. background-color: rgba(202, 86, 66, 1);
  482. width: 8rpx;
  483. height: 41rpx;
  484. display: flex;
  485. flex-direction: column;
  486. }
  487. .text_16 {
  488. width: 137rpx;
  489. height: 27rpx;
  490. overflow-wrap: break-word;
  491. color: rgba(49, 37, 32, 1);
  492. font-size: 28rpx;
  493. font-family: SourceHanSansCN-Regular;
  494. font-weight: normal;
  495. text-align: left;
  496. white-space: nowrap;
  497. line-height: 28rpx;
  498. margin: 7rpx 0 0 17rpx;
  499. }
  500. .text_17 {
  501. width: 89rpx;
  502. height: 20rpx;
  503. overflow-wrap: break-word;
  504. color: rgba(18, 18, 18, 1);
  505. font-size: 22rpx;
  506. font-family: SourceHanSansCN-Regular;
  507. font-weight: normal;
  508. text-align: left;
  509. white-space: nowrap;
  510. line-height: 22rpx;
  511. margin: 10rpx 0 0 420rpx;
  512. }
  513. .section_5 {
  514. background-color: rgba(255, 255, 255, 1);
  515. border-radius: 10rpx;
  516. width: 690rpx;
  517. margin-top: 1rpx;
  518. flex-direction: row;
  519. display: flex;
  520. }
  521. .section_6 {
  522. background-color: rgba(202, 86, 66, 1);
  523. border-radius: 10rpx;
  524. width: 199rpx;
  525. height: 111rpx;
  526. display: flex;
  527. flex-direction: column;
  528. margin: 29rpx 0 0 25rpx;
  529. }
  530. .group_21 {
  531. width: 335rpx;
  532. height: 95rpx;
  533. display: flex;
  534. flex-direction: column;
  535. margin: 42rpx 113rpx 0 18rpx;
  536. }
  537. .text_18 {
  538. width: 59rpx;
  539. height: 23rpx;
  540. overflow-wrap: break-word;
  541. color: rgba(153, 153, 153, 1);
  542. font-size: 24rpx;
  543. font-family: SourceHanSansCN-Regular;
  544. font-weight: normal;
  545. text-align: left;
  546. white-space: nowrap;
  547. line-height: 24rpx;
  548. margin-left: 1rpx;
  549. }
  550. .text_19 {
  551. width: 335rpx;
  552. height: 24rpx;
  553. overflow-wrap: break-word;
  554. color: rgba(49, 37, 32, 1);
  555. font-size: 24rpx;
  556. font-family: SourceHanSansCN-Bold;
  557. font-weight: 700;
  558. text-align: left;
  559. white-space: nowrap;
  560. line-height: 24rpx;
  561. margin-top: 24rpx;
  562. }
  563. .section_10 {
  564. background-color: rgba(255, 255, 255, 1);
  565. border-radius: 20rpx;
  566. width: 690rpx;
  567. margin-top: 20rpx;
  568. display: flex;
  569. flex-direction: column;
  570. }
  571. .box_18 {
  572. width: 671rpx;
  573. height: 41rpx;
  574. margin-top: 24rpx;
  575. flex-direction: row;
  576. display: flex;
  577. }
  578. .group_13 {
  579. background-color: rgba(202, 86, 66, 1);
  580. width: 8rpx;
  581. height: 41rpx;
  582. display: flex;
  583. flex-direction: column;
  584. }
  585. .text_22 {
  586. width: 136rpx;
  587. height: 27rpx;
  588. overflow-wrap: break-word;
  589. color: rgba(49, 37, 32, 1);
  590. font-size: 28rpx;
  591. font-family: SourceHanSansCN-Regular;
  592. font-weight: normal;
  593. text-align: left;
  594. white-space: nowrap;
  595. line-height: 28rpx;
  596. margin: 7rpx 0 0 17rpx;
  597. }
  598. .text_23 {
  599. width: 89rpx;
  600. height: 20rpx;
  601. overflow-wrap: break-word;
  602. color: rgba(18, 18, 18, 1);
  603. font-size: 22rpx;
  604. font-family: SourceHanSansCN-Regular;
  605. font-weight: normal;
  606. text-align: left;
  607. white-space: nowrap;
  608. line-height: 20rpx;
  609. margin: 10rpx 0 0 421rpx;
  610. }
  611. .box_7 {
  612. border-radius: 10rpx;
  613. width: 690rpx;
  614. margin-top: 1rpx;
  615. flex-direction: row;
  616. display: flex;
  617. }
  618. .group_14 {
  619. background-color: rgba(202, 86, 66, 1);
  620. border-radius: 10rpx;
  621. width: 199rpx;
  622. height: 111rpx;
  623. display: flex;
  624. flex-direction: column;
  625. margin: 29rpx 0 0 25rpx;
  626. }
  627. .text-wrapper_11 {
  628. width: 287rpx;
  629. height: 70rpx;
  630. display: flex;
  631. flex-direction: column;
  632. justify-content: space-between;
  633. margin: 42rpx 162rpx 0 17rpx;
  634. }
  635. .text_24 {
  636. width: 119rpx;
  637. height: 23rpx;
  638. overflow-wrap: break-word;
  639. color: rgba(202, 86, 66, 1);
  640. font-size: 24rpx;
  641. font-family: SourceHanSansCN-Regular;
  642. font-weight: normal;
  643. text-align: left;
  644. white-space: nowrap;
  645. line-height: 24rpx;
  646. margin-left: 1rpx;
  647. }
  648. .text_25 {
  649. width: 287rpx;
  650. height: 23rpx;
  651. overflow-wrap: break-word;
  652. color: rgba(49, 37, 32, 1);
  653. font-size: 24rpx;
  654. font-family: SourceHanSansCN-Bold;
  655. font-weight: 700;
  656. text-align: left;
  657. white-space: nowrap;
  658. line-height: 24rpx;
  659. margin-top: 24rpx;
  660. }
  661. .section_12 {
  662. background-color: rgba(255, 255, 255, 1);
  663. border-radius: 20rpx;
  664. width: 690rpx;
  665. display: flex;
  666. flex-direction: column;
  667. }
  668. .box_19 {
  669. width: 671rpx;
  670. height: 41rpx;
  671. margin-top: 24rpx;
  672. flex-direction: row;
  673. display: flex;
  674. }
  675. .box_10 {
  676. background-color: rgba(202, 86, 66, 1);
  677. width: 8rpx;
  678. height: 41rpx;
  679. display: flex;
  680. flex-direction: column;
  681. }
  682. .text_28 {
  683. width: 137rpx;
  684. height: 27rpx;
  685. overflow-wrap: break-word;
  686. color: rgba(49, 37, 32, 1);
  687. font-size: 28rpx;
  688. font-family: SourceHanSansCN-Regular;
  689. font-weight: normal;
  690. text-align: left;
  691. white-space: nowrap;
  692. line-height: 28rpx;
  693. margin: 7rpx 0 0 17rpx;
  694. }
  695. .text_29 {
  696. width: 89rpx;
  697. height: 20rpx;
  698. overflow-wrap: break-word;
  699. color: rgba(18, 18, 18, 1);
  700. font-size: 22rpx;
  701. font-family: SourceHanSansCN-Regular;
  702. font-weight: normal;
  703. text-align: left;
  704. white-space: nowrap;
  705. line-height: 20rpx;
  706. margin: 10rpx 0 0 420rpx;
  707. }
  708. .group_16 {
  709. background-color: rgba(255, 255, 255, 1);
  710. border-radius: 10rpx;
  711. width: 690rpx;
  712. margin-top: 1rpx;
  713. flex-direction: row;
  714. display: flex;
  715. }
  716. .block_5 {
  717. background-color: rgba(202, 86, 66, 1);
  718. border-radius: 10rpx;
  719. width: 199rpx;
  720. height: 111rpx;
  721. display: flex;
  722. flex-direction: column;
  723. margin: 29rpx 0 0 25rpx;
  724. }
  725. .text-wrapper_13 {
  726. width: 345rpx;
  727. height: 70rpx;
  728. display: flex;
  729. flex-direction: column;
  730. justify-content: space-between;
  731. margin: 42rpx 103rpx 0 18rpx;
  732. }
  733. .text_30 {
  734. width: 59rpx;
  735. height: 23rpx;
  736. overflow-wrap: break-word;
  737. color: rgba(153, 153, 153, 1);
  738. font-size: 24rpx;
  739. font-family: SourceHanSansCN-Regular;
  740. font-weight: normal;
  741. text-align: left;
  742. white-space: nowrap;
  743. line-height: 24rpx;
  744. margin-left: 1rpx;
  745. }
  746. .text_31 {
  747. width: 345rpx;
  748. height: 23rpx;
  749. overflow-wrap: break-word;
  750. color: rgba(49, 37, 32, 1);
  751. font-size: 24rpx;
  752. font-family: SourceHanSansCN-Bold;
  753. font-weight: 700;
  754. text-align: left;
  755. white-space: nowrap;
  756. line-height: 24rpx;
  757. margin-top: 24rpx;
  758. }
  759. .block_9 {
  760. width: 648rpx;
  761. height: 33rpx;
  762. flex-direction: row;
  763. display: flex;
  764. justify-content: space-between;
  765. margin: 40rpx 0 0 53rpx;
  766. }
  767. .image-text_15 {
  768. width: 165rpx;
  769. height: 33rpx;
  770. flex-direction: row;
  771. display: flex;
  772. align-items: center;
  773. justify-content: space-between;
  774. }
  775. .text-group_4 {
  776. width: 119rpx;
  777. height: 29rpx;
  778. overflow-wrap: break-word;
  779. color: rgba(49, 37, 32, 1);
  780. font-size: 30rpx;
  781. font-family: SourceHanSansCN-Bold;
  782. font-weight: 700;
  783. text-align: left;
  784. white-space: nowrap;
  785. line-height: 30rpx;
  786. margin-top: 3rpx;
  787. }
  788. .text_10 {
  789. width: 89rpx;
  790. height: 20rpx;
  791. overflow-wrap: break-word;
  792. color: rgba(18, 18, 18, 1);
  793. font-size: 22rpx;
  794. font-family: SourceHanSansCN-Regular;
  795. font-weight: normal;
  796. text-align: left;
  797. white-space: nowrap;
  798. line-height: 20rpx;
  799. margin-top: 7rpx;
  800. }
  801. .block_10 {
  802. width: 687rpx;
  803. height: 166rpx;
  804. flex-direction: row;
  805. display: flex;
  806. justify-content: space-between;
  807. margin: 32rpx 0 0 32rpx;
  808. }
  809. .block_4 {
  810. background-color: rgba(202, 86, 66, 1);
  811. border-radius: 20rpx;
  812. height: 166rpx;
  813. display: flex;
  814. flex-direction: column;
  815. width: 330rpx;
  816. }
  817. .text-wrapper_1 {
  818. height: 166rpx;
  819. background: url(https://lanhu.oss-cn-beijing.aliyuncs.com/psavh7feffxa7l23xrfrl7zl9wkqtfn7b96po9joumqwptlnmi9006fb82-30dc-439a-a4ba-91c459305e8f) 100% no-repeat;
  820. background-size: 100% 100%;
  821. display: flex;
  822. flex-direction: column;
  823. width: 330rpx;
  824. }
  825. .text_11 {
  826. width: 109rpx;
  827. height: 27rpx;
  828. overflow-wrap: break-word;
  829. color: rgba(255, 228, 176, 1);
  830. font-size: 28rpx;
  831. font-family: Adobe Heiti Std R;
  832. font-weight: normal;
  833. text-align: left;
  834. white-space: nowrap;
  835. line-height: 28rpx;
  836. margin: 70rpx 0 0 110rpx;
  837. }
  838. .block_11 {
  839. width: 647rpx;
  840. height: 31rpx;
  841. flex-direction: row;
  842. display: flex;
  843. justify-content: space-between;
  844. margin: 37rpx 0 7rpx 54rpx;
  845. }
  846. .image-text_16 {
  847. width: 159rpx;
  848. height: 31rpx;
  849. flex-direction: row;
  850. display: flex;
  851. justify-content: space-between;
  852. }
  853. .text-group_5 {
  854. width: 119rpx;
  855. height: 29rpx;
  856. overflow-wrap: break-word;
  857. color: rgba(49, 37, 32, 1);
  858. font-size: 30rpx;
  859. font-family: SourceHanSansCN-Bold;
  860. font-weight: 700;
  861. text-align: left;
  862. white-space: nowrap;
  863. line-height: 30rpx;
  864. margin-top: 1rpx;
  865. }
  866. .text_13 {
  867. width: 89rpx;
  868. height: 20rpx;
  869. overflow-wrap: break-word;
  870. color: rgba(18, 18, 18, 1);
  871. font-size: 22rpx;
  872. font-family: SourceHanSansCN-Regular;
  873. font-weight: normal;
  874. text-align: left;
  875. white-space: nowrap;
  876. line-height: 20rpx;
  877. margin-top: 5rpx;
  878. }
  879. .group_23 {
  880. width: 750rpx;
  881. display: flex;
  882. flex-direction: column;
  883. padding-bottom: 20rpx;
  884. }
  885. .list_8 {
  886. width: 690rpx;
  887. display: flex;
  888. flex-direction: column;
  889. justify-content: space-between;
  890. margin: 27rpx 0 0 30rpx;
  891. }
  892. .list-items_3-0 {
  893. background-color: rgba(255, 255, 255, 1);
  894. border-radius: 20rpx;
  895. width: 690rpx;
  896. display: flex;
  897. flex-direction: column;
  898. }
  899. .image-text_17-0 {
  900. width: 366rpx;
  901. height: 29rpx;
  902. flex-direction: row;
  903. display: flex;
  904. justify-content: space-between;
  905. margin: 34rpx 0 0 30rpx;
  906. }
  907. .text-group_6-0 {
  908. width: 327rpx;
  909. height: 29rpx;
  910. overflow-wrap: break-word;
  911. color: rgba(49, 37, 32, 1);
  912. font-size: 30rpx;
  913. font-family: SourceHanSansCN-Bold;
  914. font-weight: 700;
  915. text-align: left;
  916. white-space: nowrap;
  917. line-height: 30rpx;
  918. }
  919. .text_14-0 {
  920. width: 622rpx;
  921. height: 66rpx;
  922. overflow-wrap: break-word;
  923. color: rgba(102, 102, 102, 1);
  924. font-size: 24rpx;
  925. font-family: SourceHanSansCN-Regular;
  926. font-weight: normal;
  927. text-align: left;
  928. line-height: 28rpx;
  929. margin: 24rpx 0 0 29rpx;
  930. }
  931. .text_15-0 {
  932. width: 242rpx;
  933. height: 22rpx;
  934. overflow-wrap: break-word;
  935. color: rgba(153, 153, 153, 1);
  936. font-size: 24rpx;
  937. font-family: SourceHanSansCN-Normal;
  938. font-weight: normal;
  939. text-align: left;
  940. white-space: nowrap;
  941. line-height: 24rpx;
  942. margin: 26rpx 0 30rpx 422rpx;
  943. }
  944. .ziLiao {
  945. height: 400rpx;
  946. }
  947. </style>