@import "../../tabBar.wxss"; .topHead { position: relative; height: 500rpx; overflow: hidden; } .topHead .maskView1 { position: absolute; z-index: 1; left: 0; top: 0; width: 100%; height: 100%; background: #4c81e5; opacity: 87%; border-bottom-left-radius: 96rpx; border-bottom-right-radius: 96rpx; } .topHead .maskView2 { position: absolute; z-index: 2; right: 0; top: 187rpx; width: 446rpx; height: 452rpx; } .topHead .maskView3 { position: absolute; z-index: 3; left: 0; top: 0; width: 100%; height: 100%; background: #4c81e5; opacity: 85%; border-bottom-left-radius: 96rpx; border-bottom-right-radius: 96rpx; } .topHead .homeView{ position: absolute; z-index: 4; left: 40rpx; top: 100rpx; border-radius: 50rpx; width: 50rpx; height: 50rpx; display: flex; justify-content: center; align-items: center; background: #4b71be; } .topHead .title { position: absolute; z-index: 4; left: 50%; top: 120rpx; transform: translateX(-50%); font-size: 32rpx; color: #FFFFFF; line-height: 1rpx; text-align: left; } .topHead .contentView { position: absolute; z-index: 4; left: 0; top: 280rpx; padding-left: 58rpx; } .topHead .contentView .label1 { font-size: 47rpx; color: #FFFFFF; line-height: 1; } .topHead .contentView .label2 { font-size: 26rpx; color: #FFFFFF; line-height: 1; margin-top: 40rpx; } .logo { position: absolute; z-index: 999; left: 50%; top: 400rpx; transform: translateX(-50%); width: 210rpx; height: 210rpx; } .itemTitleView { border-left: 8rpx solid #76aef9; display: flex; justify-content: space-between; align-items: center; margin: 140rpx 50rpx 0; } .itemTitleView .title { margin-left: 10rpx; font-size: 28rpx; color: #141414; } .fixed { background: white; padding: 0 30rpx 240rpx 30rpx; display: flex; flex-wrap: wrap; /* border-radius: 20rpx; */ margin-bottom: 40rpx; } .fixedbox { width: 25%; text-align: center; margin-top: 40rpx; } .bot { border-bottom: 3rpx solid #f4f4f4; margin-bottom: 40rpx; } .newbox { background: white; padding: 10rpx 30rpx; margin-top: 20rpx; } .btn { position: absolute; top: 10%; right: 30rpx; color: white; background: #ffa200; padding: 0 40rpx; height: 62rpx; border-radius: 31rpx; text-align: center; line-height: 62rpx; } .gray { filter: grayscale(98%); filter: gray; } .loopView { position: relative; } .swiper-box { box-sizing: border-box; border-radius: 14rpx; height: 358rpx; margin: 0 22rpx; overflow: hidden; } .logoImg { position: absolute; left: 50rpx; top: 30rpx; width: 145rpx; height: 54rpx; z-index: 999; } .swiper-box .img { width: 100%; height: 100%; } /* 轮播小点点 */ .swiper-box .wx-swiper-dots.wx-swiper-dots-horizontal { margin-left: 36%; } .swiper-box .wx-swiper-dot { width: 20rpx; display: inline-flex; height: 5rpx; margin-left: 10rpx; justify-content: space-between; } .swiper-box .wx-swiper-dot::before { content: ''; flex-grow: 1; background: rgba(255, 255, 255, 0.8); border-radius: 0rpx } .swiper-box .wx-swiper-dot-active::before { background: #ff3333; } .swiper-box .wx-swiper-dot-active { width: 40rpx; } /* 外层组件的宽度可设置成100%或具体数值 */ .adContainer { width: 100%; } .menuImg { width: 132rpx; height: 134rpx; margin-left: 15rpx; } .menuTitle { font-size: 24rpx; color: #646466; }