77 lines
3.0 KiB
Vue
77 lines
3.0 KiB
Vue
|
<template>
|
|||
|
|
<div class="bg-[#ffffff]">
|
|||
|
|
<!-- 头部导航和标题区域 -->
|
|||
|
|
<div class="box_6 flex-col px-4 py-3">
|
|||
|
|
<div class="group_1">
|
|||
|
|
<div class="flex section_4 flex-col sm:flex-row justify-between items-center mb-2">
|
|||
|
|
<img class="thumbnail_1 w-6 h-6" referrerpolicy="no-referrer" src="public/images/home.png" />
|
|||
|
|
<span class="text_13 text-sm mt-1 sm:mt-0">您的位置：首页>系统公告</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="text_14 text-center text-xl font-bold my-3">系统公告</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 公告列表 -->
|
|||
|
|
<div class="flex box_7 flex-col px-4 py-2" v-for="item in 5">
|
|||
|
|
<div class="flex image-text_7 flex-col sm:flex-row justify-between mb-4 border-b pb-4">
|
|||
|
|
<img class="image_1 w-full sm:w-24 h-auto sm:h-24 object-cover mb-3 sm:mb-0" referrerpolicy="no-referrer" src="public/images/new1.png" />
|
|||
|
|
|
|||
|
|
<div class="flex group_13 flex-col justify-between flex-1 sm:ml-4">
|
|||
|
|
<div class="flex text-group_7 flex-col justify-between">
|
|||
|
|
<span class="text_15 text-base font-medium mb-2">
|
|||
|
|
青云计划」再启航，树立长三角放疗「顶天立地」人才培养…
|
|||
|
|
</span>
|
|||
|
|
<span class="text_16 text-sm text-gray-600 line-clamp-3">
|
|||
|
|
在清明节来临之际，为缅怀革命先烈，传承红色精神，增强党支部的凝聚力和战斗力。3月29日，我院机关党总支党委宣传处党支部联合党委办公室党支部赴郑州烈士陵园开展"传承红色基因，续红色血脉"主.….
|
|||
|
|
</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="flex justify-between items-center mt-3">
|
|||
|
|
<img class="label_1 h-5" referrerpolicy="no-referrer" src="public/images/bs1.png" />
|
|||
|
|
<!-- 日期移到右侧 -->
|
|||
|
|
<div class="text-right">
|
|||
|
|
<span class="text_17 block text-xl font-bold">08</span>
|
|||
|
|
<span class="text_18 block text-xs text-gray-500">2025.04</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<!-- 分页或底部区域 -->
|
|||
|
|
<div class="group_18 flex-row justify-center my-4 px-4">
|
|||
|
|
<!-- 分页控件可以在这里添加 -->
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: 'PhoneListDetail'
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
@import "@/assets/css/common.scss";
|
|||
|
|
@import "@/assets/css/list.css";
|
|||
|
|
|
|||
|
|
/* 手机端适配样式 */
|
|||
|
|
@media (max-width: 640px) {
|
|||
|
|
.box_6, .box_7 {
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_14 {
|
|||
|
|
font-size: 1.25rem;
|
|||
|
|
margin: 0.75rem 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_15 {
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.text_16 {
|
|||
|
|
font-size: 0.875rem;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|