@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; } .box-shadow { box-shadow: 0rem 0.3rem 0.5rem 0rem rgba(36, 65, 116, 0.1); } .tit-line(@fs,@pb,@mb,@width,@height,@color) { font-size: @fs; padding-bottom: @pb; margin-bottom: @mb; position: relative; &::after { content: ""; position: absolute; bottom: 0; left: 0; width: @width; border-bottom: @height solid @color; } } .tit-line-center(@fs,@pb,@mb,@width,@height,@color) { font-size: @fs; padding-bottom: @pb; margin-bottom: @mb; position: relative; &::after { content: ""; position: absolute; bottom: 0; left: 50%; width: @width; border-bottom: @height solid @color; transform: translateX(-50%); } } .btn { padding: 0.3rem 1rem; background-color: @c1; color: #fff !important; border-radius: 2rem; font-size: 0.7rem; display: inline-block; width: auto; &.s1 { background-color: transparent; border: 1px solid @c1; color: @c1 !important; } } .a-hover { &:hover { color: @c1; } } .see-container { section { padding-top: 0; &.main-0 { padding-top: 5rem; } } .main-title { margin-bottom: 2rem; * { text-align: left; } h2 { margin-bottom: 0; } p { color: #333; max-width: 100%; &, * { font-size: 1rem; } } } // .main-center { // max-width: 67rem; // } * { line-height: 1.8; } .t { p { color: @c1; margin-bottom: 1rem; } h1 { font-size: 2.4rem; } } h2 { line-height: 1.4; } h3 { font-size: 1.6rem; line-height: 1.6; margin-top: 1rem; } h4 { font-size: 1.4rem; margin: 1rem 0; } h5 { font-size: 1rem; } h6 { font-size: 0.8rem; } em, strong { font-weight: bold; } .mt { margin-top: 2rem; } .m1 { margin-top: 4rem; em { text-decoration: underline; } } .m2 { ol { box-shadow: 0rem 0.15rem 0.8rem 0rem rgba(32, 30, 29, 0.35); border-radius: 0.25rem 0.25rem 0rem; padding: 1.2rem; } } .m3 { .main-title { margin-bottom: 0; } .text { display: flex; align-items: center; p { max-width: 36rem; &, * { font-size: 1rem; } } } .img { max-width: 15rem; margin-left: 5rem; img { margin-top: 0; } } } ol { li { line-height: 3; display: flex; align-items: flex-start; position: relative; padding: 0.5rem 0; p, em { display: inline-block; } em { width: 19rem; font-weight: bold; flex-shrink: 0; margin-right: 1rem; padding-left: 1rem; position: relative; &::before { content: ""; position: absolute; top: 50%; left: 0; width: 0.3rem; height: 0.3rem; border-radius: 50%; background-color: @c1; transform: translateY(-50%); } } } } .more { text-align: right; margin-top: 2rem; a, * { color: @c1; } } .table { box-shadow: 0 0 0.5rem #ccc; border: 1px solid @c1; .th { display: flex; & > div { flex: 1; .setCenter; background-color: @c1; padding: 0.5rem 0; border-left: 1px solid #fff; &:first-of-type { border-left: none; } * { color: #fff; } } } .tb { h5 { font-size: 1.1rem; font-weight: bold; color: @c1; } h6 { font-size: 1rem; } .con { span { display: inline-block; color: #666; font-size: 1rem; margin-left: 0.5rem; } & > div { display: flex; margin-bottom: 0.5rem; h6 { margin-bottom: 0; } & > div > div { display: flex; align-items: center; } } } .top { display: flex; & > div { flex: 1; border-left: 1px solid @c1; position: relative; padding: 1rem; &:first-of-type { border-left: none; } } h5 { color: #333; } ol { min-height: 15rem; li { list-style-position: outside; line-height: 2; padding: 0; } } } .bottom { display: flex; border-top: 1px solid @c1; & > div { width: calc((100% / 3)); border-left: 1px solid @c1; padding: 1rem; & > span { display: inline-block; margin-bottom: 1rem; } &:first-of-type { border-left: none; padding-left: 6rem; } } .two { width: calc((100% / 3) * 2); } } } } img { margin-top: 1rem; } } @media screen and (max-width: 768px) { .see-container .m3 .img { display: none; } .see-container { .t h1 { font-size: 2rem; } * { line-height: 1.6; } ol { padding: 1rem; li { flex-direction: column; } } } .sroll-tabel { display: none; } .mb-tabel { display: block !important; .item { margin-bottom: 2rem; .i-th { display: inline-flex; align-items: center; padding: 0.3rem; background-color: @c1; p { font-size: 0.9rem; color: #fff; } } .i-tb { box-shadow: 0 0 0.5rem #ebebeb; h5 { margin-top: 1rem; } } .des{ padding: 1rem; } .i-tb-bottom{ border: 1px solid @c1; padding: 2rem; h5{ text-align: center; margin-bottom: 1rem; color: @c1; margin-top: 0; } h6{ margin-bottom: 0; } span{ font-size: .8rem; color: @c1; } .con{ &>div,&>div>div>div{ display: flex; } } } } } }