Skip to content

O
office-web-js
Commit baeee174 by qinjianhui
Options

feat: 企业文化页面

parent 44ac2c4e
Showing with 238 additions and 3 deletions
public/index.html
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0"> <meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- <link rel="icon" href="<%= BASE_URL %>favicon.ico"> --> <link rel="icon" href="<%= BASE_URL %>favicon.ico">
<title><%= htmlWebpackPlugin.options.title %></title> <title>晶闪网络科技有限公司</title>
</head> </head>
<body> <body>
<noscript> <noscript>
......
src/components/HomePageFooter.vue
...@@ -100,6 +100,7 @@ $primary-color: #e28e39; ...@@ -100,6 +100,7 @@ $primary-color: #e28e39;
padding: 0; padding: 0;
list-style-type: none; list-style-type: none;
margin-right: 100px; margin-right: 100px;
flex: 1;
&.active .footer-link { &.active .footer-link {
color: $primary-color; color: $primary-color;
......
src/styles/index.scss
...@@ -9,4 +9,25 @@ body { ...@@ -9,4 +9,25 @@ body {
div { div {
box-sizing: border-box; box-sizing: border-box;
}
::-webkit-scrollbar {
width: 10px;
height: 10px;
background-color: transparent;
}
::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: rgba(221, 221, 221, 1);
transition: all 0.4s ease;
-moz-transition: all 0.4s ease;
-webkit-transition: all 0.4s ease;
-o-transition: all 0.4s ease;
}
::-webkit-scrollbar-track {
border: none;
outline: none;
background-color: rgba(0, 0, 0, 0);
} }
\ No newline at end of file
src/views/Home/CulturePage.vue
<template> <template>
<div class="culture-page">企业文化</div> <div class="culture-page">
<div class="joshine-culture">
<div class="joshine-culture-banner">
<img class="culture-img" src="../../assets/culture/01.jpg" />
</div>
<div class="joshine-mission">
<img src="../../assets/culture/08.jpg" alt="" class="mission-img" />
</div>
<div class="joshine-idea">
<div class="manage-idea">
<div class="manage-text">
<div class="idea">经营理念</div>
<div>客户至上 以人为本</div>
</div>
<img src="~@/assets/culture/02.jpg" />
</div>
<div class="idea-content">
<div class="content-text">
<div class="idea">管理理念</div>
<div class="idea-des">
决策正确、选贤育人、崇尚行动<br />保持创新、协同互助、达成目标
</div>
</div>
<img src="~@/assets/culture/03.jpg" />
</div>
</div>
<div class="joshine-value">
<div class="value-title">企业价值观</div>
<div class="value-content">
<div class="value-pic">
<div class="valuePicTitle">诚信正直</div>
<div class="valuePicContent">
严格遵守公司制度，做到言行如一，实事求是；遇到利益诱惑时能坚持原则，以公司利益为先，不凭借职位之便谋取私利
</div>
<img src="~@/assets/culture/04.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">开放分享</div>
<div class="valuePicContent">
积极探索和学习新的市场、技术和产品知识，以开放的胸怀对待新理念和不同意见，相互尊重，相互信任，相互分享，营造良好的学习氛围和搭建信息共享平台。
</div>
<img src="~@/assets/culture/05.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">拥抱变化</div>
<div class="valuePicContent">
以积极主动的心态拥抱公司的变革和新的商业模式，学习借鉴成功经验，持续创新，不断挑战自我，改善自我，超越自我。
</div>
<img src="~@/assets/culture/06.jpg" />
</div>
<div class="value-pic">
<div class="valuePicTitle">快速行动</div>
<div class="valuePicContent">
快速有效整合现有资源，不因害怕承担责任或过度追求完美而延缓行动，确保在规定时限内以较高的质量完成任务，达到更加卓越的业务结果。
</div>
<img src="~@/assets/culture/07.jpg" />
</div>
</div>
</div>
</div>
</div>
</template> </template>
<script>
export default {
name: 'CulturePage',
}
</script>
<style lang="scss" scoped>
.joshine-culture-banner,
.joshine-mission,
.manage-idea,
.idea-content {
font-size: 0;
}
.mission-img,
.culture-img {
width: 100%;
}
.culture-img {
height: 30vw;
object-fit: cover;
}
.mission-img {
height: 20vw;
}
.joshine-idea {
display: flex;
}
.manage-idea {
position: relative;
}
.manage-idea .manage-text {
font-size: 32px;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.idea-content {
position: relative;
}
.idea-content .content-text {
font-size: 32px;
color: #fff;
font-weight: bold;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.idea {
position: relative;
margin-bottom: 50px;
}
.idea::after {
content: '';
display: block;
width: 60px;
height: 6px;
background-color: #fff;
position: absolute;
left: 0;
top: 50px;
}
.joshine-value {
width: 1400px;
margin: 0 auto;
padding-top: 48px;
padding-bottom: 64px;
}
.value-content {
font-size: 0;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
margin-top: 60px;
}
.value-title {
font-size: 64px;
font-weight: 400;
position: relative;
color: #111;
}
.value-title::after {
width: 56px;
height: 2.4px;
content: '';
display: block;
background: #f08917;
position: absolute;
bottom: -24px;
}
.value-pic {
position: relative;
cursor: pointer;
}
.value-pic img {
width: 100%;
}
.value-pic .valuePicTitle {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
font-size: 28px;
font-weight: 400;
color: #fff;
transition: all 0.8s;
}
.value-pic:hover .valuePicTitle {
top: 100px;
}
.value-pic:hover .valuePicContent {
top: 120px;
opacity: 1;
}
.valuePicContent {
position: absolute;
text-align: center;
top: 130px;
opacity: 0;
padding: 0 40px;
font-size: 16px;
font-family: lantingxh;
line-height: 24px;
font-weight: 200;
color: #fff;
transition: all 0.8s;
}
.content-text .idea-des {
font-size: 26px;
font-weight: 400;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment