<script setup>
const ASSETS = Object.freeze({
  water: '/static/first/water.png',
});
</script>

<template>
  <view class="container">
    <view class="content">
      <view class="top">
        <image :src="ASSETS.water" style="width: 48rpx; height: 48rpx;" />
        <view class="title">小知识点:</view>
      </view>
      <view class="text">“我国80%的城市水源面临污染挑战，安吉尔RO膜能够过滤99%的污染物，守护千万家饮水与用水的安全。”</view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.container {
  width: 100%;
  height: 100%;
  position: relative;

  .content {
    position: absolute;
    top: 500rpx;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 456rpx;
    height: 260rpx;
    border-radius: 24rpx;
    border: 3rpx solid #FFF;
    background: #F0F9FC;
    box-shadow: 0 8rpx 8rpx 0 #0b768266, 0 0 39.6rpx 0 #C8EEFF inset;

    .top {
      display: flex;
      align-items: center;
      padding: 20rpx 20rpx 12rpx;

      .title {
        font-size: 34rpx;
        color: #2d4b5d;
        font-weight: 600;
        margin-left: 12rpx;
      }
    }

    .text {
      padding: 0 20rpx;
      color: #2d4b5d;
      font-size: 28rpx;
      font-weight: 400;
    }
  }
}
</style>
