初次提交

components/Search/index.vue

@@ -0,0 +1,87 @@
+<template>
+  <view class="search">
+    <u-icon name="search" color="#009C77!important" size="40"></u-icon>
+
+    <u-input
+      v-model="dec"
+      style="width: 100%"
+      type="text"
+      :placeholder="placeholder"
+      :clearable="false"
+      @blur="blur"
+    />
+    <view class="shaixuan" @click="open" id="search">
+      <text style="white-space: nowrap">{{$t('homePage.alarm.sift')}}</text>
+      <u-icon name="arrow-right" color="#009C77!important" size="30"></u-icon>
+    </view>
+  </view>
+</template>
+
+<script>
+export default {
+  props: {
+    placeholder: {
+      type: String,
+      default: "请输入告警内容筛选",
+    },
+  },
+  data() {
+    return {
+      dec: "",
+      value1: 1,
+      value2: 2,
+      show_: false,
+    };
+  },
+  methods: {
+    open() {
+      this.show_ = true;
+      this.$emit("custom");
+    },
+    blur() {
+      this.$emit("blur", this.dec);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.search {
+  background-color: #ffffff;
+  width: 100%;
+  height: 80rpx;
+  border-radius: 10rpx;
+  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.1);
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-left: 20rpx;
+  padding-right: 20rpx;
+  position: relative;
+
+  .shaixuan {
+    white-space: nowrap;
+
+    display: flex;
+    // float: right;
+    // display: flex;
+    // flex:1;
+    // justify-content:flex-end;
+    align-items: center;
+    color: #009c77;
+  }
+
+  .proper {
+    position: absolute;
+    left: 0;
+    right: 0;
+    top: 80rpx;
+    height: 500rpx;
+    background-color: red;
+  }
+}
+
+::v-deep .u-dropdown__content {
+  position: fixed;
+}
+</style>