fix:样式

src/page-instrument/component/mode-type-mode/icon/iconModel1.svg

@@ -145,49 +145,6 @@
                         <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                         <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
                     </g>
-                    <g filter="url(#filter-6)" mask="url(#mask-4)">
-                        <g transform="translate(32.466459, 10.525149)">
-                            <path d="M80.2371109,22.226884 C85.0192616,22.226884 88.8959606,26.103583 88.8959606,30.8857336 L88.8959606,74.1868087 C88.8959606,78.9689594 85.0192616,82.8456584 80.2371109,82.8456584 L50.1642711,82.8459297 C49.3322842,85.2001741 47.0871114,86.88691 44.4479803,86.88691 C41.8088492,86.88691 39.5636764,85.2001741 38.7316894,82.8459297 L8.65884965,82.8456584 C3.87669904,82.8456584 5.85644544e-16,78.9689594 0,74.1868087 L0,30.8857336 C-5.85644544e-16,26.103583 3.87669904,22.226884 8.65884965,22.226884 L80.2371109,22.226884 Z" id="形状结合" fill="url(#linearGradient-7)" fill-rule="evenodd"></path>
-                            <g id="矩形" fill="none">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-9)" xlink:href="#path-8"></use>
-                                <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-8"></use>
-                            </g>
-                            <g id="矩形" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(44.447980, 12.123755)">
-                                <mask id="mask-11" fill="white">
-                                    <use xlink:href="#path-10"></use>
-                                </mask>
-                                <g id="蒙版">
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-10"></use>
-                                    <use fill="#FFF8EE" fill-rule="evenodd" xlink:href="#path-10"></use>
-                                </g>
-                                <g mask="url(#mask-11)">
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-15)" xlink:href="#path-14"></use>
-                                    <use fill="url(#linearGradient-13)" fill-rule="evenodd" xlink:href="#path-14"></use>
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-16)" xlink:href="#path-14"></use>
-                                </g>
-                            </g>
-                            <g id="编组-14" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(14.767047, 32.271044)" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M0,14.0917668 L21.4886761,14.0917668 C25.4903738,14.0917668 28.026374,15.4016565 29.0966767,18.0214359" id="路径-7备份" stroke="#FFF4E0" stroke-width="4.32942482"></path>
-                                <path d="M0,28.124565 L21.4886761,28.124565 C25.4903738,28.124565 28.026374,29.4344547 29.0966767,32.0542341" id="路径-7备份-4" stroke="#FFF4E0" stroke-width="4.32942482"></path>
-                                <path d="M0,0.0589685907 L19.3802823,0.0589685907 C24.5398169,-0.30366294 27.7786151,1.00622677 29.0966767,3.98863772" id="路径-7" stroke="#FFF4E0" stroke-width="4.32942482"></path>
-                            </g>
-                            <g id="编组-7" stroke-width="1" fill="none" fill-rule="evenodd" transform="translate(58.417871, 48.327646) scale(-1, 1) translate(-58.417871, -48.327646) translate(44.370827, 32.330013)" stroke-linecap="round" stroke-linejoin="round">
-                                <path d="M0,0 L20.4860882,0 C24.4877858,0 27.023786,1.30988971 28.0940887,3.92966913" id="路径-7备份-5" stroke="#FFEACB" stroke-width="4.32942482"></path>
-                                <path d="M0,14.0327982 L20.4860882,14.0327982 C24.4877858,14.0327982 27.023786,15.3426879 28.0940887,17.9624673" id="路径-7备份-6" stroke="#FFEACB" stroke-width="4.32942482"></path>
-                                <path d="M0,28.0655964 L20.4860882,28.0655964 C24.4877858,28.0655964 27.023786,29.3754861 28.0940887,31.9952655" id="路径-7备份-7" stroke="#FFEACB" stroke-width="4.32942482"></path>
-                            </g>
-                            <rect id="矩形" fill="#FFD791" fill-rule="evenodd" x="64.6516077" y="16.1650065" width="2.02036274" height="6.06187744" rx="1.01018137"></rect>
-                            <g id="星形" fill="none" transform="translate(20.203627, 10.103129) rotate(-315.000000) translate(-20.203627, -10.103129) ">
-                                <use fill="black" fill-opacity="1" filter="url(#filter-18)" xlink:href="#path-17"></use>
-                                <use fill="#FFDE56" fill-rule="evenodd" xlink:href="#path-17"></use>
-                                <use fill="black" fill-opacity="1" filter="url(#filter-19)" xlink:href="#path-17"></use>
-                            </g>
-                        </g>
-                    </g>
-                    <g id="星形备份-2" mask="url(#mask-4)" transform="translate(69.302183, 14.097144) rotate(-315.000000) translate(-69.302183, -14.097144) ">
-                        <use fill="black" fill-opacity="1" filter="url(#filter-21)" xlink:href="#path-20"></use>
-                        <use fill="#FFFFFF" fill-rule="evenodd" xlink:href="#path-20"></use>
-                    </g>
                 </g>
                 <g id="编组" transform="translate(149.205924, 13.732394)" fill="#FFFFFF" fill-opacity="1">
                     <g id="练习模式">
@@ -199,13 +156,6 @@
                         <use xlink:href="#text-24"></use>
                     </g>
                 </g>
-                <g id="向右备份-2" filter="url(#filter-26)" transform="translate(49.781903, 28.141261)">
-                    <rect id="矩形" fill="#000000" fill-rule="nonzero" opacity="0" x="0" y="0" width="51.9463339" height="51.9530979"></rect>
-                    <g id="路径">
-                        <use fill="url(#linearGradient-27)" fill-rule="evenodd" xlink:href="#path-28"></use>
-                        <use fill="black" fill-opacity="1" filter="url(#filter-29)" xlink:href="#path-28"></use>
-                    </g>
-                </g>
             </g>
         </g>
     </g>

src/page-instrument/component/mode-type-mode/icon/iconModel2.svg

@@ -132,28 +132,6 @@
                             <use fill="url(#linearGradient-2)" fill-rule="evenodd" xlink:href="#path-3"></use>
                             <use fill="black" fill-opacity="1" filter="url(#filter-5)" xlink:href="#path-3"></use>
                         </g>
-                        <g mask="url(#mask-4)">
-                            <g transform="translate(17.659656, 11.965575)">
-                                <g id="星形备份-3" transform="translate(33.740830, 5.914104) rotate(-300.000000) translate(-33.740830, -5.914104) ">
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-7)" xlink:href="#path-6"></use>
-                                    <use fill="#FFF5CC" fill-rule="evenodd" xlink:href="#path-6"></use>
-                                </g>
-                                <g id="编组-12" filter="url(#filter-8)" stroke-width="1" fill-rule="evenodd" transform="translate(19.135664, 11.846261)">
-                                    <rect id="矩形" fill="#FFFFFF" x="79.7421792" y="0" width="6.83504393" height="70.637984" rx="3.24706862"></rect>
-                                    <path d="M8.65884965,5.69661161 L79.7421792,5.69661161 L79.7421792,5.69661161 L79.7421792,64.9413724 L8.65884965,64.9413724 C3.87669904,64.9413724 3.05669068e-15,61.0646733 0,56.2825227 L0,14.3554613 C-5.85644544e-16,9.57331065 3.87669904,5.69661161 8.65884965,5.69661161 Z" id="矩形备份-6" fill="url(#linearGradient-9)"></path>
-                                    <g id="编组-9" transform="translate(11.391740, 15.950513)" fill="#FFFFFF">
-                                        <rect id="矩形" x="0" y="0" width="56.9586995" height="6.83593393" rx="3.24706862"></rect>
-                                        <rect id="矩形备份-5" x="0" y="15.9505125" width="56.9586995" height="6.83593393" rx="3.24706862"></rect>
-                                        <rect id="矩形备份-7" x="0" y="31.901025" width="56.9586995" height="6.83593393" rx="3.24706862"></rect>
-                                    </g>
-                                </g>
-                                <g id="星形" transform="translate(9.757603, 15.455253) rotate(-330.000000) translate(-9.757603, -15.455253) ">
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-11)" xlink:href="#path-10"></use>
-                                    <use fill="#FFDE56" fill-rule="evenodd" xlink:href="#path-10"></use>
-                                    <use fill="black" fill-opacity="1" filter="url(#filter-12)" xlink:href="#path-10"></use>
-                                </g>
-                            </g>
-                        </g>
                     </g>
                     <g id="编组" transform="translate(148.290550, 13.732394)" fill="#FFFFFF" fill-opacity="1">
                         <g id="跟音实时纠错">
@@ -165,22 +143,6 @@
                             <use xlink:href="#text-15"></use>
                         </g>
                     </g>
-                    <g id="向右" filter="url(#filter-17)" transform="translate(51.946334, 32.470686)" fill="#000000" fill-rule="nonzero" opacity="0">
-                        <rect id="矩形" x="0" y="0" width="51.9463339" height="51.9530979"></rect>
-                    </g>
-                    <g id="编组备份-5" filter="url(#filter-18)" transform="translate(56.998947, 36.937371)">
-                        <mask id="mask-20" fill="white">
-                            <use xlink:href="#path-19"></use>
-                        </mask>
-                        <g id="Clip-2"></g>
-                        <g id="编组-8" mask="url(#mask-20)">
-                            <g id="Fill-1">
-                                <use fill="url(#linearGradient-21)" fill-rule="evenodd" xlink:href="#path-22"></use>
-                                <use fill="black" fill-opacity="1" filter="url(#filter-23)" xlink:href="#path-22"></use>
-                            </g>
-                            <ellipse id="椭圆形" fill-opacity="0.387292395" fill="#FFFFFF" filter="url(#filter-24)" transform="translate(9.091632, 24.247510) rotate(-37.000000) translate(-9.091632, -24.247510) " cx="9.09163233" cy="24.2475098" rx="3.03068703" ry="4.04106107"></ellipse>
-                        </g>
-                    </g>
                 </g>
             </g>
         </g>

src/page-instrument/component/mode-type-mode/index.module.less

@@ -11,11 +11,23 @@
   background: linear-gradient(to top, rgba(255,255,255,1), rgba(255,255,255, .7));
   padding: 0 40px;
   transition: all .3s ease-in-out;
-  img {
+  .item{
+    position: relative;
     width: 24%;
     max-width: 220Px;
     cursor: pointer;
   }
+  .bg{
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+  .icon{
+    position: absolute;
+    left: 6%;
+    top: 0;
+    height: 88%;
+  }
 }
 .hidden{
   opacity: 0;

src/page-instrument/component/mode-type-mode/index.tsx

@@ -1,18 +1,28 @@
 import { defineComponent, onMounted } from "vue";
 import styles from "./index.module.less";
-import IconModel1 from './icon/iconModel1.svg'
-import IconModel2 from './icon/iconModel2.svg'
-import IconModel3 from './icon/iconModel3.svg'
+import IconModel1 from "./icon/iconModel1.svg";
+import IconModel2 from "./icon/iconModel2.svg";
+import IconModel3 from "./icon/iconModel3.svg";
+import icons from "./icon/index.json";
 import { headTopData } from "../../header-top";
 
 export default defineComponent({
 	name: "modelWraper",
 	setup() {
 		return () => (
-			<div class={[styles.wrap, headTopData.modeType === 'init' ? '' : styles.hidden ]}>
-				<img onClick={() => headTopData.handleChangeModeType("practise")} src={IconModel1} />
-				<img onClick={() => headTopData.handleChangeModeType("follow")} src={IconModel2} />
-				<img onClick={() => headTopData.handleChangeModeType("evaluating")} src={IconModel3} />
+			<div class={[styles.wrap, headTopData.modeType === "init" ? "" : styles.hidden]}>
+				<div class={styles.item} onClick={() => headTopData.handleChangeModeType("practise")}>
+					<img class={styles.bg} src={IconModel1} />
+					<img class={styles.icon} src={icons.icon_1} />
+				</div>
+				<div class={styles.item} onClick={() => headTopData.handleChangeModeType("follow")}>
+					<img class={styles.bg} src={IconModel2} />
+					<img class={styles.icon} src={icons.icon_2} />
+				</div>
+				<div class={styles.item} onClick={() => headTopData.handleChangeModeType("evaluating")}>
+					<img class={styles.bg} src={IconModel3} />
+					<img class={styles.icon} src={icons.icon_3} />
+				</div>
 			</div>
 		);
 	},

src/page-instrument/header-top/index.module.less

@@ -22,7 +22,7 @@
     align-items: center;
     height: 100%;
     padding: 0 11px 0 6px;
-
+    cursor: pointer;
     img {
         display: block;
         width: 24px;

src/page-instrument/header-top/index.tsx

@@ -15,6 +15,7 @@ import { api_back } from "/src/helpers/communication";
 import MusicType from "./music-type";
 import ModeTypeMode from "../component/mode-type-mode";
 import { getQuery } from "/src/utils/queryString";
+import { storeData } from "/src/store";
 
 /** 头部数据和方法 */
 export const headTopData = reactive({
@@ -202,6 +203,11 @@ export default defineComponent({
 
 		/** 返回 */
 		const handleBack = () => {
+			// 不在APP中,
+			if (!storeData.isApp){
+				window.close()
+				return
+			}
 			api_back();
 		};
 

src/page-instrument/theme.css

@@ -5,7 +5,6 @@ body{
     --van-primary-color: #1CACF1;
     --color-primary    : #1CACF1;
     --active-stave-box    : rgba(25, 140, 254, 0.2);
-    --container-background: #fff4e1;
 }
 
 .vf-StaveSection {

src/page-instrument/view-detail/index.module.less

@@ -57,7 +57,6 @@
     }
 }
 .PC{
-    // background-image: url('./images/icon_bg.png');
     :global{
         #cursorImg-0 {
             margin-top: -18PX;