更新pad样式

src/components/m-img-code/index.module.less

@@ -1,45 +1,46 @@
-.imgCode {
-  padding: 16px;
-
-  .codeTitle {
-    text-align: center;
-    font-size: 16px;
-    color: #4f4f4f;
-    margin: 0;
-    padding-bottom: 16px;
-  }
-
-  .img {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .imgChange {
-    display: block;
-    color: #aaaaaa;
-    font-size: 12px;
-    text-align: center;
-    padding-top: 5px;
-  }
-
-  .field {
-    background: #f4f4f4;
-    padding: 10px 12px !important;
-  }
-}
-
-.imgCodePopup {
-  width: 90%;
-  border-radius: 5px;
-  overflow: initial;
-
-  :global {
-    .van-popup__close-icon {
-      top: -37px !important;
-      right: 0 !important;
-      font-size: 25px;
-      color: #fff;
-    }
-  }
-}
+.imgCode {
+  padding: 16px;
+
+  .codeTitle {
+    text-align: center;
+    font-size: 16px;
+    color: #4f4f4f;
+    margin: 0;
+    padding-bottom: 16px;
+  }
+
+  .img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .imgChange {
+    display: block;
+    color: #aaaaaa;
+    font-size: 12px;
+    text-align: center;
+    padding-top: 5px;
+  }
+
+  .field {
+    background: #f4f4f4;
+    padding: 10px 12px !important;
+  }
+}
+
+.imgCodePopup {
+  width: 90%;
+  max-width: 320px;
+  border-radius: 5px;
+  overflow: initial;
+
+  :global {
+    .van-popup__close-icon {
+      top: -37px !important;
+      right: 0 !important;
+      font-size: 25px;
+      color: #fff;
+    }
+  }
+}

src/components/m-wx-tip/index.tsx

@@ -53,7 +53,7 @@ export default defineComponent({
         <Popup
           v-model:show={showPopup.value}
           round
-          style={{ width: '88%' }}
+          style={{ width: '88%', maxWidth: '520px' }}
           closeOnClickOverlay={false}
           class={styles.wxPopupDialog}>
           <div class={styles.popupContainer}>

src/custom-plugins/guide-page/woring-guide.tsx

@@ -1,25 +1,33 @@
-import { Button, Popup } from "vant";
-import { } from "vant";
-import { defineComponent, nextTick, onMounted, onUnmounted, reactive, ref, watch } from "vue";
-import styles from "./index.module.less";
-import { getImage } from "./images";
-import { useRect } from "@vant/use";
-import {getGuidance, setGuidance} from './api'
+import { Button, Popup } from 'vant';
+import {} from 'vant';
+import {
+  defineComponent,
+  nextTick,
+  onMounted,
+  onUnmounted,
+  reactive,
+  ref,
+  watch
+} from 'vue';
+import styles from './index.module.less';
+import { getImage } from './images';
+import { useRect } from '@vant/use';
+import { getGuidance, setGuidance } from './api';
 export default defineComponent({
-  name: "woring",
-  emits: ["close"],
+  name: 'woring',
+  emits: ['close'],
   setup(props, { emit }) {
     const data = reactive({
-      box: {height:''} as any,
+      box: { height: '' } as any,
       show: false,
       steps: [
         {
-          ele: "",
+          ele: '',
           eleRect: {} as DOMRect,
-          img: getImage("woring1.png"),
+          img: getImage('woring1.png'),
           handStyle: {
             // top: "2.98rem",
-            left:'4.5rem'
+            left: '4.5rem'
           },
           // imgStyle: {
           //   width:'5.46rem',
@@ -28,111 +36,108 @@ export default defineComponent({
           //   left:'2.1rem'
           // },
           imgStyle: {
-            width:'8.19rem',
-            height:'3.9rem',
-            top: "0.6rem",
-            left:'0.8rem'
+            width: '8.19rem',
+            height: '3.9rem',
+            top: '0.6rem',
+            left: '0.8rem'
           },
           btnsStyle: {
-            top: "5.2rem",
-            left:'3.5rem',
+            top: '5.2rem',
+            left: '3.5rem'
           },
           // boxStyle:{
           //   transform: 'scale(1)'
           // },
-          type:'bottom'
+          type: 'bottom'
         },
         {
-          ele: "",
+          ele: '',
           eleRect: {} as DOMRect,
-          img: getImage("woring2.png"),
+          img: getImage('woring2.png'),
           handStyle: {
             // top: "2.98rem",
-            left:'4.5rem'
+            left: '4.5rem'
           },
           imgStyle: {
-            width:'8.19rem',
-            height:'3.9rem',
-            top: "0.6rem",
-            left:'0.8rem'
+            width: '8.19rem',
+            height: '3.9rem',
+            top: '0.6rem',
+            left: '0.8rem'
           },
           btnsStyle: {
-            top: "5.2rem",
-            left:'3.5rem'
+            top: '5.2rem',
+            left: '3.5rem'
           },
           // boxStyle:{
           //   transform: 'scale(1)'
           // },
-          type:'bottom'
+          type: 'bottom'
         },
         {
-          ele: "",
-          img: getImage("woring3.png"),
+          ele: '',
+          img: getImage('woring3.png'),
           handStyle: {
-            top: "-1.39rem",
-            left:'4.5rem',
+            top: '-1.39rem',
+            left: '4.5rem',
             transform: 'rotate(180deg)'
           },
           imgStyle: {
-            width:'8.19rem',
-            height:'3.9rem',
-            top: "-7.4rem",
-            left:'0.8rem'
+            width: '8.19rem',
+            height: '3.9rem',
+            top: '-7.4rem',
+            left: '0.8rem'
           },
           btnsStyle: {
-            top: "-2.6rem",
-            left:'2.11rem',
-          },
+            top: '-2.6rem',
+            left: '2.11rem'
+          }
           // boxStyle:{
           //   transform: 'scale(1)'
           // },
-        },
+        }
       ],
-      step: 0,
+      step: 0
     });
-    const tipShow = ref(false)
-    const isPad = ref(true)
+    const tipShow = ref(false);
+    const isPad = ref(true);
 
-    const guideInfo = ref({} as any)
-    const getAllGuidance = async()=>{
-      try{
-        const res = await getGuidance({guideTag:'guideInfo'})
-        if(res.data){
-          guideInfo.value = JSON.parse(res.data?.guideValue) || null
-        }else{
-          guideInfo.value = {}
+    const guideInfo = ref({} as any);
+    const getAllGuidance = async () => {
+      try {
+        const res = await getGuidance({ guideTag: 'guideInfo' });
+        if (res.data) {
+          guideInfo.value = JSON.parse(res.data?.guideValue) || null;
+        } else {
+          guideInfo.value = {};
         }
-        if (guideInfo.value &&guideInfo.value.woring) {
+        if (guideInfo.value && guideInfo.value.woring) {
           tipShow.value = false;
         } else {
           tipShow.value = true;
         }
-      }catch(e){
-        console.log(e)
+      } catch (e) {
+        console.log(e);
       }
       // const guideInfo = localStorage.getItem('teacher-guideInfo');
-
-    }
-
+    };
 
     const getStepELe = () => {
-
       const ele: HTMLElement = document.getElementById(`woring-${data.step}`)!;
       if (ele) {
         const eleRect = ele.getBoundingClientRect();
         data.box = {
-          left: eleRect.x + "px",
-          top: eleRect.y + "px",
-          width: eleRect.width + "px",
-          height: eleRect.height + "px",
+          left: eleRect.x + 'px',
+          top: eleRect.y + 'px',
+          width: eleRect.width + 'px',
+          height: eleRect.height + 'px'
         };
-        console.log(data.box?.height)
-      }else{
-        handleNext()
+        console.log(data.box?.height);
+      } else {
+        handleNext();
       }
     };
     onMounted(() => {
-      setTimeout(()=>{
+      setTimeout(() => {
         // const guideInfo = localStorage.getItem('guideInfo')
         // if(guideInfo&&JSON.parse(guideInfo).woring){
         //  tipShow.value =false
@@ -141,115 +146,138 @@ export default defineComponent({
         // }
         var docEl = document.documentElement;
         var clientWidth = docEl.clientWidth;
-        if(clientWidth>750){
-          console.log('PAD')
+        if (clientWidth > 750) {
+          console.log('PAD');
           isPad.value = true;
-        }else{
+        } else {
           isPad.value = false;
-          console.log('PHONE')
+          console.log('PHONE');
         }
         getStepELe();
-        getAllGuidance()
-      },500)
-      window.addEventListener("resize", resetSize);
+        getAllGuidance();
+      }, 500);
+      window.addEventListener('resize', resetSize);
     });
-    const resetSize = ()=>{
+    const resetSize = () => {
       getStepELe();
-    }
+    };
 
-    onUnmounted(()=>{
-      window.removeEventListener("resize", resetSize);
-    })
+    onUnmounted(() => {
+      window.removeEventListener('resize', resetSize);
+    });
     const handleNext = () => {
       if (data.step >= 3) {
-       endGuide();
+        endGuide();
         return;
       }
       data.step = data.step + 1;
       getStepELe();
     };
 
-    const endGuide = async()=>{
+    const endGuide = async () => {
       // let guideInfo = JSON.parse(localStorage.getItem('guideInfo') || '{}')
 
-      if(!guideInfo.value){
-        guideInfo.value = {woring:true}
-      }else{
-        guideInfo.value.woring = true
+      if (!guideInfo.value) {
+        guideInfo.value = { woring: true };
+      } else {
+        guideInfo.value.woring = true;
       }
       // localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
-      try{
-        const res = await setGuidance({guideTag:'guideInfo',guideValue:JSON.stringify(guideInfo.value)})
-      }catch(e){
-        console.log(e)
+      try {
+        const res = await setGuidance({
+          guideTag: 'guideInfo',
+          guideValue: JSON.stringify(guideInfo.value)
+        });
+      } catch (e) {
+        console.log(e);
       }
-      tipShow.value = false
-    //  localStorage.setItem('endC')
-    }
+      tipShow.value = false;
+      //  localStorage.setItem('endC')
+    };
     return () => (
-      <Popup teleport="body" overlay={false} closeOnClickOverlay={false} class={["popup-custom", styles.guidePopup]} v-model:show={tipShow.value}>
-      <div class={styles.content} onClick={() => handleNext()}>
-      {data.step!=data.steps.length-1&&<div
-          class={[styles.backBtn,styles.right]}
-          onClick={(e: Event) => {
-            e.stopPropagation();
-           endGuide()
-          }}
-        >
-
-          跳过
-        </div>}
-        <div class={[styles.box,styles.noscalc]} style={{...data.box,}} id={`modeType-${data.step}`}>
-          {data.steps.map((item: any, index) => (
-            //   top: `${item.imgStyle?.height}`    top: `${item.eleRect?.top}px`,
+      <Popup
+        teleport="body"
+        overlay={false}
+        closeOnClickOverlay={false}
+        class={['popup-custom', styles.guidePopup]}
+        v-model:show={tipShow.value}>
+        <div class={styles.content} onClick={() => handleNext()}>
+          {data.step != data.steps.length - 1 && (
             <div
-              onClick={(e: Event) => e.stopPropagation()}
-              class={styles.item}
-              style={ item.type == 'bottom'?{
-                display: index === data.step ? '' : 'none',
-                left: `${item.eleRect?.left}px`,
-                top:  `${data.box?.height}`,
-              }:{
-                display: index === data.step ? "" : "none",
-                left: `${item.eleRect?.left}px`,
-                top: `${item.eleRect?.top}px`,
-              }}
-            >
-
-              <img class={styles.img} style={item.imgStyle} src={item.img} />
-              <img class={styles.iconHead} style={item.handStyle} src={getImage("indexDot.png")} />
-              <div class={styles.btns} style={item.btnsStyle}>
-                {data.step + 1 == data.steps.length ? (
-                  <>
+              class={[styles.backBtn, styles.right]}
+              onClick={(e: Event) => {
+                e.stopPropagation();
+                endGuide();
+              }}>
+              跳过
+            </div>
+          )}
+          <div
+            class={[styles.box, styles.noscalc]}
+            style={{ ...data.box }}
+            id={`modeType-${data.step}`}>
+            {data.steps.map((item: any, index) => (
+              //   top: `${item.imgStyle?.height}`    top: `${item.eleRect?.top}px`,
+              <div
+                onClick={(e: Event) => e.stopPropagation()}
+                class={styles.item}
+                style={
+                  item.type == 'bottom'
+                    ? {
+                        display: index === data.step ? '' : 'none',
+                        left: `${item.eleRect?.left}px`,
+                        top: `${data.box?.height}`
+                      }
+                    : {
+                        display: index === data.step ? '' : 'none',
+                        left: `${item.eleRect?.left}px`,
+                        top: `${item.eleRect?.top}px`
+                      }
+                }>
+                <img class={styles.img} style={item.imgStyle} src={item.img} />
+                <img
+                  class={styles.iconHead}
+                  style={item.handStyle}
+                  src={getImage('indexDot.png')}
+                />
+                <div class={styles.btns} style={item.btnsStyle}>
+                  {data.step + 1 == data.steps.length ? (
+                    <>
+                      <Button
+                        class={[styles.btn, styles.sacleBtn]}
+                        round
+                        color="transparent"
+                        style={{ 'border-color': '#fff' }}
+                        type="primary"
+                        onClick={() => {
+                          data.step = 0;
+                          getStepELe();
+                        }}>
+                        再看一遍
+                      </Button>
+                      <Button
+                        class={[styles.btn, styles.endBtn, styles.sacleBtn]}
+                        round
+                        type="primary"
+                        onClick={() => endGuide()}>
+                        完成
+                      </Button>
+                    </>
+                  ) : (
                     <Button
-                      class={[styles.btn,styles.sacleBtn]}
+                      class={[styles.btn, styles.sacleBtn]}
                       round
-                      color="transparent"
-                      style={{ "border-color": "#fff" }}
                       type="primary"
-                      onClick={() => {
-                        data.step = 0;
-                        getStepELe();
-                      }}
-                    >
-                      再看一遍
-                    </Button>
-                    <Button class={[styles.btn,styles.endBtn,styles.sacleBtn]} round type="primary" onClick={() =>endGuide()}>
-                      完成
+                      onClick={() => handleNext()}>
+                      下一步 ({data.step + 1}/{data.steps.length})
                     </Button>
-                  </>
-                ) : (
-                  <Button class={[styles.btn,styles.sacleBtn]} round type="primary" onClick={() => handleNext()}>
-
-                    下一步 ({data.step + 1}/{data.steps.length})
-                  </Button>
-                )}
+                  )}
+                </div>
               </div>
-            </div>
-          ))}
+            ))}
+          </div>
         </div>
-      </div>
       </Popup>
     );
-  },
+  }
 });

src/helpers/utils.ts

@@ -7,6 +7,32 @@ export const browser = () => {
   const u = navigator.userAgent;
   const isAndroid = /(?:Android)/.test(u);
   const isFireFox = /(?:Firefox)/.test(u);
+  function isIpadFun() {
+    const ua = window.navigator.userAgent;
+    let IsIPad = false;
+    if (/ipad/i.test(ua)) {
+      IsIPad = true;
+    }
+    // iPad from IOS13
+    const macApp = ua.match(/Macintosh/i) != null;
+    if (macApp) {
+      // need to distinguish between Macbook and iPad
+      const canvas = document.createElement('canvas');
+      if (canvas != null) {
+        const context: any =
+          canvas.getContext('webgl') || canvas.getContext('experimental-webgl');
+        if (context) {
+          const info = context.getExtension('WEBGL_debug_renderer_info');
+          if (info) {
+            const renderer = context.getParameter(info.UNMASKED_RENDERER_WEBGL);
+            if (renderer.indexOf('Apple') != -1) IsIPad = true;
+          }
+        }
+      }
+    }
+    return IsIPad;
+  }
+
   return {
     trident: u.indexOf('Trident') > -1, //IE内核
     presto: u.indexOf('Presto') > -1, //opera内核
@@ -24,7 +50,8 @@ export const browser = () => {
     isTablet:
       /(?:iPad|PlayBook)/.test(u) ||
       (isAndroid && !/(?:Mobile)/.test(u)) ||
-      (isFireFox && /(?:Tablet)/.test(u)),
+      (isFireFox && /(?:Tablet)/.test(u)) ||
+      isIpadFun(),
     iPad: u.indexOf('iPad') > -1, //是否iPad
     webApp: u.indexOf('Safari') == -1, //是否web应该程序，没有头部与底部
     weixin: u.indexOf('MicroMessenger') > -1, //是否微信 （2015-01-22新增）

src/views/co-ai/baseIndex.module.less

@@ -320,24 +320,30 @@
   }
 
   .directorySection {
-    width: 201px;
+    width: 181px;
 
     .directionc {
-      margin-top: 41px;
-      height: calc(100% - 41px);
+      margin-top: 36px;
+      height: calc(100% - 36px);
     }
 
     .dirItem {
-      height: 56px;
-      line-height: 56px;
-      font-size: 21px;
+      height: 46px;
+      line-height: 46px;
+      font-size: 17px;
     }
   }
 
+  .wrap {
+    padding: 0 10px;
+    padding-top: 18px;
+  }
+
   .wrapfirstI {
 
+
     .wrapItem {
-      padding: 0 42px
+      padding: 0 30px
     }
   }
 }

src/views/courseware-list/index.module.less

@@ -417,7 +417,7 @@
   .content {
     overflow-x: hidden;
     overflow-y: auto;
-    flex: none;
+    // flex: none;
   }
 
   .contentEmpty {
@@ -436,20 +436,20 @@
     padding: 0 26px 40px;
 
     .item {
-      height: 276px;
+      height: 186px;
     }
 
     .favoriteBtn {
-      top: 240px;
-      right: 40px;
+      top: 150px;
+      right: 35px;
     }
 
     .cover {
-      height: 276px;
+      height: 186px;
     }
 
     .name {
-      font-size: 20px;
+      font-size: 14px;
       line-height: 28px;
     }
   }

src/views/courseware-list/index.tsx

@@ -220,6 +220,7 @@ export default defineComponent({
         getLessonCourseware();
       }
     };
+    const contentContainerRef = ref();
     const handleChange = () => {
       if (data.tab === 'course') {
         bookVersionList.value = [
@@ -232,7 +233,12 @@ export default defineComponent({
       } else {
         bookVersionList.value = deepClone(baseBookVerionList.value);
       }
+
       getData();
+
+      if (contentContainerRef.value && browser().isTablet) {
+        contentContainerRef.value.scrollTo(0, 0);
+      }
     };
 
     const getSubjectList = async () => {
@@ -248,6 +254,7 @@ export default defineComponent({
       } catch {}
     };
     onMounted(async () => {
+      console.log(browser().isTablet, 'browser().isTablet');
       await getTanentList();
       await getSubjectList();
       getData();
@@ -350,7 +357,7 @@ export default defineComponent({
       <div
         class={[
           styles.container,
-          styles.containerTablet,
+          // styles.containerTablet,
           browser().isTablet ? styles.containerTablet : ''
         ]}>
         <div class={styles.head} style={{ opacity: data.showBook ? 0 : '' }}>
@@ -432,6 +439,7 @@ export default defineComponent({
         </div>
 
         <div
+          ref={contentContainerRef}
           class={[
             styles.content,
             data.list.length <= 0 && !data.loading ? styles.contentEmpty : ''

src/views/courseware-play/index.tsx

@@ -207,7 +207,8 @@ export default defineComponent({
             url:
               item.type === 'SONG'
                 ? 'https://oss.dayaedu.com/ktqy/1698420034679a22d3f7a.png'
-                : item.type === 'PPT' ? 'https://oss.dayaedu.com/ktqy/12/1701931810284.png' 
+                : item.type === 'PPT'
+                ? 'https://oss.dayaedu.com/ktqy/12/1701931810284.png'
                 : item.coverImg
           };
         });
@@ -812,7 +813,15 @@ export default defineComponent({
                       activeData.nowTime = Date.now();
                     }}>
                     {m.type === 'IMG' && <img src={m.content} />}
-                    {m.type === 'PPT' && <iframe src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(m.content)}`} width='100%' height='100%' frameborder='1'></iframe>}
+                    {m.type === 'PPT' && (
+                      <iframe
+                        src={`https://view.officeapps.live.com/op/embed.aspx?src=${encodeURIComponent(
+                          m.content
+                        )}`}
+                        width="100%"
+                        height="100%"
+                        frameborder="1"></iframe>
+                    )}
                     {m.type === 'VIDEO' && (
                       <img
                         src={m.coverImg}

src/views/creation/index-share.tsx

@@ -296,7 +296,11 @@ export default defineComponent({
       __init();
     });
     return () => (
-      <div class={styles.creation}>
+      <div
+        class={[
+          styles.creation,
+          browser().isTablet ? styles.creationTablet : ''
+        ]}>
         {/* <video
           src={state.musicDetail.videoUrl}
           style="width: 100%;height: 200px"
@@ -304,6 +308,7 @@ export default defineComponent({
         <div class={styles.playSection}>
           {state.playType === 'Video' && (
             <MVideo
+              class={styles.videoSection}
               src={state.musicDetail.videoUrl}
               poster={state.musicDetail?.videoImg || videoBg}
             />
@@ -432,26 +437,32 @@ export default defineComponent({
               onLoad={getList}
               immediateCheck={false}>
               <div class={styles.cellGroup}>
-                {state.list.map((item: any) => (
-                  <div class={styles.cell} onClick={() => onDetail(item)}>
-                    <div class={styles.cellImg}>
-                      <Image
-                        class={styles.cellImage}
-                        src={item.img}
-                        fit="cover"
-                      />
+                {[1, 2, 3, 4, , 5, 6, 7, 889, 9, 9, 5, 4, , 3, 3, 2, 2].map(
+                  () => (
+                    <>
+                      {state.list.map((item: any) => (
+                        <div class={styles.cell} onClick={() => onDetail(item)}>
+                          <div class={styles.cellImg}>
+                            <Image
+                              class={styles.cellImage}
+                              src={item.img}
+                              fit="cover"
+                            />
 
-                      <div class={styles.iconZan}>{item.likeNum}</div>
-                    </div>
-                    <div class={[styles.cellTitle, 'van-ellipsis']}>
-                      {item.musicSheetName}
-                    </div>
-                    <div class={styles.users}>
-                      <Image src={item.avatar} class={styles.userImg} />
-                      <span class={styles.name}>{item.username}</span>
-                    </div>
-                  </div>
-                ))}
+                            <div class={styles.iconZan}>{item.likeNum}</div>
+                          </div>
+                          <div class={[styles.cellTitle, 'van-ellipsis']}>
+                            {item.musicSheetName}
+                          </div>
+                          <div class={styles.users}>
+                            <Image src={item.avatar} class={styles.userImg} />
+                            <span class={styles.name}>{item.username}</span>
+                          </div>
+                        </div>
+                      ))}
+                    </>
+                  )
+                )}
               </div>
             </List>
           ) : (

src/views/creation/index.module.less

@@ -8,11 +8,13 @@
 
     .video-js .vjs-progress-control:hover .vjs-progress-holder {
       font-size: inherit !important;
+      outline: none;
     }
 
     .video-js .vjs-slider:focus {
       box-shadow: none !important;
       text-shadow: none !important;
+      outline: none;
     }
   }
 }
@@ -567,4 +569,133 @@
       line-height: 14px;
     }
   }
+}
+
+// 平板样式
+.creationTablet {
+
+  .videoSection {
+    height: 390px;
+  }
+
+  .audioSection {
+    height: 300px;
+
+    .audioContainer {
+      width: 400px;
+      height: 70px;
+      transform: translate(-50%, 120px);
+    }
+
+    .audioBox {
+      width: 152px;
+      height: 155px;
+
+      .audioPan {
+        left: 17px;
+        top: 14px;
+        width: 119px;
+        height: 120px;
+      }
+
+      .audioImg {
+        width: 65px;
+        height: 65px;
+      }
+
+      .audioPoint {
+        width: 14px;
+        height: 14px;
+      }
+
+      .audioZhen {
+        width: 52px;
+        height: 176px;
+        top: -60px;
+      }
+    }
+  }
+
+  .bottomSection {
+    .btnEdit {
+      height: 42px;
+      font-size: 18px;
+      padding: 0 32px
+    }
+  }
+
+  .bottomShare {
+    img {
+      width: 24px;
+      height: 24px;
+    }
+
+    span {
+      font-size: 15px;
+    }
+  }
+
+  .controls {
+    .slider {
+      width: 100%;
+      margin: 0 12px;
+      --van-slider-bar-height: 8px;
+      --van-slider-button-width: 20px !important;
+      --van-slider-button-height: 20px !important;
+      --van-slider-inactive-background: #fff;
+      --van-slider-active-background: #269EFE !important;
+    }
+
+    .actionBtn {
+      img {
+        width: 20px;
+        height: 20px;
+      }
+    }
+
+    .time {
+      font-size: 16px;
+    }
+  }
+
+  .cell {
+    .cellImage {
+      width: 99px;
+      height: 99px;
+
+
+    }
+
+    .cellImg {
+      &::before {
+        top: 2px;
+        width: 95px;
+        height: 95px;
+        right: -12px;
+      }
+
+      .iconZan {
+        font-size: 12px;
+        bottom: 8px;
+        left: 5px;
+        border-radius: 20px;
+        padding-right: 5px;
+
+
+        &::before {
+          padding-right: 3px;
+        }
+      }
+    }
+
+    margin-right: 34px;
+
+    &:nth-child(3n + 3) {
+      margin-right: 30px;
+    }
+
+    &:nth-child(5n + 5) {
+      margin-right: 0;
+    }
+  }
 }

src/views/creation/index.tsx

@@ -276,7 +276,11 @@ export default defineComponent({
       }
     });
     return () => (
-      <div class={styles.creation}>
+      <div
+        class={[
+          styles.creation,
+          browser().isTablet ? styles.creationTablet : ''
+        ]}>
         <MSticky position="top">
           <MHeader
             border={false}
@@ -286,6 +290,7 @@ export default defineComponent({
         <div class={styles.playSection}>
           {state.playType === 'Video' && (
             <MVideo
+              class={styles.videoSection}
               src={state.musicDetail?.videoUrl}
               poster={state.musicDetail?.videoImg || videoBg}
             />

src/views/knowledge-library/error-question-mode/index.module.less

@@ -122,4 +122,34 @@
 
 .primary {
   color: #1cacf1;
+}
+
+.unitDetailTablet {
+
+  .prevBtn,
+  .nextBtn,
+  .activePrevBtn {
+    width: 40% !important;
+    --van-button-default-height: 56px;
+  }
+
+  .prevBtn {
+    background: url('../images/prev_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .activePrevBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .nextBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .wapList {
+    width: 51px;
+    height: 56px;
+  }
 }

src/views/knowledge-library/error-question-mode/index.tsx

@@ -33,6 +33,7 @@ import request from '@/helpers/request';
 import { useRect } from '@vant/use';
 import MHeader from '@/components/m-header';
 import { useEventListener, useInterval, useWindowScroll } from '@vueuse/core';
+import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'unit-detail',
@@ -42,7 +43,7 @@ export default defineComponent({
     const swipeRef = ref();
     const state = reactive({
       background: 'transparent',
-      color: '#fff',
+      // color: '#323333',
       visiableError: false,
       visiableAnswer: false,
       id: route.query.id,
@@ -424,10 +425,8 @@ export default defineComponent({
         const { y } = useWindowScroll();
         if (y.value > 52) {
           state.background = '#fff';
-          state.color = '#323333';
         } else {
           state.background = 'transparent';
-          state.color = '#fff';
         }
       });
       await getExamDetails();
@@ -443,13 +442,13 @@ export default defineComponent({
       eventUnit.emit('unitAudioStop');
     });
     return () => (
-      <div class={styles.unitDetail}>
+      <div
+        class={[
+          styles.unitDetail,
+          browser().isTablet ? styles.unitDetailTablet : ''
+        ]}>
         <MSticky position="top">
-          <MHeader
-            border={false}
-            background={state.background}
-            color={state.color}
-          />
+          <MHeader border={false} background={state.background} />
         </MSticky>
         <Swipe
           loop={false}
@@ -716,7 +715,7 @@ export default defineComponent({
 
         <Popup
           v-model:show={state.visiableError}
-          style={{ width: '90%' }}
+          style={{ width: '90%',maxWidth: '520px' }}
           round
           closeOnClickOverlay={false}>
           <ErrorMode

src/views/knowledge-library/examination-mode/index.module.less

@@ -91,4 +91,34 @@
 
 .minutes {
   color: #1cacf1;
+}
+
+.unitDetailTablet {
+
+  .prevBtn,
+  .nextBtn,
+  .activePrevBtn {
+    width: 40% !important;
+    --van-button-default-height: 56px;
+  }
+
+  .prevBtn {
+    background: url('../images/prev_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .activePrevBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .nextBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .wapList {
+    width: 51px;
+    height: 56px;
+  }
 }

src/views/knowledge-library/examination-mode/index.tsx

@@ -45,7 +45,7 @@ export default defineComponent({
       lessonCoursewareId: route.query.lessonCoursewareId, // 教材编号
       studentUnitExaminationId: '', // 测验编号
       background: 'transparent',
-      color: '#fff',
+      // color: '#fff',
       visiableAnswer: false,
       examDetail: {} as any,
       currentIndex: 0,
@@ -383,10 +383,8 @@ export default defineComponent({
         const { y } = useWindowScroll();
         if (y.value > 52) {
           state.background = '#fff';
-          state.color = '#323333';
         } else {
           state.background = 'transparent';
-          state.color = '#fff';
         }
       });
       await getExamDetails();
@@ -402,13 +400,13 @@ export default defineComponent({
       eventUnit.emit('unitAudioStop');
     });
     return () => (
-      <div class={styles.unitDetail}>
+      <div
+        class={[
+          styles.unitDetail,
+          browser().isTablet ? styles.unitDetailTablet : ''
+        ]}>
         <MSticky position="top">
-          <MHeader
-            border={false}
-            background={state.background}
-            color={state.color}
-          />
+          <MHeader border={false} background={state.background} />
         </MSticky>
         <Swipe
           loop={false}

src/views/knowledge-library/index.module.less

@@ -220,4 +220,27 @@
       opacity: 0.3;
     }
   }
+}
+
+.knowledgeLibraryTablet {
+  .stickBtnGroup {
+
+    .prevBtn,
+    .nextBtn {
+      width: 36%;
+      height: 56px;
+      border: none;
+      margin: 0 10px;
+    }
+
+    .prevBtn {
+      background: url('./images/icon-up-point-tablet.png') no-repeat center;
+      background-size: contain;
+    }
+
+    .nextBtn {
+      background: url('./images/icon-down-point-tablet.png') no-repeat center;
+      background-size: contain;
+    }
+  }
 }

src/views/knowledge-library/practice-mode/index.module.less

@@ -104,4 +104,34 @@
 
 .primary {
   color: #1cacf1;
+}
+
+.unitDetailTablet {
+
+  .prevBtn,
+  .nextBtn,
+  .activePrevBtn {
+    width: 40% !important;
+    --van-button-default-height: 56px;
+  }
+
+  .prevBtn {
+    background: url('../images/prev_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .activePrevBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .nextBtn {
+    background: url('../images/next_btn_bg-tablet.png') no-repeat center;
+    background-size: contain;
+  }
+
+  .wapList {
+    width: 51px;
+    height: 56px;
+  }
 }

src/views/knowledge-library/practice-mode/index.tsx

@@ -46,7 +46,7 @@ export default defineComponent({
       knowledgePointIds: route.query.knowledgePointIds, // 智能组卷 多个编号
       lessonCoursewareId: route.query.lessonCoursewareId, // 教材编号
       background: 'transparent',
-      color: '#fff',
+      // color: '#fff',
       visiableError: false,
       visiableAnswer: false,
       id: route.query.id,
@@ -341,10 +341,8 @@ export default defineComponent({
         const { y } = useWindowScroll();
         if (y.value > 52) {
           state.background = '#fff';
-          state.color = '#323333';
         } else {
           state.background = 'transparent';
-          state.color = '#fff';
         }
       });
       await getExamDetails();
@@ -360,13 +358,13 @@ export default defineComponent({
       eventUnit.emit('unitAudioStop');
     });
     return () => (
-      <div class={styles.unitDetail}>
+      <div
+        class={[
+          styles.unitDetail,
+          browser().isTablet ? styles.unitDetailTablet : ''
+        ]}>
         <MSticky position="top">
-          <MHeader
-            border={false}
-            background={state.background}
-            color={state.color}
-          />
+          <MHeader border={false} background={state.background} />
         </MSticky>
         <Swipe
           loop={false}
@@ -585,7 +583,7 @@ export default defineComponent({
 
         <Popup
           v-model:show={state.visiableError}
-          style={{ width: '90%' }}
+          style={{ width: '90%', maxWidth: '520px' }}
           round
           closeOnClickOverlay={false}>
           <ErrorMode

src/views/knowledge-library/unit-detail.tsx

@@ -240,7 +240,11 @@ export default defineComponent({
       await getPointList();
     });
     return () => (
-      <div class={styles.knowledgeLibrary}>
+      <div
+        class={[
+          styles.knowledgeLibrary,
+          browser().isTablet ? styles.knowledgeLibraryTablet : ''
+        ]}>
         <MSticky position="top">
           <MHeader
             border={false}

src/views/knowledge-library/wroing-book/index.module.less

@@ -51,4 +51,4 @@
     margin-bottom: 16px;
     width: 100%;
   }
-}
+}

src/views/knowledge-library/wroing-book/index.tsx

@@ -7,6 +7,9 @@ import { Image, showToast } from 'vant';
 import AiExam from './images/ai-exam.png';
 import WoringPractice from './images/woring-practice.png';
 import WoringStat from './images/woring-stat.png';
+import AiExamTablet from './images/ai-exam-tablet.png';
+import WoringPracticeTablet from './images/woring-practice-tablet.png';
+import WoringStatTablet from './images/woring-stat-tablet.png';
 import request from '@/helpers/request';
 import { browser } from '@/helpers/utils';
 import { postMessage } from '@/helpers/native-message';
@@ -44,7 +47,11 @@ export default defineComponent({
       }
     };
     return () => (
-      <div class={styles.woringBook}>
+      <div
+        class={[
+          styles.woringBook,
+          browser().isTablet ? styles.woringBookTablet : ''
+        ]}>
         <MSticky position="top">
           <MHeader border={false} background="transparent">
             {{
@@ -77,7 +84,7 @@ export default defineComponent({
           <Image
             {...{ id: 'woring-0' }}
             lazyLoad
-            src={WoringStat}
+            src={browser().isTablet ? WoringStatTablet : WoringStat}
             class={styles.woringImg}
             onClick={() => router.push('wroing-stat')}
           />
@@ -85,14 +92,14 @@ export default defineComponent({
           <Image
             {...{ id: 'woring-1' }}
             lazyLoad
-            src={WoringPractice}
+            src={browser().isTablet ? WoringPracticeTablet : WoringPractice}
             class={styles.woringImg}
             onClick={onErrorPractice}
           />
           <Image
             {...{ id: 'woring-2' }}
             lazyLoad
-            src={AiExam}
+            src={browser().isTablet ? AiExamTablet : AiExam}
             class={styles.woringImg}
             onClick={() => router.push('ai-exam')}
           />

src/views/member-center/index.module.less

@@ -223,6 +223,7 @@
       padding: 0 17px;
       font-size: 16px;
       color: #772A27;
+      font-weight: 400;
       border: none;
     }
 
@@ -293,4 +294,34 @@
     width: 29px;
     height: 29px;
   }
+}
+
+.memberCenterTablet {
+  background: url('./images/bg-tablet.png') top center no-repeat;
+  background-size: contain;
+
+  .memberItem {
+    background: url('./images/vip_bg-tablet.png') no-repeat center;
+    background-size: cover;
+  }
+
+  .memberGift {
+    background: url('./images/vip_bg2-tablet.png') no-repeat center;
+    background-size: cover;
+  }
+
+  .btnGroup {
+    .btn {
+      font-size: 20px;
+      padding: 7px 25px;
+      height: 48px;
+      line-height: 48px;
+    }
+
+    .priceSection {
+      .price {
+        font-size: 21px;
+      }
+    }
+  }
 }

src/views/member-center/index.tsx

@@ -5,10 +5,12 @@ import request from '@/helpers/request';
 import iconStudent from '@common/images/icon-student.png';
 import iconMemberLogo from './images/member_logo.png';
 import iconGift from '../student-register/images/icon-gift.png';
-import { moneyFormat } from '@/helpers/utils';
+import { browser, moneyFormat } from '@/helpers/utils';
 import OHeader from '@/components/m-header';
 import member1 from './images/member-1.png';
 import member2 from './images/member-2.png';
+import member1Tablet from './images/member-1-tablet.png';
+import member2Tablet from './images/member-2-tablet.png';
 import ODialog from '@/components/m-dialog';
 import { useEventListener, useWindowScroll } from '@vueuse/core';
 import dayjs from 'dayjs';
@@ -22,7 +24,6 @@ export default defineComponent({
       users: {} as any,
       memberStatus: false,
       background: 'transparent',
-      color: '#fff',
       showTips: false,
       showMessage: ''
     };
@@ -47,10 +48,8 @@ export default defineComponent({
       const { y } = useWindowScroll();
       if (y.value > 15) {
         this.background = '#fff';
-        this.color = '#323333';
       } else {
         this.background = 'transparent';
-        this.color = '#fff';
       }
     });
 
@@ -188,12 +187,12 @@ export default defineComponent({
   },
   render() {
     return (
-      <div class={styles['member-center']}>
-        <OHeader
-          background={this.background}
-          color={this.color}
-          border={false}
-        />
+      <div
+        class={[
+          styles['member-center'],
+          browser().isTablet ? styles.memberCenterTablet : ''
+        ]}>
+        <OHeader background={this.background} border={false} />
         <div class={styles.member_container}>
           <Cell
             class={[styles.userMember]}
@@ -285,8 +284,17 @@ export default defineComponent({
           </div>
 
           <div class={styles.memberImgs}>
-            <img src={member1} />
-            <img src={member2} />
+            {browser().isTablet ? (
+              <>
+                <img src={member1Tablet} />
+                <img src={member2Tablet} />
+              </>
+            ) : (
+              <>
+                <img src={member1} />
+                <img src={member2} />
+              </>
+            )}
           </div>
         </div>