需要修复商城顶部筛选左右滑动问题

2025-12-24 17:53:13 +08:00
parent 6f418fae8a
commit b67f9611c7
48 changed files with 1067 additions and 221 deletions
--- a/components/cb-search/cb-search.vue
+++ b/components/cb-search/cb-search.vue
@@ -0,0 +1,67 @@
+<script setup>
+  const props = defineProps()
+
+  const placeholderStyle = `font-family: PingFang SC, PingFang SC; font-weight: 500; color: #666666; font-size: 24rpx; font-style: normal; text-transform: none;`
+
+  const name = defineModel({
+    type: String,
+    default: ''
+  })
+</script>
+
+<template>
+  <view class="cb-search">
+    <image
+      src="/static/images/public/search.png"
+      mode="heightFix"
+      class="left-icon"
+    ></image>
+    <input
+      v-model="name"
+      :placeholder-style="placeholderStyle"
+      placeholder="请输入内容"
+      class="search-box"
+    />
+    <button class="search-btn">搜索</button>
+  </view>
+</template>
+
+<style lang="scss" scoped>
+  .cb-search {
+    height: 64rpx;
+    display: flex;
+    align-items: center;
+    background: #f9f9f9;
+    border-radius: 64rpx;
+    padding: 0 0 0 32rpx;
+    .left-icon {
+      height: 48rpx;
+      flex-shrink: 0;
+      margin-right: 8rpx;
+    }
+    .search-box {
+      width: 100%;
+      font-size: 24rpx;
+      color: #333333;
+    }
+    .search-btn {
+      margin: 0 8rpx;
+      flex-shrink: 0;
+      width: 120rpx;
+      height: 56rpx;
+      line-height: 56rpx;
+      background: linear-gradient(180deg, #00d993 0%, #00d9c5 100%);
+      border-radius: 64rpx;
+      font-family: PingFang SC, PingFang SC;
+      font-weight: 500;
+      font-size: 28rpx;
+      color: #ffffff;
+      text-align: center;
+      font-style: normal;
+      text-transform: none;
+      &::after {
+        border: none;
+      }
+    }
+  }
+</style>