說明書示意副本 | Programming Project | OrangeApple Learning Platform

{"id":449438,"student_id":10,"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\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 v-show=\\\"showUI \u0026\u0026 !showGrid\\\" class=\\\"range-container p-3 position-fixed bottom-0 w-100 d-flex justify-content-center\\\"\u003e\\n            \u003cinput 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 v-show=\\\"showUI\\\" class=\\\"range-container p-3 position-fixed top-0\\\"\u003e\\n            \u003cbutton class=\\\"btn 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 = ['1.png', '2.png', '3.png', '1.png', '2.png', '3.png', '1.png', '2.png', '3.png', '1.png', '2.png', '3.png']\\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        }\\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    },\\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-17T15:33:38.917+08:00","updated_at":"2022-10-18T16:48:45.801+08:00","name":"說明書示意 副本","language":"web","screenshot":{"url":"/uploads/project/screenshot/449438/de6b1d4dd196ec44b38cd7ad1206b8a3.jpg"},"parent_id":449433,"plugin":"","description":null,"note":null,"status":"public","like_student_ids":[],"is_featured":false,"views":312,"hashid":"882s4d24p","is_content_changed":false,"review_status":"unsubmitted","submitted_at":null,"reviewed_at":null,"advise":null,"is_deleted":false}