353 lines
11 KiB
HTML
353 lines
11 KiB
HTML
{extend name="default/base/base_home" /}
|
||
|
||
{block name="mall_main"}
|
||
<style>
|
||
.partner-login {
|
||
display: none;
|
||
}
|
||
|
||
.quick-login .mc .text {
|
||
height: 100%;
|
||
line-height: 1;
|
||
}
|
||
|
||
.dialog_title {
|
||
height: 40px;
|
||
}
|
||
|
||
.clk {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.quick-login .mc dl dd {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.quick-login .mc dl dd::after {
|
||
display: none;
|
||
}
|
||
|
||
.quick-login .mc dl dd input {
|
||
width: auto !important;
|
||
flex: 1;
|
||
}
|
||
|
||
.quick-login .mc dl dd img {
|
||
height: 36px;
|
||
}
|
||
</style>
|
||
<link rel="stylesheet" href="{$Think.HOME_SITE_ROOT}/new/css/program.css">
|
||
<style>
|
||
.list-banner .con2 .filter-container {
|
||
justify-content: flex-start;
|
||
}
|
||
|
||
.list-banner .con2 .filter-container>div {
|
||
flex: none;
|
||
width: calc((100% - .5rem * 3) / 4);
|
||
}
|
||
|
||
@media screen and (max-width:768px) {
|
||
.list-banner .con2 .filter-container {
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.list-banner .con1 .img {
|
||
display: none;
|
||
}
|
||
|
||
.list-banner .con1 .left {
|
||
padding: 2rem 0;
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.list-banner .con1 .left h2 {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.list-banner .con2 {
|
||
padding-top: 1rem;
|
||
}
|
||
}
|
||
</style>
|
||
<script>
|
||
$(document).ready(function() {
|
||
if ($(".select-wrap #selected div").text() == "") {
|
||
sessionStorage.removeItem("flag")
|
||
}
|
||
$(".ui.dropdown").dropdown();
|
||
})
|
||
</script>
|
||
<div class="program-top">
|
||
<div class="main-center container wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s">
|
||
<h2>STUDY ABROAD<br />PROGRAMS</h2>
|
||
<span>
|
||
In collaboration with our global partner institutions, <br />
|
||
LightCourse offers 7000+ accredited college courses<br />
|
||
encompassing 300+ majors and disciplines. <br />
|
||
Join us today to earn college credits in a flexible and saving way.
|
||
</span>
|
||
<div class="program-btn">
|
||
<a href="">All Programs<em>></em></a>
|
||
</div>
|
||
</div>
|
||
<img class="wow fadeIn" data-wow-duration="0.8s" data-wow-delay="0.2s" src="{$Think.HOME_SITE_ROOT}/new/images/program-top-bg.png" alt="背景">
|
||
</div>
|
||
<div class="list-banner">
|
||
<div class="main-center container" style="display: none;">
|
||
<div class="position">Position: <a href="/">Home</a> > Programs </div>
|
||
<div class="content con1">
|
||
<div class="left">
|
||
<h2>All Programs</h2>
|
||
<p class="mb-block" style="text-align: center;">Study abroad summer programs</p>
|
||
</div>
|
||
<div class="img"><img src="{$Think.HOME_SITE_ROOT}/new/images/program.png" alt="program"></div>
|
||
</div>
|
||
<hr style="height:0.5px;border:none;border-top:1px solid #E6E6FA" />
|
||
<!-- <div class="content con2" id="filter">
|
||
<div class="filter-container ui form">
|
||
{notempty name="attr_array"}
|
||
{php}$j = 0;{/php}
|
||
{foreach name="attr_array" item="val" key="key" }
|
||
{php}$j++;{/php}
|
||
{if !isset($checked_attr[$key]) && !empty($val['value']) && is_array($val['value'])}
|
||
<div class="field">
|
||
<label>{$val.name}</label>
|
||
<div class="ui selection dropdown">
|
||
<input type="hidden" name="gender">
|
||
<i class="dropdown icon"></i>
|
||
<div class="default text">{$val.name}</div>
|
||
<div class="menu">
|
||
{php}$i = 0;{/php}
|
||
{foreach name="$val.value" item="v" key="k" }
|
||
{php}$i++;{/php}
|
||
<div value="{$v.attrvalue_id}" class="item" data-value="1" >
|
||
{$v.attrvalue_name}
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
{/foreach}
|
||
{/notempty}
|
||
|
||
|
||
|
||
|
||
</div>
|
||
|
||
</div>-->
|
||
<!--<div class="select-wrap">
|
||
{if (isset($checked_brand) && is_array($checked_brand)) || (isset($checked_attr) && is_array($checked_attr))}
|
||
<div id="selected">
|
||
<p>You have selected:</p>
|
||
<div>
|
||
{notempty name="checked_brand"}
|
||
|
||
{foreach name="checked_brand" item="val" key="key" }
|
||
<a href="{:removeParam(array('b_id' => $key))}"><span>{$Think.lang.ds_brand}:</span>{$val.brand_name}<i
|
||
data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
|
||
{/foreach}
|
||
|
||
{/notempty}
|
||
|
||
{notempty name="checked_attr"}
|
||
|
||
{foreach name="checked_attr" item="val"}
|
||
<a href="{:removeParam(array('a_id' => $val['attrvalue_id']))}"><span>{$val.attr_name}:</span>{$val.attrvalue_name}<i
|
||
data-uri="{:removeParam(array('b_id' => $key))}">X</i></a>
|
||
{/foreach}
|
||
|
||
{/notempty}
|
||
</div>
|
||
</div>
|
||
{/if}
|
||
<div class="submit-btn">
|
||
<a href="javascript:;">Click on the query</a>
|
||
</div>
|
||
</div>
|
||
|
||
</div>-->
|
||
</div>
|
||
</div>
|
||
<main class="program">
|
||
<img src="{$Think.HOME_SITE_ROOT}/new/images/program-swiper-bg.png" alt="背景">
|
||
<section class="main-1">
|
||
<div class="main-center container">
|
||
<div class="swiper-container">
|
||
<div class="swiper-wrapper">
|
||
{foreach name="class" item="value" key="index"}
|
||
<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank" class="swiper-slide">
|
||
<ins></ins>
|
||
<em class="ani" swiper-animate-effect="fadeIn" swiper-animate-duration="0.5s" swiper-animate-delay="0">{if $index>=9}{$index + 1}{else}0{$index + 1}{/if}</em>
|
||
<img src="/uploads/home/common/{$value.gc_image}" alt="">
|
||
<div class="program-txt">
|
||
<span class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0">Program Name</span>
|
||
<em class="ani" swiper-animate-effect="fadeInUp" swiper-animate-duration="0.5s" swiper-animate-delay="0.3s">{$value.gc_name}</em>
|
||
</div>
|
||
</a>
|
||
{/foreach}
|
||
</div>
|
||
<div class="swiper-pagination"></div>
|
||
</div>
|
||
|
||
{foreach name="class" item="value"}
|
||
<div class="link" style="display: none;">
|
||
<div class="con">
|
||
<a class="img" href="/Goods/program?gc_id={$value.gc_id}" target="_blank"><img
|
||
src="/uploads/home/common/{$value.gc_image}" alt=""></a>
|
||
<div class="text">
|
||
<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank">
|
||
<h3><span>Program Name:</span> {$value.gc_name}</h3>
|
||
</a>
|
||
<a href="/Goods/program?gc_id={$value.gc_id}" target="_blank">
|
||
<h3><span>Partner Institution:</span> {$value.pro_college}</h3>
|
||
</a>
|
||
<div class="field">
|
||
<div>Time: <span>{$value.pro_period}</span></div>
|
||
<div>Location: <span>{$value.pro_locate}</span></div>
|
||
<div>Type: <span>Study abroad</span></div>
|
||
<div>No. of courses: <span>{$value.pro_course}</span></div>
|
||
<div>Length: <span>{$value.pro_duration}</span></div>
|
||
<div>Popularity: <div class="icon-start">
|
||
<div class="i-start">
|
||
<div class="i">
|
||
<svg class="iconf" aria-hidden="true">
|
||
<use xlink:href="#icon-icon"></use>
|
||
</svg>
|
||
<svg class="iconf" aria-hidden="true">
|
||
<use xlink:href="#icon-icon"></use>
|
||
</svg>
|
||
<svg class="iconf" aria-hidden="true">
|
||
<use xlink:href="#icon-icon"></use>
|
||
</svg>
|
||
<svg class="iconf" aria-hidden="true">
|
||
<use xlink:href="#icon-icon"></use>
|
||
</svg>
|
||
<svg class="iconf" aria-hidden="true">
|
||
<use xlink:href="#icon-icon"></use>
|
||
</svg>
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<object class="link-btn">
|
||
<a href="/Goods/program?gc_id={$value.gc_id}" class="b">Learn more</a>
|
||
</object>
|
||
</div>
|
||
{/foreach}
|
||
</div>
|
||
</section>
|
||
<div class="pagination">{$show_page|raw}</div>
|
||
</main>
|
||
<script>
|
||
if (sessionStorage.getItem("flag")) {
|
||
$(window).scrollTop($("#filter").offset().top)
|
||
}
|
||
</script>
|
||
<script>
|
||
// 获取参数
|
||
function getQueryString(name) {
|
||
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
|
||
var r = window.location.search.substr(1).match(reg);
|
||
if (r != null) {
|
||
return unescape(r[2]);
|
||
};
|
||
return null;
|
||
}
|
||
// 参数修改 目标url,替换参数名,替换参数值
|
||
function changeURLArg(url, arg, arg_val) {
|
||
var pattern = arg + '=([^&]*)';
|
||
var replaceText = arg + '=' + arg_val;
|
||
if (url.match(pattern)) {
|
||
var tmp = '/(' + arg + '=)([^&]*)/gi';
|
||
tmp = url.replace(eval(tmp), replaceText);
|
||
return tmp;
|
||
} else {
|
||
if (url.match('[\?]')) {
|
||
return url + '&' + replaceText;
|
||
} else {
|
||
return url + '?' + replaceText;
|
||
}
|
||
}
|
||
}
|
||
var arr = []
|
||
$(".filter-container .menu > .item").on("click", function() {
|
||
sessionStorage.setItem("flag", 1)
|
||
if ($(this).attr("value") != undefined) {
|
||
arr.push($(this).attr("value"))
|
||
}
|
||
$.each($(".filter-container .field"), function() {
|
||
if ($(".filter-container .field").find(".active").length == $(".filter-container .field")
|
||
.length) {
|
||
var str;
|
||
if (getQueryString("a_id") == '0') {
|
||
var url = window.location.href
|
||
var str = ""
|
||
arr.forEach((item, index) => {
|
||
if (index === 0) {
|
||
str += item
|
||
} else {
|
||
str += "_"
|
||
str += item
|
||
}
|
||
});
|
||
window.location.href = changeURLArg(url, "a_id", str)
|
||
} else {
|
||
if (window.location.search.indexOf("a_id") !== -1) {
|
||
var url = window.location.href
|
||
var str = getQueryString("a_id")
|
||
arr.forEach((item, index) => {
|
||
str += "_"
|
||
str += item
|
||
});
|
||
window.location.href = changeURLArg(url, "a_id", str)
|
||
} else {
|
||
if (window.location.search == "") {
|
||
str = "/program?a_id="
|
||
} else {
|
||
str = window.location.search + "&a_id="
|
||
}
|
||
arr.forEach((item, index) => {
|
||
if (index === 0) {
|
||
str += item
|
||
} else {
|
||
str += "_"
|
||
str += item
|
||
}
|
||
});
|
||
window.location.href = str
|
||
|
||
}
|
||
}
|
||
}
|
||
})
|
||
})
|
||
</script>
|
||
<script>
|
||
$(function(){
|
||
var programSwiper = new Swiper('.program .swiper-container',{
|
||
loop:false,//开启循环播放
|
||
autoplay: true, //自动播放
|
||
effect : 'slide',//轮播的动效 默认为"slide"（普通位移切换），还可设置为"fade"（淡入）、"cube"（方块）、"coverflow"（3d流）、"flip"（3d翻转）、"cards"(卡片式)、"creative"（创意性）。
|
||
pagination: {
|
||
el: '.program .swiper-pagination',
|
||
clickable :true,
|
||
},
|
||
on:{
|
||
init: function(){
|
||
swiperAnimateCache(this); // 隐藏动画元素
|
||
swiperAnimate(this); // 初始化完成开始动画
|
||
},
|
||
slideChangeTransitionEnd: function(){
|
||
swiperAnimate(this); // 每个slide切换结束时也运行当前slide动画
|
||
// this.slides.eq(this.activeIndex).find('.ani').removeClass('ani'); 动画只展现一次，去除ani类名
|
||
},
|
||
}
|
||
});
|
||
})
|
||
</script>
|
||
{/block} |