山大网安靶场实验平台项目-个人记录（十）

系列文章专栏地址:

山东大学网络安全靶场实验平台

---

本期内容：

• 能力提升页面
• 修改侧面滚动条

---

一、前言

1.我们新设计了几个安全工具，以及一些漏洞我们以下载源码的形式给学生提供练习，需要一个新模块去装载。
于是我们取名该栏目能力提升，它含有两个子模块：安全工具、代码审计。

2.我们需要改一下侧边滚动条

二、网页展示

首先改header，加上这个栏目（模块）

网页整体如下：


可以看到明显是由两部分组成

三、代码设计

首先新建一个vue文件

<template>
  <div class="cryptoTool">
    <sduheader></sduheader>
    <!--    安全工具-->
    <div style="background-color: rgba(8,46,84,0.8);margin-top:0px;padding: 0px;">
      <toolscard></toolscard>
    </div>
    <!--    代码审计-->
    <div style="background-color: rgba(128,138,135,0.8)">
      <codeaudit></codeaudit>
    </div>
  </div>
</template>

注册了两个新组件，toolcard和codeaudit
我们需要写这两个新组件
代码审计

<template>
  <div class="codeaudit">
    <div>
      <h1 style="text-align: left;color: white;padding-top: 35px; margin-top: 0px;margin-bottom:25px;font-size: 35px">
        Code Audit
        <i class="el-icon-d-arrow-right"></i>
      </h1>
    </div>
    <div>
      <el-row>
        <el-col  v-for="(code, index) in codesinfo"
                 :key="index"
                 :span="8">
          <el-card shadow="hover" style=" margin:20px;height:250px;cursor:pointer;background-color: rgba(0,0,0,0.5);color: white;border-style: none">
            <el-row style="height: 120px;">
              <el-col :span="6">
                <!--<el-image :src="tool.imgurl" style="float: left; width: 85%;heigth:85%;margin-right: 15%;" />-->
                <i :class="code.imgurl" style="font-size: 120px;"></i>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="16">
                <h1 style="margin-top:5px; text-align: left; ">{{ code.codename}}</h1>
                <p style="margin-top:20px; text-align: left;font-size: 10px">{{ code.codecontent}}</p>
              </el-col>
            </el-row>
            <el-divider style="background-color: rgba(255,255,255,0.5)"/>
            <el-button @click="download(code.filename)" style="width: 100%;background-color: rgba(128,138,135,0.2);color: white">
              下载 <i class="el-icon-download"></i>
            </el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

安全工具

<template>
  <div class="tools">
    <div>
      <h1 style="text-align: left;color: white;padding-top: 35px; margin-top: 0px;margin-bottom:25px;font-size: 35px">
        Network Security Tools
        <i class="el-icon-d-arrow-right"></i>
      </h1>
    </div>
    <div>
      <el-row>
        <el-col  v-for="(tool, index) in toolsinfo"
                 :key="index"
                 :span="6">
          <el-card shadow="hover" style=" margin:10px;height:200px;cursor:pointer;background-color: rgba(0,0,0,0.5);color: white;border-style: none">
            <el-row>
              <el-col :span="6">
                <!--<el-image :src="tool.imgurl" style="float: left; width: 85%;heigth:85%;margin-right: 15%;" />-->
                <i :class="tool.imgurl" style="font-size: 60px;"></i>
              </el-col>
              <el-col :span="2"></el-col>
              <el-col :span="16">
                <h4 style="margin-top:5px; text-align: left; font-size: 15px">{{ tool.toolname}}</h4>
                <el-divider style="margin: 0px;padding: 0px;background-color: rgba(255,255,255,0.5)"/>
                <p style="text-align: left;font-size: 10px;height: 10px">{{ tool.toolcontent}}</p>
              </el-col>
            </el-row>
            <el-divider />
            <el-button @click="gotopage(tool.toolurl)" style="width: 100%;background-color: rgba(138,43,226,0.2);color: white"> 查看 </el-button>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

注意这两者都需要在数据中写好内容和图标地址。

四、侧边滚轮修改

一般网页的滚轮都太丑

设计的薄一点如下：

代码很简单，在Index.html加上css如下：

  /*全局滚动条样式*/
  ::-webkit-scrollbar {
      width: 5px;
      height: 14px;
  }