|
|
@@ -37,155 +37,95 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="tab-centent">
|
|
|
- <div class="tab-content-01" v-if="currentMtab == 0">
|
|
|
+ <div class="tab-content-01" v-show="currentMtab == 0">
|
|
|
<div class="tab-content-item left">
|
|
|
- <!-- <div class="title">技术支持</div>
|
|
|
- <div class="desc">满足公司合作条件后，支持线上门店设立、线下门店管理和运营等技术输出</div> -->
|
|
|
+ <img :src="tabContent01" alt="" srcset="">
|
|
|
+ <div class="content-info content-info-left">
|
|
|
+ <div class="title">技术支持</div>
|
|
|
+ <div class="desc">满足公司合作条件后，支持线上门店设立、线下门店管理和运营等技术输出</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
<div class="tab-content-item right">
|
|
|
+ <img :src="tabContent02" alt="" srcset="">
|
|
|
+ <div class="content-info content-info-right">
|
|
|
+ <div class="title">整体加盟</div>
|
|
|
+ <div class="desc">满足公司合作条件后，支付相应的整体加盟费用，整体店铺加盟，价格、服务由公司整体输出。</div>
|
|
|
+ </div>
|
|
|
<!-- <div class="title">技术支持</div>
|
|
|
<div class="desc">满足公司合作条件后，支付相应的整体加盟费用，整体店铺加盟，价格、服务由公司整体输出。</div> -->
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="tab-content-02" v-else-if="currentMtab == 1">
|
|
|
- 1
|
|
|
+ <div class="tab-content-02" v-show="currentMtab == 1">
|
|
|
+ <img class="img-content-02-01" :src="tabContent03" alt="" srcset="">
|
|
|
+ <img class="img-content-02-02" :src="tabContent04" alt="" srcset="">
|
|
|
</div>
|
|
|
- <div class="tab-content-03" v-else>
|
|
|
- 2
|
|
|
+ <div class="tab-content-03" v-show="currentMtab == 2">
|
|
|
+ <img class="img-content-03-01" :src="tabContent05" alt="" srcset="">
|
|
|
+ <img class="img-content-03-02" :src="tabContent06" alt="" srcset="">
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
-
|
|
|
- <!-- 体验 -->
|
|
|
- <div class="exprience">
|
|
|
- <div class="label">
|
|
|
- <div class="label-en wow animate__animated animate__fadeInDown">SERVICE</div>
|
|
|
- <div class="label-zn wow animate__animated animate__fadeInDown">体验店八项服务支持</div>
|
|
|
- </div>
|
|
|
- <div class="bg-img">
|
|
|
- <img
|
|
|
- src="http://res.training.luojigou.vip/Fgx5y0lTvWmAyzj29S0vIB1gteFW?imageView2/0/q/50|imageslim"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- </div>
|
|
|
- <div class="exprience-box">
|
|
|
- <div
|
|
|
- :class="['exprience-item wow']"
|
|
|
- :style="{'margin-top': item.id % 2 === 0 ? '49px' : ''}"
|
|
|
- v-for="item in exprienceImg"
|
|
|
- :key="item.id"
|
|
|
- @mouseenter="currentEventInfo(item)"
|
|
|
- >
|
|
|
- <img :src="item.imgUrl" alt="">
|
|
|
- <section>{{item.label}}</section>
|
|
|
- <div class="exprience-info" v-if="item.id == exprienceCurrenId">
|
|
|
- <div class="num" :class="[item.id % 2 === 0 ? 'red' : 'blue']">{{ item.num }}</div>
|
|
|
- <div class="item-text" v-for="(ele, index) in item.infoList" :key="index">{{ele}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 校区 -->
|
|
|
- <div class="campus">
|
|
|
- <div class="label">
|
|
|
- <div class="label-en wow animate__animated animate__fadeInDown">CAMPUS</div>
|
|
|
- <div class="label-zn wow animate__animated animate__fadeInDown">全国校区分布</div>
|
|
|
+ <!-- 品牌支持 -->
|
|
|
+ <div class="support">
|
|
|
+ <title-content :title="'品牌支持'" :titleSub="'BRAND SUPPORT'"></title-content>
|
|
|
+ <div class="s-content w1200">
|
|
|
+ <img :src="supportImg" alt="" srcset="">
|
|
|
</div>
|
|
|
- <img
|
|
|
- class="campus-img"
|
|
|
- src="http://res.training.luojigou.vip/Fo5hmXpt-2GUZZSWJTfkF-mqC4qx?imageView2/0/q/50|imageslim"
|
|
|
- alt=""
|
|
|
- >
|
|
|
</div>
|
|
|
- <!-- 风采 -->
|
|
|
- <div class="show cp">
|
|
|
- <div class="label">
|
|
|
- <div class="label-en wow animate__animated animate__fadeInDown">SHOW</div>
|
|
|
- <div class="label-zn wow animate__animated animate__fadeInDown">校园风采</div>
|
|
|
- </div>
|
|
|
- <div class="show-box">
|
|
|
- <div :class="['show-item', item.id == currentId ? 'active' : '']" v-for="item in showImg" :key="item.id" @mouseenter="campusEnter(item)">
|
|
|
- <div class="ani-box">
|
|
|
- <img :src="item.imgUrl" alt="">
|
|
|
- <div class="text">{{item.label}}</div>
|
|
|
- </div>
|
|
|
+
|
|
|
+ <!-- 合作案例 -->
|
|
|
+ <div class="case bgF8">
|
|
|
+ <title-content :title="'合作案例'" :titleSub="'COOPERATION CASE'"></title-content>
|
|
|
+ <div class="c-content w1200">
|
|
|
+ <div class="left">
|
|
|
+ <img :src="caseImg[0].imgUrl" alt="" srcset="">
|
|
|
</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <!-- 加盟流程 -->
|
|
|
- <div class="join">
|
|
|
- <div class="label">
|
|
|
- <div class="label-en wow animate__animated animate__fadeInDown">FLOW</div>
|
|
|
- <div class="label-zn wow animate__animated animate__fadeInDown">加盟流程</div>
|
|
|
- </div>
|
|
|
- <div class="flow">
|
|
|
- <div class="line-box">
|
|
|
- <div class="line"></div>
|
|
|
- <div class="join-box">
|
|
|
- <div
|
|
|
- class="join-box-item"
|
|
|
- v-for="item in joinData"
|
|
|
- :key="item.id"
|
|
|
- >
|
|
|
- <img
|
|
|
- :style="{width: item.id === 0 ? '34px' : '22px',
|
|
|
- height: item.id === 0 ? '34px' : '22px',
|
|
|
- marginTop: item.id !== 0 ? '5px' : 0,
|
|
|
- marginBottom: item.id !== 0 ? '7px' : 0,
|
|
|
- }"
|
|
|
- :src="item.id === 0 ? joinImg.hot : joinImg.cold"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- <div class="join-box-step" :style="{}">
|
|
|
- <span class="join-box-step-num">{{item.id + 1}}</span>步
|
|
|
- </div>
|
|
|
- <div class="join-box-label">{{item.label}}</div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ <div class="right">
|
|
|
+ <template v-for="(item, index) in caseImg">
|
|
|
+ <img v-if="index !==0 " :src="item.imgUrl" alt="" srcset="" :key="index">
|
|
|
+ </template>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="join-btn cp">
|
|
|
- <img
|
|
|
- src="http://res.training.luojigou.vip/Fot92LmuZDqWjSXLQPWxln_-4DsH?imageView2/0/q/50|imageslim"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- </div>
|
|
|
</div>
|
|
|
+
|
|
|
<!-- 加入我们 -->
|
|
|
<div class="join-us">
|
|
|
- <div class="label">
|
|
|
- <div class="label-en wow animate__animated animate__fadeInDown">JOIN US</div>
|
|
|
- <div class="label-zn wow animate__animated animate__fadeInDown">加入我们</div>
|
|
|
+ <div class="mask">
|
|
|
</div>
|
|
|
- <div class="line"></div>
|
|
|
- <div class="join-us-form">
|
|
|
- <el-form :model="form" :rules="rules" ref="ruleBottomForm">
|
|
|
- <el-form-item prop="name">
|
|
|
- <el-input placeholder="姓名:" v-model="form.name"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="phone">
|
|
|
- <el-input placeholder="手机号:" v-model="form.phone"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="email">
|
|
|
- <el-input placeholder="邮箱地址:" v-model="form.email"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item prop="city">
|
|
|
- <el-input placeholder="加盟城市:" v-model="form.city"></el-input>
|
|
|
- </el-form-item>
|
|
|
- <!-- <div class="submit" @click="handleSubmit('ruleForm')">提交申请</div> -->
|
|
|
- </el-form>
|
|
|
- <!-- <el-input placeholder="姓名:"></el-input>
|
|
|
- <el-input placeholder="手机号:"></el-input>
|
|
|
- <el-input placeholder="邮箱地址:"></el-input>
|
|
|
- <el-input placeholder="加盟城市:"></el-input>-->
|
|
|
- <img
|
|
|
- @click="handleSubmit('ruleBottomForm')"
|
|
|
- src="http://res.training.luojigou.vip/FipijbS16GJiwUe4oaWOBWjFxGLO?imageView2/0/q/50|imageslim"
|
|
|
- alt=""
|
|
|
- >
|
|
|
- <div class="address">地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号</div>
|
|
|
+ <div class="join-content">
|
|
|
+ <div class="title-content">
|
|
|
+ <div class="title">加入我们</div>
|
|
|
+ </div>
|
|
|
+ <div class="join-us-form w1200">
|
|
|
+ <el-form :model="form" :rules="rules" ref="ruleBottomForm">
|
|
|
+ <el-form-item prop="name">
|
|
|
+ <el-input placeholder="姓名:" v-model="form.name"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="phone">
|
|
|
+ <el-input placeholder="手机号:" v-model="form.phone"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="email">
|
|
|
+ <el-input placeholder="邮箱地址:" v-model="form.email"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="city">
|
|
|
+ <el-input placeholder="加盟城市:" v-model="form.city"></el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="project">
|
|
|
+ <el-select placeholder="合作项目" v-model="form.project">
|
|
|
+ <el-option
|
|
|
+ v-for="(item, index) in projectList"
|
|
|
+ :key="index"
|
|
|
+ :label="item.title"
|
|
|
+ :value="item.title">
|
|
|
+ </el-option>
|
|
|
+ </el-select>
|
|
|
+ </el-form-item>
|
|
|
+ <div class="submit cp" @click="handleSubmit('ruleBottomForm')">提交申请</div>
|
|
|
+ </el-form>
|
|
|
+ <div class="address">地址：北京市朝阳区高碑店乡西店记忆文创小镇E6号楼一层102号</div>
|
|
|
+ </div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
@@ -334,6 +274,24 @@ const joinData = Object.freeze([
|
|
|
label: "总部运营支持",
|
|
|
},
|
|
|
]);
|
|
|
+const caseImg = Object.freeze([
|
|
|
+ {
|
|
|
+ imgUrl: require("~/assets/images/cooperate/case01.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgUrl: require("~/assets/images/cooperate/case02.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgUrl: require("~/assets/images/cooperate/case03.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgUrl: require("~/assets/images/cooperate/case04.png"),
|
|
|
+ },
|
|
|
+ {
|
|
|
+ imgUrl: require("~/assets/images/cooperate/case05.png"),
|
|
|
+ }
|
|
|
+])
|
|
|
+
|
|
|
export default {
|
|
|
name: "Coopetate",
|
|
|
mounted() {},
|
|
|
@@ -342,6 +300,13 @@ export default {
|
|
|
currentMtab: 0,
|
|
|
bgImg: require("~/assets/images/team/teamBg@2x.png"),
|
|
|
projectImg: require("~/assets/images/cooperate/project_img.png"),
|
|
|
+ tabContent01: require('~/assets/images/cooperate/tab_content_01@2x.png'),
|
|
|
+ tabContent02: require('~/assets/images/cooperate/tab_content_02@2x.png'),
|
|
|
+ tabContent03: require('~/assets/images/cooperate/tab_content_03@2x.png'),
|
|
|
+ tabContent04: require('~/assets/images/cooperate/tab_content_04@2x.png'),
|
|
|
+ tabContent05: require('~/assets/images/cooperate/tab_content_05@2x.png'),
|
|
|
+ tabContent06: require('~/assets/images/cooperate/tab_content_06@2x.png'),
|
|
|
+ supportImg: require('~/assets/images/cooperate/supportImg@2x.png'),
|
|
|
currentId: 0,
|
|
|
exprienceCurrenId: 0,
|
|
|
form: {},
|
|
|
@@ -351,6 +316,7 @@ export default {
|
|
|
showImg,
|
|
|
joinImg,
|
|
|
joinData,
|
|
|
+ caseImg,
|
|
|
mTabList: [
|
|
|
{
|
|
|
imgUrl: require("~/assets/images/cooperate/coopreate_01@2x.png"),
|
|
|
@@ -365,6 +331,28 @@ export default {
|
|
|
imgUrlSel: require("~/assets/images/cooperate/coopreate_03_sel@2x.png")
|
|
|
}
|
|
|
],
|
|
|
+ projectList: [
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ title: '逻辑狗·探索小镇'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ title: '逻辑狗专柜'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ title: '逻辑狗思维体验Plus'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ title: '逻辑狗思维体验Home'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 5,
|
|
|
+ title: '逻辑狗体验中心'
|
|
|
+ }
|
|
|
+ ],
|
|
|
rules: {
|
|
|
name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
|
|
|
phone: [
|
|
|
@@ -424,11 +412,11 @@ export default {
|
|
|
});
|
|
|
this.$refs[formName].resetFields();
|
|
|
} else {
|
|
|
- this.$notify({
|
|
|
- title: '失败',
|
|
|
- message: '提交失败',
|
|
|
- type: 'info'
|
|
|
- });
|
|
|
+ this.$notify({
|
|
|
+ title: '失败',
|
|
|
+ message: '提交失败',
|
|
|
+ type: 'info'
|
|
|
+ });
|
|
|
}
|
|
|
// this.$message.success('提交成功');
|
|
|
} else {
|
|
|
@@ -455,135 +443,6 @@ export default {
|
|
|
<style lang="scss">
|
|
|
.coopetate {
|
|
|
width: 100%;
|
|
|
- .label {
|
|
|
- .label-en {
|
|
|
- height: 78px;
|
|
|
- font-size: 56px;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- color:rgba(35,106,250,0.16);
|
|
|
- line-height: 78px;
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- height: 65px;
|
|
|
- font-size: 46px;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- color: #262626;
|
|
|
- line-height: 65px;
|
|
|
- letter-spacing: 1px;
|
|
|
- }
|
|
|
- }
|
|
|
- .banner-img {
|
|
|
- position: relative;
|
|
|
- .new-info {
|
|
|
- .left {
|
|
|
- h3 {
|
|
|
- height: 92px;
|
|
|
- font-size: 66px;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- color: #236AFA;
|
|
|
- line-height: 92px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- // height: 100vh;
|
|
|
- height: calc(100vh - 72px);
|
|
|
- // height: 595px;
|
|
|
- }
|
|
|
- .new-info {
|
|
|
- width: 1194px;
|
|
|
- position: absolute;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .left {
|
|
|
- img {
|
|
|
- width: 469px;
|
|
|
- height: 76px;
|
|
|
- }
|
|
|
- }
|
|
|
- .right {
|
|
|
- width: 327px;
|
|
|
- height: 450px;
|
|
|
- background-color: #fff;
|
|
|
- padding: 34px 38px 12px 39px;
|
|
|
- .submit-area {
|
|
|
- .label {
|
|
|
- font-size: 14px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(91, 95, 93, 1);
|
|
|
- margin-bottom: 7px;
|
|
|
- }
|
|
|
- .phone-num {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- img {
|
|
|
- width: 22px;
|
|
|
- height: 22px;
|
|
|
- display: block;
|
|
|
- margin-right: 15px;
|
|
|
- }
|
|
|
- .num {
|
|
|
- font-size: 26px;
|
|
|
- font-family: PingFangSC-Medium, sans-serif;
|
|
|
- font-weight: bold;
|
|
|
- color: rgba(0, 0, 0, 1);
|
|
|
- }
|
|
|
- }
|
|
|
- .form {
|
|
|
- margin-top: 20px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .el-input {
|
|
|
- width: 250px;
|
|
|
- height: 44px;
|
|
|
- }
|
|
|
- .el-form-item__error {
|
|
|
- color: #cd2026;
|
|
|
- // left: 124px;
|
|
|
- }
|
|
|
- .el-form-item {
|
|
|
- &.is-error {
|
|
|
- .el-input__inner {
|
|
|
- border-color: #dcdfe6;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .submit {
|
|
|
- margin: 0 auto;
|
|
|
- text-align: center;
|
|
|
- font-size: 14px;
|
|
|
- width: 148px;
|
|
|
- height: 27px;
|
|
|
- line-height: 27px;
|
|
|
- background: linear-gradient(
|
|
|
- 180deg,
|
|
|
- rgba(88, 144, 251, 1) 0%,
|
|
|
- rgba(51, 117, 252, 1) 100%
|
|
|
- );
|
|
|
- box-shadow: 0px 7px 14px 0px rgba(136, 176, 254, 0.79);
|
|
|
- border-radius: 3px;
|
|
|
- color: #ffffff;
|
|
|
- }
|
|
|
- img {
|
|
|
- width: 176px;
|
|
|
- height: 55px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
.bgF8 {
|
|
|
background: #F8FBFF;
|
|
|
}
|
|
|
@@ -637,59 +496,61 @@ export default {
|
|
|
.m-tab-item {
|
|
|
width: 123px;
|
|
|
height: 97px;
|
|
|
- // background: url('~assets/images/cooperate/coopreate_01@2x.png') no-repeat;
|
|
|
background-size: 100%;
|
|
|
&.m-tab-item0 {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_01@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // &:hover {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_01_sel@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // }
|
|
|
}
|
|
|
&.m-tab-item1 {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_02@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // &:hover {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_02_sel@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // }
|
|
|
}
|
|
|
&.m-tab-item2 {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_03@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // &:hover {
|
|
|
- // background: url('~assets/images/cooperate/coopreate_03_sel@2x.png') no-repeat;
|
|
|
- // background-size: 100% 100%;
|
|
|
- // }
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
.tab-centent {
|
|
|
- margin-top: 100px;
|
|
|
.tab-content-01 {
|
|
|
+ margin-top: 85px;
|
|
|
display: flex;
|
|
|
justify-content: space-between;
|
|
|
height: 351px;
|
|
|
color: #ffffff;
|
|
|
+ opacity: 1;
|
|
|
+ transition: opacity 1s ease-in-out;
|
|
|
.tab-content-item {
|
|
|
- padding: 0 56px;
|
|
|
+ position: relative;
|
|
|
width: 579px;
|
|
|
border-radius: 30px;
|
|
|
text-align: center;
|
|
|
opacity: 0.8;
|
|
|
+ .content-info {
|
|
|
+ padding: 0 53px;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 1;
|
|
|
+ top: 0;
|
|
|
+ opacity: 0.79;
|
|
|
+ height: 100%;
|
|
|
+ border-radius: 30px;
|
|
|
+ &.content-info-left {
|
|
|
+ background: #0D5CFA;
|
|
|
+ }
|
|
|
+ &.content-info-right {
|
|
|
+ background-color: rgba(246, 84, 25, 1);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ img {
|
|
|
+ width: 523px;
|
|
|
+ height: 351px;
|
|
|
+ }
|
|
|
}
|
|
|
.left {
|
|
|
- background: url('~assets/images/cooperate/tab_content_01@2x.png') no-repeat;
|
|
|
- background-size: 523px 351px;
|
|
|
- background-position: center;
|
|
|
- // background-color: rgba(13, 92, 250);
|
|
|
+ // background: url('~assets/images/cooperate/tab_content_01@2x.png') no-repeat;
|
|
|
+ // background-size: 523px 351px;
|
|
|
+ // background-position: center;
|
|
|
+ width: 579px;
|
|
|
+ border-radius: 30px;
|
|
|
}
|
|
|
.right {
|
|
|
background: url('~assets/images/cooperate/tab_content_02@2x.png') no-repeat;
|
|
|
background-size: 523px 351px;
|
|
|
background-position: center;
|
|
|
- // background-color: rgba(246, 84, 25);
|
|
|
}
|
|
|
.title {
|
|
|
margin: 53px 61px;
|
|
|
@@ -706,511 +567,157 @@ export default {
|
|
|
}
|
|
|
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .education {
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- margin-top: 60px;
|
|
|
- padding-top: 106px;
|
|
|
- padding-bottom: 96px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- height: 488px;
|
|
|
- .label {
|
|
|
- position: relative;
|
|
|
- .label-en {
|
|
|
- position: absolute;
|
|
|
- left: -45px;
|
|
|
- top: -15px;
|
|
|
- }
|
|
|
- }
|
|
|
- .top {
|
|
|
- position: relative;
|
|
|
- // display: flex;
|
|
|
- width: 100%;
|
|
|
- height: 134px;
|
|
|
- border-bottom: 1px solid rgba(216, 216, 216, 1);
|
|
|
- .bg-img {
|
|
|
- width: 449px;
|
|
|
- height: 59px;
|
|
|
- position: absolute;
|
|
|
- left: 502px;
|
|
|
- // transform: translateX(-50%);
|
|
|
- }
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- top: 10px;
|
|
|
- // left: 548px;
|
|
|
- display: flex;
|
|
|
- justify-content: flex-start;
|
|
|
- align-items: center;
|
|
|
- width: 796px;
|
|
|
- height: 81px;
|
|
|
-
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- // position: absolute;
|
|
|
- // width: 350px;
|
|
|
- // /* left: 763px; */
|
|
|
- .logo {
|
|
|
- width: 40px;
|
|
|
- height: 40px;
|
|
|
- display: block;
|
|
|
- }
|
|
|
- .text {
|
|
|
- height: 65px;
|
|
|
- font-size: 46px;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- color: #262626;
|
|
|
- line-height: 65px;
|
|
|
- letter-spacing: 1px;
|
|
|
- }
|
|
|
- .line {
|
|
|
- width: 1px;
|
|
|
- height: 54px;
|
|
|
- background: rgba(153, 153, 153, 1);
|
|
|
- opacity: 0.4146;
|
|
|
- margin-left: 30px;
|
|
|
- margin-right: 37px;
|
|
|
- }
|
|
|
- .town {
|
|
|
- width: 93px;
|
|
|
- height: 63px;
|
|
|
+ .tab-content-02 {
|
|
|
+ margin-top: 32px;
|
|
|
+ position: relative;
|
|
|
+ text-align: center;
|
|
|
+ .img-content-02-01 {
|
|
|
+ width: 478px;
|
|
|
+ height: 478px;
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .bottom {
|
|
|
- width: 100%;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- .text {
|
|
|
- text-indent: 2em;
|
|
|
- width: 1200px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: #333333;
|
|
|
- font-size: 20px;
|
|
|
- line-height: 38px;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .advantage {
|
|
|
- width: 100%;
|
|
|
- height: 625px;
|
|
|
- background: rgba(247, 251, 255, 1);
|
|
|
- padding: 73px 0 143px;
|
|
|
- .label {
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: 600;
|
|
|
- text-align: center;
|
|
|
- font-size: 46px;
|
|
|
- color: #236AFA;
|
|
|
- line-height: 65px;
|
|
|
- letter-spacing: 1px;
|
|
|
-
|
|
|
- // left: 50%;
|
|
|
- // position: absolute;
|
|
|
- // width: 350px;
|
|
|
- // /* left: 763px; */
|
|
|
- // transform: translateX(-50%);
|
|
|
- }
|
|
|
- .advantage-show {
|
|
|
- margin: 48px auto 0;
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- // width: 1280px;
|
|
|
- .advantage-item {
|
|
|
- width: 272px;
|
|
|
- height: 280px;
|
|
|
- margin-left: -30px;
|
|
|
- img {
|
|
|
- width: 100%;
|
|
|
- height: 100%;
|
|
|
+ .img-content-02-02 {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ bottom: 22px;
|
|
|
+ width: 1064px;
|
|
|
+ height: 337px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .exprience {
|
|
|
- width: 100%;
|
|
|
- height: 746px;
|
|
|
- padding-top: 80px;
|
|
|
- position: relative;
|
|
|
- box-sizing: border-box;
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- // width: 600px;
|
|
|
- width: 440px;
|
|
|
- left: 50%;
|
|
|
- /* left: 763px; */
|
|
|
- transform: translateX(-50%);
|
|
|
- .label-en {
|
|
|
- // font-size: 78px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(35, 106, 250, 0.16);
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- // font-size: 58px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(38, 38, 38, 1);
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 8px;
|
|
|
- }
|
|
|
- }
|
|
|
- .bg-img {
|
|
|
- img {
|
|
|
- width: 710px;
|
|
|
- height: 320px;
|
|
|
- position: absolute;
|
|
|
- // left: 850px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- bottom: 0;
|
|
|
- z-index: -1;
|
|
|
- }
|
|
|
- }
|
|
|
- .exprience-box {
|
|
|
- display: flex;
|
|
|
- position: absolute;
|
|
|
- top: 321px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- // left: 344px;
|
|
|
- .exprience-item {
|
|
|
- height: 176px;
|
|
|
+ .tab-content-03 {
|
|
|
position: relative;
|
|
|
- img {
|
|
|
- width: 160px;
|
|
|
- height: 172px;
|
|
|
- object-fit: cover;
|
|
|
+ text-align: center;
|
|
|
+ .img-content-03-01 {
|
|
|
+ width: 778px;
|
|
|
+ height: 511px;
|
|
|
}
|
|
|
- section {
|
|
|
- width: 160px;
|
|
|
- font-size: 18px;
|
|
|
- font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- font-weight: bold;
|
|
|
- color: #000;
|
|
|
+ .img-content-03-02 {
|
|
|
position: absolute;
|
|
|
- top: 86%;
|
|
|
+ bottom: 81px;
|
|
|
left: 50%;
|
|
|
transform: translateX(-50%);
|
|
|
- text-align: center;
|
|
|
- letter-spacing: 0.5px;
|
|
|
- }
|
|
|
- .exprience-info {
|
|
|
- z-index: 66;
|
|
|
- position: absolute;
|
|
|
- top: 38px;
|
|
|
- left: 35px;
|
|
|
- padding: 10px 0 0 20px;
|
|
|
- width: 225px;
|
|
|
- height: 155px;
|
|
|
- background: rgba(0, 0, 0, 0.65);
|
|
|
- border-radius: 10px;
|
|
|
- .num {
|
|
|
- font-size: 18px;
|
|
|
- font-family: Nunito-Black, Nunito;
|
|
|
- &.blue {
|
|
|
- color: #408CFF;
|
|
|
- }
|
|
|
- &.red {
|
|
|
- color: #FF6321;
|
|
|
- }
|
|
|
- }
|
|
|
- .item-text {
|
|
|
- font-size: 16px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- color: #B4B4B4;
|
|
|
- line-height: 26px;
|
|
|
- }
|
|
|
+ width: 1234px;
|
|
|
+ height: 348px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .campus {
|
|
|
- height: 1264px;
|
|
|
- background: rgba(240, 255, 246, 0.24);
|
|
|
- overflow: hidden;
|
|
|
- .label {
|
|
|
- margin-top: 32px;
|
|
|
- position: absolute;
|
|
|
- width: 430px;
|
|
|
- // left: 700px;
|
|
|
- left: 50%;
|
|
|
- /* left: 763px; */
|
|
|
- transform: translateX(-50%);
|
|
|
- .label-en {
|
|
|
- // font-size: 78px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(35, 106, 250, 0.16);
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- // font-size: 58px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(38, 38, 38, 1);
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 78px;
|
|
|
+ .support {
|
|
|
+ padding: 105px 0 170px;
|
|
|
+ .s-content {
|
|
|
+ margin-top: 42px;
|
|
|
+ text-align: center;
|
|
|
+ img {
|
|
|
+ width: 1200px;
|
|
|
+ height: 220px;
|
|
|
}
|
|
|
}
|
|
|
- .campus-img {
|
|
|
- width: 1200px;
|
|
|
- height: 1034px;
|
|
|
- margin: 0 auto;
|
|
|
- display: block;
|
|
|
- margin-top: 100px;
|
|
|
- }
|
|
|
}
|
|
|
- .show {
|
|
|
- width: 100%;
|
|
|
- position: relative;
|
|
|
- height: 672px;
|
|
|
- background: rgba(247, 251, 255, 1);
|
|
|
- padding-top: 70px;
|
|
|
- box-sizing: border-box;
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- width: 280px;
|
|
|
- // left: 763px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- .label-en {
|
|
|
- // font-size: 78px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(35, 106, 250, 0.16);
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- // font-size: 58px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(38, 38, 38, 1);
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .show-box {
|
|
|
+ .case {
|
|
|
+ padding: 100px 0 100px;
|
|
|
+ .c-content {
|
|
|
+ margin-top: 40px;
|
|
|
display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- top: 281px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- .show-item {
|
|
|
- .ani-box {
|
|
|
- width: 396px;
|
|
|
- height: 327px;
|
|
|
- border-radius: 20px;
|
|
|
- padding: 18px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- background-color: transparent;
|
|
|
- box-sizing: border-box;
|
|
|
- img {
|
|
|
- width: 360px;
|
|
|
- height: 191px;
|
|
|
- }
|
|
|
- .text {
|
|
|
- margin-top: 30px;
|
|
|
- width: 340px;
|
|
|
- font-size: 20px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: rgba(51, 51, 51, 1);
|
|
|
- display: -webkit-box;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- }
|
|
|
- }
|
|
|
- &.active {
|
|
|
- .ani-box {
|
|
|
- background-color: #fff;
|
|
|
- transition: background-color 4s;
|
|
|
- box-shadow: 0px 4px 20px 0px rgba(150, 150, 150, 0.22);
|
|
|
- border-bottom: 1px solid blue;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
+ justify-content: space-between;
|
|
|
+ .left {
|
|
|
+ width: 588px;
|
|
|
+ height: 392px;
|
|
|
+ margin-right: 22px;
|
|
|
+ img {
|
|
|
+ width: 588px;
|
|
|
}
|
|
|
}
|
|
|
- }
|
|
|
- }
|
|
|
- .join {
|
|
|
- width: 100%;
|
|
|
- height: 700px;
|
|
|
- padding-top: 70px;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- // width: 600px;
|
|
|
- // left: 763px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- width: 280px;
|
|
|
- .label-en {
|
|
|
- // font-size: 78px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(35, 106, 250, 0.16);
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- // font-size: 58px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- // color: rgba(38, 38, 38, 1);
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 32px;
|
|
|
- }
|
|
|
- }
|
|
|
- .flow {
|
|
|
- width: 100%;
|
|
|
- position: absolute;
|
|
|
- top: 254px;
|
|
|
- .line-box {
|
|
|
- position: relative;
|
|
|
- .line {
|
|
|
- width: 100%;
|
|
|
- height: 1px;
|
|
|
- background-color: #d8d8d8;
|
|
|
- }
|
|
|
- .join-box {
|
|
|
- width: 1118px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- position: absolute;
|
|
|
- top: -16px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- .join-box-item {
|
|
|
- height: 145px;
|
|
|
- display: flex;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
-
|
|
|
- img {
|
|
|
- }
|
|
|
- .join-box-step {
|
|
|
- color: #999999;
|
|
|
- font-size: 20px;
|
|
|
- margin-bottom: 16px;
|
|
|
- .join-box-step-num {
|
|
|
- color: #262626;
|
|
|
- font-size: 50px;
|
|
|
- margin-right: 5px;
|
|
|
- }
|
|
|
- }
|
|
|
- .join-box-label {
|
|
|
- font-size: 18px;
|
|
|
- font-family: PingFangSC-Regular, sans-serif;
|
|
|
- font-weight: 400;
|
|
|
- color: #999999;
|
|
|
- line-height: 25px;
|
|
|
- }
|
|
|
- }
|
|
|
+ .right {
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: space-between;
|
|
|
+ img {
|
|
|
+ width: 284px;
|
|
|
+ height: 189px;
|
|
|
+ margin-bottom: 14px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- .join-btn {
|
|
|
- position: absolute;
|
|
|
- bottom: 126px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- img {
|
|
|
- width: 373px;
|
|
|
- height: 68px;
|
|
|
- }
|
|
|
- }
|
|
|
}
|
|
|
.join-us {
|
|
|
- height: 936px;
|
|
|
- background: url("~assets/images/cooperate/btImg.png") no-repeat;
|
|
|
+ position: relative;
|
|
|
+ height: 684px;
|
|
|
+ background: url("~assets/images/cooperate/joinBgImg.png") no-repeat;
|
|
|
+ // opacity: 0.9;
|
|
|
// background: url("http://res.training.luojigou.vip/FhPOU-rQqK2TdIDILiLM5f17xb2V?imageView2/0/q/50|imageslim")
|
|
|
// no-repeat;
|
|
|
background-size: 100% 100%;
|
|
|
- position: relative;
|
|
|
- .label {
|
|
|
- position: absolute;
|
|
|
- // width: 600px;
|
|
|
- width: 320px;
|
|
|
- top: 80px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
- // left: 763px;
|
|
|
- .label-en {
|
|
|
- // font-size: 78px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- color: rgba(255, 255, 255, 0.16);
|
|
|
- }
|
|
|
- .label-zn {
|
|
|
- // font-size: 58px;
|
|
|
- // font-family: PingFangSC-Semibold, sans-serif;
|
|
|
- // font-weight: 600;
|
|
|
- color: rgba(255, 255, 255, 1);
|
|
|
- position: absolute;
|
|
|
- top: 30px;
|
|
|
- left: 100px;
|
|
|
- }
|
|
|
+ // padding: 95px 0 80px;
|
|
|
+ .mask {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ background-color: rgb(13, 92, 250);
|
|
|
+ opacity: 0.9;
|
|
|
}
|
|
|
- .line {
|
|
|
- width: 1200px;
|
|
|
- height: 1px;
|
|
|
- background: rgba(216, 216, 216, 1);
|
|
|
+ .join-content {
|
|
|
position: absolute;
|
|
|
- top: 240px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ top: 0;
|
|
|
+ z-index: 1;
|
|
|
+ padding: 95px 0 80px;
|
|
|
+ height: 100%;
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .title-content {
|
|
|
+ .title {
|
|
|
+ font-size: 34px;
|
|
|
+ font-family: PingFangSC-Medium, PingFang SC;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 48rpx;
|
|
|
+ }
|
|
|
}
|
|
|
.join-us-form {
|
|
|
- width: 700px;
|
|
|
- position: absolute;
|
|
|
- top: 284px;
|
|
|
- left: 50%;
|
|
|
- transform: translateX(-50%);
|
|
|
+ margin-top: 60px;
|
|
|
+ .el-form {
|
|
|
+ width: 464px;
|
|
|
+ margin: 0 auto;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+ .el-form-item {
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
.el-input {
|
|
|
- width: 700px;
|
|
|
- height: 80px;
|
|
|
- // margin-bottom: 32px;
|
|
|
+ width: 464px;
|
|
|
+ height: 44px;
|
|
|
.el-input__inner {
|
|
|
- height: 70px;
|
|
|
+ height: 44px;
|
|
|
padding: 0 26px;
|
|
|
color: #666666;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 14px;
|
|
|
border-radius: 10px;
|
|
|
&::-webkit-input-placeholder {
|
|
|
height: 25px;
|
|
|
- font-size: 18px;
|
|
|
+ font-size: 14px;
|
|
|
font-family: PingFangSC-Regular, sans-serif;
|
|
|
font-weight: 400;
|
|
|
- color: #666666;
|
|
|
+ color: #788DBA;
|
|
|
line-height: 25px;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
- img {
|
|
|
- width: 700px;
|
|
|
- height: 68px;
|
|
|
- margin-top: 41px;
|
|
|
- margin-bottom: 27px;
|
|
|
+ .el-form-item__error {
|
|
|
+ padding-top: 0;
|
|
|
+ }
|
|
|
+ .submit {
|
|
|
+ margin: 37px auto 25px;
|
|
|
+ width: 150px;
|
|
|
+ height: 36px;
|
|
|
+ line-height: 36px;
|
|
|
+ background: linear-gradient(360deg, #B9D0FF 0%, #FFFFFF 100%);
|
|
|
+ box-shadow: 0px 8px 16px 0px rgba(0, 76, 228, 0.59);
|
|
|
+ border-radius: 100px;
|
|
|
+ color: #0D5CFA;
|
|
|
+ text-shadow: 0px 8px 16px rgba(0, 76, 228, 0.59);
|
|
|
+ font-size: 14px;
|
|
|
+ text-align: center;
|
|
|
}
|
|
|
.address {
|
|
|
- font-size: 20px;
|
|
|
+ font-size: 12px;
|
|
|
font-family: PingFangSC-Regular, sans-serif;
|
|
|
font-weight: 400;
|
|
|
color: rgba(255, 255, 255, 1);
|
chending1994
