detail.vue 18 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="one">
  5. <scroll-view scroll-y="true" class="scroll-view">
  6. <view class="list-scroll-view">
  7. <view class="one_1">
  8. <banner :goodsInfo="info.goods" :goodsColect="goodsColect"
  9. @toGoodscolect="toGoodscolect">
  10. </banner>
  11. </view>
  12. <view class="one_2">
  13. <text class="money_1"
  14. v-if="infospecs.leader_price"><text>团长价¥</text>{{infospecs.leader_price||0}}</text>
  15. <text class="money" v-if="infospecs.price"><text>特价¥</text>{{infospecs.price||0}}</text>
  16. <text class="money"
  17. v-if="!infospecs.price&&!infospecs.leader_price"><text>¥</text>{{infospecs.sell_money||0}}</text>
  18. <text class="money"><text>¥</text>{{infospecs.flow_money||0}}</text>
  19. </view>
  20. <view class="one_3" v-if="discount">
  21. <text v-if="discount.full_decrement&&discount.full_decrement.length>0" class="act"
  22. v-for="(item,index) in discount.full_decrement" :key="index">{{item}}</text>
  23. <text v-if="discount.full_fold&&discount.full_decrement.length>0" class="act"
  24. v-for="(item,index) in discount.full_fold" :key="index">{{item}}</text>
  25. </view>
  26. <view class="one_4">
  27. <text class="num">已售{{info.goods&&info.goods.sell_num||0}}件</text>
  28. </view>
  29. <view class="one_5">
  30. <view class="name">
  31. {{info.goods&&info.goods.name}}
  32. </view>
  33. <view class="brief">
  34. {{info.goods&&info.goods.shot_brief||''}}
  35. </view>
  36. <view class="money">
  37. <!-- <text>运费{{infospecs.freight||'包邮'}}元</text> -->
  38. <text>{{info.goods&&info.goods.send_time}}内发货</text>
  39. </view>
  40. </view>
  41. <view class="one_6" @tap="toActivity">
  42. <view class="l">
  43. <text>{{info.act&&info.act.length>0?`活动`:`暂无活动`}}</text>
  44. </view>
  45. <view class="r">
  46. <text class="iconfont icon-jiantouyou"></text>
  47. </view>
  48. </view>
  49. <view class="one_6" @tap="toSpec">
  50. <view class="l">
  51. 选择规格
  52. </view>
  53. <view class="r">
  54. <text class="iconfont icon-jiantouyou"></text>
  55. </view>
  56. </view>
  57. <view class="one_6" @tap="toEvaluate">
  58. <view class="l">
  59. <text>{{evaluate_num>0?`商品评价(${evaluate_num})`:`暂无评价`}}</text>
  60. </view>
  61. <view class="r">
  62. <text class="iconfont icon-jiantouyou"></text>
  63. </view>
  64. </view>
  65. <view class="one_7" v-if="info.sets&&info.sets.length>0" @tap="toSets">
  66. <view class="one_7_1">
  67. 优惠套装<text>({{info.sets.length||0}})</text>
  68. </view>
  69. <view class="one_7_2">
  70. <view class="image" v-for="(set,index) in info.sets[0].set" :key="index">
  71. <image class="image" :src="set.file&&set.file.length>0?set.file[0].url:''"
  72. mode="aspectFit">
  73. </image>
  74. </view>
  75. <view class="money">
  76. <view class="money_1">共{{info.sets[0].goods_total}}件</view>
  77. <view class="money_2">¥{{info.sets[0].sell_money}}</view>
  78. </view>
  79. </view>
  80. </view>
  81. <view class="one_8">
  82. <view class="one_8_1">
  83. <view class="shop_1">
  84. <image class="image"
  85. :src="info.shop&&info.shop.logo&&info.shop.logo.length>0?info.shop.logo[0].url:''"
  86. mode="aspectFit"></image>
  87. </view>
  88. <view class="shop_2">
  89. <view class="name">{{info.shop&&info.shop.name}}</view>
  90. <view class="num"><text>宝贝数:</text>{{info.shop&&info.shop.goods_num||0}}</view>
  91. </view>
  92. </view>
  93. <view class="one_8_2">
  94. <view class="score_1">
  95. <text>商品:</text>
  96. <text>{{info.shop&&info.shop.goods_score||5}}</text>
  97. <text>|</text>
  98. </view>
  99. <view class="score_1">
  100. <text>发货:</text>
  101. <text>{{info.shop&&info.shop.send_score||5}}</text>
  102. <text>|</text>
  103. </view>
  104. <view class="score_1">
  105. <text>服务:</text>
  106. <text>{{info.shop&&info.shop.service_score||5}}</text>
  107. </view>
  108. </view>
  109. <view class="one_8_3">
  110. <view class="btn">
  111. <button size="mini" @tap="toShop">进入店铺</button>
  112. </view>
  113. <view class="btn">
  114. <button size="mini" @tap="toShopcolect">{{shopColect==true?'已关注':'关注'}}</button>
  115. </view>
  116. </view>
  117. </view>
  118. <view class="one_9">
  119. <rich-text :nodes="info.goods&&info.goods.brief"></rich-text>
  120. </view>
  121. </view>
  122. </scroll-view>
  123. </view>
  124. <view class="two">
  125. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="toNavleft"
  126. @buttonClick="toNavright" />
  127. </view>
  128. </view>
  129. </mobile-frame>
  130. </template>
  131. <script>
  132. import banner from './components/banner_1.vue';
  133. export default {
  134. components: {
  135. banner
  136. },
  137. data() {
  138. return {
  139. // 系统设置
  140. config: {},
  141. // 商品id
  142. id: '',
  143. // 分享人id
  144. inviter: '',
  145. // 当前用户信息
  146. user: {},
  147. // 是否关注商品
  148. goodsColect: false,
  149. // 是否关注店铺
  150. shopColect: false,
  151. // 评价数
  152. evaluate_num: 0,
  153. // 商品详情
  154. info: {},
  155. // 规格
  156. infospecs: {},
  157. // 优惠
  158. discount: {},
  159. // 底部菜单
  160. options: [{
  161. icon: 'shop',
  162. text: '店铺',
  163. type: 'shop',
  164. route: 'pagesHome/shop/index',
  165. },
  166. {
  167. icon: 'cart',
  168. text: '购物车',
  169. type: 'market',
  170. route: 'pages/market/index',
  171. },
  172. ],
  173. buttonGroup: [{
  174. text: '加入购物车',
  175. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  176. color: '#fff',
  177. type: '0'
  178. },
  179. {
  180. text: '立即购买',
  181. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  182. color: '#fff',
  183. type: '1'
  184. }
  185. ],
  186. // 系统菜单
  187. barList: [],
  188. is_menu: false,
  189. // 规格弹框
  190. popupShow: '1',
  191. // 规格信息
  192. is_specs: 0,
  193. btn_type: '1',
  194. specsInfo: {},
  195. // 是否零库存
  196. is_zero: false,
  197. // 商品设置
  198. group_config: [],
  199. // 限制说明
  200. buyList: [],
  201. // 购买数量
  202. buy_num: 1,
  203. // 规格弹出框
  204. dialog: {
  205. show: false,
  206. type: '1'
  207. },
  208. };
  209. },
  210. onLoad: async function(e) {
  211. const that = this;
  212. that.$set(that, `id`, e.id || '');
  213. that.$set(that, `inviter`, e.inviter || '');
  214. await that.searchConfig();
  215. await that.search();
  216. await that.configShare();
  217. },
  218. onShow: async function() {
  219. const that = this;
  220. await that.watchLogin();
  221. },
  222. onUnload: function() {
  223. // 页面卸载,重新部署分享内容
  224. const that = this;
  225. if (that.config) {
  226. // 赋值默认值
  227. that.$config.share = {
  228. title: that.config.title,
  229. path: '/pages/index/index',
  230. imageUrl: that.config.config.share[0].url
  231. }
  232. }
  233. },
  234. methods: {
  235. // 查询系统设置
  236. searchConfig() {
  237. const that = this;
  238. uni.getStorage({
  239. key: 'config',
  240. success: function(res) {
  241. let data = res.data;
  242. that.$set(that, `config`, data);
  243. if (data.bottom_menu && data.bottom_menu.list.length > 0) {
  244. let list = data.bottom_menu.list.sort((a, b) => {
  245. return a.sort - b.sort
  246. });
  247. that.$set(that, `barList`, list)
  248. }
  249. }
  250. })
  251. },
  252. // 查询用户信息
  253. watchLogin() {
  254. const that = this;
  255. uni.getStorage({
  256. key: 'token',
  257. success: async function(res) {
  258. let user = that.$jwt(res.data);
  259. if (user) that.$set(that, `user`, user);
  260. },
  261. fail: function(err) {
  262. console.log('暂无用户信息');
  263. }
  264. })
  265. },
  266. // 查询其他信息
  267. async searchOther() {
  268. const that = this;
  269. let user = that.user;
  270. let res;
  271. // 是否关注商品
  272. res = await that.$api(`/storeGoods/check`, `GET`, {
  273. customer: user._id,
  274. goods: that.id
  275. });
  276. if (res.errcode == '0') that.$set(that, `goodsColect`, res.data);
  277. // 是否关注店铺
  278. res = await that.$api(`/storeShop/check`, `GET`, {
  279. customer: user._id,
  280. shop: that.info?.shop?._id
  281. });
  282. if (res.errcode == '0') that.$set(that, `shopColect`, res.data);
  283. // 商品设置
  284. res = await that.$api(`/goodsConfig`, `GET`, {
  285. goods: that.id,
  286. shop: that.info?.shop?._id
  287. }, 'group');
  288. if (res.errcode == '0' && res.total > 0) that.$set(that, `group_config`, res.data);
  289. // 限制说明
  290. res = await that.$api(`/dictData`, 'GET', {
  291. code: "buy_limit"
  292. });
  293. if (res.errcode == '0') that.$set(that, `buyList`, res.data)
  294. },
  295. // 查询商品信息
  296. async search() {
  297. const that = this;
  298. let id = that.id;
  299. if (id) {
  300. let res;
  301. res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  302. id: id
  303. });
  304. if (res.errcode == '0') {
  305. let data = res.data;
  306. if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi,
  307. '<img class="rich-img"');
  308. // 特价
  309. let act;
  310. act = data.act.find(i => i.type == '3')
  311. if (act) {
  312. for (let val of act.list) {
  313. for (let [index, arr] of data.specs.entries()) {
  314. if (val.spec == arr._id) arr.price = val.price
  315. }
  316. }
  317. }
  318. // 显示最低价格的规格信息,不考虑库存问题
  319. if (data.specs && data.specs.length > 0) {
  320. // 规格排序
  321. let indexSpecs = data.specs.sort(function(a, b) {
  322. let i, j;
  323. if (a.price) i = 'price'
  324. else i = 'sell_money'
  325. if (b.price) j = 'price'
  326. else j = 'sell_money'
  327. return a[i] - b[j];
  328. })
  329. that.$set(that, `infospecs`, indexSpecs[0])
  330. }
  331. that.$set(that, `info`, data);
  332. // 优惠
  333. act = data.act.find(i => i.type == '5')
  334. if (act) that.$set(that.discount, `full_decrement`, act.text.split(';'));
  335. act = data.act.find(i => i.type == '6')
  336. if (act) that.$set(that.discount, `full_fold`, act.text.split(';'));
  337. await that.searchOther();
  338. // 查询规格
  339. await that.searchSpecs(data.specs);
  340. // 查询评价数
  341. await that.searchRate(data);
  342. }
  343. } else {
  344. uni.showToast({
  345. title: '暂无商品信息',
  346. icon: 'none'
  347. })
  348. }
  349. },
  350. // 查询规格
  351. searchSpecs(e) {
  352. const that = this;
  353. if (e.length > 0) {
  354. let data = e.find(i => i.num > 0);
  355. let dataIndex = e.findIndex(i => i._id == data._id);
  356. if (data) {
  357. let specsInfo = that.group_config.find(i => i.spec._id == data._id)
  358. if (specsInfo?._id && that.user.is_leader == '0') data.can_group = '0'
  359. else data.can_group = '1'
  360. let limit = that.buyList.find((i) => i.value == data.buy_limit);
  361. if (limit) data.buy_name = limit.label
  362. that.$set(that, `specsInfo`, data);
  363. that.$set(that, `is_specs`, dataIndex);
  364. }
  365. }
  366. },
  367. // 查询评价数
  368. async searchRate(e) {
  369. const that = this;
  370. let res = await that.$api(`/goodsRate`, `GET`, {
  371. limit: 1,
  372. goods: e.goods._id
  373. })
  374. if (res.errcode == '0') that.$set(that, `evaluate_num`, res.total);
  375. },
  376. // 关注商品
  377. async toGoodscolect() {
  378. const that = this;
  379. let user = that.user;
  380. if (user && user._id) {
  381. let res = await that.$api(`/storeGoods`, `POST`, {
  382. customer: user._id,
  383. goods: that.id
  384. });
  385. if (res.errcode == '0') {
  386. uni.showToast({
  387. title: res.data.msg,
  388. icon: 'none'
  389. })
  390. that.$set(that, `goodsColect`, res.data.result)
  391. }
  392. } else {
  393. uni.showToast({
  394. title: '暂无账号,无法收藏商品',
  395. icon: 'none'
  396. })
  397. }
  398. },
  399. // 活动说明
  400. toActivity() {
  401. const that = this;
  402. if (that.info.act.length > 0) {
  403. that.$set(that, `popupShow`, '2')
  404. that.$refs.specShow.open();
  405. }
  406. },
  407. // 活动说明
  408. toActivity() {
  409. const that = this;
  410. if (that.info.act.length > 0) {
  411. that.$set(that, `popupShow`, '2')
  412. that.$refs.specShow.open();
  413. }
  414. },
  415. // 选择规格
  416. toSpec() {
  417. const that = this;
  418. this.$set(that, `popupShow`, '1')
  419. that.$refs.specShow.open();
  420. },
  421. // 选择规格
  422. toSpecs(e) {
  423. const that = this;
  424. let specs = that.info.specs;
  425. let dataIndex = specs.findIndex(i => i._id == e._id);
  426. that.$set(that, `is_specs`, dataIndex);
  427. let specsInfo = that.group_config.find(i => i.spec._id == e._id)
  428. if (specsInfo?._id && that.user.is_leader == '0') e.can_group = '0'
  429. else e.can_group = '1'
  430. let limit = that.buyList.find((i) => i.value == e.buy_limit);
  431. if (limit) e.buy_name = limit.label
  432. that.$set(that, `specsInfo`, e)
  433. that.$set(that, `buy_num`, 1);
  434. if (e.num <= 0) that.$set(that, `is_zero`, true)
  435. else that.$set(that, `is_zero`, false)
  436. },
  437. // 评价
  438. toEvaluate() {
  439. const that = this;
  440. uni.navigateTo({
  441. url: `/pagesHome/order/appraise?id=${that.info.goods._id}`
  442. })
  443. },
  444. // 查看套装
  445. toSets() {
  446. const that = this;
  447. if (that.info.sets.length > 0) {
  448. that.$set(that, `popupShow`, '3')
  449. that.$refs.specShow.open();
  450. }
  451. },
  452. // 套装详情
  453. toDeatil(e) {
  454. const that = this;
  455. uni.navigateTo({
  456. url: `/pagesHome/order/detail?id=${e.goods}`
  457. })
  458. },
  459. // 进入店铺
  460. toShop() {
  461. const that = this;
  462. let info = that.info;
  463. uni.navigateTo({
  464. url: `/pagesHome/shop/index?id=${info.shop._id}`
  465. })
  466. },
  467. // 关注店铺
  468. async toShopcolect() {
  469. const that = this;
  470. let user = that.user;
  471. if (user && user._id) {
  472. let res = await that.$api(`/storeShop`, `POST`, {
  473. customer: user._id,
  474. shop: that.info.shop._id
  475. });
  476. if (res.errcode == '0') {
  477. uni.showToast({
  478. title: res.data.msg,
  479. icon: 'none'
  480. })
  481. that.$set(that, `shopColect`, res.data.result)
  482. }
  483. } else {
  484. uni.showToast({
  485. title: '暂无账号,无法关注商铺',
  486. icon: 'none'
  487. })
  488. }
  489. },
  490. // 店铺,购物车
  491. toNavleft(e) {
  492. const that = this;
  493. if (e.content.type == 'shop') {
  494. that.toShop();
  495. } else if (e.content.type == 'market') {
  496. let obj = {
  497. route: e.content.route
  498. }
  499. that.toPath(obj)
  500. }
  501. },
  502. // 加入购物车,立即购买
  503. toNavright(e) {
  504. const that = this;
  505. that.$set(that, `popupShow`, '1');
  506. that.$set(that, `btn_type`, e.content.type);
  507. that.$refs.specShow.open();
  508. },
  509. // 配置分享内容
  510. configShare() {
  511. const that = this;
  512. let id = that.id;
  513. let inviter = that.user && that.user._id ? that.user._id : '';
  514. let title = that.info && that.info.goods ? that.info.goods.name : '';
  515. let imageUrl = that.info && that.info.goods ? that.info.goods.file[0].url : '';
  516. that.$config.share = {
  517. title: title,
  518. path: `/pagesHome/order/detail?id=${id}&inviter=${inviter}`,
  519. imageUrl: imageUrl
  520. }
  521. },
  522. }
  523. }
  524. </script>
  525. <style lang="scss">
  526. .main {
  527. display: flex;
  528. flex-direction: column;
  529. width: 100vw;
  530. height: 100vh;
  531. .one {
  532. position: relative;
  533. flex-grow: 1;
  534. .one_2 {
  535. border-bottom: 0.5vw solid var(--f9Color);
  536. padding: 2vw;
  537. .money_1 {
  538. color: #23B67A;
  539. font-size: 20px;
  540. padding: 0 1vw 0 0;
  541. font-weight: bold;
  542. text {
  543. font-size: 14px;
  544. }
  545. }
  546. .money {
  547. font-size: 20px;
  548. padding: 0 1vw 0 0;
  549. color: #ff0000;
  550. font-weight: bold;
  551. text {
  552. font-size: 14px;
  553. }
  554. }
  555. .money:last-child {
  556. font-size: 16px;
  557. color: #858585;
  558. text-decoration: line-through;
  559. }
  560. }
  561. .one_3 {
  562. display: flex;
  563. flex-wrap: wrap;
  564. padding: 1vw;
  565. border-bottom: 0.5vw solid var(--f9Color);
  566. .act {
  567. font-size: 12px;
  568. border: 1px solid var(--fFB1Color);
  569. margin: 0 1vw 1vw 0;
  570. color: var(--fFB1Color);
  571. border-radius: 6px;
  572. padding: 0 1vw;
  573. }
  574. .num {
  575. font-size: 12px;
  576. color: #858585;
  577. }
  578. }
  579. .one_4 {
  580. display: flex;
  581. flex-wrap: wrap;
  582. padding: 1vw;
  583. border-bottom: 0.5vw solid var(--f9Color);
  584. .num {
  585. font-size: 12px;
  586. color: #858585;
  587. }
  588. }
  589. .one_5 {
  590. border-bottom: 0.5vw solid var(--f9Color);
  591. padding: 2vw;
  592. .name {
  593. font-size: 17px;
  594. font-weight: bold;
  595. margin: 0 0 2vw 0;
  596. }
  597. .brief {
  598. font-size: 14px;
  599. color: #858585;
  600. margin: 0 0 1vw 0;
  601. }
  602. .money {
  603. font-size: 13px;
  604. color: #858585;
  605. text {
  606. padding: 0 2vw 0 0;
  607. }
  608. }
  609. }
  610. .one_6 {
  611. display: flex;
  612. justify-content: space-between;
  613. padding: 2vw;
  614. border-bottom: 0.5vw solid var(--f9Color);
  615. font-size: 14px;
  616. }
  617. .one_7 {
  618. padding: 2vw;
  619. border-bottom: 2vw solid var(--f9Color);
  620. border-top: 1vw solid var(--f9Color);
  621. .one_7_1 {
  622. padding: 2vw 0;
  623. font-size: 14px;
  624. text {
  625. padding: 0 0 0 1vw;
  626. font-size: 12px;
  627. color: #858585;
  628. }
  629. }
  630. .one_7_2 {
  631. display: flex;
  632. justify-content: space-between;
  633. align-items: center;
  634. padding: 2vw;
  635. border-radius: 5px;
  636. background-color: var(--f9Color);
  637. .image {
  638. width: 20vw;
  639. height: 20vw;
  640. .image {
  641. width: 100%;
  642. height: 100%;
  643. border-radius: 5px;
  644. background-color: #fff;
  645. }
  646. }
  647. .money {
  648. text-align: center;
  649. .money_1 {
  650. font-size: 12px;
  651. color: #858585;
  652. }
  653. .money_2 {
  654. font-size: 12px;
  655. color: #ff0000;
  656. }
  657. }
  658. }
  659. }
  660. .one_8 {
  661. padding: 2vw;
  662. border-bottom: 0.5vw solid var(--f9Color);
  663. .one_8_1 {
  664. margin: 0 0 1vw 0;
  665. display: flex;
  666. .shop_1 {
  667. width: 15vw;
  668. height: 15vw;
  669. border: 1px solid #f1f1f1;
  670. .image {
  671. width: 100%;
  672. height: 100%;
  673. }
  674. }
  675. .shop_2 {
  676. width: 78vw;
  677. padding: 0 0 0 2vw;
  678. .name {
  679. font-size: 14px;
  680. margin: 0 0 1vw 0;
  681. }
  682. .num {
  683. font-size: 12px;
  684. color: #858585;
  685. text:last-child {
  686. color: #000;
  687. }
  688. }
  689. }
  690. }
  691. .one_8_2 {
  692. margin: 0 0 2vw 0;
  693. display: flex;
  694. justify-content: space-between;
  695. padding: 2vw 0;
  696. .score_1 {
  697. width: 33vw;
  698. text-align: center;
  699. font-size: 14px;
  700. color: #858585;
  701. text:nth-child(2) {
  702. color: #ff0000;
  703. }
  704. text:nth-child(3) {
  705. float: right;
  706. }
  707. }
  708. }
  709. .one_8_3 {
  710. display: flex;
  711. justify-content: space-around;
  712. .btn {
  713. width: 40vw;
  714. button {
  715. width: 100%;
  716. font-size: 15px;
  717. }
  718. }
  719. }
  720. }
  721. .one_9 {
  722. padding: 2vw;
  723. .rich-img {
  724. width: 100% !important;
  725. display: block;
  726. }
  727. }
  728. }
  729. .two {
  730. width: 100vw;
  731. height: 8vh;
  732. overflow: hidden;
  733. }
  734. }
  735. .scroll-view {
  736. position: absolute;
  737. top: 0;
  738. left: 0;
  739. right: 0;
  740. bottom: 0;
  741. .list-scroll-view {
  742. display: flex;
  743. flex-direction: column;
  744. }
  745. }
  746. </style>