diff --git a/src/components/widgets/tips.vue b/src/components/widgets/tips.vue
new file mode 100644
index 0000000..9591ef1
--- /dev/null
+++ b/src/components/widgets/tips.vue
@@ -0,0 +1,68 @@
+<template>
+    <view class="tips">
+        <text
+            class="iconfont icon-tixing"
+            :class="[icon]"
+            :style="{ color: iconColor }"
+        ></text>
+        <text
+            class="text-container limit-line clamp-1"
+            :style="{ color: textColor }"
+        >
+            {{ text }}
+        </text>
+    </view>
+</template>
+
+<script>
+export default {
+    name: "widgets-tips",
+    data() {
+        return {};
+    },
+    props: {
+        icon: {
+            type: String,
+            default: "icon-tixing",
+        },
+        iconColor: {
+            type: String,
+            default: "#ffa800",
+        },
+        text: {
+            type: String,
+            default: "",
+        },
+        textColor: {
+            type: String,
+            default: "#a0a0a0",
+        },
+    },
+    components: {},
+    created() {},
+    mounted() {},
+    destroyed() {},
+    methods: {},
+};
+</script>
+
+<style lang="less" scoped>
+.tips {
+    width: 710rpx;
+    height: 75rpx;
+    margin: 0 auto;
+    display: flex;
+    align-items: center;
+    background-color: #ffffff;
+    box-sizing: border-box;
+    padding: 0 10rpx;
+    .iconfont {
+        font-size: 40rpx;
+        margin-right: 26rpx;
+    }
+    .text-container {
+        font-size: 22rpx;
+        line-height: 22rpx;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/pages/order/create.vue b/src/pages/order/create.vue
index 98e202e..705bd3a 100644
--- a/src/pages/order/create.vue
+++ b/src/pages/order/create.vue
@@ -5,12 +5,7 @@
         textColor="dark"
         backgroundColor="#F6F6F6"
     >
-        <view class="tips">
-            <text class="iconfont icon-tixing"></text>
-            <text class="text-container">
-                保险公司承保，人身财产，双重保障，下单无忧！
-            </text>
-        </view>
+        <widget-tips text="保险公司承保，人身财产，双重保障，下单无忧！" />
         <view class="form-container">
             <view class="select-group">
                 <view class="select-item address" @click="selectAddress">
@@ -90,6 +85,7 @@ import AppLayout from "@/components/layout/layout";
 import ServicePreviewItem from "@/components/service/preview-item";
 import Agreement from "@/components/auth/agreement";
 import WidgetSwitch from "@/components/widgets/switch";
+import WidgetTips from "@/components/widgets/tips";
 import { mapState } from "vuex";
 export default {
     name: "order-create",
@@ -122,6 +118,7 @@ export default {
         ServicePreviewItem,
         Agreement,
         WidgetSwitch,
+        WidgetTips,
     },
     computed: {
         ...mapState({
@@ -172,26 +169,6 @@ export default {
 </script>
 
 <style lang="less" scoped>
-.tips {
-    width: 710rpx;
-    height: 75rpx;
-    margin: 0 auto;
-    display: flex;
-    align-items: center;
-    background-color: #ffffff;
-    box-sizing: border-box;
-    padding: 0 10rpx;
-    .iconfont {
-        font-size: 40rpx;
-        color: #ffa800;
-        margin-right: 26rpx;
-    }
-    .text-container {
-        color: #a0a0a0;
-        font-size: 22rpx;
-        line-height: 22rpx;
-    }
-}
 .form-container {
     width: 100%;
     margin-top: 16rpx;