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() {
method: 'get'
})
}
export function getIndexScheduleList(params) {
return request({
url: '/league/competitionSchedule/getIndexScheduleList',
method: 'get',
params: params
})
}
......
src/viewsPc/components/homeCalendar.vue 0 → 100644
<template>
<div>
<el-calendar v-model="currentDate" :range="calendarRange">
<template #date-cell="data">
<div :class="data.data.day==query.currentDate?'primaryDate date':'date'" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
<ul v-loading="loading">
<li v-for="n in schList" :key="n.id" @click="goMatch(n)">
<label>{{ n.timeStr }}</label>
<div class="esp mt5">{{ n.name }}</div>
</li>
</ul>
<el-empty v-if="schList.length== 0"
style="--el-empty-padding:0;--el-empty-description-margin-top:0"
:image="`/img/order_no.png`" :image-size="200"/>
</div>
</div>
</template>
<script setup>
import {ref} from "vue";
import {dayjs} from "element-plus";
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
const router = useRouter()
const currentDate = ref(new Date())
const calendarRange = ref([dayjs().toDate(), dayjs().toDate()])
const schList = ref([])
const loading = ref(false)
const query = ref({
currentDate:dayjs().format('YYYY-MM-DD')
})
getScheduleList()
function getScheduleList() {
loading.value = true
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
getIndexScheduleList(query.value).then(res=>{
loading.value = false
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).toDate())
console.log(query.value.currentDate)
query.value.currentDate = dayjs(date).toDate()
getScheduleList()
}
function goMatch(n) {
router.push({
name: 'matchDetail',
params: {
id: n.cptId
},
query: {
matchId: n.cptId
}
})
}
</script>
<style scoped lang="scss">
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
padding: 0 0 10px
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
:deep(.el-calendar-table thead th) {
padding: 5px 0 0
}
.primaryDate {
color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px;
overflow: auto;
height: 225px;
ul {
li {cursor: pointer;
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
li:hover {
color: #fff;
background: linear-gradient(-90deg, #8623FC, #453DEA);
label {
color: #fff;
}
}
}
}
</style>
src/viewsPc/index.vue
......@@ -73,24 +73,7 @@
</div>
<!--赛事日历-->
<el-card :body-style="{'padding':'20px 20px'}">
<el-calendar v-model="calendarValue" :range="calendarRange">
<template #date-cell="data">
<div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
<div v-else class="date">
{{ data.data.day.slice(8, 10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
<!-- <ul>-->
<!-- <li v-for="n in 6">-->
<!-- <label>08:00~10:30</label> 无锡公开赛-->
<!-- </li>-->
<!-- </ul>-->
<el-empty style="--el-empty-padding:0;--el-empty-description-margin-top:0" :image="`/img/order_no.png`" :image-size="200"/>
</div>
<home-calendar/>
</el-card>
</el-col>
<el-col :sm="24" :lg="12">
......@@ -258,7 +241,6 @@
</el-row>
</div>
</div>
<div class="box">
<el-row :gutter="20">
<el-col :lg="12">
......@@ -335,6 +317,7 @@
</template>
<script setup>
import HomeQuick from '@/viewsPc/components/homeQuick'
import HomeCalendar from '@/viewsPc/components/homeCalendar'
import {ref, nextTick, onMounted, watch} from 'vue'
import {getCurrentInstance} from '@vue/runtime-core'
import {getHomePage, getNewsListById, getNewsList, getWeather} from '@/apiPc/webSite'
......@@ -385,8 +368,6 @@ const maList = ref([])
const loading = ref(false)
const weatherdialog = ref(false)
const picList = ref([])
const calendarValue = ref(dayjs('2024-07-22').toDate())
const calendarRange = ref([dayjs('2024-07-21').toDate(), dayjs('2024-07-27').toDate()])
onMounted(() => {
init()
......@@ -651,125 +632,6 @@ const goGuide = () => {
}
}
.el-calendar {
--el-calendar-border: none;
--el-calendar-cell-width: 40px;
text-align: center;
--el-text-color-regular: #8E8D94;
:deep(.el-calendar__header) {
justify-content: center;
padding: 0 0 10px
}
:deep(.el-calendar__body) {
border: 1px solid #F0F0F0;
padding: 0
}
:deep(.el-calendar-table .el-calendar-day) {
padding: 1px;
}
:deep(.el-calendar-table td.is-selected) {
background: transparent;
}
:deep(.el-calendar__button-group) {
display: none;
}
:deep(.el-calendar-table thead th) {
padding: 5px 0 0
}
.primaryDate {
color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);
}
.date {
margin: auto;
border-radius: 50%;
width: 30px;
height: 30px;
line-height: 30px;
font-weight: bold;
}
}
.calendarList {
border: 1px solid #F0F0F0;
padding: 12px 20px;
overflow: auto;
height: 225px;
ul {
li {
background: #F6F9FE;
margin: 7px 0 7px 20px;
position: relative;
padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
label {
color: #453DEA;
margin-right: 15px;
&::before {
content: '';
background: #fff;
left: -17px;
top: 0px;
bottom: 0;
margin: auto;
border-radius: 50%;
width: 2px;
height: 2px;
position: absolute;
z-index: 1
}
}
}
li::before {
content: '';
background: linear-gradient(0deg, #8623FC, #453DEA);
border-radius: 50%;
width: 8px;
height: 8px;
position: absolute;
left: -20px;
top: 0;
bottom: 0;
margin: auto;
z-index: 1;
}
li::after {
content: '';
left: -16px;
width: 1px;
height: 100%;
background: #EBEBEB;
position: absolute;
top: 20px
}
li:hover {
color: #fff;
background: linear-gradient(-90deg, #8623FC, #453DEA);
label {
color: #fff;
}
}
}
}
#part1 {
padding: 0 0 40px;
}
......
src/viewsPc/index_en.vue
......@@ -69,23 +69,7 @@
</div>
<!--赛事日历-->
<el-card :body-style="{'padding':'20px 20px'}">
<el-calendar v-model="calendarValue" :range="['2024-07-21','2024-07-27']">
<template #date-cell="data">
<div v-if="data.data.day.slice(8,10)==22" class="primaryDate date">22</div>
<div v-else class="date">
{{ data.data.day.slice(8,10) }}
</div>
</template>
</el-calendar>
<div class="calendarList">
<!-- <ul>-->
<!-- <li class="esp" v-for="n in 6">-->
<!-- <label>08:00~10:30</label> 2024 WDSF Open Group B-->
<!-- </li>-->
<!-- </ul>-->
<el-empty style="--el-empty-padding:0;--el-empty-description-margin-top:0" :image="`/img/order_no.png`" :image-size="200"/>
</div>
<home-calendar/>
</el-card>
</el-col>
<el-col :sm="24" :lg="12">
......@@ -348,6 +332,7 @@ import { getNewsListById, getNewsList,getWeather} from '@/apiPc/webSite'
import { useRouter } from 'vue-router'
import _ from 'lodash'
import HomeQuick from '@/viewsPc/components/homeQuick'
import HomeCalendar from '@/viewsPc/components/homeCalendar'
import { Swiper, SwiperSlide } from 'swiper/vue'
import { Autoplay, Navigation } from 'swiper'
import 'swiper/css'
......
src/viewsPc/saiC/index.vue
......@@ -8,9 +8,10 @@
<el-col :sm="24" :lg="12">
<!--赛事日历-->
<el-calendar v-model="calendarValue">
<el-calendar v-model="currentDate">
<template #date-cell="data">
<div class="date" :class="data.data.day==calendarValue?'primaryDate':''" @click="selectDate(data.data.day)">
<div class="date" :class="data.data.day==query.currentDate?'primaryDate':''" @click="selectDate(data.data.day)">
{{ data.data.day.slice(8,10) }}
</div>
......@@ -20,13 +21,14 @@
</el-col>
<el-col :sm="24" :lg="12">
<div class="calendarList">
<!-- <ul>-->
<!-- <li v-for="n in schList">-->
<!-- <label>08:00~10:30</label> 无锡公开赛-->
<!-- </li>-->
<!-- </ul>-->
<ul v-loading="loading">
<li v-for="n in schList" @click="goMatch(n)">
<label>{{ n.timeStr }}</label>
<div class="esp mt5">{{ n.name }}</div>
</li>
<el-empty v-if="schList.length== 0" :image="`/img/order_no.png`" :image-size="200"/>
</ul>
</div>
<el-empty :image="`/img/order_no.png`" :image-size="200"/>
</el-col>
</el-row>
......@@ -74,55 +76,48 @@ import { getPlanYears, getYearZtxPlanList } from '@/apiPc/train'
import {cjList} from '@/assets/js/data'
import { ArrowRight } from '@element-plus/icons-vue'
import { dayjs } from 'element-plus'
import { szToHz } from '@/utils/ruoyi'
const router = useRouter()
import {useStorage} from "@vueuse/core/index";
import {getIndexScheduleList} from "@/apiPc/common";
import {useRouter} from "vue-router";
const language = useStorage('language', 0)
const years = ref([])
const currYear = ref(null)
const ztxPlanList = ref([])
const planList = ref([])
const schList = ref([])
const loading = ref(false)
const calendarValue = ref(new Date())
// onMounted(() => {
// currYear.value = dayjs().year()
// getPlanYears().then(res => {
// years.value = res.data
// })
// })
//
// watch(currYear, (val) => {
// if (val) {
// getPlanList()
// }
// })
function selectDate(date) {
console.log(date,calendarValue.value)
}
const currentDate = ref(new Date())
const query = ref({
currentDate:dayjs().format('YYYY-MM-DD')
})
function getPlanList() {
getScheduleList()
function getScheduleList() {
loading.value = true
Promise.all([
getYearZtxPlanList({
year: currYear.value,
type: 1// 中跆协
}),
getYearZtxPlanList({
year: currYear.value,
type: 0 // 省
})
]).then(res => {
query.value.currentDate = dayjs(query.value.currentDate).format('YYYY-MM-DD')
getIndexScheduleList(query.value).then(res=>{
loading.value = false
ztxPlanList.value = res[0].rows
planList.value = res[1].rows
schList.value = res.data
})
}
function selectDate(date) {
console.log(dayjs(date).toDate())
console.log(query.value.currentDate)
query.value.currentDate = dayjs(date).toDate()
getScheduleList()
}
function goMatch(n) {
router.push({
name: 'matchDetail',
params: {
id: n.cptId
},
query: {
matchId: n.cptId
}
})
}
</script>
<style scoped lang="scss">
......@@ -152,16 +147,16 @@ h3{background: #F5F0FF;margin: 0;padding: 10px 0;
}
.primaryDate{color: #fff;
background: linear-gradient(90deg, #8623FC, #453DEA);}
.date{ margin:5px auto;border-radius: 50%;width: 30px;height: 30px;line-height: 30px;
.date{ margin:5px auto;border-radius: 50%;width: 34px;height: 34px;line-height: 34px;
font-weight: bold;
}
.calendarList{border: 1px solid #F0F0F0;padding:12px 20px;overflow: hidden;
margin: 46px 0 0;
ul{
.calendarList{border: 1px solid #F0F0F0;padding:12px 20px 0;overflow: hidden;
height: 100%;
ul{ overflow: auto;height: 330px;margin: 0;
li{background: #F6F9FE;margin:7px 0 7px 20px;position: relative;padding: 13px;
border-radius: 10px;
font-weight: 500;
font-size: 15px;
font-size: 15px;cursor: pointer;
label{color: #453DEA;margin-right: 15px;
&::before{content: '';background:#fff;left: -17px;top: 0px;bottom: 0;margin: auto;
border-radius: 50%;width: 2px;height: 2px;position: absolute;z-index: 1}
......
vite.config.js
......@@ -82,8 +82,8 @@ export default defineConfig(({ mode, command }) => {
rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
},
'/dev-api': {
// target: 'http://192.168.1.118:8081/',
target: 'https://dance.itechtop.cn/stage-api',
target: 'http://192.168.1.118:8081/',
// target: 'https://dance.itechtop.cn/stage-api',
changeOrigin: true,
rewrite: (p) => p.replace(/^\/dev-api/, '')
}
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!