1<!DOCTYPE html> 2<html lang="en"> 3 4<head> 5 6 <!-- META ============================================= --> 7 <meta charset="utf-8"> 8 <meta http-equiv="X-UA-Compatible" content="IE=edge"> 9 <meta name="keywords" content="" /> 10 <meta name="author" content="" /> 11 <meta name="robots" content="" /> 12 13 <!-- DESCRIPTION --> 14 <meta name="description" content="åºéæè²è³æºç¶²æ´ååºéå¸åé¡ç ç¿èæå¸è³æºå享çåä½å¹³å°ï¼æä¾åºéè師åèç±å¹³å°éå°è³æºå ±äº«è交æµã" /> 15 16 <!-- OG --> 17 <meta property="og:title" content="åºéæè²è³æºç¶²" /> 18 <meta property="og:description" content="åºéæè²è³æºç¶²æ´ååºéå¸åé¡ç ç¿èæå¸è³æºå享çåä½å¹³å°ï¼æä¾åºéè師åèç±å¹³å°éå°è³æºå ±äº«è交æµã" /> 19 <meta property="og:image" content="https://www.kl.edu.tw/images/logo.png" /> 20 <meta name="format-detection" content="telephone=no"> 21 22 <!-- FAVICONS ICON ============================================= --> 23 <link rel="icon" href="/images/favicon.ico" type="image/x-icon" /> 24 <link rel="shortcut icon" type="image/x-icon" href="/images/favicon.ico" /> 25 26 <!-- PAGE TITLE HERE ============================================= --> 27 <title>åºéæè²è³æºç¶²</title> 28 29 <!-- MOBILE SPECIFIC ============================================= --> 30 <meta name="viewport" content="width=device-width, initial-scale=1"> 31 32 <!--[if lt IE 9]> 33
33<script src="/js/html5shiv.min.js"></script>
33 34
34<script src="/js/respond.min.js"></script>
34 35 <![endif]--> 36 37 <!-- All PLUGINS CSS ============================================= --> 38 <link rel="stylesheet" type="text/css" href="/css/assets.css"> 39 40 <!-- TYPOGRAPHY ============================================= --> 41 <link rel="stylesheet" type="text/css" href="/css/typography.css"> 42 43 <!-- SHORTCODES ============================================= --> 44 <link rel="stylesheet" type="text/css" href="/css/shortcodes/shortcodes.css"> 45 46 <!-- STYLESHEETS ============================================= --> 47 <link rel="stylesheet" type="text/css" href="/css/style.css"> 48 <link class="skin" rel="stylesheet" type="text/css" href="/css/color/color-1.css"> 49 50 <!-- REVOLUTION SLIDER CSS ============================================= --> 51 <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/layers.css"> 52 <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/settings.css"> 53 <link rel="stylesheet" type="text/css" href="/vendors/revolution/css/navigation.css"> 54 <!-- REVOLUTION SLIDER END --> 55 <style> 56 .header-text-color { 57 color: #48A1B8 !important; 58 } 59 60 .page-content { 61 min-height: 85vh; 62 } 63 64 @media only screen and (max-width: 767px) { 65 .menu-logo, .is-fixed .menu-logo { 66 float: inherit; 67 } 68 } 69 70 .menuicon { 71 position: absolute; 72 right: 20px; 73 } 74 75 div.back-to-top { 76 background-color: #87cfb4 !important; 77 } 78 79 @media (min-width: 992px) { 80 .desktop-mode { 81 display: block !important; 82 } 83 84 .mobile-mode { 85 display: none !important; 86 } 87 } 88 89 @media (max-width: 991px) { 90 .desktop-mode { 91 display: none !important; 92 } 93 94 .mobile-mode { 95 display: block !important; 96 } 97 } 98 99 @media (min-width: 992px) and (max-width: 1199px) { 100 .container { 101 max-width: 95vw; 102 } 103 } 104 </style> 105 <!-- Google tag (gtag.js) -->
vendor: 68 bytes, lines 105-106
105 106 <script async src="https://www.googletagmanager.com/gtag/js?id=
106G-W73YJZHHL1
vendor: 16 bytes, lines 106-107
106"></script> 107
107<script> 108
vendor: 152 bytes, lines 108-112
108window.dataLayer = window.dataLayer || []; 109 function gtag(){dataLayer.push(arguments);} 110 gtag('js', new Date()); 111 112 gtag('config', '
112G-W73YJZHHL1
vendor: 8 bytes, lines 112-113
112'); 113
113</script>
113 114</head> 115<body id="bg"> 116 <div class="page-wraper"> 117 <!-- Header Top ==== --> 118 <header id="header" class="header rs-nav"> 119 <div class="sticky-header navbar-expand-lg"> 120 <div class="menu-bar clearfix"> 121 <div class="container clearfix"> 122 <!-- Mobile Nav Button ==== --> 123 <button id="nav-button" class="navbar-toggler collapsed menuicon justify-content-end" type="button" 124 data-toggle="collapse" data-target="#menuDropdown" aria-controls="menuDropdown" 125 aria-expanded="false" aria-label="Toggle navigation" style="z-index: 10;"> 126 <span></span> 127 <span></span> 128 <span></span> 129 </button> 130 <!-- Header Logo ==== --> 131 <div class="menu-logo"> 132 <a href="/"><img src="/images/logo.svg" alt=""></a> 133 </div> 134 <style> 135 .mobile-munu-close { 136 color: black; 137 cursor: pointer; 138 position: absolute; 139 right: 15px; 140 } 141 142 #input_search_text { 143 border-radius: 5px 0 0 5px; 144 } 145 146 #btn_search_submit { 147 border-radius: 0 5px 5px 0; 148 height: 40px; 149 } 150 151 @media only screen and (max-width: 992px) { 152 .li-separator { 153 display: none !important; 154 } 155 } 156</style>
157<script> 158 function menuClose() { 159 document.getElementById("nav-button").click(); 160 } 161</script>
161 162<!-- Navigation Menu ==== --> 163<div class="menu-links navbar-collapse collapse justify-content-start" id="menuDropdown"> 164 <div class="menu-logo"> 165 <div onclick="menuClose();" class="mobile-munu-close"><i class="fa fa-times" aria-hidden="true"></i></div> 166 </div> 167 <div class="menu-logo"> 168 <a href="/"><img src="/images/logo.svg" alt=""></a> 169 </div> 170 <!-- <ul class="nav navbar-nav"> 171 <li class="active"><a class="header-text-color" href="javascript:;">æ´»å <i class="fa fa-chevron-down"></i></a> 172 <ul class="sub-menu"> 173 <li><a href="#">###</a></li> 174 <li><a href="#">###</a></li> 175 </ul> 176 </li> 177 </ul> --> 178 <ul class="nav navbar-nav" style="margin-left: auto!important;"> 179 180 <li><a class="header-text-color" href="https://www.klcg.gov.tw/tw/education" target="_blank">åºé叿¿åºæè²è</a></li> 181 <li><a class="header-text-color" href="http://in.kl.edu.tw" target="_blank">æè²èå §ç¶²</a></li> 182 183 <li><a class="header-text-color" href="/workshop">ç ç¿å ¬å</a></li> 184 <li><a class="header-text-color" href="/resource">æå¸è³æº</a></li> 185 186 <li><a class="header-text-color" href="/login">ç»å ¥</a></li> 187 188 </ul> 189 190 <div class="nav-social-link"> 191 <a href="javascript:;"><i class="fa fa-facebook"></i></a> 192 <a href="javascript:;"><i class="fa fa-google-plus"></i></a> 193 <a href="javascript:;"><i class="fa fa-linkedin"></i></a> 194 </div> 195</div> 196<!-- Navigation Menu END ==== --> 197 </div> 198 </div> 199 </div> 200 </header> 201<style> 202 .page-wraper { 203 background-color: #f7fafc !important; 204 } 205 206 .background { 207 background-image: url('/images/workshop/bg.svg'); 208 background-size: cover; 209 background-position: center; 210 background-repeat: no-repeat; 211 width: 100vw; 212 height: auto; 213 padding: 0px 20px; 214 } 215 216 .section1-left { 217 padding: 50px 0px; 218 } 219 220 .title { 221 font-size: 3rem; 222 font-weight: bold; 223 color: #385756; 224 text-align: left; 225 margin-top: 80px; 226 } 227 228 .head-input-search { 229 border: none; 230 padding: 24px 12px; 231 border-radius: 5px !important; 232 } 233 234 .head-icon-search { 235 position: absolute; 236 display : flex; 237 align-items : center; 238 float: right; 239 right: 15px; 240 height: 100%; 241 font-size: 20px; 242 color: #999999; 243 cursor: pointer; 244 } 245 246 .head-hot-tag { 247 color: #888888; 248 font-weight: bold; 249 } 250 251 .hot-tag { 252 cursor: pointer; 253 } 254 255 .hot-tag:hover { 256 text-decoration: underline; 257 } 258 259 .info-box { 260 padding: 15px 15px 0px 15px; 261 } 262 263 #list { 264 min-height: 400px; 265 } 266 267 .btn-type { 268 white-space: nowrap; 269 max-height: 30px; 270 padding: 5px 10px; 271 border-radius: 20px; 272 font-weight: bold; 273 border: none; 274 cursor: auto; 275 } 276 277 .btn-type.type1 { 278 background-color: #385756; 279 color: #ffffff; 280 } 281 282 .btn-type.type2 { 283 background-color: #A1A4F4; 284 color: #ffffff; 285 } 286 287 .btn-type.type3 { 288 background-color: #94A5D4; 289 color: #ffffff; 290 } 291 292 .btn-type.type4 { 293 background-color: #F5C12D; 294 color: #ffffff; 295 } 296 297 .btn-type.type5, .btn-type.type6, .btn-type.type7 { 298 background-color: #F5C12D; 299 color: #ffffff; 300 } 301 302 .a-item-title:hover, .a-item-title:focus { 303 text-decoration: underline; 304 } 305 306 .item-title { 307 font-size: 1.5rem; 308 font-weight: bold; 309 color: #385756; 310 text-align: left; 311 margin-top: -2px; 312 margin-left: 10px; 313 } 314 315 .workshop-place { 316 color: #7E9B90; 317 } 318 319 #pagination { 320 align-items: center; 321 justify-content: center; 322 } 323 324 .btn-page { 325 display:block; 326 height: 40px; 327 width: 40px; 328 border-radius: 50%; 329 font-weight: bold; 330 border: #D3D3D3 1px solid; 331 background-color: #fff; 332 color: #5A5A5A; 333 margin: 0px 8px; 334 padding: 8px; 335 } 336 337 .btn-page.active { 338 background-color: #87cfb4; 339 border: #87cfb4 1px solid; 340 color: #ffffff; 341 } 342 343 @media (min-width: 992px) { 344 .desktop-mode { 345 display: block !important; 346 } 347 348 .mobile-mode { 349 display: none !important; 350 } 351 352 .content-area { 353 margin-top: 30px; 354 margin-bottom: 30px; 355 } 356 357 .head-input { 358 width: 75%; 359 } 360 361 .course-detail-bx { 362 margin: 0px 20px; 363 } 364 365 .info-flex { 366 display: flex; 367 } 368 369 .info-box > .secondary { 370 color: #b5b5b5; 371 position: absolute; 372 right: 15px; 373 margin-top: -5px; 374 } 375 } 376 377 @media (max-width: 991px) {
378 .desktop-mode { 379 display: none !important; 380 } 381 382 .mobile-mode { 383 display: block !important; 384 } 385 386 .section1-left { 387 display: none; 388 } 389 390 .title { 391 margin-top: 30px; 392 text-align: center; 393 } 394 395 .filter-div { 396 display: none; 397 } 398 399 /* .list-div { 400 margin-top: -30px; 401 } */ 402 403 .info-flex { 404 display: block; 405 } 406 407 .item-title { 408 margin-top: 10px; 409 margin-left: 0px; 410 } 411 412 .info-box > .secondary { 413 color: #b5b5b5; 414 float: right; 415 margin-top: 10px; 416 margin-bottom: 5px; 417 } 418 } 419</style> 420<style> 421 .form-control { 422 border-color: #C3C3C3 !important; 423 } 424 425 .bootstrap-select .dropdown-toggle, .bootstrap-select .dropdown-toggle:hover, .bootstrap-select .dropdown-toggle:focus { 426 border-color: #C3C3C3 !important; 427 padding: 9px 12px; 428 color: #5a5a5a; 429 } 430</style> 431<div class="page-content bg-content"> 432 <div class="content-block"> 433 <!-- header --> 434 <div class="section-area background"> 435 <div class="container"> 436 <div class="row"> 437 <div class="col-lg-5 section1-left"> 438 <img class="img-fluid" src="/images/workshop/icon.svg"> 439 </div> 440 <div class="col-lg-7 mb-30"> 441 <div class="title">ç ç¿å ¬å</div> 442 <div class="mt-30 relative head-input"> 443 <span class="head-icon-search" onclick="head_search();"><i class="fa fa-search"></i></span> 444 <input class="form-control head-input-search size1rem" id="search" name="search" type="text" placeholder="è«è¼¸å ¥ééµå" /> 445 </div> 446 <div class="mt-3 size1rem head-hot-tag"> 447 </div> 448 </div> 449 </div> 450 </div> 451 </div> 452 453 <!-- content --> 454 <div class="section-area content-area"> 455 <div class="container"> 456 <div class="row d-flex"> 457 <div class="col-lg-4 col-md-12 m-b30 filter-div"> 458 <div class="course-detail-bx"> 459 <div class="size20 bold mb-8">æå°æ¢ä»¶</div> 460 <input class="form-control size14 radius-sm" id="filter_key" name="filter_key" type="text" placeholder="è«è¼¸å ¥ééµå" /> 461 462 <div class="mt-30"></div> 463 464 <div class="size20 bold mb-8">ç ç¿é¡å(主辦å®ä½)</div> 465 <select class="form-control size14 radius-sm" id="filter_type" name="filter_type"> 466 <option value="">è«é¸æç ç¿é¡å</option> 467 <option value="1">åºåªæå¸«ç ç¿</option> 468 <option value="2">å¸å §ä¸è¬ç ç¿</option> 469 <option value="3">å¤ç¸£å¸ç ç¿</option> 470 <option value="6">大å°ç ç¿</option> 471 <option value="7">ä¸å¤®ç ç¿</option> 472 <option value="4">å¸å/äºå°ç</option> 473 </select> 474 475 <div class="mt-30"></div> 476 477 <div class="size20 bold mb-8">å¸ç¿é段</div> 478 <select class="form-control size14 radius-sm" id="filter_level" name="filter_level"> 479 <option value="">è«é¸æå¸ç¿é段</option> 480 <option value="6">å¸å</option> 481 <option value="1">åå°</option> 482 <option value="2">åä¸</option> 483 <option value="3">é«ä¸</option> 484 <option value="4">åä¸å°</option> 485 <option value="5">åé«ä¸</option> 486 </select> 487 488 <div class="mt-30"></div> 489 490 <div class="size20 bold mb-8">ç ç¿æé</div> 491 <input class="form-control size14 radius-sm" id="filter_event_date" name="filter_event_date" type="date" placeholder="è«é¸ææé" /> 492 493 <div class="mt-30"></div> 494 495 <!-- <div class="size20 bold mb-8">å ±åæé</div> 496 <input class="form-control size14 radius-sm" id="filter_apply_date" name="filter_apply_date" type="date" placeholder="è«é¸ææé" /> --> 497 498 <div class="mt-60"></div> 499 <button class="btn btn-main btn-block size14 radius-md mb-60" id="filter_btn" onclick="search();"> 500 æå° <span class="ml-2"><i class="fa fa-search"></i></span> 501 </button> 502 </div> 503 </div> 504 <div class="col-lg-8 col-md-12 bg-white list-div"> 505 <div class="mobile-mode text-right mt-2 mb-2"> 506 <span data-toggle="modal" data-target="#searchModal" style="cursor: pointer; margin-right: 25px;"> 507 <i class="fa fa-filter" aria-hidden="true"></i> ç¯©é¸ 508 </span> 509 </div> 510 <div id="list"> 511 <div class="data-loading"></div> 512 <!-- 513 <div class="padding0 item-div"> 514 <div class="info-box mt-1"> 515 <div class="info-flex"> 516 <button class="btn-type type1 size13">åºåªæå¸«ç ç¿</button> 517 <a class="a-item-title" href="#"> 518 <div class="item-title size20">[æ§å¹³æè²] æ§å¹³æè²å¢è½ç ç¿ï¼èªèæ¸ä½æ§å¥æ´å </div> 519 </a> 520 </div> 521 <div class="mt-3 bold workshop-place"> 522 åºé叿¿åºæè²è 523 <a href="https://www.google.com/maps/search/åºé叿¿åºæè²è" target="_blank"> 524 <img src="/images/workshop/googlemap.png" class="ml-1" style="width: 18px; margin-top: -2px;"> 525 </a> 526 </div> 527 <div class="mt-2 bold workshop-time"> 528 ç ç¿æéï¼2020/01/01 529 </div> 530 <div class="mt-2 bold workshop-time"> 531 å ±åæéï¼2020/01/01 ~ 2020/01/01 532 </div> 533 <div class="secondary size13"> 534 <span><i class="fa fa-eye" aria-hidden="true"></i> 9999</span> 535 <span class="ml-3">2022/01/01</span> 536 </div> 537 </div> 538 <hr class="mb-0" /> 539 </div> 540 --> 541 </div> 542 <div id="pagination" class="text-center mt-3 flex mb-30"> 543 <!-- <button class="btn btn-page size15"><i class="fa fa-arrow-left" style="margin-left: -3px;"></i></button> 544 <button class="btn btn-page size15">1</button> 545 <button class="btn btn-page size15 active">2</button> 546 <button class="btn btn-page size15">3</button> 547 <button class="btn btn-page size15"><i class="fa fa-arrow-right" style="margin-left: -3px;"></i></button> --> 548 </div> 549 </div>
550 </div> 551 </div> 552 </div> 553 554 <!-- Mobile Search Modal --> 555 <div class="modal fade" id="searchModal" tabindex="-1" role="dialog" aria-labelledby="searchModal" aria-hidden="true"> 556 <div class="modal-dialog modal-lg modal-dialog-centered"> 557 <div class="modal-content" style="border-radius: 15px; border: none;"> 558 <div class="course-detail-bx" style="padding: 20px 20px 0px 20px; overflow-y: scroll;"> 559 <div class="size16 bold mb-8">æå°æ¢ä»¶</div> 560 <input class="form-control size14 radius-sm" id="modal_filter_key" name="modal_filter_key" type="text" placeholder="è«è¼¸å ¥ééµå" /> 561 562 <div class="mt-3"></div> 563 564 <div class="size16 bold mb-8">ç ç¿é¡å(主辦å®ä½)</div> 565 <select class="form-control size14 radius-sm" id="modal_filter_type" name="modal_filter_type"> 566 <option value="">è«é¸æç ç¿é¡å</option> 567 <option value="1">åºåªæå¸«ç ç¿</option> 568 <option value="2">å¸å §ä¸è¬ç ç¿</option> 569 <option value="3">å¤ç¸£å¸ç ç¿</option> 570 <option value="6">大å°ç ç¿</option> 571 <option value="7">ä¸å¤®ç ç¿</option> 572 <option value="4">å¸å/äºå°ç</option> 573 </select> 574 575 <div class="mt-3"></div> 576 577 <div class="size16 bold mb-8">å¸ç¿é段</div> 578 <select class="form-control size14 radius-sm" id="modal_filter_level" name="modal_filter_level"> 579 <option value="">è«é¸æå¸ç¿é段</option> 580 <option value="6">å¸å</option> 581 <option value="1">åå°</option> 582 <option value="2">åä¸</option> 583 <option value="3">é«ä¸</option> 584 <option value="4">åä¸å°</option> 585 <option value="5">åé«ä¸</option> 586 </select> 587 588 <div class="mt-3"></div> 589 590 <div class="size16 bold mb-8">ç ç¿æé</div> 591 <input class="form-control size14 radius-sm" id="modal_filter_event_date" name="modal_filter_event_date" type="date" placeholder="è«é¸ææé" /> 592 593 <div class="mt-3"></div> 594 595 <!-- <div class="size16 bold mb-8">å ±åæé</div> 596 <input class="form-control size14 radius-sm" id="modal_filter_apply_date" name="modal_filter_apply_date" type="date" placeholder="è«é¸ææé" /> --> 597 598 <div class="mt-30"></div> 599 <button class="btn btn-main btn-block size14 radius-md mb-60" id="modal_filter_btn" onclick="modal_search();"> 600 æå° <span class="ml-2"><i class="fa fa-search"></i></span> 601 </button> 602 </div> 603 604 </div> 605 </div> 606 </div> 607 </div> 608</div> 609 <footer id="footer"> 610 <div class="footer-bottom"> 611 <div class="container"> 612 <div class="desktop-mode"> 613 <div class="row"> 614 <div class="col-md-6 fs14 flex"> 615 <img width="40" height="40" src="/images/logo.png" alt=""> 616 <div class="ml-3"> 617 å°åï¼åºéå¸å®æ¨å宿¨è·¯äºæ®µ164è8æ¨<br> 618 é»è©±ï¼(02) 2430-1505 619 </div> 620 </div> 621 <div class="col-md-6 fs14"> 622 <div> 623 © åºé叿¿åºæè²è çæ¬ææ<br> 624 æä½³çè¦½çæ ï¼Chrome æ Firefox2.0以ä¸â§ è§£æåº¦ 1920*1080 625 </div> 626 </div> 627 </div> 628 </div> 629 <div class="mobile-mode"> 630 <div class="col-lg-12 col-md-12 col-sm-12 text-center fs14" style="justify-content: center;"> 631 <div> 632 © åºé叿¿åºæè²è çæ¬ææ 633 </div> 634 <div class="ml-3"> 635 å°åï¼åºéå¸å®æ¨å宿¨è·¯äºæ®µ164è8æ¨ 636 <br> 637 é»è©±ï¼(02) 2430-1505 638 </div> 639 </div> 640 </div> 641 </div> 642 </div> 643 </footer> 644 <!-- Footer END ==== --> 645 <div class="back-to-top text-center d-flex align-items-center justify-content-center hide" style="z-index: 1000; margin: 0 auto;">
646 <span class="fa fa-chevron-up"></span> 647 </div> 648 </div> 649 650 <!-- External JavaScripts --> 651
651<script src="/js/jquery.min.js"></script>
651 652
652<script src="/vendors/bootstrap/js/popper.min.js"></script>
652 653
653<script src="/vendors/bootstrap/js/bootstrap.min.js"></script>
653 654
654<script src="/vendors/bootstrap-select/bootstrap-select.min.js"></script>
654 655
655<script src="/vendors/bootstrap-touchspin/jquery.bootstrap-touchspin.js"></script>
655 656
656<script src="/vendors/magnific-popup/magnific-popup.js"></script>
656 657
657<script src="/vendors/counter/waypoints-min.js"></script>
657 658
658<script src="/vendors/counter/counterup.min.js"></script>
658 659
659<script src="/vendors/imagesloaded/imagesloaded.js"></script>
659 660
660<script src="/vendors/masonry/masonry.js"></script>
660 661
661<script src="/vendors/masonry/filter.js"></script>
661 662
662<script src="/vendors/owl-carousel/owl.carousel.js"></script>
662 663
663<script src="/js/moment.min.js"></script>
663 664
664<script src="/js/functions.js"></script>
664 665
665<script src="/js/contact.js"></script>
665 666
666<script src="/js/sweetalert2.all.min.js"></script>
666 667
667<script> 668 $(window).on('scroll', function () { 669 if($(window).width() < 992) { 670 $("header").css("height", "50px"); 671 } 672 }); 673 </script>
673 674</body> 675 676</html>
677<script> 678 let count = 10; 679 let now_page = 1; 680 let max_page = 1; 681 const workshop_types = ["", "åºåªæå¸«ç ç¿", "å¸å §ä¸è¬ç ç¿", "å¤ç¸£å¸ç ç¿", "å¸å/äºå°ç", "", "大å°ç ç¿", "ä¸å¤®ç ç¿"]; 682 $(document).ready(function() { 683 getHotKeys(); 684 search(true); 685 }); 686 687 function getHotKeys() { 688 $.ajax({ 689 type: "GET", 690 headers: { 691 "Authorization": localStorage.getItem("user_token") 692 }, 693 url: "/api/workshop/hot/keys", 694 success: function(data) { 695 if(data.success) { 696 let keys = data.keys; 697 setHotKeys(keys); 698 } 699 } 700 }); 701 } 702 703 function setHotKeys(keys) { 704 $(".head-hot-tag").empty(); 705 if(keys.length > 0) { 706 $(".head-hot-tag").append("ç±éï¼"); 707 for(let i = 0; i < keys.length; i++) { 708 let key = keys[i]; 709 let tag = `<span class="hot-tag" data-key="${encodeURIComponent(key)}">${key}</span> ${i < keys.length - 1 ? "ã" : ""}`; 710 $(".head-hot-tag").append(tag); 711 } 712 } 713 } 714 715 $(document).on('click', '.hot-tag', function() { 716 let key = decodeURIComponent($(this).data("key")); 717 $("#filter_key").val(key); 718 $("#modal_filter_key").val(key); 719 search(); 720 }); 721 722 async function search(init = false) { 723 $(".list-div").removeClass("bg-white"); 724 $("#list").removeClass("text-center"); 725 $("#list").html("<div class='data-loading mt-30'></div>"); 726 $("#pagination").empty(); 727 let data = await getWorkshops(); 728 if(data) { 729 let workshops = data.workshops; 730 max_page = data.max_page; 731 if(workshops.length > 0) { 732 $(".list-div").addClass("bg-white"); 733 setList(workshops); 734 setPage(); 735 } 736 else { 737 setEmpty(); 738 } 739 } 740 else { 741 setEmpty(); 742 } 743 if(!init) { 744 $("html, body").animate({ scrollTop: $(".content-area").offset().top + ($(window).width() < 992 ? 250 : -100) }, "fast"); 745 } 746 } 747 748 function getWorkshops() { 749 return new Promise((resolve, reject) => { 750 let key = ""; 751 let type = ""; 752 let level = ""; 753 let event_date = ""; 754 let apply_date = ""; 755 if($(window).width() >= 992) { 756 key = $("#filter_key").val(); 757 type = $("#filter_type").val(); 758 level = $("#filter_level").val(); 759 event_date = $("#filter_event_date").val(); 760 apply_date = $("#filter_apply_date").val(); 761 } 762 else { 763 key = $("#modal_filter_key").val(); 764 type = $("#modal_filter_type").val(); 765 level = $("#modal_filter_level").val(); 766 event_date = $("#modal_filter_event_date").val(); 767 apply_date = $("#modal_filter_apply_date").val() 768 } 769 key = key ? key : null; 770 type = type ? type : null; 771 level = level ? level : null; 772 event_date = event_date ? event_date : null; 773 apply_date = apply_date ? apply_date : null; 774 let data = { 775 count: count, 776 page: now_page, 777 key: key, 778 type: type, 779 level: level, 780 event_date: event_date, 781 apply_date: null 782 }; 783 $.ajax({ 784 type: "POST", 785 headers: { 786 "Authorization": localStorage.getItem("user_token") 787 }, 788 url: "/api/workshops", 789 data: data, 790 success: function(data) { 791 if(data.success) { 792 resolve(data); 793 } 794 else { 795 resolve(null); 796 } 797 } 798 }); 799 }); 800 } 801 802 $("#search").on("keydown", function(event) { 803 if(event.which === 13) 804 head_search(); 805 }); 806 807 function head_search() { 808 let text = $("#search").val(); 809 $("#filter_key").val(text); 810 $("#modal_filter_key").val(text); 811 search(); 812 } 813 814 function modal_search() { 815 let text = $("#modal_filter_key").val(); 816 $("#filter_key").val(text); 817 $("#searchModal").modal("hide"); 818 search(); 819 } 820 821 function resetSearch() { 822 $("#filter_key").val(""); 823 $("#filter_type").val("").change(); 824 $("#filter_level").val("").change(); 825 $("#filter_event_date").val(""); 826 $("#filter_apply_date").val(""); 827 828 $("#modal_filter_key").val(""); 829 $("#modal_filter_type").val("").change(); 830 $("#modal_filter_level").val("").change(); 831 $("#modal_filter_event_date").val(""); 832 $("#modal_filter_apply_date").val(""); 833 search(); 834 } 835 836 function setList(workshops) { 837 $("#list").empty(); 838 for(let i in workshops) { 839 $("#list").append(getWorkshopHtml(workshops[i])); 840 } 841 } 842 843 function getWorkshopHtml(workshop) { 844 let type = workshop.type; 845 let type_name = type >= 1 && type <= 7 ? workshop_types[type] : ""; 846 let event_date = workshop.start_time.slice(0, 10); 847 if(workshop.start_time.slice(0, 10) != workshop.end_time.slice(0, 10)) { 848 event_date += " ~ " + workshop.end_time.slice(0, 10); 849 } 850 // let apply_date = workshop.apply_start_time.slice(0, 10); 851 // if(workshop.apply_start_time.slice(0, 10) != workshop.apply_end_time.slice(0, 10)) { 852 // apply_date += " ~ " + workshop.apply_end_time.slice(0, 10); 853 // } 854 return ` 855 <div class="padding0 item-div"> 856 <div class="info-box mt-1"> 857 <div class="info-flex"> 858 <button class="btn-type type${workshop.type} size13">${type_name}</button> 859 <a class="a-item-title" href="/workshop/${workshop.workshop_code}"> 860 <div class="item-title size20">${(workshop.topic ? `[${workshop.topic}] ` : ``) + workshop.name}</div> 861 </a> 862 </div> 863 <div class="mt-2 bold workshop-time"> 864 ç ç¿æéï¼${event_date} 865 </div> 866 <div class="mt-2 bold workshop-time"> 867 ç ç¿ææ¸ï¼${workshop.hour} å°æ 868 </div> 869 <div class="secondary size13"> 870 <span><i class="fa fa-eye" aria-hidden="true"></i> ${workshop.view_count}</span> 871 <span class="ml-3">${workshop.updated_at.slice(0, 10)}</span> 872 </div>
873 </div> 874 <hr class="mb-0" /> 875 </div> 876 `; 877 } 878 879 function setPage() { 880 let html = ``; 881 if(max_page >= 1) { 882 let start = now_page - 2; 883 let end = now_page + 2; 884 start = start < 1 ? 1 : start; 885 end = end > max_page ? max_page : end; 886 if(end - 5 > 0) { 887 start = end - 4; 888 } 889 if(end - start < 4) { 890 end = start + 4; 891 end = end > max_page ? max_page : end; 892 } 893 for(let i = start; i <= end; i++) { 894 html += ` 895 <button class="btn btn-page size15 ${i == now_page ? `active` : ``}" onclick="changePage(${i});">${i}</button> 896 `; 897 } 898 if(start == 2) { 899 html = `<button class="btn btn-page size15 ${now_page == 1 ? `active` : ``}" onclick="changePage(1);">1</button>` + html; 900 } 901 if(start > 2) { 902 html = ` 903 <button class="btn btn-page size15 ${now_page == 1 ? `active` : ``}" onclick="changePage(1);">1</button> 904 <div style="margin-top: -7px;">...</div> 905 ` + html; 906 } 907 } 908 $("#pagination").html(html); 909 } 910 911 function changePage(page) { 912 if(page != now_page && !isNaN(page) && page >= 1 && page <= max_page) { 913 now_page = page; 914 search(); 915 } 916 } 917 918 function setEmpty() { 919 $("#list").empty(); 920 $("#pagination").empty(); 921 $("#list").addClass("text-center"); 922 $(".list-div").removeClass("bg-white"); 923 $("#list").html(` 924 <img src="/images/empty.png" class="img-fluid" style="margin-top: 100px; max-width: 200px; opacity: .4;" /> 925 <h5 style="color: #888888; margin-top: 30px;"> 926 æ¥ç¡çµæï¼é»æ<a href="javascript:void(0);" style="color: #47A1B7; text-decoration: underline;" onclick="resetSearch();">æ¸ é¤æ¢ä»¶</a> 927 </h5> 928 `); 929 } 930 931 function random(min, max) { 932 return Math.floor(Math.random() * (max - min + 1) + min) 933 } 934</script>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.