page { background-color: #eeeeee; } .container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 100rpx; } .course_name { position: relative; margin-bottom: 35rpx; /* 组件下外边距 */ font-size: 50rpx; } .option { width: 400rpx; /* 根据需要调整宽度 */ height: 100rpx; /* 根据需要调整高度 */ border: 1px solid #000000; /* 边框颜色 */ border-radius: 15rpx; /* 圆角半径 */ background-color: #ffffff; /* 背景颜色 */ display: flex; align-items: center; justify-content: center; position: relative; font-size: 40rpx; margin-left: 120rpx; } .combition { display: flex; align-items: center; margin-top: 50rpx; /* 组件上外边距 */ } .right_image { margin-left: 40rpx; width: 100rpx; height: 100rpx; } .bottom_image { width: 600rpx; height: 600rpx; margin-top: 0rpx; /* 组件上外边距 */ } /* 隐藏内容样式 */ /*mask*/ .drawer_screen { width: 100%; height: 100%; position: fixed; top: 0; left: 0; z-index: 1000; background: #000; opacity: 0.5; overflow: hidden; } /*content*/ .animation_position{ display: flex; width:100%; justify-content: center; } .drawer_box{ overflow: hidden; position: fixed; /* top:80px; */ bottom: 400rpx; z-index: 1000; background: #FAFAFA; border-radius: 30rpx; width: 80%; } .drawer_title { padding: 30rpx; font: 20px "microsoft yahei"; text-align: center; } .btn { width: 100%; display: flex; align-items: center; justify-content: space-around; } .btn_no { width:50%; padding: 20rpx; font: 20px "microsoft yahei"; text-align: center; border-top: 1rpx solid #CBCBCB; border-right: 1rpx solid #CBCBCB; color: #40A4D6; } .btn_yes { width:50%; padding: 20rpx; font: 20px "microsoft yahei"; text-align: center; border-top: 1rpx solid #CBCBCB; border-left: 1rpx solid #CBCBCB; color: #40A4D6; } .input_group { margin-bottom: 40rpx; display: flex; flex-wrap: wrap; flex-direction: column; } .label { margin-bottom: 15rpx; position: relative; left: 8%; } .input { width: 80%; align-self: center; padding: 10px; border: 1rpx solid #ccc; border-radius: 15rpx; }