<template>
  <view :class="userInfo.skin ? 'content1' : 'content'">
    <view class="content_a">
      <!-- 商品专区入口 先别删  -->
      <!-- <view @tap="goSpecialArea">会员专区</view> -->
      <view :class="userInfo.skin ? 'index-top1' : 'index-top'"> </view>
      <view class="banner" v-if="isEmpty(banners) == false">
        <view class="uni-margin-wrap">
          <swiper
            class="swiper"
            circular
            :indicator-dots="false"
            :autoplay="autoplay"
            :interval="interval"
            :duration="duration"
          >
            <swiper-item
              v-for="(item, index) in banners"
              :key="index"
              @click="bannerTap(item.link)"
            >
              <view class="swiper-item uni-bg-red">
                <image :src="item.picture"></image>
              </view>
            </swiper-item>
          </swiper>
        </view>
      </view>
      <!-- <view v-if="isEmpty(noticeList) == false" class="notice-wrapper">
        <simple-vertical-swiper
          :items="noticeList"
          type="custom"
          :height="80"
          :autoplay="true"
          :interval="3000"
          :show-indicators="false"
        >
          <template #default="{ item }">
            <view @click="goNotice(item)" class="clean-notice-item">
              <text class="notice-icon">📢</text>
              <view class="notice-content">
                <text class="notice-text">{{ item.title }}</text>
                <text class="notice-time">{{ item.creationTime }}</text>
              </view>
            </view>
          </template>
        </simple-vertical-swiper>
      </view> -->
      <view class="recommend-goods-list">
        <view
          v-if="isEmpty(recommendGoodsList) == false"
          class="recommend-section"
        >
          <view class="recommend-header">
            <view class="recommend-title">
              <!-- <text class="title-icon">⭐</text> -->
              <text class="title-text">精选推荐</text>
            </view>
          </view>
          <view class="recommend-swiper-container">
            <simple-vertical-swiper
              :items="recommendGoodsList"
              type="custom"
              :height="400"
              :autoplay="false"
              :interval="4000"
              :show-indicators="false"
            >
              <template #default="{ item }">
                <view @click="goDetails(item)" class="recommend-item">
                  <view class="recommend-item-image">
                    <image :src="item.cover" mode="aspectFill"></image>
                    <view class="recommend-badge">推荐</view>
                  </view>
                  <view class="recommend-item-content">
                    <view class="recommend-item-name">{{
                      item.waresName
                    }}</view>
                    <view class="recommend-item-price">
                      <text class="price-symbol" v-if="priceSymbolVisible">{{
                        priceSymbol
                      }}</text>
                      <text class="price-value">{{
                        formatCurrency(item.waresPrice)
                      }}</text>
                    </view>
                  </view>
                  <view class="recommend-arrow">›</view>
                </view>
              </template>
            </simple-vertical-swiper>
          </view>
        </view>
      </view>
      <!-- New Product List Section Wrapper -->
      <view class="hot-sellers-card-wrapper">
        <view
          class="main-product-list-section"
          v-if="displayedGoodsList.length > 0"
        >
          <!-- <view class="section-title">热销甄选</view> -->
          <view class="product-grid">
            <view
              class="product-card"
              v-for="item in displayedGoodsList"
              :key="item.waresId"
              @click="goDetails(item)"
            >
              <view
                class="fly"
                v-show="item.preSaleStatus == 3 || item.isSale == 1"
              ></view>
              <image
                class="product-image"
                :src="item.cover"
                mode="aspectFill"
              ></image>
              <view class="product-info">
                <text class="product-name">{{ item.waresName }}</text>
                <text class="product-tagline"></text>
                <view class="product-price-row">
                  <view class="product-price">
                    <span v-if="priceSymbolVisible" class="price-symbol">
                      {{ priceSymbol }}
                    </span>
                    <span
                      v-if="
                        item.specialArea == 31 && userInfo.isMakerSpace == 1
                      "
                      >{{ formatCurrency(item.vipPrice) }}</span
                    >
                    <span v-else>{{ formatCurrency(item.waresPrice) }}</span>
                  </view>
                  <view class="buy-now-button">立即购买</view>
                </view>
              </view>
            </view>
          </view>
          <view class="load-more-container" v-if="hasMoreGoods">
            <button @click="loadMoreGoods" class="load-more-button">
              加载更多
            </button>
          </view>
        </view>
      </view>
      <!-- End of New Product List Section Wrapper -->
      <cl-tabbar :current="0"></cl-tabbar>
      <div>
        <!-- 公告弹窗 -->
        <!-- <notice-popup
          :userInfo="userInfo"
          ref="child"
          :publishLocationIndex="10"
        ></notice-popup> -->

        <!-- 站内信弹窗 -->
        <!-- <znNewsPopup
          ref="child2"
          @childMethodTrigger="callChildMethod"
        ></znNewsPopup> -->
        <!-- 直推排行弹窗
        <directrank-popup
          @callznMethodTrigger="callznMethod"
        ></directrank-popup>
         -->

        <u-modal
          :show="promptFlag"
          title="提示"
          :closeOnClickOverlay="true"
          showCancelButton
          :confirmText="confirmText"
          confirmColor="#DE3932"
          @close="promptFlag = false"
          @cancel="promptFlag = false"
          @confirm="toDel"
          :content="promptMsg"
        ></u-modal>

        <!-- New Notice Popup Modal -->
        <u-modal
          :show="showNoticePopup"
          title="平台公告"
          :showConfirmButton="false"
          :showCancelButton="false"
          :closeOnClickOverlay="canCloseNoticePopup"
          @close="closeNoticePopup"
          width="700rpx"
        >
          <view class="notice-popup-content-wrapper">
            <swiper
              v-if="noticeList.length > 0"
              class="notice-popup-swiper"
              :indicator-dots="noticeList.length > 1"
              indicator-color="rgba(0, 0, 0, .2)"
              indicator-active-color="#007aff"
              autoplay
              circular
              interval="5000"
              duration="500"
            >
              <swiper-item
                v-for="(noticeItem, noticeIndex) in noticeList"
                :key="noticeIndex"
                class="notice-popup-swiper-item"
              >
                <view class="notice-popup-title">{{ noticeItem.title }}</view>
                <scroll-view scroll-y class="notice-popup-scroll-content">
                  <rich-text :nodes="noticeItem.content"></rich-text>
                </scroll-view>
              </swiper-item>
            </swiper>
            <view class="notice-popup-footer">
              <u-button
                @click="closeNoticePopup"
                :disabled="!canCloseNoticePopup"
                type="primary"
              >
                {{
                  canCloseNoticePopup
                    ? '关闭'
                    : `请阅读 (${noticePopupCountdown}s)`
                }}
              </u-button>
            </view>
          </view>
        </u-modal>
        <!-- End of New Notice Popup Modal -->
      </div>
    </view>
  </view>
</template>

<script>
// import titleLine from '@/components/titleLine.vue'
import * as api from '@/config/login.js'
import * as indexApi from '@/config/index.js'
import * as ban from '@/config/balance.js'
import { getAreaGoods } from '@/config/special-area'
import clTabbar from '@/components/cl-tabbar.vue'
import noticePopup from '@/components/noticePopup.vue'
import getTree from '@/components/getTree.vue'
import znNewsPopup from '@/components/znNewsPopup.vue'
import areaProductList from '@/components/area-product-list/index.vue'
import { formatCurrency } from '@/util/index.js'
import { mapGetters } from 'vuex'
import SimpleVerticalSwiper from '@/components/simple-vertical-swiper.vue'

export default {
  components: {
    noticePopup,
    znNewsPopup,
    'cl-tabbar': clTabbar,
    getTree,
    areaProductList,
    SimpleVerticalSwiper,
  },
  filters: {
    seles(value) {
      if (value > 999) {
        return 999 + '+'
      } else {
        return value
      }
    },
  },
  data() {
    return {
      promptFlag: false,
      promptMsg: '',
      confirmText: '',
      userInfo: uni.getStorageSync('User'),
      moreFlag: false,
      index: 0,
      interval: 5000,
      autoplay: true,
      duration: 500,
      recommendSpecialAreaList: [],
      banners: [],
      noticeList: [],
      // Popup related data
      showNoticePopup: false,
      noticePopupCountdown: 5,
      canCloseNoticePopup: false,
      // End popup related data
      recommendGoodsList: [],
      goodsList: [],
      displayedGoodsList: [],
      goodsListPage: 1,
      goodsListPageSize: 4,
      hasMoreGoods: true,
      zoneList: [
        {
          label: '注册专区',
          value: 1,
          name: 'regiest',
          children: [
            {
              label: '自营专区',
              value: 1,
              name: 'regiestArea',
              isShow: true,
            },
            {
              label: '乐学易考',
              value: 24,
              name: 'ezLearnReg',
              isShow: true,
            },
          ],
        },
        {
          label: '升级专区',
          value: 2,
          name: 'upgrade',
          children: [
            {
              label: '自营专区',
              value: 2,
              name: 'upgradeArea',
              isShow: true,
            },
            {
              label: '海粉专区',
              value: 27,
              name: 'haiFunUpd',
              isShow: true,
            },
            {
              label: '乐学易考',
              value: 25,
              name: 'ezLearnUp',
              isShow: true,
            },
          ],
        },

        {
          label: '复购专区',
          value: 3,
          name: 'repurchase',
          children: [
            {
              label: '自营专区',
              value: 3,
              name: 'self',
              isShow: true,
            },
            {
              label: '乐学易考',
              value: 26,
              name: 'ezLearnRep',
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: 'haiFans',
              isShow: true,
            },

            {
              label: '复购合作',
              value: 22,
              name: 'cooperation',
              isShow: true,
            },
            {
              label: '直播专区',
              value: 14,
              name: 'live',
              isShow: true,
            },
            {
              label: '工具流',
              value: 12,
              name: 'gongju',
              isShow: true,
            },
          ],
        },
        {
          label: '福利专区',
          value: 13,
          children: [],
          name: 'welfare',
        },
        {
          label: '积分专区',
          value: 11,
          children: [],
          name: 'integral',
        },
        {
          label: '重消专区',
          value: 10,
          children: [],
          name: 'rescission',
        },
        {
          label: '专供专区',
          value: 31,
          children: [],
          name: 'wolesaleArea',
        },
        {
          label: '续约专区',
          value: 30,
          children: [],
          name: 'renewalArea',
        },
        {
          label: '创客空间专区',
          value: 28,
          children: [],
          name: 'makerArea',
        },
        {
          label: '架构管理',
          value: 6,
          name: 'frame',
          children: [
            {
              label: '安置架构',
              value: 6,
              name: 'architecture',
              isShow: true,
            },
            {
              label: '推荐架构',
              value: 7,
              name: 'recommend',
              isShow: true,
            },
          ],
        },
        {
          label: '分享专区',
          value: 7,
          name: 'share',
          children: [
            {
              label: '海粉分享',
              value: 7,
              name: 'hiFans',
              isShow: true,
            },
            {
              label: '免费注册',
              value: 21,
              name: 'haiFans',
              isShow: true,
            },
          ],
        },
        {
          label: '创客礼包',
          value: 18,
          isShow: true,
          children: [
            {
              label: '创客礼包',
              value: 18,
              isShow: true,
              children: [],
            },
            {
              label: '赋能礼包',
              value: 19,
              isShow: true,
              children: [],
            },
          ],
        },
      ],
    }
  },
  computed: {
    ...mapGetters(['priceSymbol', 'priceSymbolVisible']),
  },
  onLoad() {
    if (
      uni.getStorageSync('showInfo') == undefined ||
      uni.getStorageSync('showInfo') == 0
    ) {
    }
    // this.getAreaGoods()
    this.getBanners()
    this.getNoticeList()
    this.getRecommendGoodsList()
    this.getGoodsList()
    // this.getLanguage();
    this.getService()
  },
  onShow() {
    this.$store.dispatch('getCarLength')
  },
  onPullDownRefresh() {
    let that = this
    setTimeout(() => {
      uni.stopPullDownRefresh() //停止刷新
    }, 1000)
  },
  methods: {
    formatCurrency,
    formatSales(value) {
      if (value > 999) {
        return '999+'
      } else {
        return value
      }
    },
    getBanners() {
      indexApi.getBanners().then(res => {
        this.banners = res.data
      })
    },
    getNoticeList() {
      ban.getNoticeList({ functionType: 1 }).then(res => {
        this.noticeList = res.rows || []
        // Logic for showing notice popup once per day
        if (this.noticeList.length > 0) {
          const today = new Date().toDateString()
          const lastShownDate = uni.getStorageSync('noticePopupLastShownDate')
          if (lastShownDate !== today) {
            this.showNoticePopup = true
            this.startNoticePopupTimer()
            uni.setStorageSync('noticePopupLastShownDate', today)
          }
        }
      })
    },
    goNotice(item) {
      uni.navigateTo({
        url: '/pages/email/noticeDetail?index=1&pkId=' + item.pkId,
      })
    },
    goAreaUrl() {
      ban.agreementName().then(res => {
        if (res.data == 0) {
          uni.navigateTo({
            url:
              '/pages/specialArea/list?label=续约专区' +
              '&specialArea=30' +
              '&children=[]',
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '请先进行实名认证',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/selfService/realName/realName',
                })
              }
            },
          })
        }
      })
    },
    getRecommendGoodsList() {
      indexApi.getIndexGoodsList({ isRecommend: 0 }).then(res => {
        if (res.code == 200) {
          this.recommendGoodsList = res.rows || []
        }
      })
    },
    getGoodsList() {
      indexApi.getIndexGoodsList().then(res => {
        if (res.code == 200) {
          this.goodsList = res.rows || []
          this.goodsListPage = 1
          this.displayedGoodsList = []
          this.loadMoreGoods()
        }
      })
    },
    loadMoreGoods() {
      if (!this.goodsList || this.goodsList.length === 0) {
        this.hasMoreGoods = false
        return
      }

      const start = (this.goodsListPage - 1) * this.goodsListPageSize
      const end = start + this.goodsListPageSize
      const newGoods = this.goodsList.slice(start, end)

      if (newGoods.length > 0) {
        this.displayedGoodsList = [...this.displayedGoodsList, ...newGoods]
        this.goodsListPage++
      }

      if (this.displayedGoodsList.length >= this.goodsList.length) {
        this.hasMoreGoods = false
      } else {
        this.hasMoreGoods = true
      }
    },
    toDel() {
      this.promptFlag = false
      if (this.jumpPage == 1) {
        uni.navigateTo({
          url: '/pages/selfService/realName/realName',
        })
      } else {
        uni.navigateTo({
          url:
            '/pages/specialArea/list?label=续约专区' +
            '&specialArea=30' +
            '&children=[]',
        })
      }
    },
    getService() {
      api.agreement_expire().then(res => {
        if (res.code == 200) {
          this.promptFlag = res.data.promptFlag ? false : true
          this.promptMsg = res.data.promptMsg
          this.jumpPage = res.data.jumpPage
          // confirmText
          if (this.jumpPage == 1) {
            this.confirmText = '实名认证'
          } else {
            this.confirmText = '立即续约'
          }
        }
      })
    },
    callChildMethod() {
      this.$refs.child.getUserTc()
    },
    callznMethod() {
      this.$refs.child2.getUserTc2()
    },
    // 植树弹层
    getTree() {
      this.$refs.tree.getData()
    },
    isEmpty(v) {
      switch (typeof v) {
        case 'undefined':
          return true
        case 'string':
          if (v.replace(/(^[ \t\n\r]*)|([ \t\n\r]*$)/g, '').length == 0)
            return true
          break
        case 'boolean':
          if (!v) return true
          break
        case 'number':
          if (0 === v || isNaN(v)) return true
          break
        case 'object':
          if (null === v || v.length === 0) return true
          for (var i in v) {
            return false
          }
          return true
      }
      return false
    },
    more() {
      this.moreFlag = true
    },
    openKf() {
      let userInfo = uni.getStorageSync('User')
      let src =
        'https://im1c5366d.7x24cc.com/phone_webChat.html?accountId=N000000033467&chatId=302384fb-eda1-436e-a5e9-c03a2dbd6e97&visitorId=' +
        userInfo.memberCode +
        '&nickName=' +
        userInfo.memberCode
      window.open(src, '_blank')
    },
    bannerTap(urls) {
      if (urls) {
        window.location.href = urls
      }
    },

    goUrl(item) {
      ban.agreementName().then(res => {
        if (res.data == 0) {
          uni.navigateTo({
            url:
              '/pages/specialArea/details?waresCode=' +
              item.waresCode +
              '&specialArea=' +
              item.specialArea,
          })
        } else {
          uni.showModal({
            title: '提示',
            content: '请先进行实名认证',
            success: res => {
              if (res.confirm) {
                uni.navigateTo({
                  url: '/pages/selfService/realName/realName',
                })
              }
            },
          })
        }
      })
    },
    goDetails(item) {
      if (item.preSaleStatus == 3 || item.isSale == 1) {
      } else {
        if (item.specialArea == 30) {
          this.goUrl(item)
        } else {
          uni.navigateTo({
            url:
              '/pages/specialArea/details?waresCode=' +
              item.waresCode +
              '&specialArea=' +
              item.specialArea,
          })
        }
      }
    },
    navTap(item) {
      let tapx = -1
      this.zoneList.forEach((items, index) => {
        if (items.value == item.specialArea) {
          tapx = index
        }
      })
      if (tapx == -1) {
        this.zoneList.forEach((items, index) => {
          items.children.forEach(ctem => {
            if (ctem.value == item.specialArea) {
              if (item.specialArea == 21) {
                uni.navigateTo({
                  url:
                    '/pages/specialArea/haIndex?label=' +
                    item.specialAreaName +
                    '&specialArea=21&diff=1',
                })
              } else {
                uni.navigateTo({
                  url:
                    '/pages/specialArea/list?label=' +
                    items.label +
                    '&specialArea=' +
                    items.value +
                    '&childArea=' +
                    item.specialArea +
                    '&children=' +
                    JSON.stringify(items.children) +
                    '&diff=1',
                })
              }
            }
          })
        })
      } else {
        if (item.specialArea == 30) {
          this.goAreaUrl()
        } else {
          uni.navigateTo({
            url:
              '/pages/specialArea/list?label=' +
              item.specialAreaName +
              '&specialArea=' +
              item.specialArea +
              '&children=' +
              JSON.stringify(this.zoneList[tapx].children) +
              '&diff=1',
          })
        }
      }
    },
    goSpecialArea() {
      uni.navigateTo({
        url: '/pages/index/specialArea/index',
      })
    },
    // Methods for Notice Popup
    startNoticePopupTimer() {
      this.noticePopupCountdown = 5 // Reset countdown
      this.canCloseNoticePopup = false
      const timerInterval = setInterval(() => {
        if (this.noticePopupCountdown > 0) {
          this.noticePopupCountdown--
        } else {
          this.canCloseNoticePopup = true
          clearInterval(timerInterval)
        }
      }, 1000)
    },
    closeNoticePopup() {
      this.showNoticePopup = false
    },
    // End Methods for Notice Popup
  },
}
</script>

<style lang="scss" scoped>
.content {
  // background: url('~@/static/images/fBgd.jpg') no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  .content_a {
    overflow: auto;
    height: 100%;
    padding-bottom: 120rpx;
    box-sizing: border-box;
  }
}
.content1 {
  background: url('~@/static/images/fBgd.jpg') no-repeat;
  background-size: 100% 100%;
  height: 100vh;
  .content_a {
    overflow: auto;
    height: 100%;
    padding-bottom: 120rpx;
    box-sizing: border-box;
  }
}
.more {
  color: #333;
  background-color: #fff;
  height: 80rpx;
  line-height: 80rpx;
  text-align: center;
  border-radius: 30rpx;
  width: 690rpx;
  margin: 0 auto 30rpx auto;
}

:v-deep uni-swiper {
  height: 300rpx;
}

header {
  display: none !important;
}

.padding_s {
  padding: 0 20rpx;
}

.goods-name {
  width: 100%;
  margin-top: 10rpx;
  color: #333;
  font-size: 26rpx;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
  line-height: 1.4;
  // min-height: calc(26rpx * 1.4 * 2);
}

.goods-center-lists {
  width: calc(100% - 40rpx); // height: 450rpx;
  background: #ffffff;
  margin-left: 20rpx;
  margin-right: 20rpx;
  border-radius: 15rpx;
  border-bottom: 20rpx;
  margin-bottom: 20rpx;
  // padding-bottom: 30rpx;
  position: relative;
  .goods-flex-s {
    display: flex;
    padding: 20rpx;
    .goods-img {
      flex-shrink: 0;
      width: 236rpx;
      height: 236rpx;
      image {
        width: 100%;
        height: 100%;
        border-radius: 10rpx;
      }
    }
  }
  .goods-info {
    flex: 1;
    padding-left: 20rpx;
    width: 0;
    display: flex;
    flex-direction: column;
    .goods-sales-wrapper {
      display: flex;
      flex: 1;
      flex-direction: column;
      justify-content: flex-end;

      .goods-sales {
        font-size: 24rpx;
        color: #999;
        margin-top: 10rpx;
      }
      .goods-price {
        color: #f82c1a;
        margin-top: 10rpx;
        font-style: 22rpx;
        margin-left: -7rpx;
        .price-symbol {
          font-size: 22rpx;
        }
        span {
          font-size: 36rpx;
          font-weight: bold;
        }
      }
      .goods-price1 {
        color: #999;
        font-size: 10px;
        margin-left: -7rpx;
        span {
          font-size: 10rpx;
        }
      }
    }
  }
}

.goods-sort {
  padding-bottom: 130rpx;
}

.swiper-s {
  height: 495rpx;
}

.goods-lists {
  width: 340rpx;
  margin-bottom: 0rpx;
  margin-left: 20rpx;
}

.goods_content {
  display: flex;
  flex-direction: column;
  padding: 0;
  flex-wrap: wrap;
}

.price {
  height: 40rpx;
  line-height: 40rpx;
  background: #fde9e9;
  border-radius: 14rpx;
  color: #e7141a;
  font-size: 22rpx;
  text-align: center;
  width: max-content;
  padding: 0 10rpx;
  margin: 0 auto;
}

.goods-cen {
  display: flex;
  margin-top: 20rpx;
  gap: 20rpx;
  // justify-content: space-between;
}

.goods-list {
  // display: flex;
  width: 33%;
}

.goods-content {
  width: 100%;
  height: 200rpx;
  text-align: center;

  .goods {
    image {
      width: 100%;
      height: 200rpx;
    }
  }
}

.goods-flexs {
  .goods-view {
    position: relative;
    // width: 302rpx; // height: 180rpx;
    // margin-left: 20rpx;
    // background: #ffffff;
    border-radius: 15rpx;
    padding: 0 20rpx;
    margin-bottom: 20rpx;

    .goods-top {
      z-index: 1;
      position: relative;
      display: flex;

      .title {
        color: #333;
        font-size: 32rpx;
        font-weight: bold;
      }

      .lables {
        height: 28rpx;
        background: #f82c1a;
        border-radius: 10rpx;
        line-height: 24rpx;
        font-size: 22rpx;
        padding: 5rpx 15rpx;
        color: #fff;
        max-width: 100rpx;
        margin: 5rpx 0 0 10rpx;
      }
    }
  }

  .lefts {
    margin-left: 15rpx;
  }
}

:v-deep .swiper-s .swiper-items uni-image {
  height: 495rpx;
}

.swiper-item {
  height: 300rpx;
  text-align: center;
  // padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
  image {
    // border-radius: 24rpx;
    height: 300rpx;
    width: 100%;
  }
}

.banner {
  // padding: 30rpx 0 0 0;
  text-align: center;
  width: 100%;
  margin-bottom: 10rpx;
}

.changeLanguages {
  position: absolute;
  right: 0rpx;
  top: 45rpx;
}

.select-text {
  display: flex;
  margin-right: 20px;
}

.selIcon {
  width: 40rpx;
  height: 40rpx;
}

.paswwrod_btn {
  color: #666666;
  font-size: 26rpx;
  margin: 40rpx auto;
  text-align: center;
}

page {
  background-color: #f2f2f2;
}

.index-left {
  font-weight: bold;

  .english {
    font-size: 24rpx;
    color: #333;
  }

  .text {
    font-size: 30rpx;
    color: #333;
    margin-top: 2rpx;
    letter-spacing: 16rpx;
  }
}

.index-top {
  // background: url('~@/static/images/tBgd.jpg') no-repeat;
  background-size: 100% 100%;
  // padding: 30rpx 20rpx; // height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 20rpx;
  .index_t {
    padding: 30rpx 20rpx;
  }
}
.index-top1 {
  background: url('~@/static/images/tBgd.jpg') no-repeat;
  background-size: 100% 100%;
  // padding: 30rpx 20rpx; // height: 100rpx;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  .index_t {
    padding: 30rpx 20rpx;
  }
}

.index-right {
  display: flex;
}

.kf_A {
  position: fixed;
  background: rgba(256, 256, 256, 0.8);
  width: 62px;
  // height: 60px;
  z-index: 10;
  right: 40rpx;
  top: 11%;
  border-radius: 10px;
  text-align: center;
  padding: 20rpx 0;
}

.kf {
  image {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 10rpx;
  }

  font-size: 10px;
  color: #333333;
}
.fly {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #eee;
  opacity: 0.5;
  z-index: 1;
}

// 简洁实用的公告样式
.notice-wrapper {
  margin-bottom: 20rpx;
  // border-radius: 12rpx;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.08);
  border: 1rpx solid #f0f0f0;
}

.clean-notice-item {
  display: flex;
  padding: 16rpx 20rpx;
  background: #fff;
  margin: 0;
  height: calc(100% - 32rpx);
  width: 100%;
  align-items: center;
  .notice-icon {
    margin-right: 16rpx;
    flex-shrink: 0;
  }

  .notice-content {
    flex: 1;
    display: flex;
    justify-content: space-between;
    .notice-text {
      color: #333;
      font-size: 26rpx;
      font-weight: 500;
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      word-break: break-word;
    }

    .notice-time {
      color: #999;
      font-size: 22rpx;
      margin-top: 8rpx;
      display: block;
    }
  }

  .notice-arrow {
    color: #ccc;
    font-size: 32rpx;
    margin-left: 16rpx;
    margin-top: 8rpx;
    flex-shrink: 0;
  }
}

.index-left {
  font-weight: bold;

  .english {
    font-size: 24rpx;
    color: #333;
  }

  .text {
    font-size: 30rpx;
    color: #333;
    margin-top: 2rpx;
    letter-spacing: 16rpx;
  }
}

.index-top {
  // background: url('~@/static/images/tBgd.jpg') no-repeat;
  background-size: 100% 100%;
  // padding: 30rpx 20rpx; // height: 100rpx;
  background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 20rpx;
  .index_t {
    padding: 30rpx 20rpx;
  }
}
.index-top1 {
  background: url('~@/static/images/tBgd.jpg') no-repeat;
  background-size: 100% 100%;
  // padding: 30rpx 20rpx; // height: 100rpx;
  // background-color: #fff;
  display: flex;
  justify-content: space-between;
  position: fixed;
  z-index: 10;
  width: 100%;
  height: 100%;
  .index_t {
    padding: 30rpx 20rpx;
  }
}

.index-right {
  display: flex;
}

.kf_A {
  position: fixed;
  background: rgba(256, 256, 256, 0.8);
  width: 62px;
  // height: 60px;
  z-index: 10;
  right: 40rpx;
  top: 11%;
  border-radius: 10px;
  text-align: center;
  padding: 20rpx 0;
}

.kf {
  image {
    width: 48rpx;
    height: 48rpx;
    margin-bottom: 10rpx;
  }

  font-size: 10px;
  color: #333333;
}
.fly {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  background: #eee;
  opacity: 0.5;
  z-index: 1;
}

// 动画定义
@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  50% {
    transform: scale(1.1);
    opacity: 0.3;
  }
  100% {
    transform: scale(1);
    opacity: 0.7;
  }
}

@keyframes arrow-bounce {
  0%,
  100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(6rpx);
  }
}

@keyframes dot-fade {
  0%,
  100% {
    opacity: 0.4;
  }
  50% {
    opacity: 1;
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.recommend-header {
  padding: 0rpx;
  .recommend-title {
    display: flex;
    align-items: center;
    margin-bottom: 8rpx;

    .title-icon {
      font-size: 28rpx;
      // margin-right: 12rpx;
      color: #ff6b6b;
    }

    .title-text {
      color: #333;
      font-size: 28rpx;
      font-weight: bold;
    }
  }

  .recommend-subtitle {
    color: #999;
    font-size: 24rpx;
    margin-left: 40rpx;
  }
}

.recommend-swiper-container {
  background: #fff;
}

.recommend-item {
  display: block;
  padding: 8px 0;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
  width: 100%;
}
.recommend-item:last-child {
  border-bottom: none;
}
.recommend-item:active {
  background-color: #f8f9fa;
}

.recommend-item-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 0;
  margin-bottom: 10px;
  position: relative;
  background-color: #f0f0f0;
}
.recommend-item-image image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recommend-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #de3932;
  color: #ffffff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 1;
}

.recommend-item-content {
  padding: 0 4px;
}

.recommend-item-name {
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-item-price {
  display: flex;
  align-items: baseline;
}
.recommend-item-price .price-symbol {
  color: #de3932;
  font-size: 12px;
  margin-right: 2px;
}
.recommend-item-price .price-value {
  color: #de3932;
  font-size: 16px;
  font-weight: bold;
}

.recommend-arrow {
  display: none;
}

// Styles for New Product List
.main-product-list-section {
  margin: 20rpx;
  padding-bottom: 20rpx;
}

.section-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  padding: 18rpx 24rpx;
  text-align: left;
  // background: #f8f9fa;
  border-bottom: 1rpx solid #e9ecef;
}

.product-grid {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.product-card {
  background: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  position: relative;

  .product-image {
    display: block;
    width: 100%;
    height: 200px;
    object-fit: cover;
    background-color: #f0f0f0;
  }

  .product-info {
    padding: 12px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    background-color: #f7f8fa;
  }

  .product-name {
    font-size: 15px;
    color: #2d3748;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 6px;
    min-height: calc(15px * 1.4 * 2);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .product-tagline {
    font-size: 22rpx;
    color: #999;
    margin-bottom: 8rpx;
    line-height: 1.3;
  }

  .product-price-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
  }

  .product-price {
    color: #de3932;
    font-size: 32rpx;
    font-weight: bold;
    .price-symbol {
      font-size: 22rpx;
      margin-right: 2rpx;
    }
  }

  .buy-now-button {
    background-color: transparent;
    color: #005bac;
    border: 1px solid #005bac;
    padding: 7px 12px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    text-align: center;
    transition:
      background-color 0.2s,
      color 0.2s;
  }
  .buy-now-button:active {
    background-color: #e6f0fa;
    color: #005bac;
  }
}

.load-more-container {
  margin-top: 30rpx;
  text-align: center;
  .load-more-button {
    background-color: #fff;
    color: #333;
    border: 1px solid #eee;
    padding: 16rpx 40rpx;
    font-size: 28rpx;
    border-radius: 40rpx;
    display: inline-block;
    transition: background-color 0.2s;
    &:active {
      background-color: #f0f0f0;
    }
  }
}

.hot-sellers-card-wrapper {
  margin-top: 20rpx;
  background: #fff;
  // border-radius: 16rpx;
  overflow: hidden;
  // box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
}

/* --- 精选推荐模块样式 --- */

/* 模块容器 */
.recommend-section {
  background-color: #ffffff;
  padding: 20rpx;
}

/* 模块标题 */
.recommend-title {
  display: flex;
  align-items: center;
  margin-bottom: 0;
}

.recommend-title .title-icon {
  font-size: 16px;
  color: #005bac;
  margin-right: 6px;
}

.recommend-title .title-text {
  color: #222222;
  font-size: 18px;
  font-weight: 600;
}

/* 副标题 (如果存在且需要调整) */
.recommend-subtitle {
  color: #777777;
  font-size: 13px;
  margin-left: 0;
  padding-left: 22px;
}

/* 单个推荐商品项 */
.recommend-item {
  display: block;
  padding: 8px 0;
  background-color: #fff;
  border-bottom: 1px solid #f0f0f0;
  transition: background-color 0.2s ease;
}
.recommend-item:last-child {
  border-bottom: none;
}
.recommend-item:active {
  background-color: #f8f9fa;
}

.recommend-item-image {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 6px;
  overflow: hidden;
  margin-right: 0;
  margin-bottom: 10px;
  position: relative;
  background-color: #f0f0f0;
}
.recommend-item-image image {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.recommend-badge {
  position: absolute;
  top: 0px;
  right: 0px;
  background-color: #de3932;
  color: #ffffff;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 6px;
  z-index: 1;
}

.recommend-item-content {
  padding: 0 4px;
}

.recommend-item-name {
  color: #333333;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 4px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.recommend-item-price {
  display: flex;
  align-items: baseline;
}
.recommend-item-price .price-symbol {
  color: #de3932;
  font-size: 12px;
  margin-right: 2px;
}
.recommend-item-price .price-value {
  color: #de3932;
  font-size: 16px;
  font-weight: bold;
}

.recommend-arrow {
  display: none;
}

/* 如果 simple-vertical-swiper 的高度需要适配内容 */
.recommend-swiper-container {
  /* 如果 simple-vertical-swiper 高度是固定的，比如 :height="140" (rpx/px?)
     那么内部 recommend-item 的数量和padding需要仔细计算以避免显示问题。
     这里假设 simple-vertical-swiper 内部可以正确处理其子项的布局。
     如果swiper高度导致内容显示不全，可能需要调整swiper的height参数，
     或者调整recommend-item的padding/margin。
  */
}

/* New Notice Popup Styles */
.notice-popup-content-wrapper {
  padding: 20rpx;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  // max-height: 80vh; /* Ensure popup doesn't get too tall */
}

.notice-popup-swiper {
  width: 100%;
  height: 65vh; /* Adjust height as needed */
  margin-bottom: 20rpx;
}

.notice-popup-swiper-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Align content to the top */
  box-sizing: border-box;
  padding: 0 10rpx;
}

.notice-popup-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
  text-align: center;
  width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notice-popup-scroll-content {
  width: 100%;
  height: calc(65vh - 80rpx); /* Adjust based on title height and padding */
  box-sizing: border-box;
  color: #555;
  font-size: 28rpx;
  line-height: 1.6;
}

.notice-popup-footer {
  margin-top: 20rpx;
  text-align: center;
  width: 100%;
}

.close-notice-button {
  background-color: #cccccc; /* Disabled color */
  color: #666666;
  padding: 18rpx 40rpx;
  border-radius: 40rpx;
  font-size: 28rpx;
  border: none;
  width: 80%;
  transition: background-color 0.3s ease;
}

.close-notice-button.button-enabled {
  background-color: #de3932; /* Enabled color (theme red) */
  color: white;
  cursor: pointer;
}

.close-notice-button:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}
/* End of New Notice Popup Styles */
</style>
