style(ui): 优化表单选择器样式和代码清理
添加表单选择器的占位符和选中状态样式 移除未使用的Loading组件和RectLeft图标 清理未使用的themeVars变量
Showing
6 changed files
with
25 additions
and
14 deletions
| ... | @@ -22,7 +22,6 @@ declare module 'vue' { | ... | @@ -22,7 +22,6 @@ declare module 'vue' { |
| 22 | NutFormItem: typeof import('@nutui/nutui-taro')['FormItem'] | 22 | NutFormItem: typeof import('@nutui/nutui-taro')['FormItem'] |
| 23 | NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview'] | 23 | NutImagePreview: typeof import('@nutui/nutui-taro')['ImagePreview'] |
| 24 | NutInput: typeof import('@nutui/nutui-taro')['Input'] | 24 | NutInput: typeof import('@nutui/nutui-taro')['Input'] |
| 25 | - NutLoading: typeof import('@nutui/nutui-taro')['Loading'] | ||
| 26 | NutMenu: typeof import('@nutui/nutui-taro')['Menu'] | 25 | NutMenu: typeof import('@nutui/nutui-taro')['Menu'] |
| 27 | NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem'] | 26 | NutMenuItem: typeof import('@nutui/nutui-taro')['MenuItem'] |
| 28 | NutOverlay: typeof import('@nutui/nutui-taro')['Overlay'] | 27 | NutOverlay: typeof import('@nutui/nutui-taro')['Overlay'] | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-16 10:22:06 | 4 | + * @LastEditTime: 2025-07-17 14:01:28 |
| 5 | * @FilePath: /jgdl/src/pages/authCar/index.vue | 5 | * @FilePath: /jgdl/src/pages/authCar/index.vue |
| 6 | * @Description: 认证车源 | 6 | * @Description: 认证车源 |
| 7 | --> | 7 | --> |
| ... | @@ -51,7 +51,7 @@ | ... | @@ -51,7 +51,7 @@ |
| 51 | </view> | 51 | </view> |
| 52 | <text class="font-medium text-sm block">{{ car.brand }} {{ car.model }}</text> | 52 | <text class="font-medium text-sm block">{{ car.brand }} {{ car.model }}</text> |
| 53 | <text class="text-xs text-gray-600 mt-1 block"> | 53 | <text class="text-xs text-gray-600 mt-1 block"> |
| 54 | - {{ car.manufacture_year }} · | 54 | + <!-- {{ car.manufacture_year }} · --> |
| 55 | <text v-if="car.range_km">续航{{ car.range_km }}km</text> | 55 | <text v-if="car.range_km">续航{{ car.range_km }}km</text> |
| 56 | <text v-if="car.max_speed_kmh"> 最高时速{{ car.max_speed_kmh }}km/h</text> | 56 | <text v-if="car.max_speed_kmh"> 最高时速{{ car.max_speed_kmh }}km/h</text> |
| 57 | </text> | 57 | </text> | ... | ... |
| ... | @@ -140,6 +140,15 @@ | ... | @@ -140,6 +140,15 @@ |
| 140 | margin-right: 16rpx; | 140 | margin-right: 16rpx; |
| 141 | } | 141 | } |
| 142 | 142 | ||
| 143 | +.form-value-placeholder { | ||
| 144 | + color: #9ca3af; /* 浅色 - 占位符文字 */ | ||
| 145 | +} | ||
| 146 | + | ||
| 147 | +.form-value-selected { | ||
| 148 | + color: #374151; /* 深色 - 选中值文字 */ | ||
| 149 | + font-weight: 500; | ||
| 150 | +} | ||
| 151 | + | ||
| 143 | .arrow-icon { | 152 | .arrow-icon { |
| 144 | color: #9ca3af; | 153 | color: #9ca3af; |
| 145 | } | 154 | } | ... | ... |
| ... | @@ -128,7 +128,7 @@ | ... | @@ -128,7 +128,7 @@ |
| 128 | <!-- 品牌型号选择(新版) --> | 128 | <!-- 品牌型号选择(新版) --> |
| 129 | <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel"> | 129 | <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel"> |
| 130 | <view class="form-item-content" @click="showBrandModelPicker"> | 130 | <view class="form-item-content" @click="showBrandModelPicker"> |
| 131 | - <text class="form-value"> | 131 | + <text class="form-value" :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }"> |
| 132 | {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }} | 132 | {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }} |
| 133 | </text> | 133 | </text> |
| 134 | <Right class="arrow-icon" /> | 134 | <Right class="arrow-icon" /> |
| ... | @@ -320,7 +320,7 @@ | ... | @@ -320,7 +320,7 @@ |
| 320 | 320 | ||
| 321 | <script setup> | 321 | <script setup> |
| 322 | import { ref, reactive, onMounted } from 'vue' | 322 | import { ref, reactive, onMounted } from 'vue' |
| 323 | -import { Plus, Right, Location, Close, RectLeft } from '@nutui/icons-vue-taro' | 323 | +import { Plus, Right, Location, Close } from '@nutui/icons-vue-taro' |
| 324 | import Taro from '@tarojs/taro' | 324 | import Taro from '@tarojs/taro' |
| 325 | import BASE_URL from '@/utils/config'; | 325 | import BASE_URL from '@/utils/config'; |
| 326 | import BrandModelPicker from '@/components/BrandModelPicker.vue' | 326 | import BrandModelPicker from '@/components/BrandModelPicker.vue' |
| ... | @@ -331,11 +331,6 @@ import './index.less' | ... | @@ -331,11 +331,6 @@ import './index.less' |
| 331 | import { addVehicleAPI, editVehicleAPI, getVehicleDetailAPI } from '@/api/car'; | 331 | import { addVehicleAPI, editVehicleAPI, getVehicleDetailAPI } from '@/api/car'; |
| 332 | import { getSchoolsAPI, getBrandsModelsAPI } from '@/api/other'; | 332 | import { getSchoolsAPI, getBrandsModelsAPI } from '@/api/other'; |
| 333 | 333 | ||
| 334 | -const themeVars = ref({ | ||
| 335 | - navbarBackground: '#fb923c', | ||
| 336 | - navbarColor: '#ffffff', | ||
| 337 | -}) | ||
| 338 | - | ||
| 339 | /** | 334 | /** |
| 340 | * 返回上一页 | 335 | * 返回上一页 |
| 341 | */ | 336 | */ | ... | ... |
| ... | @@ -141,6 +141,15 @@ | ... | @@ -141,6 +141,15 @@ |
| 141 | margin-right: 16rpx; | 141 | margin-right: 16rpx; |
| 142 | } | 142 | } |
| 143 | 143 | ||
| 144 | +.form-value-placeholder { | ||
| 145 | + color: #9ca3af; /* 浅色 - 占位符文字 */ | ||
| 146 | +} | ||
| 147 | + | ||
| 148 | +.form-value-selected { | ||
| 149 | + color: #374151; /* 深色 - 选中值文字 */ | ||
| 150 | + font-weight: 500; | ||
| 151 | +} | ||
| 152 | + | ||
| 144 | .arrow-icon { | 153 | .arrow-icon { |
| 145 | color: #9ca3af; | 154 | color: #9ca3af; |
| 146 | } | 155 | } | ... | ... |
| 1 | <!-- | 1 | <!-- |
| 2 | * @Date: 2022-09-19 14:11:06 | 2 | * @Date: 2022-09-19 14:11:06 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-17 10:36:52 | 4 | + * @LastEditTime: 2025-07-17 14:20:06 |
| 5 | * @FilePath: /jgdl/src/pages/setAuthCar/index.vue | 5 | * @FilePath: /jgdl/src/pages/setAuthCar/index.vue |
| 6 | * @Description: 申请认证 | 6 | * @Description: 申请认证 |
| 7 | --> | 7 | --> |
| ... | @@ -90,9 +90,8 @@ | ... | @@ -90,9 +90,8 @@ |
| 90 | <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel" required | 90 | <nut-form-item label-position="top" label="品牌型号选择" prop="brandModel" required |
| 91 | :rules="[{ required: true, message: '请选择品牌型号' }]"> | 91 | :rules="[{ required: true, message: '请选择品牌型号' }]"> |
| 92 | <view class="form-item-content" @click="showBrandModelPicker"> | 92 | <view class="form-item-content" @click="showBrandModelPicker"> |
| 93 | - <text class="form-value"> | 93 | + <text class="form-value" :class="{ 'form-value-selected': formData.brand && formData.model, 'form-value-placeholder': !(formData.brand && formData.model) }"> |
| 94 | - {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' | 94 | + {{ formData.brand && formData.model ? `${formData.brand} ${formData.model}` : '请选择品牌型号' }} |
| 95 | - }} | ||
| 96 | </text> | 95 | </text> |
| 97 | <Right class="arrow-icon" /> | 96 | <Right class="arrow-icon" /> |
| 98 | </view> | 97 | </view> | ... | ... |
-
Please register or login to post a comment