<template>
  <div>
    <div class="concede">
      <div class="tit">
        <span>进球:大 / 小</span>
      </div>
      <div class="playCode">
        <div class="big flex">
          <div class="teamName">大</div>
          <div class="oddsBox flex">
            <div class="odds">
              <span class="condation">0.5</span>
              <span class="magnification">0.86</span>
            </div>
            <div class="odds">
              <span class="condation">0.5</span>
              <span class="magnification">0.86</span>
            </div>
            <div class="odds">
              <span class="condation">0.5</span>
              <span class="magnification">0.86</span>
            </div>
            <div class="odds">
              <span class="condation">0.5</span>
              <span class="magnification">0.86</span>
            </div>
            <div class="odds">
              <span class="condation">0.5</span>
              <span class="magnification">0.86</span>
            </div>
          </div>
        </div>
        <div class="small flex">
          <div class="teamName">小</div>
          <div class="oddsBox flex">
            <div class="odds">
              <span class="power">0.86</span>
            </div>
            <div class="odds">
              <span class="power">0.86</span>
            </div>
            <div class="odds">
              <span class="power">0.86</span>
            </div>
            <div class="odds">
              <span class="power">0.86</span>
            </div>
            <div class="odds">
              <span class="power">0.86</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {};
</script>
<style scoped>
.tit {
  background: #373737;
  font-size: 0.14rem;
  padding: 0 0.1rem;
  height: 0.4rem;
  line-height: 0.4rem;
  color: #b4b4b4;
}
.flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* flex-direction: row;
  flex-wrap: wrap; */
}
.playCode {
  background: #fff;
}
.big,
.small {
  padding: 0 0.1rem;
  height: 0.7rem;
  line-height: 0.7rem;
  color: rgb(0, 0, 0);
}
.odds {
  width: 0.52rem;
  height: 0.44rem;
  line-height: 0.22rem;
  border: 1px solid #e4e4e4;
  background: #fff;
  cursor: pointer;
  text-align: center;
  font-weight: 700;
  margin: 0 0.06rem;
}
.odds span {
  display: block;
}
.odds:hover,
.odds:hover span {
  background: orange;
  color: #fff;
  border-color: orange;
}
.condation {
  color: #bd4700;
  font-weight: bold;
}
.magnification {
  color: #000;
  font-weight: bold;
}
.small .odds span {
  line-height: 0.44rem;
}
</style>