<template>
  <!-- 选手排名 -->
  <div>
  <div id="head" style="padding-top: 10px;">
    <p style="text-align: center; margin-top: 60px;font-weight: 800;font-size: xxx-large;font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;color:floralwhite;">players</p>
  </div>
  <div style="font-size: x-large;margin-top: 50px;margin-bottom: 80px;font-family: Arial, Helvetica, sans-serif;font-weight: bolder;">
    <span style="margin-left: 40px;">Men’s Singles Aces Leaders</span>
    <span style="margin-left: 375px;">Women’s Singles Aces Leaders</span>
  </div>
  <rank1 style="width: 600px; display: inline-block;margin-left: 30px;"></rank1>
  <rank2 style="width: 600px; display: inline-block;margin-left: 100px;"></rank2>
  </div>
</template>

<script>
  import rank1 from '@/components/rank1.vue';
  import rank2 from '@/components/rank1.vue'
  export default{
      components:{
          rank1,
          rank2
      },
      methods:{
          
      }
  }
</script>

<style>
body{
margin: 0%;
}
#head{
background-color:#409EFF ;
height: 200px;
}
</style>