diff --git a/source/components/list/ul-order-list-simple-card/_index.html b/source/components/list/ul-order-list-simple-card/_index.html
index 7c07159..ef6e57e 100644
--- a/source/components/list/ul-order-list-simple-card/_index.html
+++ b/source/components/list/ul-order-list-simple-card/_index.html
@@ -7,7 +7,7 @@
         </div>
         <div class="item-body">
             <div class="item-body-item">
-                <div class="item-image" style="background-image: url('/static/images/view.jpg');">
+                <div class="item-image ul-demo-img-bg">
 
                 </div>
                 <div class="item-info">
diff --git a/source/components/list/ul-site-group/_index.html b/source/components/list/ul-site-group/_index.html
index 874daba..be35461 100644
--- a/source/components/list/ul-site-group/_index.html
+++ b/source/components/list/ul-site-group/_index.html
@@ -4,7 +4,7 @@
     </div>
     <div class="ul-site-list">
         <div class="ul-site-item" v-for="i in 5">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
@@ -16,7 +16,7 @@
             </div>
         </div>
         <div class="ul-site-item">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
@@ -35,19 +35,19 @@
     </div>
     <div class="ul-site-list">
         <div class="ul-site-item card" v-for="i in 5">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
-                    layui奥宏样式库
+                    layui奥宏样式
                 </div>
                 <div class="ul-site-item-desc">
-                    纯CSS的组件案例样式大全
+                    纯CSS的组件
                 </div>
             </div>
         </div>
         <div class="ul-site-item card">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
@@ -66,19 +66,19 @@
     </div>
     <div class="ul-site-list">
         <div class="ul-site-item card same-height" v-for="i in 5">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
-                    layui奥宏样式库
+                    layui奥宏样式
                 </div>
                 <div class="ul-site-item-desc">
-                    纯CSS的组件案例样式大全
+                    纯CSS的组件
                 </div>
             </div>
         </div>
-        <div class="ul-site-item card small-height">
-            <div class="ul-site-item-logo" style="background-image: url('/static/images/view.jpg')">
+        <div class="ul-site-item card same-height">
+            <div class="ul-site-item-logo ul-demo-img-bg">
             </div>
             <div class="ul-site-item-info">
                 <div class="ul-site-item-title">
diff --git a/source/components/list/ul-site-group/_index.scss b/source/components/list/ul-site-group/_index.scss
index e0e9401..17e3f5d 100644
--- a/source/components/list/ul-site-group/_index.scss
+++ b/source/components/list/ul-site-group/_index.scss
@@ -66,12 +66,24 @@
 }
 
 @media screen and (max-width:450px) {
-    .ul-site-item {
-        width: 49%;
-    }
 
-    .ul-site-item-desc {
-        font-size : 11px;
-        margin-top: 3px;
+    .ul-site-list {
+        display        : flex;
+        align-items    : flex-start;
+        justify-content: space-between;
+
+        .ul-site-item {
+            width       : calc(50% - 10px);
+            margin-right: 0;
+
+            &.card {
+                width: calc(50% - 30px);
+            }
+        }
+
+        .ul-site-item-desc {
+            font-size : 11px;
+            margin-top: 3px;
+        }
     }
 }
\ No newline at end of file
diff --git a/source/scss/_common.scss b/source/scss/_common.scss
index e698bce..ec62d56 100644
--- a/source/scss/_common.scss
+++ b/source/scss/_common.scss
@@ -78,4 +78,11 @@
     background-image   : url("img/view.jpg");
     background-size    : cover;
     background-position: center;
+}
+
+.ul-demo-mobile-page {
+    width     : 360px;
+    height    : 660px;
+    border    : 0;
+    box-shadow: 0 0 3px #bbb;
 }
\ No newline at end of file
diff --git a/view/index/index/index.html b/view/index/index/index.html
index c6b0bc8..a779cc6 100644
--- a/view/index/index/index.html
+++ b/view/index/index/index.html
@@ -95,7 +95,8 @@
                                         </div>
                                     </div>
                                     <div class="" style="margin-top: 10px;">
-                                        <div class="preview" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin,'ul-mobile-box':mobile}">{$vo.html|raw}</div>
+                                        <div class="preview content" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}" :style="mobile== 1?'display:none':''">{$vo.html|raw}</div>
+                                        <iframe class="preview iframe ul-demo-mobile-page" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}" :style="mobile== 0?'display:none':''"></iframe>
                                     </div>
                                 </div>
                                 <div class="code">
@@ -276,9 +277,6 @@
 
 
         $('.component-item').each(function (index, elem) {
-
-
-
             createApp({
                 data() {
                     return {
@@ -286,8 +284,40 @@
                         padding: $(elem).data('padding'),
                         gray: $(elem).data('gray'),
                         mobile: $(elem).data('mobile'),
+
                     }
                 },
+                mounted() {
+
+                    var html = $(elem).find('.preview.content').html();
+
+                    var iframe = $(elem).find('.preview.iframe')[0];
+                    var preview =
+                        iframe.contentDocument ||
+                        iframe.contentWindow.document;
+
+                    var iframeHtml = '<!DOCTYPE html>' +
+                        '<html lang="en">' +
+                        '<head>' +
+                        '<meta charset="UTF-8">' +
+                        '<meta http-equiv="X-UA-Compatible" content="IE=edge">' +
+                        '<meta name="viewport" content="width=device-width, initial-scale=1.0">' +
+                        '<title>演示</title>' +
+                        '<link rel="stylesheet" href="/static/css/reset.css">' +
+                        '<link rel="stylesheet" href="/static/css/pagination.css">' +
+                        '<link rel="stylesheet" href="/static/lib/layui/css/layui.css">' +
+                        '<link rel="stylesheet" href="/cdn/layui-ul.css">' +
+                        '<link rel="stylesheet" href="/cdn/layui-ul-mb.css">' +
+                        '</head>' +
+                        '<body>' +
+                        html +
+                        '</body>' +
+                        '</html>'
+
+                    preview.open();
+                    preview.write(iframeHtml);
+                    preview.close();
+                }
 
             }).mount(elem)
         })