File: /var/www/uileague/wp-content/themes/uileague/home.php
<?php
get_header();
$pos_first = get_stylesheet_directory_uri() . "/assets/images/ic_1st.png";
$pos_second = get_stylesheet_directory_uri() . "/assets/images/ic_2nd.png";
$pos_third = get_stylesheet_directory_uri() . "/assets/images/ic_3rd.png";
?>
<style>
.relative {
position: relative;
}
.section-more {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
color: var(--style-color);
}
.home-news {
padding-right: 60px;
}
@media (max-width:993px) {
.home-news {
padding-right: 0px !important;
}
}
.el-carousel__indicators {
bottom: 30px;
}
.banner-content-container .content {
position: absolute;
bottom: 0;
left: 0;
padding: 5px 10px;
overflow: hidden;
text-overflow: ellipsis;
background: rgba(0, 0, 0, 0.5);
right: 0;
text-align: left;
color: #fff;
}
.el-carousel:before {
display: block;
content: " ";
padding-bottom: 33.333%;
width: 100%;
}
.el-carousel__container {
position: absolute;
top: 0;
width: 100%;
overflow: hidden;
height: 100%;
}
.home-news .el-carousel:before {
display: block;
content: " ";
padding-bottom: 56.25%;
width: 100%;
}
</style>
<div id="app" v-cloak>
<el-carousel :interval="5000" :indicator-position="tableDataBanners.length>1?'-':'none'" :arrow="tableDataBanners.length>1?'always':'never'" v-if="tableDataBanners.length>0">
<el-carousel-item v-for="item in tableDataBanners" :key="item.id">
<a class="mySlides swiper-slide" style="position: relative;width: 100%;height:100%;display:block;z-index:99;">
<div :style="'width: 100%;height:100%;background:url('+item.banner_obj.url+') no-repeat;background-size: cover;background-position: center;opacity:1;border-radius:10px;'">
</div>
<div class="banner-content-container">
<div class="content white" style="height:0px;padding:0;"></div>
</div>
</a>
</el-carousel-item>
</el-carousel>
<div class="w3-row w3-padding-16">
<div class="w3-col l7 m12 s12 home-news">
<div class="w3-padding-16 relative">
<div class="section-title">精彩瞬間</div>
<a v-if="tableDataNews.length>0" href="<?php echo home_url('news'); ?>" class="section-more">更多</a>
</div>
<el-carousel :interval="5000" :indicator-position="tableDataNews.length>1?'-':'none'" :arrow="tableDataNews.length>1?'always':'never'" v-if="tableDataNews.length>0">
<el-carousel-item v-for="item in tableDataNews" :key="item.id">
<a class="mySlides swiper-slide" :href="item.link" style="position: relative;width: 100%;height:100%;display:block;z-index:99;">
<div :style="'width: 100%;height:100%;background:url('+item.cover_obj.url+') no-repeat;background-size: cover;background-position: center;opacity:1;'">
</div>
<div class="banner-content-container">
<div class="content white" style="">{{item.title}}</div>
</div>
</a>
</el-carousel-item>
</el-carousel>
<div v-if="tableDataNews.length==0" style="padding: 10px;">暫無數據</div>
</div>
<div class="w3-col l5 m12 s12">
<div class="w3-hide-large w3-padding-16"></div>
<div class="w3-padding-16 relative">
<div class="section-title">積分榜</div>
<a v-if="tableDataPts.length>0" href="<?php echo home_url('standings'); ?>" class="section-more">更多</a>
</div>
<el-table :data="tableDataPts" v-loading="loadingPts" id="out-table">
<!-- 开始循环 -->
<template v-for="item in tableColumnPts">
<!-- 正常表单列 -->
<el-table-column v-bind:key="item.label" min-width="40" v-if="!item.noRepeat" :label-class-name="item.labelClazz" :class-name="item.clazz" :prop="item.prop" :label="item.label" :show-overflow-tooltip="true" :fixed="item.fixed ? item.fixed : false" :width="item.width ? item.width : ''"></el-table-column>
<el-table-column :label="item.label" min-width="30" v-if="item.prop === 'pos'" v-bind:key="item.label" :show-overflow-tooltip="true" :fixed="item.fixed ? item.fixed : false" :width="item.width ? item.width : ''">
<template slot-scope="props">
<div>
<img v-if="props.row.pos == '1'" src="<?php echo $pos_first; ?>" alt="" class="team-pos-mini">
<img v-else-if="props.row.pos == '2'" src="<?php echo $pos_second; ?>" alt="" class="team-pos-mini">
<img v-else-if="props.row.pos == '3'" src="<?php echo $pos_third; ?>" alt="" class="team-pos-mini">
<div v-else style="padding-left: 6px;">
<b>{{props.row.pos}}</b>
</div>
</div>
</template>
</el-table-column>
<el-table-column :label="item.label" v-if="item.prop === 'team'" v-bind:key="item.label" :show-overflow-tooltip="true" :fixed="item.fixed ? item.fixed : false" :width="item.width ? item.width : ''">
<template slot-scope="props">
<div v-if="props.row.team_obj != null">
<img v-if="props.row.team_obj.logo_obj != null" :src="props.row.team_obj.logo_obj.thumbnail" alt="" class="team-logo-mini">
<span style="font-weight: bold;padding-left: 5px;">{{ props.row.team_obj.team_name }}</span>
</div>
<el-tag v-else type="danger">未指定</el-tag>
</template>
</el-table-column>
<el-table-column :label="item.label" v-if="item.prop === 'league'" v-bind:key="item.label" :show-overflow-tooltip="true" :fixed="item.fixed ? item.fixed : false" :width="item.width ? item.width : ''">
<template slot-scope="props">
<span>{{ props.row.league_obj.league_name }}</span>
</template>
</el-table-column>
</template>
</el-table>
</div>
</div>
<div class="w3-row w3-padding-16">
<div class="w3-padding-16 relative">
<div class="section-title">賽事</div>
<a v-if="tableDataMatches.length>0" href="<?php echo home_url('matches'); ?>" class="section-more">更多</a>
</div>
<div v-if="tableDataMatches.length==0" style="padding: 10px;">暫無數據</div>
<div class="w3-row" style="margin:-16px -16px;" v-loading="loadingMatches">
<div v-for="item in tableDataMatches" class="w3-col l4 m6 s12" style="padding:16px;">
<a v-if="item.team_1_obj != item.team_2_obj != null" class="match-item" :href="item.link">
<div>
<el-tag class="match-status" v-if="item.status == '1'" type="success">上半場</el-tag>
<el-tag class="match-status" v-else-if="item.status == '2'" type="warning">中場休息</el-tag>
<el-tag class="match-status" v-else-if="item.status == '3'" type="success">下半場</el-tag>
<el-tag class="match-status" v-else-if="item.status == '4'" type="info">已結束</el-tag>
<el-tag class="match-status" v-else type="primary">未開始</el-tag>
</div>
<div class="w3-row">
<div class="w3-col m3 s3 match-item-pts">{{item.team_1_total==null?0:item.team_1_total.goal}} </div>
<div class="w3-col m9 s9">
<div>
<img v-if="item.team_1_obj.logo_obj != null" :src="item.team_1_obj.logo_obj.thumbnail" alt="" class="team-logo-mini">
<span class="match-item-team">{{item.team_1_obj.team_name }}</span>
</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m3 s3"> </div>
<div class="w3-col m9 s9">
<div class="vs" style="padding: 10px 0;font-size: 20px;">VS</div>
</div>
</div>
<div class="w3-row">
<div class="w3-col m3 s3 match-item-pts">{{item.team_2_total==null?0:item.team_2_total.goal}} </div>
<div class="w3-col m9 s9">
<div>
<img v-if="item.team_2_obj.logo_obj != null" :src="item.team_2_obj.logo_obj.thumbnail" alt="" class="team-logo-mini">
<span class="match-item-team">{{item.team_2_obj.team_name }}</span>
</div>
</div>
</div>
<div class="match-item-sep"></div>
<div class="w3-row">
<div class="w3-col m3 s3 match-item-label">聯賽</div>
<div class="w3-col m9 s9">{{item.league_obj!=null?item.league_obj.league_name:""}}</div>
<div class="w3-col m3 s3 match-item-label">地點</div>
<div class="w3-col m9 s9">{{item.location_obj!=null?item.location_obj.location:""}}</div>
<div class="w3-col m3 s3 match-item-label">時間</div>
<div class="w3-col m9 s9">{{item.dt}}</div>
</div>
</a>
</div>
</div>
</div>
</div>
<script>
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
ELEMENT.locale(ELEMENT.lang.zhTW);
new Vue({
el: '#app',
data: {
msg: 'Hello Vue',
loadingPts: false,
tableColumnPts: [
// {
// prop: 'pos',
// label: 'Pos',
// noRepeat: true,
// },
{
prop: 'team',
label: '球隊',
noRepeat: true,
},
{
prop: 'league',
label: '聯賽',
noRepeat: true,
},
{
prop: 'p',
label: '場數'
},
{
prop: 'w',
label: '胜'
},
{
prop: 'd',
label: '和',
labelClazz: 'w3-text-blue',
},
{
prop: 'l',
label: '負',
labelClazz: 'w3-text-red',
},
{
prop: 'f',
label: '得球',
labelClazz: 'w3-text-green',
},
{
prop: 'a',
label: '失球',
},
{
prop: 'pts',
label: '得分',
clazz: 'w3-light-gray',
},
// {
// prop: 'pos_change',
// label: 'Pos change'
// },
// {
// prop: 'pts_change',
// label: 'Pts change'
// },
],
tableDataPts: [],
loadingMatches: false,
tableDataMatches: [],
loadingNews: false,
tableDataNews: [],
loadingBanners: false,
tableDataBanners: [],
ws: null,
},
methods: {
initWs() {
var that = this
var url = "<?php echo ws_url() . "?action=1"; ?>"
this.ws = new WebSocket(url)
this.ws.onmessage = function(e) {
var data = JSON.parse(e.data)
if (data.type == "<?php echo WebSocketHelper::TYPE_UPDATE_MATCH; ?>" || data.type == "<?php echo WebSocketHelper::TYPE_GET_MATCHES; ?>") {
that.getTeamPtsList(false);
that.getMatchesList(false);
}
}
},
getTeamPtsList(showLoading = true) {
if (showLoading) {
this.loadingPts = true
}
let params = {
c: 'TeamPts',
a: 'getList',
pageLimit: 6,
status: 1,
}
var that = this
axios.post('<?php echo home_url(); ?>/api-data/', Qs.stringify(params))
.then(function(response) {
if (showLoading) {
that.loadingPts = false
}
var res = response.data
if (res.rc == 0) {
that.tableDataPts = res.data
} else {
that.$message.error(res.msg);
}
})
.catch(function(error) {
if (showLoading) {
that.loadingPts = false
}
that.$message.error("網絡連接失敗");
console.log(error);
});
},
getMatchesList(showLoading = true) {
if (showLoading) {
this.loadingMatches = true
}
let params = {
c: 'Matches',
a: 'getLatestList',
pageLimit: 12,
status: 1,
}
var that = this
axios.post('<?php echo home_url(); ?>/api-data/', Qs.stringify(params))
.then(function(response) {
if (showLoading) {
that.loadingMatches = false
}
var res = response.data
if (res.rc == 0) {
that.tableDataMatches = res.data
} else {
that.$message.error(res.msg);
}
})
.catch(function(error) {
if (showLoading) {
that.loadingMatches = false
}
that.$message.error("網絡連接失敗");
console.log(error);
});
},
getBannersList() {
this.loadingBanners = true
let params = {
c: 'Banners',
a: 'getList',
pageLimit: -1,
status: 1,
}
var that = this
axios.post('<?php echo home_url(); ?>/api-data/', Qs.stringify(params))
.then(function(response) {
that.loadingBanners = false
var res = response.data
if (res.rc == 0) {
that.tableDataBanners = res.data
} else {
that.$message.error(res.msg);
}
})
.catch(function(error) {
that.loadingBanners = false
that.$message.error("網絡連接失敗");
console.log(error);
});
},
getNewsList() {
this.loadingNews = true
let params = {
c: 'News',
a: 'getTmpList',
pageLimit: 5,
status: 1,
}
var that = this
axios.post('<?php echo home_url(); ?>/api-data/', Qs.stringify(params))
.then(function(response) {
that.loadingNews = false
var res = response.data
if (res.rc == 0) {
that.tableDataNews = res.data
} else {
that.$message.error(res.msg);
}
})
.catch(function(error) {
that.loading = false
that.$message.error("網絡連接失敗");
console.log(error);
});
},
},
created() {
this.getBannersList()
this.getNewsList()
this.getTeamPtsList()
this.getMatchesList()
this.initWs()
},
});
</script>
<?php get_footer(); ?>