<template>
  <view style="background-color: #f3f3f3; height: 100vh">
    <view class="container">
      <view class="top">
        <view class="left-icon"></view>
        <view class="bottom-image">
          <view class="right-image"></view>
        </view>
      </view>
      <view class="sort">
        <view style="display: flex; flex-direction: row">
          <view class="borderClass">
            <img src="/static/assets/buildingAgriculture.png" style="width: 48px; height: 48px" />
            <view class="sort-text">筑农严选</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/rural.png" style="width: 48px; height: 48px" />
            <view class="sort-text">认养农业</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
            <view class="sort-text">乡村旅居</view>
          </view>
          <view class="borderClass">
            <img src="/static/assets/adoption.png" style="width: 48px; height: 48px" />
            <view class="sort-text">特色农庄</view>
          </view>
        </view>
      </view>
      <view class="product-page">
        <view>
          <view class="page-title">特色美食</view>
          <img src="/static/assets/mainPicture.png" class="main-img" />
        </view>
        <view style="display: flex; flex-direction: row">
          <view class="detail-border">
            <img src="/static/assets/detailedMapOne.png" style="width: 108px; height: 88px" />
            <view class="detail-title">干辣椒炒肉</view>
          </view>
          <view class="detail-border">
            <img src="/static/assets/detailedMapTwo.png" style="width: 108px; height: 88px" />
            <view class="detail-title">贵阳辣子鸡</view>
          </view>
          <view class="detail-border">
            <img src="/static/assets/detailedMapThree.png" style="width: 108px; height: 88px" />
            <view class="detail-title">麻辣鱼豆腐</view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts"></script>

<style lang="scss">
.container {
  position: relative;
  left: 0px;
  top: 0px;
  width: 375px;
  height: 220px;
  opacity: 1;
  background-image: url('@/static/assets/矩形 196@1x.png');
}
.bottom-image {
  position: relative;
  left: 0px;
  top: 204px;
  width: 375px;
  height: 16px;
  opacity: 1;
  background: url('@/static/assets/矩形 198@1x.png');
}
.right-image {
  float: right;
  position: relative;
  left: 231px;
  top: -45px;
  width: 144px;
  height: 62px;
  opacity: 1;
  background: url('@/static/assets/图层 1@1x.png');
}
.sort {
  position: relative;
  left: 0px;
  top: 200px;
  width: 375px;
  height: 93px;
  opacity: 1;
  background: url('@/static/assets/矩形 197@1x.png');
}
.borderClass {
  width: 100px;
  height: 100px;
  background-color: transparent;
  margin: 20px;
}
.sort-text {
  font-family: Source Han Sans;
  font-size: 12px;
  font-weight: 500;
  line-height: 12px;
  text-align: center;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.product-page {
  position: relative;
  width: 355px;
  height: 371px;
  border-radius: 8px;
  opacity: 1;
  background: #ffffff;
  top: 210px;
  left: 10px;
}
.page-title {
  position: relative;
  left: 10px;
  top: 10px;
  width: 56px;
  height: 14px;
  opacity: 1;

  font-family: Source Han Sans;
  font-size: 14px;
  font-weight: 500;
  line-height: 14px;
  text-align: center;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
.main-img {
  width: 335px;
  height: 181px;
  border-radius: 8px;
  opacity: 1;
  margin-top: 20px;
}
.detail-title {
  font-family: Source Han Sans;
  font-size: 12px;
  font-weight: 500;
  line-height: 14px;
  letter-spacing: 0em;

  font-variation-settings: 'opsz' auto;
  font-feature-settings: 'kern' on;
  color: #3d3d3d;
}
</style>
