|
|
|
@ -0,0 +1,189 @@ |
|
|
|
<template> |
|
|
|
<div :class="getClassName()"> |
|
|
|
<div class="hold_wrap"> |
|
|
|
<div class="top_circle"> |
|
|
|
<div class="circle_wrap"> |
|
|
|
<img :src="Logo" alt="" class="logo" /> |
|
|
|
<div class="new_btn">{{ getTitle() }}</div> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
<div class="header_card"> |
|
|
|
<div class="btn">{{ getTitle() }}</div> |
|
|
|
</div> |
|
|
|
<p class="text"> |
|
|
|
{{ getContent() }} |
|
|
|
</p> |
|
|
|
<p class="tip">{{ getTips() }}</p> |
|
|
|
</div> |
|
|
|
</div> |
|
|
|
</template> |
|
|
|
|
|
|
|
<script setup> |
|
|
|
import Logo from '@/assets/img/culture/zixintubiaoimg.png' |
|
|
|
const props = defineProps({ |
|
|
|
i: String, |
|
|
|
}) |
|
|
|
const getClassName = () => { |
|
|
|
return `culture_card_container bg${props.i}` |
|
|
|
} |
|
|
|
const getTitle = () => { |
|
|
|
if (props.i == '1') { |
|
|
|
return '自信' |
|
|
|
} |
|
|
|
if (props.i == '2') { |
|
|
|
return '思维逻辑' |
|
|
|
} |
|
|
|
if (props.i == '3') { |
|
|
|
return '理论结合实践' |
|
|
|
} |
|
|
|
if (props.i == '4') { |
|
|
|
return '文档是我们宝贵的财富' |
|
|
|
} |
|
|
|
if (props.i == '5') { |
|
|
|
return '一个项目代表一个责任' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const getContent = () => { |
|
|
|
if (props.i == '1') { |
|
|
|
return '相信相信的力量，相信自己 能成为逻辑高手，相信自己 能出好方案，相信自己能成 为高手，只要努力一定能做 出好的产品。' |
|
|
|
} |
|
|
|
if (props.i == '2') { |
|
|
|
return '创新的方案，想美事法，探究 各种可能，穷举法，方案要想 彻底，避免想当然自己应该知 道有没有想彻底，方案细节是 经得起推敲的，思维懒惰就是不负责任，任何方案决策都要有依据。' |
|
|
|
} |
|
|
|
if (props.i == '3') { |
|
|
|
return '回归课本计划,探究事物的 理论本质,实践检验理论的 正确性。' |
|
|
|
} |
|
|
|
if (props.i == '4') { |
|
|
|
return '需求文档、研发文档、实验文档、 会议记录、量产文档每个项目的 历史错误总结文档。' |
|
|
|
} |
|
|
|
if (props.i == '5') { |
|
|
|
return '落实绩效考核制度,避免重复错 误,避免低级错误,产品发出去要 睡的着觉。' |
|
|
|
} |
|
|
|
} |
|
|
|
|
|
|
|
const getTips = () => { |
|
|
|
if (props.i == '1') { |
|
|
|
return 'Confident' |
|
|
|
} |
|
|
|
if (props.i == '2') { |
|
|
|
return 'logic' |
|
|
|
} |
|
|
|
if (props.i == '3') { |
|
|
|
return 'pratice' |
|
|
|
} |
|
|
|
if (props.i == '4') { |
|
|
|
return 'file' |
|
|
|
} |
|
|
|
if (props.i == '5') { |
|
|
|
return 'duty' |
|
|
|
} |
|
|
|
} |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped lang="scss"> |
|
|
|
.culture_card_container { |
|
|
|
width: 306px; |
|
|
|
height: 625px; |
|
|
|
.hold_wrap { |
|
|
|
box-sizing: border-box; |
|
|
|
background: rgba(0, 0, 0, 0.63); |
|
|
|
height: 100%; |
|
|
|
padding: 46px 45px 169px 45px; |
|
|
|
display: flex; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
.top_circle { |
|
|
|
display: none; |
|
|
|
} |
|
|
|
.header_card { |
|
|
|
.btn { |
|
|
|
border: 2px solid #ffffff; |
|
|
|
font-size: 18px; |
|
|
|
font-family: 'SourceHanSans'; |
|
|
|
padding: 10px 16px; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
margin-top: 84px; |
|
|
|
} |
|
|
|
} |
|
|
|
.text { |
|
|
|
font-size: 16px; |
|
|
|
font-family: 'SourceHanSans'; |
|
|
|
line-height: 32px; |
|
|
|
font-weight: 300; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
.tip { |
|
|
|
font-size: 30px; |
|
|
|
font-family: 'ZonaPro'; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.culture_card_container:hover { |
|
|
|
position: relative; |
|
|
|
overflow: hidden; |
|
|
|
.hold_wrap { |
|
|
|
background: rgba(53, 83, 227, 0.63); |
|
|
|
} |
|
|
|
.top_circle { |
|
|
|
display: flex; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
align-items: center; |
|
|
|
position: absolute; |
|
|
|
top: 0; |
|
|
|
left: -25%; |
|
|
|
right: 0; |
|
|
|
width: 150%; |
|
|
|
height: 195px; |
|
|
|
border-bottom-left-radius: 50%; |
|
|
|
border-bottom-right-radius: 50%; |
|
|
|
background: #b8c5fb; |
|
|
|
.circle_wrap { |
|
|
|
display: flex; |
|
|
|
align-items: center; |
|
|
|
flex-direction: column; |
|
|
|
justify-content: space-between; |
|
|
|
padding: 46px 0; |
|
|
|
height: 80px; |
|
|
|
.logo { |
|
|
|
width: 40px; |
|
|
|
height: 40px; |
|
|
|
margin-bottom: 31px; |
|
|
|
} |
|
|
|
.new_btn { |
|
|
|
background: #283fe7; |
|
|
|
font-size: 20px; |
|
|
|
font-family: 'SourceHanSans'; |
|
|
|
font-weight: 400; |
|
|
|
color: #ffffff; |
|
|
|
padding: 10px 18px; |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
.bg1 { |
|
|
|
background: url(../../../../../assets/img/culture/lilunjieheback.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.bg2 { |
|
|
|
background: url(../../../../../assets/img/culture/lilunjieheback.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.bg3 { |
|
|
|
background: url(../../../../../assets/img/culture/lilunjieheback.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.bg4 { |
|
|
|
background: url(../../../../../assets/img/culture/lilunjieheback.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
.bg5 { |
|
|
|
background: url(../../../../../assets/img/culture/lilunjieheback.png); |
|
|
|
background-size: 100% 100%; |
|
|
|
} |
|
|
|
</style> |
maochaoying
2 years ago
