<template>
  <view class="top-section">
    <view class="top-section-news">
      <view class="top-section-img">
        <image
          class="image"
          mode="aspectFit"
          src="@/assets/images/page/icon_smart@2x.png"
        ></image>
      </view>
      <view class="news-title">
        <view class="num">1</view>
        <view class="text"
          >小米将于6月26日发布新款YU7车型上市小米将于6月26日发布新款YU7车型上市</view
        >
      </view>
    </view>
  </view>
</template>

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

<style scoped lang="scss">
.top-section {
  height: 104rpx;
  margin: 0 20rpx 20rpx;
  background: linear-gradient(90deg, #fce8ea 0%, #ffffff 27.03%, #ffffff 100%);
  box-shadow: inset 0px 1rpx 0px 0px #ffffff;
  border-radius: 20rpx;

  .top-section-news {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 12rpx 20rpx;

    .top-section-img {
      width: 83rpx;
      height: 75rpx;
      padding-right: 10rpx;
      border-right: 1px solid #e7e9eb;

      .image {
        width: 100%;
        height: 100%;
      }
    }

    .news-title {
      display: flex;
      align-items: center;
      padding-left: 22rpx;

      .num {
        width: 32rpx;
        height: 32rpx;
        line-height: 32rpx;
        margin-right: 13rpx;
        text-align: center;
        background: linear-gradient(168deg, #ffb505 0%, #fdcf1b 100%);
        border-radius: 5px;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 500;
        font-size: 30rpx;
        color: #ffffff;
      }
      .text {
        width: 488rpx;
        font-family: "PingFangSC, PingFang SC";
        font-weight: 500;
        font-size: 26rpx;
        color: #111111;
        text-overflow: ellipsis;
        white-space: nowrap;
        overflow: hidden;
      }
    }
  }
}
</style>
