diff --git a/api/knowledge.js b/api/knowledge.js
new file mode 100644
index 0000000..77e03f9
--- /dev/null
+++ b/api/knowledge.js
@@ -0,0 +1,22 @@
+import request from "@/utils/request";
+
+/**
+ * 课程文章分类
+ */
+export function getCategory(data) {
+  return request.get("/api/CourseCategory", data);
+}
+
+/**
+ * 通过分类查找文章列表
+ */
+export function getArticle(data) {
+  return request.get("/article/listByCategoryId", data);
+}
+
+/**
+ * 获取文章详情
+ */
+export function getArticleDetails(data) {
+  return request.get("/article/details/"+data);
+}
\ No newline at end of file
diff --git a/assets/css/base.less b/assets/css/base.less
index 6ef3e59..65037fa 100644
--- a/assets/css/base.less
+++ b/assets/css/base.less
@@ -32,6 +32,10 @@
   padding: 0 0.3*100rpx;
 }
 /* layout */
+.acea-row-nowrap {
+  display: flex;
+  /* 辅助类 */
+}
 .acea-row {
   display: flex;
   flex-wrap: wrap;
diff --git a/components/luch-audio/luch-audio.vue b/components/luch-audio/luch-audio.vue
new file mode 100644
index 0000000..8b0ab43
--- /dev/null
+++ b/components/luch-audio/luch-audio.vue
@@ -0,0 +1,225 @@
+<template>
+	<view class="audio-warp">
+		<view class="cover-warp" :class="{ hasbg: !poster }">
+			<image :src="poster" v-if="poster" class="cover-img"></image>
+			<view class="play-btn" :class="{ pause: play }" @click="handleBtnClick"></view>
+		</view>
+		<view class="audio-con">
+			<view class="info">
+				<text class="audio-title am-text-eill">{{ name }}</text>
+				<text class="audio-author am-text-eill">{{ author }}</text>
+			</view>
+			<view class="audio-time">{{ audioTimeUpdate }}</view>
+		</view>
+	</view>
+</template>
+
+<script>
+/**
+ * luch-audio 0.0.1
+ * @module luch-audio
+ * @Author lu-ch
+ * @Date 2019-06-11
+ * @Email webwork.s@qq.com
+ * @description 音频播放组件，使用了createInnerAudioContext
+ */
+/**
+ * Props itemsProps
+ * @prop {Boolean} play - 是否播放，双向绑定，绑定时需使用.sync 如果为true 则播放，为false 则暂停
+ * ... 其他api同文档 （https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext）
+ */
+/**
+ * 将秒转换为 分:秒
+ * @param {Number} s - 秒数
+ */
+function sToHs(s) {
+	//计算分钟
+	//算法：将秒数除以60，然后下舍入，既得到分钟数
+	let h;
+	h = Math.floor(s / 60);
+	//计算秒
+	//算法：取得秒%60的余数，既得到秒数
+	s = s % 60;
+	//将变量转换为字符串
+	h += '';
+	s += '';
+	//如果只有一位数，前面增加一个0
+	h = (h.length === 1) ? '0' + h : h;
+	s = (s.length === 1) ? '0' + s : s;
+	return h + ':' + s;
+}
+export default {
+	name: 'ComAudio',
+	props: {
+		play: {
+			type: Boolean,
+			required: true
+		},
+		src: {
+			type: String
+		},
+		poster: {
+			type: String,
+			default: ''
+		},
+		name: {
+			type: String,
+			default: '未知音频'
+		},
+		author: {
+			type: String,
+			default: '未知作者'
+		},
+		autoplay: {
+			type: Boolean,
+			default: false
+		},
+		loop: {
+			type: Boolean,
+			default: false
+		},
+		obeyMuteSwitch: {
+			type: Boolean,
+			default: true
+		}
+	},
+	data() {
+		return {
+			audioTimeUpdate: '00:00',
+			innerAudioContext: ''
+		};
+	},
+	methods: {
+		audioPlay() {
+			this.$emit('update:play', true);
+		},
+		audioPause() {
+			this.$emit('update:play', false);
+		},
+		handleBtnClick() {
+			this.$emit('update:play', !this.play);
+		},
+		contextInit() {
+			console.log('创建');
+			let that = this;
+			that.$emit('update:play', false);
+			let innerAudioContext = uni.createInnerAudioContext();
+			innerAudioContext.autoplay = that.autoplay;
+			innerAudioContext.src = that.src;
+			innerAudioContext.loop = that.loop;
+			innerAudioContext.obeyMuteSwitch = that.obeyMuteSwitch;
+			innerAudioContext.onPlay(function() {
+				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
+				that.audioPlay();
+			});
+			innerAudioContext.onPause(function() {
+				that.audioPause();
+			});
+			innerAudioContext.onEnded(function() {
+				that.audioPause();
+			});
+			innerAudioContext.onTimeUpdate(function() {
+				that.audioTimeUpdate = sToHs(Math.floor(innerAudioContext.currentTime));
+			});
+			innerAudioContext.onError(err => {
+				console.log(err);
+			});
+			this.innerAudioContext = innerAudioContext;
+		}
+	},
+	watch: {
+		play(n) {
+			if (n) {
+				this.innerAudioContext.play();
+			} else {
+				this.innerAudioContext.pause();
+			}
+		},
+		src() {
+			this.innerAudioContext.destroy();
+			this.contextInit();
+		}
+	},
+	created() {
+		this.contextInit();
+	},
+	beforeDestroy() {
+		this.innerAudioContext.destroy();
+	}
+};
+</script>
+
+<style lang="scss">
+.am-text-eill {
+	/*超出省略号*/
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.audio-warp {
+	display: flex;
+	overflow: hidden;
+	height: 67px;
+	border-radius: 3px;
+	border: 1px solid #e0e0e0;
+}
+.cover-warp {
+	position: relative;
+	flex-shrink: 0;
+	width: 65px;
+	height: 100%;
+	&.hasbg {
+		background-color: #e6e6e6;
+	}
+	.cover-img {
+		width: 100%;
+		height: 100%;
+	}
+	.play-btn {
+		position: absolute;
+		left: 50%;
+		top: 50%;
+		width: 24px;
+		height: 24px;
+		transform: translateX(-50%) translateY(-50%);
+		border-radius: 50%;
+		background-size: 100% 100%;
+		background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGymlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA2LTA0VDE3OjU1OjA3KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA2LTA1VDA5OjUwOjUwKzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNi0wNVQwOTo1MDo1MCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo4OWI0YTlkMi02ZWIzLTUyNDQtYjM4OS03MzdmYTA1OTM1ZWEiIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDoyODIyOGJlOC0zZDgxLTlhNDMtOGJjMy02NDA2NTQzYWIwMzQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDo0YjA1NDBlYy1mMjE1LWU4NDEtYjkwYy0xZjBiNGQ3OGJkODkiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjRiMDU0MGVjLWYyMTUtZTg0MS1iOTBjLTFmMGI0ZDc4YmQ4OSIgc3RFdnQ6d2hlbj0iMjAxOS0wNi0wNFQxNzo1NTowNyswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDpiNzc4YjE2NC1mODFhLWU5NDktOThmMC00OGQ0MDZlNmU3ZjYiIHN0RXZ0OndoZW49IjIwMTktMDYtMDRUMTc6NTU6MDcrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6ODliNGE5ZDItNmViMy01MjQ0LWIzODktNzM3ZmEwNTkzNWVhIiBzdEV2dDp3aGVuPSIyMDE5LTA2LTA1VDA5OjUwOjUwKzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+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');
+		&.pause {
+			background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGymlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDUgNzkuMTYzNDk5LCAyMDE4LzA4LzEzLTE2OjQwOjIyICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOnhtcE1NPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvbW0vIiB4bWxuczpzdEV2dD0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL3NUeXBlL1Jlc291cmNlRXZlbnQjIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHhtcDpDcmVhdGVEYXRlPSIyMDE5LTA2LTA0VDE3OjU0OjM1KzA4OjAwIiB4bXA6TWV0YWRhdGFEYXRlPSIyMDE5LTA2LTA1VDA5OjUwOjI0KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAxOS0wNi0wNVQwOTo1MDoyNCswODowMCIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDoyZGU0NjY1NS05N2I2LTBjNGMtYTQ4NS0wN2E1ZjY5ZjU1YjciIHhtcE1NOkRvY3VtZW50SUQ9ImFkb2JlOmRvY2lkOnBob3Rvc2hvcDpiYTUxOWZkZi0xYWQwLTYwNDUtOGIyNS1hNTZlOGM0YzhkZmQiIHhtcE1NOk9yaWdpbmFsRG9jdW1lbnRJRD0ieG1wLmRpZDpiZjRlOTFiYS1iYTBjLWVkNDMtOTc1Yi01YTcwODhmNzdiMWUiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiPiA8eG1wTU06SGlzdG9yeT4gPHJkZjpTZXE+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJjcmVhdGVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOmJmNGU5MWJhLWJhMGMtZWQ0My05NzViLTVhNzA4OGY3N2IxZSIgc3RFdnQ6d2hlbj0iMjAxOS0wNi0wNFQxNzo1NDozNSswODowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTkgKFdpbmRvd3MpIi8+IDxyZGY6bGkgc3RFdnQ6YWN0aW9uPSJzYXZlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDoxY2U4ZTUwMi1iYzUwLThkNDktYTU0ZC04OWVjOGUzMDI5ZTIiIHN0RXZ0OndoZW49IjIwMTktMDYtMDRUMTc6NTQ6MzUrMDg6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAyMDE5IChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MmRlNDY2NTUtOTdiNi0wYzRjLWE0ODUtMDdhNWY2OWY1NWI3IiBzdEV2dDp3aGVuPSIyMDE5LTA2LTA1VDA5OjUwOjI0KzA4OjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgMjAxOSAoV2luZG93cykiIHN0RXZ0OmNoYW5nZWQ9Ii8iLz4gPC9yZGY6U2VxPiA8L3htcE1NOkhpc3Rvcnk+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+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');
+		}
+	}
+}
+.audio-con {
+	position: relative;
+	flex: 1;
+	display: flex;
+	width: 0;
+	padding: 0 15px;
+	align-items: center;
+	background-color: #fcfcfc;
+	.info {
+		width: 100%;
+	}
+	.audio-title {
+		display: block;
+		padding-bottom: 7px;
+		padding-right: 25px;
+		font-size: 14px;
+		color: #353535;
+	}
+	.audio-author {
+		display: block;
+		font-size: 12px;
+		color: #888888;
+	}
+	.audio-time {
+		position: absolute;
+		right: 15px;
+		top: 6px;
+		font-size: 13px;
+		color: #9d9d9d;
+	}
+}
+</style>
diff --git a/components/luch-audio/readme.md b/components/luch-audio/readme.md
new file mode 100644
index 0000000..b584ec4
--- /dev/null
+++ b/components/luch-audio/readme.md
@@ -0,0 +1,65 @@
+**插件使用说明**
+
+- 基于 uni.createInnerAudioContext() 封装audio音频组件（样式同原生audio组件）
+- 支持双向绑定
+- 支持自定义修改样式
+
+
+**Example**
+---
+
+``` javascript 
+<luch-audio src="https://img-cdn-qiniu.dcloud.net.cn/uniapp/audio/music.mp3" :play.sync="audioPlay"></luch-audio>
+
+// 控制变量audioPlay ，如果true音频会播放，否则暂停
+```
+
+**Attributes**
+--
+
+参数|说明|类型|可选值|默认值|required
+--|:-
+play|是否播放,双向绑定，需加 ` .sync `|Boolean| — | — |true
+src|资源路径|String| — | — | —
+poster|封面图片路径|String| — | — | —
+name|音频名称|String| — | 未知音频 | —
+author|作者名字|String| — | 未知作者 | —
+autoplay|是否自动开始播放|Boolean| — | false | —
+loop|是否循环播放|Boolean| — | false | —
+obeyMuteSwitch|是否遵循系统静音开关，当此参数为 false 时，即使用户打开了静音开关，也能继续发出声音|Boolean| — | true | —
+
+其他api 可在组件内 ` contextInit ` 函数初始化时自定义添加
+
+**平台支持度**
+--
+
+5+App|H5|微信小程序|支付宝小程序|百度小程序|头条小程序
+--|:-
+yes|yes|yes|no|yes|yes
+
+**注意：**以上平台支持度为uni-app 对` uni.createInnerAudioContext() ` api 的支持度，本组件的支持度本人只在微信小程序使用过，其他平台*未做测试*
+
+**使用**
+--
+
+下载后把该文件放至 components 文件夹或 特定平台组件 文件夹即可
+
+**更新**
+--
+
+- v0.0.1 组件
+
+**可扩展性**
+--
+
+api 增加参考 ` https://uniapp.dcloud.io/api/media/audio-context?id=createinneraudiocontext `
+<br>
+组件内的播放暂停图标本人因为要发布组件，所以使用了base64,大家可自行替换；
+<br>
+实例获取可以通过ref 获取组件内的 ` innerAudioContext ` （未实验，只是估计 0.0）
+
+**说明**
+--
+
+切换src 或者切换页面都会销毁实例<br>
+写本组件的原因就是原生audio组件无法修改宽度，导致某些情况下显示不全，本组件是100%自适应布局；
diff --git a/components/wuc-tab/wuc-tab.vue b/components/wuc-tab/wuc-tab.vue
new file mode 100644
index 0000000..1d381fa
--- /dev/null
+++ b/components/wuc-tab/wuc-tab.vue
@@ -0,0 +1,133 @@
+<template>
+  <scroll-view class="wuc-tab" :class="tabClass" :style="tabStyle" scroll-with-animation scroll-x :scroll-left="scrollLeft">
+    <div v-if="!textFlex">
+      <div class="wuc-tab-item" :class="[item.id === tabCur ? selectClass + ' cur':'']" v-for="(item,index) in tabList" :key="index" :id="item.id" @tap="tabSelect(item,$event)">
+        <text :class="item.icon"></text>
+        <span>{{item.categoryName}}</span>
+      </div>
+    </div>
+
+    <div class="flex text-center" v-if="textFlex">
+      <div class="wuc-tab-item flex-sub" :class="item.id === tabCur ? selectClass + ' cur':''" v-for="(item,index) in tabList" :key="index" :id="index" @tap="tabSelect(item,$event)">
+        <text :class="item.icon"></text>
+        <span>{{item.categoryName}}</span>
+      </div>
+    </div>
+  </scroll-view>
+</template>
+<script>
+export default {
+    name: 'wuc-tab',
+    data() {
+        return {};
+    },
+    props: {
+        tabList: {
+            type: Array,
+            default() {
+                return [];
+            }
+        },
+        tabCur: {
+            type: Number,
+            default() {
+                return 0;
+            }
+        },
+        tabClass: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        tabStyle: {
+            type: String,
+            default() {
+                return '';
+            }
+        },
+        textFlex: {
+            type: Boolean,
+            default() {
+                return false;
+            }
+        },
+        selectClass: {
+            type: String,
+            default() {
+                return 'text-blue';
+            }
+        }
+    },
+    methods: {
+        tabSelect(index, e) {
+            if (this.currentTab === index) return false;
+            this.$emit('update:tabCur', index);
+            this.$emit('change', index);
+        }
+    },
+    computed: {
+        scrollLeft() {
+            return (this.tabCur - 1) * 60;
+        }
+    }
+};
+</script>
+<style>
+div,
+scroll-view,
+swiper {
+	box-sizing: border-box;
+}
+.wuc-tab {
+    white-space: nowrap;
+}
+.wuc-tab-item {
+    height: 90upx;
+    display: inline-block;
+    line-height: 90upx;
+    margin: 0 10upx;
+    padding: 0 20upx;
+}
+
+.wuc-tab-item.cur {
+    border-bottom: 4upx solid;
+}
+
+.wuc-tab.fixed {
+	position: fixed;
+	width: 100%;
+	top: 0;
+	z-index: 1024;
+	box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
+}
+
+.flex {
+    display: flex;
+}
+.text-center {
+    text-align: center;
+}
+.flex-sub {
+    flex: 1;
+}
+.text-blue{
+  color:#0081ff;
+}
+.text-white{
+  color:#ffffff;
+}
+.bg-white{
+    background-color: #ffffff;
+}
+.bg-blue{
+    background-color: #0081ff;
+}
+.text-orange{
+  color: #f37b1d
+}
+
+.text-xl {
+	font-size: 36upx;
+}
+</style>
diff --git a/pages.json b/pages.json
index 90f035d..18ebe0a 100644
--- a/pages.json
+++ b/pages.json
@@ -3,7 +3,7 @@
     {
       "path": "pages/Loading/index",
       "style": {
-        "navigationBarTitleText": "yshop商城"
+        "navigationBarTitleText": "禪易精舍"
       }
     },
     {
@@ -39,11 +39,21 @@
     {
       "path": "pages/home/index",
       "style": {
-        "navigationBarTitleText": "yshop商城",
-        "navigationBarTextStyle": "white",
-        "navigationStyle": "custom"
+        "navigationBarTitleText": "禪易"
       }
     },
+		{
+		  "path": "pages/knowledge/index",
+		  "style": {
+		    "navigationBarTitleText": "文章"
+		  }
+		},
+		{
+		  "path": "pages/knowledge/detail",
+		  "style": {
+		    "navigationBarTitleText": "文章详情"
+		  }
+		},
     {
       "path": "pages/shop/GoodSearch/index",
       "style": {
@@ -432,14 +442,13 @@
   "globalStyle": {
     "navigationBarTextStyle": "black",
     "navigationBarTitleText": "Yshop",
-    "navigationBarBackgroundColor": "#F8F8F8",
-    "backgroundColor": "#F8F8F8",
+    "navigationBarBackgroundColor": "#fff",
+    "backgroundColor": "#fff",
     "navigationStyle": "default"
   },
   "tabBar": {
-    "color": "#282828",
-    "selectedColor": "#eb3729",
-    "borderStyle": "black",
+    "color": "#666666",
+    "selectedColor": "#F99C10",
     "backgroundColor": "#ffffff",
     "height": "50px",
     "fontSize": "10px",
@@ -448,28 +457,52 @@
     "list": [
       {
         "pagePath": "pages/home/index",
-        "iconPath": "static/icon-home.png",
-        "selectedIconPath": "static/icon-home-hot.png",
-        "text": "首页"
+        "iconPath": "static/tab1.png",
+        "selectedIconPath": "static/tab1.png",
+        "text": "禪易"
       },
-      {
-        "pagePath": "pages/shop/GoodsClass/index",
-        "iconPath": "static/icon-class.png",
-        "selectedIconPath": "static/icon-class-hot.png",
-        "text": "分类"
-      },
-      {
-        "pagePath": "pages/shop/ShoppingCart/index",
-        "iconPath": "static/icon-cart.png",
-        "selectedIconPath": "static/icon-cart-hot.png",
-        "text": "购物车"
-      },
-      {
-        "pagePath": "pages/user/User/index",
-        "iconPath": "static/icon-user.png",
-        "selectedIconPath": "static/icon-user-hot.png",
-        "text": "我的"
-      }
+			{
+			  "pagePath": "pages/home/index",
+			  "iconPath": "static/tab2.png",
+			  "selectedIconPath": "static/tab2.png",
+			  "text": "学习"
+			},
+			{
+			  "pagePath": "pages/knowledge/index",
+			  "iconPath": "static/tab3.png",
+			  "selectedIconPath": "static/tab3.png",
+			  "text": "文章"
+			},
+			{
+			  "pagePath": "pages/shop/GoodsClass/index",
+			  "iconPath": "static/tab4.png",
+			  "selectedIconPath": "static/tab4.png",
+			  "text": "商城"
+			},
+			{
+			  "pagePath": "pages/user/User/index",
+			  "iconPath": "static/tab5.png",
+			  "selectedIconPath": "static/tab5.png",
+			  "text": "我的"
+			}
+      // {
+      //   "pagePath": "pages/shop/GoodsClass/index",
+      //   "iconPath": "static/icon-class.png",
+      //   "selectedIconPath": "static/icon-class-hot.png",
+      //   "text": "分类"
+      // },
+      // {
+      //   "pagePath": "pages/shop/ShoppingCart/index",
+      //   "iconPath": "static/icon-cart.png",
+      //   "selectedIconPath": "static/icon-cart-hot.png",
+      //   "text": "购物车"
+      // },
+      // {
+      //   "pagePath": "pages/user/User/index",
+      //   "iconPath": "static/icon-user.png",
+      //   "selectedIconPath": "static/icon-user-hot.png",
+      //   "text": "我的"
+      // }
     ]
   }
 }
diff --git a/pages/home/components/HotCommodity.vue b/pages/home/components/HotCommodity.vue
index 3a4b25b..0e26eb8 100644
--- a/pages/home/components/HotCommodity.vue
+++ b/pages/home/components/HotCommodity.vue
@@ -1,219 +1,220 @@
 <template>
-    <view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
-        <view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
-            <text class="title">热门榜单</text>
-            <view class="group-people x-f">
-                <text class="tip">更多</text>
-                <text class="cuIcon-right"></text>
-            </view>
-        </view>
-        <view class="goods-box swiper-box x-f">
-            <swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
-                <swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
-                    <view class="goods-list-box x-f">
-                        <block v-for="mgoods in goods" :key="mgoods.id">
-                            <view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
-                                <view class="img-box">
-                                    <view class="tag">hot</view>
-                                    <image class="img" :src="mgoods.image" mode="widthFix"></image>
-                                </view>
-                                <view class="price-box">
-                                    <view class="y-f">
-                                        <text class="seckill-current">￥{{  mgoods.price  }}</text>
-                                        <text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
-                                    </view>
-                                </view>
-                                <view class="title">
-                                    <slot name="titleText"></slot>
-                                </view>
-                            </view>
-                        </block>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper-dots" v-if="goodsList.length > 1">
-                <text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
-                    :key="index"></text>
-            </view>
-        </view>
-    </view>
+	<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
+		<view class="title-box x-bc" @tap="$yrouter.push({ path: '/pages/shop/HotNewGoods/index',query:{type:2} })">
+			<text class="title">热门榜单</text>
+			<view class="group-people x-f">
+				<text class="tip">更多</text>
+				<text class="cuIcon-right"></text>
+			</view>
+		</view>
+		<view class="goods-box swiper-box x-f">
+			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
+				<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
+					<view class="goods-list-box x-f">
+						<block v-for="mgoods in goods" :key="mgoods.id">
+							<view class="min-goods" @tap="jump('/pages/shop/GoodsCon/index',{id:mgoods.id})">
+								<view class="img-box">
+									<view class="tag">hot</view>
+									<image class="img" :src="mgoods.image" mode="widthFix"></image>
+								</view>
+								<view class="price-box">
+									<view class="y-f">
+										<text class="seckill-current">￥{{ mgoods.price  }}</text>
+										<text class="original">销量{{ mgoods.sales }}{{mgoods.unitName}}</text>
+									</view>
+								</view>
+								<view class="title">
+									<slot name="titleText"></slot>
+								</view>
+							</view>
+						</block>
+					</view>
+				</swiper-item>
+			</swiper>
+			<view class="swiper-dots" v-if="goodsList.length > 1">
+				<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
+					:key="index"></text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-    import shActivityGoods from '@/components/sh-activity-goods.vue';
-
-    export default {
-        name: "HotCommodity",
-        components: {
-            shActivityGoods
-        },
-        data() {
-            return {
-                goodsList: [],
-                swiperCurrent: 0
-            };
-        },
-        props: {
-            detail: Array
-        },
-        computed: {},
-        created() {},
-        watch: {
-            detail(next) {
-                this.goodsList = this.sortData(next, 4);
-            }
-        },
-        methods: {
-            swiperChange(e) {
-                this.swiperCurrent = e.detail.current;
-            },
-            // 数据分层
-            sortData(oArr, length) {
-                let arr = [];
-                let minArr = [];
-                oArr.forEach(c => {
-                    if (minArr.length === length) {
-                        minArr = [];
-                    }
-                    if (minArr.length === 0) {
-                        arr.push(minArr);
-                    }
-                    minArr.push(c);
-                });
-
-                return arr;
-            },
-            jump(path, query) {
-                this.$yrouter.push({
-                    path,
-                    query,
-                });
-            },
-        }
-    }
+	import shActivityGoods from '@/components/sh-activity-goods.vue';
+
+	export default {
+		name: "HotCommodity",
+		components: {
+			shActivityGoods
+		},
+		data() {
+			return {
+				goodsList: [],
+				swiperCurrent: 0
+			};
+		},
+		props: {
+			detail: Array
+		},
+		computed: {},
+		created() {},
+		watch: {
+			detail(next) {
+				this.goodsList = this.sortData(next, 4);
+			}
+		},
+		methods: {
+			swiperChange(e) {
+				this.swiperCurrent = e.detail.current;
+			},
+			// 数据分层
+			sortData(oArr, length) {
+				let arr = [];
+				let minArr = [];
+				oArr.forEach(c => {
+					if (minArr.length === length) {
+						minArr = [];
+					}
+					if (minArr.length === 0) {
+						arr.push(minArr);
+					}
+					minArr.push(c);
+				});
+
+				return arr;
+			},
+			jump(path, query) {
+				this.$yrouter.push({
+					path,
+					query,
+				});
+			},
+		}
+	}
 </script>
 
 
 <style lang="scss" scoped>
-    .group-goods {
-        position: relative;
-        z-index: 9;
-    }
-
-    .swiper-box,
-    .carousel {
-        width: 700rpx;
-        height: 240upx;
-        position: relative;
-        border-radius: 20rpx;
-
-        .carousel-item {
-            width: 100%;
-            height: 100%;
-            // padding: 0 28upx;
-            overflow: hidden;
-        }
-
-        .swiper-image {
-            width: 100%;
-            height: 100%;
-            // border-radius: 10upx;
-            background: #ccc;
-        }
-    }
-
-    .swiper-dots {
-        display: flex;
-        position: absolute;
-        left: 50%;
-        transform: translateX(-50%);
-        bottom: 0rpx;
-        z-index: 66;
-
-        .dot {
-            width: 45rpx;
-            height: 3rpx;
-            background: #eee;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-
-        .dot-active {
-            width: 45rpx;
-            height: 3rpx;
-            background: #a8700d;
-            border-radius: 50%;
-            margin-right: 10rpx;
-        }
-    }
-
-    // 今日必拼+限时抢购
-    .group-goods {
-        background: #fff;
-        border-radius: 20rpx;
-        overflow: hidden;
-
-        .title-box {
-            padding-bottom: 20rpx;
-
-            .title {
-                font-size: 32rpx;
-                font-weight: bold;
-            }
-
-            .group-people {
-                .time-box {
-                    font-size: 26rpx;
-                    color: #edbf62;
-
-                    .count-text-box {
-                        width: 30rpx;
-                        height: 34rpx;
-                        background: #edbf62;
-                        text-align: center;
-                        line-height: 34rpx;
-                        font-size: 24rpx;
-                        border-radius: 6rpx;
-                        color: rgba(#fff, 0.9);
-                        margin: 0 8rpx;
-                    }
-                }
-
-                .head-box {
-                    .head-img {
-                        width: 40rpx;
-                        height: 40rpx;
-                        border-radius: 50%;
-                        background: #ccc;
-                    }
-                }
-
-                .tip {
-                    font-size: 28rpx;
-                    padding-left: 30rpx;
-                    color: #666;
-                }
-
-                .cuIcon-right {
-                    font-size: 30rpx;
-                    line-height: 28rpx;
-                    color: #666;
-                }
-            }
-        }
-
-        .goods-box {
-            .goods-item {
-                margin-right: 22rpx;
-
-                &:nth-child(4n) {
-                    margin-right: 0;
-                }
-            }
-        }
-        .min-goods{
-            margin-right: 22rpx;
-
-        }
-    }
+	.group-goods {
+		position: relative;
+		z-index: 9;
+	}
+
+	.swiper-box,
+	.carousel {
+		width: 700rpx;
+		height: 240upx;
+		position: relative;
+		border-radius: 20rpx;
+
+		.carousel-item {
+			width: 100%;
+			height: 100%;
+			// padding: 0 28upx;
+			overflow: hidden;
+		}
+
+		.swiper-image {
+			width: 100%;
+			height: 100%;
+			// border-radius: 10upx;
+			background: #ccc;
+		}
+	}
+
+	.swiper-dots {
+		display: flex;
+		position: absolute;
+		left: 50%;
+		transform: translateX(-50%);
+		bottom: 0rpx;
+		z-index: 66;
+
+		.dot {
+			width: 45rpx;
+			height: 3rpx;
+			background: #eee;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+
+		.dot-active {
+			width: 45rpx;
+			height: 3rpx;
+			background: #a8700d;
+			border-radius: 50%;
+			margin-right: 10rpx;
+		}
+	}
+
+	// 今日必拼+限时抢购
+	.group-goods {
+		background: #fff;
+		border-radius: 20rpx;
+		overflow: hidden;
+
+		.title-box {
+			padding-bottom: 20rpx;
+
+			.title {
+				font-size: 32rpx;
+				font-weight: bold;
+			}
+
+			.group-people {
+				.time-box {
+					font-size: 26rpx;
+					color: #edbf62;
+
+					.count-text-box {
+						width: 30rpx;
+						height: 34rpx;
+						background: #edbf62;
+						text-align: center;
+						line-height: 34rpx;
+						font-size: 24rpx;
+						border-radius: 6rpx;
+						color: rgba(#fff, 0.9);
+						margin: 0 8rpx;
+					}
+				}
+
+				.head-box {
+					.head-img {
+						width: 40rpx;
+						height: 40rpx;
+						border-radius: 50%;
+						background: #ccc;
+					}
+				}
+
+				.tip {
+					font-size: 28rpx;
+					padding-left: 30rpx;
+					color: #666;
+				}
+
+				.cuIcon-right {
+					font-size: 30rpx;
+					line-height: 28rpx;
+					color: #666;
+				}
+			}
+		}
+
+		.goods-box {
+			.goods-item {
+				margin-right: 22rpx;
+
+				&:nth-child(4n) {
+					margin-right: 0;
+				}
+			}
+		}
+
+		.min-goods {
+			margin-right: 22rpx;
+
+		}
+	}
 </style>
diff --git a/pages/home/components/PromoteProduct.vue b/pages/home/components/PromoteProduct.vue
index 1cb219a..97bb564 100644
--- a/pages/home/components/PromoteProduct.vue
+++ b/pages/home/components/PromoteProduct.vue
@@ -1,43 +1,43 @@
 <template>
-    <view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
-        <view class="title-box x-bc" @tap="$yrouter.push('/pages/shop/GoodsPromotion/index')">
-            <text class="title">促销单品</text>
-            <view class="group-people x-f">
-                <text class="tip">更多</text>
-                <text class="cuIcon-right"></text>
-            </view>
-        </view>
-        <view class="goods-box swiper-box x-f">
-            <swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
-                <swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
-                    <view class="goods-list-box x-f">
-                        <block v-for="mgoods in goods" :key="mgoods.id">
-                            <view class="min-goods"
-                                @tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })">
-                                <view class="img-box">
-                                    <view class="tag">促销</view>
-                                    <image class="img" :src="mgoods.image" mode="widthFix"></image>
-                                </view>
-                                <view class="price-box">
-                                    <view class="y-f">
-                                        <text class="seckill-current">日常价：￥{{  mgoods.price  }}</text>
-                                        <text class="original">仅剩：{{ mgoods.stock }}{{ mgoods.unitName }}</text>
-                                    </view>
-                                </view>
-                                <view class="title">
-                                    <slot name="titleText"></slot>
-                                </view>
-                            </view>
-                        </block>
-                    </view>
-                </swiper-item>
-            </swiper>
-            <view class="swiper-dots" v-if="goodsList.length > 1">
-                <text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
-                    :key="index"></text>
-            </view>
-        </view>
-    </view>
+	<view class="group-goods pa20 mx20 mb10" v-if="detail.length>0">
+		<view class="title-box x-bc" @tap="$yrouter.push('/pages/shop/GoodsPromotion/index')">
+				<text class="title">促销单品</text>
+				<view class="group-people x-f">
+						<text class="tip">更多</text>
+						<text class="cuIcon-right"></text>
+				</view>
+		</view>
+		<view class="goods-box swiper-box x-f">
+			<swiper class="carousel" circular @change="swiperChange" :autoplay="true" duration="2000">
+					<swiper-item v-for="(goods, index) in goodsList" :key="index" class="carousel-item">
+							<view class="goods-list-box x-f">
+									<block v-for="mgoods in goods" :key="mgoods.id">
+											<view class="min-goods"
+													@tap="$yrouter.push({ path: '/pages/shop/GoodsCon/index', query: { id: item.id } })">
+													<view class="img-box">
+															<view class="tag">促销</view>
+															<image class="img" :src="mgoods.image" mode="widthFix"></image>
+													</view>
+													<view class="price-box">
+															<view class="y-f">
+																	<text class="seckill-current">日常价：￥{{  mgoods.price  }}</text>
+																	<text class="original">仅剩：{{ mgoods.stock }}{{ mgoods.unitName }}</text>
+															</view>
+													</view>
+													<view class="title">
+															<slot name="titleText"></slot>
+													</view>
+											</view>
+									</block>
+							</view>
+					</swiper-item>
+			</swiper>
+			<view class="swiper-dots" v-if="goodsList.length > 1">
+					<text :class="swiperCurrent === index ? 'dot-active' : 'dot'" v-for="(dot, index) in goodsList.length"
+							:key="index"></text>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
diff --git a/pages/home/index-copy.vue b/pages/home/index-copy.vue
new file mode 100644
index 0000000..7931680
--- /dev/null
+++ b/pages/home/index-copy.vue
@@ -0,0 +1,435 @@
+<template>
+  <view class="index">
+		<view class="header header-search acea-row row-center-wrapper">
+		  <view @click="goGoodSearch()" class="search acea-row row-middle">
+		    <text class="iconfont icon-xiazai5"></text>
+		    搜索商品
+		  </view>
+		  <!-- #ifndef H5 -->
+		  <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
+		    <image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
+		  </view>
+		  <!-- #endif -->
+		</view>
+    <view v-for="(item, index) in homeData" :key="index">
+     <!-- <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
+        <cu-custom :isBack="true" :bgColor="bgcolor">
+          <block slot="backText">
+            <text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text>
+          </block>
+        </cu-custom>
+      </view> -->
+      <Banner v-if="item.type == 'banner'" :detail="item.componentContent.bannerData" @getbgcolor="getbgcolor"></Banner>
+      <uni-notice-bar v-if="item.type == 'noticeBar'" scrollable="true" @click="goRoll(item.componentContent.roll[0])" single="true" :speed="10" showIcon="true" :text="item.componentContent.roll[0].info"></uni-notice-bar>
+      <view class="content_box home_content_box" v-if="item.type == 'menu' && item.componentContent.menus">
+        <!-- 菜单 -->
+        <Menu :list="item.componentContent.menus"></Menu>
+      </view>
+      <!-- 滚动新闻 -->
+      <!-- 广告 -->
+      <Adv v-if="item.type == 'adv' && item.componentContent.detail" :detail="item.componentContent.detail" />
+      <!-- 热门榜单 -->
+      <HotCommodity v-if="item.type == 'hotCommodity'" :detail="likeInfo"></HotCommodity>
+      <!-- 超值拼团 -->
+      <Groupon v-if="item.type == 'groupon'" :detail="combinationList" />
+      <!-- 首发新品->秒杀 -->
+      <FirstNewProduct v-if="item.type == 'firstNewProduct'" :detail="firstList"></FirstNewProduct>
+      <!-- 精品推荐 -->
+      <ProductsRecommended v-if="item.type == 'productsRecommended'" :detail="bastList"></ProductsRecommended>
+      <!-- 促销单品 -->
+      <PromoteProduct v-if="item.type == 'promoteProduct'" :detail="benefit"></PromoteProduct>
+      <!-- 直播 -->
+      <!-- #ifdef MP-WEIXIN -->
+      <Live v-if="item.type == 'liveList'" :detail="liveList"></Live>
+      <!-- #endif -->
+      <!-- 为您推荐 -->
+      <PromotionGood v-if="item.type == 'promotionGood'" :benefit="benefit"></PromotionGood>
+      <Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"> </Coupon-window>
+    </view>
+  </view>
+</template>
+<script>
+import { mapState, mapMutations, mapActions } from 'vuex'
+import GoodList from '@/components/GoodList'
+import PromotionGood from '@/components/PromotionGood'
+import CouponWindow from '@/components/CouponWindow'
+import Menu from '@/components/Menu'
+import UniNoticeBar from '@/components/uni-notice-bar/uni-notice-bar'
+import Adv from '@/components/sh-adv'
+import Groupon from '@/components/sh-groupon.vue'
+
+import Banner from './components/Banner'
+import HotCommodity from './components/HotCommodity'
+import FirstNewProduct from './components/FirstNewProduct'
+import ProductsRecommended from './components/ProductsRecommended'
+import Live from './components/Live'
+
+import { getHomeData, getShare, getCanvas } from '@/api/public'
+import cookie from '@/utils/store/cookie'
+import { isWeixin, handleUrlParam } from '@/utils/index'
+
+import { openShareAll } from '@/libs/wechat'
+
+const HAS_COUPON_WINDOW = 'has_coupon_window'
+
+export default {
+  name: 'Index',
+  components: {
+    // swiper,
+    // swiperSlide,
+    UniNoticeBar,
+    GoodList,
+    PromotionGood,
+    CouponWindow,
+    Menu,
+    Adv,
+    Groupon,
+    Banner,
+    HotCommodity,
+    FirstNewProduct,
+    ProductsRecommended,
+    Live,
+  },
+  props: {},
+  data: function() {
+    return {
+      homeData: [],
+      CustomBar: this.CustomBar,
+      StatusBar: this.StatusBar,
+      formatMenus: [],
+      categoryCurrent: 0,
+      menuNum: 4,
+      bgcolor: '',
+      bgColor: '',
+      swiperCurrent: 0, //轮播下标
+      webviewId: 0,
+      showCoupon: false,
+      logoUrl: '',
+      banner: [],
+      menus: [],
+      combinationList: [],
+      roll: [],
+      activity: [],
+      activityOne: {},
+      bastList: [],
+      firstList: [],
+      info: {
+        fastList: [],
+        bastBanner: [],
+
+        bastList: [],
+      },
+      likeInfo: [],
+      live: [],
+      lovely: [],
+      benefit: [],
+      couponList: [],
+      swiperOption: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000,
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true,
+      },
+      swiperRoll: {
+        direction: 'vertical',
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000,
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true,
+      },
+      swiperScroll: {
+        freeMode: true,
+        freeModeMomentum: false,
+        slidesPerView: 'auto',
+        observer: true,
+        observeParents: true,
+      },
+      swiperBoutique: {
+        pagination: {
+          el: '.swiper-pagination',
+          clickable: true,
+        },
+        autoplay: {
+          disableOnInteraction: false,
+          delay: 2000,
+        },
+        loop: true,
+        speed: 1000,
+        observer: true,
+        observeParents: true,
+      },
+      swiperProducts: {
+        freeMode: true,
+        freeModeMomentum: false,
+        slidesPerView: 'auto',
+        observer: true,
+        observeParents: true,
+      },
+      bgImage: '',
+    }
+  },
+  computed: {
+    singNew() {
+      return this.roll.length > 0 ? this.roll[0] : '你还没添加通知哦！'
+    },
+    customStyle() {
+      var bgImage = this.bgImage
+      // var style = `height:${this.CustomBar}px;padding-top:${0}px;background: ${this.bgcolor}`;
+      var style = `height:${this.CustomBar}px;padding-top:${this.StatusBar}px;background: ${this.bgcolor}`
+      if (this.bgImage) {
+        style = `${style}background-image:url(${bgImage});`
+      }
+      return style
+    },
+  },
+  onLoad: function() {
+    this.getLocation()
+    let that = this
+    // uni.showLoading({
+    //   title: "加载中",
+    // });
+    getCanvas()
+      .then(res => {})
+      .catch(error => {
+        this.homeData = JSON.parse(error.data.json)
+        console.log(this.homeData)
+      })
+    getHomeData().then(res => {
+      that.logoUrl = res.data.logoUrl
+      res.data.banner.map(item => (item.bgcolor = item.color || ''))
+      that.$set(that, 'info', res.data.info)
+      that.$set(that, 'firstList', res.data.firstList)
+      that.$set(that, 'bastList', res.data.bastList)
+      that.$set(that, 'likeInfo', res.data.likeInfo)
+      that.$set(that, 'live', res.data.liveList)
+      that.$set(that, 'lovely', res.data.lovely)
+      that.$set(that, 'benefit', res.data.benefit)
+      that.$set(that, 'couponList', res.data.couponList)
+      that.$set(that, 'combinationList', res.data.combinationList)
+      uni.hideLoading()
+      that.setOpenShare()
+      // that.doColorThief()
+    })
+  },
+  methods: {
+    ...mapActions(['getLocation']),
+    onShareTimeline: function() {
+      return {
+        title: this.miniHomeRemark,
+        imageUrl: this.miniHomeImg,
+        path: 'pages/home/index?spread=' + uni.getStorageSync('uid'),
+      }
+    },
+    onShareAppMessage: function() {
+      return {
+        title: this.miniHomeRemark,
+        imageUrl: this.miniHomeImg,
+        path: 'pages/home/index?spread=' + uni.getStorageSync('uid'),
+      }
+    },
+    goRoll(item) {
+      if (item.uniapp_url) {
+        this.$yrouter.push(item.uniapp_url)
+      }
+    },
+    goGoodSearch() {
+      // this.$yrouter.push('/pages/shop/GoodsEvaluate/index');
+      this.$yrouter.push('/pages/shop/GoodSearch/index')
+    },
+    goWxappUrl(item) {
+      this.$yrouter.push(item.uniapp_url)
+    },
+    goHotNewGoods(type) {
+      this.$yrouter.push({
+        path: '/pages/shop/HotNewGoods/index',
+        query: {
+          type,
+        },
+      })
+    },
+    goGoodsCon(item) {
+      this.$yrouter.push({
+        path: '/pages/shop/GoodsCon/index',
+        query: {
+          id: item.id,
+        },
+      })
+    },
+    goGoodsPromotion() {
+      this.$yrouter.push('/pages/shop/GoodsPromotion/index')
+    },
+    setOpenShare: function() {
+      if (this.$deviceType == 'weixin') {
+        getShare().then(res => {
+          var data = res.data.data
+          var configAppMessage = {
+            desc: data.synopsis,
+            title: data.title,
+            link: location.href,
+            imgUrl: data.img,
+          }
+          openShareAll(configAppMessage)
+        })
+      }
+    },
+    startQr: function() {
+      uni.scanCode({
+        success: res => {
+          let option = handleUrlParam(res.result)
+          switch (option.pageType) {
+            case 'good':
+              // 跳转商品详情
+              this.$yrouter.push({
+                path: '/pages/shop/GoodsCon/index',
+                query: {
+                  q: res.result,
+                },
+              })
+              break
+            case 'group':
+              // 跳转团购
+              this.$yrouter.push({
+                path: '/pages/activity/GroupRule/index',
+                query: {
+                  q: res.result,
+                },
+              })
+              break
+            case 'dargain':
+              // 跳转砍价
+              this.$yrouter.push({
+                path: '/pages/activity/DargainDetails/index',
+                query: {
+                  q: res.result,
+                },
+              })
+              break
+            default:
+              // 跳转分销
+              this.$yrouter.push({
+                path: '/pages/Loading/index',
+                query: {},
+              })
+              break
+          }
+        },
+      })
+    },
+    getbgcolor(e) {
+      this.bgcolor = e
+    },
+  },
+  created: async function() {
+    // await this.doColorThief();
+  },
+}
+</script>
+<style scoped lang="less">
+.content_box {
+  background: #f3f3f3;
+}
+.index {
+  background-color: #f3f3f3;
+}
+.swiper-item {
+  height: 100%;
+}
+.fixed-header {
+  position: fixed;
+  z-index: 99;
+  // #ifdef H5
+  top: 88rpx;
+  // #endif
+	
+  // #ifndef H5
+  top: 0;
+  // #endif
+  left: 0;
+  right: 0;
+  background: #fff;
+  box-shadow: 0 0 20rpx -10rpx #aaa;
+
+  & + .fixed-header-box {
+    height: 98rpx;
+  }
+}
+
+.head_box {
+  width: 750rpx;
+  // background: #fff;
+  transition: all linear 0.3s;
+
+  /deep/.cuIcon-back {
+    display: none;
+  }
+
+  .nav-title {
+    font-size: 38rpx;
+    font-family: PingFang SC;
+    font-weight: 500;
+    color: #fff;
+  }
+}
+
+.cu-bar.fixed {
+  position: fixed;
+  width: 100%;
+  top: 0;
+  z-index: 1024;
+  // box-shadow: 0 1upx 6upx rgba(0, 0, 0, 0.1);
+}
+
+.cu-bar {
+  box-sizing: border-box;
+  .index .header {
+    height: 64rpx;
+  }
+}
+
+.header-search {
+  transition: all linear 0.3s;
+	background: #fff;
+	.search{
+		border: 2rpx solid #EA533E;
+		background-color: #fff;
+	}
+}
+
+.cu-bar .action {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  max-height: 100%;
+
+  &:first-child {
+    margin-left: 15px;
+    font-size: 15px;
+  }
+}
+
+.home_content_box {
+  margin-top: -20rpx;
+}
+
+.head_box {
+}
+
+.nav-title {
+  margin-left: 20rpx;
+  line-height: 40px;
+}
+</style>
diff --git a/pages/home/index.vue b/pages/home/index.vue
index 39a6084..6150992 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -1,52 +1,139 @@
 <template>
   <view class="index">
-    <view v-for="(item, index) in homeData" :key="index">
-      <view class="head_box" v-if="item.type == 'header'" :style="{ background: bgcolor }" :class="{ active: bgcolor }">
-        <cu-custom :isBack="true" :bgColor="bgcolor">
-          <block slot="backText">
-            <text class="nav-title shopro-selector-rect">{{ item.componentContent.title }}</text>
-          </block>
-        </cu-custom>
-      </view>
-      <view class="header header-search acea-row row-center-wrapper" v-if="item.type == 'search'" :style="{ background: bgcolor }">
-        <view @click="goGoodSearch()" class="search acea-row row-middle">
-          <text class="iconfont icon-xiazai5"></text>
-          搜索商品
-        </view>
-        <!-- #ifndef H5 -->
-        <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
-          <image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
-        </view>
-        <!-- #endif -->
-      </view>
-      <Banner v-if="item.type == 'banner'" :detail="item.componentContent.bannerData" @getbgcolor="getbgcolor"></Banner>
-      <uni-notice-bar v-if="item.type == 'noticeBar'" scrollable="true" @click="goRoll(item.componentContent.roll[0])" single="true" :speed="10" showIcon="true" :text="item.componentContent.roll[0].info"></uni-notice-bar>
-      <view class="content_box home_content_box" v-if="item.type == 'menu' && item.componentContent.menus">
-        <!-- 菜单 -->
-        <Menu :list="item.componentContent.menus"></Menu>
-      </view>
-      <!-- 滚动新闻 -->
-      <!-- 广告 -->
-      <Adv v-if="item.type == 'adv' && item.componentContent.detail" :detail="item.componentContent.detail" />
-      <!-- 热门榜单 -->
-      <HotCommodity v-if="item.type == 'hotCommodity'" :detail="likeInfo"></HotCommodity>
-      <!-- 超值拼团 -->
-      <Groupon v-if="item.type == 'groupon'" :detail="combinationList" />
-      <!-- 首发新品->秒杀 -->
-      <FirstNewProduct v-if="item.type == 'firstNewProduct'" :detail="firstList"></FirstNewProduct>
-      <!-- 精品推荐 -->
-      <ProductsRecommended v-if="item.type == 'productsRecommended'" :detail="bastList"></ProductsRecommended>
-      <!-- 促销单品 -->
-      <PromoteProduct v-if="item.type == 'promoteProduct'" :detail="benefit"></PromoteProduct>
-      <!-- 直播 -->
-      <!-- #ifdef MP-WEIXIN -->
-      <Live v-if="item.type == 'live'" :detail="live"></Live>
-      <!-- #endif -->
-      <!-- 为您推荐 -->
-      <PromotionGood v-if="item.type == 'promotionGood'" :benefit="benefit"></PromotionGood>
-      <Coupon-window :coupon-list="couponList" v-if="showCoupon" @checked="couponClose" @close="couponClose"> </Coupon-window>
-    </view>
-  </view>
+		<view class="header header-search acea-row row-center-wrapper">
+		  <view @click="goGoodSearch()" class="search acea-row row-middle">
+		    <text class="iconfont icon-xiazai5"></text>
+		    搜索商品
+		  </view>
+		  <!-- #ifndef H5 -->
+		  <view class="qr" @click="startQr()" v-if="$deviceType !== 'weixin'">
+		    <image :src="`${$VUE_APP_RESOURCES_URL}/images/qr.png`" />
+		  </view>
+		  <!-- #endif -->
+		</view>
+		<view class="banner-box">
+			<image src="../../static/home-banner.png" mode=""></image>
+		</view>
+		<!-- 每日一签 -->
+		<view class="today-fortune-content">
+			<view class="today-fortune-box">
+				<view class="top-box acea-row row-between-wrapper">
+					<view class="title">今日·宜忌</view>
+					<view>2021年06月07日</view>
+				</view>
+				<view class="date-box acea-row row-middle">
+					<view class="date-btn prev-btn"><image src="../../static/prev.png"></image></view>
+					<view class="time-box">四月二十四</view>
+					<view class="date-btn next-btn"><image src="../../static/next.png"></image></view>
+				</view>
+				<view class="week-box">
+					<span class="week">星期一</span>
+					<span>辛丑牛年 甲午月 丙戌日</span>
+				</view>
+				<view class="fortune-detail">
+					<view class="fortune-n acea-row-nowrap mt20">
+						<view class="fortune-icon nice">宜</view>
+						<view class="fortune">安机械 移徙 入宅 出行 祭祀 祈福 动土祭祀 祈福 动土</view>
+					</view>
+					<view class="fortune-b acea-row-nowrap mt20">
+						<view class="fortune-icon bad">忌</view>
+						<view class="fortune">开市 伐木 作梁 作灶 </view>
+					</view>
+				</view>
+				<view class="qiuqian-box">
+					<image class="qiuqian-bg" src="../../static/qiuqian-bg.png"></image>
+					<view class="txt-box acea-row row-between-wrapper">
+						<view>今日还没有求签哦！</view>
+						<view class="qiuqin-btn">每日一签</view>
+					</view>
+				</view>
+			</view>
+			<view class="fortune-menu-box acea-row row-around">
+				<view class="fortune-menu-item acea-row row-middle ">
+					<image src="../../static/f-menu1.png" mode=""></image>
+					<text>周公解梦</text>
+				</view>
+				<view class="fortune-menu-item acea-row row-middle">
+					<image src="../../static/f-menu2.png" mode=""></image>
+					<text>周易八卦</text>
+				</view>
+				<view class="fortune-menu-item acea-row row-middle">
+					<image src="../../static/f-menu3.png" mode=""></image>
+					<text>八字财运</text>
+				</view>
+			</view>
+		</view>
+		<!-- 推荐课程 -->
+		<view class="recommend-box p30">
+			<view class="title-box acea-row row-between-wrapper">
+				<view class="title">今日推荐</view>
+				<view class="more">查看全部课程</view>
+			</view>
+			<view class="recommend-list-box acea-row">
+				<view class="recommend-item" v-for="item in 4" :key="index">
+					<view class="img-box"><image src="../../static/img2.png"></image></view>
+					<view class="course-content">
+						<view class="course-title line1">【一代天骄·王者少年】</view>
+						<view class="course-tips-box acea-row">
+							<view class="course-tip-item blue">国学</view>
+							<view class="course-tip-item yellow">商学院</view>
+						</view>
+						<view class="price">￥199</view>
+						<view class="course-address acea-row row-between-wrapper">
+							<view class="address">中国 武汉</view>
+							<view class="course-time">2021 5 31-6.3</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- 学习榜 -->
+		<view class="study-list-box">
+			<view class="title-box acea-row row-between-wrapper">
+				<view class="title">学习榜单</view>
+				<view class="more">查看全部榜单</view>
+			</view>
+			<view class="study-list uni-padding-wrap uni-common-mt">
+				<scroll-view class="scroll-view_H" scroll-x="true">
+						<view class="study-item scroll-view-item_H" v-for="(item,index) in 6" :key="index">
+							<view class="day-box acea-row row-middle">
+								<image src="../../static/date-icon.png" mode="" v-if="index%2 == 0"></image>
+								<image src="../../static/date-icon2.png" mode="" v-if="index%2 != 0"></image>
+								<text>20</text>
+							</view>
+							<view class="study-content">
+								<view class="study-title">连续11天打卡站桩</view>
+								<view class="study-time acea-row row-between-wrapper">
+									<view>5.28开始</view>
+									<view>280人已参与</view>
+								</view>
+							</view>
+						</view>
+				</scroll-view>
+			</view>
+		</view>
+		<!-- 都在看 -->
+		<view class="readyarticle-box">
+			<view class="title-box acea-row row-between-wrapper">
+				<view class="title">大家都在看</view>
+				<view class="more">查看全部文章</view>
+			</view>
+			<view class="article-list">
+				<view class="article-item">
+					<image src="../../static/article1.png" mode=""></image>
+					<view class="article-content">
+						<view class="article-title line1">《满愿手抄经》礼盒，中国的传家手礼盒，中国的传家手礼盒，中国的传家手抄…</view>
+						<view class="article-desc line1">抱朴书院孕育自华夏优秀传统文书院孕育自华夏优秀传统书院孕育自华夏优秀传统化…</view>
+						<view class="author-box acea-row">
+							<view class="author">商学院·琴</view>
+							<view class="time">2021.5.28</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="no-more">没有更多内容了～</view>
+	</view>
 </template>
 <script>
 import { mapState, mapMutations, mapActions } from 'vuex'
@@ -205,7 +292,6 @@ export default {
       .catch(error => {
         this.homeData = JSON.parse(error.data.json)
         console.log(this.homeData)
-        console.log(222)
       })
     getHomeData().then(res => {
       that.logoUrl = res.data.logoUrl
@@ -339,24 +425,22 @@ export default {
 </script>
 <style scoped lang="less">
 .content_box {
-  background: #f6f6f6;
+  background: #F5F6F7;
 }
-
 .index {
-  background-color: #f6f6f6;
+  background-color: #F5F6F7;
+	padding-bottom: 68rpx;
 }
-
 .swiper-item {
   height: 100%;
 }
-
 .fixed-header {
   position: fixed;
   z-index: 99;
   // #ifdef H5
   top: 88rpx;
   // #endif
-
+	
   // #ifndef H5
   top: 0;
   // #endif
@@ -364,11 +448,332 @@ export default {
   right: 0;
   background: #fff;
   box-shadow: 0 0 20rpx -10rpx #aaa;
-
   & + .fixed-header-box {
     height: 98rpx;
   }
 }
+.banner-box{
+	width: 100%;
+	height: 372rpx;
+}
+.today-fortune-content{
+	width: 100%;
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	margin-bottom: 40rpx;
+	
+	.today-fortune-box{
+		width: 100%;
+		background: #fff;
+		box-sizing: border-box;
+		padding: 30rpx 40rpx;
+		border-radius: 20rpx;
+		box-shadow: 0px 6px 14px 0px rgba(124,124,124,0.08);
+		font-size: 24rpx;
+		position: relative;
+		top: -24rpx;
+	}
+	.date-box{
+		font-size: 72rpx;
+		color: #EA533E;
+		margin-top: 38rpx;
+		.time-box{
+			margin: 0 24rpx;
+		}
+		.date-btn{
+			width: 84rpx;
+			height: 84rpx;
+			font-weight: bold;
+			line-height: 100rpx;
+		}
+	}
+	.week-box{
+		width: 100%;
+		color: #7C7C7C;
+		text-align: center;
+		border-bottom: 1px solid #ECECEC;
+		padding: 30rpx 0;
+		.week{
+			display: inline-block;
+			margin-right: 12rpx;
+			color: #222;
+		}
+	}
+	.fortune-detail{
+		font-size: 30rpx;
+		color: #222;
+		.fortune-n{
+			color:#EA533E;
+		}
+		.fortune-icon{
+			width: 44rpx;
+			height: 44rpx;
+			text-align: center;
+			line-height: 44rpx;
+			border-radius: 25px;
+			font-size: 28rpx;
+			color: #fff;
+			margin-right: 20rpx;
+		}
+		.fortune{
+			width:calc(100% - 70rpx)
+		}
+		.nice{
+			background: #EA533E;
+		}
+		.bad{
+			background: #8FB85B;
+		}
+	}
+	.qiuqian-box{
+		width: 100%;
+		height: 124rpx;
+		position: relative;
+		margin-top: 40rpx;
+		image{
+			width: 100%;
+			height: 100%;
+			position: absolute;
+			z-index: 1;
+		}
+		.txt-box{
+			width: 100%;
+			height: 100%;
+			padding:0 28rpx;
+			box-sizing: border-box;
+			font-size: 30rpx;
+			color: #EA533E;
+			position: absolute;
+			z-index: 3;
+		}
+		.qiuqin-btn{
+			width: 194rpx;
+			height: 68rpx;
+			background: linear-gradient(180deg, #EA533E 0%, #E5270F 100%);
+			box-shadow: 0px 4rpx 6rpx 2rpx rgba(255,213,208,0.59);
+			border-radius: 34rpx;
+			font-size: 32rpx;
+			color: #fff;
+			text-align: center;
+			line-height: 68rpx;
+		}
+	}
+	.fortune-menu-box{
+		.fortune-menu-item{
+			width: 216rpx;
+			height: 88rpx;
+			border-radius: 6rpx;
+			background: #fff;
+			font-size: 28rpx;
+			color: #222;
+			image{
+				width: 60rpx;
+				height: 60rpx;
+				margin-right: 12rpx;
+			}
+		}
+	}
+		
+}
+
+.p30{
+	width: 100%;
+	padding: 0 30rpx;
+	box-sizing: border-box;
+	margin-bottom: 40rpx;
+}
+.recommend-box{
+	.recommend-list-box{
+		width: 100%;
+		.recommend-item{
+			width: 334rpx;
+			background: #fff;
+			border-radius: 10rpx;
+			font-size: 28rpx;
+			color: #333;
+			margin: 20rpx 18rpx 20rpx 0;
+			image{
+				width: 334rpx;
+				height: 216rpx;
+			}
+			.course-content{
+				width: 100%;
+				box-sizing: border-box;
+				padding:0 20rpx 20rpx;
+			}
+			.course-title{
+				line-height: 40rpx;
+			}
+			.course-tips-box{
+				margin-top: 12rpx;
+				font-size: 24rpx;
+				color: #999;
+				.course-tip-item{
+					min-width: 60rpx;
+					height: 34rpx;
+					line-height: 32rpx;
+					text-align: center;
+					background: #EDEFF8;
+					border-radius: 4rpx;
+					border: 1px solid #6E85EB;
+					padding: 0 6rpx;
+					font-size: 22rpx;
+					margin-right: 20rpx;
+					box-sizing: border-box;
+					margin-right: 20rpx;
+				}
+				.blue{
+					color: #6E85EB;
+					background: #EDEFF8;
+					border-color: #6E85EB;
+				}
+				.yellow{
+					color: #F99C10;
+					background: #FFEDCC;
+					border-color: #F99C10;
+				}
+			}
+			.price{
+				font-size: 32rpx;
+				color: #EA533E;
+				font-weight: 500;
+				margin: 16rpx 0;
+			}
+			.course-address{
+				font-size: 24rpx;
+				color: #999999;
+			}
+		}
+		.recommend-item:nth-child(2n){
+			margin-right: 0;
+		}
+	}
+	
+}
+.study-list-box,.readyarticle-box{
+	margin-bottom: 40rpx;
+	.title-box{
+		width: 100%;
+		padding: 0 30rpx;
+		box-sizing: border-box;
+	}
+}
+.study-list{
+	width: 100%;
+	margin-top: 20rpx;
+	margin-bottom: 40rpx;
+	padding-left: 20rpx;
+	box-sizing: border-box;
+	.scroll-view_H{
+		white-space: nowrap;
+		width: 100%;
+	}
+	.study-item{
+		width: 334rpx;
+		height: 180rpx;
+		display: inline-block;
+		background: linear-gradient(143deg, #FDAF97 0%, #ED5E48 100%);
+		box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
+		border-radius: 10rpx;
+		margin-right: 20rpx;
+		.day-box{
+			color: #E73D21;
+			font-size: 48rpx;
+			line-height: 58rpx;
+			margin-left: 10rpx;
+			image{
+				width: 34rpx;
+				height: 34rpx;
+				margin-right: 10rpx;
+			}
+		}
+		.study-content{
+			width: calc(100% - 12rpx);
+			background: #fff;
+			font-size: 24rpx;
+			color: #999;
+			box-shadow: 0px 4rpx 8rpx 4rpx rgba(250,194,183,0.32);
+			border-radius: 10rpx;
+			margin: 2rpx auto;
+			padding:16rpx 10rpx 10rpx;
+			box-sizing: border-box;
+			.study-title{
+				font-size: 28rpx;
+				font-weight: 500;
+				color: #222222;
+				line-height: 40rpx;
+				margin-bottom: 12rpx;
+			}
+		}
+	}
+	.study-item:nth-child(2n){
+		background: linear-gradient(143deg, #C4DBFF 0%, #7FAAF2 100%);
+		.day-box{
+			color: #557AB3;
+		}
+	}
+}
+.readyarticle-box{
+	.article-list{
+		width: 100%;
+		margin-top: 20rpx;
+		.article-item{
+			width: 100%;
+			background: #fff;
+			padding: 20rpx;
+			box-sizing: border-box;
+			image{
+				width: 710rpx;
+				height: 266rpx;
+				border-radius: 10rpx;
+				margin-bottom: 20rpx;
+			}
+			.article-title{
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #333333;
+				line-height: 50rpx;
+				margin-bottom: 8rpx;
+			}
+			.article-desc{
+				font-size: 24rpx;
+				font-weight: 400;
+				color: #999999;
+				line-height: 40rpx;
+				margin-bottom: 30rpx;
+				text-indent: 1em;
+			}
+			.author-box{
+				font-size: 24rpx;
+				color: #999;
+				text-indent: 1em;
+				.author{
+					color: #EA533E;
+					margin-right: 12rpx;
+				}
+			}
+		}
+	}
+}
+.title-box{
+	color: #222;
+	.title{
+		font-size: 40rpx;
+	}
+	.more{
+		font-size: 24rpx;
+		color: #999;
+	}
+}
+image{
+	width: 100%;
+	height: 100%;
+}
+.no-more{
+	text-align: center;
+	color: #999;
+	font-size: 24rpx;
+}
 
 .head_box {
   width: 750rpx;
@@ -397,17 +802,19 @@ export default {
 
 .cu-bar {
   box-sizing: border-box;
-
   .index .header {
     height: 64rpx;
-    // width: 100%;
-    // padding: 0 30rpx;
-    // box-sizing: border-box;
   }
 }
 
 .header-search {
   transition: all linear 0.3s;
+	background: #fff;
+	color: #999999;
+	.search{
+		border: 2rpx solid #EA533E;
+		background-color: #fff;
+	}
 }
 
 .cu-bar .action {
diff --git a/pages/knowledge/components/secondMenu.vue b/pages/knowledge/components/secondMenu.vue
new file mode 100644
index 0000000..b8d04e5
--- /dev/null
+++ b/pages/knowledge/components/secondMenu.vue
@@ -0,0 +1,65 @@
+<template>
+	<view class="second-menu-box acea-row">
+		 <view 
+		 class="menu-item"
+		 :class="[item.id === active ? 'menu-item-active':'']"
+		 v-for="(item,index) in menuList" 
+		 :key="index" 
+		 @click="menuClick(index,item)">{{item.categoryName}}</view>
+	</view>
+</template>
+
+<script>
+	export default{
+		props:{
+			menuList:{
+				type:Array,
+				default:[]
+			},
+			active:{
+				type: Number,
+				default() {
+				    return 0;
+				}
+			}
+		},
+		data(){
+			return {
+				
+			}
+		},
+		created() {
+			// console.log(this.menuList)
+		},
+		mounted() {
+			// console.log(this.menuList)
+		},
+		methods:{
+			menuClick(index,item){
+				this.$emit('secondMenuClick',item)
+			},
+		}
+	}
+</script>
+
+<style scoped lang="less">
+.second-menu-box{
+	width: 100%;
+	margin-bottom: 40rpx;
+	.menu-item{
+		min-width: 76rpx;
+		height: 62rpx;
+		box-sizing: border-box;
+		padding: 6rpx 20rpx;
+		font-size: 32rpx;
+		background: #F6F7F8;
+		border-radius: 14rpx;
+		color: #222;
+		margin-right: 24rpx;
+	}
+	.menu-item-active{
+		color: #EB5744;
+		background: #FFEAE7;
+	}
+}
+</style>
diff --git a/pages/knowledge/detail.vue b/pages/knowledge/detail.vue
new file mode 100644
index 0000000..7e36a44
--- /dev/null
+++ b/pages/knowledge/detail.vue
@@ -0,0 +1,113 @@
+<template>
+	<view class="article-detail-index">
+		<view class="article-title">{{detail.title}}</view>
+		<view class="author-box acea-row row-middle">
+			<view class="charge-type">免费</view>
+			<view class="add-time">{{detail.addTime}}</view>
+			<view>·{{detail.author}}</view>
+		</view>
+		<view class="d-line"></view>
+		<view class="audio-box">
+			<luchAudio :src="detail.audio" :play.sync="audioPlay"></luchAudio>
+		</view>
+		<view class="content-box">
+			<rich-text :nodes="detail.content"></rich-text>
+		</view>
+	</view>
+</template>
+
+<script>
+import { getArticleDetails } from '@/api/knowledge';
+import luchAudio from '@/components/luch-audio/luch-audio.vue';
+export default{
+	components: { luchAudio },
+	data(){
+		return {
+			id:8,
+			current: {
+				poster: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-uni-app-doc/7fbf26a0-4f4a-11eb-b680-7980c8a877b8.png',
+				name: '致爱丽丝',
+				author: '暂无',
+				src: 'https://bjetxgzv.cdn.bspapp.com/VKCEYUGU-hello-uniapp/2cc220e0-c27a-11ea-9dfb-6da8e309e0d8.mp3',
+			},
+			audioAction: {
+				method: 'pause'
+			},
+			detail:null,
+			audioPlay:true
+		}
+	},
+	created() {
+		
+		getArticleDetails(this.id).then((res)=>{
+			console.log(res)
+			if(res.success){
+				this.detail = res.data
+				var music = null;
+				music = uni.createInnerAudioContext(); //创建播放器对象
+				music.src= res.data.audio; //选择播放的音频
+				music.play(); //执行播放
+			}
+		})
+	},
+	mounted() {
+		// console.log(this.menuList)
+	},
+	methods:{
+		
+	}
+}
+</script>
+
+<style lang="less" scoped>
+.article-detail-index{
+	width: 100%;
+	box-sizing: border-box;
+	padding: 32rpx;
+	background: #fff;
+	.d-line{
+		width: 100%;
+		position: absolute;
+		height: 1px;
+		background: #ECECEC;
+		top: 228rpx;
+		left: 0;
+	}
+	.article-title{
+		font-size: 40rpx;
+		font-weight: 500;
+		color: #333333;
+		line-height: 56rpx;
+	}
+	.author-box{
+		font-size: 24rpx;
+		color: #999;
+		padding: 20rpx 0 30rpx;
+		// border-bottom: 1px solid #ECECEC;
+		.charge-type{
+			min-width: 60rpx;
+			height: 34rpx;
+			line-height: 32rpx;
+			color: #6E85EB;
+			text-align: center;
+			background: #EDEFF8;
+			border-radius: 4rpx;
+			border: 1px solid #6E85EB;
+			padding: 0 6rpx;
+			font-size: 22rpx;
+			margin-right: 20rpx;
+			box-sizing: border-box;
+		}
+	}
+	.audio-box{
+		margin: 30rpx 0 40rpx;
+		audio{
+			width: 100%;
+		}
+	}
+	.content-box{
+		width: 100%;
+		overflow: hidden;
+	}
+}
+</style>
diff --git a/pages/knowledge/index.vue b/pages/knowledge/index.vue
new file mode 100644
index 0000000..c0f83be
--- /dev/null
+++ b/pages/knowledge/index.vue
@@ -0,0 +1,214 @@
+<template>
+		<view class="konwledge-index">
+			<wuc-tab 
+				:tab-list="tabList"
+				:tabCur.sync="TabCur" 
+				@change="tabChange"
+				tab-class="text-center text-black bg-white" select-class="text-orange text-xl">
+			 </wuc-tab>
+			 <view class="content-box">
+				 <view class="introduce-box acea-row">
+					 <view class="left-box"></view>
+					 <view class="right-box">
+						 <view class="title-txt">国学介绍</view>
+						 <view class="desc">
+							 <text>抱朴书院孕育自华夏优秀传统文化，以“博学致用抱朴含虚”为院训，以“弘扬国粹，利益社会”为动力。</text>
+						 </view>
+					 </view>
+				 </view>
+				 <SecondMenu 
+					 :menuList="secondMenu" 
+					 :active.sync="active"  
+					 @secondMenuClick="secondMenuClick">
+				 </SecondMenu>
+				 <view class="knowledge-list">
+					 <view class="knowledge-item acea-row" v-for="item in articleList" @click="toDetail(item.id)">
+						 <view class="img-box">
+							 <image :src="item.imageInput" mode=""></image>
+						 </view>
+						 <view class="knowledge-info-box">
+							<view class="title line1">{{item.title}}</view>
+							<view class="intro line2">{{item.synopsis}}</view>
+							<view class="type-box acea-row">
+								<view class="tip blue">{{item.chargeType == 0 ? '免费' : item.articleCharge}}</view>
+								<view class="time">{{item.addTime}}</view>
+							</view>
+						 </view>
+					 </view>
+				 </view>
+			 </view>
+		</view>
+</template>
+
+<script>
+	import WucTab from '@/components/wuc-tab/wuc-tab.vue';
+	import SecondMenu from './components/secondMenu.vue';
+	import { getCategory,getArticle } from '@/api/knowledge';
+	export default {
+		data() {
+			return {
+				TabCur: null,
+				tabList: [],
+				secondMenu:[],
+				active:null,
+				articleList:[]
+			}
+		},
+		components: { WucTab,SecondMenu },
+		onLoad() {
+			getCategory().then((res)=>{
+				this.tabList = res.data
+				this.$set(this, 'tabList', res.data)
+				this.$set(this, 'secondMenu', res.data[0].categoryList)
+				this.$set(this, 'TabCur', res.data[0].id)
+				if(res.data[0].categoryList.length > 0){
+					this.$set(this, 'active', res.data[0].categoryList[0].id)
+				}
+			}).then(()=>{
+				this.getArticle()
+			})
+		},
+		methods: {
+			toDetail(id){
+				this.$yrouter.push({
+				  path: '/pages/knowledge/detail',
+				  query: {
+				    id: id,
+				  },
+				})
+			},
+			getArticle(){
+				var cid = null;
+				this.active == null ? cid = this.TabCur : cid = this.active
+				getArticle({cid:cid}).then((res)=>{
+					if(res.success){
+						this.articleList = res.data
+					}
+				})
+			},
+			tabChange(item) {
+				if(item.categoryList.length > 0){
+					this.$set(this, 'active', item.categoryList[0].id)
+				}
+				this.secondMenu = item.categoryList;
+				this.TabCur = item.id;
+				this.getArticle()
+			},
+			secondMenuClick(item){
+				this.active = item.id;
+				this.getArticle()
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+.konwledge-index{
+	background: #fff;
+	min-height: 100%;
+	.content-box{
+		width: 100%;
+		box-sizing: border-box;
+		padding: 0 24rpx;
+	}
+	.introduce-box{
+		width: 100%;
+		height: 328rpx;
+		box-shadow: 0px 6rpx 14rpx 8rpx rgba(255,234,231,0.2);
+		border-radius: 8px;
+		overflow: hidden;
+		margin: 30rpx 0;
+		.left-box{
+			width: 16rpx;
+			height: 100%;
+			background: #FAEFED;
+		}
+		.right-box{
+			width: calc(100% - 16rpx);
+			padding: 30rpx 50rpx 0 24rpx;
+			font-size: 26rpx;
+			color: #999;
+			.title-txt{
+				font-size: 36rpx;
+				font-weight: 500;
+				color: #3C464F;
+				line-height: 50rpx;
+				font-weight: 600;
+				margin-bottom: 20rpx;
+			}
+			.desc{
+				text-indent: 1em;
+			}
+		}
+	}
+	
+	.knowledge-list{
+		width: 100%;
+		.knowledge-item{
+			border-bottom: 1px solid #ECECEC;
+			padding-bottom: 20rpx;
+			margin-bottom: 20rpx;
+			.img-box{
+				width: 204rpx;
+				height: 200rpx;
+				margin-right: 30rpx;
+				image{
+					width: 100%;
+					height: 100%;
+				}
+			}
+			.knowledge-info-box{
+				width: calc(100% - 234rpx);
+				.title{
+					font-size: 28rpx;
+					color: #333;
+					font-size: 500;
+					line-height: 40rpx;
+				}
+				.intro{
+					font-size: 28rpx;
+					color: #999999;
+					line-height: 40rpx;
+					margin: 8rpx 0 36rpx;
+				}
+				.type-box{
+					font-size: 24rpx;
+					color: #999;
+					.tip{
+						width: 60rpx;
+						height: 34rpx;
+						line-height: 32rpx;
+						text-align: center;
+						background: #EDEFF8;
+						border-radius: 4rpx;
+						border: 1px solid #6E85EB;
+						padding: 0 6rpx;
+						font-size: 22rpx;
+						margin-right: 20rpx;
+						box-sizing: border-box;
+					}
+					.blue{
+						color: #6E85EB;
+						background: #EDEFF8;
+						border-color: #6E85EB;
+					}
+					.yellow{
+						color: #F99C10;
+						background: #FFEDCC;
+						border-color: #F99C10;
+					}
+				}
+			}
+		}
+	}
+}
+.text-black{
+	font-size: 32rpx;
+}
+.text-orange{
+	color: #EB5744;
+	font-size: 40rpx !important;
+	border-color: #EB5744;
+}
+	
+</style>
diff --git a/static/60x60.png b/static/60x60.png
deleted file mode 100644
index 6984932..0000000
Binary files a/static/60x60.png and /dev/null differ
diff --git a/static/api.png b/static/api.png
deleted file mode 100644
index 58f93e1..0000000
Binary files a/static/api.png and /dev/null differ
diff --git a/static/apiHL.png b/static/apiHL.png
deleted file mode 100644
index f8cbd7d..0000000
Binary files a/static/apiHL.png and /dev/null differ
diff --git a/static/apiIndex.png b/static/apiIndex.png
deleted file mode 100644
index 890dba5..0000000
Binary files a/static/apiIndex.png and /dev/null differ
diff --git a/static/app-plus/location@3x.png b/static/app-plus/location@3x.png
deleted file mode 100644
index c195e0a..0000000
Binary files a/static/app-plus/location@3x.png and /dev/null differ
diff --git a/static/app-plus/uni@2x.png b/static/app-plus/uni@2x.png
deleted file mode 100644
index 8e3a80f..0000000
Binary files a/static/app-plus/uni@2x.png and /dev/null differ
diff --git a/static/article1.png b/static/article1.png
new file mode 100644
index 0000000..09ac648
Binary files /dev/null and b/static/article1.png differ
diff --git a/static/c1.png b/static/c1.png
deleted file mode 100644
index 9d38fdc..0000000
Binary files a/static/c1.png and /dev/null differ
diff --git a/static/c2.png b/static/c2.png
deleted file mode 100644
index ce956d7..0000000
Binary files a/static/c2.png and /dev/null differ
diff --git a/static/c3.png b/static/c3.png
deleted file mode 100644
index 216202a..0000000
Binary files a/static/c3.png and /dev/null differ
diff --git a/static/c4.png b/static/c4.png
deleted file mode 100644
index fb8b477..0000000
Binary files a/static/c4.png and /dev/null differ
diff --git a/static/c5.png b/static/c5.png
deleted file mode 100644
index 310bfb1..0000000
Binary files a/static/c5.png and /dev/null differ
diff --git a/static/c6.png b/static/c6.png
deleted file mode 100644
index c3c45d8..0000000
Binary files a/static/c6.png and /dev/null differ
diff --git a/static/c7.png b/static/c7.png
deleted file mode 100644
index a1e7390..0000000
Binary files a/static/c7.png and /dev/null differ
diff --git a/static/c8.png b/static/c8.png
deleted file mode 100644
index c32633c..0000000
Binary files a/static/c8.png and /dev/null differ
diff --git a/static/c9.png b/static/c9.png
deleted file mode 100644
index 51bcf6a..0000000
Binary files a/static/c9.png and /dev/null differ
diff --git a/static/compass.png b/static/compass.png
deleted file mode 100644
index fba87a5..0000000
Binary files a/static/compass.png and /dev/null differ
diff --git a/static/component.png b/static/component.png
deleted file mode 100644
index fbb116d..0000000
Binary files a/static/component.png and /dev/null differ
diff --git a/static/componentHL.png b/static/componentHL.png
deleted file mode 100644
index 31f83a0..0000000
Binary files a/static/componentHL.png and /dev/null differ
diff --git a/static/componentIndex.png b/static/componentIndex.png
deleted file mode 100644
index 8ad0534..0000000
Binary files a/static/componentIndex.png and /dev/null differ
diff --git a/static/date-icon.png b/static/date-icon.png
new file mode 100644
index 0000000..eb5f9c2
Binary files /dev/null and b/static/date-icon.png differ
diff --git a/static/date-icon2.png b/static/date-icon2.png
new file mode 100644
index 0000000..6ada311
Binary files /dev/null and b/static/date-icon2.png differ
diff --git a/static/extui.png b/static/extui.png
deleted file mode 100644
index 7508e08..0000000
Binary files a/static/extui.png and /dev/null differ
diff --git a/static/extuiHL.png b/static/extuiHL.png
deleted file mode 100644
index 612b499..0000000
Binary files a/static/extuiHL.png and /dev/null differ
diff --git a/static/extuiIndex.png b/static/extuiIndex.png
deleted file mode 100644
index dd4d963..0000000
Binary files a/static/extuiIndex.png and /dev/null differ
diff --git a/static/f-menu1.png b/static/f-menu1.png
new file mode 100644
index 0000000..139fe28
Binary files /dev/null and b/static/f-menu1.png differ
diff --git a/static/f-menu2.png b/static/f-menu2.png
new file mode 100644
index 0000000..936ee9b
Binary files /dev/null and b/static/f-menu2.png differ
diff --git a/static/f-menu3.png b/static/f-menu3.png
new file mode 100644
index 0000000..7945055
Binary files /dev/null and b/static/f-menu3.png differ
diff --git a/static/home-banner.png b/static/home-banner.png
new file mode 100644
index 0000000..7a026bb
Binary files /dev/null and b/static/home-banner.png differ
diff --git a/static/img1.png b/static/img1.png
new file mode 100644
index 0000000..531eb30
Binary files /dev/null and b/static/img1.png differ
diff --git a/static/img2.png b/static/img2.png
new file mode 100644
index 0000000..983787d
Binary files /dev/null and b/static/img2.png differ
diff --git a/static/live-logo.gif b/static/live-logo.gif
deleted file mode 100644
index a155913..0000000
Binary files a/static/live-logo.gif and /dev/null differ
diff --git a/static/location.png b/static/location.png
deleted file mode 100644
index c195e0a..0000000
Binary files a/static/location.png and /dev/null differ
diff --git a/static/logo.png b/static/logo.png
deleted file mode 100644
index b5771e2..0000000
Binary files a/static/logo.png and /dev/null differ
diff --git a/static/next.png b/static/next.png
new file mode 100644
index 0000000..f43dbbb
Binary files /dev/null and b/static/next.png differ
diff --git a/static/prev.png b/static/prev.png
new file mode 100644
index 0000000..4b38c5f
Binary files /dev/null and b/static/prev.png differ
diff --git a/static/qiuqian-bg.png b/static/qiuqian-bg.png
new file mode 100644
index 0000000..556181a
Binary files /dev/null and b/static/qiuqian-bg.png differ
diff --git a/static/saoyisao-icon.png b/static/saoyisao-icon.png
new file mode 100644
index 0000000..614f9df
Binary files /dev/null and b/static/saoyisao-icon.png differ
diff --git a/static/shuijiao.jpg b/static/shuijiao.jpg
deleted file mode 100644
index b654b9c..0000000
Binary files a/static/shuijiao.jpg and /dev/null differ
diff --git a/static/suosou.png b/static/suosou.png
new file mode 100644
index 0000000..fe4224e
Binary files /dev/null and b/static/suosou.png differ
diff --git a/static/tab1.png b/static/tab1.png
new file mode 100644
index 0000000..db33fb8
Binary files /dev/null and b/static/tab1.png differ
diff --git a/static/tab2.png b/static/tab2.png
new file mode 100644
index 0000000..f5a0e69
Binary files /dev/null and b/static/tab2.png differ
diff --git a/static/tab3.png b/static/tab3.png
new file mode 100644
index 0000000..c5a9398
Binary files /dev/null and b/static/tab3.png differ
diff --git a/static/tab4.png b/static/tab4.png
new file mode 100644
index 0000000..dc58483
Binary files /dev/null and b/static/tab4.png differ
diff --git a/static/tab5.png b/static/tab5.png
new file mode 100644
index 0000000..2469930
Binary files /dev/null and b/static/tab5.png differ
diff --git a/static/uni.png b/static/uni.png
deleted file mode 100644
index 8e3a80f..0000000
Binary files a/static/uni.png and /dev/null differ