%paddBox { margin-top: 20rpx; border-radius: 10rpx; padding: 30rpx 20rpx; box-sizing: border-box; background-color: #fff; } %title { border-bottom: 1rpx solid #ccc; font-size: 30rpx; color: #000; font-weight: 600; padding-bottom: 20rpx; } .establish { width: 100vw; min-height: 100vh; background-color: #f5f5f5; .establish-box { padding: 30rpx; box-sizing: border-box; // margin-bottom: 130rpx; .business-card { width: 100%; height: 400rpx; background-color: aquamarine; border-radius: 20rpx; } .business-style { @extend %paddBox; .business-title { @extend %title; } .style-list { margin-top: 20rpx; @include flex(space-between, null, 20rpx); .style-item { flex: 1; position: relative; .style-icon { position: absolute; right: 16rpx; bottom: 16rpx; image { width: 24rpx; height: 24rpx; } } & > image { width: 100%; height: 135rpx; } } } } .basic-info { @extend %paddBox; .info-title { border-bottom: 1rpx solid #ccc; font-size: 30rpx; color: #000; font-weight: 600; padding-bottom: 20rpx; } } .contact-mode { @extend %paddBox; .mode-title { @extend %title; } } .personal-brief { @extend %paddBox; .brief-title { @extend %title; } } .company-brief { @extend %paddBox; margin-bottom: calc(112rpx + constant(safe-area-inset-bottom)); margin-bottom: calc(112rpx + env(safe-area-inset-bottom)); .company-title { @extend %title; } } } .footer { position: fixed; left: 0; bottom: 0; z-index: 2; width: 100vw; margin-top: 24rpx; padding-bottom: constant(safe-area-inset-bottom); //兼容 IOS<11.2 padding-bottom: env(safe-area-inset-bottom); //兼容 IOS>11.2 background-color: #ffffff; .btn-list { width: 100%; height: 112rpx; padding: 0 30rpx; box-sizing: border-box; @include flex(space-between, null, null); view { width: 333rpx; height: 88rpx; border-radius: 16rpx; font-size: 28rpx; text-align: center; line-height: 88rpx; &:nth-of-type(1) { color: #1472ff; border: 2rpx solid #1472ff; box-sizing: border-box; } &:nth-of-type(2) { background-color: #1472ff; color: #ffffff; } } } } }