小酷AI0.0.1

src/common/images/icon-search.svg

@@ -0,0 +1,16 @@
+<?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>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" stroke-linejoin="round">
+        <g id="小酷Ai-2备份-2" transform="translate(-198.000000, -66.000000)" stroke="#1CACF1" stroke-width="1.5">
+            <g id="编组-3" transform="translate(175.000000, 50.000000)">
+                <g id="编组-3" transform="translate(10.000000, 7.000000)">
+                    <g id="搜索" transform="translate(13.000000, 9.000000)">
+                        <path d="M7.31169456,13.6233891 C10.7969053,13.6233891 13.6233891,10.7976421 13.6233891,7.31169456 C13.6233891,3.82574698 10.7969053,1 7.31169456,1 C3.82648381,1 1,3.82574698 1,7.31169456 C1,10.7976421 3.82648381,13.6233891 7.31169456,13.6233891 Z" id="Stroke-1"></path>
+                        <line x1="11.8492474" y1="11.8489526" x2="14.9992" y2="14.9996421" id="Stroke-5" stroke-linecap="round"></line>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/common/images/icon_down.svg

@@ -0,0 +1,56 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>fenxiang</title>
+    <defs>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
+            <stop stop-color="#168ADB" offset="0%"></stop>
+            <stop stop-color="#1B69EE" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="19.2597187%" y1="27.4845696%" x2="75.2308962%" y2="82.0183797%" id="linearGradient-2">
+            <stop stop-color="#449DFF" offset="0%"></stop>
+            <stop stop-color="#3FA2FF" offset="42.6513338%"></stop>
+            <stop stop-color="#3052C1" offset="100%"></stop>
+        </linearGradient>
+        <path d="M4.2,6.92708333 L4.2,0 L9.8,0 L9.8,6.92708333 L14,6.92708333 L7,13.8541667 L0,6.92708333 L4.2,6.92708333 Z M0.692708333,14.2395833 L13.3072917,14.2395833 C13.6898639,14.2395833 14,14.5497194 14,14.9322917 C14,15.3148639 13.6898639,15.625 13.3072917,15.625 L0.692708333,15.625 C0.310136085,15.625 4.6851588e-17,15.3148639 0,14.9322917 C-4.6851588e-17,14.5497194 0.310136085,14.2395833 0.692708333,14.2395833 Z" id="path-3"></path>
+        <filter x="-10.7%" y="-9.6%" width="121.4%" height="119.2%" filterUnits="objectBoundingBox" id="filter-4">
+            <feGaussianBlur stdDeviation="1" in="SourceAlpha" result="shadowBlurInner1"></feGaussianBlur>
+            <feOffset dx="1" dy="-1" in="shadowBlurInner1" result="shadowOffsetInner1"></feOffset>
+            <feComposite in="shadowOffsetInner1" in2="SourceAlpha" operator="arithmetic" k2="-1" k3="1" result="shadowInnerInner1"></feComposite>
+            <feColorMatrix values="0 0 0 0 1   0 0 0 0 1   0 0 0 0 1  0 0 0 0.21454583 0" type="matrix" in="shadowInnerInner1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="100%" y1="2.28634228%" x2="21.0815521%" y2="97.7136577%" id="linearGradient-5">
+            <stop stop-color="#FFFFFF" stop-opacity="0.39549074" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-33.5%" y="-34.3%" width="167.0%" height="168.6%" filterUnits="objectBoundingBox" id="filter-6">
+            <feGaussianBlur stdDeviation="0.14832" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+        <linearGradient x1="53.125%" y1="0%" x2="48.192597%" y2="100%" id="linearGradient-7">
+            <stop stop-color="#FFFFFF" stop-opacity="0.39549074" offset="0%"></stop>
+            <stop stop-color="#FFFFFF" offset="100%"></stop>
+        </linearGradient>
+        <filter x="-44.5%" y="-11.1%" width="189.0%" height="122.2%" filterUnits="objectBoundingBox" id="filter-8">
+            <feGaussianBlur stdDeviation="0.14832" in="SourceGraphic"></feGaussianBlur>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="小酷Ai-2备份-2" transform="translate(-605.000000, -291.000000)">
+            <g id="编组-8" transform="translate(503.000000, 52.000000)">
+                <g id="fenxiang" transform="translate(103.000000, 240.000000)">
+                    <circle id="椭圆形" stroke="#FFFFFF" fill-opacity="0.607336511" fill="#FFFFFF" stroke-linecap="square" cx="15" cy="15" r="15"></circle>
+                    <g id="编组-8" opacity="0.8" transform="translate(8.000000, 7.000000)" fill-rule="nonzero">
+                        <g id="编组">
+                            <g id="形状" opacity="0.864725749">
+                                <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+                                <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+                                <use fill="black" fill-opacity="1" filter="url(#filter-4)" xlink:href="#path-3"></use>
+                            </g>
+                            <ellipse id="椭圆形备份-4" fill="url(#linearGradient-5)" opacity="0.578813099" filter="url(#filter-6)" cx="6.90992367" cy="11.9353424" rx="1" ry="1"></ellipse>
+                            <path d="M9.5,8 C9.77614237,8 10,8.22385763 10,8.5 L10,11.5 C10,11.7761424 9.77614237,12 9.5,12 C9.22385763,12 9,11.7761424 9,11.5 L9,8.5 C9,8.22385763 9.22385763,8 9.5,8 Z" id="矩形" fill="url(#linearGradient-7)" opacity="0.578813099" filter="url(#filter-8)" transform="translate(9.500000, 10.000000) rotate(45.000000) translate(-9.500000, -10.000000) "></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/common/images/icon_play.svg

@@ -0,0 +1,32 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>切片</title>
+    <defs>
+        <linearGradient x1="-18.8072991%" y1="100%" x2="79.3329805%" y2="50%" id="linearGradient-1">
+            <stop stop-color="#5BECFF" offset="0%"></stop>
+            <stop stop-color="#259CFE" offset="100%"></stop>
+        </linearGradient>
+        <path d="M15.6029464,13.4596875 L10.1458929,16.8203571 C9.74282143,17.0685804 9.21482143,16.9430357 8.96657143,16.5399643 C8.88334767,16.4048171 8.83928571,16.2492166 8.83928571,16.0905 L8.83928571,7.9095 C8.83928571,7.43611607 9.22304464,7.05235714 9.69642857,7.05235714 C9.85514513,7.05235714 10.0107457,7.0964191 10.1458929,7.17964286 L15.6029464,10.5403125 C16.4091161,11.0367857 16.6601786,12.0927589 16.1637054,12.8989286 C16.023184,13.127108 15.8311258,13.3191661 15.6029464,13.4596875 L15.6029464,13.4596875 Z" id="path-2"></path>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="小酷Ai-2备份-2" transform="translate(-450.000000, -121.000000)" fill-rule="nonzero">
+            <g id="编组-3" transform="translate(175.000000, 50.000000)">
+                <g id="编组-14-+-编组-9-+-编组-6-+-编组-6备份-+-编组-6备份-2蒙版" transform="translate(0.000000, 44.000000)">
+                    <g id="编组-14" transform="translate(8.000000, 8.000000)">
+                        <g id="编组-6" transform="translate(6.000000, 5.000000)">
+                            <g id="曲谱列表/文案" transform="translate(61.000000, 3.000000)">
+                                <g id="编组" transform="translate(200.000000, 11.000000)">
+                                    <path d="M12,24 C5.37257143,24 0,18.6274286 0,12 C0,5.37257143 5.37257143,0 12,0 C18.6274286,0 24,5.37257143 24,12 C24,18.6274286 18.6274286,24 12,24 Z" id="路径" fill="#E0F2F7" opacity="0.597249"></path>
+                                    <g id="形状">
+                                        <use fill="#2DC7AA" xlink:href="#path-2"></use>
+                                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
+                                    </g>
+                                </g>
+                            </g>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/common/images/icon_start.svg

@@ -0,0 +1,55 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="106px" height="30px" viewBox="0 0 106 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>按钮/小按钮/橙</title>
+    <defs>
+        <linearGradient x1="15.3622126%" y1="47.2035312%" x2="89.7647319%" y2="52.9528289%" id="linearGradient-1">
+            <stop stop-color="#FF9C63" offset="0%"></stop>
+            <stop stop-color="#FF7144" offset="100%"></stop>
+        </linearGradient>
+        <linearGradient x1="-67.2865798%" y1="54.004984%" x2="100%" y2="50%" id="linearGradient-2">
+            <stop stop-color="#5BECFF" offset="0%"></stop>
+            <stop stop-color="#259CFE" offset="100%"></stop>
+        </linearGradient>
+        <rect id="path-3" x="0" y="0" width="106" height="30" rx="15"></rect>
+        <text id="text-4" font-family="PingFangSC-Medium, PingFang SC" font-size="16" font-weight="400" fill="#FFFFFF">
+            <tspan x="31" y="20">开始练习</tspan>
+        </text>
+        <filter x="-3.1%" y="-4.5%" width="106.2%" height="118.2%" filterUnits="objectBoundingBox" id="filter-5">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.108514357   0 0 0 0 0.562412481   0 0 0 0 0.907525104  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-6">
+            <stop stop-color="#FCFFFF" offset="0%"></stop>
+            <stop stop-color="#D4F1FF" offset="100%"></stop>
+        </linearGradient>
+        <path d="M10,0 C15.5228475,0 20,4.4771525 20,10 C20,15.5228475 15.5228475,20 10,20 C4.4771525,20 0,15.5228475 0,10 C0,4.4771525 4.4771525,0 10,0 Z M15.8740909,4.13727273 C15.7362351,3.65455394 15.2331964,3.37495234 14.7504546,3.51272728 L10.205,4.81181817 C9.89624241,4.89978885 9.65677854,5.14409039 9.57499999,5.45454546 L9.54545455,5.45454546 L9.54590909,11.0254545 C8.4211929,10.2420678 6.92120134,10.2669785 5.82311793,11.0872797 C4.72503453,11.907581 4.27567032,13.3388975 4.70785225,14.6396281 C5.14003419,15.9403587 6.35662277,16.8181818 7.72727272,16.8181818 L7.83636363,16.8163636 C9.5501842,16.7575695 10.9091192,15.3511924 10.9090909,13.6363636 L10.9090909,8.24636364 L15.25,7.00636364 C15.6400039,6.89481163 15.9089107,6.53837105 15.9090909,6.13272727 L15.9090909,4.38727272 C15.9090909,4.30271722 15.8973272,4.21857285 15.8740909,4.13727273 Z" id="path-7"></path>
+        <filter x="-10.0%" y="-5.0%" width="120.0%" height="120.0%" filterUnits="objectBoundingBox" id="filter-8">
+            <feOffset dx="0" dy="1" in="SourceAlpha" result="shadowOffsetOuter1"></feOffset>
+            <feGaussianBlur stdDeviation="0.5" in="shadowOffsetOuter1" result="shadowBlurOuter1"></feGaussianBlur>
+            <feColorMatrix values="0 0 0 0 0.108514357   0 0 0 0 0.562412481   0 0 0 0 0.907525104  0 0 0 1 0" type="matrix" in="shadowBlurOuter1"></feColorMatrix>
+        </filter>
+    </defs>
+    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="小酷Ai-2备份-2" transform="translate(-672.000000, -292.000000)">
+            <g id="编组-8" transform="translate(503.000000, 52.000000)">
+                <g id="编组-2" transform="translate(169.000000, 240.000000)">
+                    <g id="button-normal">
+                        <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
+                        <use fill="url(#linearGradient-2)" xlink:href="#path-3"></use>
+                    </g>
+                    <g id="开始练习" fill-rule="nonzero" fill="#FFFFFF" fill-opacity="1">
+                        <use filter="url(#filter-5)" xlink:href="#text-4"></use>
+                        <use xlink:href="#text-4"></use>
+                    </g>
+                    <g id="编组" transform="translate(7.000000, 5.000000)" fill-rule="nonzero">
+                        <g id="形状结合">
+                            <use fill="black" fill-opacity="1" filter="url(#filter-8)" xlink:href="#path-7"></use>
+                            <use fill="url(#linearGradient-6)" xlink:href="#path-7"></use>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/components/m-search/index.module.less

@@ -62,12 +62,14 @@
   }
 
   .searchBtn {
-    width: 56px;
-    height: 27px;
+    width: 52px;
+    height: 25px;
     padding: 0;
-    font-size: 14px;
+    font-size: 13px;
     font-weight: 500;
     --van-button-mini-height: 28px;
-    --van-font-size-xs: 14px;
+    --van-font-size-xs: 12px;
+    background: linear-gradient(to right, #5BECFF, #259CFE);
+    border: none;
   }
 }

src/components/m-search/index.tsx

@@ -1,7 +1,7 @@
 import { Button, Icon, Search } from 'vant';
 import { PropType, defineComponent, reactive, watch } from 'vue';
 import styles from './index.module.less';
-import iconSearch from '@/common/images/icon-search.png';
+import iconSearch from '@/common/images/icon-search.svg';
 
 type inputBackground = 'default' | 'white' | 'transparent';
 export default defineComponent({

src/router/router-root.ts

@@ -8,6 +8,13 @@ export default [
     }
   },
   {
+    path: '/co-ai',
+    component: () => import('@/views/co-ai/index'),
+    meta: {
+      title: '小酷AI'
+    }
+  },
+  {
     path: '/:pathMatch(.*)*',
     component: () => import('@/views/404'),
     meta: {

src/styles/index.less

@@ -37,10 +37,6 @@ body {
   user-select: none;
 }
 
-.van-cell {
-  padding: 12px;
-}
-
 // tab 选项卡样式
 
 .van-picker .van-picker-column__item--selected {

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

@@ -0,0 +1,192 @@
+.back {
+    position: fixed;
+    left: 15px;
+    top: 17px;
+    width: 31px;
+    height: 31px;
+    background-color: red;
+    border-radius: 50%;
+}
+
+.container {
+    background: rgba(59, 130, 243, 1);
+    padding: 47px 12px 20px 54px;
+    height: 100vh;
+    overflow: hidden;
+}
+
+.content {
+    display: flex;
+    height: calc(100vh - 67px);
+
+    .center,
+    .right {
+        flex: 1;
+    }
+}
+
+.opacityBg {
+    background: linear-gradient(134deg, rgba(255, 255, 255, 0.75) 0%, rgba(255, 255, 255, 0.34) 100%);
+    border-radius: 18px;
+    border: 2px solid #fff;
+}
+
+.types {
+    width: 100px;
+    padding: 0 10px;
+    height: 100%;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+    }
+
+    .type {
+        background-color: #000;
+        border: 2px solid #fff;
+        border-radius: 18px;
+        height: 75px;
+        margin: 7px 0;
+        transition: .3s;
+        &:active {
+            transform: scale(0.8);
+        }
+        &.typeActive {
+            border-color: rgba(244, 180, 130, 1);
+        }
+    }
+}
+
+.center {
+    position: relative;
+    margin: 0 8px;
+    padding-top: calc(var(--van-search-input-height) + 12px);
+    overflow: hidden;
+    :global {
+        .van-search {
+            position: absolute;
+            top: 0;
+            padding: 6px 9px;
+        }
+    }
+}
+
+.musicContent {
+    padding: 0 6px;
+    height: 100%;
+    overflow-y: auto;
+
+    &::-webkit-scrollbar {
+        width: 0;
+        display: none;
+    }
+}
+
+.musicItem {
+    display: flex;
+    align-items: center;
+    border: 2px solid #fff;
+    border-radius: 9px;
+    margin-bottom: 6px;
+    background-color: #fff;
+    padding: 5px;
+
+    &.musicActive {
+        border-color: rgba(244, 180, 130, 1);
+    }
+
+    .musicAvtor {
+        display: block;
+        width: 47px;
+        height: 47px;
+        border-radius: 18px;
+        object-fit: cover;
+        flex-shrink: 0;
+        margin-right: 9px;
+    }
+
+    .musicInfo {
+        flex: 1;
+
+        .musicName {
+            font-size: 15px;
+            font-weight: 600;
+            color: #333;
+            line-height: 20px;
+
+        }
+
+        .noticeBar {
+            padding: 0;
+            height: 28px;
+        }
+
+        .musicDes {
+            width: 100%;
+            display: flex;
+            align-items: center;
+        }
+
+        .musicFavitor {
+            border: 1px solid #FF3B3B;
+            color: #FF3B3B;
+            padding: 1px 2px 1px 18px;
+            border-radius: 4px;
+            background-image: url('@/common/images/icon_play.svg');
+            background-repeat: no-repeat;
+            background-size: 14px;
+            background-position: 2px center;
+            margin-right: 4px;
+        }
+
+        .musicAuthor {
+            flex: 1;
+            font-size: 12px;
+            font-weight: 400;
+            color: #777;
+            line-height: 12px;
+            max-width: 15vw;
+        }
+    }
+
+    .musicIcon {
+        flex-shrink: 0;
+        margin-right: 4px;
+    }
+}
+
+.right {
+    position: relative;
+    background: #fff;
+    overflow: hidden;
+    border: none;
+}
+
+.staff {
+    width: 100%;
+}
+
+.rightBtns {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    padding: 0 8px 18px 8px;
+    display: flex;
+    align-items: flex-end;
+    height: 78px;
+    background: #fff;
+    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, #C1EEFF 100%);
+    & > img {
+        margin: 0 4px;
+        height: 30px;
+        transition: .3s;
+        &:active {
+            transform: scale(0.8);
+        }
+    }
+    &>img:last-child {
+        margin-left: auto;
+    }
+}

src/views/co-ai/index.tsx

@@ -0,0 +1,87 @@
+import { defineComponent, reactive } from 'vue';
+import styles from './index.module.less';
+import MSearch from '@/components/m-search';
+import icon_play from '@/common/images/icon_play.svg';
+import { NoticeBar } from 'vant';
+import icon_down from '@/common/images/icon_down.svg';
+import icon_jianpu from '@/common/images/icon_jianpu.svg';
+import icon_start from '@/common/images/icon_start.svg';
+
+export default defineComponent({
+  name: 'co-ai',
+  setup() {
+    const data = reactive({
+      /** 教材Index */
+      typeIndex: 0,
+      /** 音乐Index */
+      musicIndex: 0
+    });
+    return () => (
+      <div class={styles.container}>
+        <div class={styles.back}></div>
+        <div class={styles.content}>
+          <div class={[styles.opacityBg, styles.types]}>
+            {new Array(10).fill(1).map((item, index) => {
+              return (
+                <div
+                  class={[
+                    styles.type,
+                    data.typeIndex === index && styles.typeActive
+                  ]}
+                  onClick={() => (data.typeIndex = index)}></div>
+              );
+            })}
+          </div>
+          <div class={[styles.opacityBg, styles.center]}>
+            <MSearch
+              shape="round"
+              background="transparent"
+              placeholder="请输入曲目名称"
+            />
+            <div class={styles.musicContent}>
+              {new Array(10).fill(1).map((item, index) => {
+                return (
+                  <div
+                    class={[
+                      styles.musicItem,
+                      data.musicIndex === index && styles.musicActive
+                    ]}
+                    onClick={() => (data.musicIndex = index)}>
+                    <img class={styles.musicAvtor} />
+                    <div class={styles.musicInfo}>
+                      <div class={styles.musicName}>
+                        <NoticeBar
+                          scrollable={data.musicIndex === index}
+                          text={'最伟大的作品-周杰伦'}
+                          color="#333"
+                          class={styles.noticeBar}
+                          background="none"
+                        />
+                      </div>
+                      <div class={styles.musicDes}>
+                        <div class={styles.musicFavitor}>132收藏</div>
+                        <div class={[styles.musicAuthor, 'van-ellipsis']}>
+                          周杰伦
+                        </div>
+                      </div>
+                    </div>
+                    <img class={[styles.musicIcon]} src={icon_play} />
+                  </div>
+                );
+              })}
+            </div>
+          </div>
+          <div class={[styles.opacityBg, styles.right]}>
+            <img class={styles.staff} src='https://cloud-coach.ks3-cn-beijing.ksyuncs.com/music-sheet/1675232853576-1.png' />
+            <div class={styles.rightBtns}>
+                <img src='' />
+                <img src={icon_jianpu} />
+                <img src={icon_down} />
+                <img src={icon_start} />
+            </div>
+          </div>
+        </div>
+      </div>
+    );
+  }
+});

src/views/courseware-play/index.tsx

@@ -175,6 +175,7 @@ export default defineComponent({
           content: '11707'
         }
       ];
+      popupData.itemActive = data.knowledgePointList[0].id;
       data.itemList = data.knowledgePointList.map((m: any) => {
         return {
           ...m,