daa5229192dd27823f4da32b1890a71c2eb5aa02.svn-base 3.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145
  1. <template lang="">
  2. <div class = "head">
  3. <div class = "row item-center">
  4. <div class = "ball tit">{{name}}</div>
  5. </div>
  6. <div class = "size" v-if = "rShow">
  7. <div :class = "status.sts ? 'stus':''" @click = "toggle()">让球&大小</div>
  8. <div v-if = '!ishow' :class = "status.ride?'stus':''" @click = "tog()">1x2</div>
  9. <div v-if = 'ishow' :class = "status.ride?'stus':''" @click = "tog()">独赢盘</div>
  10. </div>
  11. </div>
  12. </template>
  13. <script>
  14. import Bus from "../assets/bus.js";
  15. import "../css/index.css";
  16. export default {
  17. props: ["name", "ishow", "gameCode"],
  18. data() {
  19. return {
  20. isShow: "",
  21. status: {
  22. sts: true,
  23. ride: false
  24. },
  25. rShow: true //是否为棒球与网球,是则不显示
  26. // ishow:true
  27. };
  28. },
  29. methods: {
  30. toggle() {
  31. this.status.sts = true;
  32. this.status.ride = false;
  33. this.$emit("toggleStatus", this.status);
  34. this.isShow = true;
  35. Bus.$emit("show", this.isShow);
  36. },
  37. tog() {
  38. this.status.ride = true;
  39. this.status.sts = false;
  40. this.$emit("toggleRide", this.status);
  41. this.isShow = false;
  42. Bus.$emit("show", this.isShow);
  43. },
  44. },
  45. mounted() {
  46. console.log('ishow',this.ishow)
  47. Bus.$on("val", data => {
  48. this.title = data;
  49. });
  50. // console.log("gameCode", this.gameCode);
  51. },
  52. /**
  53. * 计算属性
  54. */
  55. computed: {
  56. getCode: function() {
  57. if ( this.$store.getters.getBallId == "wq") {
  58. this.rShow = false;
  59. } else {
  60. this.rShow = true;
  61. }
  62. // console.log('show', this.rshow)
  63. return this.$store.getters.getBallId;
  64. },
  65. getActivity:function(){
  66. return this.$store.getters.getActivity;
  67. },
  68. },
  69. watch: {
  70. getCode(val) {
  71. if(val == 'lq' || val =='zq'){
  72. this.status.ride = false;
  73. this.status.sts = true;
  74. }
  75. // console.log("aaa", val);
  76. },
  77. getActivity(val){
  78. // 每次玩法变换时将状态值还原
  79. this.status.sts = true;
  80. this.status.ride = false;
  81. this.isShow = true;
  82. Bus.$emit("show", this.isShow);
  83. }
  84. }
  85. };
  86. </script>
  87. <style scoped>
  88. .head {
  89. display: flex;
  90. padding: 0.1rem 0.32rem;
  91. justify-content: space-between;
  92. align-items: center;
  93. background: #797777;
  94. font-size: 0.28rem;
  95. height: 0.8rem;
  96. }
  97. .head .tit {
  98. color: #f76649 !important;
  99. font-size: 0.3rem;
  100. }
  101. .tit img {
  102. width: 0.37rem;
  103. height: 0.3rem;
  104. margin-right: 0.18rem;
  105. }
  106. .head .ball {
  107. color: #ffffff;
  108. }
  109. .head .size {
  110. display: flex;
  111. align-items: center;
  112. justify-content: center;
  113. }
  114. .head .size div {
  115. margin-right: 0.1rem;
  116. font-size: 0.2rem;
  117. color: #e1e1df;
  118. }
  119. .head .size div:nth-child(2) {
  120. padding: 0 0.2rem;
  121. font-size: 0.2rem;
  122. }
  123. .head .size div {
  124. color: rgba(255, 255, 255, 0.6);
  125. display: flex;
  126. align-items: center;
  127. justify-content: center;
  128. height: 0.6rem;
  129. line-height: 0.6rem;
  130. background: #363636;
  131. padding: 0 0.1rem;
  132. border-radius: 0.08rem;
  133. }
  134. .head .size .stus {
  135. background: #adadad;
  136. color: rgba(255, 255, 255);
  137. }
  138. .img {
  139. width: 0.37rem;
  140. height: 0.3rem;
  141. margin-right: 0.18rem;
  142. }
  143. </style>