| @import '../../variables.scss'; |
| @import '../../reset.scss'; |
| |
| .ecology-page { |
| .eco-container { |
| max-width: $contentWidth; |
| margin: $headerHeight auto 96px; |
| padding: 0 40px; |
| box-sizing: border-box; |
| .eco-title { |
| font-family: Avenir-Heavy; |
| font-size: 36px; |
| color: #333; |
| text-align: center; |
| padding-top: 40px; |
| } |
| .eco-desc { |
| font-family: Avenir-Roman; |
| font-size: 16px; |
| color: #666; |
| text-align: center; |
| max-width: 750px; |
| margin: 12px auto 24px; |
| } |
| .eco-body { |
| display: flex; |
| .memo { |
| font-size: 0; |
| margin-bottom: 16px; |
| display: flex; |
| width: 100%; |
| .memo-title { |
| display: inline-block; |
| width: 28px; |
| box-sizing: border-box; |
| min-height: 116px; |
| vertical-align: top; |
| padding: 10px 0; |
| span { |
| display: inline-block; |
| transform-origin: center center; |
| writing-mode: vertical-rl; |
| color: #fff; |
| font-size: 12px; |
| font-family: Avenir-Heavy; |
| line-height: 28px; |
| text-align: center; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| height: 100%; |
| } |
| } |
| .memo-body { |
| position: relative; |
| display: inline-block; |
| overflow: hidden; |
| background: #F8F8F8; |
| width: calc(100% - 28px); |
| &::before { |
| content: ''; |
| display: block; |
| border-left: 1px solid #f8f8f8; |
| position: absolute; |
| left: 0; |
| top: 0; |
| height: 100%; |
| z-index: 1; |
| } |
| &::after { |
| content: ''; |
| display: block; |
| border-bottom: 1px solid #f8f8f8; |
| position: absolute; |
| left: 0; |
| bottom: 0; |
| width: 100%; |
| } |
| .card { |
| display: inline-block; |
| box-sizing: border-box; |
| padding: 8px 4px 4px 8px; |
| min-width: 144px; |
| height: 116px; |
| border-left: 1px solid #e8e8e8; |
| border-bottom: 1px solid #e8e8e8; |
| position: relative; |
| // 障眼法,用线实现分行的效果 |
| &::after { |
| content: ''; |
| position: absolute; |
| width: 2000px; |
| border-bottom: 1px solid #e8e8e8; |
| left: 114px; |
| bottom: -1px; |
| } |
| .card-title { |
| font-family: Avenir-Heavy; |
| font-size: 12px; |
| color: #333; |
| margin-bottom: 8px; |
| } |
| .hidden-img-title { |
| font-size: 10px; |
| color: #333; |
| } |
| .card-content { |
| writing-mode: vertical-lr; |
| .img-item { |
| writing-mode: horizontal-tb; |
| box-sizing: border-box; |
| background: #fff; |
| border: 1px solid #e8e8e8; |
| width: 40px; |
| height: 36px; |
| line-height: 34px; |
| margin-right: 4px; |
| margin-bottom: 4px; |
| display: inline-block; |
| cursor: pointer; |
| text-align: center; |
| img { |
| max-width: 100%; |
| max-height: 100%; |
| } |
| } |
| |
| } |
| } |
| } |
| } |
| .memo-vertical { |
| display: inline-block; |
| margin-left: 20px; |
| height: 100%; |
| .memo-title { |
| width: 144px; |
| height: 28px; |
| min-height: auto; |
| padding: 0 10px; |
| span { |
| transform: rotate(0deg); |
| writing-mode: horizontal-tb; |
| font-family: Avenir-Heavy; |
| line-height: 28px; |
| text-align: center; |
| overflow: hidden; |
| text-overflow: ellipsis; |
| white-space: nowrap; |
| height: 100%; |
| } |
| } |
| .memo-body { |
| height: calc(100% - 44px); |
| width: auto; |
| &::before { |
| display: none; |
| } |
| &::after { |
| display: none; |
| } |
| .card { |
| display: block; |
| padding: 8px 4px 4px 8px; |
| width: 144px; |
| height: auto; |
| border: none; |
| border-bottom: 1px solid #e8e8e8; |
| &::after { |
| display: none; |
| } |
| &:last-child { |
| border: none; |
| } |
| .card-title { |
| font-family: Avenir-Heavy; |
| font-size: 12px; |
| color: #333; |
| margin-bottom: 8px; |
| } |
| .card-content { |
| writing-mode: vertical-lr; |
| .img-item { |
| writing-mode: horizontal-tb; |
| box-sizing: border-box; |
| background: #fff; |
| border: 1px solid #e8e8e8; |
| width: 40px; |
| height: 36px; |
| line-height: 34px; |
| margin-right: 4px; |
| margin-bottom: 4px; |
| display: inline-block; |
| cursor: pointer; |
| text-align: center; |
| img { |
| max-width: 100%; |
| max-height: 100%; |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| } |
| |
| .ant-tooltip-inner { |
| background-color: #fff !important; |
| color: #333 !important; |
| } |
| .ant-tooltip-arrow { |
| border-top-color: #fff !important; |
| } |
| |
| .img-item-modal { |
| .ant-modal-body { |
| padding-top: 40px; |
| } |
| .modal-content-left { |
| display: inline-block; |
| width: 180px; |
| height: 162px; |
| line-height: 162px; |
| box-sizing: border-box; |
| border: 1px solid #e8e8e8; |
| text-align: center; |
| img { |
| max-width: 100%; |
| max-height: 100%; |
| } |
| } |
| .modal-content-right { |
| display: inline-block; |
| padding-left: 20px; |
| vertical-align: top; |
| font-size: 0; |
| h3 { |
| font-family: PingFangSC-Medium; |
| font-size: 24px; |
| line-height: 33px; |
| color: #333; |
| margin-bottom: 8px; |
| } |
| p { |
| font-family: PingFangSC-Medium; |
| font-size: 12px; |
| line-height: 17px; |
| color: #571ED3; |
| margin-bottom: 8px; |
| } |
| .tag { |
| font-family: PingFangSC-Medium; |
| font-size: 12px; |
| line-height: 1.5; |
| color: #FFFFFF; |
| display: inline-block; |
| background: #835BE3; |
| border-radius: 2px; |
| margin-right: 12px; |
| margin-bottom: 32px; |
| padding: 0 8px; |
| } |
| .website, .repository { |
| margin-bottom: 10px; |
| span { |
| font-family: PingFangSC-Medium; |
| font-size: 12px; |
| color: #666; |
| display: inline-block; |
| width: 94px; |
| } |
| a { |
| font-family: PingFangSC-Medium; |
| font-size: 12px; |
| color: #571ED3; |
| } |
| } |
| } |
| } |
| |
| @media screen and (max-width: 640px) { |
| .ecology-page { |
| .eco-container { |
| .eco-body { |
| display: block; |
| } |
| } |
| } |
| } |