zh_order_food_xcx/pages-takeout/shop-mod/new-menu.vue

<template>
  <view class="menu-box box-border-box align-items-flex-start">

    <view class="menu-box-left" :style="{top: newNavHeight + 'rpx'}">
      <view class="menu-box-left-box" :style="{height: menuLeftType?`calc(100vh - ${newNavHeight}rpx - ${68}rpx)`:''}">
        <view class="menu-type-list fs-26 box-border-box align-items-center flex-justify-center"
          v-for="(item,i) in categoryData" :key="i" @click="selectType(item)"
          :class="type ===  item.type?'bgc-f fc-3 fw-600':'fc-6 fw-400'" :id="'scroll'+ item.type">
          {{item.name}}
          <view class="menu-type-num fc-f" v-show="item.num > 0">{{item.num > 99?'99+':item.num}}</view>
        </view>
      </view>
    </view>

    <view class="menu-box-only">
      <view class="" v-for="(item,i) in categoryData" :key="i" :id="'scroll'+ item.type">
        <view class="fs-28 fw-600 fc-3 sticky-nav bgc-f p-20 box-border-box" :style="{top: newNavHeight + 'rpx'}">
          {{item.name}}
        </view>
        <view class="menu-list flex-justify-space box-border-box" v-for="(info,k) in item.list" :key="k"
          :id="'goods_id'+ info.goods_id">
          <image class="flex-shrink0 goods_img" :src="info.goods_image" mode="scaleToFill"></image>
          <view class="menu-list-right flex-direction flex-justify-space">
            <view class="mb-8">
              <view class="mb-4 goods-name text-overflow-ellipsis fs-32 fw-600">{{info.goods_name}}
              </view>
              <view class="text-overflow-ellipsis-one fw-400 fc-9 fs-24 mb-2 goods-name" v-if="info.spec_type == 1">
                {{info.goods_desc?info.goods_desc:''}}
              </view>
              <view class="fw-400 fc-9 fs-24">月销{{info.sales}}</view>
            </view>
            <view class="flex-justify-space align-items-flex-end">
              <view class="">
                <span class="fs-24 fw-400 fc-FB3D03">￥</span>
                <span class="fs-40 fw-b fc-FB3D03">{{info.seckill_money>0?info.seckill_money:info.price}}</span>
              </view>
              <view class="display-flex align-items-center" v-if="info.spec_type == 1">
                <image v-show="info.num > 0" class="wh-44" @click="addred(1,i,k,info)" src="@/static/img/takeout/j.png"
                  mode=""></image>
                <view v-show="info.num > 0" class="right-only-right-2 text-align-center fs-28 fw-400">{{info.num}}
                </view>
                <image class="wh-44" src="@/static/img/takeout/add.png" @click="addred(2,i,k,info)" mode=""></image>
              </view>
              <view v-else class="right-only-right text-align-center" @click="addred(3,i,k,info)">
                <view class="fw-600 fs-28 fc-f">
                  选规格
                </view>
                <view class="selectedNum" v-if="info.num>0">
                  {{info.num}}
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

  </view>
</template>

<script>
  import tools from "@/service/tools";
  import {
    shopCategory,
    shopGoods,
    shopGoodsSpec
  } from "@/api/shop";
  import {
    shoppingSave,
    getShopIngList,
    setShopIngAdd,
    setShopIngDel,
    setShopIngNumber
  } from "@/api/shopping";
  export default {
    name: 'menu-box',
    props: {
      'shop_id': {
        default: 0
      },
      'newNavHeight': {
        default: 0
      },
      'menuLeftType': {
        default: false
      }
    },
    data() {
      return {
        idMark: '', //滚动自适应参数
        idMarkTwo: '', //滚动自适应参数
        type: 0, //分类标识
        typeList: [],
        categoryData: [{
            type: 0,
            name: '测试1',
            list: [{
              goods_id: 1,
              goods_name: '测试商品1-1',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 2,
              goods_name: '测试商品1-2',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 3,
              goods_name: '测试商品1-3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 1,
            name: '测试2',
            list: [{
              goods_id: 4,
              goods_name: '测试商品2-1',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 5,
              goods_name: '测试商品2-2',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }, {
              goods_id: 6,
              goods_name: '测试商品2-3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 2,
            name: '测试3',
            list: [{
              goods_id: 7,
              goods_name: '测试商品3',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 3,
            name: '测试4',
            list: [{
              goods_id: 8,
              goods_name: '测试商品4',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          }, {
            type: 4,
            name: '测试5',
            list: [{
              goods_id: 9,
              goods_name: '测试商品5',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 5,
            name: '测试6',
            list: [{
              goods_id: 10,
              goods_name: '测试商品6',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 6,
            name: '测试7',
            list: [{
              goods_id: 11,
              goods_name: '测试商品7',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 7,
            name: '测试8',
            list: [{
              goods_id: 12,
              goods_name: '测试商品8',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
          {
            type: 8,
            name: '测试9',
            list: [{
              goods_id: 13,
              goods_name: '测试商品9',
              price: '10',
              goods_image: 'https://qcloud.dpfile.com/pc/JvY4fMzO0Km80S9Sn-tNxYin28jkvrNMJV-pUo8YwCctS4AHLKPXFhGyuI2dCwk8.jpg'
            }]
          },
        ],
        menuList: [],
        cartData: {
          total_price: 0,
          total_num: 0,
          total_goods_money: 0,
          pack_price: 0,
          must_category: 0,
          is_place_order: 0,
          err_msg: 0,
          goods_list: [],
        },
        isAjax: false,
        operate_id: '',
        popData: {
          goodsItem: {},
          price: '0.00',
          line_price: '',
          num: 0,
          goods_id: '',
          is_quota: 0,
          is_infinite: 0,
          quota_num: 0,
          payNum: 0,
          stock: 0,
          spec_key: '',
          goods_spec_id: '',
          spec_name: [],
          spec_ids: [],
          spec_list: [],
          spec_attr: [],
        },
        selectedNum: 1,
        selectedSpecification: [],
        scrollType: true
      }
    },
    watch: {},
    mounted() {},
    methods: {
      setSpecNum(type) {
        // this.popData.spec_ids
        if (!this.popData.spec_key) {
          console.log('被阻挡');
          tools.error('请选择规格')
          return;
        }
        if (type === 1) {
          // 减
          console.log('减');
          if (this.popData.num > 1) {
            --this.popData.num;
            this.$forceUpdate()
          } else {
            this.isAjax = false
          }
        } else {
          console.log('加');
          if (this.popData.is_infinite === 0 && this.popData.payNum > this.popData.stock) {
            console.log('加1');
            tools.error('商品库存' + this.popData.stock + '件')
          } else if (this.popData.is_quota > 0 && this.popData.payNum > this.popData.quota_num) {
            console.log('加2');
            tools.error('限购' + this.popData.quota_num + '件')
          } else {
            // 加
            console.log('加3');
            ++this.popData.num;
            this.$forceUpdate()
          }
        }

      },
      getShopGoodsSpec(item) {
        console.log(item, this.cartData, 'item');
        shopGoodsSpec({
          'goods_id': item.goods_id
        }).then(res => {
          console.log(item, 'item');
          this.popData.goodsItem = item
          if (this.popData.goods_id !== item.goods_id) {
            this.popData.goods_id = item.goods_id
            this.popData.spec_name = []
            // this.popData.price = '0.00'
            this.popData.price = item.price
            this.popData.line_price = ''
            this.popData.spec_key = ''
            this.popData.num = 1
            this.popData.spec_ids = []
            console.log(this.popData, '走if');
            this.$forceUpdate()
          } else {
            console.log(this.popData, '无');
            this.popData.num = 1;
            // this.popData.price = item.price
            if (this.cartData.goods_list.length > 0) {
              this.cartData.goods_list.forEach(item => {
                if (item.goods_spec_id === this.popData.spec_key) {
                  // this.popData.num = this.selectedSpecification.goods_number
                  this.popData.num = this.popData.payNum
                  console.log(this.popData, '走else');
                  this.$forceUpdate()
                }
              })
            }
          }
          this.popData.spec_list = res.data
          this.popData.spec_attr = res.data
          console.log(this.selectedSpecification, 'this.selectedSpecification');
          this.selectedSpecification.forEach((v, k) => {
            if (v.goods_id === item.goods_id) {
              v.goodsItem = item
              v.spec_list = res.data
              v.spec_attr = res.data
              v.num = v.goods_number
              let data = JSON.parse(JSON.stringify(v))
              this.popData = data
            }
          })
          console.log(this.popData, 'this.popData');
          this.$refs.popupGG.open();
          this.setGoodsSpecPrice()
          this.isAjax = false
        }).catch(() => {
          tools.error('规格信息异常')
          this.isAjax = false
        })
      },
      setGoodsSpecPrice() {
        console.log(this.popData.spec_ids)
        if (this.popData.spec_ids.length > 0) {
          let spec_ids = JSON.parse(JSON.stringify(this.popData.spec_ids))
          spec_ids.sort((a, b) => a - b);
          let spec_key = spec_ids.join('_')
          this.popData.spec_key = spec_key
        } else {
          this.popData.num = 1
          this.popData.goods_spec_id = ''
        }
      },
      setShopIngList(cartData) {
        this.cartData = cartData
        this.selectedSpecification = []
        this.setGoodsNum()
      },
      getShopIngList(isStart) {
        getShopIngList({
          'shop_id': this.shop_id,
        }).then(res => {
          if (res.code === 1) {
            this.cartData = res.data
            let data = res.data
            data.goods_list.forEach((v, k) => {
              let ge = JSON.parse(JSON.stringify(v))
              ge.spec_ids = ge.goods_spec_id.split('_').map(item => Number(item.trim()))
              ge.spec_name = ge.goods_attr.split(',').map(item => item.trim())
              this.selectedSpecification.push(ge)
            })
            console.log(this.selectedSpecification, '初始回显已选数据');
            this.$emit('setCartData', this.cartData)
            this.setGoodsNum()
          }
        })
      },
      setGoodsNum() {
        if (this.cartData.goods_list.length > 0) {
          let goodsIds = []
          this.categoryData.forEach(categoryItem => {
            categoryItem.list.forEach(goodsItem => {
              goodsItem.num = 0
              this.cartData.goods_list.forEach(item => {
                if (item.goods_id === goodsItem.goods_id) {
                  if (goodsIds.indexOf(item.goods_id) < 0) {
                    goodsIds.push(item.goods_id)
                    goodsItem.num = item.goods_number * 1
                  } else {
                    goodsItem.num += item.goods_number * 1
                  }
                }
              })
            })
          })
        } else {
          //购物车数据清除
          this.categoryData.forEach(categoryItem => {
            categoryItem.list.forEach(goodsItem => {
              goodsItem.num = 0
            })
          })
        }
      },
      getShopGoods() {
        if (this.shop_id < 0 || !this.operate_id) {
          return;
        }
        shopGoods({
          'shop_id': this.shop_id,
          operate_id: this.operate_id,
        }).then(res => {
          if (res.code === 1) {
            this.categoryData = res.data
            const category_id = uni.getStorageSync('category_id')
            const goods_id = uni.getStorageSync('goods_id')
            if (category_id.type && category_id.type != 'undefined') {
              this.selectType(category_id, goods_id)
            } else {
              this.selectType(this.categoryData[0])
            }
            this.categoryData.forEach(categoryItem => {
              categoryItem.list.forEach(goodsItem => {
                goodsItem.payNum = 0
                goodsItem.spec = []
              })
            })
            setTimeout(() => {
              this.setGoodsNum()
            }, 1000)
          }
        })
      },
      selectType(item, itemTwo) {
        if (this.type != item.type) {
          this.type = item.type;
          this.idMark = 'scroll' + item.type
          
          // 触发事件通知父组件需要滚动
          this.$emit('scrollToCategory', {
            type: item.type,
            selector: `#scroll${item.type}`
          });

          this.$forceUpdate()
        }
      },
      menuScroll(e) {
        let _this = this;
        let query = uni.createSelectorQuery().in(this);
        const goods_id = uni.getStorageSync('goods_id')
        if (goods_id.goodsId && goods_id.goodsId != 'undefined') {
          query.selectAll(".menu-list").boundingClientRect(data => {
            data.forEach((v) => {
              if (data[this.categoryData.length - 1].top <= 392) {
                return
              }
              if (v.top < 332 && v.top > 0) {
                // _this.idMark = v.id;
                let arr = v.id.split('scroll');
              }
            })
            uni.setStorageSync('category_id', '')
            uni.setStorageSync('goods_id', '')
          }).exec();
        } else {
          query.selectAll(".menu-box-only").boundingClientRect(data => {
            data.forEach((v) => {
              if (data[this.categoryData.length - 1].top <= 392) {
                return
              }
              if (v.top < 332 && v.top > 0) {
                // _this.idMark = v.id;
                let arr = v.id.split('scroll');
                _this.type = Number(arr[1]);
              }
              this.$forceUpdate()
            })
          }).exec();
        }
      },
      addred(type, i, k, item) {
        if (this.isAjax) {
          return
        }
        this.isAjax = true
        if (type === 1) {
          // 减
          --item.num;
          if (item.num >= 0) {
            this.addShoppingSave(item, item.num, type)
          } else {
            this.isAjax = false
          }
        } else if (type === 2) {
          // 加
          ++item.num;
          if (item.is_infinite === 0 && item.num > item.stock) {
            tools.error('商品库存' + item.stock + '件')
              --item.num
            this.isAjax = false
          } else if (item.is_quota > 0 && item.num > item.quota_num) {
            tools.error('限购' + item.quota_num + '件')
              --item.num
            this.isAjax = false
          } else {
            this.addShoppingSave(item, item.num, type)
          }

        } else if (type === 3) {
          // 选规格
          console.log(item, '000000000')
          console.log(this.selectedSpecification, '1111111111111');
          this.selectedSpecification.forEach((v, k) => {
            if (v.goods_id === item.goods_id) {
              v.quota_num = item.quota_num
              v.payNum = item.num
              v.stock = item.stock
            }
          })
          this.popData.is_quota = item.is_quota
          this.popData.quota_num = item.quota_num
          this.popData.is_infinite = item.is_infinite
          this.popData.payNum = item.num
          this.popData.stock = item.stock
          this.getShopGoodsSpec(item)
        } else {
          let data = JSON.parse(JSON.stringify(this.popData))
          this.selectedSpecification.push(data)
          console.log(this.popData, "666666666666666666")
          console.log('1', this.popData.goods_id, this.shop_id, this.popData.goodsItem.category_id, this.popData
            .spec_key, this.popData.num);
          this.setShoppingSave()
          this.isAjax = false
        }
      },
      addShoppingSave(item, num, type) {
        shoppingSave({
          type: 1,
          goods_id: item.goods_id,
          shop_id: this.shop_id,
          category_id: item.category_id,
          goods_spec_id: '',
          number: num
        }).then((res) => {
          if (res.code === 1) {
            if (type === 1) {
              tools.success('操作成功')
            } else {
              tools.success(res.msg)
            }
            this.isAjax = false
            this.getShopIngList()
          } else {
            this.isAjax = false
            tools.error(res.msg)
          }
        })
      },
      gbPop() {
        this.$refs.popupGG.close();
      },
      setSub(item, type) {
        let cartKey = this.cartData.goods_list.findIndex(row => row.goods_id === item.goods_id)
        if (type === 2 && cartKey < 0) {
          this.setShopIngAdd(item.goods_id, item.category_id, '', 1, item)
        } else {
          this.setShopIngNumber(item.goods_id, item.category_id, type, '', 1, item)
        }
      },
      setShoppingSave() {
        shoppingSave({
          type: 1,
          goods_id: this.popData.goods_id,
          shop_id: this.shop_id,
          category_id: this.popData.goodsItem.category_id,
          goods_spec_id: this.popData.spec_key,
          number: this.popData.num
        }).then((res) => {
          if (res.code === 1) {
            tools.success(res.msg)
            this.$refs.popupGG.close();
            this.getShopIngList()
          } else {
            tools.error(res.msg)
          }
        })
      },
      setShopIngAdd(goodsId, categoryId, goodsSpecId, number, item) {
        setShopIngAdd({
          'type': 1,
          'goods_id': goodsId,
          'shop_id': this.shop_id,
          'category_id': categoryId,
          'goods_spec_id': goodsSpecId,
          'number': number,
        }).then(res => {
          this.isAjax = false
          if (res.code === 1) {
            if (item) {
              ++item.num;
            }
            this.getShopIngList()
          } else if (res.code === 2) {
            tools.error(res.msg)
            if (item) {
              ++item.num;
            }
            this.getShopIngList()
          } else {
            tools.error(res.msg)
          }

        }).catch(() => {
          this.isAjax = false
        })
      },
      setShopIngNumber(goodsId, categoryId, operation, goodsSpecId, number, item) {
        setShopIngNumber({
          'type': 1,
          'goods_id': goodsId,
          'shop_id': this.shop_id,
          'category_id': categoryId,
          'goods_spec_id': goodsSpecId,
          'number': number,
          'operation': operation === 2 ? 1 : 2,
        }).then(res => {
          this.isAjax = false
          if (res.code === 1) {
            if (item) {
              if (operation === 2) {
                ++item.num;
              } else {
                --item.num;
              }
            }
            this.getShopIngList()
          } else if (res.code === 2) {
            tools.error(res.msg)
            if (item) {
              if (operation === 2) {
                ++item.num;
              } else {
                --item.num;
              }
            }
            this.getShopIngList()
          } else {
            tools.error(res.msg)
          }

        }).catch(() => {
          this.isAjax = false
        })
      },

      setShopIngDel() {},
      // -------弹窗选择规格-----------
      selectSpec(info, groupKey) {
        let specKey = this.popData.spec_ids.indexOf(info.spec_id)
        if (specKey >= 0) {
          this.popData.spec_ids.splice(specKey, 1)
          this.popData.spec_name.splice(specKey, 1)
          if (Number(info.spec_price) > 0) {
            this.popData.price = Number(this.popData.price) - Number(info.spec_price)
          }
        } else {
          this.popData.spec_ids.push(info.spec_id)
          this.popData.spec_name.push(info.spec_name)
          if (Number(info.spec_price) > 0) {
            this.popData.price = Number(this.popData.price) + Number(info.spec_price)
          }
          for (const attrKey in this.popData.spec_attr[groupKey].spec_list) {
            if (this.popData.spec_attr[groupKey].spec_list[attrKey].spec_id !== info.spec_id) {
              let oldKey = this.popData.spec_ids.indexOf(this.popData.spec_attr[groupKey].spec_list[attrKey]
                .spec_id)
              if (oldKey >= 0) {
                this.popData.spec_ids.splice(oldKey, 1)
                this.popData.spec_name.splice(oldKey, 1)
                this.popData.price = Number(this.popData.price) - Number(this.popData.spec_attr[groupKey]
                  .spec_list[attrKey].spec_price)
              }
            }
          }
        }
        // this.spec_ids = this.popData.spec_list.join('_')
        this.setGoodsSpecPrice()
      },
    },
  }
</script>

<style scoped lang="scss">
  .sticky-nav {
    width: 100%;
    position: sticky;
    z-index: 3;
  }

  .wh-44 {
    width: 44rpx;
    height: 44rpx;
  }

  .menu-box-left-f {
    position: sticky;
    // transition: all .3s ease;
    // overflow: auto;
  }

  .menu-box-left {
    width: 160rpx;
    height: auto;
    position: sticky;
    overflow: auto;
    // transition: all .3s ease;
    // height: 100%;
    // background-color: #F7F8FA;
    // position: absolute;
    // left: 0;
    // top: 0;
    // border-radius: 0rpx 20rpx 0 0rpx;
  }

  .menu-box-left-box {
    overflow-y: auto;
  }

  .menu-type-list {
    width: 160rpx;
    min-height: 108rpx;
    padding: 18rpx 28rpx;
    position: relative;
    z-index: 10;

    .menu-type-num {
      position: absolute;
      top: 2rpx;
      right: 8rpx;
      padding: 0 6rpx;
      min-width: 20rpx;
      height: 32rpx;
      text-align: center;
      line-height: 32rpx;
      background: #FB3D03;
      border-radius: 50%;
    }
  }

  .menu-type-list-f {
    // width: 160rpx;
    background-color: #007AFF;

    width: 100%;
    height: 100%;
    overflow-y: auto;
    /* 如果分类项很多，允许内部滚动 */
    -webkit-overflow-scrolling: touch;
    /* 改善移动端滚动体验 */
    // height: 100%;
  }

  .menu-box-only {
    // flex: 1;
    width: calc(100% - 160rpx);
  }

  .menu-box-right {
    // flex: 1;
    width: 100%;
    height: 100%;
    // padding: 16rpx 0;
    // box-sizing: border-box;
    // position: relative;
  }

  .menu-list {
    width: 100%;
    padding: 0 20rpx 40rpx;
    // height: 200rpx;
    // margin-bottom: 40rpx;

    .goods_img {
      width: 200rpx;
      height: 200rpx;
      border-radius: 12rpx;
      margin-right: 16rpx;
    }

    .menu-list-right {
      flex: 1;

      .right-only-right {
        width: 100rpx;
        height: 44rpx;
        background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
        border-radius: 12rpx;
        line-height: 44rpx;
        position: relative;

        .selectedNum {
          position: absolute;
          right: 2rpx;
          top: -22rpx;
          font-size: 24rpx;
          color: #fff;
          width: 32rpx;
          height: 32rpx;
          line-height: 32rpx;
          background: #FB3D03;
          border-radius: 50%;
        }
      }

      .right-only-right-red {
        width: 44rpx;
        height: 44rpx;
        line-height: 40rpx;
        border-radius: 12rpx;
        border: 1rpx solid #41ABF5;
        color: #41ABF5;
      }

      .right-only-right-add {
        width: 44rpx;
        height: 44rpx;
        line-height: 40rpx;
        background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
        border-radius: 12rpx;
      }

      .right-only-right-2 {
        min-width: 50rpx;
      }
    }
  }

  .menu-box {
    width: 100%;
    height: 100%;
    // padding-bottom: 140rpx;

    .gg-box {
      width: 750rpx;
      height: 1208rpx;
      background: #FFFFFF;
      border-radius: 24rpx 24rpx 0rpx 0rpx;

      .goods-info {
        border-bottom: 1rpx solid #EEEEEE;

        image {
          width: 170rpx;
          height: 160rpx;
          border-radius: 8rpx;
          margin-right: 22rpx;
          margin-bottom: 32rpx;
        }
      }

      .pop-buttom {
        width: 100%;
        // height: 250rpx;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);

        .pop-buttom-left {
          padding-top: 12rpx;
        }

        .pop-buttom-2 {
          width: 100%;
          height: 96rpx;
          line-height: 96rpx;
          background: #41ABF5;
          border-radius: 200rpx
        }

        .right-only-right-red {
          width: 44rpx;
          height: 44rpx;
          line-height: 40rpx;
          border-radius: 12rpx;
          border: 1rpx solid #41ABF5;
          color: #41ABF5;
        }

        .right-only-right-add {
          width: 44rpx;
          height: 44rpx;
          line-height: 40rpx;
          background: linear-gradient(117deg, #57CAFF 0%, #41ABF5 100%);
          border-radius: 12rpx;
        }

        .right-only-right-2 {
          min-width: 50rpx;
        }
      }

      .w-m {
        width: calc(100% + 30rpx);
      }

      .spec-item {
        min-width: 210rpx;
        height: 66rpx;
        line-height: 66rpx;
        box-sizing: border-box;
        border-radius: 12rpx;
        margin: 0 26rpx 26rpx 0;
        padding: 0 10rpx;
      }

      // .spec-item:nth-child(3) {
      // 	margin-right: 0rpx !important;
      // }

      .s-item {
        background-color: #ECF7FE;
        border: 2rpx solid #41ABF5;
        color: #41ABF5;
      }

      .n-item {
        border: 2rpx solid #EEEEEE;
        color: #000;
      }
    }
  }

  .goods-name {
    max-width: 310rpx;
  }
</style>