完善站点组件的手机端样式

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">

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 card same-height">
-            <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">

source/components/list/ul-site-group/_index.scss

@@ -66,8 +66,19 @@
 }
 
 @media screen and (max-width:450px) {
+
+    .ul-site-list {
+        display        : flex;
+        align-items    : flex-start;
+        justify-content: space-between;
+
         .ul-site-item {
-        width: 49%;
+            width       : calc(50% - 10px);
+            margin-right: 0;
+
+            &.card {
+                width: calc(50% - 30px);
+            }
         }
 
         .ul-site-item-desc {
@@ -75,3 +86,4 @@
             margin-top: 3px;
         }
     }
+}

source/scss/_common.scss

@@ -79,3 +79,10 @@
     background-size    : cover;
     background-position: center;
 }
+
+.ul-demo-mobile-page {
+    width     : 360px;
+    height    : 660px;
+    border    : 0;
+    box-shadow: 0 0 3px #bbb;
+}

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)
         })