book_admin/application/admin/view/wechat/abwechat/add.html

<style>
    .profile-avatar-container {
        position:relative;
        width:200px;
    }
    .profile-avatar-container .profile-user-img{
        width:200px;
        height:200px;
    }
    .profile-avatar-container .profile-avatar-text {
        display:none;
    }
    .profile-avatar-container:hover .profile-avatar-text {
        display:block;
        position:absolute;
        height:200px;
        width:200px;
        background:#444;
        opacity: .6;
        color: #fff;
        top:0;
        left:0;
        line-height: 200px;
        text-align: center;
    }
    .profile-avatar-container button{
        position:absolute;
        top:0;left:0;width:200px;height:200px;opacity: 0;
    }
    .tab-content{
        padding: 20px;
        border:1px solid #ddd;
        border-radius: 8px;
    }
    @media screen and (min-width: 900px) {
        .p_b_float{
            height: 380px;
        }
        .p_b_float .widget-body{
            margin-top: 150px;
        }
        .tab-content{
            padding: 0;
            height: 100%;
            box-sizing: border-box;
        }
        .p_b_float{
            float: left;
            width: 33.33%;
            box-sizing: border-box;
            text-align: center;
        }

    }
    .p_b_float .form-group{
        overflow: hidden;
        margin: 15px 0;
    }
	
	
	/*empower_box*/
	.empower_box{
		overflow: hidden;
		padding: 60px 30px 200px;
		background-color: #fff;
	}
	.e_tit{
		overflow: hidden;
	}
	.e_tit h2{
		font-size: 28px;
		color: #333;
		line-height: 40px;
		text-align: center;
	}
	.e_tit p{
		font-size: 18px;
		color: #f00;
		text-align: center;
		line-height: 30px;
	}
	.e_state_box{
		overflow: hidden;
		padding: 10px 20px;
		text-align: center;
		font-size: 0;		
	}
	.e_state{
		overflow: hidden;
		display: inline-block;
		*display:inline;
		*zoom:1;
		text-align: left;
	}
	.e_s_li{
		margin: 5px 0;
		overflow: hidden;
		display: inline-block;
		*display:inline;
		*zoom:1;
		height: 44px;
		width: 168px;
		vertical-align: middle;
		white-space: nowrap;
	}
	.e_s_li p{
		margin: 0;
		padding: 0;
		float: left;
		height: 44px;
		width: 128px;
		background-color: #ccc;
		border-top: 1px solid #999;
		border-bottom: 1px solid #999;
		font-size: 14px;
		color: #666;
		text-align: center;
		line-height: 42px;
		box-sizing: border-box;
	}
	.e_s_li span,
	.e_s_li strong{
		float: left;
		height: 44px;
		width: 20px;
		vertical-align: middle;
	}
	.e_s_li span{
		background: url({:asset('/img/e_1_1.jpg')}) no-repeat 0 0;
	}
	.e_s_li strong{
		background: url({:asset('/img/e_1_2.jpg')}) no-repeat 0 0;
	}
	.e_s_li:first-child span{
		background: #ccc;
		border: 1px solid #999;
		border-right: 0;
	}
	.e_s_li:last-child strong{
		background: #ccc;
		border: 1px solid #999;
		border-left: 0;
	}
	
	.e_s_li_select span{
		background: url({:asset('/img/e_2_1.jpg')}) no-repeat 0 0;
	}
	
	.e_s_li_select strong{
		background: url({:asset('/img/e_2_2.jpg')}) no-repeat 0 0;
	}
	.e_s_li_select:first-child span,
	.e_s_li_select:last-child strong,
	.e_s_li_select p{
		background: #199ed8;
		color: #fff;
	}
	
	.e_main_box{
		overflow: hidden;
	}
	.e_m_p{
		padding: 40px 0;
		margin: 0 auto;
		max-width: 544px;
	}
	.e_m_p p{
		padding: 3px 0;
		font-size: 14px;
		color: #333;
		line-height: 24px;
	}
	.e_m_p p strong{
		font-size: 18px;
		color: #f00;
		font-weight: bold;
	}
	.e_m_but,
	.e_m_e_but{
		overflow: hidden;
	}
	.e_m_but a{
		overflow: hidden;
		display: block;
		margin: 0 auto;
		width: 270px;
		height: 48px;
		background-color: #199ed8;
		font-size: 14px;
		color: #fff;
		text-align: center;
		line-height: 48px;
		border-radius: 4px;
	}
	.e_m_s_img,
	.e_m_e_img{
		margin: 0 auto 20px;
		width: 64px;
		height: 64px;
	}
	.e_m_s_img{
		background: url({:asset('/img/e_s_icon.png')}) no-repeat 0 0;
	}
	.e_m_e_img{
		background: url({:asset('/img/e_e_icon.png')}) no-repeat 0 0;
	}
	.e_m_s_text{
		overflow: hidden;
		height: 24px;
		font-size: 14px;
		color: #333;
		text-align: center;
		line-height: 24px;
	}
	.e_m_e_text{
		font-size: 16px;
		color: #333;
		text-align: center;
		line-height: 32px;
	}
	.e_m_e_but p{
		font-size: 12px;
		color: #999;
		text-align: center;
		line-height: 20px;
	}
	.e_m_e_but p strong{
		font-weight: normal;
	}
	.e_m_e_but a {
		overflow: hidden;
		display: block;
		margin: 0 auto;
		width: 120px;
		height: 42px;
		background-color: #fff;
		border: 1px solid #199ED8;
		font-size: 14px;
		color: #199ED8;
		text-align: center;
		line-height: 42px;
		border-radius: 4px;
	}
</style>
<div class="panel panel-default panel-intro" style="overflow:hidden;">

    {if isset($platform) && !$is_auth}
        <div class="panel-heading">
            <div class="panel-lead">
                <em>公众号设置</em>请先授权公众号
            </div>
        </div>

		<div class="empower_box">

			<div class="e_tit">
				<h2>网站配置</h2>
				<p>为了确保小说推广的安全性，请同时授权主域名系统和备用域名系统</p>
			</div>

			<div class="e_state_box">
				<div class="e_state">
                    {foreach $platform as $val}
					<div class="e_s_li {if !$val['is_auth']} e_s_li_select {/if}">
						<span></span>
						<p>{$val['name']}(主)授权</p>
						<strong></strong>
					</div>
                    {/foreach}
					<div class="e_s_li {if $is_auth } e_s_li_select {/if}">
						<span></span>
						<p>完成</p>
						<strong></strong>
					</div>
				</div>
			</div>
			<div class="e_main_box">
				<div class="e_m_p">
					<p>主域名系统授权注意事项：</p>
					<p>1、必须是<strong>已认证</strong>的<strong>服务号{if isset($adminConfig['json']) && !empty($adminConfig['json']) } ({$adminConfig['json']['authorizer_info']['nick_name']}) {/if}。</strong></p>
					<p>2、使用公众平台绑定的管理员或者长期运营者个人微信号扫码。</p>
					<p>3、如有任何疑问，请先联系我们的商务。</p>
                    <p>4、授权须知：本平台仅支持微信公众号形式的推文推广，若发现您有在朋友圈，微信群等社群渠道的推广行为，我们将立即做封号处理。</p>
				</div>
                
				<div class="e_m_but">
					<a href="{$current_auth_platform['url']}">点此进行授权</a>
				</div>

			</div>

		</div>
    {/if}
</div>