:root { --theme_color: #245ed7; --theme_bg_color: #f5f6f7; --directory: none; } @themeColor: #245ed7; @import './component.css'; body { background: var(--theme_bg_color); position: relative; } .directory { padding: 2vw; display: var(--directory); .title { margin: 10px auto; width: 100%; font-weight: 700; font-size: 18px; padding: 10px 20px; color: #092780; border: 1px solid #092780; border-radius: 10px; p { font-size: inherit; text-align: center; } span { display: block; text-align: center; } } .text { padding-left: 20px; p, span { font-size: 14px; font-family: PingFang SC, PingFang SC-Regular; font-weight: 400; text-indent: 2em; color: #333; line-height: 2.5; } a { line-height: 2.5; display: block; color: #333; span { font-size: 16px; } } } } .directory-btn { display: var(--directory); position: fixed; bottom: 12vh; left: 1vw; width: 60px; height: 60px; color: #fff; box-shadow: 0 0 2px #ddd; background: var(--theme_color); font-size: 18px; font-weight: bold; text-align: center; letter-spacing: 2px; line-height: 1; padding: 20px 8px; cursor: pointer; border-radius: 8px; z-index: 111; transition: all .3s; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Chrome/Safari/Opera */ -khtml-user-select: none; /* Konqueror */ -moz-user-select: none; /* Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; /* Non-prefixed version, currently not supported by any browser */ &:hover { color: #fff; opacity: .95; } } @media (min-width: 900px) { .video-js { width: 100% !important; height: 624px!important; video{ width: 100%!important; height: 100% !important; } } .pc { display: block !important; } .mobile { display: none !important; } .banner { width: 100%; img { width: 100%; } } nav { width: 100%; height: 60px; background: var(--theme_color); box-shadow: 0 2px 12px #999; .nav-con { width: 1200px; height: inherit; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; .nav-item { font-size: 16px; color: #fff; &:hover { font-weight: bold; } } } } .container { width: 1200px; margin: 80px auto; background: transparent; .theme-title { font-size: 30px; text-align: center; margin-bottom: 60px; } .theme-block-title { font-size: 20px; line-height: 1; padding-left: 10px; margin-bottom: 20px; color: var(--theme_color); border-left: 6px solid var(--theme_color); } .theme-block { width: 100%; padding: 30px 40px; margin-bottom: 40px; background: #fff; > p { line-height: 2; font-size: 16px; text-indent: 2em; text-align: justify; a { font-size: inherit; } } .theme-intro-box { display: flex; justify-content: space-between; .theme-intro-item { width: 330px; height: 195px; position: relative; img { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } .theme-intro-text-box { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 2; padding: 30px 20px; } .theme-intro-title { text-align: center; i { font-size: 36px; font-weight: bold; color: #fff; } i + i { margin-left: 10px; } } .theme-intro-info { div { font-size: 14px; color: #fff; margin-top: 10px; } } } } .swiper-container { margin-top: 30px; } .theme-table { margin-top: 30px; width: 100%; table { width: 100% !important; margin-left: 0 !important; } img { width: 100%; } } .theme-job-list { .theme-job-wrapper { .logo { width: 110px; height: 110px; margin-right: 30px; } .theme-job-item { display: flex; padding: 30px 0; position: relative; border-bottom: 1px solid #f2f2f3; .theme-job-title { display: block; margin-top: 5px; font-size: 18px; font-weight: bold; padding-left: 10px; border-left: 6px solid var(--theme_color); &:hover { color: #245ed7; } } .theme-job-school, .theme-job-address { font-size: 14px; color: #828282; } .theme-job-school { display: inline-block; margin-top: 10px; margin-bottom: 20px; &:hover { color: #245ed7; } } .theme-job-link { position: absolute; bottom: 40px; right: 30px; font-size: 14px; color: #245ed7; } } } } .theme-job-list-more { text-align: center; margin: 40px auto 20px; a { color: #666; font-size: 14px; &:hover { color: #245ed7; } } } } .theme-double-border-title { width: 100%; height: 65px; margin: 70px auto 50px; box-sizing: border-box; position: relative; > div { width: 100%; height: 100%; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--theme_color); text-align: center; } &::before { content: ''; display: block; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #fff; border: 4px solid var(--theme_color); } &::after { content: ''; display: block; position: absolute; box-sizing: border-box; top: 8px; left: 7px; width: 100%; height: 100%; z-index: 0; border: 4px solid var(--theme_color); } } .theme-double-border-title-long { width: 750px; height: 130px; margin: 70px auto 50px; box-sizing: border-box; position: relative; > div { width: 100%; height: 100%; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 36px; color: var(--theme_color); text-align: center; } &::before { content: ''; display: block; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #fff; border: 4px solid var(--theme_color); } &::after { content: ''; display: block; position: absolute; box-sizing: border-box; top: 8px; left: 7px; width: 100%; height: 100%; z-index: 0; border: 4px solid var(--theme_color); } } } .theme-contact { width: 250px; margin: 0 auto 70px; display: flex; > div { display: flex; align-items: center; position: relative; cursor: pointer; * { cursor: default; } img { width: 22px; margin-right: 10px; cursor: pointer; } span { cursor: pointer; font-size: 14px; color: #245ed7; } .theme-contact-info { opacity: 0; display: none; position: absolute; top: -140px; left: 50%; transform: translate(-50%); width: 200px; height: 130px; background: #fff; padding: 15px; transition: all .5s; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); div { font-size: 16px; font-weight: bold; a { font-size: 14px; margin-left: 1em; } } div + div { margin-top: 10px; } } #qrcode { opacity: 0; display: none; position: absolute; top: -140px; left: 50%; transform: translate(-50%); width: 130px; height: 130px; background: #fff; padding: 5px; transition: all .5s; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); img { width: 120px; height: 120px; } } } .theme-contact-btn.active { .theme-contact-info { display: block; opacity: 1; } } .theme-share-btn.active { #qrcode { display: block; opacity: 1; } } > div + div { margin-left: 100px; } } #modal-1 { width: 1000px; height: 680px; .md-content { width: 100%; height: 100%; z-index: 7000; border: 1px solid @themeColor; border-top: 5px solid @themeColor; padding: 10px 20px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); .modal-body { padding: 2rem 0; .modal-title { font-size: 20px; line-height: 1; color: @themeColor; text-align: center; font-weight: bold; margin-top: 15px; } .modal-text{ font-size: 20px; padding: 0 10px; line-height: 2; color: @themeColor; font-weight: bold; border-bottom: 1px solid @themeColor; } .modal-con { padding: 10px; height: 460px; overflow: hidden; overflow-y: auto; font-size: 15px; table tr td:first-child{ max-width: 500px; } table tr td{ padding: 5px; } &::-webkit-scrollbar { /*滚动条整体样式*/ width: 6px !important; /*高宽分别对应横竖滚动条的尺寸*/ height: 6px !important; background: #ffffff !important; cursor: pointer !important; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 5px !important; -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, .5) !important; background: @themeColor !important; cursor: pointer !important; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, .5) !important; border-radius: 0 !important; background: rgba(240, 240, 240, 0.5) !important; cursor: pointer !important; } a { font-size: 15px; } p { font-size: 15px; margin-bottom: 10px; text-align: justify; span { font-size: 15px; color: @themeColor; display: block; font-weight: bold; } } } } >.content-title{ width: 100%; } .md-text { font-size: 1.5rem; color: #000; line-height: 1.5 } .md-btn { width: 28rem; margin: 0 auto; div { width: 12rem; height: 3rem; float: left; text-align: center; font-size: 1.6rem; line-height: 3rem; color: #fff; background: #1060b1; border-radius: 4px; position: inherit; cursor: pointer; } div + div { margin-left: 4rem; } } .md-help { width: 29rem; margin: 0 auto; span { font-size: 1.4rem; color: #af1414; } span + span { color: #1060b1; margin-left: 1rem; cursor: pointer; } p{ width: 1.4rem; height: 1.4rem; display: inline-block; background: #1060b1; font-size: 1.2rem; line-height: 1.4rem; text-align: center; border-radius: 50%; margin-left: 5px; } } } } .md-show.md-effect-1 .md-isShow { opacity: 1!important; } // -------------------------------------------------- // Reveal Modals 弹窗部分 // -------------------------------------------------- .bt { width: 100px; height: 30px; border: 1px solid @themeColor; background-color: @themeColor; color: #FFFFFF; font-weight: 700; } } @media (max-width: 900px) { .video-js { width: 100% !important; height: 48vw!important; background-color: #28DAF4; video{ width: 100%!important; height: 100% !important; } } .pc { display: none !important; } .mobile { display: block !important; } .banner { width: 100%; img { width: 100%; } } nav { width: 100%; height: 10vw; background: var(--theme_color); box-shadow: 0 2px 12px #999; overflow-y: scroll; .nav-con { width: 200vw; height: inherit; padding: 0 4vw; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; .nav-item { font-size: 3.5vw; color: #fff; &:hover { font-weight: bold; } } } } .container { width: 100%; margin: 5vw auto; padding: 0 4vw; background: transparent; .theme-title { font-size: 5vw; text-align: center; margin-bottom: 5vw; } .theme-block-title { font-size: 4vw; line-height: 1; padding-left: 2vw; margin-bottom: 4vw; color: var(--theme_color); border-left: 1vw solid var(--theme_color); } .theme-block { width: 100%; padding: 4vw; margin-bottom: 5vw; background: #fff; > p { line-height: 2; font-size: 3.2vw; text-indent: 2em; text-align: justify; a { font-size: inherit; } } .theme-intro-box { .theme-intro-item { width: 100%; height: 32vw; margin-top: 4vw; position: relative; overflow: hidden; img { width: 100%; } .theme-intro-text-box { width: 100%; position: absolute; top: 0; left: 0; z-index: 2; padding: 5vw; } .theme-intro-title { text-align: center; i { font-size: 6vw; font-weight: bold; color: #fff; } i + i { margin-left: 2vw; } } .theme-intro-info { div { font-size: 3.2vw; color: #fff; margin-top: 2vw; } } } } .swiper-container { margin-top: 4vw; .swiper-slide { width: 100% !important; img { width: 100% !important; } } } .theme-table { margin-top: 30px; width: 100%; overflow-x: scroll; table { margin-left: 0 !important; } img { width: 100%; } } .theme-job-list { .theme-job-wrapper { .logo { width: 15vw; height: 15vw; margin-right: 4vw; } .theme-job-item { display: flex; padding: 4vw 0; position: relative; border-bottom: 1px solid #f2f2f3; .theme-job-title { display: block; font-size: 3.5vw; font-weight: bold; overflow: hidden; border-left: 1vw solid var(--theme_color); padding-left: 2vw; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; &:hover { color: #245ed7; } } .theme-job-school, .theme-job-address { font-size: 3vw; color: #828282; } .theme-job-school { display: inline-block; margin-top: 2vw; margin-bottom: 2vw; &:hover { color: #245ed7; } } .theme-job-link { position: absolute; bottom: 4vw; right: 2vw; font-size: 3vw; color: #245ed7; } } } } .theme-job-list-more { text-align: center; margin: 6vw auto 2vw; a { color: #666; font-size: 3.5vw; &:hover { color: #245ed7; } } } } .theme-double-border-title { width: 35vw; height: 10vw; margin: 8vw auto; box-sizing: border-box; position: relative; > div { width: 100%; height: 100%; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 5vw; color: var(--theme_color); text-align: center; } &::before { content: ''; display: block; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #fff; border: .8vw solid var(--theme_color); } &::after { content: ''; display: block; position: absolute; box-sizing: border-box; top: 8px; left: 7px; width: 100%; height: 100%; z-index: 0; border: .8vw solid var(--theme_color); } } .theme-double-border-title-long { width: 100%; height: 18vw; margin: 8vw auto; box-sizing: border-box; position: relative; > div { width: 100%; height: 100%; position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; font-size: 4.5vw; color: var(--theme_color); text-align: center; } &::before { content: ''; display: block; position: absolute; box-sizing: border-box; top: 0; left: 0; width: 100%; height: 100%; z-index: 1; background: #fff; border: .8vw solid var(--theme_color); } &::after { content: ''; display: block; position: absolute; box-sizing: border-box; top: 8px; left: 7px; width: 100%; height: 100%; z-index: 0; border: .8vw solid var(--theme_color); } } } .theme-contact { width: 60vw; margin: 0 auto 10vw; display: none; > div { display: flex; align-items: center; position: relative; cursor: pointer; * { cursor: default; } img { width: 22px; margin-right: 10px; cursor: pointer; } span { cursor: pointer; font-size: 14px; color: #245ed7; } .theme-contact-info { opacity: 0; display: none; position: absolute; top: -140px; left: 50%; transform: translate(-50%); width: 200px; height: 130px; background: #fff; padding: 15px; transition: all .5s; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); div { font-size: 16px; font-weight: bold; a { font-size: 14px; margin-left: 1em; } } div + div { margin-top: 10px; } } #qrcode { opacity: 0; display: none; position: absolute; top: -140px; left: 50%; transform: translate(-50%); width: 130px; height: 130px; background: #fff; padding: 5px; transition: all .5s; box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.2); img { width: 120px; height: 120px; } } } .theme-contact-btn.active { .theme-contact-info { display: block; opacity: 1; } } .theme-share-btn.active { #qrcode { display: block; opacity: 1; } } > div + div { margin-left: 20vw; } } // -------------------------------------------------- // Reveal Modals 弹窗部分 // -------------------------------------------------- .bt { width: 100px; height: 30px; border: 1px solid #CF3A19; background-color: @themeColor; color: #FFFFFF; font-weight: 700; } #modal-1 { width: 90vw; height: 92vh; .md-content { width: 100%; height: 100%; z-index: 7000; border: 1px solid @themeColor; border-top: 5px solid @themeColor; padding: 10px; -webkit-box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04); .modal-body { //padding: 0 2rem; .modal-title { font-size: 5vw; line-height: 1; color: @themeColor; text-align: center; font-weight: bold; margin-top: 10px; } .modal-text{ font-size: 4vw; padding: 0 10px; line-height: 2; color: @themeColor; font-weight: bold; border-bottom: 1px solid @themeColor; } .modal-con { padding: 10px; height: 74vh; overflow: hidden; overflow-y: auto; font-size: 15px; table tr td:first-child{ max-width: 80vw; } table tr td{ padding: 5px; } &::-webkit-scrollbar { /*滚动条整体样式*/ width: 3px !important; /*高宽分别对应横竖滚动条的尺寸*/ height: 3px !important; background: #ffffff !important; cursor: pointer !important; } &::-webkit-scrollbar-thumb { /*滚动条里面小方块*/ border-radius: 3px !important; -webkit-box-shadow: inset 0 0 5px rgba(240, 240, 240, .5) !important; background: @themeColor !important; cursor: pointer !important; } &::-webkit-scrollbar-track { /*滚动条里面轨道*/ -webkit-box-shadow: inset 0 0 3px rgba(240, 240, 240, .5) !important; border-radius: 0 !important; background: rgba(240, 240, 240, 0.5) !important; cursor: pointer !important; } p { font-size: 15px; margin-bottom: 10px; text-align: justify; span { font-size: 15px; color: @themeColor; display: block; font-weight: bold; } } a { font-size: 1.2rem; } } } >.content-title{ width: 100%; } .md-text { font-size: 1.5rem; color: #000; line-height: 1.5 } .md-btn { width: 28rem; margin: 0 auto; div { width: 12rem; height: 3rem; float: left; text-align: center; font-size: 1.6rem; line-height: 3rem; color: #fff; background: #1060b1; border-radius: 4px; position: inherit; cursor: pointer; } div + div { margin-left: 4rem; } } .md-help { width: 29rem; margin: 0 auto; span { font-size: 1.4rem; color: #af1414; } span + span { color: #1060b1; margin-left: 1rem; cursor: pointer; } p{ width: 1.4rem; height: 1.4rem; display: inline-block; background: #1060b1; font-size: 1.2rem; line-height: 1.4rem; text-align: center; border-radius: 50%; margin-left: 5px; } } } } .md-show.md-effect-1 .md-isShow { opacity: 1!important; } }