修改问题

package-lock.json

@@ -21,6 +21,7 @@
         "terser": "^5.17.6",
         "umi-request": "^1.4.0",
         "vant": "^4.1.2",
+        "vconsole": "^3.15.0",
         "vue": "^3.2.47",
         "vue-router": "^4.1.6",
         "vue3-lottie": "^2.7.0"
@@ -1652,7 +1653,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "dependencies": {
         "regenerator-runtime": "^0.13.11"
       },
@@ -3524,6 +3524,14 @@
         "is-what": "^3.14.1"
       }
     },
+    "node_modules/copy-text-to-clipboard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng==",
+      "engines": {
+        "node": ">=12"
+      }
+    },
     "node_modules/core-js": {
       "version": "3.30.2",
       "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.30.2.tgz",
@@ -5869,6 +5877,11 @@
       "integrity": "sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==",
       "dev": true
     },
+    "node_modules/mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
+    },
     "node_modules/mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmmirror.com/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -6746,8 +6759,7 @@
     "node_modules/regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "node_modules/regenerator-transform": {
       "version": "0.15.1",
@@ -7600,6 +7612,17 @@
         "vue": "^3.0.0"
       }
     },
+    "node_modules/vconsole": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.0.tgz",
+      "integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
     "node_modules/vite": {
       "version": "4.3.1",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.3.1.tgz",
@@ -9316,7 +9339,6 @@
       "version": "7.21.0",
       "resolved": "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.21.0.tgz",
       "integrity": "sha512-xwII0//EObnq89Ji5AKYQaRYiW/nZ3llSv29d49IuxPhKbtJoLP+9QUUZ4nVragQVtaVGeZrpB+ZtG/Pdy/POw==",
-      "dev": true,
       "requires": {
         "regenerator-runtime": "^0.13.11"
       }
@@ -10691,6 +10713,11 @@
         "is-what": "^3.14.1"
       }
     },
+    "copy-text-to-clipboard": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmmirror.com/copy-text-to-clipboard/-/copy-text-to-clipboard-3.1.0.tgz",
+      "integrity": "sha512-PFM6BnjLnOON/lB3ta/Jg7Ywsv+l9kQGD4TWDCSlRBGmqnnTM5MrDkhAFgw+8HZt0wW6Q2BBE4cmy9sq+s9Qng=="
+    },
     "core-js": {
       "version": "3.30.2",
       "resolved": "https://registry.npmmirror.com/core-js/-/core-js-3.30.2.tgz",
@@ -12537,6 +12564,11 @@
       "integrity": "sha512-YVE1mIJ4VpUMqZObFndk9CJu6DBJR/GB13p3tXuNbwD4XExaI5EOuRl6BHeIDxIqXZVxSfAC+y6U1Z/IxCfKUg==",
       "dev": true
     },
+    "mutation-observer": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmmirror.com/mutation-observer/-/mutation-observer-1.0.3.tgz",
+      "integrity": "sha512-M/O/4rF2h776hV7qGMZUH3utZLO/jK7p8rnNgGkjKUw8zCGjRQPxB8z6+5l8+VjRUQ3dNYu4vjqXYLr+U8ZVNA=="
+    },
     "mute-stream": {
       "version": "0.0.8",
       "resolved": "https://registry.npmmirror.com/mute-stream/-/mute-stream-0.0.8.tgz",
@@ -13231,8 +13263,7 @@
     "regenerator-runtime": {
       "version": "0.13.11",
       "resolved": "https://registry.npmmirror.com/regenerator-runtime/-/regenerator-runtime-0.13.11.tgz",
-      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==",
-      "dev": true
+      "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="
     },
     "regenerator-transform": {
       "version": "0.15.1",
@@ -13902,6 +13933,17 @@
         "@vant/use": "^1.5.1"
       }
     },
+    "vconsole": {
+      "version": "3.15.0",
+      "resolved": "https://registry.npmmirror.com/vconsole/-/vconsole-3.15.0.tgz",
+      "integrity": "sha512-8hq7wabPcRucSWQyN7/1tthMawP9JPvM95zgtMHpPknMMMCKj+abpoK7P7oKK4B0qw58C24Mdvo9+raUdpHyVQ==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "copy-text-to-clipboard": "^3.0.1",
+        "core-js": "^3.11.0",
+        "mutation-observer": "^1.0.3"
+      }
+    },
     "vite": {
       "version": "4.3.1",
       "resolved": "https://registry.npmmirror.com/vite/-/vite-4.3.1.tgz",

package.json

@@ -34,6 +34,7 @@
     "terser": "^5.17.6",
     "umi-request": "^1.4.0",
     "vant": "^4.1.2",
+    "vconsole": "^3.15.0",
     "vue": "^3.2.47",
     "vue-router": "^4.1.6",
     "vue3-lottie": "^2.7.0"

src/main.ts

@@ -31,6 +31,9 @@ postMessage({ api: 'getNavHeight' }, (res: any) => {
   }
 });
 
+import Vconsole from 'vconsole';
+const vconsole = new Vconsole();
+
 const app = createApp(App);
 
 dayjs.locale('zh-ch');

src/views/activity-record/detail.module.less

@@ -119,8 +119,9 @@
 
   .photo {
     position: relative;
-    width: 76px;
-    height: 76px;
+    width: 76px !important;
+    height: 76px !important;
+    margin-top: 0 !important;
 
     &+.photo {
       margin-left: 7px;

src/views/activity-record/skeletion-detail-modal.tsx

@@ -1,10 +1,4 @@
-import {
-  Cell,
-  CellGroup,
-  Skeleton,
-  SkeletonImage,
-  SkeletonParagraph
-} from 'vant';
+import { Cell, CellGroup, Skeleton, SkeletonParagraph } from 'vant';
 import { defineComponent, onMounted, reactive, watch } from 'vue';
 import styles from './detail.module.less';
 
@@ -79,10 +73,10 @@ export default defineComponent({
                       <SkeletonParagraph class={styles.item} rowWidth={'90%'} />
                       <SkeletonParagraph class={styles.item} rowWidth={'90%'} />
                       <div class={styles.photoList}>
-                        <SkeletonImage class={styles.photo} />
-                        <SkeletonImage class={styles.photo} />
-                        <SkeletonImage class={styles.photo} />
-                        <SkeletonImage class={styles.photo} />
+                        <SkeletonParagraph class={styles.photo} />
+                        <SkeletonParagraph class={styles.photo} />
+                        <SkeletonParagraph class={styles.photo} />
+                        <SkeletonParagraph class={styles.photo} />
                       </div>
                     </Cell>
                   </CellGroup>

src/views/lesson-list/components/skeleton-component-modal.tsx

@@ -1,10 +1,4 @@
-import {
-  Cell,
-  CellGroup,
-  Skeleton,
-  SkeletonImage,
-  SkeletonParagraph
-} from 'vant';
+import { Cell, Skeleton, SkeletonAvatar, SkeletonParagraph } from 'vant';
 import { defineComponent, onMounted, reactive, watch } from 'vue';
 import styles from './component.module.less';
 
@@ -50,7 +44,7 @@ export default defineComponent({
                   {{
                     icon: () => (
                       <div class={styles.iconGroup}>
-                        <SkeletonImage class={styles.iconStudent} />
+                        <SkeletonAvatar class={styles.iconStudent} />
                       </div>
                     ),
                     title: () => (

src/views/lesson-list/skeleton-index-modal.tsx

@@ -2,7 +2,7 @@ import {
   Cell,
   CellGroup,
   Skeleton,
-  SkeletonImage,
+  SkeletonAvatar,
   SkeletonParagraph
 } from 'vant';
 import { defineComponent, onMounted, reactive, watch } from 'vue';
@@ -55,7 +55,7 @@ export default defineComponent({
                   </Cell>
                   <Cell center border={false} valueClass={styles.skeletonClass}>
                     {{
-                      icon: () => <SkeletonImage class={styles.iconStudent} />,
+                      icon: () => <SkeletonAvatar class={styles.iconStudent} />,
                       title: () => (
                         <div class={styles.userInfo}>
                           <SkeletonParagraph

src/views/mass-message/components/contacts.tsx

@@ -81,7 +81,7 @@ export default defineComponent({
     const onToggle = (index: number) => {
       //
       checkboxRefs.value[index].toggle();
-
+      console.log(forms.list, forms.check, 'forms.check');
       const list: any = [];
       forms.list.forEach((item: any) => {
         if (forms.check.includes(item.id)) {
@@ -127,7 +127,12 @@ export default defineComponent({
     const getList = async () => {
       try {
         const { data } = await request.post(
-          '/api-web/imGroup/schoolQueryFriendList'
+          '/api-web/imGroup/schoolQueryFriendList',
+          {
+            data: {
+              lockFlag: false
+            }
+          }
         );
         forms.list = data || [];
       } catch {
@@ -193,6 +198,8 @@ export default defineComponent({
                       ref={e => (checkboxRefs.value[index] = e)}
                       onClick={(e: MouseEvent) => {
                         e.stopPropagation();
+                        e.stopPropagation();
+                        onToggle(index);
                       }}
                       v-slots={{
                         icon: (props: any) => (

src/views/mass-message/components/group-chat.tsx

@@ -153,7 +153,9 @@ export default defineComponent({
                       name={item.id}
                       ref={e => (checkboxRefs.value[index] = e)}
                       onClick={(e: MouseEvent) => {
+                        e.preventDefault();
                         e.stopPropagation();
+                        onToggle(index);
                       }}
                       v-slots={{
                         icon: (props: any) => (

src/views/mass-message/index.module.less

@@ -91,6 +91,14 @@
   }
 }
 
+.sendObjPlaceholder {
+  :global {
+    .van-field__label {
+      flex: 1;
+    }
+  }
+}
+
 .popupCell {
   padding: 15px 20px;
 

src/views/mass-message/index.tsx

@@ -54,7 +54,7 @@ export default defineComponent({
           );
           tempClass.splice(sIndex, 1);
         } else if (item.receiveType === 'CONTACTS') {
-          const tempSchool = selectList.contcats || [];
+          const tempSchool = selectList.contacts || [];
           const sIndex = tempSchool.findIndex(
             (child: any) => child.id === item.receiveId
           );
@@ -90,14 +90,12 @@ export default defineComponent({
       return true;
     };
     const onSubmit = async () => {
-      console.log('onSubmit');
       const targetIds = forms.selectObject.groupChat.map(
         (item: any) => item.id
       );
       const userTargetIds = forms.selectObject.contacts.map(
         (item: any) => item.id
       );
-      console.log(targetIds, userTargetIds);
       try {
         if (!checkForms()) return;
         await request.post('/api-web/imSendGroupMessage/schoolSend', {
@@ -206,7 +204,7 @@ export default defineComponent({
                           src={formatterImage(item.roleType)}
                           class={[
                             styles.iconBadge,
-                            item.roleType === 'SCHOOL_LEADER'
+                            item.roleType === 'SCHOOLMASTER'
                               ? styles.iconBadge2
                               : ''
                           ]}

src/views/mass-message/select-send.tsx

@@ -36,6 +36,7 @@ export default defineComponent({
         contacts: state.selectContacts
       };
       emit('close');
+      console.log(params, 'selectSend');
       emit('update:selectObject', params);
       emit('confirm', params);
     };
@@ -43,7 +44,6 @@ export default defineComponent({
     watch(
       () => props.selectObject,
       () => {
-        console.log('watch', props.selectObject);
         resetSelectItems();
       },
       { deep: true }

src/views/patrol-evaluation/detail-list.tsx

@@ -13,7 +13,7 @@ import {
   Tag,
   showToast
 } from 'vant';
-import { defineComponent, onMounted, reactive, watch } from 'vue';
+import { defineComponent, onMounted, reactive, ref, watch } from 'vue';
 import styles from './detail.module.less';
 import iconTimer from '@/common/images/icon-timer.png';
 import iconTeacher from '@/common/images/icon-teacher-default.png';
@@ -84,6 +84,8 @@ export default defineComponent({
       list: []
     });
 
+    const list = ref([] as any[]);
+
     const onRefresh = () => {
       forms.params.page = 1;
       getList();
@@ -100,11 +102,50 @@ export default defineComponent({
           }
         );
         const result = data || {};
+
+        // 格式化数据
+        const rows = result.rows || [];
+
+        rows.forEach((row: any) => {
+          const attachmentUrlList = row.attachmentUrl
+            ? row.attachmentUrl.split(',')
+            : [];
+          const problemTypeList = row.problemType
+            ? row.problemType.split(',')
+            : [];
+
+          row.problemTypeList = problemTypeList;
+          // 级别
+          row.submitEvaluateStatus = row.evaluateStatus || '';
+          // 问题类型
+          row.submitProblemType = problemTypeList || [];
+          row.submitProblemDesc = row.problemDesc || '';
+          // 图片和视屏
+          row.submitVideoList = [];
+          row.submitImgList = [];
+          attachmentUrlList.forEach((url: any) => {
+            // 判断是否是图片
+            if (checkFile(url, 'image')) {
+              row.submitImgList.push(url);
+            } else {
+              row.submitVideoList.push(url);
+            }
+            // 判断是否是视频
+          });
+
+          row.attachmentUrlList = attachmentUrlList || [];
+
+          // 判断是否评价，如果有评价则直接显示评价内容
+          if (!row.evaluateFlag) {
+            row.isEdit = true;
+          }
+        });
+
         // 判断是否有数据
         if (forms.listState.refreshing) {
-          forms.list = result.rows || [];
+          list.value = rows || [];
         } else {
-          forms.list = forms.list.concat(result.rows || []);
+          list.value = list.value.concat(rows || []);
         }
 
         forms.listState.finished = result.pageNo >= result.totalPage;
@@ -112,7 +153,7 @@ export default defineComponent({
       } catch {
         forms.listState.finished = true;
       } finally {
-        forms.listState.dataShow = forms.list.length > 0;
+        forms.listState.dataShow = list.value.length > 0;
         forms.listState.refreshing = false;
         forms.listState.loading = false;
         forms.isClick = false;
@@ -174,7 +215,7 @@ export default defineComponent({
           });
         }
 
-        forms.list = [];
+        list.value = [];
         onRefresh();
       } catch {
         //
@@ -215,7 +256,7 @@ export default defineComponent({
         forms.params.evaluateStatus = props.evaluateStatus;
         forms.params.problemType = props.problemType;
         forms.params.courseType = props.courseType;
-        forms.list = [];
+        list.value = [];
         onRefresh();
       }
     );
@@ -236,36 +277,7 @@ export default defineComponent({
               offset={100}
               immediateCheck={false}>
               {forms.listState.dataShow ? (
-                forms.list.map((item: any) => {
-                  const attachmentUrlList = item.attachmentUrl
-                    ? item.attachmentUrl.split(',')
-                    : [];
-                  const problemTypeList = item.problemType
-                    ? item.problemType.split(',')
-                    : [];
-
-                  // 级别
-                  item.submitEvaluateStatus = item.evaluateStatus || '';
-                  // 问题类型
-                  item.submitProblemType = problemTypeList || [];
-                  item.submitProblemDesc = item.problemDesc || '';
-                  // 图片和视屏
-                  item.submitVideoList = [];
-                  item.submitImgList = [];
-                  attachmentUrlList.forEach((url: any) => {
-                    // 判断是否是图片
-                    if (checkFile(url, 'image')) {
-                      item.submitImgList.push(url);
-                    } else {
-                      item.submitVideoList.push(url);
-                    }
-                    // 判断是否是视频
-                  });
-
-                  // 判断是否评价，如果有评价则直接显示评价内容
-                  if (!item.evaluateFlag) {
-                    item.isEdit = true;
-                  }
+                list.value.map((item: any) => {
                   return (
                     <CellGroup inset class={styles.cellGroup}>
                       <Cell center class={styles.timerCell} border={false}>
@@ -336,7 +348,7 @@ export default defineComponent({
                           ),
                           value: () => (
                             <div class={styles.photoList}>
-                              {attachmentUrlList.map(
+                              {item.attachmentUrlList.map(
                                 (file: string, index: number) =>
                                   index < 3 && (
                                     <div
@@ -344,7 +356,10 @@ export default defineComponent({
                                       onClick={(e: MouseEvent) => {
                                         e.stopPropagation();
                                         e.preventDefault();
-                                        onShowPreView(attachmentUrlList, index);
+                                        onShowPreView(
+                                          item.attachmentUrlList,
+                                          index
+                                        );
                                       }}>
                                       {checkFile(file, 'image') ? (
                                         <Image
@@ -360,10 +375,10 @@ export default defineComponent({
                                       )}
 
                                       {/* 判断是否大于三个 */}
-                                      {attachmentUrlList.length > 3 &&
+                                      {item.attachmentUrlList.length > 3 &&
                                       index === 2 ? (
                                         <div class={styles.photoMore}>
-                                          +{attachmentUrlList.length - 3}
+                                          +{item.attachmentUrlList.length - 3}
                                         </div>
                                       ) : (
                                         ''
@@ -377,12 +392,13 @@ export default defineComponent({
                       </Cell>
 
                       {/* 展示结果 */}
-                      {(problemTypeList.length > 0 || item.problemDesc) &&
+                      {(item.submitProblemType.length > 0 ||
+                        item.problemDesc) &&
                       !item.isEdit ? (
                         <Cell center class={styles.resultCell}>
-                          {problemTypeList.length > 0 ? (
+                          {item.problemTypeList.length > 0 ? (
                             <div class={styles.typeGroup}>
-                              {problemTypeList.map((type: string) => (
+                              {item.problemTypeList.map((type: string) => (
                                 <Tag type="primary" plain>
                                   {problemType[type]}
                                 </Tag>

src/views/patrol-evaluation/detail.module.less

@@ -175,8 +175,9 @@
 
 .photo {
   position: relative;
-  width: 44px;
-  height: 44px;
+  width: 44px !important;
+  height: 44px !important;
+  margin-top: 0 !important;
 
   &+.photo {
     margin-left: 4px;

src/views/patrol-evaluation/skeletion-detail.modal.tsx

@@ -3,7 +3,6 @@ import {
   CellGroup,
   Skeleton,
   SkeletonAvatar,
-  SkeletonImage,
   SkeletonParagraph
 } from 'vant';
 import { defineComponent, onMounted, reactive, watch } from 'vue';
@@ -69,7 +68,7 @@ export default defineComponent({
                   </Cell>
                   <Cell center class={styles.usernameCell}>
                     {{
-                      icon: () => <SkeletonImage class={styles.iconTeacher} />,
+                      icon: () => <SkeletonAvatar class={styles.iconTeacher} />,
                       title: () => (
                         <div>
                           <div class={styles.classname}>
@@ -82,9 +81,9 @@ export default defineComponent({
                       ),
                       value: () => (
                         <div class={styles.photoList}>
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
                         </div>
                       )
                     }}

src/views/schedule-manage/skeletion-item.tsx

@@ -1,12 +1,6 @@
 import { PropType, defineComponent } from 'vue';
 import styles from './index.module.less';
-import {
-  Cell,
-  Image,
-  SkeletonAvatar,
-  SkeletonImage,
-  SkeletonParagraph
-} from 'vant';
+import { Cell, SkeletonAvatar, SkeletonParagraph } from 'vant';
 
 export default defineComponent({
   name: 'schedule-manage-list-item',
@@ -23,15 +17,12 @@ export default defineComponent({
         <div class={styles.itemTop}>
           <SkeletonParagraph />
         </div>
-        <Cell
-          center
-          isLink
-          onClick={() => emit('goto')}>
+        <Cell center isLink onClick={() => emit('goto')}>
           {{
             icon: () => <SkeletonAvatar avatarSize={'1.28rem'} />,
             title: () => <SkeletonParagraph rowWidth="50%" />,
             label: () => <SkeletonParagraph rowWidth="30%" />,
-            value: () => <SkeletonParagraph />,
+            value: () => <SkeletonParagraph />
           }}
         </Cell>
       </div>

src/views/site-management/index.module.less

@@ -131,8 +131,9 @@
 
   .photo {
     position: relative;
-    width: 46px;
-    height: 46px;
+    width: 46px !important;
+    height: 46px !important;
+    margin-top: 0;
 
     &+.photo {
       margin-left: 6px;

src/views/site-management/skeleton-modal.tsx

@@ -3,7 +3,6 @@ import {
   CellGroup,
   Skeleton,
   SkeletonAvatar,
-  SkeletonImage,
   SkeletonParagraph
 } from 'vant';
 import { defineComponent, onMounted, reactive, watch } from 'vue';
@@ -95,9 +94,9 @@ export default defineComponent({
                           />
                         </h3>
                         <div class={styles.photoList}>
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
                         </div>
                       </div>
                       <div class={[styles.photoDown, styles.showPhoto]}>
@@ -108,9 +107,9 @@ export default defineComponent({
                           />
                         </h3>
                         <div class={styles.photoList}>
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
-                          <SkeletonImage class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
+                          <SkeletonParagraph class={styles.photo} />
                         </div>
                       </div>
                     </div>