From 20564f42fb2d4bcf82e471e53fe621fe0adb60d2 Mon Sep 17 00:00:00 2001
From: king <2229249788@qq.com>
Date: Wed, 30 Aug 2023 14:56:11 +0800
Subject: [PATCH 1/2] =?UTF-8?q?=E4=BF=AE=E6=94=B9=E9=A1=B5=E9=9D=A2?=
 =?UTF-8?q?=E7=BA=A7=E5=8A=A0=E8=BD=BD=20=E5=92=8C=20=E5=9B=BE=E7=89=87?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/image/image.module.scss        | 12 +++++
 src/components/image/image.tsx                | 51 +++++++++++--------
 src/components/spinner/index.tsx              | 50 +++++++++---------
 src/components/spinner/style.scss             | 14 ++++-
 src/pages/business/videoInfo/videoInfo.scss   |  6 +--
 src/pages/business/videoInfo/videoInfo.tsx    | 24 +++++----
 .../home/components/feature_recommended.tsx   |  4 +-
 src/pages/home/home.module.scss               |  2 +-
 src/pages/preview/health/health.tsx           | 13 +++--
 src/pages/preview/illness/sort/sort.tsx       | 35 +++++++++----
 src/pages/preview/profession/profession.tsx   | 23 ++++++---
 11 files changed, 145 insertions(+), 89 deletions(-)
 create mode 100644 src/components/image/image.module.scss

diff --git a/src/components/image/image.module.scss b/src/components/image/image.module.scss
new file mode 100644
index 0000000..44a776b
--- /dev/null
+++ b/src/components/image/image.module.scss
@@ -0,0 +1,12 @@
+.imgBox {
+  position: relative;
+}
+
+.imgError {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  margin: auto;
+}
diff --git a/src/components/image/image.tsx b/src/components/image/image.tsx
index 4297130..9651106 100644
--- a/src/components/image/image.tsx
+++ b/src/components/image/image.tsx
@@ -1,7 +1,8 @@
 import {FC, useEffect, useState} from "react";
 import {Image, ImageProps, View} from "@tarojs/components";
-import {AtActivityIndicator} from "taro-ui";
 import shard from '@/static/img/shard.png'
+import styles from './image.module.scss'
+import Taro from "@tarojs/taro";
 
 interface Props extends ImageProps {
   width: number
@@ -13,14 +14,12 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
   const [isError, setIsError] = useState(false)
   const [loading, setLoading] = useState(true)
 
+  const imgAnimation = Taro.createAnimation({duration: 0}).opacity(0).step()
+  const [animationData, setAnimationData] = useState<TaroGeneral.IAnyObject>(imgAnimation.export())
+
   useEffect(() => {
-    if (!src) {
-      setIsError(true)
-      setLoading(false)
-    } else {
-      setIsError(false)
-      setLoading(false)
-    }
+    setIsError(!src)
+    setLoading(!!src)
   }, [src])
 
   // 图片加载失败
@@ -32,25 +31,37 @@ const Img: FC<Props> = ({src, mode = 'aspectFill', width, height, fallback = sha
   function onLoadHandler() {
     setLoading(false)
     setIsError(false)
+    imgAnimation.opacity(1).step({duration: 200})
+    setAnimationData(imgAnimation.export())
   }
 
   return (
-    <View style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: '#eee'}}>
+    <View
+      style={{width: `${width}rpx`, height: `${height}rpx`, backgroundColor: '#F8F8F8'}}
+      className={`${props.className} ${styles.imgBox}`}>
       {!isError &&
-        <Image
-          {...props}
-          src={src}
-          mode={mode}
-          lazyLoad
-          style={{width: `${width}rpx`, height: `${height}rpx`}}
-          onError={onErrorHandler}
-          onLoad={onLoadHandler}>
-        </Image>
+        <View animation={animationData}>
+          <Image
+            {...props}
+            src={src}
+            mode={mode}
+            lazyLoad
+            fadeIn
+            defaultSource={fallback}
+            style={{width: `${width}rpx`, height: `${height}rpx`}}
+            onError={onErrorHandler}
+            onLoad={onLoadHandler}/>
+        </View>
       }
-      {loading && <AtActivityIndicator mode="center"/>}
       {
         isError && !loading &&
-        <Image mode={'aspectFill'} src={fallback} style={{width: `${width}rpx`, height: `${height}rpx`}}/>
+        <Image
+          className={styles.imgError}
+          mode='aspectFit'
+          src={fallback}
+          lazyLoad
+          fadeIn
+          style={{width: `${width * .7}rpx`, height: `${height * .7}rpx`, margin: 'auto'}}/>
       }
     </View>
   )
diff --git a/src/components/spinner/index.tsx b/src/components/spinner/index.tsx
index 0ecfb5e..a99d6f9 100644
--- a/src/components/spinner/index.tsx
+++ b/src/components/spinner/index.tsx
@@ -1,6 +1,6 @@
 import Taro from "@tarojs/taro";
-import { View, Image } from '@tarojs/components'
-import { Component, ReactNode } from "react";
+import {View, Image} from '@tarojs/components'
+import {Component, ReactNode} from "react";
 import indicator from './loading.svg'
 import './style.scss'
 
@@ -12,8 +12,9 @@ type Status =
   | 'completed'
 
 interface Props {
-  enable?: boolean
-  overlay?: boolean
+  enable?: boolean  // 控制显现
+  overlay?: boolean  // 页面覆盖
+  block?: boolean // 块级
 }
 
 interface State {
@@ -30,8 +31,8 @@ type Controller = {
 }
 
 function createController(setState: StateSetter): Controller {
-  const background = Taro.createAnimation({ duration: 600 })
-  const rotation = Taro.createAnimation({ duration: 600 })
+  const background = Taro.createAnimation({duration: 600})
+  const rotation = Taro.createAnimation({duration: 600})
   let rotateTimer: ReturnType<typeof setTimeout> | undefined
   let status: Status | undefined
 
@@ -49,8 +50,8 @@ function createController(setState: StateSetter): Controller {
     }
 
     // 清空动画
-    background.export()
-    rotation.export()
+    background.step().export()
+    rotation.step().export()
 
     // 通知 UI 刷新
     if (notify) {
@@ -66,7 +67,7 @@ function createController(setState: StateSetter): Controller {
 
     // 旋转动画定时器
     const rotate = () => {
-      rotation.opacity(opacity).rotate(360).step({ duration: 600 })
+      rotation.opacity(opacity).rotate(360).step({duration: 600})
       notifyListener()
       rotateTimer = setTimeout(rotate, 600)
     }
@@ -80,23 +81,20 @@ function createController(setState: StateSetter): Controller {
 
   const onFinish = (opacity: number, nextStatus: Status) => {
     const lockStatus = status
-    setTimeout(() => {
-      if (lockStatus === status) {
-        background.backgroundColor(`rgba(255,255,255,${opacity})`).step({ duration: 0 })
-        if (nextStatus === 'dismissed') {
-          clearAnimation()
-        }
-        status = nextStatus
-        notifyListener()
+    if (lockStatus === status) {
+      background.backgroundColor(`rgba(255,255,255,${opacity})`).step({duration: 0})
+      if (nextStatus === 'dismissed') {
+        clearAnimation()
       }
-    }, 600)
+      status = nextStatus
+      notifyListener()
+    }
   }
 
   const setStatus = (newStatus: Status, opacity: number) => {
     if (status !== newStatus) {
       status = newStatus
       setAnimation(opacity)
-
       if (status === 'reverse') {
         onFinish(0, 'dismissed')
       } else if (status === 'forward') {
@@ -140,17 +138,16 @@ export default class Spin extends Component<Props, State> {
     this.setState((s) => ({...s, ...state}))
   }
 
-  componentDidMount(): void {
-    console.log(this.props.enable)
-    this.controller.setTick(this.props.enable)
-  }
+  // componentDidMount(): void {
+  // this.controller.setTick(this.props.enable)
+  // }
 
   componentDidUpdate(): void {
     this.controller.setTick(this.props.enable)
   }
 
   componentWillUnmount(): void {
-      this.controller.clear()
+    this.controller.clear()
   }
 
   shouldComponentUpdate(nextProps: Readonly<Props>, nextState: Readonly<State>): boolean {
@@ -161,9 +158,10 @@ export default class Spin extends Component<Props, State> {
 
   render(): ReactNode {
     return (
-      <View className={`spinner-wrapper ${this.state.status} ${this.props.overlay ? 'is-fixed' : ''}`}>
+      <View
+        className={`spinner-wrapper ${this.state.status} ${this.props.overlay && 'is-fixed'} ${this.props.block && 'is-block'}`}>
         <View className={`spinner ${this.state.status}`}>
-          <Image className="spinner-icon" src={indicator} />
+          <Image className="spinner-icon" src={indicator}/>
         </View>
       </View>
     )
diff --git a/src/components/spinner/style.scss b/src/components/spinner/style.scss
index 1ff6261..dbaa3e9 100644
--- a/src/components/spinner/style.scss
+++ b/src/components/spinner/style.scss
@@ -1,8 +1,17 @@
 .spinner-wrapper {
-  background-color: rgba( #fff, 1.0);
   transition: background-color 1200ms ease-out;
 
+  &.is-block {
+    width: auto;
+    position: absolute;
+    z-index: 99999;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   &.is-fixed {
+    background-color: rgba(#fff, 1.0);
     z-index: 99999;
     position: fixed;
     width: 100%;
@@ -15,7 +24,7 @@
 
   &.reverse,
   &.dismissed {
-    background-color: rgba( #fff, 0.0);
+    background-color: rgba(#fff, 0.0);
   }
 
   &.dismissed {
@@ -36,6 +45,7 @@
   flex-direction: column;
   justify-content: center;
   align-items: center;
+  width: 100%;
 }
 
 .spinner {
diff --git a/src/pages/business/videoInfo/videoInfo.scss b/src/pages/business/videoInfo/videoInfo.scss
index 5c0a7ad..1e6f13a 100644
--- a/src/pages/business/videoInfo/videoInfo.scss
+++ b/src/pages/business/videoInfo/videoInfo.scss
@@ -7,11 +7,7 @@
     height: 500rpx;
   }
 
-  .image {
-    width: 100%;
-    height: 100%;
-    display: block;
-  }
+
 
   .header {
     margin-bottom: 10px;
diff --git a/src/pages/business/videoInfo/videoInfo.tsx b/src/pages/business/videoInfo/videoInfo.tsx
index bec6f10..731c360 100644
--- a/src/pages/business/videoInfo/videoInfo.tsx
+++ b/src/pages/business/videoInfo/videoInfo.tsx
@@ -1,4 +1,4 @@
-import {Image, Text, View} from "@tarojs/components";
+import {Text, View} from "@tarojs/components";
 import {FC, useCallback, useEffect, useState} from "react";
 import {CourseDepData, curriculum} from "@/api";
 import './videoInfo.scss'
@@ -9,6 +9,8 @@ import eventsIndex from "@/hooks/eventsIndex";
 import {formatMinute} from "@/utils/time";
 import videoEvents from "@/hooks/videoEvents";
 import unique_ident from "@/hooks/unique_ident";
+import Spin from "@/components/spinner";
+import Img from "@/components/image/image";
 
 const VideoInfo: FC = () => {
   const {id, depId} = Taro.getCurrentInstance()?.router?.params as any
@@ -16,15 +18,16 @@ const VideoInfo: FC = () => {
   const [playId, setPlayId] = useState<number | null>(null)
   const [preview, setPreview] = useState(false)  // 预览
   const [playing, setPlaying] = useState(false)  // 学习中
+  const [enable, setEnable] = useState(true)
 
   const getData = useCallback(async (playing: boolean) => {
-    const res = await curriculum.courseDep(id, depId)
-    if (res) {
-      setData(res)
-    }
-    if (playId != null) { //  用于自动播放 判断当前课程是否完成
-      currentVideo(res, playing)
+    try {
+      const res = await curriculum.courseDep(id, depId)
+      res && setData(res)
+      playId != null && currentVideo(res, playing) //  用于自动播放 判断当前课程是否完成
+    } catch (e) {
     }
+    setEnable(false)
   }, [playing, playId])
 
   const curEnd = (test?: boolean) => {
@@ -73,9 +76,7 @@ const VideoInfo: FC = () => {
     }
   }, [playId, data, preview])
 
-  /**
-   * 判断当前课程是否完成
-   */
+  /** 判断当前课程是否完成 */
   const currentVideo = useCallback((data: CourseDepData, playing: boolean) => {
     const courseHourRecordsFinish = data?.learn_hour_records.find(d => d.id === playId)?.courseHourRecordsFinish
     if (typeof courseHourRecordsFinish === 'number') {
@@ -106,12 +107,13 @@ const VideoInfo: FC = () => {
   })
   return (
     <>
+      <Spin enable={enable} overlay/>
       <View className='content'>
         <View className='content-video'>
           {
             playId
               ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-              : <Image src={data?.course.thumb || ''} className='image' mode='aspectFill'/>
+              : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
           }
         </View>
 
diff --git a/src/pages/home/components/feature_recommended.tsx b/src/pages/home/components/feature_recommended.tsx
index 31fbb5f..cb08eab 100644
--- a/src/pages/home/components/feature_recommended.tsx
+++ b/src/pages/home/components/feature_recommended.tsx
@@ -150,8 +150,8 @@ const FeatureRecommended: FC<Props> = (props) => {
   }
 
   return (
-    <View className={styles.feature} style={{height: '263px'}}>
-      <Swiper nextMargin='30px' style={{height: '263px'}}>
+    <View className={styles.feature}>
+      <Swiper nextMargin='30px' style={{height: '225px'}}>
         {
           data.map(d => <SwiperItem key={d.url}>
             <Image
diff --git a/src/pages/home/home.module.scss b/src/pages/home/home.module.scss
index d18c670..dff704e 100644
--- a/src/pages/home/home.module.scss
+++ b/src/pages/home/home.module.scss
@@ -51,9 +51,9 @@
 }
 
 .adware {
+  width: 100%;
   border-radius: 16rpx;
   overflow: hidden;
-  background: #eee;
   margin-bottom: 40rpx;
 }
 
diff --git a/src/pages/preview/health/health.tsx b/src/pages/preview/health/health.tsx
index f66ea11..7eede9d 100644
--- a/src/pages/preview/health/health.tsx
+++ b/src/pages/preview/health/health.tsx
@@ -5,16 +5,22 @@ import Taro, {useReachBottom} from "@tarojs/taro";
 import styles from './health.module.scss'
 import play from '@/static/img/play.png'
 import Empty from "@/components/empty/empty";
+import Spin from "@/components/spinner";
 
 const Health: FC = () => {
   const [page, setPage] = useState(1)
   const [data, setData] = useState<Health[]>([])
   const [total, setTotal] = useState(0)
+  const [enable, setEnable] = useState(true)
 
   async function getData(page: number) {
-    const res = await HomeApi.health(page, 10)
-    setData(res.data)
-    setTotal(res.total)
+    try {
+      const res = await HomeApi.health(page, 10)
+      setData(res.data)
+      setTotal(res.total)
+    } catch (e) {
+    }
+    setEnable(false)
   }
 
   useReachBottom(() => {
@@ -32,6 +38,7 @@ const Health: FC = () => {
 
   return (
     <ScrollView>
+      <Spin enable={enable} overlay/>
       <View className={styles.container}>
         {
           data.length > 0
diff --git a/src/pages/preview/illness/sort/sort.tsx b/src/pages/preview/illness/sort/sort.tsx
index 695f3ea..54e4b82 100644
--- a/src/pages/preview/illness/sort/sort.tsx
+++ b/src/pages/preview/illness/sort/sort.tsx
@@ -7,6 +7,7 @@ import Tabs, {TabList} from "@/components/tabs/tabs";
 import {illnessApi} from "@/api/illness";
 import Empty from "@/components/empty/empty";
 import leftArrow from "@/static/img/leftArrow.png"
+import Spin from "@/components/spinner";
 
 const prefix = 'SORT'
 const Sort: FC = () => {
@@ -14,16 +15,24 @@ const Sort: FC = () => {
   const [firstId, setFirstId] = useState<number | undefined>(undefined)  // 一级分类
   const [secondId, setSecondId] = useState<number | undefined>(undefined) // 二级分类
   const [list, setList] = useState<any[]>([])
+  const [enable, setEnable] = useState(true)
+  const [loading, setLoading] = useState(false)
   const globalData = Taro.getApp().globalData
   const menu = Taro.getMenuButtonBoundingClientRect()
 
   async function getData() {
-    const res = await HomeApi.category(3)
-    setData(res)
-    if (res.length) {
-      setFirstId(res[0].id)
-      setSecondId(res[0]?.resource_category?.[0].id)
+    try {
+
+      const res = await HomeApi.category(3)
+      setData(res)
+      if (res.length) {
+        setFirstId(res[0].id)
+        setSecondId(res[0]?.resource_category?.[0].id)
+      }
+    } catch (e) {
+      setLoading(false)
     }
+    setEnable(false)
   }
 
   function jump(id: number) {
@@ -54,17 +63,16 @@ const Sort: FC = () => {
 
   useEffect(() => {
     if (secondId) {
-      Taro.showLoading({title: '加载中'})
+      setLoading(true)
       illnessApi.list(secondId, 1, 100).then(res => {
         setList(res.list)
-      }).finally(() => {
-        Taro.hideLoading()
       }).catch(() => {
         setList([])
       })
     } else {
       setList([])
     }
+    setLoading(false)
   }, [secondId])
 
   function swiperChange(e) {
@@ -76,6 +84,7 @@ const Sort: FC = () => {
 
   return (
     <View>
+      <Spin enable={enable} overlay/>
       <View style={headerStyles}>
         <Image src={leftArrow}
                mode='widthFix'
@@ -119,9 +128,13 @@ const Sort: FC = () => {
               className={styles.tree}
               scrollWithAnimation>
               {
-                list.length ?
-                  list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
-                  : <Empty name='暂无数据'/>
+                loading ? <Spin enable={loading}/> : <>
+                  {
+                    list.length ?
+                      list.map(d => <View className={styles.list} onClick={() => jump(d.id)}>{d.name}</View>)
+                      : <Empty name='暂无数据'/>
+                  }
+                </>
               }
             </ScrollView>
           </SwiperItem>)
diff --git a/src/pages/preview/profession/profession.tsx b/src/pages/preview/profession/profession.tsx
index 404d374..bafc47d 100644
--- a/src/pages/preview/profession/profession.tsx
+++ b/src/pages/preview/profession/profession.tsx
@@ -5,6 +5,7 @@ import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
 import Empty from "@/components/empty/empty";
 import Taro from "@tarojs/taro";
 import styles from './profession.module.scss'
+import Spin from "@/components/spinner";
 
 interface KillData {
   data: Kill[]
@@ -16,6 +17,8 @@ const Profession = () => {
   const [tabs, setTabs] = useState<TabList[]>([])
   const [categoryId, setCategoryId] = useState<number | null>(null)
   const [data, setData] = useState<Map<number, KillData>>(new Map)
+  const [enable, setEnable] = useState(true)
+  const [loading, setLoading] = useState(false)
 
   /**
    * more 开启加载更多
@@ -32,9 +35,7 @@ const Profession = () => {
     }
 
     try {
-      if (!data.has(categoryId)) {
-        Taro.showLoading()
-      }
+      setLoading(true)
       const res = await HomeApi.skillList(categoryId!, page, 10)
       const dataList = res.data.reduce((pre, cur) => {
         const index = pre.findIndex(d => d.id === cur.id)
@@ -54,7 +55,7 @@ const Profession = () => {
       setData(oldData)
     } catch (e) {
     }
-    Taro.hideLoading()
+    setLoading(false)
   }
 
   useEffect(() => {
@@ -62,10 +63,14 @@ const Profession = () => {
   }, [categoryId])
 
   async function getCategory() {
-    const res = await HomeApi.skillCategory()
-    const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id}))
-    setTabs(newTabs)
-    setCategoryId(newTabs[0].value as number)
+    try {
+      const res = await HomeApi.skillCategory()
+      const newTabs = res.map<TabList>(d => ({title: d.name, value: d.id}))
+      setTabs(newTabs)
+      setCategoryId(newTabs[0].value as number)
+    } catch (e) {
+    }
+    setEnable(false)
   }
 
   function tabsChange(tab: OnChangOpt) {
@@ -101,6 +106,7 @@ const Profession = () => {
             </View>
           )
         }
+        <Spin enable={loading}/>
       </ScrollView>
     )
   }
@@ -108,6 +114,7 @@ const Profession = () => {
 
   return (
     <>
+      <Spin enable={enable} overlay/>
       <View className='bg-white'>
         <Tabs tabList={tabs} onChange={tabsChange} current={categoryId!}/>
       </View>

From bcbf3b8e416ac7c8e0e9ddc2f06e07310ba63dde Mon Sep 17 00:00:00 2001
From: king <2229249788@qq.com>
Date: Wed, 30 Aug 2023 15:43:49 +0800
Subject: [PATCH 2/2] =?UTF-8?q?=E6=9B=BF=E6=8D=A2=E5=BE=AE=E4=BF=A1?=
 =?UTF-8?q?=E5=8A=A0=E8=BD=BD=E7=8A=B6=E6=80=81=20&&=20=E6=9B=BF=E6=8D=A2?=
 =?UTF-8?q?=E7=BD=91=E7=BB=9C=E5=9B=BE=E7=89=87=E5=8A=A0=E8=BD=BD=E5=85=AC?=
 =?UTF-8?q?=E5=85=B1=E7=BB=84=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/empty/empty.tsx                |  2 +-
 src/components/popPut/popPut.tsx              |  7 +-
 src/pages/business/videoInfo/videoInfo.tsx    | 44 ++++------
 src/pages/home/home.tsx                       |  2 +-
 src/pages/index/index.config.ts               |  2 +-
 src/pages/manage/courseAdmin/courseAdmin.tsx  |  4 +
 src/pages/manage/depAdmin/depAdmin.tsx        |  4 +
 src/pages/manage/selectDep/selectDep.tsx      |  4 +
 src/pages/manage/userInfo/components/info.tsx |  5 +-
 .../manage/userInfo/userInfo.module.scss      |  1 -
 src/pages/preview/brand/info/info.tsx         | 88 +++++++++----------
 src/pages/preview/brand/list/list.tsx         |  7 +-
 src/pages/preview/health/health.module.scss   |  7 --
 src/pages/preview/health/health.tsx           |  3 +-
 src/pages/preview/illness/list/list.tsx       | 23 +++--
 .../preview/profession/profession.module.scss | 13 ++-
 src/pages/preview/profession/profession.tsx   |  9 +-
 src/static/css/module.scss                    |  5 --
 18 files changed, 112 insertions(+), 118 deletions(-)

diff --git a/src/components/empty/empty.tsx b/src/components/empty/empty.tsx
index 57ec81d..1702395 100644
--- a/src/components/empty/empty.tsx
+++ b/src/components/empty/empty.tsx
@@ -10,7 +10,7 @@ interface Props {
 const Empty: FC<Props> = ({name}) => {
   return (
     <View className={styles.empty}>
-      <Image src={emptyImg} mode='widthFix' className={styles.image}/>
+      <Image src={emptyImg} mode='widthFix' className={styles.image} fadeIn lazyLoad/>
       <View className={styles.name}>{name}</View>
     </View>
   )
diff --git a/src/components/popPut/popPut.tsx b/src/components/popPut/popPut.tsx
index 4184ffc..ed2f6dc 100644
--- a/src/components/popPut/popPut.tsx
+++ b/src/components/popPut/popPut.tsx
@@ -1,7 +1,8 @@
 import {FC, ReactNode, useEffect, useState} from "react";
-import {View, Image} from "@tarojs/components";
+import {View} from "@tarojs/components";
 import Icon from "@/components/icon";
 import CustomPageContainer from "@/components/custom-page-container/custom-page-container";
+import Img from "@/components/image/image";
 
 interface Props {
   height?: number | string
@@ -46,13 +47,13 @@ const PopPut: FC<Props> = ({title, chevron, content, image, isProp, children, sh
     <>
       <View className='card' onClick={click} style={style()}>
         <View className='flex align-center'>
-          {opt.leftImage != null && <Image src={opt.leftImage} className='mr-3 image' mode='aspectFit'/>}
+          {opt.leftImage != null && <Img width={68} height={68} src={opt.leftImage} className='mr-3' mode='aspectFit'/>}
           <View>{title}</View>
         </View>
         <View className='card-content'>
           <View>{content}</View>
           {!chevron && <Icon name='chevron-right'/>}
-          {image && <Image src={image} mode='scaleToFill' className='image'/>}
+          {image && <Img src={image} mode='scaleToFill' className='image' width={68} height={68}/>}
         </View>
       </View>
       {
diff --git a/src/pages/business/videoInfo/videoInfo.tsx b/src/pages/business/videoInfo/videoInfo.tsx
index 731c360..5dee99c 100644
--- a/src/pages/business/videoInfo/videoInfo.tsx
+++ b/src/pages/business/videoInfo/videoInfo.tsx
@@ -9,7 +9,6 @@ import eventsIndex from "@/hooks/eventsIndex";
 import {formatMinute} from "@/utils/time";
 import videoEvents from "@/hooks/videoEvents";
 import unique_ident from "@/hooks/unique_ident";
-import Spin from "@/components/spinner";
 import Img from "@/components/image/image";
 
 const VideoInfo: FC = () => {
@@ -18,7 +17,6 @@ const VideoInfo: FC = () => {
   const [playId, setPlayId] = useState<number | null>(null)
   const [preview, setPreview] = useState(false)  // 预览
   const [playing, setPlaying] = useState(false)  // 学习中
-  const [enable, setEnable] = useState(true)
 
   const getData = useCallback(async (playing: boolean) => {
     try {
@@ -27,7 +25,6 @@ const VideoInfo: FC = () => {
       playId != null && currentVideo(res, playing) //  用于自动播放 判断当前课程是否完成
     } catch (e) {
     }
-    setEnable(false)
   }, [playing, playId])
 
   const curEnd = (test?: boolean) => {
@@ -106,31 +103,28 @@ const VideoInfo: FC = () => {
     videoEvents.videoOff()
   })
   return (
-    <>
-      <Spin enable={enable} overlay/>
-      <View className='content'>
-        <View className='content-video'>
-          {
-            playId
-              ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
-              : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
-          }
-        </View>
+    <View className='content'>
+      <View className='content-video'>
+        {
+          playId
+            ? <Course id={playId} courseId={id} curEnd={curEnd} preview={preview}/>
+            : <Img width={750} height={500} src={data?.course.thumb || ''} mode='aspectFill'/>
+        }
+      </View>
 
-        <View className='header'>
-          <View className='flex justify-between text-muted'>
-            <Text className='font-34 text-warning'>{data?.is_required ? '必修' : '选修'}</Text>
-            <Text className='font-24'>{data?.course.class_hour}课时</Text>
-          </View>
-          <View className='font-weight font-36 my-2'>{data?.course.title}</View>
-          <View className='text-muted font-26 mt-3'>
-            <Text className='mr-2'>时长：{formatMinute(data?.duration || 0)}</Text>
-            <Text>学习进度{((data?.learn_hour_records.length || 0) / (data?.course.class_hour || 1) * 100).toFixed(0)}%</Text>
-          </View>
+      <View className='header'>
+        <View className='flex justify-between text-muted'>
+          <Text className='font-34 text-warning'>{data?.is_required ? '必修' : '选修'}</Text>
+          <Text className='font-24'>{data?.course.class_hour}课时</Text>
+        </View>
+        <View className='font-weight font-36 my-2'>{data?.course.title}</View>
+        <View className='text-muted font-26 mt-3'>
+          <Text className='mr-2'>时长：{formatMinute(data?.duration || 0)}</Text>
+          <Text>学习进度{((data?.learn_hour_records.length || 0) / (data?.course.class_hour || 1) * 100).toFixed(0)}%</Text>
         </View>
-        <Catalogue data={data} setHors={setHors} id={id} playId={playId}/>
       </View>
-    </>
+      <Catalogue data={data} setHors={setHors} id={id} playId={playId}/>
+    </View>
   )
 }
 
diff --git a/src/pages/home/home.tsx b/src/pages/home/home.tsx
index b91c4b0..c2f9131 100644
--- a/src/pages/home/home.tsx
+++ b/src/pages/home/home.tsx
@@ -40,7 +40,7 @@ const Home: FC = () => {
       {data && <CurRecommended/>}
       {
         !token && <View className={styles.tipsLogin} onClick={unLogin}>
-          <View>登录后享受更多学习服务~</View>
+          <View>登录后享受更多服务~</View>
           <MyButton fillet size='mini'>立即登录</MyButton>
         </View>
       }
diff --git a/src/pages/index/index.config.ts b/src/pages/index/index.config.ts
index 3637195..752ef7b 100644
--- a/src/pages/index/index.config.ts
+++ b/src/pages/index/index.config.ts
@@ -1,5 +1,5 @@
 export default definePageConfig({
-  navigationBarTitleText: '医学道',
+  navigationBarTitleText: '学习课程',
   navigationBarBackgroundColor: '#92ecc5',
   navigationBarTextStyle: 'white',
 })
diff --git a/src/pages/manage/courseAdmin/courseAdmin.tsx b/src/pages/manage/courseAdmin/courseAdmin.tsx
index 6f9b245..ad087dd 100644
--- a/src/pages/manage/courseAdmin/courseAdmin.tsx
+++ b/src/pages/manage/courseAdmin/courseAdmin.tsx
@@ -6,12 +6,14 @@ import styles from './courseAdmin.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import MyButton from "@/components/button/MyButton";
 import storageDep from "@/hooks/storageDep";
+import Spin from "@/components/spinner";
 
 const CourseAdmin: FC = () => {
   const [total, setTotal] = useState(0)
   const [data, setData] = useState<Curriculum[]>([])
   const [batch, setBatch] = useState(false)
   const [curs, setCurs] = useState<number[]>([])
+  const [enable, setEnable] = useState(true)
   const [param, setParam] = useState<CourseAllParam>({
     page: 1,
     page_size: 10,
@@ -34,6 +36,7 @@ const CourseAdmin: FC = () => {
         ])
       }
     })
+    setEnable(false)
   }
 
   useEffect(() => {
@@ -149,6 +152,7 @@ const CourseAdmin: FC = () => {
 
   return (
     <View>
+      <Spin enable={enable} overlay/>
       <Search param={param} setParam={setParam}/>
 
       <View className={styles.curList}>
diff --git a/src/pages/manage/depAdmin/depAdmin.tsx b/src/pages/manage/depAdmin/depAdmin.tsx
index df6af00..41a8e22 100644
--- a/src/pages/manage/depAdmin/depAdmin.tsx
+++ b/src/pages/manage/depAdmin/depAdmin.tsx
@@ -8,6 +8,7 @@ import folder from '@/static/img/folder.png'
 import ShowModel from "@/components/showModel/showModel";
 import Empty from "@/components/empty/empty";
 import {Profile} from '@/store'
+import Spin from "@/components/spinner";
 
 const DepAdmin: FC = () => {
   const router = useRouter()
@@ -17,6 +18,7 @@ const DepAdmin: FC = () => {
   const [isPut, setIsPut] = useState(false)
   const [depName, setDepName] = useState('')
   const [reset, setReset] = useState(false)
+  const [enable, setEnable] = useState(true)
   const {company} = Profile.useContainer()
 
 
@@ -31,6 +33,7 @@ const DepAdmin: FC = () => {
       }
     } catch (e) {
     }
+    setEnable(false)
   }
 
   function showPop(name: string | undefined) {
@@ -137,6 +140,7 @@ const DepAdmin: FC = () => {
 
   return (
     <>
+      <Spin overlay enable={enable}/>
       <View>
         {manages.map(d => <PopPut
           key={d.id}
diff --git a/src/pages/manage/selectDep/selectDep.tsx b/src/pages/manage/selectDep/selectDep.tsx
index 7bd9d0a..72760ce 100644
--- a/src/pages/manage/selectDep/selectDep.tsx
+++ b/src/pages/manage/selectDep/selectDep.tsx
@@ -6,6 +6,7 @@ import PopPut from "@/components/popPut/popPut";
 import folder from "@/static/img/folder.png";
 import MyButton from "@/components/button/MyButton";
 import storageDep from "@/hooks/storageDep";
+import Spin from "@/components/spinner";
 
 /**
  * 选择部门 depIds 是 JSON = number[]
@@ -16,11 +17,13 @@ const SelectDep: FC = () => {
   const [ids, setIds] = useState<number[]>([])
   const [deps, setDeps] = useState<Manage[]>([])
   const [required, setRequired] = useState<number[]>([])
+  const [enable, setEnable] = useState(true)
 
   useEffect(() => {
     curriculum.department().then(res => {
       setDeps(res.data)
     })
+    setEnable(false)
     setIds(JSON.parse(params.depIds))
     setRequired(JSON.parse(params.required || "[]"))
   }, [])
@@ -79,6 +82,7 @@ const SelectDep: FC = () => {
 
   return (
     <View className='px-2 bg-white'>
+      <Spin overlay enable={enable}/>
       {deps.map((d) => <View className='flex align-center' key={d.id} onClick={() => onChange(d.id)}>
         <Checkbox value={d.id + ''} checked={ids.includes(d.id)} color='#45d4a8'/>
         <View style={{flex: 1}}>
diff --git a/src/pages/manage/userInfo/components/info.tsx b/src/pages/manage/userInfo/components/info.tsx
index db7f5fc..973fdf0 100644
--- a/src/pages/manage/userInfo/components/info.tsx
+++ b/src/pages/manage/userInfo/components/info.tsx
@@ -1,6 +1,7 @@
 import {FC} from "react";
-import {Image, Text, View} from "@tarojs/components";
+import { Text, View} from "@tarojs/components";
 import styles from '../userInfo.module.scss'
+import Img from "@/components/image/image";
 
 interface Props {
   data: User | null
@@ -12,7 +13,7 @@ const Info: FC<Props> = ({data}) => {
   return (
     <>
       <View className={styles.box}>
-        <Image src={data?.avatar || ''} className={styles.image}/>
+        <Img width={120} height={120} src={data?.avatar || ''} className={styles.image}/>
         <View className='ml-2'>
           <View>
             <Text className='font-weight'>{data?.name}</Text>
diff --git a/src/pages/manage/userInfo/userInfo.module.scss b/src/pages/manage/userInfo/userInfo.module.scss
index 11d96fc..9cbc680 100644
--- a/src/pages/manage/userInfo/userInfo.module.scss
+++ b/src/pages/manage/userInfo/userInfo.module.scss
@@ -15,7 +15,6 @@
 .image {
   width: 120rpx;
   height: 120rpx;
-  background: #ddd;
   border-radius: 10rpx;
   overflow: hidden;
 }
diff --git a/src/pages/preview/brand/info/info.tsx b/src/pages/preview/brand/info/info.tsx
index b7bced8..b797fed 100644
--- a/src/pages/preview/brand/info/info.tsx
+++ b/src/pages/preview/brand/info/info.tsx
@@ -7,6 +7,7 @@ import LineEllipsis from "@/components/textCollapse/collapse";
 import Empty from "@/components/empty/empty";
 import Img from "@/components/image/image";
 import {rfc33392time} from "@/utils/day";
+import Spin from "@/components/spinner";
 
 type Params = {
   id: number
@@ -15,18 +16,12 @@ const BrandInfo: FC = () => {
   const {id} = useRouter().params as unknown as Params
   const [brandInfo, setBrandInfo] = useState<BrandRecord>()
   const [articleList, setArticleList] = useState<ArticleRecord[]>([])
-  const [curIndex,setCurIndex] = useState<number>(1)
+  const [curIndex, setCurIndex] = useState<number>(1)
   const [page, setPage] = useState(1)
   const [total, setTotal] = useState(0)
+  const [enable, setEnable] = useState(true)
 
   useEffect(() => {
-    Taro.showLoading({
-      title: '加载中',
-      mask: true
-    })
-    setTimeout(function () {
-      Taro.hideLoading()
-    }, 1000)
     getData()
   }, [id])
 
@@ -35,7 +30,7 @@ const BrandInfo: FC = () => {
       const data = await brandApi.info(id)
       Taro.setNavigationBarTitle({title: data.name})
       setBrandInfo(data)
-      const data1 = await brandApi.articleList(id,page)
+      const data1 = await brandApi.articleList(id, page)
       setTotal(data1.total)
       setArticleList([
         ...(articleList || []),
@@ -44,6 +39,7 @@ const BrandInfo: FC = () => {
     } catch (e) {
       // setBrandInfo({disabled: 0, graphic_introduction: "", id: 0, introductory_video: "", name: "", brand_album:['1','2','3']})
     }
+    setEnable(false)
   }
 
   useReachBottom(useCallback(() => {
@@ -53,7 +49,7 @@ const BrandInfo: FC = () => {
   }, [total, articleList]))
 
   useEffect(() => {
-    brandApi.articleList(id,page).then(res => {
+    brandApi.articleList(id, page).then(res => {
       setTotal(res.total)
       setArticleList([
         ...(articleList || []),
@@ -63,46 +59,46 @@ const BrandInfo: FC = () => {
 
   }, [page])
 
-  function onChange(e){
-    console.log(e)
-    setCurIndex(+e.detail.current+1)
+  function onChange(e) {
+    setCurIndex(+e.detail.current + 1)
   }
 
   return (
-    <View className='flex flex-column' style={{display:brandInfo?'flex':'none'}}>
-        <Swiper
-          className={styles['swiper']}
-          indicatorColor='#999'
-          indicatorActiveColor='#333'
-          indicatorDots={false}
-          onChange={onChange}
+    <View className='flex flex-column' style={{display: 'flex'}}>
+      <Spin enable={enable} overlay/>
+      <Swiper
+        className={styles['swiper']}
+        indicatorColor='#999'
+        indicatorActiveColor='#333'
+        indicatorDots={false}
+        onChange={onChange}
 
-        >
-          { brandInfo?.introductory_video_resource?.url && <SwiperItem>
-            <Video
-              style={{width: '750rpx', height: '600rpx'}}
-              playBtnPosition={"center"}
-              id='video'
-              src={brandInfo?.introductory_video_resource?.url}
-              initialTime={0}
-              controls={true}
-              enableProgressGesture={false}
-              showFullscreenBtn={false}
-              autoplay={false}
-              loop={false}
-              muted={false}
-            />
-          </SwiperItem>}
-          {brandInfo?.brand_album?.length
-            && brandInfo?.brand_album?.split(',').map((d) =>
-              <SwiperItem>
-                <Image mode={'aspectFill'} style={{width:'750rpx',height:'600rpx'}} src={d}></Image>
-              </SwiperItem>)
-          }
-        </Swiper>
-        <View className={styles.curIndexBox}>
-          <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0)  + ((brandInfo && brandInfo.introductory_video_resource) ? 1:0)}</Text>
-        </View>
+      >
+        {brandInfo?.introductory_video_resource?.url && <SwiperItem>
+          <Video
+            style={{width: '750rpx', height: '600rpx'}}
+            playBtnPosition={"center"}
+            id='video'
+            src={brandInfo?.introductory_video_resource?.url}
+            initialTime={0}
+            controls={true}
+            enableProgressGesture={false}
+            showFullscreenBtn={false}
+            autoplay={false}
+            loop={false}
+            muted={false}
+          />
+        </SwiperItem>}
+        {brandInfo?.brand_album?.length
+          && brandInfo?.brand_album?.split(',').map((d) =>
+            <SwiperItem>
+              <Image mode={'aspectFill'} style={{width: '750rpx', height: '600rpx'}} src={d}></Image>
+            </SwiperItem>)
+        }
+      </Swiper>
+      <View className={styles.curIndexBox}>
+        <Text>{curIndex} / {(brandInfo?.brand_album?.split(',').length || 0) + ((brandInfo && brandInfo.introductory_video_resource) ? 1 : 0)}</Text>
+      </View>
       <View className={styles['body']}>
         <View className={styles['top']}>
           <Text className={styles['title']}>{brandInfo?.name}</Text>
diff --git a/src/pages/preview/brand/list/list.tsx b/src/pages/preview/brand/list/list.tsx
index cf422a0..224a82b 100644
--- a/src/pages/preview/brand/list/list.tsx
+++ b/src/pages/preview/brand/list/list.tsx
@@ -1,10 +1,11 @@
 import {FC, useCallback, useEffect, useState} from "react";
-import {Image, View} from "@tarojs/components";
+import {View} from "@tarojs/components";
 import {brandApi, BrandRecord} from "@/api";
 import styles from './list.module.scss'
 import Taro, {useReachBottom} from "@tarojs/taro";
 import Empty from "@/components/empty/empty";
 import Spinner from "@/components/spinner";
+import Img from "@/components/image/image";
 
 const BrandList: FC = () => {
   const [page, setPage] = useState(1)
@@ -52,13 +53,13 @@ const BrandList: FC = () => {
 
 
   return (
-    <View className='p-2' style={{display: text ? 'block' : 'none'}}>
+    <View className='p-2'>
       <Spinner enable={loading} overlay/>
       {
         brands.length ?
           <>
             {brands.map((d) => <View onClick={() => jumpInfo(d.id)} className={styles.box} key={d.id}>
-              <Image src={d.logo} mode='aspectFill' className={styles.image}/>
+              <Img width={128} height={128} src={d.logo} mode='aspectFill' className={styles.image}/>
               <View className={styles.rightBox}>
                 <View className='font-weight mb-2 font-28'>{d.name}</View>
                 <View className={styles.desc}>{d.graphic_introduction}</View>
diff --git a/src/pages/preview/health/health.module.scss b/src/pages/preview/health/health.module.scss
index f28a403..bd705b8 100644
--- a/src/pages/preview/health/health.module.scss
+++ b/src/pages/preview/health/health.module.scss
@@ -13,13 +13,6 @@
   overflow: hidden;
   margin-bottom: 20rpx;
   position: relative;
-
-  image,
-  Image {
-    background: #eee;
-    width: 100%;
-    min-height: 345rpx;
-  }
 }
 
 .play {
diff --git a/src/pages/preview/health/health.tsx b/src/pages/preview/health/health.tsx
index 7eede9d..a715fed 100644
--- a/src/pages/preview/health/health.tsx
+++ b/src/pages/preview/health/health.tsx
@@ -6,6 +6,7 @@ import styles from './health.module.scss'
 import play from '@/static/img/play.png'
 import Empty from "@/components/empty/empty";
 import Spin from "@/components/spinner";
+import Img from "@/components/image/image";
 
 const Health: FC = () => {
   const [page, setPage] = useState(1)
@@ -43,7 +44,7 @@ const Health: FC = () => {
         {
           data.length > 0
             ? data.map(d => <View key={d.id} className={styles.health} onClick={() => jump(d)}>
-              <Image src={d.url_path} mode='widthFix' lazyLoad fadeIn/>
+              <Img width={370} height={345} src={d.url_path} mode='widthFix'/>
               <Image src={play} className={styles.play} mode='aspectFit'/>
               <View className='text-ellipsis-2 m-2 text-dark'>{d.title}</View>
               <View className='font-26  text-muted mx-2 mb-2'>{d.video_view}观看</View>
diff --git a/src/pages/preview/illness/list/list.tsx b/src/pages/preview/illness/list/list.tsx
index a146c9b..c1b893a 100644
--- a/src/pages/preview/illness/list/list.tsx
+++ b/src/pages/preview/illness/list/list.tsx
@@ -4,29 +4,31 @@ import styles from './list.module.scss'
 import Taro, {useReachBottom, useRouter} from "@tarojs/taro";
 import {illnessApi} from "@/api/illness";
 import Empty from "@/components/empty/empty";
+import Spin from "@/components/spinner";
 
 const BrandList: FC = () => {
   const params = useRouter().params as unknown as { id: number }
   const [page, setPage] = useState(1)
   const [articles, setArticles] = useState<any[]>([])
-  const [illness,setIllness] = useState<{name:string;description:string;resource:any;album:string[]}>()
+  // const [illness, setIllness] = useState<{ name: string; description: string; resource: any; album: string[] }>()
   const [total, setTotal] = useState(0)
   const [fetchDone, setFetchDone] = useState(false)
+  const [enable, setEnable] = useState(true)
 
   useEffect(() => {
-    Taro.showLoading({title: '加载中', mask: true})
     getData().then()
   }, [page])
 
   const getData = useCallback(async () => {
     try {
       const data = await illnessApi.articleInfo(params.id, page, 20)
-      Taro.setNavigationBarTitle({title:data.illness.name})
-      setIllness(data.illness)
+      Taro.setNavigationBarTitle({title: data?.illness?.name || '暂无文章'})
+      // setIllness(data.illness)
       setTotal(data.list.total)
       setArticles([...articles, ...data.list.list])
     } catch (e) {
     }
+    setEnable(false)
     setFetchDone(true)
     Taro.hideLoading()
   }, [page])
@@ -44,12 +46,17 @@ const BrandList: FC = () => {
 
 
   return (
-    <View style={{display: fetchDone ? 'block' : 'none'}} className='px-2 mt-2 bg-white'>
+    <View style={{display: fetchDone ? 'block' : 'none'}} className='px-2 mt-2'>
+      <Spin enable={enable} overlay/>
       {
         articles.length > 0 ?
-          articles.map((d, index) => <View key={d.id} className={styles.articles} onClick={() => jump(d.id)}>
-            {index + 1} . {d.title}
-          </View>)
+          <View className='bg-white'>
+            {
+              articles.map((d, index) => <View key={d.id} className={styles.articles} onClick={() => jump(d.id)}>
+                {index + 1} . {d.title}
+              </View>)
+            }
+          </View>
           : <Empty name='暂无文章'/>
       }
     </View>
diff --git a/src/pages/preview/profession/profession.module.scss b/src/pages/preview/profession/profession.module.scss
index 57291c2..a1ee13c 100644
--- a/src/pages/preview/profession/profession.module.scss
+++ b/src/pages/preview/profession/profession.module.scss
@@ -10,13 +10,10 @@
   box-sizing: border-box;
   display: flex;
   margin-bottom: 20rpx;
+}
+
 
-  Image,
-  image {
-    width: 320rpx;
-    max-height: 180rpx;
-    margin-right: 20rpx;
-    border-radius: 10rpx;
-    background: #eee;
-  }
+.image {
+  margin-right: 20rpx;
+  border-radius: 10rpx;
 }
diff --git a/src/pages/preview/profession/profession.tsx b/src/pages/preview/profession/profession.tsx
index bafc47d..82ce6bd 100644
--- a/src/pages/preview/profession/profession.tsx
+++ b/src/pages/preview/profession/profession.tsx
@@ -1,4 +1,4 @@
-import {Image, ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
+import {ScrollView, Swiper, SwiperItem, View} from "@tarojs/components";
 import {HomeApi} from "@/api";
 import {useEffect, useState} from "react";
 import Tabs, {OnChangOpt, TabList} from "@/components/tabs/tabs";
@@ -6,6 +6,7 @@ import Empty from "@/components/empty/empty";
 import Taro from "@tarojs/taro";
 import styles from './profession.module.scss'
 import Spin from "@/components/spinner";
+import Img from "@/components/image/image";
 
 interface KillData {
   data: Kill[]
@@ -18,7 +19,6 @@ const Profession = () => {
   const [categoryId, setCategoryId] = useState<number | null>(null)
   const [data, setData] = useState<Map<number, KillData>>(new Map)
   const [enable, setEnable] = useState(true)
-  const [loading, setLoading] = useState(false)
 
   /**
    * more 开启加载更多
@@ -35,7 +35,6 @@ const Profession = () => {
     }
 
     try {
-      setLoading(true)
       const res = await HomeApi.skillList(categoryId!, page, 10)
       const dataList = res.data.reduce((pre, cur) => {
         const index = pre.findIndex(d => d.id === cur.id)
@@ -55,7 +54,6 @@ const Profession = () => {
       setData(oldData)
     } catch (e) {
     }
-    setLoading(false)
   }
 
   useEffect(() => {
@@ -101,12 +99,11 @@ const Profession = () => {
         {
           data.data.map(d =>
             <View className={styles.killBox} onClick={() => jump(d)}>
-              <Image src={d.url_path} mode='widthFix'/>
+              <Img width={320} height={180} src={d.url_path} mode='widthFix' className={styles.image}/>
               <View className='text-ellipsis flex-1'>{d?.resource?.name}</View>
             </View>
           )
         }
-        <Spin enable={loading}/>
       </ScrollView>
     )
   }
diff --git a/src/static/css/module.scss b/src/static/css/module.scss
index 8f57891..b021177 100644
--- a/src/static/css/module.scss
+++ b/src/static/css/module.scss
@@ -59,11 +59,6 @@ taro-button-core::after {
     align-items: center;
     justify-content: center;
   }
-
-  .image {
-    width: 68px;
-    height: 68px;
-  }
 }
 
 .Textarea {