index.vue 21 KB

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