84 lines
3.0 KiB
Plaintext
84 lines
3.0 KiB
Plaintext
<!-- 品质 -->
|
|
<script setup lang="ts">
|
|
import HomeHead from '@/views/home/components/HomeHead.vue'
|
|
// import HomeHeadSearch from '@/views/home/components/HomeHeadSearch.vue'
|
|
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>
|
|
<HomeHead class="top">
|
|
<template #content>
|
|
<!-- <HomeHeadSearch /> -->
|
|
</template>
|
|
</HomeHead>
|
|
<div class="h-full relative flex flex-col">
|
|
<div class="font-600 flex items-end mt27px">
|
|
<div class="text-36px">集团方针</div>
|
|
<div class="text-18px ml40px mr25px">{{ day }}</div>
|
|
<div class="text-18px">{{ week }}</div>
|
|
</div>
|
|
<div class="g-wrapper flex-1 mt30px">
|
|
<div class="timeline mt35px ml178px">
|
|
<NTimeline size="large">
|
|
<NTimelineItem class="h92px one" v-for="item in array" :key="item.year">
|
|
<div class="flex gap-60px justify-between">
|
|
<div class="year absolute">{{ item.year }}</div>
|
|
<div class="content1">{{ item.content1 }}</div>
|
|
<div class="content2 pr50px">{{ item.content2 }}</div>
|
|
</div>
|
|
</NTimelineItem>
|
|
</NTimeline>
|
|
</div>
|
|
</div>
|
|
</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;
|
|
.year{
|
|
left: -132px;
|
|
top: -14px;
|
|
color: #003CB7;
|
|
font-size: 26px;
|
|
font-weight: normal;
|
|
text-align: center;
|
|
line-height: 50px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|