78 lines
3.4 KiB
Plaintext
78 lines
3.4 KiB
Plaintext
<!-- 品质 -->
|
|
<script setup lang="ts">
|
|
import { useDate } from '@/views/home/hooks/useDate'
|
|
import { NTimeline, NTimelineItem } from 'naive-ui'
|
|
|
|
const { day, week } = useDate()
|
|
const { push } = useRouter()
|
|
const array = ref<any[]>([
|
|
{content1:'将扩大的机遇转为成果 更强更大地展翅飞翔',content2:'ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう',year:'2023年'},
|
|
{content1:'领先时代的变化 开创崭新的未来',content2:'',year:'2022年'},
|
|
{content1:'以“重大变化”为契机 向新课题发起挑战',content2:'',year:'2021年'},
|
|
{content1:'加速推进三个协创 决胜于变化的时代',content2:'',year:'2020年'},
|
|
{content1:'以三个协创为轴心 人人迅速果断行动',content2:'',year:'2016年'},
|
|
{content1:'突破壁垒 集中优势 不断挑战新课题',content2:'',year:'2018年'},
|
|
{content1:'坚持以人为轴心，融合新的力量',content2:'集团上下齐心协力提升企业价值',year:'2017年'},
|
|
{content1:'站稳脚跟 强化优势 大步迈进',content2:'',year:'2016年'},
|
|
{content1:'创造未来，决胜于变化的时代',content2:'',year:'2015年'},
|
|
]);
|
|
</script>
|
|
|
|
<template>
|
|
<div class="timeline mt35px ml178px">
|
|
<NTimeline size="large">
|
|
<NTimelineItem class="h92px one" v-for="item in array" :key="item.year">
|
|
<div class="year">{{item.year}}</div>
|
|
</NTimelineItem>
|
|
<!-- <NTimelineItem class="h92px one" content="站稳脚跟 强化优势 大步迈进" />
|
|
<NTimelineItem class="h92px one" title="坚持以人为轴心，融合新的力量" content="集团上下齐心协力提升企业价值" />
|
|
<NTimelineItem class="h92px one" content="突破壁垒 集中优势 不断挑战新课题" />
|
|
<NTimelineItem class="h92px one" content="以三个协创为轴心 人人迅速果断行动" />
|
|
<NTimelineItem class="h92px one" type="success" content="加速推进三个协创 决胜于变化的时代" />
|
|
<NTimelineItem class="h92px one" type="error" content="以“重大变化”为契机 向新课题发起挑战" />
|
|
<NTimelineItem class="h92px one" type="warning" title="领先时代的变化 开创崭新的未来" />
|
|
<NTimelineItem class="h92px one" type="info" title="将扩大的机遇转为成果 更强更大地展翅飞翔"
|
|
content="ひろがるチャンスを 成果につなげ 強く大きく 羽ばたこう" /> -->
|
|
</NTimeline>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.top {
|
|
position: absolute;
|
|
right: 30px;
|
|
top: -92px;
|
|
}
|
|
|
|
.g-wrapper {
|
|
border-radius: 18px;
|
|
border: 1px solid #E7EBF5;
|
|
box-shadow: inset 1px 2px 12px rgba(14, 86, 221, 0.32);
|
|
overflow: hidden;
|
|
|
|
.timeline {
|
|
font-size: 20px;
|
|
font-weight: bold;
|
|
color: #142142;
|
|
|
|
.one {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: '2015年';
|
|
width: 113px;
|
|
height: 50px;
|
|
position: absolute;
|
|
left: -132px;
|
|
top: -14px;
|
|
color: #003CB7;
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|