style(系统设置): 优化服务集成的平台展现设置

This commit is contained in:
Jianguo-Genius 2024-04-18 15:34:01 +08:00 committed by 刘瑞斌
parent 47a985adbf
commit f45f6298fe
1 changed files with 40 additions and 16 deletions

View File

@ -1,20 +1,38 @@
<template> <template>
<div class="header-title" v-loading="loading"> <div class="header-title" v-loading="loading">
<div> <div>
<div>{{ $t('organization.integration.select_defect_platform') }}</div> <div>
<el-radio-group v-model="platform" style="margin-top: 10px"> {{ $t('organization.integration.select_defect_platform') }}
<span v-for="config in platformConfigs" :key="config.key"> </div>
<el-radio :label="config.label" class="platform-radio">
<img class="platform" :src="getPlatformImageUrl(config)" :alt="config.label"/> <el-form class="platform-radio">
</el-radio> <el-radio-group v-model="platform" style="margin-top: 10px;width: 100%">
</span> <el-row>
<el-radio label="Tapd" class="platform-radio"> <el-col :gutter="20" :span="4">
<img class="platform" src="/assets/tapd.png" alt="Tapd"/> <el-radio class="platform-radio" label="Tapd">
</el-radio> <img alt="Tapd" class="platform" src="/assets/tapd.png"/>
<el-radio label="AzureDevops" class="platform-radio" v-xpack> </el-radio>
<img class="platform" src="/assets/AzureDevops.png" alt="AzureDevops"/> </el-col>
</el-radio> <el-col :gutter="20" :span="4">
</el-radio-group> <el-radio class="platform-radio" label="AzureDevops">
<img alt="AzureDevops" class="platform" src="/assets/AzureDevops.png"/>
</el-radio>
</el-col>
<el-col :gutter="20" :span="16">
</el-col>
</el-row>
<el-row v-for="(row, index) in platformConfigs" :key="index">
<el-col v-for="config in row" :key="config.key" :gutter="20" :span="4">
<span>
<el-radio :label="config.label" class="platform-radio">
<img :alt="config.label" :src="getPlatformImageUrl(config)" class="platform"/>
</el-radio>
</span>
</el-col>
</el-row>
</el-radio-group>
</el-form>
</div> </div>
<tapd-setting v-if="tapdEnable" ref="tapdSetting"/> <tapd-setting v-if="tapdEnable" ref="tapdSetting"/>
@ -51,7 +69,13 @@ export default {
getIntegrationInfo() getIntegrationInfo()
.then((r) => { .then((r) => {
this.platformConfigs = r.data; for (let i = 0; i < r.data.length; i++) {
let pageNum = Math.floor(i / 5);
if (!this.platformConfigs[pageNum]) {
this.platformConfigs.push([]);
}
this.platformConfigs[pageNum].push(r.data[i]);
}
}); });
this.platform = TAPD; this.platform = TAPD;
@ -78,7 +102,7 @@ export default {
} }
.platform { .platform {
height: 80px; height: 60px;
vertical-align: middle vertical-align: middle
} }