提交 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 { ...@@ -91,7 +91,7 @@ export default {
tit7: '专业+创新创业' tit7: '专业+创新创业'
}, },
college: { college: {
tit1: '核心能力及特点', tit1: '核心能力',
tit2: '服务项目' tit2: '服务项目'
// tit3: '国际品牌管理<br />与数字运营' // tit3: '国际品牌管理<br />与数字运营'
} }
......
...@@ -12,14 +12,14 @@ ...@@ -12,14 +12,14 @@
<!-- <education-services/> --> <!-- <education-services/> -->
<!-- 项目公告 --> <!-- 项目公告 -->
<project-notice/> <project-notice/>
<!-- 教育服务案例 -->
<service-case/>
<!-- 校长寄语 --> <!-- 校长寄语 -->
<headmaster-msg/> <headmaster-msg/>
<!-- 校友故事 --> <!-- 校友故事 -->
<alumni-stories/> <alumni-stories/>
<!-- 公开课 --> <!-- 公开课 -->
<open-class/> <open-class/>
<!-- 教育服务案例 -->
<service-case/>
</div> </div>
</template> </template>
......
...@@ -42,7 +42,7 @@ ...@@ -42,7 +42,7 @@
:class="{ active: index === tabActive }" :class="{ active: index === tabActive }"
> >
<img :src="item.img" alt="" style="width:43px;height:43px" /> <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> </li>
</ul> </ul>
<div v-if="tabActive === 0" class="part"> <div v-if="tabActive === 0" class="part">
...@@ -126,7 +126,7 @@ ...@@ -126,7 +126,7 @@
:class="{ active: index === tabsActive }" :class="{ active: index === tabsActive }"
> >
<img :src="item.img" alt="" style="width:43px;height:43px" /> <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> <div style="color: #666666;font-size:14px;font-weight: 300">{{ item.dec }}</div>
</li> </li>
</ul> </ul>
...@@ -622,10 +622,19 @@ export default { ...@@ -622,10 +622,19 @@ export default {
height: 146px; height: 146px;
opacity: 1; opacity: 1;
background: #f4f4f4; background: #f4f4f4;
cursor:pointer;
.name{
font-size: 16px;
color: #424242;
font-weight: 400;
}
} }
.active { .active {
background-color: #fff; background-color: #fff;
border-bottom: 6px solid #a81840; border-bottom: 6px solid #a81840;
.name{
color:#a81840;
}
} }
} }
...@@ -653,10 +662,19 @@ export default { ...@@ -653,10 +662,19 @@ export default {
width: 151px; width: 151px;
height: 156px; height: 156px;
background: #f4f4f4; background: #f4f4f4;
cursor:pointer;
.name{
font-size: 16px;
color: #424242;
font-weight: 400;
}
} }
.active { .active {
background: #ffffff; background: #ffffff;
border-top: 6px solid #a81840; border-top: 6px solid #a81840;
.name{
color:#a81840;
}
} }
} }
......
...@@ -123,7 +123,7 @@ ...@@ -123,7 +123,7 @@
" "
class="img1" 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> <p style="font-size:18px;color:#424242">联系电话:010-62799201&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 王老师</p>
</div> </div>
</div> </div>
......
...@@ -39,6 +39,8 @@ ...@@ -39,6 +39,8 @@
" "
style="margin-bottom:15px;" 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="module-title" style="margin-bottom:15px;">{{isEn ? '项目收获' : '项目收获'}}</div>
<div class="project-harvest"> <div class="project-harvest">
<div class="title">战胜三“难”:<span>找工作、评绩效、求升职</span></div> <div class="title">战胜三“难”:<span>找工作、评绩效、求升职</span></div>
...@@ -49,7 +51,7 @@ ...@@ -49,7 +51,7 @@
<p>老板与HR们的考量基石<br>——<span>能力素质模型</span></p> <p>老板与HR们的考量基石<br>——<span>能力素质模型</span></p>
<div>哈佛大学教授<br>David McClelland提出</div> <div>哈佛大学教授<br>David McClelland提出</div>
</li> </li>
<li class="item"> <li :class="{item:true, active: count%3 === 1}">
<div class="top"> <div class="top">
<p>专业能力</p> <p>专业能力</p>
<span>Profession Competencies</span> <span>Profession Competencies</span>
...@@ -58,32 +60,32 @@ ...@@ -58,32 +60,32 @@
<p>特定角色和工作所需要的特<br>殊的技能,针对岗位设定<br>(如程序员的编程能力)</p> <p>特定角色和工作所需要的特<br>殊的技能,针对岗位设定<br>(如程序员的编程能力)</p>
</div> </div>
</li> </li>
<li class="item"> <li :class="{item:true, active: count%3 === 2}">
<div class="top"> <div class="top">
<p>通用能力</p> <p>核心能力</p>
<span>Shared Capabilities</span> <span>Core Attributes</span>
</div> </div>
<div class="bottom"> <div class="bottom">
<p>适用于多个角色的基本素质</p> <p>每一位员工都必须具备的能力</p>
<div class="list"> <div class="list">
<span>沟通交流</span> <span>务实</span>
<span>分析思维</span> <span>创新</span>
<span>人际关系</span> <span>自律</span>
<span>领导能力</span>
</div> </div>
</div> </div>
</li> </li>
<li class="item"> <li :class="{item:true, active: count%3 === 0}">
<div class="top"> <div class="top">
<p>核心能力</p> <p>通用能力</p>
<span>Core Attributes</span> <span>Shared Capabilities</span>
</div> </div>
<div class="bottom"> <div class="bottom">
<p>每一位员工都必须具备的能力</p> <p>适用于多个角色的基本素质</p>
<div class="list"> <div class="list">
<span>务实</span> <span>沟通交流</span>
<span>创新</span> <span>分析思维</span>
<span>自律</span> <span>人际关系</span>
<span>领导能力</span>
</div> </div>
</div> </div>
</li> </li>
...@@ -328,8 +330,9 @@ ...@@ -328,8 +330,9 @@
</template> </template>
<script> <script>
import tab from '../../components/services/tab' import tab from '../../components/services/tab'
import presence from '../../components/services/presence'
export default { export default {
components: { tab }, components: { tab, presence },
data() { data() {
const _this = this const _this = this
return { return {
...@@ -370,7 +373,7 @@ export default { ...@@ -370,7 +373,7 @@ export default {
}, },
{ {
// 未来管理者项目 // 未来管理者项目
name: this.isEn ? '职业证书' : '职业证书' name: this.isEn ? '新职业' : '新职业'
} }
], ],
showModule: 0, showModule: 0,
...@@ -395,11 +398,19 @@ export default { ...@@ -395,11 +398,19 @@ export default {
_this.swiper.slideNext() _this.swiper.slideNext()
} }
} }
} },
count: 1
} }
}, },
created() { created() {
this.isEn = this.$cookies.get('lang') === 'en-US' 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: { methods: {
tabChangeIndex(n) { tabChangeIndex(n) {
...@@ -644,7 +655,7 @@ export default { ...@@ -644,7 +655,7 @@ export default {
.content{ .content{
background: #F7F7F7; background: #F7F7F7;
padding:20px 0 20px; padding:20px 0 20px;
margin-top:20px 0; margin-top:20px;
.m1{ .m1{
margin:0 35px 20px 20px; margin:0 35px 20px 20px;
ul{ ul{
...@@ -658,6 +669,7 @@ export default { ...@@ -658,6 +669,7 @@ export default {
li.item{ li.item{
background:#fff; background:#fff;
border-radius:10px; border-radius:10px;
transition:0.5s;
.top{ .top{
border-bottom:1px solid #E5E5E5; border-bottom:1px solid #E5E5E5;
padding:16px 10px; padding:16px 10px;
...@@ -694,7 +706,7 @@ export default { ...@@ -694,7 +706,7 @@ export default {
} }
} }
} }
li.item:hover{ li.item.active{
background: #A81840; background: #A81840;
color:#fff; color:#fff;
.top{ .top{
......
...@@ -987,7 +987,7 @@ export default { ...@@ -987,7 +987,7 @@ export default {
showModule: 1, showModule: 1,
isEn: false, isEn: false,
swiperOption: { swiperOption: {
observer: true, // observer: true,
observeParents: true, observeParents: true,
speed: 400, speed: 400,
autoplay: true, autoplay: true,
...@@ -1131,6 +1131,7 @@ export default { ...@@ -1131,6 +1131,7 @@ export default {
top:50%; top:50%;
transform:translateY(-50%); transform:translateY(-50%);
z-index:2; z-index:2;
display:none;
img{ img{
width:100%; width:100%;
height:100%; height:100%;
...@@ -1153,7 +1154,6 @@ export default { ...@@ -1153,7 +1154,6 @@ export default {
text-align:center; text-align:center;
min-height:220px; min-height:220px;
box-sizing:border-box; box-sizing:border-box;
cursor:pointer;
padding:20px 0; padding:20px 0;
h5{ h5{
line-height:60px; line-height:60px;
...@@ -1245,6 +1245,7 @@ export default { ...@@ -1245,6 +1245,7 @@ export default {
.item.active{ .item.active{
border-color:#aa1941; border-color:#aa1941;
background:#fff; background:#fff;
color:#aa1941;
} }
} }
.img-text{ .img-text{
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论