test-version22
/
MeterSphere
mirror of https://gitee.com/fit2cloud-feizhiyun/MeterSphere.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

refactor(接口测试): 接口测试首页样式优化 

接口测试首页样式优化
This commit is contained in:
song-tianyang 2022-02-28 16:14:42 +08:00 committed by CountryBuilder
parent d1350de0a1
commit 5a972277aa
5 changed files with 232 additions and 201 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

18
frontend/src/business/components/api/homepage/ApiTestHomePage.vue
View File

@ -1,27 +1,25 @@
<template>
<ms-container>
<ms-main-container v-loading="result.loading">
<el-row :gutter="10">
<el-col :span="6">
<el-row :gutter="10" style="margin-bottom: 5px; margin-top: -5px;">
<el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-api-info-card @redirectPage="redirectPage" :api-count-data="apiCountData"
:interface-coverage="apiCoverage"/>
</el-col>
<el-col :span="6">
<el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-test-case-info-card @redirectPage="redirectPage" :test-case-count-data="testCaseCountData"/>
</el-col>
<el-col :span="6">
<el-col :span="6" style="padding-left: 5px;padding-right: 0px">
<ms-scene-info-card @redirectPage="redirectPage" :scene-count-data="sceneCountData"
:interface-coverage="interfaceCoverage"/>
</el-col>
<el-col :span="6">
<el-col :span="6" style="padding-left: 5px;padding-right: 5px">
<ms-schedule-task-info-card :schedule-task-count-data="scheduleTaskCountData"/>
</el-col>
</el-row>
<el-row :gutter="10">
<el-col :span="12">
<el-row :gutter="10" style="margin-top: 0px; margin-bottom: 5px;">
<el-col :span="12" style="padding-left: 5px;padding-right: 0px">
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<template v-slot:header>
<el-col :span="22">
@ -66,7 +64,7 @@
</el-card>
</el-col>
<el-col :span="12">
<el-col :span="12" style="padding-left: 5px;padding-right: 5px">
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<div v-if="testTitleSecond === 'caseTitle'">
<ms-api-failure-test-case-list @redirectPage="redirectPage" />

87
frontend/src/business/components/api/homepage/components/ApiInfoCard.vue
View File

@ -1,5 +1,5 @@
<template>
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<el-card class="table-card" v-loading="result.loading" body-style="padding:16px 5px 16px 16px;" style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title">
{{ $t('api_test.home_page.api_count_card.title') }}
@ -11,7 +11,7 @@
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px;">
<div style="width: 200px;margin:0 auto">
<div style="width: 185px; float:right;margin:0 auto">
<el-row align="center" class="hidden-lg-and-down">
<el-col :span="6"
@ -30,7 +30,7 @@
<div class="count-info-div" v-html="apiCountData.sqlCountStr"></div>
</el-col>
</el-row>
<el-row align="right" style="margin-left: 20px" class="hidden-xl-only">
<el-row align="right" class="hidden-xl-only">
<el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="apiCountData.httpCountStr"></div>
@ -62,58 +62,46 @@
</el-col>
</el-row>
</el-header>
<el-main style="padding: 5px 5px 0px 5px;margin-top: 10px">
<!-- <el-container>-->
<!-- <el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">-->
<!-- <el-container>
<el-aside width="30%">
{{ $t('api_test.home_page.detail_card.rate.completion') + ":" }}
<el-main style="padding: 5px 5px 0px 0px;margin-top: 10px">
<el-container style="height: 96px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container style="height: 40px;margin-top: 10px">
<el-aside width="80px" style="line-height: 40px;">
<span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.completion') + ":" }}
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<span class="count-number">
{{ apiCountData.completionRage }}
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span class="rows-count-number">
{{ apiCountData.completionRage }}
<el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.completion')}}</div>
<div slot="content">{{ $t('api_test.home_page.formula.completion') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip>
</span>
</el-main>
</el-container>-->
<el-container>
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container style="height: 50px;margin-top: 10px">
<el-aside width="50%" style="line-height: 40px;">
{{$t('api_test.home_page.detail_card.rate.completion')+":"}}
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span class="rows-count-number">
{{ apiCountData.completionRage }}
<el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.completion')}}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip>
</span>
</el-main>
</el-container>
<el-container style="height: 50px;margin-top: 1px">
<el-aside width="50%" style="line-height: 40px;">
<span>{{$t('api_test.home_page.detail_card.rate.interface_coverage')+":"}}</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
</el-container>
<el-container style="height: 40px;margin-top: 1px">
<el-aside width="80px" style="line-height: 40px;">
<span style="float: left">
<span>{{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}</span>
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span v-if="interfaceCoverage === 'waitting...'">
<i class="el-icon-loading lading-icon"></i>
</span>
<span v-else class="rows-count-number">
{{interfaceCoverage}}
<span v-else class="rows-count-number">
{{ interfaceCoverage }}
<el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.api_coverage')}}</div>
<div slot="content">{{ $t('api_test.home_page.formula.api_coverage') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip>
</span>
</el-main>
</el-container>
</el-main>
</el-container>
</el-aside>
<el-main style="padding: 5px">
<el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main>
<el-row>
@ -157,6 +145,7 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsApiInfoCard",
@ -170,7 +159,7 @@ export default {
},
props: {
apiCountData: {},
interfaceCoverage:String,
interfaceCoverage: String,
},
methods: {
redirectPage(clickType) {
@ -192,12 +181,13 @@ export default {
position: relative;
}
.rows-count-number{
font-family:'ArialMT', 'Arial', sans-serif;
font-size:19px;
.rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 19px;
color: var(--count_number);
margin:20px auto;
position: relative;
margin-left: 10px;
float: left;
}
.count-number-show {
@ -209,6 +199,8 @@ export default {
}
.no-shadow-card {
width: 115px;
float: right;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
}
@ -233,7 +225,8 @@ export default {
.count-info-div >>> p {
font-size: 10px;
}
.info-tool-tip{
.info-tool-tip {
position: absolute;
top: 0;
}

177
frontend/src/business/components/api/homepage/components/SceneInfoCard.vue
View File

@ -1,8 +1,9 @@
<template>
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<div slot="header" >
<el-card class="table-card" v-loading="result.loading" body-style="padding:16px 5px 16px 16px;"
style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title">
{{$t('api_test.home_page.test_scene_count_card.title')}}
{{ $t('api_test.home_page.test_scene_count_card.title') }}
</span>
</div>
<el-container>
@ -12,42 +13,46 @@
</el-container>
<el-container class="detail-container">
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8">
{{$t('api_test.home_page.test_scene_details_card.this_week_add')}}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.test_scene_details_card.this_week_execute',[sceneCountData.thisWeekExecutedCount])}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.test_scene_details_card.executed',[sceneCountData.executedCount])}}
</el-col>
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
{{$t('api_test.home_page.test_scene_details_card.this_week_add_sm')}}
<br/>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">{{sceneCountData.thisWeekAddedCount}}
</el-link>
{{$t('api_test.home_page.unit_of_measurement')}}
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div>
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.test_scene_details_card.executed_sm',[sceneCountData.executedCount])"></div>
</el-col>
</el-row>
<el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8">
{{ $t('api_test.home_page.test_scene_details_card.this_week_add') }}
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
{{ sceneCountData.thisWeekAddedCount }}
</el-link>
{{ $t('api_test.home_page.unit_of_measurement') }}
</el-col>
<el-col :span="8">
{{
$t('api_test.home_page.test_scene_details_card.this_week_execute', [sceneCountData.thisWeekExecutedCount])
}}
</el-col>
<el-col :span="8">
{{ $t('api_test.home_page.test_scene_details_card.executed', [sceneCountData.executedCount]) }}
</el-col>
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[sceneCountData.thisWeekAddedCount])"></div>
</el-col>
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.test_scene_details_card.this_week_execute_sm',[sceneCountData.thisWeekExecutedCount])"></div>
</el-col>
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.test_scene_details_card.executed_sm',[sceneCountData.executedCount])"></div>
</el-col>
</el-row>
</el-header>
<el-main style="padding: 5px 5px 0px 5px;margin-top: 10px">
<el-container>
<el-main style="padding: 5px 5px 0px 0px;margin-top: 10px">
<el-container style="height: 96px">
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container style="height: 50px;margin-top: 10px">
<el-aside width="50%" style="line-height: 40px;">
{{ $t('api_test.home_page.detail_card.rate.pass') + ":" }}
<el-container style="height: 40px;margin-top: 10px">
<el-aside width="80px" style="line-height: 40px;">
<span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.pass') + ":" }}
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span class="rows-count-number">
@ -59,52 +64,55 @@
</span>
</el-main>
</el-container>
<el-container style="height: 50px;margin-top: 1px">
<el-aside width="50%" style="line-height: 40px;">
<span>{{$t('api_test.home_page.detail_card.rate.interface_coverage')+":"}}</span>
<el-container style="height: 40px;margin-top: 1px">
<el-aside width="80px" style="line-height: 40px;">
<span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.interface_coverage') + ":" }}
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 40px; text-align: center;">
<span v-if="interfaceCoverage === 'waitting...'">
<i class="el-icon-loading lading-icon"></i>
</span>
<span v-else class="rows-count-number">
{{interfaceCoverage}}
{{ interfaceCoverage }}
<el-tooltip placement="top" class="info-tool-tip">
<div slot="content">{{ $t('api_test.home_page.formula.interface_coverage')}}</div>
<div slot="content">{{ $t('api_test.home_page.formula.interface_coverage') }}</div>
<el-button icon="el-icon-info" style="padding:0px;border: 0px"></el-button>
</el-tooltip>
</span>
</el-main>
</el-container>
</el-aside>
<el-main style="padding: 5px">
<el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main>
<el-row>
<el-col>
<span class="defaultProperty">
{{$t('api_test.home_page.detail_card.unexecute')}}
{{"\xa0\xa0"}}
{{ $t('api_test.home_page.detail_card.unexecute') }}
{{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('unExecute')" target="_blank" style="color: #000000">
{{sceneCountData.unexecuteCount}}
{{ sceneCountData.unexecuteCount }}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="defaultProperty">
{{$t('api_test.home_page.detail_card.execution_failed')}}
{{"\xa0\xa0"}}
<el-link type="info" @click="redirectPage('executeFailed')" target="_blank" style="color: #000000">
{{sceneCountData.executionFailedCount}}
{{ $t('api_test.home_page.detail_card.execution_failed') }}
{{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('executeFailed')" target="_blank"
style="color: #000000">
{{ sceneCountData.executionFailedCount }}
</el-link>
</span>
</el-col>
<el-col style="margin-top: 5px;">
<span class="main-property">
{{$t('api_test.home_page.detail_card.execution_pass')}}
{{"\xa0\xa0"}}
{{ $t('api_test.home_page.detail_card.execution_pass') }}
{{ "\xa0\xa0" }}
<el-link type="info" @click="redirectPage('executePass')" target="_blank" style="color: #000000">
{{sceneCountData.executionPassCount}}
{{ sceneCountData.executionPassCount }}
</el-link>
</span>
</el-col>
@ -121,6 +129,7 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsSceneInfoCard",
@ -133,14 +142,14 @@ export default {
}
},
props:{
sceneCountData:{},
interfaceCoverage:String,
props: {
sceneCountData: {},
interfaceCoverage: String,
},
methods: {
redirectPage(clickType){
this.$emit("redirectPage","scenario","scenario",clickType);
redirectPage(clickType) {
this.$emit("redirectPage", "scenario", "scenario", clickType);
}
},
}
@ -150,43 +159,53 @@ export default {
line-height: 100px;
text-align: center;
}
.count-number{
font-family:'ArialMT', 'Arial', sans-serif;
font-size:33px;
.count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 33px;
color: var(--count_number);
margin:20px auto;
margin: 20px auto;
}
.rows-count-number{
font-family:'ArialMT', 'Arial', sans-serif;
font-size:19px;
.rows-count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 19px;
color: var(--count_number);
margin:20px auto;
position: relative;
margin-left: 10px;
float: left;
}
.lading-icon{
.lading-icon {
font-size: 25px;
color: var(--count_number);
font-weight: bold;
}
.main-number-show {
margin: 0 auto;
}
.count-number-show{
margin:20px auto;
.count-number-show {
margin: 20px auto;
}
.detail-container{
.detail-container {
margin-top: 30px
}
.no-shadow-card{
-webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
.no-shadow-card {
width: 115px;
float: right;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
}
.defaultProperty{
.defaultProperty {
font-size: 12px
}
.main-property{
.main-property {
color: #F39021;
font-size: 12px
}
@ -195,13 +214,15 @@ export default {
border-bottom: 0px solid #EBEEF5;
}
.count-info-div{
.count-info-div {
margin: 3px;
}
.count-info-div >>>p{
.count-info-div >>> p {
font-size: 10px;
}
.info-tool-tip{
.info-tool-tip {
position: absolute;
top: 0;
}

115
frontend/src/business/components/api/homepage/components/ScheduleTaskInfoCard.vue
View File

@ -1,8 +1,9 @@
<template>
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<div slot="header" >
<el-card class="table-card" v-loading="result.loading" body-style="padding:16px 5px 16px 16px;"
style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title">
{{$t('api_test.home_page.schedule_task_count_card.title')}}
{{ $t('api_test.home_page.schedule_task_count_card.title') }}
</span>
</div>
<el-container>
@ -10,38 +11,46 @@
<ms-count-ring-chart :content="scheduleTaskCountData.allApiDataCountNumber"/>
</el-main>
</el-container>
<el-container class="detail-container">
<el-header style="height:20px;padding: 0px;margin-bottom: 10px;">
<el-row :gutter="20" class="hidden-lg-and-down ">
<el-col :span="8">
{{$t('api_test.home_page.schedule_task_details_card.this_week_add',[scheduleTaskCountData.thisWeekAddedCount])}}
<el-col :span="8">
{{
$t('api_test.home_page.schedule_task_details_card.this_week_add', [scheduleTaskCountData.thisWeekAddedCount])
}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.schedule_task_details_card.this_week_execute',[scheduleTaskCountData.thisWeekExecutedCount])}}
<el-col :span="8">
{{
$t('api_test.home_page.schedule_task_details_card.this_week_execute', [scheduleTaskCountData.thisWeekExecutedCount])
}}
</el-col>
<el-col :span="8" >
{{$t('api_test.home_page.schedule_task_details_card.executed',[scheduleTaskCountData.executedCount])}}
<el-col :span="8">
{{ $t('api_test.home_page.schedule_task_details_card.executed', [scheduleTaskCountData.executedCount]) }}
</el-col>
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
<div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[scheduleTaskCountData.thisWeekAddedCount])"></div>
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[scheduleTaskCountData.thisWeekAddedCount])"></div>
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.this_week_execute_sm',[scheduleTaskCountData.thisWeekExecutedCount])"></div>
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_execute_sm',[scheduleTaskCountData.thisWeekExecutedCount])"></div>
</el-col>
<el-col :span="8" >
<div class="count-info-div" v-html="$t('api_test.home_page.schedule_task_details_card.executed_sm',[scheduleTaskCountData.executedCount])"></div>
<el-col :span="8">
<div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.executed_sm',[scheduleTaskCountData.executedCount])"></div>
</el-col>
</el-row>
</el-header>
<el-main style="padding: 5px;margin-top: 10px">
<el-main style="padding: 5px 5px 0px 0px;margin-top: 10px">
<el-container>
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container>
<el-aside width="30%">
{{ $t('api_test.home_page.detail_card.rate.success') + ":" }}
<el-aside width="50px">
<span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.success') + ":" }}
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<span class="count-number">
@ -54,24 +63,24 @@
</el-main>
</el-container>
</el-aside>
<el-main style="padding: 5px">
<el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px;">
<main>
<el-row>
<el-col>
<span class="default-property">
{{$t('api_test.home_page.detail_card.failed')}}
{{"\xa0\xa0"}}
{{scheduleTaskCountData.failedCount}}
{{ $t('api_test.home_page.detail_card.failed') }}
{{ "\xa0\xa0" }}
{{ scheduleTaskCountData.failedCount }}
</span>
</el-col>
<el-col style=" height: 20px;margin-top: 3px;">
</el-col>
<el-col style="margin-top: 5px;">
<span class="main-property">
{{$t('api_test.home_page.detail_card.success')}}
{{"\xa0\xa0"}}
{{scheduleTaskCountData.successCount}}
{{ $t('api_test.home_page.detail_card.success') }}
{{ "\xa0\xa0" }}
{{ scheduleTaskCountData.successCount }}
</span>
</el-col>
</el-row>
@ -102,11 +111,10 @@ export default {
loading: false
}
},
props:{
scheduleTaskCountData:{},
},
methods: {
props: {
scheduleTaskCountData: {},
},
methods: {},
created() {
},
@ -119,31 +127,36 @@ export default {
line-height: 100px;
text-align: center;
}
.count-number{
font-family:'ArialMT', 'Arial', sans-serif;
font-size:33px;
.count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 19px;
color: var(--count_number);
position: relative;
margin-left: 10px;
float: left;
}
.main-number-show {
margin: 0px auto;
.count-number-show {
margin: 20px auto;
}
.count-number-show{
margin:20px auto;
}
.detail-container{
.detail-container {
margin-top: 30px
}
.no-shadow-card{
-webkit-box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
box-shadow: 0 0px 0px 0 rgba(0,0,0,.1);
.no-shadow-card {
width: 115px;
float: right;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
}
.default-property{
.default-property {
font-size: 12px
}
.main-property{
.main-property {
color: #F39021;
font-size: 12px;
}
@ -152,14 +165,16 @@ export default {
border-bottom: 0px solid #EBEEF5;
}
.count-info-div{
.count-info-div {
margin: 3px;
}
.count-info-div >>>p{
.count-info-div >>> p {
font-size: 10px;
}
.info-tool-tip{
position: absolute;
top: 0;
}
.info-tool-tip {
position: absolute;
top: 30px;
}
</style>

36
frontend/src/business/components/api/homepage/components/TestCaseInfoCard.vue
View File

@ -1,5 +1,6 @@
<template>
<el-card class="table-card" v-loading="result.loading" body-style="padding:10px;">
<el-card class="table-card" v-loading="result.loading" body-style="padding:16px 5px 16px 16px;"
style="height: 350px;margin-top: 5px">
<div slot="header">
<span class="title">
{{ $t('api_test.home_page.test_case_count_card.title') }}
@ -10,7 +11,7 @@
<ms-count-ring-chart :content="testCaseCountData.allApiDataCountNumber"/>
</el-aside>
<el-main style="padding-left: 0px;padding-right: 0px">
<div style="width: 200px;margin:0 auto">
<div style="width: 185px; float:right;margin:0 auto">
<el-row align="center" class="hidden-lg-and-down">
<el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
@ -28,7 +29,7 @@
<div class="count-info-div" v-html="testCaseCountData.sqlCountStr"></div>
</el-col>
</el-row>
<el-row align="right" style="margin-left: 20px" class="hidden-xl-only">
<el-row align="right" class="hidden-xl-only">
<el-col :span="6"
style="padding: 5px;border-right-style: solid;border-right-width: 1px;border-right-color: #ECEEF4;">
<div class="count-info-div" v-html="testCaseCountData.httpCountStr"></div>
@ -69,12 +70,8 @@
</el-row>
<el-row :gutter="20" class="hidden-xl-only">
<el-col :span="8">
{{ $t('api_test.home_page.test_case_details_card.this_week_add_sm') }}
<br/>
<el-link type="info" @click="redirectPage('thisWeekCount')" target="_blank" style="color: #000000">
{{ testCaseCountData.thisWeekAddedCount }}
</el-link>
{{ $t('api_test.home_page.unit_of_measurement') }}
<div class="count-info-div"
v-html="$t('api_test.home_page.schedule_task_details_card.this_week_add_sm',[testCaseCountData.thisWeekAddedCount])"></div>
</el-col>
<el-col :span="8">
<div class="count-info-div"
@ -86,12 +83,14 @@
</el-col>
</el-row>
</el-header>
<el-main style="padding: 5px;margin-top: 10px">
<el-main style="padding: 5px 5px 0px 0px;margin-top: 10px">
<el-container>
<el-aside width="60%" class="count-number-show" style="margin-bottom: 0px;margin-top: 0px">
<el-container>
<el-aside width="30%">
{{ $t('api_test.home_page.detail_card.rate.coverage') + ":" }}
<el-aside width="50px">
<span style="float: left">
{{ $t('api_test.home_page.detail_card.rate.coverage') + ":" }}
</span>
</el-aside>
<el-main style="padding: 0px 0px 0px 0px; line-height: 100px; text-align: center;">
<span class="count-number">
@ -104,7 +103,7 @@
</el-main>
</el-container>
</el-aside>
<el-main style="padding: 5px">
<el-main style="padding: 0px; height: 80px; float:right;">
<el-card class="no-shadow-card" body-style="padding-left:5px;padding-right:5px">
<main>
<el-row>
@ -141,6 +140,7 @@
<script>
import MsCountRingChart from "@/business/components/common/chart/MsCountRingChart";
export default {
name: "MsTestCaseInfoCard",
@ -183,13 +183,15 @@ export default {
.count-number {
font-family: 'ArialMT', 'Arial', sans-serif;
font-size: 33px;
font-size: 19px;
color: var(--count_number);
position: relative;
margin-left: 10px;
float: left;
}
.count-number-show {
margin: 20px auto;
margin: 19px auto;
}
.detail-container {
@ -197,6 +199,8 @@ export default {
}
.no-shadow-card {
width: 115px;
float: right;
-webkit-box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, .1);
}
@ -224,6 +228,6 @@ export default {
.info-tool-tip {
position: absolute;
top: 0;
top: 30px;
}
</style>