日历修改

zhangmeng
Showing 3 changed files with 109 additions and 16 deletions
src/viewsPc/components/homeCalendar.vue
src/viewsPc/index.vue
src/viewsPc/saiC/index.vue
--- a/src/viewsPc/components/homeCalendar.vue
View file @6a72560
+++ b/src/viewsPc/components/homeCalendar.vue
View file @6a72560
@@ -6,11 +6,13 @@
          <span class="textDay">{{ date }}</span>
          <el-button-group class="son">
            <el-button size="small" type="primary" @click="selectDateCalendar('prev-month')">
-              上一月
+              {{ language == 0 ? '上一月' : 'Last month' }}
+            </el-button>
+            <el-button size="small" type="primary" @click="selectDateCalendar('today')">
+              {{ language == 0 ? '今天' : 'Today' }}
            </el-button>
-            <el-button size="small" type="primary" @click="selectDateCalendar('today')">今天</el-button>
            <el-button size="small" type="primary" @click="selectDateCalendar('next-month')">
-              下一月
+              {{ language == 0 ? '下一月' : 'Next month' }}
            </el-button>
          </el-button-group>
        </div>
@@ -39,10 +41,14 @@
 </template>
 <script setup>
-import { ref } from 'vue'
+import { onMounted, ref } from 'vue'
 import { dayjs } from 'element-plus'
 import { getIndexScheduleList } from '@/apiPc/common'
 import { useRouter } from 'vue-router'
+import { useStorage } from '@vueuse/core/index'
+import { getMaList } from '@/apiPc/match'
+const language = useStorage('language', 0)
 const calendar = ref('')
 const router = useRouter()
@@ -54,12 +60,30 @@ const query = ref({
  // currentDate:dayjs().format('YYYY-MM-DD')
  currentDate: dayjs().format('YYYY-MM-DD')
 })
-getScheduleList()
-function getScheduleList() {
+onMounted(async() => {
+  await handelGetMatch()
+  await getScheduleList()
+})
+async function handelGetMatch() {
+  const res = await getMaList({
+    type: '-1',
+    progressStatusCode: '-1',
+    pageNum: 1,
+    pageSize: 10
+  })
+  if (res.rows.length > 0) {
+    query.value.currentDate = res.rows[0].beginTime
+    currentDate.value = res.rows[0].beginTime
+  }
+}
+async function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
-  getIndexScheduleList(query.value).then(res => {
+  await getIndexScheduleList(query.value).then(res => {
    loading.value = false
    schList.value = res.data
  })
@@ -93,6 +117,7 @@ const selectDateCalendar = (val) => {
  }
 }
 </script>
 <style lang="scss" scoped>
@@ -224,7 +249,7 @@ const selectDateCalendar = (val) => {
 .son {
  position: absolute;
  right: 0;
-  width: 200px;
+  width: 230px;
 }
 .textDay {
--- a/src/viewsPc/index.vue
View file @6a72560
+++ b/src/viewsPc/index.vue
View file @6a72560
@@ -167,7 +167,7 @@
          </div>
          <!--历史排名-->
          <el-card :body-style="{'padding':'10px 20px 18px'}">
-            <el-table :data="rank" height="336" stripe @row-click="handleRowClick">
+            <el-table :data="rank" height="495" stripe @row-click="handleRowClick">
              <el-table-column align="center" label="名次" prop="index" width="50" />
              <el-table-column label="国家" prop="name">
--- a/src/viewsPc/saiC/index.vue
View file @6a72560
+++ b/src/viewsPc/saiC/index.vue
View file @6a72560
@@ -6,7 +6,24 @@
        <el-row :gutter="20">
          <el-col :lg="12" :sm="24">
            <!--赛事日历-->
-            <el-calendar v-model="currentDate">
+            <el-calendar ref="calendar" v-model="currentDate">
+              <template #header="{ date }">
+                <div class="father">
+                  <span class="textDay">{{ date }}</span>
+                  <el-button-group class="son">
+                    <el-button size="small" type="primary" @click="selectDateCalendar('prev-month')">
+                      {{ language == 0 ? '上一月' : 'Last month' }}
+                    </el-button>
+                    <el-button size="small" type="primary" @click="selectDateCalendar('today')">
+                      {{ language == 0 ? '今天' : 'Today' }}
+                    </el-button>
+                    <el-button size="small" type="primary" @click="selectDateCalendar('next-month')">
+                      {{ language == 0 ? '下一月' : 'Next month' }}
+                    </el-button>
+                  </el-button-group>
+                </div>
+              </template>
              <template #date-cell="data">
                <div
                  :class="data.data.day==query.currentDate?'primaryDate':''" class="date"
@@ -150,7 +167,9 @@ import { getIndexScheduleList } from '@/apiPc/common'
 import { getRank } from '@/apiPc/webSite'
 import { useRouter } from 'vue-router'
 import { medalTableAll } from '/@/apiPc/match'
+import { getMaList } from '@/apiPc/match'
+const calendar = ref('')
 const language = useStorage('language', 0)
 const years = ref([])
 const currYear = ref(null)
@@ -159,10 +178,10 @@ const planList = ref([])
 const rank = ref([])
 const schList = ref([])
 const loading = ref(false)
-const currentDate = ref(dayjs('2025-07-17').toDate())
+const currentDate = ref(dayjs().toDate())
 const query = ref({
  // currentDate:dayjs().format('YYYY-MM-DD')
-  currentDate: '2025-07-17'
+  currentDate: dayjs().toDate()
 })
 const paramsQuery = ref({
  pageSize: 10,
@@ -170,8 +189,26 @@ const paramsQuery = ref({
 })
 const total = ref(0)
-getScheduleList()
+onMounted(async() => {
-getRankList()
+  await handelGetMatch()
+  await getScheduleList()
+  getRankList()
+})
+async function handelGetMatch() {
+  const res = await getMaList({
+    type: '-1',
+    progressStatusCode: '-1',
+    pageNum: 1,
+    pageSize: 10
+  })
+  if (res.rows.length > 0) {
+    query.value.currentDate = res.rows[0].beginTime
+    currentDate.value = res.rows[0].beginTime
+  }
+}
 function getRankList() {
  match.medalTableAll(paramsQuery.value).then(res => {
@@ -180,10 +217,10 @@ function getRankList() {
  })
 }
-function getScheduleList() {
+async function getScheduleList() {
  loading.value = true
  query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
-  getIndexScheduleList(query.value).then(res => {
+  await getIndexScheduleList(query.value).then(res => {
    loading.value = false
    schList.value = res.data
  })
@@ -218,6 +255,17 @@ function goMatch(n) {
    }
  })
 }
+const selectDateCalendar = (val) => {
+  if (!calendar.value) return
+  calendar.value.selectDate(val)
+  if (val == 'today') {
+    query.value.currentDate = dayjs().toDate()
+    getScheduleList()
+  }
+}
 </script>
 <style lang="scss" scoped>
@@ -373,4 +421,24 @@ h3 {
 .w15 {
  width: 15%;
 }
+.father {
+  text-align: center;
+  position: relative;
+  width: 100%;
+}
+.son {
+  position: absolute;
+  right: 0;
+  width: 230px;
+}
+.textDay {
+  font-weight: bold;
+  background: linear-gradient(to right, #8623FC, #453DEA); /* 定义渐变方向和颜色 */
+  -webkit-background-clip: text; /* 兼容 WebKit 浏览器 */
+  background-clip: text; /* 标准语法 */
+  -webkit-text-fill-color: transparent; /* 文字颜色透明 */
+}
 </style>