<template>
  <div class="company-news-container">
    <div class="company-news-header">
      <div class="title_box">
        <img alt="新闻图标" src="@/assets/imgs/portal/gsxw_icon.png" class="news-icon" />
        <span class="gszx">公司资讯</span>
      </div>
      <el-button class="more-button" text>更多</el-button>
    </div>
    <div class="news-item" v-for="(news, index) in newsList" :key="index">
      <!-- <img v-if="index === 0" :src="news.image" alt="新闻图片" class="news-image" /> -->
      <img alt="新闻图片" src="@/assets/imgs/portal/usif_bg.png" class="news-image" />
      <div class="news-content">
        <h3>{{ news.title }}</h3>
        <p class="news-desc">{{ news.content }}</p>
        <p class="news-date">{{ news.date }}</p>
      </div>
    </div>
    <!-- <div class="divider" v-if="newsList.length > 1"></div> -->
    <div class="other-news-list">
      <div class="other-news-item" v-for="(otherNews, index) in otherNewsList" :key="index">
        <span class="circle"></span>
        <span class="other-news-title">{{ otherNews.title }}</span>
        <span class="other-news-date">{{ otherNews.date }}</span>
      </div>
    </div>
  </div>
</template>

<script setup>
// 模拟新闻数据
const newsList = [
  {
    image: 'https://example.com/news-image-1.jpg',
    title: '这里是新闻标题',
    content: '这里是新闻内容这里是新闻内容这里是新闻内容这里是新闻内容',
    date: '2025年9月16日'
  }
]

const otherNewsList = [
  {
    title: '关于项目经营“三纲领”的启用通知关于项目经营“三纲领”的启用通知', // 较长标题用于测试省略号
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  },
  {
    title: '关于项目经营“三纲领”的启用通知',
    date: '2025-08-29'
  }
]
</script>

<style lang="less" scoped>
.company-news-container {
  width: 100%;
  // max-width: 400px;
  // border: 1px solid #ebeef5;
  border-radius: 4px;
  padding: 20px 14px 16px 20px;
  box-sizing: border-box;
}

.company-news-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  .title_box {
    display: flex;
    align-items: center;
  }
  .gszx {
    font-family: Microsoft YaHei UI;
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    color: #0052d9;
  }
}

.news-icon {
  width: 32px;
  height: 32px;
  margin-right: 8px;
}

.more-button {
  font-size: 14px;
  color: #666;
}

.news-item {
  display: flex;
  // margin-bottom: 10px;
  cursor: pointer;
  padding-bottom: 15px;
  border-bottom: 1px dashed #e1e1e1;
}

.news-image {
  width: 128px;
  height: 88px;
  object-fit: cover;
  margin-right: 16px;
}

.news-content {
  flex: 1;
  h3 {
    margin: 3px 0 8px 0;
    color: #333;
    font-size: 14px;
  }
  .news-desc {
    margin: 0 0 8px 0;
    color: #666;
    // white-space: nowrap;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // display: -webkit-box;
    // -webkit-line-clamp: 2;
    // -webkit-box-orient: vertical;

    // display: -webkit-box;
    // -webkit-line-clamp: 2;
    // -webkit-box-orient: vertical;
    // overflow: hidden;
    // text-overflow: ellipsis;
    // word-break: break-all;

    overflow: hidden; /*必须结合的属性,当内容溢出元素框时发生的事情*/
    text-overflow: ellipsis; /*可以用来多行文本的情况下，用省略号“…”隐藏超出范围的文本 。*/
    display: -webkit-box; /*必须结合的属性 ，将对象作为弹性伸缩盒子模型显示 。*/
    -webkit-line-clamp: 2; /*用来限制在一个块元素显示的文本的行数。*/

    width: 224px;
    height: 36px;
    font-family: Microsoft YaHei UI;
    font-weight: 400;
    font-style: Regular;
    font-size: 12px;
    line-height: 18px;
    letter-spacing: 0px;
  }
}

.news-date {
  color: #999;
  font-size: 12px;
}

.divider {
  height: 1px;
  background-color: #ebeef5;
  margin: 16px 0;
}

.other-news-list {
  margin-top: 12px;
}

.other-news-item {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  cursor: pointer;
  padding-bottom: 8px;
  border-bottom: 1px dashed #e1e1e1;
  .circle {
    width: 7px;
    height: 7px;
    border-radius: 7px;
    background: #999;
    display: inline-block;
  }
  .other-news-title {
    // flex: 1;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; // 文字过多时显示省略号
    margin-left: 6px;
    font-size: 14px;
    color: #666;
  }
  .other-news-date {
    color: #999;
    font-size: 14px;
    margin-left: auto;
  }
}
</style>
