.talentMain { padding: 0 14%; padding-bottom: 100px; } .talentItem { height: 320px; border-bottom: 1px solid #e5e5e5; } .talentItem a { height: 100%; width: 100%; display: flex; align-items: center; } .talentItem .pic { width: 351px; height: 221px; overflow: hidden; } .talentItem .cont { width: calc(100% - 385px); margin-left: 34px; } .talentItem .pic img { width: 100%; height: 100%; object-fit: cover; transition: all 1.0s; } .talentItem a:hover img{ transform: scale(1.2); } .talentItem .cont h4 { font-size: 26px; line-height: 40px; color: #1a1a1a; } .talentItem .cont h6 { font-size: 18px; line-height: 28px; color: #999999; padding: 15px 0; } .talentItem .cont p { font-size: 18px; line-height: 24px; color: #4d4d4d; } .talentTit { font-size: 48px; line-height: 45px; color: #333333; text-align: center; padding: 80px 0; font-weight: bold; position: relative; } .talentTit::after { content: 'RECRUITMENT'; position: absolute; left: 0; top: 48px; width: 100%; font-size: 60px; text-align: center; color: #f2f2f2; z-index: -1; } .inputwrap { width: 1020px; height: 60px; margin: 0 auto; display: flex; justify-content: space-between; margin-bottom: 60px; } .inputwrap .customselected { width: 500px; height: 60px; background-color: #F2F2F2; border-radius: 30px; padding: 0 30px; overflow: hidden; } .inputwrap .customselected .custom-select { width: 100%; height: 100%; background-color: transparent; outline: none; font-size: 18px; } .inputwrap .search-container { width: 500px; height: 60px; background-color: #f2f2f2; border-radius: 30px; padding: 0 30px; } .inputwrap .search-container .search-form { width: 100%; height: 100%; display: flex; justify-content: space-between; align-items: center; } .inputwrap .search-container .search-input { width: calc(100% - 60px); background-color: transparent; outline: none; font-size: 18px; } .inputwrap .search-container .search-btn { width: 60px; height: 60px; font-size: 18px; color: #999999; text-align: right; } .talent-grid-container { display: grid; grid-template-columns: repeat(4, 1fr); /* 4列等宽 */ grid-template-rows: auto; /* 自动行高 */ gap: 0px; /* 单元格间距(用于生成分割线) */ width: 100%; position: relative; /* 为伪元素定位提供参考 */ margin-bottom: 20px; border: 0.5px solid #ddd; /* 添加容器外边框 */ } .talent-grid-container .grid-item { padding: 15px; border: 0.5px solid #ddd; background-color: white; height: 380px; overflow: hidden; width: 100%; cursor: pointer; } .talent-grid-container .grid-item h4 { font-size: 26px; font-weight: 800; color: #1A1A1A; line-height: 60px; width: 100%; position: relative; } .talent-grid-container .grid-item h4::after { content: ''; position: absolute; left: 0; bottom: 0; width: 45px; height: 1px; background-color: #B3B3B3; margin-top: 10px; } .talent-grid-container .grid-item ul { padding: 40px 0; } .talent-grid-container .grid-item ul li { color: #333333; font-size: 18px; line-height: 34px; } .talent-grid-container .grid-item p { font-size: 18px; color: #E62129; line-height: 33px; } .talent-grid-container .grid-item:hover { background-color: #E62129; } .talent-grid-container .grid-item:hover h4 { color: #fff; } .talent-grid-container .grid-item:hover li { color: #fff; } .talent-grid-container .grid-item:hover p { color: #fff; } .talent-grid-container .grid-item:hover h4::after{ background-color: #fff; } /* 弹窗基础样式 */ .modal { display: none; /* 默认隐藏 */ position: fixed; z-index: 10000; /* 确保在最顶层 */ left: 0; top: 0; width: 100%; height: 100%; overflow: auto; /* 内容过多时滚动 */ background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */ } .modal-content { position: relative; background-color: white; margin: 15% auto; /* 居中显示 */ padding: 20px; max-width: 70%; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); height: 632px; } .righttool { display: flex; flex-direction: column; position: absolute; top: 0; right: -90px; width: 90px; } .righttool span { width: 90px; height: 90px; background-color: rgba(0, 0, 0, 0.5); text-align: center; line-height: 90px; color: #fff; border-bottom: 1px solid #666; font-size: 24px; cursor: pointer; } .righttool span:last-child{ transform: rotateY(180deg); } .modalSwiper {width: 100%;overflow: hidden;height: 100%;} .modalSwiper .swiper-slide {width: 100%;height: 100%;padding: 40px;} .modalSwiper .swiper-slide .top {display: flex;justify-content: center;align-items: center;} .modalSwiper .swiper-slide .top .item {flex: 1;height: 66px;margin-right: 15px;display: flex;flex-direction: column;justify-content: space-between;} .modalSwiper .swiper-slide .top .item h6 {color: #808080;line-height: 33px;font-size: 18px;} .modalSwiper .swiper-slide .top .item p {font-size: 26px;line-height: 33px;color: #1a1a1a;} .modalSwiper .swiper-slide .tit {border-bottom: 1px solid #b2b2b2;margin-top: 30px;padding: 20px 0;font-size: 18px;line-height: 33px;color: #808080;} .modalSwiper .swiper-slide .cont {overflow-y: auto;width: 100%;height: 280px;padding: 30px 0;font-size: 18px;color: #333333;line-height: 33px;} .buttonwrap {width: 510px;margin: 0 auto;height: 70px;display: flex;justify-content: center;align-items: center;} .buttonwrap .button {width: 240px;height: 70px;border: 1px solid #cccccc;font-size: 18px;color: #e62129;text-align: center;line-height: 70px;} @media only screen and (max-width: 600px) { .talentMain {padding: 0 4%;} .talentItem {height: 160px;} .talentItem .pic {height: 100px;width: 155px;} .talentItem .cont {margin-left: 15px;width: calc(100% - 190px);} .talentItem .cont h4 {font-size: 16px;} .talentItem .cont h6 {padding: 5px 0;font-size: 14px;} .talentItem .cont p {font-size: 14px;} .talentTit {font-size: 24px;padding: 40px 0;} .talentTit::after {font-size: 30px;top: 20px;} .inputwrap {width: calc(100% - 8%);height: 45px;margin-bottom: 30px;} .inputwrap .customselected {width: calc(50% - 5px);height: 45px;border-radius: 22.5px;padding: 0 15px;} .inputwrap .customselected .custom-select {font-size: 14px;} .inputwrap .search-container {width: calc(50% - 5px);height: 45px;border-radius: 22.5px;padding: 0 15px;} .inputwrap .search-container .search-input {font-size: 14px;} .inputwrap .search-container .search-btn {width: 45px;height: 45px;font-size: 14px;} .talent-grid-container {grid-template-columns: repeat(2, 1fr);} .talent-grid-container .grid-item {padding: 10px;height: 300px;} .talent-grid-container .grid-item h4 {font-size: 18px;line-height: 45px;} .talent-grid-container .grid-item ul {padding: 10px 0;} .talent-grid-container .grid-item ul li {font-size: 14px;} .talent-grid-container .grid-item p {font-size: 16px;} .modal-content{padding: 10px;height: auto;} .righttool {width: 45px;right: -45px;} .righttool span{width: 45px;height: 45px;line-height: 45px;} .modalSwiper .swiper-slide {padding: 5px;} .modalSwiper .swiper-slide .top {flex-direction: column;justify-content: flex-start;align-items: flex-start;} .modalSwiper .swiper-slide .top .item {height: 60px;margin-right: 5;margin-bottom: 15px;} .modalSwiper .swiper-slide .top .item h6 {font-size: 14px;line-height: 30px;} .modalSwiper .swiper-slide .top .item p {font-size: 18px;line-height: 30px;} .modalSwiper .swiper-slide .tit {margin-top: 0px;padding: 10px 0;line-height: 30px;} .modalSwiper .swiper-slide .cont {padding: 15px 0;font-size: 14px;} .buttonwrap {width: 100%;height: 45px;} .buttonwrap .button {width: calc((100% - 10px)/2);height: 45px;line-height: 45px;font-size: 14px;} } /* 对于中等屏幕设备(平板等) */ @media only screen and (min-width: 601px) and (max-width: 1199px) { .talentMain {padding: 0 4%;} .inputwrap {width: calc(100% - 8%);height: 45px;margin-bottom: 30px;} .inputwrap .customselected {width: calc(50% - 10px);} .inputwrap .search-container {width: calc(50% - 10px);} .talent-grid-container {grid-template-columns: repeat(2, 1fr);} .modal-content{padding: 10px;height: auto;} .righttool {width: 45px;right: -45px;} .righttool span{width: 45px;height: 45px;line-height: 45px;} .modalSwiper .swiper-slide {padding: 5px;} .modalSwiper .swiper-slide .top {flex-direction: column;justify-content: flex-start;align-items: flex-start;} .modalSwiper .swiper-slide .top .item {height: 60px;margin-right: 5;margin-bottom: 15px;} .modalSwiper .swiper-slide .top .item h6 {font-size: 14px;line-height: 30px;} .modalSwiper .swiper-slide .top .item p {font-size: 18px;line-height: 30px;} .modalSwiper .swiper-slide .tit {margin-top: 0px;padding: 10px 0;line-height: 30px;} .modalSwiper .swiper-slide .cont {padding: 15px 0;font-size: 14px;} .buttonwrap {width: 100%;height: 45px;} .buttonwrap .button {width: calc((100% - 10px)/2);height: 45px;line-height: 45px;font-size: 14px;} } /* 当视口宽度在1200像素到1400像素之间时应用的样式 */ @media only screen and (min-width: 1200px) and (max-width: 1440px) { .talentMain {padding: 0 4%;} }