fix(新手任务): 压缩新手任务 gif 图片大小,调整任务排版样式

This commit is contained in:
lan-yonghui 2023-04-25 23:05:05 +08:00 committed by 刘瑞斌
parent be8a692a28
commit a934f9925d
26 changed files with 55 additions and 28 deletions

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 839 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.7 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 810 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.1 MiB

After

Width:  |  Height:  |  Size: 803 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.1 MiB

After

Width:  |  Height:  |  Size: 293 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 MiB

After

Width:  |  Height:  |  Size: 1.6 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.9 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.3 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1024 KiB

After

Width:  |  Height:  |  Size: 252 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.6 MiB

After

Width:  |  Height:  |  Size: 1.1 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.5 MiB

After

Width:  |  Height:  |  Size: 1.5 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.5 MiB

After

Width:  |  Height:  |  Size: 1.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.1 MiB

After

Width:  |  Height:  |  Size: 1.4 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.8 MiB

After

Width:  |  Height:  |  Size: 1.3 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 1.8 MiB

After

Width:  |  Height:  |  Size: 664 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 2.4 MiB

After

Width:  |  Height:  |  Size: 756 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.1 MiB

After

Width:  |  Height:  |  Size: 888 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.6 MiB

After

Width:  |  Height:  |  Size: 2.0 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.3 MiB

After

Width:  |  Height:  |  Size: 2.2 MiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 3.6 MiB

After

Width:  |  Height:  |  Size: 1.2 MiB

View File

@ -3,8 +3,8 @@
<!-- 侧边任务按钮-->
<div :class="language === 'en-US' ? 'parentBox parentBox-en' : 'parentBox'" @click="toggle(1)">
<div class="contentsBox">
<div :style="openBox ? (language === 'en-US' ? 'right: 0;width:140px;cursor: auto;white-space: nowrap;' :
'right: 0;width:100px;cursor: auto;white-space: nowrap;') : ''" >
<div :style="openBox ? (language === 'en-US' ? 'right: 16px;width:140px;cursor: auto;white-space: nowrap;' :
'right: 16px;width:100px;cursor: auto;white-space: nowrap;') : ''" >
<font-awesome-icon class="icon global focusing" :icon="['fas', 'compass']" spin style="color: #ffffff;" />
<span :style="openBox ? 'display: block;color: #fff;cursor: pointer;' : ''">{{$t('side_task.novice_task')}}</span>
</div>
@ -159,13 +159,13 @@ export default {
bottom: 125px;
}
.parentBox .contentsBox div:hover {
right: 0;
right: 16px;
height: 28px;
width: 100px;
cursor: auto;
}
.parentBox-en .contentsBox div:hover {
right: 0;
right: 16px;
height: 28px;
width: 140px;
cursor: auto;

View File

@ -38,7 +38,7 @@
</div>
</el-card>
</div>
<div class="csat-popup" v-else-if="cardVisible && taskInfo.length > 0">
<div :class="language === 'en-US' ? 'csat-popup csat-popup-en' : 'csat-popup'" v-else-if="cardVisible && taskInfo.length > 0">
<template v-for="(item,index) in taskInfo" >
<el-card :key="item.id" v-if="(index + 1) === taskIndex && checkPermissions(item.permission)"
class="box-card" >
@ -63,16 +63,15 @@
<template v-for="(val,i) in item.taskData">
<div class="text item" v-if="checkPermissions(val.permission)" :key="i">
<p v-if="val.status === 1">
<font-awesome-icon :icon="['far', 'check-circle']" style="color:#783887" />
<label :style="language === 'en-US' ? 'font-size: 14px' : ''">{{$t(val.name)}}</label>
<font-awesome-icon :icon="['far', 'check-circle']" style="color:#783887" class="title-icon"/>
<label>{{$t(val.name)}}</label>
</p>
<p v-else @click="openGif(val)" :class="checked === val.id ? 'check-p' : ''">
<font-awesome-icon :icon="checked === val.id ? ['fas', 'circle-notch'] : ['far', 'circle']"
class="title-icon" rotation='90' />
<span :style="language === 'en-US' ? 'font-size: 14px' : ''"
:class="checked === val.id ? 'checked' : ''">
{{$t(val.name)}}
</span>
<span :class="checked === val.id ? 'checked' : ''"
:style="language === 'en-US' ? 'display:inline-block;width: 299px' :
'display:inline-block;width: 248px'">{{$t(val.name)}}</span>
</p>
</div>
</template>
@ -92,7 +91,7 @@
</template>
</div>
<div class="csat-popup-gif" v-if="gifVisible">
<div :class="language === 'en-US' ? 'csat-popup-gif csat-popup-gif-en' : 'csat-popup-gif'" v-if="gifVisible">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="float: right; padding: 5px 0;" class="moon" @click="closeGif()">
@ -111,14 +110,21 @@
</el-image>
</div>
<div :class="language === 'en-US' ? 'gif-footer-en' : 'gif-footer'">
<el-button type="primary" round size="small" class="is-plain" @click="gotoPath(gifData.path)">
{{$t(gifData.name)}}
<el-button type="primary" round size="small" class="is-plain" style="margin-right:10px"
@click="gotoPath(gifData.path)">
{{$t('side_task.to_try')}}
</el-button>
<a href="https://www.metersphere.com/video" target="_blank">
<el-button type="primary" round size="small" class="is-plain">
{{ $t("side_task.view_video") }}
</el-button>
</a>
</div>
</el-card>
</div>
<div :class="language === 'en-US' ? 'csat-popup-gif close close-en' : 'csat-popup-gif close'" v-if="noviceVisible">
<div :class="language === 'en-US' ? 'csat-popup-gif csat-popup-gif-en close close-en' : 'csat-popup-gif close'"
v-if="noviceVisible">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span style="float: right; padding: 5px 0;" class="moon" @click="closeGif()">
@ -199,6 +205,7 @@ export default {
},
open() {
this.checked = ""
this.taskIndex = 1
this.cardVisible = !this.cardVisible;
if(this.cardVisible){
@ -230,6 +237,7 @@ export default {
this.closeGif()
},
notShow() {
this.checked = ""
this.noviceVisible = true
this.gifVisible = false
},
@ -295,13 +303,14 @@ export default {
}
.item {
margin-bottom: 10px;
margin-left: 20px;
margin-bottom: 5px;
margin-left: 35px;
}
.item p {
font-size: 14px;
margin-top: 0;
margin-bottom: 10px;
margin-bottom: 5px;
}
.item p label {
color:#783887;
@ -313,7 +322,7 @@ export default {
}
.title-icon {
color: #303133;
margin-right: 3px;
margin-right: 5px;
}
.item p:hover {
color:#783887;
@ -330,7 +339,7 @@ export default {
}
.item p:hover span {
border-radius: 15px;
background-color:#f3f3f3;
background-color:#f5f6f7;
}
.check-p {
@ -344,7 +353,7 @@ export default {
.checked {
border-radius: 15px;
background-color:#f3f3f3;
background-color:#f5f6f7;
}
.progress-card-en {
@ -380,7 +389,7 @@ export default {
.gif-footer-en {
width: 100%;
margin: 10px 0 44px;
margin: 10px 0 44px ;
text-align: center;
}
@ -394,7 +403,7 @@ export default {
}
.box-card {
width: 400px;
/*width: 400px;*/
}
.csat-popup {
@ -413,9 +422,13 @@ export default {
transition: .3s;
}
.csat-popup-en {
width: 430px;
}
.csat-popup-gif {
position: fixed;
right: 426px;
right: 424px;
bottom: 170px;
width: 400px;
border-radius: 8px;
@ -428,6 +441,9 @@ export default {
-webkit-transition: .3s;
transition: .3s;
}
.csat-popup-gif-en {
right: 455px;
}
.close {
bottom: 362px;
}
@ -490,8 +506,13 @@ export default {
::v-deep .el-progress__text{
color: #783787 !important;
float: left;
width: 40px;
margin-left: 0;
margin-right: 10px
text-align: center;
/*margin-right: 8px*/
}
::v-deep .el-progress-bar__outer {
background-color: #E8EBED !important;
}

View File

@ -3577,7 +3577,7 @@ const message = {
},
ui: {
title: 'Portable UI element library and command set',
desc: '<span>Arrange scenario cases based on reusable element library and commands;</span><br><span>combine your commonly used test steps into new command, </span><br><span>which can be flexibly called in automation scenarios. </span>',
desc: '<span>Arrange scenario cases based on reusable element library and commands;</span><br><span>combine your commonly used test steps into new command, which can be flexibly called in automation scenarios.</span><br><span style="background-color: #ffffff;color:#ffffff">/</span>',
button: 'Next: Performance Test'
},
performance: {
@ -3645,6 +3645,8 @@ const message = {
close_btn: "Still Close",
},
save_success: "Closed successfully",
to_try: "Go to try it",
view_video: "View video tutorial"
}
};

View File

@ -3448,7 +3448,7 @@ const message = {
},
ui: {
title: '可移植的 UI 元素库与指令集',
desc: '<span>基于可复用的元素库及指令快速编排场景化用例;</span><br><span>将你常用的测试步骤组合成新的自定义指令,</span><br><span>在自动化场景中灵活调用。</span>',
desc: '<span>基于可复用的元素库及指令快速编排场景化用例;</span><br><span>将你常用的测试步骤组合成新的自定义指令,在自动化场景中灵活调用。</span><br><span style="background-color: #ffffff;color:#ffffff">/</span>',
button: '下一个:性能测试'
},
performance: {
@ -3516,6 +3516,8 @@ const message = {
close_btn: "仍然关闭",
},
save_success: "关闭成功",
to_try: "去完成",
view_video: "观看视频教程"
}
};

View File

@ -3448,7 +3448,7 @@ const message = {
},
ui: {
title: '可移植的 UI 元素庫與指令集',
desc: '<span>基於可複用的元素庫及指令快速編排場景化用例;</span><br><span>將你常用的測試步驟組合成新的自定義指令,</span><br><span>在自動化場景中靈活調用。</span>',
desc: '<span>基於可複用的元素庫及指令快速編排場景化用例;</span><br><span>將你常用的測試步驟組合成新的自定義指令,在自動化場景中靈活調用。</span><br><span style="background-color: #ffffff;color:#ffffff">/</span>',
button: '下一個:性能測試'
},
performance: {
@ -3516,6 +3516,8 @@ const message = {
close_btn: "仍然關閉",
},
save_success: "關閉成功",
to_try: "去完成",
view_video: "觀看視頻教程"
}
};