第296行: |
第296行: |
| display: none; | | display: none; |
| } | | } |
| + | |
| + | /* 展示 */ |
| + | .home-events-box { |
| + | display: inline-block; |
| + | overflow: hidden; |
| + | position: relative; |
| + | width:100%; |
| + | height:600px; |
| + | background: #fff; |
| + | border-radius: 4px; |
| + | box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24); |
| + | } |
| + | |
| + | .home-events-tab { |
| + | display: block; |
| + | position: absolute; |
| + | top: 0; |
| + | border-bottom: 2px solid; |
| + | height: 45px; |
| + | width: 50%; |
| + | cursor: pointer; |
| + | } |
| + | |
| + | .home-events-tab:hover { |
| + | background: #eee; |
| + | } |
| + | |
| + | .home-events-tab-active { |
| + | border-color: #e7815c; |
| + | } |
| + | |
| + | .home-events-tab-inactive { |
| + | border-color: white; |
| + | } |
| + | |
| + | .home-events-tab-title { |
| + | display: block; |
| + | position: absolute; |
| + | bottom: 50%; |
| + | left: 0; |
| + | width: 100%; |
| + | transform: translateY(50%); |
| + | text-align: center; |
| + | font-size: 20px; |
| + | } |
| + | |
| + | .home-events-tab-active .home-events-tab-title { |
| + | color: #e7815c; |
| + | } |
| + | |
| + | .home-events-tab-inactive .home-events-tab-title { |
| + | color: grey; |
| + | } |
| + | |
| + | .home-events-container { |
| + | position: absolute; |
| + | top: 47px; |
| + | width: 100%; |
| + | overflow-x: hidden; |
| + | overflow-y: auto; |
| + | } |
| + | |
| + | .home-events-container-inactive { |
| + | display: none; |
| + | } |
| + | |
| + | div.home-events-subtitle { |
| + | display: block; |
| + | border-bottom: 1px solid #e7815c; |
| + | color: #e7815c; |
| + | font-size: 14px; |
| + | } |
| + | |
| + | |
| + | @media (max-width: 412px) { |
| + | .home-events-box { |
| + | width: 100%; |
| + | height: 300px; |
| + | margin: 6px 0; |
| + | } |
| + | |
| + | .home-events-tab { |
| + | height: 30px; |
| + | } |
| + | |
| + | .home-events-tab-title { |
| + | font-size: 18px; |
| + | } |
| + | |
| + | .home-events-container { |
| + | top: 32px; |
| + | /* height: 268px; */ |
| + | |
| + | } |
| + | |
| + | } |