diff --git a/README.md b/README.md
index 52b4d22b5373b6d420eba4dfa44a573b99c20337..f0f834711fcc1c96248907f87e74e3811b68d2b0 100644
--- a/README.md
+++ b/README.md
@@ -19,57 +19,28 @@
  如无法运行，删除项目.gradle,.idea,build,gradle,build.gradle文件， 
  并依据自己的版本创建新项目，将新项目的对应文件复制到根目录下
 
-## 使用说明
-1. 在hml代码中，点击事件的目标元素添加自定义属性idx,绑定点击事件textClick
+#### 使用说明
+1. 在页面中引入组件 
+```<element name="textView" src="../../common/commpont/textView/textView.hml"></element>```
 ```
-<div class="content-list" onclick="textClick">
-    <text>我已核对付款金额,仔细阅读并同意</text>
-    <text ref="text1" idx="1" class="text {{idx=='1'?'text-bg':'bg-null'}}" onclick="textClick">
-        "购买须知"
-    </text>
-    <text>及团购</text>
-    <text ref="text2" idx="2" class="text {{idx=='2'?'text-bg':'bg-null'}}" onclick="textClick">
-        "用户条款"
-    </text>
-</div>
+<textview
+            buy_info='"购买须知"'
+            user_clause='"用户条款"'
+            activity_title="/common/images/huodong.png"
+            activity_type="img"></textview>
 ```
-2. JS 中声明绑定事件textClick
-在JS中,data中声明全局变量idx，通过点击事件，获取到当前被点击到的元素的idx的值，赋值给全局变量idx
-hml中通过三元表达式，动态绑定classs属性
+2. 参数使用说明:
 
-```
-textClick(event){
-    if(event.target.attr.value==undefined || event.target.attr.idx==undefined){
-        this.isClick=false;
-    }
-    if(this.isClick==false){
-        this.isClick=true;
-        this.idx=-1;
-        if(event.target.attr.idx){
-            if(this.idx!=event.target.attr.idx){
-                this.idx=event.target.attr.idx;
-            }else{
-                this.idx=-1;
-            }
-        }
-        if(event.target.attr.value){
-            this.title=event.target.attr.value.replace(/^\"|\"$/g,'');
-            let that=this;
-            setTimeout(()=>{
-                this.title="";
-                this.isClick=false;
-            },1500);
-        }else{
-            this.title="";
-        }
-    }
-    setTimeout(()=>{
-        this.isClick=false;
-    },1500);
-}
-```
+**buy_info:** 购买须知文本
+
+**user_clause:** 用户条款文本
+
+**activity_title:** 活动介绍文本,渲染的方式与activity_type有关
 
-## 测试信息
+**activity_type:** 活动介绍类型,可取值img,text;
+activity_type值为text时,activity_title传入的内容必须是字符串,
+activity_type值为img时,activity_title传入的内容必须为图片路径
+#### 测试信息
 
 CodeCheck代码测试无异常
 
diff --git a/build.gradle b/build.gradle
index fd383b9ad5f8cb6947c897734ddc7d7681395fe9..ddc236f61536451e084699adbc81dd246c011af1 100644
--- a/build.gradle
+++ b/build.gradle
@@ -20,8 +20,8 @@ buildscript {
         jcenter()
     }
     dependencies {
-        classpath 'com.huawei.ohos:hap:2.4.5.0'
-        classpath 'com.huawei.ohos:decctest:1.2.4.1'
+        classpath 'com.huawei.ohos:hap:2.4.5.5'
+        classpath 'com.huawei.ohos:decctest:1.2.5.1'
     }
 }
 
diff --git a/entry/src/main/js/default/common/commpont/textView/textView.css b/entry/src/main/js/default/common/commpont/textView/textView.css
new file mode 100644
index 0000000000000000000000000000000000000000..3aee2750449d03a2e6e7164a5e61f5d3778c4a61
--- /dev/null
+++ b/entry/src/main/js/default/common/commpont/textView/textView.css
@@ -0,0 +1,109 @@
+/*
+ * Copyright (C) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+.container {
+
+    flex-direction: column;
+
+}
+.header{
+    display: flex;
+    align-items: center;
+    width: 100%;
+    padding: 20px 15px;
+    background-color: #4050B5;
+
+}
+.header-text{
+    font-size: 26px;
+    color: #ffffff;
+    font-weight: 700;
+}
+.title {
+    font-size: 18px;
+    color: #000000;
+    opacity: 0.9;
+}
+.content-box{
+    width:100%;
+    display:flex;
+    flex-direction: column;
+    padding:0px 20px;
+    color:#303030;
+    font-size:14px;
+
+}
+.content-list{
+    width:100%;
+    display:flex;
+    flex-wrap:wrap;
+    margin-top: 20px;
+
+}
+.content-list text{
+    color:#303030;
+    font-size:16px;
+
+}
+.content-list .text{
+    color:#f23218;
+    border-bottom: 1px solid #f23218;
+
+}
+.text{
+    color:#f23218;
+}
+.content-list .text3{
+    display: grid;
+    line-height: 18px;
+    color:#f23218;
+    font-size: 16px;
+    border-top: 1px solid #f23218;
+    border-bottom: 1px solid #f23218;
+}
+.content-list  .text-l{
+    line-height: 18px;
+    color:#f23218;
+    font-size: 16px;
+    margin-right: 8px;
+
+}
+.huodong-img{
+    width: 64px;
+    height: 20px;
+    margin-right: 8px;
+}
+.text-bg{
+    background-color: #FCB0CA;
+}
+.bg-null{
+    background-color: rgba(255,3,3,0);
+}
+.fixed-bottom-box{
+    position: fixed;
+    bottom: 8%;
+    left: 50%;
+    text-align: center;
+
+
+}
+.fixed-bottom-box text{
+    transform: translateX(-50%);
+    font-size: 16px;
+    color: #6A6A6A;
+    padding: 20px 30px;
+    border-radius: 50px;
+    background-color: #EFEFEF;
+}
diff --git a/entry/src/main/js/default/common/commpont/textView/textView.hml b/entry/src/main/js/default/common/commpont/textView/textView.hml
new file mode 100644
index 0000000000000000000000000000000000000000..7601a1a0548862043e56fce56b31b30381a8684a
--- /dev/null
+++ b/entry/src/main/js/default/common/commpont/textView/textView.hml
@@ -0,0 +1,35 @@
+<!--
+Copyright (C) 2021 Huawei Device Co., Ltd.
+ Licensed under the Apache License, Version 2.0 (the "License");
+ you may not use this file except in compliance with the License.
+ You may obtain a copy of the License at
+ http://www.apache.org/licenses/LICENSE-2.0
+ Unless required by applicable law or agreed to in writing, software
+ distributed under the License is distributed on an "AS IS" BASIS,
+ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ See the License for the specific language governing permissions and
+ limitations under the License.
+-->
+
+<div class="container">
+    <div class="header">
+        <text class="header-text">AutoSpannableTextView</text>
+    </div>
+    <div class="content-box">
+        <div class="content-list" onclick="textClick">
+            <text>我已核对付款金额,仔细阅读并同意</text>
+            <text ref="text1" idx="1" class="text {{idx=='1'?'text-bg':'bg-null'}}" onclick="textClick">{{buy_info}}</text>
+            <text>及团购</text>
+            <text ref="text2" idx="2" class="text {{idx=='2'?'text-bg':'bg-null'}}" onclick="textClick">{{user_clause}}</text>
+        </div>
+        <div class="content-list">
+            <image if="{{isImg}}" class="huodong-img" src="{{activity_title}}"></image>
+            <text if="{{isText}}" class="text">{{activity_title}}</text>
+            <text>活动介绍,开始以图片开头</text>
+        </div>
+    </div>
+    <div if="{{title!=''}}" class="fixed-bottom-box">
+        <text>{{title}}</text>
+    </div>
+</div>
+
diff --git a/entry/src/main/js/default/common/commpont/textView/textView.js b/entry/src/main/js/default/common/commpont/textView/textView.js
new file mode 100644
index 0000000000000000000000000000000000000000..334f64b74e209473817f6ca6dcd6f6d2c5554b53
--- /dev/null
+++ b/entry/src/main/js/default/common/commpont/textView/textView.js
@@ -0,0 +1,89 @@
+/*
+ * Copyright (C) 2021 Huawei Device Co., Ltd.
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import prompt from '@system.prompt';
+export default {
+    props:{
+        // 购买须知
+        buy_info:{
+            default:'"购买须知"'
+        },
+        // 用户条款
+        user_clause:{
+            default:'"用户条款"'
+        },
+        // 活动介绍类型,可取值img:图片类型,text:文本类型
+        activity_type:{
+            default:"img"
+        },
+        // 活动介绍
+        activity_title:{
+            default:"/common/images/huodong.png"
+        }
+
+    },
+    data: {
+        // idx初始值
+        idx:-1,
+        title:"",
+        // 是否允许多次点击
+        isClick:false,
+        // 是否文本
+        isText:false,
+        // 是否图片
+        isImg:false
+    },
+    onInit() {
+        this.activityType();
+    },
+    activityType(){
+        if(this.activity_type=="img"){
+            this.isImg=true;
+            this.isText=false;
+        }else{
+            this.isImg=false;
+            this.isText=true;
+        }
+    },
+    textClick(event){
+        if(event.target.attr.value==undefined || event.target.attr.idx==undefined){
+            this.isClick=false;
+        }
+        if(this.isClick==false){
+            this.isClick=true;
+            this.idx=-1;
+            if(event.target.attr.idx){
+                if(this.idx!=event.target.attr.idx){
+                    this.idx=event.target.attr.idx;
+                }else{
+                    this.idx=-1;
+                }
+            }
+            if(event.target.attr.value){
+                this.title=event.target.attr.value.replace(/^\"|\"$/g,'');
+                let that=this;
+                setTimeout(()=>{
+                    this.title="";
+                    this.isClick=false;
+                },1500);
+            }else{
+                this.title="";
+            }
+        }
+        setTimeout(()=>{
+            this.isClick=false;
+        },1500);
+    }
+}
diff --git a/entry/src/main/js/default/pages/index/index.hml b/entry/src/main/js/default/pages/index/index.hml
index 4ee7131fe093d0859e46c6c03ac83d3bca15afa3..3d0e234f13aa1ab5d9446ea69b89c84ff5be0e1a 100644
--- a/entry/src/main/js/default/pages/index/index.hml
+++ b/entry/src/main/js/default/pages/index/index.hml
@@ -10,25 +10,12 @@ Copyright (C) 2021 Huawei Device Co., Ltd.
  See the License for the specific language governing permissions and
  limitations under the License.
 -->
-
+<element name="textView" src="../../common/commpont/textView/textView.hml"></element>
 <div class="container">
-    <div class="header">
-        <text class="header-text">AutoSpannableTextView</text>
-    </div>
-    <div class="content-box">
-        <div class="content-list" onclick="textClick">
-            <text>我已核对付款金额,仔细阅读并同意</text>
-            <text ref="text1" idx="1" class="text {{idx=='1'?'text-bg':'bg-null'}}" onclick="textClick">"购买须知"</text>
-            <text>及团购</text>
-            <text ref="text2" idx="2" class="text {{idx=='2'?'text-bg':'bg-null'}}" onclick="textClick">"用户条款"</text>
-        </div>
-        <div class="content-list">
-            <image class="huodong-img" src="../../common/images/huodong.png"></image>
-            <text>活动介绍,开始以图片开头</text>
-        </div>
-    </div>
-    <div if="{{title!=''}}" class="fixed-bottom-box">
-        <text>{{title}}</text>
-    </div>
+    <textview
+            buy_info='"购买须知"'
+            user_clause='"用户条款"'
+            activity_title="/common/images/huodong.png"
+            activity_type="img"></textview>
 </div>