- 探索音乐的无限可能
+
-
-
-
-
-
-
-
-
-
- 
- 
-
-
-
-
-
-
-
-
-
-
-
-
+
@@ -53,24 +49,22 @@
- 
- ![]()
+
- 
- 
- 
- 
- 
- 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
@@ -53,24 +49,22 @@
-
-
-
+ 中国AIGC产业联盟（AIGCxChina）
- 温州市社科联
- 温州市新闻媒体中心
- 第一届AI音乐春晚 正选节目
- {{ bannerList[pointerIndex]?.desc }}
-
-
-
-
-
-
+
+
+ ![]()
+
+
+
+
+
+
+
+
+
+
@@ -95,14 +89,18 @@
-
+
- `6X;gJ9lEC>lN0SQV#dB~$tAUs5pKnNj(Y`@>$b8pVwd(OS*?BkqsFK3x0
zchA|!_kF+JJ^T3f+eD&*{?*nd=>HLk^M6p0I6IL@oKKz};URyHpZN9TA11g@hs*N+
ziiYHb5shQUUp70Ln%I!6eyK5;n$eI*P*_`FP5t|Y7vH&#_MBcAd`87K>7qU_R@Txn8XKXT;v
z8^%nyq_HYh*O;u{Yy@XN^@r1tssl}+tu&^r>sOaKcYXrjw|h?~N+vu5=O2pdCC!U((T{kiM@;`i?h|A9R(kOB;+_
zeDFZLfTw6lIeOGIR*t{Cp(@oHISe(`HO?FH7(K~{OVRAg)Wsy5HRX!C$QO78&*4fv
z{L*J%lsb?1^P1Y1DCfwB>AL_KgpWk96x5Fzbq1}gOs4gf{>WowxNbrQkOgECEDGV2
zHmmZADjLskJJoT|&B|g-Z>mqAxdLPaS(!&9xDx6|j~_|(
zy)CcKo04Pc=i3IE1&5Hil4xD@8p6FN#@_dyL=R+V4jHpK*CZ0BVgD?~-8b$zdsmPl
zWN8*Hy}3`lVBDFs4&E4JuZDd_evl<(suv|Qxy`;XbvBLf*Jfys|LUm&kZJwsv1ge<
zO;4`%qsE;>bcVktTl(X_oNqw34UudiV?Ai;&4uPIBMAGQSz5~#gRuD`8AH~3(NoLK
zYWFerLDdba15xP*tnYo?=Ldy-rW||=LLLubOd5~%G>z{vxcd1^W5TfJ1?l;HJjV-r
zyo0%680!P^+D?e=Ug#re|L{e%5uCr&)|#&K97Uil?Dlc0lpoYuv9*^Iujfavp7)sE
zGs3lfjcDDAJm)O_y7qbJcZEXMA^|2=z9B5t7zIv~Lt$tz>`{=6MO!b{@
zCijl{{=G}R|L}@mv+XnIvEzr2u-Fxr!11nb-aZ!Ja+Lw}V}Eq@
zZS2sduL?6Azs-|CKed&%SKiWF2S|rRw;mC6(`cUWsIxWi((Bl_pMR0ZTl~Pg1UA3@
zp5{7Gy-lY+A@md7#?c#Io93O-IHs!v*8ZhVYaIY)-g@@Jv7ny}9aSg%=l=3qcDQ|)
zD^KwY?-Dq6@H@7k`c`dq0GR2}Eia^>zvOohu)%==?@ShmiF{6;I8lOL5C0I&=67^|
z2U1OiTX*5NIHTg!?laF;J^E|`M7_N_d18QVn)Yvoy7cjH?kPEsG5jYFKf~vD-Z*xT
zg}xMhYDT^~{;HfaDt0Cdb6Hil?fpir{OXXIOdh}ub9@ztKCt<=2erxr7#42j&TnxR
zvzQ!~O?+I1U7mL7osVkew;0VP-!H%SNj7-$q>@aqcBY+1i8H5EZ;GD7#aiEqqrFP}
zF2C<7{rtMDQE8W}P!86>`VMs}$>Ynn-qkJ-VCme-ouASgQqqg8=3RO{>*?61#P8=X
zzM-98FSMJ8Gv{YlvaYXoD9NL}X^|0m08?kQ^Pd(P^NVsjxM7nLzgQC&^DO1?o|aFP
z@5uQgEq>?;Y*x`azb{)$t^X-3RY;aIoCWDl=`Syp*$b+yg
zWS0y!*6j7g%kO3PJR!|15@NozYw>cnvvEOL_+1|_Q=S8^ermEA{Had_#zQSW_ZMu}
zdBNNsXW{jCuz_QJN_8MkoGXEiZ@gm;f5JEy^>m2a)s(QUIB)Fr?C9S8xeUZ1B?;_o
zm~Re$!q~}9Dd`WAO;tIa*6%iMR^m5KoGXEStJfLB9~c8`u@B((bS3fMwP*_>ZoZLkic>hkbcIJdiH`Ugt<#))$!fH~3p3AdQTpRl&$4?E_veLvEzoAhcf
z1Aap^=PAv-e>Z&vHJt$L11|pUedh2d%Q1mJi-9y5UYX(5Em5r1rn`uJYLj#<#m?_gV
zr$H_&?tfYdf6V_epW^a0-0ykCP$ixY-MAGG))>VfHauw0uU>`EOxi^^-bMBOxKbVX
z5Cg8hJs$O+p)U<9SuqWS~!BFKdbU0M!fNih-o#Wqf$0JJhs9X|5
zmrMndVrhXr`HjWmd3sNMw(1%19kZG^zc^3c-*dEFV3g)#_mUN+@#pv9dcxPk7y{Y|1LzH_{J7k3>lv`e
z7$C+WTpYrZe|r3v>X0cPYm=*=d_ML;$$-v;K;Amf23hkzsr4V#{l3VIu}h2)*vr{I
zW3HCHQoV_|yK6
z+#QV{j=PEP*@we@TefO7^SCceUiJ=X#Bu(#)y@488^DC>R1Xv#@o!<2t0;ScPg
z15EaQ4!hy&xV{rTq;Ay{RaIs^>p4bp$#djskj|8o7jA^6{tc7
z~+`<
z!T1yB4`pePNw@8TIf_+wkS)9W@jz)7`Lv(^R6YMK=Iu3%J`88wRotXo5XQ%A
zo_;}vWS$mv$g7-8#Iv9OMjt?S-vYnG7q+7?k5zH}oK(Q}19jNEILBd?LRt|;q_VTvoA}F59cGp9z$dOTlM~f%$YZ@GEyAQTE1+g&{z-aX4r2EiatN(
zwA}G9+p~0))Y|Z;wFd6|5o8TsfUQ%%Z-3_Z{s%uY663;n4>41M~o9O
zR}|AnF^qNnr4t`xs~&%@IB(#Y_%nINCo3b5_dlR6___ZjlmDv6o@EtGj_B;LLA4Xh^Y1Y^Mttd}+zHtY1QCf+2+_fOx4m{rf0{m%j
zz|;Lt8SL>Fds?wGF9FPZ_N{95eNP}T1-4$Dm;2xB_+uO#yWk{ny!$Y}chru7+i$=3
zzoCwJx&P5#9={7%@$SRmq*op#LEi;-rtCO4{+77^5p{s-%^Ju29LAP9?7x%;D#3Dr
zdvgk51PpBwWRK-IxMDb}Gv<;6vou)Qea0nGehTqth+s8MH-e$Y0tj8X|>
zj11dCDh~U6=-WzyXTl1Y6~ff-yIGZ2RQb6VI7)Kj_T+YTsKC$ncVL$=N_;ueLhHQ1
z$}hfN;)kXu?l9kUYhAeM
z%*W~n0zXH5%Je(v^CQ;o#rk872jVfI?r#K*^`i2<7cm#Z7?Z|xLw(-@$TIA4zKC(L
zaC&_}&bH_&)1Q0jBe1p;*8IL0#$MiAYsK+?fd{OGdfyZDnywc-W#U+SMkTp#C}0xQ
zoWCuoy&M@lWzt|@lIstUenLnx4GKH?a&ShE?6R5O!$e
zM;CUw@_}v|^b?_@YD}K~zqj)3R-r7&0J6}nucr$ulleeD+0Xfcva2hkpRY?t+ayk=
z^Trt!KWEKKy&iy9)pI$fF$p7ooH-@gw3a%)ZuE2BB+p`ofk#+n(ik|&zYFCsR{#&x
z&x5D1`c@
zHhK8w%Poglp5`Oa@l+Yz9{HM8e8|myRSBi7n~miNxvY3~MuCE5l6C
zVqst?T!{qP?5zT_*;@s)55?ycw+w}OfweBAdoDf0
ziiKNpF)X%M
zF)X(Cyl}0ZA&35>#r~f9n|6EHp?}I@kb3YOhKA?&hdB&Uf0@Go^`|)mQ_$YQ@&4FG
zAn&hj1oHmeMiBp?*a#Yq{A>hNB5W&=2Zsve#W9vGkQc{TwgBsUl`UX+I(?R-nshjm
qp_N@$q?}qru`(ELMbC(&CKFC)kWFq;V3p1z0i$ee`avXGum2C2SX3wg
literal 0
HcmV?d00001
diff --git a/static/js/axios.min.js b/static/js/axios.min.js
new file mode 100644
index 0000000..906df9e
--- /dev/null
+++ b/static/js/axios.min.js
@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).axios=t()}(this,(function(){"use strict";function e(e){var r,n;function o(r,n){try{var a=e[r](n),u=a.value,s=u instanceof t;Promise.resolve(s?u.v:u).then((function(t){if(s){var n="return"===r?"return":"next";if(!u.k||t.done)return o(n,t);t=e[n](t).value}i(a.done?"return":"normal",t)}),(function(e){o("throw",e)}))}catch(e){i("throw",e)}}function i(e,t){switch(e){case"return":r.resolve({value:t,done:!0});break;case"throw":r.reject(t);break;default:r.resolve({value:t,done:!1})}(r=r.next)?o(r.key,r.arg):n=null}this._invoke=function(e,t){return new Promise((function(i,a){var u={key:e,arg:t,resolve:i,reject:a,next:null};n?n=n.next=u:(r=n=u,o(e,t))}))},"function"!=typeof e.return&&(this.return=void 0)}function t(e,t){this.v=e,this.k=t}function r(e){var r={},n=!1;function o(r,o){return n=!0,o=new Promise((function(t){t(e[r](o))})),{done:!1,value:new t(o,1)}}return r["undefined"!=typeof Symbol&&Symbol.iterator||"@@iterator"]=function(){return this},r.next=function(e){return n?(n=!1,e):o("next",e)},"function"==typeof e.throw&&(r.throw=function(e){if(n)throw n=!1,e;return o("throw",e)}),"function"==typeof e.return&&(r.return=function(e){return n?(n=!1,e):o("return",e)}),r}function n(e){var t,r,n,i=2;for("undefined"!=typeof Symbol&&(r=Symbol.asyncIterator,n=Symbol.iterator);i--;){if(r&&null!=(t=e[r]))return t.call(e);if(n&&null!=(t=e[n]))return new o(t.call(e));r="@@asyncIterator",n="@@iterator"}throw new TypeError("Object is not async iterable")}function o(e){function t(e){if(Object(e)!==e)return Promise.reject(new TypeError(e+" is not an object."));var t=e.done;return Promise.resolve(e.value).then((function(e){return{value:e,done:t}}))}return o=function(e){this.s=e,this.n=e.next},o.prototype={s:null,n:null,next:function(){return t(this.n.apply(this.s,arguments))},return:function(e){var r=this.s.return;return void 0===r?Promise.resolve({value:e,done:!0}):t(r.apply(this.s,arguments))},throw:function(e){var r=this.s.return;return void 0===r?Promise.reject(e):t(r.apply(this.s,arguments))}},new o(e)}function i(e){return new t(e,0)}function a(e,t){var r=Object.keys(e);if(Object.getOwnPropertySymbols){var n=Object.getOwnPropertySymbols(e);t&&(n=n.filter((function(t){return Object.getOwnPropertyDescriptor(e,t).enumerable}))),r.push.apply(r,n)}return r}function u(e){for(var t=1;t=0;--i){var a=this.tryEntries[i],u=a.completion;if("root"===a.tryLoc)return o("end");if(a.tryLoc<=this.prev){var s=n.call(a,"catchLoc"),c=n.call(a,"finallyLoc");if(s&&c){if(this.prev=0;--r){var o=this.tryEntries[r];if(o.tryLoc<=this.prev&&n.call(o,"finallyLoc")&&this.prev=0;--t){var r=this.tryEntries[t];if(r.finallyLoc===e)return this.complete(r.completion,r.afterLoc),j(r),y}},catch:function(e){for(var t=this.tryEntries.length-1;t>=0;--t){var r=this.tryEntries[t];if(r.tryLoc===e){var n=r.completion;if("throw"===n.type){var o=n.arg;j(r)}return o}}throw new Error("illegal catch attempt")},delegateYield:function(t,r,n){return this.delegate={iterator:L(t),resultName:r,nextLoc:n},"next"===this.method&&(this.arg=e),y}},t}function c(e){var t=function(e,t){if("object"!=typeof e||!e)return e;var r=e[Symbol.toPrimitive];if(void 0!==r){var n=r.call(e,t||"default");if("object"!=typeof n)return n;throw new TypeError("@@toPrimitive must return a primitive value.")}return("string"===t?String:Number)(e)}(e,"string");return"symbol"==typeof t?t:String(t)}function f(e){return f="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(e){return typeof e}:function(e){return e&&"function"==typeof Symbol&&e.constructor===Symbol&&e!==Symbol.prototype?"symbol":typeof e},f(e)}function l(t){return function(){return new e(t.apply(this,arguments))}}function h(e,t,r,n,o,i,a){try{var u=e[i](a),s=u.value}catch(e){return void r(e)}u.done?t(s):Promise.resolve(s).then(n,o)}function p(e){return function(){var t=this,r=arguments;return new Promise((function(n,o){var i=e.apply(t,r);function a(e){h(i,n,o,a,u,"next",e)}function u(e){h(i,n,o,a,u,"throw",e)}a(void 0)}))}}function d(e,t){if(!(e instanceof t))throw new TypeError("Cannot call a class as a function")}function v(e,t){for(var r=0;re.length)&&(t=e.length);for(var r=0,n=new Array(t);r2&&void 0!==arguments[2]?arguments[2]:{},i=o.allOwnKeys,a=void 0!==i&&i;if(null!=e)if("object"!==f(e)&&(e=[e]),N(e))for(r=0,n=e.length;r0;)if(t===(r=n[o]).toLowerCase())return r;return null}var Q="undefined"!=typeof globalThis?globalThis:"undefined"!=typeof self?self:"undefined"!=typeof window?window:global,Z=function(e){return!_(e)&&e!==Q};var ee,te=(ee="undefined"!=typeof Uint8Array&&A(Uint8Array),function(e){return ee&&e instanceof ee}),re=P("HTMLFormElement"),ne=function(e){var t=Object.prototype.hasOwnProperty;return function(e,r){return t.call(e,r)}}(),oe=P("RegExp"),ie=function(e,t){var r=Object.getOwnPropertyDescriptors(e),n={};$(r,(function(r,o){var i;!1!==(i=t(r,o,e))&&(n[o]=i||r)})),Object.defineProperties(e,n)},ae="abcdefghijklmnopqrstuvwxyz",ue="0123456789",se={DIGIT:ue,ALPHA:ae,ALPHA_DIGIT:ae+ae.toUpperCase()+ue};var ce,fe,le,he,pe=P("AsyncFunction"),de=(ce="function"==typeof setImmediate,fe=U(Q.postMessage),ce?setImmediate:fe?(le="axios@".concat(Math.random()),he=[],Q.addEventListener("message",(function(e){var t=e.source,r=e.data;t===Q&&r===le&&he.length&&he.shift()()}),!1),function(e){he.push(e),Q.postMessage(le,"*")}):function(e){return setTimeout(e)}),ve="undefined"!=typeof queueMicrotask?queueMicrotask.bind(Q):"undefined"!=typeof process&&process.nextTick||de,ye={isArray:N,isArrayBuffer:C,isBuffer:function(e){return null!==e&&!_(e)&&null!==e.constructor&&!_(e.constructor)&&U(e.constructor.isBuffer)&&e.constructor.isBuffer(e)},isFormData:function(e){var t;return e&&("function"==typeof FormData&&e instanceof FormData||U(e.append)&&("formdata"===(t=j(e))||"object"===t&&U(e.toString)&&"[object FormData]"===e.toString()))},isArrayBufferView:function(e){return"undefined"!=typeof ArrayBuffer&&ArrayBuffer.isView?ArrayBuffer.isView(e):e&&e.buffer&&C(e.buffer)},isString:F,isNumber:B,isBoolean:function(e){return!0===e||!1===e},isObject:D,isPlainObject:I,isReadableStream:G,isRequest:K,isResponse:V,isHeaders:X,isUndefined:_,isDate:q,isFile:M,isBlob:z,isRegExp:oe,isFunction:U,isStream:function(e){return D(e)&&U(e.pipe)},isURLSearchParams:J,isTypedArray:te,isFileList:H,forEach:$,merge:function e(){for(var t=Z(this)&&this||{},r=t.caseless,n={},o=function(t,o){var i=r&&Y(n,o)||o;I(n[i])&&I(t)?n[i]=e(n[i],t):I(t)?n[i]=e({},t):N(t)?n[i]=t.slice():n[i]=t},i=0,a=arguments.length;i3&&void 0!==arguments[3]?arguments[3]:{},o=n.allOwnKeys;return $(t,(function(t,n){r&&U(t)?e[n]=R(t,r):e[n]=t}),{allOwnKeys:o}),e},trim:function(e){return e.trim?e.trim():e.replace(/^[\s\uFEFF\xA0]+|[\s\uFEFF\xA0]+$/g,"")},stripBOM:function(e){return 65279===e.charCodeAt(0)&&(e=e.slice(1)),e},inherits:function(e,t,r,n){e.prototype=Object.create(t.prototype,n),e.prototype.constructor=e,Object.defineProperty(e,"super",{value:t.prototype}),r&&Object.assign(e.prototype,r)},toFlatObject:function(e,t,r,n){var o,i,a,u={};if(t=t||{},null==e)return t;do{for(i=(o=Object.getOwnPropertyNames(e)).length;i-- >0;)a=o[i],n&&!n(a,e,t)||u[a]||(t[a]=e[a],u[a]=!0);e=!1!==r&&A(e)}while(e&&(!r||r(e,t))&&e!==Object.prototype);return t},kindOf:j,kindOfTest:P,endsWith:function(e,t,r){e=String(e),(void 0===r||r>e.length)&&(r=e.length),r-=t.length;var n=e.indexOf(t,r);return-1!==n&&n===r},toArray:function(e){if(!e)return null;if(N(e))return e;var t=e.length;if(!B(t))return null;for(var r=new Array(t);t-- >0;)r[t]=e[t];return r},forEachEntry:function(e,t){for(var r,n=(e&&e[Symbol.iterator]).call(e);(r=n.next())&&!r.done;){var o=r.value;t.call(e,o[0],o[1])}},matchAll:function(e,t){for(var r,n=[];null!==(r=e.exec(t));)n.push(r);return n},isHTMLForm:re,hasOwnProperty:ne,hasOwnProp:ne,reduceDescriptors:ie,freezeMethods:function(e){ie(e,(function(t,r){if(U(e)&&-1!==["arguments","caller","callee"].indexOf(r))return!1;var n=e[r];U(n)&&(t.enumerable=!1,"writable"in t?t.writable=!1:t.set||(t.set=function(){throw Error("Can not rewrite read-only method '"+r+"'")}))}))},toObjectSet:function(e,t){var r={},n=function(e){e.forEach((function(e){r[e]=!0}))};return N(e)?n(e):n(String(e).split(t)),r},toCamelCase:function(e){return e.toLowerCase().replace(/[-_\s]([a-z\d])(\w*)/g,(function(e,t,r){return t.toUpperCase()+r}))},noop:function(){},toFiniteNumber:function(e,t){return null!=e&&Number.isFinite(e=+e)?e:t},findKey:Y,global:Q,isContextDefined:Z,ALPHABET:se,generateString:function(){for(var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:16,t=arguments.length>1&&void 0!==arguments[1]?arguments[1]:se.ALPHA_DIGIT,r="",n=t.length;e--;)r+=t[Math.random()*n|0];return r},isSpecCompliantForm:function(e){return!!(e&&U(e.append)&&"FormData"===e[Symbol.toStringTag]&&e[Symbol.iterator])},toJSONObject:function(e){var t=new Array(10);return function e(r,n){if(D(r)){if(t.indexOf(r)>=0)return;if(!("toJSON"in r)){t[n]=r;var o=N(r)?[]:{};return $(r,(function(t,r){var i=e(t,n+1);!_(i)&&(o[r]=i)})),t[n]=void 0,o}}return r}(e,0)},isAsyncFn:pe,isThenable:function(e){return e&&(D(e)||U(e))&&U(e.then)&&U(e.catch)},setImmediate:de,asap:ve};function me(e,t,r,n,o){Error.call(this),Error.captureStackTrace?Error.captureStackTrace(this,this.constructor):this.stack=(new Error).stack,this.message=e,this.name="AxiosError",t&&(this.code=t),r&&(this.config=r),n&&(this.request=n),o&&(this.response=o,this.status=o.status?o.status:null)}ye.inherits(me,Error,{toJSON:function(){return{message:this.message,name:this.name,description:this.description,number:this.number,fileName:this.fileName,lineNumber:this.lineNumber,columnNumber:this.columnNumber,stack:this.stack,config:ye.toJSONObject(this.config),code:this.code,status:this.status}}});var be=me.prototype,ge={};["ERR_BAD_OPTION_VALUE","ERR_BAD_OPTION","ECONNABORTED","ETIMEDOUT","ERR_NETWORK","ERR_FR_TOO_MANY_REDIRECTS","ERR_DEPRECATED","ERR_BAD_RESPONSE","ERR_BAD_REQUEST","ERR_CANCELED","ERR_NOT_SUPPORT","ERR_INVALID_URL"].forEach((function(e){ge[e]={value:e}})),Object.defineProperties(me,ge),Object.defineProperty(be,"isAxiosError",{value:!0}),me.from=function(e,t,r,n,o,i){var a=Object.create(be);return ye.toFlatObject(e,a,(function(e){return e!==Error.prototype}),(function(e){return"isAxiosError"!==e})),me.call(a,e.message,t,r,n,o),a.cause=e,a.name=e.name,i&&Object.assign(a,i),a};function we(e){return ye.isPlainObject(e)||ye.isArray(e)}function Ee(e){return ye.endsWith(e,"[]")?e.slice(0,-2):e}function Oe(e,t,r){return e?e.concat(t).map((function(e,t){return e=Ee(e),!r&&t?"["+e+"]":e})).join(r?".":""):t}var Se=ye.toFlatObject(ye,{},null,(function(e){return/^is[A-Z]/.test(e)}));function xe(e,t,r){if(!ye.isObject(e))throw new TypeError("target must be an object");t=t||new FormData;var n=(r=ye.toFlatObject(r,{metaTokens:!0,dots:!1,indexes:!1},!1,(function(e,t){return!ye.isUndefined(t[e])}))).metaTokens,o=r.visitor||c,i=r.dots,a=r.indexes,u=(r.Blob||"undefined"!=typeof Blob&&Blob)&&ye.isSpecCompliantForm(t);if(!ye.isFunction(o))throw new TypeError("visitor must be a function");function s(e){if(null===e)return"";if(ye.isDate(e))return e.toISOString();if(!u&&ye.isBlob(e))throw new me("Blob is not supported. Use a Buffer instead.");return ye.isArrayBuffer(e)||ye.isTypedArray(e)?u&&"function"==typeof Blob?new Blob([e]):Buffer.from(e):e}function c(e,r,o){var u=e;if(e&&!o&&"object"===f(e))if(ye.endsWith(r,"{}"))r=n?r:r.slice(0,-2),e=JSON.stringify(e);else if(ye.isArray(e)&&function(e){return ye.isArray(e)&&!e.some(we)}(e)||(ye.isFileList(e)||ye.endsWith(r,"[]"))&&(u=ye.toArray(e)))return r=Ee(r),u.forEach((function(e,n){!ye.isUndefined(e)&&null!==e&&t.append(!0===a?Oe([r],n,i):null===a?r:r+"[]",s(e))})),!1;return!!we(e)||(t.append(Oe(o,r,i),s(e)),!1)}var l=[],h=Object.assign(Se,{defaultVisitor:c,convertValue:s,isVisitable:we});if(!ye.isObject(e))throw new TypeError("data must be an object");return function e(r,n){if(!ye.isUndefined(r)){if(-1!==l.indexOf(r))throw Error("Circular reference detected in "+n.join("."));l.push(r),ye.forEach(r,(function(r,i){!0===(!(ye.isUndefined(r)||null===r)&&o.call(t,r,ye.isString(i)?i.trim():i,n,h))&&e(r,n?n.concat(i):[i])})),l.pop()}}(e),t}function Re(e){var t={"!":"%21","'":"%27","(":"%28",")":"%29","~":"%7E","%20":"+","%00":"\0"};return encodeURIComponent(e).replace(/[!'()~]|%20|%00/g,(function(e){return t[e]}))}function Te(e,t){this._pairs=[],e&&xe(e,this,t)}var ke=Te.prototype;function Ae(e){return encodeURIComponent(e).replace(/%3A/gi,":").replace(/%24/g,"$").replace(/%2C/gi,",").replace(/%20/g,"+").replace(/%5B/gi,"[").replace(/%5D/gi,"]")}function je(e,t,r){if(!t)return e;var n,o=r&&r.encode||Ae,i=r&&r.serialize;if(n=i?i(t,r):ye.isURLSearchParams(t)?t.toString():new Te(t,r).toString(o)){var a=e.indexOf("#");-1!==a&&(e=e.slice(0,a)),e+=(-1===e.indexOf("?")?"?":"&")+n}return e}ke.append=function(e,t){this._pairs.push([e,t])},ke.toString=function(e){var t=e?function(t){return e.call(this,t,Re)}:Re;return this._pairs.map((function(e){return t(e[0])+"="+t(e[1])}),"").join("&")};var Pe=function(){function e(){d(this,e),this.handlers=[]}return y(e,[{key:"use",value:function(e,t,r){return this.handlers.push({fulfilled:e,rejected:t,synchronous:!!r&&r.synchronous,runWhen:r?r.runWhen:null}),this.handlers.length-1}},{key:"eject",value:function(e){this.handlers[e]&&(this.handlers[e]=null)}},{key:"clear",value:function(){this.handlers&&(this.handlers=[])}},{key:"forEach",value:function(e){ye.forEach(this.handlers,(function(t){null!==t&&e(t)}))}}]),e}(),Le={silentJSONParsing:!0,forcedJSONParsing:!0,clarifyTimeoutError:!1},Ne={isBrowser:!0,classes:{URLSearchParams:"undefined"!=typeof URLSearchParams?URLSearchParams:Te,FormData:"undefined"!=typeof FormData?FormData:null,Blob:"undefined"!=typeof Blob?Blob:null},protocols:["http","https","file","blob","url","data"]},_e="undefined"!=typeof window&&"undefined"!=typeof document,Ce="object"===("undefined"==typeof navigator?"undefined":f(navigator))&&navigator||void 0,Fe=_e&&(!Ce||["ReactNative","NativeScript","NS"].indexOf(Ce.product)<0),Ue="undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope&&"function"==typeof self.importScripts,Be=_e&&window.location.href||"http://localhost",De=u(u({},Object.freeze({__proto__:null,hasBrowserEnv:_e,hasStandardBrowserWebWorkerEnv:Ue,hasStandardBrowserEnv:Fe,navigator:Ce,origin:Be})),Ne);function Ie(e){function t(e,r,n,o){var i=e[o++];if("__proto__"===i)return!0;var a=Number.isFinite(+i),u=o>=e.length;return i=!i&&ye.isArray(n)?n.length:i,u?(ye.hasOwnProp(n,i)?n[i]=[n[i],r]:n[i]=r,!a):(n[i]&&ye.isObject(n[i])||(n[i]=[]),t(e,r,n[i],o)&&ye.isArray(n[i])&&(n[i]=function(e){var t,r,n={},o=Object.keys(e),i=o.length;for(t=0;t-1,i=ye.isObject(e);if(i&&ye.isHTMLForm(e)&&(e=new FormData(e)),ye.isFormData(e))return o?JSON.stringify(Ie(e)):e;if(ye.isArrayBuffer(e)||ye.isBuffer(e)||ye.isStream(e)||ye.isFile(e)||ye.isBlob(e)||ye.isReadableStream(e))return e;if(ye.isArrayBufferView(e))return e.buffer;if(ye.isURLSearchParams(e))return t.setContentType("application/x-www-form-urlencoded;charset=utf-8",!1),e.toString();if(i){if(n.indexOf("application/x-www-form-urlencoded")>-1)return function(e,t){return xe(e,new De.classes.URLSearchParams,Object.assign({visitor:function(e,t,r,n){return De.isNode&&ye.isBuffer(e)?(this.append(t,e.toString("base64")),!1):n.defaultVisitor.apply(this,arguments)}},t))}(e,this.formSerializer).toString();if((r=ye.isFileList(e))||n.indexOf("multipart/form-data")>-1){var a=this.env&&this.env.FormData;return xe(r?{"files[]":e}:e,a&&new a,this.formSerializer)}}return i||o?(t.setContentType("application/json",!1),function(e,t,r){if(ye.isString(e))try{return(t||JSON.parse)(e),ye.trim(e)}catch(e){if("SyntaxError"!==e.name)throw e}return(r||JSON.stringify)(e)}(e)):e}],transformResponse:[function(e){var t=this.transitional||qe.transitional,r=t&&t.forcedJSONParsing,n="json"===this.responseType;if(ye.isResponse(e)||ye.isReadableStream(e))return e;if(e&&ye.isString(e)&&(r&&!this.responseType||n)){var o=!(t&&t.silentJSONParsing)&&n;try{return JSON.parse(e)}catch(e){if(o){if("SyntaxError"===e.name)throw me.from(e,me.ERR_BAD_RESPONSE,this,null,this.response);throw e}}}return e}],timeout:0,xsrfCookieName:"XSRF-TOKEN",xsrfHeaderName:"X-XSRF-TOKEN",maxContentLength:-1,maxBodyLength:-1,env:{FormData:De.classes.FormData,Blob:De.classes.Blob},validateStatus:function(e){return e>=200&&e<300},headers:{common:{Accept:"application/json, text/plain, */*","Content-Type":void 0}}};ye.forEach(["delete","get","head","post","put","patch"],(function(e){qe.headers[e]={}}));var Me=qe,ze=ye.toObjectSet(["age","authorization","content-length","content-type","etag","expires","from","host","if-modified-since","if-unmodified-since","last-modified","location","max-forwards","proxy-authorization","referer","retry-after","user-agent"]),He=Symbol("internals");function Je(e){return e&&String(e).trim().toLowerCase()}function We(e){return!1===e||null==e?e:ye.isArray(e)?e.map(We):String(e)}function Ge(e,t,r,n,o){return ye.isFunction(n)?n.call(this,t,r):(o&&(t=r),ye.isString(t)?ye.isString(n)?-1!==t.indexOf(n):ye.isRegExp(n)?n.test(t):void 0:void 0)}var Ke=function(e,t){function r(e){d(this,r),e&&this.set(e)}return y(r,[{key:"set",value:function(e,t,r){var n=this;function o(e,t,r){var o=Je(t);if(!o)throw new Error("header name must be a non-empty string");var i=ye.findKey(n,o);(!i||void 0===n[i]||!0===r||void 0===r&&!1!==n[i])&&(n[i||t]=We(e))}var i=function(e,t){return ye.forEach(e,(function(e,r){return o(e,r,t)}))};if(ye.isPlainObject(e)||e instanceof this.constructor)i(e,t);else if(ye.isString(e)&&(e=e.trim())&&!/^[-_a-zA-Z0-9^`|~,!#$%&'*+.]+$/.test(e.trim()))i(function(e){var t,r,n,o={};return e&&e.split("\n").forEach((function(e){n=e.indexOf(":"),t=e.substring(0,n).trim().toLowerCase(),r=e.substring(n+1).trim(),!t||o[t]&&ze[t]||("set-cookie"===t?o[t]?o[t].push(r):o[t]=[r]:o[t]=o[t]?o[t]+", "+r:r)})),o}(e),t);else if(ye.isHeaders(e)){var a,u=function(e,t){var r="undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(!r){if(Array.isArray(e)||(r=O(e))||t&&e&&"number"==typeof e.length){r&&(e=r);var n=0,o=function(){};return{s:o,n:function(){return n>=e.length?{done:!0}:{done:!1,value:e[n++]}},e:function(e){throw e},f:o}}throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")}var i,a=!0,u=!1;return{s:function(){r=r.call(e)},n:function(){var e=r.next();return a=e.done,e},e:function(e){u=!0,i=e},f:function(){try{a||null==r.return||r.return()}finally{if(u)throw i}}}}(e.entries());try{for(u.s();!(a=u.n()).done;){var s=b(a.value,2),c=s[0];o(s[1],c,r)}}catch(e){u.e(e)}finally{u.f()}}else null!=e&&o(t,e,r);return this}},{key:"get",value:function(e,t){if(e=Je(e)){var r=ye.findKey(this,e);if(r){var n=this[r];if(!t)return n;if(!0===t)return function(e){for(var t,r=Object.create(null),n=/([^\s,;=]+)\s*(?:=\s*([^,;]+))?/g;t=n.exec(e);)r[t[1]]=t[2];return r}(n);if(ye.isFunction(t))return t.call(this,n,r);if(ye.isRegExp(t))return t.exec(n);throw new TypeError("parser must be boolean|regexp|function")}}}},{key:"has",value:function(e,t){if(e=Je(e)){var r=ye.findKey(this,e);return!(!r||void 0===this[r]||t&&!Ge(0,this[r],r,t))}return!1}},{key:"delete",value:function(e,t){var r=this,n=!1;function o(e){if(e=Je(e)){var o=ye.findKey(r,e);!o||t&&!Ge(0,r[o],o,t)||(delete r[o],n=!0)}}return ye.isArray(e)?e.forEach(o):o(e),n}},{key:"clear",value:function(e){for(var t=Object.keys(this),r=t.length,n=!1;r--;){var o=t[r];e&&!Ge(0,this[o],o,e,!0)||(delete this[o],n=!0)}return n}},{key:"normalize",value:function(e){var t=this,r={};return ye.forEach(this,(function(n,o){var i=ye.findKey(r,o);if(i)return t[i]=We(n),void delete t[o];var a=e?function(e){return e.trim().toLowerCase().replace(/([a-z\d])(\w*)/g,(function(e,t,r){return t.toUpperCase()+r}))}(o):String(o).trim();a!==o&&delete t[o],t[a]=We(n),r[a]=!0})),this}},{key:"concat",value:function(){for(var e,t=arguments.length,r=new Array(t),n=0;n1?r-1:0),o=1;o1&&void 0!==arguments[1]?arguments[1]:Date.now();o=i,r=null,n&&(clearTimeout(n),n=null),e.apply(null,t)};return[function(){for(var e=Date.now(),t=e-o,u=arguments.length,s=new Array(u),c=0;c=i?a(s,e):(r=s,n||(n=setTimeout((function(){n=null,a(r)}),i-t)))},function(){return r&&a(r)}]}ye.inherits(Ye,me,{__CANCEL__:!0});var tt=function(e,t){var r=arguments.length>2&&void 0!==arguments[2]?arguments[2]:3,n=0,o=Ze(50,250);return et((function(r){var i=r.loaded,a=r.lengthComputable?r.total:void 0,u=i-n,s=o(u);n=i;var c=m({loaded:i,total:a,progress:a?i/a:void 0,bytes:u,rate:s||void 0,estimated:s&&a&&i<=a?(a-i)/s:void 0,event:r,lengthComputable:null!=a},t?"download":"upload",!0);e(c)}),r)},rt=function(e,t){var r=null!=e;return[function(n){return t[0]({lengthComputable:r,total:e,loaded:n})},t[1]]},nt=function(e){return function(){for(var t=arguments.length,r=new Array(t),n=0;n1?t-1:0),n=1;n1?"since :\n"+u.map(jt).join("\n"):" "+jt(u[0]):"as no adapter specified"),"ERR_NOT_SUPPORT")}return r};function Nt(e){if(e.cancelToken&&e.cancelToken.throwIfRequested(),e.signal&&e.signal.aborted)throw new Ye(null,e)}function _t(e){return Nt(e),e.headers=Ve.from(e.headers),e.data=Xe.call(e,e.transformRequest),-1!==["post","put","patch"].indexOf(e.method)&&e.headers.setContentType("application/x-www-form-urlencoded",!1),Lt(e.adapter||Me.adapter)(e).then((function(t){return Nt(e),t.data=Xe.call(e,e.transformResponse,t),t.headers=Ve.from(t.headers),t}),(function(t){return $e(t)||(Nt(e),t&&t.response&&(t.response.data=Xe.call(e,e.transformResponse,t.response),t.response.headers=Ve.from(t.response.headers))),Promise.reject(t)}))}var Ct="1.7.7",Ft={};["object","boolean","number","function","string","symbol"].forEach((function(e,t){Ft[e]=function(r){return f(r)===e||"a"+(t<1?"n ":" ")+e}}));var Ut={};Ft.transitional=function(e,t,r){function n(e,t){return"[Axios v1.7.7] Transitional option '"+e+"'"+t+(r?". "+r:"")}return function(r,o,i){if(!1===e)throw new me(n(o," has been removed"+(t?" in "+t:"")),me.ERR_DEPRECATED);return t&&!Ut[o]&&(Ut[o]=!0,console.warn(n(o," has been deprecated since v"+t+" and will be removed in the near future"))),!e||e(r,o,i)}};var Bt={assertOptions:function(e,t,r){if("object"!==f(e))throw new me("options must be an object",me.ERR_BAD_OPTION_VALUE);for(var n=Object.keys(e),o=n.length;o-- >0;){var i=n[o],a=t[i];if(a){var u=e[i],s=void 0===u||a(u,i,e);if(!0!==s)throw new me("option "+i+" must be "+s,me.ERR_BAD_OPTION_VALUE)}else if(!0!==r)throw new me("Unknown option "+i,me.ERR_BAD_OPTION)}},validators:Ft},Dt=Bt.validators,It=function(){function e(t){d(this,e),this.defaults=t,this.interceptors={request:new Pe,response:new Pe}}var t;return y(e,[{key:"request",value:(t=p(s().mark((function e(t,r){var n,o;return s().wrap((function(e){for(;;)switch(e.prev=e.next){case 0:return e.prev=0,e.next=3,this._request(t,r);case 3:return e.abrupt("return",e.sent);case 6:if(e.prev=6,e.t0=e.catch(0),e.t0 instanceof Error){Error.captureStackTrace?Error.captureStackTrace(n={}):n=new Error,o=n.stack?n.stack.replace(/^.+\n/,""):"";try{e.t0.stack?o&&!String(e.t0.stack).endsWith(o.replace(/^.+\n.+\n/,""))&&(e.t0.stack+="\n"+o):e.t0.stack=o}catch(e){}}throw e.t0;case 10:case"end":return e.stop()}}),e,this,[[0,6]])}))),function(e,r){return t.apply(this,arguments)})},{key:"_request",value:function(e,t){"string"==typeof e?(t=t||{}).url=e:t=e||{};var r=t=st(this.defaults,t),n=r.transitional,o=r.paramsSerializer,i=r.headers;void 0!==n&&Bt.assertOptions(n,{silentJSONParsing:Dt.transitional(Dt.boolean),forcedJSONParsing:Dt.transitional(Dt.boolean),clarifyTimeoutError:Dt.transitional(Dt.boolean)},!1),null!=o&&(ye.isFunction(o)?t.paramsSerializer={serialize:o}:Bt.assertOptions(o,{encode:Dt.function,serialize:Dt.function},!0)),t.method=(t.method||this.defaults.method||"get").toLowerCase();var a=i&&ye.merge(i.common,i[t.method]);i&&ye.forEach(["delete","get","head","post","put","patch","common"],(function(e){delete i[e]})),t.headers=Ve.concat(a,i);var u=[],s=!0;this.interceptors.request.forEach((function(e){"function"==typeof e.runWhen&&!1===e.runWhen(t)||(s=s&&e.synchronous,u.unshift(e.fulfilled,e.rejected))}));var c,f=[];this.interceptors.response.forEach((function(e){f.push(e.fulfilled,e.rejected)}));var l,h=0;if(!s){var p=[_t.bind(this),void 0];for(p.unshift.apply(p,u),p.push.apply(p,f),l=p.length,c=Promise.resolve(t);h0;)n._listeners[t](e);n._listeners=null}})),this.promise.then=function(e){var t,r=new Promise((function(e){n.subscribe(e),t=e})).then(e);return r.cancel=function(){n.unsubscribe(t)},r},t((function(e,t,o){n.reason||(n.reason=new Ye(e,t,o),r(n.reason))}))}return y(e,[{key:"throwIfRequested",value:function(){if(this.reason)throw this.reason}},{key:"subscribe",value:function(e){this.reason?e(this.reason):this._listeners?this._listeners.push(e):this._listeners=[e]}},{key:"unsubscribe",value:function(e){if(this._listeners){var t=this._listeners.indexOf(e);-1!==t&&this._listeners.splice(t,1)}}},{key:"toAbortSignal",value:function(){var e=this,t=new AbortController,r=function(e){t.abort(e)};return this.subscribe(r),t.signal.unsubscribe=function(){return e.unsubscribe(r)},t.signal}}],[{key:"source",value:function(){var t;return{token:new e((function(e){t=e})),cancel:t}}}]),e}(),zt=Mt;var Ht={Continue:100,SwitchingProtocols:101,Processing:102,EarlyHints:103,Ok:200,Created:201,Accepted:202,NonAuthoritativeInformation:203,NoContent:204,ResetContent:205,PartialContent:206,MultiStatus:207,AlreadyReported:208,ImUsed:226,MultipleChoices:300,MovedPermanently:301,Found:302,SeeOther:303,NotModified:304,UseProxy:305,Unused:306,TemporaryRedirect:307,PermanentRedirect:308,BadRequest:400,Unauthorized:401,PaymentRequired:402,Forbidden:403,NotFound:404,MethodNotAllowed:405,NotAcceptable:406,ProxyAuthenticationRequired:407,RequestTimeout:408,Conflict:409,Gone:410,LengthRequired:411,PreconditionFailed:412,PayloadTooLarge:413,UriTooLong:414,UnsupportedMediaType:415,RangeNotSatisfiable:416,ExpectationFailed:417,ImATeapot:418,MisdirectedRequest:421,UnprocessableEntity:422,Locked:423,FailedDependency:424,TooEarly:425,UpgradeRequired:426,PreconditionRequired:428,TooManyRequests:429,RequestHeaderFieldsTooLarge:431,UnavailableForLegalReasons:451,InternalServerError:500,NotImplemented:501,BadGateway:502,ServiceUnavailable:503,GatewayTimeout:504,HttpVersionNotSupported:505,VariantAlsoNegotiates:506,InsufficientStorage:507,LoopDetected:508,NotExtended:510,NetworkAuthenticationRequired:511};Object.entries(Ht).forEach((function(e){var t=b(e,2),r=t[0],n=t[1];Ht[n]=r}));var Jt=Ht;var Wt=function e(t){var r=new qt(t),n=R(qt.prototype.request,r);return ye.extend(n,qt.prototype,r,{allOwnKeys:!0}),ye.extend(n,r,null,{allOwnKeys:!0}),n.create=function(r){return e(st(t,r))},n}(Me);return Wt.Axios=qt,Wt.CanceledError=Ye,Wt.CancelToken=zt,Wt.isCancel=$e,Wt.VERSION=Ct,Wt.toFormData=xe,Wt.AxiosError=me,Wt.Cancel=Wt.CanceledError,Wt.all=function(e){return Promise.all(e)},Wt.spread=function(e){return function(t){return e.apply(null,t)}},Wt.isAxiosError=function(e){return ye.isObject(e)&&!0===e.isAxiosError},Wt.mergeConfig=st,Wt.AxiosHeaders=Ve,Wt.formToJSON=function(e){return Ie(ye.isHTMLForm(e)?new FormData(e):e)},Wt.getAdapter=Lt,Wt.HttpStatusCode=Jt,Wt.default=Wt,Wt}));
+//# sourceMappingURL=axios.min.js.map
diff --git a/static/js/index.js b/static/js/index.js
index e134d39..7beb147 100644
--- a/static/js/index.js
+++ b/static/js/index.js
@@ -56,61 +56,28 @@ const search = createApp({
const customRef = ref(null);
const studentRef = ref(null);
- let pointerState = ref("introduce");
+ let pointerIndex = ref(0);
- const elements = ref([
- {
- isVisible: false,
- ref: introduceRef,
- title: "介绍",
- state: "introduce",
- },
- {
- isVisible: false,
- ref: worksRef,
- title: "作品",
- state: "works",
- },
- {
- isVisible: false,
- ref: customRef,
- title: "定制",
- state: "custom",
- },
- {
- isVisible: false,
- ref: studentRef,
- title: "学生",
- state: "student",
- },
- ]);
+ const albumBoxRef = ref(null);
// 点击侧边栏
- const changePointer = (state) => {
- const element = document.querySelector(`.${state}`);
-
- if (!element) return;
- element.scrollIntoView({
- behavior: "smooth",
- });
+ const changePointer = (index) => {
+ albumBoxRef.value.scrollTo({ top: 448 * index, behavior: "smooth" });
+ pointerIndex.value = index;
};
// 向上滚动到上一页
const scrollToPrevious = () => {
- const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value);
- if (currentIndex > 0) {
- const prevState = ["introduce", "works", "custom", "student"][currentIndex - 1];
- changePointer(prevState);
- }
+ let index = pointerIndex.value - 1;
+ if (index < 0) return;
+ changePointer(index);
};
// 向下滚动到下一页
const scrollToNext = () => {
- const currentIndex = ["introduce", "works", "custom", "student"].indexOf(pointerState.value);
- if (currentIndex < 3) {
- const nextState = ["introduce", "works", "custom", "student"][currentIndex + 1];
- changePointer(nextState);
- }
+ let index = pointerIndex.value + 1;
+ if (index > bannerList.value.length) return;
+ changePointer(index);
};
// 获取当前在可视窗口中的元素ref
@@ -119,55 +86,46 @@ const search = createApp({
return visibleElement ? visibleElement.ref : null;
});
- const observer = ref(null);
+ let bannerList = ref([]);
+ let awardMVList = ref([]);
- // 初始化观察器
- const initObserver = () => {
- observer.value = new IntersectionObserver(
- (entries) => {
- entries.forEach((entry) => {
- // 找到对应的元素状态并更新
- const targetEl = elements.value.find((el) => el.ref === entry.target);
- if (targetEl) {
- targetEl.isVisible = entry.isIntersecting;
- if (entry.isIntersecting) pointerState.value = targetEl.state;
- }
- });
- },
- {
- root: null, // 视口作为根元素
- rootMargin: "0px",
- threshold: 0.3, // 可见比例达到10%时触发
- }
- );
-
- // 开启监听 - 对所有预定义的元素执行observe
- elements.value.forEach((element) => {
- if (element.ref && element.ref) observer.value.observe(element.ref);
+ const init = () => {
+ ajaxget("https://pujianchaoyin.com/index/api").then((res) => {
+ if (res.code != 200) return;
+ const data = res.data;
+ console.log("data", data);
+ bannerList.value = data.banner;
+ awardMVList.value = data.awardMVList;
+ nextTick(() => {});
});
+ };
- console.log(observer.value);
+ let bannerSwiperTimer = null;
+ const bannerSwiper = () => {
+ bannerSwiperTimer = setTimeout(() => {
+
+ }, 1000);
};
onMounted(() => {
- setTimeout(() => initObserver(), 1000);
+ init();
// 添加进度更新事件监听器
if (audioPlayer.value) {
+ console.log("volume", audioPlayer.value.volume);
+
audioPlayer.value.addEventListener("timeupdate", getProgress);
audioPlayer.value.addEventListener("loadedmetadata", getProgress);
}
studentList.value.forEach((item, index) => {
- item["order"] = index;
+ item["order"] = index;
// item["random"] = generateRandomString();
- });
+ });
});
// 组件卸载时清理事件监听器
onUnmounted(() => {
- observer.value?.disconnect();
-
audioPlayer?.value?.removeEventListener("timeupdate", getProgress);
audioPlayer?.value?.removeEventListener("loadedmetadata", getProgress);
});
@@ -195,14 +153,15 @@ const search = createApp({
let art = null;
// 开启播放 MV
- const openPreview = () => {
+ const openPreview = (url, poster = "") => {
previewState.value = true;
nextTick(() => {
art = new Artplayer({
container: ".artplayer-app",
- url: "https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c-JoqdX_qqsgFptxhcq_cQnrlc6Z1CwMUBq_D-81qNDQyOQ~~",
+ url,
autoplay: true,
- poster: "https://o.x-php.com/thumb/UHkZOgUVDvP9z7rPV2rT1kE22Zf1QEiLggt9OPnf5hC7a-QU5l8VTqiP5awMLv2DMEUiOUl03dK1PW0Yzf8ZPfpa7ZTTgV-PZGNjZQ~~",
+ poster,
+ fullscreen: true,
});
art.play();
});
@@ -360,10 +319,7 @@ const search = createApp({
const cutStudent = (order) => {
// 找到目标元素和第一个元素
- const [target, first] = [
- studentList.value.find(item => item.order == order),
- studentList.value.find(item => item.order == 0)
- ];
+ const [target, first] = [studentList.value.find((item) => item.order == order), studentList.value.find((item) => item.order == 0)];
// 交换order值
if (target && first && target !== first) {
[target.order, first.order] = [first.order, target.order];
@@ -383,6 +339,139 @@ const search = createApp({
return result;
};
- return { cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerState, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
+ // 响应式数据：音量值、是否静音
+ const volume = ref(84);
+ const isMuted = ref(false);
+
+ // 切换静音状态的方法
+ const toggleMute = () => {
+ isMuted.value = !isMuted.value;
+ if (audioPlayer.value) {
+ audioPlayer.value.muted = isMuted.value;
+ }
+ };
+
+ // 计算并设置音量百分比
+ const setVolumePercentage = (percentage) => {
+ // 确保百分比在0-100之间
+ const volumePercent = Math.max(0, Math.min(100, percentage));
+ volume.value = Math.abs(~~volumePercent);
+
+ // 设置音频元素的音量（范围是0-1）
+ if (audioPlayer.value) audioPlayer.value.volume = volumePercent / 100;
+ };
+
+ // 处理音量进度条点击
+ const handleVolumeClick = (event) => {
+ // 获取进度条元素
+ const progressBar = event.currentTarget;
+ const rect = progressBar.getBoundingClientRect();
+
+ // 计算点击位置相对于进度条的比例
+ // 因为是垂直进度条，所以用clientY
+ const clickPosition = rect.bottom - event.clientY;
+ const percentage = (clickPosition / rect.height) * 100;
+
+ setVolumePercentage(percentage);
+ };
+
+ // 处理音量进度条拖拽
+ let isDragging = false;
+
+ const startDrag = (event) => {
+ isDragging = true;
+ handleVolumeDrag(event);
+
+ // 添加事件监听器
+ document.addEventListener("mousemove", handleVolumeDrag);
+ document.addEventListener("mouseup", stopDrag);
+ };
+
+ const handleVolumeDrag = (event) => {
+ if (!isDragging) return;
+
+ // 获取音量进度条元素
+ const progressBar = document.querySelector(".sound-control .progress");
+ if (!progressBar) return;
+
+ const rect = progressBar.getBoundingClientRect();
+
+ // 计算拖拽位置相对于进度条的比例
+ let dragPosition = rect.bottom - event.clientY;
+ // 限制在进度条范围内
+ dragPosition = Math.max(0, Math.min(dragPosition, rect.height));
+
+ const percentage = (dragPosition / rect.height) * 100;
+ setVolumePercentage(percentage);
+ };
+
+ const stopDrag = () => {
+ isDragging = false;
+ document.removeEventListener("mousemove", handleVolumeDrag);
+ document.removeEventListener("mouseup", stopDrag);
+ };
+
+ onMounted(() => {
+ // 绑定音量控制相关事件
+ const progressBar = document.querySelector(".sound-control .progress");
+ if (progressBar) {
+ progressBar.addEventListener("click", handleVolumeClick);
+
+ // 找到进度条内的滑块元素（bar）并绑定拖拽事件
+ const volumeBar = progressBar.querySelector(".bar");
+ if (volumeBar) volumeBar.addEventListener("mousedown", startDrag);
+ }
+ });
+
+ onUnmounted(() => {
+ // 清理音量控制相关事件
+ const progressBar = document.querySelector(".sound-control .progress");
+ if (progressBar) {
+ progressBar.removeEventListener("click", handleVolumeClick);
+
+ const volumeBar = progressBar.querySelector(".bar");
+ if (volumeBar) volumeBar.removeEventListener("mousedown", startDrag);
+ }
+
+ // 确保移除所有拖拽相关事件
+ document.removeEventListener("mousemove", handleVolumeDrag);
+ document.removeEventListener("mouseup", stopDrag);
+ });
+
+ const ajaxget = (url, data) => {
+ if (!data) data = {};
+
+ if (["localhost", "127.0.0.1"].includes(location.hostname)) data["authorization"] = "3338bf6a2e53dda872da3664a2560b25";
+
+ url = url.indexOf("https://") == -1 ? projectBaseURL2 + url : url;
+
+ // url += objectToQueryString(data);
+ return new Promise((resolve, reject) => {
+ axios
+ .get(url, {
+ emulateJSON: true,
+ withCredentials: true,
+ })
+ .then((res) => {
+ var data = typeof res.data == "string" ? JSON.parse(res.data) : res.data;
+
+ if (data.code == 401) {
+ openShowWindow();
+ reject();
+ }
+ if (data.code == 201) creationAlertBox("error", data.message || data.msg);
+
+ resolve(data);
+ })
+ .catch((error) => {
+ // console.log("resolve", resolve)
+
+ if (error.response?.status == 401) openShowWindow();
+ resolve("");
+ });
+ });
+ };
+
+ return { awardMVList, bannerList, albumBoxRef, volume, handleVolumeClick, handleVolumeDrag, startDrag, stopDrag, toggleMute, isMuted, volume, cutStudent, studentList, studentIndex, scrollToPrevious, scrollToNext, changePointer, pointerIndex, visibleRef, studentRef, customRef, worksRef, introduceRef, customList, closeAll, manageAudio, progress, pauseAudio, playAudio, audioList, closePreview, openPreview, previewState, audioHeadState, pauseHead, playHead, audioPlayer, text, trait, fastForward };
},
}).mount("#appIndex");
- {{ index + 1}}
- 深港双城故事
- {{ text }}
- 2024.12
-
- 
+
@@ -123,7 +121,6 @@
+ {{ (index + 1 + '').padStart(2, '0') }}
+ {{ item.title }}
+
+
+
+
+ {{ item.desc }}
+ {{ item.date }}
+
+ ![]()
2024.3
@@ -150,7 +147,6 @@
diff --git a/static/css/index.css b/static/css/index.css
index a394e65..2c2c7e1 100644
--- a/static/css/index.css
+++ b/static/css/index.css
@@ -30,62 +30,9 @@
width: 1200px;
margin: 0 auto;
}
-.content .sidebar {
- position: fixed;
- top: 175px;
- right: 100px;
- z-index: 10;
- flex-direction: column;
- align-items: center;
-}
-.content .sidebar .pointer {
- margin-bottom: 192px;
-}
-.content .sidebar .pointer .item {
- width: 4px;
- height: 50px;
- margin-bottom: 2px;
- background-color: #ffffff;
- cursor: pointer;
- position: relative;
-}
-.content .sidebar .pointer .item.active {
- background-color: #f3974b;
-}
-.content .sidebar .pointer .item.active::after {
- content: attr(data-index);
- position: absolute;
- font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
- font-weight: 400;
- font-style: normal;
- color: #f3974b;
- font-size: 14px;
- top: 0;
- left: -21px;
-}
-.content .sidebar .arrow {
- width: 12px;
- display: flex;
- flex-direction: column;
-}
-.content .sidebar .arrow .item {
- width: 12px;
- height: 7px;
-}
-.content .sidebar .arrow .item.orange {
- cursor: pointer;
-}
-.content .sidebar .arrow .item.top.orange {
- transform: rotate(180deg);
-}
-.content .sidebar .arrow .item:not(:last-of-type) {
- margin-bottom: 34px;
-}
-.content .sidebar .arrow .item.bottom.white {
- transform: rotate(180deg);
-}
.content .introduce {
width: 100%;
+ position: relative;
}
.content .introduce::after {
content: "";
@@ -97,6 +44,60 @@
background: linear-gradient(180deg, #1e135e 0%, #5241b0 100%);
z-index: -1;
}
+.content .introduce .sidebar {
+ position: absolute;
+ top: 175px;
+ right: 100px;
+ z-index: 10;
+ flex-direction: column;
+ align-items: center;
+}
+.content .introduce .sidebar .pointer {
+ margin-bottom: 192px;
+}
+.content .introduce .sidebar .pointer .item {
+ width: 4px;
+ height: 50px;
+ margin-bottom: 2px;
+ background-color: #ffffff;
+ cursor: pointer;
+ position: relative;
+}
+.content .introduce .sidebar .pointer .item.active {
+ background-color: #f3974b;
+}
+.content .introduce .sidebar .pointer .item.active::after {
+ content: attr(data-index);
+ position: absolute;
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ color: #f3974b;
+ font-size: 14px;
+ top: 0;
+ left: -21px;
+}
+.content .introduce .sidebar .arrow {
+ width: 12px;
+ display: flex;
+ flex-direction: column;
+}
+.content .introduce .sidebar .arrow .item {
+ width: 12px;
+ height: 7px;
+}
+.content .introduce .sidebar .arrow .item.orange {
+ cursor: pointer;
+}
+.content .introduce .sidebar .arrow .item.top.orange {
+ transform: rotate(180deg);
+}
+.content .introduce .sidebar .arrow .item:not(:last-of-type) {
+ margin-bottom: 34px;
+}
+.content .introduce .sidebar .arrow .item.bottom.white {
+ transform: rotate(180deg);
+}
.content .introduce .head {
height: 116px;
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
@@ -149,14 +150,15 @@
font-size: 14px;
color: #ffffff;
line-height: 24px;
+ white-space: break-spaces;
}
.content .introduce .box .album {
width: 800px;
height: 448px;
- margin-top: 60px;
- margin-right: 50px;
position: relative;
z-index: 1;
+ margin-top: 60px;
+ margin-right: 50px;
}
.content .introduce .box .album .bj {
position: absolute;
@@ -174,17 +176,28 @@
height: 720px;
z-index: -1;
}
-.content .introduce .box .album .bj.bj3 {
+.content .introduce .box .album .album-box {
+ width: 800px;
+ height: 448px;
+ overflow: hidden;
+}
+.content .introduce .box .album .album-box .item {
+ width: 800px;
+ height: 448px;
+ position: relative;
+ z-index: 1;
+}
+.content .introduce .box .album .album-box .item .bj.bj3 {
width: 100%;
height: 100%;
z-index: 1;
}
-.content .introduce .box .album .bj.bj4 {
+.content .introduce .box .album .album-box .item .bj.bj4 {
width: 68px;
height: 68px;
z-index: 2;
}
-.content .introduce .box .album .bj.bj5 {
+.content .introduce .box .album .album-box .item .bj.bj5 {
width: 236px;
height: 340px;
z-index: 3;
@@ -192,11 +205,11 @@
left: 318px;
transform: translate(0);
}
-.content .introduce .box .album .img {
+.content .introduce .box .album .album-box .item .img {
width: 100%;
height: 100%;
}
-.content .introduce .box .album .play {
+.content .introduce .box .album .album-box .item .play {
width: 26px;
height: 26px;
position: absolute;
@@ -349,8 +362,11 @@
margin-right: 40px;
margin-bottom: 18px;
}
+.content .works .mv-box .item .text-box {
+ margin-bottom: 16px;
+ height: 126px;
+}
.content .works .mv-box .item .text {
- height: 96px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
@@ -368,7 +384,6 @@
font-size: 14px;
color: #555555;
padding: 0 40px;
- margin-bottom: 18px;
}
.content .works .mv-box .item .media {
position: relative;
@@ -651,7 +666,7 @@
transform: translateX(-50%);
height: 384px;
z-index: -1;
- width: 99vw;
+ width: 98vw;
overflow: hidden;
}
.content .custom .bottom .bj {
@@ -771,7 +786,7 @@
display: block;
}
.content .student .student-box .progress-bar .bar.black {
- background-color: #000000;
+ background-color: #ffffff;
border-radius: 0 10px 10px 0;
}
.content .student .student-box .operate .cut {
@@ -849,7 +864,7 @@
width: 100%;
height: 100%;
background-color: #4c4c4c;
- z-index: 1000;
+ z-index: 1001;
}
.content .preview .close {
position: absolute;
@@ -863,3 +878,157 @@
width: 800px;
height: 600px;
}
+.content .bottom-play {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 76px;
+ background-color: #353535;
+ z-index: 1000;
+}
+.content .bottom-play .bottom-box {
+ height: 100%;
+ justify-content: space-between;
+}
+.content .bottom-play .bottom-box .left .img {
+ width: 56px;
+ height: 56px;
+ margin-right: 12px;
+}
+.content .bottom-play .bottom-box .left .name {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 6px;
+ max-width: 240px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+.content .bottom-play .bottom-box .middle {
+ flex-direction: column;
+}
+.content .bottom-play .bottom-box .middle .operate {
+ margin-bottom: 10px;
+}
+.content .bottom-play .bottom-box .middle .operate .cut {
+ width: 14px;
+ height: 12px;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .middle .operate .speed {
+ width: 16px;
+ height: 12px;
+ margin: 0 40px;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .middle .operate .play {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .middle .progress-bar {
+ height: 10px;
+ width: 500px;
+ margin: 0 auto;
+}
+.content .bottom-play .bottom-box .middle .progress-bar .bar {
+ height: 4px;
+ background-color: #ffffff;
+ border-radius: 10px;
+ position: relative;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .middle .progress-bar .bar.white {
+ width: 0;
+ border-radius: 10px 0 0 10px;
+ background-color: #5241b0;
+}
+.content .bottom-play .bottom-box .middle .progress-bar .bar.white::before {
+ content: "";
+ width: 10px;
+ height: 10px;
+ background-color: #f3974b;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: -5px;
+ cursor: pointer;
+ z-index: 1;
+ display: block;
+}
+.content .bottom-play .bottom-box .middle .progress-bar .bar.black {
+ background-color: #f2f2f2;
+ border-radius: 0 10px 10px 0;
+}
+.content .bottom-play .bottom-box .right .item {
+ position: relative;
+}
+.content .bottom-play .bottom-box .right .item .svg {
+ display: block;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .right .item:hover .sound-control {
+ display: flex;
+}
+.content .bottom-play .bottom-box .right .item .sound-control {
+ display: none;
+ justify-content: center;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 151px;
+ padding-bottom: 2px;
+ position: absolute;
+ top: -158px;
+ width: 42px;
+ align-items: center;
+ background: #1f1f1f;
+ border-radius: 8px;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 12px;
+ cursor: auto;
+}
+.content .bottom-play .bottom-box .right .item .sound-control::after {
+ content: "";
+ width: 100%;
+ height: 7px;
+ position: absolute;
+ bottom: -7px;
+}
+.content .bottom-play .bottom-box .right .item .sound-control .value {
+ color: #fff;
+ font-size: 14px;
+ user-select: none;
+}
+.content .bottom-play .bottom-box .right .item .sound-control .progress {
+ width: 4px;
+ height: 100px;
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255, 0.2);
+ flex-direction: column;
+ justify-content: flex-end;
+ cursor: pointer;
+}
+.content .bottom-play .bottom-box .right .item .sound-control .progress .bar {
+ width: 100%;
+ height: 50px;
+ background-color: #fff;
+ border-radius: 4px;
+ position: relative;
+}
+.content .bottom-play .bottom-box .right .item .sound-control .progress .bar::before {
+ content: "";
+ width: 10px;
+ height: 10px;
+ background-color: #f3974b;
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ z-index: 1;
+ display: block;
+}
diff --git a/static/css/index.less b/static/css/index.less
index b9f35e3..a198d5c 100644
--- a/static/css/index.less
+++ b/static/css/index.less
@@ -34,70 +34,9 @@
margin: 0 auto;
}
- .sidebar {
- position: fixed;
- top: 175px;
- right: 100px;
- z-index: 10;
- flex-direction: column;
- align-items: center;
- .pointer {
- margin-bottom: 192px;
- .item {
- width: 4px;
- height: 50px;
- margin-bottom: 2px;
- background-color: rgba(255, 255, 255, 1);
- cursor: pointer;
- position: relative;
-
- &.active {
- background-color: rgba(243, 151, 75, 1);
- &::after {
- content: attr(data-index);
- position: absolute;
- font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
- font-weight: 400;
- font-style: normal;
- color: #f3974b;
- font-size: 14px;
- top: 0;
- left: -21px;
- }
- }
- }
- }
-
- .arrow {
- width: 12px;
- display: flex;
- flex-direction: column;
-
- .item {
- width: 12px;
- height: 7px;
-
- &.orange {
- cursor: pointer;
- }
-
- &.top.orange {
- transform: rotate(180deg);
- }
-
- &:not(:last-of-type) {
- margin-bottom: 34px;
- }
-
- &.bottom.white {
- transform: rotate(180deg);
- }
- }
- }
- }
-
.introduce {
width: 100%;
+ position: relative;
&::after {
content: "";
position: absolute;
@@ -108,6 +47,69 @@
background: linear-gradient(180deg, rgba(30, 19, 94, 1) 0%, rgba(82, 65, 176, 1) 100%);
z-index: -1;
}
+
+ .sidebar {
+ position: absolute;
+ top: 175px;
+ right: 100px;
+ z-index: 10;
+ flex-direction: column;
+ align-items: center;
+ .pointer {
+ margin-bottom: 192px;
+ .item {
+ width: 4px;
+ height: 50px;
+ margin-bottom: 2px;
+ background-color: rgba(255, 255, 255, 1);
+ cursor: pointer;
+ position: relative;
+
+ &.active {
+ background-color: rgba(243, 151, 75, 1);
+ &::after {
+ content: attr(data-index);
+ position: absolute;
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ color: #f3974b;
+ font-size: 14px;
+ top: 0;
+ left: -21px;
+ }
+ }
+ }
+ }
+
+ .arrow {
+ width: 12px;
+ display: flex;
+ flex-direction: column;
+
+ .item {
+ width: 12px;
+ height: 7px;
+
+ &.orange {
+ cursor: pointer;
+ }
+
+ &.top.orange {
+ transform: rotate(180deg);
+ }
+
+ &:not(:last-of-type) {
+ margin-bottom: 34px;
+ }
+
+ &.bottom.white {
+ transform: rotate(180deg);
+ }
+ }
+ }
+ }
+
.head {
height: 116px;
border-bottom: 1px solid rgba(255, 255, 255, 0.101961);
@@ -164,6 +166,7 @@
font-size: 14px;
color: #ffffff;
line-height: 24px;
+ white-space: break-spaces;
}
}
}
@@ -171,11 +174,10 @@
.album {
width: 800px;
height: 448px;
- margin-top: 60px;
- margin-right: 50px;
position: relative;
z-index: 1;
-
+ margin-top: 60px;
+ margin-right: 50px;
.bj {
position: absolute;
top: 50%;
@@ -192,42 +194,58 @@
height: 720px;
z-index: -1;
}
+ }
- &.bj3 {
- width: 100%;
- height: 100%;
+ .album-box {
+ width: 800px;
+ height: 448px;
+ overflow: hidden;
+
+ .item {
+ width: 800px;
+ height: 448px;
+
+ position: relative;
z-index: 1;
+
+ .bj {
+ &.bj3 {
+ width: 100%;
+ height: 100%;
+ z-index: 1;
+ }
+
+ &.bj4 {
+ width: 68px;
+ height: 68px;
+ z-index: 2;
+ }
+
+ &.bj5 {
+ width: 236px;
+ height: 340px;
+ z-index: 3;
+ top: 0;
+ left: 318px;
+ transform: translate(0);
+ }
+ }
+
+ .img {
+ width: 100%;
+ height: 100%;
+ }
+
+ .play {
+ width: 26px;
+ height: 26px;
+ position: absolute;
+ left: 30px;
+ bottom: 30px;
+ z-index: 1;
+ cursor: pointer;
+ }
}
-
- &.bj4 {
- width: 68px;
- height: 68px;
- z-index: 2;
- }
-
- &.bj5 {
- width: 236px;
- height: 340px;
- z-index: 3;
- top: 0;
- left: 318px;
- transform: translate(0);
- }
- }
-
- .img {
- width: 100%;
- height: 100%;
- }
-
- .play {
- width: 26px;
- height: 26px;
- position: absolute;
- left: 30px;
- bottom: 30px;
- z-index: 1;
- cursor: pointer;
}
}
}
@@ -397,8 +415,13 @@
margin-bottom: 18px;
}
+ .text-box {
+ margin-bottom: 16px;
+ height: 126px;
+ }
+
.text {
- height: 96px;
+ // height: 96px;
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
font-weight: 400;
font-style: normal;
@@ -417,7 +440,7 @@
font-size: 14px;
color: #555555;
padding: 0 40px;
- margin-bottom: 18px;
+ // margin-bottom: 18px;
}
.media {
@@ -750,7 +773,7 @@
transform: translateX(-50%);
height: 384px;
z-index: -1;
- width: 99vw;
+ width: 98vw;
overflow: hidden;
.bj {
@@ -887,7 +910,7 @@
}
&.black {
- background-color: rgba(0, 0, 0, 1);
+ background-color: rgb(255, 255, 255);
border-radius: 0 10px 10px 0;
}
}
@@ -984,7 +1007,8 @@
width: 100%;
height: 100%;
background-color: #4c4c4c;
- z-index: 1000;
+ z-index: 1001;
+
.close {
position: absolute;
top: 20px;
@@ -998,4 +1022,182 @@
height: 600px;
}
}
+
+ .bottom-play {
+ position: fixed;
+ bottom: 0;
+ left: 0;
+ width: 100%;
+ height: 76px;
+ background-color: #353535;
+ z-index: 1000;
+
+ .bottom-box {
+ height: 100%;
+ justify-content: space-between;
+
+ .left {
+ .img {
+ width: 56px;
+ height: 56px;
+ margin-right: 12px;
+ }
+
+ .name {
+ color: #fff;
+ font-size: 14px;
+ font-weight: 600;
+ margin-bottom: 6px;
+ max-width: 240px;
+ overflow: hidden;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ }
+ }
+
+ .middle {
+ flex-direction: column;
+
+ .operate {
+ margin-bottom: 10px;
+
+ .cut {
+ width: 14px;
+ height: 12px;
+ cursor: pointer;
+ }
+
+ .speed {
+ width: 16px;
+ height: 12px;
+ margin: 0 40px;
+ cursor: pointer;
+ }
+
+ .play {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ }
+ }
+
+ .progress-bar {
+ height: 10px;
+ width: 500px;
+ margin: 0 auto;
+ .bar {
+ height: 4px;
+ background-color: rgba(255, 255, 255, 1);
+ border-radius: 10px;
+ position: relative;
+ cursor: pointer;
+
+ &.white {
+ width: 0;
+ border-radius: 10px 0 0 10px;
+ background-color: #5241b0;
+
+ &::before {
+ content: "";
+ width: 10px;
+ height: 10px;
+ background-color: #f3974b;
+ border-radius: 50%;
+ position: absolute;
+ top: 50%;
+ transform: translateY(-50%);
+ right: -5px;
+ cursor: pointer;
+ z-index: 1;
+ display: block;
+ }
+ }
+
+ &.black {
+ background-color: #f2f2f2;
+ border-radius: 0 10px 10px 0;
+ }
+ }
+ }
+ }
+
+ .right {
+ .item {
+ position: relative;
+ .svg {
+ display: block;
+ cursor: pointer;
+ }
+ &:hover {
+ .sound-control {
+ display: flex;
+ }
+ }
+ .sound-control {
+ display: none;
+ justify-content: center;
+ left: 50%;
+ transform: translateX(-50%);
+ height: 151px;
+ padding-bottom: 2px;
+ position: absolute;
+ top: -158px;
+ width: 42px;
+ align-items: center;
+ background: #1f1f1f;
+ border-radius: 8px;
+ flex-direction: column;
+ justify-content: space-between;
+ padding: 12px;
+ cursor: auto;
+
+ &::after {
+ content: "";
+ width: 100%;
+ height: 7px;
+ position: absolute;
+ bottom: -7px;
+ }
+
+ .value {
+ color: #fff;
+ font-size: 14px;
+ user-select: none;
+ }
+
+ .progress {
+ width: 4px;
+ height: 100px;
+ border-radius: 4px;
+ background-color: rgba(255, 255, 255, 0.2);
+ flex-direction: column;
+ justify-content: flex-end;
+ cursor: pointer;
+
+ .bar {
+ width: 100%;
+ height: 50px;
+ background-color: #fff;
+ border-radius: 4px;
+ position: relative;
+ &::before {
+ content: "";
+ width: 10px;
+ height: 10px;
+ background-color: #f3974b;
+ border-radius: 50%;
+ position: absolute;
+ top: 0;
+ transform: translate(-50%, -50%);
+ left: 50%;
+ z-index: 1;
+ display: block;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
}
diff --git a/static/img/favicon.ico b/static/img/favicon.ico
new file mode 100644
index 0000000000000000000000000000000000000000..2670973a35c02a2acb8623569389fc1a5bef36b6
GIT binary patch
literal 67646
zcmeHQdvI078Nbm^srHZl(b1WXf51!~$KhZ9!Vz-QRx1{T8{e走过的路汇成星河，脚下的路更辽阔
@@ -186,7 +182,6 @@
@@ -217,6 +212,46 @@
+
+
+
+
+
+ 
+
+
+
+ 你好，我是林林林
+
+
+
+
+ 
+
+
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ volume }}
+
+
+
+