blackteay/ThinkAdmin
1
0
Fork 0
mirror of https://gitee.com/zoujingli/ThinkAdmin.git synced 2025-04-06 03:58:04 +08:00
Code Issues Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
Anyon 2020-09-19 16:38:43 +08:00
parent b15a3e66ee
commit 57b925191a
6 changed files with 148 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

81
app/wechat/view/keys/form.html
View File

@ -2,23 +2,6 @@
{block name="style"}
<style>
.keys-container .input-group-addon {
top: 0;
right: 0;
color: #eee;
width: 25px;
padding: 7px;
position: absolute;
margin-top: -1px;
text-align: center;
background: #393D49
}
.keys-container [data-tips-image] {
width: 112px;
height: auto
}
.keys-container .layui-card {
width: 580px;
height: 578px;
@ -27,9 +10,14 @@
}
.keys-container .layui-card .layui-card-body {
height: 515px;
height: 495px;
padding-right: 50px
}
.keys-container .layui-card [data-tips-image] {
width: 112px;
height: auto
}
</style>
{/block}
@ -37,9 +25,7 @@
<div class="nowrap think-box-shadow" style="width:910px">
<div class='mobile-preview inline-block'>
<div class='mobile-header'>公众号</div>
<div class='mobile-body' data-iframe-box>
<!-- <iframe id="phone-preview" frameborder="0" marginheight="0" marginwidth="0"></iframe>-->
</div>
<div class='mobile-body' data-iframe-box></div>
</div>
<div class="keys-container inline-block absolute margin-left-10 margin-right-15">
<form class="layui-form" onsubmit="return false" autocomplete="off" data-auto="true" action="{:request()->url()}" method="post">
@ -97,15 +83,15 @@
<label class="layui-form-label label-required">选取图文</label>
<div class="layui-input-block">
<input type="hidden" name="news_id" value="{$vo.news_id|default=0}">
<a class="layui-btn layui-btn-primary" data-title="选择图文" data-iframe="{:url('wechat/news/select')}?field={:encode('news_id')}">选择图文</a>
<a class="layui-btn layui-btn-sm layui-btn-primary" data-title="选择图文" data-iframe="{:url('wechat/news/select')}?field={:encode('news_id')}">选择图文</a>
</div>
</div>
<div class="layui-form-item" data-keys-type='image'>
<label class="layui-form-label label-required">图片地址</label>
<div class="layui-input-block">
<input class="layui-input" onchange="$(this).nextAll('img').attr('src', this.value)" value="{$vo.image_url|default=$defaultImage}" name="image_url" required placeholder="请上传图片或输入图片URL地址">
<a data-file="btn" data-type="bmp,png,jpeg,jpg,gif" data-field="image_url" class="input-group-addon"><i class="layui-icon layui-icon-upload"></i></a>
<input class="layui-input padding-right-30" onchange="$(this).nextAll('img').attr('src', this.value)" value="{$vo.image_url|default=$defaultImage}" name="image_url" required placeholder="请上传图片或输入图片URL地址　　">
<a data-file="btn" data-type="bmp,png,jpeg,jpg,gif" data-field="image_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
<p class="help-block">文件最大2Mb，支持bmp/png/jpeg/jpg/gif格式</p>
<img data-tips-image src='{$vo.image_url|default=$defaultImage}' alt="img">
</div>
@ -114,10 +100,8 @@
<div class="layui-form-item" data-keys-type='voice'>
<label class="layui-form-label">上传语音</label>
<div class="layui-input-block">
<div class="input-group">
<input class='layui-input' value="{$vo.voice_url|default=''}" name="voice_url" required title="请上传语音文件或输入语音URL地址　　　">
<a data-file="btn" data-type="mp3,wma,wav,amr" data-field="voice_url" class="input-group-addon"><i class="layui-icon layui-icon-upload"></i></a>
</div>
<input class='layui-input padding-right-30' value="{$vo.voice_url|default=''}" name="voice_url" required title="请上传语音文件或输入语音URL地址　　">
<a data-file="btn" data-type="mp3,wma,wav,amr" data-field="voice_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
<p class="help-block">文件最大2Mb，播放长度不超过60s，mp3/wma/wav/amr格式</p>
</div>
</div>
@ -132,10 +116,8 @@
<div class="layui-form-item" data-keys-type='music'>
<label class="layui-form-label label-required">上传音乐</label>
<div class="layui-input-block">
<div class="input-group">
<input class='layui-input' value="{$vo.music_url|default=''}" name="music_url" required title="请上传音乐文件或输入音乐URL地址　　　">
<a data-file="btn" data-type="mp3,wma,wav,amr" data-field="music_url" class="input-group-addon"><i class="layui-icon layui-icon-upload"></i></a>
</div>
<input class='layui-input padding-right-30' value="{$vo.music_url|default=''}" name="music_url" required title="请上传音乐文件或输入音乐URL地址　　">
<a data-file="btn" data-type="mp3,wma,wav,amr" data-field="music_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
</div>
</div>
@ -149,8 +131,8 @@
<div class="layui-form-item" data-keys-type='music'>
<label class="layui-form-label">音乐图片</label>
<div class="layui-input-block">
<input class="layui-input" value="{$vo.music_image|default=$defaultImage}" name="music_image" required title="请上传音乐图片或输入音乐图片URL地址　　　">
<a data-file="btn" data-type="jpg,png" data-field="music_image" class="input-group-addon"><i class="layui-icon layui-icon-upload"></i></a>
<input class="layui-input padding-right-30" value="{$vo.music_image|default=$defaultImage}" name="music_image" required title="请上传音乐图片或输入音乐图片URL地址　　">
<a data-file="btn" data-type="jpg,png" data-field="music_image" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
<p class="help-block">文件最大64KB，只支持JPG格式</p>
</div>
</div>
@ -165,10 +147,8 @@
<div class="layui-form-item" data-keys-type='video'>
<label class="layui-form-label">上传视频</label>
<div class="layui-input-block">
<div class="input-group">
<input class='layui-input' value="{$vo.video_url|default=''}" name="video_url" required title="请上传视频或输入音乐视频URL地址　　　">
<a data-file="btn" data-type="mp4" data-field="video_url" class="input-group-addon"><i class="layui-icon layui-icon-upload"></i></a>
</div>
<input class='layui-input padding-right-30' value="{$vo.video_url|default=''}" name="video_url" required title="请上传视频或输入音乐视频URL地址　　">
<a data-file="btn" data-type="mp4" data-field="video_url" class="input-right-icon"><i class="layui-icon layui-icon-upload"></i></a>
<p class="help-block">文件最大10MB，只支持MP4格式</p>
</div>
</div>
@ -197,12 +177,9 @@
{block name="script"}
<script>
(function ($body) {
$(function () {
var $body = $('body');
// 刷新预览显示
/*! 刷新预览显示 */
function showReview(params, location) {
if (params['type'] === 'news') {
location = '{:url("@wechat/api.review/news")}?id=_id_'.replace('_id_', params.content);
@ -214,20 +191,20 @@
}
$body.off('change', '[name="news_id"]').on('change', '[name="news_id"]', function () {
// 图文显示预览
/*! 图文显示预览 */
showReview({type: 'news', content: this.value});
}).off('change', '[name="content"]').on('change', '[name="content"]', function () {
// 文字显示预览
/*! 文字显示预览 */
showReview({type: 'text', content: this.value});
}).off('change', '[name="image_url"]').on('change', '[name="image_url"]', function () {
// 图片显示预览
/*! 图片显示预览 */
showReview({type: 'image', content: this.value});
}).off('change', '[name="voice_url"]').on('change', '[name="voice_url"]', function () {
// 语音显示预览
/*! 语音显示预览 */
showReview({type: 'voice', content: this.value});
});
// 音乐显示预览
/*! 音乐显示预览 */
var musicSelector = '[name="music_url"],[name="music_title"],[name="music_desc"],[name="music_image"]';
$body.off('change', musicSelector).on('change', musicSelector, function () {
var params = {type: 'music'}, $parent = $(this).parents('form');
@ -238,7 +215,7 @@
showReview(params);
});
// 视频显示预览
/*! 视频显示预览 */
var videoSelector = '[name="video_title"],[name="video_url"],[name="video_desc"]';
$body.off('change', videoSelector).on('change', videoSelector, function () {
var params = {type: 'video'}, $parent = $(this).parents('form');
@ -248,7 +225,7 @@
showReview(params);
});
// 默认类型事件
/*! 默认类型事件 */
$body.off('click', 'input[name=type]').on('click', 'input[name=type]', function () {
var value = $(this).val(), $form = $(this).parents('form');
if (value === 'customservice') value = 'text';
@ -271,11 +248,11 @@
}
});
// 默认事件触发
/*! 默认事件触发 */
$('input[name=type]:checked').map(function () {
$(this).trigger('click');
});
});
})($('body'));
</script>
{/block}

2
app/wechat/view/menu/index.html
View File

@ -1,7 +1,7 @@
{extend name="../../admin/view/main"}
{block name='content'}
<div id="MenuEditor" class="layui-hide think-box-shadow" style="width:910px">
<div id="MenuEditor" class="layui-hide think-box-shadow" style="width:900px">
<div class='mobile-preview inline-block'>
<div class='mobile-header'>公众号</div>
<div class='mobile-body'></div>

117
app/wechat/view/news/select.html
View File

@ -2,19 +2,103 @@
{block name='style'}
<style>
body{min-width:500px}
.news-container{position:relative}
.news-container .news-item{top:0;left:0;width:232px;margin:10px;padding:5px;cursor:pointer;position:relative;border:1px solid #ccc;box-sizing:content-box}
.news-container .news-item.active,.news-container .news-item:hover{border-color:#09c;box-shadow:1px 0 10px #09c}
.news-container .news-item .news-articel-item{width:100%;height:150px;overflow:hidden;position:relative;background-size:100%;background-position:center center}
.news-container .news-item .news-articel-item p{bottom:0;width:100%;color:#fff;padding:5px;max-height:5em;font-size:12px;overflow:hidden;position:absolute;text-overflow:ellipsis;background:rgba(0,0,0,.7)}
.news-container .news-item .news-articel-item.other{height:50px;padding:5px 0}
.news-container .news-item .news-articel-item .left-image{width:50px;height:50px;float:left;overflow:hidden;position:relative;background-size:100%;background-position:center center}
.news-container .news-item .news-articel-item .right-text{float:left;width:172px;overflow:hidden;padding-right:10px;text-overflow:ellipsis}
.news-container .news-item .hr-line-dashed:last-child{display:none}
.news-container .hr-line-dashed{margin:6px 0 1px 0}
.page-style{bottom:0;width:100%;height:50px;padding:0 10px;position:fixed;background:#fff}
.page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important}
body {
min-width: 500px
}
.news-container {
position: relative
}
.news-container .news-item {
top: 0;
left: 0;
width: 228px;
margin: 20px 0 20px 20px;
padding: 5px;
cursor: pointer;
position: relative;
border: 1px solid #ccc;
border-radius: 5px;
box-sizing: content-box
}
.news-container .news-item.active,
.news-container .news-item:hover {
border-color: #09c;
box-shadow: 1px 0 10px #09c
}
.news-container .news-item .news-articel-item {
width: 100%;
height: 150px;
overflow: hidden;
position: relative;
background-size: 100%;
background-position: center center
}
.news-container .news-item .news-articel-item p {
bottom: 0;
color: #fff;
width: 100%;
padding: 5px;
overflow: hidden;
font-size: 12px;
max-height: 5em;
position: absolute;
text-overflow: ellipsis;
background: rgba(0, 0, 0, .7)
}
.news-container .news-item .news-articel-item.other {
height: 50px;
padding: 5px 0
}
.news-container .news-item .news-articel-item .left-image {
width: 50px;
height: 50px;
float: left;
overflow: hidden;
position: relative;
background-size: 100%;
background-position: center center
}
.news-container .news-item .news-articel-item .right-text {
float: left;
width: 165px;
overflow: hidden;
padding-right: 10px;
text-overflow: ellipsis
}
.news-container .news-item .hr-line-dashed:last-child {
display: none
}
.news-container .hr-line-dashed {
margin: 6px 0 1px 0
}
.page-style {
bottom: 0;
width: 100%;
height: 50px;
padding: 0 10px;
position: fixed;
background: #fff
}
.pagination-container {
left: 0;
right: 0;
bottom: 0;
position: fixed;
background: #fff;
text-indent: 20px;
}
</style>
{/block}
@ -40,8 +124,8 @@
{/foreach}
{if empty($list)}<p class="notdata">没有记录哦！</p>{/if}
</div>
<div class="margin-bottom-20 margin-top-20"></div>
<div class="page-style">{if isset($pagehtml)}{$pagehtml|raw}{/if}</div>
<div class="padding-10"></div>
{empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
{/block}
{block name="script"}
@ -67,8 +151,7 @@
// 分页事件处理
$('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function () {
var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
urls.shift();
window.location.href = urls.join('#');
urls.shift(), window.location.href = urls.join('#');
}).off('click', '[data-open]').on('click', '[data-open]', function () {
window.location.href = this.getAttribute('data-open');
});

2
public/static/theme/css/console.css
View File

File diff suppressed because one or more lines are too long

2
public/static/theme/css/console.css.map
View File

File diff suppressed because one or more lines are too long

35
public/static/theme/css/console.custom.less
View File

@ -816,11 +816,6 @@
}
}
.think-switch-button .layui-form-switch {
margin-top: 0
}
.input-right-icon {
top: 0;
right: 0;
@ -1016,10 +1011,11 @@
left: 0;
right: 0;
bottom: 0;
position: absolute;
border: 1px solid #ccc;
border-radius: 0 0 5px 5px;
position: absolute;
background: #f5f5f5;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
iframe {
width: 100%;
@ -1035,8 +1031,9 @@
position: absolute;
padding-left: 43px;
border: 1px solid #ccc;
list-style-type: none;
background: url(../img/wechat/mobile_foot.png) no-repeat 0 0;
list-style-type: none;
border-radius: 0 0 5px 5px;
li {
float: left;
@ -1047,17 +1044,17 @@
a {
width: auto;
color: #616161;
border: 1px solid hsla(0, 0%, 100%, 0);
display: block;
overflow: hidden;
border: 1px solid hsla(0, 0%, 100%, 0);
border-left: 1px solid #e7e7eb;
margin-top: -1px;
margin-bottom: -1px;
color: #616161;
white-space: nowrap;
text-decoration: none;
text-overflow: ellipsis;
word-wrap: normal;
margin-top: -1px;
border-left: 1px solid #e7e7eb;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: -1px;
text-decoration: none;
&:hover {
background: rgba(0, 0, 0, .02)
@ -1128,10 +1125,10 @@
ul, ul li {
float: none;
width: 100%;
padding: 0;
z-index: 11;
display: block;
width: 100%
}
ul li {
@ -1161,10 +1158,10 @@
width: 0;
height: 0;
z-index: 10;
display: inline-block;
border: 6px dashed transparent;
display: inline-block;
border-top-style: solid;
border-bottom-width: 0;
border-top-style: solid
}
.arrow_in {