{extend name="./main"}

{block name="CSS"}
<style>
    .ts_title{
        height:60px;
        text-align:center;
        line-height:60px;
        font-size:18px;
        background:#409ccf;
        border-top-left-radius:3px;
        border-top-right-radius:3px;
        color:#fff;
    }
    .ts_con {
        padding:30px 0;
        position:relative;
    }
    .ts_con p{
        height:40px;
        width: 100%;
        background:#fff;
        border:1px solid #eee;
        border-radius:2px;
        line-height:40px;
        margin-bottom:20px;
    }
    .ts_con p span{
        width:120px;
        font-size:16px;
        background:#409ccf;
        display:block;
        float:left;
        border-top-left-radius:2px;
        border-bottom-left-radius:2px;
        color:#fff;
        text-align:center;
        margin-right:10px;
    }
    .ts_con p input,.ts_con p select{
        width: calc(100% - 140px);
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
        border:none;
        font-size:14px;
        outline:none;
        letter-spacing:1px;
    }
    @media (max-width: 780px){
        .ts_con p input,.ts_con p select{
            width: 160px;
            border:none;
            font-size:14px;
            outline:none;
            letter-spacing:1px;
        }
        .footer_bottom .footer-menu{
            text-align:center;
        }
    }
    .ts_con p textarea{
        width: calc(100% - 140px);
        width: -moz-calc(100% - 140px);
        width: -webkit-calc(100% - 140px);
        max-width:780px;
        height:195px;
        border:none;
        font-size:14px;
        line-height:35px;
        outline:none;
        letter-spacing:1px;
        resize: none;
    }
    .btn_ts{
        display:block;
        border:none;
        height:48px;
        width:200px;
        line-height:48px;
        background:#409ccf;
        color:#fff;
        margin:0 auto;
        border-radius:2px;
        font-weight:bold;
    }
    .file input {
        position: absolute;
        font-size: 100px;
        right: 0;
        top: 0;
        opacity: 0;
    }
    .shili img{
        position:absolute;
        top:38px;
        left:0;
    }
</style>

{/block}

{block name="content"}
<div class="order_form">
    <div class="ts_title">
        订 单 投 诉
    </div>
    <div class="ts_con">
        <form name='report' action='' method='post' style="padding: 0 20px;">
            <input type="hidden" name="token" value="{$token}">
            <p><span>订单编号</span><input name="trade_no" type="text" value="{$Think.get.trade_no}"></p>
            <p><span>举报原因</span>
                <select name="type">
                    <option value="">--请选择投诉原因--</option>
                    <option value="无效卡密">无效卡密</option>
                    <option value="虚假商品">虚假商品</option>
                    <option value="非法商品">非法商品</option>
                    <option value="侵权商品">侵权商品</option>
                    <option value="不能购买">不能购买</option>
                    <option value="恐怖色情">恐怖色情</option>
                    <option value="其他投诉">其他投诉</option>
                </select>
            </p>
            <p><span>联系QQ</span><input name="qq" type="text" placeholder="请填写您的QQ号"></p>
            <p><span>手机号码</span><input name="mobile" type="text" placeholder="用于接收短信，请认真填写"></p>
            <p style="height:200px;">
                <span style="height:200px; line-height:200px;">详情说明</span>
                <textarea name="desc" placeholder="请具体说明问题，如：无法正常充值，卖家不处理等"></textarea>
            </p>
            <button type="submit" class="btn_ts">提交投诉</button>
        </form>
    </div>
</div>
{/block}

{block name="appendJS"}
{/block}
