detail.vue 19 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875
  1. <template>
  2. <mobile-frame>
  3. <view class="main">
  4. <view class="onemain">
  5. <scroll-view scroll-y="true" class="scroll-view" scroll-with-animation :scroll-into-view="topItem" @scroll="handleScroll">
  6. <view class="list-scroll-view" id="top">
  7. <view class="one">
  8. <swiper class="swiper" circular :indicator-dots="true" indicator-color="#ffffff" indicator-active-color="#FB1438" :autoplay="true" :interval="3000" :duration="1000">
  9. <swiper-item class="list" v-for="(item,index) in bannerList" :key="index">
  10. <image class="image" :src="item.url" mode="aspectFit">
  11. </image>
  12. </swiper-item>
  13. </swiper>
  14. </view>
  15. <view class="two">
  16. <view class="two_1">
  17. <view class="money_1">
  18. <text>¥</text>
  19. <text>{{specs&&specs.length>0?specs[0].sell_money:0}}</text>
  20. </view>
  21. <view class="money_2">
  22. <text>¥</text>
  23. <text>{{specs&&specs.length>0?specs[0].flow_money:0}}</text>
  24. </view>
  25. </view>
  26. <view class="two_2">{{info.name}}</view>
  27. <view class="two_3">{{info.shot_brief}}</view>
  28. <view class="two_4">
  29. <text>运费{{specs&&specs.length>0?specs[0].freight:0}}元</text>
  30. <text>{{info.send_time}}内发货</text>
  31. </view>
  32. </view>
  33. <view class="thr">
  34. <view class="thr_1" @click="toChoose">
  35. <view class="title">选择规格</view>
  36. <text class="iconfont icon-jiantouyou"></text>
  37. </view>
  38. <view v-if="comment" class="thr_1" @click="toAppraise(info)">
  39. <view class="title">商品评价({{comment||0}})</view>
  40. <text class="iconfont icon-jiantouyou"></text>
  41. </view>
  42. <view v-else class="thr_1">
  43. <view class="title">暂无评价</view>
  44. <text class="iconfont icon-jiantouyou"></text>
  45. </view>
  46. </view>
  47. <view class="four">
  48. <view class="four_1">
  49. <image class="image" :src="shop.logo&&shop.logo.length>0?shop.logo[0].url:''"></image>
  50. <view class="other">
  51. <view class="name">{{shop.name}}</view>
  52. <view class="other_1"><text>宝贝数</text>{{shop.goods_num||0}}</view>
  53. </view>
  54. </view>
  55. <view class="four_2">
  56. <view class="grade">商品:<text>{{shop.goods_score||5}}</text></view>|
  57. <view class="grade">发货:<text>{{shop.send_score||5}}</text></view>|
  58. <view class="grade">服务:<text>{{shop.service_score||5}}</text></view>
  59. </view>
  60. <view class="four_2">
  61. <view class="btn" @tap="toShop('pagesHome/shop/index')">进入店铺</view>
  62. <view class="btn" @tap="shopCollect">{{shop_collect==true?'已关注':'关注'}}</view>
  63. </view>
  64. </view>
  65. <view class="five">
  66. <view class="five_1">
  67. <!-- <u-parse :content="info.brief"></u-parse> -->
  68. <rich-text :nodes="info.brief"></rich-text>
  69. </view>
  70. </view>
  71. </view>
  72. </scroll-view>
  73. </view>
  74. <view class="foot">
  75. <uni-goods-nav :options="options" :button-group="buttonGroup" @click="onClick" @buttonClick="buttonClick" />
  76. </view>
  77. </view>
  78. <view class="collect">
  79. <text v-if="!collection" @click="toCollect" class="iconfont icon-yduishoucangkongxin"></text>
  80. <text v-else @click="toCollect" class="iconfont icon-yduishoucangshixin-copy"></text>
  81. </view>
  82. <view class="menu">
  83. <text @click="toMenu" class="iconfont icon-gengduo"></text>
  84. </view>
  85. <view class="menu_1" v-if="menu">
  86. <view class="title" v-for="(item,index) in barList" :key="index" @click="toPath(item)">
  87. <image class="image" :src="item.normal"></image>
  88. <view class="name">{{item.name}}</view>
  89. </view>
  90. </view>
  91. <view class="backTop" v-if="isShow==true">
  92. <text @click="backTop" class="iconfont icon-fanhuidingbu"></text>
  93. </view>
  94. <uni-popup ref="popup" background-color="#fff" type="bottom">
  95. <view class="content">
  96. <view class="one">
  97. <image class="image" v-if="specsInfo.file&&specsInfo.file.length>0" :src="specsInfo.file&&specsInfo.file.length>0?specsInfo.file[0].url:''"></image>
  98. <image class="image" v-else :src="info.file&&info.file.length>0?info.file[0].url:''"></image>
  99. <view class="other">
  100. <view class="money">
  101. <text>¥</text>
  102. <text>{{specsInfo.sell_money}}</text>
  103. </view>
  104. <view class="other_1">
  105. 已选: <text>{{specsInfo.name}}</text>
  106. </view>
  107. </view>
  108. <view class="btn">
  109. <text @click="toClose" class="iconfont icon-shanchu"></text>
  110. </view>
  111. </view>
  112. <view class="two">
  113. <view class="two_1">规格</view>
  114. <view class="two_2">
  115. <text v-for="(item,index) in specs" :key="index" @click="toStyle(item,index)" :class="{ 'style': isActive==index}">{{item.name}}
  116. </text>
  117. </view>
  118. </view>
  119. <view class="thr">
  120. <text>数量</text>
  121. <view class="count">
  122. <uni-number-box :min="1" :max="specsInfo.num" :disabled="disabled" v-model="num" @change="toCount">
  123. </uni-number-box>
  124. </view>
  125. <text>库存{{specsInfo.num||0}}</text>
  126. </view>
  127. <view class="btn">
  128. <text @click="toBuy(type)" :class="{ 'button': specsInfo._id&&specsInfo.can_group=='0'&&type=='1'}">
  129. {{type=='0'?'加入购物车':'立即购买'}}
  130. </text>
  131. <text v-if="specsInfo._id&&specsInfo.can_group=='0'&&type=='1'" @click="toGroup" class="button2">参团</text>
  132. </view>
  133. </view>
  134. </uni-popup>
  135. </mobile-frame>
  136. </template>
  137. <script>
  138. export default {
  139. components: {},
  140. data() {
  141. return {
  142. barList: [{
  143. name: '首页',
  144. route: 'pages/home/index',
  145. normal: require('@/static/shouye.png'),
  146. },
  147. {
  148. name: '微店',
  149. route: 'pages/store/index',
  150. normal: require('@/static/store.png'),
  151. },
  152. {
  153. name: '购物车',
  154. route: 'pages/market/index',
  155. normal: require('@/static/market.png'),
  156. },
  157. {
  158. name: '我的',
  159. route: 'pages/my/index',
  160. normal: require('@/static/my.png'),
  161. },
  162. ],
  163. options: [{
  164. icon: 'shop',
  165. text: '店铺',
  166. route: 'pagesHome/shop/index',
  167. },
  168. {
  169. icon: 'cart',
  170. text: '购物车',
  171. route: 'pages/market/index',
  172. },
  173. // {
  174. // icon: 'chat',
  175. // text: '客服',
  176. // }
  177. ],
  178. buttonGroup: [{
  179. text: '加入购物车',
  180. backgroundColor: 'linear-gradient(90deg, #FFCD1E, #FF8A18)',
  181. color: '#fff',
  182. type: '0'
  183. },
  184. {
  185. text: '立即购买',
  186. backgroundColor: 'linear-gradient(90deg, #FE6035, #EF1224)',
  187. color: '#fff',
  188. type: '1'
  189. }
  190. ],
  191. // 商品id
  192. id: '',
  193. user: {},
  194. // 轮播图
  195. bannerList: [],
  196. // 商品详情
  197. info: {},
  198. // 商店详情
  199. shop: {},
  200. // 规格情况
  201. specs: [],
  202. // 已选
  203. specsInfo: {},
  204. // 是否显示返回顶部
  205. isShow: false,
  206. topItem: '',
  207. // 商品收藏
  208. collection: false,
  209. // 店铺收藏
  210. shop_collect: false,
  211. // 菜单显示
  212. menu: false,
  213. disabled: true,
  214. // 显示文字判断
  215. type: '0',
  216. // 选择规格
  217. isActive: -1,
  218. // 计数器
  219. num: 1,
  220. // 评论数
  221. comment: 0,
  222. };
  223. },
  224. onLoad: async function(e) {
  225. const that = this;
  226. that.$set(that, `id`, e.id || '');
  227. },
  228. onShow: async function() {
  229. const that = this;
  230. await that.search();
  231. await that.configShare();
  232. },
  233. methods: {
  234. //店铺,
  235. // 购物车,客服跳转
  236. onClick(e) {
  237. const that = this;
  238. if (e.index == '0' && e.content.route) {
  239. // 进入店铺
  240. that.toShop();
  241. } else {
  242. uni.reLaunch({
  243. url: `/${e.content.route}`
  244. })
  245. }
  246. },
  247. // 进入店铺
  248. toShop() {
  249. const that = this;
  250. uni.navigateTo({
  251. url: `/pagesHome/shop/index?id=${that.shop._id}`
  252. })
  253. },
  254. // 商品评价
  255. toAppraise(e) {
  256. const that = this;
  257. uni.navigateTo({
  258. url: `/pagesHome/order/appraise?id=${that.id}`
  259. })
  260. },
  261. // 收藏
  262. async toCollect() {
  263. const that = this;
  264. let user = that.user;
  265. if (user) {
  266. let res = await that.$api(`/storeGoods`, `POST`, {
  267. customer: user._id,
  268. goods: that.id
  269. });
  270. if (res.errcode == '0') {
  271. uni.showToast({
  272. title: res.data.msg,
  273. icon: 'none'
  274. })
  275. that.$set(that, `collection`, res.data.result)
  276. }
  277. } else {
  278. uni.showToast({
  279. title: '无用户登录无法收藏商品',
  280. icon: 'none'
  281. })
  282. }
  283. },
  284. // 关注商铺
  285. async shopCollect() {
  286. const that = this;
  287. let user = that.user;
  288. if (user && user._id) {
  289. let res = await that.$api(`/storeShop`, `POST`, {
  290. customer: user._id,
  291. shop: that.shop._id
  292. });
  293. if (res.errcode == '0') {
  294. uni.showToast({
  295. title: res.data.msg,
  296. icon: 'none'
  297. })
  298. that.$set(that, `shop_collect`, res.data.result)
  299. }
  300. } else {
  301. uni.showToast({
  302. title: '无用户登录无法关注商铺',
  303. icon: 'none'
  304. })
  305. }
  306. },
  307. // 参团
  308. toGroup() {
  309. const that = this;
  310. let specs_id = that.specsInfo._id
  311. uni.navigateTo({
  312. url: `/pagesHome/group/index?specs_id=${specs_id}&goods_id=${that.id}`
  313. })
  314. },
  315. //主菜单跳转
  316. toPath(e) {
  317. if (e && e.route) uni.reLaunch({
  318. url: `/${e.route}`
  319. })
  320. },
  321. // 菜单展开
  322. toMenu() {
  323. const that = this;
  324. that.menu = !that.menu
  325. },
  326. // 计算高度
  327. handleScroll(e) {
  328. const that = this;
  329. let scrollTop = e.detail.scrollTop;
  330. that.isShow = scrollTop > 500;
  331. that.topItem = '';
  332. },
  333. // 返回顶部
  334. backTop() {
  335. const that = this;
  336. that.topItem = 'top'
  337. },
  338. //加入购物车,立即购买弹窗
  339. buttonClick(e) {
  340. const that = this;
  341. if (e && e.content) that.type = e.content.type;
  342. that.$refs.popup.open();
  343. },
  344. // 选择规格
  345. toChoose() {
  346. const that = this;
  347. that.type = '1';
  348. that.$refs.popup.open();
  349. },
  350. // 修改样式
  351. toStyle(e, index) {
  352. const that = this;
  353. that.$set(that, `isActive`, index)
  354. that.$set(that, `specsInfo`, e)
  355. that.disabled = false;
  356. },
  357. // 计数器
  358. toCount(e) {
  359. const that = this;
  360. that.num = e;
  361. },
  362. // 立即购买
  363. toBuy(e) {
  364. const that = this;
  365. uni.getStorage({
  366. key: 'token',
  367. success: async function(res) {
  368. let user = that.$jwt(res.data);
  369. that.$set(that, `user`, user)
  370. if (that.specsInfo._id) {
  371. let specs_id = that.specsInfo._id
  372. let data = {
  373. customer: user._id,
  374. shop: that.shop._id,
  375. goods: that.info._id,
  376. goodsSpec: specs_id,
  377. num: that.num
  378. }
  379. if (e == '0') {
  380. let arr = await that.$api(`/cart`, 'POST', data)
  381. if (arr.errcode == '0') {
  382. uni.showToast({
  383. title: `加入购物车成功`,
  384. icon: 'success'
  385. })
  386. that.$refs.popup.close()
  387. } else {
  388. uni.showToast({
  389. title: arr.errmsg,
  390. icon: 'none'
  391. })
  392. }
  393. } else {
  394. let arr = await that.$api(`/util/checkCanBuy`, 'POST', data)
  395. if (arr.errcode == '0') {
  396. if (arr.data.result == true) {
  397. uni.navigateTo({
  398. url: `/pagesHome/order/order?key=${arr.data.key}`
  399. })
  400. } else {
  401. uni.showToast({
  402. title: arr.data.msg,
  403. icon: 'none'
  404. })
  405. }
  406. } else {
  407. uni.showToast({
  408. title: arr.errmsg,
  409. icon: 'none'
  410. })
  411. }
  412. }
  413. } else {
  414. uni.showModal({
  415. title: '提示',
  416. content: '请选择规格',
  417. confirmColor: '#ff0000',
  418. showCancel: false,
  419. success: function(res) {}
  420. });
  421. }
  422. },
  423. fail: function(err) {
  424. uni.navigateTo({
  425. url: `/pages/login/index`
  426. })
  427. }
  428. });
  429. },
  430. // 关闭弹框
  431. toClose() {
  432. const that = this;
  433. that.$refs.popup.close()
  434. },
  435. // 详情数据
  436. async search() {
  437. const that = this;
  438. uni.getStorage({
  439. key: 'token',
  440. success: function(res) {
  441. let user = that.$jwt(res.data);
  442. if (user) that.$set(that, `user`, user);
  443. that.searchOther();
  444. },
  445. fail: function(err) {}
  446. });
  447. let res = await that.$api(`/viewGoods/goodsDetail`, `POST`, {
  448. id: that.id
  449. });
  450. if (res.errcode == '0') {
  451. let data = res.data;
  452. if (data.goods.brief) data.goods.brief = data.goods.brief.replace(/\<img/gi, '<img class="rich-img"');
  453. that.$set(that, `info`, data.goods)
  454. that.$set(that, `specs`, data.specs)
  455. that.$set(that, `shop`, data.shop)
  456. if (data.specs.length > 0) that.$set(that.specsInfo, `sell_money`, data.specs[0].sell_money)
  457. that.$set(that, `bannerList`, data.goods.file)
  458. let con = await that.$api(`/goodsRate`, `GET`, {
  459. goods: data.goods._id
  460. })
  461. if (con.errcode == '0') {
  462. that.$set(that, `comment`, con.total)
  463. }
  464. }
  465. },
  466. async searchOther() {
  467. const that = this;
  468. let user = that.user;
  469. // 商品是否收藏
  470. let res = await that.$api(`/storeGoods/check`, `GET`, {
  471. customer: user._id,
  472. goods: that.id
  473. });
  474. if (res.errcode == '0') {
  475. that.$set(that, `collection`, res.data)
  476. }
  477. // 商铺是否收藏
  478. let arr = await that.$api(`/storeShop/check`, `GET`, {
  479. customer: user._id,
  480. shop: that.shop._id
  481. });
  482. if (arr.errcode == '0') {
  483. that.$set(that, `shop_collect`, arr.data)
  484. }
  485. },
  486. // 配置分享内容
  487. configShare() {
  488. const that = this;
  489. let user_id = that.user && that.user._id ? that.user._id : '';
  490. let id = that.info && that.info._id ? that.info._id : '';
  491. that.$config.share = {
  492. title: that.info.name,
  493. path: `/pagesHome/order/detail?id=${id}&user_id=${user_id}`,
  494. imageUrl: that.info.file[0].url
  495. }
  496. }
  497. }
  498. }
  499. </script>
  500. <style lang="scss">
  501. .scrollView {
  502. height: 100vh;
  503. }
  504. .main {
  505. display: flex;
  506. flex-direction: column;
  507. width: 100vw;
  508. height: 100vh;
  509. .onemain {
  510. position: relative;
  511. flex-grow: 1;
  512. background-color: var(--f1Color);
  513. .one {
  514. swiper {
  515. height: 70vw;
  516. }
  517. .list {
  518. border-radius: 5px;
  519. .image {
  520. width: 100%;
  521. height: 100%;
  522. border-radius: 5px;
  523. background-color: #fff;
  524. }
  525. }
  526. }
  527. .two {
  528. padding: 0 0 2vw 0;
  529. background-color: var(--mainColor);
  530. .two_1 {
  531. display: flex;
  532. align-items: center;
  533. border-bottom: 0.5vw solid var(--f9Color);
  534. padding: 2vw;
  535. .money_1 {
  536. color: var(--ff0Color);
  537. text {
  538. margin: 0 1vw 0 0;
  539. }
  540. text:last-child {
  541. font-size: var(--font20Szie);
  542. font-weight: bold;
  543. }
  544. }
  545. .money_2 {
  546. text-decoration: line-through;
  547. color: var(--f99Color);
  548. text {
  549. margin: 0 1vw 0 0;
  550. }
  551. text:last-child {
  552. font-size: var(--font16Size);
  553. }
  554. }
  555. }
  556. .two_2 {
  557. font-size: var(--font18Szie);
  558. font-weight: bold;
  559. padding: 1vw 2vw;
  560. }
  561. .two_3 {
  562. font-size: var(--font16Szie);
  563. color: var(--f85Color);
  564. padding: 1vw 2vw;
  565. }
  566. .two_4 {
  567. font-size: var(--font12Size);
  568. color: var(--fcColor);
  569. padding: 1vw 2vw;
  570. text {
  571. margin: 0 2vw 0 0;
  572. }
  573. }
  574. }
  575. .thr {
  576. .thr_1 {
  577. display: flex;
  578. flex-direction: row;
  579. justify-content: space-between;
  580. margin: 2vw 0 2vw 0;
  581. padding: 2vw;
  582. background-color: var(--mainColor);
  583. }
  584. }
  585. .four {
  586. padding: 2vw;
  587. background-color: var(--mainColor);
  588. .four_1 {
  589. display: flex;
  590. justify-content: space-between;
  591. .image {
  592. width: 15vw;
  593. height: 15vw;
  594. border: 0.1vw solid var(--fcColor);
  595. }
  596. .other {
  597. flex-grow: 1;
  598. margin: 0 0 0 2vw;
  599. .name {
  600. font-size: var(--font16Szie);
  601. }
  602. .other_1 {
  603. font-size: var(--font12Size);
  604. text {
  605. color: var(--fcColor);
  606. margin: 0 2vw 0 0;
  607. }
  608. }
  609. }
  610. }
  611. .four_2 {
  612. display: flex;
  613. flex-direction: row;
  614. justify-content: space-evenly;
  615. padding: 2vw 0;
  616. color: var(--f99Color);
  617. .grade {
  618. font-size: var(--font14Size);
  619. color: var(--f85Color);
  620. text {
  621. color: var(--ff0Color);
  622. }
  623. }
  624. .btn {
  625. border: 0.1vw solid var(--fcColor);
  626. padding: 1vw 6vw;
  627. border-radius: 1vw;
  628. color: var(--f00Color);
  629. }
  630. .btn:last-child {
  631. padding: 1vw 10vw;
  632. }
  633. }
  634. }
  635. .five {
  636. margin: 2vw 0 0 0;
  637. .five_1 {
  638. background-color: var(--mainColor);
  639. padding: 2vw;
  640. .rich-img {
  641. width: 100% !important;
  642. display: block;
  643. }
  644. }
  645. }
  646. }
  647. }
  648. .scroll-view {
  649. position: absolute;
  650. top: 0;
  651. left: 0;
  652. right: 0;
  653. bottom: 0;
  654. .list-scroll-view {
  655. display: flex;
  656. flex-direction: column;
  657. }
  658. }
  659. .scrollView {
  660. height: 100vh;
  661. }
  662. .collect {
  663. position: fixed;
  664. top: 4vw;
  665. right: 5vw;
  666. text {
  667. font-size: 30px;
  668. background-color: #0000005f;
  669. border-radius: 90px;
  670. }
  671. }
  672. .menu {
  673. position: fixed;
  674. bottom: 30vw;
  675. right: 5vw;
  676. text {
  677. font-size: 30px;
  678. background-color: #0000005f;
  679. border-radius: 90px;
  680. }
  681. }
  682. .menu_1 {
  683. position: fixed;
  684. bottom: 40vw;
  685. right: 5vw;
  686. background-color: var(--mainColor);
  687. padding: 2vw;
  688. .title {
  689. display: flex;
  690. padding: 2vw;
  691. border-bottom: 0.1vw solid var(--fcColor);
  692. .image {
  693. width: 7vw;
  694. height: 6vw;
  695. }
  696. .name {
  697. margin: 0 0 0 1vw;
  698. font-size: var(--font14Size);
  699. }
  700. }
  701. }
  702. .backTop {
  703. position: fixed;
  704. bottom: 20vw;
  705. right: 5vw;
  706. text {
  707. font-size: 30px;
  708. background-color: #0000005f;
  709. border-radius: 90px;
  710. }
  711. }
  712. uni-popup {
  713. z-index: 999999 !important;
  714. }
  715. .content {
  716. height: 100vw;
  717. .one {
  718. display: flex;
  719. flex-direction: row;
  720. justify-content: space-between;
  721. margin: 2vw;
  722. padding: 2vw 0;
  723. border-bottom: 1px solid var(--f9Color);
  724. .image {
  725. width: 25vw;
  726. height: 25vw;
  727. margin: 0 2vw 0 0;
  728. }
  729. .other {
  730. display: flex;
  731. flex-direction: column;
  732. flex-grow: 1;
  733. margin: 0 0 0 2vw;
  734. .money {
  735. color: var(--fFB1Color);
  736. font-size: var(--font20Szie);
  737. padding: 2vw 0;
  738. }
  739. .other_1 {
  740. font-size: var(--font14Size);
  741. text {
  742. padding: 0 2vw;
  743. color: var(--f85Color);
  744. }
  745. }
  746. }
  747. }
  748. .two {
  749. margin: 0 2vw;
  750. padding: 2vw 0;
  751. font-size: var(--font12Size);
  752. border-bottom: 1px solid var(--f9Color);
  753. .two_2 {
  754. display: flex;
  755. flex-wrap: wrap;
  756. padding: 1vw;
  757. margin: 1vw 0 0 0;
  758. text {
  759. margin: 1vw 2vw 0 0;
  760. padding: 1vw;
  761. border-radius: 1vw;
  762. background-color: var(--f9Color);
  763. }
  764. .style {
  765. color: var(--mainColor);
  766. background-color: var(--ff0Color);
  767. }
  768. }
  769. }
  770. .thr {
  771. display: flex;
  772. justify-content: flex-start;
  773. margin: 0 2vw;
  774. padding: 2vw 0;
  775. text {
  776. margin: 0 2vw 0 0;
  777. }
  778. text:last-child {
  779. margin: 0 0 0 2vw;
  780. font-size: var(--font12Size);
  781. color: var(--f85Color);
  782. }
  783. }
  784. .btn {
  785. display: flex;
  786. justify-content: space-between;
  787. position: fixed;
  788. bottom: 0;
  789. text {
  790. width: 100vw;
  791. padding: 4vw 0;
  792. background-color: var(--fFB1Color);
  793. text-align: center;
  794. font-size: var(--font18Szie);
  795. color: var(--mainColor);
  796. }
  797. .button {
  798. width: 50vw;
  799. }
  800. .button2 {
  801. width: 50vw;
  802. background-color: #FF8A18;
  803. }
  804. }
  805. }
  806. </style>