@charset "UTF-8"; /** * 下方引入的为uView UI的集成样式文件,为scss预处理器,其中包含了一些"u-"开头的自定义变量 * uView自定义的css类名和scss变量,均以"u-"开头,不会造成冲突,请放心使用 */ .uni-forms-item__content { display: flex; align-items: center; } .u-tag__text { font-size: 22rpx; padding: 0 10rpx; } page { width: 100%; height: 100%; font-size: 28rpx; background: #F5F8F5; color: #00231C; } .page1 { width: 100%; height: 100%; font-size: 28rpx; } .container { width: 100%; height: 100vh; } .swiper-container { width: 100%; height: 100%; } .swiper-page { width: 100%; height: 100%; } .swiper { width: 100%; height: 500rpx; z-index: 99 !important; } .swiper ._img { width: 100%; height: 100%; z-index: 99 !important; } .order-msg-box { width: 90%; height: 146rpx; border-radius: 40rpx; border: 2px solid #A6FFEA; background: #fff; z-index: 999; position: absolute; left: 5%; bottom: 0; display: flex; } .order-msg-left { width: 20%; height: 100%; } .order-msg-left ._img { width: 75%; height: 65%; margin: 17% 0 0 15%; } .order-msg-center { width: 50%; height: 100%; display: flex; flex-direction: column; padding-left: 5%; } .order-msg-right { width: 30%; height: 100%; } .order-msg-right ._img { width: 80%; height: 56%; margin: 15% 0 0 10%; } .tabbar { width: 100%; height: 100rpx; background-color: #ffffff; display: flex; flex-direction: row; justify-content: space-around; align-items: center; border-top: 1rpx solid #eee; box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05); z-index: 100; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; flex: 1; position: relative; } .tab-text { font-size: 28rpx; color: #666; transition: color 0.3s; } .tab-item.active .tab-text { color: #007aff; font-weight: bold; } .tab-indicator { position: absolute; bottom: 10rpx; width: 40rpx; height: 4rpx; background-color: #007aff; border-radius: 2rpx; -webkit-animation: indicatorScale 0.3s ease; animation: indicatorScale 0.3s ease; } @-webkit-keyframes indicatorScale { 0% { -webkit-transform: scaleX(0.5); transform: scaleX(0.5); opacity: 0; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } @keyframes indicatorScale { 0% { -webkit-transform: scaleX(0.5); transform: scaleX(0.5); opacity: 0; } 100% { -webkit-transform: scaleX(1); transform: scaleX(1); opacity: 1; } } /* 滑动动画效果增强 */ .swiper-item { display: flex; justify-content: center; align-items: center; } /* 如果需要自定义滑动动画,可以添加以下样式 */ .swiper-container .uni-swiper-wrapper { transition-timing-function: cubic-bezier(0.25, 0.46, 0.45, 0.94); } /* 响应式调整 */ @media (min-width: 768px) { .container { max-width: 750px; margin: 0 auto; } } .menu-box { width: 100%; height: 160rpx; display: flex; margin-top: 80rpx; } .menu-list { flex: 1; } .menu-list ._img { width: 70%; height: 70%; display: block; margin: 0 auto; } .menu-name { text-align: center; font-size: 24rpx; font-weight: 700; margin-top: 15rpx; } .like-box, .daimai-box { width: 95%; margin: 20rpx auto; } .daimai-tab { display: flex; height: 60rpx; line-height: 60rpx; } .like-title { width: 218rpx; height: 64rpx; } .like-title ._img { width: 100%; height: 100%; background-size: 100%; } .like-content-box { height: 400rpx; background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/6d65d349d68f40e7886c978190b6ea33.png") no-repeat; background-size: 100%; margin-top: 20rpx; display: flex; } .like-left { width: 45%; background: #fff; border-radius: 20rpx; height: 340rpx; margin: 50rpx 0 0 3.3%; } .like-content-title { width: 100%; height: 70rpx; position: relative; line-height: 70rpx; padding: 0 10rpx; } .like-content { display: flex; flex-direction: column; } .content-list { display: flex; margin-bottom: 10rpx; } .list-img { width: 37%; height: 120rpx; padding: 10rpx; position: relative; } .list-img ._img { width: 100%; height: 100%; } .list-product { width: 60%; padding-top: 2px; } .list-name { height: 60rpx; line-height: 28rpx; } .list-type { display: inline; font-size: 18rpx; padding: 4rpx 6rpx; background: #A6FFEA; border-radius: 5rpx; position: absolute; top: 10rpx; left: 10rpx; } .list-text { display: inline; font-size: 22rpx; font-weight: 700; } .list-price { color: #777; font-size: 20rpx; text-decoration: line-through; } .list-total { font-size: 20rpx; } .list-1 { width: 98%; height: 500rpx; background: #fff; border-radius: 20rpx; margin: 20rpx auto 0; overflow: hidden; } .daoda-time { width: 284rpx; height: 48rpx; font-size: 24rpx; font-weight: 700; border-radius: 10rpx; line-height: 48rpx; text-align: center; background: rgba(166, 255, 234, 0.3); margin: 20rpx 0 20rpx 20rpx; } .shangjia { width: 100%; height: 70rpx; margin: 0 auto; line-height: 70rpx; padding-left: 28rpx; display: flex; } .maotou { width: 90rpx; background: url("https://jewel-shop.oss-cn-beijing.aliyuncs.com/a1584a13e9db4b6fbcc66890219d0018.png") no-repeat; height: 90rpx; background-size: 100%; position: absolute; top: -60rpx; right: 40rpx; text-align: center; line-height: 90rpx; font-weight: 900; font-size: 24rpx; } .order-page { width: 95%; position: relative; height: 200rpx; border-radius: 40rpx; border: 1px solid #A6FFEA; margin: 0 auto; } .shangjialogo { width: 40rpx; height: 40rpx; margin: 8rpx 20rpx 0 28rpx; } .shangjialogo ._img { width: 100%; height: 100%; background-size: 100%; } .shangpin { display: flex; } .shangpintu { width: 120rpx; height: 120rpx; margin-left: 20rpx; } .shangpintu ._img { width: 100%; height: 100%; background-size: 100%; } .shangpinxinxi { padding: 0 20rpx; flex: 1; } .pinming { font-size: 24rpx; font-weight: 700; } .guige { font-size: 20rpx; height: 56rpx; line-height: 56rpx; color: #777; } .shuliang { font-size: 20rpx; display: flex; height: 40rpx; line-height: 40rpx; color: #777; } .qu-song { width: 95%; margin: 0 auto; font-size: 24rpx; } .qu-box { display: flex; } .qu-tu { width: 50rpx; height: 50rpx; } .qu-tu ._img { width: 100%; height: 100%; background-size: 100%; } .qu-text { display: flex; flex: 1; height: 50rpx; line-height: 50rpx; } .qu-left { width: 50%; padding-left: 10rpx; } .qu-right { width: 50%; text-align: right; padding-right: 10rpx; font-weight: 700; } .yongjin { height: 50rpx; display: flex; font-size: 24rpx; line-height: 50rpx; width: 95%; margin: 20rpx auto; } .qiangdan-btn { width: 95%; height: 50px; margin: 10px auto; } .qiangdan-btn ._img { width: 100%; height: 100%; background-size: 100%; }