<template>
  <view class="container">
    <text class="intro-text">RGBA 在 RGB 的基础上增加了透明度(Alpha)通道，取值范围为 0-1，0 表示完全透明，1 表示完全不透明。</text>

    <view class="section">
      <text class="section-title">数值表示 (RGB: 0-255, A: 0-1)</text>
      <view class="color-grid">
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(255, 0, 0, 0.1);"></view>
          <text class="color-name">红色 10% 透明</text>
          <text class="color-value">rgba(255, 0, 0, 0.1)</text>
        </view>
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(255, 0, 0, 0.5);"></view>
          <text class="color-name">红色 50% 透明</text>
          <text class="color-value">rgba(255, 0, 0, 0.5)</text>
        </view>
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(255, 0, 0, 1);"></view>
          <text class="color-name">红色 不透明</text>
          <text class="color-value">rgba(255, 0, 0, 1)</text>
        </view>
      </view>
    </view>

    <view class="section">
      <view class="color-grid">
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(0, 0, 255, 0.1);"></view>
          <text class="color-name">蓝色 10% 透明</text>
          <text class="color-value">rgba(0, 0, 255, 0.1)</text>
        </view>
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(0, 0, 255, 0.5);"></view>
          <text class="color-name">蓝色 50% 透明</text>
          <text class="color-value">rgba(0, 0, 255, 0.5)</text>
        </view>
        <view class="color-item">
          <view class="color-box" style="background-color: rgba(0, 0, 255, 1);"></view>
          <text class="color-name">蓝色 不透明</text>
          <text class="color-value">rgba(0, 0, 255, 1)</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style>
.container {
  padding: 20px;
}

.intro-text {
  font-size: 14px;
  color: #333;
  margin-bottom: 30px;
  line-height: 1.4;
}

.section {
  margin-bottom: 30px;
}

.section-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 15px;
}

.color-grid {
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}

.color-item {
  width: 30%;
  margin-bottom: 20px;
}

.color-box {
  width: 100%;
  height: 100px;
  border-radius: 8px;
  margin-bottom: 8px;
}

.color-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.color-value {
  font-size: 12px;
  color: #666;
}
</style>