.tabs-container { background: #f7f7f7; padding: 60px 0 80px; } .tabs-container .w1280.message-list { display: grid; grid-template-columns: repeat(5, 1fr); grid-column-gap: 30px; grid-row-gap: 30px; } .tabs-container .tab-box { background: #fff; border-top: 5px solid #e6e6e6; text-align: center; padding-top: 40px; position: relative; height: 250px; box-sizing: border-box; } .tabs-container .tab-box img { height: 48px; } .tabs-container .tab-box .title { font-size: 18px; font-weight: bold; color: #333333; line-height: 28px; margin-top: 20px; } .tabs-container .tab-box .more { font-size: 16px; font-weight: 400; color: #333; display: flex; align-items: center; justify-content: center; position: absolute; bottom: 20px; width: 100%; padding-top: 25px; border-top: 1px solid rgba(0, 0, 0, 0.1); } .tabs-container .tab-box .more p{ font-weight: bold; } .tabs-container .tab-box .more .bg { width: 25px; height: 25px; margin-left: 14px; background: url(../images/zoujin/ico15.png) no-repeat center / 100%; } .tabs-container .tab-box:hover { border-color: #f08200; } .tabs-container .tab-box:hover .more { color: #f08200; } .tabs-container .tab-box:hover .more .bg { background-image: url(../images/zoujin/ico14.png); } .message-detail .message-block1 { margin-top: 40px; } .message-colla { background: #fff; padding: 0 40px; margin-bottom: 20px; position: relative; } .message-colla .content-title { font-size: 18px; font-weight: 400; color: #333333; margin-right: 135px; line-height: 30px; padding: 40px 0; text-align: justify; } .message-colla .tool { width: 56px; height: 56px; background: rgba(240, 130, 0, 0); border: 1px solid #e6e6e6; border-radius: 56px; position: absolute; font-size: 0; right: 40px; top: 40px; cursor: pointer; transition: all 0.3s; } .message-colla.active .tool { border-color: #f08200; transform: rotate(45deg); transition: all 0.3s; } .message-colla.active .tool::after, .message-colla.active .tool::before { background: #f08200; } .message-colla .tool::before, .message-colla .tool::after { position: absolute; top: 0; bottom: 0; left: 0; right: 0; margin: auto; } .message-colla.active .message-content { display: block; } .message-colla .message-content { font-size: 16px; font-weight: 400; color: #666666; line-height: 40px; text-align: justify; /* height: 0; overflow: hidden; */ padding-top: 35px; border-top: 1px solid rgba(0, 0, 0, .05); padding-bottom: 40px; display: none; } .message-colla .message-content.on{ border-top: 1px solid rgba(0, 0, 0, 0.05); } .message-colla .tool::before { content: ''; width: 2px; height: 20px; background: rgba(51, 51, 51, 0.55); } .message-colla .tool::after { content: ''; width: 20px; height: 2px; background: rgba(51, 51, 51, 0.55); } .message-colla .layui-icon { display: none; } .message-description { font-size: 16px; font-weight: 400; color: #666666; padding: 20px 0 80px; } .message-table .layui-table thead th{ padding: 20px 10px; color: #f7f7f7; font-size: 16px; text-align: center; line-height: 28px; white-space: nowrap; } .message-table .layui-table td{ white-space: nowrap; } .messagePeopleImg{ display: none; position: fixed; left: 0; top: 0; z-index: 10; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.4); } .messagePeopleImg .content{ position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 100%; height: 60%; max-width: 500px; background: #fff; } .messagePeopleImg .content .close{ display: flex; align-items: center; justify-content: center; position: absolute; top: -25px; right: -60px; z-index: 1; width: 40px; height: 40px; font-size: 0; cursor: pointer; border-radius: 50%; border: 1px solid #fff; } .messagePeopleImg .content .cont{ display: flex; align-items: center; justify-content: center; height: 100%; font-size: 0; } .messagePeopleImg .content .cont img{ max-width: 100%; max-height: 100%; } .messagePeopleImg .content .close img { width: 25px; height: 25px; filter: contrast(0) brightness(10); } .message-table{ overflow: auto; } @media (max-width: 768px) { .tabs-container { padding: 40px 0; } .tabs-container .w1280.message-list { grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; } .tabs-container .tab-box { padding-top: 30px; height: 200px; } .tabs-container .tab-box img { height: 40px; } .tabs-container .tab-box .title { margin-top: 10px; font-size: 15px; } .tabs-container .tab-box .more { padding-top: 15px; bottom: 15px; } .message-detail .message-block1 { margin-top: 30px; } .message-colla { padding: 0 20px; } .message-colla .content-title { padding: 20px 0; font-size: 14px; line-height: 26px; margin-right: 50px; } .message-colla .tool { width: 36px; height: 36px; right: 20px; top: 20px; } .message-colla .tool::before { width: 2px; height: 12px; } .message-colla .tool::after { width: 12px; height: 2px; } .message-colla .message-content { font-size: 14px; line-height: 24px; padding: 25px 0; } .message-description { line-height: 26px; font-size: 15px; padding: 0px 0 40px; } .message-table { margin-top: 30px; } .messagePeopleImg .content{ width: auto; height: auto; max-width: 80%; max-height: 60%; background: none; /* width: auto; */ } .messagePeopleImg .content .close{ top: -60px; right: -60px; } }