no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
commit
a3da5622fd
167
css/index.css
Normal file
167
css/index.css
Normal file
@ -0,0 +1,167 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.admission-officer {
|
||||
min-height: 100vh;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.admission-officer .flexflex {
|
||||
display: flex;
|
||||
}
|
||||
.admission-officer .flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
.admission-officer .flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
.admission-officer .flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
.admission-officer .admission-head {
|
||||
width: 100%;
|
||||
height: 144px;
|
||||
background-color: #3c7de9;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-logo {
|
||||
width: 223px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: calc((100vw - 1200px) / 2);
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-box {
|
||||
min-width: 1200px;
|
||||
height: 216px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-gray::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-1 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 68px;
|
||||
}
|
||||
.admission-officer .admission-head .admission-head-2 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
}
|
||||
.admission-officer .admission-body {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 54px;
|
||||
position: relative;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .bj {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left {
|
||||
padding-top: 14px;
|
||||
padding-left: 20px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .head {
|
||||
margin-bottom: 11px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .head .icon {
|
||||
width: 38px;
|
||||
height: 50px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .head .name {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content {
|
||||
width: 592px;
|
||||
height: 333px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .img {
|
||||
width: 592px;
|
||||
height: 333px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .play-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, #000000 100%);
|
||||
padding: 17px 22px 13px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .bottom .title {
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
.admission-officer .admission-body .interview-box .left .content .bottom .subtitle {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
182
css/index.less
Normal file
182
css/index.less
Normal file
@ -0,0 +1,182 @@
|
||||
* {
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.admission-officer {
|
||||
min-height: 100vh;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
.flexflex {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flexacenter {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.flex1 {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.admission-head {
|
||||
width: 100%;
|
||||
height: 144px;
|
||||
background-color: rgba(60, 125, 233, 1);
|
||||
position: relative;
|
||||
|
||||
.admission-head-logo {
|
||||
width: 223px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 60px;
|
||||
left: calc((100vw - 1200px) / 2);
|
||||
}
|
||||
|
||||
.admission-head-box {
|
||||
min-width: 1200px;
|
||||
height: 216px;
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.admission-head-gray {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(100%);
|
||||
}
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 91px;
|
||||
width: calc((100vw - 1920px) / 2);
|
||||
background-color: #f6f6f6;
|
||||
transform: translateX(-100%);
|
||||
}
|
||||
}
|
||||
|
||||
.admission-head-1 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
.admission-head-2 {
|
||||
position: absolute;
|
||||
top: 122px;
|
||||
left: 50%;
|
||||
transform: translateX(-50%);
|
||||
width: 1920px;
|
||||
height: 91px;
|
||||
}
|
||||
}
|
||||
|
||||
.admission-body {
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding-top: 54px;
|
||||
position: relative;
|
||||
.interview-box {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
margin: 0 auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
.bj {
|
||||
width: 100%;
|
||||
height: 435px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.left {
|
||||
padding-top: 14px;
|
||||
padding-left: 20px;
|
||||
.head {
|
||||
margin-bottom: 11px;
|
||||
.icon {
|
||||
width: 38px;
|
||||
height: 50px;
|
||||
margin-right: 1px;
|
||||
}
|
||||
.name {
|
||||
width: 125px;
|
||||
height: 36px;
|
||||
}
|
||||
}
|
||||
.content {
|
||||
width: 592px;
|
||||
height: 333px;
|
||||
position: relative;
|
||||
border-radius: 10px;
|
||||
overflow: hidden;
|
||||
.img {
|
||||
width: 592px;
|
||||
height: 333px;
|
||||
}
|
||||
|
||||
.play-btn {
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.bottom {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
background: linear-gradient(to bottom, rgba(0, 0, 0, 0.047) 0%, rgba(0, 0, 0, 1) 100%);
|
||||
padding: 17px 22px 13px;
|
||||
.title {
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #ffffff;
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
font-size: 13px;
|
||||
color: #ffffff;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
7
img/admission-head-gray.svg
Normal file
7
img/admission-head-gray.svg
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="91px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 0 -125 )">
|
||||
<path d="M 0 91 L 0 0 C 0 0 420.344495524636 28.3554613366832 978.285714285714 28.0806451612903 C 1495.53437373473 27.8258722684889 1920 0 1920 0 L 1920 91 L 0 91 Z "
|
||||
fill-rule="nonzero" fill="#f6f6f6" stroke="none" transform="matrix(1 0 0 1 0 125 )" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 500 B |
6
img/admission-head-green.svg
Normal file
6
img/admission-head-green.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1920px" height="68px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 0 -122 )">
|
||||
<path d="M 0 68 L 0 0 C 0 0 420.344495524636 18.4634216581809 978.285714285714 18.258064516129 C 1495.53437373473 18.0676847720577 1920 0 1920 0 L 1920 68 L 0 68 Z " fill-rule="nonzero" fill="#76c45e" stroke="none" transform="matrix(1 0 0 1 0 122 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/admission-head-logo.png
Normal file
BIN
img/admission-head-logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
12
img/interview-bj.svg
Normal file
12
img/interview-bj.svg
Normal file
@ -0,0 +1,12 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="1200px" height="435px" xmlns="http://www.w3.org/2000/svg">
|
||||
<defs>
|
||||
<linearGradient gradientUnits="userSpaceOnUse" x1="0" y1="216.95625" x2="1197.7164605138" y2="216.95625" id="LinearGradient469">
|
||||
<stop id="Stop470" stop-color="#d6e5e5" offset="0" />
|
||||
<stop id="Stop471" stop-color="#f6f2ea" offset="1" />
|
||||
</linearGradient>
|
||||
</defs>
|
||||
<g transform="matrix(1 0 0 1 -360 -196 )">
|
||||
<path d="M 0 55 L 632.000000000321 55 L 1180 55 C 1191.2 55 1200 63.8 1200 75 L 1200 415 C 1200 426.2 1191.2 435 1180 435 L 20 435 C 8.80000000000001 435 0 426.2 0 415 L 0 55 Z M 632 20 L 632 55 L 0 55 L 0 20 C 0 8.80000000000001 8.80000000000001 0 20 0 L 612 0 C 623.2 0 632 8.80000000000001 632 20 Z M 632 35 C 632 46.1999999999998 640.8 55 651.98268360028 55 L 632 55 L 632 35 Z " fill-rule="nonzero" fill="url(#LinearGradient469)" stroke="none" transform="matrix(1 0 0 1 360 196 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/interview-icon.png
Normal file
BIN
img/interview-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 76 KiB |
BIN
img/interview-name.png
Normal file
BIN
img/interview-name.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
6
img/play-btn.svg
Normal file
6
img/play-btn.svg
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="50px" height="50px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -651 -413 )">
|
||||
<path d="M 12.451171875 3.35286458333333 C 16.2814670138889 1.11762152777777 20.4644097222222 0 25 0 C 29.5355902777778 0 33.7185329861111 1.11762152777777 37.548828125 3.35286458333333 C 41.3791232638889 5.58810763888888 44.4118923611111 8.62087673611111 46.6471354166667 12.451171875 C 48.8823784722222 16.2814670138889 50 20.4644097222222 50 25 C 50 29.5355902777778 48.8823784722222 33.7185329861111 46.6471354166667 37.548828125 C 44.4118923611111 41.3791232638889 41.3791232638889 44.4118923611111 37.548828125 46.6471354166667 C 33.7185329861111 48.8823784722222 29.5355902777778 50 25 50 C 20.4644097222222 50 16.2814670138889 48.8823784722222 12.451171875 46.6471354166667 C 8.62087673611111 44.4118923611111 5.58810763888889 41.3791232638889 3.35286458333333 37.548828125 C 1.11762152777778 33.7185329861111 0 29.5355902777778 0 25 C 0 20.4644097222222 1.11762152777778 16.2814670138889 3.35286458333333 12.451171875 C 5.58810763888889 8.62087673611111 8.62087673611111 5.58810763888888 12.451171875 3.35286458333333 Z M 19.7916666666667 37.20703125 L 37.5 26.7903645833333 C 38.1944444444444 26.3997395833333 38.5416666666667 25.8029513888889 38.5416666666667 25 C 38.5416666666667 24.1970486111111 38.1944444444444 23.6002604166667 37.5 23.2096354166667 L 19.7916666666667 12.79296875 C 19.1189236111111 12.3806423611111 18.4244791666667 12.3697916666667 17.7083333333333 12.7604166666667 C 17.0138888888889 13.1727430555556 16.6666666666667 13.7803819444444 17 14.5833333333333 L 17 35.4166666666667 C 16.6666666666667 36.2196180555556 17.0138888888889 36.8272569444444 17.7083333333333 37.2395833333333 C 18.0555555555556 37.4131944444444 18.4027777777778 37.5 18.75 37.5 C 19.1189236111111 37.5 19.4661458333333 37.40234375 19.7916666666667 37.20703125 Z " fill-rule="nonzero" fill="#ffffff" stroke="none" transform="matrix(1 0 0 1 651 413 )" />
|
||||
</g>
|
||||
</svg>
|
||||
41
index.html
Normal file
41
index.html
Normal file
@ -0,0 +1,41 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
</head>
|
||||
<body>
|
||||
<div class="admission-officer">
|
||||
<div class="admission-head">
|
||||
<div class="admission-head-box">
|
||||
<img class="admission-head-logo" src="./img/admission-head-logo.png" />
|
||||
<div class="admission-head-gray"></div>
|
||||
<img class="admission-head-1" src="/img/admission-head-green.svg" />
|
||||
<img class="admission-head-2" src="/img/admission-head-gray.svg" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="admission-body">
|
||||
<div class="interview-box">
|
||||
<img class="bj" src="./img/interview-bj.svg" />
|
||||
<div class="left">
|
||||
<div class="head flexacenter">
|
||||
<img class="icon" src="./img/interview-icon.png" />
|
||||
<img class="name" src="./img/interview-name.png" />
|
||||
</div>
|
||||
<div class="content">
|
||||
<img class="img" src="https://axure-file.lanhuapp.com/md5__d360c330dfaa81d2fad4ef78a5e74bb1.svg">
|
||||
<img class="play-btn" src="./img/play-btn.svg" />
|
||||
<div class="bottom">
|
||||
<div class="title">大标题大标题</div>
|
||||
<div class="subtitle">副标题副标题，副标题副标题副标题</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
Loading…
x
Reference in New Issue
Block a user