diff --git a/examples/main.js b/examples/main.js
index 4b7068b..f320530 100644
--- a/examples/main.js
+++ b/examples/main.js
@@ -5,6 +5,8 @@ import App from '../src/App.vue'
 //基于element组件封装，引入element组件库
 import { Input, Select, Option, OptionGroup, DatePicker, Tabs, TabPane, Pagination, Dialog, Button } from 'element-ui';
 import 'element-ui/lib/theme-chalk/index.css';
+import '../src/styles/element-variables.scss'//element 组件样式文件
+
 Vue.use(Input);
 Vue.use(Select);
 Vue.use(OptionGroup);
diff --git a/packages/agDatePicker/src/index.vue b/packages/agDatePicker/src/index.vue
index 95e8ffc..813bcb3 100644
--- a/packages/agDatePicker/src/index.vue
+++ b/packages/agDatePicker/src/index.vue
@@ -128,6 +128,8 @@ export default {
         if (!Array.isArray(newVal)) {
           throw new Error("agDatePicker date请传入数组");
         }
+        console.log(newVal,'newVal');
+
         newVal.length > 0 &&
         newVal.some(
           (item) => item !== null && item !== undefined && item !== ""
@@ -165,6 +167,9 @@ export default {
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
   }
+  .el-range-editor.is-active:hover{
+    border: #8a1818;
+  }
   .el-input__icon.el-range__close-icon {
     position: absolute;
     font-size: 12px;
diff --git a/src/App.vue b/src/App.vue
index 7cb98e5..0caa80f 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,20 +1,27 @@
 <template>
   <div>
-    <!-- <el-button type="text" @click="abb = true">点击打开 Dialog</el-button> -->
-    <agTabs ref="ref_Pedestal" v-model="value" size="mini" :options="options">
-      <!-- <span slot="footer">房价大降分类数据</span> -->
-    </agTabs>
-    <!-- <div class="div"><span>888</span></div> -->
+    <el-button type="success" @click="abb = true">点击打开 Dialog</el-button>
+    <ag-dialog :visible.sync="abb"> </ag-dialog>
+    <ag-datePicker :value="values"> </ag-datePicker>
+    <ag-input :visible.sync="abb"> </ag-input>
+    <ag-select :visible.sync="abb" :options="a_options" v-model="value">
+    </ag-select>
+
+    <div class="div"><span>888</span></div>
   </div>
 </template>
 
 <script>
-import agTabs from "../packages/agDatePicker/src/index.vue";
+import agDialog from "../packages/agDialog/src/index.vue";
+import agDatePicker from "../packages/agDatePicker/src/index.vue";
+import agInput from "../packages/agInput/src/index.vue";
+import agSelect from "../packages/agSelect/src/index.vue";
 export default {
-  components: { agTabs },
+  components: { agDialog, agDatePicker, agInput, agSelect },
   data() {
     return {
-      value: [],
+      value: "",
+      values: [],
       options: [
         {
           label: "热门城市",
@@ -122,7 +129,7 @@ export default {
       ],
       abb: false,
       innerVisible: false,
-      options: [
+      a_options: [
         {
           value: "选项1",
           label: "黄金糕",
@@ -167,5 +174,4 @@ body {
     width: 50px;
   }
 }
-
 </style>
diff --git a/src/styles/element-variables.scss b/src/styles/element-variables.scss
new file mode 100644
index 0000000..5bdc4da
--- /dev/null
+++ b/src/styles/element-variables.scss
@@ -0,0 +1,31 @@
+/**
+* I think element-ui's default theme color is too light for long-term use.
+* So I modified the default color and you can modify it to your liking.
+**/
+
+/* theme color */
+$--color-primary: #1890ff;
+$--color-success: #13ce66;
+$--color-warning: #ffba00;
+$--color-danger: #ff4949;
+// $--color-info: #1E1E1E;
+
+$--button-font-weight: 400;
+
+// $--color-text-regular: #1f2d3d;
+
+$--border-color-light: #dfe4ed;
+$--border-color-lighter: #e6ebf5;
+
+$--table-border: 1px solid #dfe6ec;
+
+/* icon font path, required */
+$--font-path: "~element-ui/lib/theme-chalk/fonts";
+
+@import "~element-ui/packages/theme-chalk/src/index";
+
+// the :export directive is the magic sauce for webpack
+// https://www.bluematador.com/blog/how-to-share-variables-between-js-and-sass
+:export {
+  theme: $--color-primary;
+}