|
|
@@ -11,106 +11,106 @@
|
|
|
</common-banner>
|
|
|
|
|
|
<!-- 优质输出平台 -->
|
|
|
- <div class="quality">
|
|
|
+ <!-- <div class="quality">
|
|
|
<div class="quality-content">
|
|
|
<title-content :title="'全球优质教育内容输出平台'" :titleSub="'GIOBAL QUALITY EDUCATION CONTENT EXPORT PLATFORM'"></title-content>
|
|
|
<div class="q-content w1200">
|
|
|
<img class="main-img" src="~/assets/images/contact/quality_img.png" alt="" srcset="">
|
|
|
<img class="bt-img" src="~/assets/images/contact/quality_footer.png" alt="" srcset="">
|
|
|
- <!-- <p class="desc">全球多个国家 众多教学机构 都在使用的新一代教育方案</p> -->
|
|
|
+ <p class="desc">全球多个国家 众多教学机构 都在使用的新一代教育方案</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
|
|
|
<!-- 针对儿童思维开发 -->
|
|
|
- <div class="thinking">
|
|
|
- <div class="t-content w1200">
|
|
|
- <div class="t-top title-content">
|
|
|
- <div class="title">针对儿童思维开发</div>
|
|
|
- <div class="title-sub">以孩子为核心</div>
|
|
|
- </div>
|
|
|
- <div class="thinking-content-box">
|
|
|
- <div class="content-left">
|
|
|
- <img src="~/assets/images/contact/thinking_img.png" alt="" srcset="~/assets/images/contact/thinking_img.png, ~/assets/images/contact/thinking_img@2x.png">
|
|
|
- </div>
|
|
|
- <div class="content-right">
|
|
|
- <div class="content-right-top">
|
|
|
- <div class="img-item img-item-arrow01">
|
|
|
- <img src="~/assets/images/contact/thinking_arrow_01.png" alt="" srcset="~/assets/images/contact/thinking_arrow_01.png, ~/assets/images/contact/thinking_arrow_01@2x.png">
|
|
|
- </div>
|
|
|
- <div class="img-item img-item-icon right-top-02">
|
|
|
- <img src="~/assets/images/contact/thinking_icon_01.png" alt="" srcset="~/assets/images/contact/thinking_icon_01.png, ~/assets/images/contact/thinking_icon_01@2x.png">
|
|
|
- <!-- <div class="span-item">
|
|
|
- <span>激发</span>
|
|
|
- <span>兴趣</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="img-item img-item-arrow02">
|
|
|
- <img src="~/assets/images/contact/thinking_arrow_02.png" alt="" srcset="~/assets/images/contact/thinking_arrow_02.png, ~/assets/images/contact/thinking_arrow_02@2x.png">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="content-right-bottom">
|
|
|
- <div class="img-item img-item-icon">
|
|
|
- <img src="~/assets/images/contact/thinking_icon_02.png" alt="" srcset="~/assets/images/contact/thinking_icon_02.png, ~/assets/images/contact/thinking_icon_02@2x.png">
|
|
|
- <!-- <div class="span-item">
|
|
|
- <span>探索</span>
|
|
|
- <span>实践</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- <div class="img-item img-item-arrow03">
|
|
|
- <img src="~/assets/images/contact/thinking_arrow_03.png" alt="" srcset="~/assets/images/contact/thinking_arrow_03.png, ~/assets/images/contact/thinking_arrow_03@2x.png">
|
|
|
- </div>
|
|
|
- <div class="img-item img-item-icon">
|
|
|
- <img src="~/assets/images/contact/thinking_icon_03.png" alt="" srcset="~/assets/images/contact/thinking_icon_03.png, ~/assets/images/contact/thinking_icon_03@2x.png">
|
|
|
- <!-- <div class="span-item">
|
|
|
- <span>掌握</span>
|
|
|
- <span>方法</span>
|
|
|
- </div> -->
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- <div class="thinking">-->
|
|
|
+ <!-- <div class="t-content w1200">-->
|
|
|
+ <!-- <div class="t-top title-content">-->
|
|
|
+ <!-- <div class="title">针对儿童思维开发</div>-->
|
|
|
+ <!-- <div class="title-sub">以孩子为核心</div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="thinking-content-box">-->
|
|
|
+ <!-- <div class="content-left">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_img.png" alt="" srcset="~/assets/images/contact/thinking_img.png, ~/assets/images/contact/thinking_img@2x.png">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="content-right">-->
|
|
|
+ <!-- <div class="content-right-top">-->
|
|
|
+ <!-- <div class="img-item img-item-arrow01">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_arrow_01.png" alt="" srcset="~/assets/images/contact/thinking_arrow_01.png, ~/assets/images/contact/thinking_arrow_01@2x.png">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="img-item img-item-icon right-top-02">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_icon_01.png" alt="" srcset="~/assets/images/contact/thinking_icon_01.png, ~/assets/images/contact/thinking_icon_01@2x.png">-->
|
|
|
+ <!-- <!– <div class="span-item">-->
|
|
|
+ <!-- <span>激发</span>-->
|
|
|
+ <!-- <span>兴趣</span>-->
|
|
|
+ <!-- </div> –>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="img-item img-item-arrow02">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_arrow_02.png" alt="" srcset="~/assets/images/contact/thinking_arrow_02.png, ~/assets/images/contact/thinking_arrow_02@2x.png">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="content-right-bottom">-->
|
|
|
+ <!-- <div class="img-item img-item-icon">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_icon_02.png" alt="" srcset="~/assets/images/contact/thinking_icon_02.png, ~/assets/images/contact/thinking_icon_02@2x.png">-->
|
|
|
+ <!-- <!– <div class="span-item">-->
|
|
|
+ <!-- <span>探索</span>-->
|
|
|
+ <!-- <span>实践</span>-->
|
|
|
+ <!-- </div> –>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="img-item img-item-arrow03">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_arrow_03.png" alt="" srcset="~/assets/images/contact/thinking_arrow_03.png, ~/assets/images/contact/thinking_arrow_03@2x.png">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="img-item img-item-icon">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/thinking_icon_03.png" alt="" srcset="~/assets/images/contact/thinking_icon_03.png, ~/assets/images/contact/thinking_icon_03@2x.png">-->
|
|
|
+ <!-- <!– <div class="span-item">-->
|
|
|
+ <!-- <span>掌握</span>-->
|
|
|
+ <!-- <span>方法</span>-->
|
|
|
+ <!-- </div> –>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
<!-- 逻辑狗激发学习兴趣 -->
|
|
|
- <div class="interest">
|
|
|
- <div class="i-content w1200">
|
|
|
- <title-content :title="'逻辑狗激发学习兴趣'" :titleSub="'逻辑狗提供的智力游戏,于孩子的生活实际,让孩子在熟悉的知识环境中,锻炼自己的思维,丰富自己的知识,这对孩子的健康成长也是很有帮助的。'"></title-content>
|
|
|
- <!-- <div class="t-top title-content">
|
|
|
- <div class="t-title title-zh wow animate__animated animate__fadeInDown">
|
|
|
- <div class="title-en">LEARNING INTEREST</div>
|
|
|
- 逻辑狗激发学习兴趣
|
|
|
- </div>
|
|
|
- <p class="title-sub">逻辑狗提供的智力游戏,于孩子的生活实际,让孩子在熟悉的知识环境中,锻炼自己的思维,丰富自己的知识,这对孩子的健康成长也是很有帮助的。</p>
|
|
|
- </div> -->
|
|
|
- <div class="interest-content-box">
|
|
|
- <div class="interest-item">
|
|
|
- <img class="inter-img" src="~/assets/images/contact/interest_01.png" alt="" srcset="~/assets/images/contact/interest_01.png, ~/assets/images/contact/interest_01@2x.png">
|
|
|
- <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">
|
|
|
- </div>
|
|
|
- <div class="interest-item">
|
|
|
- <img class="inter-img" src="~/assets/images/contact/interest_02.png" alt="" srcset="~/assets/images/contact/interest_02.png, ~/assets/images/contact/interest_02@2x.png">
|
|
|
- <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- <div class="interest">-->
|
|
|
+ <!-- <div class="i-content w1200">-->
|
|
|
+ <!-- <title-content :title="'逻辑狗激发学习兴趣'" :titleSub="'逻辑狗提供的智力游戏,于孩子的生活实际,让孩子在熟悉的知识环境中,锻炼自己的思维,丰富自己的知识,这对孩子的健康成长也是很有帮助的。'"></title-content>-->
|
|
|
+ <!-- <!– <div class="t-top title-content">-->
|
|
|
+ <!-- <div class="t-title title-zh wow animate__animated animate__fadeInDown">-->
|
|
|
+ <!-- <div class="title-en">LEARNING INTEREST</div>-->
|
|
|
+ <!-- 逻辑狗激发学习兴趣-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <p class="title-sub">逻辑狗提供的智力游戏,于孩子的生活实际,让孩子在熟悉的知识环境中,锻炼自己的思维,丰富自己的知识,这对孩子的健康成长也是很有帮助的。</p>-->
|
|
|
+ <!-- </div> –>-->
|
|
|
+ <!-- <div class="interest-content-box">-->
|
|
|
+ <!-- <div class="interest-item">-->
|
|
|
+ <!-- <img class="inter-img" src="~/assets/images/contact/interest_01.png" alt="" srcset="~/assets/images/contact/interest_01.png, ~/assets/images/contact/interest_01@2x.png">-->
|
|
|
+ <!-- <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="interest-item">-->
|
|
|
+ <!-- <img class="inter-img" src="~/assets/images/contact/interest_02.png" alt="" srcset="~/assets/images/contact/interest_02.png, ~/assets/images/contact/interest_02@2x.png">-->
|
|
|
+ <!-- <img class="btm-img" src="~/assets/images/contact/interest_btm.png" alt="" srcset="">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
<!-- 逻辑狗教育大奖 -->
|
|
|
- <div class="award">
|
|
|
- <div class="a-content">
|
|
|
- <div class="t-top title-content">
|
|
|
- <div class="title">逻辑狗教育大奖</div>
|
|
|
- <div class="title-sub">THE CLITURELOGIC DOG EDUCATION AWARD</div>
|
|
|
- </div>
|
|
|
- <div class="award-content-box">
|
|
|
- <div class="img">
|
|
|
- <img src="~/assets/images/contact/award_img.png" alt="" srcset="~/assets/images/contact/award_img.png, ~/assets/images/contact/award_img@2x.png">
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <!-- <div class="award">-->
|
|
|
+ <!-- <div class="a-content">-->
|
|
|
+ <!-- <div class="t-top title-content">-->
|
|
|
+ <!-- <div class="title">逻辑狗教育大奖</div>-->
|
|
|
+ <!-- <div class="title-sub">THE CLITURELOGIC DOG EDUCATION AWARD</div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- <div class="award-content-box">-->
|
|
|
+ <!-- <div class="img">-->
|
|
|
+ <!-- <img src="~/assets/images/contact/award_img.png" alt="" srcset="~/assets/images/contact/award_img.png, ~/assets/images/contact/award_img@2x.png">-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
+ <!-- </div>-->
|
|
|
|
|
|
<!-- 校园风采 -->
|
|
|
<!-- <div class="campus">
|
|
|
@@ -197,7 +197,8 @@ export default {
|
|
|
CommonBanner,
|
|
|
SubmitForm
|
|
|
},
|
|
|
- mounted() {},
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
methods: {
|
|
|
campusEnter(item) {
|
|
|
this.currentId = item.id;
|
|
|
@@ -216,12 +217,13 @@ export default {
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
}
|
|
|
+
|
|
|
.title-en {
|
|
|
position: absolute;
|
|
|
font-size: 56px;
|
|
|
font-family: PingFangSC-Semibold, sans-serif;
|
|
|
font-weight: 600;
|
|
|
- color:rgba(35,106,250,1);
|
|
|
+ color: rgba(35, 106, 250, 1);
|
|
|
opacity: 0.16;
|
|
|
}
|
|
|
|
|
|
@@ -229,9 +231,9 @@ export default {
|
|
|
position: relative;
|
|
|
display: inline-block;
|
|
|
font-size: 46px;
|
|
|
- font-family:PingFangSC-Semibold, sans-serif;
|
|
|
+ font-family: PingFangSC-Semibold, sans-serif;
|
|
|
font-weight: 600;
|
|
|
- color:#333333;
|
|
|
+ color: #333333;
|
|
|
text-align: center;
|
|
|
}
|
|
|
|
|
|
@@ -239,20 +241,24 @@ export default {
|
|
|
margin-top: 100px;
|
|
|
background: #FFFFFF;
|
|
|
padding-bottom: 92px;
|
|
|
+
|
|
|
.q-content {
|
|
|
text-align: center;
|
|
|
+
|
|
|
.desc {
|
|
|
text-align: center;
|
|
|
font-size: 26px;
|
|
|
- font-family: Fontquan-XinYiGuanHeiTi2.0-Regular, Fontquan-XinYiGuanHeiTi20;
|
|
|
+ font-family: Fontquan-XinYiGuanHeiTi2 .0 -Regular, Fontquan-XinYiGuanHeiTi20;
|
|
|
font-weight: 400;
|
|
|
color: #333330;
|
|
|
}
|
|
|
+
|
|
|
.main-img {
|
|
|
width: 1178px;
|
|
|
height: 657px;
|
|
|
margin: 127px auto 80px;
|
|
|
}
|
|
|
+
|
|
|
.bt-img {
|
|
|
width: 564px;
|
|
|
height: 23px;
|
|
|
@@ -265,6 +271,7 @@ export default {
|
|
|
background-position: center;
|
|
|
padding: 100px 0 100px;
|
|
|
background-color: #0D5CFA;
|
|
|
+
|
|
|
.title-content {
|
|
|
.title {
|
|
|
font-size: 34px;
|
|
|
@@ -272,6 +279,7 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.title-sub {
|
|
|
font-size: 16px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
@@ -281,48 +289,59 @@ export default {
|
|
|
margin-top: 43px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.thinking-content-box {
|
|
|
margin-top: 113px;
|
|
|
display: flex;
|
|
|
+
|
|
|
.content-left {
|
|
|
margin-right: 112px;
|
|
|
font-size: 0;
|
|
|
+
|
|
|
img {
|
|
|
// width: 626px 426px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.content-right {
|
|
|
font-size: 0;
|
|
|
+
|
|
|
.content-right-top {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
|
align-items: center;
|
|
|
+
|
|
|
.right-top-02 {
|
|
|
margin: 0 26px 0 32px
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.content-right-bottom {
|
|
|
display: flex;
|
|
|
align-items: flex-end;
|
|
|
}
|
|
|
+
|
|
|
.img-item-icon {
|
|
|
img {
|
|
|
width: 208px;
|
|
|
height: 208px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.img-item-arrow01 {
|
|
|
img {
|
|
|
width: 50px;
|
|
|
height: 45px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.img-item-arrow02 {
|
|
|
img {
|
|
|
width: 48px;
|
|
|
height: 44px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.img-item-arrow03 {
|
|
|
img {
|
|
|
width: 55px;
|
|
|
@@ -330,6 +349,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.span-item {
|
|
|
display: flex;
|
|
|
flex-direction: column;
|
|
|
@@ -337,6 +357,7 @@ export default {
|
|
|
top: 50%;
|
|
|
left: 50%;
|
|
|
transform: translate(-50%, -50%);
|
|
|
+
|
|
|
span {
|
|
|
font-size: 30px;
|
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
|
@@ -345,6 +366,7 @@ export default {
|
|
|
line-height: 42px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.img-item-icon {
|
|
|
position: relative;
|
|
|
}
|
|
|
@@ -353,12 +375,14 @@ export default {
|
|
|
|
|
|
.interest {
|
|
|
padding: 100px 0 100px;
|
|
|
+
|
|
|
.title-en {
|
|
|
left: 50%;
|
|
|
transform: translate(-50%);
|
|
|
top: -30px;
|
|
|
width: 1200px;
|
|
|
}
|
|
|
+
|
|
|
.i-content {
|
|
|
.title-sub {
|
|
|
height: 96px;
|
|
|
@@ -369,15 +393,18 @@ export default {
|
|
|
line-height: 48px;
|
|
|
|
|
|
}
|
|
|
+
|
|
|
.title-sub {
|
|
|
padding: 0 100px;
|
|
|
margin-top: 38px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.interest-content-box {
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
margin-top: 100px;
|
|
|
+
|
|
|
.interest-item {
|
|
|
position: relative;
|
|
|
text-align: center;
|
|
|
@@ -385,12 +412,15 @@ export default {
|
|
|
width: 588px;
|
|
|
overflow: hidden;
|
|
|
transition: 0.3s ease-out;
|
|
|
+
|
|
|
&:hover {
|
|
|
- transform: translate3d(0,-8px,0);
|
|
|
+ transform: translate3d(0, -8px, 0);
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
width: 100%;
|
|
|
}
|
|
|
+
|
|
|
.btm-img {
|
|
|
width: 173px;
|
|
|
height: 25px;
|
|
|
@@ -405,6 +435,7 @@ export default {
|
|
|
background: url('~assets/images/contact/award_bg.png') no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
background-color: #0D5CFA;
|
|
|
+
|
|
|
.title-content {
|
|
|
.title {
|
|
|
font-size: 34px;
|
|
|
@@ -412,6 +443,7 @@ export default {
|
|
|
font-weight: 600;
|
|
|
color: #FFFFFF;
|
|
|
}
|
|
|
+
|
|
|
.title-sub {
|
|
|
font-size: 16px;
|
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
|
@@ -420,8 +452,10 @@ export default {
|
|
|
line-height: 22px;
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
.award-content-box {
|
|
|
margin-top: 102px;
|
|
|
+
|
|
|
.img {
|
|
|
margin: 0 auto;
|
|
|
text-align: center;
|
|
|
@@ -432,25 +466,29 @@ export default {
|
|
|
|
|
|
.campus {
|
|
|
padding: 100px 0 100px;
|
|
|
+
|
|
|
.campus-content-box {
|
|
|
margin-top: 100px;
|
|
|
display: flex;
|
|
|
flex-wrap: wrap;
|
|
|
+
|
|
|
.campus-item {
|
|
|
- max-width:396px;
|
|
|
+ max-width: 396px;
|
|
|
// margin: 0 38px 126px 0;
|
|
|
padding: 18px 18px 32px 18px;
|
|
|
border-radius: 20px;
|
|
|
border-bottom: 2px solid transparent;
|
|
|
+
|
|
|
&:nth-child(3n) {
|
|
|
margin-right: 0;
|
|
|
}
|
|
|
+
|
|
|
&.active {
|
|
|
// transform: scale(1.1);
|
|
|
// padding: 18px 18px 32px 18px;
|
|
|
- background:#ffffff;
|
|
|
- border-bottom: 2px solid rgba(35,106,250,1);
|
|
|
- box-shadow:0px 4px 20px 0px rgba(150,150,150,0.22);
|
|
|
+ background: #ffffff;
|
|
|
+ border-bottom: 2px solid rgba(35, 106, 250, 1);
|
|
|
+ box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.22);
|
|
|
transition: all 0.5s;
|
|
|
// border-radius: 20px;
|
|
|
// margin-bottom: 52px;
|
|
|
@@ -458,6 +496,7 @@ export default {
|
|
|
transform: scale(1.0);
|
|
|
}
|
|
|
}
|
|
|
+
|
|
|
&:hover {
|
|
|
// background:#ffffff;
|
|
|
// border-bottom: 2px solid rgba(35,106,250,1);
|
|
|
@@ -466,12 +505,14 @@ export default {
|
|
|
// transform: scale(1.0);
|
|
|
// }
|
|
|
}
|
|
|
+
|
|
|
img {
|
|
|
width: 100%;
|
|
|
height: 192px;
|
|
|
object-fit: cover;
|
|
|
border-radius: 20px;
|
|
|
}
|
|
|
+
|
|
|
.desc {
|
|
|
margin-top: 30px;
|
|
|
font-size: 18px;
|