<template>
  <view class="search-page">
    <view class="search" :style="{ background: '#FF0101' }">
      <wd-icon
        name="thin-arrow-left"
        class="icon"
        @tap="back"
        :style="{ color: '#FFFAE8' }"
      ></wd-icon>
      <slot></slot>
      <view class="searchBox">
        <wd-icon name="search" size="22rpx"></wd-icon>
        <input
          type="text"
          :value="test"
          class="text"
          @confirm="toSearch"
          placeholder="请输入搜索内容"
          confirm-type="搜索"
        />
      </view>
    </view>
    <wd-tabs v-model="tab">
      <block>
        <wd-tab title="商品">
          <view class="content">内容1</view>
        </wd-tab>
        <wd-tab title="店铺">
          <view class="content">内容2</view>
        </wd-tab>
      </block>
    </wd-tabs>
  </view>
</template>

<script setup>
function toSearch(keyword) {}
const tab = ref(0);
</script>

<style lang="scss" scoped>
page {
  background: #f6f6f6;
}
.search-page {
  display: flex;
  width: 750rpx;
  flex-direction: column;
  align-items: center;

  .wd-tabs {
    background-color: #fff;
  }

  &:deep(.wd-tabs__nav) {
    background-color: #fff;
  }

  &:deep(.wd-tabs__line) {
    background-color: #e9231b;
    bottom: 2px;
  }
  .search {
    width: 100%;
    height: 124rpx;
    opacity: 0.8;
    margin: 0 auto;
    display: flex;
    align-items: center;
    padding-left: 20rpx;
    box-sizing: border-box;
    .arrow {
      width: 15rpx;
      height: 24rpx;
    }
    .icon {
      font-size: 28rpx;
    }
    .searchBox {
      opacity: 1;
      width: 350rpx;
      height: 56rpx;
      background: #ffffff;
      border-radius: 28rpx 28rpx 28rpx 28rpx;
      display: flex;
      align-items: center;
      padding-left: 20rpx;
      margin-left: 20rpx;
      .magnifyingGlass {
        width: 26rpx;
        height: 26rpx;
      }
      .text {
        margin-left: 10rpx;
        font-size: 24rpx;
      }
    }
  }
  .content {
    display: flex;
    flex-direction: column;
    align-content: center;
    gap: 20rpx;
  }
}
</style>
