<template>

    <div class="nav">
        <ul class="nav-list">
            <li class="nav-item" v-for="(nav,index) in navItems" :key="index">
                <el-card>
                    <a :href="nav.linkUrl" class="nav-link">
                        <img :src="nav.picUrl" alt="" class="nav-pic">
                        <p class="nav-title">{{ nav.text }}</p>
                    </a>
                </el-card>
            </li>
        </ul>
    </div>
</template>
<script>
import img1 from '../../assets/img/base/01.png'
import img2 from '../../assets/img/base/02.png'
import img3 from '../../assets/img/base/03.png'
import img4 from '../../assets/img/base/04.png'

export default {
    name: 'dashboard',
    data() {
        return {
            navItems: [
                {
                    linkUrl: '#/data/autoTestData',
                    picUrl: img1,
                    text: '数据图表'
                }, {
                    linkUrl: '#/project/page',
                    picUrl: img2,
                    text: '基础配置\n' +
                        '   对git工程配置，为sonar和覆盖率提供原始工程配置'
                }, {
                    linkUrl: '#/publish/page',
                    picUrl: img3,
                    text: '测试发布\n' +
                        '   管理测试过程，提测单、版本发布单，汇总版本过程数据，方便项目人员查看进度和风险评估'
                }, {
                    linkUrl: '#/sonar/result',
                    picUrl: img4,
                    text: '代码质量\n' +
                        '自主研发的基于gitlab和sonarqube多语言代码静态检测工具，具有数据自助接入、数据聚类、通知报警等功能'
                }, {
                    linkUrl: '#/uiProjectTask',
                    picUrl: img1,
                    text: 'web自动化\n' +
                        '   支持web页面元素维护和操作组合，完成场景自动化，报告和告警通知'
                }, {
                    linkUrl: '#/apiTask',
                    picUrl: img2,
                    text: '接口自动化\n' +
                        '   通过单接口、场景，多环境运行配置，支持接口监控和接口用例编写，定时执行及报告反馈'
                }, {
                    linkUrl: '#/performanceProject',
                    picUrl: img3,
                    text: '性能测试\n' +
                        '   基于jmeter性能测试工具，支持脚本上传和任务执行及结果汇总展示，可查询单个接口历史压测数据'
                }, {
                    linkUrl: '#/jacoco/report',
                    picUrl: img4,
                    text: '代码覆盖率\n' +
                        '   基于jacoco的二次开发，集数据收集、增量分析、全量分析于一体的评估测试用例有效性工具'
                }, {
                    linkUrl: '#/java/call/graph/page',
                    picUrl: img1,
                    text: '项目调用链\n' +
                        '   基于ASM字节码解析调用关系，支持查询向上向下的方法调用关系'
                }, {
                    linkUrl: 'www.baidu.com',
                    picUrl: img2,
                    text: '代码review\n' +
                        '   基于facebook代码review工具phabricator二次开发，用于发起和流转团队code review工具'
                }
            ],
        }
    }
}
</script>
<style lang="less" scoped>
ul, li {
    padding: 0;
    margin: 0;
    list-style: none
}

a {
    text-decoration: none;
    color: #000;
}

.el-card {
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.15) !important;
    margin-top: 10px;

    .nav {
        width: 100%;
        background: #fff;
        margin: 0 auto;

        .nav-list {
            display: flex;
            flex-wrap: wrap;
            justify-content: space-between;

            .nav-item {
                width: 30%;
                //border: 1px solid #d3dce6;

                .nav-link {
                    display: flex;
                    justify-content: space-evenly;
                    flex-direction: row;
                    align-items: center;

                    .nav-pic {
                        Object-fit: contain;
                        width: 20%;
                        height: 20%;
                        padding: 10px;
                    }

                    .nav-title {
                        width: 60%;
                        white-space: pre-line; // 识别换行
                    }
                }
            }

            .nav-item:nth-child(n-3) {
                margin-top: 50px;
            }
        }
    }
}
</style>
