<template>
  <div class="main-page-lower">
    <div class="recent-news">
      <h2>最新成效</h2>
      <ul>
        <li>
          <div class="number-square">1</div>
          <span class="news-title">上海市人民政府办公厅关于印发《本市系统化全域推进海绵城市建设的实施意见》的通知</span>
          <span class="news-date">2024-06-18</span>
        </li>
        <li>
          <div class="number-square">2</div>
          <span class="news-title">沪府办〔2016〕165号-关于印发《上海市海绵城市规划建设技术导则(试行)》的通知</span>
          <span class="news-date">2024-06-18</span>
        </li>
        <li>
          <div class="number-square">3</div>
          <span class="news-title">上海市人民政府办公厅转发市水务局、市环保局制订的《关于加快本市城乡小河...</span>
          <span class="news-date">2024-06-18</span>
        </li>
        <li>
          <div class="number-square">4</div>
          <span class="news-title">沪府办〔2017〕80号上海市人民政府办公厅关于转发市水务局制订的《苏州河环...</span>
          <span class="news-date">2024-06-18</span>
        </li>
        <li>
          <div class="number-square">5</div>
          <span class="news-title">关于印发《开展上海市雨污混接综合整治攻坚战的实施意见》的通知</span>
          <span class="news-date">2024-06-18</span>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  name: "MainPageLower"
}
</script>

<style scoped>
.main-page-lower {
  height: 100%;
  display: flex;
  padding: 20px;
  background-color: #FFFFFF;
}

.recent-news {
  flex-grow: 1;
  padding: 20px;
  border-radius: 5px;
}

.recent-news h2 {
  margin-top: 0;
  font-weight: bold; /* 标题加粗 */
  font-size: 24px;
  text-align: center; /* 文本居中对齐 */
  display: inline-block; /* 将h2设为内联块级元素 */
  position: relative; /* 相对定位，以便于伪元素的绝对定位 */
  margin-left: 350px;
}

.recent-news h2::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 10%; /* 控制背景色占据的宽度 */
  background-color: #00C7FF; /* 与h2背景色一致 */
  z-index: -1; /* 确保伪元素在文本下面 */
}

.recent-news ul {
  list-style: none;
  padding: 0;
}

.recent-news li {
  display: flex;
  align-items: center; /* 垂直居中 */
  justify-content: space-between;
  padding: 10px 350px;
  //background-color: rgba(31, 98, 167, 0.1); /* 半透明背景色 */
}


.recent-news li:hover  {
  background-color: #eff6ff;
  cursor: pointer; /* 鼠标悬停时显示手型 */
}

.recent-news li:last-child {
  border-bottom: none;
}

.number-square {
  width: 30px;
  height: 30px;
  opacity: 0.35;
  background-color: #0080FF; /* 数字方块背景色 */
  color: white;
  font-weight: bold;
  font-size: 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 4px;
  margin-right: 23px;
}
.recent-news li:hover .number-square {
  opacity: 1; /* 鼠标悬浮时完全不透明 */
}


.news-title {
  flex-grow: 1; /* 让标题占据剩余空间 */
  text-align: left; /* 文本向左对齐 */
  font-size: 20px;
  font-family: "MicrosoftYaHei-Bold", sans-serif; /* 设置字体为 MicrosoftYaHei-Bold */
  font-weight: bold; /* 字重加粗 */
}


.news-date {
  font-weight: bold; /* 日期加粗 */
  text-align: right; /* 文本向右对齐 */
  font-size: 16px;
  color: #595959;
  opacity: 0.7;
}
</style>
