Timers and other features for Heroes of the Storm
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
 
 
 
 
 

89 lignes
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>