提交 7d95e918 authored 作者: pengxiaohui's avatar pengxiaohui

样式交互调整

上级 c50c16c0
<template>
<div class="presence-content-box">
<div class="content-mian">
<div class="enroll-box">
<div class="left-content">
<div class="tit">马上申请<br>加入未来管理者项目</div>
<div class="tips">温馨提示:仅本科及以上学历可报名</div>
</div>
<div class="right-content">
<div class="li">
<el-select v-model="form.years" placeholder="请选择工作年限">
<el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="li">
<el-select v-model="form.degree" placeholder="请选择学历/学位">
<el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" :value="item.value">
</el-option>
</el-select>
</div>
<div class="li">
<el-input v-model="form.name" placeholder="输入您的姓名"></el-input>
</div>
<div class="li">
<el-input v-model="form.phone" placeholder="输入您的手机号"></el-input>
</div>
<div class="btn">立即提交</div>
</div>
</div>
</div>
</div>
</template>
<script>
import AppLink from '@/components/Link'
export default {
name: 'presence',
components: {
AppLink
},
data() {
return {
yearsOptions: [
{
value: '0~2',
label: '0-2年'
},
{
value: '3~5',
label: '3-5年'
},
{
value: '5~10',
label: '5-10年'
},
{
value: '10+',
label: '10年及以上'
}
],
degreeOptions: [
{
value: '2',
label: '普通本科'
},
{
value: '3',
label: '本科/学士'
},
{
value: '5',
label: '硕士'
},
{
value: '7',
label: '博士'
}
],
form: {
years: '',
degree: '',
name: '',
phone: '',
// channel: 19960,
project_id: process.env.projectId
},
value: ''
}
},
mounted() {},
methods: {
}
}
</script>
<style lang="scss" scoped>
.presence-content-box {
.content-mian {
.enroll-box {
width: 900px;
height: 400px;
margin: 20px auto 30px;
background: url(https://webapp-pub.oss-cn-beijing.aliyuncs.com/project/kelley/home-ssfc-bg.png);
background-size: 100% 100%;
display: flex;
justify-content: space-between;
.left-content {
width: 380px;
height: 223px;
background: rgba(170, 25, 65, 0.63);
box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
margin-top: 80px;
.tit {
font-size: 30px;
font-weight: bold;
line-height: 58px;
color: #ffffff;
text-align: center;
margin-top: 30px;
}
.tips {
font-size: 14px;
line-height: 100%;
color: #ffffff;
margin-top: 30px;
text-align: center;
}
}
.right-content {
width: 380px;
height: 340px;
background: #ffffff;
margin-top: 24px;
box-sizing: border-box;
padding: 30px 56px 56px 64px;
margin-right: 56px;
::v-deep {
.el-select {
width: 100%;
}
}
.li {
margin-bottom: 20px;
}
.btn {
font-size: 18px;
line-height: 32px;
color: #ffffff;
width: 281px;
background: #aa1941;
border-radius: 4px;
text-align: center;
cursor: pointer;
}
}
}
}
}
</style>
\ No newline at end of file
......@@ -91,7 +91,7 @@ export default {
tit7: '专业+创新创业'
},
college: {
tit1: '核心能力及特点',
tit1: '核心能力',
tit2: '服务项目'
// tit3: '国际品牌管理<br />与数字运营'
}
......
......@@ -12,14 +12,14 @@
<!-- <education-services/> -->
<!-- 项目公告 -->
<project-notice/>
<!-- 教育服务案例 -->
<service-case/>
<!-- 校长寄语 -->
<headmaster-msg/>
<!-- 校友故事 -->
<alumni-stories/>
<!-- 公开课 -->
<open-class/>
<!-- 教育服务案例 -->
<service-case/>
</div>
</template>
......
......@@ -42,7 +42,7 @@
:class="{ active: index === tabActive }"
>
<img :src="item.img" alt="" style="width:43px;height:43px" />
<div style="color: #424242;font-size:16px;font-weight:400">{{ item.name }}</div>
<div class="name">{{ item.name }}</div>
</li>
</ul>
<div v-if="tabActive === 0" class="part">
......@@ -126,7 +126,7 @@
:class="{ active: index === tabsActive }"
>
<img :src="item.img" alt="" style="width:43px;height:43px" />
<div style="font-size: 16px;color: #424242;font-weight: 400;">{{ item.name }}</div>
<div class="name">{{ item.name }}</div>
<div style="color: #666666;font-size:14px;font-weight: 300">{{ item.dec }}</div>
</li>
</ul>
......@@ -622,10 +622,19 @@ export default {
height: 146px;
opacity: 1;
background: #f4f4f4;
cursor:pointer;
.name{
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active {
background-color: #fff;
border-bottom: 6px solid #a81840;
.name{
color:#a81840;
}
}
}
......@@ -653,10 +662,19 @@ export default {
width: 151px;
height: 156px;
background: #f4f4f4;
cursor:pointer;
.name{
font-size: 16px;
color: #424242;
font-weight: 400;
}
}
.active {
background: #ffffff;
border-top: 6px solid #a81840;
.name{
color:#a81840;
}
}
}
......
......@@ -123,7 +123,7 @@
"
class="img1"
/>
<h1 style="font-size:22px;color:#424242;padding-bottom:20px">业咨询合作</h1>
<h1 style="font-size:22px;color:#424242;padding-bottom:20px">实习就业咨询合作</h1>
<p style="font-size:18px;color:#424242">联系电话:010-62799201&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 王老师</p>
</div>
</div>
......
......@@ -39,6 +39,8 @@
"
style="margin-bottom:15px;"
/>
<div class="module-title" style="margin-bottom:15px;">{{isEn ? '领跑未来' : '领跑未来'}}</div>
<presence />
<div class="module-title" style="margin-bottom:15px;">{{isEn ? '项目收获' : '项目收获'}}</div>
<div class="project-harvest">
<div class="title">战胜三“难”:<span>找工作、评绩效、求升职</span></div>
......@@ -49,7 +51,7 @@
<p>老板与HR们的考量基石<br>——<span>能力素质模型</span></p>
<div>哈佛大学教授<br>David McClelland提出</div>
</li>
<li class="item">
<li :class="{item:true, active: count%3 === 1}">
<div class="top">
<p>专业能力</p>
<span>Profession Competencies</span>
......@@ -58,32 +60,32 @@
<p>特定角色和工作所需要的特<br>殊的技能,针对岗位设定<br>(如程序员的编程能力)</p>
</div>
</li>
<li class="item">
<li :class="{item:true, active: count%3 === 2}">
<div class="top">
<p>通用能力</p>
<span>Shared Capabilities</span>
<p>核心能力</p>
<span>Core Attributes</span>
</div>
<div class="bottom">
<p>适用于多个角色的基本素质</p>
<p>每一位员工都必须具备的能力</p>
<div class="list">
<span>沟通交流</span>
<span>分析思维</span>
<span>人际关系</span>
<span>领导能力</span>
<span>务实</span>
<span>创新</span>
<span>自律</span>
</div>
</div>
</li>
<li class="item">
<li :class="{item:true, active: count%3 === 0}">
<div class="top">
<p>核心能力</p>
<span>Core Attributes</span>
<p>通用能力</p>
<span>Shared Capabilities</span>
</div>
<div class="bottom">
<p>每一位员工都必须具备的能力</p>
<p>适用于多个角色的基本素质</p>
<div class="list">
<span>务实</span>
<span>创新</span>
<span>自律</span>
<span>沟通交流</span>
<span>分析思维</span>
<span>人际关系</span>
<span>领导能力</span>
</div>
</div>
</li>
......@@ -328,8 +330,9 @@
</template>
<script>
import tab from '../../components/services/tab'
import presence from '../../components/services/presence'
export default {
components: { tab },
components: { tab, presence },
data() {
const _this = this
return {
......@@ -370,7 +373,7 @@ export default {
},
{
// 未来管理者项目
name: this.isEn ? '职业证书' : '职业证书'
name: this.isEn ? '新职业' : '新职业'
}
],
showModule: 0,
......@@ -395,11 +398,19 @@ export default {
_this.swiper.slideNext()
}
}
}
},
count: 1
}
},
created() {
this.isEn = this.$cookies.get('lang') === 'en-US'
const timer = setInterval(() => {
this.count++
console.log(this.count)
}, 3000)
this.$once('hook:beforeDestroy', () => {
clearInterval(timer)
})
},
methods: {
tabChangeIndex(n) {
......@@ -644,7 +655,7 @@ export default {
.content{
background: #F7F7F7;
padding:20px 0 20px;
margin-top:20px 0;
margin-top:20px;
.m1{
margin:0 35px 20px 20px;
ul{
......@@ -658,6 +669,7 @@ export default {
li.item{
background:#fff;
border-radius:10px;
transition:0.5s;
.top{
border-bottom:1px solid #E5E5E5;
padding:16px 10px;
......@@ -694,7 +706,7 @@ export default {
}
}
}
li.item:hover{
li.item.active{
background: #A81840;
color:#fff;
.top{
......
......@@ -987,7 +987,7 @@ export default {
showModule: 1,
isEn: false,
swiperOption: {
observer: true,
// observer: true,
observeParents: true,
speed: 400,
autoplay: true,
......@@ -1131,6 +1131,7 @@ export default {
top:50%;
transform:translateY(-50%);
z-index:2;
display:none;
img{
width:100%;
height:100%;
......@@ -1153,7 +1154,6 @@ export default {
text-align:center;
min-height:220px;
box-sizing:border-box;
cursor:pointer;
padding:20px 0;
h5{
line-height:60px;
......@@ -1245,6 +1245,7 @@ export default {
.item.active{
border-color:#aa1941;
background:#fff;
color:#aa1941;
}
}
.img-text{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论