.A4selectCourse { position: relative; :global { .A4main { height: calc(100% - 60px); overflow-y: auto; background-image: url('../../assets/img/selectCourse/bg.jpg'); background-size: 100% 100%; .A4row { margin-top: 20px; margin-bottom: 70px; .A4row1 { height: 54px; line-height: 54px; display: inline-block; padding: 0 24px 0 50px; border-radius: 0 30px 30px 0; background-color: var(--themeColor2); font-size: 20px; color: #fff; box-shadow: 0px 4px 5px 0px rgba(109, 170, 31, 0.5); position: relative; & > img { position: absolute; top: 50%; transform: translateY(-50%); left: 24px; } } .A4row2 { width: 90%; height: 550px; background-image: url('../../assets/img/selectCourse/pop.png'); background-size: 100% 100%; margin: 25px auto; .A4row2_1 { padding-left: 25px; height: 60px; line-height: 58px; width: 70%; font-weight: 700; font-size: 20px; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .A4row2_2 { height: 380px; padding: 30px 30px 0; & > div { width: 100%; height: 100%; border-bottom: 2px dashed #bebebe; display: flex; flex-direction: column; justify-content: center; padding-bottom: 30px; .A4row2_2tit { font-weight: 700; font-size: 16px; color: var(--themeColor); margin-bottom: 5px; } & > p { min-height: 66px; text-align: justify; font-size: 16px; display: -webkit-box; overflow: hidden; white-space: normal !important; text-overflow: ellipsis; word-wrap: break-word; line-clamp: 3; -webkit-line-clamp: 3; -webkit-box-orient: vertical; margin-bottom: 12px; } .A4row2_2No { width: 100%; text-align: center; font-size: 30px; color: var(--themeColor); } } } // 按钮 .A4row2_3 { padding: 0 30px; margin-top: 20px; height: 50px; display: flex; justify-content: space-between; & > div { width: 46%; height: 100%; border-radius: 6px; box-shadow: 3px 3px 4px 0px rgba(125, 190, 43, 0.25); background-color: var(--themeColor2); color: #fff; font-weight: 700; font-size: 18px; display: flex; justify-content: center; align-items: center; &:nth-of-type(1) { background-color: #f18101; box-shadow: 3px 3px 4px 0px rgba(241, 129, 1, 0.25); } } .A4row2_3No { background-color: #d9d9d9 !important; pointer-events: none; color: #aeaeae; } } } } } .A4No { height: calc(100% - 60px); background-image: url('../../assets/img/selectCourse/bg.jpg'); background-size: 100% 100%; display: flex; justify-content: center; align-items: center; font-size: 30px; font-weight: 700; letter-spacing: 4px; color: var(--themeColor); } // 团体认证弹窗 .A4tan { position: absolute; z-index: 100; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); backdrop-filter: blur(8px); & > div { background-image: url('../../assets/img/selectCourse/tan.png'); background-size: 100% 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 80%; border-radius: 10px; background-color: #fff; padding: 30px; & > h1 { text-align: center; font-size: 24px; font-weight: 700; color: var(--themeColor); padding-bottom: 25px; margin-bottom: 25px; border-bottom: 2px dashed #bebebe; } .A4ttxt { text-align: justify; padding: 0 15px; font-size: 18px; line-height: 24px; letter-spacing: 2px; span { font-weight: 700; color: var(--themeColor); } } .A4tbtn { margin-top: 24px; text-align: center; } } } } }