mirror of
https://gitee.com/zoujingli/ThinkAdmin.git
synced 2025-04-06 03:58:04 +08:00
[更新]简化代码,优化结构
This commit is contained in:
parent
cd0417fa88
commit
35cf9d1303
@ -15,18 +15,26 @@
|
|||||||
{/block}
|
{/block}
|
||||||
|
|
||||||
{block name="content"}
|
{block name="content"}
|
||||||
|
|
||||||
|
<div class='mobile-preview pull-left'>
|
||||||
|
<div class='mobile-header'>公众号</div>
|
||||||
|
<div class='mobile-body'>
|
||||||
|
<iframe id="phone-preview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div class="row" style="min-width:1130px">
|
<div class="row" style="min-width:1130px">
|
||||||
<!-- 效果预览区域 开始 -->
|
<!-- 效果预览区域 开始 -->
|
||||||
<div class="col-xs-4" style="width:400px;">
|
<!--<div class="col-xs-4" style="width:320px;">-->
|
||||||
<div style="position:relative" class="phone-container animated fadeIn">
|
<!--<div style="position:relative" class="phone-container animated fadeIn">-->
|
||||||
<img style='width:100%' src="__ROOT__/static/theme/default/img/wechat/mobile_head.png" alt=""/>
|
<!--<img style='width:100%' src="__ROOT__/static/theme/default/img/wechat/mobile_head.png" alt=""/>-->
|
||||||
<div class="phone-screen">
|
<!--<div class="phone-screen">-->
|
||||||
<iframe id="phone-preview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>
|
<!--<iframe id="phone-preview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe>-->
|
||||||
</div>
|
<!--</div>-->
|
||||||
</div>
|
<!--</div>-->
|
||||||
</div>
|
<!--</div>-->
|
||||||
<!-- 效果预览区域 结束 -->
|
<!-- 效果预览区域 结束 -->
|
||||||
<div class='col-xs-6'>
|
<div class='col-xs-6' style="margin-left:15px">
|
||||||
<form class="form-horizontal" role="form" data-auto="true" action="__SELF__" method="post">
|
<form class="form-horizontal" role="form" data-auto="true" action="__SELF__" method="post">
|
||||||
<fieldset class="layui-elem-field layui-box">
|
<fieldset class="layui-elem-field layui-box">
|
||||||
<legend>{$title}</legend>
|
<legend>{$title}</legend>
|
||||||
|
@ -143,15 +143,15 @@ define(['jquery', 'admin.plugs'], function () {
|
|||||||
/*! 注册 data-phone-view 事件行为 */
|
/*! 注册 data-phone-view 事件行为 */
|
||||||
this.$body.on('click', '[data-phone-view]', function () {
|
this.$body.on('click', '[data-phone-view]', function () {
|
||||||
var src = this.getAttribute('data-phone-view') || this.href;
|
var src = this.getAttribute('data-phone-view') || this.href;
|
||||||
var $container = $('<div class="phone-container hide"><img src="http://static.cdn.cuci.cc/mobile_head.png" style="width:100%"/><div class="phone-screen"><iframe frameborder="0" marginheight="0" marginwidth="0"></iframe></div></div>').appendTo('body');
|
var $container = $('<div class="mobile-preview pull-left"><div class="mobile-header">公众号</div><div class="mobile-body"><iframe id="phone-preview" frameborder="0" scrolling="no" marginheight="0" marginwidth="0"></iframe></div></div>').appendTo('body');
|
||||||
var $iframe = $container.find('iframe').attr('src', src);
|
var $iframe = $container.find('iframe').attr('src', src);
|
||||||
$container.find('img').on('click', function () {
|
$container.find('.mobile-header').on('click', function () {
|
||||||
$iframe.attr('src', src);
|
$iframe.attr('src', src);
|
||||||
});
|
});
|
||||||
var index = layer.open({
|
var index = layer.open({
|
||||||
type: 1,
|
type: 1,
|
||||||
scrollbar: false,
|
scrollbar: false,
|
||||||
area: ['320px', '600px'],
|
area: ['330px', '600px'],
|
||||||
title: false,
|
title: false,
|
||||||
closeBtn: 1,
|
closeBtn: 1,
|
||||||
skin: 'layui-layer-nobg',
|
skin: 'layui-layer-nobg',
|
||||||
|
@ -209,17 +209,12 @@ td .text-explode:first-child{opacity:0;display:none}
|
|||||||
.pace-inactive{display:none}
|
.pace-inactive{display:none}
|
||||||
.pace .pace-progress{background:#22df80;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}
|
.pace .pace-progress{background:#22df80;position:fixed;z-index:2000;top:0;right:100%;width:100%;height:2px}
|
||||||
|
|
||||||
/** 手机盒子 */
|
|
||||||
.phone-container{background:#2c3e50;border-radius:30px;left:0;margin:0 auto 0;padding:70px 18px 68px 18px;position:absolute;right:0;width:300px}
|
|
||||||
.phone-container:before{background:#1f2b38;border-radius:20px;content:'';height:8px;left:0;margin:-35px auto;position:absolute;right:0;width:45px}
|
|
||||||
.phone-container:after{background:#1f2b38;border-radius:20px;content:"";display:block;height:42px;left:0;margin:12px auto;position:absolute;right:0;width:42px}
|
|
||||||
.phone-screen{background:#d6e6e9;height:408px;overflow:hidden;padding:0;position:relative}
|
|
||||||
.phone-screen iframe{width:100%;height:100%;background:#fff}
|
|
||||||
|
|
||||||
/** 微信菜单 */
|
/** 微信菜单 */
|
||||||
.mobile-preview{position:relative;width:317px;height:580px;background:transparent url("../img/wechat/mobile_head.png") no-repeat 0 0;background-position:0 0;border:1px solid #e7e7eb}
|
.mobile-preview{position:relative;width:317px;height:580px;background:url("../img/wechat/mobile_head.png") no-repeat 0 0;border:1px solid #e7e7eb}
|
||||||
.mobile-preview .mobile-header{color:#fff;text-align:center;padding-top:30px;font-size:15px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin:0 30px}
|
.mobile-preview .mobile-header{color:#fff;text-align:center;padding-top:30px;font-size:15px;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;margin:0 30px}
|
||||||
.mobile-footer{list-style-type:none;margin:0;position:absolute;bottom:0;left:0;right:0;border-top:1px solid #e7e7eb;background:transparent url("../img/wechat/mobile_foot.png") no-repeat 0 0;background-position:0 0;background-repeat:no-repeat;padding-left:43px}
|
.mobile-body{width:100%;position:absolute;bottom:0;top:60px}
|
||||||
|
.mobile-body iframe{width:100%;height:100%;background:#fff}
|
||||||
|
.mobile-footer{list-style-type:none;margin:0;position:absolute;bottom:0;left:0;right:0;border-top:1px solid #e7e7eb;background:url("../img/wechat/mobile_foot.png") no-repeat 0 0;padding-left:43px}
|
||||||
.mobile-footer li{width:33.33%;line-height:50px;position:relative;float:left;text-align:center}
|
.mobile-footer li{width:33.33%;line-height:50px;position:relative;float:left;text-align:center}
|
||||||
.mobile-footer li a{display:block;border:1px solid rgba(255, 255, 255, 0);border-left:1px solid #e7e7eb;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;color:#616161;text-decoration:none}
|
.mobile-footer li a{display:block;border:1px solid rgba(255, 255, 255, 0);border-left:1px solid #e7e7eb;width:auto;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;word-wrap:normal;color:#616161;text-decoration:none}
|
||||||
.mobile-footer li a.active{background-color:#fff;border:1px solid #44b549 !important}
|
.mobile-footer li a.active{background-color:#fff;border:1px solid #44b549 !important}
|
||||||
|
Loading…
x
Reference in New Issue
Block a user