cyy-vue-material 7.0.19 → 7.0.21

package/src/package/cyy-ArsenalActivity/cyy-ArsenalActivity.vue

@@ -1,820 +1,820 @@
-<template>
-  <div>
-    <div v-if="activityCss(secGoodList) === 0 && !lowCode">
-     <!-- 小程序没活动不显示任何内容 -->
-    </div>
-    <div
-      v-else
-      class="secKill"
-      :style="{
-        backgroundColor: props.backgroundColor,
-        marginTop: `${props.marginTop}px`,
-        marginBottom: `${props.marginBottom}px`,
-      }"
-    >
-      <!-- secKill--tit -->
-      <div class="secKill--tit">
-        <div class="title">
-          <img v-if="props.activityType === 0" src="../../static/gift@2x.png" alt="" style="width: 16px; height: 16px" />
-          <img v-if="props.activityType === 1" src="../../static/clock@2x.png" alt="" style="width: 16px; height: 16px" />
-          <div style="font-size: 14px; font-family: Helvetica; color: #1c2130; line-height: 17px; margin-left: 5px; margin-right: 5px">
-            {{ props.title }}
-          </div>
-          <template v-if="lowCode">
-            <uContDown v-if="props.countDown === 0" :timestamp="minTime" color="#fff" separator-color="#EB2B27" font-size="20" bg-color="#EB2B27"></uContDown>
-          </template>
-          <template v-else>
-            <u-count-down
-              v-if="props.countDown === 0"
-              :timestamp="minTime"
-              color="#fff"
-              separator-color="#EB2B27"
-              font-size="20"
-              bg-color="#EB2B27"
-            ></u-count-down>
-          </template>
-          <!-- <div class="changeOnce" @click="changeOneChange">换一换</div> -->
-        </div>
-        <div class="more">
-          <div class="" @click="goSecList">{{ props.subTitle }}</div>
-          <div class="img">
-            <img :lazy-load="true" src="../../static/arrow.png" mode="" style="width: 100%; height: 100%" @click="goSecList"/>
-          </div>
-        </div>
-      </div>
-      <img v-if="props.activityImg" @click="goSecList" :lazy-load="true" :src="props.activityImg" style="width: 100%;margin-bottom: 10px;" mode="" />
-      <!-- secKill--center -->
-      <!-- 一个 -->
-      <div v-if="activityCss(secGoodList) === 1">
-        <div v-for="(item, index) in secGoodList" :key="index">
-          <div class="secKill-One" v-for="(good, indexG) in item.rsSkuReDomainList" :key="indexG" @click="gosecGoodsDetail(good, item)">
-            <div class="soneLeft">
-              <img :lazy-load="true" :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''" mode="" />
-            </div>
-            <div class="soneRight">
-              <div class="soneRightA">{{ good.goodsName }}</div>
-              <div class="soneRightB" v-if="props.activityType === 0">
-                <uLineProgress active-color="#EB2B27" inactive-color="#FCE7E8" :percent="diffFn(good)" height="10" :show-percent="false"></uLineProgress>
-                <div v-if="lowCode" style="font-size: 11px; color: #595959; margin-left: 4px; line-height: 5px">剩{{ good.goodsSupplynum || 0 }}件</div>                
-                <div v-else style="font-size: 11px; color: #595959; margin-left: 4px; line-height: 22px">剩{{ good.goodsSupplynum || 0 }}件</div>
-              </div>
-              <div class="soneRightC">
-                <div class="priceC">
-                  <span style="color: #ff9745">{{'￥' +  good.pricesetNprice}}</span>
-                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1'>
-                    {{good.pricesetMakeprice }}
-                  </span>
-                </div>
-                <div class="dataStateButton">
-                  <span
-                    :style="{
-                      backgroundColor: btnDataStateColor(btnDataState(item, good)),
-                    }"
-                  >
-                    {{ btnDataState(item, good) }}
-                  </span>
-                </div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 两个 -->
-      <div class="secKill-all" v-if="activityCss(secGoodList) === 2" :class="{ fel: true }">
-        <div class="secKill--center" v-for="(item, index) in secGoodList" :key="index">
-          <div
-            :class="{ goodsDetail3: activityCss(secGoodList) === 3, goodsDetail2: activityCss(secGoodList) === 2 }"
-            v-for="(good, indexG) in item.rsSkuReDomainList"
-            :key="indexG"
-            @click="gosecGoodsDetail(good, item)"
-          >
-            <img
-              :class="{ bigimg3: activityCss(secGoodList) === 3, bigimg2: activityCss(secGoodList) === 2 }"
-              :lazy-load="true"
-              :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''"
-              mode=""
-            />
-            <div class="secKill-goodsName text-common">
-              {{ good.goodsName }}
-            </div>
-            <div class="price">
-              <div style="display: flex">
-                <div class="now-price-common">
-                  <span style="color: #f53a50">
-                    {{'￥' + good.pricesetNprice }}
-                  </span>
-                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1'>
-                    {{good.pricesetMakeprice }}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div class="dataStateButton">
-              <span
-                :style="{
-                  backgroundColor: btnDataStateColor(btnDataState(item, good)),
-                }"
-              >
-                {{ btnDataState(item, good) }}</span
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-      <!-- 三个 -->
-      <div class="secKill-all" v-if="activityCss(secGoodList) === 3" :class="{ overflowX: true }">
-        <div class="secKill--center" v-for="(item, index) in secGoodList" :key="index">
-          <div
-            :class="{ goodsDetail3: activityCss(secGoodList) === 3, goodsDetail2: activityCss(secGoodList) === 2 }"
-            v-for="(good, indexG) in item.rsSkuReDomainList"
-            :key="indexG"
-            @click="gosecGoodsDetail(good, item)"
-          >
-            <img
-              :class="{ bigimg3: activityCss(secGoodList) === 3, bigimg2: activityCss(secGoodList) === 2 }"
-              :lazy-load="true"
-              :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''"
-              mode=""
-            />
-            <div class="secKill-goodsName text-common">
-              {{ good.goodsName }}
-            </div>
-            <div class="price">
-              <div style="display: flex">
-                <div class="now-price-common">
-                  <span style="color: #f53a50">
-                    {{'￥' + good.pricesetNprice }}
-                  </span>
-                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1' >
-                    {{good.pricesetMakeprice }}
-                  </span>
-                </div>
-              </div>
-            </div>
-            <div class="dataStateButton">
-              <span
-                :style="{
-                  backgroundColor: btnDataStateColor(btnDataState(item, good)),
-                }"
-                >{{ btnDataState(item, good) }}</span
-              >
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { isLc, getUrl } from "../../utils/index.js";
-import { fetchPost } from "../../api/http.js";
-import { queryPromotionPageForC, queryCouponBatchPage, queryPromotionPageGroupBuying, getCouponBatchByCode, getPromotions } from "../../api/index.js";
-import uContDown from "./components/u-cont-down.vue";
-import uLineProgress from "./components/u-line-progress.vue";
-import { query } from "../../api/urlQuery.js";
-export default {
-  name: "cyy-ArsenalActivity",
-  props: {
-    props: {
-      activityType: Number, //活动类型
-      countDown: Number, //倒计时
-      linePriceFlag: Number, // 是否显示划线价
-      crossedPrice: Number, //划线价格
-      title: String, //标题
-      subTitle: String, //副标题
-      backgroundColor: String, //背景颜色
-      marginTop: Number, //上边距
-      marginBottom: Number, //下边距
-      activityList: Array, //选择中的活动
-      activityImg: String, //选择图片
-    },
-  },
-  components: {
-    uContDown,
-    uLineProgress,
-  },
-  data() {
-    return {
-      lowCode: isLc,
-      secGoodList: [],
-      domainNameUrl: "",
-      changeNum: 0 ,
-    };
-  },
-  mounted() {
-    this.domainNameUrl = getUrl(this);
-    let that = this;
-    this.getSecGoodList(that);
-    // this.getIsLc();
-  },
-  computed: {
-    btnDataStateColor() {
-      return (item) => {
-        if (item === "已终止" || item === "已抢空") {
-          return "#D7D7D7";
-        }
-        if (item === "即将开始") {
-          return "#F59A23";
-        }
-        return "#ed4444";
-      };
-    },
-    btnDataState() {
-      return (item, good) => {
-        if ([-1, 2, 6].includes(item.dataState)) {
-          return "已终止";
-        } else if ([1].includes(item.dataState)) {
-          if (good.goodsSupplynum === 0) {
-            return "已抢空";
-          }
-          return "立即购买";
-        } else if ([4].includes(item.dataState)) {
-          return "即将开始";
-        }
-      };
-    },
-    getPrice() {
-      return (item) => {
-        if (item.pricesetType == "2" || item.pricesetType == "4") {
-          return "¥" + item.pricesetNprice;
-        } else if (item.pricesetType == "3") {
-          return item.pricesetRefrice + "里程";
-        } else {
-          return item.pricesetNprice;
-        }
-      };
-    },
-    activityCss() {
-      return (val) => {
-        if (!val.length) {
-          return 0;
-        }
-        if (val.length === 1) {
-          return 1;
-        }
-        if (val.length === 2) {
-          return 2;
-        }
-        if (val.length >= 3) {
-          return 3;
-        }
-        return 0;
-      };
-    },
-    diffFn() {
-      return (val) => {
-        if (val) {
-          return ((val.goodsAhnum - val.goodsSupplynum) / val.goodsAhnum) * 100;
-        }
-        return "";
-      };
-    },
-    // 获取最小时间
-    minTime() {
-      let arr = [];
-      let flagArr = this.secGoodList.map(item=>{return item.dataState})
-      if (flagArr.includes(1)) {
-        this.secGoodList.forEach((res) => {
-          if (res.dataState === 1) {
-              arr.push(res.gmtModified);  
-          }
-        });
-      } else {
-        this.secGoodList.forEach((res) => {
-          if (res.dataState === 4) {
-              arr.push(res.gmtCreate)  
-          } else {
-              arr.push(res.gmtModified);
-          }
-        });
-      }
-      for (let j = 0; j < arr.length - 1; j++) {
-        for (let i = 0; i < arr.length - 1; i++) {
-          if (arr[i] > arr[i + 1]) {
-            let temp = arr[i];
-            arr[i] = arr[i + 1];
-            arr[i + 1] = temp;
-          }
-        }
-      }
-      return arr[0];
-    },
-    setPromotionDates() {
-      return (value, item) => {
-        let time = (new Date(item.promotionBegintime) - Date.parse(new Date())) / 1000;
-        let endtime = (new Date(item.promotionEndtime) - Date.parse(new Date())) / 1000;
-        if (time > 0) {
-          value.gmtCreate = time;
-        } else {
-          value.gmtCreate = 0;
-        }
-        if (endtime > 0) {
-          value.gmtModified = endtime;
-        } else {
-          value.gmtModified = 0;
-        }
-        return { gmtCreate: value.gmtCreate, gmtModified: value.gmtModified };
-      };
-    },
-  },
-  methods: {
-    // changeOneChange() {
-    //   this.getSecGoodList(this, "change");
-    // },
-    // 秒杀团购c端
-    async getSecGoodList(that, change = null) {
-
-      const handleResponse = (res, isSecKill = false) => {
-        if (res && (isSecKill ? res.rows : res.list) && (isSecKill ? res.rows.length : res.list.length)) {
-          const data = isSecKill ? res.rows : res.list;
-          data.slice(0, 3).forEach((item) => {
-            let time = (item.promotionBegintime - Date.parse(new Date())) / 1000;
-            let endtime = (item.promotionEndtime - Date.parse(new Date())) / 1000;
-            if (time > 0) {
-              item.gmtCreate = time;
-            } else {
-              item.gmtCreate = 0;
-            }
-            if (endtime > 0) {
-              item.gmtModified = endtime;
-            } else {
-              item.gmtModified = 0;
-            }
-          });
-          this.secGoodList = data;
-        } else { 
-          this.secGoodList = [];
-        }
-      };
-
-      // 秒杀
-      if (this.props.activityType === 0) {
-        let couponBatchCode = "";
-        console.log(this.props?.activityList,'选择活动=====秒杀')
-        if (this.props?.activityList == 'all') {
-          couponBatchCode = null
-        } else {
-          if (this.props?.activityList?.length) {
-            couponBatchCode = this.props?.activityList.join(',')
-          }
-        }
-        
-        // if (change === "change" && this.props?.activityList.length > 0) {
-        //   // 定义一个函数来获取一个不等于上一次索引的随机索引
-        //   const getRandomIndex = (array, excludeIndex) => {
-        //     let randomIndex;
-        //     do {
-        //       randomIndex = Math.floor(Math.random() * array.length);
-        //     } while (randomIndex === excludeIndex);
-        //     return randomIndex;
-        //   };
-
-        //   // 调用函数，传入上一次的索引值
-        //   this.changeNum = getRandomIndex(this.props?.activityList, this.changeNum);
-        //   couponBatchCode = this.props?.activityList[this.changeNum];
-        // } else {
-        //   // 如果不满足条件或者活动列表为空，则默认选择第一项
-        //   couponBatchCode = this.props?.activityList[0];
-        // }
-        if (isLc) {
-          let url = "";
-          if (couponBatchCode) {
-            url = `${queryPromotionPageForC}?pbCode=0007&dataStateStr=1,4&rows=200&page=1&couponBatchCode=${couponBatchCode}&channelCode=${query.channelCode}&membercode=${query.membercode}`;
-          } else {
-            // 默认查
-            this.secGoodList = [];
-            // return
-            url = `${queryPromotionPageForC}?pbCode=0007&dataStateStr=1,4&rows=200&page=1&orderStr=PROMOTION_ENDTIME asc&membercode=${query.membercode}&channelCode=${query.channelCode}`;
-          }
-          const { list } = await fetchPost(url);
-          handleResponse({ list });
-        } else {
-          let params = {
-            pbCode: "0007",
-            page: 1,
-            rows: 200,
-            dataStateStr: "1,4",
-            couponBatchCode,
-          };
-          if (!couponBatchCode) {
-            this.secGoodList = [];
-            // return;
-            params.dataStateStr = "1,4";
-            params.orderStr = "PROMOTION_ENDTIME asc";
-          } 
-          console.log(params,'params秒杀')
-          that.http.post(queryPromotionPageForC, params).then((res) => {
-            handleResponse(res);
-          });
-        }
-      }
-
-      // 团购
-      if (this.props.activityType === 1) {
-        let promotionCode = ""
-        console.log(this.props?.activityList,'选择活动------团购')
-        if (this.props?.activityList == 'all') {
-          promotionCode = null
-        } else {
-          if (this.props?.activityList?.length) {
-            promotionCode = this.props?.activityList.join(',')
-          }
-        }
-        // if (change === "change" && this.props?.activityList.length > 0) {
-        //   // 定义一个函数来获取一个不等于上一次索引的随机索引
-        //   const getRandomIndex = (array, excludeIndex) => {
-        //     let randomIndex;
-        //     do {
-        //       randomIndex = Math.floor(Math.random() * array.length);
-        //     } while (randomIndex === excludeIndex);
-        //     return randomIndex;
-        //   };
-
-        //   // 调用函数，传入上一次的索引值
-        //   this.changeNum = getRandomIndex(this.props?.activityList, this.changeNum);
-        //   promotionCode = this.props?.activityList[this.changeNum];
-        // } else {
-        //   // 如果不满足条件或者活动列表为空，则默认选择第一项
-        //   promotionCode = this.props?.activityList[0];
-        // }
-        if (isLc) {
-          let url = "";
-          if (promotionCode) {
-            url = `${queryPromotionPageForC}?pbCode=0008&dataStateStr=1,4&rows=200&page=1&promotionCode=${promotionCode}&channelCode=${query.channelCode}&membercode=${query.membercode}`;
-          } else {
-            this.secGoodList = [];
-            // return
-            url = `${queryPromotionPageForC}?pbCode=0008&dataStateStr=1,4&rows=200&page=1&orderStr=PROMOTION_ENDTIME asc&membercode=${query.membercode}&channelCode=${query.channelCode}`;
-          }
-          const { rows } = await fetchPost(url);
-          handleResponse({ rows }, true);
-        } else {
-          let params = {
-            pbCode: "0008",
-            dataStateStr: "1,4",
-            page: 1,
-            rows: 200,
-            promotionCode,
-          };
-          if (!promotionCode) {
-            this.secGoodList = [];
-            // return
-            params.dataStateStr = "1,4";
-            params.orderStr = "PROMOTION_ENDTIME asc";
-          } 
-          console.log(params,'params团购')
-          that.http.post(queryPromotionPageForC, params).then(async (res) => {
-            if (res && res.rows) {
-              if (this.page === 1 && res.rows.length === 0) {
-                this.seckillGoodsList = [];
-              } else {
-                const data = res.rows.map((item) => {
-                  let time = (item.promotionBegintime - Date.parse(new Date())) / 1000;
-                  let endtime = (item.promotionEndtime - Date.parse(new Date())) / 1000;
-                  if (time > 0) {
-                    item.gmtCreate = time;
-                  } else {
-                    item.gmtCreate = 0;
-                  }
-                  if (endtime > 0) {
-                    item.gmtModified = endtime;
-                  } else {
-                    item.gmtModified = 0;
-                  }
-                  if (item.promotionState == 0) {
-                    this.$set(item, "PeopleNum", item.couponOnceNump);
-                  }
-                  return item;
-                });
-                const tempList = data.filter((item) => item.promotionState == 0);
-                this.secGoodList = tempList;
-              }
-            }
-          });
-        }
-      }
-    },
-    goSecList() {
-      this.$emit("goSecList", this.props);
-    },
-    gosecGoodsDetail(good, item) {
-      let goodsType;
-      if (this.props.activityType === 0) {
-        goodsType = 26;
-      }
-      if (this.props.activityType === 1) {
-        goodsType = 24;
-      }
-      this.$emit("gosecGoodsDetail", good.skuNo, item.gmtModified, item.promotionCode, item.promotionFrequency, item.inventory, goodsType);
-    },
-  },
-};
-</script>
-
-<style lang="less" scoped>
-.secKill {
-  margin: 0 auto;
-  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
-  border-radius: 7px;
-  padding: 13.5px 10px 0;
-
-  .soon {
-    width: 64px;
-    height: 24px;
-    background: linear-gradient(90deg, #ff9d0d 0%, #eb2b27 100%);
-    border-radius: 12px;
-    font-size: 12px;
-    font-family: PingFangSC-Medium, PingFang SC;
-    font-weight: 500;
-    color: #ffffff;
-    text-align: center;
-    line-height: 24px;
-  }
-
-  .secKill--tit {
-    width: 100%;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 10px;
-
-    .title {
-      display: flex;
-      align-items: center;
-      .changeOnce {
-        color: #439fff;
-        font-size: 10px;
-        margin-left: 6px;
-      }
-    }
-
-    .more {
-      font-size: 12px;
-      font-family: PingFangSC-Regular, PingFang SC;
-      font-weight: 400;
-      color: #595959;
-      display: flex;
-
-      .img {
-        margin-left: 3px;
-        width: 5.5px;
-        height: 9px;
-      }
-    }
-  }
-
-  .secKill-all {
-    display: flex;
-    .secKill--center {
-      margin-right: 8px;
-      margin-bottom: 8px;
-      background: #ffffff;
-      border-radius: 8px;
-      padding: 8px 8px;
-      position: relative;
-
-      .secKill-goodsName {
-        height: 34px;
-        font-size: 12px;
-        font-family: PingFangSC-Regular, PingFang SC;
-        font-weight: 400;
-        color: #000000;
-        line-height: 17px;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        display: -webkit-box;
-        -webkit-line-clamp: 2;
-        line-clamp: 2;
-        -webkit-box-orient: vertical;
-      }
-      .dataStateButton {
-        display: flex;
-        justify-content: center;
-        margin-top: 5px;
-        span {
-          font-size: 10px;
-          color: #ffffff;
-          border-radius: 17px;
-          padding: 5px 12px;
-        }
-      }
-    }
-  }
-  .secKill--bottom {
-    display: flex;
-    .left {
-      width: 164px;
-      height: 255px;
-      border-right: 2px solid #f6f6f6;
-      padding: 0 7.5px;
-
-      .bigimgs {
-        width: 100px;
-        height: 100px;
-        margin: 0 auto;
-      }
-
-      .goodsName {
-        width: 153px;
-        font-size: 13px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
-        color: #262626;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        margin-bottom: 8px;
-        height: 37.5px;
-        margin-top: 7.5px;
-      }
-
-      .price {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-
-    .left:nth-child(2) {
-      border: none;
-    }
-
-    .right {
-      width: 164px;
-      height: 255px;
-      padding-left: 7.5px;
-
-      .bigimg {
-        width: 153px;
-        height: 118px;
-        background-color: rgba(0, 0, 0, 0.3);
-      }
-
-      .goodsName {
-        width: 153px;
-        font-size: 13px;
-        font-family: PingFangSC-Semibold, PingFang SC;
-        font-weight: 600;
-        color: #262626;
-        display: -webkit-box;
-        -webkit-box-orient: vertical;
-        -webkit-line-clamp: 2;
-        overflow: hidden;
-        margin-bottom: 10px;
-      }
-
-      .price {
-        display: flex;
-        justify-content: space-between;
-        align-items: center;
-      }
-    }
-  }
-}
-.goodsDetail3 {
-  width: 92px;
-  @media (min-width: 390px) and (max-width: 414px) {
-    width: 102px;
-  }
-  @media (min-width: 415px) and (max-width: 630px) {
-    width: 112px;
-  }
-}
-.bigimg3 {
-  width: 90px;
-  height: 90px;
-  @media (min-width: 390px) and (max-width: 414px) {
-    width: 100px;
-  }
-  @media (min-width: 415px) and (max-width: 630px) {
-    width: 110px;
-  }
-}
-.goodsDetail2 {
-  width: 132px;
-  @media (max-width: 320px) {
-    width: 112px;
-  }
-  @media (min-width: 321px) and (max-width: 360px) {
-    width: 122px;
-  }
-  @media (min-width: 361px) and (max-width: 389px) {
-    width: 132px;
-  }
-  @media (min-width: 390px) and (max-width: 410px) {
-    width: 142px;
-  }
-  @media (min-width: 411px) and (max-width: 430px) {
-    width: 152px;
-  }
-  @media (min-width: 431px) and (max-width: 630px) {
-    width: 162px;
-  }
-}
-.bigimg2 {
-  width: 130px;
-  height: 130px;
-  @media (max-width: 320px) {
-    width: 110px;
-    height: 110px;
-  }
-  @media (min-width: 321px) and (max-width: 360px) {
-    width: 120px;
-    height: 120px;
-  }
-  @media (min-width: 361px) and (max-width: 389px) {
-    width: 130px;
-    height: 130px;
-  }
-  @media (min-width: 390px) and (max-width: 410px) {
-    width: 140px;
-    height: 140px;
-  }
-  @media (min-width: 411px) and (max-width: 430px) {
-    width: 150px;
-    height: 150px;
-  }
-  @media (min-width: 431px) and (max-width: 630px) {
-    width: 160px;
-    height: 160px;
-  }
-}
-.overflowX {
-  overflow: hidden;
-  overflow-x: scroll;
-}
-.fel {
-  display: flex;
-  justify-content: space-between;
-}
-.secKill-One {
-  display: flex;
-  padding: 8px;
-  .soneLeft {
-    width: 110px;
-    height: 110px;
-    margin-right: 8px;
-    img {
-      width: 110px;
-      height: 110px;
-      border-radius: 6px;
-    }
-  }
-  .soneRight {
-    width: 100%;
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    .soneRightA {
-      font-family: PingFangSC, PingFang SC;
-      font-weight: 400;
-      font-size: 14px;
-      color: #394259;
-      line-height: 21px;
-      text-align: left;
-      font-style: normal;
-      overflow: hidden;
-      text-overflow: ellipsis;
-      display: -webkit-box;
-      -webkit-box-orient: vertical;
-      -webkit-line-clamp: 2;
-    }
-    .soneRightB {
-      display: flex;
-      justify-content: space-between;
-      .uline {
-        width: 152px;
-        height: 10px;
-        background: #ed4444;
-        border-radius: 3px;
-        opacity: 0.1;
-      }
-    }
-    .soneRightC {
-      display: flex;
-      justify-content: space-between;
-      .priceC {
-        font-family: DINAlternate, DINAlternate;
-        font-weight: bold;
-        font-size: 18px;
-        line-height: 29px;
-        text-align: left;
-        font-style: normal;
-      }
-      .dataStateButton {
-        display: flex;
-        justify-content: center;
-        margin-top: 5px;
-        span {
-          font-size: 10px;
-          color: #ffffff;
-          border-radius: 17px;
-          padding: 5px 12px;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <div>
+    <div v-if="activityCss(secGoodList) === 0 && !lowCode">
+     <!-- 小程序没活动不显示任何内容 -->
+    </div>
+    <div
+      v-else
+      class="secKill"
+      :style="{
+        backgroundColor: props.backgroundColor,
+        marginTop: `${props.marginTop}px`,
+        marginBottom: `${props.marginBottom}px`,
+      }"
+    >
+      <!-- secKill--tit -->
+      <div class="secKill--tit">
+        <div class="title">
+          <img v-if="props.activityType === 0" src="../../static/gift@2x.png" alt="" style="width: 16px; height: 16px" />
+          <img v-if="props.activityType === 1" src="../../static/clock@2x.png" alt="" style="width: 16px; height: 16px" />
+          <div style="font-size: 14px; font-family: Helvetica; color: #1c2130; line-height: 17px; margin-left: 5px; margin-right: 5px">
+            {{ props.title }}
+          </div>
+          <template v-if="lowCode">
+            <uContDown v-if="props.countDown === 0" :timestamp="minTime" color="#fff" separator-color="#EB2B27" font-size="20" bg-color="#EB2B27"></uContDown>
+          </template>
+          <template v-else>
+            <u-count-down
+              v-if="props.countDown === 0"
+              :timestamp="minTime"
+              color="#fff"
+              separator-color="#EB2B27"
+              font-size="20"
+              bg-color="#EB2B27"
+            ></u-count-down>
+          </template>
+          <!-- <div class="changeOnce" @click="changeOneChange">换一换</div> -->
+        </div>
+        <div class="more">
+          <div class="" @click="goSecList">{{ props.subTitle }}</div>
+          <div class="img">
+            <img :lazy-load="true" src="../../static/arrow.png" mode="" style="width: 100%; height: 100%" @click="goSecList"/>
+          </div>
+        </div>
+      </div>
+      <img v-if="props.activityImg" @click="goSecList" :lazy-load="true" :src="props.activityImg" style="width: 100%;margin-bottom: 10px;" mode="" />
+      <!-- secKill--center -->
+      <!-- 一个 -->
+      <div v-if="activityCss(secGoodList) === 1">
+        <div v-for="(item, index) in secGoodList" :key="index">
+          <div class="secKill-One" v-for="(good, indexG) in item.rsSkuReDomainList" :key="indexG" @click="gosecGoodsDetail(good, item)">
+            <div class="soneLeft">
+              <img :lazy-load="true" :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''" mode="" />
+            </div>
+            <div class="soneRight">
+              <div class="soneRightA">{{ good.goodsName }}</div>
+              <div class="soneRightB" v-if="props.activityType === 0">
+                <uLineProgress active-color="#EB2B27" inactive-color="#FCE7E8" :percent="diffFn(good)" height="10" :show-percent="false"></uLineProgress>
+                <div v-if="lowCode" style="font-size: 11px; color: #595959; margin-left: 4px; line-height: 5px">剩{{ good.goodsSupplynum || 0 }}件</div>                
+                <div v-else style="font-size: 11px; color: #595959; margin-left: 4px; line-height: 22px">剩{{ good.goodsSupplynum || 0 }}件</div>
+              </div>
+              <div class="soneRightC">
+                <div class="priceC">
+                  <span style="color: #ff9745">{{'￥' +  good.pricesetNprice}}</span>
+                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1'>
+                    {{good.pricesetMakeprice }}
+                  </span>
+                </div>
+                <div class="dataStateButton">
+                  <span
+                    :style="{
+                      backgroundColor: btnDataStateColor(btnDataState(item, good)),
+                    }"
+                  >
+                    {{ btnDataState(item, good) }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 两个 -->
+      <div class="secKill-all" v-if="activityCss(secGoodList) === 2" :class="{ fel: true }">
+        <div class="secKill--center" v-for="(item, index) in secGoodList" :key="index">
+          <div
+            :class="{ goodsDetail3: activityCss(secGoodList) === 3, goodsDetail2: activityCss(secGoodList) === 2 }"
+            v-for="(good, indexG) in item.rsSkuReDomainList"
+            :key="indexG"
+            @click="gosecGoodsDetail(good, item)"
+          >
+            <img
+              :class="{ bigimg3: activityCss(secGoodList) === 3, bigimg2: activityCss(secGoodList) === 2 }"
+              :lazy-load="true"
+              :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''"
+              mode=""
+            />
+            <div class="secKill-goodsName text-common">
+              {{ good.goodsName }}
+            </div>
+            <div class="price">
+              <div style="display: flex">
+                <div class="now-price-common">
+                  <span style="color: #f53a50">
+                    {{'￥' + good.pricesetNprice }}
+                  </span>
+                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1'>
+                    {{good.pricesetMakeprice }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="dataStateButton">
+              <span
+                :style="{
+                  backgroundColor: btnDataStateColor(btnDataState(item, good)),
+                }"
+              >
+                {{ btnDataState(item, good) }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+      <!-- 三个 -->
+      <div class="secKill-all" v-if="activityCss(secGoodList) === 3" :class="{ overflowX: true }">
+        <div class="secKill--center" v-for="(item, index) in secGoodList" :key="index">
+          <div
+            :class="{ goodsDetail3: activityCss(secGoodList) === 3, goodsDetail2: activityCss(secGoodList) === 2 }"
+            v-for="(good, indexG) in item.rsSkuReDomainList"
+            :key="indexG"
+            @click="gosecGoodsDetail(good, item)"
+          >
+            <img
+              :class="{ bigimg3: activityCss(secGoodList) === 3, bigimg2: activityCss(secGoodList) === 2 }"
+              :lazy-load="true"
+              :src="good.dataPic ? (good.dataPic.indexOf('http') === -1 ? domainNameUrl + good.dataPic : good.dataPic) : ''"
+              mode=""
+            />
+            <div class="secKill-goodsName text-common">
+              {{ good.goodsName }}
+            </div>
+            <div class="price">
+              <div style="display: flex">
+                <div class="now-price-common">
+                  <span style="color: #f53a50">
+                    {{'￥' + good.pricesetNprice }}
+                  </span>
+                  <span style="color: #8c8c8c;text-decoration: line-through;margin-left: 3px;font-size: 11px" v-if='props.linePriceFlag === 1' >
+                    {{good.pricesetMakeprice }}
+                  </span>
+                </div>
+              </div>
+            </div>
+            <div class="dataStateButton">
+              <span
+                :style="{
+                  backgroundColor: btnDataStateColor(btnDataState(item, good)),
+                }"
+                >{{ btnDataState(item, good) }}</span
+              >
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { isLc, getUrl } from "../../utils/index.js";
+import { fetchPost } from "../../api/http.js";
+import { queryPromotionPageForC, queryCouponBatchPage, queryPromotionPageGroupBuying, getCouponBatchByCode, getPromotions } from "../../api/index.js";
+import uContDown from "./components/u-cont-down.vue";
+import uLineProgress from "./components/u-line-progress.vue";
+import { query } from "../../api/urlQuery.js";
+export default {
+  name: "cyy-ArsenalActivity",
+  props: {
+    props: {
+      activityType: Number, //活动类型
+      countDown: Number, //倒计时
+      linePriceFlag: Number, // 是否显示划线价
+      crossedPrice: Number, //划线价格
+      title: String, //标题
+      subTitle: String, //副标题
+      backgroundColor: String, //背景颜色
+      marginTop: Number, //上边距
+      marginBottom: Number, //下边距
+      activityList: Array, //选择中的活动
+      activityImg: String, //选择图片
+    },
+  },
+  components: {
+    uContDown,
+    uLineProgress,
+  },
+  data() {
+    return {
+      lowCode: isLc,
+      secGoodList: [],
+      domainNameUrl: "",
+      changeNum: 0 ,
+    };
+  },
+  mounted() {
+    this.domainNameUrl = getUrl(this);
+    let that = this;
+    this.getSecGoodList(that);
+    // this.getIsLc();
+  },
+  computed: {
+    btnDataStateColor() {
+      return (item) => {
+        if (item === "已终止" || item === "已抢空") {
+          return "#D7D7D7";
+        }
+        if (item === "即将开始") {
+          return "#F59A23";
+        }
+        return "#ed4444";
+      };
+    },
+    btnDataState() {
+      return (item, good) => {
+        if ([-1, 2, 6].includes(item.dataState)) {
+          return "已终止";
+        } else if ([1].includes(item.dataState)) {
+          if (good.goodsSupplynum === 0) {
+            return "已抢空";
+          }
+          return "立即购买";
+        } else if ([4].includes(item.dataState)) {
+          return "即将开始";
+        }
+      };
+    },
+    getPrice() {
+      return (item) => {
+        if (item.pricesetType == "2" || item.pricesetType == "4") {
+          return "¥" + item.pricesetNprice;
+        } else if (item.pricesetType == "3") {
+          return item.pricesetRefrice + "里程";
+        } else {
+          return item.pricesetNprice;
+        }
+      };
+    },
+    activityCss() {
+      return (val) => {
+        if (!val.length) {
+          return 0;
+        }
+        if (val.length === 1) {
+          return 1;
+        }
+        if (val.length === 2) {
+          return 2;
+        }
+        if (val.length >= 3) {
+          return 3;
+        }
+        return 0;
+      };
+    },
+    diffFn() {
+      return (val) => {
+        if (val) {
+          return ((val.goodsAhnum - val.goodsSupplynum) / val.goodsAhnum) * 100;
+        }
+        return "";
+      };
+    },
+    // 获取最小时间
+    minTime() {
+      let arr = [];
+      let flagArr = this.secGoodList.map(item=>{return item.dataState})
+      if (flagArr.includes(1)) {
+        this.secGoodList.forEach((res) => {
+          if (res.dataState === 1) {
+              arr.push(res.gmtModified);  
+          }
+        });
+      } else {
+        this.secGoodList.forEach((res) => {
+          if (res.dataState === 4) {
+              arr.push(res.gmtCreate)  
+          } else {
+              arr.push(res.gmtModified);
+          }
+        });
+      }
+      for (let j = 0; j < arr.length - 1; j++) {
+        for (let i = 0; i < arr.length - 1; i++) {
+          if (arr[i] > arr[i + 1]) {
+            let temp = arr[i];
+            arr[i] = arr[i + 1];
+            arr[i + 1] = temp;
+          }
+        }
+      }
+      return arr[0];
+    },
+    setPromotionDates() {
+      return (value, item) => {
+        let time = (new Date(item.promotionBegintime) - Date.parse(new Date())) / 1000;
+        let endtime = (new Date(item.promotionEndtime) - Date.parse(new Date())) / 1000;
+        if (time > 0) {
+          value.gmtCreate = time;
+        } else {
+          value.gmtCreate = 0;
+        }
+        if (endtime > 0) {
+          value.gmtModified = endtime;
+        } else {
+          value.gmtModified = 0;
+        }
+        return { gmtCreate: value.gmtCreate, gmtModified: value.gmtModified };
+      };
+    },
+  },
+  methods: {
+    // changeOneChange() {
+    //   this.getSecGoodList(this, "change");
+    // },
+    // 秒杀团购c端
+    async getSecGoodList(that, change = null) {
+
+      const handleResponse = (res, isSecKill = false) => {
+        if (res && (isSecKill ? res.rows : res.list) && (isSecKill ? res.rows.length : res.list.length)) {
+          const data = isSecKill ? res.rows : res.list;
+          data.slice(0, 3).forEach((item) => {
+            let time = (item.promotionBegintime - Date.parse(new Date())) / 1000;
+            let endtime = (item.promotionEndtime - Date.parse(new Date())) / 1000;
+            if (time > 0) {
+              item.gmtCreate = time;
+            } else {
+              item.gmtCreate = 0;
+            }
+            if (endtime > 0) {
+              item.gmtModified = endtime;
+            } else {
+              item.gmtModified = 0;
+            }
+          });
+          this.secGoodList = data;
+        } else { 
+          this.secGoodList = [];
+        }
+      };
+
+      // 秒杀
+      if (this.props.activityType === 0) {
+        let couponBatchCode = "";
+        console.log(this.props?.activityList,'选择活动=====秒杀')
+        if (this.props?.activityList == 'all') {
+          couponBatchCode = null
+        } else {
+          if (this.props?.activityList?.length) {
+            couponBatchCode = this.props?.activityList.join(',')
+          }
+        }
+        
+        // if (change === "change" && this.props?.activityList.length > 0) {
+        //   // 定义一个函数来获取一个不等于上一次索引的随机索引
+        //   const getRandomIndex = (array, excludeIndex) => {
+        //     let randomIndex;
+        //     do {
+        //       randomIndex = Math.floor(Math.random() * array.length);
+        //     } while (randomIndex === excludeIndex);
+        //     return randomIndex;
+        //   };
+
+        //   // 调用函数，传入上一次的索引值
+        //   this.changeNum = getRandomIndex(this.props?.activityList, this.changeNum);
+        //   couponBatchCode = this.props?.activityList[this.changeNum];
+        // } else {
+        //   // 如果不满足条件或者活动列表为空，则默认选择第一项
+        //   couponBatchCode = this.props?.activityList[0];
+        // }
+        if (isLc) {
+          let url = "";
+          if (couponBatchCode) {
+            url = `${queryPromotionPageForC}?pbCode=0007&dataStateStr=1,4&rows=200&page=1&couponBatchCode=${couponBatchCode}&channelCode=${query.channelCode}&membercode=${query.membercode}`;
+          } else {
+            // 默认查
+            this.secGoodList = [];
+            // return
+            url = `${queryPromotionPageForC}?pbCode=0007&dataStateStr=1,4&rows=200&page=1&orderStr=PROMOTION_ENDTIME asc&membercode=${query.membercode}&channelCode=${query.channelCode}`;
+          }
+          const { list } = await fetchPost(url);
+          handleResponse({ list });
+        } else {
+          let params = {
+            pbCode: "0007",
+            page: 1,
+            rows: 200,
+            dataStateStr: "1,4",
+            couponBatchCode,
+          };
+          if (!couponBatchCode) {
+            this.secGoodList = [];
+            // return;
+            params.dataStateStr = "1,4";
+            params.orderStr = "PROMOTION_ENDTIME asc";
+          } 
+          console.log(params,'params秒杀')
+          that.http.post(queryPromotionPageForC, params).then((res) => {
+            handleResponse(res);
+          });
+        }
+      }
+
+      // 团购
+      if (this.props.activityType === 1) {
+        let promotionCode = ""
+        console.log(this.props?.activityList,'选择活动------团购')
+        if (this.props?.activityList == 'all') {
+          promotionCode = null
+        } else {
+          if (this.props?.activityList?.length) {
+            promotionCode = this.props?.activityList.join(',')
+          }
+        }
+        // if (change === "change" && this.props?.activityList.length > 0) {
+        //   // 定义一个函数来获取一个不等于上一次索引的随机索引
+        //   const getRandomIndex = (array, excludeIndex) => {
+        //     let randomIndex;
+        //     do {
+        //       randomIndex = Math.floor(Math.random() * array.length);
+        //     } while (randomIndex === excludeIndex);
+        //     return randomIndex;
+        //   };
+
+        //   // 调用函数，传入上一次的索引值
+        //   this.changeNum = getRandomIndex(this.props?.activityList, this.changeNum);
+        //   promotionCode = this.props?.activityList[this.changeNum];
+        // } else {
+        //   // 如果不满足条件或者活动列表为空，则默认选择第一项
+        //   promotionCode = this.props?.activityList[0];
+        // }
+        if (isLc) {
+          let url = "";
+          if (promotionCode) {
+            url = `${queryPromotionPageForC}?pbCode=0008&dataStateStr=1,4&rows=200&page=1&couponBatchCode=${promotionCode}&channelCode=${query.channelCode}&membercode=${query.membercode}`;
+          } else {
+            this.secGoodList = [];
+            // return
+            url = `${queryPromotionPageForC}?pbCode=0008&dataStateStr=1,4&rows=200&page=1&orderStr=PROMOTION_ENDTIME asc&membercode=${query.membercode}&channelCode=${query.channelCode}`;
+          }
+          const { rows } = await fetchPost(url);
+          handleResponse({ rows }, true);
+        } else {
+          let params = {
+            pbCode: "0008",
+            dataStateStr: "1,4",
+            page: 1,
+            rows: 200,
+            promotionCode,
+          };
+          if (!promotionCode) {
+            this.secGoodList = [];
+            // return
+            params.dataStateStr = "1,4";
+            params.orderStr = "PROMOTION_ENDTIME asc";
+          } 
+          console.log(params,'params团购')
+          that.http.post(queryPromotionPageForC, params).then(async (res) => {
+            if (res && res.rows) {
+              if (this.page === 1 && res.rows.length === 0) {
+                this.seckillGoodsList = [];
+              } else {
+                const data = res.rows.map((item) => {
+                  let time = (item.promotionBegintime - Date.parse(new Date())) / 1000;
+                  let endtime = (item.promotionEndtime - Date.parse(new Date())) / 1000;
+                  if (time > 0) {
+                    item.gmtCreate = time;
+                  } else {
+                    item.gmtCreate = 0;
+                  }
+                  if (endtime > 0) {
+                    item.gmtModified = endtime;
+                  } else {
+                    item.gmtModified = 0;
+                  }
+                  if (item.promotionState == 0) {
+                    this.$set(item, "PeopleNum", item.couponOnceNump);
+                  }
+                  return item;
+                });
+                const tempList = data.filter((item) => item.promotionState == 0);
+                this.secGoodList = tempList;
+              }
+            }
+          });
+        }
+      }
+    },
+    goSecList() {
+      this.$emit("goSecList", this.props);
+    },
+    gosecGoodsDetail(good, item) {
+      let goodsType;
+      if (this.props.activityType === 0) {
+        goodsType = 26;
+      }
+      if (this.props.activityType === 1) {
+        goodsType = 24;
+      }
+      this.$emit("gosecGoodsDetail", good.skuNo, item.gmtModified, item.promotionCode, item.promotionFrequency, item.inventory, goodsType);
+    },
+  },
+};
+</script>
+
+<style lang="less" scoped>
+.secKill {
+  margin: 0 auto;
+  box-shadow: 0px 5px 10px 0px rgba(0, 0, 0, 0.1);
+  border-radius: 7px;
+  padding: 13.5px 10px 0;
+
+  .soon {
+    width: 64px;
+    height: 24px;
+    background: linear-gradient(90deg, #ff9d0d 0%, #eb2b27 100%);
+    border-radius: 12px;
+    font-size: 12px;
+    font-family: PingFangSC-Medium, PingFang SC;
+    font-weight: 500;
+    color: #ffffff;
+    text-align: center;
+    line-height: 24px;
+  }
+
+  .secKill--tit {
+    width: 100%;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding-bottom: 10px;
+
+    .title {
+      display: flex;
+      align-items: center;
+      .changeOnce {
+        color: #439fff;
+        font-size: 10px;
+        margin-left: 6px;
+      }
+    }
+
+    .more {
+      font-size: 12px;
+      font-family: PingFangSC-Regular, PingFang SC;
+      font-weight: 400;
+      color: #595959;
+      display: flex;
+
+      .img {
+        margin-left: 3px;
+        width: 5.5px;
+        height: 9px;
+      }
+    }
+  }
+
+  .secKill-all {
+    display: flex;
+    .secKill--center {
+      margin-right: 8px;
+      margin-bottom: 8px;
+      background: #ffffff;
+      border-radius: 8px;
+      padding: 8px 8px;
+      position: relative;
+
+      .secKill-goodsName {
+        height: 34px;
+        font-size: 12px;
+        font-family: PingFangSC-Regular, PingFang SC;
+        font-weight: 400;
+        color: #000000;
+        line-height: 17px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .dataStateButton {
+        display: flex;
+        justify-content: center;
+        margin-top: 5px;
+        span {
+          font-size: 10px;
+          color: #ffffff;
+          border-radius: 17px;
+          padding: 5px 12px;
+        }
+      }
+    }
+  }
+  .secKill--bottom {
+    display: flex;
+    .left {
+      width: 164px;
+      height: 255px;
+      border-right: 2px solid #f6f6f6;
+      padding: 0 7.5px;
+
+      .bigimgs {
+        width: 100px;
+        height: 100px;
+        margin: 0 auto;
+      }
+
+      .goodsName {
+        width: 153px;
+        font-size: 13px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #262626;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        margin-bottom: 8px;
+        height: 37.5px;
+        margin-top: 7.5px;
+      }
+
+      .price {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+
+    .left:nth-child(2) {
+      border: none;
+    }
+
+    .right {
+      width: 164px;
+      height: 255px;
+      padding-left: 7.5px;
+
+      .bigimg {
+        width: 153px;
+        height: 118px;
+        background-color: rgba(0, 0, 0, 0.3);
+      }
+
+      .goodsName {
+        width: 153px;
+        font-size: 13px;
+        font-family: PingFangSC-Semibold, PingFang SC;
+        font-weight: 600;
+        color: #262626;
+        display: -webkit-box;
+        -webkit-box-orient: vertical;
+        -webkit-line-clamp: 2;
+        overflow: hidden;
+        margin-bottom: 10px;
+      }
+
+      .price {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+      }
+    }
+  }
+}
+.goodsDetail3 {
+  width: 92px;
+  @media (min-width: 390px) and (max-width: 414px) {
+    width: 102px;
+  }
+  @media (min-width: 415px) and (max-width: 630px) {
+    width: 112px;
+  }
+}
+.bigimg3 {
+  width: 90px;
+  height: 90px;
+  @media (min-width: 390px) and (max-width: 414px) {
+    width: 100px;
+  }
+  @media (min-width: 415px) and (max-width: 630px) {
+    width: 110px;
+  }
+}
+.goodsDetail2 {
+  width: 132px;
+  @media (max-width: 320px) {
+    width: 112px;
+  }
+  @media (min-width: 321px) and (max-width: 360px) {
+    width: 122px;
+  }
+  @media (min-width: 361px) and (max-width: 389px) {
+    width: 132px;
+  }
+  @media (min-width: 390px) and (max-width: 410px) {
+    width: 142px;
+  }
+  @media (min-width: 411px) and (max-width: 430px) {
+    width: 152px;
+  }
+  @media (min-width: 431px) and (max-width: 630px) {
+    width: 162px;
+  }
+}
+.bigimg2 {
+  width: 130px;
+  height: 130px;
+  @media (max-width: 320px) {
+    width: 110px;
+    height: 110px;
+  }
+  @media (min-width: 321px) and (max-width: 360px) {
+    width: 120px;
+    height: 120px;
+  }
+  @media (min-width: 361px) and (max-width: 389px) {
+    width: 130px;
+    height: 130px;
+  }
+  @media (min-width: 390px) and (max-width: 410px) {
+    width: 140px;
+    height: 140px;
+  }
+  @media (min-width: 411px) and (max-width: 430px) {
+    width: 150px;
+    height: 150px;
+  }
+  @media (min-width: 431px) and (max-width: 630px) {
+    width: 160px;
+    height: 160px;
+  }
+}
+.overflowX {
+  overflow: hidden;
+  overflow-x: scroll;
+}
+.fel {
+  display: flex;
+  justify-content: space-between;
+}
+.secKill-One {
+  display: flex;
+  padding: 8px;
+  .soneLeft {
+    width: 110px;
+    height: 110px;
+    margin-right: 8px;
+    img {
+      width: 110px;
+      height: 110px;
+      border-radius: 6px;
+    }
+  }
+  .soneRight {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .soneRightA {
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #394259;
+      line-height: 21px;
+      text-align: left;
+      font-style: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+    .soneRightB {
+      display: flex;
+      justify-content: space-between;
+      .uline {
+        width: 152px;
+        height: 10px;
+        background: #ed4444;
+        border-radius: 3px;
+        opacity: 0.1;
+      }
+    }
+    .soneRightC {
+      display: flex;
+      justify-content: space-between;
+      .priceC {
+        font-family: DINAlternate, DINAlternate;
+        font-weight: bold;
+        font-size: 18px;
+        line-height: 29px;
+        text-align: left;
+        font-style: normal;
+      }
+      .dataStateButton {
+        display: flex;
+        justify-content: center;
+        margin-top: 5px;
+        span {
+          font-size: 10px;
+          color: #ffffff;
+          border-radius: 17px;
+          padding: 5px 12px;
+        }
+      }
+    }
+  }
+}
+</style>