page { background-color: #2a211e; } /* 标题 */ .makeTitle { text-align: center; position: relative; width: 100%; } .makeTitle-text { width: 100%; line-height: 300rpx; top: 25%; font-style:italic; left: 0; font-size: 80rpx; font-weight: 600; position: absolute; text-align: center; background-image:-webkit-linear-gradient(top,#fff0ea,#f5baa2,#982d00); -webkit-background-clip:text; -webkit-text-fill-color:transparent; } .makeTitle image { width: 100%; } /* 内容 */ .makeCont { width: 100%; padding: 20rpx 30rpx; box-sizing: border-box; } .makeOne { text-align: center; } .makeOne-img { width: 320rpx; height: 100rpx; display: block; margin: 0 auto; } .makeOne-cont { width: 100%; text-align: left; background-color: #fff; border: 22rpx #ffc3a9 solid; border-radius: 10rpx; padding: 30rpx 0 30rpx 10rpx; box-sizing: border-box; overflow: hidden; } .makeOne-label { border: 2rpx solid #dadada; width: calc(50% - 34rpx); border-radius: 10rpx; height: 76rpx; line-height: 70rpx; padding: 0 15rpx; box-sizing: border-box; margin: 0 15rpx; float: left; display: flex; font-size: 28rpx; } .makeOne-label.active { border-color: #cf211c; color: #cf211c; } .makeOne-label text { flex: 1; display: inline-block; } .makeOne-label radio { transform:scale(.7); } radio .wx-radio-input.wx-radio-input-checked { border-color: #cf211c !important; background : #cf211c !important; } /* 列表 */ .makeTwo { margin: 50rpx 0; } .makeTwo-img { width: 320rpx; height: 140rpx; position: relative; text-align: center; margin: 0 auto; } .makeTwo-img image { width: 100%; height: 100%; display: block; } .makeTwo-img text { position: absolute; width: 100%; color: #2a211e; left: 0; top: 36rpx; font-weight: 600; font-size: 30rpx; } .makeTwo-title { padding: 0 20rpx; font-size: 28rpx; color: #982e00; font-weight: 600; margin-bottom: 30rpx; } .makeTwo-list { width: 100%; padding: 0 15rpx; box-sizing: border-box; } .makeTwo-label { margin-bottom: 30rpx; background-color: #efefef; padding: 20rpx; box-sizing: border-box; border-radius: 10rpx; display: flex; position: relative; } .makeTwo-label::after { position: absolute; border-radius: 10rpx; content: ''; width: calc(100% - 20rpx); left: 8rpx; top: 8rpx; height: calc(100% - 20rpx); border: 2rpx solid #dadada; } .makeTwo-label.active { background: #fff6e1; } .makeTwo-label.active::after { border-color: #f9cc7e; } .makeTwo-label:last-child { margin: 0; } .makeTwo-left { position: relative; width: 140rpx; height: 110rpx; border-radius: 10rpx; overflow: hidden; } .makeTwo-left-img, .makeTwo-left-cont { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .makeTwo-left-cont { z-index: 2; text-align: center; color: #7e7e7e; } .makeTwo-left-cont.active { color: #d79300; } .makeTwo-left-tips { margin: 10rpx 0 5rpx; font-size: 24rpx; } .makeTwo-left-price { font-size: 24rpx; } .makeTwo-left-price text { font-size: 42rpx; padding-right: 10rpx; font-weight: 600; } .makeTwo-right { position: absolute; width: 100%; left: 0; top: 30rpx; padding-left: 180rpx; box-sizing: border-box; font-size: 26rpx; } .makeTwo-right-title, .makeTwo-right-text { color: #7e7e7e; } .makeTwo-right-title { font-size: 30rpx; font-weight: 600; margin-bottom: 15rpx; } .makeTwo-right.active .makeTwo-right-title { color: #df3f28; } .makeTwo-right.active .makeTwo-right-text { color: #a45b0e; } .makeTwo-checked { position: absolute; top: 0; right: 0; width: 40rpx; height: 40rpx; z-index: 2; display: none; } .makeTwo-checked image { width: 100%; height: 100%; } .makeTwo-checked.active { display: block; } .makeForm { padding: 0 20rpx; box-sizing: border-box; } .makeForm input { border: none; background-color: #ececec; border-radius: 50rpx; padding: 0 30rpx; box-sizing: border-box; height: 80rpx; line-height: 80rpx; display: block; margin-bottom: 30rpx; font-size: 28rpx; } .makeForm button { display: block; margin-top: 40rpx; border: none; font-size: 30rpx; border-radius: 50rpx; width: 100% !important; padding: 0; height: 80rpx; line-height: 80rpx; background: linear-gradient(to left, #fd664d, #f28c29); color: #fff; } .makeOne-tel { width: 100%; text-align: center; color: #fff; font-size: 28rpx; margin-bottom: 30rpx; } .makeOne-tel-btn { color: #ffa751; margin-top: 20rpx; }