<template>
  <div id="page1">
    <!-- <h1>每日赛程</h1> -->
    <div>
      <div class="block text-center" m="t-4">
        <el-carousel indicator-position="outside" type="card" style="margin-top:60px;">
        <el-carousel-item v-for="item in imgList" :key="item.name" height="10">
        <img :src="item.src" style="height:140%;width:100%;" alt="图片丢失了" :title="item.title" />
        </el-carousel-item>
      </el-carousel>
      </div>
    </div>
    <div style="padding: 100px;margin-left: 350px">
      <el-button @click="day1" type="success" plain>Day1</el-button>
      <el-button @click="day2" type="success" plain>Day2</el-button>
      <el-button @click="day3" type="success" plain>Day3</el-button>
      <el-button @click="day4" type="success" plain>Day4</el-button>
      <el-button @click="day5" type="success" plain>Day5</el-button>
      <el-button @click="day6" type="success" plain>Day6</el-button>
      <el-button @click="Q1" type="success" plain>Q1</el-button>
      <el-button @click="Q2" type="success" plain>Q2</el-button>
    </div>

    <h2>Rod Laver Arena</h2>
    <div style="margin-right: 8px">
      <card
        v-for="card in card"
        :key="card.id"
        :type="card.type"
        :time="card.time"
        :player_1="card.player_1"
        :player_2="card.player_2"
        :score_1="card.score_1"
        :score_2="card.score_2"
        :winner_1="card.winner_1"
        :winner_2="card.winner_2"
        style="float: left; margin: 20px; width: auto;"
      ></card>
    </div>
  </div>
</template>
  
  <script>
import card from "./card.vue";
export default {
  
  data: function() {
    return {
      imgList: [
        {
          name: "lj",
          src: require("@/assets/homepic1.jpg"),
          title: "homepic1.jpg"
        },
        {
          name: "logo",
          src: require("@/assets/homepic2.jpg"),
          title: "homepic2.jpg"
        },
        {
          name: "bg",
          src: require("@/assets/homepic3.jpg"),
          title: "homepic3.jpg"
        },
        {
          name: "sadmas",
          src: require("@/assets/homepic4.jpg"),
          title: "homepic4.jpg"
        }
      ],
      card: [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 2,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 3,
          type: "Men's single",
          time: "1h41m",
          player_1: "Y.Yuan",
          player_2: "C.Gauff",
          winner_1: false,
          winner_2: true,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        }
      ],
      day: "Day1"
    };
  },
  methods: {
    day1() {
      this.day = "Day1";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h30m",
          player_1: "H.Hurkacz",
          player_2: "S.Korda",
          winner_1: true,
          winner_2: false,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h41m",
          player_1: "Y.Yuan",
          player_2: "C.Gauff",
          winner_1: false,
          winner_2: true,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        }
      ];
    },
    day2() {
      this.day = "Day2";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Women's Singles",
          time: "1h34m",
          player_1: "Y.Yuan",
          player_2: "M.Sakkari",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "3h41m",
          player_1: "R.Nadal",
          player_2: "J.Draper",
          winner_1: true,
          winner_2: false,
          score_1: ["7", "2", "6", "6"],
          score_2: ["5", "6", "4", "1"]
        }
      ];
    },
    day3() {
      this.day = "Day3";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h30m",
          player_1: "H.Hurkacz",
          player_2: "S.Korda",
          winner_1: true,
          winner_2: false,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h41m",
          player_1: "Y.Yuan",
          player_2: "C.Gauff",
          winner_1: false,
          winner_2: true,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        }
      ];
    },
    day4() {
      this.day = "Day4";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Women's Singles",
          time: "1h34m",
          player_1: "Y.Yuan",
          player_2: "M.Sakkari",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "3h41m",
          player_1: "R.Nadal",
          player_2: "J.Draper",
          winner_1: true,
          winner_2: false,
          score_1: ["7", "2", "6", "6"],
          score_2: ["5", "6", "4", "1"]
        }
      ];
    },
    day5() {
      this.day = "Day5";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h30m",
          player_1: "H.Hurkacz",
          player_2: "S.Korda",
          winner_1: true,
          winner_2: false,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h41m",
          player_1: "Y.Yuan",
          player_2: "C.Gauff",
          winner_1: false,
          winner_2: true,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        }
      ];
    },
    day6() {
      this.day = "Day6";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Women's Singles",
          time: "1h34m",
          player_1: "Y.Yuan",
          player_2: "M.Sakkari",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "3h41m",
          player_1: "R.Nadal",
          player_2: "J.Draper",
          winner_1: true,
          winner_2: false,
          score_1: ["7", "2", "6", "6"],
          score_2: ["5", "6", "4", "1"]
        }
      ];
    },
    Q1() {
      this.day = "Q1";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["0", "", "", "0"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h30m",
          player_1: "H.Hurkacz",
          player_2: "S.Korda",
          winner_1: true,
          winner_2: false,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "1h41m",
          player_1: "Y.Yuan",
          player_2: "C.Gauff",
          winner_1: false,
          winner_2: true,
          score_1: ["6", "3", "2", "6"],
          score_2: ["3", "6", "6", "1"]
        }
      ];
    },
    Q2() {
      this.day = "Q2";
      this.card = [
        {
          id: 1,
          type: "Women's Singles",
          time: "1h15m",
          player_1: "Y.Nishioka",
          player_2: "K.Khachanov",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Women's Singles",
          time: "1h34m",
          player_1: "Y.Yuan",
          player_2: "M.Sakkari",
          winner_1: false,
          winner_2: true,
          score_1: ["1", "", "", "4"],
          score_2: ["6", "", "", "6"]
        },
        {
          id: 1,
          type: "Men's single",
          time: "3h41m",
          player_1: "R.Nadal",
          player_2: "J.Draper",
          winner_1: true,
          winner_2: false,
          score_1: ["7", "2", "6", "6"],
          score_2: ["5", "6", "4", "1"]
        }
      ];
    }
  },
  components: {
    card
  }
};
</script>
  
  <style scoped>
/* @import url("//unpkg.com/element-ui@2.15.13/lib/theme-chalk/index.css"); */
#page1 {
  margin: 0;
  padding: 0;
  background: rgb(136, 142, 136);
  height: 600px;
  width: 100%;
}
.demonstration {
  color: var(--el-text-color-secondary);
}

.el-carousel__item h3 {
  color: #475669;
  opacity: 0.75;
  line-height: 150px;
  margin: 0;
  text-align: center;
}

.el-carousel__item:nth-child(2n) {
  background-color: #99a9bf;
}

.el-carousel__item:nth-child(2n + 1) {
  background-color: #d3dce6;
}
.el-button--danger.is-disabled:hover {
  background-color: #eee;
  border: 1px solid #ccc;
}
</style>
  