www.lightcourse.com/public/static/home/new/css/index.less

719 lines
16 KiB
Plaintext
Raw Normal View History

2022-10-24 02:38:36 +00:00
@c1: #3b52f6;
.item-wrap(@num,@between,@mb) {
display: flex;
flex-wrap: wrap;
.item {
width: calc((100% - (@num - 1) * @between) / @num);
margin-right: @between;
margin-bottom: @mb;
&:nth-of-type(@{num}n) {
margin-right: 0;
}
}
}
.dot {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dots(@num) {
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: @num; //行数
-webkit-box-orient: vertical;
}
.setBetween {
display: flex;
justify-content: space-between;
}
.setRowCenter {
display: flex;
align-items: center;
}
.setColumnCenter {
display: flex;
align-items: center;
}
.setCenter {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.ra {
border-radius: 0.2rem;
overflow: hidden;
}
.bs {
box-shadow: 0 0 0.5rem #ebebeb;
}
.a-hover {
&:hover {
color: @c1;
transform: translateX(0.2rem);
}
}
.img-cover {
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.sitemap {
background-color: #fafafb;
padding: 3rem 0;
display: none;
.container {
.setBetween;
h3 {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
a {
display: block;
padding: 0.5rem 0;
.a-hover;
}
}
}
.sitemap {
display: block;
}
.index-banner {
position: relative;
.swiper-container {
.swiper-slide {
background-color: #fff;
&.slide1 {
padding: 1rem 0;
& > div {
display: flex;
justify-content: space-between;
}
.left {
display: flex;
flex-direction: column;
justify-content: center;
align-items: flex-start;
em {
font-size: 2rem;
font-weight: 900;
margin-bottom: 5rem;
font-family: 'f-exhibition2-8623';
}
a {
display: inline-block;
padding: 1rem 4rem;
border: 1px solid @c1;
color: @c1;
font-size: 1.2rem;
border-radius: 0.3rem;
&:hover {
background-color: @c1;
color: #fff;
}
}
}
}
}
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
.logo {
width: 38.3rem;
}
& > h2 {
font-size: 2.2rem;
color: #999;
margin-top: 1rem;
margin-bottom: 2rem;
}
.search-con {
display: flex;
height: 2.5rem;
border-radius: 0.2rem;
border: 1px solid @c1;
max-width: 32rem;
margin: 0 auto;
position: relative;
& > div {
height: 100%;
}
.s-con {
&:hover {
.bt {
&::before {
display: block;
}
}
.content {
display: flex;
}
}
}
.bt {
height: 100%;
.setColumnCenter;
justify-content: space-between;
background-color: @c1;
padding: 0 1rem;
cursor: pointer;
position: relative;
&::before {
content: "";
position: absolute;
left: 50%;
top: calc(100% + 0.5rem);
border-bottom: 0.5rem solid #fff;
border-left: 0.5rem solid transparent;
border-right: 0.5rem solid transparent;
transform: translateX(-50%);
display: none;
}
& > span {
margin-right: 1rem;
}
& > span,
& > .icon {
color: #fff;
}
}
.content {
position: absolute;
top: 100%;
left: 50%;
width: 70rem;
display: none;
justify-content: space-between;
transform: translateX(-50%);
padding-top: 1rem;
h3 {
padding: 0 1rem;
height: 3rem;
line-height: 3rem;
margin: 0;
width: 20rem;
}
.more-btn {
a {
padding: 0.3rem 1rem;
}
}
nav {
background-color: #fafafb;
height: 35rem;
width: 20rem;
position: relative;
overflow: auto;
overflow-x: hidden;
padding-bottom: 1rem;
ul {
& > li {
display: flex;
& > div {
display: flex;
justify-content: space-between;
padding: 0.8rem 1rem;
flex-shrink: 0;
width: 100%;
cursor: pointer;
* {
color: #666;
}
span {
font-size: 0.9rem;
}
&:hover {
background-color: #fff;
* {
color: @c1;
}
}
}
}
.more-btn {
margin-top: 1rem;
}
}
}
aside {
width: 50rem;
background-color: #fff;
padding: 0 1rem;
flex-direction: column;
overflow: hidden;
z-index: 10;
box-sizing: border-box;
& > div {
display: none;
&.active {
display: block;
}
}
.item {
display: none;
flex-direction: column;
height: 35rem;
padding-bottom: 1rem;
&.active {
display: flex;
}
.more-btn {
margin-top: 0;
}
}
.courses-wrap {
ol {
& > li {
width: 50%;
& > a {
display: block;
padding: 0.5rem 0;
}
}
h5 {
font-size: 0.9rem;
display: inline-flex;
align-items: center;
margin-bottom: 0.5rem;
em {
font-size: 0.6rem;
color: @c1;
padding: 0.1rem 0.3rem;
border: 1px solid @c1;
border-radius: 2rem;
margin-left: 0.5rem;
}
}
p {
padding-bottom: 0.5rem;
span {
margin-right: 3rem;
font-size: 0.7rem;
&:last-of-type {
margin-right: 0;
}
}
* {
color: #666;
}
}
}
}
.program-wrap {
ol {
margin-top: 0;
& > li {
.p-tit {
.setBetween;
align-items: center;
margin-bottom: 1rem;
h6 {
font-size: 0.9rem;
margin-bottom: 0.5rem;
}
p {
*,
& {
color: #999;
font-size: 0.7rem;
}
}
.t-logo {
max-width: 13rem;
width: 13rem;
height: 4.5rem;
background-color: #ccc;
}
}
.field {
height: 5rem;
display: flex;
flex-direction: column;
justify-content: space-between;
flex-wrap: wrap;
.list {
padding: 0.5rem 0;
.icon {
color: @c1;
font-size: 0.9rem;
}
label {
font-size: 0.9rem;
font-weight: bold;
margin: 0 0.3rem;
}
span {
color: #999;
font-size: 0.7rem;
}
}
}
li {
width: 100%;
padding: 1rem 0;
padding-right: 4%;
border-bottom: 1px solid #ebebeb;
}
.more-btn {
padding-bottom: 2rem;
margin-top: 2rem;
width: 100%;
}
}
li {
width: 100%;
padding: 1rem 0;
padding-right: 4%;
border-bottom: 1px solid #ebebeb;
&:last-of-type {
border-bottom: none;
}
}
.more-btn {
padding-bottom: 2rem;
margin-top: 2rem;
width: 100%;
}
}
}
.tit {
position: relative;
border-bottom: 1px solid #ebebeb;
padding: 1rem 0;
flex-shrink: 0;
h4 {
font-size: 1.1rem;
margin: 0;
}
i {
color: @c1;
font-size: 1.5rem;
}
p {
color: #666;
margin-top: 0.5rem;
}
.close {
position: absolute;
top: 1.5rem;
right: 0;
width: 2rem;
height: 2rem;
.setCenter;
cursor: pointer;
i {
font-size: 1.5rem;
}
}
}
ol {
display: flex;
flex-wrap: wrap;
overflow: auto;
margin: 1rem 0;
width: 100%;
& > li {
width: 100%;
}
a:hover {
h5 {
color: @c1;
}
}
}
}
}
.inp {
flex: 1;
.setColumnCenter;
padding: 0 2%;
background-color: #fff;
overflow: hidden;
border-top-right-radius: 0.2rem;
border-bottom-right-radius: 0.2rem;
i {
color: #999;
}
input {
width: 100%;
height: 100%;
}
}
& > span {
position: absolute;
top: calc(100% + 0.2rem);
right: 0;
font-size: 0.7rem;
color: #666;
}
}
}
}
.main-title{
* {
text-align: center;
}
}
main {
.main-1 {
.container {
display: flex;
flex-wrap: wrap;
// .item-wrap(4,1rem,2rem);
.item {
width: 11.5rem;
margin-right: calc((100% - 11.5rem * 5) / 4);
box-shadow: 0 0 0.5rem #ebebeb;
margin-bottom: 2rem;
.ra;
&:nth-of-type(5n) {
margin-right: 0;
}
&:nth-of-type(n + 11) {
display: none;
}
.img {
height: 6.5rem;
background-color: #ccc;
.img-cover;
}
.text {
padding: 0.5rem;
position: relative;
//数据标记
// &::after {
// content: attr(num);
// position: absolute;
// top: 0;
// right: 1rem;
// width: 1.6rem;
// height: 2rem;
// background-color: #ee6666;
// .setCenter;
// color: #fff;
// }
h3 {
margin-bottom: 0.5rem;
word-break: break-word;
text-align: left;
font-size: inherit;
}
.par-con {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
.icon {
font-weight: bold;
font-size: 0.8rem;
color: @c1;
margin-right: 0.2rem;
display: none;
}
.par {
}
}
}
}
}
}
.main-2 {
padding-top: 0;
.container {
position: relative;
.swiper-container {
padding: 2.5rem;
padding-top: 1rem;
}
.item {
width: 13.5rem;
border-radius: 2rem;
overflow: hidden;
box-shadow: 0 0 1rem #999;
.img {
height: 10.5rem;
background-color: #ccc;
img {
width: 100%;
height: 100%;
object-fit: cover;
}
}
.logo {
display: flex;
width: 50%;
height: 3rem;
margin: 0.5rem auto 0;
img {
margin: auto;
width: 100%;
height: 100%;
object-fit: scale-down;
}
}
.text {
padding: 1rem;
h3 {
text-align: center;
line-height: 1.4;
font-size: inherit;
min-height: 2.25rem;
}
p {
color: #999;
text-align: center;
line-height: 1.8;
font-size: 0.7rem;
margin-bottom: 1rem;
}
span {
line-height: 1.4;
color: #999;
font-size: 0.7rem;
.dots(5);
}
}
}
}
}
.main-3 {
background-color: #fffbfb;
h3 {
color: #999;
margin-bottom: 1rem;
}
}
.main-4 {
.container {
.item-wrap(3,1.5rem,1rem);
.item {
display: block;
padding: 1rem 0;
.bs;
.t {
.setColumnCenter;
margin-bottom: 1rem;
div {
.setCenter;
background-color: @c1;
font-size: 0.9rem;
color: #fff;
flex-shrink: 0;
padding: 0.5rem;
text-align: center;
span {
width: 4.5rem;
flex-shrink: 0;
color: #fff;
display: inline-block;
}
}
h3 {
flex: 1;
padding: 0 1rem;
font-size: 0.9rem;
}
}
p {
padding: 0 1rem;
line-height: 1.6;
.dots(2);
}
}
}
}
}
@media screen and(min-width:768px) and (max-width: 1024px) {
main .main-1 .container .item{
width: 15rem;
margin-right: calc((100% - 15rem * 3) / 2) !important;
&:nth-of-type(3n){
margin-right: 0 !important;
}
}
.index-banner .swiper-container .swiper-slide.slide1 .left a{
padding: 1rem 3rem;
}
}
@media screen and (max-width: 820px) {
main .main-4 .container .item .t div span{
width: 5.5rem;
}
}
@media screen and (max-width: 768px) {
.index-banner {
.swiper-container {
.swiper-slide {
padding: 0.2rem 0.5rem;
&.slide1{
padding: 4rem 0;
&>div{
padding: 0 1rem;
}
.left{
margin-right: 1rem;
em{
white-space: nowrap;
font-size: 1.4rem;
margin-bottom: 1rem;
}
a{
padding: .3rem 1rem;
font-size: .8rem;
white-space: nowrap;
}
}
.img{
display: none;
}
}
}
}
}
main .main-1 .container {
justify-content: space-between;
.item {
width: 48%;
margin-right: 0;
&:nth-of-type(n + 7) {
display: none;
}
}
}
main .main-4 .container {
flex-wrap: wrap;
.item {
width: 100%;
margin-right: 0 !important;
margin-bottom: 4%;
&:nth-of-type(n+4){
display: none;
}
.t{
div{
em{
font-size: .7rem;
}
span{
font-size: .6rem;
}
}
}
p {
text-align: left;
}
}
}
}