'首页和商品详情页初稿'

2026-08-21 19:02:35 +08:00
parent 75135effde
commit d53bde57b6
29 changed files with 3694 additions and 3085 deletions
@@ -0,0 +1,85 @@
+<template>
+  <!-- 搜索栏 -->
+  <view class="search-bar">
+    <view class="search-input-wrap">
+      <text class="search-icon">🔍</text>
+      <input
+        class="search-input"
+        placeholder="搜索商品"
+        placeholder-class="search-placeholder"
+        :value="keyword"
+        @input="onInput"
+      />
+    </view>
+    <view class="filter-btn" @tap="onFilter">
+      <text class="filter-icon">⚙</text>
+      <text class="filter-text">筛选</text>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  name: 'SearchBar',
+  props: {
+    keyword: {
+      type: String,
+      default: ''
+    }
+  },
+  methods: {
+    onInput(e) {
+      this.$emit('input', e.detail.value)
+    },
+    onFilter() {
+      this.$emit('filter')
+    }
+  }
+}
+</script>
+
+<style scoped>
+.search-bar {
+  display: flex;
+  align-items: center;
+  gap: 20rpx;
+  padding: 20rpx 32rpx;
+  background: #ffffff;
+  border-bottom: 2rpx solid #f5f5f5;
+}
+.search-input-wrap {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  height: 72rpx;
+  padding: 0 24rpx;
+  background: #f5f5f5;
+  border-radius: 36rpx;
+}
+.search-icon {
+  font-size: 28rpx;
+  margin-right: 12rpx;
+}
+.search-input {
+  flex: 1;
+  font-size: 26rpx;
+  color: #333333;
+}
+.search-placeholder {
+  color: #999999;
+}
+.filter-btn {
+  display: flex;
+  align-items: center;
+  gap: 8rpx;
+  padding: 12rpx 20rpx;
+  font-size: 26rpx;
+  color: #666666;
+}
+.filter-icon {
+  font-size: 28rpx;
+}
+.filter-text {
+  font-size: 26rpx;
+}
+</style>