基本框架搭建

222000233_222000328/ausopen/ausopen/src/components/Day1.vue

+<template>
+    <div>
+        
+    </div>
+</template>
+
+<script>
+export default {
+
+}
+</script>
+
+<style>
+
+</style>
\ No newline at end of file

222000233_222000328/ausopen/ausopen/src/components/DayButtons.vue

+<template>
+<div class="DayButtons">
+    <div class="buttons">
+  <ul>
+    <li><svg @click="turnleft" t="1679453034319" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4747" width="200" height="200"><path d="M512 64C265.6 64 64 265.6 64 512s201.6 448 448 448 448-201.6 448-448S758.4 64 512 64z m0 852c-222.2 0-404-181.8-404-404s181.8-404 404-404 404 181.8 404 404-181.8 404-404 404z" p-id="4748" data-spm-anchor-id="a313x.7781069.0.i30" class="selected" fill="#ffffff"></path><path d="M418 512l179.6-179.6c8.6-8.6 8.6-22.5 0-31.1s-22.5-8.6-31.1 0L371.3 496.4c-8.6 8.6-8.6 22.5 0 31.1l195.2 195.2c8.6 8.6 22.5 8.6 31.1 0 8.6-8.6 8.6-22.5 0-31.1L418 512z" p-id="4749" data-spm-anchor-id="a313x.7781069.0.i29" class="" fill="#1296db"></path></svg></li>
+    <li><button @click="day1">Q1</button></li>
+    <li><button @click="day1">Q2</button></li>
+    <li><button @click="day1">Q3</button></li>
+    <li><button @click="day1">Q4</button></li>
+    <li><button @click="day1">Day1</button></li>
+    <li><button @click="day1">Day2</button></li>
+    <li><button @click="day1">Day3</button></li>
+    <li><button @click="day1">Day4</button></li>
+    <li><button @click="day1">Day5</button></li>
+    <li><button @click="day1">Day6</button></li>
+    <li><button @click="day1">Day7</button></li>
+    <li><button @click="day1">Day8</button></li>
+    <li><button @click="day1">Day9</button></li>
+    <li><svg @click="turnright" t="1679453283680" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7230" width="200" height="200"><path d="M512 960C265.6 960 64 758.4 64 512S265.6 64 512 64s448 201.6 448 448-201.6 448-448 448z m0-852c-222.2 0-404 181.8-404 404s181.8 404 404 404 404-181.8 404-404-181.8-404-404-404z" p-id="7231" data-spm-anchor-id="a313x.7781069.0.i44" class="" fill="#ffffff"></path><path d="M652.7 496.4L457.6 301.3c-8.6-8.6-22.5-8.6-31.1 0s-8.6 22.5 0 31.1L606 512 426.4 691.6c-8.6 8.6-8.6 22.5 0 31.1 8.6 8.6 22.5 8.6 31.1 0l195.2-195.2c8.6-8.5 8.6-22.5 0-31.1z" p-id="7232" data-spm-anchor-id="a313x.7781069.0.i43" class="selected" fill="#1296db"></path></svg></li>
+  </ul>
+    </div>   
+
+</div>
+</template>
+
+<script>
+export default {
+    methods:{
+    day1(){
+      alert("跳转");
+    }
+  },
+  methods:{
+    turnleft(){
+        alert("turnleft");
+    }
+  },
+  methods:{
+    turnright(){
+        alert("turnleft");
+    }
+  }
+
+  
+}
+
+</script>
+
+<style>
+button{
+  color:cadetblue;
+  width: 70px;
+  height: 40px;
+  font-family: 'Segoe UI Black', Courier, monospace;
+  font-size: 20px;
+  background-color: rgba(231, 231, 231,0.5);
+  border-color: rgba(255,255,255,0.5);
+  border-radius: 10%
+}
+li{
+    width: 101px;
+    text-align: center;
+}
+.icon{
+    width: 50px;
+    height: 50px;
+}
+
+</style>
\ No newline at end of file

222000233_222000328/ausopen/ausopen/src/components/Menu.vue

@@ -9,16 +9,16 @@
         </svg>
 			</li>
 			<li id="l1">
-        <a id="AustralianOpen" href="http://localhost:8080/#/AustralianOpen" target="_blank">Australian Open</a>
+        <a id="AustralianOpen" href="http://localhost:8080/#/AustralianOpen" >Australian Open</a>
 			</li>
 			<li id="l2">
-        <a id="RankingOfPlayers" href="http://localhost:8080/#" target="_blank">Ranking Of Players</a>
+        <a id="RankingOfPlayers" href="http://localhost:8080/#">Ranking Of Players</a>
 			</li>
 			<li id="l3">
-        <a id="DailySchedule" href="http://localhost:8080/#/DailySchedule" target="_blank">Daily Schedule</a>
+        <a id="DailySchedule" href="http://localhost:8080/#/DailySchedule" >Daily Schedule</a>
 			</li>
 			<li id="l4">
-        <a id="PromotionChart" href="http://localhost:8080/#/PromotionChart" target="_blank">Promotion Chart</a>
+        <a id="PromotionChart" href="http://localhost:8080/#/PromotionChart" >Promotion Chart</a>
 			</li>
 		</ul>
   </div>

222000233_222000328/ausopen/ausopen/src/main.js

@@ -4,9 +4,13 @@ import Vue from 'vue'
 import App from './App'
 import router from './router'
 import '@/assets/css/base.css'
-import 'element-ui/lib/theme-chalk/index.css'
+// 引入elemetn-ui组件库
+import ElementUI from 'element-ui';
+// 引入element-ui全部css
+import 'element-ui/lib/theme-chalk/index.css';
 
 Vue.config.productionTip = false
+Vue.use(ElementUI)
 
 /* eslint-disable no-new */
 new Vue({

222000233_222000328/ausopen/ausopen/src/view/DailySchedule.vue

@@ -4,25 +4,32 @@
           <img src="static\pic\p2.jpg" width="100%" height="100%" alt="" />
       </div>
     <div id="menu"><Menu/></div>
-    <div id="content">Daily Schedule</div>
+    <div id="content">
+      <div><DayButtons/></div>
+      <div><Day1/></div>
+    </div>
   </div>
 </template>
 
 <script>
 import Menu from '../components/Menu'
+import DayButtons from '../components/DayButtons'
+import Day1 from '../components/Day1'
 export default {
-  components: { Menu},
+  components: { Menu,DayButtons,Day1},
 }
+
+
 </script>
 
 <style>
 #menu{
     width: 100%;
-	margin: 0px;
-	overflow: hidden;
-	background: #173D4D;
-	background-size: 100% 100%;
-	text-align: center;
+	  margin: 0px;
+	  overflow: hidden;
+	  background: #173D4D;
+  	background-size: 100% 100%;
+  	text-align: center;
     z-index:1;
     height: 65px;
 }
@@ -37,4 +44,5 @@ export default {
     position: fixed;
 }
 
+
 </style>
\ No newline at end of file