commit a3da5622fd831893971693c528a7938cffd76e04 Author: DESKTOP-RQ919RC\Pc <1300399510@qq.com> Date: Tue Jul 8 19:05:56 2025 +0800 no message diff --git a/css/index.css b/css/index.css new file mode 100644 index 0000000..ea2d59f --- /dev/null +++ b/css/index.css @@ -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; +} diff --git a/css/index.less b/css/index.less new file mode 100644 index 0000000..79a1974 --- /dev/null +++ b/css/index.less @@ -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; + } + } + } + } + } + } +} diff --git a/img/admission-head-gray.svg b/img/admission-head-gray.svg new file mode 100644 index 0000000..0a95914 --- /dev/null +++ b/img/admission-head-gray.svg @@ -0,0 +1,7 @@ + + + + + + \ No newline at end of file diff --git a/img/admission-head-green.svg b/img/admission-head-green.svg new file mode 100644 index 0000000..54d287e --- /dev/null +++ b/img/admission-head-green.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/img/admission-head-logo.png b/img/admission-head-logo.png new file mode 100644 index 0000000..70e67b7 Binary files /dev/null and b/img/admission-head-logo.png differ diff --git a/img/interview-bj.svg b/img/interview-bj.svg new file mode 100644 index 0000000..059722c --- /dev/null +++ b/img/interview-bj.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/img/interview-icon.png b/img/interview-icon.png new file mode 100644 index 0000000..26a2d47 Binary files /dev/null and b/img/interview-icon.png differ diff --git a/img/interview-name.png b/img/interview-name.png new file mode 100644 index 0000000..f35bd2b Binary files /dev/null and b/img/interview-name.png differ diff --git a/img/play-btn.svg b/img/play-btn.svg new file mode 100644 index 0000000..99ffe13 --- /dev/null +++ b/img/play-btn.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/index.html b/index.html new file mode 100644 index 0000000..f7052fd --- /dev/null +++ b/index.html @@ -0,0 +1,41 @@ + + + + + + Document + + + +
+
+
+ +
+ + +
+
+
+
+ +
+
+ + +
+
+ + +
+
大标题大标题
+
副标题副标题，副标题副标题副标题
+
+
+
+
+
+
+
+ +