picgo/view/index.html

{{define "style"}}
<link href="/static/css/index.css" rel="stylesheet">
{{end}}
{{define "content"}}
<div class="card text-center">
    <div class="card-header" style="background-color: #fcf8e3">
        <h4>图片上传</h4>
    </div>
    <div class="card-body" style="border-style:dashed; border-color:#98bf21; display: block">
        <input type="file" class="form-control-file" id="upload-input-file" style="display:none;">
        <div id="upload-btn-click">
            <div style="height: 80px"></div>
            <div class="ant-upload-drag-container">
                <p class="ant-upload-drag-icon"><img src="/static/img/add.svg"></p>
                <p class="ant-upload-text" style="font-size: 14px; margin: 0;">拖拽文件到此区域或<span
                        style="color: rgb(26, 102, 255);">点此上传</span></p>
                <p class="ant-upload-hint" style="font-size: 12px; margin: 4px 0 0;">
                    只支持上传图片文件，最大支持2M，上传后支持复制url</p>
            </div>
            <div style="height: 80px"></div>
        </div>

    </div>
    <div class="card-footer text-muted" style="background-color: #fcf8e3">
        <div class="container">
            <div class="row" id="preview">
                <div class="col-sm">
                    <div class="card" style="width: 14rem;">
                        <img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
                        <div class="card-body">
                            <p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
                            <button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
                        </div>
                    </div>
                </div>
                <div class="col-sm">
                    <div class="card" style="width: 14rem;">
                        <img src="http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg" class="card-img-top" alt="">
                        <div class="card-body">
                            <p>http://img.520touxiang.com/uploads/allimg/2016063019/4b1sswvy0mj.jpg</p>
                            <button type="button" class="btn btn-primary img-copy-url-btn">复制链接</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>
</div>
{{end}}

{{define "script"}}
{{noRender `<script id="tpl-image" type="text/html">
    <div class="card" style="width: 18rem;">
        <img src="{{ url }}" class="card-img-top" alt="...">
        <div class="card-body">
            <button type="button" class="btn btn-primary">点击复制按钮</button>
        </div>
    </div>
</script>`}}
<script src="/static/js/index.js"></script>
{{end}}