90 lines
2.2 KiB
Plaintext
90 lines
2.2 KiB
Plaintext
<script setup lang="ts">
|
|
import AppBlock from '@/components/AppBlock.vue'
|
|
import AppNewsBox from '@/components/AppNewsBox.vue'
|
|
import type { PropType } from 'vue'
|
|
|
|
const route = useRoute()
|
|
const { push } = useRouter()
|
|
|
|
const props = defineProps({
|
|
items: {
|
|
type: Array as PropType<any[]>,
|
|
default: () => [],
|
|
},
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<div class="flex w-full h-full">
|
|
<AppBlock class="w-full !overflow-y-auto">
|
|
<div class="flex-1 box" v-for="item in items" :key="item.key">
|
|
<div v-if="item.title" class="box-title">{{ item.title }}</div>
|
|
<div v-if="item.label" class="mt30px inline-flex items-center pl18px pr28px py8px rd-22px bg-#003cb7 text-#fff text-18px">
|
|
<img src="@/assets/images/icon-tag.svg" class="w30px h30px mr16px" />
|
|
<span>{{ item.label }}</span>
|
|
</div>
|
|
<div class="grid">
|
|
<div class="mt20px" v-for="news in item.children" :key="news.label">
|
|
<div class="flex items-center py12px news-item">
|
|
<AppNewsBox class="flex-1" text="调达本部人的研究整体计划" />
|
|
<div class="flex-shrink flex">
|
|
<div class="btn primary ml36px">预览</div>
|
|
<div class="btn default ml10px">下载</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</AppBlock>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped lang="less">
|
|
.grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(2, 1fr);
|
|
grid-column-gap: 120px;
|
|
}
|
|
|
|
.box {
|
|
margin: 23px 45px;
|
|
.box-title {
|
|
font-size: 28px;
|
|
font-weight: 600;
|
|
position: relative;
|
|
padding-left: 24px;
|
|
margin-top: 42px;
|
|
&::before {
|
|
content: ' ';
|
|
display: block;
|
|
width: 8px;
|
|
height: 30px;
|
|
background-color: #003ab5;
|
|
|
|
position: absolute;
|
|
left: 0;
|
|
}
|
|
}
|
|
}
|
|
.news-item {
|
|
cursor: pointer;
|
|
border-bottom: 1px solid #eef3fb;
|
|
}
|
|
.btn {
|
|
--color-primary: #3870e5;
|
|
|
|
padding: 10px 22px;
|
|
border-radius: 5px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
&.default {
|
|
border: 1px solid var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
&.primary {
|
|
background-color: var(--color-primary);
|
|
color: #fff;
|
|
}
|
|
}
|
|
</style>
|