搜索页面

src/pages.json

@@ -13,6 +13,13 @@
 				"navigationStyle":"custom",
 			}
 		},
+		{
+			"path": "pages/searchPage/searchPage",
+			"style": {
+				"navigationBarTitleText": "搜索",
+				"navigationStyle":"custom"
+			}
+		},
 		{
 			"path": "pages/index/index",
 			"style": {

src/pages/searchPage/searchPage.vue

+<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 {
+    line-height: 120px;
+    text-align: center;
+  }
+}
+</style>