diff --git a/pages/resource/detail/index.js b/pages/resource/detail/index.js
new file mode 100644
index 0000000..00b3193
--- /dev/null
+++ b/pages/resource/detail/index.js
@@ -0,0 +1,123 @@
+// pages/resource/detail/index.js
+import { TopicModel } from '../../../models/topic.js'
+let topicModel = new TopicModel()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    titlePic:"/images/temp_1.png",
+    unStar: '/images/common/star.png',
+    star: '/images/common/star_light.png',
+    detail:{},
+    isCollect:false
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var id = options.id;
+    topicModel.getResourceDetail(id,res=>{
+
+      if(res.result.isCollection == 1){
+        this.setData({
+          isCollect:true,
+        })
+      }else{
+        this.setData({
+          isCollect:false,
+        })
+      }
+      this.setData({
+        detail:res.result,
+      })
+
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  previewImage:function(e){
+    // var current = e.target.dataset.src;
+    var th = this;
+    if(th.data.detail.titlePic){
+      var urls =  [th.data.detail.titlePic];
+      wx.previewImage({
+        urls:urls// 需要预览的图片http链接列表  
+      })
+    }else{
+      return;
+    }
+    
+  },
+  onClickCollect:function(){
+    this.setData({
+      isCollect: !this.data.isCollect
+    })
+    this.fetchTopicCollect();
+
+
+  },
+
+  fetchTopicCollect(){
+    let id = this.data.detail.id
+    topicModel.resourceCollect(id,res =>{
+      //console.log('收藏')
+      if(res.code === 200){
+        wx.showToast({
+          title: '收藏成功',
+          icon: 'none'
+        })
+      }
+    })
+  },
+
+})
\ No newline at end of file
diff --git a/pages/resource/detail/index.json b/pages/resource/detail/index.json
new file mode 100644
index 0000000..8835af0
--- /dev/null
+++ b/pages/resource/detail/index.json
@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}
\ No newline at end of file
diff --git a/pages/resource/detail/index.wxml b/pages/resource/detail/index.wxml
new file mode 100644
index 0000000..ee388b5
--- /dev/null
+++ b/pages/resource/detail/index.wxml
@@ -0,0 +1,20 @@
+<!--pages/resource/detail/index.wxml-->
+
+  <view class="title">
+    <view class="left">
+      <view class="articleImg">
+        <image src="{{detail.titlePic ? detail.titlePic : titlePic}}" bindtap="previewImage" mode="widthFix" style="width:100%;"></image>
+      </view>
+      <!-- <image class="articleImg" src="{{detail.titlePic ? detail.titlePic : titlePic}}" bindtap="previewImage"></image> -->
+      <view class="content">
+        <view class="tit">{{detail.title}}</view>
+        <view class="r_type">{{detail.typeName}}</view>
+      </view>
+    </view>
+    <view class="right">
+      <image class="artice_collect" src="{{isCollect ? star : unStar}}" bindtap="onClickCollect"></image>
+    </view>
+  </view>
+  <view class="text">
+    <rich-text nodes="{{detail.content}}"></rich-text>
+  </view>
diff --git a/pages/resource/detail/index.wxss b/pages/resource/detail/index.wxss
new file mode 100644
index 0000000..77956e9
--- /dev/null
+++ b/pages/resource/detail/index.wxss
@@ -0,0 +1,61 @@
+/* pages/resource/detail/index.wxss */
+/* @import '../../style/font.wxss'; */
+page{
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+}
+
+.title{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  min-height: 90px;
+  border-bottom: 2px solid whitesmoke;
+  margin-top:5px;
+}
+
+.left{
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.right{
+  width: 15px;
+  text-align:right;
+}
+
+.articleImg{
+  width: 55px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  /* border-radius: 50%; */
+}
+
+.content{
+  margin-left: 15px;
+  margin-right: 20px;
+  flex: 1;
+}
+
+.tit{
+  width: 100%;
+  font-weight:1000;
+}
+
+.r_type{
+  font-size: 13px;
+}
+
+.artice_collect {
+  width: 20px;
+  height: 20px;
+}
+
+.text{
+  width: 90%;
+}
diff --git a/pages/resource/index.js b/pages/resource/index.js
new file mode 100644
index 0000000..72c795a
--- /dev/null
+++ b/pages/resource/index.js
@@ -0,0 +1,86 @@
+// pages/resource/index.js
+import { TopicModel } from '../../models/topic.js'
+let topicModel = new TopicModel()
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    titlePic:"/images/temp_1.png",
+    page:1,
+    list:[],
+    show:true
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+    var typeCode = options.typeCode;
+    topicModel.getResourceList(typeCode,1,res=>{
+       this.setData({
+        list:res.result.records 
+       })
+      
+    })
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  },
+  detail:function(e){
+    if (!e.currentTarget.dataset.id){
+      return;
+    }
+
+    wx.navigateTo({
+      url: 'detail/index?id=' + e.currentTarget.dataset.id
+    })
+  }
+})
\ No newline at end of file
diff --git a/pages/resource/index.json b/pages/resource/index.json
new file mode 100644
index 0000000..26abe29
--- /dev/null
+++ b/pages/resource/index.json
@@ -0,0 +1,5 @@
+{
+  "usingComponents": {
+    "van-popup": "/components/vant/popup/index"
+  }
+}
\ No newline at end of file
diff --git a/pages/resource/index.wxml b/pages/resource/index.wxml
new file mode 100644
index 0000000..732b501
--- /dev/null
+++ b/pages/resource/index.wxml
@@ -0,0 +1,31 @@
+<!--pages/resource/index.wxml-->
+<view class="container">
+  <view class="column" wx:for="{{ list }}" bindtap="detail" data-id="{{item.id}}">
+    <view class="left">
+      <view class="articleImg">
+        <image src="{{item.titlePic ? item.titlePic : titlePic}}" mode="widthFix" style="width:100%;"></image>
+      </view>
+      
+      <view class="content">
+        <view class="title">{{item.title}}</view>
+        <view class="r_type">{{item.typeName}}</view>
+      </view>
+    </view>
+    <view class="right"><text class="fa fa-angle-right fa-lg"></text></view>
+  </view>
+
+
+</view>
+<van-popup 
+  show="{{ show }}" 
+  bind:close="onClose"
+  custom-style="height: 80%;width:80%"
+  
+  >
+  <view class="tips">
+    <view class="tips-con">
+      内容内容内容内容内容内容内容
+    </view>
+  </view>
+  
+</van-popup>
\ No newline at end of file
diff --git a/pages/resource/index.wxss b/pages/resource/index.wxss
new file mode 100644
index 0000000..052c115
--- /dev/null
+++ b/pages/resource/index.wxss
@@ -0,0 +1,76 @@
+/* pages/resource/index.wxss */
+@import '../../style/font.wxss';
+page{
+  width: 100%;
+  display: flex;
+  background-color: whitesmoke;
+}
+.container{
+  display: flex;
+  width: 100%;
+  flex-direction: column;
+  align-items: center;
+  background-color: white;
+  margin-top:10px;
+}
+
+.column{
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 90%;
+  height: 90px;
+  border-bottom: 2px solid whitesmoke;
+}
+
+.left{
+  display: flex;
+  align-items: center;
+  flex: 1;
+}
+
+.right{
+  width: 15px;
+  text-align:right;
+}
+
+.articleImg{
+  width: 55px;
+  height: 55px;
+  display: flex;
+  align-items: center;
+  /* border-radius: 50%; */
+}
+
+.content{
+  margin-left: 15px;
+  margin-right: 20px;
+  flex: 1;
+}
+
+.title{
+  width: 100%;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  -webkit-box-orient: vertical;
+  word-break: break-all;
+  font-weight:1000;
+}
+
+.r_type{
+  font-size: 13px;
+}
+.tips{
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+.tips-con{
+  width: 90%;
+  height: 90;
+}
+