/* pages/user/service/index.wxss */ .top-box { padding: 20rpx 30rpx; padding-bottom: 50rpx; background: #0B898E; } .welcome-box { display: flex; align-items: flex-start; margin-bottom: 60rpx; } .welcome-box image { width: 80rpx; height: 80rpx; border-radius: 50%; flex-shrink: 0; } .welcome-bg { background: white; padding: 20rpx 30rpx; font-size: 26rpx; font-weight: 500; color: #333; flex: 1; margin-left: 30rpx; border-radius: 10rpx; } .type-item { line-height: 60rpx; border-radius: 30rpx; background: white; padding: 0 32rpx; color: #0B898E; font-size: 26rpx; margin-right: 20rpx; font-weight: bold; flex-shrink: 0; } .welcome-box .type-item:last-child { margin-right: 0; } .content { margin: 25rpx 34rpx; } .all-title { font-size: 30rpx; font-weight: bold; color: #333; } .types-list { font-size: 30rpx; font-weight: 500; color: #333; display: flex; overflow-x: auto; border-bottom: 1rpx solid #ccc; align-items: center; height: 112rpx; } .type { flex-shrink: 0; margin: 0 60rpx; line-height: 60rpx; position: relative; } .type.active { color: #0B898E; font-weight: bold; } .type.active::after { content: "1"; font-size: 0; display: block; position: absolute; width: 40rpx; height: 6rpx; border-radius: 3rpx; background: #0B898E; left: 50%; margin-left: -20rpx; bottom: 0; } .ques-item { height: 100rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #d8d8d8; } .ques-name { font-size: 30rpx; color: #333; font-weight: 500; flex: 1; } .ques-item .iconfont { flex-shrink: 0; margin-left: 20rpx; } .more-btn { text-align: center; min-width: 300rpx; width: fit-content; padding: 0 40rpx; line-height: 60rpx; background: rgba(11, 137, 142, 0); border: 1rpx solid #D8D8D8; border-radius: 30rpx; margin: 30rpx auto; font-size: 26rpx; color: #0B898E; font-weight: 500; }