增加手机端样式控制

This commit is contained in:
2022-11-01 09:48:05 +08:00
parent 6e0b72d983
commit e4980cbe46
3 changed files with 11 additions and 4 deletions

View File

@@ -2,4 +2,5 @@ title={$component_title}
padding=0
margin=0
gray=0
gray=0
mobile=0

View File

@@ -1,3 +1,4 @@
title=音乐列表
padding=0
gray=1
gray=1
mobile=1

View File

@@ -74,7 +74,7 @@
<div class="desc">
{$vo.desc|raw}
</div>
<div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}">
<div class="component-item" style="margin-top: 10px;" data-margin="{$vo.config.MARGIN|default='0'}" data-padding="{$vo.config.PADDING|default='0'}" data-gray="{$vo.config.GRAY|default='0'}" data-mobile="{$vo.config.MOBILE|default='0'}">
<div class="">
<span>预览效果</span>
<div class="layui-btn-group" style="margin-left: 10px;">
@@ -89,9 +89,13 @@
<button type="button" class="layui-btn layui-btn-xs" @click="gray = 1" :class="gray == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">gray</button>
<button type="button" class="layui-btn layui-btn-xs" @click="gray = 0" :class="gray == 0 ? 'layui-btn-normal' : 'layui-btn-primary'"></button>
</div>
<div class="layui-btn-group" style="margin-left: 10px;">
<button type="button" class="layui-btn layui-btn-xs" @click="mobile = 1" :class="mobile == 1 ? 'layui-btn-normal' : 'layui-btn-primary'">手机端</button>
<button type="button" class="layui-btn layui-btn-xs" @click="mobile = 0" :class="mobile == 0 ? 'layui-btn-normal' : 'layui-btn-primary'">正常</button>
</div>
</div>
<div class="" style="margin-top: 10px;">
<div class="preview" :class="{'ul-bg-gray':gray,'ul-padding-md':padding,'ul-margin-md':margin}">{$vo.html|raw}</div>
<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>
</div>
<div class="code">
@@ -281,6 +285,7 @@
margin: $(elem).data('margin'),
padding: $(elem).data('padding'),
gray: $(elem).data('gray'),
mobile: $(elem).data('mobile'),
}
},