【積木】說明書範例 | 程式專案

{"id":449763,"student_id":2589,"content":"{\"html\":\"\u003c!DOCTYPE html\u003e\\n\u003chtml\u003e\\n\u003chead\u003e\\n    \u003cmeta http-equiv=\\\"content-type\\\" content=\\\"text/html; charset=utf-8\\\" /\u003e\\n    \u003ctitle\u003e名稱\u003c/title\u003e\\n\u003c/head\u003e\\n\u003cbody\u003e\\n\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css\\\" /\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/css/splide.min.css\\\"\u003e\\n    \u003clink rel=\\\"stylesheet\\\" href=\\\"https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css\\\"\u003e\\n    \u003cscript src=\\\"https://cdn.jsdelivr.net/npm/@splidejs/splide@4.1.3/dist/js/splide.min.js\\\"\u003e\u003c/script\u003e\\n    \u003cscript src=\\\"https://unpkg.com/vue@3/dist/vue.global.js\\\"\u003e\u003c/script\u003e\\n\\n    \u003cdiv id=\\\"app\\\"\u003e\\n        \u003cdiv v-show=\\\"showGrid\\\" class=\\\"row p-4\\\"\u003e\\n            \u003cdiv class=\\\"col-3 mb-4\\\" v-for=\\\"(img, idx) in images\\\"\u003e\\n                \u003cimg class=\\\"w-100\\\" :src='img' @click=\\\"go(idx)\\\" :style=\\\"{opacity: idx + 1 === current ? 1 : 0.5 }\\\" /\u003e\\n            \u003c/div\u003e\\n        \u003c/div\u003e\\n        \u003cdiv v-show=\\\"!showGrid\\\" :class=\\\"showUI ? '' : 'hide-ui'\\\"\u003e\\n            \u003csection class=\\\"splide\\\"\u003e\\n                \u003cdiv class=\\\"splide__track\\\"\u003e\\n                    \u003cul class=\\\"splide__list\\\"\u003e\\n                        \u003cli class=\\\"splide__slide\\\" v-for=\\\"img in images\\\"\u003e\\n                            \u003cimg :src='img' /\u003e\\n                        \u003c/li\u003e\\n                    \u003c/ul\u003e\\n                \u003c/div\u003e\\n            \u003c/section\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"range-container p-3 position-fixed bottom-0 w-100 d-flex justify-content-center\\\"\u003e\\n            \u003cinput v-show=\\\"showUI\\\" id=\\\"range\\\" type=\\\"range\\\" min=\\\"1\\\" :max=\\\"splide?.length\\\" class=\\\"form-range\\\" v-model=\\\"current\\\" @input=\\\"input\\\" style=\\\"max-width: 800px;\\\"\u003e\\n        \u003c/div\u003e\\n        \u003cdiv class=\\\"range-container p-3 position-fixed top-0\\\"\u003e\\n            \u003cbutton v-show=\\\"showUI\\\" class=\\\"btn btn-lg me-2\\\" :class=\\\"isFullscreen ? 'btn-warning' : 'btn-danger'\\\" @click=\\\"toggleFullscreen\\\"\u003e\\n                \u003ci v-if='isFullscreen' class=\\\"fa-solid fa-expand\\\"\u003e\u003c/i\u003e\\n                \u003ci v-else class=\\\"fa-solid fa-compress\\\"\u003e\u003c/i\u003e\\n            \u003c/button\u003e\\n            \u003cbutton v-show=\\\"showUI\\\" class=\\\"btn btn-lg me-2\\\" :class=\\\"showGrid ? 'btn-warning' : 'btn-primary'\\\" @click=\\\"toggleGrid\\\"\u003e\\n                \u003ci class=\\\"fa-solid fa-grip\\\"\u003e\u003c/i\u003e\\n            \u003c/button\u003e\\n        \u003c/div\u003e\\n    \u003c/div\u003e\\n\u003c/body\u003e\\n\u003c/html\u003e\",\"css\":\"body {\\n    background-color: #222;\\n}\\n.splide__slide {\\n    width: 100vw;\\n    height: 100vh;\\n    padding-left: 2rem;\\n    padding-right: 2rem;\\n}\\n.splide__slide \u003e img {\\n    width: 100%;\\n    height: 100%;\\n    object-fit: contain;\\n}\\n.splide__pagination {\\n    counter-reset: pagination-num;\\n}\\n\\n.splide__pagination__page:before {\\n    counter-increment: pagination-num;\\n    content: counter(pagination-num);\\n}\\n\\n.custom-prev,\\n.custom-next {\\n    width: 50px;\\n    height: 50px;\\n    background-color: #ccc;\\n}\\n\\n.custom-page.is-active {\\n    background-color: red;\\n}\\n\\n.custom-page {\\n    width: 25px;\\n    height: 25px;\\n    color: #fff;\\n}\\n\\n.hide-ui .range-container,\\n.hide-ui .splide__pagination,\\n.hide-ui .custom-prev,\\n.hide-ui .custom-next {\\n    opacity: 0;\\n}\",\"js\":\"const images = [\\n    '投影片1.PNG',\\n    '投影片2.PNG',\\n    '投影片3.PNG',\\n    '投影片4.PNG',\\n    '投影片5.PNG',\\n    '投影片6.PNG',\\n    '投影片7.PNG',\\n    '投影片8.PNG',\\n    '投影片9.PNG',\\n    '投影片10.PNG',\\n    '投影片11.PNG',\\n    '投影片12.PNG',\\n    '投影片13.PNG',\\n    '投影片14.PNG',\\n    '投影片15.PNG',\\n    '投影片16.PNG',\\n    '投影片17.PNG',\\n    '投影片18.PNG',\\n    '投影片19.PNG',\\n    '投影片20.PNG',\\n    '投影片21.PNG',\\n    '投影片22.PNG',\\n    '投影片23.PNG',\\n    '投影片24.PNG',\\n    '投影片25.PNG',\\n    '投影片26.PNG',\\n    '投影片27.PNG',\\n    '投影片28.PNG',\\n    '投影片29.PNG',\\n    '投影片30.PNG',\\n    '投影片31.PNG',\\n    '投影片32.PNG',\\n    '投影片33.PNG',\\n    '投影片34.PNG',\\n    '投影片35.PNG',\\n    '投影片36.PNG',\\n]\\n\\nconst {\\n    createApp\\n} = Vue\\ncreateApp({\\n    data() {\\n        return {\\n            images,\\n            splide: null,\\n            current: 1,\\n            showUI: true,\\n            showGrid: false,\\n            isFullscreen: false,\\n        }\\n    },\\n    methods: {\\n        go(index) {\\n            console.log(index)\\n            this.current = index + 1\\n            this.showGrid = false\\n            setTimeout(() =\u003e {\\n                this.splide.go(index)\\n            }, 200)\\n        },\\n        input(e) {\\n            this.splide.go(e.target.value - 1)\\n        },\\n        toggleGrid() {\\n            this.showGrid = !this.showGrid\\n        },\\n        toggleFullscreen() {\\n            if (!document.fullscreenElement) {\\n                this.isFullscreen = true\\n                document.documentElement.requestFullscreen();\\n            } else if (document.exitFullscreen) {\\n                this.isFullscreen = false\\n                document.exitFullscreen();\\n            }\\n        }\\n    },\\n    mounted() {\\n        const splide = new Splide('.splide', {\\n            classes: {\\n                prev: 'splide__arrow--prev custom-prev',\\n                next: 'splide__arrow--next custom-next',\\n                pagination: 'd-none',\\n            },\\n        })\\n        splide.on('click', () =\u003e {\\n            this.showUI = !this.showUI\\n        })\\n        splide.on('move', (index) =\u003e {\\n            this.current = index + 1\\n        })\\n        splide.mount()\\n\\n        this.splide = splide\\n    },\\n}).mount('#app')\"}","created_at":"2022-10-20T15:18:49.584+08:00","updated_at":"2022-10-20T16:55:08.290+08:00","name":"【積木】說明書範例","language":"web","screenshot":{"url":null},"parent_id":449533,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":86,"hashid":"9ygsnd8kd","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}