<template>
  <view class="box">
    <!-- 水票 -->
    <view @click="purchase" class="water">
      <view class="water-left">
        <view class="water-left-left">
          <image class="image" src="../../static/logo.png"></image>
        </view>
        <view class="water-left-right">
          <view class="water-left-right-up">测试</view>
          <view class="water-left-right-centre">
            <text style="color: #8e8aac; font-size: 0.9rem">活动</text>
            <text style="color: #ff6600; margin-left: 0.5rem; font-size: 0.9rem">测试</text>
          </view>
          <view class="water-left-right-button">
            <text>￥</text>
            <text style="font-size: 1.5rem">4.00</text>
            <text style="color: #8e8aac">/</text>
            <text style="color: #8e8aac">桶</text>
          </view>
        </view>
      </view>
      <view class="water-right">
        <view class="water-right-buttom">购买</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
const purchase = () => {
  uni.navigateTo({
    url: '/pages/water-coupon/components/particulars'
  });
};
</script>

<style lang="less" scoped>
.water {
  width: 83%;
  margin: 0 auto;
  background-color: #fff;
  padding: 1rem;
  border-radius: 0.5rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  .water-left {
    display: flex;
    align-items: flex-start;
    .water-left-left {
      .image {
        width: 6.5rem;
        height: 6.5rem;
      }
    }
    .water-left-right {
      margin-left: 0.8rem;
      .water-left-right-up {
        margin-bottom: 0.8rem;
        font-size: 1.1rem;
        font-weight: 700;
      }
      .water-left-right-centre {
        margin-bottom: 0.9rem;
      }
      .water-left-right-button {
        color: #ff6600;
      }
    }
  }
  .water-right {
    .water-right-buttom {
      padding: 0rem 1rem;
      color: #fff;
      background-color: #00ba26;
      height: 2.2rem;
      line-height: 2.2rem;
      border-radius: 1rem;
    }
  }
}
</style>
