<template>
  <div class="wrap">
    <TgInfo />
    <h3>如何寻找趋势龙头股？</h3>
    <p class="info">
      上周五量价齐升，盘后降准。利好已经被消化了一部分！沪指看，4200亿+的量能也是近半个月的最大成交量，K线吊颈。
    </p>
    <div class="look">
      <img src="@/assets/images/look.png" alt="" srcset="" />
      <div>
        <h4>本条为收费内容</h4>
        <p>请订阅产品服务《短线掘金》后查看</p>
      </div>
    </div>
    <div class="share">
      <img src="@/assets/images/share-icon.png" alt="" srcset="" />
      <span>12</span>
    </div>
  </div>
</template>

<script setup>
import TgInfo from "./TgInfo.vue";
</script>
<style scoped lang="scss">
.wrap {
  border-bottom: 0.5px solid var(---, #ebeced);
  padding: 32px 0 28px 0;
  text-align: left;
}
h3 {
  color: #333333;
  font-size: 32px;
  font-style: normal;
  font-weight: 500;
  line-height: 48px;
  margin: 20px 0 10px 0;
}
.info {
  color: #666666;
  font-size: 28px;
  font-style: normal;
  font-weight: 400;
  line-height: 44px;
  margin-bottom: 24px;
}
.look {
  display: flex;
  padding: 24px;
  align-items: center;
  border-radius: 16px;
  background: linear-gradient(269deg, #fbe7e8 6.39%, #fdf4f3 89.65%),
    linear-gradient(180deg, #ffffff00 -63.22%, #fbf7f0 29.77%);
  margin-bottom: 28px;
  img {
    display: block;
    width: 96px;
    height: 96px;
    margin-right: 24px;
  }
  h4 {
    color: #903626;
    font-size: 28px;
    font-style: normal;
    font-weight: 500;
    line-height: 44px;
  }
  p {
    color: #90362699;
    font-size: 22px;
    font-style: normal;
    font-weight: 400;
    line-height: 32px;
  }
}
.share {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  color: #666666;
  font-size: 24px;
  font-weight: 400;
  img {
    width: 24px;
    height: 24px;
  }
}
</style>
