page { background-color: #f7f7f7; } /* 自定义标题栏 start */ .header { position: fixed; width: 100%; top: 0; left: 0; z-index: 999; } .header .header-bg { width: 100%; height: 100%; position: absolute; z-index: 10; left: 0; top: 0; } .header .navigation { display: flex; align-items: center; position: relative; z-index: 100; } .header .navigation .goback { width: 40rpx; padding-left: 14rpx; display: flex; align-items: center; justify-content: center; height: 100%; } .header .navigation .goback image { width: 16rpx; height: 28rpx; } .header .navigation .title { display: flex; align-items: center; width: calc(100% - 46rpx); margin-left: 46rpx; color: rgba(255, 255, 255, 0.9); font-size: 32rpx; letter-spacing: 2rpx; } /* 自定义标题栏 end */ .top { width: 100%; } .top-bg { width: 100%; height: 280rpx; box-sizing: border-box; padding-top: 16rpx; position: relative; } .top-bg .top-bg-img { width: 100%; height: 110%; position: absolute; top: 0; left: 0; } .top-bg .top-text { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 10; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 30rpx; box-sizing: border-box; } .top-bg .top-text .top-text-title { font-size: 52rpx; color: #ffffff; margin-bottom: 48rpx; } .top-bg .top-text .top-text-desc { font-size: 30rpx; color: #ffffff; overflow: hidden; text-overflow: ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; } .top-bg .top-button { width: 140rpx; height: 60rpx; position: absolute; right: 0; z-index: 11; } /* tab bar start */ .tab-bar { width: 100%; height: 90rpx; background: #fff; display: flex; justify-content: space-around; position: relative; padding: 0 40rpx; box-sizing: border-box; border-radius: 16rpx 16rpx 0rpx 0rpx; margin-bottom: 18rpx; } .tab-bar .tab { flex: 1; height: 90rpx; line-height: 90rpx; text-align: center; width: 50%; font-size: 32rpx; font-weight: 500; color: rgba(153, 153, 153, 1); } .tab-bar .select-tab { color: #E50F00; font-size: 32rpx; font-weight: bold; } .tab-bar .select-bar { width: 40rpx; height: 8rpx; border-radius: 5rpx; background: #E50F00; position: absolute; bottom: 0rpx; } .tab-bar .select-bar.tab1 { left: 25%; transition: left linear 0.4s; } .tab-bar .select-bar.tab2 { left: calc(75% - 35rpx); transition: left linear 0.4s; } /* tab bar end */ .content .team-member-list { display: flex; padding: 0 25rpx; } .team-member-list .member-item { width: 320rpx; min-height: 282rpx; margin: 20rpx 15rpx; display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #fff; border-radius: 20rpx; } .member-item .member-img { width: 110rpx; height: 110rpx; background-color: #909090; margin-top: 40rpx; border-radius: 50%; } .member-item .member-name { font-size: 30rpx; color: #333333; margin-top: 20rpx; } .member-item .member-intro { font-size: 26rpx; color: #c1c1c1; margin: 18rpx 0 36rpx; width: 85%; text-align: center; /* overflow: hidden; text-overflow: ellipsis; word-wrap:break-word; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; display: -webkit-box; */ }