小酷AI 列表页完成

1

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

@@ -0,0 +1,191 @@
+import { Button, Popup } from "vant";
+import { } from "vant";
+import { defineComponent, nextTick, onMounted, reactive, ref, watch } from "vue";
+import styles from "./index.module.less";
+import { getImage } from "./images";
+
+export default defineComponent({
+  name: "tips-tip1",
+  emits: ["close"],
+  setup(props, { emit }) {
+    const data = reactive({
+      box: {},
+      show: false,
+      steps: [
+        {
+          ele: "",
+          eleRect: {} as DOMRect,
+          img: getImage("coai-1.png"),
+          handStyle: {
+            top: "0.91rem",
+          },
+          imgStyle: {
+            top: "1.5rem",
+          },
+          btnsStyle: {
+            top: "4.5rem",
+            left:'1rem'
+          },
+        },
+        {
+          ele: "",
+          img: getImage("coai-2.png"),
+          handStyle: {
+            top: "-1.39rem",
+            left:'0.15rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: "-4rem",
+
+          },
+          btnsStyle: {
+            top: "-1.3rem",
+            left:'1.3rem',
+          },
+        },
+        {
+          ele: "",
+          img: getImage("coai-3.png"),
+          handStyle: {
+            top: "-1.39rem",
+            left:'0.17rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: "-4rem",
+
+          },
+          btnsStyle: {
+            top: "-1.3rem",
+            left:'1.3rem',
+          },
+        },
+        {
+          ele: "",
+          img: getImage("coai-4.png"),
+          handStyle: {
+            top: "-1.39rem",
+            left:'1.4rem',
+            transform: 'rotate(180deg)'
+          },
+          imgStyle: {
+            top: "-4rem",
+            left:'-3.2rem',
+
+          },
+          btnsStyle: {
+            top: "-0.85rem",
+            left: "-3rem",
+            "justify-content": "center",
+            padding: 0,
+          },
+        },
+      ],
+      step: 0,
+    });
+    const tipShow = ref(false)
+   const guideInfo = localStorage.getItem('guideInfo')
+   if(guideInfo&&JSON.parse(guideInfo).coaiGuide){
+    tipShow.value =false
+   }else {
+    tipShow.value =true
+   }
+    const getStepELe = () => {
+      console.log(`coai-${data.step}`)
+      const ele: HTMLElement = document.getElementById(`coai-${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",
+        };
+      }
+    };
+    onMounted(() => {
+      getStepELe();
+    });
+
+    const handleNext = () => {
+      if (data.step >= 3) {
+       endGuide();
+        return;
+      }
+      data.step = data.step + 1;
+      getStepELe();
+    };
+
+    const endGuide = ()=>{
+      let guideInfo = JSON.parse(localStorage.getItem('guideInfo'))
+      if(!guideInfo){
+        guideInfo = {coaiGuide:true}
+      }else{
+        guideInfo.coaiGuide = true
+      }
+      localStorage.setItem('guideInfo',JSON.stringify(guideInfo))
+      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()}>
+        <div
+          class={styles.backBtn}
+          onClick={(e: Event) => {
+            e.stopPropagation();
+           endGuide()
+          }}
+        >
+          跳过
+        </div>
+        <div class={styles.box} style={data.box} id={`modeType-${data.step}`}>
+          {data.steps.map((item: any, index) => (
+
+            <div
+              onClick={(e: Event) => e.stopPropagation()}
+              class={styles.item}
+              style={{
+                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}
+                      round
+                      color="transparent"
+                      style={{ "border-color": "#fff" }}
+                      type="primary"
+                      onClick={() => {
+                        data.step = 0;
+                        getStepELe();
+                      }}
+                    >
+                      再看一遍
+                    </Button>
+                    <Button class={[styles.btn,styles.endBtn]} round type="primary" onClick={() =>endGuide()}>
+                      完成
+                    </Button>
+                  </>
+                ) : (
+                  <Button class={styles.btn} round type="primary" onClick={() => handleNext()}>
+
+                    下一步 ({data.step + 1}/{data.steps.length})
+                  </Button>
+                )}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+      </Popup>
+    );
+  },
+});

src/custom-plugins/guide-page/images/index.ts

@@ -0,0 +1,9 @@
+const modules = import.meta.glob('../images/**', {
+  import: 'default',
+  eager: true
+});
+export const getImage = (name: string): string => {
+  // console.log("🚀 ~ modules", modules[`./${name}`])
+  const src: any = modules[`./${name}`] || '';
+  return src;
+};

src/custom-plugins/guide-page/index.module.less

@@ -0,0 +1,107 @@
+.guidePopup {
+  z-index: 5000 !important;
+  top: 0;
+  right: 0;
+  left: 0;
+  bottom: 0;
+  transform: none;
+  width: 100vw;
+  height: 100vh;
+  max-width: 100vw;
+  margin: 0;
+  overflow: hidden;
+}
+
+.tipsContainer {
+  position: relative;
+  width: 100vw;
+  height: 100vh;
+  overflow: hidden;
+}
+
+.backBtn {
+  position: absolute;
+  left: 47px;
+  top: 21px;
+  font-size: 14px;
+  line-height: 24px;
+  padding: 0 14px;
+  border-radius: 17px;
+  border: 1px solid #ffffff;
+  color: #fff;
+  text-align: center;
+  z-index: 1;
+
+  &:active {
+    opacity: 0.8;
+  }
+}
+
+.content {
+  position: relative;
+  width: 100%;
+  height: 100%;
+}
+
+.box {
+  position: fixed;
+  box-shadow: rgba(33, 33, 33, 0.8) 0px 0px 0px 5000px;
+  transition: all 0.25s;
+  // transform: scale(1.3);
+  border-radius: 8px;
+}
+
+.item {
+  position: absolute;
+  width: 200px;
+  z-index: 10;
+
+  .img {
+    position: absolute;
+    width: 100%;
+  }
+
+  .iconHead {
+    position: absolute;
+    left: 45px;
+    width: 18px;
+    height: 52px;
+
+    &.head2 {
+      left: 0.2rem;
+      top: 0.9rem;
+    }
+  }
+
+  .btns {
+    position: absolute;
+    display: flex;
+    width: 100%;
+    padding: 0 12px;
+
+    .btn {
+      width: 73px;
+      height: 23px;
+      line-height: 13px;
+      font-size: 9px;
+      padding: 0;
+    }
+    .endBtn {
+      margin-left: 5px;
+    }
+  }
+}
+
+@keyframes myscale {
+  0% {
+    transform: scale(0.9);
+  }
+
+  50% {
+    transform: scale(1);
+  }
+
+  100% {
+    transform: scale(0.9);
+  }
+}

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

@@ -1,360 +1,382 @@
 .back {
-    position: fixed;
-    left: 15px;
-    top: 17px;
-    width: 31px;
-    height: 31px;
+  position: fixed;
+  left: 15px;
+  top: 17px;
+  width: 31px;
+  height: 31px;
 
-    &>img {
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-    }
+  & > img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
 
-    &:active {
-        opacity: .8;
-    }
+  &:active {
+    opacity: 0.8;
+  }
 }
 
 .container {
-    background: url('../../common/images/icon_bg.png') no-repeat center center / cover;
-    padding: 47px 12px 20px 54px;
-    height: 100vh;
-    overflow: hidden;
+  background: url('../../common/images/icon_bg.png') no-repeat center center /
+    cover;
+  padding: 47px 12px 20px 54px;
+  height: 100vh;
+  overflow: hidden;
 }
 
 .content {
-    display: flex;
-    height: calc(100vh - 67px);
-    overflow: hidden;
+  display: flex;
+  height: calc(100vh - 67px);
+  overflow: hidden;
 }
 
 .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;
+  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;
 }
 
 .leftContent {
-    position: relative;
-    display: flex;
-    width: 45%;
+  position: relative;
+  display: flex;
+  width: 45%;
 }
 
 .leftBg {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: 95px;
-    height: 100%;
-    background: linear-gradient(48deg, #43B2FF 0%, #159AF7 100%);
-    border: 2Px solid #fff;
-    border-radius: 18px 9px 0 18px;
-    z-index: 1;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 95px;
+  height: 100%;
+  background: linear-gradient(48deg, #43b2ff 0%, #159af7 100%);
+  border: 2px solid #fff;
+  border-radius: 18px 9px 0 18px;
+  z-index: 1;
 }
 
 .leftBg2 {
-    position: absolute;
-    left: 0;
-    top: 0;
-    width: calc(100% - 12px);
-    height: 100%;
-    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;
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: calc(100% - 12px);
+  height: 100%;
+  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 {
+  position: relative;
+  top: 2px;
+  width: 95px;
+  height: calc(100% - 4px);
+  padding: 4px 0;
+  overflow-x: hidden;
+  overflow-y: auto;
+  border-radius: 18px;
+  z-index: 1;
+  flex-shrink: 0;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
+
+  .type {
     position: relative;
-    top: 2Px;
-    width: 95px;
-    height: calc(100% - 4Px);
-    padding: 4px 0;
-    overflow-x: hidden;
-    overflow-y: auto;
-    border-radius: 18px;
-    z-index: 1;
-    flex-shrink: 0;
-
-    &::-webkit-scrollbar {
-        width: 0;
-        display: none;
+    padding: 4px 12px;
+
+    &.typeActive {
+      .typeImg {
+        padding: 6px;
+        border-color: #99ffd0;
+        animation: scaleBtn 1s ease-in-out;
+      }
     }
+  }
 
-    .type {
-        position: relative;
-        padding: 4px 12px;
-
-        &.typeActive {
-            .typeImg {
-                padding: 6px;
-                border-color: #99FFD0;
-                animation: scaleBtn 1s ease-in-out;
-            }
-        }
-    }
-
-    .typeImg {
-        border: 2px solid transparent;
-        border-radius: 6px;
-        height: 95px;
-        transition: .3s;
+  .typeImg {
+    border: 2px solid transparent;
+    border-radius: 6px;
+    height: 95px;
+    transition: 0.3s;
 
-        &:active {
-            transform: scale(0.8);
-        }
-    }
-
-    .typeIcon {
-        display: block;
-        width: 100%;
-        height: 100%;
-        object-fit: cover;
-        opacity: 0;
-        transition: opacity .3s;
+    &:active {
+      transform: scale(0.8);
     }
+  }
 
-    .typeIcon[loaded="true"] {
-        opacity: 1;
-    }
+  .typeIcon {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .typeIcon[loaded='true'] {
+    opacity: 1;
+  }
 }
 
 .center {
-    flex: 1;
-    position: relative;
-    padding-right: 12px;
-    height: 100%;
-    overflow: hidden;
-
-    :global {
-        .van-search {
-            padding: 6px 9px;
-            width: 100%;
-            z-index: 1;
-        }
-        .van-field__control::-webkit-input-placeholder{
-            font-size: 12Px;
-        }
+  flex: 1;
+  position: relative;
+  padding-right: 12px;
+  height: 100%;
+  overflow: hidden;
+  .centerSearch {
+    padding: 6px 9px;
+  }
+  :global {
+    #coai-0 {
+      .van-search {
+        width: 100%;
+        z-index: 1;
+        padding: 0px 0px;
+      }
+      .van-field__control::-webkit-input-placeholder {
+        font-size: 12px;
+      }
     }
+  }
 }
 
 .musicContent {
-    width: 100%;
-    height: calc(100% - var(--van-search-input-height) - 12px - 2Px);
-    padding: 6px 12px 12px 12px;
-    overflow-x: hidden;
-    overflow-y: auto;
-
-    &::-webkit-scrollbar {
-        width: 0;
-        display: none;
-    }
+  width: 100%;
+  height: calc(100% - var(--van-search-input-height) - 12px - 2px);
+  padding: 6px 12px 12px 12px;
+  overflow-x: hidden;
+  overflow-y: auto;
+
+  &::-webkit-scrollbar {
+    width: 0;
+    display: none;
+  }
 }
-.searchNotice{
-    position: fixed;
-    padding: 0;
-    pointer-events: none;
-    :global{
-        .van-notice-bar{
-            padding: 0;
-            height: 100%;
-        }
+.searchNotice {
+  position: fixed;
+  padding: 0;
+  pointer-events: none;
+  :global {
+    .van-notice-bar {
+      padding: 0;
+      height: 100%;
     }
+  }
 }
-.searchNoticeShow{
-    :global{
-        .van-field__control{
-            opacity: 0;
-        }
+.searchNoticeShow {
+  :global {
+    .van-field__control {
+      opacity: 0;
     }
+  }
 }
 .musicItem {
-    position: relative;
-    display: flex;
-    align-items: center;
-    border: 3px solid #fff;
-    border-radius: 9px;
-    margin-bottom: 6px;
-    background-color: #fff;
-    padding: 4px;
-    transition: all .3s;
-    overflow: hidden;
-    --van-notice-bar-text-color: #333;
-
-    &.disableNotic {
-        :global {
-            .van-notice-bar__content {
-                transition-duration: 0s !important;
-                transform: none !important;
-            }
-        }
+  position: relative;
+  display: flex;
+  align-items: center;
+  border: 3px solid #fff;
+  border-radius: 9px;
+  margin-bottom: 6px;
+  background-color: #fff;
+  padding: 4px;
+  transition: all 0.3s;
+  overflow: hidden;
+  --van-notice-bar-text-color: #333;
+
+  &.disableNotic {
+    :global {
+      .van-notice-bar__content {
+        transition-duration: 0s !important;
+        transform: none !important;
+      }
     }
+  }
+
+  &.musicActive {
+    border-width: 3px;
+    background: linear-gradient(180deg, #ffffff 0%, #bfe1ff 100%);
+    transform: scale(1.05);
+    box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
+    --van-notice-bar-text-color: rgba(73, 159, 228, 1);
 
-    &.musicActive {
-        border-width: 3px;
-        background: linear-gradient(180deg, #FFFFFF 0%, #BFE1FF 100%);
-        transform: scale(1.05);
-        box-shadow: 0px 2px 4px 0px rgba(73, 159, 228, 1);
-        --van-notice-bar-text-color: rgba(73, 159, 228, 1);
-
-        :global {
-            .van-notice-bar__content {
-                transition-property: transform;
-            }
-        }
+    :global {
+      .van-notice-bar__content {
+        transition-property: transform;
+      }
     }
+  }
+
+  .musicAvtor {
+    display: block;
+    width: 7.2vw;
+    height: 7.2vw;
+    border-radius: 10px;
+    object-fit: cover;
+    flex-shrink: 0;
+    margin-right: 1vw;
+    opacity: 0;
+    transition: opacity 0.3s;
+  }
+
+  .musicAvtor[loaded='true'] {
+    opacity: 1;
+  }
 
-    .musicAvtor {
-        display: block;
-        width: 7.2vw;
-        height: 7.2vw;
-        border-radius: 10Px;
-        object-fit: cover;
-        flex-shrink: 0;
-        margin-right: 1vw;
-        opacity: 0;
-        transition: opacity .3s;
+  .musicInfo {
+    flex: 1;
+
+    .musicName {
+      font-weight: 600;
+      color: #333;
+      margin-bottom: 3px;
+    }
+
+    .noticeBar {
+      padding: 0;
+      height: 28px;
     }
 
-    .musicAvtor[loaded="true"] {
-        opacity: 1;
+    .musicDes {
+      width: 100%;
+      display: flex;
+      align-items: center;
     }
 
-    .musicInfo {
-        flex: 1;
-
-        .musicName {
-            font-weight: 600;
-            color: #333;
-            margin-bottom: 3px;
-        }
-
-        .noticeBar {
-            padding: 0;
-            height: 28px;
-        }
-
-        .musicDes {
-            width: 100%;
-            display: flex;
-            align-items: center;
-        }
-
-        .musicFavitor {
-            border: 1px solid #FFC5C5;
-            color: #FF6A6A;
-            padding: 1px 3px 1px 14px;
-            border-radius: 4px;
-            background-color: #FFF8F7;
-            background-image: url('./image/icon_hot.svg');
-            background-repeat: no-repeat;
-            background-size: auto 70%;
-            background-position: 2px center;
-            margin-right: 4px;
-        }
-
-        .musicAuthor {
-            flex: 1;
-            font-size: 12px;
-            font-weight: 400;
-            color: #777;
-            line-height: 12px;
-            max-width: 9vw;
-        }
+    .musicFavitor {
+      border: 1px solid #ffc5c5;
+      color: #ff6a6a;
+      padding: 1px 3px 1px 14px;
+      border-radius: 4px;
+      background-color: #fff8f7;
+      background-image: url('./image/icon_hot.svg');
+      background-repeat: no-repeat;
+      background-size: auto 70%;
+      background-position: 2px center;
+      margin-right: 4px;
     }
 
-    .musicIcon {
-        flex-shrink: 0;
-        margin-right: 4px;
+    .musicAuthor {
+      flex: 1;
+      font-size: 12px;
+      font-weight: 400;
+      color: #777;
+      line-height: 12px;
+      max-width: 9vw;
     }
+  }
+
+  .musicIcon {
+    flex-shrink: 0;
+    margin-right: 4px;
+  }
 }
 
 .right {
-    position: relative;
-    background: #fff;
-    overflow: hidden;
-    border: none;
-    width: 55%;
+  position: relative;
+  background: #fff;
+  overflow: hidden;
+  border: none;
+  width: 55%;
 }
 
 .right-musicName {
-    font-size: 15px;
-    font-weight: 500;
-    color: #131415;
-    line-height: 20px;
-    text-align: center;
-    padding: 12px 0;
+  font-size: 15px;
+  font-weight: 500;
+  color: #131415;
+  line-height: 20px;
+  text-align: center;
+  padding: 12px 0;
 }
 
 .staff {
-    width: 100%;
+  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%);
-    border-radius: 0 0 18px 18px;
-
-    &>img {
-        margin: 0 4px;
-        height: 30px;
-        transition: .3s;
-
-        &:active {
-            transform: scale(0.6);
-        }
-    }
+  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%
+  );
+  border-radius: 0 0 18px 18px;
+
+  & > img {
+    margin: 0 4px;
+    height: 30px;
+    transition: 0.3s;
 
-    &>img:last-child {
-        margin-left: auto;
-        animation: scaleBtn 1s ease-in-out infinite;
+    &:active {
+      transform: scale(0.6);
     }
+  }
+  .rightBtnsRight {
+    transition: 0.3s;
+    margin: 0 4px;
+    padding: 5px 10px 0;
+    margin-left: auto;
+    img {
+      height: 30px;
+      animation: scaleBtn 1s ease-in-out infinite;
+    }
+  }
 }
 
 @keyframes scaleBtn {
-    0% {
-        transform: scale(1);
-    }
+  0% {
+    transform: scale(1);
+  }
 
-    50% {
-        transform: scale(1.1);
-    }
+  50% {
+    transform: scale(1.1);
+  }
 
-    100% {
-        transform: scale(1);
-    }
+  100% {
+    transform: scale(1);
+  }
 }
 
 @keyframes displayIcon {
-    to {
-        opacity: 1;
-    }
+  to {
+    opacity: 1;
+  }
 }
 
 .loadingWrap {
-    display: flex;
-    justify-content: center;
-    min-height: 80Px;
+  display: flex;
+  justify-content: center;
+  min-height: 80px;
 }
 
 .empty {
-    :global {
-        .van-empty__image {
-            width: 100%;
-            height: initial;
-        }
-
-        .van-empty__description {
-            color: #fff;
-            padding: 0;
-        }
+  :global {
+    .van-empty__image {
+      width: 100%;
+      height: initial;
     }
-}
+
+    .van-empty__description {
+      color: #fff;
+      padding: 0;
+    }
+  }
+}

src/views/co-ai/index.tsx

@@ -33,6 +33,7 @@ import html2canvas from 'html2canvas';
 import { api_musicSheetCategoriesPage, api_musicSheetPage } from './api';
 import { state } from '@/state';
 import MEmpty from '@/components/m-empty';
+import Coaiguide from '@/custom-plugins/guide-page/coai-guide'
 import { usePageVisibility } from '@vant/use';
 export default defineComponent({
   name: 'co-ai',
@@ -79,9 +80,8 @@ export default defineComponent({
     };
     /** 去云教练 */
     const handleGoto = () => {
-      let src = `${location.origin}/instrument?id=${
-        data.musics[data.musicIndex]?.id
-      }`;
+      let src = `${location.origin}/instrument?id=${data.musics[data.musicIndex]?.id
+        }`;
       console.log(src);
       postMessage({
         api: 'openAccompanyWebView',
@@ -202,6 +202,7 @@ export default defineComponent({
       });
       setSearchBox();
     });
+
     return () => (
       <div class={styles.container}>
         <div class={styles.back} onClick={goback}>
@@ -218,7 +219,7 @@ export default defineComponent({
                     class={[
                       styles.type,
                       musicForms.musicSheetCategoriesId === item.id &&
-                        styles.typeActive
+                      styles.typeActive
                     ]}
                     onClick={() => {
                       musicForms.musicSheetCategoriesId = item.id;
@@ -239,26 +240,30 @@ export default defineComponent({
               })}
             </div>
             <div class={styles.center}>
-              <MSearch
-                class={["searchNotice", data.searchNoticeShow ? styles.searchNoticeShow : '']}
-                shape="round"
-                background="transparent"
-                clearable={false}
-                placeholder="请输入关键字"
-                onFocus={() => (data.searchNoticeShow = false)}
-                onBlur={(val) => {
-                  musicForms.keyword = val;
-                  requestAnimationFrame(() => {
-                    requestAnimationFrame(() => {
-                      data.searchNoticeShow = true;
-                    });
-                  });
-                }}
-                onSearch={val => {
-                  musicForms.keyword = val;
-                  handleReset();
-                }}
-              />
+              <div class={styles.centerSearch}>
+                <div id="coai-0">
+                  <MSearch
+
+                    class={["searchNotice", data.searchNoticeShow ? styles.searchNoticeShow : '']}
+                    shape="round"
+                    background="transparent"
+                    clearable={false}
+                    placeholder="请输入关键字"
+                    onFocus={() => (data.searchNoticeShow = false)}
+                    onBlur={(val) => {
+                      musicForms.keyword = val;
+                      requestAnimationFrame(() => {
+                        requestAnimationFrame(() => {
+                          data.searchNoticeShow = true;
+                        });
+                      });
+                    }}
+                    onSearch={val => {
+                      musicForms.keyword = val;
+                      handleReset();
+                    }}
+                  />
+                </div></div>
               <div class={styles.musicContent}>
                 {data.musics.map((item: any, index: number) => {
                   return (
@@ -352,11 +357,17 @@ export default defineComponent({
 
             <div class={styles.rightBtns}>
               <img
+                id="coai-1"
                 src={data.isShowJianpu ? icon_jianpuActive : icon_jianpu}
                 onClick={() => (data.isShowJianpu = !data.isShowJianpu)}
               />
-              <img src={icon_down} onClick={handleSave} />
-              <img src={icons.icon_start} onClick={() => handleGoto()} />
+              <img id="coai-2" src={icon_down} onClick={handleSave} />
+              <div class={styles.rightBtnsRight} id="coai-3">
+                <img src={icons.icon_start} onClick={() => handleGoto()} />
+              </div>
+
+
+
             </div>
           </div>
         </div>
@@ -370,6 +381,8 @@ export default defineComponent({
             />
           </div>
         )}
+
+        <Coaiguide ></Coaiguide>
       </div>
     );
   }