page{ /* background: linear-gradient(#f94b0e,#fff); */ background: #f2f2f2; display: flex; flex-direction: column; justify-content: flex-start; } .img { width: 100%; } .container{ background: #fff; border-top-left-radius: 45rpx; } /* 导航 */ .nav-bar { position: fixed; width: 100%; top: 0; color: rgb(255, 255, 255); /* background: rgb(255, 255, 255); */ z-index: 10000; height: 160rpx; text-align: center; } .nav-barback{ width: 100%; position: relative; top: 0; z-index: 10001; height: 160rpx; line-height: 230rpx; color: #fff; font-size: 38rpx; } .nav-bar-img{ width: 100%; height: 100%; } .nav-bar .search { width: 60%; color: #333; font-size: 14px; background: #fff; position: absolute; border-radius: 100px; background: rgb(255, 255, 255); padding-left: 14px; z-index: 10002; } .bg{ height: 500rpx; position: absolute; top:0rpx; width: 100%; z-index: -1; background-color: #fb4514; } .bg .img{ height: auto; margin-top: 158rpx; } .head_banner .img{ height: auto; border: 0px; border-radius: 10rpx; } .nav { display: flex; flex-direction: row; padding: 60rpx 30rpx 20rpx 30rpx; justify-content:space-around; } .nav .item{ display: flex; flex-direction: column; text-align: center; } .nav .item text{ margin-top: 10rpx; font-size: 34rpx; color: rgba(0, 0, 0, 0.9); } .nav .item .img{ width: 100rpx; height: 100rpx; } /* 新手指南 使用攻略 */ .top_banner{ background: #fff; width: auto; text-align: center; display: grid; padding: 20rpx 0; position: relative; } .top_banner p{ font-size: 20rpx; height: 60rpx; line-height: 60rpx; color: rgba(0, 0, 0, 0.5); padding-top: 20rpx; } .top_banner h1{ font-size: 55rpx; height: 60rpx; line-height: 60rpx; color: rgba(0, 0, 0, 0.9); font-weight: 500; } .top_banner span{ font-size: 20rpx; height: 40rpx; line-height: 40rpx; color: #d2d2d2; } .top_banner_btn{ position: absolute; top:3%; padding: 0; margin: 0; display: grid; justify-content:space-around; background: none; } .top_banner .xszn{ left:10% ; top:43%; } .top_banner .sygl{ right:10% ; top:44%; } .top_banner .xszn span{ background-image:-webkit-linear-gradient(right,#ff2e56,#d260a8); color: #fff; padding: 5rpx 20rpx; border-radius: 50rpx; font-size: 26rpx; } .top_banner .xszn i{ color: rgb(14, 211, 211); font-size: 24rpx; padding: 8rpx 0; } .top_banner .sygl span{ border-radius: 50rpx; border: 4rpx solid #3076f7; color: #3076f7; padding: 5rpx 20rpx; font-size: 24rpx; } .tzgg{ display: flex; flex-direction: row; align-items: center; height: 120rpx; line-height: 120rpx; padding: 0rpx 30rpx; border-bottom: 2px solid #eee; } .tzgg .img{ width: 10%; margin-right: 20rpx; display: flex; align-items: center; justify-content: center; } .tzgg .img image{ width: 60rpx; height: 60rpx; } .tzgg b{ font-size: 32rpx; color: #181818; padding-right: 5rpx; } .tzgg text{ width: 75%; font-size: 32rpx; color: #181818; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; } .tzgg .more{ width: 15%; margin-left:auto; font-size: 28rpx; color: #7b7b7b; text-align: right; } .con_banner .img{ height: auto; } .yjtd_vi{ display: flex; flex-direction: column; } .yjtd_vi .tittle{ display: flex; flex-direction: row; align-items: center; height: 100rpx; line-height: 100rpx; border-bottom: 2rpx solid #f5f5f5; } .yjtd_vi .tittle .img{ width: 60rpx; height: 60rpx; padding: 5rpx 14rpx; } .yjtd_vi .tittle span{ font-size: 38rpx; color: #181818; margin-right: 30rpx; font-weight: 500; } .yjtd_vi .tittle u{ font-size: 26rpx; color: #7b7b7b; } .yjtd_icon{ display: flex; flex-direction: row; flex-wrap: wrap; padding: 20rpx 20rpx; } .yjtd_icon .icon_vi{ display: flex; flex-direction: column; align-items: center; margin:20rpx 29.9rpx; } .yjtd_icon .icon_vi .icon_bg{ width: 120rpx; height: 120rpx; border-radius: 50%; } .yjtd_icon .icon_vi .icon_bg i{ color: #fff; align-items: center; font-size: 70rpx; justify-content:center; align-items: stretch; display: flex; line-height: 120rpx; } .yjtd_icon .icon_vi .icon_xg{ background: #ffb05b; } .yjtd_icon .icon_vi .icon_xj{ background: #6467f0; } .yjtd_icon .icon_vi .icon_yj{ background: #07c160; } .yjtd_icon .icon_vi .icon_hy{ background: #fa5151; } .yjtd_icon .icon_vi .icon_wz{ background: #95ec69; } .yjtd_icon .icon_vi .icon_ck{ background: #1485ee; } .yjtd_icon .icon_vi .icon_dw{ background: #ffc300; } .yjtd_icon .icon_vi text{ font-size: 34rpx; height: 80rpx; line-height: 80rpx; color: #181818; } /* 轮播图 */ swiper { height: 200rpx; width: 100%; } swiper-item { height: 100%; width: 100%; } .slide-image{ height: 100%; width: 100%; } .fg_line{ width: 100%; height: 20rpx; } .fg_line image{ width: 100%; height: 100%; }