d4e77cd4ca717ddadd24e01b6f170a1431479a1b.svn-base 2.7 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <template>
  2. <div>
  3. <yd-accordion>
  4. <yd-accordion-item title="零失球">
  5. <div class="notOnly">
  6. <div class="flex" style="padding : 0 0.32rem;">
  7. <div class="list flex arow">
  8. <div>洪都拉斯</div>
  9. <div class="item">
  10. <!-- <span class="condaiton">0.5</span> -->
  11. <span class="num">2.30</span>
  12. </div>
  13. </div>
  14. <div class="list flex arow">
  15. <div>萨尔瓦多</div>
  16. <div class="item">
  17. <!-- <span class="condaiton">0.5</span> -->
  18. <span class="num">3.05</span>
  19. </div>
  20. </div>
  21. </div>
  22. </div>
  23. </yd-accordion-item>
  24. </yd-accordion>
  25. </div>
  26. </template>
  27. <script>
  28. export default {
  29. }
  30. </script>
  31. <style scoped>
  32. div /deep/ .yd-accordion-head-arrow:after {
  33. border: none;
  34. width: 0.5rem;
  35. height: 0.5rem;
  36. background: url(../../assets/st-imges/xiangxia.png) no-repeat;
  37. background-size: 100% 100%;
  38. }
  39. div /deep/ .yd-accordion-head,
  40. div /deep/ .yd-accordion-head-content,
  41. div /deep/ .yd-accordion-title {
  42. font-size: 0.28rem;
  43. color: #fefefe;
  44. background: #a0a0a0;
  45. }
  46. div /deep/ .yd-accordion-head {
  47. padding: 0 0.32rem;
  48. }
  49. .head{
  50. display: flex;
  51. background: #bcbcbc;
  52. color: #333;
  53. font-size: 0.26rem;
  54. padding: 0 0.32rem;
  55. }
  56. .head span{
  57. /* width: 33%; */
  58. text-align: center;
  59. height: 0.8rem;
  60. line-height: 0.8rem;
  61. }
  62. .flex{
  63. display: flex;
  64. align-items: center;
  65. }
  66. .arow{
  67. justify-content: space-between;
  68. }
  69. .only .list,.notOnly .list{
  70. width: 33%;
  71. padding: 0 0.1rem;
  72. height: 0.88rem;
  73. font-size: 0.24rem;
  74. border-right: 1px solid #e4e4e4;
  75. }
  76. .notOnly .list{
  77. width: 50%;
  78. }
  79. .list:nth-last-child(1){
  80. border-right: none;
  81. }
  82. .list .condaiton{
  83. margin-right: 0.1rem;
  84. color: #f76649;
  85. }
  86. .list .num{
  87. display: inline-block;
  88. width: 1.07rem;
  89. height: 0.76rem;
  90. line-height: 0.5rem;
  91. font-size: 0.24rem;
  92. padding: 0.1rem;
  93. border: 1px solid #cecece;
  94. border-radius: 0.1rem;
  95. text-align: center;
  96. }
  97. </style>