first

components/JSearchTitle/JSearchTitle.vue

@@ -0,0 +1,53 @@
+<template>
+  <view class="search-wrapper" :style="{ paddingTop: pTop + 'rpx', backgroundColor: bgColor }">
+    <view class="search-main" @tap="emits('click')">
+      <image src="/static/iconImg/icon-search.svg" mode="scaleToFill" />
+      <input type="text" :placeholder="place" placeholder-style="color: rgba(0,0,0,0.35);" :style="{ fontSize: size + 'rpx' }" disabled />
+    </view>
+    <slot name="right" />
+  </view>
+</template>
+
+<script setup>
+const props = defineProps({
+  place: { type: String }, //提示语
+  pTop: { type: Number }, //距离上边距离 使用padding 为了有背景色
+  bgColor: { type: String }, //背景色
+  size: { type: Number, default: 27 }, //搜素框文字大小
+})
+const emits = defineEmits(['click'])
+
+
+
+</script>
+<style lang="scss" scoped>
+.search-wrapper {
+  display: flex;
+  align-items: center;
+  height: 110rpx;
+  background-color: $J-bg-ff;
+  padding: 0 30rpx;
+  .search-main {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 70rpx;
+    background-color: $J-bg-f5;
+    border-radius: $J-b-r12;
+    image {
+      padding: 0 22rpx;
+      width: 26rpx;
+      height: 26rpx;
+    }
+    input {
+      flex: 1;
+    }
+    .search-text {
+      padding: 0 30rpx;
+      font-size: 32rpx;
+      font-weight: 500;
+      color: $J-color-t29;
+    }
+  }
+}
+</style>