zh_order_food_xcx/pages/index/index.vue

<template>
  <view class="index-box">
    <image class="bg-img" src="@/static/img/index/index-bg.png" mode="scaleToFill"></image>
    <view class="nav-z">
      <Nav class="" :leftShow='false' :customNav='true' :bgckgroundBox='bgckgroundBox'>
        <template>
          <view slot="custom" class="align-items-center" @click="toSelectSchool()">
            <!-- <uni-icons type="location-filled" size="20"></uni-icons> -->
            <image class="wh-40" src="@/static/img/index/dw.png" mode=""></image>
            <view class="fs-32 maxw-220 fw-600 ml-10 text-overflow-ellipsis-one">
              {{schoolData.school_name||''}}
            </view>
            <image class="nav-icon ml-10" src="@/static/img/index/index-right.png" mode="aspectFit"></image>
          </view>
        </template>
      </Nav>
    </view>
    <!-- 搜索 -->
    <view class="index-search box-border-box mt-4" @click="toUrl(1)"
      :style="[{'top': BarH + 'px','background':bgckgroundSearch}]">
      <view class="index-search-box box-border-box align-items-center">
        <!-- <uni-icons type="search" size="20" color="#000"></uni-icons> -->
        <image class="wh32" src="@/static/img/index/ss.png" mode=""></image>
        <view class="fs-28 fc-9 ml-10">搜索店铺名称或者商品名称</view>
        <view class="fs-28 fc-f index-search-box-buttom">搜索</view>
      </view>
    </view>
    <view class="index-box-1 ">
      <!-- 轮播 -->
      <view class="box-border-box plr-24 mb-32">
        <uni-swiper-dot :info="bannerList" mode="dot" :dotsStyles="dotStyle" :current="current">
          <swiper class="swiper" @change="change">
            <swiper-item v-for="(item,i) in bannerList" :key="i">
              <image class="swiper-item" :src="item.image" mode="aspectFill" @click="bannerClock(item)">
              </image>
            </swiper-item>
          </swiper>
        </uni-swiper-dot>
      </view>
      <!-- 导航 -->
      <view class="box-border-box plr-24">
        <view class="nav-list flex-wrap-wrap box-border-box mb-22">
          <view class="nav-list-item" v-for="(item,i) in navList" :key="i" @click="toUrl(item.type)">
            <image :src="item.img" mode="scaleToFill"></image>
            <view class="fs-26 fc-3 text-align-center">{{item.name}}</view>
          </view>
        </view>
      </view>
      <!-- 通知 -->
      <view class="box-border-box plr-24">
        <view class="msg-box align-items-center box-border-box">
          <image class="image-1" src="@/static/img/index/index-tz.png" mode="scaleToFill"></image>
          <view class="box-1 fs-20 fc-41ABF5">公告</view>
          <swiper class="tz-swiper" :vertical="true" circular :autoplay="true" :interval="3000" :duration="500">
            <swiper-item v-for="(item,i) in noticeList" :key="i" @click="toNoticeDet(item)">
              <view class="tz-swiper-item">{{item.title}}</view>
            </swiper-item>
          </swiper>
          <!-- <image class="image-2" src="@/static/img/toRight.png" mode="scaleToFill"></image> -->
        </view>
      </view>
      <!-- 限时秒杀 -->
      <view class="spike-box box-border-box" v-if="seckillGoodsList.length > 0">
        <view class="xsms-box mb-32">
          <image class="image-title" src="@/static/img/index/index-xsms.png" mode="scaleToFill"></image>
          <view class="xsms-box-list-f box-border-box plr-12">
            <scroll-view class="xsms-box-list display-flex" scroll-x="true">
              <view class="xsms-box-list-item box-border-box p-8" v-for="(item,i) in seckillGoodsList" :key="i"
                @click="toShop(item)">
                <image class="xsms-box-list-item-img-1 mb-4" :src="item.goods_image" mode="aspectFill">
                </image>
                <view class="text-overflow-ellipsis-one fs-26 mb-4">{{item.goods_name}}</view>
                <view class="mb-4">
                  <span class="fs-20 fw-b fc-FB3D03">￥</span><span
                    class="fs-32 fw-b fc-FB3D03">{{item.seckill_money}}</span>
                </view>
                <view class="fs-20 fc-9 text-line-through">￥{{item.line_price}}</view>
                <image class="xsms-box-list-item-img-2" src="@/static/img/index/index-q.png" mode="scaleToFill"></image>
              </view>
            </scroll-view>
          </view>
        </view>
      </view>
      <!-- 类型选择 -->
      <view class="type-list-box display-flex bgc-F5F4F9" :style="[{'background':bgckgroundType}]">
        <view class="type-item-box view-nowrap" :class="category_id==item.id?'s-type':'n-type'"
          v-for="(item,i) in typeList" :key="i" @click="selectType(item.id)">{{item.name}}</view>
      </view>
      <!-- 商品列表 -->
      <view class="" v-if="goodsList.length<=0">
        <enBlankVue></enBlankVue>
      </view>
      <view class="box-border-box plr-24" v-else>
        <view class="goos-list-box box-border-box p-24 display-flex" v-for="(item,i) in goodsList" :key="i"
          @click="toShop(item)">
          <view class="left-img-box">
            <image class="left-img" :src="item.shop_logo" mode="aspectFill"></image>
            <view class="status-box fc-f" v-if="item.status != 1">
              休息中
            </view>
          </view>
          <view class="flex-1">
            <view class="align-items-center mb-8">
              <view class="right-box-title fs-32 fw-600 text-overflow-ellipsis-one">{{item.shop_name}}
              </view>
              <image class="right-box-title-img" src="@/static/img/toRight.png" mode=""></image>
            </view>
            <view class="align-items-center mb-12">
              <image class="img-x mr-12" src="@/static/img/index/index-x.png" mode=""></image>
              <view class="fs-26 fw-600 fc-FF7F00 mr-12">{{item.shop_score}}分</view>
              <view class="fc-6 fs-24 mr-12">| 预计{{item.delivery_time}}分钟 |</view>
              <view class="fc-6 fs-24 mr-12">{{item.shop_sales}}人购买</view>
            </view>
            <view class="align-items-center flex-wrap-wrap">
              <view class="quan-list align-items-center mr-12 mb-16" v-for="(info1,index1) in item.coupon"
                :key="index1">
                <view class="quan-list-1 fs-24 fc-f">券</view>
                <view class="quan-list-2 fs-24 fc-FB3D03">{{info1.money}}元</view>
              </view>
            </view>
            <view class="goods-items-list display-flex">
              <view class="goods-items-list-box" v-for="(info2,index2) in item.goods" :key="index2">
                <image class="mb-12" :src="info2.goods_image" mode="aspectFill"></image>
                <view class="mb-8 fw-600 text-overflow-ellipsis-one fs-26">{{info2.goods_name}}</view>
                <view class="">
                  <span class="fs-24 fc-FB3D03">￥</span>
                  <span class="fs-32 fc-FB3D03 fw-b">{{info2.price}}</span>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>
    <uni-popup ref="popup" type="center" border-radius="10px 10px 10px 10px" :is-mask-click="false">
      <view class="roll-pop">
        <!-- <image class="lq-bg" src="@/static/img/index/lq-bg.png" mode=""></image> -->
        <image class="tc-top" src="@/static/img/index/tc-top.png" mode=""></image>
        <view class="coupon-box">
          <image class="tc-content" src="@/static/img/index/tc-content.png" mode=""></image>
          <view class="item-box display-flex" v-for="(item,index) in couponData" :key="index">
            <view class="item-right flex-direction flex-justify-center flex-1 bgc-FCE7E2">
              <view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
                {{item.name}}
              </view>
              <view class="fs-22 fc-6 mb-12">
                有效时间：{{item.time_type_str}}
              </view>
              <view class="fs-22 fc-6">
                券类型：{{item.scene == 1?'外卖卷':'代取卷'}}
              </view>
            </view>
            <view class="item-hr"></view>
            <view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
              <view class="align-items-center">
                <view class="fs-24 fw-600 fc-FB3D03">￥</view>
                <view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
              </view>
              <view class="fs-22 fc-6 mb-4">
                需满{{item.full_money}}元
              </view>
              <view class="but-box fs-26 fc-f" @click="receive(item,index)">立即领取</view>
              <view class="ball"></view>
              <view class="ball-two"></view>
            </view>
          </view>
        </view>
        <image class="tc-bot" src="@/static/img/index/tc-bot.png" mode=""></image>
        <uni-icons @click="gbPOp" class="pop-gb" color='#fff' type="close" size="30"></uni-icons>
      </view>
    </uni-popup>
  </view>

</template>
<script>
  import enBlankVue from "@/components/en-utils/en-blank/en-blank.vue";
  import tools from "@/service/tools";
  import {
    getNotice,
    getBanner,
  } from '@/api/common.js';
  import {
    getSeckillGoods
  } from '@/api/seckill.js'
  import {
    getTakeaway
  } from '@/api/category.js';
  import {
    getGoodsList
  } from '@/api/goods.js';
  import {
    couponHome,
    receiveCoupon
  } from '@/api/coupon.js'
  import {
    shopInfo
  } from "@/api/shop.js"
  export default {
    components: {
      enBlankVue
    },
    data() {
      return {
        BarH: 0,
        bgckgroundBox: 'transparent',
        bgckgroundSearch: '',
        bgckgroundType: '',
        navList: [{
            name: "外卖",
            img: require('@/static/img/index/index-wm.png'),
            type: 2
          },
          {
            name: "代取",
            img: require('@/static/img/index/index-dq.png'),
            type: 3
          },
          {
            name: "校友圈",
            img: require('@/static/img/index/index-xyq.png'),
            type: 7
          },
          {
            name: "团购",
            img: require('@/static/img/index/index-tg.png'),
            type: 5
          },
          {
            name: "票务",
            img: require('@/static/img/index/index-pw.png'),
            type: 4
          },
          {
            name: "干洗",
            img: require('@/static/img/index/index-gx.png'),
            type: 6
          },
          {
            name: "租凭",
            img: require('@/static/img/index/index-zp.png'),
          },
          {
            name: "二手市场",
            img: require('@/static/img/index/index-esss.png'),
          },
          {
            name: "回收",
            img: require('@/static/img/index/index-hs.png'),
          },
          {
            name: "实习岗位",
            img: require('@/static/img/index/index-sxgw.png'),
            type: 8
          },
        ],
        schoolData: {
          school_name: '',
        },
        noticeList: [],
        bannerList: [],
        seckillGoodsList: [],
        typeList: [], //分类数组
        category_id: 0, //分类id
        goodsList: [],
        total: 0,
        page: 1,
        couponData: [],
        dotStyle: {
          width: 6,
          bottom: 6,
          backgroundColor: 'rgba(51, 51, 51,0.3)',
          border: '1px rgba(51, 51, 51,0.3) solid',
          color: '#fff',
          selectedBackgroundColor: 'rgba(79, 179, 239,0.9)',
          selectedBorder: '1px rgba(0,0,0,0) solid'
        },
        current: 0
      }
    },

    onShow() {
      // let lon = uni.getStorageSync('lon');
      // let lat = uni.getStorageSync('lat');
      // if (!lon || !lat) {
      // 	uni.getLocation({
      // 		type: "gcj02",
      // 		success: (res) => {
      // 			if (res.errMsg === 'getLocation:ok') {
      // 				uni.setStorageSync('lon', res.longitude);
      // 				uni.setStorageSync('lat', res.latitude);
      // 			} else {
      // 				tools.error('位置授权失败，请检查是否开始授权')
      // 			}
      // 		},
      // 		fail: (res) => {
      // 			tools.error('位置授权失败，请检查是否开始授权')
      // 		},
      // 	})
      // }
      let school_id = uni.getStorageSync('school_id');
      let operate_id = uni.getStorageSync('operate_id');
      let school_name = uni.getStorageSync('school_name');
      if (!school_id || !operate_id) {
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages-address/select-school?type=1'
          })
        }, 1000)
      } else {
        this.schoolData.school_name = school_name;
      }

      this.getBanner();
      this.getNotice();
      this.getSeckillGoods();
      this.getTakeaway();


      let userToken = uni.getStorageSync('token')
      if (userToken) {
        this.couponHome()
      }
    },
    onLoad() {
      this.page = 1;
      this.goodsList = [];
      this.getGoodsList();
    },
    mounted() {

    },
    onPageScroll(e) {
      if (e.scrollTop > 1) {
        this.bgckgroundBox = '#fff';
        this.bgckgroundSearch = '#fff';
        if (e.scrollTop > 500) {
          this.bgckgroundType = '#fff';
        } else {
          this.bgckgroundType = '';
        }
      } else {
        this.bgckgroundBox = 'transparent';
        this.bgckgroundSearch = '';
        this.bgckgroundType = '';
      }
    },
    onReachBottom() {
      if (this.goodsList.length < this.total) {
        this.page += 1;
        this.getGoodsList();
      }
    },
    created() {
      uni.getSystemInfo({
        success: (e) => {
          let statusBarH = e.statusBarHeight + 10
          let custom = 0;
          custom = wx.getMenuButtonBoundingClientRect()
          let customBarH = custom.height;
          this.BarH = statusBarH + customBarH;
        }
      })
    },
    methods: {
      change(e) {
        this.current = e.detail.current
      },
      bannerClock(item) {
        if (item.type == 1) {
          // 外卖首页
          uni.navigateTo({
            url: '/pages-takeout/takeout'
          })
        } else if (item.type == 2) {
          if (item.to_id != 0) {
            // 外卖商家
            uni.navigateTo({
              url: '/pages-takeout/shop?shop_id=' + item.to_id
            })
          } else {
            // 外卖首页
            uni.navigateTo({
              url: '/pages-takeout/takeout'
            })
          }
        } else if (item.type == 3) {
          // 代取页
          uni.navigateTo({
            url: '/pages-takeout/replace-take'
          })
        } else if (item.type === 4) {
          // 团购页
          uni.navigateTo({
            url: '/pages-buy/group'
          })
        } else if (item.type === 5) {
          // 票务页
          uni.navigateTo({
            url: '/pages-buy/ticket'
          })
        } else if (item.type === 6) {
          // 干洗页
          uni.navigateTo({
            url: '/pages-buy/dry-clean'
          })
        } else if (item.type === 7) {
          // 校友圈
          uni.navigateTo({
            url: '/pages-school/school-circle'
          })
        } else if (item.type === 8) {
          // 骑手申请页
          uni.navigateTo({
            url: '/pages-my/rider-recruit'
          })
        }
      },
      receive(item, index) {
        receiveCoupon({
          grant_id: item.grant_id,
          coupon_id: item.coupon_id
        }).then((res) => {
          if (res.code == 1) {
            tools.success(res.msg)
            this.couponData.splice(index, 1)
            if (this.couponData.length <= 0) {
              this.gbPOp()
            }
          } else {
            tools.error(res.msg)
          }
        })
      },
      couponHome() {
        let operate_id = uni.getStorageSync('operate_id');
        couponHome({
          operate_id: operate_id
        }).then((res) => {
          if (res.code == 1) {
            if (res.data.length > 0) {
              uni.hideTabBar()
              this.couponData = res.data
              this.$refs.popup.open()
            }
          }
        })
      },
      gbPOp() {
        uni.showTabBar()
        this.$refs.popup.close()
      },
      getBanner() {
        getBanner().then((res) => {
          if (res.code === 1) {
            this.bannerList = res.data;
          }
        })
      },
      getNotice() {
        getNotice().then((res) => {
          if (res.code === 1) {
            this.noticeList = res.data;
          }
        })
      },
      getSeckillGoods() {
        let operate_id = uni.getStorageSync('operate_id');
        getSeckillGoods({
          operate_id: operate_id
        }).then((res) => {
          if (res.code === 1) {
            this.seckillGoodsList = res.data
          }
        })
      },
      getTakeaway() {
        getTakeaway().then((res) => {
          if (res.code === 1) {
            this.typeList = res.data;
            this.typeList.unshift({
              name: "全部",
              id: 0
            })
          }
        })
      },
      getGoodsList() {
        let operate_id = uni.getStorageSync('operate_id');
        getGoodsList({
          page: this.page,
          operate_id: operate_id,
          category_id: this.category_id
        }).then((res) => {
          if (res.code === 1) {
            this.goodsList = [...this.goodsList, ...res.data.items];
            this.total = res.data.total;
          }
        })
      },
      selectType(id) {
        if (this.category_id != id) {
          this.category_id = id;
          this.page = 1;
          this.goodsList = [];
          this.getGoodsList();
        }
      },
      toUrl(type) {
        if (type === 1) {
          // 去搜索
          uni.navigateTo({
            url: '/pages/index/search-record'
          })
        } else if (type === 2) {
          // 去外卖
          uni.navigateTo({
            url: '/pages-takeout/takeout'
          })
        } else if (type === 3) {
          // 去代取
          uni.navigateTo({
            url: '/pages-takeout/replace-take'
          })
        } else if (type === 4) {
          // 去票务
          uni.navigateTo({
            url: '/pages-buy/ticket'
          })
        } else if (type === 5) {
          // 去团购
          uni.navigateTo({
            url: '/pages-buy/group'
          })
        } else if (type === 6) {
          // 去干洗
          uni.navigateTo({
            url: '/pages-buy/dry-clean'
          })
        } else if (type === 7) {
          // 去校友圈
          uni.navigateTo({
            url: '/pages-school/school-circle'
          })
        } else if (type === 8) {
          // 去实习岗位
          uni.navigateTo({
            url: '/pages-position/Internship-position'
          })
        } else {
          tools.error('暂未开放')
        }
      },
      toSelectSchool() {
        uni.navigateTo({
          url: '/pages-address/select-school?type=1'
        })
      },
      toShop(item) {
        const operate_id = uni.getStorageSync('operate_id')
        shopInfo({
          operate_id: operate_id,
          shop_id: item.shop_id
        }).then((res) => {
          if (res.code == 1) {
            uni.navigateTo({
              url: '/pages-takeout/shop?shop_id=' + item.shop_id
            })
          } else {
            tools.error(res.msg)
          }
        })
      },
      toNoticeDet(item) {
        uni.navigateTo({
          url: '/pages-my/notice/info?id=' + item.id
        })
      },
    },
  }
</script>
<style lang="scss" scoped>
  .spike-box {
    padding: 24rpx 24rpx 0;
  }

  .wh32 {
    width: 32rpx;
    height: 32rpx;
  }

  .nav-z {
    position: relative;
    z-index: 1 !important;
  }

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

  .item-box {
    margin-bottom: 20rpx;
  }

  .item-box:last-child {
    margin: 0;
  }

  .roll-pop {
    position: relative;
    width: 100vw;
    // height: 1000rpx;

    .tc-top {
      width: 100%;
      height: 202rpx;
    }

    .tc-bot {
      width: 100%;
      height: 178rpx;
    }

    .pop-gb {
      width: 56rpx;
      height: 56rpx;
      position: absolute;
      bottom: -65rpx;
      left: calc((100% - 28rpx) / 2);
    }
  }

  .coupon-box {
    width: 100%;
    // min-height: 590rpx;
    padding: 0 82rpx 0 92rpx;
    box-sizing: border-box;
    position: relative;

    .tc-content {
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
    }
  }

  .index-box {
    .maxw-220 {
      max-width: 220rpx;
    }

    position: relative;

    .bg-img {
      width: 100%;
      height: 930rpx;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -2;
    }

    .nav-icon {
      width: 32rpx;
      height: 32rpx;
    }

    .index-box-1 {
      width: 100%;

      // height: 3000rpx;
      .swiper {
        width: 702rpx;
        height: 220rpx;
        border-radius: 20rpx;

        .swiper-item {
          width: 702rpx;
          height: 220rpx;
          border-radius: 20rpx;
        }
      }

      .nav-list {
        padding: 0 22rpx;

        .nav-list-item {
          margin-right: 52rpx;
          margin-bottom: 16rpx;

          image {
            width: 88rpx;
            height: 88rpx;
            margin: 0 auto;
          }
        }

        .nav-list-item:nth-child(7) {
          margin-right: 42rpx !important;
        }

        .nav-list-item:nth-child(8) {
          margin-right: 46rpx !important;
        }

        .nav-list-item:nth-child(9) {
          margin-right: 44rpx !important;
        }

        .nav-list-item:nth-child(5),
        .nav-list-item:nth-child(10) {
          margin-right: 0;
        }
      }

      .msg-box {
        width: 100%;
        height: 66rpx;
        background: #F7F8FC;
        border-radius: 12rpx;
        padding: 0 14rpx;

        .image-1 {
          width: 72rpx;
          height: 32rpx;
          margin-right: 10rpx;
        }

        .image-2 {
          width: 40rpx;
          height: 40rpx;
          margin-left: auto;
        }

        .box-1 {
          width: 50rpx;
          height: 26rpx;
          border-radius: 2rpx;
          border: 2rpx solid #41ABF5;
          text-align: center;
          line-height: 26rpx;
          margin-right: 10rpx;
        }

        .tz-swiper {
          width: 444rpx;
          height: 66rpx;

          .tz-swiper-item {
            width: 444rpx;
            height: 66rpx;
            line-height: 66rpx;
            color: #666;
            font-size: 30rpx;
          }
        }
      }

      .xsms-box {
        .image-title {
          width: 100%;
          height: 92rpx;
        }

        .xsms-box-list-f {
          width: 100%;
          height: 310rpx;
          background: linear-gradient(180deg, #ABDEFE 4%, #C9EAFF 30%, #C9EAFF 100%);
          border-radius: 0rpx 0rpx 20rpx 20rpx;
        }

        .xsms-box-list {
          white-space: nowrap;

          .xsms-box-list-item:last-child {
            margin-right: 0;
          }

          .xsms-box-list-item {
            width: 180rpx;
            height: 300rpx;
            background: #FFFFFF;
            border-radius: 8rpx;
            margin-right: 8rpx;
            position: relative;
            display: inline-block;

            .xsms-box-list-item-img-1 {
              width: 164rpx;
              height: 175rpx;
              border-radius: 9rpx;
            }

            .xsms-box-list-item-img-2 {
              position: absolute;
              width: 62rpx;
              height: 36rpx;
              right: 0;
              bottom: 8rpx;
            }
          }
        }
      }

      .type-list-box {
        position: sticky;
        left: 0;
        // top: calc(var(BarH)px + 93rpx);
        top: calc(86px + 93rpx);
        padding: 24rpx;
        overflow-x: scroll;
        z-index: 50;

        .type-item-box {
          margin-right: 16rpx;
          padding: 0 24rpx;
          // min-width: 300rpx;
          height: 56rpx;
          line-height: 56rpx;
          border-radius: 200rpx;
          text-align: center;
          font-size: 28rpx;
        }

        .type-item-box:last-child {
          margin-right: 0;
        }

        .s-type {
          color: #fff;
          font-weight: 600;
          background: linear-gradient(280deg, #44B1F7 0%, #96D6F4 100%);
        }

        .n-type {
          color: #666;
          background-color: #fff;
        }
      }

      .goos-list-box {
        width: 100%;
        min-height: 100rpx;
        background: #FFFFFF;
        box-shadow: 0rpx 0rpx 20rpx 0rpx rgba(51, 51, 51, 0.1);
        border-radius: 20rpx;
        margin-bottom: 20rpx;

        .goods-items-list {
          width: 530rpx;
          overflow-y: scroll;

          .goods-items-list-box {
            width: 140rpx;
            margin-right: 16rpx;

            image {
              width: 140rpx;
              height: 140rpx;
              border-radius: 12rpx
            }
          }
        }

        .left-img-box {
          width: 100rpx;
          height: 100rpx;
          margin-right: 16rpx;
          position: relative;

          .left-img {
            width: 100rpx;
            height: 100rpx;
            border-radius: 12rpx;
          }

          .status-box {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            padding: 4rpx 0;
            text-align: center;
            background: rgba(0, 0, 0, 0.5);
            font-size: 17rpx;
            border-radius: 0 0 12rpx 12rpx;
          }
        }


        .img-x {
          width: 24rpx;
          height: 24rpx;
        }

        .right-box-title {
          width: 438rpx;
        }

        .right-box-title-img {
          width: 32rpx;
          height: 32rpx;
          margin-left: auto;
        }

        .quan-list {
          .quan-list-1 {
            width: 32rpx;
            height: 34rpx;
            background: #FB3D03;
            border-radius: 5rpx 0rpx 0rpx 5rpx;
            text-align: center;
            line-height: 34rpx;
          }

          .quan-list-2 {
            box-sizing: border-box;
            height: 34rpx;
            line-height: 34rpx;
            padding: 0 4rpx;
            border-radius: 0 5rpx 5rpx 0;
            border: 1rpx solid #FB3D03;
            text-align: center;
          }
        }
      }
    }

    .index-search {
      position: sticky;
      left: 0;
      z-index: 10;
      padding: 0 24rpx 20rpx 24rpx;

      .index-search-box {
        width: 100%;
        height: 72rpx;
        padding: 0 6rpx 0 24rpx;
        border-radius: 200rpx;
        border: 2rpx solid #4FB3EF;

        .index-search-box-buttom {
          width: 120rpx;
          height: 60rpx;
          background: linear-gradient(90deg, #57CAFF 0%, #41ABF5 100%);
          border-radius: 200rpx;
          margin-left: auto;
          line-height: 60rpx;
          text-align: center;
        }
      }
    }
  }

  .item-hr {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #FB7850;
  }

  .item-hr-two {
    width: 0px;
    height: auto;
    border-right: 1rpx dashed #999;
  }

  .item-left {
    width: 171rpx;
    height: auto;
    padding: 20rpx 18rpx;
    box-sizing: border-box;
    position: relative;
    border-radius: 0 20rpx 20rpx 0;
  }

  .ball {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    top: -12rpx;
    left: -12rpx;
    background: #fff;
    z-index: 2;
  }

  .ball-two {
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    position: absolute;
    background: #fff;
    z-index: 10;
    bottom: -12rpx;
    left: -12rpx;
  }

  .item-right {
    padding: 24rpx;
    box-sizing: border-box;
    border-radius: 20rpx 0 0 20rpx;
    position: relative;
  }

  .but-box {
    width: 136rpx;
    height: 48rpx;
    line-height: 48rpx;
    text-align: center;
    background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
    border-radius: 200rpx;
  }
</style>