接口测试平台代码实现145: 平台主题-夏日清凉4

我去热饭

发布于 2022-05-19 10:11:55

2710

发布于 2022-05-19 10:11:55

文章被收录于专栏：测试开发干货

好的我们继续接着优化。这次优化用例库，我们要学习的是动态彩色边框技术！

先来看这样一段css：

 .box::before {
    content: '';
    border-radius: 5px;
    position: absolute;
    width: calc(100%);
    height: calc(100%);
    z-index: -1;
    background-image: linear-gradient(50deg, aquamarine, cornflowerblue, goldenrod, hotpink, salmon, lightgreen, sandybrown, violet);
    background-size: 300%;
    animation: animate_bg 4s infinite;
    }
    @keyframes animate_bg {
        0%, 100% {
            background-position: 0%, 50%;
        }
        50% {
            background-position: 100%, 50%;
        }
    }

这段css，就是动态彩色边框的样式。我们放在顶部head里的style即可。

那么问题来了，要怎么用呢？

原则来说要用俩个div嵌套使用：

如图，给最外层的div的class上box，内部div或其他标签变白或半透明背景色。

我们打开P_apis.html。看看现在的弹层什么样：

找到它的代码：

可以看到是一个很大的div，我们给它最外层加上一个div，并给它class设置成box,并且重新设置部分位置大小属性：

改动比较大，所以大家可以复制下面的直接替换：

{# 全局请求头 #}
<div id="project_header_div" class="box" style="display: none;width: 70%;
position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;">

    <div  style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white">
        <div class="btn-group" style="float: right">
            <button onclick="project_header_save()" type="button" class="btn btn-success">保存</button>
            <button onclick="project_header_close()" type="button" class="btn btn-default">取消</button>
        </div>
        <span>请设置本项目的全局公共请求头：</span>
        <br><br>
        <div id="header_plan">
            {% for i in project_header %}
                <input type="text" name="header_id" value="{{ i.id }}" style="display: none;">
                <input type="text" name="header_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="请求头name"> = {"
                <input type="text" name="header_key" value="{{ i.key }}" style="width: 15%" placeholder="请求头key"> " : "
                <input type="text" name="header_value" value="{{ i.value }}" style="width: 50%" placeholder="请求头value"> "}
                <br>
            {% endfor %}
        </div>
        <br>
        <button onclick="add_project_header()">新增</button>
        <br><br>
    </div>
</div>

然后我们去这个html最开头，head里的style上加入我们本章开头说的那个css：.box 别忘了前面的点

看看这个动态边框的闪烁效果吧～

然后我们再给全局域名也加上这个彩色边框，大家同样直接复制下面的代码替换原来的div即可：

{# 全局域名 #}
<div id="project_host_div" class="box" style="display: none;width: 70%;
position: fixed;left: 15%;top: 15%;box-shadow: 4px 4px 8px grey;">
<div  style="margin: 3px;border-radius:5px;height: 70%;padding-left: 10px;background-color: white">
    <div class="btn-group" style="float: right">
        <button onclick="project_host_save()" type="button" class="btn btn-success">保存</button>
        <button onclick="project_host_close()" type="button" class="btn btn-default">取消</button>
    </div>
    <span>请设置本项目的全局域名：</span>
    <br><br>
    <div id="host_plan">
        {% for i in project_host %}
            <input type="text" name="host_id" value="{{ i.id }}" style="display: none;">
            <input type="text" name="host_name" value="{{ i.name }}" style="width: 20%;margin-top: 3px" placeholder="name"> = "
            <input type="text" name="host_host" value="{{ i.host }}" style="width: 70%" placeholder="host"> "
            <br>
        {% endfor %}
    </div>
    <br>
    <button onclick="add_project_host()">新增</button>
    <br><br>
</div>
</div>

看看效果：