forked from Gitlink/forgeplus-react
443 lines
12 KiB
SCSS
443 lines
12 KiB
SCSS
$yellow-color: rgba(246, 216, 176, 1);
|
|
$blue-color-light: rgba(39, 118, 217, 1);
|
|
.softFc-wrap {
|
|
@font-face {
|
|
font-family: "shuheiTi";
|
|
src: url("./fonts/AlimamaShuHeiTi-Bold.ttf");
|
|
}
|
|
@font-face {
|
|
font-family: "yousheTi";
|
|
src: url("./fonts/YouSheBiaoTiHei-2.ttf");
|
|
}
|
|
position: fixed;
|
|
top: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
height: 100vh;
|
|
width: 100vw;
|
|
.home-wrap {
|
|
height: 100vh;
|
|
width: 100vw;
|
|
background-image: url(./img/bj1.png);
|
|
background-size: 100% 100%;
|
|
display: flex;
|
|
flex-direction: row;
|
|
.home-left {
|
|
width: 578px;
|
|
height: 100%;
|
|
background-image: url(./img/leftBg.png);
|
|
background-size: 100% 100%;
|
|
padding-left: 48px;
|
|
padding-top: 54px;
|
|
.slick-prev {
|
|
width: 74px;
|
|
height: 54px;
|
|
left: 0;
|
|
bottom: -58px !important;
|
|
top: auto;
|
|
transform: rotate(180deg);
|
|
}
|
|
.slick-next {
|
|
width: 74px;
|
|
height: 54px;
|
|
right: 0;
|
|
top: auto;
|
|
bottom: -86px !important;
|
|
// transform: rotate(180deg);
|
|
}
|
|
.left-title,
|
|
.left-subTitle {
|
|
color: $yellow-color;
|
|
}
|
|
.left-title {
|
|
font-family: "shuheiTi";
|
|
font-size: 32px;
|
|
line-height: 32px;
|
|
}
|
|
.left-subTitle {
|
|
font-family: "FangSong";
|
|
font-size: 20px;
|
|
line-height: 20px;
|
|
padding-top: 4px;
|
|
}
|
|
.news-wrap {
|
|
.news-month {
|
|
width: 108px;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
border-radius: 16px;
|
|
text-align: center;
|
|
color: $blue-color-light;
|
|
font-family: "alibaba";
|
|
background-color: $yellow-color;
|
|
font-size: 16px;
|
|
margin-top: 30px;
|
|
}
|
|
.news-content-title {
|
|
width: 414px;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
font-family: "alibaba";
|
|
color: #fff;
|
|
font-size: 21px;
|
|
line-height: 21px;
|
|
margin-top: 14px;
|
|
}
|
|
.news-line {
|
|
width: 385px;
|
|
height: 16px;
|
|
}
|
|
.news-pic-wrap {
|
|
width: 379px;
|
|
height: 205px;
|
|
background: linear-gradient(
|
|
90.36deg,
|
|
rgba(238, 219, 181, 0.35) 1.9%,
|
|
rgba(246, 216, 176, 0) 99.81%
|
|
);
|
|
border-radius: 8px;
|
|
padding: 6px;
|
|
.news-pic {
|
|
height: 192px;
|
|
width: 367px;
|
|
border-radius: 3px;
|
|
}
|
|
}
|
|
.news-content {
|
|
margin-top: 11px;
|
|
color: rgba(255, 255, 255, 0.8);
|
|
font-family: "alibabaReg";
|
|
font-size: 18px;
|
|
height: 75px;
|
|
width: 390px;
|
|
line-height: 25px;
|
|
text-align: left;
|
|
display: -webkit-box;
|
|
-webkit-box-orient: vertical;
|
|
-webkit-line-clamp: 3; /* 限制显示的行数为3行 */
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
font-weight: 400;
|
|
}
|
|
}
|
|
.point-work {
|
|
padding-top: 47px;
|
|
.point-work-wrap {
|
|
width: 380px;
|
|
.point-work-page {
|
|
padding-top: 21px;
|
|
.point-work-item {
|
|
margin-top: 27px;
|
|
display: flex;
|
|
height: 40px;
|
|
width: 380px;
|
|
background: linear-gradient(
|
|
90.07deg,
|
|
rgba(238, 219, 181, 0.35) 1.77%,
|
|
rgba(246, 216, 176, 0) 99.99%
|
|
);
|
|
border-radius: 8px;
|
|
.point-work-item-num {
|
|
width: 38px;
|
|
height: 40px;
|
|
line-height: 41px;
|
|
background: linear-gradient(
|
|
180deg,
|
|
#f6d8b0 0%,
|
|
rgba(255, 255, 255, 0.32) 133.32%
|
|
);
|
|
border-radius: 8px 8px 0px 8px;
|
|
color: rgba(38, 90, 220, 1);
|
|
text-align: center;
|
|
}
|
|
.point-work-item-content {
|
|
font-family: "alibabaReg";
|
|
color: #fff;
|
|
font-size: 18px;
|
|
padding-left: 5px;
|
|
height: 40px;
|
|
line-height: 40px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.home-right {
|
|
flex: 1;
|
|
padding-left: 10px;
|
|
padding-top: 54px;
|
|
.right-head {
|
|
display: flex;
|
|
.center-title-wrap {
|
|
position: relative;
|
|
img {
|
|
width: 308px;
|
|
}
|
|
.center-title {
|
|
position: absolute;
|
|
color: #fff;
|
|
font-family: "shuheiTi";
|
|
font-size: 28px;
|
|
line-height: 46px;
|
|
top: 0;
|
|
left: 28px;
|
|
letter-spacing: 3px;
|
|
}
|
|
.center-sub-title {
|
|
position: absolute;
|
|
font-family: FangSong;
|
|
color: #2648df;
|
|
font-size: 20px;
|
|
bottom: 0;
|
|
left: 60px;
|
|
width: 740px;
|
|
line-height: 20px;
|
|
}
|
|
}
|
|
.soft-title {
|
|
color: rgba(38, 72, 223, 1);
|
|
font-family: "shuheiTi";
|
|
font-size: 52px;
|
|
align-items: flex-start;
|
|
line-height: 52px;
|
|
padding-left: 24px;
|
|
}
|
|
}
|
|
.right-content {
|
|
padding-top: 86px;
|
|
position: relative;
|
|
.panel-title {
|
|
width: 27px;
|
|
// height: 187px;
|
|
font-family: "shuheiTi";
|
|
font-weight: 700;
|
|
color: #f6d8b0;
|
|
font-size: 27px;
|
|
line-height: 33px;
|
|
}
|
|
.top-section,
|
|
.bottom-section {
|
|
display: flex;
|
|
}
|
|
.first-panel,
|
|
.second-panel,
|
|
.third-panel,
|
|
.forth-panel {
|
|
width: 567px;
|
|
height: 337px;
|
|
background-size: 100%;
|
|
padding: 20px;
|
|
}
|
|
.top-section {
|
|
.first-panel {
|
|
background-image: url(./img/first_panel.png);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
.panel-title {
|
|
margin-left: 41px;
|
|
}
|
|
}
|
|
.second-panel {
|
|
background-image: url(./img/second_panel.png);
|
|
margin-left: 55px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.panel-title {
|
|
margin-right: 41px;
|
|
}
|
|
.white-panel-out {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.white-panel-center {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.bottom-section {
|
|
padding-top: 53px;
|
|
.third-panel {
|
|
background-image: url(./img/third_panel.png);
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
align-items: flex-end;
|
|
.panel-title {
|
|
margin-left: 41px;
|
|
}
|
|
}
|
|
.forth-panel {
|
|
background-image: url(./img/forth_panel.png);
|
|
margin-left: 55px;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: flex-end;
|
|
.panel-title {
|
|
margin-right: 41px;
|
|
}
|
|
.white-panel-out {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
.white-panel-center {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.white-panel-out {
|
|
width: 347px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
border-radius: 6px;
|
|
.white-panel-center {
|
|
width: 335px;
|
|
background-color: rgba(255, 255, 255, 0.5);
|
|
border-radius: 6px;
|
|
.white-panel-inner {
|
|
width: 323px;
|
|
height: 297px;
|
|
background-color: #fff;
|
|
border-radius: 6px;
|
|
padding: 20px;
|
|
.panel-item {
|
|
width: 100%;
|
|
.panel-item-content {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
padding: 14px 0 6px;
|
|
.panel-item-content-left {
|
|
display: flex;
|
|
align-items: center;
|
|
font-family: "alibaba";
|
|
font-weight: 500;
|
|
color: #27254c;
|
|
font-size: 18px;
|
|
line-height: 18px;
|
|
img {
|
|
width: 15px;
|
|
height: 13px;
|
|
margin-right: 16px;
|
|
}
|
|
}
|
|
.panel-item-content-right {
|
|
color: #2648df;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
.panel-num {
|
|
font-family: "yousheTi";
|
|
font-size: 36px;
|
|
line-height: 36px;
|
|
}
|
|
.panel-unit {
|
|
font-family: "alibaba";
|
|
font-size: 13px;
|
|
line-height: 28px;
|
|
margin-left: 4px;
|
|
}
|
|
}
|
|
}
|
|
.panel-item-line {
|
|
height: 1px;
|
|
width: 100%;
|
|
background: linear-gradient(
|
|
90.21deg,
|
|
#2648df 2.02%,
|
|
#f6d8b0 98.88%
|
|
);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.center-panel {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
background-image: url(./img/center_panel.png);
|
|
background-size: 100%;
|
|
width: 402px;
|
|
height: 404px;
|
|
transform: translate(-50%, -50%);
|
|
margin-top: 43px;
|
|
margin-left: -68px;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
.first-section,
|
|
.second-section,
|
|
.third-section,
|
|
.forth-section {
|
|
width: 50%;
|
|
height: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
color: #ffffff;
|
|
font-size: 16px;
|
|
font-family: "alibabaReg";
|
|
.content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
img {
|
|
width: 32px;
|
|
}
|
|
}
|
|
.first-section {
|
|
.content {
|
|
margin-left: 26px;
|
|
margin-top: 26px;
|
|
}
|
|
}
|
|
.second-section {
|
|
.content {
|
|
margin-right: 26px;
|
|
margin-top: 26px;
|
|
}
|
|
}
|
|
.third-section {
|
|
.content {
|
|
margin-left: 26px;
|
|
margin-bottom: 26px;
|
|
}
|
|
}
|
|
.forth-section {
|
|
.content {
|
|
margin-right: 26px;
|
|
margin-bottom: 26px;
|
|
}
|
|
}
|
|
.center-section {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 50%;
|
|
transform: translate(-50%, -50%);
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
color: #fff;
|
|
font-size: 13px;
|
|
font-family: "alibabaReg";
|
|
|
|
.month {
|
|
font-family: "shuheiTi";
|
|
font-size: 32px;
|
|
line-height: 32px;
|
|
}
|
|
.date {
|
|
font-size: 19px;
|
|
line-height: 32px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|