page{ background-color: #EEEBEC; font-size: 24upx; } .status_bar { height: var(--status-bar-height); width: 100%; } .index-top{ background: url(@/static/imgs/index-bg.png) no-repeat; background-size: 100% 100%; width: 100%; } .index-title{ padding: 30rpx 0; display: flex; } .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; } .search{ width: 100%; display: flex; margin-top: 20upx; margin-bottom: 30upx; } .search-1{ width: 76%; display: flex; justify-content: center; align-items: center; } .search-1 input{ width: 76%; height: 72rpx; background: #FFFFFF; border-radius: 50rpx; padding-left: 14%; font-size: 26upx; } .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; } .swiper, .swiper image{ width: 100%; height: 278rpx; border-radius: 32rpx; } .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; } .cates-v{ float: left; width: 20%; border-radius: 50%; margin-bottom: 0upx; } .cates-v-icon{ width: 80upx; height: 80upx; display: block; margin: 40upx auto 20upx; border-radius: 50%; } .cates-v view{ 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; } .goods-main-title{ padding: 20upx; display: flex; align-items: center; margin-bottom: 10upx; } .goods-main-icon{ width: 70upx; height: 70upx; margin-right: 20upx; border-radius: 10upx; } .goods-main-title text{ font-size: 30upx; color: #333333; font-weight: 700; } .goods-icon{ 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; } .goods-item{ width: 48%; border-radius: 18upx; background-color: #fbf8f8; margin-bottom: 30upx; } .goods-icon{ 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; } .goods-price .red{ font-size: 26upx !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; /* 使用省略号 */ } .more{ position: absolute; right: 10upx; display: flex; justify-content: center; align-items: center; } .more image{ width: 36upx; height: 36upx; margin-right: 30rpx; } .lingqu{ 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; } .lingquMain{ width: 70%; height: auto; position: absolute; top: 35%; left: 15%; } .lingquMain image{ width: 100%; border-radius: 20upx; } .auth{ width: 94%; margin: 30upx auto; height: 240upx; } .auth image{ width: 100%; height: 100%; border-radius: 20upx; } @keyframes floatUp { from { transform: translateY(100%); /* 从元素原始位置向下移动100% */ opacity: 0; /* 初始透明度为0 */ } to { transform: translateY(0); /* 移动到原始位置 */ opacity: 1; /* 完全不透明 */ } } .popup-content { 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-view2{ border-radius: 30upx !important; } .edu-icon-succ{ width: 140upx; height: 140upx; display: block; margin: 50upx auto; } .edu-icon-fail{ width: 200upx; height: 100upx; display: block; margin: 50upx auto; } .edu-view-desc2{ 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; } .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; } .auth{ position: relative; } .auth-over{ background: linear-gradient(#e58585, #d19323); width: 100%; height: 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{ font-weight: 700; font-size: 80upx; letter-spacing: 5upx; margin-bottom: 14upx; } .auth-over-btn{ 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; } .auth-over-edu-tip{ font-weight: 700; font-size: 32upx; letter-spacing: 5upx; margin-bottom: 14upx; } .auth-2{ height: auto; } .close-edu{ position: absolute; width: 60upx; height: 60upx; right: 20upx; top: 20upx; } .scroll-view_H { white-space: nowrap; width: 100%; background-color: #eeeeee; } .scroll-view-item_H { display: inline-block; width: 25%; text-align: center; font-size: 26rpx; padding: 20upx 0; } .scroll-view-v{ display: flex; align-items: center; justify-content: center; } .scroll-icon{ width: 40upx; height: 40upx; border-radius: 30upx; margin-right: 10upx; } ::-webkit-scrollbar { width: 0px !important; /* 滚动条宽度 */ } /* 设置滚动条宽度 */ .uni-scroll-view::-webkit-scrollbar { width: 0px !important; /* 滚动条宽度 */ } .scroll-active{ background-color: #ffb16e; color: #ffffff; }