添加课件，小酷AIpad样式

src/helpers/utils.ts

@@ -3,7 +3,10 @@ import dayjs from 'dayjs';
 import qs from 'query-string';
 
 export const browser = () => {
+  // https://blog.csdn.net/qq_19309473/article/details/124138954
   const u = navigator.userAgent;
+  const isAndroid = /(?:Android)/.test(u);
+  const isFireFox = /(?:Firefox)/.test(u);
   return {
     trident: u.indexOf('Trident') > -1, //IE内核
     presto: u.indexOf('Presto') > -1, //opera内核
@@ -18,6 +21,10 @@ export const browser = () => {
       u.indexOf('COLEXIUAPPI') > -1 ||
       u.indexOf('COLEXIUAPPA') > -1 ||
       u.indexOf('Adr') > -1,
+    isTablet:
+      /(?:iPad|PlayBook)/.test(u) ||
+      (isAndroid && !/(?:Mobile)/.test(u)) ||
+      (isFireFox && /(?:Tablet)/.test(u)),
     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

@@ -166,6 +166,8 @@
   height: calc(100% * 161 / 128);
 }
 
+
+
 .wrapItem {
   position: relative;
   // width: 132px;
@@ -310,3 +312,32 @@
     }
   }
 }
+
+// 平板
+.containerTablet {
+  .centerSearch {
+    width: 92%;
+  }
+
+  .directorySection {
+    width: 201px;
+
+    .directionc {
+      margin-top: 41px;
+      height: calc(100% - 41px);
+    }
+
+    .dirItem {
+      height: 56px;
+      line-height: 56px;
+      font-size: 21px;
+    }
+  }
+
+  .wrapfirstI {
+
+    .wrapItem {
+      padding: 0 42px
+    }
+  }
+}

src/views/co-ai/baseIndex.tsx

@@ -25,6 +25,7 @@ import queryString from 'query-string';
 import { useRect } from '@vant/use';
 import { nextTick } from 'process';
 import iconDefaultCo from './image/icon-default-co.png';
+import { browser } from '@/helpers/utils';
 
 export default defineComponent({
   name: 'baseIndex-list',
@@ -169,7 +170,11 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={styles.container}>
+      <div
+        class={[
+          styles.container,
+          browser().isTablet ? styles.containerTablet : ''
+        ]}>
         {/* <div class={styles.head} style={{ opacity: data.showBook ? 0 : '' }}>
           <div class={styles.back} onClick={goback}>
             <img src={icon_back} />
@@ -179,7 +184,7 @@ export default defineComponent({
           <img src={icon_back} />
         </div>
 
-        <div class={styles.centerSearch}>
+        <div class={[styles.centerSearch]}>
           <div id="coai-0">
             <MSearch
               class={[
@@ -190,18 +195,6 @@ export default defineComponent({
               background="transparent"
               clearable={false}
               placeholder="请输入关键字"
-              // modelValue={forms.keyword}
-              // onFocus={() => (data.searchNoticeShow = false)}
-              // onBlur={val => {
-              //   musicForms.keyword = val?.trim() || '';
-              //   requestAnimationFrame(() => {
-              //     requestAnimationFrame(() => {
-              //       if (musicForms.keyword) {
-              //         data.searchNoticeShow = true;
-              //       }
-              //     });
-              //   });
-              // }}
               onSearch={val => {
                 forms.keyword = val;
                 getList();
@@ -238,7 +231,7 @@ export default defineComponent({
               ref={wrapRef}>
               {data.list.map((item, index) => {
                 return (
-                  <div class={styles.wrapfirstI}>
+                  <div class={[styles.wrapfirstI]}>
                     <div
                       ref={(el: any) => (wrapItemRef.value[index] = el)}
                       class={[

src/views/co-ai/index.tsx

@@ -42,6 +42,7 @@ import TheVip from '@/components/the-vip';
 import request from '@/helpers/request';
 import { useRoute } from 'vue-router';
 import { addWatermark, convasToImg, imgToCanvas } from './imageFunction';
+import { browser } from '@/helpers/utils';
 export default defineComponent({
   name: 'co-ai',
   setup() {

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

@@ -5,8 +5,7 @@
   width: 100vw;
   height: 100vh;
   overflow: hidden;
-  background: url('../../common/images/icon_bg.png') no-repeat center center /
-    cover;
+  background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
   display: flex;
   flex-direction: column;
 }
@@ -268,18 +267,14 @@
     height: 100%;
     z-index: 2;
     background-repeat: no-repeat;
-    background-image: linear-gradient(
-        to right,
+    background-image: linear-gradient(to right,
         rgba(0, 0, 0, 0.2) 0,
         rgba(255, 255, 255, 0.08) 0%,
-        transparent 0.5%
-      ),
-      linear-gradient(
-        to right,
+        transparent 0.5%),
+      linear-gradient(to right,
         rgba(0, 0, 0, 0.1) 0.3%,
         rgba(255, 255, 255, 0.09) 1.1%,
-        transparent 1.3%
-      );
+        transparent 1.3%);
     background-size: 50% 100%, 50% 100%;
     background-position: 0% top, 9% top;
   }
@@ -292,6 +287,7 @@
       transition: opacity 0.3s ease-in-out;
     }
   }
+
   &.loaded {
     img {
       opacity: 1;
@@ -415,3 +411,46 @@
     }
   }
 }
+
+// 平板样式
+.containerTablet {
+  .content {
+    overflow-x: hidden;
+    overflow-y: auto;
+    flex: none;
+  }
+
+  .contentEmpty {
+    flex: 1;
+  }
+
+  .wrap {
+    padding: 20px 20px 0;
+    flex-wrap: wrap;
+    width: 100%;
+  }
+
+  .wrapItem {
+    width: 20%;
+    // height: 348px;
+    padding: 0 26px 40px;
+
+    .item {
+      height: 276px;
+    }
+
+    .favoriteBtn {
+      top: 240px;
+      right: 40px;
+    }
+
+    .cover {
+      height: 276px;
+    }
+
+    .name {
+      font-size: 20px;
+      line-height: 28px;
+    }
+  }
+}

src/views/courseware-list/index.tsx

@@ -46,6 +46,7 @@ import './turn.js';
 import MEmpty from '@/components/m-empty';
 import deepClone from '@/helpers/deep-clone';
 import book from './component/book';
+import { browser } from '@/helpers/utils';
 
 export const BOOK_DATA = {
   grades: [
@@ -346,7 +347,12 @@ export default defineComponent({
     };
 
     return () => (
-      <div class={styles.container}>
+      <div
+        class={[
+          styles.container,
+          styles.containerTablet,
+          browser().isTablet ? styles.containerTablet : ''
+        ]}>
         <div class={styles.head} style={{ opacity: data.showBook ? 0 : '' }}>
           <div class={styles.back} onClick={goback}>
             <img src={icon_back} />
@@ -425,7 +431,11 @@ export default defineComponent({
           </Popover> */}
         </div>
 
-        <div class={styles.content}>
+        <div
+          class={[
+            styles.content,
+            data.list.length <= 0 && !data.loading ? styles.contentEmpty : ''
+          ]}>
           <div
             class={[
               styles.wrap,