diff --git a/src/pages/exchangepage/main/main.js b/src/pages/exchangepage/main/main.js
index 1af97a17..e8c82bff 100644
--- a/src/pages/exchangepage/main/main.js
+++ b/src/pages/exchangepage/main/main.js
@@ -269,13 +269,24 @@ export default class acclist extends React.Component {
 			current,
 			pageSize
 		} = this.state;
-		return ( <div id = "dislist" >
-			<TabPage tabs = {this.state.tabList} tabChange = {
+		return ( <
+			div id = "dislist" >
+			<
+			TabPage tabs = {
+				this.state.tabList
+			}
+			tabChange = {
 				(e) => this.tabChange(e)
 			} >
-			<div className = "distable dflexj" >
-			<Button type = "primary" icon = "plus"
-			onClick = {this.clickFn.bind(this)} > 我的模板 </Button> <Ipt icon = "search"
+			<
+			div className = "distable dflexj" >
+			<
+			Button type = "primary"
+			icon = "plus"
+			onClick = {
+				this.clickFn.bind(this)
+			} > 我的模板 < /Button> <
+			Ipt icon = "search"
 			placeholder = {
 				"请输入关键字进行搜索"
 			}
@@ -291,9 +302,12 @@ export default class acclist extends React.Component {
 			alignment = {
 				'left'
 			}
-			/> </div> <div >
+			/> <
+			/div> <
+			div >
 
-			<Grid isBorder = {
+			<
+			Grid isBorder = {
 				true
 			}
 			spliteColor = {
diff --git a/src/pages/exchangepage/mytemplate/main.js b/src/pages/exchangepage/mytemplate/main.js
index 4bebdfec..3ab0a360 100644
--- a/src/pages/exchangepage/mytemplate/main.js
+++ b/src/pages/exchangepage/mytemplate/main.js
@@ -226,7 +226,8 @@ delFn(e,row){
          		a onClick={(e)=>{this.delFn(e,rowData)}}
          	className = "grid-link" > 删除 < /a>
          
-         		</span>
+         		<
+         		/span>
          }
         }}
         />
diff --git a/src/pages/exchangepage/template/main.js b/src/pages/exchangepage/template/main.js
index 0406e5ab..74428594 100644
--- a/src/pages/exchangepage/template/main.js
+++ b/src/pages/exchangepage/template/main.js
@@ -6,7 +6,7 @@ import  "./main.less"
 import { Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu } from 'zent';
 import "../../../assets/comm.css"
 
-
+import PreviewItem from "./preview.js"
 import {handelResponse,getSystemTemplate} from "../../../assets/api.js"
 // <div className="block-selector-list">
 // 	         <span className="block-selector-list-label">行业：</span>
@@ -161,8 +161,8 @@ export default class mytemplate extends React.Component{
 			  
 			  
 		
-			  
-			 
+			
+		
 	         
 			 
 			 
@@ -181,18 +181,13 @@ export default class mytemplate extends React.Component{
 	  
 	  
 	  {
-	  this.state.preview_visible ? (
-	  <div className="preview">
-	  <div className="preview-title">
-	    <div>手机预览</div>
-	    <Icon type="close" className="btn-close" onClick={(e)=>{this.closePhone()}} />
-	  </div>
-	  
-	  
-	  
-	  
-	  </div>
-	     ) : null
+		<div className="preview-box">
+		 
+		<PreviewItem />
+		
+		
+		
+		</div>
 	  }              
 	  
 	  
diff --git a/src/pages/exchangepage/template/main.less b/src/pages/exchangepage/template/main.less
index 8b2119e6..1996ee0a 100644
--- a/src/pages/exchangepage/template/main.less
+++ b/src/pages/exchangepage/template/main.less
@@ -8087,3 +8087,13 @@ textarea::-webkit-input-placeholder {
 .scroller-page .block-selector-list-label {
 	margin-right: 22px
 }
+.preview-box{
+	width: 375px;
+	height: 600px;
+	position: fixed;
+	top: 20%;
+	left: 50%;
+	margin-left: -187.5px;
+	background-color: #FFFFFF;
+	z-index: 99999;
+}
\ No newline at end of file
diff --git a/src/pages/exchangepage/template/preview.css b/src/pages/exchangepage/template/preview.css
new file mode 100644
index 00000000..0fd3bece
--- /dev/null
+++ b/src/pages/exchangepage/template/preview.css
@@ -0,0 +1,69 @@
+#preview{
+
+		max-height: 600px;
+		overflow-y: auto;
+		.top{
+			width: 100%;
+			height: auto;
+			padding: 0;
+			margin: 0;
+		}
+		img{
+			width: 100%;
+			vertical-align: middle;
+		}
+		.center{
+			width: 100%;
+			padding: 0;
+			margin: 0;
+			position: relative;
+			overflow: hidden;
+						vertical-align: middle;
+		}
+		.bottom{
+			width: 100%;
+			height: auto;
+						vertical-align: middle;
+		}
+		
+		.key{
+			position: absolute;
+			top: 38px;
+			left: 50%;
+			width:200px;
+			height: 30px;
+			z-index: 2;
+			margin-left: -90px;
+			background-color: #f3f5f7;
+			border: none;
+			outline: none;
+			font-size: 14px;
+		}
+		.code{
+			position: absolute;
+			top:88px;
+			left: 50%;
+			width: 100px;
+			height: 36px;
+			z-index: 2;
+			margin-left: -72px;
+			background-color: #f3f5f7;
+			border: none;
+			outline: none;
+			font-size: 14px;
+		}
+	.submit{
+		position: absolute;
+		top: 1.5rem;
+		left: 50%;
+		width: 3rem;
+		height: 0.4rem;
+		margin-left: -1.5rem;
+		z-index: 2;
+		background-color: transparent;
+	}
+	.submit:active{
+		background-color: #F3F5F7;
+		border-radius: 30px;
+		opacity: 0.2;
+	}
diff --git a/src/pages/exchangepage/template/preview.js b/src/pages/exchangepage/template/preview.js
index 3b40d6a4..8dacce71 100644
--- a/src/pages/exchangepage/template/preview.js
+++ b/src/pages/exchangepage/template/preview.js
@@ -2,7 +2,7 @@ import ReactDOM from 'react-dom';
 import React, { Component } from 'react';
 import { HashRouter as Router, Route, Link } from "react-router-dom";
 import { Button } from 'zent';
-import  "./list.less"
+
 import {Input,openDialog ,Notify,Switch ,Swiper,Dropdown,DropdownPosition,DropdownClickTrigger,Icon,MenuItem,DropdownContent,Menu,Sweetalert } from 'zent';
 import "../../../assets/comm.css"
 import _ from "lodash";
@@ -25,8 +25,7 @@ export default class acclist extends React.Component{
     return(
       <div id="preview">
 			
-			
-			
+