.page{ position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #f6f6f6; } .head-search{ display: flex; align-items: center; justify-content: space-between; position: relative; margin: 20rpx 24rpx; background-color: #FFFFFF; border-radius: 35rpx; padding: 0 10rpx; border: 2rpx solid #E8E8E8; .u-search { position: relative; } .u-btn { border: unset; border: 0px transparent; height: 46rpx; width: 88rpx; font-size: 24rpx; border-radius: 35rpx; } } .screen-list { display: flex; align-items: center; width: 100%; margin: 20rpx 0; padding: 0 20rpx; .zidong{ width: 160rpx; background-color: #3F9B6A; color: #fff; padding: 10rpx; border-radius: 30rpx; font-size: 24rpx; text-align: center; } .list { display: flex; justify-content: center; align-items: center; width: 25%; height: 100%; text { font-size: 26rpx; color: #555555; } image { width: 30rpx; height: 30rpx; margin-left: 10rpx; } } .action { text { color: $base; } } } .list-scorll { padding: 0 24rpx; } .listbox{ margin-bottom: 20rpx; display: flex; justify-content: space-between; padding: 18rpx; background-color:#fff; border-radius: 14rpx; .img{ width: 190rpx; height: 190rpx; border-radius: 14rpx; overflow: hidden; image{ width:100%; height: 100%; } } .info { width: calc(100% - 216rpx); margin-left: 26rpx; .title { width: 100%; font-size: 28rpx; line-height: 40rpx; font-weight: 700; white-space: nowrap; overflow : hidden; text-overflow: ellipsis; margin-bottom: 6rpx; } .info-item { font-size: 24rpx; line-height: 50rpx; } } } .page-footer{ position: fixed; left: 0; bottom: 0; width: 100%; height: 120rpx; background-color: #FFFFFF; padding: 20rpx 20rpx; padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); z-index: 999; .footer-buy{ display: flex; align-items: center; justify-content: space-between; width: 100%; height: 100%; .cart-add{ display: flex; align-items: center; justify-content: center; width: 100%; height: 70rpx; background-color: #3f9b6a; text{ font-size: 28rpx; color: #FFFFFF; } } } }