合并

public/index.html

@@ -2,7 +2,7 @@
  * @Author: Wind
  * @Date: 2022-07-15 17:48:05
  * @LastEditors: Wind
- * @LastEditTime: 2022-07-20 09:56:39
+ * @LastEditTime: 2022-07-25 09:55:19
  * @Description: 
  * @FilePath: \frontend\public\index.html
 -->
@@ -21,7 +21,7 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
   <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-  <script src="http://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/goods_new_v3.js?v3"></script>
+  <script src="https://lsxdemall.oss-cn-beijing.aliyuncs.com/commonproductlogo/goods_new_v3.js?v3"></script>
   <!--
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.

src/components/keysFind/index.jsx

@@ -0,0 +1,78 @@
+/*
+ * @Author: Wind
+ * @Date: 2022-07-25 10:53:41
+ * @LastEditors: Wind
+ * @LastEditTime: 2022-07-25 13:49:44
+ * @Description:
+ * @FilePath: \frontend\src\components\keysFind\index.jsx
+ */
+import './index.less'
+import {
+  Form,
+  FormDateRangePickerField,
+  FormStrategy,
+  FormSelectField,
+  FormInputField,
+  Button
+} from 'zent'
+export default ({ onQuery }) => {
+  const form = Form.useForm(FormStrategy.View)
+
+  return (
+    <>
+      <Form className='keysFind' ayout='horizontal' form={form}>
+        <FormDateRangePickerField
+          name='date'
+          dateFormat='YYYY-MM-DD'
+          label='请选择日期：'
+          defaultValue={[]}
+          className='zent-datepicker-plan'
+        />
+        <FormSelectField
+          name='distributor'
+          label='分销商：'
+          props={{
+            options: [
+              { key: 1, text: '普通用户' },
+              { key: 2, text: '高级用户' }
+            ]
+          }}
+        />
+        <FormSelectField
+          name='plan'
+          label='计划名称：'
+          props={{
+            options: [
+              { key: 1, text: '普通用户' },
+              { key: 2, text: '高级用户' }
+            ]
+          }}
+        />
+        <FormSelectField
+          name='state'
+          label='状态：'
+          props={{
+            options: [
+              { key: 1, text: '普通用户' },
+              { key: 2, text: '高级用户' }
+            ]
+          }}
+        />
+        <FormInputField
+          name='key'
+          label='KEY：'
+          showClear
+          props={{
+            spellCheck: false
+          }}
+        />
+        <div>
+          <Button type='primary' onClick={() => onQuery(form.getValue())}>
+            查询
+          </Button>
+          <Button onClick={() => form.reset()}>重置</Button>
+        </div>
+      </Form>
+    </>
+  )
+}

src/components/keysFind/index.less

@@ -0,0 +1,50 @@
+.keysFind {
+    width: 100%;
+    // display: grid;
+    // grid-template-columns: repeat(auto-fill, 500px);
+    display: flex;
+    flex-wrap: wrap;
+
+    .zent-form-control {
+        margin-right: 20px;
+        flex-direction: row !important;
+    }
+
+    .zent-datepicker .zent-datepicker-trigger {
+        background-color: transparent !important;
+        width: 150px !important;
+        border-radius: 0 !important;
+
+        &:hover {
+            border-color: #296BEF !important;
+            background-color: #F7F9FC !important;
+        }
+    }
+
+    .zent-input-wrapper {
+        border-top: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+    }
+
+    .zent-input-wrapper:hover {
+        border-color: #296BEF !important;
+
+        .zent-input {
+            background-color: #F7F9FC;
+        }
+    }
+
+    .zent-select-v2 {
+        border-top: 0 !important;
+        border-left: 0 !important;
+        border-right: 0 !important;
+        border-radius: 0 !important;
+
+        &:hover,
+        .zent-select-v2-search:hover {
+            background-color: #F7F9FC;
+        }
+    }
+
+}