From 7174522c57dcd4d98caf93df72a8372daf502bbc Mon Sep 17 00:00:00 2001 From: Gwk <583478805@qq.com> Date: Tue, 30 Aug 2022 09:39:22 +0800 Subject: [PATCH] all --- css/scroll.css | 40 + css/style.css | 201 + img/arrow.png | Bin 0 -> 405 bytes img/mobile-bg.png | Bin 0 -> 1350121 bytes img/mobile-sel-body.png | Bin 0 -> 2433 bytes img/mobile-sel.png | Bin 0 -> 1747 bytes img/pc-bg.png | Bin 0 -> 2724230 bytes img/pc-sel-body.png | Bin 0 -> 2430 bytes img/pc-sel.png | Bin 0 -> 1747 bytes index.html | 75 + js/v2.6.10/vue.js | 11944 +++++++++++++++++++++++++++++++++ js/v2.6.10/vue.min.js | 6 + js/v3.2.8/vue.global.prod.js | 1 + 13 files changed, 12267 insertions(+) create mode 100644 css/scroll.css create mode 100644 css/style.css create mode 100644 img/arrow.png create mode 100644 img/mobile-bg.png create mode 100644 img/mobile-sel-body.png create mode 100644 img/mobile-sel.png create mode 100644 img/pc-bg.png create mode 100644 img/pc-sel-body.png create mode 100644 img/pc-sel.png create mode 100644 index.html create mode 100644 js/v2.6.10/vue.js create mode 100644 js/v2.6.10/vue.min.js create mode 100644 js/v3.2.8/vue.global.prod.js diff --git a/css/scroll.css b/css/scroll.css new file mode 100644 index 0000000..626e566 --- /dev/null +++ b/css/scroll.css @@ -0,0 +1,40 @@ +/*---滚动条默认显示样式--*/ + +::-webkit-scrollbar-thumb{ + +background-color:rgba(0, 147, 255, 0.4); + +height:50px; + +outline-offset:-2px; + +outline:2px solid rgba(0, 0, 0, 0); + +-webkit-border-radius:4px; + +border: 2px solid rgba(0, 0, 0, 0); + +} + + + +/*---滚动条大小--*/ + +::-webkit-scrollbar{ + +width:8px; + +height:8px; + + +} + +/*---滚动框背景样式--*/ + +::-webkit-scrollbar-track-piece{ + +background-color:rgba(0, 0, 0, 0); + +-webkit-border-radius:0; + +} \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..34a62c6 --- /dev/null +++ b/css/style.css @@ -0,0 +1,201 @@ +*{ + margin: 0; + padding: 0; +} + +html,body { + width: 100%; + height: 100%; +} + +#app { + width: 100%; + height: 100%; + background: url(../img/pc-bg.png) no-repeat top center; + background-size: cover; + box-sizing: border-box; + padding-top: 1px; +} + +#app > h1 { + margin-top: 200px; + font-size: 80px; + font-family: Source Han Sans CN; + font-weight: 500; + color: #FFFFFF; + text-align: center; + letter-spacing: 5px; + text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); +} + +.sel-div { + width: 507px; + height: 357px; + margin: 80px auto; + position: relative; +} +.sel-div > .sel-input{ + width: 484px; + height: 59px; + margin: 4px 17px 0px 6px; + box-sizing: border-box; + padding-left: 41px; + display: flex; + align-items: center; + background: url(../img/pc-sel.png) no-repeat center; + background-size: 100% 100%; + cursor: pointer; + position: relative; + z-index: 2; +} + +.sel-div > .sel-input > p { + line-height: 59px; + font-size: 26px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #FFFFFF; + letter-spacing: 5px; + flex: 1; +} +.sel-div > .sel-input > img { + margin-right: 39px; +} + +.sel-div > .sel-body { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url(../img/pc-sel-body.png) no-repeat center; + background-size: 100% 100%; +} + +.set-place { + height: 63px; +} +.option-body { + height: calc(100% - 80px); + width: calc(100% - 18px); + overflow-y: auto; +} +.option-body >div { + font-size: 20px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #FFFFFF; + padding: 10px 20px 10px 40px; + letter-spacing: 4px; + cursor: pointer; +} + +.option-body >div:hover { + font-size: 27px; + font-family: Source Han Sans CN; + font-weight: 500; +} + +.option-body >.active-option { + font-size: 27px; + font-family: Source Han Sans CN; + font-weight: 500; +} + +@media screen and (max-width: 500px) { + #app { + background: url(../img/mobile-bg.png) no-repeat top center; + background-size: cover; + } + #app > h1 { + margin-top: 130px; + font-size: 35px; + font-family: Source Han Sans CN; + font-weight: 500; + color: #FFFFFF; + letter-spacing: 4px; + text-shadow: 0px 0px 20px rgba(0, 0, 0, 0.3); + } + + .sel-div { + width: 255.5px; + height: 178.5px; + margin: 33px auto; + position: relative; + } + + .sel-div > .sel-input{ + width: 242px; + height: 30px; + margin: 1px 6px 0px 5.5px; + box-sizing: border-box; + padding-left: 20.5px; + display: flex; + align-items: center; + background: url(../img/mobile-sel.png) no-repeat center; + background-size: 100% 100%; + cursor: pointer; + position: relative; + z-index: 2; + } + + .sel-div > .sel-input > p { + line-height: 30px; + font-size: 14px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #FFFFFF; + letter-spacing: 2px; + flex: 1; + } + .sel-div > .sel-input > img { + margin-right: 19.5px !important; + width: 10.5px; + height: 6px; + } + + + .sel-div > .sel-body { + position: absolute; + left: 0; + top: 0; + width: 100%; + height: 100%; + background: url(../img/mobile-sel-body.png) no-repeat center; + background-size: 100% 100%; + } + + .set-place { + height: 31.5px; + } + .option-body { + height: calc(100% - 40px); + width: calc(100% - 9px); + overflow-y: auto; + } + .option-body >div { + font-size: 13px; + font-family: Source Han Sans CN; + font-weight: 400; + color: #FFFFFF; + padding: 5px 10px 5px 20px; + letter-spacing: 2px; + cursor: pointer; + } + + .option-body >div:hover { + font-size: 15px; + font-family: Source Han Sans CN; + font-weight: 500; + } + + .option-body >.active-option { + font-size: 15px; + font-family: Source Han Sans CN; + font-weight: 500; + } + +} + + + diff --git a/img/arrow.png b/img/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..208e1a0dbafb1d8943d6a76f1d1c7566deeb205f GIT binary patch literal 405 zcmV;G0c!q
Px$Pf0{UR5(wa(myE0Q5eSY?-NQHltBg?%0}dtTO<@kSxhE_y6KL#8H(Q5&&2%#APuY$M6>qY#Z-k--b~pK$PDru|mz}e~FrIHEhK|t^wRnRz
zSO7ZcMxZ!{_dD5_;u2sBy|{8BNqw)wD%J1M8f8nm{*-d8FYYrL5$N2Vwx>W3`)T&7
zEMa2`0FTEJ%(V&!Sq|&0l>AB(RH-<`rp$RWikZN%bI_WScHI+;NW|Vqi8D5E_avUO
z2wZ5tIcf4rWv~efFH^6GruWOF*AXc8by$HJaJyN!)X;$>ha_WKJ(^2+=8z*Hz#4EP
z>f}6Y1jR|uPd5}HwM5-&9MY;j6?7$|*tU%K_Z)$emF;kk;?q&p91TQl{#e3=h6zN9
zgGwFJ@{Lu}o4pZB0~HuxH6&*V4Os8M$H(Fb{Swr*G>%gOqeH4+EdPd20UIw87x}X<
z3*rzI4J2xj@{8&|zr(BlISfaEUe~$rGeDYAFRESv7J0)bg1$BksbG==5F0*P{4OF+
zc1bKsQ0QM@r+@#nf|H|zw0(L;+7MIQ+d`*0i^m*@H0etr@(n+J9Nx^<
VoOplVz3~%GQ@XLRrVM1X_px}2cSn3<0&X^{
zS-*<`n0?5}uVcTk2@^G#4lFRe37Z^Fi>7hqvk7RM(`)n$xgSE9D*BLUN4-x>WUtYf
zT`+-Ja6He2`Z-ZbOs2SI)Bukc3r-4!Lrls$v6z0aT5~5cy1=yLe((gQy6@wCzqm7<
znt4ujnYA$Iu&}+;H4rI*XYA~*%~PEzp)Ru>l9{-a#W}6o9!jo5xm-5<;unY4cLJ4(
z=IdT9MyZ<)SV_FjS}FqQ1Td(%r(@%M5y}e4lJ1i_z_tJlebGVy<#+$e@BLRL=PK?L
zZS3k2h?JM4zi>^F=uPyB2pF2~ZF;*EM-i3qMcz-uI;)G8m$c|8EI`6bdQJOM;Sjcz
zBK*Ii+@eXS;|fpF?EHNeKy~q+hPxDyQ=6T094UT*4DfqO(3#w>P#k&LYSC3
#!T18gWR9;Z*yg}*T?c;WGVm|G1Hb(#
zqo$0~jKfeiJs}7bZ&e*vt<@G~a+@QCD$&ItBWI$R>&Qzl
zi~Rd+Lf6eMj%1Dl=MsetKUj#gWiJvWaMdVRf+;$v3@>6M79P&2
1Hx%`Di5M
zbE<8OBnZj$-E8VkjL{s2CC%#fx|!?-%R1bqremVF>C!vBr_M!A5iCYs@pOK_Ot1I*
z)AiQ8s5-{zxZQT2Ac??1a!n9`Sd4TxG>X_mtZR4KmZtNcpL}25_k^Eq69pN&tzH?i
zo>BUV-`IdW2gYQ