create-fesd-app 1.0.13 → 1.0.15

package/src/assets/css/layouts/article4/_article4_2.0.sass

@@ -179,7 +179,6 @@
       &[img-merge="on"]
         ._imgCover
           margin-bottom: 0
-        // *-*
         .swiper-pagination
           margin-bottom: 0
     +rwdmax($basic_rwd)
@@ -196,7 +195,6 @@
           order: -1
         ._wordCover
           margin: 0
-      // *-*
       &[img-swiper=on]
         ._imgCover
           margin-bottom: #{-$cover-TB-gap_rwd}
@@ -254,7 +252,6 @@
     ._imgCover
       order: -1
     +rwdmax($basic_rwd)
-      // *-*
       ._imgCover
         margin-bottom: 0
       &[mobile-rwd="on"]
@@ -280,7 +277,6 @@
       &:not([img-swiper="on"])
         ._imgCover
           margin-bottom:  $img-cover-TB-gap
-    // *-*
     &[img-swiper="on"]
       ._imgCover
         margin-bottom: #{-$cover-TB-gap + $img-cover-TB-gap}
@@ -303,12 +299,10 @@
           margin-bottom: $img-cover-TB-gap_rwd
         &[mobile-rwd="on"]
           ._imgCover
-            // *-*
             margin-bottom: #{-$cover-TB-gap_rwd}
       &[mobile-rwd="on"]
         ._imgCover
           margin-bottom: #{-$cover-TB-gap_rwd}
-      // *-*
       &[img-swiper="on"]
         ._imgCover
           margin-bottom: #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
@@ -327,6 +321,9 @@
         @for $i from 2 through 5
           ._imgCover
             margin-bottom: #{-$cover-TB-gap}
+    &:not(:has(._imgCover))
+      ._H
+        margin-top: 0
     +rwdmax($basic_rwd)
       ._H
         margin-top: $img-cover-TB-gap_rwd
@@ -446,7 +443,6 @@
         ._wordCover
           margin-top: $img-cover-TB-gap_rwd
           width: 100%
-        // *-*
         &[img-swiper="on"]
           ._imgCover
             margin-bottom: 0
@@ -482,7 +478,6 @@
       ._imgCover
         margin: 0 0 $wrapping-gap $img-cover-LR-gap
         width: calc(50% - #{$img-cover-LR-gap})
-      // *-*
       &[img-swiper="on"]
         ._imgCover
           margin-bottom: #{$cover-TB-gap - $wrapping-gap}
@@ -517,7 +512,6 @@
           margin-left: 0
           margin-right: 0
           width: 100%
-          // *-*
           margin-bottom: #{-$cover-TB-gap_rwd + $cover-TB-gap_rwd}
         &[img-swiper="on"]
           ._imgCover
@@ -527,7 +521,6 @@
           order: initial
           margin: 0 #{-$cover-LR-gap_rwd + $cover-LR-gap_rwd}  #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
           width: 100%
-        // *-*
         &[img-swiper="on"]
           ._imgCover
             margin: 0 #{-$cover-LR-gap_rwd * 0.5} #{-$cover-TB-gap_rwd + $img-cover-TB-gap_rwd}
@@ -594,7 +587,6 @@
           ._imgCover
             margin: 0 #{-$cover-LR-gap_rwd * 0.5}
             width: calc(100% + #{$cover-LR-gap_rwd})
-          // *-*
           &[mobile-rwd="on"]
             ._imgCover
               margin-inline: #{-$cover-LR-gap_rwd * 0.5}
@@ -654,7 +646,6 @@
       ._imgCover
         margin: 0 $img-cover-LR-gap $wrapping-gap 0
         width: calc(50% - #{$img-cover-LR-gap})
-      // *-*
       &[img-swiper="on"]
         ._imgCover
           margin-bottom: #{$cover-TB-gap - $wrapping-gap}
@@ -816,12 +807,23 @@
             margin-bottom: $cover-TB-gap_rwd
             padding: 0 #{$cover-LR-gap_rwd * 0.5}
             width: calc(100% / 2)
+            
+    // 2025.10.27 Sue 新增手機版單張圖片設定
+    &[img-row="x#{$i}"]
+      +rwdmax($basic_rwd)
+        &[mobile-imgSingle="on"]
+          ._imgCover
+            margin-inline: 0
+            width: 100%
+            ._cover
+              margin-bottom: $cover-TB-gap_rwd
+              padding: 0
+              width: 100%
   
   // swiper
   &[img-swiper="on"]
     ._imgCover
       position: relative
-      // *-*
       margin-bottom: #{-$cover-TB-gap}
       .swiper-button-cover
         &:before
@@ -836,7 +838,6 @@
             &:before
               padding-bottom: #{math.div(56.25%, $i)} !important
     +rwdmax($basic_rwd)
-      // *-*
       ._imgCover
         margin-bottom: #{-$cover-TB-gap_rwd}
       @for $i from 2 through 5
@@ -850,11 +851,9 @@
   &[img-merge="on"]
     ._imgCover
       width: 100%
-      // *-*
       margin-bottom: 0
       ._cover
         padding: 0
-    // *-*
     &[img-swiper="on"]
       ._imgCover
         margin-bottom: #{-$cover-TB-gap}
@@ -865,7 +864,6 @@
           margin-bottom: 0
           ._description
             display: none
-    // *-*
     +rwdmax($basic_rwd)
       ._imgCover
         margin-bottom: 0
@@ -933,13 +931,21 @@
     ._buttonCover
       text-align: right
   // 新增 - 圖片比例若設定不指定時, 圖片寬度是否自動填滿
-  &[img-widthFull="false"]
+  &[img-width-full="off"]
     &:not([img-size="x11"]):not([img-size="x34"]):not([img-size="x43"]):not([img-size="x169"])
       ._imgCover
         ._photo
           justify-content: flex-start
         img
+          max-width: 100%
           width: auto
+      &[img-firstbig="on"]
+        ._imgCover
+          ._photo
+            justify-content: unset
+          ._cover:first-child
+            img
+              width: 100%
   // img-size
   // &[img-swiper="on"],
   &[img-size="x11"],
@@ -1127,18 +1133,16 @@
   
   // 凍結樣式
   &[freeze-table]
-    ._table
-      overflow-y: auto
-      height: $freeze-table-height
-      -webkit-overflow-scrolling: touch
-      scrollbar-width: none
-      overscroll-behavior: contain
-      &::-webkit-scrollbar
-        width: 2px
-        height: 0
-        display: none
-      &::-webkit-scrollbar-track
-        background: none
-      &::-webkit-scrollbar-thumb
-        background: none
-        border-radius: 99em
+    +rwdmin($basic_rwd)
+      ._table
+        overflow-y: auto
+        max-height: $freeze-table-height
+        &::-webkit-scrollbar
+          width: 2px
+          height: 0
+          display: none
+        &::-webkit-scrollbar-track
+          background: none
+        &::-webkit-scrollbar-thumb
+          background: none
+          border-radius: 99em

package/src/assets/css/layouts/article4/_article4_setting.sass

@@ -40,7 +40,7 @@ $subH-gap_rwd: 15px
 $text-LR-gap: 40px
 
 // 文字 padding
-$text-padding: 0px
+$text-padding: 20px
 $text-padding_rwd: 0px
 
 // 按鈕與其他物件之間的距離
@@ -197,10 +197,8 @@ $quote-TB-gap: 20px
   a:not(._button)
     color: #007aff
   ol,ul
-    display: inline-block
+    padding-left: 20px
     text-align: left
-    li
-      margin-left: 16px
   ol
     list-style: decimal !important
   ul
@@ -213,7 +211,7 @@ $quote-TB-gap: 20px
 
 // 圖片描述
 %_description
-  padding: 0 0
+  padding: 0 $text-padding
   margin-top: 10px
   width: 100%
   // 以下可修改
@@ -221,6 +219,7 @@ $quote-TB-gap: 20px
   font-weight: 400
   line-height: 1.5
   +rwdmax($basic_rwd)
+    padding: 0 $text-padding_rwd
     // 以下可修改
     font-size: 12px
 

package/src/assets/css/pages/about.sass

@@ -127,45 +127,101 @@
 	.main-wrapper
 		main
 			.container
-				max-width: 1200px
+				max-width: 1800px
 				width: calc(100% - 80px)
 				margin: 0 auto
 			section
 				width: 100%
-				&.section1
-					padding: 150px 0
-					.content
-						position: relative
-						._imgCover[data-aost]
-							opacity: 0
-							transform: scale(0.75)
-							&.show
-								animation: zoomIn 0.25s linear forwards
-					.title
-						padding-left: 20px
-						margin-bottom: 30px
-						display: flex
-						align-items: center
-						position: relative
-						font-size: px(30)
-						font-weight: 800
-						&:before 
-							display: block
-							background: #3e84cf
-							width: 8px
-							height: 36px
-							position: absolute
-							left: 0
-							content: ''
-				&.section2
-					.container
-						min-height: 50vh
-						display: flex
-						justify-content: center
-						align-items: center
-					.noData
-						font-size: px(30)
-						text-align: center
+	
+	.section1
+		padding: 150px 0
+		.container
+			display: flex
+			gap: 50px			
+
+		.aside
+			width: 300px
+			.box
+				position: sticky
+				top: 100px
+				max-height: 80vh
+				overflow: auto
+				-ms-overflow-style: none
+				scrollbar-width: none
+				&::-webkit-scrollbar
+					display: none
+					width: 0px
+				&::-webkit-scrollbar-track
+					background: none
+				&::-webkit-scrollbar-thumb
+					background: none
+					border-radius: 99em
+			.anchor
+				cursor: pointer
+				&[has-attr]
+					color: #888686
+				+hover
+					color: #3e84cf
+				&:not(:first-child)
+					margin-top: 20px
+					
+
+
+		.content
+			width: calc(100% - 300px)
+			position: relative
+			._imgCover[data-aost]
+				opacity: 0
+				transform: scale(0.75)
+				&.show
+					animation: zoomIn 0.25s linear forwards
+		.titleBox
+			margin-bottom: 50px
+		.title
+			padding-left: 20px
+			display: flex
+			align-items: center
+			position: relative
+			font-size: px(30)
+			font-weight: 800
+			&:before 
+				display: block
+				background: #3e84cf
+				width: 8px
+				height: 36px
+				position: absolute
+				left: 0
+				content: ''
+		.dep
+			font-size: px(16)
+			font-weight: 400
+			margin-top: 20px
+			line-height: 1.8
+			letter-spacing: 0.5px
+		.code
+			padding-inline: 5px
+			margin-inline: 5px
+			border-radius: 5px
+			color: #EB5757
+			background: #EEEEEC
+			font-size: px(14)
+		.lightHigh
+			font-weight: 600
+			color: #cf4d3e
+	
+	._articleBlock
+		&:not(:first-child)
+			margin-top: 100px
+
+	.section2
+		.container		
+			display: flex
+			justify-content: center
+			align-items: center
+			min-height: 80vh
+			font-size: px(100)
+			text-align: center
+
 
 
 @keyframes zoomIn

package/src/assets/css/pages/play.sass

@@ -0,0 +1,152 @@
+@import ../base/_variable
+@import ../base/_mixin
+
+.play-page
+	nav.navbar .container
+		max-width: 100%
+	.mainBox
+		display: flex
+		gap: 20px
+		width: 100%
+		height: calc(100vh - 60px)
+	h3
+		font-size: px(20)
+		line-height: 1.5
+	.main
+		width: calc(100% - 400px)
+	/* 折疊面板樣式 */
+	aside
+		width: 400px
+		flex-shrink: 0
+		position: relative
+		display: flex
+		justify-content: center
+		align-items: center
+		flex-direction: column
+
+	#attrPanel
+		flex: 1
+		width: 100%
+		overflow: auto
+		-ms-overflow-style: none
+		scrollbar-width: none
+		&::-webkit-scrollbar
+			display: none
+			width: 0px
+		&::-webkit-scrollbar-track
+			background: none
+		&::-webkit-scrollbar-thumb
+			background: none
+			border-radius: 99em
+	.btnGroup
+		width: 100%
+		padding: 50px 20px
+		display: flex
+		justify-content: center
+		align-items: center
+		flex-direction: column
+		gap: 20px
+		background: #FFF
+
+
+	.accordion
+		&:not(:last-child)
+			border-bottom: 1px solid #ccc
+		#typeSelect
+			width: 100%
+			text-align: center
+			border-bottom: 1px solid #ccc
+			padding-bottom: 5px
+		.accordion-header
+			padding: 20px
+			background: #eaeaea
+			cursor: pointer
+			font-weight: bold
+			user-select: none
+		.accordion-header:hover
+			background: #ddd
+		.accordion-header::after
+			content: '▼'
+			float: right
+			font-size: px(10)
+			transition: transform 0.2s
+		.accordion-header.active::after
+			transform: rotate(-90deg)
+		.accordion-content
+			display: none
+			padding: 20px
+			background: #fafafa
+		.accordion-content.active
+			display: block
+		.radio-option
+			display: inline-flex
+			gap: 10px
+			margin-inline: 10px
+		.form-item
+			>label
+				width: 100%
+				display: block
+				font-weight: bold
+				margin-bottom: 20px
+			&:not(:first-child)
+				>label
+					margin-top: 20px
+		textarea
+			height: 100px
+		input,
+		textarea
+			width: 100%
+			border: 1px solid #ccc
+			border-radius: 4px
+			padding: 10px
+			background: #FFF
+		input[type="color"]
+			appearance: auto
+			inline-size: 100%
+			block-size: 27px
+			cursor: default
+			box-sizing: border-box
+			background-color: buttonface
+			color: buttontext
+			border-width: 1px
+			border-style: solid
+			border-color: buttonborder
+			border-image: initial
+			padding: 1px 2px
+		
+	#resetBtn
+		width: fit-content
+		border-bottom: 1px solid #000
+		padding-bottom: 5px
+	#generateBtn
+		width: 100%
+		padding: 20px
+		border: 1px solid 
+		border-radius: 10px
+
+	
+
+	/* 預覽與原始碼 */
+	#previewWrap
+		width: 100%
+		padding: 50px
+		display: flex
+		// flex-wrap: wrap
+		gap: 50px
+	#previewWrap > div
+		flex: 1
+		width: calc((100% - 50px) /2)
+	#preview, #htmlCode, #dataCode
+		margin-top: 20px
+		flex: 1 
+		border-radius: 6px
+		padding: 20px
+		overflow: auto
+	#preview
+		background: #ecf1ff
+	#htmlCode,
+	#dataCode
+		font-family: "Courier New", monospace
+		white-space: pre
+		background: #111
+		color: #8dc18d

package/src/assets/js/apps/about/page.js

@@ -1,11 +1,15 @@
-import { Article4 } from '@xwadex/fesd';
+import { Article4, Anchor4 } from '@xwadex/fesd';
 import { common, methods } from "@/commons";
 
+
 $(async () => {
   // common Init
   common.inits()
   // pluginInit
-  const article4 = new Article4('._articleBlock')
+  new Article4('._articleBlock')
+  new Anchor4('[data-anchor-target]', {
+    gap: 100
+  })
   // coding...
   methods.noContentCheck();
 })