更新

src/views/courseware-play/component/chapter.module.less

@@ -13,7 +13,7 @@
 .pointHead {
   display: flex;
   align-items: center;
-  padding: 13px 10px 15px 15px;
+  padding: 16px 10px 12px 13px;
   flex-shrink: 0;
   font-size: 14px;
 
@@ -28,10 +28,34 @@
   flex: 1;
   overflow-x: hidden;
   overflow-y: auto;
-  padding: 0 20px;
+  padding: 0 7px;
 
   &::-webkit-scrollbar {
     width: 0;
     display: none;
   }
+}
+
+.collapse {
+
+  .collapseItem {
+    padding: 7px;
+  }
+
+  :global {
+    .van-cell {
+      background: transparent;
+      font-size: 13px;
+      color: #777;
+      padding: 0;
+      border: none;
+      line-height: 18px;
+    }
+  }
+
+  .arrow {
+    width: 12px;
+    height: 12px;
+    margin-right: 5px;
+  }
 }

src/views/courseware-play/component/chapter.tsx

@@ -1,17 +1,115 @@
-import { defineComponent } from 'vue';
+import { defineComponent, reactive } from 'vue';
 import styles from './chapter.module.less';
 import iconMenuChapter from '../image/icon-menu-chapter.svg';
+import { Collapse, CollapseItem, Icon, Image } from 'vant';
+import chapterDown from '../image/chapter-down-arrow.svg';
+import chapterDefault from '../image/chapter-default-arrow.svg';
+import chapterVideo from '../image/chapter-video.svg';
 
 export default defineComponent({
   name: 'chapter',
   setup() {
+    const pointData = reactive({
+      active: ''
+    });
     return () => (
       <div class={styles.container}>
         <div class={styles.pointHead}>
           <img src={iconMenuChapter} />
           切换章节
         </div>
-        <div class={styles.content}></div>
+        <div class={styles.content}>
+          <Collapse
+            class={styles.collapse}
+            modelValue={pointData.active}
+            onUpdate:modelValue={(val: any) => {
+              pointData.active = val;
+            }}
+            border={false}
+            accordion>
+            <CollapseItem
+              center
+              class={styles.collapseItem}
+              border={false}
+              isLink={false}
+              title={'第一种'}
+              name={1}>
+              {{
+                default: () => (
+                  <>
+                    <div
+                      class={[
+                        styles.item
+                        // props.itemActive == n.id ? styles.itemActive : ''
+                      ]}
+                      onClick={() => {
+                        // emit('handleSelect', {
+                        //   itemActive: n.id,
+                        //   tabActive: item.id,
+                        //   tabName: item.name
+                        // });
+                      }}>
+                      <Image src={chapterVideo} class={styles.itemImage} />
+                      <span style={{ width: '80%' }} class="van-ellipsis">
+                        章节名称
+                      </span>
+                    </div>
+                    <div
+                      class={[
+                        styles.item
+                        // props.itemActive == n.id ? styles.itemActive : ''
+                      ]}
+                      onClick={() => {
+                        // emit('handleSelect', {
+                        //   itemActive: n.id,
+                        //   tabActive: item.id,
+                        //   tabName: item.name
+                        // });
+                      }}>
+                      <Image src={chapterVideo} class={styles.itemImage} />
+                      <span style={{ width: '80%' }} class="van-ellipsis">
+                        章节名称
+                      </span>
+                    </div>
+                  </>
+                ),
+                icon: () => <img class={styles.arrow} src={chapterDefault} />
+              }}
+            </CollapseItem>
+            <CollapseItem
+              center
+              class={styles.collapseItem}
+              border={false}
+              isLink={false}
+              title={'第二种'}
+              name={1}>
+              {{
+                default: () => (
+                  <>
+                    <div
+                      class={[
+                        styles.item
+                        // props.itemActive == n.id ? styles.itemActive : ''
+                      ]}
+                      onClick={() => {
+                        // emit('handleSelect', {
+                        //   itemActive: n.id,
+                        //   tabActive: item.id,
+                        //   tabName: item.name
+                        // });
+                      }}>
+                      <Image src={chapterVideo} class={styles.itemImage} />
+                      <span style={{ width: '80%' }} class="van-ellipsis">
+                        章节名称
+                      </span>
+                    </div>
+                  </>
+                ),
+                icon: () => <img class={styles.arrow} src={chapterDefault} />
+              }}
+            </CollapseItem>
+          </Collapse>
+        </div>
       </div>
     );
   }

src/views/courseware-play/image/chapter-default-arrow.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="修改页面8.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="5、切换单元备份-3" transform="translate(-558.000000, -246.000000)" fill="#AAAAAA">
+            <g id="编组-9" transform="translate(542.000000, 0.000000)">
+                <g id="编组-5" transform="translate(16.000000, 242.000000)">
+                    <g id="展开更多备份" transform="translate(6.000000, 10.000000) rotate(-90.000000) translate(-6.000000, -10.000000) translate(0.000000, 4.000000)">
+                        <path d="M6.38411064,3.96093277 L10.3165898,8.6799078 C10.4933719,8.89204625 10.4647098,9.2073286 10.2525714,9.38411064 C10.1627139,9.45899189 10.0494474,9.5 9.93247919,9.5 L2.06752081,9.5 C1.79137843,9.5 1.56752081,9.27614237 1.56752081,9 C1.56752081,8.88303175 1.60852892,8.7697653 1.68341017,8.6799078 L5.61588936,3.96093277 C5.7926714,3.74879432 6.10795375,3.72013229 6.3200922,3.89691433 C6.34332373,3.91627394 6.36475103,3.93770124 6.38411064,3.96093277 Z" id="展开更多" transform="translate(6.000000, 6.500000) rotate(-180.000000) translate(-6.000000, -6.500000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-play/image/chapter-down-arrow.svg

@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="12px" height="12px" viewBox="0 0 12 12" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <g id="修改页面8.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="5、切换单元备份-3" transform="translate(-558.000000, -62.000000)" fill="#1C9AF7">
+            <g id="编组-9" transform="translate(542.000000, 0.000000)">
+                <g id="编组-11" transform="translate(16.000000, 58.000000)">
+                    <g id="展开更多" transform="translate(0.000000, 4.000000)">
+                        <path d="M6.38411064,3.96093277 L10.3165898,8.6799078 C10.4933719,8.89204625 10.4647098,9.2073286 10.2525714,9.38411064 C10.1627139,9.45899189 10.0494474,9.5 9.93247919,9.5 L2.06752081,9.5 C1.79137843,9.5 1.56752081,9.27614237 1.56752081,9 C1.56752081,8.88303175 1.60852892,8.7697653 1.68341017,8.6799078 L5.61588936,3.96093277 C5.7926714,3.74879432 6.10795375,3.72013229 6.3200922,3.89691433 C6.34332373,3.91627394 6.36475103,3.93770124 6.38411064,3.96093277 Z" transform="translate(6.000000, 6.500000) rotate(-180.000000) translate(-6.000000, -6.500000) "></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/views/courseware-play/image/chapter-video.svg

@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="16px" height="16px" viewBox="0 0 16 16" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <linearGradient x1="19.0447587%" y1="-4.51028104e-15%" x2="79.7055169%" y2="97.9814009%" id="linearGradient-1">
+            <stop stop-color="#FFC9C4" offset="0%"></stop>
+            <stop stop-color="#FF928B" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="19.0447587%" y1="25.5626814%" x2="80.9552413%" y2="100%" id="linearGradient-2">
+            <stop stop-color="#FFB469" offset="0%"></stop>
+            <stop stop-color="#ACD7FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M11.2061398,15.0811719 L11.1701517,15.0811719 L0.622734167,14.4679427 C0.268458993,14.4402344 -0.00389343752,14.1403646 4.21151333e-05,13.7819792 L4.21151333e-05,1.29791667 C-0.00389343752,0.93953125 0.268458993,0.63984375 0.622734167,0.611953125 L11.1701517,2.22044605e-16 L11.2075866,2.22044605e-16 C11.5768719,0.007109375 11.8712874,0.313541667 11.8662881,0.685963542 L11.8662881,14.395026 C11.8703832,14.7676302 11.575606,15.0740625 11.2061398,15.0811719 Z M4.51614418,5.24507813 C4.14034846,5.24507813 3.83562479,5.55223958 3.83562479,5.93104167 L3.83562479,9.13901042 C3.83562479,9.5178125 4.14034846,9.82497396 4.51614418,9.82497396 C4.63256363,9.82437819 4.74688482,9.79368631 4.84817543,9.73583333 L7.67496218,8.13221354 C7.89026679,8.01173235 8.02309534,7.78233446 8.02129854,7.53411458 C8.02308862,7.28601563 7.89034846,7.05651042 7.67496218,6.93601563 L4.84817543,5.333125 C4.74709003,5.27558408 4.63295746,5.24537832 4.51686756,5.24544271 L4.51614418,5.24544271 L4.51614418,5.24507813 Z" id="path-3"></path>
+    </defs>
+    <g id="修改页面8.18" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="5、切换单元备份-3" transform="translate(-578.000000, -95.000000)" fill-rule="nonzero">
+            <g id="编组-9" transform="translate(542.000000, 0.000000)">
+                <g id="编组-11" transform="translate(16.000000, 58.000000)">
+                    <g id="编组-4" transform="translate(20.000000, 36.000000)">
+                        <g id="视频" transform="translate(0.000000, 1.000000)">
+                            <g id="课程填充" transform="translate(1.000000, 0.460000)">
+                                <path d="M10.8209402,12.9246615 L12.873349,13.0227344 C13.2368473,13.0653906 13.565985,12.8027083 13.6081219,12.4361198 C13.609207,12.4260938 13.6101112,12.4160677 13.6108346,12.4060417 L13.6108346,2.66583333 C13.5855163,2.29778646 13.2690377,2.01997396 12.9039118,2.0453125 C12.8928803,2.04604167 12.8820296,2.04713542 12.8711789,2.04841146 L10.81877,2.14648438" id="路径" fill="#A6CAEC"></path>
+                                <g id="形状">
+                                    <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+                                    <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>