| | |
| | | <img :src="DataBoardMapInit" alt="" /> |
| | | </div> |
| | | <div class="data-board-center-map-mark-item choose" v-else> |
| | | <div class="data-board-center-map-mark-item-park">{{ parkName }}</div> |
| | | <img :src="DataBoardMapChoose" alt="" /> |
| | | <div class="data-board-center-map-mark-item-park"> |
| | | <div class="data-board-center-map-mark-item-park-name">{{ parkName }}</div> |
| | | </div> |
| | | <img class="data-board-center-map-mark-item-img" :src="DataBoardMapChoose" alt="" /> |
| | | </div> |
| | | </div> |
| | | </template> |
| | |
| | | |
| | | &.choose { |
| | | position: relative; |
| | | |
| | | img { |
| | | width: 100%; |
| | | height: 100%; |
| | | } |
| | | display: flex; |
| | | flex-direction: column; |
| | | |
| | | .data-board-center-map-mark-item-park { |
| | | position: absolute; |
| | | top: 0; |
| | | left: 0; |
| | | width: 100%; |
| | | padding: 2px; |
| | | border-radius: 8px; |
| | | background-image: linear-gradient( |
| | | to bottom, |
| | | rgba(248, 255, 156, 0.5), |
| | | rgba(193, 245, 6, 0.5) |
| | | ); |
| | | |
| | | .data-board-center-map-mark-item-park-name { |
| | | padding: 12px 26px; |
| | | font-size: 24px; |
| | | line-height: 50px; |
| | | font-family: YouSheBiaoTiHei Regular; |
| | | border-radius: 8px; |
| | | text-align: center; |
| | | color: #ffffff; |
| | | background: linear-gradient( |
| | | 180deg, |
| | | rgba(255, 176, 29, 0.8) 0%, |
| | | rgba(255, 210, 92, 0.8) 100% |
| | | ); |
| | | line-height: 1; |
| | | word-break: keep-all; |
| | | } |
| | | } |
| | | |
| | | .data-board-center-map-mark-item-img { |
| | | width: 96px; |
| | | height: 54px; |
| | | } |
| | | } |
| | | } |