8bd28637b9b24e99734fa805520412fa377d414a.svn-base 2.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <div>
  3. <div class="letBallBox">
  4. <div class="tit">
  5. <span>让球</span>
  6. </div>
  7. <div class="playCode">
  8. <div class="home">
  9. <div class="teamName">
  10. <span>艾斯坦拿II队</span>
  11. </div>
  12. <div class="oddsBox">
  13. <span class="condation">0.5</span>
  14. <span class="odds">1.28</span>
  15. </div>
  16. </div>
  17. <div class="guest">
  18. <div class="teamName">
  19. <span>玛塔拉尔杰提萨</span>
  20. </div>
  21. <div class="oddsBox">
  22. <span class="condation"></span>
  23. <span class="odds">0.76</span>
  24. </div>
  25. </div>
  26. </div>
  27. </div>
  28. </div>
  29. </template>
  30. <script>
  31. export default {
  32. data(){
  33. return{
  34. title:'concede',
  35. data:[],//数据源
  36. }
  37. },
  38. /**
  39. * 计算属性
  40. */
  41. computed: {
  42. getGameRatio(){
  43. return this.$store.getters.getGameRatio
  44. }
  45. },
  46. /**
  47. * 监听器
  48. */
  49. watch: {
  50. getGameRatio(val){
  51. val.forEach(e => {
  52. if(e[0].p_code == this.title){
  53. this.data = e
  54. console.log(e);
  55. }
  56. });
  57. }
  58. },
  59. }
  60. </script>
  61. <style scoped>
  62. .tit{
  63. background: #373737;
  64. font-size: 0.14rem;
  65. padding: 0 0.1rem;
  66. height: 0.4rem;
  67. line-height: 0.4rem;
  68. color: #b4b4b4;
  69. }
  70. .playCode{
  71. background: #fff;
  72. width: 100%;
  73. height: auto;
  74. }
  75. .playCode:hover{
  76. background: #fff5e9;
  77. }
  78. .home,.guest{
  79. color: rgba(0,0,0);
  80. display: flex;
  81. align-items: center;
  82. height: 0.4rem;
  83. font-size: 0.14rem;
  84. }
  85. .teamName{
  86. width: 20%;
  87. padding-left: 0.1rem;
  88. }
  89. .oddsBox{
  90. width: 25%;
  91. text-align: right;
  92. }
  93. .playCode .odds{
  94. display: inline-block;
  95. height: 0.3rem;
  96. border: 1px solid #e4e4e4;
  97. width: 0.5rem;
  98. background-color: #fff;
  99. text-align: center;
  100. line-height: 0.23rem;
  101. margin: 7px auto 4px;
  102. padding: 0.04rem;
  103. }
  104. .playCode .odds:hover{
  105. background: orange;
  106. color: #fff;
  107. border-color: orange;
  108. }
  109. .condation{
  110. height: 0.4rem;
  111. vertical-align: middle;
  112. color: #bd4700;
  113. padding: 0 0.1rem;
  114. font-size: 0.12rem;
  115. }
  116. </style>