格局突然变了..
This commit is contained in:
parent
3c261aa690
commit
2906012920
32
assets/sass/default.sass
Normal file
32
assets/sass/default.sass
Normal file
@ -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
|
||||
33
assets/sass/main.sass
Normal file
33
assets/sass/main.sass
Normal file
@ -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
|
||||
129
components/Model/Box.vue
Normal file
129
components/Model/Box.vue
Normal file
@ -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>
|
||||
61
components/Model/ConesInner.vue
Normal file
61
components/Model/ConesInner.vue
Normal file
@ -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>
|
||||
@ -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
|
||||
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
|
||||
|
||||
.main
|
||||
min-height: 100vh
|
||||
background-color: #dee2e6
|
||||
.block
|
||||
padding-top: 10rem
|
||||
padding-bottom: 10rem
|
||||
|
||||
@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
|
||||
|
||||
@ -1,24 +1,43 @@
|
||||
<template lang="pug">
|
||||
.index.main-width
|
||||
article
|
||||
.card
|
||||
.content
|
||||
p 下载 Kana: 400 行代码实现服务端
|
||||
p 下载 Kana-bbs: 基于 kana 后端使用 Nuxt3 构建的社区论坛程序
|
||||
p 文档补全计划: 标记任何你感到疑惑的或是不符合直觉之处, 以及你需要却感觉无法轻松实现的功能
|
||||
.card
|
||||
.header
|
||||
span 最新
|
||||
span 精华
|
||||
.expnone
|
||||
nuxt-link.create-thread(to="/thread/create") 新议题
|
||||
.content
|
||||
ThreadList(:data="data")
|
||||
aside
|
||||
.card
|
||||
.content
|
||||
.bbs-title Kana 开发者论坛
|
||||
p 基于 node 实现的小型服务端
|
||||
.index-default
|
||||
.circumscription
|
||||
ModelBox
|
||||
p 下载安装, 查看文档, 提问讨论, 开发
|
||||
.ceremony
|
||||
.circumscription
|
||||
ThreadList(:data="data")
|
||||
ul
|
||||
li 除去阅览以外, 还可以做一些什么
|
||||
li 如翻页, 如发表
|
||||
li
|
||||
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>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user