page { background-color: #ffffff; } .page { background-color: #ffffff; } .topbg { } .topBody { width:750rpx; } .list_info { display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff; width:750rpx; .name { width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start; color:#333;font-size: 28rpx;margin-top: 20rpx; .right { font-size: 28rpx; color: #FF2A95; } } .desc { width:690rpx;display: flex;flex-direction: row;justify-content: space-between;align-items: flex-start; color:#999;font-size: 24rpx;margin-top: 20rpx; } .item { width: 690rpx;height: 84rpx;margin-top: 20rpx; background: #ffffff;position: relative; border-radius: 24rpx 24rpx 24rpx 24rpx; input { width:100%;height:100%;padding-left: 20rpx;font-size: 28rpx;color:#333; border:solid 1px #f0f0f0;border-radius: 12rpx; } .btn { position: absolute;right:20rpx;top:0rpx; font-weight: 400; font-size: 28rpx;line-height: 84rpx; color: #FF2A95; } .arrow { width:36rpx;position: absolute;right:20rpx;top:24rpx; } } .bcenter { display: flex;flex-direction: row;justify-content: center;align-items: center;margin-top: 20rpx; .avator { width: 172rpx;position: relative; .img { width:172rpx;height:172rpx;border-radius: 86rpx; } .photo { width:48rpx;position: absolute;bottom:0;right:0; } } } .item2 { width: 690rpx;height: 84rpx;margin-top: 20rpx; display: flex;flex-direction: row;justify-content: center;align-items: center; .sex { width: 334rpx;height: 84rpx; background: #ffffff; border-radius: 24rpx; border: 2rpx solid #282828;color:#999; display: flex;flex-direction: row;justify-content: center;align-items: center; } .active { border: 4rpx solid #FF2A95;color:#FF2A95; } .sex2 { image { width:172rpx; } } } .itemSex { width: 690rpx;margin-top: 20rpx; display: flex;flex-direction: row;justify-content: center;align-items: center; .sex2 { display: flex;flex-direction: column;justify-content: flex-end;align-items: center; width:210rpx;height:210rpx; text { color:#999; } image { width:132rpx;height:132rpx; } } .active { text { color:#fff; } image { border: 4rpx solid #36D6FF;border-radius: 172rpx;width:172rpx;height:172rpx; } } } .itemSingle { width: 690rpx;height: 84rpx;margin-top: 20rpx; display: flex;flex-direction: row;justify-content: center;align-items: center; .slider { width: 100%; } } .itemXL { width: 690rpx; } .item_tag { display: flex;flex-direction: row;justify-content: flex-start;align-items: center; flex-wrap: wrap;width: 690rpx;padding:20rpx; .tag { border-radius: 12rpx;margin-right: 10rpx;margin-top:10rpx;padding:0rpx 20rpx;height:60rpx; border: 2rpx solid #e0e0e0;color:#333; display: flex;flex-direction: row;justify-content: center;align-items: center; .close { width:36rpx;margin-left:10rpx; } } .active { border-radius: 20rpx; border: 2rpx solid #FF5967; } .addNew { margin-right: 10rpx;margin-top:10rpx;padding:0rpx 20rpx;height:60rpx;border-radius: 12rpx;background: #959595;color:#fff; display: flex;flex-direction: row;justify-content: center;align-items: center; } } .title { font-size: 36rpx; font-weight: bold; color: #333; text-align: center; margin-top: 40rpx; width: 100%; } .subtitle { font-size: 28rpx; color: #959595; text-align: center; margin-top: 20rpx; width: 100%; } .phone_input { width: 690rpx; height: 84rpx; margin-top: 40rpx; background: #ffffff; border-radius: 24rpx; display: flex; align-items: center; .area_code { padding: 0 20rpx; font-size: 28rpx; color: #333; border-right: 1rpx solid #e0e0e0; } .input { flex: 1; height: 100%; padding-left: 20rpx; font-size: 28rpx; color: #333; } } .code_input { width: 690rpx; height: 84rpx; margin-top: 20rpx; background: #ffffff; border-radius: 24rpx; display: flex; align-items: center; .input { flex: 1; height: 100%; padding-left: 20rpx; font-size: 28rpx; color: #333; } .btn { padding: 0 30rpx; font-size: 28rpx; color: #FF2A95; &.disabled { color: #999; } } } } .list_info2 { display: flex;flex-direction: column;justify-content: flex-start;align-items: center;color:#fff; width:750rpx; .item { width: 690rpx;height: 84rpx;margin-top: 10rpx;color:#fff;font-size: 28rpx; display: flex;flex-direction: row;justify-content: space-between;align-items: center; border-bottom: solid 0px #393939; text { } .arrow { width:36rpx; } .desc { color:#fff; } } .tips { padding:30rpx;color:#959595; } } .btn_submit { width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx; background: rgb(85, 85, 85); border-radius: 50rpx;font-weight: bold;font-size: 32rpx;color: #FFFFFF; display: flex;flex-direction: row;justify-content: center;align-items: center; } .btn_list { width: 660rpx;height: 96rpx;position: fixed;bottom:50rpx;left:45rpx; display: flex;flex-direction: row;justify-content: space-between;align-items: center; .btn_submit1 { width: 326rpx;height: 96rpx;border: 2rpx solid #D0D0D0; border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #959595; display: flex;flex-direction: row;justify-content: center;align-items: center; } .btn_submit2 { width: 312rpx;height: 96rpx; background: linear-gradient( 142deg, #FF5967 0%, #FF2A95 100%); border-radius: 28rpx;font-weight: normal;font-size: 32rpx;color: #FFFFFF; display: flex;flex-direction: row;justify-content: center;align-items: center; } } .picker-view { width: 690rpx; height: 400rpx; margin-top: 20rpx; background-color: #00000000; } .itemXll { line-height: 100rpx; text-align: center; } .selectLine { background: #80404040;border-radius: 24rpx;height:100rpx;border:0;border-top:0; } // 给中间选中行添加border-radius ::v-deep .itemXll .selectLine { border-radius: 0 16rpx 16rpx 0; } ::v-deep .itemXll .selectLine { border-radius: 16rpx 0 0 16rpx; } // 修改原有的上下边框颜色 ::v-deep .selectLine::after { border-bottom: 0rpx solid #000; } ::v-deep .selectLine::before { border-top: 0rpx solid #000; } .blankHeight { height:300rpx; } .info_card { width: 690rpx;min-height:120rpx; background: #ffffff; border-radius: 24rpx; padding: 0; margin-top: 0rpx; box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.08); .info_item { height: 100rpx; display: flex; align-items: center; padding: 0 30rpx; border-bottom: 1rpx solid #f5f5f5; &:last-child { border-bottom: none; } .label { width: 120rpx; font-size: 28rpx; color: #333; } .content { flex: 1; display: flex; align-items: center; justify-content: flex-end; input { text-align: right; font-size: 28rpx; color: #333; } .arrow { width: 36rpx; margin-left: 10rpx; } } } } .section_title { font-size: 32rpx; font-weight: bold; color: #333; margin: 30rpx 0 20rpx 30rpx; width: 690rpx; }