Browse Source
style: 调整样式以提升用户体验
- 在 `start.vue` 中添加图片高度 - 在 `base.vue` 中增加 `z-index` 以确保元素层级 - 在 `getUrl.js` 中切换开发环境 API 地址 - 在 `questionCard.vue` 中动态设置文本区域占位符 - 在 `list/index.vue` 中移除多余的样式并修复导航逻辑 - 在 `baseCompleted.vue` 中注释掉未使用的代码块 - 在 `wxUserInfo.vue` 中调整登录页面的布局和背景 - 在 `workbenchManage/index.vue` 中禁用合伙人申请按钮并注释相关代码 - 在 `stepProgress.vue` 中优化步骤条样式并添加点击事件master
9 changed files with 160 additions and 105 deletions
Split View
Diff Options
-
+3 -1otherPages/authentication/components/questionCard.vue
-
+117 -82otherPages/authentication/components/stepProgress.vue
-
+1 -1otherPages/authentication/examination/base.vue
-
+5 -5otherPages/authentication/examination/baseCompleted.vue
-
+1 -0otherPages/authentication/examination/start.vue
-
+8 -5otherPages/authentication/list/index.vue
-
+16 -5pages/login/wxUserInfo.vue
-
+7 -4pages/workbenchManage/index.vue
-
+2 -2utils/getUrl.js
+ 3
- 1
otherPages/authentication/components/questionCard.vue
View File
+ 117
- 82
otherPages/authentication/components/stepProgress.vue
View File
| @ -1,101 +1,136 @@ | |||
| <template> | |||
| <view> | |||
| <view class="flex-rowl"> | |||
| <image :src="configList.applet_logo.paramValueImage" mode="" class="logo"></image> | |||
| <view class="size-36 fw700 color-fff"> | |||
| 伴宠师认证 | |||
| </view> | |||
| </view> | |||
| <view class="renz flex-rowl mt10"> | |||
| <text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text> | |||
| <image src="@/static/images/ydd/more.png" mode=""></image> | |||
| </view> | |||
| <view class="neir bg-fff mt24"> | |||
| <view class="steps flex-between"> | |||
| <template v-for="(item, index) in steps" :key="`step-${index}`"> | |||
| <view v-if="index > 0" class="line" :class="[index < props.step ? 'is-active' : '']"></view> | |||
| <view class="step flex-colc" :class="[index < props.step ? 'is-active' : '']"> | |||
| <view class="num mb6 flex-rowc size-26 color-fff"> | |||
| {{ index + 1 }} | |||
| </view> | |||
| <text class="size-22 desc">{{ item }}</text> | |||
| </view> | |||
| </template> | |||
| </view> | |||
| <view class="color-ffb size-22 mt32"> | |||
| {{ configList.pet_describe.paramValueText }} | |||
| </view> | |||
| </view> | |||
| </view> | |||
| <view> | |||
| <view class="flex-rowl"> | |||
| <image :src="configList.applet_logo.paramValueImage" class="logo"></image> | |||
| <view class="size-36 fw700 color-fff" | |||
| style="margin-left: 20rpx;"> | |||
| 伴宠师认证 | |||
| </view> | |||
| </view> | |||
| <view class="renz flex-rowl mt10" | |||
| @click="$refs.configPopupRef.open('certificationRequirements')"> | |||
| <text class="size-28 color-fff mr24">查看认证要求，工作详情，服务酬劳扥信息</text> | |||
| <image src="@/static/images/ydd/more.png" mode=""></image> | |||
| </view> | |||
| <view class="neir bg-fff mt24"> | |||
| <view class="steps flex-between"> | |||
| <template v-for="(item, index) in steps" :key="`step-${index}`"> | |||
| <view v-if="index > 0" class="line" :class="[index < props.step ? 'is-active' : '']"></view> | |||
| <view class="step flex-colc" :class="[index < props.step ? 'is-active' : '']" | |||
| @click="toPath(item)"> | |||
| <view class="num mb6 flex-rowc size-26 color-fff"> | |||
| {{ index + 1 }} | |||
| </view> | |||
| <text class="size-22 desc">{{ item.name }}</text> | |||
| </view> | |||
| </template> | |||
| </view> | |||
| <view class="color-ffb size-22 mt32"> | |||
| {{ configList.pet_describe.paramValueText }} | |||
| </view> | |||
| </view> | |||
| <configPopup ref="configPopupRef" /> | |||
| </view> | |||
| </template> | |||
| <script setup> | |||
| import { reactive } from 'vue' | |||
| import { store } from '@/store' | |||
| import { | |||
| reactive, | |||
| ref | |||
| } from 'vue' | |||
| import { | |||
| store | |||
| } from '@/store' | |||
| import configPopup from '@/components/configPopup.vue' | |||
| const configPopupRef = ref(null) | |||
| const configList = store.state.system.configList | |||
| const configList = store.state.system.configList | |||
| const props = defineProps({ | |||
| step: { | |||
| type: Number, | |||
| default: 0, | |||
| } | |||
| }) | |||
| const props = defineProps({ | |||
| step: { | |||
| type: Number, | |||
| default: 0, | |||
| } | |||
| }) | |||
| const steps = reactive(['基本考核', '培训考核', '最终准备']) | |||
| const steps = reactive([ | |||
| { | |||
| name : '基本考核', | |||
| path : '/otherPages/authentication/list/index', | |||
| }, | |||
| { | |||
| name : '培训考核', | |||
| path : '/otherPages/authentication/examination/baseCompleted', | |||
| }, | |||
| { | |||
| name : '最终准备', | |||
| // path : '/otherPages/authentication/examination/baseCompleted', | |||
| }, | |||
| ]) | |||
| function toPath(item){ | |||
| if(item.path){ | |||
| uni.redirectTo({ | |||
| url: item.path | |||
| }) | |||
| } | |||
| } | |||
| </script> | |||
| <style lang="scss" scoped> | |||
| .logo { | |||
| width: 194rpx; | |||
| height: 70rpx; | |||
| } | |||
| .renz { | |||
| .logo { | |||
| width: 194rpx; | |||
| height: 70rpx; | |||
| } | |||
| image { | |||
| width: 26rpx; | |||
| height: 26rpx; | |||
| } | |||
| } | |||
| .renz { | |||
| .neir { | |||
| padding: 47rpx 27rpx 36rpx 27rpx; | |||
| border-radius: 16rpx; | |||
| box-sizing: border-box; | |||
| width: 716rpx; | |||
| image { | |||
| width: 26rpx; | |||
| height: 26rpx; | |||
| } | |||
| } | |||
| .steps { | |||
| .line { | |||
| width: 163rpx; | |||
| height: 3rpx; | |||
| background-color: #BDBDBD; | |||
| margin-bottom: 30rpx; | |||
| margin: 0 26rpx; | |||
| } | |||
| .neir { | |||
| padding: 47rpx 27rpx 36rpx 27rpx; | |||
| border-radius: 16rpx; | |||
| box-sizing: border-box; | |||
| width: 716rpx; | |||
| .num { | |||
| width: 50rpx; | |||
| height: 50rpx; | |||
| background-color: #BDBDBD; | |||
| border-radius: 50%; | |||
| margin-bottom: 7rpx; | |||
| } | |||
| .steps { | |||
| .line { | |||
| width: 163rpx; | |||
| height: 3rpx; | |||
| background-color: #BDBDBD; | |||
| margin-bottom: 30rpx; | |||
| margin: 0 26rpx; | |||
| } | |||
| .desc { | |||
| white-space: nowrap; | |||
| color: #BDBDBD; | |||
| } | |||
| .num { | |||
| width: 50rpx; | |||
| height: 50rpx; | |||
| background-color: #BDBDBD; | |||
| border-radius: 50%; | |||
| margin-bottom: 7rpx; | |||
| } | |||
| .line.is-active, | |||
| .step.is-active .num { | |||
| background-color: #FFBF60; | |||
| } | |||
| .desc { | |||
| white-space: nowrap; | |||
| color: #BDBDBD; | |||
| } | |||
| .line.is-active, | |||
| .step.is-active .num { | |||
| background-color: #FFBF60; | |||
| } | |||
| .step.is-active .desc { | |||
| color: #000000; | |||
| } | |||
| } | |||
| } | |||
| .step.is-active .desc { | |||
| color: #000000; | |||
| } | |||
| } | |||
| } | |||
| </style> | |||