| | |
| | | |
| | | <style scoped lang="scss"> |
| | | $homeNavLengh: 8; |
| | | @media screen and (min-width: 1366px) { |
| | | .left-info { |
| | | width: 65%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | font-size: 18px; |
| | | color: #333; |
| | | overflow-x: auto; |
| | | } |
| | | .mid-info { |
| | | width: 25%; |
| | | font-size: 18px; |
| | | color: #333; |
| | | } |
| | | .right-info { |
| | | width: 10%; |
| | | display: flex; |
| | | justify-content: right; |
| | | align-items: center; |
| | | font-size: 16px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | @media screen and (min-width: 1200px) and (max-width: 1366px) { |
| | | .left-info { |
| | | width: 65%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | font-size: 15px; |
| | | color: #333; |
| | | overflow-x: auto; |
| | | } |
| | | .mid-info { |
| | | width: 25%; |
| | | font-size: 15px; |
| | | color: #333; |
| | | } |
| | | .right-info { |
| | | width: 10%; |
| | | display: flex; |
| | | justify-content: right; |
| | | align-items: center; |
| | | font-size: 13px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | @media screen and (max-width: 1200px) { |
| | | .left-info { |
| | | width: 65%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | font-size: 12px; |
| | | color: #333; |
| | | overflow-x: auto; |
| | | } |
| | | .mid-info { |
| | | width: 25%; |
| | | font-size: 12px; |
| | | color: #333; |
| | | } |
| | | .right-info { |
| | | width: 10%; |
| | | display: flex; |
| | | justify-content: right; |
| | | align-items: center; |
| | | font-size: 12px; |
| | | color: #fff; |
| | | } |
| | | } |
| | | |
| | | .home-container { |
| | | height: calc(100vh - 144px); |
| | | box-sizing: border-box; |
| | |
| | | justify-content: space-between; |
| | | margin-bottom: 10px; |
| | | background: #daf3ff; |
| | | padding: 20px; |
| | | padding: 10px 15px; |
| | | border-radius: 8px; |
| | | |
| | | .left-info{ |
| | | width: 50%; |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: left; |
| | | font-size: 14px; |
| | | color: #333; |
| | | overflow-x: auto; |
| | | |
| | | .num{ |
| | | font-weight: bolder; |
| | |
| | | } |
| | | } |
| | | .mid-info{ |
| | | width: 35%; |
| | | font-size: 14px; |
| | | color: #333; |
| | | |
| | | span{ |
| | | font-weight: bolder; |
| | |
| | | } |
| | | } |
| | | .right-info{ |
| | | width: 15%; |
| | | display: flex; |
| | | justify-content: right; |
| | | align-items: center; |
| | | font-size: 14px; |
| | | color: #fff; |
| | | |
| | | |
| | | .checkBtn{ |
| | | padding: 10px 15px; |