Blame view

src/pages/details/details.vue 17.8 KB
25347a006   范牧   详情页重构
1
2
  <template>
    <view class="container">
530bb7e83   范牧   重构详情页-商品介绍
3
      <!-- 基础信息 -->
3cda19af7   范牧   详情页-售后保障
4
      <view class="basic_info">
25347a006   范牧   详情页重构
5
6
7
8
9
10
11
12
13
        <!-- 轮播图 -->
        <swiper
          class="swiperImage"
          :indicator-dots="true"
          :autoplay="true"
          :interval="4000"
          :duration="500"
        >
          <swiper-item
3cda19af7   范牧   详情页-售后保障
14
            v-for="(item, index) in carousel"
25347a006   范牧   详情页重构
15
16
17
18
19
20
21
22
23
24
            :key="index"
          >
            <image
              :src="item"
              mode="scaleToFill"
            ></image>
          </swiper-item>
        </swiper>
        <!-- 产品价格及购买人数 -->
        <view class="info_pay">
3cda19af7   范牧   详情页-售后保障
25
26
27
28
29
          <view>¥{{goodsInfo.price || '暂无'}}<span
              v-if="goodsInfo.discountPrice"
              class="info_pay_discount"
            >¥{{goodsInfo.discountPrice}}</span></view>
          <span class="info_pay_number">{{goodsInfo.tradeNumber || '暂无'}}人购买过</span>
25347a006   范牧   详情页重构
30
31
32
        </view>
        <!-- 产品名称 -->
        <view class="info_name">
3cda19af7   范牧   详情页-售后保障
33
          <text class="info_name_name">{{goodsInfo.name || '暂无'}}</text>
5bca13074   范牧   分享功能
34
35
36
37
          <view
            @tap="confirmShare"
            class="info_name_share"
          >
3cda19af7   范牧   详情页-售后保障
38
39
40
            <image src="/static/img/detail/share-icon.png"></image>
            <text>分享</text>
          </view>
25347a006   范牧   详情页重构
41
42
43
44
45
46
47
48
        </view>
        <!-- 产品售后信息 -->
        <view class="info_after">
          <span>支持7天无理由退货</span>
          <span>顺丰发货</span>
          <span>30天质量保证</span>
        </view>
      </view>
530bb7e83   范牧   重构详情页-商品介绍
49
      <!-- 详细信息 -->
3cda19af7   范牧   详情页-售后保障
50
51
52
53
      <view class="detail_info">
        <!-- 详细信息菜单 -->
        <view class="screen_bar">
          <view
530bb7e83   范牧   重构详情页-商品介绍
54
55
56
            v-for="(item, index) in screenItems"
            :key="index"
            @click="tabChange(index)"
3cda19af7   范牧   详情页-售后保障
57
58
59
          >
            <view
              class="screen_item"
530bb7e83   范牧   重构详情页-商品介绍
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
              v-bind:class="{ item_active: item_current === index }"
            >{{ screenItems[index] || '暂无' }}</view>
          </view>
        </view>
        <!-- 商品介绍 -->
        <view
          class="screen_item"
          v-if="item_current === 0"
        >
          <Introduce :tag="tag" />
        </view>
        <!-- 规格参数 -->
        <view
          class="screen_item"
          v-if="item_current === 1"
        >
          <view class="specification">
            <view
              class="spe_item"
              v-for="(item, index) in specification"
              :key="index"
            >
              <image
                class="spe_image"
                v-bind:src="item.img"
              ></image>
              <span>{{item.standard || '暂无'}}</span>
              <span>{{item.slength || '暂无'}}</span>
            </view>
3cda19af7   范牧   详情页-售后保障
89
90
91
92
93
94
95
96
97
98
          </view>
        </view>
        <!-- 售后保障 -->
        <view
          class="screen_item"
          v-if="item_current === 2"
        >
          <AfterSails />
        </view>
      </view>
530bb7e83   范牧   重构详情页-商品介绍
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
      <!-- 评价 -->
      <template v-if="item_current !== 2">
        <view class="evaluate">
          <!-- 标题 -->
          <view class="evaluate_title">
            <view><span>宝贝好评率</span><span class="title_rate">{{evaluate.rate}}</span></view>
            <!-- 星星 -->
            <view class="evaluate_star">
              <view
                class="star"
                v-for="(item, index) in evaluate.star"
                :key="index"
              >
                <image
                  src="../../static/img/detail/d_star.png"
                  mode="aspectFill"
                  style="height: 26rpx; width: 28rpx;"
                ></image>
              </view>
            </view>
          </view>
          <!-- 标签 -->
          <view class="evaluate_tag">
            <view
              v-for="(item, index) in evaluate.tag"
              :key="index"
            >{{item.name}}</view>
          </view>
        </view>
      </template>
      <!-- 商品详情页 -->
      <template v-if="current !==2">
        <view class="more_info">
          <view
            class="more_fixed1"
            @click="consolg(goodInfo.prodIntro1)"
          >
            <image src="/static/img/detail/hr.png"></image>
            <view>商品详情</view>
            <image src="/static/img/detail/hr.png"></image>
          </view>
          <view
            class="more_all"
            v-html="more"
          >
          </view>
        </view>
      </template>
      <!-- 底部菜单 -->
      <view class="menu">
        <view
          @tap="toCart()"
          class="menu_1"
        >
          <view class="cart_icon">
            <image src="/static/tab-cart.png" />
            <text>{{cartNumber}}</text>
          </view>
          <view class="menu_image">购物车</view>
        </view>
        <view class="menu_2">
          <view
            class="menu_input"
            @tap="showBottom(1)"
          >加入购物车</view>
          <view
            class="menu_now"
            @click="showBottom(2)"
          >立即购买</view>
        </view>
      </view>
5bca13074   范牧   分享功能
170
      <!-- 参数选择 -->
88c0598d3   范牧   详情页参数选择修改
171
172
173
174
175
176
177
178
179
180
      <template v-if="isShowBottom">
        <BottomSheet
          :isCart="isCart"
          @addCart="addCart"
          :pid="pid"
          :goodInfo="goodInfo"
          :isShowBottom="isShowBottom"
          @closeBottom="closeBottom"
        ></BottomSheet>
      </template>
5bca13074   范牧   分享功能
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
      <!-- 分享 -->
      <template>
        <uni-popup
          ref="popupShare"
          type="share"
        >
          <uni-popup-share @select="selectShare"></uni-popup-share>
        </uni-popup>
      </template>
      <!-- 分享海报 -->
      <template>
        <uni-popup
          ref="uniPopupPost"
          type="center"
        >
          <uni-popup-post :postUrl="postUrl"></uni-popup-post>
        </uni-popup>
      </template>
25347a006   范牧   详情页重构
199
200
201
202
203
    </view>
  </template>
  
  <script>
  import store from '@/store'
5bca13074   范牧   分享功能
204
  import Introduce from './components/Introduce' // 商品介绍基本信息组件
530bb7e83   范牧   重构详情页-商品介绍
205
  import AfterSails from './components/AfterSails' // 售后保障组件
5bca13074   范牧   分享功能
206
207
  import uniPopupShare from '@/components/uni-popup/uni-popup-share.vue' // 分享组件
  import uniPopupPost from '@/components/uni-popup/uni-popup-post.vue' // 分享组件
88c0598d3   范牧   详情页参数选择修改
208
  import BottomSheet from '@/components/BottomSheet/BottomSheet.vue' // 参数选择组件
25347a006   范牧   详情页重构
209
210
  
  export default {
3cda19af7   范牧   详情页-售后保障
211
    components: {
530bb7e83   范牧   重构详情页-商品介绍
212
      Introduce,
3cda19af7   范牧   详情页-售后保障
213
      AfterSails,
88c0598d3   范牧   详情页参数选择修改
214
      BottomSheet,
5bca13074   范牧   分享功能
215
216
      uniPopupShare,
      uniPopupPost,
3cda19af7   范牧   详情页-售后保障
217
    },
25347a006   范牧   详情页重构
218
219
220
    data () {
      return {
        pid: 7, // 产品ID
3cda19af7   范牧   详情页-售后保障
221
222
223
224
        skId: undefined, // skuId
        // 详细信息菜单
        item_current: 0,
        screenItems: [
530bb7e83   范牧   重构详情页-商品介绍
225
226
227
          '商品介绍',
          '规格参数',
          '售后保障',
3cda19af7   范牧   详情页-售后保障
228
        ],
5bca13074   范牧   分享功能
229
        showPostImg: false, // 是否展示分享海报
88c0598d3   范牧   详情页参数选择修改
230
231
        isShowBottom: false, // 是否展示参数选择
        isCart: 1, // 参数选择 按钮判断
25347a006   范牧   详情页重构
232
233
234
      }
    },
    onLoad({ pid = this.pid, sk_id: skId }) {
530bb7e83   范牧   重构详情页-商品介绍
235
      // 根据页面传参请求页面数据
25347a006   范牧   详情页重构
236
      this.pid = pid
3cda19af7   范牧   详情页-售后保障
237
      this.skId = skId
25347a006   范牧   详情页重构
238
239
240
  
      // 获取产品详情
      this.getDetails({ pid, skId })
530bb7e83   范牧   重构详情页-商品介绍
241
242
      // 获取购物车数据
      this.getCartNum()
25347a006   范牧   详情页重构
243
244
    },
    computed: {
3cda19af7   范牧   详情页-售后保障
245
      // 获取轮播图数据
88c0598d3   范牧   详情页参数选择修改
246
247
248
249
      goodInfo() {
        return this.$store.state.details.goodInfo
      },
      // 获取轮播图数据
3cda19af7   范牧   详情页-售后保障
250
251
252
253
254
255
256
      carousel() {
        return this.$store.state.details.carousel
      },
      // 商品基本信息
      goodsInfo() {
        return this.$store.state.details.goodsInfo
      },
530bb7e83   范牧   重构详情页-商品介绍
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
      // 商品介绍商品标签
      tag() {
        return this.$store.state.details.tag
      },
      // 规格参数
      specification() {
        return this.$store.state.details.specification
      },
      // 评价
      evaluate() {
        return this.$store.state.details.evaluate
      },
      // 商品详情
      more() {
        return this.$store.state.details.more
      },
      // 购物车数目
      cartNumber() {
        return this.$store.state.details.cartNumber
      },
5bca13074   范牧   分享功能
277
278
279
280
281
282
283
284
      // 购物车数目
      skuList() {
        return this.$store.state.details.skuList
      },
      // 分享海报
      postUrl() {
        return this.$store.state.details.postUrl
      },
25347a006   范牧   详情页重构
285
286
287
288
    },
    methods: {
      // 获取产品详情
      getDetails({ pid, skId }) {
3cda19af7   范牧   详情页-售后保障
289
        store.dispatch('details/details', {
25347a006   范牧   详情页重构
290
291
          pid,
          sk_id: skId,
25347a006   范牧   详情页重构
292
        })
88c0598d3   范牧   详情页参数选择修改
293
294
295
296
        store.dispatch('read/fetch', {
          pid,
          sk_id: skId,
        })
25347a006   范牧   详情页重构
297
      },
530bb7e83   范牧   重构详情页-商品介绍
298
299
300
301
      // 获取购物车数目
      getCartNum() {
        store.dispatch('details/getCartNumber')
      },
3cda19af7   范牧   详情页-售后保障
302
303
304
305
306
      // 切换详细信息菜单
      tabChange (e) {
        if (this.current !== e) {
          this.item_current = e
        }
25347a006   范牧   详情页重构
307
      },
5bca13074   范牧   分享功能
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
      // 打开分享界面
      confirmShare() {
        this.$refs.popupShare.open()
      },
      // 选择分享
      selectShare(e, done) {
        switch (e.item.name) {
          // 分享到好物圈
          case 'recommend':
            this.shareRecommend()
            break
          // 分享到朋友圈
          case 'friend':
            break
          // 生成海报
          case 'poster':
            uni.showLoading({
              title: '生成图片中',
            })
            this.sharePost()
            break
          default:
            break
        }
        done()
      },
      // 分享到好物圈
      shareRecommend() {
        if (wx.openBusinessView) {
          wx.openBusinessView({
            businessType: 'friendGoodsRecommend',
            extraData: {
              product: {
                item_code: '58_68',
                title: this.goodsInfo.name,
                image_list: this.carousel,
              },
            },
            success: function (res) {
              uni.showToast({
                title: '好物圈分享成功!',
                icon: 'none',
                duration: 2000,
              })
              // 向服务器报告这个事情
              // TODO:::记录这个用户的推广过程。
              console.log('好物圈分享成功!', res)
            },
            fail: function (res) {
              console.log('好物圈分享失败!', res)
            },
          })
        }
      },
      // 分享到朋友/圈
      shareFriend() {
        this.onShareAppMessage()
      },
      // 朋友圈设置页面
      onShareAppMessage() {
        let myName = this.$store.state.user.userInfo.nickName
        if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') {
          myName = '【神秘人】'
        } else {
          myName = '【' + myName + '】'
        }
5bca13074   范牧   分享功能
374
375
        return {
          title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等)
2cd0b0f44   范牧   bug修复
376
          path: '/pages/details/details?sid=0&pid=' + this.pid,
5bca13074   范牧   分享功能
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
          imageUrl: this.skuList[0].pic, // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4
          success: function (res) {
            if (res.errMsg === 'shareAppMessage:ok') {
              console.log('分享成功!', res)
            }
          },
          fail: function (res) {
            if (res.errMsg === 'shareAppMessage:fail cancel') {
              console.log('fail', '放弃分享')
            } else if (res.errMsg === 'shareAppMessage:fail') {
              console.log('fail', '分享失败')
            }
          },
        }
      },
      // 生成海报
      sharePost() {
        const fromsid = this.$store.state.user.fromInfo.fromsid || 'undefined'
  
        store.dispatch('details/post', {
          pid: this.pid,
          sid: fromsid === 'undefined' ? 0 : fromsid,
        }).then((data) => {
          uni.hideLoading()
          this.$refs.uniPopupPost.open()
        })
      },
88c0598d3   范牧   详情页参数选择修改
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
      // 参数选择弹窗开关
      showBottom(isCart) {
        this.isCart = isCart
        this.isShowBottom = true
      },
      closeBottom() {
        this.isShowBottom = false
      },
      // 前往购物车
      toCart() {
        uni.switchTab({
          url: '/pages/cart/cart',
          success: res => {},
          fail: (error) => { console.log('跳转购物车失败======>', error) },
          complete: () => { console.log('toCart') },
        })
      },
      // 加入购物车
e79b72133   范牧   加购更新
422
      addCart (mpId, num, checkedSKU, skId, price) {
c00dd2818   范牧   细节修改
423
        const addCartList = {}
36e559203   BigBoss   逻辑完善
424
425
426
        addCartList.mp_id = mpId
        addCartList.sk_id = skId
        addCartList.num = num
eed6c3ca9   BigBoss   订单列表添加支付和取消功能,修改订...
427
        // addCartList.checkedSKU = checkedSKU
36e559203   BigBoss   逻辑完善
428
429
430
431
        addCartList.pid = this.pid
        addCartList.price = price
        console.log('添加购物车的参数', addCartList)
        store.dispatch('cart/addCart', addCartList).then((res) => {
88c0598d3   范牧   详情页参数选择修改
432
433
434
435
436
437
438
          if (res.code === 1) {
            uni.showToast({
              title: '添加成功~',
              icon: 'success',
            })
          }
          // 再次请求购物车接口,实现实时更新
e79b72133   范牧   加购更新
439
          store.dispatch('details/getCartNumber')
88c0598d3   范牧   详情页参数选择修改
440
441
        })
      },
25347a006   范牧   详情页重构
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
    },
  }
  </script>
  
  <style lang="scss">
  .container {
    background-color: #f8f8f8;
    font-family: "PingFangSC-Regular";
    // 板块样式
    > view {
      background: #ffffff;
      margin-bottom: 10px;
      padding: 8px 20px 8px 20px;
      box-sizing: border-box;
    }
3cda19af7   范牧   详情页-售后保障
457
458
    // 基础信息板块
    .basic_info {
25347a006   范牧   详情页重构
459
460
461
462
      // 轮播图
      .swiperImage {
        width: 684rpx;
        height: 480rpx;
2cd0b0f44   范牧   bug修复
463
        text-align: center;
25347a006   范牧   详情页重构
464
465
466
467
468
469
470
471
472
473
474
475
476
477
        image {
          max-width: 100%;
          max-height: 100%;
          border-radius: 16rpx;
        }
      }
      // 产品价格及购买人数
      .info_pay {
        color: #eb5d3b;
        font-size: 18px;
        margin-top: 5px;
        font-family: "PingFangSC-Semibold";
        display: flex;
        justify-content: space-between;
3cda19af7   范牧   详情页-售后保障
478
479
480
481
482
483
        .info_pay_discount {
          text-decoration: line-through;
          margin-left: 8rpx;
          color: #999;
          font-size: 14px;
        }
25347a006   范牧   详情页重构
484
485
486
        .info_pay_number {
          color: #999;
          font-size: 14px;
5bca13074   范牧   分享功能
487
          font-family: PingFangSC-Regular;
25347a006   范牧   详情页重构
488
489
490
491
        }
      }
      // 产品名称
      .info_name {
25347a006   范牧   详情页重构
492
        margin-top: 5px;
3cda19af7   范牧   详情页-售后保障
493
494
495
        display: flex;
        justify-content: space-between;
        .info_name_name {
25347a006   范牧   详情页重构
496
          margin-right: 10px;
3cda19af7   范牧   详情页-售后保障
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
          font-size: 16px;
          font-family: "PingFangSC-Semibold";
          max-width: 592rpx;
        }
        .info_name_share {
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          align-items: center;
          margin-top: 14rpx;
          > image {
            height: 40rpx;
            width: 40rpx;
          }
          > text {
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #999;
            letter-spacing: -0.23px;
          }
25347a006   范牧   详情页重构
517
518
519
520
521
522
        }
      }
      // 售后服务
      .info_after {
        font-size: 10px;
        color: #999;
3cda19af7   范牧   详情页-售后保障
523
        margin-top: 20rpx;
25347a006   范牧   详情页重构
524
525
526
527
528
529
        > span {
          height: 14px;
          margin-right: 10px;
        }
      }
    }
3cda19af7   范牧   详情页-售后保障
530
531
    // 详细信息
    .detail_info {
530bb7e83   范牧   重构详情页-商品介绍
532
      margin-bottom: 20rpx;
3cda19af7   范牧   详情页-售后保障
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
      .screen_bar {
        width: 670rpx;
        margin-top: 20rpx;
        margin-bottom: 24rpx;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 14px;
        color: #333333;
        transition: all 0.2s;
      }
      .item_active {
        border-bottom: 4rpx solid #ff6b4a;
      }
      .screen_item {
        font-size: 32rpx;
        color: #333333;
        display: flex;
        transition: all 0.2s;
530bb7e83   范牧   重构详情页-商品介绍
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
        // 规格参数
        .specification {
          margin-bottom: 4px;
          .spe_item {
            image {
              width: 50px;
              height: 25px;
              margin-right: 6px;
              vertical-align: middle;
            }
            span {
              margin-left: 24rpx;
            }
          }
        }
      }
      //
    }
    // 宝贝好评率
    .evaluate {
      .evaluate_title {
        font-size: 14px;
        color: #333333;
        display: flex;
        justify-content: space-between;
        .title_rate {
          margin-left: 10rpx;
        }
        .evaluate_star {
          width: 90px;
          display: flex;
          align-items: center;
          justify-content: space-between;
        }
        view {
          font-size: 14px;
          color: #333333;
          font-weight: bold;
        }
      }
      .evaluate_tag {
        view {
          display: inline-block;
          margin-right: 20rpx;
          min-width: 180rpx;
          margin-top: 10px;
          height: 48rpx;
          background: #f2f2f2;
          border-radius: 2px;
          font-family: PingFangSC-Regular;
          font-size: 12px;
          color: #666666;
          letter-spacing: -0.23px;
          text-align: center;
          padding: 0 48rpx;
          line-height: 48rpx;
        }
      }
    }
    // 商品详情
    .more_info {
      .more_fixed1 {
        display: flex;
        justify-content: space-between;
        align-content: center;
        margin-bottom: 12px;
        view {
          font-size: 14px;
          color: #333333;
          font-weight: bold;
          font-family: "PingFangSC-Medium";
          line-height: 24px;
        }
        image {
          width: 240rpx;
          height: 3px;
          margin-top: 10px;
        }
      }
      .more_all {
        width: 100%;
        margin-top: 30rpx;
        margin-right: 30rpx;
        margin-bottom: 180rpx;
        font-family: "PingFangSC-Regular";
      }
    }
    // 菜单
    .menu {
      position: fixed;
      bottom: 0;
c00dd2818   范牧   细节修改
644
      min-height: 74px;
530bb7e83   范牧   重构详情页-商品介绍
645
646
647
648
649
650
651
652
653
      width: 100%;
      background: #ffffff;
      padding: 20px 20px 8px 20px;
      font-family: "PingFangSC-Regular";
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-content: center;
      margin: 0;
5bca13074   范牧   分享功能
654
655
656
657
      /* iphonex 等安全区设置,底部安全区适配 */
      /* #ifndef APP-NVUE */
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
530bb7e83   范牧   重构详情页-商品介绍
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
      .menu_1 {
        width: 20%;
        height: 100%;
        text-align: center;
        color: #989898;
        .cart_icon {
          position: relative;
          text {
            position: absolute;
            color: white;
            font-size: 17px;
            background-color: red;
            min-height: 24px;
            min-width: 24px;
            line-height: 24px;
            right: -12%;
            top: -12px;
            text-align: center;
            border-radius: 24px;
            padding: 2px;
          }
        }
      }
      image {
        width: 42%;
        height: 26px;
      }
      .menu_image {
        font-size: 12px;
        text-align: center;
      }
      .menu_2 {
        width: 74%;
c00dd2818   范牧   细节修改
691
        height: 80rpx;
530bb7e83   范牧   重构详情页-商品介绍
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
        display: grid;
        grid-template-columns: 50% 50%;
      }
      .menu_input {
        display: inline-flex;
        align-items: center;
        justify-content: space-around;
        background: #fff0ec;
        font-size: 16px;
        color: #ff6b4a;
        border-radius: 20px 0 0 20px;
      }
      .menu_now {
        display: inline-flex;
        align-items: center;
        justify-content: space-around;
        background: #ff6b4a;
        font-size: 16px;
        color: #ffffff;
        border-radius: 0 20px 20px 0;
3cda19af7   范牧   详情页-售后保障
712
713
      }
    }
25347a006   范牧   详情页重构
714
715
  }
  </style>