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

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

@ -1,7 +1,7 @@
{extend name="../../admin/view/main"} {extend name="../../admin/view/main"}
{block name='content'} {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-preview inline-block'>
<div class='mobile-header'>公众号</div> <div class='mobile-header'>公众号</div>
<div class='mobile-body'></div> <div class='mobile-body'></div>

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

@ -2,19 +2,103 @@
{block name='style'} {block name='style'}
<style> <style>
body{min-width:500px} body {
.news-container{position:relative} min-width: 500px
.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-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)} position: relative
.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 {
.news-container .news-item .hr-line-dashed:last-child{display:none} top: 0;
.news-container .hr-line-dashed{margin:6px 0 1px 0} left: 0;
.page-style{bottom:0;width:100%;height:50px;padding:0 10px;position:fixed;background:#fff} width: 228px;
.page-style .pagination,.page-style .pagination-trigger{margin:10px 0!important;padding:0 10px!important} 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> </style>
{/block} {/block}
@ -40,8 +124,8 @@
{/foreach} {/foreach}
{if empty($list)}<p class="notdata">没有记录哦！</p>{/if} {if empty($list)}<p class="notdata">没有记录哦！</p>{/if}
</div> </div>
<div class="margin-bottom-20 margin-top-20"></div> <div class="padding-10"></div>
<div class="page-style">{if isset($pagehtml)}{$pagehtml|raw}{/if}</div> {empty name='list'}<span class="notdata">没有记录哦</span>{else}{$pagehtml|raw|default=''}{/empty}
{/block} {/block}
{block name="script"} {block name="script"}
@ -67,8 +151,7 @@
// 分页事件处理 // 分页事件处理
$('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function () { $('body').off('change', '.pagination-trigger select').on('change', '.pagination-trigger select', function () {
var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#'); var urls = this.options[this.selectedIndex].getAttribute('data-url').split('#');
urls.shift(); urls.shift(), window.location.href = urls.join('#');
window.location.href = urls.join('#');
}).off('click', '[data-open]').on('click', '[data-open]', function () { }).off('click', '[data-open]').on('click', '[data-open]', function () {
window.location.href = this.getAttribute('data-open'); 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 { .input-right-icon {
top: 0; top: 0;
right: 0; right: 0;
@ -1016,10 +1011,11 @@
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
position: absolute;
border: 1px solid #ccc; border: 1px solid #ccc;
border-radius: 0 0 5px 5px; position: absolute;
background: #f5f5f5; background: #f5f5f5;
border-radius: 0 0 5px 5px;
box-shadow: 0 2px 3px 0 rgba(0, 0, 0, .1);
iframe { iframe {
width: 100%; width: 100%;
@ -1035,8 +1031,9 @@
position: absolute; position: absolute;
padding-left: 43px; padding-left: 43px;
border: 1px solid #ccc; border: 1px solid #ccc;
list-style-type: none;
background: url(../img/wechat/mobile_foot.png) no-repeat 0 0; background: url(../img/wechat/mobile_foot.png) no-repeat 0 0;
list-style-type: none;
border-radius: 0 0 5px 5px;
li { li {
float: left; float: left;
@ -1047,17 +1044,17 @@
a { a {
width: auto; width: auto;
color: #616161;
border: 1px solid hsla(0, 0%, 100%, 0);
display: block; display: block;
overflow: hidden; 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; word-wrap: normal;
margin-top: -1px;
border-left: 1px solid #e7e7eb;
white-space: nowrap;
text-overflow: ellipsis;
margin-bottom: -1px;
text-decoration: none;
&:hover { &:hover {
background: rgba(0, 0, 0, .02) background: rgba(0, 0, 0, .02)
@ -1128,10 +1125,10 @@
ul, ul li { ul, ul li {
float: none; float: none;
width: 100%;
padding: 0; padding: 0;
z-index: 11; z-index: 11;
display: block; display: block;
width: 100%
} }
ul li { ul li {
@ -1161,10 +1158,10 @@
width: 0; width: 0;
height: 0; height: 0;
z-index: 10; z-index: 10;
display: inline-block;
border: 6px dashed transparent; border: 6px dashed transparent;
display: inline-block;
border-top-style: solid;
border-bottom-width: 0; border-bottom-width: 0;
border-top-style: solid
} }
.arrow_in { .arrow_in {