icons

src/page-orchestra/detail/index.tsx

@@ -227,7 +227,7 @@ export default defineComponent({
 						<Skeleton class={styles.skeleton} row={8} />
 					</div>
 				)}
-				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]}>
+				<div class={[styles.headHeight, detailData.headerHide && styles.headHide]} onClick={(e: Event) => e.stopPropagation()}>
 					<Transition name="van-slide-down">{state.musicRendered && <HeaderTop />}</Transition>
 				</div>
 				<div

src/page-orchestra/header-top/image/icon-back.svg

@@ -1,8 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="15px" height="24px" viewBox="0 0 15 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g transform="translate(-40.000000, -22.000000)" fill="#494949" fill-rule="nonzero" id="形状" stroke="#494949">
-            <path d="M42.2681508,32.7499394 C42.5890877,32.7499394 42.9114702,32.8699082 43.168798,33.0950183 L53.620931,42.6520856 C53.8607785,42.8704624 53.997204,43.1690827 53.9999596,43.4816468 C54.0026326,43.7942108 53.8714111,44.0948519 53.6353876,44.3168215 C53.138464,44.7783404 52.3366638,44.7837362 51.8326476,44.3289532 L41.379069,34.7718859 C41.1392215,34.5535091 41.002796,34.2548888 41.0000404,33.9423247 C40.9973673,33.6297606 41.1285889,33.3291196 41.3646123,33.1071499 C41.5948722,32.8710256 41.9246144,32.7409471 42.2667051,32.7512873 L42.2681508,32.7499394 Z M52.7106158,23 C53.0356188,23 53.3591643,23.117702 53.6185837,23.3424057 C53.8599334,23.5590403 53.9971822,23.8550613 53.9999596,24.1648752 C54.0026536,24.474689 53.8706502,24.7727125 53.6331578,24.9929083 L43.1980856,34.5695682 C42.6976948,35.027014 41.8904764,35.0329595 41.3821498,34.5829434 C41.1403528,34.3662582 41.0028184,34.0699512 41.0000404,33.7598084 C40.9973456,33.4496656 41.1296337,33.1513535 41.3675757,32.9311033 L51.8026479,23.3544434 C52.0474932,23.117702 52.3856129,23 52.7106158,23 Z"></path>
-        </g>
-    </g>
-</svg>

src/page-orchestra/header-top/image/modeType.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="29px" height="29px" viewBox="0 0 29 29" 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">
-        <g id="曲谱评测（按钮合集）" transform="translate(-346.000000, -218.000000)">
-            <g id="示范" transform="translate(346.000000, 218.000000)">
-                <rect id="矩形备份-37" fill="#2DC7AA" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <path d="M11,8 C12.6568542,8 14,9.34314575 14,11 L14,13 C14,13.5522847 13.5522847,14 13,14 L11,14 C9.34314575,14 8,12.6568542 8,11 C8,9.34314575 9.34314575,8 11,8 Z" id="矩形" fill="#FFFFFF"></path>
-                <path d="M11,15 L13,15 C13.5522847,15 14,15.4477153 14,16 L14,18 C14,19.6568542 12.6568542,21 11,21 C9.34314575,21 8,19.6568542 8,18 C8,16.3431458 9.34314575,15 11,15 Z" id="矩形备份-2" fill="#FFFFFF"></path>
-                <rect id="矩形备份" fill-opacity="0.8" fill="#FFFFFF" x="15" y="8" width="6" height="6" rx="3"></rect>
-                <path d="M16,15 L18,15 C19.6568542,15 21,16.3431458 21,18 C21,19.6568542 19.6568542,21 18,21 C16.3431458,21 15,19.6568542 15,18 L15,16 C15,15.4477153 15.4477153,15 16,15 Z" id="矩形备份-3" fill="#FFFFFF"></path>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-orchestra/header-top/image/replay.svg

@@ -1,25 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="40px" height="40px" viewBox="0 0 40 40" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>暂停备份</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.3846973%" id="linearGradient-1">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.589416077" offset="100%"></stop>
-        </linearGradient>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="99.3846973%" id="linearGradient-2">
-            <stop stop-color="#FFFFFF" offset="0%"></stop>
-            <stop stop-color="#FFFFFF" stop-opacity="0.589416077" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面暂停" transform="translate(-677.000000, -301.000000)">
-            <g id="暂停备份" transform="translate(677.000000, 301.000000)">
-                <rect id="矩形" fill="#2DC7AA" x="0" y="0" width="40" height="40" rx="20"></rect>
-                <g id="编组" transform="translate(19.522776, 19.799926) scale(-1, 1) translate(-19.522776, -19.799926) translate(5.000000, 6.000000)">
-                    <path d="M13.3725568,0 L13.3563443,0 C7.68145471,0.0653974039 2.6664899,3.70847155 0.847834102,9.08655422 L0.817617962,9.15122482 C0.797302775,9.20165727 0.777069364,9.26566714 0.759461507,9.33689435 L0.732063087,9.4749694 L0.753800649,9.40595609 C0.272209238,10.8185203 0.0184121264,12.2987613 0.00193173024,13.7911355 C-0.123254569,21.2877541 5.85181356,27.4712437 13.3499838,27.5998518 L13.7189868,27.5922013 C17.2787984,27.468538 20.6206322,25.9074407 22.9897078,23.2690016 L23.2070631,23.0189694 L23.1449335,23.0794585 C23.2603529,22.9795146 23.362263,22.8649591 23.4480926,22.7386843 C23.6720399,22.329715 23.7570443,21.9501401 23.7376485,21.5686354 C23.6254619,20.6372478 22.888075,19.9766574 22.0070416,19.9661689 L21.8305569,19.9837288 C21.3964214,20.0763739 20.9897811,20.2687516 20.64277,20.5456526 L20.5375202,20.6466519 C18.7304559,22.7291273 16.1140168,23.9314266 13.357623,23.9459806 C7.96780108,23.8535225 3.63958992,19.4689892 3.57989406,14.0920329 L3.58062942,13.8130463 C3.49162395,8.28356315 7.87660023,3.74893628 13.3772597,3.65571168 L13.6826276,3.66341095 C16.9313146,3.79699016 19.8952317,5.57049175 21.5651633,8.35089652 L21.6090631,8.4259694 L21.1341843,8.63175621 L20.925866,8.71400596 C18.6892851,9.56846024 18.1787287,11.0457946 20.1238869,12.0193514 L20.5442371,12.2181679 L21.0321057,12.4617975 L21.6313166,12.7737254 L22.2220542,13.0890242 C22.5238873,13.2515877 22.8360126,13.4216673 23.1493276,13.5939227 L24.2374418,14.1981448 C25.8107445,15.0427057 27.0707432,14.4070096 27.5034432,12.6071061 L27.6808279,11.9061013 C27.9271949,10.9739797 28.2129083,10.0522959 28.537129,9.14382584 L28.5970631,8.9799694 L28.7969478,8.46456175 C29.623868,6.28961617 28.2971865,5.51302702 26.159053,6.46427584 L25.6914434,6.67968867 L24.9420631,6.9949694 L24.8465083,6.8181108 C22.5404703,2.66770793 18.1686454,0.041949839 13.3725568,0 Z" id="路径" fill="url(#linearGradient-1)"></path>
-                    <path d="M12.5618308,10.560238 L16.242904,16.2863518 C16.6908822,16.9832069 16.4891277,17.9112777 15.7922727,18.3592559 C15.5503267,18.5147926 15.2687637,18.5974882 14.9811363,18.5974882 L7.61898991,18.5974882 C6.79056278,18.5974882 6.11898991,17.9259153 6.11898991,17.0974882 C6.11898991,16.8098608 6.20168548,16.5282978 6.35722219,16.2863518 L10.0382954,10.560238 C10.4862736,9.86338291 11.4143444,9.66162839 12.1111995,10.1096066 C12.2919535,10.2258056 12.4456318,10.379484 12.5618308,10.560238 Z" id="三角形" fill="url(#linearGradient-2)" transform="translate(11.300063, 13.597488) rotate(-90.000000) translate(-11.300063, -13.597488) "></path>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-orchestra/header-top/image/speed.svg

@@ -1,41 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="29px" height="29px" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>速度</title>
-    <defs>
-        <linearGradient x1="50%" y1="0%" x2="50%" y2="100%" id="linearGradient-1">
-            <stop stop-color="#1D8270" offset="0%"></stop>
-            <stop stop-color="#105548" offset="100%"></stop>
-        </linearGradient>
-        <path d="M7.39092163,3.03294464 C7.39092163,3.72564768 7.56508899,4.37722505 7.87156676,4.94536012 L1.5,4.94501223 C0.671572875,4.94501223 1.01453063e-16,4.27343935 0,3.44501223 C-1.01453063e-16,2.6165851 0.671572875,1.94501223 1.5,1.94501223 L7.53933813,1.94388547 C7.44265229,2.29012358 7.39092163,2.6554266 7.39092163,3.03294464 Z M17.1949452,1.94501223 C18.0233723,1.94501223 18.6949452,2.6165851 18.6949452,3.44501223 C18.6949452,4.27343935 18.0233723,4.94501223 17.1949452,4.94501223 L14.8233784,4.94536012 C15.1298562,4.37722505 15.3040235,3.72564768 15.3040235,3.03294464 C15.3040235,2.6554266 15.2522929,2.29012358 15.155607,1.94388547 L17.1949452,1.94501223 Z" id="path-2"></path>
-        <path d="M3.42,12.4830669 C3.42,13.17577 3.59416736,13.8273473 3.90064512,14.3954824 L1.5,14.3951345 C0.671572875,14.3951345 1.01453063e-16,13.7235616 0,12.8951345 C-1.01453063e-16,12.0667074 0.671572875,11.3951345 1.5,11.3951345 L3.5684165,11.3940078 C3.47173066,11.7402459 3.42,12.1055489 3.42,12.4830669 Z M17.1949452,11.3951345 C18.0233723,11.3951345 18.6949452,12.0667074 18.6949452,12.8951345 C18.6949452,13.7235616 18.0233723,14.3951345 17.1949452,14.3951345 L10.8524568,14.3954824 C11.1589345,13.8273473 11.3331019,13.17577 11.3331019,12.4830669 C11.3331019,12.1055489 11.2813712,11.7402459 11.1846854,11.3940078 L17.1949452,11.3951345 Z" id="path-3"></path>
-        <ellipse id="path-4" cx="11.3474726" cy="3.03294464" rx="3" ry="3.03294464"></ellipse>
-        <ellipse id="path-5" cx="7.32" cy="12.4830669" rx="3" ry="3.03294464"></ellipse>
-    </defs>
-    <g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <g id="主界面" transform="translate(-611.000000, -13.000000)">
-            <g id="速度" transform="translate(611.000000, 13.000000)">
-                <rect id="矩形备份-31" fill="#2DC7AA" x="0" y="0" width="29" height="29" rx="14.5"></rect>
-                <g id="编组-4" transform="translate(5.180000, 6.900000)">
-                    <g id="形状结合">
-                        <use fill="url(#linearGradient-1)" xlink:href="#path-2"></use>
-                        <use fill="#166B5B" xlink:href="#path-2"></use>
-                        <use fill="#FFFFFF" xlink:href="#path-2"></use>
-                    </g>
-                    <g id="形状结合">
-                        <use fill="url(#linearGradient-1)" xlink:href="#path-3"></use>
-                        <use fill="#166B5B" xlink:href="#path-3"></use>
-                        <use fill="#FFFFFF" xlink:href="#path-3"></use>
-                    </g>
-                    <g id="椭圆形备份-8">
-                        <use fill="#FFBB39" xlink:href="#path-4"></use>
-                        <ellipse stroke="#2DC7AA" stroke-width="1" fill="#FFFFFF" cx="11.3474726" cy="3.03294464" rx="3.5" ry="3.53294464"></ellipse>
-                    </g>
-                    <g id="椭圆形备份-9">
-                        <use fill="#FFBB39" xlink:href="#path-5"></use>
-                        <ellipse stroke="#2DC7AA" stroke-width="1" fill="#FFFFFF" cx="7.32" cy="12.4830669" rx="3.5" ry="3.53294464"></ellipse>
-                    </g>
-                </g>
-            </g>
-        </g>
-    </g>
-</svg>

src/page-orchestra/header-top/image/task-bg.svg

@@ -1,9 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="208px" height="70px" viewBox="0 0 208 70" 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">
-        <g id="曲谱评测" transform="translate(-582.000000, -215.000000)" fill="#FFE1B8" stroke="#FFFFFF" stroke-width="2">
-            <path d="M591,216.506546 L781,216.506546 C785.418278,216.506546 789,220.088268 789,224.506546 L789,278.353946 C789,281.11537 786.761424,283.353946 784,283.353946 C783.212178,283.353946 782.435504,283.167782 781.733289,282.810629 L768.300488,275.978581 L768.300488,275.978581 L591,275.978581 C586.581722,275.978581 583,272.396859 583,267.978581 L583,224.506546 C583,220.088268 586.581722,216.506546 591,216.506546 Z" id="矩形"></path>
-        </g>
-    </g>
-</svg>

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

@@ -72,7 +72,7 @@
         :global {
             .van-badge {
                 border: none;
-                color: #135D4F;
+                color: var(--van-primary-color);
                 background: linear-gradient(180deg, #FFD689 0%, #FEBD41 100%);
                 border: 1px solid #FFFFFF;
                 font-weight: 400;

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

@@ -1,14 +1,12 @@
 import { computed, defineComponent, onMounted, reactive, ref } from "vue";
 import styles from "./index.module.less";
 
-import iconBack from "./image/icon-back.svg";
 import Title from "./title";
-import { headImg } from "./image";
 import icons from "./image/headerTop.json";
 import { Badge, Circle, Popover } from "vant";
 import { metronomeData } from "../../helpers/metronome";
 import Speed from "./speed";
-import { evaluatingData, handleStartEvaluat } from "/src/view/evaluating";
+import { handleStartEvaluat } from "/src/view/evaluating";
 import { Popup } from "@varlet/ui";
 import Settting from "./settting";
 import ModeTypeMode from "./mode-type-mode";
@@ -74,7 +72,7 @@ export default defineComponent({
 		return () => (
 			<div ref={headRef} class={styles.headerTop}>
 				<div class={styles.back} onClick={handleBack}>
-					<img src={iconBack} />
+					<img src={icons['icon-back']} />
 				</div>
 				<Title text={state.examSongName} rightView={false} />
 
@@ -86,7 +84,7 @@ export default defineComponent({
 							headerData.modeMode = true;
 						}}
 					>
-						<img class={styles.iconBtn} src={headImg(`modeType.svg`)} />
+						<img class={styles.iconBtn} src={icons.modelType} />
 						<span>模式</span>
 					</div>
 
@@ -97,11 +95,11 @@ export default defineComponent({
 							state.playSource = state.playSource === "music" ? "background" : "music";
 						}}
 					>
-						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.background} />
+						<img class={styles.iconBtn} src={state.playSource === "music" ? icons.music : icons.accompaniment} />
 						<span>{state.playSource === "music" ? "原声" : "伴奏"}</span>
 					</div>
 					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} id="tips-step-4" onClick={() => handleChangeSection()}>
-						<img class={styles.iconBtn} src={headImg(`section${state.section.length}.svg`)} />
+						<img class={styles.iconBtn} src={state.section.length === 0 ? icons.section : state.section.length === 1 ? icons.section1 : icons.section2} />
 						<span>选段</span>
 					</div>
 					<div
@@ -148,7 +146,7 @@ export default defineComponent({
 									}}
 								>
 									<Badge class={styles.badge} content={state.speed}>
-										<img class={styles.iconBtn} src={headImg("speed.svg")} />
+										<img class={styles.iconBtn} src={icons.speed} />
 									</Badge>
 									<span>速度</span>
 								</div>
@@ -166,7 +164,7 @@ export default defineComponent({
 										headData.musicTypeShow = !headData.musicTypeShow;
 									}}
 								>
-									<img class={styles.iconBtn} src={headImg("icon-zhuanpu.svg")} />
+									<img class={styles.iconBtn} src={icons['icon-zhuanpu']} />
 									<span>转简谱</span>
 								</div>
 							),
@@ -175,7 +173,7 @@ export default defineComponent({
 					</Popover>
 
 					<div class={[styles.btn, disabledList.includes(state.modeType) && styles.disable]} onClick={() => (headerData.settingMode = true)}>
-						<img class={styles.iconBtn} src={headImg("menu.svg")} />
+						<img class={styles.iconBtn} src={icons.setting} />
 						<span>设置</span>
 					</div>
 
@@ -188,7 +186,6 @@ export default defineComponent({
 						<div class={styles.btnWrap}>
 							<img class={styles.iconBtn} src={state.playState === "paused" ? icons.play : icons.pause} />
 							<Circle
-								style={{ opacity: state.playState === "play" ? 1 : 0 }}
 								class={styles.progress}
 								stroke-width={80}
 								currentRate={state.playProgress}
@@ -203,7 +200,7 @@ export default defineComponent({
 						id="tips-step-7"
 						onClick={() => handleResetPlay()}
 					>
-						<img class={styles.iconBtn} src={headImg("replay.svg")} />
+						<img class={styles.iconBtn} src={icons['reset']} />
 					</div>
 				</div>
 

src/page-orchestra/header-top/mode-type-mode/index.module.less

@@ -7,6 +7,5 @@
   padding: 0 40px;
   img {
     width: 127px;
-    height: 46px;
   }
 }

src/page-orchestra/header-top/music-type/index.tsx

@@ -1,5 +1,4 @@
 import { defineComponent, reactive, ref, watch } from "vue";
-import { headImg } from "../image";
 import { useClickAway } from "@vant/use";
 import { headData } from "..";
 import styles from "./index.module.less";
@@ -7,6 +6,7 @@ import state from "/src/state";
 import { Popup } from "@varlet/ui";
 import TheComfirm from "../../component/the-comfirm";
 import { musicRenderTypeKey, resetRenderMusicScore } from "/src/view/music-score";
+import icons from '../image/headerTop.json'
 export default defineComponent({
 	name: "musicType",
 	setup(props) {
@@ -41,15 +41,15 @@ export default defineComponent({
 			<>
 				<div ref={musicTypeRef}>
 					<div class={["van-popover__action", styles.item, state.musicRenderType === "staff" && styles.active]} onClick={() => onSelect("staff")}>
-						<img src={state.musicRenderType === "staff" ? headImg("icon-staff-active.svg") : headImg("icon-staff.svg")} />
+						<img src={state.musicRenderType === "staff" ? icons['icon-staff-active'] : icons['icon-staff']} />
 						<div>五线谱</div>
 					</div>
 					<div class={["van-popover__action", styles.item, state.musicRenderType === "firstTone" && styles.active]} onClick={() => onSelect("firstTone")}>
-						<img src={state.musicRenderType === "firstTone" ? headImg("shuodiao-active.svg") : headImg("shuodiao.svg")} />
+						<img src={state.musicRenderType === "firstTone" ? icons['shuodiao-active'] : icons['shuodiao']} />
 						<div>首调</div>
 					</div>
 					<div class={["van-popover__action", styles.item, state.musicRenderType === "fixedTone" && styles.active]} onClick={() => onSelect("fixedTone")}>
-						<img src={state.musicRenderType === "fixedTone" ? headImg("guding-active.svg") : headImg("guding.svg")} />
+						<img src={state.musicRenderType === "fixedTone" ? icons['guding-active'] : icons['guding']} />
 						<div>固定调</div>
 					</div>
 				</div>

src/page-orchestra/theme.css

@@ -1,6 +1,6 @@
 :root {
-    --van-primary-color: #2dc7aa;
-    --color-primary    : #2dc7aa;
+    --van-primary-color: #ff8057;
+    --color-primary    : #ff8057;
     --active-stave-box    : rgba(255, 159, 88, .19);
 }