diff --git a/common/nvue.css b/common/nvue.css
new file mode 100644
index 0000000..ce4cd70
--- /dev/null
+++ b/common/nvue.css
@@ -0,0 +1,53 @@
+.uni-pd {
+	padding-left: 30upx;
+	padding-top: 20upx;
+	padding-bottom: 20upx;
+	background-color: #EEEEEE;
+}
+.uni-padding-wrap{
+	padding:0 30upx;
+}
+.uni-list-cell {
+	position: relative;
+	display: flex;
+	margin-top: 5upx;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	background-color: #FBFBFB;
+}
+.uni-label {
+	width: 210upx;
+	word-wrap: break-word;
+	word-break: break-all;
+	text-indent:20upx;
+}
+.uni-list-cell-db{
+	flex: 1;
+	padding-left: 20upx;
+}
+.uni-input {
+	height: 50upx;
+	flex: 1;
+}
+.uni-common-mt{
+	margin-top:30upx;
+}
+.uni-btn-v{
+	padding:10upx 0;
+}
+.btn {
+	height: 100upx;
+	border-width: 2upx;
+	border-style: solid;
+	border-color: rgb(162, 217, 192);
+	background-color: rgba(162, 217, 192, 0.2);
+	border-radius: 5upx;
+	display:inline-block;
+	margin-top: 20upx;
+	text-align: center;
+	line-height: 100upx;
+}
+.uni-center{
+	text-align:center;
+}
\ No newline at end of file
diff --git a/common/uni-nvue.css b/common/uni-nvue.css
new file mode 100644
index 0000000..80c7050
--- /dev/null
+++ b/common/uni-nvue.css
@@ -0,0 +1,181 @@
+/* #ifndef APP-PLUS-NVUE */
+page {
+	min-height: 100%;
+	height: auto;
+}
+
+/* #endif */
+
+/* 解决头条小程序字体图标不显示问题，因为头条运行时自动插入了span标签，且有全局字体 */
+/* #ifdef MP-TOUTIAO */
+text :not(view) {
+	font-family: uniicons;
+}
+
+/* #endif */
+
+.uni-icon {
+	font-family: uniicons;
+	font-weight: normal;
+}
+
+.uni-bg-red {
+	background-color: #F76260;
+	color: #FFF;
+}
+
+.uni-bg-green {
+	background-color: #09BB07;
+	color: #FFF;
+}
+
+.uni-bg-blue {
+	background-color: #007AFF;
+	color: #FFF;
+}
+
+.uni-container {
+	flex: 1;
+	padding: 15px;
+	background-color: #f8f8f8;
+}
+
+.uni-padding-lr {
+	padding-left: 15px;
+	padding-right: 15px;
+}
+
+.uni-padding-tb {
+	padding-top: 15px;
+	padding-bottom: 15px;
+}
+
+.uni-header-logo {
+	padding: 15px 15px;
+	flex-direction: column;
+	justify-content: center;
+	align-items: center;
+	margin-top: 10upx;
+}
+
+.uni-header-image {
+	width: 80px;
+	height: 80px;
+}
+
+.uni-hello-text {
+	margin-bottom: 20px;
+}
+
+.hello-text {
+	color: #7A7E83;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.hello-link {
+	color: #7A7E83;
+	font-size: 14px;
+	line-height: 20px;
+}
+
+.uni-panel {
+	margin-bottom: 12px;
+}
+
+.uni-panel-h {
+	background-color: #ffffff;
+	flex-direction: row;
+	align-items: center;
+	padding: 12px;
+}
+
+/*
+.uni-panel-h:active {
+    background-color: #f8f8f8;
+}
+ */
+.uni-panel-h-on {
+	background-color: #f0f0f0;
+}
+
+.uni-panel-text {
+	flex: 1;
+	color: #000000;
+	font-size: 14px;
+	font-weight: normal;
+}
+
+.uni-panel-icon {
+	margin-left: 15px;
+	color: #999999;
+	font-size: 14px;
+	font-weight: normal;
+	transform: rotate(0deg);
+	transition-duration: 0s;
+	transition-property: transform;
+}
+
+.uni-panel-icon-on {
+	transform: rotate(180deg);
+}
+
+.uni-navigate-item {
+	flex-direction: row;
+	align-items: center;
+	background-color: #FFFFFF;
+	border-top-style: solid;
+	border-top-color: #f0f0f0;
+	border-top-width: 1px;
+	padding: 12px;
+}
+
+.uni-navigate-item:active {
+	background-color: #f8f8f8;
+}
+
+.uni-navigate-text {
+	flex: 1;
+	color: #000000;
+	font-size: 14px;
+	font-weight: normal;
+}
+
+.uni-navigate-icon {
+	margin-left: 15px;
+	color: #999999;
+	font-size: 14px;
+	font-weight: normal;
+}
+
+.uni-list-cell {
+	position: relative;
+	flex-direction: row;
+	justify-content: flex-start;
+	align-items: center;
+}
+
+.uni-list-cell-pd {
+	padding: 22upx 30upx;
+}
+
+.flex-r {
+	flex-direction: row;
+}
+
+.flex-c {
+	flex-direction: column;
+}
+
+.a-i-c {
+	align-items: center;
+}
+
+.j-c-c {
+	justify-content: center;
+}
+
+.list-item {
+	flex-direction: row;
+	padding: 10px;
+}
diff --git a/common/uni.css b/common/uni.css
new file mode 100644
index 0000000..0cb2e28
--- /dev/null
+++ b/common/uni.css
@@ -0,0 +1,1706 @@
+@font-face {
+	font-family: uniicons;
+	font-weight: normal;
+	font-style: normal;
+	src: url('https://img-cdn-qiniu.dcloud.net.cn/fonts/uni.ttf') format('truetype');
+}
+
+/*通用 */
+view {
+	font-size: 28upx;
+	line-height: 1.8;
+}
+
+progress,
+checkbox-group {
+	width: 100%;
+}
+
+form {
+	width: 100%;
+}
+
+.uni-flex {
+	display: flex;
+	flex-direction: row;
+}
+
+.uni-flex-item {
+	flex: 1;
+}
+
+.uni-row {
+	flex-direction: row;
+}
+
+.uni-column {
+	flex-direction: column;
+}
+
+.uni-link {
+	color: #576B95;
+	font-size: 26upx;
+}
+
+.uni-center {
+	text-align: center;
+}
+
+.uni-inline-item {
+	display: flex;
+	flex-direction: row;
+	align-items: center;
+}
+
+.uni-inline-item text {
+	margin-right: 20upx;
+}
+
+.uni-inline-item text:last-child {
+	margin-right: 0upx;
+	margin-left: 20upx;
+}
+
+/* page */
+
+.uni-page-head {
+	padding: 35upx;
+	text-align: center;
+}
+
+.uni-page-head-title {
+	display: inline-block;
+	padding: 0 40upx;
+	font-size: 30upx;
+	height: 88upx;
+	line-height: 88upx;
+	color: #BEBEBE;
+	box-sizing: border-box;
+	border-bottom: 2upx solid #D8D8D8;
+}
+
+.uni-page-body {
+	width: 100%;
+	flex-grow: 1;
+	overflow-x: hidden;
+}
+
+.uni-padding-wrap {
+	width: 690upx;
+	padding: 0 30upx;
+}
+
+.uni-padding-lr {
+	padding-left: 20px;
+	padding-right: 20px;
+}
+
+.uni-word {
+	text-align: center;
+	padding: 200upx 100upx;
+}
+
+.uni-title {
+	font-size: 30upx;
+	font-weight: 500;
+	padding: 20upx 0;
+	line-height: 1.5;
+}
+
+.uni-text {
+	font-size: 28upx;
+}
+
+.uni-title text {
+	font-size: 24upx;
+	color: #888;
+}
+
+.uni-text-gray {
+	color: #ccc;
+}
+
+.uni-text-small {
+	font-size: 24upx;
+}
+
+.uni-common-mb {
+	margin-bottom: 30upx;
+}
+
+.uni-common-pb {
+	padding-bottom: 30upx;
+}
+
+.uni-common-pl {
+	padding-left: 30upx;
+}
+
+.uni-common-mt {
+	margin-top: 30upx;
+}
+
+/* 背景色 */
+.uni-bg-red {
+	background: #F76260;
+	color: #FFF;
+}
+
+.uni-bg-green {
+	background: #09BB07;
+	color: #FFF;
+}
+
+.uni-bg-blue {
+	background: #007AFF;
+	color: #FFF;
+}
+
+/* 标题 */
+.uni-h1 {
+	font-size: 80upx;
+	font-weight: 700;
+}
+
+.uni-h2 {
+	font-size: 60upx;
+	font-weight: 700;
+}
+
+.uni-h3 {
+	font-size: 48upx;
+	font-weight: 700;
+}
+
+.uni-h4 {
+	font-size: 36upx;
+	font-weight: 700;
+}
+
+.uni-h5 {
+	font-size: 28upx;
+	color: #8f8f94;
+}
+
+.uni-h6 {
+	font-size: 24upx;
+	color: #8f8f94;
+}
+
+.uni-bold {
+	font-weight: bold;
+}
+
+/* 文本溢出隐藏 */
+.uni-ellipsis {
+	overflow: hidden;
+	white-space: nowrap;
+	text-overflow: ellipsis;
+}
+
+/* 竖向百分百按钮 */
+.uni-btn-v {
+	padding: 10upx 0;
+}
+
+.uni-btn-v button {
+	margin: 20upx 0;
+}
+
+/* 表单 */
+.uni-form-item {
+	display: flex;
+	padding: 10upx 0;
+}
+
+.uni-form-item .title {
+	padding: 10upx 25upx;
+}
+
+.uni-label {
+	width: 210upx;
+	word-wrap: break-word;
+	word-break: break-all;
+	text-indent: 20upx;
+}
+
+.uni-input {
+	line-height: 50upx;
+	font-size: 28upx;
+	background: #FFF;
+	flex: 1;
+}
+
+radio-group,
+checkbox-group {
+	width: 100%;
+}
+
+radio-group label,
+checkbox-group label {
+	padding-right: 20upx;
+}
+
+.uni-form-item .with-fun {
+	display: flex;
+	flex-wrap: nowrap;
+	background: #FFFFFF;
+}
+
+.uni-form-item .with-fun .uni-icon {
+	width: 40px;
+	height: 80upx;
+	line-height: 80upx;
+	flex-shrink: 0;
+}
+
+/* loadmore */
+.uni-loadmore {
+	height: 80upx;
+	line-height: 80upx;
+	text-align: center;
+	padding-bottom: 30upx;
+}
+
+/*数字角标*/
+.uni-badge,
+.uni-badge-default {
+	font-family: 'Helvetica Neue', Helvetica, sans-serif;
+	font-size: 12px;
+	line-height: 1;
+	display: inline-block;
+	padding: 3px 6px;
+	color: #333;
+	border-radius: 100px;
+	background-color: rgba(0, 0, 0, .15);
+}
+
+.uni-badge.uni-badge-inverted {
+	padding: 0 5px 0 0;
+	color: #929292;
+	background-color: transparent
+}
+
+.uni-badge-primary {
+	color: #fff;
+	background-color: #007aff
+}
+
+.uni-badge-blue.uni-badge-inverted,
+.uni-badge-primary.uni-badge-inverted {
+	color: #007aff;
+	background-color: transparent
+}
+
+.uni-badge-green,
+.uni-badge-success {
+	color: #fff;
+	background-color: #4cd964;
+}
+
+.uni-badge-green.uni-badge-inverted,
+.uni-badge-success.uni-badge-inverted {
+	color: #4cd964;
+	background-color: transparent
+}
+
+.uni-badge-warning,
+.uni-badge-yellow {
+	color: #fff;
+	background-color: #f0ad4e
+}
+
+.uni-badge-warning.uni-badge-inverted,
+.uni-badge-yellow.uni-badge-inverted {
+	color: #f0ad4e;
+	background-color: transparent
+}
+
+.uni-badge-danger,
+.uni-badge-red {
+	color: #fff;
+	background-color: #dd524d
+}
+
+.uni-badge-danger.uni-badge-inverted,
+.uni-badge-red.uni-badge-inverted {
+	color: #dd524d;
+	background-color: transparent
+}
+
+.uni-badge-purple,
+.uni-badge-royal {
+	color: #fff;
+	background-color: #8a6de9
+}
+
+.uni-badge-purple.uni-badge-inverted,
+.uni-badge-royal.uni-badge-inverted {
+	color: #8a6de9;
+	background-color: transparent
+}
+
+/*折叠面板 */
+.uni-collapse-content {
+	height: 0;
+	width: 100%;
+	overflow: hidden;
+}
+
+.uni-collapse-content.uni-active {
+	height: auto;
+}
+
+/*卡片视图 */
+.uni-card {
+	background: #fff;
+	border-radius: 8upx;
+	margin: 20upx 0;
+	position: relative;
+	box-shadow: 0 2upx 4upx rgba(0, 0, 0, .3);
+}
+
+.uni-card-content {
+	font-size: 30upx;
+}
+
+.uni-card-content.image-view {
+	width: 100%;
+	margin: 0;
+}
+
+.uni-card-content-inner {
+	position: relative;
+	padding: 30upx;
+}
+
+.uni-card-footer,
+.uni-card-header {
+	position: relative;
+	display: flex;
+	min-height: 50upx;
+	padding: 20upx 30upx;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.uni-card-header {
+	font-size: 36upx;
+}
+
+.uni-card-footer {
+	color: #6d6d72;
+}
+
+.uni-card-footer:before,
+.uni-card-header:after {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 2upx;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-card-header:after {
+	top: auto;
+	bottom: 0;
+}
+
+.uni-card-media {
+	justify-content: flex-start;
+}
+
+.uni-card-media-logo {
+	height: 84upx;
+	width: 84upx;
+	margin-right: 20upx;
+}
+
+.uni-card-media-body {
+	height: 84upx;
+	display: flex;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+}
+
+.uni-card-media-text-top {
+	line-height: 36upx;
+	font-size: 34upx;
+}
+
+.uni-card-media-text-bottom {
+	line-height: 30upx;
+	font-size: 28upx;
+	color: #8f8f94;
+}
+
+.uni-card-link {
+	color: #007AFF;
+}
+
+/* 列表 */
+.uni-list {
+	background-color: #FFFFFF;
+	position: relative;
+	width: 100%;
+	display: flex;
+	flex-direction: column;
+}
+
+.uni-list:after {
+	position: absolute;
+	z-index: 10;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-list::before {
+	position: absolute;
+	z-index: 10;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-list-cell {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.uni-list-cell-hover {
+	background-color: #eee;
+}
+
+.uni-list-cell-pd {
+	padding: 22upx 30upx;
+}
+
+.uni-list-cell-left {
+	font-size: 28upx;
+	padding: 0 30upx;
+}
+
+.uni-list-cell-db,
+.uni-list-cell-right {
+	flex: 1;
+}
+
+.uni-list-cell::after {
+	position: absolute;
+	z-index: 3;
+	right: 0;
+	bottom: 0;
+	left: 30upx;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-list .uni-list-cell:last-child::after {
+	height: 0upx;
+}
+
+.uni-list-cell-last.uni-list-cell::after {
+	height: 0upx;
+}
+
+.uni-list-cell-divider {
+	position: relative;
+	display: flex;
+	color: #999;
+	background-color: #f7f7f7;
+	padding: 15upx 20upx;
+}
+
+.uni-list-cell-divider::before {
+	position: absolute;
+	right: 0;
+	top: 0;
+	left: 0;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-list-cell-divider::after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0upx;
+	height: 1px;
+	content: '';
+	-webkit-transform: scaleY(.5);
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-list-cell-navigate {
+	font-size: 30upx;
+	padding: 22upx 30upx;
+	line-height: 48upx;
+	position: relative;
+	display: flex;
+	box-sizing: border-box;
+	width: 100%;
+	flex: 1;
+	justify-content: space-between;
+	align-items: center;
+}
+
+.uni-list-cell-navigate {
+	padding-right: 36upx;
+}
+
+.uni-navigate-badge {
+	padding-right: 50upx;
+}
+
+.uni-list-cell-navigate.uni-navigate-right:after {
+	font-family: uniicons;
+	content: '\e583';
+	position: absolute;
+	right: 24upx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.uni-list-cell-navigate.uni-navigate-bottom:after {
+	font-family: uniicons;
+	content: '\e581';
+	position: absolute;
+	right: 24upx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.uni-list-cell-navigate.uni-navigate-bottom.uni-active::after {
+	font-family: uniicons;
+	content: '\e580';
+	position: absolute;
+	right: 24upx;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.uni-collapse.uni-list-cell {
+	flex-direction: column;
+}
+
+.uni-list-cell-navigate.uni-active {
+	background: #eee;
+}
+
+.uni-list.uni-collapse {
+	box-sizing: border-box;
+	height: 0;
+	overflow: hidden;
+}
+
+.uni-collapse .uni-list-cell {
+	padding-left: 20upx;
+}
+
+.uni-collapse .uni-list-cell::after {
+	left: 52upx;
+}
+
+.uni-list.uni-active {
+	height: auto;
+}
+
+/* 三行列表 */
+.uni-triplex-row {
+	display: flex;
+	flex: 1;
+	width: 100%;
+	box-sizing: border-box;
+	flex-direction: row;
+	padding: 22upx 30upx;
+}
+
+.uni-triplex-right,
+.uni-triplex-left {
+	display: flex;
+	flex-direction: column;
+}
+
+.uni-triplex-left {
+	width: 84%;
+}
+
+.uni-triplex-left .uni-title {
+	padding: 8upx 0;
+}
+
+.uni-triplex-left .uni-text,
+.uni-triplex-left .uni-text-small {
+	color: #999999;
+}
+
+.uni-triplex-right {
+	width: 16%;
+	text-align: right;
+}
+
+/* 图文列表 */
+.uni-media-list {
+	padding: 22upx 30upx;
+	box-sizing: border-box;
+	display: flex;
+	width: 100%;
+	flex-direction: row;
+}
+
+.uni-navigate-right.uni-media-list {
+	padding-right: 74upx;
+}
+
+.uni-pull-right {
+	flex-direction: row-reverse;
+}
+
+.uni-pull-right>.uni-media-list-logo {
+	margin-right: 0upx;
+	margin-left: 20upx;
+}
+
+.uni-media-list-logo {
+	height: 84upx;
+	width: 84upx;
+	margin-right: 20upx;
+}
+
+.uni-media-list-logo image {
+	height: 100%;
+	width: 100%;
+}
+
+.uni-media-list-body {
+	height: 84upx;
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	justify-content: space-between;
+	align-items: flex-start;
+	overflow: hidden;
+}
+
+.uni-media-list-text-top {
+	width: 100%;
+	line-height: 36upx;
+	font-size: 30upx;
+}
+
+.uni-media-list-text-bottom {
+	width: 100%;
+	line-height: 30upx;
+	font-size: 26upx;
+	color: #8f8f94;
+}
+
+/* 九宫格 */
+.uni-grid-9 {
+	background: #f2f2f2;
+	width: 750upx;
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+	border-top: 2upx solid #eee;
+}
+
+.uni-grid-9-item {
+	width: 250upx;
+	height: 200upx;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	border-bottom: 2upx solid;
+	border-right: 2upx solid;
+	border-color: #eee;
+	box-sizing: border-box;
+}
+
+.no-border-right {
+	border-right: none;
+}
+
+.uni-grid-9-image {
+	width: 100upx;
+	height: 100upx;
+}
+
+.uni-grid-9-text {
+	width: 250upx;
+	line-height: 4upx;
+	height: 40upx;
+	text-align: center;
+	font-size: 30upx;
+}
+
+.uni-grid-9-item-hover {
+	background: rgba(0, 0, 0, 0.1);
+}
+
+/* 上传 */
+.uni-uploader {
+	flex: 1;
+	flex-direction: column;
+}
+
+.uni-uploader-head {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+}
+
+.uni-uploader-info {
+	color: #B2B2B2;
+}
+
+.uni-uploader-body {
+	margin-top: 16upx;
+}
+
+.uni-uploader__files {
+	display: flex;
+	flex-direction: row;
+	flex-wrap: wrap;
+}
+
+.uni-uploader__file {
+	margin: 10upx;
+	width: 210upx;
+	height: 210upx;
+}
+
+.uni-uploader__img {
+	display: block;
+	width: 210upx;
+	height: 210upx;
+}
+
+.uni-uploader__input-box {
+	position: relative;
+	margin: 10upx;
+	width: 208upx;
+	height: 208upx;
+	border: 2upx solid #D9D9D9;
+}
+
+.uni-uploader__input-box:before,
+.uni-uploader__input-box:after {
+	content: " ";
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	-webkit-transform: translate(-50%, -50%);
+	transform: translate(-50%, -50%);
+	background-color: #D9D9D9;
+}
+
+.uni-uploader__input-box:before {
+	width: 4upx;
+	height: 79upx;
+}
+
+.uni-uploader__input-box:after {
+	width: 79upx;
+	height: 4upx;
+}
+
+.uni-uploader__input-box:active {
+	border-color: #999999;
+}
+
+.uni-uploader__input-box:active:before,
+.uni-uploader__input-box:active:after {
+	background-color: #999999;
+}
+
+.uni-uploader__input {
+	position: absolute;
+	z-index: 1;
+	top: 0;
+	left: 0;
+	width: 100%;
+	height: 100%;
+	opacity: 0;
+}
+
+/*问题反馈*/
+.feedback-title {
+	display: flex;
+	flex-direction: row;
+	justify-content: space-between;
+	align-items: center;
+	padding: 20upx;
+	color: #8f8f94;
+	font-size: 28upx;
+}
+
+.feedback-star-view.feedback-title {
+	justify-content: flex-start;
+	margin: 0;
+}
+
+.feedback-quick {
+	position: relative;
+	padding-right: 40upx;
+}
+
+.feedback-quick:after {
+	font-family: uniicons;
+	font-size: 40upx;
+	content: '\e581';
+	position: absolute;
+	right: 0;
+	top: 50%;
+	color: #bbb;
+	-webkit-transform: translateY(-50%);
+	transform: translateY(-50%);
+}
+
+.feedback-body {
+	background: #fff;
+}
+
+.feedback-textare {
+	height: 200upx;
+	font-size: 34upx;
+	line-height: 50upx;
+	width: 100%;
+	box-sizing: border-box;
+	padding: 20upx 30upx 0;
+}
+
+.feedback-input {
+	font-size: 34upx;
+	height: 50upx;
+	min-height: 50upx;
+	padding: 15upx 20upx;
+	line-height: 50upx;
+}
+
+.feedback-uploader {
+	padding: 22upx 20upx;
+}
+
+.feedback-star {
+	font-family: uniicons;
+	font-size: 40upx;
+	margin-left: 6upx;
+}
+
+.feedback-star-view {
+	margin-left: 20upx;
+}
+
+.feedback-star:after {
+	content: '\e408';
+}
+
+.feedback-star.active {
+	color: #FFB400;
+}
+
+.feedback-star.active:after {
+	content: '\e438';
+}
+
+.feedback-submit {
+	background: #007AFF;
+	color: #FFFFFF;
+	margin: 20upx;
+}
+
+/* input group */
+.uni-input-group {
+	position: relative;
+	padding: 0;
+	border: 0;
+	background-color: #fff;
+}
+
+.uni-input-group:before {
+	position: absolute;
+	top: 0;
+	right: 0;
+	left: 0;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-group:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 0;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row {
+	position: relative;
+	display: flex;
+	flex-direction: row;
+	font-size: 28upx;
+	padding: 22upx 30upx;
+	justify-content: space-between;
+}
+
+.uni-input-group .uni-input-row:after {
+	position: absolute;
+	right: 0;
+	bottom: 0;
+	left: 30upx;
+	height: 2upx;
+	content: '';
+	transform: scaleY(.5);
+	background-color: #c8c7cc;
+}
+
+.uni-input-row label {
+	line-height: 70upx;
+}
+
+/* textarea */
+.uni-textarea {
+	width: 100%;
+	background: #FFF;
+}
+
+.uni-textarea textarea {
+	width: 96%;
+	padding: 18upx 2%;
+	line-height: 1.6;
+	font-size: 28upx;
+	height: 150upx;
+}
+
+/* tab bar */
+.uni-tab-bar {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	overflow: hidden;
+	height: 100%;
+}
+
+.uni-tab-bar .list {
+	width: 750upx;
+	height: 100%;
+}
+
+.uni-swiper-tab {
+	width: 100%;
+	white-space: nowrap;
+	line-height: 100upx;
+	height: 100upx;
+	border-bottom: 1px solid #c8c7cc;
+}
+
+.swiper-tab-list {
+	font-size: 30upx;
+	width: 150upx;
+	display: inline-block;
+	text-align: center;
+	color: #555;
+}
+
+.uni-tab-bar .active {
+	color: #007AFF;
+}
+
+.uni-tab-bar .swiper-box {
+	flex: 1;
+	width: 100%;
+	height: calc(100% - 100upx);
+}
+
+.uni-tab-bar-loading {
+	padding: 20upx 0;
+}
+
+/* comment */
+.uni-comment {
+	padding: 5rpx 0;
+	display: flex;
+	flex-grow: 1;
+	flex-direction: column;
+}
+
+.uni-comment-list {
+	flex-wrap: nowrap;
+	padding: 10rpx 0;
+	margin: 10rpx 0;
+	width: 100%;
+	display: flex;
+}
+
+.uni-comment-face {
+	width: 70upx;
+	height: 70upx;
+	border-radius: 100%;
+	margin-right: 20upx;
+	flex-shrink: 0;
+	overflow: hidden;
+}
+
+.uni-comment-face image {
+	width: 100%;
+	border-radius: 100%;
+}
+
+.uni-comment-body {
+	width: 100%;
+}
+
+.uni-comment-top {
+	line-height: 1.5em;
+	justify-content: space-between;
+}
+
+.uni-comment-top text {
+	color: #0A98D5;
+	font-size: 24upx;
+}
+
+.uni-comment-date {
+	line-height: 38upx;
+	flex-direction: row;
+	justify-content: space-between;
+	display: flex !important;
+	flex-grow: 1;
+}
+
+.uni-comment-date view {
+	color: #666666;
+	font-size: 24upx;
+	line-height: 38upx;
+}
+
+.uni-comment-content {
+	line-height: 1.6em;
+	font-size: 28upx;
+	padding: 8rpx 0;
+}
+
+.uni-comment-replay-btn {
+	background: #FFF;
+	font-size: 24upx;
+	line-height: 28upx;
+	padding: 5rpx 20upx;
+	border-radius: 30upx;
+	color: #333 !important;
+	margin: 0 10upx;
+}
+
+/* swiper msg */
+.uni-swiper-msg {
+	width: 100%;
+	padding: 12rpx 0;
+	flex-wrap: nowrap;
+	display: flex;
+}
+
+.uni-swiper-msg-icon {
+	width: 50upx;
+	margin-right: 20upx;
+}
+
+.uni-swiper-msg-icon image {
+	width: 100%;
+	flex-shrink: 0;
+}
+
+.uni-swiper-msg swiper {
+	width: 100%;
+	height: 50upx;
+}
+
+.uni-swiper-msg swiper-item {
+	line-height: 50upx;
+}
+
+/* product */
+.uni-product-list {
+	display: flex;
+	width: 100%;
+	flex-wrap: wrap;
+	flex-direction: row;
+}
+
+.uni-product {
+	padding: 20upx;
+	display: flex;
+	flex-direction: column;
+}
+
+.image-view {
+	height: 330upx;
+	width: 330upx;
+	margin: 12upx 0;
+}
+
+.uni-product-image {
+	height: 330upx;
+	width: 330upx;
+}
+
+.uni-product-title {
+	width: 300upx;
+	word-break: break-all;
+	display: -webkit-box;
+	overflow: hidden;
+	line-height: 1.5;
+	text-overflow: ellipsis;
+	-webkit-box-orient: vertical;
+	-webkit-line-clamp: 2;
+}
+
+.uni-product-price {
+	margin-top: 10upx;
+	font-size: 28upx;
+	line-height: 1.5;
+	position: relative;
+}
+
+.uni-product-price-original {
+	color: #e80080;
+}
+
+.uni-product-price-favour {
+	color: #888888;
+	text-decoration: line-through;
+	margin-left: 10upx;
+}
+
+.uni-product-tip {
+	position: absolute;
+	right: 10upx;
+	background-color: #ff3333;
+	color: #ffffff;
+	padding: 0 10upx;
+	border-radius: 5upx;
+}
+
+/* timeline */
+.uni-timeline {
+	margin: 35upx 0;
+	display: flex;
+	flex-direction: column;
+	position: relative;
+}
+
+
+.uni-timeline-item {
+	display: flex;
+	flex-direction: row;
+	position: relative;
+	padding-bottom: 20upx;
+	box-sizing: border-box;
+	overflow: hidden;
+
+}
+
+.uni-timeline-item .uni-timeline-item-keynode {
+	width: 160upx;
+	flex-shrink: 0;
+	box-sizing: border-box;
+	padding-right: 20upx;
+	text-align: right;
+	line-height: 65upx;
+}
+
+.uni-timeline-item .uni-timeline-item-divider {
+	flex-shrink: 0;
+	position: relative;
+	width: 30upx;
+	height: 30upx;
+	top: 15upx;
+	border-radius: 50%;
+	background-color: #bbb;
+}
+
+
+
+.uni-timeline-item-divider::before,
+.uni-timeline-item-divider::after {
+	position: absolute;
+	left: 15upx;
+	width: 1upx;
+	height: 100vh;
+	content: '';
+	background: inherit;
+}
+
+.uni-timeline-item-divider::before {
+	bottom: 100%;
+}
+
+.uni-timeline-item-divider::after {
+	top: 100%;
+}
+
+
+.uni-timeline-last-item .uni-timeline-item-divider:after {
+	display: none;
+}
+
+.uni-timeline-first-item .uni-timeline-item-divider:before {
+	display: none;
+}
+
+.uni-timeline-item .uni-timeline-item-content {
+	padding-left: 20upx;
+}
+
+.uni-timeline-last-item .bottom-border::after {
+	display: none;
+}
+
+.uni-timeline-item-content .datetime {
+	color: #CCCCCC;
+}
+
+/* 自定义节点颜色 */
+.uni-timeline-last-item .uni-timeline-item-divider {
+	background-color: #1AAD19;
+}
+
+
+/* uni-icon */
+
+.uni-icon {
+	font-family: uniicons;
+	font-size: 24px;
+	font-weight: normal;
+	font-style: normal;
+	line-height: 1;
+	display: inline-block;
+	text-decoration: none;
+	-webkit-font-smoothing: antialiased;
+}
+
+.uni-icon.uni-active {
+	color: #007aff;
+}
+
+.uni-icon-contact:before {
+	content: '\e100';
+}
+
+.uni-icon-person:before {
+	content: '\e101';
+}
+
+.uni-icon-personadd:before {
+	content: '\e102';
+}
+
+.uni-icon-contact-filled:before {
+	content: '\e130';
+}
+
+.uni-icon-person-filled:before {
+	content: '\e131';
+}
+
+.uni-icon-personadd-filled:before {
+	content: '\e132';
+}
+
+.uni-icon-phone:before {
+	content: '\e200';
+}
+
+.uni-icon-email:before {
+	content: '\e201';
+}
+
+.uni-icon-chatbubble:before {
+	content: '\e202';
+}
+
+.uni-icon-chatboxes:before {
+	content: '\e203';
+}
+
+.uni-icon-phone-filled:before {
+	content: '\e230';
+}
+
+.uni-icon-email-filled:before {
+	content: '\e231';
+}
+
+.uni-icon-chatbubble-filled:before {
+	content: '\e232';
+}
+
+.uni-icon-chatboxes-filled:before {
+	content: '\e233';
+}
+
+.uni-icon-weibo:before {
+	content: '\e260';
+}
+
+.uni-icon-weixin:before {
+	content: '\e261';
+}
+
+.uni-icon-pengyouquan:before {
+	content: '\e262';
+}
+
+.uni-icon-chat:before {
+	content: '\e263';
+}
+
+.uni-icon-qq:before {
+	content: '\e264';
+}
+
+.uni-icon-videocam:before {
+	content: '\e300';
+}
+
+.uni-icon-camera:before {
+	content: '\e301';
+}
+
+.uni-icon-mic:before {
+	content: '\e302';
+}
+
+.uni-icon-location:before {
+	content: '\e303';
+}
+
+.uni-icon-mic-filled:before,
+.uni-icon-speech:before {
+	content: '\e332';
+}
+
+.uni-icon-location-filled:before {
+	content: '\e333';
+}
+
+.uni-icon-micoff:before {
+	content: '\e360';
+}
+
+.uni-icon-image:before {
+	content: '\e363';
+}
+
+.uni-icon-map:before {
+	content: '\e364';
+}
+
+.uni-icon-compose:before {
+	content: '\e400';
+}
+
+.uni-icon-trash:before {
+	content: '\e401';
+}
+
+.uni-icon-upload:before {
+	content: '\e402';
+}
+
+.uni-icon-download:before {
+	content: '\e403';
+}
+
+.uni-icon-close:before {
+	content: '\e404';
+}
+
+.uni-icon-redo:before {
+	content: '\e405';
+}
+
+.uni-icon-undo:before {
+	content: '\e406';
+}
+
+.uni-icon-refresh:before {
+	content: '\e407';
+}
+
+.uni-icon-star:before {
+	content: '\e408';
+}
+
+.uni-icon-plus:before {
+	content: '\e409';
+}
+
+.uni-icon-minus:before {
+	content: '\e410';
+}
+
+.uni-icon-circle:before,
+.uni-icon-checkbox:before {
+	content: '\e411';
+}
+
+.uni-icon-close-filled:before,
+.uni-icon-clear:before {
+	content: '\e434';
+}
+
+.uni-icon-refresh-filled:before {
+	content: '\e437';
+}
+
+.uni-icon-star-filled:before {
+	content: '\e438';
+}
+
+.uni-icon-plus-filled:before {
+	content: '\e439';
+}
+
+.uni-icon-minus-filled:before {
+	content: '\e440';
+}
+
+.uni-icon-circle-filled:before {
+	content: '\e441';
+}
+
+.uni-icon-checkbox-filled:before {
+	content: '\e442';
+}
+
+.uni-icon-closeempty:before {
+	content: '\e460';
+}
+
+.uni-icon-refreshempty:before {
+	content: '\e461';
+}
+
+.uni-icon-reload:before {
+	content: '\e462';
+}
+
+.uni-icon-starhalf:before {
+	content: '\e463';
+}
+
+.uni-icon-spinner:before {
+	content: '\e464';
+}
+
+.uni-icon-spinner-cycle:before {
+	content: '\e465';
+}
+
+.uni-icon-search:before {
+	content: '\e466';
+}
+
+.uni-icon-plusempty:before {
+	content: '\e468';
+}
+
+.uni-icon-forward:before {
+	content: '\e470';
+}
+
+.uni-icon-back:before,
+.uni-icon-left-nav:before {
+	content: '\e471';
+}
+
+.uni-icon-checkmarkempty:before {
+	content: '\e472';
+}
+
+.uni-icon-home:before {
+	content: '\e500';
+}
+
+.uni-icon-navigate:before {
+	content: '\e501';
+}
+
+.uni-icon-gear:before {
+	content: '\e502';
+}
+
+.uni-icon-paperplane:before {
+	content: '\e503';
+}
+
+.uni-icon-info:before {
+	content: '\e504';
+}
+
+.uni-icon-help:before {
+	content: '\e505';
+}
+
+.uni-icon-locked:before {
+	content: '\e506';
+}
+
+.uni-icon-more:before {
+	content: '\e507';
+}
+
+.uni-icon-flag:before {
+	content: '\e508';
+}
+
+.uni-icon-home-filled:before {
+	content: '\e530';
+}
+
+.uni-icon-gear-filled:before {
+	content: '\e532';
+}
+
+.uni-icon-info-filled:before {
+	content: '\e534';
+}
+
+.uni-icon-help-filled:before {
+	content: '\e535';
+}
+
+.uni-icon-more-filled:before {
+	content: '\e537';
+}
+
+.uni-icon-settings:before {
+	content: '\e560';
+}
+
+.uni-icon-list:before {
+	content: '\e562';
+}
+
+.uni-icon-bars:before {
+	content: '\e563';
+}
+
+.uni-icon-loop:before {
+	content: '\e565';
+}
+
+.uni-icon-paperclip:before {
+	content: '\e567';
+}
+
+.uni-icon-eye:before {
+	content: '\e568';
+}
+
+.uni-icon-arrowup:before {
+	content: '\e580';
+}
+
+.uni-icon-arrowdown:before {
+	content: '\e581';
+}
+
+.uni-icon-arrowleft:before {
+	content: '\e582';
+}
+
+.uni-icon-arrowright:before {
+	content: '\e583';
+}
+
+.uni-icon-arrowthinup:before {
+	content: '\e584';
+}
+
+.uni-icon-arrowthindown:before {
+	content: '\e585';
+}
+
+.uni-icon-arrowthinleft:before {
+	content: '\e586';
+}
+
+.uni-icon-arrowthinright:before {
+	content: '\e587';
+}
+
+.uni-icon-pulldown:before {
+	content: '\e588';
+}
+
+.uni-icon-scan:before {
+	content: "\e612";
+}
+
+/* 分界线 */
+.uni-divider {
+	height: 110upx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	position: relative;
+}
+
+.uni-divider__content {
+	font-size: 28upx;
+	color: #999;
+	padding: 0 20upx;
+	position: relative;
+	z-index: 101;
+	background: #F4F5F6;
+}
+
+.uni-divider__line {
+	background-color: #CCCCCC;
+	height: 1px;
+	width: 100%;
+	position: absolute;
+	z-index: 100;
+	top: 50%;
+	left: 0;
+	transform: translateY(50%);
+}
diff --git a/common/util.js b/common/util.js
new file mode 100644
index 0000000..1f84e47
--- /dev/null
+++ b/common/util.js
@@ -0,0 +1,108 @@
+function formatTime(time) {
+	if (typeof time !== 'number' || time < 0) {
+		return time
+	}
+
+	var hour = parseInt(time / 3600)
+	time = time % 3600
+	var minute = parseInt(time / 60)
+	time = time % 60
+	var second = time
+
+	return ([hour, minute, second]).map(function (n) {
+		n = n.toString()
+		return n[1] ? n : '0' + n
+	}).join(':')
+}
+
+	
+function formatTimeByDuration(result, timeShowBlock = 1) {
+	let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
+	let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
+	let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
+	
+	if (timeShowBlock === 2)
+		return result = h + ':' + m + ':' + s;
+	else
+		return result = m + ':' + s;
+}
+
+function formatLocation(longitude, latitude) {
+	if (typeof longitude === 'string' && typeof latitude === 'string') {
+		longitude = parseFloat(longitude)
+		latitude = parseFloat(latitude)
+	}
+
+	longitude = longitude.toFixed(2)
+	latitude = latitude.toFixed(2)
+
+	return {
+		longitude: longitude.toString().split('.'),
+		latitude: latitude.toString().split('.')
+	}
+}
+var dateUtils = {
+	UNITS: {
+		'年': 31557600000,
+		'月': 2629800000,
+		'天': 86400000,
+		'小时': 3600000,
+		'分钟': 60000,
+		'秒': 1000
+	},
+	humanize: function (milliseconds) {
+		var humanize = '';
+		for (var key in this.UNITS) {
+			if (milliseconds >= this.UNITS[key]) {
+				humanize = Math.floor(milliseconds / this.UNITS[key]) + key + '前';
+				break;
+			}
+		}
+		return humanize || '刚刚';
+	},
+	format: function (dateStr) {
+		var date = this.parse(dateStr)
+		var diff = Date.now() - date.getTime();
+		if (diff < this.UNITS['天']) {
+			return this.humanize(diff);
+		}
+		var _format = function (number) {
+			return (number < 10 ? ('0' + number) : number);
+		};
+		return date.getFullYear() + '/' + _format(date.getMonth() + 1) + '/' + _format(date.getDay()) + '-' +
+			_format(date.getHours()) + ':' + _format(date.getMinutes());
+	},
+	parse: function (str) { //将"yyyy-mm-dd HH:MM:ss"格式的字符串，转化为一个Date对象
+		var a = str.split(/[^0-9]/);
+		return new Date(a[0], a[1] - 1, a[2], a[3], a[4], a[5]);
+	}
+};
+
+function debounce(func, wait, immediate) {
+    let timeout, result;
+
+    return function() {
+      let context = this;
+      let args = arguments;
+      if (timeout) clearTimeout(timeout);
+
+      let later = function() {
+        timeout = null;
+        if (!immediate) result = func.apply(context, args);
+      };
+
+      let callNow = immediate && !timeout;
+      timeout = setTimeout(later, wait);
+      if (callNow) result = func.apply(this, args);
+
+      return result;
+    };
+  }
+
+export default {
+	formatTime: formatTime,
+	formatLocation: formatLocation,
+	dateUtils: dateUtils,
+	debounce: debounce,
+	formatTimeByDuration: formatTimeByDuration
+}
diff --git a/components/plv-player-skin/drag-tips.nvue b/components/plv-player-skin/drag-tips.nvue
new file mode 100644
index 0000000..071577c
--- /dev/null
+++ b/components/plv-player-skin/drag-tips.nvue
@@ -0,0 +1,95 @@
+
+<template>
+	<view class="plv-player-drag-tips">
+		<view class="plv-player-drag-tips__box">
+			<image class="plv-player-drag-tips__direction-img" :src="imgSrc"
+				@error="imageError">
+			</image>
+			<text class="plv-player-drag-tips__time">
+				{{changeTimeFormat}} / {{durationFormat}}
+			</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import utils from '@/common/util.js';
+	import backImg from '@/static/skin/back.png';
+	import forwardImg from '@/static/skin/forward.png'
+	
+	export default {
+		props: {
+			currentTime: {
+				type: Number
+			},
+			
+			duration: {
+				type: Number
+			},
+			
+			changeTime: {
+				type: Number
+			}
+		},
+		
+		data() {
+			return {
+			  isForward: false
+			}
+		},
+		
+			
+		watch: {
+			changeTime(newValue, oldValue){
+				this.isForward = newValue > oldValue;
+			}
+		},
+		
+		computed: {
+			timeFormatType() {
+				this.duration >= 3600 ? 2 : 1;
+			},
+			
+			changeTimeFormat() {
+				return utils.formatTimeByDuration(this.changeTime, this.timeFormatType);
+			},
+			
+			durationFormat() {
+				return utils.formatTimeByDuration(this.duration, this.timeFormatType)
+			},
+			
+			imgSrc() {
+				return this.isForward ? forwardImg : backImg;
+			}
+		}
+	}
+</script>
+
+<style>
+	.plv-player-drag-tips {
+		width: 250rpx;
+		height: 160rpx;
+		background: rgba(0,0,0,.7);
+		border-radius: 10rpx;
+	}
+	
+	.plv-player-drag-tips__box {
+		position: absolute;
+		top: 0;
+		right: 0;
+		bottom: 0;
+		left: 0;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.plv-player-drag-tips__direction-img {
+		width: 100rpx;
+		height: 100rpx;
+	}
+	
+	.plv-player-drag-tips__time {
+		font-size: 24rpx;
+		color: #FFFFFF;
+	}
+</style>
diff --git a/components/plv-player-skin/gesture.nvue b/components/plv-player-skin/gesture.nvue
new file mode 100644
index 0000000..391a958
--- /dev/null
+++ b/components/plv-player-skin/gesture.nvue
@@ -0,0 +1,271 @@
+<template>
+	<view class="plv-player-gesture"
+		@touchstart="touchstart"
+		@touchmove="touchmove"
+		@longpress="handleLongPress"
+		@touchcancel="handleTouchCancel"
+		@touchend="touchend">
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			// 屏幕宽度（物理像素）
+			holeWidth: Number,
+			// 视频总时长
+			duration: Number,
+			// 视频当前播放时间
+			currentTime: Number
+		},
+		
+		computed: {
+			halfWidth() {
+				return parseInt(this.holeWidth / 2);
+			}
+		},
+		
+		data() {
+			return {
+				// 是否在左区域按下手势
+				downLeft: false,
+				// 滑动方向
+				swipeDir: null
+			}
+		},
+		
+		mounted() {
+			this.addHandler();
+		},
+		
+		methods:{
+			addHandler() {
+				// 增加父容器左右滑动监听
+				let finalTime = -1;
+				// 计算左右滑动seek进度
+				const countTime = (position) => {
+					const { holeWidth, duration, currentTime } = this;
+					const precent = Math.abs(position) / holeWidth;
+					const nowTime = currentTime || 0;
+					const constSecond = duration < 60 ? duration : 60;
+					let plusTime = parseInt(Math.abs(precent * constSecond));
+					if (position < 0) plusTime = plusTime * -1;
+					finalTime = nowTime + plusTime;
+					finalTime = this.limit(finalTime, 0, duration);
+					return finalTime;
+				};
+				
+				this.addGesture((type, position) => {
+					switch (type) {
+						// 下滑
+						case -1:
+							// console.log('//下滑');
+							this.$emit('onGestureEvent', {
+								type: this.downLeft ? 'LEFT_DOWN' : 'RIGHT_DOWN',
+								position
+							});
+						  break;
+						// 上滑
+						case -2:
+							// console.log('//上滑');
+							this.$emit('onGestureEvent', {
+								type: this.downLeft ? 'LEFT_UP' : 'RIGHT_UP',
+								position
+							});
+						  break;
+						// 左滑
+						case 0:
+							// console.log('//左滑');
+							this.swipeDir = type;
+							countTime(position);
+							this.$emit('onGestureEvent', {
+								type: 'SEEK_TIME_UPDATE',
+								finalTime
+							});
+						  break;
+						// 右滑
+						case 1:
+							// console.log('//右滑');
+							this.swipeDir = type;
+							countTime(position);
+							this.$emit('onGestureEvent', {
+								type: 'SEEK_TIME_UPDATE',
+								finalTime
+							});
+						  break;
+						// touchend for swipe
+						case 3:
+							if (this.swipeDir > -1) {
+								this.$emit('onGestureEvent', {
+									type: this.swipeDir ? 'SWIPE_RIGHT' : 'SWIPE_LEFT'
+								});
+								this.swipeDir = -1;
+							}
+
+							if (finalTime > -1) {
+								this.$emit('onGestureSeekTo', finalTime);
+							    finalTime = -1;
+							}
+						  break;
+						// doubleTap
+						case 4:
+							// console.log('>>>> 双击');
+							this.$emit('onGestureEvent', {
+								type: 'DOUBLE_CLICK'
+							});
+						  break;
+						// tap
+						case 5:
+							// console.log('>>>> 单击');
+							this.handleClick();
+						  break;
+						// longTap
+						case 6:
+						  break;
+					}
+				});
+			},
+			
+			addGesture(callback) {
+				const { options } = this;
+				let startX, startY, moveEndX, moveEndY, X, Y, position, hasType;
+				let T, lastTap, isJustTouch = true;
+				
+			
+				const excuteCb = (type) => {
+					// type 手势类型 -2 上滑 -1 下滑 0 左滑  1 右滑  2 just touch 3 touchend 4 doubleTap 5 tap 6 longTap
+					if (callback && typeof callback === 'function')
+						callback(type, position);
+				};
+			
+				const YPlus = 20;
+				const YReduce = YPlus * -1;
+				const XPlus = 50;
+				const XReduce = XPlus * -1;
+			
+				const isXchange = () => {
+					if (X > XPlus || X < XReduce) {
+						position = X;
+						hasType = 'X';
+						isJustTouch = false;
+					}
+
+					if (X > XPlus) excuteCb(1);
+					// 左滑
+					else if (X < XReduce) excuteCb(0);
+				};
+			
+				const isYchange = () => {
+					if (Y > YPlus || Y < YReduce) {
+						position = Y;
+						hasType = 'Y';
+						isJustTouch = false;
+					}
+
+					if (Y > YPlus) excuteCb(-1);
+					// 上滑
+					else if (Y < YReduce) excuteCb(-2);
+				};
+			
+				const countDirect = () => {
+					if (hasType) {
+						hasType === 'X' ? isXchange() : isYchange();
+						return;
+					}
+					isXchange();
+					isYchange();
+				};
+				
+				this.handleTouch = (type, e) => {
+					switch(type) {
+						case 'start':
+							startX = e.changedTouches[0].pageX;
+							startY = e.changedTouches[0].pageY;
+							T = Date.now();
+							hasType = '';
+							isJustTouch = true;
+							this.downLeft = startX < this.halfWidth ? true : false;
+							
+							break;
+						case 'move':
+							moveEndX = e.changedTouches[0].pageX;
+							moveEndY = e.changedTouches[0].pageY;
+							X = moveEndX - startX;
+							Y = moveEndY - startY;
+							countDirect();
+							break;
+						case 'end':
+							if (isJustTouch)
+								if (lastTap && Date.now() - lastTap <= 300)
+									excuteCb(4);
+								else if (Date.now() - T < 1000)
+									excuteCb(5);
+								else
+									excuteCb(6);
+							else
+								excuteCb(3);
+										
+							lastTap = Date.now();
+							isJustTouch = true;
+							break;
+					}
+				};
+			},
+			
+			handleClick() {
+				this.$emit('onGestureClick');
+			},
+			
+			touchstart(e) {
+				this.handleTouch('start', e);
+			},
+			
+			touchmove(e) {
+				this.handleTouch('move', e);
+			},
+			
+			touchend(e) {
+				this.handleTouch('end', e);
+				this.$emit('onTouchEnd');
+			},
+			
+			handleTouchCancel() {
+				this.$emit('onTouchCancel');
+			},
+			
+			handleLongPress() {
+				this.$emit('onLongPress');
+			},
+			
+			/**
+			* 控制最小值，最大值
+			* @param num
+			* @param min
+			* @param max
+			* @returns {*}
+			*/
+			limit(num, min, max) {
+				if (num < min) return min;
+				if (num > max) return max;
+				return num;
+			}
+		}
+	}
+</script>
+
+<style>
+.plv-player-gesture {
+	flex: 1;
+	flex-direction: row;
+}
+
+.plv-player-gesture__left {
+	flex: 5;
+}
+
+.plv-player-gesture__right {
+	flex: 5;
+}
+
+
+</style>
diff --git a/components/plv-player-skin/light.nvue b/components/plv-player-skin/light.nvue
new file mode 100644
index 0000000..325f806
--- /dev/null
+++ b/components/plv-player-skin/light.nvue
@@ -0,0 +1,68 @@
+<template>
+	<view v-if="isShow" class="plv-player-icon">
+		<image class="plv-player-icon__img" :src="imgUrl"></image>
+		<text class="plv-player-icon__text">{{ precent + '%' }}</text>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			imgUrl: {
+				type: 'string',
+				required: true
+			},
+			precent: {
+				type: 'Number',
+				default: 100,
+				required: true
+			}
+		},
+		
+		watch: {
+			precent(num) {
+				if (!this.isShow) this.isShow = true;
+				this.startClock();
+			}
+		},
+
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		
+		methods: {
+			startClock() {
+				this.clearClock();
+				
+				this.clock = setTimeout(() => {
+					this.isShow = false;
+				}, 1500);
+			},
+			
+			clearClock() {
+				if (this.clock) clearTimeout(this.clock);
+				this.clock = null;
+			}
+		}
+	}
+</script>
+
+<style>
+	.plv-player-icon {
+		align-items: center;
+		justify-content: center;
+	}
+	
+	.plv-player-icon__img {
+		width: 80rpx;
+		height: 80rpx;
+	}
+	
+	.plv-player-icon__text {
+		color: #FFFFFF;
+		text-align: center;
+	}
+
+</style>
diff --git a/components/plv-player-skin/skin.nvue b/components/plv-player-skin/skin.nvue
new file mode 100644
index 0000000..737152a
--- /dev/null
+++ b/components/plv-player-skin/skin.nvue
@@ -0,0 +1,1204 @@
+<template>
+	<view class="skin-wrap">
+		<view class="plv-player-comp-box"  :style="{
+			'width': (holeWidth) + 'px'
+		}">
+			<view class="plv-player-longpress-speed" v-if="isInLongPress && !isLock">
+				<image class="plv-player-longpress-speed__image" src="@/static/skin/forward.png"></image>
+				<text class="plv-player-longpress-speed__text">快进x2.0</text>
+			</view>
+			<drag-tips class="plv-player-skin-drag-tips" v-if="showGestureSeekTips" :duration="duration" :changeTime="gestureChangeSeekTime" :currentTime="currentTime"></drag-tips>
+		</view>
+		<gesture class="plv-player-mask"
+			:holeWidth="holeWidth"
+			:duration="duration"
+			:currentTime="currentTime"
+			@onLongPress="handleLongPress"
+			@onTouchCancel="handleTouchCancel"
+			@onGestureClick="handleMask"
+			@onTouchEnd="handleTouchEnd"
+			@onGestureSeekTo="handleSeekTo"
+			@onGestureEvent="handleGEvent">
+		</gesture>
+		<light class="plv-player-light" :imgUrl="lightImg" :precent="lightPrecent"></light>
+		<volume class="plv-player-volume" :imgUrl="volumeImg" :muteImgUrl="volumeMuteImg" :value="volumeValue"></volume>
+		<view class="plv-player-subtitle-view" v-if="isShowSubtitle">
+			<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: topSubtitle.isBold? 'bold' : 'normal', 
+			fontStyle: topSubtitle.isItalic? 'italic' : 'normal', color: topSubtitle.fontColor,
+			backgroundColor: topSubtitle.bgColor, fontSize: topSubtitle.fontSize }">{{topSubtitle.text}}</text>
+			<text v-if="isShowDoubleSubTitle" :style="{ fontWeight: bottomSubtitle.isBold? 'bold' : 'normal', 
+			fontStyle: bottomSubtitle.isItalic? 'italic' : 'normal', color: bottomSubtitle.fontColor,
+			backgroundColor: bottomSubtitle.bgColor, fontSize: bottomSubtitle.fontSize }">{{bottomSubtitle.text}}</text>
+			<text v-else="isShowSingleSubTitle" :style="{ fontWeight: singleSubtitle.isBold? 'bold' : 'normal',
+			fontStyle: singleSubtitle.isItalic? 'italic' : 'normal', color: singleSubtitle.fontColor,
+			backgroundColor: singleSubtitle.bgColor, fontSize: singleSubtitle.fontSize }">{{singleSubtitle.text}}</text>
+		</view>
+		<view class="plv-player-bar" v-if="!selectStatus && showBar && !isLock">
+			<image class="plv-player-bar__bg" :src="bottomBar"></image>
+			<view class="plv-player-bar__box">
+				<view class="plv-player-mr-left"></view>
+				<view class="plv-player-middle">
+					<view class="plv-player-progress">
+						<view class="plv-player-progress__play__wrap">
+							<view class="plv-player-progress__wrap__played"  :style="'flex:' + progressPrecent"></view>
+							<view class="plv-player-progress__wrap__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
+						</view>
+						<view class="plv-player-progress__dot__wrap">
+							<view class="plv-player-progress__dot__box">
+								<view class="plv-player-progress__dot__played" :style="'flex:' + (progressPrecent || 1)">
+									<view class="plv-player-progress__dot"></view>
+								</view>
+								<view class="plv-player-progress__dot__surplus" :style="'flex:' + progressLeftOverPrecent"></view>
+							</view>
+						</view>
+						<view class="plv-player-progress__mask"
+							@touchstart="touchstart"
+							@touchmove="touchmove"
+							@touchend="touchend"></view>
+					</view>
+					<view class="plv-player-bar-bottom">
+						<image class="plv-btn plv-player-play-btn" :src=playBtnLink @click="handlePlay"></image>
+						<view class="plv-player-time">
+							<text class="plv-player-btn__text">{{ currentTimeText }}</text>
+							<text class="plv-player-btn__text"> / </text>
+							<text class="plv-player-btn__text">{{ durationText }}</text>
+						</view>
+						<image class="plv-btn plv-player-full-btn" :src="fullBtnLink" @click="handleFull"></image>
+						<text class="plv-btn plv-player-hd-btn plv-player-btn__text" @click="handleBtn(types.LEVEL)">{{ currentLevelText }}</text>
+						<text class="plv-btn plv-player-rate-btn plv-player-btn__text" @click="handleBtn(types.SPEED)">{{ currentSpeedText }}</text>
+						<text class="plv-btn plv-player-scaling-btn plv-player-btn__text" @click="handleBtn(types.SCALING)">画面</text>
+						<text class="plv-btn plv-player-subtitle-btn plv-player-btn__text"
+						 v-if="isEnableSubTitle" @click="handleBtn(types.SUBTITLE)">字幕</text>
+					</view>
+				</view>
+				<view class="plv-player-mr-right"></view>
+			</view>
+		</view>
+		<view class="plv-player-select" v-if="selectStatus">
+			<view class="plv-player-select__bg"></view>
+			<view class="plv-player-select__option">
+				<text v-for=" (item, index) in selects"
+					:key="index"
+					class="plv-player-select__option__item"
+					:class="{ 'select-option__text': true, active: index === currentOptionIndex}"
+					@click="selectOption(index)">
+					{{ item[0] }}
+				</text>
+			</view>
+		</view>
+		<view class="plv-player-screenshot" v-if="!selectStatus && showBar && !isLock" :style="'bottom:' + screenShotY">
+			<image class="plv-player-screenshot__btn" :src="screenShotImg" @click="$emit('onScreenShot')"></image>
+		</view>
+		<view class="plv-player-lock" v-if="!selectStatus && showBar" :style="'bottom:' + screenShotY">
+			<image class="plv-player-lock__btn" :src="lockImgSrc" @click="isLock = !isLock"></image>
+		</view>
+		
+	</view>
+</template>
+
+<script>
+	import Gesture from './gesture.nvue';
+	import Light from './light.nvue';
+	import Volume from './volume.nvue';
+	import DragTips from '@/components/plv-player-skin/drag-tips.nvue';
+	import LockImg from '@/static/skin/lock.png';
+	import UnLockImg from '@/static/skin/unlock.png';
+	// 部分img 放到了static/skin目录下
+	const imgLink = {
+		play: 'https://play1.polyv.net/player2/demo/uniapp/pause-left-btn.png',
+		pause: 'https://play1.polyv.net/player2/demo/uniapp/play-left-btn.png',
+		full: 'https://play1.polyv.net/player2/demo/uniapp/fullscreen-btn.png',
+		normal: 'https://play1.polyv.net/player2/demo/uniapp/normalscreen-btn.png',
+		bottomBar: 'https://play1.polyv.net/player2/demo/uniapp/bottombar.png',
+		light: 'https://play1.polyv.net/player2/demo/uniapp/light.png',
+		volume: 'https://play1.polyv.net/player2/demo/uniapp/volume.png',
+		mute: 'https://play1.polyv.net/player2/demo/uniapp/mute.png',
+		screenShot: 'https://play1.polyv.net/player2/demo/uniapp/screenShot.png'
+	};
+	
+	export default {
+		components: {
+			Gesture,
+			Light,
+			Volume,
+			DragTips
+		},
+		
+		data() {
+			return {
+				// 是否显示控制栏
+				showBar: true,
+				// 控制栏自动渐隐时间（单位:秒）
+				showBarTime: 10,
+				// 播放状态
+				playStatus: true,
+				// 播放按钮图片
+				playBtnLink: imgLink.play,
+				// 全屏状态
+				fullStatus: false,
+				// 全屏按钮图片
+				fullBtnLink: imgLink.full,
+				// 控制栏渐变背景图
+				bottomBar: imgLink.bottomBar,
+				// 时间显示块
+				timeShowBlock: null,
+				// 当前播放时间
+				currentTime: null,
+				currentTimeText: '00:00',
+				// 总时长
+				duration: null,
+				durationText: null,
+				// 播放进度占总时长百分比
+				precent: 0,
+				// 进度条播放进度计算的百分比
+				progressPrecent: 0,
+				// 进度条播放进度计算的剩余百分比
+				progressLeftOverPrecent: 100,
+				// 是否正在拖拽中
+				isDraging: false,
+				// 选择面板中所有选项
+				selects: [],
+				// 选择面板是否显示中
+				selectStatus: false,
+				// 选择面板选中类型 levels:清晰度 speeds:倍速
+				types: {
+					LEVEL: 'level',
+					SPEED: 'speed',
+					SCALING: 'scaling',
+					SUBTITLE: 'subtitle'
+				},
+				// 当前选中类型
+				type: null,
+				// 可选码率
+				levels: [
+					['自动', 0],
+					['流畅', 1],
+					['高清', 2],
+					['超清', 3]
+				],
+				// 当前码率
+				level: 0,
+				// 点击了自动码率选项
+				selectedHdAuto: false,
+				// 可选倍速
+				speeds: [
+					['0.5x', 0.5],
+					['1x', 1],
+					['1.5x', 1.5],
+					['2x', 2]
+				],
+				// 当前倍速
+				speed: 1,
+				// 亮度图片
+				lightImg: imgLink.light,
+				// 亮度百分比
+				lightPrecent: 0,
+				// 音量图片
+				volumeImg: imgLink.volume,
+				volumeMuteImg: imgLink.mute,
+				// 音量值
+				volumeValue: 0.5,
+				//截图按钮
+				screenShotImg: imgLink.screenShot,
+				// 截图按钮距离底部高度
+				screenShotY: '200rpx',
+				
+				showGestureSeekTips: false,
+				// 手势拖动时
+				gestureChangeSeekTime: 0,
+				
+				seekedNeedPlay: false,
+				// 是否锁屏
+				isLock: false,
+				// 视频拉伸模式文案
+				scalings: [['居中', 0], ['适应', 1], ['填充',2], ['拉伸', 3]],
+				// 拉伸模式
+				scaling: undefined,
+				// 是否处于长按的状态
+				isInLongPress: false,
+				// 是否开启字幕功能
+				isEnableSubTitle: true,
+				isEnableDoubleSubTitle: false,
+				subtitles: [['不显示',0]],
+				isShowSubtitle: false,
+				isShowSingleSubTitle: false,
+				isShowDoubleSubTitle:false,
+				subtitle: 0,
+				topSubtitle: {
+					text:"",
+					isBold: false,
+					isItalic: false,
+					fontColor:"#fb12d4",
+					bgColor:"#67f933",
+					fontSize: 14
+				},
+				bottomSubtitle: {
+					text:"",
+					isBold: false,
+					isItalic: false,
+					fontColor:"#ffff00",
+					bgColor:"#00f3ff",
+					fontSize: 14
+				},
+				singleSubtitle: {
+					text:"",
+					isBold: false,
+					isItalic: false,
+					fontColr:"#ffffff",
+					bgColor: "#000000",
+					fontSize: 14
+				}
+			}
+		},
+		
+		watch: {
+			type() {
+				this.selects = this[`${this.type}s`];
+			}
+		},
+		
+		computed: {
+			currentLevelText() {
+				const { levels, level } = this;
+				return levels[level][0];
+			},
+			
+			currentSpeedText() {
+				const { speeds, speed } = this;
+				return speeds[speed][0];
+			},
+			
+			currentOptionIndex() {
+				const { type, types} = this;
+				
+				switch(type) {
+					case types.LEVEL: {
+						return this.level;
+					}
+					case types.SPEED: {
+						return  this.speed;
+					}
+					case types.SCALING: {
+						return this.scaling;
+					}
+					case types.SUBTITLE: {
+						return this.subtitle;
+					}
+				}
+				
+				// if (type === types.LEVEL)
+				// 	return this.level;
+				// else
+				// 	return this.speed;
+			},
+			
+			lockImgSrc() {
+				return this.isLock ? LockImg: UnLockImg;
+			}			
+		},
+		
+		mounted() {
+			this.countHoleWidth();
+			this.barHide();
+		},
+		
+		methods: {
+			/**
+			 * 计算进度条总长度
+			 */
+			countHoleWidth() {
+				const { fullStatus } = this;
+				
+				const height = plus.display.resolutionHeight;
+				const width = plus.display.resolutionWidth;
+				
+				
+				if (fullStatus)
+					this.holeWidth = height > width ? height : width;
+					
+				else
+					this.holeWidth = width < height ? width : height;
+			},
+
+			/**
+			 * Toogle修改播放按钮状态，传入forceStatus以forceStatus为主
+			 * @param {Object} forceStatus
+			 */
+			changePlayStatus(forceStatus) {
+				const { playStatus } = this;
+				let newStatus = !playStatus;
+				if (typeof forceStatus !== 'undefined')
+					newStatus = forceStatus;
+				
+				this.playStatus = newStatus;
+				this.playBtnLink = newStatus ? imgLink.play : imgLink.pause;
+			},
+			
+			pause() {
+				this.playStatus = true;
+				this.handlePlay();
+			},
+			
+			play() {
+				this.playStatus = false;
+				this.handlePlay();
+			},
+			
+			/**
+			 * 播放按钮点击
+			 */
+			handlePlay() {
+				const { playStatus } = this;
+				this.changePlayStatus();
+				this.$emit('onPlayBtnClick', this.playStatus);
+			},
+
+			/**
+			 * Toogle修改全屏按钮状态
+			 */
+			changeFullStatus() {
+				const { fullStatus } = this;
+				let newStatus = !fullStatus;
+				
+				this.fullStatus = newStatus;
+				this.fullBtnLink = newStatus ? imgLink.normal : imgLink.full;
+			},
+			
+			/**
+			 * 全屏按钮点击
+			 */
+			handleFull() {
+				const { fullStatus } = this;
+				this.changeFullStatus();
+				this.$emit('onFullBtnClick', this.fullStatus);
+				this.countHoleWidth();
+
+				this.screenShotY = fullStatus ? '200rpx' : '300rpx';	
+				
+			},
+			
+			/**
+			 * 点击清晰度/倍速按钮
+			 */
+			handleBtn(type) {
+				const { selectStatus } = this;
+				this.type = type;
+				this.selectStatus = !this.selectStatus;
+			},
+			
+			/**
+			 * 选择切换清晰度/倍速
+			 * @param {Object} value
+			 */
+			selectOption(value) {
+				const { types, type, speeds, subtitles } = this;
+
+				this[type] = value;
+				this.selectStatus = false;
+				
+				switch(type) {
+					case types.LEVEL:
+						this.selectedHdAuto = value === 0;
+						this.$emit('onHdBtnClick', value);
+					break;
+					case types.SPEED:
+						this.$emit('onRateBtnClick', speeds[value][1]);
+					break;
+					case types.SCALING:
+						this.$emit('onScalingBtnClick', value);
+					break;
+					case types.SUBTITLE:
+						if(value === 0) {
+							this.isShowSubtitle = false;
+							this.$emit('onOpenSRT', false);
+							this.isShowDoubleSubTitle = false;
+							this.isShowSingleSubTitle = false;
+							break;
+						}
+						if (subtitles[value][0] === "双语") {
+							console.log("===1 切换双语")
+							// 发送开启双字幕
+							this.isShowSubtitle = true;
+							this.isShowDoubleSubTitle = true;
+							this.isShowSingleSubTitle = false;
+							this.$emit('onChangeSRTSingleMode', false);
+							this.$emit('onOpenSRT', true);
+							break;
+						}
+						this.isShowSubtitle = true;
+						this.isShowDoubleSubTitle = false;
+						this.isShowSingleSubTitle = true;
+						this.$emit('onChangeSRTSingleMode', true);
+						this.$emit('onOpenSRT', true);
+						this.$emit('onChangeSRTBtnClick', subtitles[value][0]);
+						break;
+				}
+			},
+			
+			/**
+			 * 点击空白区域
+			 */
+			handleMask() {
+				const { selectStatus, showBar } = this;
+				/**
+				 * 若清晰度显示则隐藏
+				 */
+				if (selectStatus) {
+					this.selectStatus = false;
+					return;
+				}
+				
+				if (showBar) {
+					this.showBar = false;
+				} else {
+					this.showBar = true;
+					this.barHide();
+				}
+			},
+
+			/**
+			 * 当前播放时间更新
+			 * @param {Object} time
+			 */
+			timeUpdate(time) {
+				this.currentTime = time;
+				this.currentTimeText = this.timeFormat(time);
+				this.updateProgress();
+			},
+			
+			/**
+			 * 是否有字幕功能
+			 * @param {boolean} enableSubTitle
+			 * @param {boolean} enableSubTitleDouble
+			 */
+			setEnableSubtitle(enableSubTitle, enableSubTitleDouble) {
+			    this.isEnableSubTitle = enableSubTitle
+				this.enableSubTitleDouble = enableSubTitleDouble
+				const { subtitles } = this;
+				if (enableSubTitleDouble) {
+					this.subtitles.push(["双语", subtitles.length]);
+				}
+			},
+			
+			/**
+			 * 设置字幕的样式
+			 * @param {Object} config
+			 */
+			setSRTTextConfig(config) {
+				const position = config.position;
+				console.log("===1 setSRTTextConfig position: " + config.position);
+				console.log("===1 setSRTTextConfig color: " + config.backgroundColor);
+				const color = this.convertARGBtoRGBA(config.backgroundColor);
+				console.log("===1 change color: " + color);
+				if (position === "bottom") {
+					this.bottomSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
+					this.bottomSubtitle.fontSize = config.fontSize;
+					this.bottomSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
+					this.bottomSubtitle.isBold = config.fontBold;
+					this.bottomSubtitle.isItalic = config.fontItalics;
+				}
+				
+				if (position === "top") {
+					this.topSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
+					this.topSubtitle.fontSize = config.fontSize;
+					this.topSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
+					this.topSubtitle.isBold = config.fontBold;
+					this.topSubtitle.isItalic = config.fontItalics;
+				}
+				
+				if (position === null || position === "") {
+					this.singleSubtitle.fontColor = this.convertARGBtoRGBA(config.fontColor);
+					this.singleSubtitle.fontSize = config.fontSize;
+					this.singleSubtitle.bgColor = this.convertARGBtoRGBA(config.backgroundColor);
+					this.singleSubtitle.isBold = config.fontBold;
+					this.singleSubtitle.isItalic = config.fontItalics;
+				}
+			},
+			
+			convertARGBtoRGBA(argbValue) {
+				if(!argbValue.startsWith('#') || argbValue.length !== 9) {
+					return argbValue;
+				}
+				  const hexValue = argbValue.replace('#', '');
+				  const alpha = parseInt(hexValue.slice(0, 2), 16) / 255;
+				  const red = parseInt(hexValue.slice(2, 4), 16);
+				  const green = parseInt(hexValue.slice(4, 6), 16);
+				  const blue = parseInt(hexValue.slice(6, 8), 16);
+				  return `rgba(${red}, ${green}, ${blue}, ${alpha})`;
+			},
+			
+			/**
+			 * 插入当前有多少可选的字幕
+			 * @param {Object} titles
+			 */
+			setSRTTitle(titles) {
+				console.log("===1 title is " + titles);
+				const newItems = titles.map((lang)=>[lang, titles.indexOf(lang) + this.subtitles.length + 1]);
+				this.subtitles.push(...newItems);
+			},
+			
+			/**
+			 * 字幕
+			 * @param {Object} srt
+			 */
+			setSRTText(srt) {
+				this.singleSubtitle.text = "";
+				this.topSubtitle.text = "";
+				this.bottomSubtitle.text = "";
+				
+				console.info("====3 srtList: " + srt);
+				
+				const data = JSON.parse(srt);
+				if (!data) {
+					return;
+				}
+				data.strList.forEach(item => {
+					const position = item.position;
+					if (position === "singleSubtitles") {
+						this.singleSubtitle.text = item.srtText;
+					}
+					if (position === "bottomSubtitles") {
+						this.bottomSubtitle.text = item.srtText;
+					}
+					if (position === "topSubtitles") {
+						this.topSubtitle.text = item.srtText;
+					}
+				})
+			},
+
+			/**
+			 * 视频总时长更新
+			 * @param {Object} duration
+			 */
+			updateDuration(duration) {
+				this.duration = duration;
+				this.timeShowBlock = duration >= 3600 ? 2 : 1;
+				this.durationText = this.timeFormat(duration);
+			},
+			
+			/**
+			 * 更新进度条显示
+			 */
+			updateProgress(precent) {
+				const { currentTime, duration, finalPrecent, isDraging } = this;
+				let _precent;
+				
+				const changeProgressWidth = (_precent) => {
+					this.progressPrecent = parseInt( _precent * 100 );
+					this.progressLeftOverPrecent = 100 - this.progressPrecent;
+				};
+
+				if (precent) {
+					// 强制使用外部传入进度百分比
+					_precent = this.limit(precent, 0, 1); 
+					changeProgressWidth(_precent);
+				} else {
+					// 计算timeupdate当前进度条百分比
+					if (!duration || isDraging) return;
+					_precent = currentTime / duration;
+					this.precent = _precent;
+					changeProgressWidth(_precent);
+				}
+				
+			},
+			/**
+			 * 更新视频画面缩放模式
+			 */
+			updateScaling(mode) {
+				this.scaling = mode;
+			},
+			
+			/**
+			 * 监听进度条拖拽seek
+			 */
+			handleTouch(type, e) {
+				switch(type) {
+					case 'start':
+						this.initTouchPageX = e.touches[0].pageX * 2;
+						this.barShow();
+					break;
+					case 'move':
+						this.isDraging = true;
+					    const touchPageX = e.touches[0].pageX * 2;
+					    const changedX = this.getChangedX(touchPageX, this.initTouchPageX);
+					    this.calcPrecentChange(changedX);
+					break;
+					case 'end':
+						if (this.isDraging) {
+							this.toSeek(this.finalPrecent);
+							this.isDraging = false;
+					    }
+					break;
+				}
+			},
+			
+			/**
+			 * 计算变化百分比
+			 * @param {Object} changedX
+			 */
+			calcPrecentChange(changedX) {
+			  const { precent, holeWidth } = this;
+			  let finalPrecent;
+			  
+			  const changedPrecent = changedX / holeWidth;
+			  finalPrecent = precent + changedPrecent;
+			  finalPrecent = this.limit(finalPrecent, 0, 1);
+			  this.updateProgress(finalPrecent);
+			  this.finalPrecent = finalPrecent;
+			},
+			
+			/**
+			 * 获取变化的X坐标
+			 * @param {Object} touchPageX touchend触发后的X坐标
+			 * @param {Object} initTouchPageX touchstart触发后的X坐标
+			 */			
+			getChangedX(touchPageX, initTouchPageX) {
+			  return touchPageX - initTouchPageX;
+			},
+			
+			touchstart(e) {
+				this.handleTouch('start', e);
+			},
+			
+			touchmove(e) {
+				this.handleTouch('move', e);
+			},
+			
+			touchend(e) {
+				this.handleTouch('end', e);
+			},
+			
+			toSeek(precent) {
+				const seekTime = parseInt(precent * this.duration);
+				if (!isNaN(seekTime)) this.$emit('onToSeek', seekTime);
+			},
+			
+			handleSeekTo(time) {
+				if (!isNaN(time)) {
+					this.$emit('onToSeek', time);
+					setTimeout(() => {
+						if (this.seekedNeedPlay) {
+							this.play();
+							this.seekedNeedPlay = false;
+						}
+					}, 100)
+				}
+			},
+			
+			/**
+			 * 更新可选码率
+			 * @param {Object} num
+			 */
+			updateLevels(num) {
+				if (!num) return;
+				const realNum = num + 1;
+				var allLevels = [
+						['自动', 0],
+						['流畅', 1],
+						['高清', 2],
+						['超清', 3]
+					];
+				this.levels = allLevels.slice(0, realNum);
+				if (this.type === this.types.LEVEL) {
+					this.selects = this.levels;
+				}
+			},
+			
+			/**
+			 * 更新当前码率
+			 * @param {Object} level
+			 */
+			updateCurrentLevel(level) {
+				const { selectedHdAuto } = this;
+				if (selectedHdAuto) return;
+				// 若点击自动清晰度按钮后，不更新码率显示
+				this.level = level;
+			},
+			
+			/**
+			 * 显示控制栏
+			 */
+			barShow() {
+				if (this.clock) {
+					clearTimeout(this.clock);
+					this.clock = null;
+				}
+				this.showBar = true;
+			},
+			
+			/**
+			 * 隐藏控制栏
+			 * @param {Boolean} immediately 是否立刻隐藏
+			 */
+			barHide(immediately) {
+				return;
+				const { showBarTime } = this;
+				if (this.clock) {
+					clearTimeout(this.clock);
+					this.clock = null;
+				}
+
+				this.clock = setTimeout(() => {
+					this.showBar = false;
+				}, showBarTime * 1000);
+			},
+			
+			/**
+			 * 处理手势控制
+			 * @param {Object} type 手势类型
+			 * @param {Object} value 手势变化值
+			 */
+			handleGEvent(data) {
+				switch(data.type) {
+					case 'SEEK_TIME_UPDATE': {
+						
+						if (this.playStatus) {
+							this.seekedNeedPlay = true;
+							this.pause();
+						}
+						 const { finalTime } = data;
+						 if (isNaN(finalTime)) {
+							 return;
+						 }
+						 this.gestureChangeSeekTime = finalTime;
+						 this.showGestureSeekTips = true;
+						 clearTimeout(this.$options.gestureTimeout);
+						 
+						 // 600ms后隐藏tips
+						 this.$options.gestureTimeout = setTimeout(() => {
+						 	this.showGestureSeekTips = false;
+							this.gestureChangeSeekTime = 0;
+						 }, 600)
+						 
+					}
+					break;
+					case 'LEFT_UP':
+						// console.log('LEFT_UP');
+						uni.getScreenBrightness({
+							success: (res) => {
+								this.setBrightness(res.value, data.position, 1);
+							}
+						});
+					break;
+					case 'LEFT_DOWN':
+						// console.log('LEFT_DOWN');
+						uni.getScreenBrightness({
+							success: (res) => {
+								this.setBrightness(res.value, data.position, -1);
+							}
+						});
+					break;
+					case 'RIGHT_UP':
+						// console.log('RIGHT_UP');
+						this.volumeChanged(data.position, 1);
+					break;
+					case 'RIGHT_DOWN':
+						// console.log('RIGHT_DOWN');
+						this.volumeChanged(data.position, -1);
+					break;
+					case 'DOUBLE_CLICK':
+						console.log('DOUBLE_CLICK');
+						if (this.playStatus) {
+							this.pause();
+						} else {
+							this.play();
+						}
+					break;
+				}
+			},
+			
+			/**
+			 * 设置亮度
+			 * @param {Object} currentValue 当前亮度
+			 * @param {Object} changedValue 改变值
+			 * @param {Object} isDown 若为减弱，则设置为-1，否则为1
+			 */
+			setBrightness(currentValue, changedValue, isDown) {
+				// 除6降低灵敏度
+				changedValue = Math.abs(changedValue / 6) / 100 * isDown;
+				let realValue = currentValue + changedValue;
+				realValue = this.limit(realValue, 0, 1);
+				this.lightPrecent = parseInt(realValue * 100);
+				
+				uni.setScreenBrightness({
+					value: realValue
+				});
+			},
+
+			/**
+			 * 音量变化
+			 * @param {Object} changedValue
+			 * @param {Object} isDown
+			 */
+			volumeChanged(changedValue, isDown) {
+				changedValue = Math.abs(changedValue / 10) / 100 * isDown;
+				this.$emit('onVolumeChanged', changedValue);
+			},
+			
+			/**
+			 * 更新音量变化显示
+			 * @param {Object} value
+			 */
+			updateVolumeValue(value) {
+				this.volumeValue = value;
+			},
+			
+			/**
+			 * 时间（秒）格式化
+			 * @param {Object} result
+			 */
+			timeFormat(result) {
+				const { timeShowBlock } = this;
+				
+				let h = Math.floor(result / 3600) < 10 ? '0' + Math.floor(result / 3600) : Math.floor(result / 3600);
+				let m = Math.floor((result / 60 % 60)) < 10 ? '0' + Math.floor((result / 60 % 60)) : Math.floor((result / 60 % 60));
+				let s = Math.floor((result % 60)) < 10 ? '0' + Math.floor((result % 60)) : Math.floor((result % 60));
+
+				if (timeShowBlock === 2)
+					return result = h + ':' + m + ':' + s;
+				else
+					return result = m + ':' + s;
+			},
+			
+			/**
+			* 控制最小值，最大值
+			* @param num
+			* @param min
+			* @param max
+			* @returns {*}
+			*/
+			limit(num, min, max) {
+				if (num < min) return min;
+				if (num > max) return max;
+				return num;
+			},
+			
+			handleTouchCancel() {
+				if (this.isLock) return;
+				if (this.isInLongPress) {
+					this.isInLongPress = false;
+					this.$emit('onRateBtnClick', 1);
+				}
+				
+			},
+			// 特殊情况如果不触发touchcancel, 触发touchend时取消长按状态
+			handleTouchEnd() {
+				this.handleTouchCancel()
+			},
+			
+				
+			handleLongPress() {
+				if (this.isLock) return;
+				this.isInLongPress = true;
+					
+				this.play();
+				this.$emit('onRateBtnClick', 2);
+			}
+		}
+	}
+</script>
+
+<style>
+	.plv-player-mask {
+		position: absolute;
+		left: 0;
+		right: 0;
+		top: 0;
+		bottom: 120rpx;
+	}
+	
+	.plv-player-bar__bg {
+		width: 1624rpx;
+		height: 120rpx;
+	}
+	
+	.plv-player-bar {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 120rpx;
+		bottom: 0;
+	}
+	
+	.plv-player-bar__box {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 120rpx;
+		bottom: 0;
+		flex-direction: row;
+	}
+	
+	.plv-player-mr-left {
+		flex: 10;
+	}
+	
+	.plv-player-mr-right {
+		flex: 10;
+	}
+	
+	.plv-player-middle {
+		flex: 80;
+	}
+	
+	.plv-player-progress {
+		flex: 40;
+	}
+	
+	.plv-player-subtitle-view {
+		position: absolute;
+		left: 0;
+		right: 0;
+		height: 150rpx;
+		bottom: 50rpx;
+		justify-content: center;
+		align-items: center;
+		flex-direction: column;
+	}
+	
+	.plv-subtitle-top-text {
+		background-color: greenyellow;
+	}
+	
+	.plv-subtitle-bottom-text {
+		background-color: darkred;
+	}
+	
+	.plv-player-progress__play__wrap {
+		flex-direction: row;
+		flex: 1;
+	}
+	
+	.plv-player-progress__wrap__played {
+		top: 20rpx;
+		height: 8rpx;
+		background-color: #0A98D5;
+	}
+	
+	.plv-player-progress__wrap__surplus {
+		top: 20rpx;
+		height: 8rpx;
+		background-color: #FFFFFF;
+	}
+	
+	.plv-player-progress__dot__wrap {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1;
+	}
+	
+	.plv-player-progress__dot__box {
+		flex: 1;
+		flex-direction: row;
+	}
+	
+	.plv-player-progress__dot__played {
+		flex: 20;
+	}
+	
+	.plv-player-progress__dot__surplus {
+		flex: 80;
+	}
+	
+	.plv-player-progress__mask {
+		position: absolute;
+		top: 0;
+		right: 0;
+		left: 0;
+		bottom: 0;
+		border-radius: 4rpx;
+		z-index: 2;
+	}
+	
+	.plv-player-progress__dot {
+		position: absolute;
+		width: 10rpx;
+		height: 30rpx;
+		top: 8rpx;
+		right: 0;
+		border-radius: 4rpx;
+		background-color: #FFFFFF;
+		/* transform: translateX(15rpx); */
+	}
+	
+	.plv-player-bar-bottom {
+		flex-direction: row;
+		flex: 60;
+	}
+
+	.plv-btn {
+		position: relative;
+		width: 64rpx;
+		height: 64rpx;
+		top: 8rpx;
+		bottom: 0;
+		margin-right: 10rpx;
+	}
+	
+	.plv-player-full-btn {
+		position: absolute;
+		right: 0;
+	}
+	
+	.plv-player-hd-btn {
+		position: absolute;
+		right: 64rpx;
+	}
+	
+	.plv-player-rate-btn {
+		position: absolute;
+		right: 128rpx;
+	}
+	
+	.plv-player-scaling-btn {
+		position: absolute;
+		right: 210rpx;
+	}
+
+	.plv-player-subtitle-btn {
+		position: absolute;
+		right: 278rpx;
+	}
+	
+	.plv-player-time {
+		position: relative;
+		top: 8rpx;
+		flex-direction: row
+	}
+	
+	.plv-player-select {
+		position: absolute;
+		width: 200rpx;
+		right: 0;
+		top: 0;
+		bottom: 0;
+		z-index: 1;
+	}
+	
+	.plv-player-select__bg {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 0;
+		background-color: #0A98D5;
+		opacity: 0.5;
+	}
+	
+	.plv-player-select__option {
+		position: absolute;
+		top: 0;
+		bottom: 0;
+		left: 0;
+		right: 20rpx;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.plv-player-select__option__item {
+		padding: 18rpx;
+	}
+	
+	
+	.plv-player-btn__text {
+		color: #FFFFFF;
+		font-size: 28rpx;
+		line-height: 64rpx;
+	}
+	
+	.select-option__text {
+		color: #FFFFFF;
+		font-size: 28rpx;
+		line-height: 20rpx;
+		text-align: center;
+	}
+	
+	.active {
+		color: #0A98D5;
+	}
+	
+	.plv-player-light {
+		flex: 1;
+		align-items: center;
+	}
+	
+	.plv-player-volume {
+		position: absolute;
+		top: 50rpx;
+		left: 0;
+		right: 0;
+		height: 80rpx;
+	}
+	
+	.plv-player-screenshot {
+		position: absolute;
+		margin-left: 80rpx;
+	}
+	
+	.plv-player-screenshot__btn {
+		width: 80rpx;
+		height: 80rpx;
+	}
+	
+	.plv-player-lock {
+		position: absolute;
+		right: 80rpx;
+		width: 80rpx;
+		height: 80rpx;
+		background: rgba(0,0,0, .5);
+		border-radius: 40rpx;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.plv-player-lock__btn {
+		width: 48rpx;
+		height: 48rpx;
+	}
+	
+	.plv-player-skin-drag-tips {
+		position: absolute;
+		top: 60rpx;
+		justify-content: center;
+		align-items: center;
+		flex-direction: row;
+	/* 	justify-content: center;
+		align-items: center; */
+	}
+	
+	.plv-player-longpress-speed {
+		position: absolute;
+		width: 175rpx;
+		padding: 10rpx;
+		flex-direction: row;
+		justify-content: center;
+		align-items: center;
+		top: 40rpx;
+		border-radius: 15px;
+		background: rgba(0,0,0,.8);
+	}
+
+	
+	.plv-player-longpress-speed__image {
+		width: 40rpx;
+		height: 40rpx;
+	}
+	
+	.plv-player-longpress-speed__text {
+		color: #FFFFFF;
+		font-size: 28rpx;
+	}
+	
+	.plv-player-comp-box {
+		position: absolute;
+		height: 300rpx;
+		left: 0;
+		top: 0;
+		z-index: 0;
+		justify-content: center;
+		align-items: center;
+	}
+</style>
diff --git a/components/plv-player-skin/volume.nvue b/components/plv-player-skin/volume.nvue
new file mode 100644
index 0000000..77048b3
--- /dev/null
+++ b/components/plv-player-skin/volume.nvue
@@ -0,0 +1,92 @@
+<template>
+	<view v-if="isShow" class="plv-player-volume-wrap">
+		<image class="plv-player-volume__img" :src="value === 0 ? muteImgUrl : imgUrl "></image>
+		<view class="plv-player-volume__progress">
+			<view class="plv-player-volume__progress__played"  :style="'flex:' + value"></view>
+			<view class="plv-player-volume__progress_surplus" :style="'flex:' + valueLeft"></view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		props: {
+			imgUrl: {
+				type: 'string',
+				required: true
+			},
+			muteImgUrl: {
+				type: 'string',
+				required: true
+			},
+			value: {
+				type: 'Number',
+				default: 0.5,
+				required: true
+			}
+		},
+		
+		watch: {
+			value(num) {
+				if (!this.isShow) this.isShow = true;
+				this.startClock();
+			}
+		},
+		
+		computed: {
+			valueLeft() {
+				return 1 - this.value;
+			}
+		},
+		
+		data() {
+			return {
+				isShow: false
+			}
+		},
+		
+		methods: {
+			startClock() {
+				this.clearClock();
+				
+				this.clock = setTimeout(() => {
+					this.isShow = false;
+				}, 1500);
+			},
+			
+			clearClock() {
+				if (this.clock) clearTimeout(this.clock);
+				this.clock = null;
+			}
+		}
+	}
+</script>
+
+<style>
+.plv-player-volume-wrap {
+	flex-direction: row;
+	align-items: center;
+	justify-content: center;
+}
+
+.plv-player-volume__img {
+	width: 40rpx;
+	height: 40rpx;
+	margin-right: 10rpx;
+}
+
+.plv-player-volume__progress {
+	width: 260rpx;
+	height: 8rpx;
+	flex-direction: row;
+	background-color: #09BB07;
+}
+
+.plv-player-volume__progress__played {
+	background-color: #007AFF;
+}
+
+.plv-player-volume__progress_surplus {
+	background-color: #FFFFFF;
+}
+</style>
diff --git a/compoents/tabBar/tabBar.vue b/components/tabBar/tabBar.vue
similarity index 100%
rename from compoents/tabBar/tabBar.vue
rename to components/tabBar/tabBar.vue
diff --git a/components/uniVideo/uniVideo.vue b/components/uniVideo/uniVideo.vue
new file mode 100644
index 0000000..c39df56
--- /dev/null
+++ b/components/uniVideo/uniVideo.vue
@@ -0,0 +1,315 @@
+<template>
+	<view class="wrap">
+		<view :class="isFull ? 'player-full' : 'player'">
+			<plv-player
+				ref="vod"
+				class="vod-player"
+				seekType=1
+				autoPlay=true
+				disableScreenCAP=false
+				rememberLastPosition=false
+				@onPlayStatus="onPlayStatus"
+				@onPlayError="onPlayError"
+				@positionChange="positionChange"
+				@onEnableSubtitle="onEnableSubtitle"
+				@onSRTTextConfig="onSRTTextConfig"
+				@onSRTTitle="onSRTTitle">
+			</plv-player>
+			<skin ref="skin"
+				class="skin-control"
+				:defaultVolume="defaultVolume"
+				@onPlayBtnClick="onPlayBtnClick"
+				@onToSeek="onToSeek"
+				@onFullBtnClick="onFullBtnClick"
+				@onHdBtnClick="onHdBtnClick"
+				@onRateBtnClick="onRateBtnClick"
+				@onVolumeChanged="onVolumeChanged"
+				@onScalingBtnClick="onScalingBtnClick"
+				@onScreenShot="onScreenShot"
+				@onChangeSRTBtnClick="onChangeSRTBtnClick"
+				@onChangeSRTSingleMode="onChangeSRTSingleMode"
+				@onOpenSRT="onOpenSRT">
+			</skin>
+		</view>
+		<view v-if="!isFull" style="padding: 20rpx;">
+			<input class="uni-input" style="min-height: 35px; height: 35px; border: 1px solid #cccccc;font-size: 14px;" :value="videoVid"
+			 @input="onVidInput" placeholder="请输入视频vid" />
+			<button type="primary" @click="setVid()">播放</button>
+		</view>
+	</view>
+</template>
+
+<script>
+	
+	import Skin from '@/components/plv-player-skin/skin.nvue';
+	import DragTips from '@/components/plv-player-skin/drag-tips.nvue';	
+	const dom = weex.requireModule('dom');
+	
+	export default {
+		components: {
+			Skin
+		},
+		
+		onReady() {
+			this.vodPlayer = this.$refs.vod;
+			this.skin = this.$refs.skin;
+			// plus.screen.lockOrientation('portrait-primary');
+		},
+
+		data() {
+			return {
+				title: '播放器Demo',
+				// 播放器组件
+				vodPlayer: null,
+				// 控制栏组件
+				skin: null,
+				//是否全屏
+				isFull: false,
+				// 默认音量
+				defaultVolume: 0.5,
+				videoVid: 'cfb7a69a75b5004ddb137d7bd96aa7d7_c'
+			};
+		},
+
+		methods: {
+			//输入vid
+			onVidInput: function(event) {
+				this.videoVid = event.detail.value;
+			},
+			
+			setVid() {
+				if(!this.videoVid) {
+					uni.showToast({
+						title: "请输入视频Vid",
+						icon: "none"
+					})
+					return;
+				}
+				const { vodPlayer } = this;
+				vodPlayer.setVid({
+					vid:this.videoVid,
+					level:0
+				}, (ret) => {
+					this.text = JSON.stringify(ret);
+					if (ret.errMsg != null) {
+						uni.showToast({
+							title: ret.errMsg,
+							icon: "none"
+						})
+					}
+				});
+			},
+
+			onPlayError(e){
+				if (e.detail.errEvent != null) {
+					uni.showToast({
+						title:'playErrorEvent - '+e.detail.errEvent,
+						icon: "none"
+					})
+				}
+			},
+
+			positionChange(e){
+				this.skin.timeUpdate(e.detail.currentPosition);
+			},
+			
+			onEnableSubtitle(e){
+				console.log("===1" + e.detail);
+				this.skin.setEnableSubtitle(e.detail.isEnableSubtitle, e.detail.isEnableDoubleSubtitle);
+			},
+			
+			onSRTTextConfig(e) {
+				console.log("===1 fontColor: " + e.detail.fontColor);
+				this.skit.setSRTTextConfig(e.detail);
+			},
+			
+			onSRTTitle(e) {
+				console.log("===1 onSRTTitle" + e.detail);
+				
+			},
+
+			onPlayStatus(e){
+				const { skin, vodPlayer } = this;
+				const state = e.detail.playbackState;
+				const preparedToPlay = e.detail.preparedToPlay;
+				if (state != null) {
+					this.skin.changePlayStatus(state === 'start');
+				} else if (preparedToPlay != null) {
+					this.updateDuration();
+					this.updateLevels();
+					this.updateScaling();
+				}
+			},
+			
+			updateDuration() {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.getDuration(null, ret => {
+					this.skin.updateDuration(ret.duration);
+				});
+			},
+			
+			updateLevels() {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				
+				vodPlayer.getLevelNum(null, ret => {
+					this.skin.updateLevels(ret.levelNum);
+				});
+				
+				vodPlayer.getCurrentLevel(null, ret => {
+					this.skin.updateCurrentLevel(ret.currentLevel);
+				});
+			},
+			
+			updateScaling() {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				
+				vodPlayer.getScalingMode({}, ret => {
+					this.skin.updateScaling(ret.scalingMode);
+				});
+			},
+
+			onPlayBtnClick(isPlaying) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				isPlaying ? vodPlayer.start() : vodPlayer.pause();
+			},
+			
+			onHdBtnClick(level) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.changeLevel({level});
+			},
+			
+			onRateBtnClick(speed) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.setSpeed({speed});
+			},
+			
+			onScalingBtnClick(scalingMode) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.setScalingMode({scalingMode});
+			},
+			
+			onChangeSRTBtnClick(srt) {
+				console.log("===1 " + srt);
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.changeSRT(srt);
+			},
+			
+			onChangeSRTSingleMode(isSingle) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.changeSRTSingleMode(isSingle);
+			},
+			
+			onOpenSRT(isOpen) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.setOpenSRT({
+					openSrt: isOpen
+					});
+			},
+			
+			onFullBtnClick(isFull) {
+				// plus.screen.unlockOrientation();
+				plus.navigator.setFullscreen(isFull);
+
+				//通过h5+实现横竖屏
+				// isFull ? plus.screen.lockOrientation('landscape-primary') : plus.screen.lockOrientation('portrait-primary');
+				
+				//通过原生实现横竖屏切换
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				isFull ? vodPlayer.changeToLandscape() : vodPlayer.changeToPortrait();
+				
+				this.isFull = isFull;
+			},
+			
+			onToSeek(time) {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				vodPlayer.seekTo({seconds: time});
+			},
+			
+			onVolumeChanged(value) {
+				const { vodPlayer, skin } = this;
+				if (!vodPlayer) return;
+				vodPlayer.getVolume(null, ret => {
+					const changedValue = ret.volume + value;
+					
+					const realValue = this.limit(changedValue, 0, 1);
+					
+					vodPlayer.setVolume({volume: realValue});
+					
+					skin.updateVolumeValue(realValue);
+				});
+			},
+			
+			onScreenShot() {
+				const { vodPlayer } = this;
+				if (!vodPlayer) return;
+				
+				vodPlayer.snapshot(null, result =>{
+					if(result.errMsg != null){
+						console.log(result.errMsg)
+					}
+				});
+			},
+			
+			/**
+			* 控制最小值，最大值
+			* @param num
+			* @param min
+			* @param max
+			* @returns {*}
+			*/
+			limit(num, min, max) {
+				if (num < min) return min;
+				if (num > max) return max;
+				return num;
+			}
+		}
+	}
+</script>
+
+<style>
+	.wrap {
+		flex: 1;
+	}
+	
+	.title {
+		height: 140rpx;
+	}
+	
+	.player {
+		height: 400rpx;
+	}
+
+	.player-full {
+		flex: 1;
+	}
+	
+	.vod-player {
+		flex: 1;
+	}
+	
+	.skin-control {
+		position: absolute;
+		top: 0;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		z-index: 1;
+	}
+	
+	.hide {
+		height: 0;
+	}
+	
+</style>
\ No newline at end of file
diff --git a/manifest.json b/manifest.json
index 0ccc53d..48262ab 100644
--- a/manifest.json
+++ b/manifest.json
@@ -54,6 +54,22 @@
                     }
                 }
             }
+        },
+        "nativePlugins" : {
+            "PLV-MediaPlayer" : {
+                "__plugin_info__" : {
+                    "name" : "Polyv播放器插件",
+                    "description" : "该插件封装了保利威底层播放器，是云直播和云点播插件必须的附属插件",
+                    "platforms" : "Android,iOS",
+                    "url" : "https://ext.dcloud.net.cn/plugin?id=4798",
+                    "android_package_name" : "",
+                    "ios_bundle_id" : "com.domainname.apppolyvios",
+                    "isCloud" : true,
+                    "bought" : 1,
+                    "pid" : "4798",
+                    "parameters" : {}
+                }
+            }
         }
     },
     /* SDK配置 */
diff --git a/package.json b/package.json
index 15acf0a..9136e26 100644
--- a/package.json
+++ b/package.json
@@ -3,9 +3,7 @@
   "version": "1.0.0",
   "main": "main.js",
   "scripts": {
-    "dev": "cross-env NODE_ENV=development uniapp-cli build --watch",
-    "test": "cross-env NODE_ENV=test uniapp-cli build",
-    "prod": "cross-env NODE_ENV=production uniapp-cli build"
+   
   },
   "keywords": [],
   "author": "",
diff --git a/pages.json b/pages.json
index 18d85b7..3a55850 100644
--- a/pages.json
+++ b/pages.json
@@ -178,6 +178,16 @@
 				 }
 			}
 		},
+		{
+			"path": "myPatient/myPatient",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
 		{
 			"path": "videoDetail/videoDetail",
 			"style": {
@@ -319,6 +329,109 @@
 				 }
 			}
 		},
+		{
+			"path": "patientGroup/patientGroup",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "groupMsg/groupMsg",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "myCode/myCode",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		
+		{
+			"path": "myDownLoad/myDownLoad",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		
+		{
+			"path": "myCollect/myCollect",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "myCourseware/myCourseware",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "changeMobile/changeMobile",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "wechatContact/wechatContact",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		{
+			"path": "idcardAuth/idcardAuth",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
+		
+		{
+			"path": "videoHistroy/videoHistroy",
+			"style": {
+				 "navigationStyle": "custom",
+				"navigationBarTitleText": "uni-app分页",
+				"app": {
+				      "bounce": "none"
+				 }
+			}
+		},
 		{
 			"path": "pwdLogin/pwdLogin",
 			"style": {
@@ -346,7 +459,7 @@
 		"list": [
 			{
 				"name": "", //模式名称
-				"path": "pages_app/login/login", //启动页面，必选
+				"path": "pages_app/videoDetail/videoDetail", //启动页面，必选
 				"query": "" //启动参数，在页面的onLoad函数里面得到
 			}
 		]
diff --git a/pages/education/education.vue b/pages/education/education.vue
index c36f4bf..b78de7a 100644
--- a/pages/education/education.vue
+++ b/pages/education/education.vue
@@ -92,7 +92,7 @@
 </template>
 
 <script setup>
-	import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
+	import CustomTabbar from '@/components/tabBar/tabBar.vue';
 	import { ref } from 'vue';
 	import { onShow } from "@dcloudio/uni-app";
 	import course from "@/static/jingpinkecheng.png"
diff --git a/pages/index/index.vue b/pages/index/index.vue
index 3fbe2c8..5f02b40 100644
--- a/pages/index/index.vue
+++ b/pages/index/index.vue
@@ -257,7 +257,7 @@
 <script setup>
 	import { ref, reactive, onMounted, nextTick, computed } from 'vue';
 	import { onShow, onLoad, onPageScroll } from "@dcloudio/uni-app";
-	import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
+	import CustomTabbar from '@/components/tabBar/tabBar.vue';
 	import navTo  from "@/utils/navTo.js";
     import bg from "@/static/more_bg.png"
 	import patient from "@/static/icon_home_my_patient.png"
diff --git a/pages/live/live.vue b/pages/live/live.vue
index 1a2595f..0c12390 100644
--- a/pages/live/live.vue
+++ b/pages/live/live.vue
@@ -137,7 +137,7 @@
 <script setup>
 	import { ref,nextTick} from 'vue';
 	import { onShow } from "@dcloudio/uni-app";
-	import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
+	import CustomTabbar from '@/components/tabBar/tabBar.vue';
 	import select from "@/static/triangle_normal.png"
 	import selectOn from "@/static/triangle_normal.png"
 	import playImg from "@/static/bofang.png"
diff --git a/pages/my/my.vue b/pages/my/my.vue
index 5c404eb..718284f 100644
--- a/pages/my/my.vue
+++ b/pages/my/my.vue
@@ -215,7 +215,7 @@
 </template>
 
 <script setup>
-	import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
+	import CustomTabbar from '@/components/tabBar/tabBar.vue';
 	import { ref } from 'vue';
 	import { onShow } from "@dcloudio/uni-app";
 	import hzshImg from "@/static/hzsh.png"
diff --git a/pages/patientClass/patientClass.vue b/pages/patientClass/patientClass.vue
index 6cf2213..c59c520 100644
--- a/pages/patientClass/patientClass.vue
+++ b/pages/patientClass/patientClass.vue
@@ -95,7 +95,7 @@
 <script setup>
 	import { ref } from 'vue';
 	import { onShow } from "@dcloudio/uni-app";
-	import CustomTabbar from '@/compoents/tabBar/tabBar.vue';
+	import CustomTabbar from '@/components/tabBar/tabBar.vue';
 	import upImg from "@/static/cb_up.png"
 	import downImg from "@/static/cb_up.png"
 	import filter from "@/static/cb_screen_no.png"
diff --git a/pages_app/changeMobile/changeMobile.vue b/pages_app/changeMobile/changeMobile.vue
new file mode 100644
index 0000000..546e195
--- /dev/null
+++ b/pages_app/changeMobile/changeMobile.vue
@@ -0,0 +1,193 @@
+<template>
+	<view class="change-mobile-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="更换手机号"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		></uni-nav-bar>
+
+		<!-- 表单区域 -->
+		<view class="form-wrapper">
+			<!-- 新手机号 -->
+			<view class="input-row">
+				<view class="left-icon">
+					<up-image  :src="phoneImg" width="36rpx" height="36rpx" ></up-image>
+				</view>
+				<input
+					class="text-input"
+					type="number"
+					maxlength="11"
+					v-model="mobile"
+					placeholder="请输入新手机号码"
+					placeholder-style="color:#c7c7c7"
+				/>
+			</view>
+
+			<!-- 验证码 -->
+			<view class="input-row">
+				<view class="left-icon">
+					<up-image  :src="smsImg" width="36rpx" height="36rpx" ></up-image>
+				</view>
+				<input
+					class="text-input"
+					type="number"
+					maxlength="6"
+					v-model="code"
+					placeholder="请输入验证码"
+					placeholder-style="color:#c7c7c7"
+				/>
+				<button
+					class="code-btn"
+					:disabled="sending || !canSend"
+					@click="sendCode"
+				>
+					{{ sending ? countdown + 's' : '获取验证码' }}
+				</button>
+			</view>
+		</view>
+
+		<!-- 底部确定按钮 -->
+		<view class="bottom-bar">
+			<button class="confirm-btn" @click="onConfirm">确定</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref, onUnmounted,computed } from 'vue';
+	import phoneImg from "@/static/phone.png"
+	import smsImg from "@/static/sms.png"
+const mobile = ref('');
+const code = ref('');
+const sending = ref(false);
+const countdown = ref(60);
+let timer = null;
+
+const canSend = computed(() => /^1\d{10}$/.test(mobile.value));
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const startTimer = () => {
+	sending.value = true;
+	countdown.value = 60;
+	timer = setInterval(() => {
+		countdown.value -= 1;
+		if (countdown.value <= 0) {
+			clearInterval(timer);
+			timer = null;
+			sending.value = false;
+		}
+	}, 1000);
+};
+
+const sendCode = () => {
+	if (!canSend.value) {
+		uni.showToast({ title: '请先输入正确的手机号', icon: 'none' });
+		return;
+	}
+	if (sending.value) return;
+	// TODO: 调用发送验证码接口
+	uni.showToast({ title: '验证码已发送', icon: 'success' });
+	startTimer();
+};
+
+const onConfirm = () => {
+	if (!canSend.value) {
+		uni.showToast({ title: '手机号格式不正确', icon: 'none' });
+		return;
+	}
+	if (!/^\d{4,6}$/.test(code.value)) {
+		uni.showToast({ title: '请输入正确的验证码', icon: 'none' });
+		return;
+	}
+	// TODO: 提交更换手机号
+	uni.showToast({ title: '已提交', icon: 'success' });
+};
+
+onUnmounted(() => {
+	if (timer) clearInterval(timer);
+});
+</script>
+
+<style lang="scss" scoped>
+.change-mobile-page {
+	min-height: 100vh;
+	background: #ffffff;
+}
+
+.form-wrapper {
+	padding: 40rpx 30rpx 0; // 顶部导航占位
+}
+
+.input-row {
+	display: flex;
+	align-items: center;
+	background: #ffffff;
+	border: 2rpx solid #eeeeee;
+	border-radius: 16rpx;
+	height: 90rpx;
+	padding: 0 20rpx;
+	margin-bottom: 30rpx;
+}
+
+.left-icon {
+	width: 50rpx;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	margin-right: 10rpx;
+}
+
+.text-input {
+	flex: 1;
+	height: 100%;
+	font-size: 30rpx;
+	color: #333333;
+}
+
+.code-btn {
+	width: 200rpx;
+	height: 44rpx;
+	background-color: #fff;
+	border-radius: 50rpx;
+	margin-right: 10px;
+	display: flex;
+	font-size: 25rpx;
+	color:#8B2316;
+	align-items: center;
+	justify-content: center;
+	cursor: pointer;
+	border: 2rpx solid #8B2316;
+	transition: background-color 0.2s ease;
+}
+.code-btn:disabled {
+	opacity: 0.5;
+	color:#8B2316;
+	background-color: #ccc;
+}
+
+.bottom-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 40rpx;
+}
+
+.confirm-btn {
+	margin: 0 30rpx;
+	height: 100rpx;
+	border-radius: 20rpx;
+	border: 2rpx solid #8B2316;
+	background: #ffffff;
+	color: #8B2316;
+	font-size: 34rpx;
+}
+</style>
diff --git a/pages_app/groupMsg/groupMsg.vue b/pages_app/groupMsg/groupMsg.vue
new file mode 100644
index 0000000..8b6f20b
--- /dev/null
+++ b/pages_app/groupMsg/groupMsg.vue
@@ -0,0 +1,153 @@
+<template>
+	<view class="group-msg-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="群发消息"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		/>
+
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<view class="emptybox">
+				<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
+				<text class="empty-text">暂无数据</text>
+			</view>
+		</view>
+
+		<!-- 底部固定按钮 -->
+		<view class="bottom-bar">
+			<button class="send-btn" @click="openModal">群发消息</button>
+		</view>
+
+		<!-- 弹窗与遮罩 -->
+		<view v-if="showModal" class="mask" @click="closeModal"></view>
+		<view v-if="showModal" class="center-modal">
+			<view class="modal-title">温馨提示</view>
+			<view class="modal-divider"></view>
+			<view class="modal-item" @click="onSelect('single')">
+				<text>单独选择</text>
+			</view>
+			<view class="modal-divider"></view>
+			<view class="modal-item" @click="onSelect('group')">
+				<text>分组选择</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import emptyImg from "@/static/icon_empty.png"
+const showModal = ref(true);
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const openModal = () => {
+	showModal.value = true;
+};
+
+const closeModal = () => {
+	showModal.value = false;
+};
+
+const onSelect = (type) => {
+	showModal.value = false;
+	if (type === 'single') {
+		uni.showToast({ title: '单独选择', icon: 'none' });
+	} else if (type === 'group') {
+		uni.showToast({ title: '分组选择', icon: 'none' });
+	}
+};
+</script>
+
+<style lang="scss" scoped>
+.group-msg-page {
+	min-height: 100vh;
+	background: #f5f5f5;
+}
+
+.content-area {
+	// 为 nav-bar 腾出空间
+	padding-bottom: 120rpx; // 为底部按钮留空
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: calc(100vh - 280rpx);
+}
+
+.empty-text {
+	font-size: 28rpx;
+	color: #999999;
+}
+
+.bottom-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: #ffffff;
+	border-top: 1rpx solid #eaeaea;
+	padding: 0; // 让按钮顶满
+	.send-btn {
+		width: 100%;
+		height: 100rpx;
+		background: #00cac1;
+		color: #ffffff;
+		border: none;
+		border-radius: 0;
+		font-size: 32rpx;
+		font-weight: normal;
+	}
+}
+
+/* 遮罩与弹窗 */
+.mask {
+	position: fixed;
+	top: 0;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.6);
+	z-index: 10;
+}
+
+.center-modal {
+	position: fixed;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: 650rpx;
+	background: #ffffff;
+	border-radius: 16rpx;
+	z-index: 11;
+	overflow: hidden;
+	box-shadow: 0 10rpx 40rpx rgba(0,0,0,0.15);
+}
+
+.modal-title {
+	text-align: center;
+	font-size: 34rpx;
+	color: #8B2316;
+	padding: 28rpx 20rpx;
+}
+
+.modal-item {
+	padding: 36rpx 28rpx;
+	font-size: 30rpx;
+	color: #333333;
+	background: #ffffff;
+}
+
+.modal-divider {
+	height: 2rpx;
+	background: #eeeeee;
+}
+</style>
diff --git a/pages_app/idcardAuth/idcardAuth.vue b/pages_app/idcardAuth/idcardAuth.vue
new file mode 100644
index 0000000..418eb53
--- /dev/null
+++ b/pages_app/idcardAuth/idcardAuth.vue
@@ -0,0 +1,303 @@
+<template>
+	<view class="idcard-auth-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="身份验证"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+		</uni-nav-bar>
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<!-- 进度指示器 -->
+			<view class="progress-bar">
+				<view class="barbox">
+					<view class="imgbox">
+						<up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
+						<view class="desc ">身份信息</view>
+					</view>
+					<view class="line"></view>
+					<view class="imgbox">
+						<up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
+						<view class="desc">添加银行卡</view>
+					</view>
+					<view class="line"></view>
+					<view class="imgbox">
+					  <up-image  :src="stepImg" width="46rpx" height="46rpx" ></up-image>
+				      <view class="desc">完成</view>
+					</view>
+				</view>
+				
+			<!-- 	<view class="progress-step active">
+					<view class="step-icon">
+						<uni-icons type="checkmarkempty" color="#ff0000" size="20"></uni-icons>
+					</view>
+					<text class="step-text">身份信息</text>
+				</view>
+				<view class="progress-line active"></view>
+				<view class="progress-step">
+					<view class="step-icon">
+						<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
+					</view>
+					<text class="step-text">添加银行卡</text>
+				</view>
+				<view class="progress-line"></view>
+				<view class="progress-step">
+					<view class="step-icon">
+						<uni-icons type="checkmarkempty" color="#cccccc" size="20"></uni-icons>
+					</view>
+					<text class="step-text">完成</text>
+				</view> -->
+			</view>
+
+			<!-- 输入表单 -->
+			<view class="form-section">
+				<view class="form-item">
+					<text class="form-label">姓名</text>
+					<input 
+						class="form-input" 
+						placeholder="请输入您的姓名" 
+						v-model="formData.name"
+						placeholder-style="color: #cccccc"
+					/>
+				</view>
+				<view class="form-item">
+					<text class="form-label">身份证号</text>
+					<input 
+						class="form-input" 
+						placeholder="请输入您的身份证号" 
+						v-model="formData.idNumber"
+						placeholder-style="color: #cccccc"
+					/>
+				</view>
+			</view>
+
+			<!-- 提示文字 -->
+			<view class="warning-text">
+				平台不支持绑定多人银行卡,请务必绑定本人卡,实名认证信息,谨慎填写!
+			</view>
+
+			<!-- 下一步按钮 -->
+			<view class="bottom-actions">
+				<button class="next-btn" @click="onNextStep">下一步</button>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import stepImg from "@/static/add_card_no.png"
+import stepActiveImg from "@/static/add_card_yes.png"
+const formData = ref({
+	name: '',
+	idNumber: ''
+});
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const onNextStep = () => {
+	if (!formData.value.name.trim()) {
+		uni.showToast({ title: '请输入姓名', icon: 'none' });
+		return;
+	}
+	if (!formData.value.idNumber.trim()) {
+		uni.showToast({ title: '请输入身份证号', icon: 'none' });
+		return;
+	}
+	
+	uni.showToast({ title: '验证通过，跳转下一步', icon: 'success' });
+	// 这里可以跳转到下一步页面
+};
+</script>
+
+<style lang="scss" scoped>
+.idcard-auth-page {
+	min-height: 100vh;
+	background: #f5f5f5;
+}
+
+.content-area {
+	padding-top: 160rpx;
+	padding: 0rpx 0rpx 0;
+}
+
+.progress-bar {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	background: #ffffff;
+	padding: 80rpx 20rpx 120rpx;
+	border-radius: 16rpx;
+	margin-bottom: 30rpx;
+	.barbox{
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		.imgbox{
+			flex:1;
+			
+			position: relative;
+			.desc{
+				position: absolute;
+				left:-50%;
+				color:#d0d0d0;
+				top:80rpx;
+				font-size: 28rpx;
+				margin-left: -10rpx;
+				white-space: nowrap;
+				transform: translateY(-50%);
+				&.active{
+					color:#8B2316;
+				}
+			}
+			
+		}
+		.imgbox:last-child{
+			.desc{
+				margin-left: 15rpx;
+			}
+		}
+		.line{
+			width:240rpx;
+			margin:0 -2rpx;
+			height: 16rpx;
+			background:#cccccc;
+			&.active{
+				background:#8B2316;
+			}
+		}
+	}
+	.steptext{
+		margin:0 30rpx;
+		display: flex;
+		width:900rpx;
+		justify-content: space-between;
+		align-items:center ;
+	}
+	.progress-step {
+		display: flex;
+		flex-direction: column;
+		align-items: center;
+		flex: 1;
+		
+		.step-icon {
+			width: 60rpx;
+			height: 60rpx;
+			border-radius: 50%;
+			background: #f0f0f0;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			margin-bottom: 16rpx;
+			
+			&.active {
+				background: #ff0000;
+			}
+		}
+		
+		.step-text {
+			font-size: 24rpx;
+			color: #666666;
+			
+			&.active {
+				color: #000000;
+			}
+		}
+		
+		&.active {
+			.step-icon {
+				background: #ff0000;
+			}
+			.step-text {
+				color: #000000;
+			}
+		}
+	}
+	
+	.progress-line {
+		flex: 1;
+		height: 4rpx;
+		background: #f0f0f0;
+		margin: 0 20rpx;
+		
+		&.active {
+			background: #ff0000;
+		}
+	}
+}
+
+.form-section {
+	background: #ffffff;
+	border-radius: 16rpx;
+	padding: 30rpx;
+	
+	
+	.form-item {
+		margin-bottom: 30rpx;
+		display: flex;
+		align-items: center;
+		border-bottom: 2rpx solid #eee;
+		
+		&:last-child {
+			margin-bottom: 0;
+		}
+		
+		.form-label {
+			display: block;
+			font-size: 28rpx;
+			color: #000000;
+			width:120rpx;
+		}
+		
+		.form-input {
+			flex:1;
+			height: 80rpx;
+			
+			padding: 0 20rpx;
+			font-size: 28rpx;
+			background: #ffffff;
+			
+			&:focus {
+				border-color: #ff0000;
+			}
+		}
+	}
+}
+
+.warning-text {
+	background: #ffffff;
+	border-radius: 16rpx;
+	padding: 30rpx;
+	margin-bottom: 60rpx;
+	font-size: 26rpx;
+	color: #000000;
+	line-height: 1.6;
+}
+
+.bottom-actions {
+	padding: 0 30rox 40rpx;
+	
+	.next-btn {
+		margin:0 30rpx;
+		height: 88rpx;
+		background: #cccccc;
+		color: #ffffff;
+		border: none;
+		border-radius: 8rpx;
+		font-size: 32rpx;
+		
+		&:active {
+			background: #8B2316;
+		}
+	}
+}
+</style>
diff --git a/pages_app/myCode/myCode.vue b/pages_app/myCode/myCode.vue
new file mode 100644
index 0000000..a211c24
--- /dev/null
+++ b/pages_app/myCode/myCode.vue
@@ -0,0 +1,350 @@
+<template>
+	<view class="my-code-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="我的二维码"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			<template v-slot:right>
+				<uni-icons type="redo" color="#8B2316" size="22"></uni-icons>
+			</template>
+		</uni-nav-bar>
+
+		<!-- 内容 -->
+		<scroll-view scroll-y class="page-scroll">
+			<!-- 顶部蓝色横幅 -->
+			<view class="blue-banner">
+				<up-image  :src="bgImg" width="100%" mode="widthFix" ></up-image>
+			</view>
+
+			<!-- 白色信息卡 -->
+			<view class="qrbox">
+				<view class="qr-card">
+					<view class="leftCircle"></view>
+					<view class="rightCircle"></view>
+					<view class="halfCircle"></view>
+					<view class="avatar-wrapper">
+						<image class="avatar" :src="avatarImg" mode="aspectFill" />
+					</view>
+					<view class="name-viewne">邹建东 主任医师</view>
+					<view class="org-viewne">北京肝胆相照公益基金会</view>
+					<view class="dash-viewne"></view>
+					<view class="slogan">
+						<text class="h1">不方便到医院就诊</text>
+						<text >我在<text class="hl">肝胆相照</text>线上帮助您！</text>
+					</view>
+					<view class="contact-qr">
+						<view class="contact-btn">
+							<up-image  :src="viewnkImg" width="430rpx" height="131rpx" ></up-image>
+							
+						</view>
+						<image class="qr-img" :src="qrImg" mode="aspectFit" />
+					</view>
+				</view>
+			</view>
+			<view class="squrebox">
+				<view class="square">
+					    <view class="s-top"></view>
+					    <view class="s-middle">
+							<view id="head">如何添加我为随访医生？</view>
+						</view>
+					    <view class="s-bottom">
+							<view>
+								<view class="descrow"><text>1</text>微信扫一扫上方二维码，关注“肝胆相照一家人”公众号</view>
+								<view class="descrow"><text>2</text>点击“邹建东专家工作室”，选择微信登录，注册后直接发送随访申请</view>
+								<view class="descrow"><text>3</text>若未弹出“随访申请发送成功”提示，请再次点击“邹建东专家工作室”发送随访申请</view>
+								<view class="descrow"><text>4</text>审核通过后，点击“就医服务-随访交流”，与专家进行图文交流</view>
+							</view>
+						</view>
+					    <view class="s-half-circle"></view>
+						<view class="s-half-circle-left"></view>
+					</view>
+			</view>
+
+			
+		</scroll-view>
+
+		<!-- 底部保存按钮 -->
+		<view class="save-bar">
+			<button class="save-btn" @cviewck="onSave">保存二维码到手机</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const avatarImg = '/static/xxtx.png';
+const qrImg = '/static/sfewm.png';
+import bgImg from "@/static/background.jpg"
+import viewnkImg from "@/static/arr.png"
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const onSave = () => {
+	uni.showToast({ title: '已保存(示例)', icon: 'none' });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-code-page {
+	min-height: 100vh;
+	background-color: #0d7dfd;
+}
+.squrebox{
+	margin:0 30rpx;
+	
+	
+	
+	
+	 overflow: hidden;
+}
+.square{
+	background-color: #3492FC;
+	 border-radius: 30rpx;
+	padding-bottom: 40rpx;
+	border: 2rpx solid #fff;
+	 position: relative;
+	 .s-half-circle-left{
+	 	border: 2rpx solid #fff;
+	 	    position: absolute;
+	 	    width: 60rpx;
+	 	    height: 60rpx;
+	 	    z-index:1;
+	 	    border-radius:50%;
+	 	    top:53rpx;
+	 	    background-color: #0d7dfd;
+	 	    left: -30rpx;
+	 }
+	 .s-half-circle{
+	 	border: 2rpx solid #fff;
+	 	    position: absolute;
+	 	    width: 60rpx;
+	 	    height: 60rpx;
+	 	    z-index:1;
+	 	    border-radius:50%;
+	 	    top:53rpx;
+	 	    background-color: #0d7dfd;
+	 	    right: -30rpx;
+	 }
+	 text{
+		 display: inline-flex;
+		 width: 40rpx;
+		 background-color: #6FB3FE;
+		 height: 40rpx;
+		 margin-right: 10rpx;
+		 border-radius:50%;
+		 align-items: center;
+		 justify-content: center;
+	 }
+	 #head {
+		 
+	     width: 75%;
+	     height: 60rpx;
+	     line-height: 60rpx;
+	     color: white;
+	     margin: 0 auto;
+	     text-align: center;
+	     border-radius: 30rpx;
+	     border: 2rpx solid white;
+	     letter-spacing: 8rpx;
+	 }
+	 .s-top{
+		 margin-top: 50rpx;
+	 }
+	.s-bottom{
+	    padding:0 40rpx;
+	   font-size: 26rpx;
+	   margin-top: 30rpx;
+	   line-height: 40rpx;
+	   color:#fff;
+	   .descrow{
+		   margin-bottom: 10rpx;
+	   }
+	    
+	}
+}
+.page-scroll {
+	height: calc(100vh - 100rpx);
+	padding-bottom: 140rpx;
+}
+
+.blue-banner {
+	height: 520rpx;
+	
+	width:100%;
+	color: #ffffff;
+	text-aviewgn: center;
+	
+	.banner-title-small {
+		font-size: 26rpx;
+		opacity: .9;
+	}
+	.banner-title {
+		margin-top: 40rpx;
+		font-size: 44rpx;
+		letter-spacing: 2rpx;
+		font-weight: 600;
+	}
+}
+
+.qr-card {
+	position: relative;
+	margin: -120rpx 30rpx 30rpx;
+	background: #ffffff;
+	border-radius: 20rpx;
+	padding: 140rpx 30rpx 30rpx;
+	
+	box-shadow: 0 12rpx 30rpx rgba(0,0,0,.08);
+	.leftCircle{
+		position: absolute;
+		top:251rpx;
+		left:-20rpx;
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		background-color: #0d7dfd;
+	}
+	.rightCircle{
+		position: absolute;
+		top:251rpx;
+		right:-20rpx;
+		width: 40rpx;
+		height: 40rpx;
+		border-radius: 50%;
+		background-color: #0d7dfd;
+	}
+	.halfCircle{
+		border-radius: 50%;
+		position: absolute;
+		border: 10rpx solid #6DB7FD;
+		border-width: 10rpx 10rpx 0 10rpx;
+		width: 160rpx;
+		padding:10rpx;
+		height: 80rpx;
+		left: 50%;
+		border-radius: 100rpx 100rpx 0 0;
+		top: -110rpx;
+		transform: translateX(-50%);
+		overflow: hidden;
+	}
+	.avatar-wrapper {
+		position: absolute;
+		left: 50%;
+		
+		top: -100rpx;
+		
+		transform: translateX(-50%);
+		width: 160rpx;
+		height: 160rpx;
+		
+		border-radius: 50%;
+		background: #ffffff;
+		padding: 8rpx;
+		box-shadow: 0 6rpx 20rpx rgba(0,0,0,.1);
+		.avatar {
+			width: 100%;
+			height: 100%;
+			border-radius: 50%;
+		}
+	}
+	
+	.name-viewne {
+		text-align: center;
+		font-size: 34rpx;
+		color: #1a76d2;
+		margin-top: 10rpx;
+	}
+	.org-viewne {
+		text-align: center;
+		font-size: 28rpx;
+		color: #4a90e2;
+		margin-top: 16rpx;
+	}
+	.dash-viewne {
+		margin: 24rpx auto;
+		height: 0;
+		border-bottom: 2rpx dashed #1c90fd;
+	}
+	.slogan {
+		display: flex;
+		font-weight:bold;
+		letter-spacing: 8rpx;
+		flex-direction: column;
+		text-aviewgn: center;
+		font-size: 40rpx;
+		color: #1e88e5;
+		viewne-height: 1.6;
+		text{
+			text-align: center;
+		}
+		.hl {
+			color: #ff9f1a;
+			margin-left: 8rpx;
+		}
+	}
+	.contact-qr {
+		display: flex;
+		aviewgn-items: center;
+		justify-content: space-between;
+		gap: 20rpx;
+		margin-top: 30rpx;
+		
+		.contact-btn {
+			flex: 1;
+			
+			position: relative;
+			color: #ffffff;
+			
+			display: flex;
+			aviewgn-items: center;
+			justify-content: space-between;
+			.contact-text {
+				white-space: pre-viewne;
+				font-size: 26rpx;
+				viewne-height: 1.5;
+			}
+			.arrow {
+				font-size: 36rpx;
+				opacity: .8;
+			}
+		}
+		.qr-img {
+			width: 220rpx;
+			height: 220rpx;
+			border-radius: 12rpx;
+			border: 2rpx soviewd #e0e0e0;
+		}
+	}
+}
+
+.bottom-gap { height: 120rpx; }
+
+.save-bar {
+	position: fixed;
+	left: 0;
+	right: 0;
+	bottom: 0;
+	z-index:10;
+	background: #ffffff;
+	border-top: 1rpx soviewd #eaeaea;
+	.save-btn {
+		width: 100%;
+		height: 100rpx;
+		background: #00cac1;
+		color: #ffffff;
+		border: none;
+		border-radius: 0;
+		font-size: 32rpx;
+		font-weight: normal;
+	}
+}
+</style>
diff --git a/pages_app/myCollect/myCollect.vue b/pages_app/myCollect/myCollect.vue
new file mode 100644
index 0000000..28a9430
--- /dev/null
+++ b/pages_app/myCollect/myCollect.vue
@@ -0,0 +1,109 @@
+<template>
+	<view class="my-collect-page">
+		<!-- 顶部导航栏 -->
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="我的收藏"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			
+		</uni-nav-bar>
+
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<!-- 观看历史 -->
+			<view class="list-item" @click="goToHistory">
+				<text class="item-text">英文期刊</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			
+			<!-- 离线缓存 -->
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">病例荟萃</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">病例讨论</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">肝胆视频</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">课件文档</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">肝胆新闻</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">患教学堂</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const goToHistory = () => {
+	uni.showToast({ title: '观看历史', icon: 'none' });
+};
+
+const goToCache = () => {
+	uni.showToast({ title: '离线缓存', icon: 'none' });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-collect-page {
+	min-height: 100vh;
+	background: #f9f9f9;
+}
+
+.content-area {
+	
+}
+
+.list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 30rpx 30rpx;
+	background: #ffffff;
+	
+	.item-text {
+		font-size: 32rpx;
+		color: #000000;
+	}
+}
+
+.divider {
+	height: 2rpx;
+	background: #f0f0f0;
+	
+}
+</style>
diff --git a/pages_app/myCourseware/myCourseware.vue b/pages_app/myCourseware/myCourseware.vue
new file mode 100644
index 0000000..c64922c
--- /dev/null
+++ b/pages_app/myCourseware/myCourseware.vue
@@ -0,0 +1,278 @@
+<template>
+	<view class="my-courseware-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="我的课件"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			
+		</uni-nav-bar>
+
+		<!-- 标签页导航 -->
+		<view class="tab-nav">
+			<view 
+				class="tab-item" 
+				:class="{ active: activeTab === 'download' }"
+				@click="switchTab('download')"
+			>
+				我的下载
+			</view>
+			<view class="divder"></view>
+			<view 
+				class="tab-item" 
+				:class="{ active: activeTab === 'share' }"
+				@click="switchTab('share')"
+			>
+				我的分享
+			</view>
+		</view>
+
+		<!-- 摘要栏 -->
+		<view class="summary-bar">
+			<view class="summary-item">
+				<up-image  :src="downLoadImg" width="36rpx" height="36rpx" ></up-image>
+				<text class="summary-text">: {{ downloadCount }}</text>
+			</view>
+			<view class="summary-item">
+				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
+				<text class="summary-text">: {{ totalAmount }}</text>
+			</view>
+		</view>
+
+		<!-- 课件列表 -->
+		<scroll-view 
+			scroll-y 
+			class="courseware-list"
+			refresher-enabled
+			@refresherrefresh="onRefresh"
+			:refresher-triggered="refreshing"
+			@scrolltolower="onLoadMore"
+			:lower-threshold="100"
+		>
+			<view class="courseware-item" v-for="(item, index) in coursewareList" :key="index" @click="onItemClick(item)">
+				<view class="item-content">
+					<view class="courseware-name">
+						<text class="label">课件名称:</text>
+						<text class="value">{{ item.name }}</text>
+					</view>
+					<view class="courseware-time">
+						<text class="label">时间:</text>
+						<text class="value">{{ item.time }}</text>
+					</view>
+					<view class="courseware-status">
+						<text class="label">状态:</text>
+						<text class="value status-paid">{{ item.status }}</text>
+					</view>
+				</view>
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view v-if="loading" class="loading-more">
+				<text>加载中...</text>
+			</view>
+			
+			<!-- 没有更多数据提示 -->
+			<view v-if="noMore" class="no-more">
+				<text>没有更多数据了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import downLoadImg from "@/static/course_download.png"
+import moneyImg from "@/static/course_yuan.png"
+const activeTab = ref('download');
+const refreshing = ref(false);
+const loading = ref(false);
+const noMore = ref(false);
+const page = ref(1);
+const pageSize = ref(10);
+const downloadCount = ref(4);
+const totalAmount = ref('20.00');
+
+const coursewareList = ref([
+	{
+		name: '慢性病毒性肝炎患者干扰素治疗不良反应临床处理专家共识',
+		time: '2025-02-21',
+		status: '已支付'
+	},
+	{
+		name: '慢乙肝抗病毒治疗-把握时机正确选择',
+		time: '2024-11-27',
+		status: '已支付'
+	},
+	{
+		name: '肝病相关血小板减少症临床管理中国专家共识(2023)解读',
+		time: '2024-10-06',
+		status: '已支付'
+	},
+	{
+		name: '俞云松:耐药阳性菌感染诊疗思路(CHINET数据云)',
+		time: '2022-10-24',
+		status: '已支付'
+	}
+]);
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const switchTab = (tab) => {
+	activeTab.value = tab;
+	// 切换标签时重置数据
+	page.value = 1;
+	noMore.value = false;
+	// 这里可以根据标签加载不同数据
+};
+
+const onItemClick = (item) => {
+	uni.showToast({ title: `点击了: ${item.name}`, icon: 'none' });
+};
+
+const onRefresh = () => {
+	refreshing.value = true;
+	page.value = 1;
+	noMore.value = false;
+	
+	setTimeout(() => {
+		refreshing.value = false;
+		uni.showToast({ title: '刷新完成', icon: 'success' });
+	}, 1000);
+};
+
+const onLoadMore = () => {
+	if (loading.value || noMore.value) return;
+	
+	loading.value = true;
+	
+	setTimeout(() => {
+		if (page.value < 3) {
+			page.value++;
+			uni.showToast({ title: '加载完成', icon: 'success' });
+		} else {
+			noMore.value = true;
+		}
+		loading.value = false;
+	}, 1000);
+};
+</script>
+
+<style lang="scss" scoped>
+.my-courseware-page {
+	min-height: 100vh;
+	
+}
+
+.tab-nav {
+	display: flex;
+	background: #ffffff;
+	border-bottom: 2rpx solid #f0f0f0;
+	position: fixed;
+	top: 140rpx;
+	left: 0;
+	right: 0;
+	z-index: 10;
+	.divder{
+		width: 2rpx;
+		height:100rpx;
+		background:#eee;
+	}
+	.tab-item {
+		flex: 1;
+		text-align: center;
+		padding: 30rpx 0;
+		font-size: 32rpx;
+		color: #666666;
+		position: relative;
+		
+		&.active {
+			color: #8B2316;
+			
+			
+		}
+	}
+}
+
+.summary-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	background: #8B2316;
+	padding: 20rpx 30rpx;
+	position: fixed;
+	top: 260rpx; // 标签页导航下方
+	left: 0;
+	right: 0;
+	z-index: 10;
+	
+	.summary-item {
+		display: flex;
+		align-items: center;
+		
+		.summary-text {
+			color: #ffffff;
+			font-size: 28rpx;
+			margin-left: 10rpx;
+		}
+	}
+}
+
+.courseware-list {
+	height: calc(100vh - 140rpx - 116rpx - 80rpx);
+	position: fixed;
+	top: 336rpx; // 调整顶部位置，为固定的摘要栏腾出空间
+	bottom: 0;
+	width: 100%;
+}
+
+.courseware-item {
+	background: #ffffff;
+	margin-bottom: 2rpx;
+	padding: 30rpx;
+	border-bottom:2rpx solid #eee;
+	.item-content {
+		.courseware-name,
+		.courseware-time,
+		.courseware-status {
+			display: flex;
+			margin-bottom: 20rpx;
+			
+			&:last-child {
+				margin-bottom: 0;
+			}
+			
+			.label {
+				width: 120rpx;
+				color: #8B2316;
+				font-size: 28rpx;
+			}
+			
+			.value {
+				flex: 1;
+				color: #666;
+				font-size: 28rpx;
+				line-height: 1.4;
+				
+				&.status-paid {
+					color: #666;
+				}
+			}
+		}
+	}
+}
+
+.loading-more, .no-more {
+	text-align: center;
+	padding: 30rpx;
+	color: #999999;
+	font-size: 26rpx;
+}
+</style>
diff --git a/pages_app/myDownLoad/myDownLoad.vue b/pages_app/myDownLoad/myDownLoad.vue
new file mode 100644
index 0000000..9659e3b
--- /dev/null
+++ b/pages_app/myDownLoad/myDownLoad.vue
@@ -0,0 +1,90 @@
+<template>
+	<view class="my-download-page">
+		<!-- 顶部导航栏 -->
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="我的下载"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			
+		</uni-nav-bar>
+
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<!-- 观看历史 -->
+			<view class="list-item" @click="goToHistory">
+				<text class="item-text">诊疗指南</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			
+			<!-- 离线缓存 -->
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">期刊杂志</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">课件文档</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			<view class="divider"></view>
+			
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const goToHistory = () => {
+	uni.showToast({ title: '观看历史', icon: 'none' });
+};
+
+const goToCache = () => {
+	uni.showToast({ title: '离线缓存', icon: 'none' });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-download-page {
+	min-height: 100vh;
+	background: #f9f9f9;
+}
+
+.content-area {
+	
+}
+
+.list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 30rpx 30rpx;
+	background: #ffffff;
+	
+	.item-text {
+		font-size: 32rpx;
+		color: #000000;
+	}
+}
+
+.divider {
+	height: 2rpx;
+	background: #f0f0f0;
+	
+}
+</style>
diff --git a/pages_app/myFlower/myFlower.vue b/pages_app/myFlower/myFlower.vue
index 0242df2..82b8fc1 100644
--- a/pages_app/myFlower/myFlower.vue
+++ b/pages_app/myFlower/myFlower.vue
@@ -1,24 +1,14 @@
 <template>
-	<uni-nav-bar
-		left-icon="left" 
-		title="我的鲜花" 
-		@clickLeft="goBack" 
-		fixed 
-		color="#8B2316" 
-		height="140rpx" 
-		:border="false" 
-		backgroundColor="#eeeeee"
-	/>
 
 	<view class="flower-page">
 		<!-- 顶部统计栏（与截图一致：两项） -->
 		<view class="stats-bar">
 			<view class="stat">
-				<text class="icon">🌸</text>
+				<up-image  :src="flowerImg" width="36rpx" height="36rpx" ></up-image>
 				<text class="num">{{ stat.totalCount }}</text>
 			</view>
 			<view class="stat">
-				<text class="icon">￥</text>
+				<up-image  :src="moneyImg" width="36rpx" height="36rpx" ></up-image>
 				<text class="num">{{ stat.totalAmount.toFixed(2) }}</text>
 			</view>
 		</view>
@@ -42,7 +32,7 @@
 			lower-threshold="80"
 		>
 			<view v-if="records.length === 0" class="empty-wrap">
-				<image class="empty-icon" src="/static/wdfl.png" mode="aspectFit" />
+				<up-image  :src="emptyImg" width="176rpx" height="204rpx" ></up-image>
 				<text class="empty-text">您暂未收到鲜花</text>
 			</view>
 
@@ -60,7 +50,9 @@
 
 <script setup>
 import { ref } from 'vue';
-
+import flowerImg from "@/static/flowers.png"
+import moneyImg from "@/static/mind_totle_money.png"
+import emptyImg from "@/static/icon_empty.png"
 // 与截图一致的顶部两项统计：总鲜花数与累计金额
 const stat = ref({ totalCount: 0, totalAmount: 0.0 });
 
@@ -132,13 +124,16 @@ $card: #ffffff;
 
 .stats-bar {
 	display: flex;
-	justify-content: space-around;
+	
 	align-items: center;
-	padding: 24rpx 0;
+	padding: 24rpx 30rpx;
 	background: #fff;
 	border-bottom: 2rpx solid #eee;
 
 	.stat { display: flex; align-items: center; gap: 16rpx; }
+	.stat:last-child{
+		margin-left: 120px;
+	}
 	.icon { font-size: 34rpx; }
 	.num { font-size: 30rpx; color: #333; }
 }
diff --git a/pages_app/myPatient/myPatient.vue b/pages_app/myPatient/myPatient.vue
new file mode 100644
index 0000000..4ccf8cb
--- /dev/null
+++ b/pages_app/myPatient/myPatient.vue
@@ -0,0 +1,482 @@
+<template>
+	
+	<view class="new-patient-page">
+	
+
+		<uni-nav-bar
+			left-icon="left" 
+			title="我的患者" 
+			@clickLeft="goBack" 
+			fixed 
+			color="#8B2316" 
+			height="140rpx" 
+			:border="false" 
+			backgroundColor="#eeeeee"
+		/>
+		
+
+		<!-- 提醒区域 -->
+		<view class="reminder-section">
+			<view class="reminder-icon">
+				<uni-icons type="notification" size="16" color="#ff9500"></uni-icons>
+			</view>
+			<text class="reminder-text">提醒: 为了避免不必要的纠纷,请您务必选择线下就诊过的患者</text>
+		</view>
+
+		<!-- 随访申请 -->
+		<view class="follow-up-section">
+			<view class="section-title">随访申请</view>
+			<view class="pending-request" v-if="pendingRequest">
+				<view class="request-item">
+					<view class="avatar">
+						<view class="avatar-icon"></view>
+					</view>
+					<view class="request-content">
+						<view class="request-time">2025-08-18 15:55:03</view>
+						<view class="request-text">我是陈新华,在线上和您沟通过,请您同意我作为您的随访患者</view>
+						
+						<view class="action-buttons">
+							<button class="reject-btn" @click="rejectRequest">拒绝</button>
+							<button class="agree-btn" @click="agreeRequest">同意</button>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 申请记录 -->
+		<view class="history-section">
+			<view class="section-title">申请记录(近一月)</view>
+			<view class="history-list">
+				<view class="history-item" v-for="(item, index) in historyList" :key="index">
+					<view class="avatar">
+						<view class="avatar-icon"></view>
+					</view>
+					<view class="history-content">
+						<view class="history-time">{{ item.time }}</view>
+						<view class="nickname">昵称: {{ item.nickname }}</view>
+						<view class="history-text">{{ item.message }}</view>
+						<view class="status-info">
+							<up-image  :src="goImg" width="30rpx" height="30rpx" ></up-image>
+							<text class="status-text">已同意</text>
+						</view>
+						
+					</view>
+				</view>
+			</view>
+		</view>
+
+		<!-- 底部按钮 -->
+		<view class="bottom-button">
+			<button class="add-patient-btn" @click="addPatient">加患者</button>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import goImg from "@/static/go_big.png"
+// 响应式数据
+const pendingRequest = ref({
+	name: '陈新华',
+	message: '我是陈新华,在线上和您沟通过,请您同意我作为您的随访患者',
+	time: '2025-08-18 15:55:03'
+});
+
+const historyList = ref([
+	{
+		nickname: '韩夫臣',
+		message: '我是韩夫臣,在线上和您沟通过,请您...',
+		time: '2025-08-19 22:41:35'
+	},
+	{
+		nickname: '鲁保山',
+		message: '我是鲁保山,在线上和您沟通过,请您...',
+		time: '2025-08-19 22:41:27'
+	},
+	{
+		nickname: '蒋宁宁',
+		message: '我是蒋宁宁,在线上和您沟通过,请您...',
+		time: '2025-08-19 11:25:46'
+	},
+	{
+		nickname: '蒋宁',
+		message: '我是蒋宁,在线上和您沟通过,请您同...',
+		time: '2025-08-19 11:25:39'
+	}
+]);
+
+// 方法
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const rejectRequest = () => {
+	uni.showModal({
+		title: '确认拒绝',
+		content: '确定要拒绝陈新华的随访申请吗？',
+		success: (res) => {
+			if (res.confirm) {
+				uni.showToast({
+					title: '已拒绝申请',
+					icon: 'success'
+				});
+				// 这里可以调用API拒绝申请
+			}
+		}
+	});
+};
+
+const agreeRequest = () => {
+	uni.showModal({
+		title: '确认同意',
+		content: '确定要同意陈新华的随访申请吗？',
+		success: (res) => {
+			if (res.confirm) {
+				uni.showToast({
+					title: '已同意申请',
+					icon: 'success'
+				});
+				// 这里可以调用API同意申请
+			}
+		}
+	});
+};
+
+const addPatient = () => {
+	uni.showToast({
+		title: '跳转到添加患者页面',
+		icon: 'none'
+	});
+	// 这里可以跳转到添加患者页面
+};
+</script>
+
+<style lang="scss" scoped>
+.new-patient-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+}
+
+.status-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10rpx 30rpx;
+	background-color: #ffffff;
+	font-size: 24rpx;
+	color: #333;
+	
+	.status-left {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+		
+		.time {
+			font-weight: 500;
+		}
+		
+		.status-icons {
+			display: flex;
+			gap: 10rpx;
+			
+					.status-icon {
+			width: 32rpx;
+			height: 32rpx;
+			background-color: #ff0000;
+			color: #ffffff;
+			border-radius: 6rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 20rpx;
+			font-weight: normal;
+		}
+		}
+	}
+	
+	.status-right {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+		
+		.network {
+			color: #666;
+		}
+		
+		.wifi-icon {
+			width: 32rpx;
+			height: 24rpx;
+			background-color: #333;
+			border-radius: 2rpx;
+		}
+		
+		.battery {
+			width: 40rpx;
+			height: 20rpx;
+			border: 2rpx solid #333;
+			border-radius: 4rpx;
+			background-color: #ff0000;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			
+			.battery-text {
+				font-size: 20rpx;
+				color: #ffffff;
+			}
+		}
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 30rpx;
+	background-color: #ffffff;
+	border-bottom: 1rpx solid #f0f0f0;
+	
+	.back-btn {
+		padding: 10rpx;
+	}
+	
+	.title {
+		flex: 1;
+		text-align: center;
+		font-size: 36rpx;
+		font-weight: normal;
+		color: #ff0000;
+		margin-right: 60rpx; // 为了保持标题居中
+	}
+}
+
+.reminder-section {
+	display: flex;
+	align-items: flex-start;
+	padding: 30rpx;
+	background-color: #ffffff;
+	margin-bottom: 20rpx;
+	
+	.reminder-icon {
+		margin-right: 20rpx;
+		margin-top: 4rpx;
+	}
+	
+	.reminder-text {
+		flex: 1;
+		font-size: 28rpx;
+		color: #333;
+		line-height: 1.5;
+	}
+}
+
+.follow-up-section {
+	background-color: #ffffff;
+	margin-bottom: 20rpx;
+	
+	.section-title {
+		padding: 30rpx 30rpx 20rpx;
+		font-size: 32rpx;
+		font-weight: normal;
+		color: #333;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+	
+	.pending-request {
+		padding: 30rpx;
+		
+		.request-item {
+			display: flex;
+			gap: 20rpx;
+			
+			.avatar {
+				width: 80rpx;
+				height: 80rpx;
+				background-color: #ffb6c1;
+				border-radius: 12rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				.avatar-icon {
+					width: 40rpx;
+					height: 40rpx;
+					background-color: #ffffff;
+					border-radius: 50%;
+				}
+			}
+			
+			.request-content {
+				flex: 1;
+				
+				.request-text {
+					font-size: 28rpx;
+					color: #333;
+					line-height: 1.4;
+					margin-bottom: 20rpx;
+				}
+				
+				.request-time {
+					font-size: 24rpx;
+					display: flex;
+					justify-content: flex-end;
+					color: #333;
+					margin-bottom: 10rpx;
+				}
+				
+				.action-buttons {
+					display: flex;
+					justify-content: center;
+					
+					gap:60rpx;
+					.reject-btn {
+						
+						width:180rpx;
+						height: 70rpx;
+						border: 2rpx solid #8B2316;
+						background-color: #ffffff;
+						color: #8B2316;
+						padding:0;
+						border-radius: 10rpx;
+						font-size: 28rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin: 0;
+					}
+					
+					.agree-btn {
+						margin: 0;
+					   width:180rpx;
+						padding:0;
+						height: 70rpx;
+						background-color: #8B2316;
+						color: #ffffff;
+						border: none;
+						border-radius: 10rpx;
+						font-size: 28rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+					}
+				}
+			}
+		}
+	}
+}
+
+.history-section {
+	background-color: #ffffff;
+	margin-bottom: 120rpx; // 为底部按钮留出空间
+	
+	.section-title {
+		padding: 30rpx 30rpx 20rpx;
+		font-size: 32rpx;
+		font-weight: normal;
+		color: #333;
+		border-bottom: 1rpx solid #f0f0f0;
+	}
+	
+	.history-list {
+		padding-bottom: 100rpx;
+		.history-item {
+			display: flex;
+			gap: 20rpx;
+			padding: 30rpx;
+			border-bottom: 1rpx solid #f0f0f0;
+			
+			&:last-child {
+				border-bottom: none;
+			}
+			
+			.avatar {
+				width: 80rpx;
+				height: 80rpx;
+				background-color: #ffb6c1;
+				border-radius: 12rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				
+				.avatar-icon {
+					width: 40rpx;
+					height: 40rpx;
+					background-color: #ffffff;
+					border-radius: 50%;
+				}
+			}
+			
+			.history-content {
+				flex: 1;
+				
+				.nickname {
+					font-size: 28rpx;
+					font-weight: normal;
+					color: #8B2316;
+					margin-bottom: 10rpx;
+				}
+				
+				.history-text {
+					font-size: 28rpx;
+					color: #333;
+					line-height: 1.4;
+					margin-bottom: 20rpx;
+				}
+				
+				.status-info {
+					display: flex;
+					align-items: center;
+					justify-content: flex-end;
+					gap: 10rpx;
+					margin-bottom: 10rpx;
+					
+					.status-arrow {
+						width: 0;
+						height: 0;
+						border-left: 8rpx solid transparent;
+						border-right: 8rpx solid transparent;
+						border-bottom: 12rpx solid #999;
+						transform: rotate(45deg);
+					}
+					
+					.status-text {
+						font-size: 30rpx;
+						color: #999;
+					}
+				}
+				
+				.history-time {
+					display: flex;
+					justify-content: flex-end;
+					font-size: 24rpx;
+					color: #333;
+				}
+			}
+		}
+	}
+}
+
+.bottom-button {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	
+	background-color: #ffffff;
+	border-top: 1rpx solid #f0f0f0;
+	
+	.add-patient-btn {
+		width: 100%;
+		height: 100rpx;
+		background-color: #00cac1;
+		color: #ffffff;
+		border: none;
+		border-radius: 0rpx;
+		font-size: 32rpx;
+		font-weight: normal;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+}
+</style>
diff --git a/pages_app/myVideo/myVideo.vue b/pages_app/myVideo/myVideo.vue
new file mode 100644
index 0000000..34a8ce2
--- /dev/null
+++ b/pages_app/myVideo/myVideo.vue
@@ -0,0 +1,82 @@
+<template>
+	<view class="my-video-page">
+		<!-- 顶部导航栏 -->
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="我的视频"
+			@cviewckLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			
+		</uni-nav-bar>
+
+		<!-- 内容区域 -->
+		<view class="content-area">
+			<!-- 观看历史 -->
+			<view class="list-item" @click="goToHistory">
+				<text class="item-text">观看历史</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+			
+			<!-- 分隔线 -->
+			<view class="divider"></view>
+			
+			<!-- 离线缓存 -->
+			<view class="list-item" @click="goToCache">
+				<text class="item-text">离线缓存</text>
+				<uni-icons type="right" color="#999999" size="16"></uni-icons>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const goToHistory = () => {
+	uni.showToast({ title: '观看历史', icon: 'none' });
+};
+
+const goToCache = () => {
+	uni.showToast({ title: '离线缓存', icon: 'none' });
+};
+</script>
+
+<style lang="scss" scoped>
+.my-video-page {
+	min-height: 100vh;
+	background: #f9f9f9;
+}
+
+.content-area {
+	
+}
+
+.list-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 30rpx 30rpx;
+	background: #ffffff;
+	
+	.item-text {
+		font-size: 32rpx;
+		color: #000000;
+	}
+}
+
+.divider {
+	height: 2rpx;
+	background: #f0f0f0;
+	
+}
+</style>
diff --git a/pages_app/patientGroup/patientGroup.vue b/pages_app/patientGroup/patientGroup.vue
new file mode 100644
index 0000000..20d8cf2
--- /dev/null
+++ b/pages_app/patientGroup/patientGroup.vue
@@ -0,0 +1,474 @@
+<template>
+	<view class="patient-group-page">
+	
+		<!-- 头部 -->
+		<uni-nav-bar
+			left-icon="left" 
+			title="患者分组" 
+			@clickLeft="goBack" 
+			fixed 
+			color="#8B2316" 
+			height="140rpx" 
+			:border="false" 
+			backgroundColor="#eeeeee"
+		/>
+	
+
+		<!-- 筛选排序栏 -->
+		<view class="filter-sort-bar">
+			<view class="sort-section" @click="toggleGroupSort">
+				<text class="sort-label">分组排序</text>
+				<view class="imgbox">
+					<up-image  :src="upImg" width="26rpx" height="26rpx" ></up-image>
+				</view>
+			</view>
+			<view class="divider"></view>
+			<view class="current-sort" @click="toggleInnerSort">
+				<text class="sort-text">按首字母</text>
+				<view class="imgbox">
+					<up-image  :src="upImg" width="26rpx" height="26rpx" ></up-image>
+				</view>
+			</view>
+		</view>
+
+		<!-- 分组排序弹窗 -->
+		<view v-if="showGroupSort" class="popup-panel">
+			<view class="popup-item" :class="{ active: selectedGroupSort==='letter' }" @click.stop="chooseGroupSort('letter')">
+				<text class="item-text">按首字母</text>
+				<uni-icons v-if="selectedGroupSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
+			</view>
+			<view class="popup-divider"></view>
+			<view class="popup-item" :class="{ active: selectedGroupSort==='count' }" @click.stop="chooseGroupSort('count')">
+				<text class="item-text">分组人数</text>
+				<uni-icons v-if="selectedGroupSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
+			</view>
+		</view>
+		<view v-if="showGroupSort" class="popup-mask" @click="closeGroupSort"></view>
+
+		<!-- 组内排序弹窗 -->
+		<view v-if="showInnerSort" class="popup-panel">
+			<view class="popup-item" :class="{ active: selectedInnerSort==='letter' }" @click.stop="chooseInnerSort('letter')">
+				<text class="item-text">按首字母</text>
+				<uni-icons v-if="selectedInnerSort==='letter'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
+			</view>
+			<view class="popup-divider"></view>
+			<view class="popup-item" :class="{ active: selectedInnerSort==='count' }" @click.stop="chooseInnerSort('count')">
+				<text class="item-text">分组人数</text>
+				<uni-icons v-if="selectedInnerSort==='count'" type="checkmarkempty" color="#8B2316" size="22"></uni-icons>
+			</view>
+		</view>
+		<view v-if="showInnerSort" class="popup-mask" @click="closeInnerSort"></view>
+
+		<!-- 患者列表 -->
+		<scroll-view class="patient-list-section" scroll-y="true" :style="{ height: scrollViewHeight }">
+			<view class="groupcell">
+				<view class="section-title">
+					
+					<view class="imgbox">
+						<up-image  :src="groupRightImg" width="19rpx" height="32rpx" ></up-image>
+					</view>
+					<view class="title">待分组患者 | 5</view>
+				</view>
+				<view class="patient-list" >
+					<view class="patient-item" v-for="(patient, index) in patientList" :key="index">
+						<view class="patient-avatar">
+							<up-image :src="patient.avatar" width="80rpx" height="80rpx" mode="aspectFill"></up-image>
+						</view>
+						<view class="patient-info">
+							<view class="patient-name">{{ patient.name }}</view>
+							<view class="follow-up-time">随访于{{ patient.lastFollowUp }}</view>
+						</view>
+					</view>
+				</view>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref, computed, onMounted } from 'vue';
+import upImg from "@/static/triangle_green_theme.png"
+import downImg from "@/static/triangle_normal.png"
+import groupRightImg from "@/static/groupright_big.png"
+import groupDownImg from "@/static/groupup_big.png"
+// 响应式数据
+const patientList = ref([
+	{
+		name: 'aa',
+		lastFollowUp: '2020-12-02',
+		avatar: '/static/avatar1.png' // 云朵天空头像
+	},
+	{
+		name: '测试',
+		lastFollowUp: '2023-10-08',
+		avatar: '/static/avatar2.png' // 粉色背景白色人像
+	},
+	{
+		name: '刘三多',
+		lastFollowUp: '2021-12-16',
+		avatar: '/static/avatar3.png' // 绿色山水风景
+	},
+	{
+		name: '路测试',
+		lastFollowUp: '2019-10-28',
+		avatar: '/static/avatar4.png' // 粉色背景卡通人像
+	},
+	{
+		name: '哦哦哦',
+		lastFollowUp: '2023-10-08',
+		avatar: '/static/avatar5.png' // 粉色背景白色人像
+	}
+]);
+
+// 计算滚动视图高度
+const scrollViewHeight = computed(() => {
+	// 获取系统信息计算可用高度
+	// 导航栏高度(140rpx) + 筛选栏高度(约80rpx) + 标题高度(约80rpx) = 300rpx
+	// 转换为px并减去，得到可用高度
+	const systemInfo = uni.getSystemInfoSync();
+	const windowHeight = systemInfo.windowHeight;
+	const navHeight = 140 / 2; // rpx转px
+	const filterHeight = 80 / 2;
+	const titleHeight = 80 / 2;
+	const availableHeight = windowHeight - navHeight - filterHeight - titleHeight;
+	return `${availableHeight}px`;
+});
+
+// 分组排序弹窗状态
+const showGroupSort = ref(false);
+const selectedGroupSort = ref('letter'); // letter | count
+
+// 组内排序弹窗状态
+const showInnerSort = ref(false);
+const selectedInnerSort = ref('letter');
+
+const toggleGroupSort = () => {
+  showGroupSort.value = !showGroupSort.value;
+  if (showGroupSort.value) showInnerSort.value = false;
+};
+
+const closeGroupSort = () => {
+  showGroupSort.value = false;
+};
+
+const chooseGroupSort = (type) => {
+  selectedGroupSort.value = type;
+  closeGroupSort();
+};
+
+const toggleInnerSort = () => {
+  showInnerSort.value = !showInnerSort.value;
+  if (showInnerSort.value) showGroupSort.value = false;
+};
+
+const closeInnerSort = () => {
+  showInnerSort.value = false;
+};
+
+const chooseInnerSort = (type) => {
+  selectedInnerSort.value = type;
+  closeInnerSort();
+};
+
+// 方法
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const createNew = () => {
+	uni.showToast({
+		title: '跳转到新建分组页面',
+		icon: 'none'
+	});
+	// 这里可以跳转到新建分组页面
+};
+</script>
+
+<style lang="scss" scoped>
+.patient-group-page {
+	min-height: 100vh;
+	background-color: #f5f5f5;
+}
+
+/* 弹窗样式 */
+.popup-mask {
+	position: fixed;
+	top: 220rpx; /* 位于筛选栏下方 */
+	left: 0;
+	right: 0;
+	bottom: 0;
+	background: rgba(0,0,0,0.3);
+	z-index: 8;
+}
+
+.popup-panel {
+	position: fixed;
+	top: 220rpx; /* 紧贴筛选栏 */
+	left: 0;
+	right: 0;
+	background: #fff;
+	z-index: 10;
+	box-shadow: 0 6rpx 20rpx rgba(0,0,0,0.08);
+}
+
+.popup-item {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	padding: 28rpx 30rpx;
+	font-size: 30rpx;
+	color: #333;
+}
+
+.popup-divider {
+	height: 2rpx;
+	background: #eaeaea;
+}
+
+.popup-item.active .item-text {
+	color: #8B2316;
+}
+.status-bar {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	padding: 10rpx 30rpx;
+	background-color: #ffffff;
+	font-size: 24rpx;
+	color: #333;
+	
+	.status-left {
+		display: flex;
+		align-items: center;
+		gap: 20rpx;
+		
+		.time {
+			font-weight: 500;
+		}
+		
+		.app-icons {
+			display: flex;
+			gap: 10rpx;
+			
+			.app-icon {
+				width: 24rpx;
+				height: 24rpx;
+				border-radius: 4rpx;
+				
+				&.weibo {
+					background-color: #ff8200;
+				}
+				
+				&.taobao {
+					background-color: #ff6a00;
+				}
+				
+				&.xiaohongshu {
+					background-color: #ff2442;
+				}
+			}
+		}
+	}
+	
+	.status-right {
+		display: flex;
+		align-items: center;
+		gap: 15rpx;
+		
+		.network {
+			color: #666;
+		}
+		
+		.signal-icon {
+			width: 32rpx;
+			height: 20rpx;
+			background-color: #333;
+			border-radius: 2rpx;
+		}
+		
+		.battery-text {
+			font-size: 20rpx;
+			color: #333;
+		}
+		
+		.battery {
+			width: 40rpx;
+			height: 20rpx;
+			border: 2rpx solid #333;
+			border-radius: 4rpx;
+			background-color: #4caf50;
+			position: relative;
+			
+			&::after {
+				content: '';
+				position: absolute;
+				right: -6rpx;
+				top: 6rpx;
+				width: 4rpx;
+				height: 8rpx;
+				background-color: #333;
+				border-radius: 0 2rpx 2rpx 0;
+			}
+		}
+	}
+}
+
+.header {
+	display: flex;
+	align-items: center;
+	padding: 20rpx 30rpx;
+	background-color: #ffffff;
+	border-bottom: 1rpx solid #f0f0f0;
+	
+	.back-btn {
+		padding: 10rpx;
+	}
+	
+	.title {
+		flex: 1;
+		text-align: center;
+		font-size: 36rpx;
+		font-weight: normal;
+		color: #ff0000;
+		margin-right: 60rpx; // 为了保持标题居中
+	}
+	
+	.new-btn {
+		padding: 10rpx;
+		
+		.new-text {
+			font-size: 28rpx;
+			color: #ff0000;
+		}
+	}
+}
+
+.filter-sort-bar {
+	display: flex;
+	align-items: center;
+	justify-content:center;
+	padding: 20rpx 30rpx;
+	background-color: #ffff;
+	position: fixed;
+	top: 140rpx;
+	left: 0;
+	right: 0;
+	z-index: 9;
+	border-bottom: 1rpx solid #f0f0f0;
+	.imgbox{
+		margin-top: -10rpx;
+	}
+	.sort-section {
+		display: flex;
+		align-items: center;
+		gap: 10rpx;
+		
+		.sort-label {
+			font-size: 28rpx;
+			color: #333;
+		}
+		
+		.sort-icon.down {
+			width: 0;
+			height: 0;
+			border-left: 8rpx solid transparent;
+			border-right: 8rpx solid transparent;
+			border-top: 12rpx solid #999;
+		}
+	}
+	
+	.divider {
+		width: 2rpx;
+		height: 40rpx;
+		background-color: #e0e0e0;
+		margin: 0 80rpx;
+	}
+	
+	.current-sort {
+		display: flex;
+		align-items: center;
+		gap: 10rpx;
+		
+		.sort-text {
+			font-size: 28rpx;
+			color: #333;
+		}
+		
+		.sort-icon.up {
+			width: 0;
+			height: 0;
+			border-left: 8rpx solid transparent;
+			border-right: 8rpx solid transparent;
+			border-bottom: 12rpx solid #999;
+			
+			&.active {
+				border-bottom-color: #ff0000;
+			}
+		}
+	}
+}
+
+.patient-list-section {
+	top: 240rpx;
+	width:100%;
+	bottom:0;
+	position: fixed;
+	background-color: #ffffff;
+	
+	.section-title {
+		padding: 30rpx 30rpx 20rpx;
+		font-size: 32rpx;
+		font-weight: normal;
+		display: flex;
+		color: #333;
+		border-bottom: 1rpx solid #f0f0f0;
+		.imgbox{
+			margin-top: 4rpx;
+			margin-right: 8rpx;
+		}
+	}
+	
+	.patient-list {
+		// 滚动视图样式
+		&::-webkit-scrollbar {
+			display: none;
+		}
+		
+		.patient-item {
+			display: flex;
+			align-items: center;
+			gap: 20rpx;
+			padding: 30rpx;
+			border-bottom: 1rpx solid #f0f0f0;
+			
+			&:last-child {
+				border-bottom: none;
+			}
+			
+			.patient-avatar {
+				width: 80rpx;
+				height: 80rpx;
+				border-radius: 12rpx;
+				overflow: hidden;
+			}
+			
+			.patient-info {
+				flex: 1;
+				
+				.patient-name {
+					font-size: 32rpx;
+					color: #333;
+					margin-top: 24rpx;
+				}
+				
+				.follow-up-time {
+					font-size: 24rpx;
+					color: #999;
+					display: flex;
+					justify-content: flex-end;
+				}
+			}
+		}
+	}
+}
+</style>
diff --git a/pages_app/videoDetail/videoDetail.vue b/pages_app/videoDetail/videoDetail.vue
index af3afca..051cdf1 100644
--- a/pages_app/videoDetail/videoDetail.vue
+++ b/pages_app/videoDetail/videoDetail.vue
@@ -21,7 +21,12 @@
 		<scroll-view class="content-scroll" scroll-y :show-scrollbar="false" @scrolltolower="onScrollToLower" lower-threshold="60">
 			<!-- 视频区域 -->
 			<view class="player-wrapper">
-				<video class="player" :src="videoSrc" :poster="poster" controls objectFit="contain"></video>
+				<!-- #ifdef APP -->
+				<uniVideo></uniVideo>
+			<!-- 	#endif -->
+			   <!--  #ifdef MP-WEIXIN -->
+				   <video class="player" :src="videoSrc" :poster="poster" controls objectFit="contain"></video> 
+				<!-- 	#endif -->
 			</view>
 
 			<!-- 标签切换 -->
@@ -70,7 +75,7 @@
 
 <script setup>
 import { ref } from 'vue';
-
+import uniVideo from '@/components/uniVideo/uniVideo.vue';
 const videoSrc = ref('');
 const poster = ref('/static/livebg.png');
 const activeTab = ref('info');
diff --git a/pages_app/videoHistroy/videoHistroy.vue b/pages_app/videoHistroy/videoHistroy.vue
new file mode 100644
index 0000000..492ad57
--- /dev/null
+++ b/pages_app/videoHistroy/videoHistroy.vue
@@ -0,0 +1,214 @@
+<template>
+	<view class="video-history-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="观看历史"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		>
+			<template v-slot:right>
+				<text class="edit-btn" @click="onEdit">编辑</text>
+			</template>
+		</uni-nav-bar>
+
+		<!-- 观看历史列表 -->
+		<scroll-view 
+			scroll-y 
+			class="history-list"
+			refresher-enabled
+			@refresherrefresh="onRefresh"
+			:refresher-triggered="refreshing"
+			@scrolltolower="onLoadMore"
+			:lower-threshold="100"
+		>
+			<view class="history-item" v-for="(item, index) in historyList" :key="index" @click="onItemClick(item)">
+				<view class="thumbnail">
+					<up-image :src="item.thumbnail" width="200rpx" height="120rpx" mode="aspectFill"></up-image>
+				</view>
+				<view class="content">
+					<view class="title">{{ item.title }}</view>
+					<view class="author">{{ item.author }}</view>
+				</view>
+				
+			</view>
+			
+			<!-- 加载更多提示 -->
+			<view v-if="loading" class="loading-more">
+				<text>加载中...</text>
+			</view>
+			
+			<!-- 没有更多数据提示 -->
+			<view v-if="noMore" class="no-more">
+				<text>没有更多数据了</text>
+			</view>
+		</scroll-view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+
+const refreshing = ref(false);
+const loading = ref(false);
+const noMore = ref(false);
+const page = ref(1);
+const pageSize = ref(10);
+const historyList = ref([
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '隐球菌性脑膜(脑)炎的诊治',
+		author: '蒋荣猛'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '南京市第二医院疑难肝病病理读片会暨疑难肝病MDT 第135期',
+		author: '南京市第二医院'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '徐医感染: 硬化出血发热路, 关关难过关关过',
+		author: '徐州医科大学附属医院感染科'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '自身免疫性肝病专栏|免疫治疗的双刃剑——1例自身免疫肝炎患者的…',
+		author: '首都医科大学附属北京佑安医院…'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '慢性乙肝功能性治愈讨论',
+		author: '庄辉'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '《2025年版慢加急性肝衰竭指南》解读',
+		author: '陈煜'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '《2025年版慢加急性肝衰竭指南》解读',
+		author: '陈煜'
+	},
+	{
+		thumbnail: '/static/bo_bg.png',
+		title: '慢性乙肝功能性治愈讨论',
+		author: '庄辉'
+	}
+]);
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const onEdit = () => {
+	uni.showToast({ title: '编辑功能', icon: 'none' });
+};
+
+const onItemClick = (item) => {
+	uni.showToast({ title: `点击了: ${item.title}`, icon: 'none' });
+};
+
+const onRefresh = () => {
+	refreshing.value = true;
+	page.value = 1;
+	noMore.value = false;
+	
+	// 模拟刷新数据
+	setTimeout(() => {
+		refreshing.value = false;
+		uni.showToast({ title: '刷新完成', icon: 'success' });
+	}, 1000);
+};
+
+const onLoadMore = () => {
+	if (loading.value || noMore.value) return;
+	
+	loading.value = true;
+	
+	// 模拟加载更多数据
+	setTimeout(() => {
+		// 这里可以调用API加载更多数据
+		// 示例：添加更多数据到列表
+		if (page.value < 3) { // 模拟只有3页数据
+			page.value++;
+			// 可以在这里添加新的数据到 historyList
+			uni.showToast({ title: '加载完成', icon: 'success' });
+		} else {
+			noMore.value = true;
+		}
+		loading.value = false;
+	}, 1000);
+};
+</script>
+
+<style lang="scss" scoped>
+.video-history-page {
+	min-height: 100vh;
+	background: #f9f9f9;
+}
+
+.history-list {
+	height: calc(100vh - 140rpx);
+	position: fixed;
+	top:140rpx;
+	bottom:0;
+	width:100%;
+}
+
+.edit-btn {
+	color: #8B2316;
+	font-size: 28rpx;
+	padding: 10rpx;
+}
+
+.history-item {
+	display: flex;
+	align-items: center;
+	padding: 30rpx;
+	background: #ffffff;
+	margin-bottom: 2rpx;
+	
+	.thumbnail {
+		margin-right: 20rpx;
+		border-radius: 8rpx;
+		overflow: hidden;
+	}
+	
+	.content {
+		flex: 1;
+		display: flex;
+		height: 120rpx;
+		flex-direction: column;
+		justify-content: space-between;
+		margin-right: 20rpx;
+		
+		.title {
+			font-size: 28rpx;
+			color: #333333;
+			line-height: 1.4;
+			margin-bottom: 10rpx;
+			display: -webkit-box;
+			-webkit-box-orient: vertical;
+			-webkit-line-clamp: 2;
+			overflow: hidden;
+		}
+		
+		.author {
+			font-size: 24rpx;
+			color: #666666;
+		}
+	}
+}
+
+.loading-more, .no-more {
+	text-align: center;
+	padding: 30rpx;
+	color: #999999;
+	font-size: 26rpx;
+}
+</style>
diff --git a/pages_app/wechatContact/wechatContact.vue b/pages_app/wechatContact/wechatContact.vue
new file mode 100644
index 0000000..9d32893
--- /dev/null
+++ b/pages_app/wechatContact/wechatContact.vue
@@ -0,0 +1,96 @@
+<template>
+	<view class="wechat-contact-page">
+		<!-- 顶部导航栏 -->
+		<uni-nav-bar
+			left-icon="left"
+			title="微信关联"
+			@clickLeft="goBack"
+			fixed
+			color="#8B2316"
+			height="140rpx"
+			:border="false"
+			backgroundColor="#eeeeee"
+		></uni-nav-bar>
+
+		<!-- 微信卡片 -->
+		<view class="card">
+			<view class="wx-left">
+				<up-image :src="wxIcon" width="120rpx" height="120rpx" mode="aspectFill"></up-image>
+			</view>
+			<view class="wx-center">
+				<view class="wx-title">微信</view>
+				<view class="wx-sub">未绑定微信</view>
+			</view>
+			<view class="wx-right">
+				<button class="bind-btn" @click="onBind">绑定</button>
+			</view>
+		</view>
+
+		<!-- 操作说明 -->
+		<view class="tips">
+			<view class="tips-title">操作说明:</view>
+			<view class="tips-line">1. 肝胆相照注册账号与微信绑定，肝胆相照相关直播、视频无忧随心看</view>
+			<view class="tips-line">2. 仅需操作一次，后续通过微信观看直播、视频无需额外操作，立即进入</view>
+			<view class="tips-line">
+				若您有任何疑问或需要我们协助，请与您的小助手联系或直接微信联系
+				<text class="highlight">igandan1000</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import wxIcon from '@/static/wechat_icon.png';
+
+const goBack = () => {
+	uni.navigateBack();
+};
+
+const onBind = () => {
+	uni.showToast({ title: '去绑定', icon: 'none' });
+};
+</script>
+
+<style lang="scss" scoped>
+.wechat-contact-page {
+	min-height: 100vh;
+	background: #ffffff;
+	padding-top: 160rpx;
+}
+
+.card {
+	display: flex;
+	align-items: center;
+	background: #ffffff;
+	margin: 20rpx 0;
+	padding: 30rpx;
+	border-bottom: 2rpx solid #f0f0f0;
+	.wx-left { margin-right: 24rpx; }
+	.wx-center {
+		flex: 1;
+		.wx-title { font-size: 34rpx; color: #222222; }
+		.wx-sub { margin-top: 10rpx; font-size: 26rpx; color: #9e9e9e; }
+	}
+	.wx-right {
+		.bind-btn {
+			min-width: 140rpx;
+			height: 64rpx;
+			background: #2ecc71;
+			color: #ffffff;
+			border: none;
+			border-radius: 12rpx;
+			font-size: 28rpx;
+			padding: 0 24rpx;
+		}
+	}
+}
+
+.tips {
+	padding: 30rpx;
+	background: #f7f7f7;
+	.tips-title { font-size: 30rpx; color: #222222; margin-bottom: 16rpx; }
+	.tips-line { font-size: 28rpx; color: #666666; line-height: 1.8; margin-bottom: 10rpx; }
+	.highlight { color: #e53935; }
+}
+</style>
diff --git a/static/add_card_no.png b/static/add_card_no.png
new file mode 100644
index 0000000..813e2d8
Binary files /dev/null and b/static/add_card_no.png differ
diff --git a/static/add_card_yes.png b/static/add_card_yes.png
new file mode 100644
index 0000000..194a19c
Binary files /dev/null and b/static/add_card_yes.png differ
diff --git a/static/arr.png b/static/arr.png
new file mode 100644
index 0000000..93c0eec
Binary files /dev/null and b/static/arr.png differ
diff --git a/static/background.jpg b/static/background.jpg
new file mode 100644
index 0000000..bad7099
Binary files /dev/null and b/static/background.jpg differ
diff --git a/static/course_download.png b/static/course_download.png
new file mode 100644
index 0000000..d3426a5
Binary files /dev/null and b/static/course_download.png differ
diff --git a/static/course_yuan.png b/static/course_yuan.png
new file mode 100644
index 0000000..593057a
Binary files /dev/null and b/static/course_yuan.png differ
diff --git a/static/fapaio_tip.png b/static/fapaio_tip.png
new file mode 100644
index 0000000..d50910a
Binary files /dev/null and b/static/fapaio_tip.png differ
diff --git a/static/flowers.png b/static/flowers.png
new file mode 100644
index 0000000..4c3d3c3
Binary files /dev/null and b/static/flowers.png differ
diff --git a/static/go_big.png b/static/go_big.png
new file mode 100644
index 0000000..b38017f
Binary files /dev/null and b/static/go_big.png differ
diff --git a/static/groupright_big.png b/static/groupright_big.png
new file mode 100644
index 0000000..6167445
Binary files /dev/null and b/static/groupright_big.png differ
diff --git a/static/groupup_big.png b/static/groupup_big.png
new file mode 100644
index 0000000..413b1ce
Binary files /dev/null and b/static/groupup_big.png differ
diff --git a/static/mind_totle_money.png b/static/mind_totle_money.png
new file mode 100644
index 0000000..5ebf3ae
Binary files /dev/null and b/static/mind_totle_money.png differ
diff --git a/static/skin/back.png b/static/skin/back.png
new file mode 100644
index 0000000..2dbae8b
Binary files /dev/null and b/static/skin/back.png differ
diff --git a/static/skin/forward.png b/static/skin/forward.png
new file mode 100644
index 0000000..e5ce660
Binary files /dev/null and b/static/skin/forward.png differ
diff --git a/static/skin/lock.png b/static/skin/lock.png
new file mode 100644
index 0000000..0374f8e
Binary files /dev/null and b/static/skin/lock.png differ
diff --git a/static/skin/skinLock.png b/static/skin/skinLock.png
new file mode 100644
index 0000000..d2a1a95
Binary files /dev/null and b/static/skin/skinLock.png differ
diff --git a/static/skin/unlock.png b/static/skin/unlock.png
new file mode 100644
index 0000000..c5bb842
Binary files /dev/null and b/static/skin/unlock.png differ
diff --git a/static/triangle_green_theme - 副本.png b/static/triangle_green_theme - 副本.png
new file mode 100644
index 0000000..d5186b8
Binary files /dev/null and b/static/triangle_green_theme - 副本.png differ
diff --git a/static/triangle_normal - 副本.png b/static/triangle_normal - 副本.png
new file mode 100644
index 0000000..b4019bd
Binary files /dev/null and b/static/triangle_normal - 副本.png differ
diff --git a/utils/client_type.js b/utils/client_type.js
index bdbb747..4557391 100644
--- a/utils/client_type.js
+++ b/utils/client_type.js
@@ -1,10 +1,12 @@
+ let client_type=''
+
  // #ifdef MP-WEIXIN
-   const  client_type="M"
+    client_type="M"
   // #endif
  // #ifdef APP-IOS
-   const  client_type="I"
+   client_type="I"
   // #endif
   // #ifdef APP-ANDROID
-    const  client_type="A"
+    client_type="A"
    // #endif
 export default client_type
\ No newline at end of file