Blame view

src/pages/details/details.vue 18 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
      <!-- 评价 -->
      <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
78c1e1372   Adam   auto commit the c...
123
              v-for="(item, index) in evaluate.tag.Colour"
530bb7e83   范牧   重构详情页-商品介绍
124
              :key="index"
78c1e1372   Adam   auto commit the c...
125
            >{{item}}</view>
530bb7e83   范牧   重构详情页-商品介绍
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
          </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
    data () {
      return {
78c1e1372   Adam   auto commit the c...
220
221
        shop_wood_id: 751, // 产品ID
        skId: 2723, // skuId
3cda19af7   范牧   详情页-售后保障
222
223
224
        // 详细信息菜单
        item_current: 0,
        screenItems: [
530bb7e83   范牧   重构详情页-商品介绍
225
226
227
          '商品介绍',
          '规格参数',
          '售后保障',
3cda19af7   范牧   详情页-售后保障
228
        ],
78c1e1372   Adam   auto commit the c...
229
  	  current:0,
5bca13074   范牧   分享功能
230
        showPostImg: false, // 是否展示分享海报
88c0598d3   范牧   详情页参数选择修改
231
232
        isShowBottom: false, // 是否展示参数选择
        isCart: 1, // 参数选择 按钮判断
25347a006   范牧   详情页重构
233
234
      }
    },
78c1e1372   Adam   auto commit the c...
235
    onLoad({ shop_wood_id = this.shop_wood_id, sk_id: skId }) {
530bb7e83   范牧   重构详情页-商品介绍
236
      // 根据页面传参请求页面数据
78c1e1372   Adam   auto commit the c...
237
      this.shop_wood_id = shop_wood_id
3cda19af7   范牧   详情页-售后保障
238
      this.skId = skId
25347a006   范牧   详情页重构
239
240
  
      // 获取产品详情
78c1e1372   Adam   auto commit the c...
241
      this.getDetails({ shop_wood_id, skId })
530bb7e83   范牧   重构详情页-商品介绍
242
243
      // 获取购物车数据
      this.getCartNum()
25347a006   范牧   详情页重构
244
245
    },
    computed: {
3cda19af7   范牧   详情页-售后保障
246
      // 获取轮播图数据
88c0598d3   范牧   详情页参数选择修改
247
248
249
250
      goodInfo() {
        return this.$store.state.details.goodInfo
      },
      // 获取轮播图数据
3cda19af7   范牧   详情页-售后保障
251
252
253
254
255
256
257
      carousel() {
        return this.$store.state.details.carousel
      },
      // 商品基本信息
      goodsInfo() {
        return this.$store.state.details.goodsInfo
      },
530bb7e83   范牧   重构详情页-商品介绍
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
      // 商品介绍商品标签
      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   范牧   分享功能
278
279
280
281
282
283
284
285
      // 购物车数目
      skuList() {
        return this.$store.state.details.skuList
      },
      // 分享海报
      postUrl() {
        return this.$store.state.details.postUrl
      },
25347a006   范牧   详情页重构
286
287
288
    },
    methods: {
      // 获取产品详情
78c1e1372   Adam   auto commit the c...
289
      getDetails({ shop_wood_id, skId }) {
3cda19af7   范牧   详情页-售后保障
290
        store.dispatch('details/details', {
78c1e1372   Adam   auto commit the c...
291
          shop_wood_id:shop_wood_id,
25347a006   范牧   详情页重构
292
          sk_id: skId,
25347a006   范牧   详情页重构
293
        })
88c0598d3   范牧   详情页参数选择修改
294
        store.dispatch('read/fetch', {
78c1e1372   Adam   auto commit the c...
295
          shop_wood_id:shop_wood_id,
88c0598d3   范牧   详情页参数选择修改
296
297
          sk_id: skId,
        })
25347a006   范牧   详情页重构
298
      },
530bb7e83   范牧   重构详情页-商品介绍
299
300
301
302
      // 获取购物车数目
      getCartNum() {
        store.dispatch('details/getCartNumber')
      },
3cda19af7   范牧   详情页-售后保障
303
304
      // 切换详细信息菜单
      tabChange (e) {
78c1e1372   Adam   auto commit the c...
305
306
307
  		console.error('eeeeeee', e);	
        // if (this.current !== e) {
  		  this.current = e
3cda19af7   范牧   详情页-售后保障
308
          this.item_current = e
78c1e1372   Adam   auto commit the c...
309
        // }
25347a006   范牧   详情页重构
310
      },
5bca13074   范牧   分享功能
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
374
375
376
      // 打开分享界面
      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   范牧   分享功能
377
378
        return {
          title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等)
2cd0b0f44   范牧   bug修复
379
          path: '/pages/details/details?sid=0&pid=' + this.pid,
5bca13074   范牧   分享功能
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
          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   范牧   详情页参数选择修改
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
      // 参数选择弹窗开关
      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   范牧   加购更新
425
      addCart (mpId, num, checkedSKU, skId, price) {
c00dd2818   范牧   细节修改
426
        const addCartList = {}
36e559203   BigBoss   逻辑完善
427
428
429
        addCartList.mp_id = mpId
        addCartList.sk_id = skId
        addCartList.num = num
eed6c3ca9   BigBoss   订单列表添加支付和取消功能,修改订...
430
        // addCartList.checkedSKU = checkedSKU
36e559203   BigBoss   逻辑完善
431
432
433
434
        addCartList.pid = this.pid
        addCartList.price = price
        console.log('添加购物车的参数', addCartList)
        store.dispatch('cart/addCart', addCartList).then((res) => {
88c0598d3   范牧   详情页参数选择修改
435
436
437
438
439
440
441
          if (res.code === 1) {
            uni.showToast({
              title: '添加成功~',
              icon: 'success',
            })
          }
          // 再次请求购物车接口,实现实时更新
e79b72133   范牧   加购更新
442
          store.dispatch('details/getCartNumber')
88c0598d3   范牧   详情页参数选择修改
443
444
        })
      },
25347a006   范牧   详情页重构
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
    },
  }
  </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   范牧   详情页-售后保障
460
461
    // 基础信息板块
    .basic_info {
25347a006   范牧   详情页重构
462
463
464
465
      // 轮播图
      .swiperImage {
        width: 684rpx;
        height: 480rpx;
2cd0b0f44   范牧   bug修复
466
        text-align: center;
25347a006   范牧   详情页重构
467
468
469
470
471
472
473
474
475
476
477
478
479
480
        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   范牧   详情页-售后保障
481
482
483
484
485
486
        .info_pay_discount {
          text-decoration: line-through;
          margin-left: 8rpx;
          color: #999;
          font-size: 14px;
        }
25347a006   范牧   详情页重构
487
488
489
        .info_pay_number {
          color: #999;
          font-size: 14px;
5bca13074   范牧   分享功能
490
          font-family: PingFangSC-Regular;
25347a006   范牧   详情页重构
491
492
493
494
        }
      }
      // 产品名称
      .info_name {
25347a006   范牧   详情页重构
495
        margin-top: 5px;
3cda19af7   范牧   详情页-售后保障
496
497
498
        display: flex;
        justify-content: space-between;
        .info_name_name {
25347a006   范牧   详情页重构
499
          margin-right: 10px;
3cda19af7   范牧   详情页-售后保障
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
          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   范牧   详情页重构
520
521
522
523
524
525
        }
      }
      // 售后服务
      .info_after {
        font-size: 10px;
        color: #999;
3cda19af7   范牧   详情页-售后保障
526
        margin-top: 20rpx;
25347a006   范牧   详情页重构
527
528
529
530
531
532
        > span {
          height: 14px;
          margin-right: 10px;
        }
      }
    }
3cda19af7   范牧   详情页-售后保障
533
534
    // 详细信息
    .detail_info {
530bb7e83   范牧   重构详情页-商品介绍
535
      margin-bottom: 20rpx;
3cda19af7   范牧   详情页-售后保障
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
      .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   范牧   重构详情页-商品介绍
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
644
645
646
        // 规格参数
        .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   范牧   细节修改
647
      min-height: 74px;
530bb7e83   范牧   重构详情页-商品介绍
648
649
650
651
652
653
654
655
656
      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   范牧   分享功能
657
658
659
660
      /* iphonex 等安全区设置,底部安全区适配 */
      /* #ifndef APP-NVUE */
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
530bb7e83   范牧   重构详情页-商品介绍
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
691
692
693
      .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   范牧   细节修改
694
        height: 80rpx;
530bb7e83   范牧   重构详情页-商品介绍
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
        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   范牧   详情页-售后保障
715
716
      }
    }
761446509   吉鹏   修改detao;s样式问题
717
      /* #endif */
25347a006   范牧   详情页重构
718
719
  }
  </style>