酷乐秀UI1.0

src/page-colexiu/header-top/image/down.svg

@@ -0,0 +1,16 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="23px" viewBox="0 0 22 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-269.000000, -299.000000)" fill-rule="nonzero">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-16" transform="translate(16.000000, 272.000000)">
+                    <g id="编组" transform="translate(7.000000, 4.500000)">
+                        <path d="M15.5714286,14.2142857 L15.5714286,15.0714286 C15.5714286,15.1472047 15.5413266,15.2198773 15.4877448,15.2734591 C15.434163,15.3270409 15.3614904,15.3571429 15.2857143,15.3571429 L6.71428572,15.3571429 C6.63850958,15.3571429 6.56583703,15.3270409 6.5122552,15.2734591 C6.45867338,15.2198773 6.42857142,15.1472047 6.42857142,15.0714286 L6.42857142,14.2142857 C6.42857142,13.5831031 5.91689685,13.0714286 5.28571428,13.0714286 L4.14285714,13.0714286 C3.51167457,13.0714286 3,13.5831031 3,14.2142857 L3,16.7857143 C3,17.7324881 3.76751186,18.5 4.71428572,18.5 L17.2857143,18.5 C18.2324881,18.5 19,17.7324881 19,16.7857143 L19,14.2142857 C19,13.5831031 18.4883254,13.0714286 17.8571429,13.0714286 L16.7142857,13.0714286 C16.0831031,13.0714286 15.5714286,13.5831031 15.5714286,14.2142857 Z" id="路径" fill="#07D085"></path>
+                        <path d="M13,4.64285714 C13,4.01167457 12.4883254,3.5 11.8571429,3.5 L10.1428571,3.5 C9.51167457,3.5 9,4.01167457 9,4.64285714 L9,8.02285714 C9,8.18065278 8.87208136,8.30857142 8.71428572,8.30857142 L7.37714286,8.30857142 C7.15520126,8.30949809 6.95387202,8.43885339 6.8607871,8.64033324 C6.76770218,8.84181309 6.79970163,9.07896767 6.94285714,9.24857142 L10.5657143,13.5114286 C10.6741903,13.6344288 10.8302854,13.7048927 10.9942857,13.7048927 C11.158286,13.7048927 11.3143811,13.6344288 11.4228571,13.5114286 L15.0571429,9.24857142 C15.2002984,9.07896767 15.2322978,8.84181309 15.1392129,8.64033324 C15.046128,8.43885339 14.8447987,8.30949809 14.6228571,8.30857142 L13.2857143,8.30857142 C13.1279186,8.30857142 13,8.18065278 13,8.02285714 L13,4.64285714 Z" id="路径" fill="#F9BA48"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-colexiu/header-top/image/tv.svg

@@ -0,0 +1,20 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="23px" viewBox="0 0 22 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组备份 6</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-367.000000, -299.000000)">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-17" transform="translate(114.000000, 272.000000)">
+                    <g id="编组-46" transform="translate(7.000000, 4.500000)">
+                        <rect id="矩形" stroke="#F9BA48" stroke-width="2" fill-opacity="0" fill="#FFFFFF" x="1.978125" y="5" width="18" height="12.5454545" rx="4"></rect>
+                        <path d="M14.9070724,20.854067 L6.78601974,20.854067 C6.2541593,20.8534219 5.77499033,20.5326466 5.57171716,20.0411632 C5.36844399,19.5496798 5.48104637,18.9841531 5.85707237,18.6080144 L9.91628289,14.547488 C10.1630832,14.300413 10.4979813,14.1615845 10.8472039,14.1615845 C11.1964266,14.1615845 11.5313247,14.300413 11.778125,14.547488 L15.8373355,18.6080144 C16.2135302,18.9843226 16.3260486,19.5501678 16.1224381,20.0417704 C15.9188277,20.5333729 15.4391722,20.8539534 14.9070724,20.854067 L14.9070724,20.854067 Z" id="路径" fill="#FFE2A5" fill-rule="nonzero"></path>
+                        <path d="M10.4301429,16.5045441 L8.72688718,18.2974605 C8.49865673,18.5377051 8.50839618,18.9174792 8.74864084,19.1457097 C8.8601504,19.2516429 9.00808287,19.3107082 9.16188863,19.3107082 L12.5887484,19.3107082 C12.9201192,19.3107082 13.1887484,19.0420791 13.1887484,18.7107082 C13.1887484,18.5556719 13.1287365,18.4066537 13.0212909,18.2948874 L11.2976869,16.501971 C11.0680354,16.2630844 10.6882102,16.2555978 10.4493236,16.4852493 C10.442785,16.4915351 10.4363898,16.4979683 10.4301429,16.5045441 Z" id="路径" fill="#07D085"></path>
+                        <g id="编组" transform="translate(4.741975, 8.100000)" fill="#07D085">
+                            <path d="M7.30434783,0.0673211781 C7.47265077,0.134642356 7.64095372,0.269284712 7.70827489,0.437587658 L9.2230014,3.43338008 L10.7377279,0.437587658 C10.8050491,0.269284712 10.973352,0.134642356 11.141655,0.0673211781 C11.3099579,1.35759459e-13 11.5119215,0.0336605891 11.6802244,0.100981767 C12.0841515,0.302945302 12.2187938,0.740532959 12.0504909,1.07713885 L9.89621318,5.35203366 C9.76157083,5.58765778 9.5259467,5.75596073 9.25666199,5.75596073 C8.98737728,5.75596073 8.75175316,5.58765778 8.6171108,5.35203366 L6.4628331,1.07713885 C6.29453015,0.70687237 6.42917251,0.302945302 6.7657784,0.100981767 C6.93408135,1.35759459e-13 7.13604488,1.35759459e-13 7.30434783,0.0673211781 Z M5.01542777,-7.32747196e-14 C5.41935484,0.0336605891 5.72230014,0.336605891 5.72230014,0.740532959 C5.75596073,1.14446003 5.45301543,1.48106592 5.04908836,1.48106592 L3.63534362,1.48106592 L3.63534362,5.01542777 C3.63534362,5.28471248 3.50070126,5.52033661 3.26507714,5.65497896 C3.02945302,5.78962132 2.7601683,5.78962132 2.52454418,5.65497896 C2.28892006,5.52033661 2.1542777,5.28471248 2.1542777,5.01542777 L2.1542777,1.48106592 L0.740532959,1.48106592 C0.471248247,1.48106592 0.235624123,1.34642356 0.100981767,1.11079944 C-0.0336605891,0.875175316 -0.0336605891,0.605890603 0.100981767,0.37026648 C0.235624123,0.134642356 0.471248247,-7.32747196e-14 0.740532959,-7.32747196e-14 L5.01542777,-7.32747196e-14 Z" id="形状结合"></path>
+                        </g>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-colexiu/header-top/image/yijian.svg

@@ -0,0 +1,21 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="22px" height="23px" viewBox="0 0 22 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <title>编组备份 7</title>
+    <g id="页面-2" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="全局设置" transform="translate(-465.000000, -299.000000)" fill-rule="nonzero">
+            <g id="编组-22" transform="translate(246.000000, 23.000000)">
+                <g id="编组-18" transform="translate(212.000000, 272.000000)">
+                    <g id="编组-14" transform="translate(7.000000, 4.500000)">
+                        <g id="编组-13" transform="translate(9.952353, 10.596238) rotate(-8.000000) translate(-9.952353, -10.596238) translate(3.605818, 4.124997)">
+                            <polygon id="路径" fill="#F9BA48" points="9.31976279 6.46978235 6.20608798 3.28933727 1.71549835 8.04841031 1.65504464 8.43169573 4.85596707 11.157485 5.00773643 11.1420884"></polygon>
+                            <polygon id="路径" fill="#FFA623" points="12.5538987 3.18607507 12.6930693 2.30867243 10.3745787 -1.22408265e-12 9.44707258 0.0467735195 7.16794043 2.32640346 10.389941 5.38357242"></polygon>
+                            <polygon id="路径" fill="#07D085" points="3.40396243 11.5455765 1.19290507 9.73299521 0.278444075 11.9264589 1.42108547e-14 12.9424828 0.695406418 12.7114988"></polygon>
+                        </g>
+                        <path d="M5.37182153,18.276632 C4.88982252,18.276632 4.499019,18.6674184 4.499019,19.1494174 C4.499019,19.6315537 4.88982252,20.0223229 5.37182153,20.0223229 L16.5857686,20 C17.0677676,20 17.4585711,19.6092136 17.4585711,19.1270945 C17.4585711,18.6450955 17.0677676,18.2543091 16.5857686,18.2543091 L5.37182153,18.276632 Z" id="路径" fill="#07D085"></path>
+                        <path d="M16.5771176,16.0636433 C17.0638026,16.0636433 17.4585883,15.6688748 17.4585883,15.1822585 C17.4585883,14.6956422 17.0638026,14.3009252 16.5771176,14.3009252 L12.3904933,14.3232481 C11.903877,14.3232481 11.5091257,14.7179651 11.5091257,15.2045814 C11.5091257,15.6911977 11.903877,16.0859662 12.3904933,16.0859662 L16.5771176,16.0636433 Z" id="路径" fill="#07D085"></path>
+                    </g>
+                </g>
+            </g>
+        </g>
+    </g>
+</svg>

src/page-colexiu/header-top/settting/index.module.less

@@ -5,7 +5,7 @@
 .closeBtn {
     position: absolute;
     right: -34px;
-    top: -6px;
+    top: 0;
     width: 24px;
     height: 24px;
     border-radius: 50%;
@@ -37,6 +37,7 @@
 
     :global {
         .van-tab__panel {
+            position: relative;
             height: calc(86vh - 50px);
             max-height: calc(310px - 50px);
             overflow-y: auto;
@@ -55,10 +56,12 @@
         .van-tabs__line {
             bottom: 0;
         }
-        .van-cell{
+
+        .van-cell {
             padding-left: 0;
             padding-right: 0;
-            &:after{
+
+            &:after {
                 left: 0;
                 right: 0;
                 border-color: #F0F0F0;
@@ -80,9 +83,10 @@
             .van-switch__node {
                 display: none;
             }
+        }
 
-
-
+        .van-notice-bar__content {
+            font-size: 12px;
         }
     }
 }
@@ -163,4 +167,32 @@
         background-color: var(--van-primary-color);
         border-radius: 20px;
     }
+}
+
+.btnsbar {
+    position: absolute;
+    bottom: 12px;
+    left: 0;
+    width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-evenly;
+
+    .btn {
+        display: flex;
+        justify-content: space-evenly;
+        align-items: center;
+        width: 30%;
+        height: 30px;
+        padding: 0 6px;
+        border-radius: 6px;
+        font-size: 10px;
+        background: #fff6e8;
+        color: #6c442d;
+        border: none;
+        white-space: nowrap;
+        &:active{
+            opacity: .8;
+        }
+    }
 }

src/page-colexiu/header-top/settting/index.tsx

@@ -6,6 +6,9 @@ import state from "/src/state";
 import { api_closeCamera, api_openCamera } from "/src/helpers/communication";
 import store from "store";
 import iconInfo from "../image/info.svg";
+import iconDown from "../image/down.svg";
+import iconTv from "../image/tv.svg";
+import iconYijian from "../image/yijian.svg";
 
 export default defineComponent({
 	name: "header-settting",
@@ -29,6 +32,20 @@ export default defineComponent({
 									extra: () => <Switch v-model={state.setting.eyeProtection}></Switch>,
 								}}
 							</Cell>
+							<div class={styles.btnsbar}>
+								<div class={styles.btn}>
+									<img src={iconDown} />
+									下载曲谱
+								</div>
+								<div class={styles.btn}>
+									<img src={iconTv} />
+									投屏帮助
+								</div>
+								<div class={styles.btn}>
+									<img src={iconYijian} />
+									意见反馈
+								</div>
+							</div>
 						</Tab>
 						<Tab title="练习设置">
 							<Cell title="循环播放" center>
@@ -76,7 +93,7 @@ export default defineComponent({
 									),
 								}}
 							</Cell>
-							<Cell style={{display: state.setting.camera ? '' : 'none'}} title="透明度" class={styles.sliderWrap} center>
+							<Cell style={{ display: state.setting.camera ? "" : "none" }} title="透明度" class={styles.sliderWrap} center>
 								{{
 									extra: () => (
 										<Slider class={styles.slider} min={0} max={100} v-model:modelValue={state.setting.cameraOpacity}>