格局突然变了..

assets/sass/default.sass

@@ -0,0 +1,32 @@
+@import "main.sass"
+
+// 元素的默认状态
+html, body
+  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+  font-size: 16px
+  word-spacing: 1px
+  -ms-text-size-adjust: 100%
+  -webkit-text-size-adjust: 100%
+  -moz-osx-font-smoothing: grayscale
+  -webkit-font-smoothing: antialiased
+  box-sizing: border-box
+  margin: 0
+  padding: 0
+  color: var(--color-default)
+  background-color: var(--background-default)
+  min-height: 100vh
+
+button
+  background: #cc1414
+  color: #ffffff
+  border: none
+  border-radius: .25rem
+
+a
+  text-decoration: none
+a:link  //未访问的
+  color: #222222
+a:visited //已访问的
+  color: #444444
+a:active //点击时
+  color: #2233cc

assets/sass/main.sass

@@ -0,0 +1,33 @@
+// 调色盘 @satori (不涉及默认元素操作)
+//
+// 背景色 基调为纯白 #ffffff
+// 背景色 主调为薄灰 #f5f6f7
+//
+// 前景色 基调为深灰 #222222
+// 前景色 主调为厚黑 #111111
+
+:root
+  --background-default: #ffffff
+  --background-main: #f5f6f7
+
+  --color-default: rgba(0,30,38, 1)
+  --color-main: rgba(0,30,38, 1)
+
+// 仪式
+.ceremony
+  padding-top: 10rem
+  padding-bottom: 10rem
+  margin: 10rem 0
+  background: var(--background-main)
+
+// 界限
+.circumscription
+  @media (min-width: 480px)
+    margin: 0 2rem
+  @media (min-width: 1280px)
+    max-width: 1200px
+    margin-left: auto
+    margin-right: auto
+
+// 汇聚 converge
+// 过渡 transition: all .75s linear

components/Model/Box.vue

@@ -0,0 +1,129 @@
+<template lang="pug">
+.model-box
+  .wrap
+    .cube
+      .front
+      .back
+      .left
+      .right
+      .top
+      .bottom
+
+      i.ifront
+      i.iback
+      i.ileft
+      i.iright
+      i.itop
+      i.ibottom
+</template>
+
+<style lang="sass">
+.model-box
+  .wrap
+    height: 200px
+    margin-top: 200px
+    perspective: 1000px
+    perspective-origin: 50% 50%
+    background: #222
+    border-radius: .5rem
+    .cube
+      position: relative
+      width: 12.5rem
+      height: 12.5rem
+      margin: 0 auto
+      transform-style: preserve-3d
+      animation: box 15s linear infinite
+      transform: rotateX(0deg) rotateY(0deg)
+      div
+        position: absolute
+        top: 0
+        left: 0
+        opacity: 0.8
+        width: 100%
+        height: 100%
+        font-size: 1.25rem
+        color: white
+        text-align: center
+        line-height: 200px
+        transition: transform .75s ease-in
+      .front
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(100px)
+      .back
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(-100px) rotateY(180deg)
+      .right
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(100px)
+      .left
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(100px)
+      .top
+        background: linear-gradient(blueviolet,blueviolet)
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(100px)
+      .bottom
+        background: linear-gradient(dodgerblue,dodgerblue)
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(100px)
+      i
+        position: absolute
+        top: 50%
+        left: 50%
+        margin-top: -50px
+        margin-left: -50px
+        width: 100px
+        height: 100px
+      .ifront
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(50px)
+      .iback
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: translateZ(-50px) rotateY(180deg)
+      .iright
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(50px)
+      .ileft
+        background: linear-gradient(blueviolet,dodgerblue)
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(50px)
+      .itop
+        background: linear-gradient(blueviolet,blueviolet)
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(50px)
+      .ibottom
+        background: linear-gradient(dodgerblue,dodgerblue)
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(50px)
+    .cube:hover
+      .front
+        background-size: auto 100%
+        transform: translateZ(200px)
+      .back
+        background-size: auto 100%
+        transform: translateZ(-200px) rotateY(180deg)
+      .right
+        background-size: auto 100%
+        transform: rotateY(90deg) translateZ(200px)
+      .left
+        background-size: auto 100%
+        transform: rotateY(-90deg) translateZ(200px)
+      .top
+        background-size: auto 100%
+        transform: rotateX(90deg) translateZ(200px)
+      .bottom
+        background-size: auto 100%
+        transform: rotateX(-90deg) translateZ(200px)
+@keyframes box
+  0%
+    transform: rotateX(0) rotateY(0)
+  100%
+    transform: rotateX(360deg) rotateY(360deg)
+</style>

components/Model/ConesInner.vue

@@ -0,0 +1,61 @@
+<template lang="pug">
+ul.model-cones-inner
+  li.bottom
+  li.front
+  li.right
+  li.left
+</template>
+
+<style lang="sass" scoped>
+.model-cones-inner
+  position: relative
+  top: 8px
+  left: 32px
+  width: 64px
+  height: 64px
+  padding: 0
+  list-style: none
+  display: block
+  margin: -25px 0 0 -25px
+  -webkit-transform-style: preserve-3d
+  transform-style: preserve-3d
+  -webkit-transform-origin: 25px 25px
+  transform-origin: 25px 25px
+  -webkit-transform: rotateY(35deg)
+  transform: rotateY(35deg)
+  -webkit-animation: slowRotate 6s ease-in-out infinite 0s
+  animation: slowRotate 6s ease-in-out infinite 0s
+  >li
+    position: absolute
+    top: 0
+    z-index: 10
+    border-left: 28.87px solid transparent
+    border-right: 28.87px solid transparent
+  .bottom
+    border-bottom: 50px solid rgba(200, 200, 200, 0.7)
+  .front
+    border-bottom: 50px solid rgba(80, 80, 80, 0.7)
+    -webkit-transform: rotate3d(-1, 1.732, 0, 70.5deg)
+    transform: rotate3d(-1, 1.732, 0, 70.5deg)
+    -webkit-transform-origin: 25% 50%
+    transform-origin: 25% 50%
+  .right
+    border-bottom: 50px solid rgba(160, 160, 160, 0.7)
+    -webkit-transform: rotate3d(1, 0, 0, 70.5deg)
+    transform: rotate3d(1, 0, 0, 70.5deg)
+    -webkit-transform-origin: 50% 100%
+    transform-origin: 50% 100%
+  .left
+    border-bottom: 50px solid rgba(120, 120, 120, 0.7)
+    -webkit-transform: rotate3d(1, 1.732, 0, -70.5deg)
+    transform: rotate3d(1, 1.732, 0, -70.5deg)
+    -webkit-transform-origin: 75% 50%
+    transform-origin: 75% 50%
+@keyframes slowRotate
+  0%
+    -webkit-transform: rotateY(35deg)
+    transform: rotateY(35deg)
+  100%
+    -webkit-transform: rotateY(395deg)
+    transform: rotateY(395deg)
+</style>

layouts/default.vue

@@ -18,6 +18,9 @@
 </template>
 
 <script>
+import "assets/sass/main.sass";
+import "assets/sass/default.sass";
+
 export default {
   computed: {
     account() {
@@ -36,58 +39,40 @@ export default {
 </script>
 
 <style lang="sass">
-html, body
+.block
-  font-family: "Source Sans Pro", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif
+  padding-top: 10rem
-  font-size: 16px
+  padding-bottom: 10rem
-  word-spacing: 1px
-  -ms-text-size-adjust: 100%
-  -webkit-text-size-adjust: 100%
-  -moz-osx-font-smoothing: grayscale
-  -webkit-font-smoothing: antialiased
-  box-sizing: border-box
-  margin: 0
-  padding: 0
-
-.main
-  min-height: 100vh
-  background-color: #dee2e6
 
 @media (min-width: 480px)
   .main-width
-    //max-width: 480px
     margin: 0 2rem
 
-//@media (min-width: 992px)
-//  .main-width
-//    max-width: 800px
-//    margin: auto
-
 @media (min-width: 1280px)
   .main-width
     max-width: 1200px
     margin: auto
 
 header.header
-  background-color: rgba(0, 0, 0, .8)
+  //background-color: rgba(0, 0, 0, .8)
   nav.navbar
     display: flex
     align-items: center
     .navbar-logo
-      color: #fff
+      //color: #fff
       margin: 0 1rem
       font-size: 1.2rem
       font-weight: 600
     .navbar-item
-      color: #eee
+      //color: #eee
       padding: 1rem
       font-size: 1.2rem
       font-weight: 600
     .navbar-item:hover
-      color: #fff
+      //color: #fff
     .expnone
       flex: 1
     .userinfo
-      color: #ffffff
+      //color: #ffffff
       font-weight: 600
       display: flex
       align-items: center
@@ -100,14 +85,6 @@ footer.footer
   text-align: center
   margin: 4rem
 
-a
-  text-decoration: none
-a:link  // 未访问的
-  color: #222222
-a:visited
-  color: #223388
-a:active // 点击时
-  color: #2233cc
 a.button
   border: none
   border-radius: .25rem

pages/index.vue

@@ -1,24 +1,43 @@
 <template lang="pug">
-.index.main-width
+.index-default
-  article
+  .circumscription
-    .card
+    ModelBox
-      .content
+    p 下载安装, 查看文档, 提问讨论, 开发
-        p 下载 Kana: 400 行代码实现服务端
+  .ceremony
-        p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
+    .circumscription
-        p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
-    .card
-      .header
-        span 最新
-        span 精华
-        .expnone
-        nuxt-link.create-thread(to="/thread/create") 新议题
-      .content
       ThreadList(:data="data")
-  aside
+      ul
-    .card
+        li 除去阅览以外, 还可以做一些什么
-      .content
+        li 如翻页, 如发表
-        .bbs-title Kana 开发者论坛
+        li
-        p 基于 node 实现的小型服务端
+          nuxt-link(to="/thread/create")
+            button 新议题
+  //.index.main-width
+  //  article
+  //    .card
+  //      .content
+  //        p 下载 Kana: 400 行代码实现服务端
+  //        p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
+  //        p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
+  //        //ModelBox
+  //        //ModelConesInner
+  //    .card
+  //      .header
+  //        span 最新
+  //        span 精华
+  //        .expnone
+  //        nuxt-link.create-thread(to="/thread/create") 新议题
+  //      .content
+  //        ThreadList(:data="data")
+  //  aside
+  //    .card
+  //      .content
+  //        .bbs-title Kana 开发者论坛
+  //        p
+  //        | 基于 node 实现的小型服务端,旨在快速灵活构建小型项目
+  //        | <br/> 1. 数据类型无限扩展并复用
+  //        | <br/> 2. 无依赖免配置一键安装
+  //        | <br/> 3. 接口模型
 </template>
 
 <script>
@@ -30,43 +49,3 @@ export default {
   },
 };
 </script>
-
-<style lang="sass">
-// 基本布局
-.index
-  display: flex
-
-  article
-    flex: 75
-    .card .header
-      display: flex
-      .expnone
-        flex: 1
-  aside
-    flex: 25
-
-.card
-  margin: 1rem .5rem
-  border-radius: .5rem
-  overflow: hidden
-  background-color: #ffffff
-  box-shadow: 0 6px 22px 0 rgba(0,0,0,.08)
-  .header
-    padding: 1rem
-    border-bottom: 1px solid #ccc
-
-  .content
-    padding: 1rem
-
-a.create-thread
-  border: none
-  border-radius: .25rem
-  padding: .5rem 1rem
-  background-color: #007bff
-  color: #ffffff !important
-  display: block
-
-.bbs-title
-  font-size: 1.2rem
-  font-weight: 600
-</style>