cankao-h5/src/pages/realtimeInfo/components/BannerNewsView/index.vue

<template>
  <view class="news-section">
    <swiper
      class="news-section-swiper"
      circular
      :indicator-dots="true"
      :autoplay="true"
      :interval="3000"
      :duration="500"
      indicator-color="rgba(199, 199, 199, 1)"
      indicator-active-color="#3F80FA"
    >
      <swiper-item>
        <view class="swiper-item">
          <view class="source">
            <view>
              <text class="label">来自</text>
              <text class="name">中证报</text>
            </view>
            <view>
              <text>00:12:34</text>
            </view>
          </view>
          <view class="title">三星生物风险投资基金将投资拓济医药</view>
          <view class="content"
            >三星集团宣布，其生物风险基金将投资中国生物技术公司phronline三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
            Biopharma，以扩大其抗体药物偶联物（ADC）合作伙伴关系</view
          >
          <view class="tag">
            <text class="txt">#三星生物制药</text>
            <text class="txt">#三星生物制药</text>
          </view>
          <view class="industry">
            <text class="txt">**能源</text>
          </view>
        </view>
      </swiper-item>
      <swiper-item>
        <view class="swiper-item">
          <view class="source">
            <view>
              <text class="label">来自</text>
              <text class="name">中证报</text>
            </view>
            <view>
              <text>00:12:34</text>
            </view>
          </view>
          <view class="title">三星生物风险投资基金将投资拓济医药</view>
          <view class="content"
            >三星集团宣布，其生物风险基金将投资中国生物技术公司phronline三星集团宣布，其生物风险基金将投资中国生物技术公司phronline
            Biopharma，以扩大其抗体药物偶联物（ADC）合作伙伴关系</view
          >
          <view class="tag">
            <text class="txt">#三星生物制药</text>
            <text class="txt">#三星生物制药</text>
          </view>
          <view class="industry">
            <text class="txt">**能源</text>
            <text class="txt">**能源</text>
            <text class="txt">**能源</text>
          </view>
        </view>
      </swiper-item>
    </swiper>
  </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
</script>

<style scoped lang="scss">
.news-section {
  width: 710rpx;
  height: 522rpx;
  margin: 0 20rpx 20rpx;
  padding: 87rpx 54rpx 0 24rpx;
  background-image: url("@/assets/images/page/banner-2@2x.png");
  background-repeat: no-repeat;
  background-size: 100% auto;
  box-sizing: border-box;

  .news-section-swiper {
    width: 100%;
    height: 435rpx;

    :deep(.uni-swiper-dot) {
      width: 11rpx;
      height: 6rpx;
      background: #c7c7c7;
      border-radius: 8px;
      margin-right: 8rpx;
      transition: width 0.3s;
    }

    :deep(.uni-swiper-dot-active) {
      width: 40rpx;
    }

    .swiper-item {
      padding: 30rpx;
    }

    .source {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 20rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 24rpx;
      line-height: 33rpx;

      .label {
        margin-right: 2rpx;
        color: #999999;
      }
      .name {
        color: #333333;
      }
      .time {
        color: #666664;
      }
    }
    .title {
      margin-bottom: 10rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 500;
      font-size: 30rpx;
      color: #222222;
      line-height: 42rpx;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
    }
    .content {
      margin-bottom: 14rpx;
      font-family: "PingFangSC, PingFang SC";
      font-weight: 400;
      font-size: 24rpx;
      color: #666664;
      line-height: 33rpx;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden;
      text-overflow: ellipsis;
      word-break: break-all;
    }
    .tag {
      display: flex;
      margin-bottom: 22rpx;
      .txt {
        margin-right: 16rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 400;
        font-size: 24rpx;
        color: #d6a68c;
        line-height: 33rpx;
      }
    }
    .industry {
      display: flex;
      .txt {
        padding: 8rpx 12rpx;
        background: #ffffff;
        border-radius: 4px;
        margin-right: 16rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 400;
        font-size: 24rpx;
        color: #5c5c5b;
        line-height: 33rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>