ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

样式调整

Browse Source
This commit is contained in:
GYYM
2024-11-25 21:11:10 +08:00
parent 428c74047b
commit a1d3485ba7
18 changed files with 1225 additions and 160 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
frontend/src/views/home/components/testPopup.vue
View File

@@ -6,15 +6,14 @@
<!-- :style="{color:node.label=='未检测'?'#F56C6C':node.label=='检测中'?'#E6A23C':'#67C23A'}" -->
<el-steps class="test-head-steps" simple :active="stepsActiveIndex" process-status="finish" finish-status="success" >
<!-- style="height:100px" -->
<el-step title="预检测" :icon="stepsActiveIndex > 0 ? SuccessFilled : Edit" />
<!-- <el-step title="预检测" :icon="getIcon(0)" /> -->
<el-step title="预检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :Edit" />
<el-step title="守时检测" :icon="stepsActiveIndex > 1 ? SuccessFilled :UploadFilled"/>
<el-step title="系数校准" :icon="stepsActiveIndex > 2 ? SuccessFilled :Odometer" />
<el-step title="正式检测" :icon="stepsActiveIndex > 3 ? SuccessFilled :Coin" />
<el-step title="检测完成" :icon="stepsActiveIndex > 4 ? SuccessFilled :Key" />
</el-steps>
</div>
<preTest v-if="stepsActiveIndex === 0" v-model:testStatus="preTestStatus"></preTest>
<timeTest v-if="stepsActiveIndex === 1" v-model:testStatus="timeTestStatus"></timeTest>
<channelsTest v-if="stepsActiveIndex === 2" v-model:testStatus="channelsTestStatus"></channelsTest>
@@ -23,7 +22,7 @@
<template #footer>
<div>
<!-- <el-button @click="handleCancel">取 消</el-button> -->
<el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < 2" :disabled="skipDisabled" @click="nextStep">跳过</el-button>
<el-button type="primary" :icon="DArrowRight" v-if="stepsActiveIndex < 2 && ActiveStatue != 'success'" :disabled="skipDisabled" @click="nextStep">跳过</el-button>
<el-button type="primary" :icon="VideoPlay" v-if="ActiveStatue === 'waiting'" @click="handleSubmit">开始检测</el-button>
<el-button type="danger" :icon="Close" v-if="ActiveStatue === 'process'" @click="handleSubmit">停止检测</el-button>
<el-button type="primary" :icon="Refresh" v-if="ActiveStatue === 'error'" @click="handleSubmit">重新检测</el-button>
@@ -35,7 +34,8 @@
</template>
<script lang="ts" setup name="testPopup">
<script lang="tsx" setup name="testPopup">
import { h } from 'vue';
import{ElMessage, ElSelectV2, FormInstance,FormItemRule}from'element-plus'
import { defineProps, defineEmits, reactive,watch,ref, Ref } from 'vue';
import { dialogBig,dialogMiddle} from '@/utils/elementBind'
@@ -45,7 +45,14 @@
import preTest from './preTest.vue'
import timeTest from './timeTest.vue'
import channelsTest from './channelsTest.vue'
//import SvgIcon from '@/components/SvgIcon.vue';
// import preTestIcon from '@/assets/icons/preTest.svg'
// const preTestIcon = `
// <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" class="w-6 h-6">
// </svg>
// `;
const props = defineProps<{
visible: boolean;
dialogTitle: string;
@@ -152,6 +159,17 @@ const detectionOptions = ref([
}
})
const getIcon = (index: number) => {
if (stepsActiveIndex.value > index) return SuccessFilled;
switch (index) {
case 0: return h(<svg-icon name="preTest"></svg-icon>);
case 1: return UploadFilled;
case 2: return Odometer;
case 3: return Coin;
case 4: return Key;
default: return null;
}
};
const nextStep = () => {
if(stepsActiveIndex.value < stepsTotalNum.value )
@@ -272,12 +290,24 @@ const detectionOptions = ref([
.steps-container :deep(.el-step__title) {
font-size: 20px !important; /* 设置标题字体大小 */
vertical-align:baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
.steps-container :deep(.el-step__icon-inner) {
font-size: 20px !important;
font-size: 18px !important;
vertical-align:baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
.steps-container :deep(.el-step__icon) {
font-size: 18px !important;
vertical-align:baseline !important;
display: inline-block; /* 确保文字和图标在同一行 */
line-height: 1; /* 调整行高以确保底部对齐 */
}
// :deep(.test-head-steps){
// height: 100px;