ulthon/layui-ul
1
0
Fork 0
mirror of https://gitee.com/ulthon/layui-ul.git synced 2026-07-01 18:42:47 +08:00
Code Issues Packages Projects Releases Wiki Activity

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

Browse Source
This commit is contained in:
augushong
2022-11-01 10:34:19 +08:00
parent e4980cbe46
commit bef8467c76
5 changed files with 71 additions and 22 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
source/components/list/ul-order-list-simple-card/_index.html
View File

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

22
source/components/list/ul-site-group/_index.html
View File

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

24
source/components/list/ul-site-group/_index.scss
View File

@@ -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;
}
}
}

7
source/scss/_common.scss
View File

@@ -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;
}

38
view/index/index/index.html
View File

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