Situation-Awareness-Platform-Frontend/src/views/Jyh/Home/component/ComNews.vue

<template>
  <div class="com-news"><h4 class="wow animated" style="visibility: visible;">最新动态</h4>
    <ul class="wow animated" style="visibility: visible;">
      <li><a href="https://mp.weixin.qq.com/s/gFi3Lo1KFcjt0gwhetaT5w" rel="nofollow" class="EASE" target="_blank"><img
        src="@/assets/v3/6b8d01d61f9a40d2b0c74bc6783ff296.png"
        alt="“Tcode外”夺冠！网络攻防从此“攻守易形”，AI 智能体才是终极胜负手" class="EASE"></a>
        <div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/11/21</span></div>
        <h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/gFi3Lo1KFcjt0gwhetaT5w" rel="nofollow"
                                      class="EASE" target="_blank">“Tcode外”夺冠！网络攻防从此“攻守易形”，AI 智能体才是终极胜负手</a></h5>
        <p class="desc MultiLine">在近日结束的“腾讯云黑客松-智能渗透挑战赛”线上赛中，Tcode科技旗下“Tcode外”战队，力压 238 支全球顶尖战队，以全程稳定高分斩获第一名！</p></li>
      <li><a href="https://mp.weixin.qq.com/s/rczHE9BYY_VRMo_DgJMV-w" rel="nofollow" class="EASE" target="_blank"><img
        src="@/assets/v3/2fde85b65bc84c01b5d280151a5fb555.png"
        alt="Tcode科技上榜国家专精特新“小巨人”，以 AI 安全创新领跑网络安全新赛道" class="EASE"></a>
        <div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/10/27</span></div>
        <h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/rczHE9BYY_VRMo_DgJMV-w" rel="nofollow"
                                      class="EASE" target="_blank">Tcode科技上榜国家专精特新“小巨人”，以 AI 安全创新领跑网络安全新赛道</a></h5>
        <p class="desc MultiLine">近日，北京市经济和信息化局公示了北京市第七批专精特新“小巨人”企业名单，Tcode科技凭借其卓越的科技创新能力和专业化的技术实力成功入选。</p></li>
      <li><a href="https://mp.weixin.qq.com/s/9KfUvw3zmrH3CfVbXzdLhg" rel="nofollow" class="EASE" target="_blank"><img
        src="@/assets/v3/ee5c7cb6d2ef4504b0e47a2bed942d7f.png"
        alt="蝉联第一！Tcode科技再次问鼎“天网杯”" class="EASE"></a>
        <div class="ptime"><i class="ICO ic-air"></i> 发布时间： <span>2025/09/23</span></div>
        <h5 class="EASE MultiLine"><a href="https://mp.weixin.qq.com/s/9KfUvw3zmrH3CfVbXzdLhg" rel="nofollow"
                                      class="EASE" target="_blank">蝉联第一！Tcode科技再次问鼎“天网杯”</a></h5>
        <p class="desc MultiLine">9 月 23 日，在 2025 年第三届“天网杯”网络安全大赛的赛场上，Tcode科技再次展现其在漏洞挖掘领域的顶尖实力，在关键产品漏洞挖掘挑战赛中拔得头筹，获得一等奖。</p>
      </li>
    </ul>
  </div>
</template>

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

<style lang="scss" scoped>
.com-news {
  margin: 0 auto;
  padding: 100px 0 50px;
  width: 1364px
}

.com-news h4 {
  color: #333;
  font-size: 28px;
  font-weight: 400;
  letter-spacing: 1.7px;
  line-height: 40px;
  margin-bottom: 57px;
  text-align: center
}

.com-news ul {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center
}

.com-news li {
  list-style: none;
  margin: 0 28px 0 0;
  width: 33.333%
}

.com-news li img {
  border-radius: 10px;
  height: 338px;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: center;
  object-position: center;
  width: 100%
}

.com-news li:hover img {
  -webkit-transform: scale(1.02);
  transform: scale(1.02)
}

.com-news li:hover h5 {
  color: #4bb752
}

.com-news .ptime {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin: 20px 0 0;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  color: #333;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px
}

.com-news .ptime span {
  color: #969696;
  font-size: 12px;
  font-weight: 400;
  line-height: 17px
}

.com-news li .ic-air {
  background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAABICAQAAAD/5HvMAAAAAXNSR0IArs4c6QAABFVJREFUeNrNmkloFFkYx4tMCB68itRXtImRqEzAZYLLQRRbBAUPCnEJfXCmIQw4kww0fRAVccFDqwh2VBQRPbkcBioEhY6oB/EyE5AOAWG2nsElM0NrYjSHHJK/dHVXpZd6Ve+rJVT9IXS/qn71y1u+73vve4ri7WpSuyhJGdIpTwUq0gzNUJEKlCedMpRUu5QmZWGuGFEf6TRBcNEE6dQXoxBR2hapCcrRrCtKtWYppybaFgUOs2QxpWmchVKtcUovWRwcTbOWoqJnGFNFLaU0B0CjbqFR3zCmRtUtvmA6WyhLc4HhlDRH2c4WjzhL22kkUBhTI0vbPeBocXUyFBwQ1EktzsXZTzNh4Ria0fZzBnIv09p40azaK9864eMYSFKtpMVD7qzajou7zqzwhrL98HaccZ0tIU10RyPgYJcou+A4JWXFTmIujBe24QiGHK23vUNpDtBnWdqAS3iDaeRcfJyN29VSwaJo6MYgpjBtKOv2dKox3ikGB7MSRzFWQSnriGtwUhcvUToomG24if9rYEra7v7LdE1w6iMatLQMSTxrQCnpI1olosqqQFdN+IVZg3P4yxampJdyRjIx32E5PzB7cB8fhTAl3ZWrKTe/sPHoTFfgJ4w4opR1UtLZVhZN1O8FZjMGMC4A+L1uWB+QrbWvDDTItTA9eITPwvZ4hpd1JWtl69aNRbHEKtTSapzAK8fuuQe9ruS1/D87oTQpapfs4ztwB+9dRstlXG4oe8wJR7oUSro/1orv8dx16H7GMaRsygc4AyKpUMb5kfU4j38kZtIkenHQdvr/wAHKKKSLb+/Dzy4WxtR/2IftNi6jpB0cIF2hvPh2D/6QwvkbcazDnwK30cYByitUcHqgA7ccJnhZY9iADvzqy21YKijuYcdex4n+Al8jhofC+/d5QEVFZtHTjgF8sn3dEFaAcMMB+BRzYaTIrsJ2I9/wstuIgXDcsUMPsYGkI8VWXKiZc+eN0m8FbWdqHbvLCpwfxPGL8ZoppIzvu1B0xHnLddoFx2lvHxeexr84bHze6Goyn3CB8o6GUaTlxt9VNqOqXle4deuurkOsaxIm80durRkp5yrqvIvWukukndxak4zww94YjDngTFU6lxV+8AK0am2qxNXXhc4lz61zwsiQcENYUzncQofxqVvgWB/wh7T3IJ8wjGn8hu7KjLtrA3SGW2efr2XQcOW1Zjt9Z+xzVKuHV+OslTvytlA0gT4hUSlZg6EaoG94NeZ8LqVNoFRNab8VN77jzrCEz82GMtDZhvKNeFpZn7HqG6/JqnnZjikBXbW9o+EEPuAar7607w2rYdyDJry7FXtZYUdDgo+/pXccy3zY+Lo2TS3QpqekRm1zjWFtC7tqTphnjNjGeQRTC5FLvkQwPRXBBF4EU5wRTAJHME0ewYMEETxqEcHDKKbbjdRxHSteitCBJivQjdCRr/krRtRPg1KH4gZDPhRXc30V1rHBL/3JmVpOd2CzAAAAAElFTkSuQmCC);
  height: 36px;
  margin-right: 14px;
  width: 36px
}

.com-news li:last-child {
  margin: 0
}

.com-news li h5 {
  color: #333;
  font-size: 20px;
  height: 60px;
  line-height: 30px;
  margin: 20px 0 0
}

.com-news li .desc,.com-news li h5 {
  font-weight: 400;
  letter-spacing: .5px
}

.com-news li .desc {
  color: #4d4d4d;
  font-size: 14px;
  line-height: 24px;
  margin: 18px 0 0;
  -webkit-line-clamp: 4
}

.ICO {
  background-position: 50%;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>