如何使用CSS或JavaScript实现疫情期间校园链接的对应展示视图？

实现方案 #

你可以按以下步骤用原生HTML+CSS+JS实现，不需要引入第三方依赖：

1. 页面结构拆分 #

整个页面分为4个核心模块：

• 顶部公告栏：展示滚动通知内容
• 功能快捷入口区：放置出入证申请、核酸点查询等核心功能入口
• 信息列表区：展示最新通知、上报记录等列表内容
• 底部导航栏：固定在页面底部的切换栏

2. 核心代码实现 #

HTML基础结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>校园疫情防控平台</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- 顶部公告栏 -->
  <div class="notice-bar">
    <div class="notice-content">最新通知：今日全校核酸检测时间为14:00-18:00，请全体师生按时参加</div>
  </div>
  <!-- 功能入口区 -->
  <div class="function-wrap">
    <div class="function-item">
      <div class="func-icon">📝</div>
      <p>出入证申请</p>
    </div>
    <div class="function-item">
      <div class="func-icon">📍</div>
      <p>核酸点查询</p>
    </div>
    <div class="function-item">
      <div class="func-icon">📊</div>
      <p>行程上报</p>
    </div>
    <div class="function-item">
      <div class="func-icon">📅</div>
      <p>打卡记录</p>
    </div>
    <div class="function-item">
      <div class="func-icon">📞</div>
      <p>防疫热线</p>
    </div>
    <div class="function-item">
      <div class="func-icon">❓</div>
      <p>常见问题</p>
    </div>
  </div>
  <!-- 列表区 -->
  <div class="list-wrap">
    <div class="list-title">最新通知</div>
    <div class="list-item">
      <span class="item-icon">📢</span>
      <div class="item-content">
        <div class="item-title">关于调整校园管控措施的通知</div>
        <div class="item-time">2022-12-05</div>
      </div>
      <span class="item-arrow">></span>
    </div>
    <div class="list-item">
      <span class="item-icon">📢</span>
      <div class="item-content">
        <div class="item-title">第六批疫苗接种报名通知</div>
        <div class="item-time">2022-12-03</div>
      </div>
      <span class="item-arrow">></span>
    </div>
  </div>
  <!-- 底部导航 -->
  <div class="bottom-nav">
    <div class="nav-item active">
      <div class="nav-icon">🏠</div>
      <p>首页</p>
    </div>
    <div class="nav-item">
      <div class="nav-icon">👤</div>
      <p>我的</p>
    </div>
  </div>
  <script src="main.js"></script>
</body>
</html>

CSS样式代码

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: sans-serif;
}
body {
  padding-top: 40px;
  padding-bottom: 60px;
  background-color: #f5f5f5;
}
/* 顶部公告栏 */
.notice-bar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 40px;
  line-height: 40px;
  background-color: #ff4d4f;
  color: #fff;
  overflow: hidden;
  z-index: 999;
}
.notice-content {
  white-space: nowrap;
  animation: scrollNotice 15s linear infinite;
}
@keyframes scrollNotice {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}
/* 功能入口区 */
.function-wrap {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 20px;
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
}
.function-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 12px 0;
  border-radius: 8px;
  transition: all 0.2s;
}
.function-item:hover {
  background-color: #f0f7ff;
  transform: scale(1.05);
}
.func-icon {
  font-size: 32px;
  margin-bottom: 8px;
}
.function-item p {
  font-size: 14px;
  color: #333;
}
/* 列表区 */
.list-wrap {
  margin: 10px;
  background-color: #fff;
  border-radius: 8px;
  padding: 0 16px;
}
.list-title {
  padding: 16px 0;
  font-size: 16px;
  font-weight: bold;
  color: #333;
  border-bottom: 1px solid #eee;
}
.list-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #eee;
}
.list-item:last-child {
  border-bottom: none;
}
.item-icon {
  font-size: 20px;
  margin-right: 12px;
}
.item-content {
  flex: 1;
}
.item-title {
  font-size: 15px;
  color: #333;
  margin-bottom: 4px;
}
.item-time {
  font-size: 12px;
  color: #999;
}
.item-arrow {
  color: #999;
  font-size: 16px;
}
/* 底部导航 */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60px;
  display: flex;
  background-color: #fff;
  border-top: 1px solid #eee;
}
.nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.nav-item.active {
  color: #1890ff;
}
.nav-icon {
  font-size: 20px;
  margin-bottom: 4px;
}
.nav-item p {
  font-size: 12px;
}

JS交互代码（可选，按需扩展）

// 功能入口点击事件
document.querySelectorAll('.function-item').forEach((item, index) => {
  item.addEventListener('click', () => {
    // 这里写对应功能的跳转或者弹窗逻辑，比如跳转到出入证申请页
    console.log('点击了第' + (index + 1) + '个功能')
  })
})

// 列表项点击事件
document.querySelectorAll('.list-item').forEach((item, index) => {
  item.addEventListener('click', () => {
    // 跳转通知详情页逻辑
    console.log('点击了第' + (index + 1) + '条通知')
  })
})

// 底部导航切换
document.querySelectorAll('.nav-item').forEach(item => {
  item.addEventListener('click', () => {
    document.querySelectorAll('.nav-item').forEach(i => i.classList.remove('active'))
    item.classList.add('active')
    // 切换对应页面内容的逻辑
  })
})

3. 扩展优化点 #

如果需要更复杂的效果，可以按需添加：

• 下拉刷新、上拉加载更多列表内容
• 出入证申请页的表单提交、校验逻辑
• 核酸点查询的地图展示功能
• 本地存储保存用户的打卡、申请记录

内容的提问来源于stack exchange，提问作者humanrizki123