Timers and other features for Heroes of the Storm
Du kannst nicht mehr als 25 Themen auswählen Themen müssen entweder mit einem Buchstaben oder einer Ziffer beginnen. Sie können Bindestriche („-“) enthalten und bis zu 35 Zeichen lang sein.
 
 
 
 
 

89 Zeilen
2.0 KiB

  1. <template>
  2. <div class="battleground" v-if="battleground">
  3. <div class="battleground-background" :style="backgroundCss"/>
  4. <div class="battleground-content">
  5. <div id="objectives" class="objectives">
  6. <div class="objectives-row" v-for="objectiveRow in battleground.objectives">
  7. <template v-for="objective in objectiveRow">
  8. <Objective :objective="objective"></Objective>
  9. </template>
  10. </div>
  11. </div>
  12. <router-link to="/battlegrounds">Back to selector</router-link>
  13. </div>
  14. </div>
  15. </template>
  16. <style lang="sass" scoped>
  17. $border-style: 1px solid #66CCFF
  18. .battleground
  19. &-background, &-content
  20. position: absolute
  21. height: 100vh
  22. width: 100vw
  23. &-background
  24. background-size: cover
  25. background-position: center
  26. filter: blur(2px) brightness(70%)
  27. z-index: 5
  28. &-content
  29. z-index: 10
  30. .objectives
  31. display: flex
  32. flex-direction: column
  33. height: 100%
  34. &-row
  35. display: flex
  36. justify-content: space-between
  37. flex-grow: 1
  38. &:first-child
  39. border-top: $border-style
  40. border-bottom: $border-style
  41. .objective
  42. &:first-child
  43. border-left: $border-style
  44. border-right: $border-style
  45. </style>
  46. <script>
  47. import BATTLEGROUNDS from '@/gameInfos/battlegrounds'
  48. import Timer from '@/components/Timer'
  49. import Objective from '@/components/Objective'
  50. export default {
  51. name: 'Battleground',
  52. data () {
  53. return {
  54. }
  55. },
  56. computed: {
  57. battlegroundId () {
  58. return this.$route.params.battlegroundId
  59. },
  60. battleground () {
  61. return BATTLEGROUNDS[this.battlegroundId]
  62. },
  63. backgroundCss () {
  64. return {
  65. backgroundImage: `url(${this.battleground.backgroundUrl})`
  66. }
  67. }
  68. },
  69. watch: {
  70. $route (to) {
  71. this.battlegroundId = to.params.battlegroundId
  72. }
  73. },
  74. components: {
  75. Timer,
  76. Objective
  77. }
  78. }
  79. </script>