detail.vue 19 KB

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