File: /var/www/dk/wp-content/themes/food/page-medicine-zone.php
<?php
/* Template Name: medicine-zone */
//get_header('food');
get_header('MedicalMediaChannel');
//獲取預設info
global $MMC_index_post_id;
$index_post = $MMC_index_post_id; //114;
$home_info = getHomeInfo($index_post);
$vueVersion = time();
?>
<style>
.home_main_num {
/*font-size: 46px;*/
font-family: Arial;
font-weight: bold;
/* line-height: 54px; */
color: #009B96;
opacity: 1;
}
.home_main_text {
/*font-size: 20px;*/
font-family: Source Han Sans CN;
font-weight: 400;
/* line-height: 35px; */
color: #999999;
opacity: 1;
}
.menu_a_div a:hover {
color: #FAEE00;
/*color: #1dffff;*/
}
</style>
<app id="app">
<yq-header></yq-header>
<main class=" w-100 py-[0.2rem] md:w-[768px] md:mx-auto xl:w-[1280px]">
<!-- 輪播 -->
<div v-if="a_banner.length > 0" class=" relative w-100 px-[0.3rem]">
<!-- h-[2.3rem] md:h-[6.6rem]-->
<div @click="toBannerLink()" class=" w-full " id="banner">
<img v-for="(item, key) in a_banner" :key="'bannerimg'+item.id" v-show="banner_current == key"
:class="banner_show?' opacity-100':' opacity-0'"
class=" transition-opacity duration-700 cursor-pointer rounded-[0.2rem] w-full h-full bg-main"
:src="item.banner_url">
</div>
<!-- 指示點 -->
<div class=" absolute bottom-[0.1rem] left-1/2 -translate-x-1/2 flex justify-center">
<div v-for="(item, key) in a_banner" :key="'banner'+item.id"
:class="banner_current==key?'bg-white':'bg-sub-white'"
class=" ml-[0.2rem] first:ml-0 w-[0.33rem] h-[0.04rem]"></div>
</div>
<img @click="preBanner()"
class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute left-[-0.04rem] md:left-[-0.16rem] top-1/2 -translate-y-1/2"
src="<?php showFoodAppPath('img/scroll-left.png') ?>">
<img @click="nextBanner()"
class=" cursor-pointer w-[0.66rem] h-[0.66rem] md:w-[1rem] md:h-[1rem] absolute right-[-0.04rem] md:right-[-0.16rem] top-1/2 -translate-y-1/2"
src="<?php showFoodAppPath('img/scroll-right.png') ?>">
</div>
<div class=" p-[0.3rem] main-footer rounded-[0.2rem] w-100 md:w-[768px] md:mx-auto xl:w-[1280px]">
<!-- about -->
<div class="md:flex mx-[0.7rem] py-[1.02rem]">
<div class="md:flex-shrink-0 w-auto object-contain">
<!-- <img :src="local_url+'img/home/home1.png'" alt="">-->
<img :src="local_url+'img/zone_video/medicine-zone@2x.png'" class="w-[3.74rem] h-[2.7rem]" alt="">
</div>
<div class="mt-4 md:mt-0 ml-[0.8rem] pl-[0.2rem]">
<div class="text-[0.36rem] mb-[0.2rem] font-bold" style="color: #268AFF">MMC</div>
<div class="text-white text-[0.36rem]">醫學媒體頻道</div>
<div class="text-white text-[0.36rem]">Medical Media Channel</div>
<div class="my-[0.2rem] main-color w-[0.77rem] h-[0.05rem]"
style="background-color: #268AFF"></div>
<p class="mt-[0.2rem] text-white text-[0.30rem] leading-[0.38rem]">
平台內容以相關醫療科技資訊、香港與大灣區相關醫療護理康養政策討論及醫療器材及藥物和周邊產品為主目的打造 一個醫療相關的產品銷售及內容資訊為主的平台，該平台可形成一個Transmedia的環境
，以第三方角度讓蓮和醫療得到媒體支持 、讓集团相關產品及服務找到支持點 。
</p>
</div>
</div>
<!-- 成立时间 -->
<div class="box-border flex h-[0.8rem] w-auto text-left"
style="background: rgba(255,255,255,0.39);box-shadow: 0 0 26px rgba(0,155,150,0.2);opacity: 1;border-radius: 5px;">
<div class=" w-1/3 pl-[0.4rem]">
<div class="text-333 text-[0.16rem] mt-[0.1rem]">第一步</div>
<div class=" home_main_num text-[0.2rem] mt-[0.05rem]" style="color: #268AFF">醫療相關題材邀請嘉賓</div>
</div>
<div class="my-[0.2rem] w-[0.02rem] h-[0.32rem] " style="color: #268AFF"></div>
<div class=" w-2/3 pl-[0.4rem]">
<div class="text-[0.2rem] text-white leading-[0.8rem]">如中西醫生 、護理人員、物理治療師 等 包括食療 為媒體引流 製造環境</div>
</div>
</div>
<!-- <div class="box-border flex h-[0.8rem] w-auto text-left mt-[0.2rem]"-->
<!-- style=" border: 1px solid #E6E6E6;">-->
<!-- <div class=" w-1/3 pl-[0.4rem]">-->
<!-- <div class="text-333 text-[0.16rem] mt-[0.1rem]">第二步</div>-->
<!-- <div class=" home_main_num main-color text-[0.2rem] mt-[0.05rem]">醫療相關題材邀請嘉賓</div>-->
<!-- </div>-->
<!-- <div class="my-[0.2rem] w-[0.02rem] h-[0.32rem]"-->
<!-- style="background-color: #E6E6E6"></div>-->
<!-- <div class=" w-2/3 pl-[0.4rem]">-->
<!-- <div class="text-[0.16rem] text-333 leading-[0.8rem]">如中西醫生 、護理人員、物理治療師 等 包括食療 為媒體引流 製造環境</div>-->
<!-- </div>-->
<!-- </div>-->
<!---->
<!-- <div class="box-border flex h-[0.8rem] w-auto text-left mt-[0.2rem]"-->
<!-- style=" border: 1px solid #E6E6E6;">-->
<!-- <div class=" w-1/3 pl-[0.4rem]">-->
<!-- <div class="text-333 text-[0.16rem] mt-[0.1rem]">第三步</div>-->
<!-- <div class=" home_main_num main-color text-[0.2rem] mt-[0.05rem]">醫療相關題材邀請嘉賓</div>-->
<!-- </div>-->
<!-- <div class="my-[0.2rem] w-[0.02rem] h-[0.32rem]"-->
<!-- style="background-color: #E6E6E6"></div>-->
<!-- <div class=" w-2/3 pl-[0.4rem]">-->
<!-- <div class="text-[0.16rem] text-333 leading-[0.8rem]">如中西醫生 、護理人員、物理治療師 等 包括食療 為媒體引流 製造環境</div>-->
<!-- </div>-->
<!-- </div>-->
<!---->
<!-- <div class="box-border flex h-[0.8rem] w-auto text-left mt-[0.2rem]"-->
<!-- style=" border: 1px solid #E6E6E6;">-->
<!-- <div class=" w-1/3 pl-[0.4rem]">-->
<!-- <div class="text-333 text-[0.16rem] mt-[0.1rem]">第四步</div>-->
<!-- <div class=" home_main_num main-color text-[0.2rem] mt-[0.05rem]">醫療相關題材邀請嘉賓</div>-->
<!-- </div>-->
<!-- <div class="my-[0.2rem] w-[0.02rem] h-[0.32rem]"-->
<!-- style="background-color: #E6E6E6"></div>-->
<!-- <div class=" w-2/3 pl-[0.4rem]">-->
<!-- <div class="text-[0.16rem] text-333 leading-[0.8rem]">如中西醫生 、護理人員、物理治療師 等 包括食療 為媒體引流 製造環境</div>-->
<!-- </div>-->
<!-- </div>-->
</div>
</main>
<yq-footer></yq-footer>
</app>
<script>
const local_url = '<?php echo $local_url ?>'
const home_info = JSON.parse('<?php echo json_encode($home_info) ?>')
new Vue({
el: "#app",
components: {
'yq-food-list-one': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-one.vue?v=1') ?>'),
'yq-food-list-two': httpVueLoader('<?php showFoodAppPath('components/yq-food-list-two.vue?v=1') ?>'),
'yq-header': httpVueLoader('<?php showFoodAppPath('components/yq-header-MMC.vue?v=' . $vueVersion) ?>'),
//'yq-footer': httpVueLoader('<?php //showFoodAppPath('components/yq-footer.vue?v='.$vueVersion) ?>//'),
'yq-footer': httpVueLoader('<?php showFoodAppPath('components/yq-footer-MMC.vue?v=' . time()) ?>'),
},
created() {
this.get_banner()
this.get_product_list_one()
this.get_product_list_two()
this.get_cate()
this.linkBanner()
},
data: {
banner_show: true,
product_list_one: [],
product_list_two: [],
a_banner: [],
banner_current: 0,
a_cate: [],
a_cate_product: [],
current_cate: 0,
scrollFlag: true,
bannerObj: null
},
methods: {
linkBanner() {
this.bannerObj = setInterval(() => {
this.nextBanner()
}, 8000);
},
toBannerLink() {
if (this.a_banner[this.banner_current].banner_link) {
window.open(this.a_banner[this.banner_current].banner_link, '_blank')
}
},
preBanner() {
clearInterval(this.bannerObj)
this.bannerObj = null
this.banner_show = false
setTimeout(() => {
let temp = this.banner_current - 1
this.banner_current = temp < 0 ? this.a_banner.length - 1 : temp
this.banner_show = true
this.linkBanner()
}, 700);
},
nextBanner() {
clearInterval(this.bannerObj)
this.bannerObj = null
this.banner_show = false
setTimeout(() => {
let temp = this.banner_current + 1
this.banner_current = temp > this.a_banner.length - 1 ? 0 : temp
this.banner_show = true
this.linkBanner()
}, 700);
},
async get_cate() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'cate',
action: 'r_cate'
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_cate = data.res.cate_list
this.a_cate_product = data.res.product_list
}
}
if (this.scrollFlag) {
this.scrollFlag = false
setTimeout(() => {
this.$nextTick(() => {
if (window.location.href.indexOf('#') > -1) {
window.scrollTo({
top: document.getElementById(window.location.href.split('#')[1]).offsetTop,
behavior: 'smooth'
})
}
})
}, 0);
}
},
async get_cate_product(key) {
this.current_cate = key
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_cate',
cate: [this.a_cate[this.current_cate]],
limit: 6
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_cate_product = data.res
}
}
},
async get_banner() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'banner',
action: 'get_banner',
banner_type: 5
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.a_banner = data.res
}
}
},
async get_product_list_one() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_cate',
cate: [home_info.cate1],
limit: 6
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_list_one = data.res
}
}
},
async get_product_list_two() {
let res = await axios({
method: 'post',
url: '/api/',
data: Qs.stringify({
module: 'product',
action: 'get_product_by_date',
limit: 4
})
});
if (res.status == 200) {
let data = res.data;
if (data.rc == 0) {
this.product_list_two = data.res
}
}
}
}
})
</script>
<?php get_footer('food'); ?>