<template>
  <view class="box">
    <!-- 图片 -->
    <view class="image">
      <image src="../../../static/logo.png"></image>
    </view>
    <!-- 我的 -->
    <view class="my">
      <view class="my-h">我的</view>
      <view class="my-box">
        <view class="my-box-textone">
          <text style="color: #ff9932">￥1.00</text>
          /个
        </view>
        <view class="my-box-texttow">已售0</view>
      </view>
    </view>
    <!-- 选择规格 -->
    <view class="specification">
      <view class="specification-h">
        <view class="specification-h-text">选择规格</view>
        <view class="specification-h-box">水票组合套餐</view>
      </view>
      <view class="specification-button">1(￥1.00)</view>
    </view>
    <!-- 加入购物车 -->
    <view class="navigation">
      <view class="navigation-box">
        <view class=""><uni-icons type="contact" size="35"></uni-icons></view>
        <view class="">首页</view>
      </view>
      <view class="navigation-box">
        <view class=""><uni-icons type="contact" size="35"></uni-icons></view>
        <view class="">分享</view>
      </view>
      <view class="navigation-buttom">
        <text class="navigation-buttom-texttow">立即购买</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';
</script>

<style lang="scss" scoped>
.image {
  width: 92%;
  margin: 0 auto;
  image {
    width: 100%;
    height: 30rem;
  }
}
.my {
  width: 92%;
  margin: 0.8rem auto;
  background-color: #fff;
  border-radius: 1rem;
  display: flow-root;
  .my-h {
    font-size: 1.1rem;
    font-weight: 700;
    margin-top: 0.8rem;
    margin-left: 0.8rem;
    margin-bottom: 1rem;
  }
  .my-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-left: 0.8rem;
    margin-bottom: 1rem;
    .my-box-textone {
      font-size: 1rem;
    }
    .my-box-texttow {
      margin-right: 0.8rem;
      font-size: 0.9rem;
      color: #989fbc;
    }
  }
}
.specification {
  width: 92%;
  margin: 0 auto 0.8rem;
  background-color: #fff;
  display: flow-root;
  border-radius: 1rem;
  margin-bottom: 5rem;
  .specification-h {
    display: flex;
    align-items: center;
    .specification-h-text {
      font-size: 1.1rem;
      font-weight: 700;
      margin-top: 0.8rem;
      margin-left: 0.8rem;
      margin-bottom: 1rem;
    }
    .specification-h-box {
      font-weight: 700;
      background-color: #fff0eb;
      color: #ff9d60;
      margin-left: 0.4rem;
      padding: 0.1rem 0.3rem;
    }
  }
  .specification-button {
    width: 90%;
    font-weight: 700;
    border: 1px solid #e4e6eb;
    padding-top: 0.8rem;
    padding-bottom: 0.8rem;
    text-align: center;
    margin: 1rem auto;
  }
}

.navigation {
  position: fixed;
  bottom: 0;
  z-index: 10;
  height: 4rem;
  background-color: #fff;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
  .navigation-box {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .navigation-buttom {
    background-color: #fff;
    border-radius: 1.5rem;
    .navigation-buttom-texttow {
      font-weight: 700;
      color: #fff;
      background-color: #00ba26;
      border: 1px solid #00ba26;
      padding: 0.5rem 2rem;
      border-radius: 1.5rem;
    }
  }
}
</style>
