feat(认证): 添加车辆认证页面及功能
实现车辆认证页面,包括图片上传、表单填写和提交功能 将样式从vue文件拆分到单独的less文件 更新路由配置添加认证页面 修复认证跳转链接错误
Showing
8 changed files
with
628 additions
and
312 deletions
| 1 | /* | 1 | /* |
| 2 | * @Date: 2025-06-28 10:33:00 | 2 | * @Date: 2025-06-28 10:33:00 |
| 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com | 3 | * @LastEditors: hookehuyr hookehuyr@gmail.com |
| 4 | - * @LastEditTime: 2025-07-02 17:15:42 | 4 | + * @LastEditTime: 2025-07-02 18:16:09 |
| 5 | * @FilePath: /jgdl/src/app.config.js | 5 | * @FilePath: /jgdl/src/app.config.js |
| 6 | * @Description: 文件描述 | 6 | * @Description: 文件描述 |
| 7 | */ | 7 | */ |
| ... | @@ -15,6 +15,7 @@ export default { | ... | @@ -15,6 +15,7 @@ export default { |
| 15 | 'pages/editProfile/index', | 15 | 'pages/editProfile/index', |
| 16 | 'pages/register/index', | 16 | 'pages/register/index', |
| 17 | 'pages/authCar/index', | 17 | 'pages/authCar/index', |
| 18 | + 'pages/setAuthCar/index', | ||
| 18 | 'pages/auth/index', | 19 | 'pages/auth/index', |
| 19 | ], | 20 | ], |
| 20 | subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 | 21 | subpackages: [ // 配置在tabBar中的页面不能分包写到subpackages中去 | ... | ... |
| 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-02 17:36:43 | 4 | + * @LastEditTime: 2025-07-02 18:15:19 |
| 5 | * @FilePath: /jgdl/src/pages/authCar/index.vue | 5 | * @FilePath: /jgdl/src/pages/authCar/index.vue |
| 6 | * @Description: 认证车源 | 6 | * @Description: 认证车源 |
| 7 | --> | 7 | --> |
| ... | @@ -107,6 +107,7 @@ | ... | @@ -107,6 +107,7 @@ |
| 107 | </template> | 107 | </template> |
| 108 | 108 | ||
| 109 | <script setup> | 109 | <script setup> |
| 110 | +import Taro from '@tarojs/taro' | ||
| 110 | import { ref, computed, onMounted } from 'vue' | 111 | import { ref, computed, onMounted } from 'vue' |
| 111 | import { Check, RectRight, Addfollow, HeartFill } from '@nutui/icons-vue-taro' | 112 | import { Check, RectRight, Addfollow, HeartFill } from '@nutui/icons-vue-taro' |
| 112 | import './index.less' | 113 | import './index.less' |
| ... | @@ -189,9 +190,8 @@ const scrollStyle = computed(() => { | ... | @@ -189,9 +190,8 @@ const scrollStyle = computed(() => { |
| 189 | * 处理认证按钮点击 | 190 | * 处理认证按钮点击 |
| 190 | */ | 191 | */ |
| 191 | const handleAuth = () => { | 192 | const handleAuth = () => { |
| 192 | - showToast('跳转到认证页面', 'success') | ||
| 193 | // TODO: 跳转到认证页面 | 193 | // TODO: 跳转到认证页面 |
| 194 | - // Taro.navigateTo({ url: '/pages/auth/index' }) | 194 | + Taro.navigateTo({ url: '/pages/setAuthCar/index' }) |
| 195 | } | 195 | } |
| 196 | 196 | ||
| 197 | /** | 197 | /** | ... | ... |
| ... | @@ -141,7 +141,7 @@ | ... | @@ -141,7 +141,7 @@ |
| 141 | <script setup> | 141 | <script setup> |
| 142 | import { ref, reactive, computed, onMounted } from 'vue' | 142 | import { ref, reactive, computed, onMounted } from 'vue' |
| 143 | import Taro from '@tarojs/taro' | 143 | import Taro from '@tarojs/taro' |
| 144 | -import { RectLeft, Camera, Right } from '@nutui/icons-vue-taro' | 144 | +import { RectLeft, Right } from '@nutui/icons-vue-taro' |
| 145 | import './index.less' | 145 | import './index.less' |
| 146 | 146 | ||
| 147 | // 主题配置 | 147 | // 主题配置 | ... | ... |
src/pages/sell/index.less
0 → 100644
| 1 | +.sell-page { | ||
| 2 | + min-height: 100vh; | ||
| 3 | + background-color: #f5f5f5; | ||
| 4 | + padding-bottom: 120rpx; | ||
| 5 | +} | ||
| 6 | + | ||
| 7 | +.form-container { | ||
| 8 | + padding: 0 32rpx; | ||
| 9 | + margin-bottom: 2rem; | ||
| 10 | +} | ||
| 11 | + | ||
| 12 | +.form-section { | ||
| 13 | + background-color: #ffffff; | ||
| 14 | + border-radius: 24rpx; | ||
| 15 | + padding: 32rpx; | ||
| 16 | + margin: 24rpx 0; | ||
| 17 | +} | ||
| 18 | + | ||
| 19 | +.section-title { | ||
| 20 | + font-size: 32rpx; | ||
| 21 | + font-weight: 600; | ||
| 22 | + color: #111827; | ||
| 23 | + margin-bottom: 32rpx; | ||
| 24 | + display: block; | ||
| 25 | +} | ||
| 26 | + | ||
| 27 | +.upload-grid { | ||
| 28 | + display: grid; | ||
| 29 | + grid-template-columns: repeat(2, 1fr); | ||
| 30 | + gap: 32rpx; | ||
| 31 | + margin-top: 24rpx; | ||
| 32 | +} | ||
| 33 | + | ||
| 34 | +.upload-item { | ||
| 35 | + display: flex; | ||
| 36 | + flex-direction: column; | ||
| 37 | + align-items: center; | ||
| 38 | + gap: 16rpx; | ||
| 39 | +} | ||
| 40 | + | ||
| 41 | +.upload-button { | ||
| 42 | + width: 160rpx; | ||
| 43 | + height: 160rpx; | ||
| 44 | + border: 2rpx dashed #d1d5db; | ||
| 45 | + border-radius: 16rpx; | ||
| 46 | + display: flex; | ||
| 47 | + align-items: center; | ||
| 48 | + justify-content: center; | ||
| 49 | + background-color: #f9fafb; | ||
| 50 | + transition: all 0.3s ease; | ||
| 51 | +} | ||
| 52 | + | ||
| 53 | +.upload-button:active { | ||
| 54 | + background-color: #f3f4f6; | ||
| 55 | + border-color: #f97316; | ||
| 56 | +} | ||
| 57 | + | ||
| 58 | +.upload-icon { | ||
| 59 | + font-size: 48rpx; | ||
| 60 | + color: #9ca3af; | ||
| 61 | +} | ||
| 62 | + | ||
| 63 | +.upload-label { | ||
| 64 | + font-size: 24rpx; | ||
| 65 | + color: #6b7280; | ||
| 66 | + text-align: center; | ||
| 67 | +} | ||
| 68 | + | ||
| 69 | +.image-preview { | ||
| 70 | + position: relative; | ||
| 71 | + width: 160rpx; | ||
| 72 | + height: 160rpx; | ||
| 73 | + border-radius: 16rpx; | ||
| 74 | + overflow: hidden; | ||
| 75 | +} | ||
| 76 | + | ||
| 77 | +.preview-image { | ||
| 78 | + width: 100%; | ||
| 79 | + height: 100%; | ||
| 80 | + object-fit: cover; | ||
| 81 | +} | ||
| 82 | + | ||
| 83 | +.delete-btn { | ||
| 84 | + position: absolute; | ||
| 85 | + top: 8rpx; | ||
| 86 | + right: 8rpx; | ||
| 87 | + width: 32rpx; | ||
| 88 | + height: 32rpx; | ||
| 89 | + background-color: #ef4444; | ||
| 90 | + border-radius: 50%; | ||
| 91 | + display: flex; | ||
| 92 | + align-items: center; | ||
| 93 | + justify-content: center; | ||
| 94 | + color: white; | ||
| 95 | + font-size: 16rpx; | ||
| 96 | + z-index: 10; | ||
| 97 | + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); | ||
| 98 | +} | ||
| 99 | + | ||
| 100 | +.delete-icon { | ||
| 101 | + font-size: 16rpx; | ||
| 102 | + color: white; | ||
| 103 | +} | ||
| 104 | + | ||
| 105 | +.form-item { | ||
| 106 | + display: flex; | ||
| 107 | + justify-content: space-between; | ||
| 108 | + align-items: center; | ||
| 109 | + padding: 32rpx 0; | ||
| 110 | + border-bottom: 1rpx solid #f3f4f6; | ||
| 111 | +} | ||
| 112 | + | ||
| 113 | +.form-item:last-child { | ||
| 114 | + border-bottom: none; | ||
| 115 | +} | ||
| 116 | + | ||
| 117 | +.form-item-left { | ||
| 118 | + display: flex; | ||
| 119 | + align-items: center; | ||
| 120 | +} | ||
| 121 | + | ||
| 122 | +.form-icon { | ||
| 123 | + margin-right: 16rpx; | ||
| 124 | + color: #9ca3af; | ||
| 125 | +} | ||
| 126 | + | ||
| 127 | +.form-label { | ||
| 128 | + font-size: 28rpx; | ||
| 129 | + color: #374151; | ||
| 130 | +} | ||
| 131 | + | ||
| 132 | +.form-item-right { | ||
| 133 | + display: flex; | ||
| 134 | + align-items: center; | ||
| 135 | +} | ||
| 136 | + | ||
| 137 | +.form-value { | ||
| 138 | + font-size: 28rpx; | ||
| 139 | + color: #9ca3af; | ||
| 140 | + margin-right: 16rpx; | ||
| 141 | +} | ||
| 142 | + | ||
| 143 | +.arrow-icon { | ||
| 144 | + color: #9ca3af; | ||
| 145 | +} | ||
| 146 | + | ||
| 147 | +.form-item-content { | ||
| 148 | + display: flex; | ||
| 149 | + justify-content: space-between; | ||
| 150 | + align-items: center; | ||
| 151 | + width: 100%; | ||
| 152 | + padding: 24rpx 0; | ||
| 153 | +} | ||
| 154 | + | ||
| 155 | +.unit { | ||
| 156 | + font-size: 28rpx; | ||
| 157 | + color: #9ca3af; | ||
| 158 | + margin-left: 16rpx; | ||
| 159 | +} | ||
| 160 | + | ||
| 161 | +.price-symbol { | ||
| 162 | + font-size: 32rpx; | ||
| 163 | + color: #f97316; | ||
| 164 | + font-weight: 600; | ||
| 165 | + margin-right: 8rpx; | ||
| 166 | +} | ||
| 167 | + | ||
| 168 | +.price-input { | ||
| 169 | + font-size: 32rpx; | ||
| 170 | + color: #f97316; | ||
| 171 | + font-weight: 600; | ||
| 172 | + text-align: right; | ||
| 173 | + border: none; | ||
| 174 | + outline: none; | ||
| 175 | + background: transparent; | ||
| 176 | + width: 160rpx; | ||
| 177 | +} | ||
| 178 | + | ||
| 179 | +.market-price-symbol { | ||
| 180 | + font-size: 28rpx; | ||
| 181 | + color: #9ca3af; | ||
| 182 | + margin-right: 8rpx; | ||
| 183 | +} | ||
| 184 | + | ||
| 185 | +.market-price-input { | ||
| 186 | + font-size: 28rpx; | ||
| 187 | + color: #9ca3af; | ||
| 188 | + text-align: right; | ||
| 189 | + border: none; | ||
| 190 | + outline: none; | ||
| 191 | + background: transparent; | ||
| 192 | + width: 160rpx; | ||
| 193 | +} | ||
| 194 | + | ||
| 195 | +.bottom-actions { | ||
| 196 | + position: fixed; | ||
| 197 | + bottom: 0; | ||
| 198 | + left: 0; | ||
| 199 | + right: 0; | ||
| 200 | + background-color: #ffffff; | ||
| 201 | + padding: 24rpx 32rpx; | ||
| 202 | + border-top: 1rpx solid #f3f4f6; | ||
| 203 | + z-index: 100; | ||
| 204 | +} | ||
| 205 | + | ||
| 206 | +// NutUI组件样式覆盖 | ||
| 207 | +:deep(.nut-form-item) { | ||
| 208 | + padding: 0; | ||
| 209 | + margin-bottom: 0; | ||
| 210 | + border-bottom: 1rpx solid #f3f4f6; | ||
| 211 | +} | ||
| 212 | + | ||
| 213 | +// :deep(.nut-form-item:last-child) { | ||
| 214 | +// border-bottom: none; | ||
| 215 | +// } | ||
| 216 | + | ||
| 217 | +:deep(.nut-form-item__body) { | ||
| 218 | + padding: 32rpx 0; | ||
| 219 | +} | ||
| 220 | + | ||
| 221 | +:deep(.nut-form-item__label) { | ||
| 222 | + font-size: 28rpx; | ||
| 223 | + color: #374151; | ||
| 224 | + margin-right: 32rpx; | ||
| 225 | +} | ||
| 226 | + | ||
| 227 | +:deep(.nut-input) { | ||
| 228 | + text-align: right; | ||
| 229 | +} | ||
| 230 | + | ||
| 231 | +:deep(.nut-input__input) { | ||
| 232 | + font-size: 28rpx; | ||
| 233 | + color: #374151; | ||
| 234 | + text-align: right; | ||
| 235 | +} | ||
| 236 | + | ||
| 237 | +:deep(.nut-textarea) { | ||
| 238 | + border: 1rpx solid #e5e7eb; | ||
| 239 | + border-radius: 16rpx; | ||
| 240 | + padding: 24rpx; | ||
| 241 | +} | ||
| 242 | + | ||
| 243 | +:deep(.nut-textarea__textarea) { | ||
| 244 | + font-size: 28rpx; | ||
| 245 | + color: #374151; | ||
| 246 | + line-height: 1.5; | ||
| 247 | +} | ||
| 248 | + | ||
| 249 | +:deep(.nut-uploader) { | ||
| 250 | + margin-bottom: 0; | ||
| 251 | +} | ||
| 252 | + | ||
| 253 | +:deep(.nut-uploader__preview) { | ||
| 254 | + margin-bottom: 0; | ||
| 255 | +} | ||
| 256 | + | ||
| 257 | +:deep(.nut-uploader__preview-img) { | ||
| 258 | + width: 160rpx; | ||
| 259 | + height: 160rpx; | ||
| 260 | + border-radius: 16rpx; | ||
| 261 | + object-fit: cover; | ||
| 262 | +} | ||
| 263 | + | ||
| 264 | +:deep(.nut-uploader__upload) { | ||
| 265 | + width: 160rpx; | ||
| 266 | + height: 160rpx; | ||
| 267 | +} | ||
| 268 | + | ||
| 269 | +:deep(.nut-uploader__input) { | ||
| 270 | + width: 100%; | ||
| 271 | + height: 100%; | ||
| 272 | +} | ||
| 273 | + | ||
| 274 | +:deep(.nut-uploader__preview-delete) { | ||
| 275 | + position: absolute; | ||
| 276 | + top: 8rpx; | ||
| 277 | + right: 8rpx; | ||
| 278 | + width: 32rpx; | ||
| 279 | + height: 32rpx; | ||
| 280 | + background-color: rgba(0, 0, 0, 0.6); | ||
| 281 | + border-radius: 50%; | ||
| 282 | + display: flex; | ||
| 283 | + align-items: center; | ||
| 284 | + justify-content: center; | ||
| 285 | + color: #ffffff; | ||
| 286 | + font-size: 20rpx; | ||
| 287 | +} | ||
| 288 | + | ||
| 289 | +:deep(.nut-picker__toolbar) { | ||
| 290 | + padding: 24rpx 32rpx; | ||
| 291 | +} | ||
| 292 | + | ||
| 293 | +:deep(.nut-picker__cancel) { | ||
| 294 | + color: #9ca3af; | ||
| 295 | +} | ||
| 296 | + | ||
| 297 | +:deep(.nut-picker__confirm) { | ||
| 298 | + color: #f97316; | ||
| 299 | +} | ||
| 300 | + | ||
| 301 | +:deep(.nut-picker__title) { | ||
| 302 | + font-size: 32rpx; | ||
| 303 | + font-weight: 600; | ||
| 304 | +} |
| ... | @@ -296,6 +296,7 @@ import { ref, reactive } from 'vue' | ... | @@ -296,6 +296,7 @@ import { ref, reactive } from 'vue' |
| 296 | import { Plus, Right, Location, RectLeft, Close } from '@nutui/icons-vue-taro' | 296 | import { Plus, Right, Location, RectLeft, Close } from '@nutui/icons-vue-taro' |
| 297 | import Taro from '@tarojs/taro' | 297 | import Taro from '@tarojs/taro' |
| 298 | // import BASE_URL from '@/utils/config'; | 298 | // import BASE_URL from '@/utils/config'; |
| 299 | +import './index.less' | ||
| 299 | 300 | ||
| 300 | const themeVars = ref({ | 301 | const themeVars = ref({ |
| 301 | navbarBackground: '#fb923c', | 302 | navbarBackground: '#fb923c', |
| ... | @@ -761,310 +762,3 @@ const validateForm = () => { | ... | @@ -761,310 +762,3 @@ const validateForm = () => { |
| 761 | return true | 762 | return true |
| 762 | } | 763 | } |
| 763 | </script> | 764 | </script> |
| 764 | - | ||
| 765 | -<style lang="less"> | ||
| 766 | -.sell-page { | ||
| 767 | - min-height: 100vh; | ||
| 768 | - background-color: #f5f5f5; | ||
| 769 | - padding-bottom: 120rpx; | ||
| 770 | -} | ||
| 771 | - | ||
| 772 | -.form-container { | ||
| 773 | - padding: 0 32rpx; | ||
| 774 | - margin-bottom: 2rem; | ||
| 775 | -} | ||
| 776 | - | ||
| 777 | -.form-section { | ||
| 778 | - background-color: #ffffff; | ||
| 779 | - border-radius: 24rpx; | ||
| 780 | - padding: 32rpx; | ||
| 781 | - margin: 24rpx 0; | ||
| 782 | -} | ||
| 783 | - | ||
| 784 | -.section-title { | ||
| 785 | - font-size: 32rpx; | ||
| 786 | - font-weight: 600; | ||
| 787 | - color: #111827; | ||
| 788 | - margin-bottom: 32rpx; | ||
| 789 | - display: block; | ||
| 790 | -} | ||
| 791 | - | ||
| 792 | -.upload-grid { | ||
| 793 | - display: grid; | ||
| 794 | - grid-template-columns: repeat(2, 1fr); | ||
| 795 | - gap: 32rpx; | ||
| 796 | - margin-top: 24rpx; | ||
| 797 | -} | ||
| 798 | - | ||
| 799 | -.upload-item { | ||
| 800 | - display: flex; | ||
| 801 | - flex-direction: column; | ||
| 802 | - align-items: center; | ||
| 803 | - gap: 16rpx; | ||
| 804 | -} | ||
| 805 | - | ||
| 806 | -.upload-button { | ||
| 807 | - width: 160rpx; | ||
| 808 | - height: 160rpx; | ||
| 809 | - border: 2rpx dashed #d1d5db; | ||
| 810 | - border-radius: 16rpx; | ||
| 811 | - display: flex; | ||
| 812 | - align-items: center; | ||
| 813 | - justify-content: center; | ||
| 814 | - background-color: #f9fafb; | ||
| 815 | - transition: all 0.3s ease; | ||
| 816 | -} | ||
| 817 | - | ||
| 818 | -.upload-button:active { | ||
| 819 | - background-color: #f3f4f6; | ||
| 820 | - border-color: #f97316; | ||
| 821 | -} | ||
| 822 | - | ||
| 823 | -.upload-icon { | ||
| 824 | - font-size: 48rpx; | ||
| 825 | - color: #9ca3af; | ||
| 826 | -} | ||
| 827 | - | ||
| 828 | -.upload-label { | ||
| 829 | - font-size: 24rpx; | ||
| 830 | - color: #6b7280; | ||
| 831 | - text-align: center; | ||
| 832 | -} | ||
| 833 | - | ||
| 834 | -.image-preview { | ||
| 835 | - position: relative; | ||
| 836 | - width: 160rpx; | ||
| 837 | - height: 160rpx; | ||
| 838 | - border-radius: 16rpx; | ||
| 839 | - overflow: hidden; | ||
| 840 | -} | ||
| 841 | - | ||
| 842 | -.preview-image { | ||
| 843 | - width: 100%; | ||
| 844 | - height: 100%; | ||
| 845 | - object-fit: cover; | ||
| 846 | -} | ||
| 847 | - | ||
| 848 | -.delete-btn { | ||
| 849 | - position: absolute; | ||
| 850 | - top: 8rpx; | ||
| 851 | - right: 8rpx; | ||
| 852 | - width: 32rpx; | ||
| 853 | - height: 32rpx; | ||
| 854 | - background-color: #ef4444; | ||
| 855 | - border-radius: 50%; | ||
| 856 | - display: flex; | ||
| 857 | - align-items: center; | ||
| 858 | - justify-content: center; | ||
| 859 | - color: white; | ||
| 860 | - font-size: 16rpx; | ||
| 861 | - z-index: 10; | ||
| 862 | - box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); | ||
| 863 | -} | ||
| 864 | - | ||
| 865 | -.delete-icon { | ||
| 866 | - font-size: 16rpx; | ||
| 867 | - color: white; | ||
| 868 | -} | ||
| 869 | - | ||
| 870 | -.form-item { | ||
| 871 | - display: flex; | ||
| 872 | - justify-content: space-between; | ||
| 873 | - align-items: center; | ||
| 874 | - padding: 32rpx 0; | ||
| 875 | - border-bottom: 1rpx solid #f3f4f6; | ||
| 876 | -} | ||
| 877 | - | ||
| 878 | -.form-item:last-child { | ||
| 879 | - border-bottom: none; | ||
| 880 | -} | ||
| 881 | - | ||
| 882 | -.form-item-left { | ||
| 883 | - display: flex; | ||
| 884 | - align-items: center; | ||
| 885 | -} | ||
| 886 | - | ||
| 887 | -.form-icon { | ||
| 888 | - margin-right: 16rpx; | ||
| 889 | - color: #9ca3af; | ||
| 890 | -} | ||
| 891 | - | ||
| 892 | -.form-label { | ||
| 893 | - font-size: 28rpx; | ||
| 894 | - color: #374151; | ||
| 895 | -} | ||
| 896 | - | ||
| 897 | -.form-item-right { | ||
| 898 | - display: flex; | ||
| 899 | - align-items: center; | ||
| 900 | -} | ||
| 901 | - | ||
| 902 | -.form-value { | ||
| 903 | - font-size: 28rpx; | ||
| 904 | - color: #9ca3af; | ||
| 905 | - margin-right: 16rpx; | ||
| 906 | -} | ||
| 907 | - | ||
| 908 | -.arrow-icon { | ||
| 909 | - color: #9ca3af; | ||
| 910 | -} | ||
| 911 | - | ||
| 912 | -.form-item-content { | ||
| 913 | - display: flex; | ||
| 914 | - justify-content: space-between; | ||
| 915 | - align-items: center; | ||
| 916 | - width: 100%; | ||
| 917 | - padding: 24rpx 0; | ||
| 918 | -} | ||
| 919 | - | ||
| 920 | -.unit { | ||
| 921 | - font-size: 28rpx; | ||
| 922 | - color: #9ca3af; | ||
| 923 | - margin-left: 16rpx; | ||
| 924 | -} | ||
| 925 | - | ||
| 926 | -.price-symbol { | ||
| 927 | - font-size: 32rpx; | ||
| 928 | - color: #f97316; | ||
| 929 | - font-weight: 600; | ||
| 930 | - margin-right: 8rpx; | ||
| 931 | -} | ||
| 932 | - | ||
| 933 | -.price-input { | ||
| 934 | - font-size: 32rpx; | ||
| 935 | - color: #f97316; | ||
| 936 | - font-weight: 600; | ||
| 937 | - text-align: right; | ||
| 938 | - border: none; | ||
| 939 | - outline: none; | ||
| 940 | - background: transparent; | ||
| 941 | - width: 160rpx; | ||
| 942 | -} | ||
| 943 | - | ||
| 944 | -.market-price-symbol { | ||
| 945 | - font-size: 28rpx; | ||
| 946 | - color: #9ca3af; | ||
| 947 | - margin-right: 8rpx; | ||
| 948 | -} | ||
| 949 | - | ||
| 950 | -.market-price-input { | ||
| 951 | - font-size: 28rpx; | ||
| 952 | - color: #9ca3af; | ||
| 953 | - text-align: right; | ||
| 954 | - border: none; | ||
| 955 | - outline: none; | ||
| 956 | - background: transparent; | ||
| 957 | - width: 160rpx; | ||
| 958 | -} | ||
| 959 | - | ||
| 960 | -.bottom-actions { | ||
| 961 | - position: fixed; | ||
| 962 | - bottom: 0; | ||
| 963 | - left: 0; | ||
| 964 | - right: 0; | ||
| 965 | - background-color: #ffffff; | ||
| 966 | - padding: 24rpx 32rpx; | ||
| 967 | - border-top: 1rpx solid #f3f4f6; | ||
| 968 | - z-index: 100; | ||
| 969 | -} | ||
| 970 | - | ||
| 971 | -// NutUI组件样式覆盖 | ||
| 972 | -:deep(.nut-form-item) { | ||
| 973 | - padding: 0; | ||
| 974 | - margin-bottom: 0; | ||
| 975 | - border-bottom: 1rpx solid #f3f4f6; | ||
| 976 | -} | ||
| 977 | - | ||
| 978 | -// :deep(.nut-form-item:last-child) { | ||
| 979 | -// border-bottom: none; | ||
| 980 | -// } | ||
| 981 | - | ||
| 982 | -:deep(.nut-form-item__body) { | ||
| 983 | - padding: 32rpx 0; | ||
| 984 | -} | ||
| 985 | - | ||
| 986 | -:deep(.nut-form-item__label) { | ||
| 987 | - font-size: 28rpx; | ||
| 988 | - color: #374151; | ||
| 989 | - margin-right: 32rpx; | ||
| 990 | -} | ||
| 991 | - | ||
| 992 | -:deep(.nut-input) { | ||
| 993 | - text-align: right; | ||
| 994 | -} | ||
| 995 | - | ||
| 996 | -:deep(.nut-input__input) { | ||
| 997 | - font-size: 28rpx; | ||
| 998 | - color: #374151; | ||
| 999 | - text-align: right; | ||
| 1000 | -} | ||
| 1001 | - | ||
| 1002 | -:deep(.nut-textarea) { | ||
| 1003 | - border: 1rpx solid #e5e7eb; | ||
| 1004 | - border-radius: 16rpx; | ||
| 1005 | - padding: 24rpx; | ||
| 1006 | -} | ||
| 1007 | - | ||
| 1008 | -:deep(.nut-textarea__textarea) { | ||
| 1009 | - font-size: 28rpx; | ||
| 1010 | - color: #374151; | ||
| 1011 | - line-height: 1.5; | ||
| 1012 | -} | ||
| 1013 | - | ||
| 1014 | -:deep(.nut-uploader) { | ||
| 1015 | - margin-bottom: 0; | ||
| 1016 | -} | ||
| 1017 | - | ||
| 1018 | -:deep(.nut-uploader__preview) { | ||
| 1019 | - margin-bottom: 0; | ||
| 1020 | -} | ||
| 1021 | - | ||
| 1022 | -:deep(.nut-uploader__preview-img) { | ||
| 1023 | - width: 160rpx; | ||
| 1024 | - height: 160rpx; | ||
| 1025 | - border-radius: 16rpx; | ||
| 1026 | - object-fit: cover; | ||
| 1027 | -} | ||
| 1028 | - | ||
| 1029 | -:deep(.nut-uploader__upload) { | ||
| 1030 | - width: 160rpx; | ||
| 1031 | - height: 160rpx; | ||
| 1032 | -} | ||
| 1033 | - | ||
| 1034 | -:deep(.nut-uploader__input) { | ||
| 1035 | - width: 100%; | ||
| 1036 | - height: 100%; | ||
| 1037 | -} | ||
| 1038 | - | ||
| 1039 | -:deep(.nut-uploader__preview-delete) { | ||
| 1040 | - position: absolute; | ||
| 1041 | - top: 8rpx; | ||
| 1042 | - right: 8rpx; | ||
| 1043 | - width: 32rpx; | ||
| 1044 | - height: 32rpx; | ||
| 1045 | - background-color: rgba(0, 0, 0, 0.6); | ||
| 1046 | - border-radius: 50%; | ||
| 1047 | - display: flex; | ||
| 1048 | - align-items: center; | ||
| 1049 | - justify-content: center; | ||
| 1050 | - color: #ffffff; | ||
| 1051 | - font-size: 20rpx; | ||
| 1052 | -} | ||
| 1053 | - | ||
| 1054 | -:deep(.nut-picker__toolbar) { | ||
| 1055 | - padding: 24rpx 32rpx; | ||
| 1056 | -} | ||
| 1057 | - | ||
| 1058 | -:deep(.nut-picker__cancel) { | ||
| 1059 | - color: #9ca3af; | ||
| 1060 | -} | ||
| 1061 | - | ||
| 1062 | -:deep(.nut-picker__confirm) { | ||
| 1063 | - color: #f97316; | ||
| 1064 | -} | ||
| 1065 | - | ||
| 1066 | -:deep(.nut-picker__title) { | ||
| 1067 | - font-size: 32rpx; | ||
| 1068 | - font-weight: 600; | ||
| 1069 | -} | ||
| 1070 | -</style> | ... | ... |
src/pages/setAuthCar/index.config.js
0 → 100755
| 1 | +/* | ||
| 2 | + * @Date: 2025-07-02 17:52:43 | ||
| 3 | + * @LastEditors: hookehuyr hookehuyr@gmail.com | ||
| 4 | + * @LastEditTime: 2025-07-02 17:53:28 | ||
| 5 | + * @FilePath: /jgdl/src/pages/setAuthCar/index.config.js | ||
| 6 | + * @Description: 文件描述 | ||
| 7 | + */ | ||
| 8 | +export default { | ||
| 9 | + navigationBarTitleText: '申请认证', | ||
| 10 | + usingComponents: { | ||
| 11 | + }, | ||
| 12 | +} |
src/pages/setAuthCar/index.less
0 → 100644
| 1 | +/* 申请认证页面样式 */ | ||
| 2 | +.auth-car-page { | ||
| 3 | + min-height: 100vh; | ||
| 4 | + background-color: #f5f5f5; | ||
| 5 | + padding-bottom: 200rpx; | ||
| 6 | +} | ||
| 7 | + | ||
| 8 | +.form-container { | ||
| 9 | + padding: 20rpx 32rpx; | ||
| 10 | + margin-bottom: 2rem; | ||
| 11 | +} | ||
| 12 | + | ||
| 13 | +.form-section { | ||
| 14 | + background-color: #ffffff; | ||
| 15 | + border-radius: 24rpx; | ||
| 16 | + padding: 32rpx; | ||
| 17 | + margin: 24rpx 0; | ||
| 18 | +} | ||
| 19 | + | ||
| 20 | +.section-title { | ||
| 21 | + font-size: 32rpx; | ||
| 22 | + font-weight: 600; | ||
| 23 | + color: #111827; | ||
| 24 | + margin-bottom: 32rpx; | ||
| 25 | + display: block; | ||
| 26 | +} | ||
| 27 | + | ||
| 28 | +.upload-grid { | ||
| 29 | + display: grid; | ||
| 30 | + grid-template-columns: repeat(2, 1fr); | ||
| 31 | + gap: 32rpx; | ||
| 32 | + margin-top: 24rpx; | ||
| 33 | +} | ||
| 34 | + | ||
| 35 | +.upload-item { | ||
| 36 | + display: flex; | ||
| 37 | + flex-direction: column; | ||
| 38 | + align-items: center; | ||
| 39 | + gap: 16rpx; | ||
| 40 | +} | ||
| 41 | + | ||
| 42 | +.upload-button { | ||
| 43 | + width: 160rpx; | ||
| 44 | + height: 160rpx; | ||
| 45 | + border: 2rpx dashed #d1d5db; | ||
| 46 | + border-radius: 16rpx; | ||
| 47 | + display: flex; | ||
| 48 | + align-items: center; | ||
| 49 | + justify-content: center; | ||
| 50 | + background-color: #f9fafb; | ||
| 51 | + transition: all 0.3s ease; | ||
| 52 | +} | ||
| 53 | + | ||
| 54 | +.upload-button:active { | ||
| 55 | + background-color: #f3f4f6; | ||
| 56 | + border-color: #f97316; | ||
| 57 | +} | ||
| 58 | + | ||
| 59 | +.upload-icon { | ||
| 60 | + font-size: 48rpx; | ||
| 61 | + color: #9ca3af; | ||
| 62 | +} | ||
| 63 | + | ||
| 64 | +.upload-label { | ||
| 65 | + font-size: 24rpx; | ||
| 66 | + color: #6b7280; | ||
| 67 | + text-align: center; | ||
| 68 | +} | ||
| 69 | + | ||
| 70 | +.image-preview { | ||
| 71 | + position: relative; | ||
| 72 | + width: 160rpx; | ||
| 73 | + height: 160rpx; | ||
| 74 | + border-radius: 16rpx; | ||
| 75 | + overflow: hidden; | ||
| 76 | +} | ||
| 77 | + | ||
| 78 | +.preview-image { | ||
| 79 | + width: 100%; | ||
| 80 | + height: 100%; | ||
| 81 | + object-fit: cover; | ||
| 82 | +} | ||
| 83 | + | ||
| 84 | +.delete-btn { | ||
| 85 | + position: absolute; | ||
| 86 | + top: 8rpx; | ||
| 87 | + right: 8rpx; | ||
| 88 | + width: 32rpx; | ||
| 89 | + height: 32rpx; | ||
| 90 | + background-color: #ef4444; | ||
| 91 | + border-radius: 50%; | ||
| 92 | + display: flex; | ||
| 93 | + align-items: center; | ||
| 94 | + justify-content: center; | ||
| 95 | + color: white; | ||
| 96 | + font-size: 16rpx; | ||
| 97 | + z-index: 10; | ||
| 98 | + box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15); | ||
| 99 | +} | ||
| 100 | + | ||
| 101 | +.delete-icon { | ||
| 102 | + font-size: 16rpx; | ||
| 103 | + color: white; | ||
| 104 | +} | ||
| 105 | + | ||
| 106 | +.form-item { | ||
| 107 | + display: flex; | ||
| 108 | + justify-content: space-between; | ||
| 109 | + align-items: center; | ||
| 110 | + padding: 32rpx 0; | ||
| 111 | + border-bottom: 1rpx solid #f3f4f6; | ||
| 112 | +} | ||
| 113 | + | ||
| 114 | +.form-item:last-child { | ||
| 115 | + border-bottom: none; | ||
| 116 | +} | ||
| 117 | + | ||
| 118 | +.form-item-left { | ||
| 119 | + display: flex; | ||
| 120 | + align-items: center; | ||
| 121 | +} | ||
| 122 | + | ||
| 123 | +.form-icon { | ||
| 124 | + margin-right: 16rpx; | ||
| 125 | + color: #9ca3af; | ||
| 126 | +} | ||
| 127 | + | ||
| 128 | +.form-label { | ||
| 129 | + font-size: 28rpx; | ||
| 130 | + color: #374151; | ||
| 131 | +} | ||
| 132 | + | ||
| 133 | +.form-item-right { | ||
| 134 | + display: flex; | ||
| 135 | + align-items: center; | ||
| 136 | +} | ||
| 137 | + | ||
| 138 | +.form-value { | ||
| 139 | + font-size: 28rpx; | ||
| 140 | + color: #9ca3af; | ||
| 141 | + margin-right: 16rpx; | ||
| 142 | +} | ||
| 143 | + | ||
| 144 | +.arrow-icon { | ||
| 145 | + color: #9ca3af; | ||
| 146 | +} | ||
| 147 | + | ||
| 148 | +.form-item-content { | ||
| 149 | + display: flex; | ||
| 150 | + justify-content: space-between; | ||
| 151 | + align-items: center; | ||
| 152 | + width: 100%; | ||
| 153 | + padding: 24rpx 0; | ||
| 154 | +} | ||
| 155 | + | ||
| 156 | +.unit { | ||
| 157 | + font-size: 28rpx; | ||
| 158 | + color: #9ca3af; | ||
| 159 | + margin-left: 16rpx; | ||
| 160 | +} | ||
| 161 | + | ||
| 162 | +.price-symbol { | ||
| 163 | + font-size: 32rpx; | ||
| 164 | + color: #f97316; | ||
| 165 | + font-weight: 600; | ||
| 166 | + margin-right: 8rpx; | ||
| 167 | +} | ||
| 168 | + | ||
| 169 | +.price-input { | ||
| 170 | + font-size: 32rpx; | ||
| 171 | + color: #f97316; | ||
| 172 | + font-weight: 600; | ||
| 173 | + text-align: right; | ||
| 174 | + border: none; | ||
| 175 | + outline: none; | ||
| 176 | + background: transparent; | ||
| 177 | + width: 160rpx; | ||
| 178 | +} | ||
| 179 | + | ||
| 180 | +.market-price-symbol { | ||
| 181 | + font-size: 28rpx; | ||
| 182 | + color: #9ca3af; | ||
| 183 | + margin-right: 8rpx; | ||
| 184 | +} | ||
| 185 | + | ||
| 186 | +.market-price-input { | ||
| 187 | + font-size: 28rpx; | ||
| 188 | + color: #9ca3af; | ||
| 189 | + text-align: right; | ||
| 190 | + border: none; | ||
| 191 | + outline: none; | ||
| 192 | + background: transparent; | ||
| 193 | + width: 160rpx; | ||
| 194 | +} | ||
| 195 | + | ||
| 196 | +.bottom-actions { | ||
| 197 | + position: fixed; | ||
| 198 | + bottom: 0; | ||
| 199 | + left: 0; | ||
| 200 | + right: 0; | ||
| 201 | + background-color: #ffffff; | ||
| 202 | + padding: 24rpx 32rpx; | ||
| 203 | + border-top: 1rpx solid #f3f4f6; | ||
| 204 | + z-index: 100; | ||
| 205 | +} | ||
| 206 | + | ||
| 207 | +// NutUI组件样式覆盖 | ||
| 208 | +:deep(.nut-form-item) { | ||
| 209 | + padding: 0; | ||
| 210 | + margin-bottom: 0; | ||
| 211 | + border-bottom: 1rpx solid #f3f4f6; | ||
| 212 | +} | ||
| 213 | + | ||
| 214 | +// :deep(.nut-form-item:last-child) { | ||
| 215 | +// border-bottom: none; | ||
| 216 | +// } | ||
| 217 | + | ||
| 218 | +:deep(.nut-form-item__body) { | ||
| 219 | + padding: 32rpx 0; | ||
| 220 | +} | ||
| 221 | + | ||
| 222 | +:deep(.nut-form-item__label) { | ||
| 223 | + font-size: 28rpx; | ||
| 224 | + color: #374151; | ||
| 225 | + margin-right: 32rpx; | ||
| 226 | +} | ||
| 227 | + | ||
| 228 | +:deep(.nut-input) { | ||
| 229 | + text-align: right; | ||
| 230 | +} | ||
| 231 | + | ||
| 232 | +:deep(.nut-input__input) { | ||
| 233 | + font-size: 28rpx; | ||
| 234 | + color: #374151; | ||
| 235 | + text-align: right; | ||
| 236 | +} | ||
| 237 | + | ||
| 238 | +:deep(.nut-textarea) { | ||
| 239 | + border: 1rpx solid #e5e7eb; | ||
| 240 | + border-radius: 16rpx; | ||
| 241 | + padding: 24rpx; | ||
| 242 | +} | ||
| 243 | + | ||
| 244 | +:deep(.nut-textarea__textarea) { | ||
| 245 | + font-size: 28rpx; | ||
| 246 | + color: #374151; | ||
| 247 | + line-height: 1.5; | ||
| 248 | +} | ||
| 249 | + | ||
| 250 | +:deep(.nut-uploader) { | ||
| 251 | + margin-bottom: 0; | ||
| 252 | +} | ||
| 253 | + | ||
| 254 | +:deep(.nut-uploader__preview) { | ||
| 255 | + margin-bottom: 0; | ||
| 256 | +} | ||
| 257 | + | ||
| 258 | +:deep(.nut-uploader__preview-img) { | ||
| 259 | + width: 160rpx; | ||
| 260 | + height: 160rpx; | ||
| 261 | + border-radius: 16rpx; | ||
| 262 | + object-fit: cover; | ||
| 263 | +} | ||
| 264 | + | ||
| 265 | +:deep(.nut-uploader__upload) { | ||
| 266 | + width: 160rpx; | ||
| 267 | + height: 160rpx; | ||
| 268 | +} | ||
| 269 | + | ||
| 270 | +:deep(.nut-uploader__input) { | ||
| 271 | + width: 100%; | ||
| 272 | + height: 100%; | ||
| 273 | +} | ||
| 274 | + | ||
| 275 | +:deep(.nut-uploader__preview-delete) { | ||
| 276 | + position: absolute; | ||
| 277 | + top: 8rpx; | ||
| 278 | + right: 8rpx; | ||
| 279 | + width: 32rpx; | ||
| 280 | + height: 32rpx; | ||
| 281 | + background-color: rgba(0, 0, 0, 0.6); | ||
| 282 | + border-radius: 50%; | ||
| 283 | + display: flex; | ||
| 284 | + align-items: center; | ||
| 285 | + justify-content: center; | ||
| 286 | + color: #ffffff; | ||
| 287 | + font-size: 20rpx; | ||
| 288 | +} | ||
| 289 | + | ||
| 290 | +:deep(.nut-picker__toolbar) { | ||
| 291 | + padding: 24rpx 32rpx; | ||
| 292 | +} | ||
| 293 | + | ||
| 294 | +:deep(.nut-picker__cancel) { | ||
| 295 | + color: #9ca3af; | ||
| 296 | +} | ||
| 297 | + | ||
| 298 | +:deep(.nut-picker__confirm) { | ||
| 299 | + color: #f97316; | ||
| 300 | +} | ||
| 301 | + | ||
| 302 | +:deep(.nut-picker__title) { | ||
| 303 | + font-size: 32rpx; | ||
| 304 | + font-weight: 600; | ||
| 305 | +} |
src/pages/setAuthCar/index.vue
0 → 100644
This diff is collapsed. Click to expand it.
-
Please register or login to post a comment