forked from Gitlink/forgeplus-react
自适应样式调整
This commit is contained in:
何童崇
parent
bea7069af5
commit
1d5dacb13b
|
|
@ -1,112 +1,118 @@
|
|||
// 启智2022主页样式
|
||||
.qz_banner{
|
||||
.qz_banner {
|
||||
width: 100%;
|
||||
}
|
||||
.qz2022 {
|
||||
font-size: 1rem;
|
||||
.qz2022Menu {
|
||||
// width: 1200px;
|
||||
// margin: 0 auto;
|
||||
height: 2.25rem;
|
||||
position: relative;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
a{color:#2e3341;}
|
||||
li.active{
|
||||
a {
|
||||
color: #2e3341;
|
||||
transition:all .2s;
|
||||
}
|
||||
li.active {
|
||||
background-color: #fafafa;
|
||||
a{
|
||||
font-weight:700;
|
||||
color:#2e5bfe;
|
||||
font-size:1.125rem;
|
||||
a {
|
||||
font-weight: 700;
|
||||
color: #2e5bfe;
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
}
|
||||
li.active::before{
|
||||
li.active::before {
|
||||
position: absolute;
|
||||
top: 55px;
|
||||
width: 70px;
|
||||
content: '';
|
||||
top: calc(2.25rem + 20px);
|
||||
width: 4.375rem;
|
||||
content: "";
|
||||
height: 2px;
|
||||
background: #4154f1;
|
||||
}
|
||||
}
|
||||
.menu_border {
|
||||
height: 1px;
|
||||
background-image: linear-gradient(90deg,#ffffff 0%,#373f5e 43.51%,#373f5e 54.81%,#ffffff 100%
|
||||
background-image: linear-gradient(
|
||||
90deg,
|
||||
#ffffff 0%,
|
||||
#373f5e 43.51%,
|
||||
#373f5e 54.81%,
|
||||
#ffffff 100%
|
||||
);
|
||||
}
|
||||
.qzCont{
|
||||
.qzCont {
|
||||
min-height: 35vh;
|
||||
border-radius:4px;
|
||||
box-shadow:0px 3px 12px #ecf0ff;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0px 3px 12px #ecf0ff;
|
||||
}
|
||||
}
|
||||
.qz_manage{
|
||||
top: 510px !important;
|
||||
.ant-dropdown-menu-item > a{
|
||||
color: #333;
|
||||
&:hover{color:#4154f1 !important;}
|
||||
.qz_manage {
|
||||
top: 510px !important;
|
||||
.ant-dropdown-menu-item > a {
|
||||
color: #333;
|
||||
&:hover {
|
||||
color: #4154f1 !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
.qz_manage:after,.qz_manage .after{
|
||||
content: '';
|
||||
display:block;
|
||||
width:0;
|
||||
height:0;
|
||||
overflow:hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border:9px;
|
||||
border-style:dashed dashed solid dashed;
|
||||
border-color:transparent transparent #fff transparent;
|
||||
position:absolute;
|
||||
left: 51px;
|
||||
top: -16px;
|
||||
.qz_manage:after,
|
||||
.qz_manage .after {
|
||||
content: "";
|
||||
display: block;
|
||||
width: 0;
|
||||
height: 0;
|
||||
overflow: hidden;
|
||||
font-size: 0;
|
||||
line-height: 0;
|
||||
border: 9px;
|
||||
border-style: dashed dashed solid dashed;
|
||||
border-color: transparent transparent #fff transparent;
|
||||
position: absolute;
|
||||
left: 51px;
|
||||
top: -16px;
|
||||
}
|
||||
// 公共样式
|
||||
.qz_main{
|
||||
.qz_main {
|
||||
width: 1200px;
|
||||
min-width: 62.5vw;
|
||||
max-width: 98vw;
|
||||
margin: 0 auto;
|
||||
}
|
||||
// 按钮样式
|
||||
.but_2e5{
|
||||
border: none;
|
||||
background-color:#2e5bfe;
|
||||
padding: 0 14px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
span{
|
||||
color: #fff;
|
||||
}
|
||||
&:hover, &:focus{
|
||||
background-color: #2e5bfe;
|
||||
opacity: 0.9;
|
||||
}
|
||||
|
||||
.but_2e5 {
|
||||
border: none;
|
||||
background-color: #2e5bfe;
|
||||
padding: 0 14px;
|
||||
height: 36px;
|
||||
border-radius: 4px;
|
||||
span {
|
||||
color: #fff;
|
||||
}
|
||||
&:hover,
|
||||
&:focus {
|
||||
background-color: #2e5bfe;
|
||||
opacity: 0.9;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@media screen and (max-width: 1200px) {
|
||||
.qz_main{
|
||||
.qz_main {
|
||||
width: 98vw;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
html{
|
||||
html {
|
||||
font-size: 16px;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 1921px) {
|
||||
html{
|
||||
font-size: calc(100% + (100vw - 1921px) / 250 );
|
||||
html {
|
||||
font-size: calc(100% + (100vw - 1921px) / 250);
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (min-width: 2880px) {
|
||||
html{
|
||||
font-size: calc(125% + (100vw - 2880px) / 400 );
|
||||
html {
|
||||
font-size: calc(125% + (100vw - 2880px) / 400);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -4,37 +4,59 @@
|
|||
background-image: url("../image/introduce.png");
|
||||
background-size: 100% 100.5%;
|
||||
|
||||
.introduce-content{
|
||||
width:62.5% ;
|
||||
.introduce-content {
|
||||
width: 62.5%;
|
||||
height: 100%;
|
||||
margin:0 auto;
|
||||
padding:5% 2.5%;
|
||||
margin: 0 auto;
|
||||
padding: 5% 2% 5% 2.5%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.introduce-video {
|
||||
width: 61.6%;
|
||||
height: 80%;
|
||||
margin-right: 2.2%;
|
||||
float: left;
|
||||
video{
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
video {
|
||||
max-width: 100%;
|
||||
max-height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.introduce-info{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
min-height: 75%;
|
||||
.introduce-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-around;
|
||||
min-width: 35%;
|
||||
min-height: 75%;
|
||||
}
|
||||
|
||||
.info-tit{
|
||||
.info-tit {
|
||||
font-family: PingFang SC;
|
||||
font-weight: 700;
|
||||
color: #2e3341;
|
||||
font-size: 1.25rem;
|
||||
letter-spacing: 0.1rem;
|
||||
}
|
||||
.content-item{
|
||||
text-indent: 2em;
|
||||
.content-item {
|
||||
font-size: 1rem;
|
||||
line-height: 2em;
|
||||
text-indent: 2em;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1700px) {
|
||||
.info-tit {
|
||||
line-height: 1.5;
|
||||
}
|
||||
.content-item {
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
|
||||
@media screen and (max-width: 1400px) {
|
||||
.info-tit {
|
||||
font-size: 1rem;
|
||||
}
|
||||
.content-item {
|
||||
font-size: .9rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue