hookehuyr

fix: 修复NutUI图标字体样式并添加图片预览关闭事件

为NutUI图标添加正确的字体样式修复,同时在多个页面的图片预览组件中添加关闭事件处理函数,确保预览关闭时状态正确更新。修复Taro样式文件导入路径错误。
......@@ -3,13 +3,13 @@
@tailwind utilities;
/* 修复 NutUI 图标字体样式 */
// .nut-icon {
// font-style: normal !important;
// font-weight: normal !important;
// }
.nut-icon {
font-style: normal !important;
font-weight: normal !important;
}
/* 修复所有可能的图标字体 */
// [class*="nut-icon"] {
// font-style: normal !important;
// font-weight: normal !important;
// }
[class*="nut-icon"] {
font-style: normal !important;
font-weight: normal !important;
}
......
......@@ -155,6 +155,7 @@
<nut-image-preview
v-model:show="avatarPreviewVisible"
:images="[formData.avatar || defaultAvatar]"
@close="closePreview"
/>
<!-- 成功提示 -->
......@@ -199,6 +200,10 @@ const schoolPickerVisible = ref(false)
const avatarPreviewVisible = ref(false)
const toastVisible = ref(false)
const closePreview = () => {
avatarPreviewVisible.value = false
}
// 手机号相关
const newPhone = ref('')
const verifyCode = ref('')
......
<!--
* @Date: 2025-06-28 10:33:00
* @LastEditors: hookehuyr hookehuyr@gmail.com
* @LastEditTime: 2025-07-02 17:18:10
* @LastEditTime: 2025-07-02 20:49:05
* @FilePath: /jgdl/src/pages/index/index.vue
* @Description: 捡个电驴首页
-->
......@@ -159,7 +159,7 @@
<script setup>
import Taro from '@tarojs/taro'
// import '@tarojs/taro/html.css' 和 nutui组件居然有冲突?
import '@tarojs/taro/html5.css' //和 nutui组件居然有冲突?
import { ref, onMounted } from 'vue'
import { useDidShow, useReady } from '@tarojs/taro'
import { Clock, Star, RectRight, Addfollow, HeartFill, Check, Search2, Shop } from '@nutui/icons-vue-taro'
......
......@@ -127,6 +127,7 @@
<nut-image-preview
v-model:show="avatarPreviewVisible"
:images="[formData.avatar || defaultAvatar]"
@close="closePreview"
/>
<!-- 成功提示 -->
......@@ -172,6 +173,10 @@ const toastVisible = ref(false)
const toastMessage = ref('')
const toastType = ref('success')
const closePreview = () => {
avatarPreviewVisible.value = false
}
// 验证码相关
const codeCountdown = ref(0)
const isRegistering = ref(false)
......
......@@ -83,7 +83,7 @@
</view>
<!-- 图片预览组件 -->
<nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" />
<nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" @close="closePreview" />
</view>
<!-- 所在学校 -->
......@@ -322,6 +322,10 @@ const previewVisible = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)
const closePreview = () => {
previewVisible.value = false
}
// 表单数据
const formData = reactive({
school: '',
......
......@@ -79,7 +79,7 @@
</view>
<!-- 图片预览组件 -->
<nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" />
<nut-image-preview v-model:show="previewVisible" :images="previewImages" :init-no="previewIndex" @close="closePreview" />
</view>
<!-- 车辆详情表单 -->
......@@ -172,6 +172,10 @@ const previewVisible = ref(false)
const previewImages = ref([])
const previewIndex = ref(0)
const closePreview = () => {
previewVisible.value = false
}
// 表单数据
const formData = reactive({
brand: '',
......