diff --git a/app.json b/app.json
index c9f2183..951fcda 100644
--- a/app.json
+++ b/app.json
@@ -6,7 +6,10 @@
     "pages/topics/index",
     "pages/billboards/firm/index",
     "pages/billboards/park/index",
-    "pages/billboards/policy/index"
+    "pages/billboards/policy/index",
+    "pages/topics/common/message/index",
+    "pages/topics/common/interactive/index",
+    "pages/topics/common/goodIdea/index"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/topics/common/goodIdea/index.js b/pages/topics/common/goodIdea/index.js
new file mode 100644
index 0000000..1181c77
--- /dev/null
+++ b/pages/topics/common/goodIdea/index.js
@@ -0,0 +1,66 @@
+// pages/topics/common/goodIdea/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/topics/common/goodIdea/index.json b/pages/topics/common/goodIdea/index.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/topics/common/goodIdea/index.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/topics/common/goodIdea/index.wxml b/pages/topics/common/goodIdea/index.wxml
new file mode 100644
index 0000000..1b000c0
--- /dev/null
+++ b/pages/topics/common/goodIdea/index.wxml
@@ -0,0 +1,2 @@
+<!--pages/topics/common/goodIdea/index.wxml-->
+<text>pages/topics/common/goodIdea/index.wxml</text>
diff --git a/pages/topics/common/goodIdea/index.wxss b/pages/topics/common/goodIdea/index.wxss
new file mode 100644
index 0000000..70e56bc
--- /dev/null
+++ b/pages/topics/common/goodIdea/index.wxss
@@ -0,0 +1 @@
+/* pages/topics/common/goodIdea/index.wxss */
\ No newline at end of file
diff --git a/pages/topics/common/interactive/index.js b/pages/topics/common/interactive/index.js
new file mode 100644
index 0000000..8531848
--- /dev/null
+++ b/pages/topics/common/interactive/index.js
@@ -0,0 +1,66 @@
+// pages/topics/common/interactive/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})
\ No newline at end of file
diff --git a/pages/topics/common/interactive/index.json b/pages/topics/common/interactive/index.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/topics/common/interactive/index.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/topics/common/interactive/index.wxml b/pages/topics/common/interactive/index.wxml
new file mode 100644
index 0000000..92548ab
--- /dev/null
+++ b/pages/topics/common/interactive/index.wxml
@@ -0,0 +1,2 @@
+<!--pages/topics/common/interactive/index.wxml-->
+<text>pages/topics/common/interactive/index.wxml</text>
diff --git a/pages/topics/common/interactive/index.wxss b/pages/topics/common/interactive/index.wxss
new file mode 100644
index 0000000..831b94e
--- /dev/null
+++ b/pages/topics/common/interactive/index.wxss
@@ -0,0 +1 @@
+/* pages/topics/common/interactive/index.wxss */
\ No newline at end of file
diff --git a/pages/topics/common/message/index.js b/pages/topics/common/message/index.js
new file mode 100644
index 0000000..f9781db
--- /dev/null
+++ b/pages/topics/common/message/index.js
@@ -0,0 +1,75 @@
+// pages/topics/common/message/index.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    textAreaString:""
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+
+  bindTextAreaInput(e){
+    this.setData({
+      textAreaString:e.detail.value
+    })
+  },
+  submit(){
+    console.log(this.data.textAreaString)
+  }
+})
\ No newline at end of file
diff --git a/pages/topics/common/message/index.json b/pages/topics/common/message/index.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/topics/common/message/index.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/topics/common/message/index.wxml b/pages/topics/common/message/index.wxml
new file mode 100644
index 0000000..7c8c0cb
--- /dev/null
+++ b/pages/topics/common/message/index.wxml
@@ -0,0 +1,11 @@
+<!--pages/topics/common/message/index.wxml-->
+<view class="mian">
+  <view class="content-wrapper">
+    <view class="section">
+      <textarea class="textArea" bindinput="bindTextAreaInput" placeholder="有什么想留言的内容？" />
+      <view class="btnView">
+        <button class="submitBtn" bindtap="submit">提交</button>
+      </view>
+    </view>
+  </view>
+</view>
diff --git a/pages/topics/common/message/index.wxss b/pages/topics/common/message/index.wxss
new file mode 100644
index 0000000..ba3cd0a
--- /dev/null
+++ b/pages/topics/common/message/index.wxss
@@ -0,0 +1,38 @@
+/* pages/topics/common/message/index.wxss */
+.main{
+  position: relative;
+}
+.section{
+  display: flex;
+  flex-direction: column;
+  padding: 5px 20px 5px 20px;
+}
+.textArea{
+  width: 100%;
+  height: 400px;
+  font-size: 14px;
+}
+.btnView{
+  position: fixed;
+  width: 90%;
+  height: 45px;
+  bottom: 10px;
+  background-color: white;
+}
+.submitBtn{
+  /* width: 100%; */
+  /* margin-left: 20px;
+  margin-right: 20px; */
+  /* position: fixed;
+  bottom: 10px; */
+  height: 45px;
+  line-height: 40px;
+  border-radius: 5px;
+  color: white;
+  font-size: 14px;
+  background-image: linear-gradient(
+    to right,
+    #FD6553 30%,
+    #D70403 100%
+  );
+}
\ No newline at end of file
diff --git a/pages/topics/index.js b/pages/topics/index.js
index ef6e5bb..f2bfe16 100644
--- a/pages/topics/index.js
+++ b/pages/topics/index.js
@@ -1,11 +1,12 @@
 // pages/topics/index.js
 Page({
-
+  
   /**
    * 页面的初始数据
    */
   data: {
-
+    headerTitles:['互动区','金点子','留言箱','1','2','3','4','5','6'],
+    selectedTitle:2
   },
 
   /**
@@ -14,14 +15,13 @@ Page({
   onLoad: function (options) {
 
   },
-
+  
   /**
    * 生命周期函数--监听页面初次渲染完成
    */
   onReady: function () {
 
   },
-
   /**
    * 生命周期函数--监听页面显示
    */
@@ -62,5 +62,19 @@ Page({
    */
   onShareAppMessage: function () {
 
+  },
+
+  // 定义点击标题的事件处理函数，将选中标题的id赋值给selectedTitle
+  bindtap: function (e) {
+    console.log(e)
+    this.setData({
+      selectedTitle: e.currentTarget.id
+    });
+  },
+  //定义滑块改变的事件处理函数，将current赋值给selectedTitle
+  bindChange: function (e) {
+    this.setData({
+      selectedTitle: e.detail.current
+    })
   }
 })
\ No newline at end of file
diff --git a/pages/topics/index.json b/pages/topics/index.json
index 8835af0..32c1360 100644
--- a/pages/topics/index.json
+++ b/pages/topics/index.json
@@ -1,3 +1,8 @@
 {
-  "usingComponents": {}
+  "usingComponents": {
+    "interactive": "./common/interactive/index",
+    "goodIdea":"./common/goodIdea/index",
+    "message": "./common/message/index"
+
+  }
 }
\ No newline at end of file
diff --git a/pages/topics/index.wxml b/pages/topics/index.wxml
index b341ba3..87b499d 100644
--- a/pages/topics/index.wxml
+++ b/pages/topics/index.wxml
@@ -1,2 +1,20 @@
 <!--pages/topics/index.wxml-->
-<text>pages/topics/index.wxml</text>
+<view class="mian">
+  <view class="content-wrapper">
+    <scroll-view scroll-x scroll-into-view=''>
+      <view class="header-titles">
+        <block wx:for="{{headerTitles}}" wx:key="index" >
+          <view class="item-title">
+            <view id="{{index}}" bindtap="bindtap" class="title {{index==selectedTitle ? 'title-selected' : ''}}">
+              {{item}}
+            </view>
+            <view class="select-line" hidden="{{index==selectedTitle ? false : true}}"></view>
+          </view>
+        </block>
+      </view>
+    </scroll-view>
+    <interactive wx:if="{{selectedTitle==0}}" />
+    <goodIdea wx:if="{{selectedTitle==1}}" />
+    <message wx:if="{{selectedTitle==2}}" />
+  </view>
+</view>
diff --git a/pages/topics/index.wxss b/pages/topics/index.wxss
index a2216d8..ec73719 100644
--- a/pages/topics/index.wxss
+++ b/pages/topics/index.wxss
@@ -1 +1,56 @@
-/* pages/topics/index.wxss */
\ No newline at end of file
+/* pages/topics/index.wxss */
+.header-titles {
+  height: 36px;
+  display: flex;
+  /* justify-content: space-around; */
+  padding: 5px;
+}
+.title {
+  width: 150rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #999999;
+  font-size: 14px;
+  margin-top: 5px;
+}
+.item-title{
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.title-selected {
+  font-size: 16px;
+  color: #292E3E;
+}
+.select-line{
+  margin-top: 5px;
+  width: 10px;
+  height: 2px;
+  border-radius: 5px;
+  background-color: #FA4646;
+}
+.page {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 90rpx;
+  color: white;
+}
+.bc_Yellow {
+  background-color: yellow;
+}
+.bc_Orange {
+  background-color: orange;
+}
+.bc_Green {
+  background-color: green;
+}
+.bc_Blue {
+  background-color: blue;
+}
+.bc_Purple {
+  background-color: purple;
+}
\ No newline at end of file