<template>
  <view>
    <view class="container">
      <Search background="rgba(255, 255, 255, 0.8)" backIcon="black"></Search>
      <view>
        <img class="img1" src="/static/assets/bacImg.png" style="width: 750rpx; height: 440rpx" />
        <img class="img2" src="/static/assets/bottom.png" style="width: 750rpx; height: 32rpx" />
        <img class="img3" src="/static/assets/right.png" style="width: 288rpx; height: 124rpx" />
      </view>
      <view class="sort">
        <view style="display: flex; flex-direction: row">
          <view class="borderClass">
            <img src="/static/assets/buildingAgriculture.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">筑农严选</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/rural.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">认养农业</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">乡村旅居</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/adoption.png" style="width: 96rpx; height: 96rpx" />
            <view class="sort-text">特色农庄</view>
          </view>
        </view>
      </view>
      <view class="product-page" @tap="goPreSale()" v-for="(item, index) in list" :key="index">
        <view>
          <view class="page-title">{{ item.text }}</view>
          <img :src="item.img" class="main-img" />
          <view style="display: flex; flex-direction: row">
            <view class="detail-border" v-for="(item, index) in detailList" :key="index">
              <img src="/static/assets/detailedMapOne.png" style="width: 216rpx; height: 176rpx" />
              <view class="detail-title">{{ item.text }}</view>
              <view class="jiage-page">
                <text class="jiage">￥{{ item.price }}</text>
                /份
              </view>
              <view class="yushou">预售</view>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import Search from '../../components/index/Search.vue';

const list = ref([
  { img: '/static/assets/mainPicture.png', text: '特色美食' },
  { img: '/static/assets/presale.png', text: '农货预售' },
  { img: '/static/assets/mainPicture.png', text: '乡村非遗' },
  { img: '/static/assets/mainPicture.png', text: '认养农业' },
  { img: '/static/assets/mainPicture.png', text: '乡村旅居' },
  { img: '/static/assets/mainPicture.png', text: '特色农庄' },
]);
const detailList = ref([
  { img: '/static/assets/detailedMapOne.png', price: '25', text: '干辣椒炒肉' },
  { img: '/static/assets/detailedMapTwo.png', price: '25', text: '贵阳辣子鸡' },
  { img: '/static/assets/detailedMapThree.png', price: '25', text: '麻辣鱼豆腐' },
]);
const goPreSale = () => {
  xma.navigateTo({
    url: '/pages/index/preSale',
  });
};
</script>

<style lang="scss">
page {
  background-color: #f3f3f3;
}
.container {
  position: relative;
  left: 0rpx;
  top: 0rpx;
  width: 750rpx;
  height: 440rpx;
  opacity: 1;
}
.img1 {
  display: flex;
}
.img2 {
  display: flex;
  margin-top: -31rpx;
}
.img3 {
  display: flex;
  margin-top: -120rpx;
  margin-left: 462rpx;
}
.bottom-image {
  position: relative;
  top: -40rpx;
  width: 750rpx;
  height: 32rpx;
  opacity: 1;
}
.right-image {
  top: -192rpx;
  float: right;
  position: relative;
}
.sort {
  width: 750rpx;
  height: 186rpx;
  background: linear-gradient(180deg, #82ce8b -39%, #ffffff 36%);
}
.borderClass {
  width: 96rpx;
  height: 96rpx;
  margin-left: 75rpx;
  margin-top: 22rpx;
}
.sort-text {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 24rpx;
  text-align: center;
  letter-spacing: 0em;
  color: #3d3d3d;
}
.product-page {
  width: 710rpx;
  height: 742rpx;
  border-radius: 16rpx;
  margin-left: 20rpx;
  margin-top: 10rpx;
  background-color: #ffffff;
}
.page-title {
  width: 112rpx;
  height: 28rpx;
  font-family: Source Han Sans;
  font-size: 28rpx;
  font-weight: 500;
  line-height: 28rpx;
  text-align: center;
  letter-spacing: 0em;
  position: absolute;
  margin-top: 20rpx;
  margin-left: 20rpx;
  color: #3d3d3d;
}
.main-img {
  width: 670rpx;
  height: 362rpx;
  border-radius: 16rpx;
  margin-top: 68rpx;
  margin-left: 20rpx;
}
.detail-border {
  width: 216rpx;
  height: 262rpx;
  margin-left: 20rpx;
  margin-top: 20rpx;
  border-radius: 16px;
}
.detail-title {
  font-family: Source Han Sans;
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  letter-spacing: 0em;
  margin-left: 48rpx;
  margin-top: -20rpx;
  color: #3d3d3d;
  width: 190rpx;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.jiage-page {
  width: 96rpx;
  height: 28rpx;
  margin-top: 20rpx;
  font-size: 24rpx;
  font-weight: 500;
  color: #abaaaa;
}
.jiage {
  font-size: 24rpx;
  font-weight: 500;
  line-height: 28rpx;
  color: #fa5151;
}
.yushou {
  width: 48rpx;
  height: 24rpx;
  border-radius: 2px;
  font-size: 16rpx;
  line-height: 16rpx;
  background: #fcdbdb;
  text-align: center;
  line-height: 24rpx;
  margin-left: 120rpx;
  margin-top: -23rpx;
  color: #fa5151;
}
</style>
