<template>
  <scroll-view
    class="main"
    scroll-y
    @scroll="handlePageScroll"
    :scroll-into-view="scrollView"
    scroll-with-animation
    @scrolltolower="handleScrollBottom"
  >
    <div
      id="navItem"
      class="header"
      :style="{
        paddingTop: menu.top + menu.height + 'px',
        backgroundImage:
          pageType === 'UnionMall'
            ? 'url(https://eshangtech.com/minTestImg/unionMallBg.png)'
            : 'url(https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png)',
        backgroundSize:
          pageType === 'UnionMall' ? '100% 480rpx' : '100% 300rpx',
      }"
    >
      <view
        class="headerTop"
        :style="{
          height: menu.top + menu.height + 'px',
          paddingTop: menu.top + 'px',
          backgroundImage:
            pageType === 'UnionMall'
              ? 'url(https://eshangtech.com/minTestImg/unionMallBg.png)'
              : 'url(https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png)',
          backgroundSize:
            pageType === 'UnionMall' ? '100% 480rpx' : '100% 300rpx',
        }"
      >
        <image
          class="backArrow"
          src="/static/images/home/backArrowWhite.svg"
          @click="handleBackHome"
        />
        <view class="pageName">{{
          pageType === "UnionMall" ? "工会商城" : "彩云驿购"
        }}</view>
        <view class="backArrow"></view>
      </view>

      <scroll-view
        class="typeBox"
        :style="{ top: menu.bottom + 66 + 'px' }"
        scroll-x
      >
        <div
          class="contentBox"
          :style="{
            height:
              shopTypeList.length < 5
                ? '144rpx'
                : shopTypeList.length === 5
                ? Math.ceil(6 / 5) * 144 +
                  (Math.ceil(6 / 5) - 1) * 42 +
                  60 +
                  'rpx'
                : Math.ceil(shopTypeList.length / 5) * 144 +
                  (Math.ceil(shopTypeList.length / 5) - 1) * 42 +
                  60 +
                  'rpx',
          }"
        >
          <!-- height:
              shopTypeList.length < 5
                ? '144rpx'
                : Math.ceil(shopTypeList.length / 5) * 144 +
                  (Math.ceil(shopTypeList.length / 5) - 1) * 42 +
                  60 +
                  'rpx', -->

          <!-- :style="{
            width:
              shopTypeList.length <= 5
                ? '100%'
                : shopTypeList.length * 136 + 60 + 'rpx',
          }" -->
          <!-- 工会商城 -->
          <div
            class="rowBox"
            @click="handleGoUnionMall"
            v-if="pageType !== 'UnionMall'"
          >
            <div class="imgBox">
              <div class="itemImgBox">
                <image
                  class="img"
                  src="/static/images/home/unionMallIcon.svg"
                ></image>
              </div>
            </div>
            <div class="itemName">工会商城</div>
          </div>

          <div
            class="rowBox"
            v-for="(item, index) in shopTypeList"
            :key="index"
            @click="handleGoShopPage(item, index)"
            :style="{
              width: pageType === 'UnionMall' ? '25%' : '20%',
              marginBottom:
                pageType === 'UnionMall' &&
                index < Math.ceil(shopTypeList.length / 4 - 1) * 4
                  ? '44rpx'
                  : '',
              marginTop: pageType !== 'UnionMall' && index >= 4 ? '44rpx' : '',
            }"
          >
            <div class="imgBox">
              <div class="itemImgBox">
                <image
                  class="img"
                  :src="
                    item.UserdefinedType_ICO ||
                    '/static/images/home/defultImg.png'
                  "
                ></image>
              </div>
            </div>
            <div class="itemName">{{ item.UserdefinedType_Name }}</div>
          </div>

          <!-- <div
            class="rowBox"
            :style="{
              width: oneRowNumber <= 5 ? 'calc(20% - 6px)' : '136rpx',
              paddingRight:
                index + 1 === oneRowNumber || index + 1 === oneRowNumber * 2
                  ? '0'
                  : '40rpx',
              marginBottom: index + 1 > oneRowNumber ? '0' : '40rpx',
            }"
            v-for="(item, index) in shopTypeList"
            :key="index"
            @click="handleGoShopPage(item, index)"
          >
            <div class="imgBox">
              <div class="itemImgBox">
                <image
                  class="img"
                  :src="
                    item.UserdefinedType_ICO ||
                    '/static/images/home/defultImg.png'
                  "
                ></image>
              </div>
            </div>
            <div class="itemName">{{ item.UserdefinedType_Name }}</div>
          </div> -->
        </div>
      </scroll-view>
    </div>

    <div class="pageContent">
      <!-- 公告 -->
      <div class="noticeBox" @click="handleGoNotice" v-if="false">
        <div class="noticeLeft">
          <image class="noticeIcon" src="/static/images/home/noticeIcon.png" />
          <text class="noticeTitle">公告</text>
          <text class="noticeContent">2025年春节购物通知</text>
        </div>
        <div class="noticeRight">
          <image
            class="moreIcon"
            src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
          />
        </div>
      </div>

      <!-- 活动 -->
      <div
        class="advertisement"
        v-if="haveActivity"
        :style="{
          background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
        }"
      >
        <div
          class="advertisementContentBox"
          v-if="pageType !== 'UnionMall'"
          @click="handleGoActivityType"
        >
          <div class="advertisementTop">
            <div class="title">
              {{ activityObj.UserdefinedType_Name || "" }}
              <!-- <image
                class="titleImg"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png"
              /> -->
            </div>
            <!-- <div class="moreBox">
              <text class="moreText">低价爆品天天有</text>
              <image
                class="rightIcon"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
              />
            </div> -->
          </div>

          <scroll-view
            class="shopList"
            scroll-x
            v-if="activityShopList && activityShopList.length > 0"
          >
            <!--                        @click="handleGoShop(item)"-->
            <div
              :style="{
                width: activityShopList.length * 160 + 'rpx',
                height: '100%',
                whiteSpace: 'noWrap',
              }"
            >
              <div
                class="shopItem"
                v-for="(item, index) in activityShopList"
                :key="index"
                @click.stop="handleGoShopDetail(item)"
              >
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image
                      class="shopImg"
                      :src="
                        item.IMAGE_PATH || '/static/images/home/defultImg.png'
                      "
                    />
                  </div>
                  <text class="discountedPrice"
                    >¥{{ item.bigNumber || "" }}.{{
                      item.smallNumber || "00"
                    }}</text
                  >
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>
      </div>

      <!--  特价优惠  -->
      <div
        class="advertisement"
        :style="{
          background: pageType !== 'UnionMall' ? '#fff' : 'transparent',
        }"
      >
        <div
          class="advertisementContentBox"
          v-if="pageType !== 'UnionMall'"
          @click="handleGoShopList(5030)"
        >
          <div class="advertisementTop">
            <div class="title">
              <image
                class="titleImg"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/title1st.png"
              />
            </div>
            <div class="moreBox">
              <text class="moreText">低价爆品天天有</text>
              <image
                class="rightIcon"
                src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
              />
            </div>
          </div>

          <scroll-view class="shopList" scroll-x>
            <!--                        @click="handleGoShop(item)"-->
            <div
              :style="{
                width: specialOffersList.length * 160 + 'rpx',
                height: '100%',
                whiteSpace: 'noWrap',
              }"
            >
              <div
                class="shopItem"
                v-for="(item, index) in specialOffersList"
                :key="index"
                @click.stop="handleGoShopDetail(item)"
              >
                <div class="shopItemImg">
                  <div class="imgBox">
                    <image
                      class="shopImg"
                      :src="
                        item.IMAGE_PATH || '/static/images/home/defultImg.png'
                      "
                    />
                  </div>
                  <text class="discountedPrice"
                    >¥{{ item.bigNumber || "" }}.{{
                      item.smallNumber || "00"
                    }}</text
                  >
                </div>
                <!--                            <text class="price">¥15.99</text>-->
              </div>
            </div>
          </scroll-view>
        </div>

        <!-- 工会商城的时候 显示排行榜 -->

        <div class="sortBox" v-if="pageType === 'UnionMall'">
          <div class="leftSortBox" @click="handleGoSortList(1)">
            <div class="titleTopSort">
              <!-- 新品榜 -->
              <text class="title"><text style="color: red">新</text>品榜</text>
            </div>
            <div class="notice">超多优惠等你来</div>
            <div class="shopList">
              <view
                class="shopItem"
                v-for="(item, index) in newShopList"
                :key="index"
                :style="{ marginRight: index === 0 ? '16rpx' : '' }"
              >
                <image
                  class="shopImg"
                  :src="item.IMAGE_PATH"
                  @click.stop="handleGoShopDetail(item)"
                />
              </view>
            </div>
          </div>

          <div
            class="rightItem bg2"
            style="margin-right: 16rpx"
            @click="handleGoSortList(2)"
          >
            <div class="titleTopSort">
              <text class="title"
                ><text style="color: #ff8000">热</text>销榜</text
              >
            </div>
            <div class="notice">本地特色</div>
            <view
              class="shopItem"
              v-for="(item, index) in hotShopList"
              :key="index"
            >
              <image
                class="shopImg"
                :src="item.IMAGE_PATH"
                @click.stop="handleGoShopDetail(item)"
              />
            </view>
          </div>
          <div class="rightItem bg3" @click="handleGoSortList(3)">
            <div class="titleTopSort">
              <text class="title"
                ><text style="color: #1ca038">推</text>荐榜</text
              >
            </div>
            <div class="notice">本地特色</div>
            <view
              class="shopItem"
              v-for="(item, index) in goodShopList"
              :key="index"
            >
              <image
                class="shopImg"
                :src="item.IMAGE_PATH"
                @click.stop="handleGoShopDetail(item)"
              />
            </view>
          </div>
        </div>

        <!-- <div class="advertisementContentBox" v-if="pageType === 'UnionMall'">
          <div class="advertisementTopUnionMall">
            <div class="title">商品排行</div>
            <div class="moreBox">
              <image class="rightIcon" src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png" />
            </div>
          </div>
          <div class="UnionMallShopList"> -->

        <!-- <div class="rowBox" @click="handleGoSortList(1)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">新品榜</div>
            </div>
            <div class="rowBox" @click="handleGoSortList(2)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">热销榜</div>
            </div>
            <div class="rowBox" @click="handleGoSortList(3)">
              <div class="imgBox">
                <div class="itemImgBox">
                  <image class="img" src='/static/images/home/defultImg.png'></image>
                </div>
              </div>
              <div class="itemName">推荐榜</div>
            </div> -->
        <!-- </div>
        </div> -->
      </div>

      <!--  今日推荐 -->
      <div class="advertisementSecond">
        <div
          class="advertisementItem"
          @click="handleGoShopList(5050)"
          v-if="pageType !== 'UnionMall'"
        >
          <div class="advertisementItemContent">
            <div class="contentTop">
              <div class="title">
                <image
                  class="titleImg"
                  src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/today3st.png"
                />
              </div>
              <div class="moreBox">
                <text class="moreText">更多</text>
                <image
                  class="rightIcon"
                  src="https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/rightArrow.png"
                />
              </div>
            </div>

            <div class="shopDesc">精品优选</div>

            <scroll-view class="shopItemList" scroll-x>
              <div
                :style="{
                  width: todayOffersList.length * 160 + 'rpx',
                  height: '100%',
                  whiteSpace: 'noWrap',
                }"
              >
                <!--                                @click="handleGoShop(item)"-->
                <div
                  class="shopItem"
                  v-for="(item, index) in todayOffersList"
                  :key="index"
                  @click.stop="handleGoShopDetail(item)"
                >
                  <div class="imgBox">
                    <image
                      class="shopImg"
                      :src="
                        item.IMAGE_PATH || '/static/images/home/defultImg.png'
                      "
                    />
                  </div>
                  <text class="shopImgText"
                    >¥{{ item.bigNumber || "" }}.{{
                      item.smallNumber || "00"
                    }}</text
                  >
                  <!-- {{ item.bigNumber
                    }}<text class="shopSmallText">{{
                      item.smallNumber ? "." + item.smallNumber : ".00"
                    }}</text> -->
                </div>
              </div>
            </scroll-view>
          </div>
        </div>
        <!-- 精选品牌 -->
        <div class="advertisementItemUnionMall" v-if="pageType === 'UnionMall'">
          <div class="advertisementItemContent">
            <div class="contentTopUnionMall">
              <div class="title">精选品牌</div>
            </div>
            <view class="shopItemList">
              <view
                class="shopItem"
                v-for="(item, index) in brandList"
                :key="index"
                @click="handleSearchBrand(item)"
                :style="{ marginBottom: index <= 4 ? '16rpx' : '' }"
              >
                <image class="imgBox" :src="item.src" />
                <text class="imgText">{{ item.label }}</text>
                <!-- <view class="imgBox">{{ item.label }}</view> -->
              </view>
            </view>
          </div>
        </div>
      </div>

      <!--  甄选商品  -->
      <div class="allShopList">
        <template v-if="pageType !== 'UnionMall'">
          <scroll-view class="allTypeBox" scroll-x="true">
            <!-- <div :class="selectProducts === item.USERDEFINEDTYPE_ID
              ? 'typeItem selectTypeItem'
              : 'typeItem'
              " v-for="(item, index) in productsList" :key="index" @click="handleChangeShopMallType(item)">
              {{ item.USERDEFINEDTYPE_NAME }}
            </div> -->
            <div
              :class="
                selectProducts === item.UserdefinedType_Id
                  ? 'typeItem selectTypeItem'
                  : 'typeItem'
              "
              v-for="(item, index) in shopTypeList"
              :key="index"
              @click="handleChangeShopMallType(item)"
            >
              {{ item.UserdefinedType_Name }}
            </div>
          </scroll-view>

          <!-- <scroll-view class="allShopListContent" scroll-y="true" @scrolltolower="handleToBottomproductsList">
            <view class="buyShopItem" v-for="(item, index) in productsList" :key="index"
              :style="{ marginRight: index % 2 === 0 ? '22rpx' : '' }">
              <div class="shopImgContent">
                <image class="shopImage" :src="item.IMAGE_PATH" />
              </div>
              <div class="priceBox">
                <div class="shopName">{{ item.COMMODITY_NAME }}</div>
                <view class="retailPrice">¥{{ item.RETbigNumber || "" }}.{{
                  item.RETsmallNumber || "00"
                }}</view>
                <view class="nowPrice">
                  <text class="unit">¥</text>
                  <text class="price">{{ item.bigNumber || "" }}.{{
                    item.smallNumber || "00"
                  }}</text>
                </view>
              </div>
            </view>
          </scroll-view> -->
          <div class="allShopListContent">
            <div
              class="buyShopItem"
              v-for="(item, index) in productsList"
              :key="index"
              @click.stop="handleGoShopDetail(item)"
            >
              <div class="shopImgContent">
                <image class="shopImage" :src="item.IMAGE_PATH" />
              </div>
              <div class="priceBox">
                <div class="shopName">{{ item.COMMODITY_NAME }}</div>
                <!-- <view class="retailPrice"
                  >¥{{ item.RETbigNumber || "" }}.{{
                    item.RETsmallNumber || "00"
                  }}</view
                > -->
                <view
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 12rpx;
                  "
                >
                  <view class="nowPrice">
                    <text class="unit">¥</text>
                    <text class="price"
                      >{{ item.bigNumber || "" }}.{{
                        item.smallNumber || "00"
                      }}</text
                    >
                  </view>

                  <view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)"
                    >已售罄</view
                  >
                </view>
              </div>
            </div>
          </div>
          <view class="inBottom" v-if="shopMsg.isOver">
            <text class="bottomText">我是有底线的</text>
          </view>
        </template>

        <!-- 随机商品 -->
        <div class="shopLovely" v-if="pageType === 'UnionMall'">
          <!-- :style="{ paddingBottom: `${50}px` }" -->

          <view class="shopLovelyTop">
            <text class="shopLovelyTitle">猜你喜欢</text>
            <view class="shopLovelyRight" @click="handleShowPricePopup">
              <image
                class="filterIcon"
                src="/static/images/home/filterIcon.svg"
              />
              <text class="filterText">筛选</text>
            </view>
          </view>

          <view class="shopLovelyList">
            <!-- scroll-y="true"
            @scrolltolower="handleToBottom" -->
            <view
              class="shopLovelyItem"
              v-for="(item, index) in showShopList"
              :key="index"
              :style="{ marginRight: index % 2 === 0 ? '22rpx' : '' }"
              @click.stop="handleGoShopDetail(item)"
            >
              <div class="shopImgContent">
                <image class="shopImage" :src="item.IMAGE_PATH" />
              </div>
              <div class="priceBox">
                <div class="shopName">{{ item.COMMODITY_NAME }}</div>
                <!-- <view class="retailPrice"
                  >¥{{ item.RETbigNumber || "" }}.{{
                    item.RETsmallNumber || "00"
                  }}</view
                > -->
                <view
                  style="
                    width: 100%;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    margin-top: 12rpx;
                  "
                >
                  <view class="nowPrice">
                    <text class="unit">¥</text>
                    <text class="price"
                      >{{ item.bigNumber || "" }}.{{
                        item.smallNumber || "00"
                      }}</text
                    >
                  </view>

                  <view class="shopState" v-if="!(item.COMMODITY_STOCK > 0)"
                    >已售罄</view
                  >
                </view>
              </div>
            </view>
          </view>
          <view class="inBottom" v-if="showShopList && showShopList.length > 0">
            <text class="bottomText">{{
              shopMsg.isOver ? "我是有底线的" : "下拉加载更多"
            }}</text>
          </view>
        </div>
      </div>
    </div>

    <uni-popup ref="priceRangeRef">
      <view class="priceRangeBox">
        <view class="titleBox">
          <view class="closeIcon"></view>
          <text class="title">价格区间</text>
          <image
            class="closeIcon"
            src="/static/images/home/closeIcon.svg"
            @click="handleClosePricePopup"
          />
        </view>

        <view class="inputBox">
          <view class="inputItem">
            <input placeholder="最低价" v-model="minPrice" />
          </view>
          <span class="unit">-</span>
          <view class="inputItem">
            <input placeholder="最高价" v-model="maxPrice" />
          </view>
        </view>

        <view
          class="inputBox"
          style="box-sizing: border-box; padding-left: 24rpx"
        >
          <input
            style="width: 100%"
            placeholder="商品名称"
            v-model="searchShopName"
          />
        </view>

        <view class="btnList">
          <view class="cancelBtn" @click="handleReset">重置</view>
          <view class="confirmBtn" @click="handleConfirm">确认</view>
        </view>
      </view>
    </uni-popup>

    <uni-popup ref="noticeRef" v-if="false">
      <view class="noticePopup" @click="handleHidePopup">
        <view class="popupContent">
          <view class="title">尊敬的会员：</view>
          <view class="contentText"
            >因春节期间暂停发货服务，为确保您在本平台良好的购物体验，请您阅知如下购物须知：</view
          >

          <view class="title textIndent">一、发货服务暂停时间：</view>
          <view class="contentText"
            >期间平台商城所有商品均可正常下单，2025年2月5日起按照下单顺序陆续发货；</view
          >

          <view class="title textIndent"
            >二、如遇问题，请垂询以下联系方式：</view
          >
          <view class="contentText">客服顾顾：18788508349</view>
          <view class="contentText">客服晶晶：13508825566</view>
          <view class="contentText">客服值班时间：上午9:00—下午18:00</view>

          <view class="title textIndent">三、会员下单视为接受购物须知；</view>
          <view class="contentText"
            >在2025年春节即将来临之际，云南交投集团经营开发有限公司彩云驿商业管理分公司全体员工提前恭祝您及家人：新春愉快、阖家欢乐！</view
          >
          <view class="contentText"
            >衷心感谢您对本平台的鼎力支持，我们将为您提供始终如一的优质服务！</view
          >
        </view>
      </view>
    </uni-popup>

    <!-- 回到顶部 -->
    <view class="backTopBox" v-if="showBackTop" @click="handleGoBack">
      <image class="backIcon" src="/static/images/home/backTopIcon.png" />
    </view>

    <shop-tabbar
      :page="`/pages/shopMallPage/index/index`"
      :pageType="pageType"
      :shopCarLength="shopCarListCount"
    />
  </scroll-view>
</template>

<script>
import shopTabbar from "../../../components/shopTabbar.vue";
export default {
  components: { shopTabbar },
  data() {
    return {
      menu: {},
      specialOffersList: [], // 特价优惠
      todayOffersList: [], // 今日推荐
      shopTypeList: [], // 商品大类数组
      oneRowNumber: 0, // 单行个数
      productsList: [], // 甄选商品
      selectProducts: 0, // 选择的甄选商品类型
      pageType: "", // 页面类型
      brandList: [
        { label: "蓝月亮", value: 1, src: "/static/images/home/1.png" },
        { label: "洁柔", value: 2, src: "/static/images/home/2.png" },
        { label: "新希望", value: 3, src: "/static/images/home/3.png" },
        { label: "八宝贡", value: 4, src: "/static/images/home/4.png" },
        { label: "福临门", value: 5, src: "/static/images/home/5.png" },
        { label: "金丝莉", value: 6, src: "/static/images/home/6.png" },
        { label: "良品铺子", value: 7, src: "/static/images/home/7.png" },
        { label: "云南白药", value: 8, src: "/static/images/home/8.png" },
        { label: "德和", value: 9, src: "/static/images/home/9.png" },
        { label: "蔬果园", value: 10, src: "/static/images/home/10.png" },
      ], // 热门品牌类型
      minPrice: "", // 最低价
      maxPrice: "", // 最高价
      allShopList: [], // 工会商城时拿到的全部商品
      showShopList: [], // 当前显示的全部商品
      pageIndex: 1, // 当前显示几个 10个商品
      shopMsg: {
        pageIndex: 1,
        pageSize: 6,
        isOver: false,
      },
      havePrice: false, // 有无价格区间查询
      newShopList: [], // 新品榜
      hotShopList: [], // 热销榜
      goodShopList: [], // 推荐榜
      shopCarListCount: 0, // 购物车商品数量
      sortType: 0, // 这一次的排序方法
      sortTypeList: [
        "COMMODITYTYPE_CODE",
        "COMMODITY_BARCODE",
        "COMMODITY_ID",
        "COMMODITY_EN",
      ],
      isFirst: false,
      searchShopName: "", // 搜索商品的名称
      showBackTop: false, // 页面滚动距离
      scrollView: "",
      safeHeight: 0, // ios的安全距离
      haveActivity: false, // 是否有活动
      activityObj: {}, // 活动项的具体内容
      activityShopList: [], // 活动商品列表
    };
  },
  async onLoad(query) {
    console.log("query", query);
    this.menu = uni.getMenuButtonBoundingClientRect();
    this.pageType = query.pageType;
    // 判断这个用户是不是第一次进入到商城
    let firstEntry = uni.getStorageSync("firstEntry");
    if (firstEntry === "2") {
    } else {
      this.isFirst = true;
      // this.$refs.noticeRef.open("center");
      uni.setStorageSync("firstEntry", "2");
    }
    let safeHeight = uni.getStorageSync("safeHeight");
    if (safeHeight) {
      this.safeHeight = Number(safeHeight);
    }
    // if (query && query.recommendCode && query.recommendId) {
    //   console.log("this.globalData", this.globalData);

    //   this.globalData.recommendCode = query.recommendCode;
    //   this.globalData.recommendId = query.recommendId;
    // }
    // this.globalData.recommendCode = 1111;
    // this.globalData.recommendId = 2222;

    if (query.pageType === "UnionMall") {
      // 拿到顶部商品大类的方法
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsType",
        ownerUnitId: 911,
        commodityNature: 5070,
      });
      console.log("handleGetShopBigType", data);
      let typeList = data.Data.List || [];
      let obj = {};
      if (typeList && typeList.length > 0) {
        typeList.forEach((item) => {
          if (item.UserdefinedType_Id === 1253) {
            obj = item;
          }
        });
      }
      let resList = obj.UserdefinedTypeList.slice(0, 8);
      this.sortType = Math.floor(Math.random() * this.sortTypeList.length);

      this.shopTypeList = resList;
      // 拿到榜单的方法
      this.handleGetSortList();
      // this.shopTypeList = [
      //   {
      //     UserdefinedType_Name: "节日专享",
      //     UserdefinedType_Id: "1286",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "米面粮油",
      //     UserdefinedType_Id: "1287",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "生活家居",
      //     UserdefinedType_Id: "1288",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "家清日用",
      //     UserdefinedType_Id: "1289",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "零食饮料",
      //     UserdefinedType_Id: "1290",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "出差必备",
      //     UserdefinedType_Id: "1298",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "小型电器",
      //     UserdefinedType_Id: "1291",
      //     UserdefinedType_ICO: "",
      //   },
      //   {
      //     UserdefinedType_Name: "组合套餐",
      //     UserdefinedType_Id: "1292",
      //     UserdefinedType_ICO: "",
      //   },
      // ];
      // 拿到工会商城的商品列表
      this.handleGetUnionShopList();
    } else {
      // 拿到顶部商品大类的方法
      await this.handleGetShopBigType();
      // 拿到特价优惠的
      this.handleGetSpecialOffers();
      // 拿到今日推荐的商品列表
      this.handleGetTodayOffers();
      // 最下面的甄选商品
      this.handleGetProductsList();
      if (this.haveActivity) {
        this.handleGetActivityList();
      }
    }
  },
  onShow() {
    // 判断当前的购物车里面是否有东西
    let shopCarList = [];
    if (this.pageType === "UnionMall") {
      shopCarList = this.$store.state.unionMyShopCar;
    } else {
      shopCarList = this.$store.state.myShopCar;
    }
    console.log("shopCarList", shopCarList);
    let count = 0;
    if (shopCarList && shopCarList.length > 0) {
      shopCarList.forEach((item) => {
        count += item.count;
      });
    }
    this.shopCarListCount = count;
  },
  onReachBottom() {
    console.log("onReachBottom");
    this.handleToBottom();
  },
  onShareAppMessage() {
    let _this = this;
    return {
      title: _this.pageType === "UnionMall" ? "工会商城" : "精选商城",
      path: `/pages/index/index?pageType=${this.pageType}`,
    };
  },
  onShareTimeline() {
    let _this = this;
    return {
      title: _this.pageType === "UnionMall" ? "工会商城" : "精选商城",
      path: `/pages/index/index?pageType=${this.pageType}`,
    };
  },
  methods: {
    // 滚动到底部 加载更多的方法
    handleScrollBottom() {
      this.handleToBottom();
    },
    // 回到顶部
    handleGoBack() {
      this.scrollView = "navItem";
    },
    handlePageScroll(e) {
      this.pageScrollNumber = Number(e.detail.scrollTop);
      if (Number(e.detail.scrollTop) > 100) {
        this.showBackTop = true;
      } else {
        this.scrollView = "";
        this.showBackTop = false;
      }
    },
    handleHidePopup() {
      this.$refs.noticeRef.close();
    },
    // 关闭价格区间的悬浮框
    handleClosePricePopup() {
      this.$refs.priceRangeRef.close();
    },
    // 榜单的方法
    async handleGetSortList() {
      let req1 = {
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5070,
        payMethod: "1000,3000",
        justCommodity: 1,
        userdefinedtypeId: "1317",
      };

      let req2 = {
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5070,
        payMethod: "1000,3000",
        justCommodity: 1,
        userdefinedtypeId: "1318",
        sortStr: "COMMODITY_EN desc",
      };

      let req3 = {
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5070,
        payMethod: "1000,3000",
        justCommodity: 1,
        userdefinedtypeId: "1319",
      };

      const data1 = await this.$api.getCoop(req1);
      const data2 = await this.$api.getCoop(req2);
      const data3 = await this.$api.getCoop(req3);

      let list1 = this.handleChangeShopList(data1.Data.List);
      let list2 = this.handleChangeShopList(data2.Data.List);
      let list3 = this.handleChangeShopList(data3.Data.List);

      console.log("list1", list1);
      console.log("list2", list2);
      console.log("list3", list3);
      this.newShopList = list1.slice(0, 2);
      this.hotShopList = [list2[0]];
      this.goodShopList = [list3[0]];
    },
    handleChangeShopList(list) {
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      return shopList;
    },
    // 工会商城滚动到底部
    handleToBottom() {
      this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
      if (this.shopMsg.isOver) {
      } else {
        this.handleGetUnionShopList();
      }
      // this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
    },
    // 正常商品滚动到底部
    handleToBottomproductsList() {
      this.shopMsg.pageIndex = this.shopMsg.pageIndex + 1;
      if (this.shopMsg.isOver) {
      } else {
        this.handleGetProductsList();
      }
    },
    // 拿到工会商城的商品列表
    async handleGetUnionShopList() {
      uni.showLoading({
        title: "加载中...",
      });
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5070,
        priceStart: this.minPrice,
        priceEnd: this.maxPrice,
        payMethod: "1000,3000",
        commodityNature: 5070,
        commodityName: this.searchShopName,
        Page_Size: this.shopMsg.pageSize,
        Page_Index: this.shopMsg.pageIndex,
        userdefinedtypeId: this.selectProducts || "",
        justCommodity: 1,
        sortStr: `${this.sortTypeList[this.sortType]} ${
          new Date().getTime % 2 > 0 ? "" : "desc"
        }`,
      });
      console.log("handleGetSpecialOffers", data);
      let list = data.Data && data.Data.List ? data.Data.List : [];
      let shopList = [];
      if (this.shopMsg.pageIndex > 1) {
        shopList = this.showShopList;
      }
      let thisResList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              thisResList.push(subItem);
            });
          }
        });
      }
      if (thisResList && thisResList.length < 6) {
        this.shopMsg.isOver = true;
      }
      console.log("shopList", shopList);
      this.showShopList = shopList.concat(thisResList);
      // this.allShopList = shopList
      // this.showShopList = this.allShopList.slice(0, this.pageIndex * 10)
      console.log("this.showShopList", this.showShopList);
      uni.hideLoading();
    },
    // 重置价格筛选
    async handleReset() {
      this.maxPrice = "";
      this.minPrice = "";
      this.searchShopName = "";
      this.showShopList = [];

      this.shopMsg = {
        pageIndex: 1,
        pageSize: 6,
        isOver: false,
      };
      // 拿到工会商城的商品列表
      await this.handleGetUnionShopList();
      this.$refs.priceRangeRef.close();
    },
    // 价格筛选的确认
    async handleConfirm() {
      console.log("minPrice", this.minPrice);
      console.log("maxPrice", this.maxPrice);
      if (Number(this.minPrice) <= Number(this.maxPrice)) {
      } else {
        let newMax = Number(this.minPrice);
        let newMin = Number(this.maxPrice);
        this.maxPrice = newMax;
        this.minPrice = newMin;
      }
      this.showShopList = [];
      this.shopMsg = {
        pageIndex: 1,
        pageSize: 6,
        isOver: false,
      };
      // 拿到工会商城的商品列表
      await this.handleGetUnionShopList();
      this.$refs.priceRangeRef.close();
    },
    // 显示价格的悬浮框
    handleShowPricePopup() {
      this.$refs.priceRangeRef.open("bottom");
    },
    // 品牌的跳转
    handleSearchBrand(value) {
      uni.navigateTo({
        url: `/pages/shopPages/shopList/index?name=${value.label}&pageType=brand`,
      });
    },
    // 跳转去榜单页面
    handleGoSortList(type) {
      // 1  新品榜   2  热销榜  3  推荐榜
      uni.navigateTo({
        url: `/pages/shopPages/shopList/index?type=${type}&pageType=${this.pageType}`,
      });
    },
    // 拿到顶部商品大类的方法
    async handleGetShopBigType() {
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsType",
        ownerUnitId: 911,
        commodityNature: 5070,
      });
      console.log("handleGetShopBigType", data);
      let typeList = data.Data.List;
      let resList = [];
      // 如果有活动的话就有值
      let activityObj = {};
      let indexOfList = [1248, 1247, 1257, 1245, 1246];
      // , 1355
      if (typeList && typeList.length > 0) {
        typeList.forEach((item) => {
          if (indexOfList.indexOf(item.UserdefinedType_Id) !== -1) {
            resList.push(item);
          }

          if (item.UserdefinedType_Id === 1355) {
            this.haveActivity = true;
            activityObj = item;
          }
        });
      }

      if (this.haveActivity) {
        // resList.push(activityObj);
        this.activityObj = activityObj;
      }

      this.shopTypeList = resList;
      this.selectProducts = resList[0].UserdefinedType_Id;
      console.log("this.shopTypeList", this.shopTypeList);
      console.log("this.activityObj", this.activityObj);

      // if (this.shopTypeList && this.shopTypeList.length < 10) {
      //   this.oneRowNumber = this.shopTypeList.length;
      // } else {
      //   this.oneRowNumber = Math.ceil(this.shopTypeList.length / 2);
      // }
      // console.log("this.oneRowNumber", this.oneRowNumber);
    },
    // 拿到活动的商品列表 可能不调用 有判断的
    async handleGetActivityList() {
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        userdefinedtypeId: 1355,
        excludeNature: 5070,
        justCommodity: 1,
      });
      console.log("handleGetActivityList", data);
      let list = data.Data.List;
      let res = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              res.push(subItem);
            });
          }
        });
      }
      this.activityShopList = res;
    },
    // 拿到特价优惠的商品列表 nature 5030
    async handleGetSpecialOffers() {
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5030,
        excludeNature: 5070,
        justCommodity: 1,
      });
      console.log("handleGetSpecialOffers", data);
      let list = data.Data && data.Data.List ? data.Data.List : [];
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      console.log("特价优惠", shopList);
      this.specialOffersList = shopList;
    },
    // 拿到今日推荐的商品列表 nature 5050
    async handleGetTodayOffers() {
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 5050,
        excludeNature: 5070,
        justCommodity: 1,
      });
      console.log("今日推荐", data);
      let list = data.Data.List;
      let shopList = [];
      if (list && list.length > 0) {
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }
              shopList.push(subItem);
            });
          }
        });
      }
      console.log("今日推荐", shopList);
      this.todayOffersList = shopList;
      return;
      if (list && list.length > 0) {
        let obj = list[0];
        if (obj.CommodityList && obj.CommodityList.length > 0) {
          let shopList = [];
          obj.CommodityList.forEach((item) => {
            if (
              item.COSTTAXPRICE &&
              item.COSTTAXPRICE.toString().indexOf(".") !== -1
            ) {
              item.bigNumber = item.COSTTAXPRICE.toString().split(".")[0];
              item.smallNumber = item.COSTTAXPRICE.toString().split(".")[1];
            } else {
              item.bigNumber = item.COSTTAXPRICE;
            }
            shopList.push(item);
          });
          console.log("shopList", shopList);
          this.todayOffersList = shopList;
        }
      } else {
        this.todayOffersList = [];
      }
      console.log("今日推荐", this.todayOffersList);
    },
    // 切换甄选商品的类型
    handleChangeShopMallType(obj) {
      this.selectProducts = obj.UserdefinedType_Id;
      this.shopMsg = {
        pageSize: 6,
        pageIndex: 1,
        isOver: false,
      };
      this.handleGetProductsList();
    },
    // 拿到甄选商品  3000
    async handleGetProductsList() {
      uni.showLoading({
        title: "加载中",
      });
      const data = await this.$api.getCoop({
        action_type: "WeChat_GetMallGoodsInfo",
        ownerUnitId: 911,
        COMMODITYNATURE: 3000,
        userdefinedtypeId: this.selectProducts || "",
        Page_Size: this.shopMsg.pageSize,
        Page_Index: this.shopMsg.pageIndex,
        justCommodity: 1,
        // excludeNature: 5070,
      });
      let list = data.Data.List;
      let resList = [];
      let thisResList = [];
      if (this.shopMsg.pageIndex > 1) {
        resList = this.productsList;
      }
      if (list && list.length > 0) {
        // this.selectProducts = list[0].UserdefinedType_Id;
        list.forEach((item) => {
          if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
            item.COMMODITYLIST.forEach((subItem) => {
              if (
                subItem.COMMODITY_MEMBERPRICE &&
                subItem.COMMODITY_MEMBERPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.bigNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[0];
                subItem.smallNumber =
                  subItem.COMMODITY_MEMBERPRICE.toString().split(".")[1];
              } else {
                subItem.bigNumber = subItem.COMMODITY_MEMBERPRICE;
              }
              if (
                subItem.COMMODITY_RETAILPRICE &&
                subItem.COMMODITY_RETAILPRICE.toString().indexOf(".") !== -1
              ) {
                subItem.RETbigNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[0];
                subItem.RETsmallNumber =
                  subItem.COMMODITY_RETAILPRICE.toString().split(".")[1];
              } else {
                subItem.RETbigNumber = subItem.COMMODITY_RETAILPRICE;
              }

              thisResList.push(subItem);
            });
          }
        });
      }
      if (thisResList && thisResList.length < 6) {
        this.shopMsg.isOver = true;
      }
      // this.productsList = list;
      this.productsList = resList.concat(thisResList);
      console.log("甄选商品", list);
      uni.hideLoading();

      // let shopList = []
      // if (list && list.length > 0) {
      //   list.forEach((item) => {
      //     if (item.COMMODITYLIST && item.COMMODITYLIST.length > 0) {
      //       item.COMMODITYLIST.forEach((subItem) => {
      //         shopList.push(subItem)
      //       })
      //     }
      //   })
      // }
    },
    // 返回首页
    handleBackHome() {
      if (this.pageType === "UnionMall") {
        uni.navigateBack({
          delta: 1,
        });
      } else {
        uni.switchTab({
          url: "/pages/index/index",
        });
      }
    },
    // 跳转公告页面
    handleGoNotice() {
      uni.navigateTo({
        url: "/pages/noticePage/index",
      });
    },
    // 跳转商品列表接口
    handleGoShopList(type) {
      uni.navigateTo({
        url: `/pages/shopPages/shopList/index?type=${type}&pageType=${
          this.pageType || ""
        }`,
      });
    },
    // 跳转商品详情
    handleGoShopDetail(obj) {
      console.log("obj", obj);
      uni.navigateTo({
        url: `/pages/shopPages/shopDetail/index?id=${obj.COMMODITY_ID}&pageType=${this.pageType}`,
      });
    },
    // 跳转到商品分类页面
    handleGoShopPage(obj, index) {
      console.log("obj", obj);
      console.log("index", index);
      if (this.pageType === "UnionMall") {
        uni.redirectTo({
          url: `/pages/shopMallPage/shopType/index?leftId=${obj.UserdefinedType_Id}&pageType=${this.pageType}`,
        });
      } else {
        uni.redirectTo({
          url: `/pages/shopMallPage/shopType/index?selectIndex=${index}&pageType=${this.pageType}`,
        });
      }
    },
    // 活动直接跳转分类页面 分类页面的互动是第一个 所以 selectIndex 传0就好
    handleGoActivityType() {
      uni.redirectTo({
        url: `/pages/shopMallPage/shopType/index?selectIndex=${0}&pageType=${
          this.pageType
        }`,
      });
    },
    // 跳转工会商城
    handleGoUnionMall() {
      uni.navigateTo({
        url: `/pages/shopMallPage/index/index?pageType=UnionMall`,
      });
    },
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100vw;
  height: 100vh;
  box-sizing: border-box;
  background: #f2f4f5;

  .header {
    width: 100%;
    box-sizing: border-box;
    //height: 496rpx;
    // background: linear-gradient(270deg, #2FA4FF 0%, #197AFF 100%);
    background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
    background-repeat: no-repeat;
    background-size: 100% 300rpx;
    //position: relative;
    z-index: 0;

    .headerTop {
      width: 100%;
      display: flex;
      align-items: center;
      box-sizing: border-box;
      padding: 0 32rpx;
      display: flex;
      justify-content: space-between;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 99;
      background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/indexBg.png");
      background-repeat: no-repeat;
      background-size: 100% 300rpx;

      .backArrow {
        width: 48rpx;
        height: 48rpx;
      }

      .pageName {
        font-size: 32rpx;
        font-weight: 600;
        color: #fff;
      }
    }

    .pageTitle {
      width: 100%;
      box-sizing: border-box;
      padding: 0 40rpx;

      .titleText {
        font-size: 20px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #ffffff;
      }
    }

    .pageSearch {
      width: calc(100% - 48rpx);
      margin-left: 24rpx;
      margin-top: 28rpx;
      height: 38px;
      background: #fff;
      border-radius: 19px;
      box-sizing: border-box;
      padding: 2px;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .areaSelect {
        font-size: 14px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #160304;
        line-height: 20px;
        padding-left: 12px;
        position: relative;

        .areaIcon {
          width: 12px;
          height: 12px;
        }
      }

      .areaSelect:after {
        content: "";
        width: 2px;
        height: 14px;
        position: absolute;
        top: 3px;
        right: -12px;
        background: #e7e5e5;
        display: block;
      }

      .serach_input {
        width: 154px;
        border: none;
        height: 20px;
        font-size: 14px;
        box-sizing: border-box;
        padding: 0 12px;
      }

      .searchBtn {
        font-size: 14px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        color: #fdfdfd;
        line-height: 20px;
        padding: 7px 16px;
        background: #1890ff;
        border-radius: 17px;
      }
    }

    .bannerBox {
      width: calc(100% - 48rpx);
      height: 280rpx;
      background: #6e0f16;
      border-radius: 16rpx;
    }

    .typeBox {
      width: calc(100% - 48rpx);
      margin: 24rpx 0 0 24rpx;
      //height: 392rpx;
      background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 2rpx;

      .contentBox {
        width: 100%;
        border-radius: 16rpx;
        box-sizing: border-box;
        min-height: 214rpx;
        padding: 30rpx;
        background: linear-gradient(
          180deg,
          rgba(230, 240, 255, 1) 0%,
          rgba(255, 255, 255, 1) 50%,
          #ffffff 100%
        );
        flex-wrap: wrap;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .rowBox {
          width: 20%;
          height: 144rpx;

          // width: 96rpx;
          // height: 154rpx;
          // display: inline-block;
          // box-sizing: border-box;

          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: space-between;

          .imgBox {
            width: 96rpx;
            display: flex;
            justify-content: center;

            .itemImgBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              background: #fff;
              padding: 2rpx;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 16rpx;

              .img {
                width: 96rpx;
                height: 100%;
              }
            }
          }

          .itemName {
            width: 96rpx;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
          }
        }

        .rowBox:nth-child(5n) {
          //margin-right: 0!important;
        }
      }
    }
  }

  .pageContent {
    width: 100%;
    box-sizing: border-box;
    padding: 0 24rpx 160rpx;
    margin-top: 24rpx;

    .noticeBox {
      width: 100%;
      box-sizing: border-box;
      padding: 24rpx 28rpx;
      background: #fff;
      border-radius: 16rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .noticeLeft {
        display: flex;
        align-items: center;
        .noticeIcon {
          width: 32rpx;
          height: 32rpx;
          margin-right: 8rpx;
        }
        .noticeTitle {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #ee4020;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          margin-right: 24rpx;
        }
        .noticeContent {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #716f69;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }
      }
      .noticeRight {
        .moreIcon {
          width: 24rpx;
          height: 24rpx;
        }
      }
    }

    .typeBox {
      width: 100%;
      //height: 392rpx;
      background: #fff;
      border-radius: 16rpx;
      box-sizing: border-box;
      padding: 2rpx;

      .contentBox {
        width: 100%;
        height: 100%;
        border-radius: 16rpx;
        box-sizing: border-box;
        padding: 30rpx;
        background: linear-gradient(
          180deg,
          rgba(46, 134, 255, 0.12) 0%,
          rgba(46, 134, 255, 0) 100%
        );

        .rowBox {
          width: 120rpx;
          height: 134rpx;
          display: inline-block;

          //display: flex;
          //align-items: center;
          //justify-content: space-between;
          .imgBox {
            width: 100%;
            display: flex;
            justify-content: center;

            .itemImgBox {
              width: 96rpx;
              height: 96rpx;
              border-radius: 50%;
              background: #fff;
              padding: 2rpx;
              box-sizing: border-box;
              overflow: hidden;
              margin-bottom: 10rpx;

              .img {
                width: 96rpx;
                height: 100%;
              }
            }
          }

          .itemName {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #020e1a;
            line-height: 32rpx;
            text-align: center;
            font-style: normal;
          }
        }

        .rowBox:nth-child(5) {
          margin-right: 0 !important;
        }
      }
    }

    .advertisement {
      width: 100%;
      background: #ffffff;
      border-radius: 16rpx;
      margin-top: 24rpx;
      box-sizing: border-box;
      padding: 2rpx;

      .advertisementContentBox {
        width: 100%;
        height: 100%;
        // 真的有个空格！！！
        background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/Special Offers.png");
        background-repeat: no-repeat;
        border-radius: 16rpx;
        background-size: 100% 100%;
        box-sizing: border-box;
        padding: 16rpx 22rpx;

        .advertisementTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 14px;
            font-weight: 600;
            color: #181716;
            .titleImg {
              width: 112rpx;
              height: 36rpx;
            }
          }

          .moreBox {
            display: flex;
            align-items: center;

            .moreText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8b8280;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .rightIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 4rpx;
            }
          }
        }

        .advertisementTopUnionMall {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .title {
            font-size: 26rpx;
            font-weight: 600;
            color: #181716;
          }

          .moreBox {
            display: flex;
            align-items: center;

            .moreText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #8b8280;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
            }

            .rightIcon {
              width: 24rpx;
              height: 24rpx;
              margin-left: 4rpx;
            }
          }
        }

        .UnionMallShopList {
          width: 100%;
          margin-top: 24rpx;
          height: 80px;
          display: flex;
          align-items: center;

          .leftSortBox {
            width: 50%;
            background: linear-gradient(180deg, #ffffff 0%, #ffffff 100%);
            border-radius: 16rpx;
            box-sizing: border-box;
            padding: 12rpx 24rpx;

            .titleTop {
              .title {
                font-family: PingFangSC, PingFang SC;
                font-weight: 600;
                font-size: 32rpx;
                color: #130f05;
                line-height: 44rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }

          .rowBox {
            width: 25%;
            height: 144rpx;

            // width: 96rpx;
            // height: 154rpx;
            // display: inline-block;
            // box-sizing: border-box;

            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;

            .imgBox {
              width: 96rpx;
              display: flex;
              justify-content: center;

              .itemImgBox {
                width: 96rpx;
                height: 96rpx;
                border-radius: 50%;
                background: #fff;
                padding: 2rpx;
                box-sizing: border-box;
                overflow: hidden;
                margin-bottom: 16rpx;

                .img {
                  width: 96rpx;
                  height: 100%;
                }
              }
            }

            .itemName {
              width: 96rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #020e1a;
              line-height: 32rpx;
              text-align: center;
              font-style: normal;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }
        }

        .shopList {
          width: 100%;
          margin-top: 24rpx;
          height: 80px;

          .shopItem {
            width: 136rpx;
            display: inline-block;
            margin-right: 40rpx;

            .shopItemImg {
              width: 100%;
              position: relative;

              .imgBox {
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                overflow: hidden;

                .shopImg {
                  width: 100%;
                  height: 100%;
                }
              }

              .discountedPrice {
                background: linear-gradient(90deg, #fd3404 0%, #fe7e1f 100%);
                padding: 4rpx 12rpx;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #ffffff;
                line-height: 32rpx;
                font-style: normal;
                border-radius: 16rpx;
                position: absolute;
                bottom: -12rpx;
                left: 50%;
                transform: translateX(-50%);
              }
            }

            .price {
              width: 100%;
              display: inline-block;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #756c6a;
              line-height: 36rpx;
              text-align: center;
              font-style: normal;
              text-decoration-line: line-through;
              margin-top: 14rpx;
            }
          }
        }
      }

      .advertisementContentBox ::-webkit-scrollbar {
        display: none;
      }

      .sortBox {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .leftSortBox {
          background: linear-gradient(180deg, #ffe8e8 0%, #ffffff 100%);
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 12rpx 24rpx;
          margin-right: 16rpx;
          min-width: 320rpx;

          .titleTopSort {
            width: 100%;

            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;

              .red {
                color: #ff3e3e;
              }
            }
          }

          .notice {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #716f69;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
          }

          .shopList {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-top: 16rpx;

            .shopItem {
              width: 128rpx;
              height: 128rpx;

              .shopImg {
                width: 128rpx;
                height: 128rpx;
              }
            }
          }
        }

        .rightItem {
          border-radius: 16rpx;
          box-sizing: border-box;
          padding: 12rpx 24rpx;
          min-width: 160rpx;

          .titleTopSort {
            width: 100%;

            .title {
              font-family: PingFangSC, PingFang SC;
              font-weight: 600;
              font-size: 32rpx;
              color: #130f05;
              line-height: 44rpx;
              text-align: left;
              font-style: normal;

              .red {
                color: #ff8000;
              }
            }
          }

          .notice {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 20rpx;
            color: #716f69;
            line-height: 28rpx;
            text-align: left;
            font-style: normal;
          }

          .shopItem {
            width: 128rpx;
            height: 128rpx;
            margin-top: 16rpx;

            .shopImg {
              width: 128rpx;
              height: 128rpx;
            }
          }
        }

        .bg2 {
          background: linear-gradient(180deg, #ffefe0 0%, #ffffff 100%);
        }

        .bg3 {
          background: linear-gradient(180deg, #d8f9de 0%, #ffffff 100%);
        }
      }
    }

    .advertisementSecond {
      width: 100%;
      margin-top: 24rpx;
      display: flex;
      justify-content: space-between;

      .advertisementItem {
        width: 100%;
        //width: calc((100% - 26rpx) / 2);
        height: 316rpx;
        background: #fff;
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 2rpx;

        .advertisementItemContent {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 16rpx 22rpx;
          background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
          background-repeat: no-repeat;
          background-size: 100% 100%;

          .contentTop {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              .titleImg {
                width: 112rpx;
                height: 36rpx;
              }
            }

            .moreBox {
              display: flex;
              align-items: center;

              .moreText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #8b8280;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }

              .rightIcon {
                width: 24rpx;
                height: 24rpx;
                margin-left: 4rpx;
              }
            }
          }

          .contentTopUnionMall {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 26rpx;
              font-weight: 600;
              color: #181716;
            }
          }

          .shopDesc {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 24rpx;
            color: #8b8280;
            line-height: 36rpx;
            text-align: left;
            font-style: normal;
          }

          .shopItemList {
            width: 100%;
            height: 95px;
            margin-top: 24rpx;

            .shopItem {
              width: 136rpx;
              display: inline-block;
              margin-right: 24rpx;

              .imgBox {
                width: 136rpx;
                height: 136rpx;
                border-radius: 50%;
                overflow: hidden;

                .shopImg {
                  width: 100%;
                  height: 100%;
                }
              }

              .shopImgText {
                display: inline-block;
                width: 100%;
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 28rpx;
                color: #fe3f22;
                line-height: 32rpx;
                text-align: center;
                font-style: normal;

                .shopSmallText {
                  font-size: 24rpx;
                }
              }
            }
          }
        }

        .advertisementItemContent ::-webkit-scrollbar {
          display: none;
        }
      }

      .advertisementItemUnionMall {
        width: 100%;
        background: #fff;
        border-radius: 14rpx;
        box-sizing: border-box;
        padding: 2rpx;

        .advertisementItemContent {
          width: 100%;
          height: 100%;
          box-sizing: border-box;
          padding: 16rpx 22rpx;
          background: linear-gradient(
              rgba(255, 239, 238, 1) 0%,
              rgba(255, 254, 254, 1) 100%
            )
            no-repeat;
          background-size: 100% 176rpx;
          // background-image: url("https://eshangtech.com/ShopICO/ahyd-mall/wechatesAH/recommendation.png");
          // background-repeat: no-repeat;
          // background-size: 100% 100%;

          .contentTopUnionMall {
            width: 100%;
            box-sizing: border-box;
            display: flex;
            align-items: center;
            justify-content: space-between;

            .title {
              font-size: 26rpx;
              font-weight: 600;
              color: #181716;
            }
          }

          .shopItemList {
            width: 100%;
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            justify-content: center;

            .shopItem {
              width: 20%;
              height: 166rpx;
              overflow: hidden;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              .imgBox {
                width: 96rpx;
                height: 96rpx;
                display: flex;
                align-items: center;
                background-color: #f3f6f9;
                border-radius: 50%;
                justify-content: center;
                font-size: 24rpx;
                margin-bottom: 4rpx;
              }
              .imgText {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #130f05;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
              }
            }
          }
        }
      }
    }

    .allShopList {
      width: 100%;
      margin-top: 40rpx;

      .allTypeBox {
        width: calc(100vw - 48rpx);
        height: 60rpx;
        box-sizing: border-box;
        padding: 0 24rpx;
        white-space: nowrap;

        .typeItem {
          display: inline;
          margin-right: 32rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #020e1a;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
        }

        .selectTypeItem {
          font-family: PingFangSC, PingFang SC;
          font-weight: 600;
          font-size: 28rpx;
          color: #0787f3;
          line-height: 40rpx;
          text-align: left;
          font-style: normal;
          position: relative;
        }

        .selectTypeItem:after {
          content: "";
          position: absolute;
          width: 48rpx;
          height: 6rpx;
          background: #1890ff;
          border-radius: 2rpx;
          bottom: -10rpx;
          left: 50%;
          transform: translateX(-50%);
        }
      }

      .allShopListContent {
        width: 100%;
        // height: 800rpx;
        margin-top: 38rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;

        .buyShopItem {
          width: calc((100% - 22rpx) / 2);
          background: #fff;
          border-radius: 16rpx;
          box-sizing: border-box;
          margin-bottom: 24rpx;

          .shopImgContent {
            width: 100%;
            height: 330rpx;
            box-sizing: border-box;
            overflow: hidden;
            border-radius: 16rpx 16rpx 0 0;

            .shopImage {
              width: 100%;
              height: 100%;
            }
          }

          .priceBox {
            width: 100%;
            box-sizing: border-box;
            padding: 16rpx 24rpx 32rpx;

            .shopName {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #130f05;
              line-height: 32rpx;
              font-style: normal;
              width: calc((100vw - 80rpx) / 2 - 40rpx);
              height: 64rpx;
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-line-clamp: 2;
              /* 设置显示的行数，超出的行数会被省略 */
              overflow: hidden;
              text-overflow: ellipsis;
            }

            .retailPrice {
              margin-top: 12rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 24rpx;
              color: #756c6a;
              line-height: 36rpx;
              text-align: left;
              font-style: normal;
              text-decoration-line: line-through;
            }

            .nowPrice {
              .unit {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 24rpx;
                color: #fe3f22;
                line-height: 24rpx;
                text-align: left;
                font-style: normal;
              }

              .price {
                font-family: DINAlternate, DINAlternate;
                font-weight: bold;
                font-size: 36rpx;
                color: #fe3f22;
                line-height: 40rpx;
                text-align: left;
                font-style: normal;
              }
            }
            .shopState {
              font-size: 24rpx;
              color: #fff;
              background: #bbbbbb;
              padding: 4rpx 16rpx;
              border-radius: 8rpx;
            }

            .buyCarBox {
              width: 100%;
              display: flex;
              align-items: center;
              justify-content: space-between;

              .buyCarLeft {
                .price {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 600;
                  font-size: 32rpx;
                  color: #ff6219;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;

                  .smallPrice {
                    font-size: 28rpx;
                  }
                }

                .unit {
                  font-family: PingFangSC, PingFang SC;
                  font-weight: 400;
                  font-size: 24rpx;
                  color: #9fa3a8;
                  line-height: 36rpx;
                  text-align: left;
                  font-style: normal;
                }
              }

              .buyCarIcon {
                width: 70rpx;
                height: 70rpx;
                border-radius: 50%;
                overflow: hidden;

                .icon {
                  width: 100%;
                  height: 100%;
                }
              }
            }
          }
        }
      }

      .shopLovely {
        width: 100%;
        box-sizing: border-box;
        padding: 4rpx 22rpx;

        .shopLovelyTop {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: space-between;

          .shopLovelyTitle {
            font-size: 26rpx;
            font-weight: 600;
            color: #181716;
          }
          .shopLovelyRight {
            display: flex;
            align-items: center;
            .filterIcon {
              width: 32rpx;
              height: 32rpx;
              margin-right: 6rpx;
            }
            .filterText {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #716f69;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }
          }
        }

        .shopLovelyList {
          width: 100%;
          // height: 800rpx;
          margin-top: 24rpx;
          padding-bottom: 24rpx;

          .shopLovelyItem {
            display: inline-block;
            width: calc((100% - 22rpx) / 2);
            background: #fff;
            border-radius: 16rpx;
            box-sizing: border-box;
            margin-bottom: 24rpx;

            .shopImgContent {
              width: 100%;
              height: 330rpx;
              box-sizing: border-box;
              overflow: hidden;
              border-radius: 16rpx 16rpx 0 0;

              .shopImage {
                width: 100%;
                height: 100%;
              }
            }

            .priceBox {
              width: 100%;
              box-sizing: border-box;
              padding: 16rpx 24rpx 32rpx;

              .shopName {
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 28rpx;
                color: #130f05;
                line-height: 32rpx;
                font-style: normal;
                width: calc((100vw - 80rpx) / 2 - 40rpx);
                height: 64rpx;
                display: -webkit-box;
                -webkit-box-orient: vertical;
                -webkit-line-clamp: 2;
                /* 设置显示的行数，超出的行数会被省略 */
                overflow: hidden;
                text-overflow: ellipsis;
              }

              .retailPrice {
                margin-top: 12rpx;
                font-family: PingFangSC, PingFang SC;
                font-weight: 400;
                font-size: 24rpx;
                color: #756c6a;
                line-height: 36rpx;
                text-align: left;
                font-style: normal;
                text-decoration-line: line-through;
              }

              .nowPrice {
                .unit {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 24rpx;
                  color: #fe3f22;
                  line-height: 24rpx;
                  text-align: left;
                  font-style: normal;
                }

                .price {
                  font-family: DINAlternate, DINAlternate;
                  font-weight: bold;
                  font-size: 36rpx;
                  color: #fe3f22;
                  line-height: 40rpx;
                  text-align: left;
                  font-style: normal;
                }
              }
              .shopState {
                font-size: 24rpx;
                color: #fff;
                background: #bbbbbb;
                padding: 4rpx 16rpx;
                border-radius: 8rpx;
              }

              .buyCarBox {
                width: 100%;
                display: flex;
                align-items: center;
                justify-content: space-between;

                .buyCarLeft {
                  .price {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 600;
                    font-size: 32rpx;
                    color: #ff6219;
                    line-height: 40rpx;
                    text-align: left;
                    font-style: normal;

                    .smallPrice {
                      font-size: 28rpx;
                    }
                  }

                  .unit {
                    font-family: PingFangSC, PingFang SC;
                    font-weight: 400;
                    font-size: 24rpx;
                    color: #9fa3a8;
                    line-height: 36rpx;
                    text-align: left;
                    font-style: normal;
                  }
                }

                .buyCarIcon {
                  width: 70rpx;
                  height: 70rpx;
                  border-radius: 50%;
                  overflow: hidden;

                  .icon {
                    width: 100%;
                    height: 100%;
                  }
                }
              }
            }
          }
        }

        .inBottom {
          width: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
          padding-bottom: 12rpx;
          .bottomText {
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 26rpx;
            color: #d0d0d0;
            line-height: 40rpx;
            text-align: justify;
            font-style: normal;
            position: relative;
            padding: 6rpx 0;
          }
          .bottomText::after {
            content: "";
            width: 30vw;
            height: 2rpx;
            background: #e0e0e0;
            position: absolute;
            left: -32vw;
            top: 50%;
          }
          .bottomText::before {
            content: "";
            width: 30vw;
            height: 2rpx;
            background: #e0e0e0;
            position: absolute;
            right: -32vw;
            top: 50%;
          }
        }

        // .shopLovelyList::-webkit-scrollbar {
        //   display: none;
        // }
      }
      .inBottom {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 12rpx;
        .bottomText {
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #d0d0d0;
          line-height: 40rpx;
          text-align: justify;
          font-style: normal;
          position: relative;
          padding: 6rpx 0;
        }
        .bottomText::after {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          left: -32vw;
          top: 50%;
        }
        .bottomText::before {
          content: "";
          width: 30vw;
          height: 2rpx;
          background: #e0e0e0;
          position: absolute;
          right: -32vw;
          top: 50%;
        }
      }
    }
  }

  .priceRangeBox {
    width: 100%;
    height: 600rpx;
    background-color: #fff;
    border-radius: 32rpx 32rpx 0 0;
    box-sizing: border-box;
    padding: 32rpx;
    .titleBox {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .title {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: left;
        font-style: normal;
      }
      .closeIcon {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .inputBox {
      width: 100%;
      background-color: #f5f6f7;
      box-sizing: border-box;
      padding: 16rpx;
      border-radius: 16rpx;
      margin-top: 32rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .inputItem {
        width: 48%;
        text-align: center;
      }

      .unit {
        width: 4%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
    }

    .btnList {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;

      .confirmBtn {
        // width: 100%;
        width: calc((100% - 32rpx) / 2);
        background: #fd4d4d;
        border-radius: 8rpx;
        padding: 18rpx 0;
        display: flex;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-size: 32rpx;
        color: #ffffff;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        margin-top: 40rpx;
      }

      .cancelBtn {
        width: calc((100% - 32rpx) / 2);
        background: #f2f2f2;
        border-radius: 8rpx;
        padding: 18rpx 0;
        display: flex;
        justify-content: center;
        font-family: PingFangSC, PingFang SC;
        font-size: 32rpx;
        color: #130f05;
        line-height: 44rpx;
        text-align: center;
        font-style: normal;
        margin-top: 40rpx;
      }
    }
  }

  .noticePopup {
    // width: 90vw;
    // height: 75vh;

    width: 70vw;
    height: calc(2688 * 70vw / 1242);

    background: #fff;
    border-radius: 32rpx;
    background-image: url(https://eshangtech.com/minTestImg/preSalePoster.jpg);
    background-repeat: no-repeat;
    background-size: 100% 100%;
    box-sizing: border-box;
    padding: 300rpx 120rpx 160rpx;
    // .popupContent {
    //   width: 100%;
    //   height: 100%;
    //   overflow-y: auto;
    //   .title {
    //     font-family: PingFangSC, PingFang SC;
    //     font-weight: 600;
    //     font-size: 24rpx;
    //     color: #da291a;
    //     line-height: 40rpx;
    //     text-align: left;
    //     font-style: normal;
    //   }
    //   .contentText {
    //     font-family: PingFangSC, PingFang SC;
    //     font-weight: 400;
    //     font-size: 24rpx;
    //     color: #262626;
    //     line-height: 40rpx;
    //     text-align: left;
    //     font-style: normal;
    //     text-indent: 48rpx;
    //   }
    //   .textIndent {
    //     text-indent: 48rpx;
    //   }
    // }
    // .popupContent::-webkit-scrollbar {
    //   display: none;
    // }
  }

  .backTopBox {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #fff;
    position: fixed;
    right: 32px;
    bottom: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    .backIcon {
      width: 20px;
      height: 20px;
    }
  }
}
</style>
