Skip to content

jijin / dance-pc

Go to a project
Toggle navigation
Toggle navigation pinning
0f58d342 by 杨炀
Options

no message

1 parent 9a186e0e
Inline Side-by-side
Showing 6 changed files with 242 additions and 209 deletions
src/apiPc/common.js
...@@ -33,4 +33,10 @@ export function getExamRegionsList() { ...@@ -33,4 +33,10 @@ export function getExamRegionsList() {
33 method: 'get' 33 method: 'get'
34 }) 34 })
35 } 35 }
36 36 export function getIndexScheduleList(params) {
37 return request({
38 url: '/league/competitionSchedule/getIndexScheduleList',
39 method: 'get',
40 params: params
41 })
42 }
......
src/viewsPc/components/homeCalendar.vue 0 → 100644
1 <template>
2 <div>
3 <el-calendar v-model="currentDate" :range="calendarRange">
4 <template #date-cell="data">
5 <div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
6 {{ data.data.day.slice(8, 10) }}
7 </div>
8
9 </template>
10 </el-calendar>
11 <div class="calendarList">
12 <ul v-loading="loading">
13 <li v-for="n in schList" :key="n.id" @click="goMatch(n)">
14 <label>{{ n.timeStr }}</label>
15 <div class="esp mt5">{{ n.name }}</div>
16 </li>
17 </ul>
18 <el-empty v-if="schList.length== 0"
19 style="--el-empty-padding:0;--el-empty-description-margin-top:0"
20 :image="`/img/order_no.png`" :image-size="200"/>
21 </div>
22 </div>
23 </template>
24
25 <script setup>
26 import {ref} from "vue";
27 import {dayjs} from "element-plus";
28 import {getIndexScheduleList} from "@/apiPc/common";
29 import {useRouter} from "vue-router";
30 const router = useRouter()
31 const currentDate = ref(new Date())
32 const calendarRange = ref([dayjs().toDate(), dayjs().toDate()])
33 const schList = ref([])
34 const loading = ref(false)
35 const query = ref({
36 currentDate:dayjs().format('YYYY-MM-DD')
37 })
38 getScheduleList()
39 function getScheduleList() {
40 loading.value = true
41 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
42 getIndexScheduleList(query.value).then(res=>{
43 loading.value = false
44 schList.value = res.data
45 })
46 }
47 function selectDate(date) {
48 console.log(dayjs(date).toDate())
49 console.log(query.value.currentDate)
50 query.value.currentDate = dayjs(date).toDate()
51 getScheduleList()
52 }
53 function goMatch(n) {
54 router.push({
55 name: 'matchDetail',
56 params: {
57 id: n.cptId
58 },
59 query: {
60 matchId: n.cptId
61 }
62 })
63 }
64 </script>
65
66 <style scoped lang="scss">
67 .el-calendar {
68 --el-calendar-border: none;
69 --el-calendar-cell-width: 40px;
70 text-align: center;
71 --el-text-color-regular: #8E8D94;
72
73 :deep(.el-calendar__header) {
74 justify-content: center;
75 padding: 0 0 10px
76 }
77
78 :deep(.el-calendar__body) {
79 border: 1px solid #F0F0F0;
80 padding: 0
81 }
82
83 :deep(.el-calendar-table .el-calendar-day) {
84 padding: 1px;
85 }
86
87 :deep(.el-calendar-table td.is-selected) {
88 background: transparent;
89 }
90
91 :deep(.el-calendar__button-group) {
92 display: none;
93 }
94
95 :deep(.el-calendar-table thead th) {
96 padding: 5px 0 0
97 }
98
99 .primaryDate {
100 color: #fff;
101 background: linear-gradient(90deg, #8623FC, #453DEA);
102 }
103
104 .date {
105 margin: auto;
106 border-radius: 50%;
107 width: 30px;
108 height: 30px;
109 line-height: 30px;
110 font-weight: bold;
111 }
112 }
113
114 .calendarList {
115 border: 1px solid #F0F0F0;
116 padding: 12px 20px;
117 overflow: auto;
118 height: 225px;
119
120 ul {
121 li {cursor: pointer;
122 background: #F6F9FE;
123 margin: 7px 0 7px 20px;
124 position: relative;
125 padding: 13px;
126 border-radius: 10px;
127 font-weight: 500;
128 font-size: 15px;
129
130 label {
131 color: #453DEA;
132 margin-right: 15px;
133
134 &::before {
135 content: '';
136 background: #fff;
137 left: -17px;
138 top: 0px;
139 bottom: 0;
140 margin: auto;
141 border-radius: 50%;
142 width: 2px;
143 height: 2px;
144 position: absolute;
145 z-index: 1
146 }
147 }
148 }
149
150 li::before {
151 content: '';
152 background: linear-gradient(0deg, #8623FC, #453DEA);
153 border-radius: 50%;
154 width: 8px;
155 height: 8px;
156 position: absolute;
157 left: -20px;
158 top: 0;
159 bottom: 0;
160 margin: auto;
161 z-index: 1;
162 }
163
164 li::after {
165 content: '';
166 left: -16px;
167 width: 1px;
168 height: 100%;
169 background: #EBEBEB;
170 position: absolute;
171 top: 20px
172 }
173
174 li:hover {
175 color: #fff;
176 background: linear-gradient(-90deg, #8623FC, #453DEA);
177
178 label {
179 color: #fff;
180 }
181 }
182 }
183 }
184
185 </style>
src/viewsPc/index.vue
...@@ -73,24 +73,7 @@ ...@@ -73,24 +73,7 @@
73 </div> 73 </div>
74 <!--赛事日历--> 74 <!--赛事日历-->
75 <el-card :body-style="{'padding':'20px 20px'}"> 75 <el-card :body-style="{'padding':'20px 20px'}">
76 <el-calendar v-model="calendarValue" :range="calendarRange"> 76 <home-calendar/>
77 <template #date-cell="data">
78 <div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
79 <div v-else class="date">
80 {{ data.data.day.slice(8, 10) }}
81 </div>
82
83 </template>
84 </el-calendar>
85 <div class="calendarList">
86 <!-- <ul>-->
87 <!-- <li v-for="n in 6">-->
88 <!-- <label>08:00~10:30</label> 无锡公开赛-->
89 <!-- </li>-->
90 <!-- </ul>-->
91 <el-empty style="--el-empty-padding:0;--el-empty-description-margin-top:0" :image="`/img/order_no.png`" :image-size="200"/>
92
93 </div>
94 </el-card> 77 </el-card>
95 </el-col> 78 </el-col>
96 <el-col :sm="24" :lg="12"> 79 <el-col :sm="24" :lg="12">
...@@ -258,7 +241,6 @@ ...@@ -258,7 +241,6 @@
258 </el-row> 241 </el-row>
259 </div> 242 </div>
260 </div> 243 </div>
261
262 <div class="box"> 244 <div class="box">
263 <el-row :gutter="20"> 245 <el-row :gutter="20">
264 <el-col :lg="12"> 246 <el-col :lg="12">
...@@ -335,6 +317,7 @@ ...@@ -335,6 +317,7 @@
335 </template> 317 </template>
336 <script setup> 318 <script setup>
337 import HomeQuick from '@/viewsPc/components/homeQuick' 319 import HomeQuick from '@/viewsPc/components/homeQuick'
320 import HomeCalendar from '@/viewsPc/components/homeCalendar'
338 import {ref, nextTick, onMounted, watch} from 'vue' 321 import {ref, nextTick, onMounted, watch} from 'vue'
339 import {getCurrentInstance} from '@vue/runtime-core' 322 import {getCurrentInstance} from '@vue/runtime-core'
340 import {getHomePage, getNewsListById, getNewsList, getWeather} from '@/apiPc/webSite' 323 import {getHomePage, getNewsListById, getNewsList, getWeather} from '@/apiPc/webSite'
...@@ -385,8 +368,6 @@ const maList = ref([]) ...@@ -385,8 +368,6 @@ const maList = ref([])
385 const loading = ref(false) 368 const loading = ref(false)
386 const weatherdialog = ref(false) 369 const weatherdialog = ref(false)
387 const picList = ref([]) 370 const picList = ref([])
388 const calendarValue = ref(dayjs('2024-07-22').toDate())
389 const calendarRange = ref([dayjs('2024-07-21').toDate(), dayjs('2024-07-27').toDate()])
390 371
391 onMounted(() => { 372 onMounted(() => {
392 init() 373 init()
...@@ -651,125 +632,6 @@ const goGuide = () => { ...@@ -651,125 +632,6 @@ const goGuide = () => {
651 } 632 }
652 } 633 }
653 634
654 .el-calendar {
655 --el-calendar-border: none;
656 --el-calendar-cell-width: 40px;
657 text-align: center;
658 --el-text-color-regular: #8E8D94;
659
660 :deep(.el-calendar__header) {
661 justify-content: center;
662 padding: 0 0 10px
663 }
664
665 :deep(.el-calendar__body) {
666 border: 1px solid #F0F0F0;
667 padding: 0
668 }
669
670 :deep(.el-calendar-table .el-calendar-day) {
671 padding: 1px;
672 }
673
674 :deep(.el-calendar-table td.is-selected) {
675 background: transparent;
676 }
677
678 :deep(.el-calendar__button-group) {
679 display: none;
680 }
681
682 :deep(.el-calendar-table thead th) {
683 padding: 5px 0 0
684 }
685
686 .primaryDate {
687 color: #fff;
688 background: linear-gradient(90deg, #8623FC, #453DEA);
689 }
690
691 .date {
692 margin: auto;
693 border-radius: 50%;
694 width: 30px;
695 height: 30px;
696 line-height: 30px;
697 font-weight: bold;
698 }
699 }
700
701 .calendarList {
702 border: 1px solid #F0F0F0;
703 padding: 12px 20px;
704 overflow: auto;
705 height: 225px;
706
707 ul {
708 li {
709 background: #F6F9FE;
710 margin: 7px 0 7px 20px;
711 position: relative;
712 padding: 13px;
713 border-radius: 10px;
714 font-weight: 500;
715 font-size: 15px;
716
717 label {
718 color: #453DEA;
719 margin-right: 15px;
720
721 &::before {
722 content: '';
723 background: #fff;
724 left: -17px;
725 top: 0px;
726 bottom: 0;
727 margin: auto;
728 border-radius: 50%;
729 width: 2px;
730 height: 2px;
731 position: absolute;
732 z-index: 1
733 }
734 }
735 }
736
737 li::before {
738 content: '';
739 background: linear-gradient(0deg, #8623FC, #453DEA);
740 border-radius: 50%;
741 width: 8px;
742 height: 8px;
743 position: absolute;
744 left: -20px;
745 top: 0;
746 bottom: 0;
747 margin: auto;
748 z-index: 1;
749 }
750
751 li::after {
752 content: '';
753 left: -16px;
754 width: 1px;
755 height: 100%;
756 background: #EBEBEB;
757 position: absolute;
758 top: 20px
759 }
760
761 li:hover {
762 color: #fff;
763 background: linear-gradient(-90deg, #8623FC, #453DEA);
764
765 label {
766 color: #fff;
767 }
768 }
769 }
770 }
771
772
773 #part1 { 635 #part1 {
774 padding: 0 0 40px; 636 padding: 0 0 40px;
775 } 637 }
......
src/viewsPc/index_en.vue
...@@ -69,23 +69,7 @@ ...@@ -69,23 +69,7 @@
69 </div> 69 </div>
70 <!--赛事日历--> 70 <!--赛事日历-->
71 <el-card :body-style="{'padding':'20px 20px'}"> 71 <el-card :body-style="{'padding':'20px 20px'}">
72 <el-calendar v-model="calendarValue" :range="['2024-07-21','2024-07-27']"> 72 <home-calendar/>
73 <template #date-cell="data">
74 <div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
75 <div v-else class="date">
76 {{ data.data.day.slice(8,10) }}
77 </div>
78
79 </template>
80 </el-calendar>
81 <div class="calendarList">
82 <!-- <ul>-->
83 <!-- <li class="esp" v-for="n in 6">-->
84 <!-- <label>08:00~10:30</label> 2024 WDSF Open Group B-->
85 <!-- </li>-->
86 <!-- </ul>-->
87 <el-empty style="--el-empty-padding:0;--el-empty-description-margin-top:0" :image="`/img/order_no.png`" :image-size="200"/>
88 </div>
89 </el-card> 73 </el-card>
90 </el-col> 74 </el-col>
91 <el-col :sm="24" :lg="12"> 75 <el-col :sm="24" :lg="12">
...@@ -348,6 +332,7 @@ import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite' ...@@ -348,6 +332,7 @@ import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite'
348 import { useRouter } from 'vue-router' 332 import { useRouter } from 'vue-router'
349 import _ from 'lodash' 333 import _ from 'lodash'
350 import HomeQuick from '@/viewsPc/components/homeQuick' 334 import HomeQuick from '@/viewsPc/components/homeQuick'
335 import HomeCalendar from '@/viewsPc/components/homeCalendar'
351 import { Swiper, SwiperSlide } from 'swiper/vue' 336 import { Swiper, SwiperSlide } from 'swiper/vue'
352 import { Autoplay, Navigation } from 'swiper' 337 import { Autoplay, Navigation } from 'swiper'
353 import 'swiper/css' 338 import 'swiper/css'
......
src/viewsPc/saiC/index.vue
...@@ -8,9 +8,10 @@ ...@@ -8,9 +8,10 @@
8 <el-col :sm="24" :lg="12"> 8 <el-col :sm="24" :lg="12">
9 <!--赛事日历--> 9 <!--赛事日历-->
10 10
11 <el-calendar v-model="calendarValue"> 11 <el-calendar v-model="currentDate">
12 <template #date-cell="data"> 12 <template #date-cell="data">
13 <div class="date" :class="data.data.day==calendarValue?'primaryDate':''" @click="selectDate(data.data.day)"> 13
14 <div class="date" :class="data.data.day==query.currentDate?'primaryDate':''" @click="selectDate(data.data.day)">
14 {{ data.data.day.slice(8,10) }} 15 {{ data.data.day.slice(8,10) }}
15 </div> 16 </div>
16 17
...@@ -20,13 +21,14 @@ ...@@ -20,13 +21,14 @@
20 </el-col> 21 </el-col>
21 <el-col :sm="24" :lg="12"> 22 <el-col :sm="24" :lg="12">
22 <div class="calendarList"> 23 <div class="calendarList">
23 <!-- <ul>--> 24 <ul v-loading="loading">
24 <!-- <li v-for="n in schList">--> 25 <li v-for="n in schList" @click="goMatch(n)">
25 <!-- <label>08:00~10:30</label> 无锡公开赛--> 26 <label>{{ n.timeStr }}</label>
26 <!-- </li>--> 27 <div class="esp mt5">{{ n.name }}</div>
27 <!-- </ul>--> 28 </li>
29 <el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200"/>
30 </ul>
28 </div> 31 </div>
29 <el-empty :image="`/img/order_no.png`" :image-size="200"/>
30 32
31 </el-col> 33 </el-col>
32 </el-row> 34 </el-row>
...@@ -74,55 +76,48 @@ import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train' ...@@ -74,55 +76,48 @@ import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
74 import {cjList} from '@/assets/js/data' 76 import {cjList} from '@/assets/js/data'
75 import { ArrowRight } from '@element-plus/icons-vue' 77 import { ArrowRight } from '@element-plus/icons-vue'
76 import { dayjs } from 'element-plus' 78 import { dayjs } from 'element-plus'
77 import { szToHz } from '@/utils/ruoyi' 79 const router = useRouter()
78 import {useStorage} from "@vueuse/core/index"; 80 import {useStorage} from "@vueuse/core/index";
81 import {getIndexScheduleList} from "@/apiPc/common";
82 import {useRouter} from "vue-router";
79 const language = useStorage('language', 0) 83 const language = useStorage('language', 0)
80
81 const years = ref([]) 84 const years = ref([])
82 const currYear = ref(null) 85 const currYear = ref(null)
83 const ztxPlanList = ref([]) 86 const ztxPlanList = ref([])
84 const planList = ref([]) 87 const planList = ref([])
85 const schList = ref([]) 88 const schList = ref([])
86 const loading = ref(false) 89 const loading = ref(false)
87 const calendarValue = ref(new Date()) 90 const currentDate = ref(new Date())
88 91 const query = ref({
89 92 currentDate:dayjs().format('YYYY-MM-DD')
90 // onMounted(() => { 93 })
91 // currYear.value = dayjs().year()
92 // getPlanYears().then(res => {
93 // years.value = res.data
94 // })
95 // })
96 //
97 // watch(currYear, (val) => {
98 // if (val) {
99 // getPlanList()
100 // }
101 // })
102 94
103 function selectDate(date) { 95 getScheduleList()
104 console.log(date,calendarValue.value) 96 function getScheduleList() {
105 }
106
107 function getPlanList() {
108 loading.value = true 97 loading.value = true
109 98 query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
110 Promise.all([ 99 getIndexScheduleList(query.value).then(res=>{
111 getYearZtxPlanList({
112 year: currYear.value,
113 type: 1// 中跆协
114 }),
115 getYearZtxPlanList({
116 year: currYear.value,
117 type: 0 // 省
118 })
119 ]).then(res => {
120 loading.value = false 100 loading.value = false
121 ztxPlanList.value = res[0].rows 101 schList.value = res.data
122 planList.value = res[1].rows 102 })
103 }
104 function selectDate(date) {
105 console.log(dayjs(date).toDate())
106 console.log(query.value.currentDate)
107 query.value.currentDate = dayjs(date).toDate()
108 getScheduleList()
109 }
110 function goMatch(n) {
111 router.push({
112 name: 'matchDetail',
113 params: {
114 id: n.cptId
115 },
116 query: {
117 matchId: n.cptId
118 }
123 }) 119 })
124 } 120 }
125
126 </script> 121 </script>
127 122
128 <style scoped lang="scss"> 123 <style scoped lang="scss">
...@@ -152,16 +147,16 @@ h3{background: #F5F0FF;margin: 0;padding: 10px 0; ...@@ -152,16 +147,16 @@ h3{background: #F5F0FF;margin: 0;padding: 10px 0;
152 } 147 }
153 .primaryDate{color: #fff; 148 .primaryDate{color: #fff;
154 background: linear-gradient(90deg, #8623FC, #453DEA);} 149 background: linear-gradient(90deg, #8623FC, #453DEA);}
155 .date{ margin:5px auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px; 150 .date{ margin:5px auto;border-radius: 50%;width: 34px;height: 34px;line-height: 34px;
156 font-weight: bold; 151 font-weight: bold;
157 } 152 }
158 .calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: hidden; 153 .calendarList{border: 1px solid #F0F0F0;padding:12px 20px 0;overflow: hidden;
159 margin: 46px 0 0; 154 height: 100%;
160 ul{ 155 ul{ overflow: auto;height: 330px;margin: 0;
161 li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px; 156 li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px;
162 border-radius: 10px; 157 border-radius: 10px;
163 font-weight: 500; 158 font-weight: 500;
164 font-size: 15px; 159 font-size: 15px;cursor: pointer;
165 label{color: #453DEA;margin-right: 15px; 160 label{color: #453DEA;margin-right: 15px;
166 &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto; 161 &::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto;
167 border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1} 162 border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1}
......
vite.config.js
...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => { ...@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => {
82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '') 82 rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
83 }, 83 },
84 '/dev-api': { 84 '/dev-api': {
85 // target: 'http://192.168.1.118:8081/', 85 target: 'http://192.168.1.118:8081/',
86 target: 'https://dance.itechtop.cn/stage-api', 86 // target: 'https://dance.itechtop.cn/stage-api',
87 changeOrigin: true, 87 changeOrigin: true,
88 rewrite: (p) => p.replace(/^\/dev-api/, '') 88 rewrite: (p) => p.replace(/^\/dev-api/, '')
89 } 89 }
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!