开发者社区> 游客pxprrm2iipsfu> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

接口测试平台代码实现番外:主页改版-7

简介: 接口测试平台代码实现番外:主页改版-7
+关注继续查看

间隔比较久了,所以我们先来看一下目前首页的外观:

微信图片_20220704214045.png

右下方的 空白浅蓝区域,我们留着之后使用,放入一些公告,未读消息,当前任务等等。


现在来看左上方区域,用的还是我们早期的设计,一大片空白和一句位置不好的欢迎语,所以本节我们来简单改造下左上顶 区域。


打开Home.html,找到这句欢迎语,给它删掉:

微信图片_20220704214051.png

那么我们要放入什么来进行替换呢?其实放什么都无所谓,只要自己觉得好看就行。作者想的是 放一个简单的功能,比如搜索功能。 搜索接口/搜索功能/搜索项目 等等。这样既好看,又增加实用效果,可以再次提高当前平台的能力。

    搜索框和搜索按钮,我们可以去找一个比较好看的 摘抄下来即可:

微信图片_20220704214057.png

大家直接复制哈:

<div class="search bar" style="position: absolute;top: 10px; left: 490px;width: -webkit-calc(100% - 980px)">
    <div id="search_button"   >
        <strong>
        <input class="search_input" id="search_input" placeholder="输入搜索关键词" name="keys" type="text" value="{{keys}}">
        </strong>
        <button class="search_button" id="search_submit"  onclick="search()" style="width: 100px"> <strong><font size="5">搜 索</font></strong> </button>
    </div>
</div>


这是一个搜索框,我也是直接抄的,所以没必要去手写。

然后不要忘了样式,样式一般都放在head里面的style里:

微信图片_20220704214104.png

我们之前有个circlechart,现在再添加下列这些,同样复制即可:

.search_input {
    width:100%;
    height:42px;
    padding-left:13px;
}
.search_button {
    height:42px;
    /*width:42px;*/
    cursor:pointer;
    position:absolute;
}
.bar input {
    border:3px solid #66defd;
    border-radius:5px;
    background:transparent;
    top:0;
    right:0;
}
.bar button {
    background-color: #66defd;;
    /*background: linear-gradient(to right, #be0063, #ffcbd4);*/
    border-radius:0 5px 5px 0;
    width:160px;
    top:0;
    right:0;
    color: white;
}
.bar button:before {
    font-size:13px;
    color:#a7eded;
}
button {
    border:none;
    outline:none;
}

然后现在来看看效果:微信图片_20220704214111.png

现在我们需要来实现这个搜索功能。

首先是设计:

  1. 搜索什么?

搜索接口名/接口url/项目名/用户名下项目 等。

  2.搜索结果展示?

在页面弄个弹层来展示,内容为清一色的超链接,文案为目标结果和简单信息展示。

    

在Home.html中,我们在搜索框下面,新建一个div作为 新的搜索结果弹层。

微信图片_20220704214118.png


<div style="z-index: 999;position: absolute;top: 80px;left: 15%;width: 70%;min-height: 200px;
            background:linear-gradient(to bottom,#b8eafd,#e8ffdb) ;opacity:0.8;padding: 5px;
            border-radius: 2px;box-shadow: 4px 4px 8px #bcbcbc">
    <strong>
        <a href="">我是搜索结果1</a> <br>
        <a href="">我是搜索结果2</a> <br>

    </strong>
</div>

预览效果如下:

微信图片_20220704214126.png

本节内容到此结束,下一节我们要实现这个搜索的实际功能.

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
接口测试平台代码实现番外:主页终焉-1
好了,不知不觉,该平台已经跨过了130章的教程,主要功能已经实现过半,一些同学也开始实际项目中使用起来,各种提出的改进建议 优化也都接踵而至,其中最多的就是主页,请求改版。
38 0
接口测试平台代码实现111:登录态接口-7
接口测试平台代码实现111:登录态接口-7
15 0
接口测试平台代码实现53: 首页重构1
接口测试平台代码实现53: 首页重构1
82 0
接口测试平台代码实现59-首页重构7
本节基本就是最后一节,上节我们本来以为很简单的重构,结果遇到了恶心的第三方组件bug,所以我就用刷新套路来绕过了这个问题,还省去了clear清空函数,顺便给大家讲了下新增的第二万能参数ooid。在最后我们解决了url,host,header的显示问题。本节就剩处理一下 请求方式/请求体类型/请求体了。
21 0
接口测试平台代码实现100:全局域名-7
本节作为全局域名的最后一节,也是代码实现的第100章。 我们本节就来实际去后台进行修改,让全局域名可以真实生效,目前我们接口库接口和用例库步骤,保存的host中,若是全局域名,前面四个字符一定是:“全局域名”
17 0
接口测试平台代码实现55:首页重构-3
接着上节继续来做: 先来回顾一下,上节课我们基本就是清空来首页,并且划了一条竖线,把首页分为左右俩部分。
21 0
接口测试平台代码实现56:首页重构-4
本节继续开发首页右侧的显示效果,可能有的同学觉得这里节奏太慢了,不怕,咱养肥再看。
43 0
接口测试平台代码实现30:接口库-接口列表
接口测试平台代码实现30:接口库-接口列表
23 0
接口测试平台代码实现19.首页优化
接口测试平台代码实现19.首页优化
26 0
接口测试平台代码实现21:项目列表
在本节开始之前,让我们先修复一个bug, bug是,我们在做首页的超链接的时候,修改了child函数,使其增加了一个返回数据的控制器-child_json()函数
24 0
+关注
游客pxprrm2iipsfu
我去热饭
435
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载