Gitlink
/
forgeplus-react
40
0
Fork 30
Code Issues Pull Requests Releases 1 Wiki Activity

自适应样式调整

This commit is contained in:
何童崇 2022-03-25 11:53:15 +08:00
parent d52afc2cd4
commit c6de7d0bde
2 changed files with 105 additions and 77 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/military/qz2022/index.scss
View File

@ -1,112 +1,118 @@
// 启智2022主页样式 // 启智2022主页样式
.qz_banner{ .qz_banner {
width: 100%; width: 100%;
} }
.qz2022 { .qz2022 {
font-size: 1rem; font-size: 1rem;
.qz2022Menu { .qz2022Menu {
// width: 1200px; height: 2.25rem;
// margin: 0 auto;
position: relative; position: relative;
display: flex; display: flex;
justify-content: space-between; justify-content: space-between;
a{color:#2e3341;} a {
li.active{ color: #2e3341;
transition:all .2s;
}
li.active {
background-color: #fafafa; background-color: #fafafa;
a{ a {
font-weight:700; font-weight: 700;
color:#2e5bfe; color: #2e5bfe;
font-size:1.125rem; font-size: 1.125rem;
} }
} }
li.active::before{ li.active::before {
position: absolute; position: absolute;
top: 55px; top: calc(2.25rem + 20px);
width: 70px; width: 4.375rem;
content: ''; content: "";
height: 2px; height: 2px;
background: #4154f1; background: #4154f1;
} }
} }
.menu_border { .menu_border {
height: 1px; 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; min-height: 35vh;
border-radius:4px; border-radius: 4px;
// box-shadow:0px 3px 12px #ecf0ff; box-shadow: 0px 3px 12px #ecf0ff;
} }
} }
.qz_manage{ .qz_manage {
top: 510px !important; top: 510px !important;
.ant-dropdown-menu-item > a{ .ant-dropdown-menu-item > a {
color: #333; color: #333;
&:hover{color:#4154f1 !important;} &:hover {
color: #4154f1 !important;
} }
}
} }
.qz_manage:after,.qz_manage .after{ .qz_manage:after,
content: ''; .qz_manage .after {
display:block; content: "";
width:0; display: block;
height:0; width: 0;
overflow:hidden; height: 0;
font-size: 0; overflow: hidden;
line-height: 0; font-size: 0;
border:9px; line-height: 0;
border-style:dashed dashed solid dashed; border: 9px;
border-color:transparent transparent #fff transparent; border-style: dashed dashed solid dashed;
position:absolute; border-color: transparent transparent #fff transparent;
left: 51px; position: absolute;
top: -16px; left: 51px;
top: -16px;
} }
// 公共样式 // 公共样式
.qz_main{ .qz_main {
width: 1200px; width: 1200px;
min-width: 62.5vw; min-width: 62.5vw;
max-width: 98vw; max-width: 98vw;
margin: 0 auto; margin: 0 auto;
} }
// 按钮样式 // 按钮样式
.but_2e5{ .but_2e5 {
border: none; border: none;
background-color:#2e5bfe; background-color: #2e5bfe;
padding: 0 14px; padding: 0 14px;
height: 36px; height: 36px;
border-radius: 4px; border-radius: 4px;
span{ span {
color: #fff; color: #fff;
} }
&:hover, &:focus{ &:hover,
background-color: #2e5bfe; &:focus {
opacity: 0.9; background-color: #2e5bfe;
} opacity: 0.9;
}
} }
@media screen and (max-width: 1200px) { @media screen and (max-width: 1200px) {
.qz_main{ .qz_main {
width: 98vw; width: 98vw;
} }
} }
html {
html{
font-size: 16px; font-size: 16px;
} }
@media screen and (min-width: 1921px) { @media screen and (min-width: 1921px) {
html{ html {
font-size: calc(100% + (100vw - 1921px) / 250 ); font-size: calc(100% + (100vw - 1921px) / 250);
} }
} }
@media screen and (min-width: 2880px) { @media screen and (min-width: 2880px) {
html{ html {
font-size: calc(125% + (100vw - 2880px) / 400 ); font-size: calc(125% + (100vw - 2880px) / 400);
} }
} }

54
src/military/qz2022/introduce/index.scss
View File

@ -4,37 +4,59 @@
background-image: url("../image/introduce.png"); background-image: url("../image/introduce.png");
background-size: 100% 100.5%; background-size: 100% 100.5%;
.introduce-content{ .introduce-content {
width:62.5% ; width: 62.5%;
height: 100%; height: 100%;
margin:0 auto; margin: 0 auto;
padding:5% 2.5%; padding: 5% 2% 5% 2.5%;
box-sizing: border-box; box-sizing: border-box;
} }
.introduce-video { .introduce-video {
width: 61.6%;
height: 80%; height: 80%;
margin-right: 2.2%;
float: left; float: left;
video{ video {
max-width: 100%; max-width: 100%;
max-height: 100%; max-height: 100%;
} }
} }
.introduce-info{ .introduce-info {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: space-around; justify-content: space-around;
min-height: 75%; min-width: 35%;
min-height: 75%;
} }
.info-tit{ .info-tit {
font-family: PingFang SC; font-family: PingFang SC;
font-weight: 700; font-weight: 700;
color: #2e3341; color: #2e3341;
font-size: 1.25rem; font-size: 1.25rem;
letter-spacing: 0.1rem;
} }
.content-item{ .content-item {
text-indent: 2em; 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;
}
} }
} }