.page{ height: 100%; background-color: #f9f9f9; } .postCon{ margin: 0 auto; margin-bottom: 20rpx; text-align: center; width: 90%; background-color: gray; border-radius: 20rpx; padding: 10rpx; color: white; } .main{ position: relative; .top { margin: 20rpx; // padding-top: 30rpx; display: flex; justify-content: space-between; image { width: 350rpx; height: 200rpx; } } } .head-search{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 20rpx; .search{ display: flex; align-items: center; width: 100%; padding: 0 20rpx; height: 72rpx; border: 2rpx solid #E8E8E8; border-radius: 100rpx; .icon{ display: flex; align-items: center; margin-right: 20rpx; image{ width: 29rpx; height: 29rpx; } } .hint{ display: flex; align-items: center; position: relative; width: 100%; .max{ font-size: 26rpx; color: #fff; background-color:#F15A29; border-radius: 100rpx; padding: 8rpx 25rpx; position: absolute; right: 0; } .min{ font-size: 26rpx; color: #B5B5B5; } } } } /* banner */ .banner{ height: 260rpx; overflow: hidden; margin-top: 20rpx; .screen-swiper{ height: 100%; min-height: 100% !important; image{ height: 260rpx; border-radius: 30rpx; } } } /* 菜单导航 */ .menu-nav{ position: relative; padding: 40rpx 30rpx; background-color: #fff; border-radius: 40rpx; .nav-list{ white-space: nowrap; .nav{ display: inline-block; display: flex; flex-direction: column; flex-wrap: wrap; justify-content: space-between; } .list{ display: flex; flex-direction: column; justify-content: center; align-items: center; width: 20%; margin-bottom: 20rpx; image{ width: 100rpx; height: 100rpx; } text{ font-size: 26rpx; color: #3D3D3D; margin-top: 10rpx; } } } .indicator{ position: absolute; left: 0; bottom: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 30rpx; .plan{ position: relative; width: 100rpx; height: 8rpx; border-radius: 8rpx; background-color: #e1e1e1; .bar{ position: absolute; width: 50%; height: 100%; border-radius: 6rpx; background-color: $base; } } } } /* 通知 */ .inform{ padding: 20rpx; .inform-info{ display: flex; height: 40rpx; .picture{ width: 8%; image{ width: 40rpx; height: 40rpx; } } .info{ width: 92%; height: 100%; .swiper{ width: 100%; height: 100%; .swiper-item{ display: flex; align-items: center; width: 100%; height: 100%; font-size: 28rpx; color: #848281; .mess-one-omit { display: flex; align-items: center; } .mess-icon { background-color: #6663FF; color: #fff; border-radius: 100rpx; padding: 4rpx 15rpx; font-size: 22rpx; margin-right: 10rpx; } .mess-img image { width: 22rpx; height: 22rpx; } } } } } } /* 今日上新 */ .new-product{ padding: 0 25rpx; .goods-list{ white-space:nowrap; width: 100%; overflow-y: hidden; overflow-x: auto; .list{ display:inline-block; width: 36%; margin-right: 20rpx; .pictrue{ width: 100%; height: 70%; image{ width: 550rpx; height: 150rpx; border-radius: 20rpx; border: 2rpx solid #0E7432; } } } } } /* 搜索 */ .search-head { display: flex; justify-content: center; align-items: center; width: 100%; /* #ifdef APP-PLUS */ // height: calc(120rpx + var(--status-bar-height)); /* #endif */ padding: 0 20rpx; .search { display: flex; align-items: center; width: 100%; height: 80rpx; background: rgba(255, 255, 255, 1); border: 0; border-radius: 30rpx; padding:0 25rpx; image { width: 34rpx; height: 34rpx; } text{ width: 2rpx; height: 24rpx; background-color:#D8D8D8; margin: 0 18rpx; } input { width: 58%; height: 100%; font-size: 28rpx; color: #646464; } } .btn { display: flex; align-items: center; justify-content: center; position: absolute; right: 30rpx; background-color: #D32D25; border-radius: 100rpx; padding: 12rpx 25rpx; text { font-size: 28rpx; color: #fff; } } } /* 记录列表 */ .title-screen { display: flex; align-items: center; background-color: #fff; border-radius: 20rpx 20rpx 0 0; padding: 0 0 0 30rpx; .title-screen-box { margin-right: 3.8%; color: #8D8D8D; display: inline-flex; flex-direction: column; position: relative; line-height: 50rpx; .line { width: 34rpx; height: 6rpx; background-color: #E60012; margin: 0 auto; } .red_line{ &::after{ content: ''; display: block; width: 34rpx; height: 6rpx; transition: all 2000ms linear; background-color: #E60012; margin: 0 auto; position: absolute; left: 50%; transform: translateX(-50%); top: 44rpx; } } image { width: 24rpx; height: 24rpx; margin-left: 10rpx; } .title-screen-box-btn { margin-top: 10rpx; width: 100rpx; image { width: 45rpx; height: 45rpx; } } } } .scrollview-box { white-space: nowrap; margin: 40rpx 0 10rpx 0; } .home-yellowbg { background: -webkit-gradient(linear, left top, right top, from(#fff), to(#f6d344)); background: -o-linear-gradient(bottom, #fff, #f6d344); background: linear-gradient(to bottom, #fff, #f6d344); height: auto; width: 100%; } .titleall-box { background-color: #fff; border-radius: 20rpx 20rpx 0 0; margin-top: 20rpx; //padding: 20rpx 0; .talen-title { font-size: 32rpx; font-weight: bold; display: flex; align-items: center; padding: 30rpx 30rpx 0 30rpx; .talen-line { width: 8rpx; height: 32rpx; background-color: #E60012; border-radius: 100rpx; display: inline-block; margin-right: 10rpx; } } .titleall-right { color: #fff; background-color: #0E7432; border-radius: 100rpx; font-size: 26rpx; padding: 6rpx 14rpx 6rpx 26rpx; image { width: 20rpx; height: 20rpx; margin-left: 6rpx; } } } /* 文章数据 */ .article-data{ width: 100%; background-color: #fff; .article-list{ padding: 30rpx; .list{ display: flex; width: 100%; background-color: #FFFFFF; border-radius: 20rpx; margin-bottom: 30rpx; padding: 20rpx; box-shadow: 0 0 20rpx 0 #e3e3e3; .item{ display: flex; flex-direction: column; justify-content: space-between; width: 68%; height: 100%; margin-right: 2%; .title{ display: flex; text{ color: #212121; font-size: 30rpx; line-height: 50rpx; } } .find-collect{ display: flex; align-items: center; .find{ display: flex; align-items: center; margin-right: 20rpx; .iconfont{ font-size: 34rpx; margin-right: 10rpx; } text{ color: #9FABB5; font-size: 28rpx; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; width: 450rpx; } } } .find-time { border-radius: 10rpx; background-color: #667FFF; padding: 6rpx 20rpx; text-align: center; display: inline-block; color: #fff; font-size: 28rpx; margin-top: 20rpx; } } .thumb{ color: #667FFF; font-weight: bold; text-align: right; width: 30%; .thumb-icon { margin-top: 60rpx; border-radius: 10rpx; background-color: #F7F7F7; padding: 6rpx 20rpx; text-align: center; margin-bottom: 50rpx; display: inline-block; } } } } }