create-fesd-app 1.0.1 → 1.0.3

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

@@ -81,6 +81,21 @@ $typeFull-content-padding_rwd: 20px
 $pagination-TB-gap: 20px
 $pagination-TB-gap_rwd: 10px
 
+// 表格與其他物件上下間的距離
+$table-TB-gap: 20px
+$table-TB-gap_rwd: 20px
+
+// 表格最小寬度
+$table-min-width: 180px
+$freeze-table-height: 500px
+
+// 表格間距
+$table-padding: 15px 30px
+$table-padding_rwd: 10px 15px
+
+// 引言與其他物件上下間的距離
+$quote-TB-gap: 20px
+
 /////////////////////////////////////////////
 ////////////////// [ 內容 ] /////////////////
 /////////////////////////////////////////////
@@ -203,6 +218,8 @@ $pagination-TB-gap_rwd: 10px
   width: 100%
   // 以下可修改
   font-size: 14px
+  font-weight: 400
+  line-height: 1.5
   +rwdmax($basic_rwd)
     // 以下可修改
     font-size: 12px
@@ -301,3 +318,283 @@ $pagination-TB-gap_rwd: 10px
   transform: translate(0, -50%) rotate(45deg)
   border-left: 2px solid #000
   border-bottom: 2px solid #000
+
+
+// 20250528 新增
+%quote
+  ._quote
+    // 顯示符號
+    quotes: '“' '”' '"' '"' "'" "'"
+    // 以下可修改
+    font-size: px(20)
+    line-height: 1.8
+    font-weight: 600
+    &::before
+      margin-right: 10px
+    &:after
+      margin-left: 10px
+
+%table
+  // @extend %table_solid_single
+  // @extend %table_solid_striped
+  // @extend %table_border_rows
+  // @extend %table_border_full
+  @extend %table_solidSingle_borderColumn
+  table
+    th, td
+      // text-align: left
+      background: #fff
+      // 以下可修改
+      span
+        display: block
+        font-size: 14px
+        line-height: 1.8
+    thead
+      th
+        span
+          display: block
+          // 以下可修改
+          font-size: 16px
+          font-weight: 600
+
+%table_tipText
+  // 以下可修改
+  gap: 10px
+  font-size: 14px
+  font-weight: 500
+  line-height: 1.5
+  letter-spacing: 0.5px
+  i.icon-drag
+    font-size: px(20)
+
+%table_navigation
+  gap: 20px
+  display: flex
+  justify-content: center
+  align-items: center
+  .table-nav-left,
+  .table-nav-right
+    position: relative
+    cursor: pointer
+    &.disabled
+      pointer-events: none
+      opacity: .3
+    &::after
+      content: ''
+      display: block
+      width: 40px
+      height: 40px
+      border: 1px solid rgba(#000,.5)
+      border-radius: 5px
+    &::before
+      content: ''
+      width: 10px
+      height: 10px
+      position: absolute
+      top: 50%
+      left: 50%
+  .table-nav-left
+    &::before
+      border-left: 2px solid #000
+      border-bottom: 2px solid #000
+      transform: translate(-25%, -50%) rotate(45deg)
+  .table-nav-right
+    &::before
+      border-right: 2px solid #000
+      border-top: 2px solid #000
+      transform: translate(-75%, -50%) rotate(45deg)
+
+// 以下可修改 - 可新增 / 自訂表格樣式
+// 表格內框線樣式建議使用 偽元素製作以避免凍結合併時出錯
+%table_solid_single
+  ._table
+    border-bottom: 5px solid #6AA8FF
+    &:not(:has(thead))
+      border-top: 5px solid #6AA8FF
+  table
+    thead
+      th
+        color: #fff
+        background-color: #6AA8FF
+    tbody
+      tr:nth-child(even)
+        td
+          background-color: #F2F2F2
+%table_solid_striped
+  ._table
+    border-bottom: 5px solid #6AA8FF
+    &:not(:has(thead))
+      border-top: 5px solid #6AA8FF
+  table
+    thead
+      color: #fff
+      th:nth-child(odd)
+        background-color: #6AA8FF
+      th:nth-child(even)
+        background-color: #3287FF
+    tbody
+      tr:nth-child(even)
+        td
+          background-color: #F2F2F2
+%table_border_rows
+  ._table
+    border-bottom: 2px solid #000
+    &:not(:has(thead))
+      border-top: 2px solid #000
+  table
+    thead
+      th
+        color: #00C5B1
+        position: relative
+        &::before
+          content: ''
+          position: absolute
+          width: 100%
+          height: 2px
+          left: 0
+          top: 0
+          background: #000
+      tr:last-child
+        th::after
+          content: ''
+          position: absolute
+          width: 100%
+          height: 2px
+          bottom: 0
+          left: 0
+          background: #000
+    tbody
+      tr:not(:first-child)
+        td
+          position: relative
+          &::after
+            content: ''
+            position: absolute
+            width: 100%
+            height: 1px
+            top: 0
+            left: 0
+            background-color: rgba(#000, .2)
+%table_border_full
+  ._table
+    border-bottom: 2px solid #000
+    &:not(:has(thead))
+      border-top: 2px solid #000
+  table
+    thead
+      th
+        position: relative
+        &::before
+          content: ''
+          position: absolute
+          width: 100%
+          height: 2px
+          bottom: 0
+          left: 0
+          background-color: #000
+          z-index: 5
+        &:not(:last-child)
+          &:after
+            content: ''
+            position: absolute
+            top: 50%
+            right: 0
+            width: 1px
+            height: 20px
+            transform: translate3d(50%, -50%, 0)
+            background-color: #000
+    tbody
+      td
+        position: relative
+      tr:not(:first-child)
+        td
+          &::after
+            content: ''
+            position: absolute
+            width: 100%
+            height: 1px
+            top: 0
+            left: 0
+            background-color: rgba(#000, .2)
+      tr
+        td
+          &:not(:last-child)
+            &::before
+              content: ''
+              position: absolute
+              width: 1px
+              height: 100%
+              top: 0
+              right: 0
+              background-color: rgba(#000, .2)
+%table_solidSingle_borderColumn
+  @extend %table_solid_single
+  table
+    thead
+      th
+        &:not(:last-child)
+          position: relative
+          &:after
+            content: ''
+            position: absolute
+            top: 50%
+            right: 0
+            width: 1px
+            height: 100%
+            z-index: 3
+            transform: translate3d(50%, -50%, 0)
+            background-color: #fff
+    tbody
+      td:not(:last-child)
+        position: relative
+        &::after
+          content: ''
+          position: absolute
+          top: 0
+          right: 0
+          width: 1px
+          height: 100%
+          background-color: rgba(#000, .2)
+  
+// markdown文字樣式
+%table_markdown_style
+  [data-center]
+    text-align: center
+  ol
+    list-style: decimal
+  ul
+    list-style: disc
+  ol, ul
+    padding-left: 16px
+  li
+    line-height: 1.2
+    &:not(:first-child)
+      margin-top: 10px
+  h1
+    font-size: 28px
+    line-height: 1.2
+  h2
+    font-size: 26px
+    line-height: 1.2
+  h3
+    font-size: 24px
+    line-height: 1.2
+  h4
+    font-size: 22px
+    line-height: 1.2
+  h5
+    font-size: 20px
+    line-height: 1.2
+  h6
+    font-size: 18px
+    line-height: 1.2
+  p
+    font-size: 16px
+    line-height: 1.2
+    white-space: pre-wrap 
+  em
+    font-style: italic
+  a
+    color: #004cc5
+
+

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

@@ -82,7 +82,7 @@
 		&[data-align='left']
 			.txtBox
 				margin-right: auto
-  
+	
 	// 麵包屑
 	.breadCrumbs
 		width: 100%

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

@@ -5,7 +5,7 @@ $(async () => {
   // common Init
   common.inits()
   // pluginInit
-  new Article4('._articleBlock')
+  const article4 = new Article4('._articleBlock')
   // coding...
   methods.noContentCheck();
-})
+})

package/src/layouts/article4/_article.pug

@@ -0,0 +1,154 @@
+//- ========================
+//- mixin: article
+//- ========================
+mixin article(data, HTag='h4', subHTag='h5')
+  - const complexTypes = ['base', 'typeSL', 'typeSR', 'typeU', 'typeUL', 'typeUR', 'typeD', 'typeDL', 'typeDR']
+  - const isComplex = complexTypes.includes(data.articleType)
+
+  article(class=`_article ${data.articleType || ''}`)&attributes(data.attributes || {})
+    ._contentWrap
+      if isComplex && data.H
+        +dynamicHeading(HTag , '_H', data.H)
+      +backgroundWrap(data.backgroundPC, data.backgroundMobile)
+      +imgSwiperBlock(data.SwiperImg)
+      +imgCoverBlock(data.img)
+      +wordBlock(data, isComplex, HTag, subHTag) 
+      +quoteBlock(data)
+      +tableBlock(d, data.tableData, HTag)
+        if block
+          block
+
+
+//- ========================
+//- mixin: dynamicHeading
+//- ========================
+mixin dynamicHeading(tag, className, content)
+  - const validTags = ['h2', 'h3', 'h4', 'h5', 'h6']
+  - const seoTag = validTags.includes(tag) ? tag : 'h4'
+  if seoTag === 'h2'
+    h2(class=className) !{content}
+  else if seoTag === 'h3'
+    h3(class=className) !{content}
+  else if seoTag === 'h4'
+    h4(class=className) !{content}
+  else if seoTag === 'h5'
+    h5(class=className) !{content}
+  else if seoTag === 'h6'
+    h6(class=className) !{content}
+  else
+    p(class=className) !{content}
+
+//- ========================
+//- mixin: backgroundWrap
+//- ========================
+mixin backgroundWrap(backgroundPC, backgroundMobile)
+  if backgroundPC || backgroundMobile
+    ._backgroundWrap
+      if backgroundPC
+        ._pc(style=`background-image: url(${backgroundPC})`)
+      if backgroundMobile
+        ._mobile(style=`background-image: url(${backgroundMobile})`)
+
+//- ========================
+//- mixin: imgSwiperBlock
+//- ========================
+mixin imgSwiperBlock(images)
+  if Array.isArray(images) && images.length
+    ._imgCover
+      .swiper
+        .swiper-wrapper
+          each img in images
+            ._cover.swiper-slide
+              ._photo&attributes(img.videoAttributes || {})
+                if img.img
+                  img(src=img.img alt='')
+              if img.description
+                p._description= img.description
+      .swiper-button-cover
+
+//- ========================
+//- mixin: imgCoverBlock
+//- ========================
+mixin imgCoverBlock(images)
+  if Array.isArray(images) && images.length
+    ._imgCover
+      each img in images
+        ._cover
+          ._photo&attributes(img.videoAttributes || {})
+            if img.img
+              img(src=img.img alt='')
+          if img.description
+            p._description= img.description
+
+//- ========================
+//- mixin: wordBlock
+//- ========================
+mixin wordBlock(d, isComplex, HTag, subHTag)
+  - const isFloat = d.articleType === 'typeLR' || d.articleType === 'typeRR'
+  if isFloat
+    if d.H
+      +dynamicHeading(HTag, '_H', d.H)
+    if d.subH
+      +dynamicHeading(subHTag, '_subH', d.subH)
+    if d.P
+      ._P
+        p !{d.P}
+        if d.button
+          span._buttonCover
+            a._button(href='javascript:;')= d.button
+  else
+    if (!isComplex && d.H) || d.subH || d.P
+      ._wordCover
+        if !isComplex && d.H
+          +dynamicHeading(d.titleTag || 'h4', '_H', d.H)
+        if d.subH
+          +dynamicHeading(d.subTitleTag || 'h5', '_subH', d.subH)
+        if d.P
+          ._P
+            p !{d.P}
+            if d.button
+              span._buttonCover
+                a._button(href='javascript:;')= d.button
+
+//- ========================
+//- mixin: quoteBlock
+//- ========================
+mixin quoteBlock(d)
+  if d.quote
+    q._quote !{d.quote}
+    if d.quoteP
+      ._P
+        p !{d.quoteP}
+
+
+//- ========================
+//- mixin: tableBlock
+//- ========================
+mixin tableBlock(d,tableData)
+  if tableData
+    if tableData.H
+      +dynamicHeading(HTag, '_H', tableData.H)
+    ._tableCover
+      p._tipText 
+        i.icon-drag
+        span !{tableData.tipText ? tableData.tipText : '左右托拉查看表格資訊'}
+      if tableData.table
+        ._table
+          table
+            thead
+              each head in tableData.table.head
+                tr
+                  each th in head
+                    th
+                      p=th
+            tbody
+              each body in tableData.table.body
+                tr
+                  each td in body
+                    td
+                      p=td
+      else if block
+        ._table
+          block
+    ._P
+      p !{tableData.paragraph}