|
|
@@ -1,6 +1,56 @@
|
|
|
<template>
|
|
|
<div class="container">
|
|
|
- 校区详情
|
|
|
+ <div class="header">
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 校区 -->
|
|
|
+ <div class="town one w1200">
|
|
|
+ <div class="title-content">
|
|
|
+ <div class="t-title title-zh">襄阳校区</div>
|
|
|
+ </div>
|
|
|
+ <div class="town-content">
|
|
|
+ <h3 class="town-title">逻辑狗·搜索小镇</h3>
|
|
|
+ <div class="town-content-info">
|
|
|
+ <div class="content-left">
|
|
|
+ <img src="~/assets/images/campus/icon_adderss_02.png" alt="" srcset="">
|
|
|
+ <div class="content-left-info">
|
|
|
+ <div class="info-address">
|
|
|
+ <p>上海市·青浦区</p>
|
|
|
+ <p class="address">盈港东路8300弄佳乐苑社区商铺</p>
|
|
|
+ </div>
|
|
|
+ <p class="info-desc">
|
|
|
+ 逻辑狗·探索小镇是襄阳市首家专注于儿童优质思维能力养成 的游戏式体验中心。为2.5—8岁儿童提供具有国际品质的全 球同频思维训练课程与服务。通过多种思维游戏体验帮助孩子 获得卓越的思维能力,养成优秀的思维习惯,成就未来幸福人生。
|
|
|
+ </p>
|
|
|
+ <div class="info-mission">
|
|
|
+ <p class="text">教育使命</p>
|
|
|
+ <p class="slogan">让发现成为自然,让探索成为习惯 </p>
|
|
|
+ <p class="slogan">培养思维能力,塑造学习品质</p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="content-right">
|
|
|
+ <div class="town-img">
|
|
|
+ <img src="~/assets/images/campus/town_img.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="circle_top_r">
|
|
|
+ <img src="~/assets/images/campus/circle_big.png" alt="">
|
|
|
+ </div>
|
|
|
+ <div class="circle_bottom_l">
|
|
|
+ <img src="~/assets/images/campus/circle_small.png" alt="">
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <!-- 校区环境/精彩活动 -->
|
|
|
+ <div class="main">
|
|
|
+ <div class="environment">
|
|
|
+ <div class="title-content">
|
|
|
+ <div class="title-zh">校区环境</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
@@ -18,5 +68,109 @@ export default {
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
+@import "~static/common/style.sass";
|
|
|
+
|
|
|
+.title-zh {
|
|
|
+ height: 81px;
|
|
|
+ line-height: 81px;
|
|
|
+ font-size: 58px;
|
|
|
+ font-family: PingFangSC-Semibold, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color: #000000;
|
|
|
+ letter-spacing: 1px;
|
|
|
+ text-align: center;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ position: relative;
|
|
|
+ background: url('~assets/images/campus/detail_bg.png') 100% 100% no-repeat;
|
|
|
+ height: 882px;
|
|
|
+}
|
|
|
+
|
|
|
+.town {
|
|
|
+ padding: 190px 0 142px;
|
|
|
+ .town-content {
|
|
|
+ margin-top: 38px;
|
|
|
+ .town-title {
|
|
|
+ width: 230px;
|
|
|
+ height: 42px;
|
|
|
+ line-height: 42px;
|
|
|
+ font-size: 30px;
|
|
|
+ font-family: PingFangSC-Semibold,PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ color:#262626;
|
|
|
+ }
|
|
|
+ .town-content-info {
|
|
|
+ display: flex;
|
|
|
+ margin-top: 38px;
|
|
|
+ .content-left {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 50px;
|
|
|
+ .content-left-info {
|
|
|
+ margin-left: 23px;
|
|
|
+ }
|
|
|
+ .info-address {
|
|
|
+ font-size: 16px;
|
|
|
+ color: #747576;
|
|
|
+ .address {
|
|
|
+ margin-top: 8px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .info-desc {
|
|
|
+ margin-top: 30px;
|
|
|
+ font-size: 18px;
|
|
|
+ width: 500px;
|
|
|
+ font-family: PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #262626;
|
|
|
+ line-height:30px;
|
|
|
+ }
|
|
|
+ .info-mission {
|
|
|
+ font-size: 18px;
|
|
|
+ margin-top: 20px;
|
|
|
+ .text {
|
|
|
+ color: #262626;
|
|
|
+ font-family:PingFangSC-Medium,PingFang SC;
|
|
|
+ font-weight:500;
|
|
|
+ margin-bottom: 4px;
|
|
|
+ }
|
|
|
+ .slogan {
|
|
|
+ color: #3475FC;
|
|
|
+ font-family: PingFangSC-Regular,PingFang SC;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 20px;
|
|
|
+ height: 23px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-right {
|
|
|
+ position: relative;
|
|
|
+ background: url('~assets/images/campus/circle_big.png'),
|
|
|
+ url('~assets/images/campus/circle_small.png');
|
|
|
+ background-position: top -88px right -28px, bottom -82px left 28px;
|
|
|
+ background-repeat: no-repeat no-repeat;
|
|
|
+ .town-img {
|
|
|
+ position: relative;
|
|
|
+ z-index: 10;
|
|
|
+ font-size: 0;
|
|
|
+ img {
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .circle_top_r {
|
|
|
+ position: absolute;
|
|
|
+ top: -62px;
|
|
|
+ right: 0px;
|
|
|
+ }
|
|
|
+ .circle_bottom_l {
|
|
|
+ position: absolute;
|
|
|
+ bottom: -52px;
|
|
|
+ left: 56px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
|
|
|
</style>
|