xiaoe_mp_npm 1.1.21 → 1.1.22-test02

package/src/GoodsItem/index.scss

@@ -1,627 +1,822 @@
-@import "..\\common/css/index.wxss";
-
-$deviceWidth: 750;
-@function vmin($rpx) {
-  @return #{$rpx * 100 / $deviceWidth}vmin;
-}
-
-@mixin goods-item {
-  display: flex;
-  min-height: vmin(180);
-  background: #ffffff;
-  border-radius: vmin(16);
-  flex-direction: column;
-  padding: vmin(16);
-  margin: vmin(16) vmin(16) vmin(0) vmin(16);
-  .main-card{
-    display: flex;
-    flex-direction: row;
-    .left {
-      position: relative;
-      width: vmin(224);
-      height: vmin(224);
-      image{
-        width: vmin(224);
-      height: vmin(224);
-      }
-      .index {
-        border-radius: vmin(16) 0 vmin(16) 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        min-width: vmin(36);
-        height: vmin(32);
-        padding: 0 vmin(6);
-        font-size: vmin(20);
-        background: rgba(0,0,0,0.6);
-        color: #FFFFFF;
-        z-index: 1;
-      }
-      .lottery-sign {
-        position: absolute;
-        top: 0;
-        left: 0;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        height: vmin(32);
-        width: auto;
-        padding: 0 vmin(16);
-        border-radius: vmin(16) 0 vmin(10) 0;
-        background: linear-gradient(90deg, #FF833E 0%, #FF2E57 97.5%), linear-gradient(270deg, #FE6500 0%, #FF4102 100%);
-        backdrop-filter: blur(vmin(12));
-        font-size: vmin(20);
-        color: #fff;
-      }
-      .lottery-sign-index {
-        padding: 0 vmin(16) 0 vmin(56);
-      }
-      .ios-index {
-        background: rgba(0,0,0,0.25);
-        backdrop-filter: blur(vmin(24));
-      }
-      .goods-type {
-        position: absolute;
-        right: vmin(8);
-        bottom: vmin(8);
-        padding: vmin(8) vmin(10);
-        background: rgba(0,0,0,0.4);
-        border-radius: vmin(8);
-        color: #fff;
-        font-size: vmin(20);
-        width: fit-content;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: vmin(20);
-        font-weight: 500;
-      }
-      .goods-explaining {
-        position: absolute;
-        width: vmin(240);
-        height: vmin(36);
-        bottom: 0vmin;
-        left: 0vmin;
-      }
-      .ios-goods-type {
-        background: rgba(0,0,0,0.25) !important;
-        backdrop-filter: blur(vmin(24));
-      }
-      .goods-explaining {
-        position: absolute;
-        bottom: 0;
-        left: 0;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: vmin(40);
-        width: 29.9vmin;
-        border-bottom-right-radius: 2.13vmin;
-        border-bottom-left-radius: 2.13vmin;
-        &::before {
-          content: '';
-          position: absolute;
-          background: rgba(0, 0, 0, 0.2);
-          backdrop-filter: blur(0.22rem);
-          left: 0;
-          bottom: 0;
-          width: 100%;
-          height: vmin(40);
-          border-bottom-right-radius: 2.13vmin;
-          border-bottom-left-radius: 2.13vmin;
-        }
-        .loadingWrapper {
-          position: relative;
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          height: vmin(21.6);
-          width: vmin(36);
-          background-repeat: no-repeat;
-          background-size: cover;
-          margin-right: 0.08rem;
-          .loading {
-            background-color: white;
-            height: vmin(21.6);
-            width: vmin(4);
-            border-radius: vmin(8);
-            transform-origin: top;
-            transform: translateZ(0);
-            -webkit-transform: translateZ(0);
-            position: absolute;
-            bottom: 0;
-            &:nth-child(1) {
-              left: 0;
-              animation: 0.9s ease-in-out 0.15s loading-run infinite;
-            }
-            &:nth-child(2) {
-              left: vmin(10);
-              animation: 0.9s ease-in-out 0.25s loading-run infinite;
-            }
-            &:nth-child(3) {
-              left: vmin(20);
-              animation: 0.9s ease-in-out 0.35s loading-run infinite;
-            }
-            &:nth-child(4) {
-              left: vmin(30);
-              animation: 0.9s ease-in-out 0.45s loading-run infinite;
-            }
-          }
-          @keyframes loading-run {
-            0%,
-            40%,
-            100% {
-              height: vmin(10.8);
-            }
-            25% {
-              height: vmin(21.6);
-            }
-          }
-        }
-        .text {
-          font-size: vmin(24);
-          color: #ffffff;
-          position: relative;
-          margin-left: vmin(8);
-        }
-      }
-      .is-over {
-        border-radius: vmin(10.67) vmin(10.67) 0 0;
-        position: absolute;
-        top: 0;
-        left: 0;
-        width: vmin(224);
-        height: 100%;
-        background: rgba(0, 0, 0, 0.4);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        color: #ffffff;
-        font-size: vmin(24);
-      }
-    }
-    .right {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      // justify-content: space-between;
-      margin-left: vmin(16);
-      height: vmin(224);
-      width: calc(100% - vmin(256));
-      position: relative;
-      .line-one {
-        display: flex;
-        align-items: center;
-        height: vmin(36);
-        width: vmin(446);
-        .super-activity-type{
-          background: linear-gradient(180.25deg, rgba(51,51,51,1) 0%, rgba(81.6,81.6,81.6,1) 68%, rgba(51,51,51,1) 100%);
-          color: rgba(255,120,31,1);
-          padding: vmin(4) vmin(8);
-          font-size: vmin(20);
-          height: vmin(32);
-          width: max-content;
-          line-height: vmin(36);
-          flex-shrink: 0;
-          margin-right: vmin(8);
-          border-radius: vmin(4);
-          display: flex;
-          font-weight: 500;
-          align-items: center;
-          .super-activity-txt{
-            background: linear-gradient(to right, #FFE4AD, #FFC266);
-            -webkit-background-clip: text;
-            color: transparent;
-          }
-        }
-        .membership-activity-type {
-          background: linear-gradient(90deg, #ffe7c2, #fedaa9);
-          padding: vmin(4) vmin(8);
-          font-size: vmin(20);
-          height: vmin(32);
-          width: max-content;
-          line-height: vmin(36);
-          flex-shrink: 0;
-          margin-right: vmin(8);
-          border-radius: vmin(4);
-          display: flex;
-          font-weight: 500;
-          align-items: center;
-          box-sizing: border-box;
-          .membership-activity-txt {
-            -webkit-background-clip: text;
-            color: #7a4b2c;
-          }
-        }
-        .goods-title {
-          font-size: vmin(28);
-          color: #333333;
-          word-break: break-all;
-          display: inline-block;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          display: inline-block;
-          vertical-align: middle;
-          line-height: vmin(40);
-          font-weight: 500;
-          width: vmin(446);
-        }
-        .goods-is-preheat {
-          border-radius: vmin(4);
-          border: 1rpx solid #ff2e57;
-          padding: vmin(4) vmin(8);
-          color: #ff2e57;
-          font-weight: 500;
-          font-size: vmin(20);
-          margin-right: vmin(8);
-          flex-shrink: 0;
-        }
-        .manage-title{
-          width: vmin(374);
-        }
-      }
-      .desc {
-        color: #FF2E57;
-        font-size: vmin(24);
-        line-height: vmin(24);
-        margin-top: vmin(8);
-      }
-
-      .order {
-        margin-top: vmin(8);
-        display: flex;
-        align-items: center;
-        justify-content: space-between;
-        font-size: vmin(20);
-        .order-left{
-          display: flex;
-          flex-direction: row;
-          flex-wrap: wrap;
-          gap: vmin(8);
-
-          .distribution{
-            background-color: #f5f5f5;
-            color: #999999;
-            border-radius: vmin(4);
-            padding: vmin(4) vmin(8);
-            font-weight: 400;
-            font-family: "PingFang SC";
-            text-align: center;
-            line-height: vmin(24);
-            height: vmin(24);
-          }
-          .preferential-price{
-            color: #FF2E57;
-            background: #FFEBEF;
-            padding: vmin(4) vmin(8);
-            border-radius: vmin(4);
-          }
-        }
-        .stock-and-order {
-          display: flex;
-          align-items: center;
-          flex-shrink: 0;
-          align-self: flex-start;
-          .stock-line {
-            background-color: #E5E5E5;
-            width: 1px;
-            height: 10px;
-            margin: 0 4px;
-          }
-          .order-stock{
-            color: #999999;
-          }
-        }
-      }
-
-      .progress {
-        width: vmin(320);
-        height: vmin(32);
-        border-radius: vmin(16);
-        background: #ebebeb;
-        position: relative;
-        display: flex;
-        justify-content: space-between;
-        padding: vmin(4) vmin(18.82) vmin(4) vmin(16);
-        box-sizing: border-box;
-        margin-top: vmin(8);
-        align-items: center;
-        .schedule {
-          height: vmin(32);
-          border-radius: vmin(16);
-          background: linear-gradient(90deg, #ff833e 0%, #ff2e57 100%);
-          position: absolute;
-          left: 0;
-          top: 0;
-        }
-        .residue-num {
-          font-size: vmin(20);
-          color: #ffffff;
-          z-index: 2;
-          // line-height: vmin(20);
-        }
-        .residue-time {
-          color: #999999;
-          font-size: vmin(20);
-          z-index: 2;
-          // line-height: vmin(20);
-        }
-      }
-
-      .sec-kill {
-        color: #333333;
-        // width: vmin();
-        height: vmin(32);
-        border-radius: vmin(16);
-        background: linear-gradient(90deg, #ffebef 0%, #ffebef00 100%);
-        font-size: vmin(20);
-        margin-top: vmin(8);
-        display: flex;
-        align-items: center;
-        padding: 0 vmin(16);
-        .time {
-          margin: 0 vmin(14);
-          color: #ff2e57;
-        }
-      }
-
-      .line-three {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-end;
-        position: absolute;
-        bottom: 0;
-        width: 100%;
-        .price {
-          position: relative;
-          min-height: vmin(40);
-          font-weight: 500;
-          color: #FF2E57;
-          .activity-type {
-            font-size: vmin(20);
-            height: vmin(32);
-            line-height: vmin(36);
-            flex-shrink: 0;
-            margin-right: vmin(4);
-            border-radius: vmin(4);
-            font-weight: 500;
-          }
-          .price-flow{
-            font-size: vmin(24);
-          }
-          .price-show {
-            font-size: vmin(32);
-          }
-          .pending-price{
-            font-size: vmin(20);
-            margin-left: vmin(4);
-          }
-          .sale-unit {
-            font-size: vmin(24);
-            color: #666;
-          }
-          .price-line {
-            font-size: vmin(20);
-            text-decoration: line-through;
-            color: #999999;
-            margin-left: vmin(8);
-          }
-        }
-        .buy-btn {
-          font-size: vmin(24);
-          border-radius: vmin(8);
-          width: vmin(128);
-          height: vmin(48);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: white;
-          line-height: vmin(48);
-          font-weight: 500;
-          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
-        }
-        .buy-btn-teacher{
-          font-size: vmin(24);
-          border-radius: vmin(8);
-          width: vmin(128);
-          height: vmin(48);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          line-height: vmin(48);
-          font-weight: 500;
-          .load{
-            width: vmin(24);
-            height: vmin(24);
-            animation: turn 1s linear infinite;
-            margin-right: vmin(8);
-          }
-        }
-        .cancel-explain-bg {
-          background: #ffebef;
-          color: #ff2e57;
-        }
-        .explain-bg {
-          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
-          color: white;
-        }
-        .no-stock-btn{
-          font-size: vmin(24);
-          border-radius: vmin(8);
-          width: vmin(128);
-          height: vmin(48);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: white;
-          line-height: vmin(48);
-          font-weight: 500;
-          opacity: 40%;
-          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
-        }
-        .preheat-btn{
-          opacity: 40%;
-        }
-        .see-btn {
-          font-size: vmin(24);
-          border-radius: vmin(8);
-          width: vmin(128);
-          height: vmin(48);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: white;
-          line-height: vmin(48);
-          font-weight: 500;
-          margin-left: inherit;
-          margin-right: inherit;
-          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
-        }
-        .buy-btn-preferential{
-          font-size: vmin(24);
-          border-radius: vmin(8);
-          padding: 0 vmin(10);
-          min-width: vmin(160);
-          height: vmin(68);
-          display: flex;
-          justify-content: center;
-          align-items: center;
-          color: white;
-          flex-flow: column;
-          line-height: vmin(32);
-          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
-          .go-buy{
-            font-size: vmin(24);
-            font-weight: 500;
-          }
-          .preferential-flow{
-            color: rgba(255,255,255,1);
-            font-size: vmin(20);
-          }
-          .preferential-show{
-            font-size: vmin(28);
-            color: rgba(255,255,255,1);
-          }
-        }
-      }
-    }
-    .manage-right{
-      width: vmin(374);
-    }
-    .teacher-switch{
-      height: vmin(32);
-      background: #fff;
-      display: flex;
-      margin-top: vmin(16);
-      .switch-txt{
-        opacity: 1;
-        color: rgba(51,51,51,1);
-        font-size: vmin(24);
-        font-weight: 400;
-        font-family: "PingFang SC";
-        margin-left: vmin(16);
-      }
-    }
-  }
-  .hide-tip {
-    width: vmin(240);
-    height: vmin(48);
-    border-radius: vmin(24);
-    background: #f5f5f5;
-    font-size: vmin(20);
-    color: #666666;
-    font-weight: 500;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    margin-top: vmin(8);
-  }
-  .full-hide-tip{
-    width: 100%;
-  }
-  .option-btn-wrap {
-    display: flex;
-    align-items: center;
-    justify-content: flex-end;
-    margin-top: vmin(16);
-
-    .option-btn {
-      font-size: vmin(24);
-      border-radius: vmin(8);
-      width: vmin(128);
-      height: vmin(56);
-        margin-right: vmin(24);
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        font-weight: bold;
-        color: #333;
-        border: vmin(1) solid #cccccc;
-
-        &:last-of-type {
-            margin-right: 0;
-        }
-    }
-  }
-
-  &.lottery-goods-item{
-    padding: vmin(16) vmin(8);
-    margin: vmin(0) vmin(8) vmin(16);
-  }
-}
-
-@keyframes turn {
-  0% {
-      transform: rotate(0deg);
-  }
-
-  20% {
-      transform: rotate(72deg);
-  }
-
-  40% {
-      transform: rotate(144deg);
-  }
-
-  60% {
-      transform: rotate(216deg);
-  }
-
-  80% {
-      transform: rotate(288deg);
-  }
-
-  100% {
-      transform: rotate(360deg);
-  }
-}
-
-.goods-item {
-  @include goods-item;
-}
-// 竖屏pad
-@media screen and (min-width: 768px) and (orientation: portrait) {
-  $deviceWidth: 1536 !global;
-  .goods-item {
-    @include goods-item;
-  }
-}
-// PC 放大适配
-@media screen and (min-height: 630px) and (orientation: landscape) {
-  $deviceWidth: 1260 !global;
-
-  .goods-item {
-    @include goods-item;
-  }
-}
-// 横屏pad
-@media screen and (min-height: 768px) and (orientation: landscape) {
-  $deviceWidth: 1536 !global;
-  .goods-item {
-    @include goods-item;
-  }
-}
+@import "..\\common/css/index.wxss";
+
+$deviceWidth: 750;
+@function vmin($rpx) {
+  @return #{$rpx * 100 / $deviceWidth}vmin;
+}
+
+@mixin goods-item {
+  display: flex;
+  min-height: vmin(180);
+  background: #ffffff;
+  border-radius: vmin(16);
+  flex-direction: column;
+  padding: vmin(16);
+  margin: vmin(16) vmin(16) vmin(0) vmin(16);
+  .main-card{
+    display: flex;
+    flex-direction: row;
+    .left {
+      position: relative;
+      width: vmin(224);
+      height: vmin(224);
+      image{
+        width: vmin(224);
+      height: vmin(224);
+      }
+      .index {
+        border-radius: vmin(16) 0 vmin(16) 0;
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        min-width: vmin(36);
+        height: vmin(32);
+        padding: 0 vmin(6);
+        font-size: vmin(20);
+        background: rgba(0,0,0,0.6);
+        color: #FFFFFF;
+        z-index: 1;
+      }
+      .lottery-sign {
+        position: absolute;
+        top: 0;
+        left: 0;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        height: vmin(32);
+        width: auto;
+        padding: 0 vmin(16);
+        border-radius: vmin(16) 0 vmin(10) 0;
+        background: linear-gradient(90deg, #FF833E 0%, #FF2E57 97.5%), linear-gradient(270deg, #FE6500 0%, #FF4102 100%);
+        backdrop-filter: blur(vmin(12));
+        font-size: vmin(20);
+        color: #fff;
+      }
+      .lottery-sign-index {
+        padding: 0 vmin(16) 0 vmin(56);
+      }
+      .ios-index {
+        background: rgba(0,0,0,0.25);
+        backdrop-filter: blur(vmin(24));
+      }
+      .goods-type {
+        position: absolute;
+        right: vmin(8);
+        bottom: vmin(8);
+        padding: vmin(8) vmin(10);
+        background: rgba(0,0,0,0.4);
+        border-radius: vmin(8);
+        color: #fff;
+        font-size: vmin(20);
+        width: fit-content;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: vmin(20);
+        font-weight: 500;
+      }
+      .goods-explaining {
+        position: absolute;
+        width: vmin(240);
+        height: vmin(36);
+        bottom: 0vmin;
+        left: 0vmin;
+      }
+      .ios-goods-type {
+        background: rgba(0,0,0,0.25) !important;
+        backdrop-filter: blur(vmin(24));
+      }
+      .goods-explaining {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        height: vmin(40);
+        width: 29.9vmin;
+        border-radius: 0 0 vmin(16) vmin(16);
+        background: rgba(255, 84, 41, 0.9);
+        backdrop-filter: blur(vmin(16));
+        &::before {
+          content: '';
+          position: absolute;
+          background: rgba(0, 0, 0, 0.2);
+          backdrop-filter: blur(vmin(22));
+          left: 0;
+          bottom: 0;
+          width: 100%;
+          height: vmin(40);
+          border-bottom-right-radius: 2.13vmin;
+          border-bottom-left-radius: 2.13vmin;
+        }
+        .loadingWrapper {
+          position: relative;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          height: vmin(21.6);
+          width: vmin(36);
+          background-repeat: no-repeat;
+          background-size: cover;
+          margin-right: vmin(8);
+          .loading {
+            background-color: white;
+            height: vmin(21.6);
+            width: vmin(4);
+            border-radius: vmin(8);
+            transform-origin: top;
+            transform: translateZ(0);
+            -webkit-transform: translateZ(0);
+            position: absolute;
+            bottom: 0;
+            &:nth-child(1) {
+              left: 0;
+              animation: 0.9s ease-in-out 0.15s loading-run infinite;
+              -webkit-animation: 0.9s ease-in-out 0.15s loading-run infinite;
+}
+            &:nth-child(2) {
+              left: vmin(10);
+              animation: 0.9s ease-in-out 0.25s loading-run infinite;
+            }
+            &:nth-child(3) {
+              left: vmin(20);
+              animation: 0.9s ease-in-out 0.35s loading-run infinite;
+            }
+            // &:nth-child(4) {
+            //   left: vmin(30);
+            //   animation: 0.9s ease-in-out 0.45s loading-run infinite;
+            // }
+          }
+          @keyframes loading-run {
+            0%,
+            40%,
+            100% {
+              height: vmin(10.8);
+            }
+            25% {
+              height: vmin(21.6);
+            }
+          }
+        }
+        .text {
+          font-size: vmin(24);
+          color: #ffffff;
+          position: relative;
+          margin-left: vmin(8);
+        }
+      }
+      .goods-over-mask {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        border-radius: vmin(16);
+        background: rgba(255, 255, 255, 0.6);
+        //border: 0.01rem solid rgba(0, 0, 0, 0.08);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: vmin(24);
+        z-index: 1;
+        .radio-box {
+          min-width: vmin(88);
+          min-height: vmin(88); 
+          flex-shrink: 0;
+          background-color: rgba(0, 0, 0, 0.6);
+          border-radius: 50%;
+          color: rgb(255, 255, 255);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          font-family: "PingFang SC";
+          font-size: vmin(24);
+          font-weight: 600;
+          padding: vmin(5);
+        }
+      }
+      .seek-explaining{
+        position: absolute;
+        bottom: vmin(16);
+        left: 50%;
+        transform: translateX(-50%);
+        min-width: vmin(120);
+        height: vmin(40);
+        white-space: nowrap;
+        background: rgba(255, 255, 255, 0.9);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: vmin(24);
+        font-size: vmin(24);
+        font-weight: 500;
+        z-index: 1;
+        .seek-img{
+          width: vmin(24);
+          height: vmin(24);
+          margin-right: vmin(4);
+        }
+        .seek-text{
+          font-size: vmin(20);
+          font-weight: 500;
+        }
+        .disabled-text{
+          color: #999999;
+        }
+      }
+    }
+    .right {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      margin-left: vmin(16);
+      min-height: vmin(224);
+      // height: 100%;
+      width: calc(100% - vmin(256));
+      position: relative;
+      .top-part {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        .line-one {
+          display: flex;
+          align-items: center;
+          height: vmin(36);
+          width: vmin(446);
+          .super-activity-type{
+            background: linear-gradient(180.25deg, rgba(51,51,51,1) 0%, rgba(81.6,81.6,81.6,1) 68%, rgba(51,51,51,1) 100%);
+            color: rgba(255,120,31,1);
+            padding: vmin(4) vmin(8);
+            font-size: vmin(20);
+            height: vmin(32);
+            width: max-content;
+            line-height: vmin(36);
+            flex-shrink: 0;
+            margin-right: vmin(8);
+            border-radius: vmin(4);
+            display: flex;
+            font-weight: 500;
+            align-items: center;
+            .super-activity-txt{
+              background: linear-gradient(to right, #FFE4AD, #FFC266);
+              -webkit-background-clip: text;
+              color: transparent;
+            }
+          }
+          .goods-title {
+            font-size: vmin(28);
+            color: #333333;
+            word-break: break-all;
+            display: inline-block;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            display: inline-block;
+            vertical-align: middle;
+            line-height: vmin(40);
+            font-weight: 600;
+            width: vmin(446);
+          }
+          .goods-is-preheat {
+            border-radius: vmin(4);
+            border: 1rpx solid #ff2e57;
+            padding: vmin(4) vmin(8);
+            color: #ff2e57;
+            font-weight: 500;
+            font-size: vmin(20);
+            margin-right: vmin(8);
+            flex-shrink: 0;
+          }
+          .manage-title{
+            width: vmin(374);
+          }
+          .activity-type {
+            padding: vmin(4) vmin(8);
+            justify-content: center;
+            align-items: center;
+            border-radius: vmin(4);
+            height: vmin(32);
+            line-height: vmin(36);
+            background: #ffe3e0;
+            color: #ff5429;
+            font-weight: 600;
+            font-size: vmin(24);
+            white-space: nowrap;
+            backdrop-filter: blur(vmin(11));
+            margin: vmin(4) vmin(8) vmin(4) 0;
+          }
+        }
+        .membership-activity-type {
+          background: linear-gradient(90deg, #ffe7c2, #fedaa9);
+          padding: vmin(4) vmin(8);
+          font-size: vmin(20);
+          height: vmin(32);
+          width: max-content;
+          line-height: vmin(36);
+          flex-shrink: 0;
+          margin-right: vmin(8);
+          border-radius: vmin(4);
+          display: flex;
+          font-weight: 500;
+          align-items: center;
+          box-sizing: border-box;
+          .membership-activity-txt {
+            -webkit-background-clip: text;
+            color: #7a4b2c;
+          }
+        }
+        .desc-order {
+          display: flex;
+          justify-content: space-between;
+          .desc {
+            white-space: nowrap;
+            color: #ff5429;
+            font-size: vmin(24);
+            line-height: vmin(24);
+            margin-top: vmin(8);
+          }
+          .order-num {
+            line-height: vmin(24);
+            height: vmin(24);
+            font-size: vmin(20);
+            margin-top: vmin(8);
+            color: #999999;
+            display: flex;
+            align-items: center;
+            .hot-icon{
+              width: vmin(24);
+              height: vmin(24);
+              margin-left: vmin(4);
+            }
+            .text {}
+            .hot-text {
+              color: #FF2E57;
+            }
+          }
+        }
+
+        .goods-order {
+          margin: vmin(8) 0 0 0;
+          align-items: center;
+          margin-bottom: vmin(-2);
+  
+          .order-left {
+            display: flex;
+            flex-wrap: wrap;
+            align-items: center;
+            row-gap: vmin(4);
+            transform-origin: top left;
+            font-family: "PingFang SC";
+            font-size: vmin(18);
+            font-style: normal;
+            font-weight: 400;
+            margin-right: vmin(-8);
+            
+            .coupon-tag {
+              display: flex;
+              align-items: center;
+              box-sizing: border-box;
+              gap: vmin(6);
+              line-height: vmin(25);
+              border-radius: vmin(4);
+              padding: 0 vmin(8);
+              line-height: vmin(28);
+              border: vmin(1) solid rgba(255, 84, 41, 0.4);
+              color: #ff4747;
+              text-align: center;
+              font-style: normal;
+              font-weight: 400;
+              margin-right: vmin(8);
+              
+              .coupon-separator {
+                display: inline-block;
+                width: vmin(1);
+                height: vmin(16);
+                background-color: currentColor;
+                vertical-align: middle;
+                opacity: 0.4;
+                margin: 0 vmin(6);
+                
+              }
+            }
+  
+            .distribution {
+              box-sizing: border-box;
+              display: flex;
+              align-items: center;
+              border-radius: vmin(4);
+              padding: 0 vmin(8);
+              border: vmin(1) solid rgba(0, 153, 255, 0.4);
+              color: #0099FF;
+              text-align: center;
+              font-family: "PingFang SC";
+              font-size: vmin(18);
+              font-style: normal;
+              line-height: vmin(28);
+              font-weight: 400;
+              margin-right: vmin(8);
+  
+              .distributionWay-separator {
+                display: inline-block;
+                width: vmin(1);
+                height: vmin(16);
+                background-color: #0099FF;
+                vertical-align: middle;
+              }
+            }
+  
+            // 库存、销量
+            .left-stock {
+              font-size: vmin(20);
+              margin-left: auto;
+              color: #999;
+              margin-right: vmin(8);
+    
+              .prod-stock {
+                font-size: vmin(20);
+                line-height: vmin(40);
+              }
+            }
+  
+          }
+        }
+  
+        .progress {
+          width: vmin(320);
+          height: vmin(32);
+          border-radius: vmin(16);
+          background: #ffe7e0;
+          position: relative;
+          display: flex;
+          justify-content: space-between;
+          padding: vmin(4) vmin(18.82) vmin(4) vmin(16);
+          box-sizing: border-box;
+          margin-top: vmin(8);
+          align-items: center;
+          .schedule {
+            height: vmin(32);
+            border-radius: vmin(16);
+            background: linear-gradient(90deg, #ff833e 0%, #ff2e57 100%);
+            position: absolute;
+            left: 0;
+            top: 0;
+          }
+          .residue-num {
+            font-size: vmin(20);
+            color: #ffffff;
+            z-index: 2;
+            // line-height: vmin(20);
+          }
+          .residue-time {
+            color: #999999;
+            font-size: vmin(20);
+            z-index: 2;
+            // line-height: vmin(20);
+          }
+        }
+  
+        .sec-kill {
+          color: #333333;
+          // width: vmin();
+          height: vmin(32);
+          border-radius: vmin(16);
+          background: linear-gradient(90deg, #ffebef 0%, #ffebef00 100%);
+          font-size: vmin(20);
+          margin-top: vmin(8);
+          display: flex;
+          align-items: center;
+          padding: 0 vmin(16);
+          .time {
+            margin: 0 vmin(14);
+            color: #ff2e57;
+          }
+        }
+      }
+
+      .line-three {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-end;
+        // position: absolute;
+        // bottom: 0;
+        width: 100%;
+        
+        .price-box {
+          display: flex;
+          flex-wrap: wrap;
+          position: relative;
+          margin-left: vmin(4);
+          font-weight: 500;
+          // height: 0.56rem;
+          align-items: flex-end;
+          font-family: "PingFang SC";
+          .red-price {
+            display: flex;
+            align-items: flex-end;
+            flex-wrap: wrap;
+            margin-right: vmin(4);
+            // height: vmin(32);
+            color: #ff5429;
+
+            .price-box {
+              display: flex;
+              align-items: center;
+              height: vmin(28);
+            }
+
+            &-txt {
+              height: vmin(28);
+              display: inline-flex;
+              align-items: center;
+              font-size: vmin(18);
+              font-weight: 600;
+              text-align: center;
+              margin-right: vmin(4);
+              white-space: nowrap;
+            }
+            &-num {
+              text-align: center;
+              font-family: "PingFang SC";
+              font-size: vmin(32);
+              font-weight: 600;
+              // height: vmin(34);
+              line-height: vmin(34);
+              transform: scale(1);
+              transform-origin: bottom;
+            }
+            .icon {
+              width: vmin(20);
+              height: vmin(20);
+              margin-right: vmin(4);
+              background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/mhkej27y0lu7.svg');
+              background-size: contain;  /* 自适应大小 */
+              background-position: center;  /* 强制内容中心对齐 */
+              background-repeat: no-repeat;
+            }
+            .over-icon {
+              background-image: url('https://commonresource-1252524126.cdn.xiaoeknow.com/image/mir4jy7f0k5y.svg');
+            }
+            .sale-unit {
+              height: vmin(24);
+              line-height: vmin(24);
+              font-size: vmin(24);
+              color: #666;
+            }
+            .wait-open-price {
+              height: vmin(24);
+              font-size: vmin(20);
+              line-height: vmin(20);
+              font-weight: 500;
+              margin-left: vmin(4);
+            }
+          }
+          .grey-price {
+            height: vmin(32);
+            display: flex;
+            align-items: flex-end;
+            transform: scale(0.83333);
+            transform-origin: bottom left;
+            &-value {
+              color: #999999;
+              text-align: center;
+              font-family: "PingFang SC";
+              height: vmin(32);
+              line-height: vmin(32);
+              font-size: vmin(24);
+              font-weight: 400;
+            }
+            &-line-through {
+              text-decoration: line-through;
+            }
+          }
+        }
+        .over-price-box {
+          filter: grayscale(100%);
+          opacity: 0.5;
+}
+        .buy-btn {
+          font-size: vmin(24);
+          border-radius: vmin(8);
+          width: vmin(144);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          margin-left: inherit;
+          margin-right: inherit;
+          background: linear-gradient(270deg, #fe6500, #ff4102);
+        }
+        .buy-btn-teacher{
+          font-size: vmin(24);
+          border-radius: vmin(8);
+          width: vmin(144);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          margin-left: inherit;
+          margin-right: inherit;
+          background: linear-gradient(270deg, #fe6500, #ff4102);
+          .load{
+            width: vmin(24);
+            height: vmin(24);
+            animation: turn 1s linear infinite;
+            margin-right: vmin(8);
+          }
+        }
+        .cancel-explain-bg {
+          background: #fff6f5;
+          color: #ff5429;
+        }
+        .explain-bg {
+          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
+          color: white;
+        }
+        .no-stock-btn{
+          font-size: vmin(24);
+          border-radius: vmin(8);
+          width: vmin(128);
+          height: vmin(48);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(48);
+          font-weight: 500;
+          opacity: 40%;
+          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
+        }
+        .preheat-btn{
+          opacity: 40%;
+        }
+        .see-btn {
+          font-size: vmin(24);
+          border-radius: vmin(8);
+          width: vmin(144);
+          height: vmin(56);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          line-height: vmin(56);
+          font-weight: 500;
+          margin-left: inherit;
+          margin-right: inherit;
+          background: linear-gradient(270deg, #fe6500, #ff4102);
+        }
+        .buy-btn-preferential{
+          font-size: vmin(24);
+          border-radius: vmin(8);
+          padding: 0 vmin(10);
+          min-width: vmin(160);
+          height: vmin(68);
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: white;
+          flex-flow: column;
+          line-height: vmin(32);
+          background: linear-gradient(270deg, #ff2e57 0%, #ff4d82 100%);
+          .go-buy{
+            font-size: vmin(24);
+            font-weight: 500;
+          }
+          .preferential-flow{
+            color: rgba(255,255,255,1);
+            font-size: vmin(20);
+          }
+          .preferential-show{
+            font-size: vmin(28);
+            color: rgba(255,255,255,1);
+          }
+        }
+      }
+    }
+    .manage-right{
+      width: vmin(374);
+    }
+    .teacher-switch{
+      height: vmin(32);
+      background: #fff;
+      display: flex;
+      margin-top: vmin(16);
+      .switch-txt{
+        opacity: 1;
+        color: rgba(51,51,51,1);
+        font-size: vmin(24);
+        font-weight: 400;
+        font-family: "PingFang SC";
+        margin-left: vmin(16);
+      }
+    }
+  }
+  .hide-tip {
+    width: vmin(240);
+    height: vmin(48);
+    border-radius: vmin(24);
+    background: #f5f5f5;
+    font-size: vmin(20);
+    color: #666666;
+    font-weight: 500;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    margin-top: vmin(8);
+  }
+  .full-hide-tip{
+    width: 100%;
+  }
+  .option-btn-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    margin-top: vmin(16);
+
+    .option-btn {
+      font-size: vmin(24);
+      border-radius: vmin(8);
+      width: vmin(128);
+      height: vmin(56);
+        margin-right: vmin(24);
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-weight: bold;
+        color: #333;
+        border: vmin(1) solid #cccccc;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    }
+  }
+
+  &.lottery-goods-item{
+    padding: vmin(16) vmin(8);
+    margin: vmin(0) vmin(8) vmin(16);
+  }
+}
+
+@keyframes turn {
+  0% {
+      transform: rotate(0deg);
+  }
+
+  20% {
+      transform: rotate(72deg);
+  }
+
+  40% {
+      transform: rotate(144deg);
+  }
+
+  60% {
+      transform: rotate(216deg);
+  }
+
+  80% {
+      transform: rotate(288deg);
+  }
+
+  100% {
+      transform: rotate(360deg);
+  }
+}
+
+.goods-item {
+  @include goods-item;
+}
+// 竖屏pad
+@media screen and (min-width: 768px) and (orientation: portrait) {
+  $deviceWidth: 1536 !global;
+  .goods-item {
+    @include goods-item;
+  }
+}
+// PC 放大适配
+@media screen and (min-height: 630px) and (orientation: landscape) {
+  $deviceWidth: 1260 !global;
+
+  .goods-item {
+    @include goods-item;
+  }
+}
+// 横屏pad
+@media screen and (min-height: 768px) and (orientation: landscape) {
+  $deviceWidth: 1536 !global;
+  .goods-item {
+    @include goods-item;
+  }
+}