feat：购有趣 4.3改版

lin

2026-05-11 eaa5247fe535aadedc7cd35896e1e08580487006

 static/css/index.css

@@ -1,553 +1,631 @@
page{
   background-color: #EEEBEC;
   font-size: 24upx;
    background-color: #ffffff;
    font-size: 24upx;
}
.status_bar {
    height: var(--status-bar-height);
.content{
   position: absolute;
   width: 100%;
   padding-bottom: calc(var(--window-bottom));
}
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative;
   padding-top: 50upx;
}

.page-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 620rpx;
    z-index: 0;
}
.content {

}
.status-bar {
    width: 100%;
}
.index-top{
   background: url(@/static/imgs/index-bg.png) no-repeat;
   background-size: 100% 100%;
   width: 100%;

.btn-group {
    display: flex;
    margin-top: 30rpx;
}
.index-title{
   padding: 30rpx 0;
   display: flex;
.cancel-btn {
    flex: 1;
    margin-right: 20rpx;
    background-color: #f5f5f5;
}
.index-title-view{
   display: flex;
   align-items: center;
}
.index-title-view-lf{
   margin: 0 32rpx;
}
.index-title-view-lf image{
   width: 144rpx;
   height: 56rpx;
}
.index-title-view-lf2{
   width: 200rpx;
   height: 40rpx;
   background: #FF1472;
   border-radius: 8rpx 8rpx 8rpx 8rpx;
   text-align: center;
   color: #ffffff;
   line-height: 40rpx;
}
.index-title-view1{
   width: 62%;
}
.index-title-view2{
   width: 38%;
}
.index-title-view-rf {
   display: flex;
   flex: 1;
   justify-content: center;
   align-items: center;
}
.index-title-view-rf image{
   width: 40rpx;
   height: 40rpx;
   display: block;
   margin: 0 auto;
.allow-btn {
    flex: 1;
    background-color: #007aff;
    color: white;
}
.search{
   width: 100%;
   display: flex;
   margin-top: 20upx;
   margin-bottom: 30upx;
    position: fixed;
    left: 0;
    width: 100%;
    top: var(--status-bar-height);
    z-index: 9999;
    background: #fbf8f8;
    height: 110upx;
}
.search-1{
   width: 76%;
   display: flex;
   justify-content: center;
   align-items: center;
.search-v{
    width: 94%;
    margin-left: 3%;
    display: flex;
    height: 70upx;
    margin-top: 20upx;
    align-items: center;
    font-size: 24upx;
    justify-content: center;
    color: #9e9d9d;
    background-color: #ffffff;
    border-radius: 30upx;
}
.search-1 input{
   width: 76%;
   height: 72rpx;
   background: #FFFFFF;
   border-radius: 50rpx;
   padding-left: 14%;
   font-size: 26upx;
.search-icon{
    width:  40upx;
    height: 40upx;
    margin-right: 20upx;
}
.search-1 image{
   position: absolute;
   width: 40rpx;
   height: 40rpx;
   left: 8%;
}
.search-2{
   width: 20%;
   display: flex;
   justify-content: center;
   align-items: center;
}
.search-2 view{
   width: 112rpx;
   height: 72rpx;
   text-align: center;
   line-height: 72rpx;
   color: #ffffff;
   background: #FF1472;
   border-radius: 200rpx;
}

.tabs{
   display: flex;
   margin-bottom: 20upx;
}
.tabs view{
   padding: 0 35rpx;
   margin-left: 35rpx;
   text-align: center;
   line-height: 56rpx;
   height: 56rpx;
   background: #F3F4F6;
   border-radius: 200rpx;
   color: #364153;
}
.tabs .active {
   color: #ffffff;
   background: #FF1472;
}

.banner{
   width: 94%;
   margin: 40upx auto 30upx;
}
uni-swiper-item{
   border-radius: 32rpx;
    width: 94%;
    margin: 20upx auto 20upx;
}
.swiper, .swiper image{
   width: 100%;
   height: 278rpx;
   border-radius: 32rpx;
    width: 100%;
    height: 400upx;
    border-radius: 16upx;
}
.comm{
   width: 94%;
   margin: 20upx 3% 40upx;
   display: flex;
}
.comm .comm-1{
   width: 48%;
   height: 278rpx;
   border-radius: 32rpx;
   background-color: #ffffff;
}
.comm .comm-2{
   width: 4%;
   height: 278rpx;
}
.comm .comm-3{
   width: 48%;
   height: 278rpx;
   border-radius: 32rpx;
   background-color: #ffffff;
}
.comm-title image{
   width: 128rpx;
   height: 40rpx;
   margin: 24rpx 26rpx;
}
.comm-goods{
   display: flex;
}
.comm-goods .comm-goods-v{
   flex: 1;
   display: flex;
   text-align: center;
   justify-content: center;
}
.comm-goods-v text{
   font-family: PingFang SC, PingFang SC;
   font-weight: 600;
   font-size: 24rpx;
   color: #FB2C36;
   text-align: left;
   font-style: normal;
   text-transform: none;
}
.comm-goods image{
   width: 128rpx;
   height: 128rpx;
   border-radius: 20rpx;
}
.hots{
   width: 94%;
   margin: 20upx auto 40rpx;
   height: 280rpx;
   background: #FFFFFF;
   border-radius: 32rpx 32rpx 32rpx 32rpx;
}
.hots-title{
   padding: 24rpx 26rpx;
}
.hots-title .hots-icon{
   width: 192rpx;
   height: 40rpx;
   border-radius: 0rpx 0rpx 0rpx 0rpx;
}
.hots-rgt{
   float: right;
   display: flex;
   align-items: center;
}
.hots-rgt text{
   font-family: PingFang SC, PingFang SC;
   font-weight: 400;
   font-size: 24rpx;
   color: #666666;
   text-align: left;
   font-style: normal;
   text-transform: none;
   margin-right: 10rpx;
}
.hots-rgt image{
   width: 32rpx;
   height: 32rpx;
}
.hots-goods{
   display: flex;
}
.hots-goods .hots-goods-v{
   flex: 1;
   display: flex;
   text-align: center;
   justify-content: center;
}
.hots-goods-v text{
   font-family: PingFang SC, PingFang SC;
   font-weight: 600;
   font-size: 24rpx;
   color: #FB2C36;
   text-align: left;
   font-style: normal;
   text-transform: none;
}
.hots-goods image{
   width: 136rpx;
   height: 136rpx;
   border-radius: 20rpx;
}

.cates{
   width: 94%;
   margin: 0upx 3%;
   display: inline-block;
   border-top-left-radius: 10upx;
   border-top-right-radius: 10upx;
   padding: 0upx 0 0upx 0;
    width: 100%;
    margin: 0;
   margin-top: 190rpx;
   border-top-right-radius: 30rpx;
   border-top-left-radius: 30rpx;
    background-color: #ffffff;
    padding: 0;
   display: flex;
   flex-wrap: wrap; /* 确保子元素换行 */
}
.cates-v{
   float: left;
   width: 20%;
   border-radius: 50%;
   margin-bottom: 0upx;
    width: 190rpx;
    margin-bottom: 0upx;
   margin-left: 30rpx;
}
.cates-v:nth-child(1) {
   margin-left: 0;
}
.cates-v-icon{
   width: 80upx;
   height: 80upx;
   display: block;
   margin: 40upx auto 20upx;
   border-radius: 50%;
    width: 140rpx;
    height: 140rpx;
    display: block;
    margin: 40upx auto 20upx;
    border-radius: 10upx;
}
.cates-v view{
   text-align: center;
   font-size: 24upx;
    text-align: center;
    font-size: 24upx;
   color: #364153;
}
.goods-main{
   width: 94%;
   margin: 0upx auto 0upx;
   border-bottom-left-radius: 10upx;
   border-bottom-right-radius: 10upx;
   border-top: 1px solid #eeeeee;
    width: 94%;
    margin: 10upx auto 30upx;
    background-color: #ffffff;
    border-radius: 10upx;
}
.goods-main-title{
   padding: 20upx;
   display: flex;
   align-items: center;
   margin-bottom: 10upx;
    padding: 20upx;
    display: flex;
    align-items: center;
    margin-bottom: 10upx;
}
.goods-main-icon{
   width: 70upx;
   height: 70upx;
   margin-right: 20upx;
   border-radius: 10upx;
    width: 70upx;
    height: 70upx;
    margin-right: 20upx;
    border-radius: 10upx;
}
.goods-main-title text{
   font-size: 30upx;
   color: #333333;
   font-weight: 700;
    font-size: 30upx;
    color: #333333;
    font-weight: 700;
}
.goods-icon{
   width: auto;
   height: 340upx;
    width: auto;
    height: 340upx;
}
.goods-list{
   width: 100%;
   display: flex;
   flex-wrap: wrap;
   justify-content: space-between;
}
.hyj{
   display: flex;
   justify-content: center;
   margin-left: 10rpx;
   margin-right: 10rpx;
}
.hyj image{
   width: 74rpx;
   height: 32rpx;
    width: 96%;
    display: flex;
    margin-left: 2%;
    flex-wrap: wrap;
    justify-content: space-between;
}
.goods-item{
   width: 48%;
   border-radius: 18upx;
   background-color: #fbf8f8;
   margin-bottom: 30upx;
    width: 48%;
    border-radius: 18upx;
    background-color: #fbf8f8;
    margin-bottom: 30upx;
}
.goods-icon{
   width: 100%;
   border-radius: 10upx;
   margin-bottom: 20upx;
    width: 100%;
    border-radius: 10upx;
    margin-bottom: 20upx;
}
.goods-price{
   margin-top: 16upx;
   display: flex;
   align-items: center;
   color: #F75451;
   font-size: 26upx;
   padding: 0 14upx;
   padding-bottom: 20upx;
    margin-top: 0upx;
    display: flex;
    align-items: center;
    color: #F75451;
    font-size: 26upx;
    padding: 0 14upx;
    padding-bottom: 20upx;
}
.goods-price .red{
   font-size: 26upx !important;
   font-weight: 600;
    margin-left: 10upx;
    font-size: 24rpx !important;
    font-weight: 600;
}
.goods-title{
   padding: 0 14upx;
   font-size: 26upx;
   line-height: 42upx;
   font-weight: 700;
   color: #333;
   display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
   -webkit-box-orient: vertical; /* 垂直排列 */
   -webkit-line-clamp: 1; /* 限制显示两行 */
   overflow: hidden; /* 隐藏超出范围的内容 */
   text-overflow: ellipsis; /* 使用省略号 */
    padding: 0 14upx;
    font-size: 26upx;
    line-height: 42upx;
    font-weight: 700;
    color: #333;
    display: -webkit-box; /* 设置为WebKit内核的弹性盒子模型 */
    -webkit-box-orient: vertical; /* 垂直排列 */
    -webkit-line-clamp: 1; /* 限制显示两行 */
    overflow: hidden; /* 隐藏超出范围的内容 */
    text-overflow: ellipsis; /* 使用省略号 */
}

.more{
   position: absolute;
   right: 10upx;
   display: flex;
   justify-content: center;
   align-items: center;
    position: absolute;
    right: 10upx;
    display: flex;
    justify-content: center;
    align-items: center;
}
.more image{
   width: 36upx;
   height: 36upx;
   margin-right: 30rpx;
    width: 36upx;
    height: 36upx;
    margin-right: 30rpx;
}

.lingqu{
   position: fixed;
   left: 0;
   width: 100%;
   height: 100%;
   top: 0;
   z-index: 99999;
    position: fixed;
    left: 0;
    width: 100%;
    height: 100%;
    top: 0;
    z-index: 99999;
}
.lingqu .msk{
   position: absolute;
   width: 100%;
   height: 100%;
   background-color: #000000;
   opacity: .5;
   left: 0;
   top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: #000000;
    opacity: .5;
    left: 0;
    top: 0;
}

.lingquMain{
   width: 70%;
   height: auto;
   position: absolute;
   top: 35%;
   left: 15%;
    width: 70%;
    height: auto;
    position: absolute;
    top: 35%;
    left: 15%;
}
.lingquMain image{
   width: 100%;
   border-radius: 20upx;
    width: 100%;
    border-radius: 20upx;
}

.auth{
   width: 94%;
   margin: 30upx auto;
   height: 240upx;
    width: 94%;
    margin: 110upx auto 0;
    height: 240upx;
}
.auth image{
   width: 100%;
   height: 100%;
   border-radius: 20upx;
    width: 100%;
    height: 100%;
    border-radius: 20upx;
}

@keyframes floatUp {
  from {
    transform: translateY(100%); /* 从元素原始位置向下移动100% */
    opacity: 0; /* 初始透明度为0 */
  }
  to {
    transform: translateY(0); /* 移动到原始位置 */
    opacity: 1; /* 完全不透明 */
  }
    from {
        transform: translateY(100%); /* 从元素原始位置向下移动100% */
        opacity: 0; /* 初始透明度为0 */
    }
    to {
        transform: translateY(0); /* 移动到原始位置 */
        opacity: 1; /* 完全不透明 */
    }
}
.popup-content {
  animation: floatUp 1s ease-out; /* 应用动画，持续时间为1秒，缓动函数为ease-out */
    animation: floatUp 1s ease-out; /* 应用动画，持续时间为1秒，缓动函数为ease-out */
}
.edu-view{	
   padding: 40upx 0 10upx;
   width: 560upx;
   border-radius: 50upx;
   background-color: #ffffff;
   background-size: 100% 100%;
.edu-view{
    padding: 40upx 0 10upx;
    width: 560upx;
    border-radius: 50upx;
    background-color: #ffffff;
    background-size: 100% 100%;
}
.edu-view2{
   border-radius: 30upx !important;
    border-radius: 30upx !important;
}
.edu-icon-succ{
   width: 140upx;
   height: 140upx;
   display: block;
   margin: 50upx auto;
    width: 140upx;
    height: 140upx;
    display: block;
    margin: 50upx auto;
}
.edu-icon-fail{
   width: 200upx;
   height: 100upx;
   display: block;
   margin: 50upx auto;
    width: 200upx;
    height: 100upx;
    display: block;
    margin: 50upx auto;
}
.edu-view-desc2{
   font-size: 36upx;
   font-weight: 700;
   text-align: center;
    font-size: 36upx;
    font-weight: 700;
    text-align: center;
}
.edu-view-desc3{
   width: 80%;
   margin: 30upx auto;
   text-align: center;
   font-size: 26upx;
   color: #666666;
   line-height: 40upx;
    width: 80%;
    margin: 30upx auto;
    text-align: center;
    font-size: 26upx;
    color: #666666;
    line-height: 40upx;
}
.edu-btns{
   width: 94%;
   border-radius: 50upx;
   margin: 30upx auto 30upx;
   z-index: 99;
   height: 90upx;
   background-color: #e3b400;
   color: #ffffff;
   letter-spacing: 10upx;
   display: flex;
   justify-content: center;
   align-items: center;
   font-weight: 700;
   font-size: 28upx;
    width: 94%;
    border-radius: 50upx;
    margin: 30upx auto 30upx;
    z-index: 99;
    height: 90upx;
    background-color: #e3b400;
    color: #ffffff;
    letter-spacing: 10upx;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: 700;
    font-size: 28upx;
}

.auth{
.hLogo{
   width: 96%;
   padding: 40upx 0;
   margin: 0 auto;
}
.hLogoView{
   display: flex;
   align-items: center;
}
.h-logo{
   width: 154rpx;
   height: 52rpx;
}
.hLogo-1{
   margin: 0 30upx;
   /* margin-bottom: 20rpx; */
}
.hLogo-2{
   position: relative;
   width: 100%;
   height: 72rpx;
   background-color: #ffffff;
   border-radius: 50rpx;
   /* background: url(@/static/imgs/input-bg.png) no-repeat;
   background-size: 100% 100%; */
}
.hLogo-2 .s-btn {
   position: absolute;
   right: 30rpx;
   top: 13rpx;
   text-align: center;
   width: 96rpx;
   height: 50rpx;
   line-height: 50rpx;
   border-radius: 25rpx;
   background-color: #37AA25;
   color: #ffffff;
}
.hLogo-2 .s-icon{
   position: absolute;
   left: 30rpx;
   top: 20rpx;
   width: 30rpx;
   height: 30rpx;
}
.hLogo-2 input{
   width: 83%;
   height: 70rpx;
   line-height: 70rpx;
   font-size: 28rpx;
   background: transparent;
   padding-left: 70rpx;
}
.xxhh-v{
   width: 96%;
   margin: 0 auto;
   padding: 10upx 0;
   height: 195rpx;
   position: relative;
}
.auth-over{
   background: linear-gradient(#e58585, #d19323);
.xxhh-v-icon{
   position: absolute;
   width: 100%;
   height: 100%;
}
.xxhh-title{
   display: flex;
   padding: 20upx;
   align-items: center;
}
.xxk-icon{
   width: 201rpx;
   height: 47rpx;
   margin-right: 23rpx;
}
.xxhh-title text{
   z-index: 99;
   font-size: 22rpx;
   color: #261B18;
}
.xxhh-edu{
   padding-top: 16upx;
   padding-bottom: 16upx;
   z-index: 99;
}
.xxhh-edu text{
   margin-left: 20upx;
   color: #AEA3A2;
   font-size: 24rpx;
}
.xxhh-money{
   padding-top: 0;
   margin-left: 10upx;
}
.xxhh-money text{
   font-size: 48rpx;
   color: #A18685;
   font-weight: 700;
}

.xxhf{
   width: 96%;
   margin: 0 auto 30upx;
   height: 325rpx;
   background: url(@/static/imgs/xxhf.png) no-repeat;
   background-size: 100%;
   border-radius: 20upx;
}
.auth-over-edu{
   padding: 30upx 50upx;
   color: #ffffff;
}
.auth-over-edu text{
   display: block;
}
.auth-over-edu-til{
   font-weight: 500;
   font-size: 30upx;
   letter-spacing: 4upx;
   margin-bottom: 14upx;
}
.auth-over-edu-price{
.xxhf-title{
   padding: 24upx 80upx;
   color: #5B2D2C;
   font-size: 32rpx;
   font-weight: 700;
   font-size: 80upx;
   letter-spacing: 5upx;
   margin-bottom: 14upx;
}
.auth-over-btn{
.xxhf-v{
   width: 96%;
   height: 220rpx;
   margin: 0 auto 5%;
   display: flex;
   background-color: #ffffff;
   border-radius: 20upx;
}
.xxhv-v{
   flex: 1;
   height: 100%;
}
.deb-icon{
   width: 100%;
   height: 100%;
}
.xxhv-vv-1{
   width: 180rpx;
   height: 180rpx;
   margin: 20rpx 0 20rpx 12%;
   background: #EFEFEF;
   border-radius: 14rpx;
   border: 3px solid #FFABB5;
}
.xxhv-vv-2{
   width: 180rpx;
   height: 180rpx;
   margin: 20rpx 0 20rpx 4%;
   background: #EFEFEF;
   border-radius: 14rpx;
   border: 3px solid #FFABB5;
}
.xxhv-vv-t{
   width: 90%;
   height: 46rpx;
   margin: -3rpx auto;
   font-family: Source Han Sans CN;
   font-weight: 400;
   font-size: 26rpx;
   color: #F8F9FD;
   line-height: 52rpx;
   background-size: 100%;
   text-align: center;
}
.xxhv-icon{
   width: 100%;
   height: 134rpx;
}
.xx-icon{
   width: 80upx;
   height: 80upx;
   display: block;
   margin: 27rpx auto;
   border-radius: 10rpx;
}
.notice{
   width: 96%;
   margin: 0 2% 20upx;
   background: #ffffff;
   height: 80upx;
   display: flex;
   border-radius: 20upx;
}
.n-icon{
   width: 50upx;
   height: 50upx;
   margin: 15upx 20upx;
}
.marquee-container {
    width: 100%;
    overflow: hidden;
    white-space: nowrap;
    box-sizing: border-box;
}
.marquee-content {
   height: 100%;
   line-height: 80upx;
   font-size: 28upx;
   color: #e36900;
   font-weight: 700;
    display: inline-block;
    padding-left: 100%; /* 初始偏移 */
    animation: marquee 10s linear infinite; /* 动画名称、持续时间、速度曲线、重复次数 */
}
@keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}
.kttv{
   width: 156rpx;
   height: 62rpx;
   background-size: 100%;
   position: absolute;
   right: 30upx;
   top: 38%;
   padding: 20upx 50upx;
   border-radius: 30upx;
   background: #ffffff;
   color: #333333;
   font-weight: 700;
   font-size: 28upx;
   box-shadow: 2px 2px 2px #d1233c;
   bottom: 10upx;
}
.auth-over-edu-tip{
   font-weight: 700;
   font-size: 32upx;
   letter-spacing: 5upx;
   margin-bottom: 14upx;
}
.auth-2{
   height: auto;
.kttv text{
   color: #ffffff;
   margin-left: 30upx;
   line-height: 62rpx;
}

.close-edu{
   position: absolute;
   width: 60upx;
   height: 60upx;
   right: 20upx;
   top: 20upx;
.ad1{
   width: 96%;
   margin: 0 auto;
   margin-top: 30rpx;
   height: 214rpx;
}
.ad1 image{
   width: 100%;
   height: 100%;
}

.ad2{
   width: 96%;
   margin: 30upx auto 30upx;
   height: 240rpx;
}
.ad2 image{
   width: 100%;
   height: 100%;
}
.d3-wrap {
   width: 96%;
   margin: 10upx auto 20upx;
   height: 216rpx;
   display: flex;
   align-items: center;
   justify-content: space-between;
   gap: 20rpx;
}
.ad3{
   width: 50%;
   height: 216rpx;
}
.ad3 image{
   width: 100%;
   height: 100%;
}
.ad4 image{
   width: 100%;
   height: 100%;
}
.ad4 {
   width: 50%;
   height: 216rpx;
}

.ca-ad{
   width: 96%;
   margin: 10upx auto 20upx;
   height: 200rpx;
}
.ca-ad image{
   width: 100%;
   height: 100%;
}
.cGoods{
   width: 96%;
   margin: 0 auto 20upx;
   padding: 20rpx 0;
}
.scroll-view_H {
   white-space: nowrap;
   width: 100%;
   background-color: #eeeeee;
}

.scroll-view-item_H {
   display: inline-block;
   width: 25%;
   width: 200rpx;
   padding-top: 20rpx;
   text-align: center;
   font-size: 26rpx;
   padding: 20upx 0;
   font-size: 36rpx;
   background-color: #ffffff;
   margin-right: 20rpx;
   border-radius: 20rpx;
}
.scroll-view-v{
.scroll-view-item_H image{
   width: 118rpx;
   height: 128rpx;
}

.login-desc{
   display: flex;
   align-items: center;
   justify-content: center;
   width: 96%;
   position: fixed;
   left: 2%;
   bottom: calc(var(--window-bottom) + 20rpx);
   height: 100rpx;
   background: rgba(0,0,0,0.7);
   border-radius: 106rpx 106rpx 106rpx 106rpx;
}
.scroll-icon{
   width: 40upx;
   height: 40upx;
   border-radius: 30upx;
   margin-right: 10upx;
.login-icon{
   margin-left: 20rpx;
   width: 90rpx;
   height: 90rpx;
   margin-right: 30rpx;
}
::-webkit-scrollbar {
  width: 0px !important; /* 滚动条宽度 */
}
/* 设置滚动条宽度 */
.uni-scroll-view::-webkit-scrollbar {
  width: 0px !important; /* 滚动条宽度 */
}
.scroll-active{
   background-color: #ffb16e;
.login-font{
   width: 55%;
   font-size: 26rpx;
   color: #ffffff;
}
.login-btn{
   width: 156rpx;
   height: 54rpx;
   text-align: center;
   color: #ffffff;
   line-height: 54rpx;
   background: #37AA25;
   border-radius: 62rpx 62rpx 62rpx 62rpx;
}
.c-goods{
   background-color: #f5f5f5;
}