|
|
@@ -183,8 +183,7 @@
|
|
|
</el-checkbox-group>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="baseRight">
|
|
|
- <!-- 移动端样式展示 -->
|
|
|
+ <!-- <div class="baseRight">
|
|
|
<header>乐团注册</header>
|
|
|
<div class="section">
|
|
|
<h2 class="title line_bottom">课程</h2>
|
|
|
@@ -227,7 +226,7 @@
|
|
|
<a>购买</a>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
</div>
|
|
|
</template>
|
|
|
<script>
|
|
|
@@ -383,196 +382,196 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .baseRight {
|
|
|
- width: 375px;
|
|
|
- margin-left: 25px;
|
|
|
- header {
|
|
|
- width: 375px;
|
|
|
- height: 40px;
|
|
|
- line-height: 40px;
|
|
|
- color: #000;
|
|
|
- font-size: 14px;
|
|
|
- background: #fff;
|
|
|
- box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
|
|
|
- text-align: center;
|
|
|
- margin-bottom: 6px;
|
|
|
- }
|
|
|
- .section {
|
|
|
- width: 375px;
|
|
|
- padding: 16px 22px 10px;
|
|
|
- background: #fff;
|
|
|
- margin-bottom: 10px;
|
|
|
- .line_bottom {
|
|
|
- border-bottom: 1px solid #ededed;
|
|
|
- }
|
|
|
- > .title {
|
|
|
- font-size: 20px;
|
|
|
- line-height: 28px;
|
|
|
- font-weight: bold;
|
|
|
- }
|
|
|
- .indate {
|
|
|
- font-size: 12px;
|
|
|
- padding: 5px 0;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- span {
|
|
|
- color: #fa101d;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .baseRight {
|
|
|
+ // width: 375px;
|
|
|
+ // margin-left: 25px;
|
|
|
+ // header {
|
|
|
+ // width: 375px;
|
|
|
+ // height: 40px;
|
|
|
+ // line-height: 40px;
|
|
|
+ // color: #000;
|
|
|
+ // font-size: 14px;
|
|
|
+ // background: #fff;
|
|
|
+ // box-shadow: 0px 1px 8px 0px rgba(0, 0, 0, 0.07);
|
|
|
+ // text-align: center;
|
|
|
+ // margin-bottom: 6px;
|
|
|
+ // }
|
|
|
+ // .section {
|
|
|
+ // width: 375px;
|
|
|
+ // padding: 16px 22px 10px;
|
|
|
+ // background: #fff;
|
|
|
+ // margin-bottom: 10px;
|
|
|
+ // .line_bottom {
|
|
|
+ // border-bottom: 1px solid #ededed;
|
|
|
+ // }
|
|
|
+ // > .title {
|
|
|
+ // font-size: 20px;
|
|
|
+ // line-height: 28px;
|
|
|
+ // font-weight: bold;
|
|
|
+ // }
|
|
|
+ // .indate {
|
|
|
+ // font-size: 12px;
|
|
|
+ // padding: 5px 0;
|
|
|
+ // display: flex;
|
|
|
+ // justify-content: space-between;
|
|
|
+ // span {
|
|
|
+ // color: #fa101d;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- .coutInfo {
|
|
|
- font-size: 14px;
|
|
|
- color: #f85043;
|
|
|
- text-align: left;
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- padding: 12px 0 0 25px;
|
|
|
- margin-top: 10px;
|
|
|
- position: relative;
|
|
|
- .trumpet_icon {
|
|
|
- width: 14px;
|
|
|
- height: 12px;
|
|
|
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
|
|
|
- no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 14px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .coutInfo {
|
|
|
+ // font-size: 14px;
|
|
|
+ // color: #f85043;
|
|
|
+ // text-align: left;
|
|
|
+ // border-top: 1px solid #ededed;
|
|
|
+ // padding: 12px 0 0 25px;
|
|
|
+ // margin-top: 10px;
|
|
|
+ // position: relative;
|
|
|
+ // .trumpet_icon {
|
|
|
+ // width: 14px;
|
|
|
+ // height: 12px;
|
|
|
+ // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAYCAYAAADpnJ2CAAAAAXNSR0IArs4c6QAAAyZJREFUSA21Vk1IVFEUPufOezNilJXQD2UQRERamWhBaUWOSS3U0SawdgZai2gR0aoQXPSDm3JRCbm0xZBjbkQZS0KDjKywDCIIkoKKEIkm35uZezr32X0jQ+bY2IU359xzzj3fPXe++4PwDy0W8JdKgjYCWOkzzWIM9X5NN42RbqCKoxOHl1nR2FVJ1MRgqGzxhCxg8VDp6TSRTpCKsQL+aitqjwPRKQ3mjCVygFPz2MGKQqvG/zxW56+c7ZsXkIJH1liB8hARdQPButmD59WR8mUCuqy6ynwd686OmpsN++XjLUiYrZ0g5E6SdJmAVri2FMWDnnIz3P8gxex07Rp/owS6jQij3h1lu7G5Oe5UOF1bcc5+MTRFlBiTEH/iflLe+htYKsh0oHwzBcpztd3bHWlHxPtEUMTFHFV2YdceOglStnLiZGV6xEIlwbBF+JQaqpa6Qw246OiUOKOkICnPus4MFYGik7m80Z6MXtCpfKHIGBN6kIm2x66tLBJM7q3amak0DbqEgD84eQNzwiUkE+Wmk1vGjwtmnydTID0eQ5EpLoDZTGvjr4b2absXzGdKlwC73FloZ6aSSTKocjC7kyu3Ku8D2xOAuOk/ANKEAwhivZKqYXt7jFdyAnl7LTrgDMTcv4sOyCddnlOVnKlU6dTYaPKS5hHg5IIO77nnnfTw0h1QPTTgjWv9MrGB97ki5zvh/JmuJzOFgv4cPm9rGO6TUVD6SGezhV2sdF7OEcEB49qRqbRi0MKVLEEBHXxu8i6YabzMpx1NGJ18OIjr2pG5pHqu7r13efY1ncsK+rfxvtzPW2LY29U3Krxd/Xe4c55PiKgO+meJsNeHVIIdPd/dHHFoUToitSnpsDQrHGn1FpbmoMcoEIJPA/0BNvFEJlVgOi0rPPAWwwPfdKy6nphE1c71tL3snrK796EOSpVUX7Xano628cBgqk/157oP1Y1PcTkChDEwzRJfqNfhyrz7EO/2fPaFI8dAiGqe3sc/gc5pI3wtPFCrwVTcvBXOTuY8on7GrqBMvms8wjhodvWl/YhaEKAG//1MvMHXUO5Cn4m/ACXBMJBwQaFpAAAAAElFTkSuQmCC)
|
|
|
+ // no-repeat center;
|
|
|
+ // background-size: contain;
|
|
|
+ // position: absolute;
|
|
|
+ // left: 0;
|
|
|
+ // top: 14px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- .options {
|
|
|
- padding-top: 8px;
|
|
|
- .oc {
|
|
|
- &:last-child {
|
|
|
- border-top: 1px solid #ededed;
|
|
|
- margin-top: 8px;
|
|
|
- padding-top: 9px;
|
|
|
- }
|
|
|
- }
|
|
|
- .protocol {
|
|
|
- padding-left: 20px;
|
|
|
- font-size: 10px;
|
|
|
- line-height: 14px;
|
|
|
- }
|
|
|
- .option {
|
|
|
- line-height: 26px;
|
|
|
- font-size: 15px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- position: relative;
|
|
|
- .o_bd {
|
|
|
- flex: 1;
|
|
|
- .c {
|
|
|
- font-size: 12px;
|
|
|
- }
|
|
|
- }
|
|
|
- .o_ft {
|
|
|
- font-size: 12px;
|
|
|
- color: #fa101d;
|
|
|
- del {
|
|
|
- color: #aaaaaa;
|
|
|
- font-size: 11px;
|
|
|
- }
|
|
|
- }
|
|
|
- .check_default {
|
|
|
- margin-right: 8px;
|
|
|
- display: block;
|
|
|
- width: 14px;
|
|
|
- height: 14px;
|
|
|
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=)
|
|
|
- no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- &.check_active {
|
|
|
- background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==)
|
|
|
- no-repeat center;
|
|
|
- background-size: contain;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .options {
|
|
|
+ // padding-top: 8px;
|
|
|
+ // .oc {
|
|
|
+ // &:last-child {
|
|
|
+ // border-top: 1px solid #ededed;
|
|
|
+ // margin-top: 8px;
|
|
|
+ // padding-top: 9px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .protocol {
|
|
|
+ // padding-left: 20px;
|
|
|
+ // font-size: 10px;
|
|
|
+ // line-height: 14px;
|
|
|
+ // }
|
|
|
+ // .option {
|
|
|
+ // line-height: 26px;
|
|
|
+ // font-size: 15px;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // position: relative;
|
|
|
+ // .o_bd {
|
|
|
+ // flex: 1;
|
|
|
+ // .c {
|
|
|
+ // font-size: 12px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .o_ft {
|
|
|
+ // font-size: 12px;
|
|
|
+ // color: #fa101d;
|
|
|
+ // del {
|
|
|
+ // color: #aaaaaa;
|
|
|
+ // font-size: 11px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // .check_default {
|
|
|
+ // margin-right: 8px;
|
|
|
+ // display: block;
|
|
|
+ // width: 14px;
|
|
|
+ // height: 14px;
|
|
|
+ // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABK0lEQVQ4T6WSP0vDQBjGn3MIiYX+CbhYG7BR7CL5ANmS2SWQ7H4DZ3ed/QbuOcjinGz5ANGloqmQ2i5CmhZqQgZPLjRQFYS2N9297/t73+fuHoK15bruASHkijF2AeB0lXohhDwwxu4cx/moy0m9oZRaAO5VVW0qioJ2u12lsixDkiSI43gB4NK2bY/HK5BDoihSXdf3Wq0WZrMZPpfLCtxvNNDpdDCfzxGG4VdRFDaHyUreq2maTUmS8DYaoSzL9RtAEAQc9/vI8xy+7y8YYyeEUnqjquq1pml4Hg7/QHUHDp8NBoiiiMu+5RMfDcM45wXv4/GPSb8PR71eFQqC4ImDuWVZ4nQyQZqm/4KyLOOw24XnecVO4HZSd3kc7pbNv2NrA+xkuRrexOTfqpPUy7sW3D4AAAAASUVORK5CYII=)
|
|
|
+ // no-repeat center;
|
|
|
+ // background-size: contain;
|
|
|
+ // &.check_active {
|
|
|
+ // background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAYAAAAfSC3RAAABaUlEQVQ4T2NkQAKHPD1F2TmYChgZGHwZGBlUwVL/GW7/Z2DY/PPHvwl227e/hilnhDFOBXoHMbKxzhd18eATtnNg4FJQBEt9e3Cf4e2hAwyv9+z49P/X70Sz9VvXgcTBGkGa2EREVqtU1jFxSUgy/F+1geHf6bNgjUymxgyMYQEM3148Z7jT3vTv15s3oSDNjCDncfKx39Fs7+Xj+vWX4U9YAgPDo8fIPmBgkJNlYFm1gOEbGzPD9criT98//VRhPB3o2yrq5V0lFx3H8MfCBVMTzAiQ5hN7GB4tXcTwctvmNsZTgd6XNDt6dbmOn2X4W1CBahMaj3lCB8M3S2OG6xXFlxlPBXl/N16+juNfURXD/6Wr8GpkjA5jYOprYzgbGfSDAo1wp55j+FtQTsCpnQzfLI0gTiU7cMiODuwJYD3Dv9PnoAnAiIExLBAzAVCU5GCawc7mYCn4z/APJZEzMjBt/v7jD0oiBwAFDdbhAm8qEQAAAABJRU5ErkJggg==)
|
|
|
+ // no-repeat center;
|
|
|
+ // background-size: contain;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- .configuration {
|
|
|
- padding-right: 5px;
|
|
|
- padding-bottom: 9px;
|
|
|
- .title {
|
|
|
- background: rgba(246, 246, 246, 1);
|
|
|
- height: 1px;
|
|
|
- position: relative;
|
|
|
- margin: 15px 0;
|
|
|
- span {
|
|
|
- position: absolute;
|
|
|
- left: 12px;
|
|
|
- top: -9px;
|
|
|
- display: inline-block;
|
|
|
- background-color: #fff;
|
|
|
- font-size: 10px;
|
|
|
- padding: 0 4px;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .configuration {
|
|
|
+ // padding-right: 5px;
|
|
|
+ // padding-bottom: 9px;
|
|
|
+ // .title {
|
|
|
+ // background: rgba(246, 246, 246, 1);
|
|
|
+ // height: 1px;
|
|
|
+ // position: relative;
|
|
|
+ // margin: 15px 0;
|
|
|
+ // span {
|
|
|
+ // position: absolute;
|
|
|
+ // left: 12px;
|
|
|
+ // top: -9px;
|
|
|
+ // display: inline-block;
|
|
|
+ // background-color: #fff;
|
|
|
+ // font-size: 10px;
|
|
|
+ // padding: 0 4px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- .content {
|
|
|
- font-size: 12px;
|
|
|
- padding-left: 16px;
|
|
|
- line-height: 22px;
|
|
|
- color: #acacac;
|
|
|
- }
|
|
|
+ // .content {
|
|
|
+ // font-size: 12px;
|
|
|
+ // padding-left: 16px;
|
|
|
+ // line-height: 22px;
|
|
|
+ // color: #acacac;
|
|
|
+ // }
|
|
|
|
|
|
- .options {
|
|
|
- padding-top: 0;
|
|
|
- padding-left: 16px;
|
|
|
- .option {
|
|
|
- font-size: 14px;
|
|
|
- color: #6f6f6f;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // .options {
|
|
|
+ // padding-top: 0;
|
|
|
+ // padding-left: 16px;
|
|
|
+ // .option {
|
|
|
+ // font-size: 14px;
|
|
|
+ // color: #6f6f6f;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- .buy {
|
|
|
- margin-top: 200px;
|
|
|
- bottom: 0;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- height: 60px;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 0 20px;
|
|
|
- border-top: 1px solid #ffe9e9e9;
|
|
|
- color: #000000;
|
|
|
- font-size: 12px;
|
|
|
- background: #fff;
|
|
|
- .price {
|
|
|
- flex: 1;
|
|
|
- font-size: 14px;
|
|
|
- }
|
|
|
- font-size: 14px;
|
|
|
- span {
|
|
|
- color: #fa101d;
|
|
|
- }
|
|
|
- .text {
|
|
|
- font-size: 12px;
|
|
|
- width: 60px;
|
|
|
- display: inline-block;
|
|
|
- color: #000;
|
|
|
- }
|
|
|
- del {
|
|
|
- color: #b5b5b5;
|
|
|
- &.text {
|
|
|
- color: #b5b5b5;
|
|
|
- }
|
|
|
- }
|
|
|
+ // .buy {
|
|
|
+ // margin-top: 200px;
|
|
|
+ // bottom: 0;
|
|
|
+ // left: 0;
|
|
|
+ // right: 0;
|
|
|
+ // height: 60px;
|
|
|
+ // display: flex;
|
|
|
+ // align-items: center;
|
|
|
+ // padding: 0 20px;
|
|
|
+ // border-top: 1px solid #ffe9e9e9;
|
|
|
+ // color: #000000;
|
|
|
+ // font-size: 12px;
|
|
|
+ // background: #fff;
|
|
|
+ // .price {
|
|
|
+ // flex: 1;
|
|
|
+ // font-size: 14px;
|
|
|
+ // }
|
|
|
+ // font-size: 14px;
|
|
|
+ // span {
|
|
|
+ // color: #fa101d;
|
|
|
+ // }
|
|
|
+ // .text {
|
|
|
+ // font-size: 12px;
|
|
|
+ // width: 60px;
|
|
|
+ // display: inline-block;
|
|
|
+ // color: #000;
|
|
|
+ // }
|
|
|
+ // del {
|
|
|
+ // color: #b5b5b5;
|
|
|
+ // &.text {
|
|
|
+ // color: #b5b5b5;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
|
|
|
- a {
|
|
|
- display: inline-block;
|
|
|
- font-size: 18px;
|
|
|
- color: #fff;
|
|
|
- background: #f1111b;
|
|
|
- border-radius: 4px;
|
|
|
- box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
|
|
|
- padding: 8px 28px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+ // a {
|
|
|
+ // display: inline-block;
|
|
|
+ // font-size: 18px;
|
|
|
+ // color: #fff;
|
|
|
+ // background: #f1111b;
|
|
|
+ // border-radius: 4px;
|
|
|
+ // box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.19);
|
|
|
+ // padding: 8px 28px;
|
|
|
+ // }
|
|
|
+ // }
|
|
|
+ // }
|
|
|
.classCheckBox {
|
|
|
margin-right: 10px;
|
|
|
}
|
