From a15df10d8a6e461a86282de1e4f7d948e3bc384a Mon Sep 17 00:00:00 2001
From: 1549469775 <1549469775@qq.com>
Date: Thu, 23 Sep 2021 17:23:53 +0800
Subject: [PATCH] page
---
gulpfile.js/index.js | 2 +-
src/common/style.less | 111 ++++++++++++++++++++++++++++++++++++++++++
src/css/index/index.less | 108 ++--------------------------------------
src/html/__include/header.pug | 18 +++++++
src/html/__include/person.pug | 11 +++--
src/html/__layout/layout.pug | 2 +-
src/html/detail.pug | 23 +++++++++
src/html/index.pug | 35 ++-----------
8 files changed, 168 insertions(+), 142 deletions(-)
create mode 100644 src/html/__include/header.pug
create mode 100644 src/html/detail.pug
diff --git a/gulpfile.js/index.js b/gulpfile.js/index.js
index 841b75f..02b4ac0 100644
--- a/gulpfile.js/index.js
+++ b/gulpfile.js/index.js
@@ -16,7 +16,7 @@ let isProd = process.env.NODE_ENV === "production"
let distPath = isProd?"dist":"node_modules/.gcache"
-let pageName = "about"
+let pageName = "index"
/**
* 删除输出文件夹目录
diff --git a/src/common/style.less b/src/common/style.less
index 4e7cad3..ca8d585 100644
--- a/src/common/style.less
+++ b/src/common/style.less
@@ -17,4 +17,115 @@ body{
width: 700px;
}
+/**
+* 用户头像
+**/
+.userProfile{
+ display: flex;
+ align-items: center;
+ height: 100px;
+ width: 300px;
+ font-size: 2.0833em;
+ line-height: 1.3;
+ .head{
+ width: 100px;
+ height: 100%;
+ position: relative;
+ text-align: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ cursor: pointer;
+ .avatar{
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ border-radius: 50%;
+ overflow: hidden;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ transition: transform .6s linear, left .6s linear;
+ }
+ &:hover .avatar{
+ transform: rotate(-360deg);
+ left: -105%;
+ }
+ }
+ .text{
+ flex: 1;
+ width: 0;
+ margin-left: 10px;
+ .userName{
+ font-size: 1em;
+ }
+ .userDesc{
+ margin-top: 4px;
+ font-size: .7em;
+ }
+ }
+}
+
+/**
+* 用户头像End
+**/
+.mb{
+ margin-bottom: 20px;
+}
+header{
+ position: sticky;
+ top: 0;
+ z-index: 999;
+ font-size: 1.333em;
+ background-color: #fffef870;
+ border-bottom-left-radius: 6px;
+ border-bottom-right-radius: 6px;
+ margin-bottom: 15px;
+ padding: 0 30px;
+ height: 35px;
+ line-height: 35px;
+ .item{
+ color: inherit;
+ text-decoration: none;
+ cursor: pointer;
+ display: inline-block;
+ height: 100%;
+ padding: 0 10px;
+ &:hover{
+ background-color: #fffef870;
+ }
+ }
+ .menulist{
+ li{
+ float: left;
+ }
+ }
+ .oplist{
+ li{
+ float: right;
+ }
+ }
+}
+
+.line{
+ height: 15px;
+ width: 200px;
+ margin: 0 auto;
+ cursor: pointer;
+ &:hover{
+ height: 15px;
+ &::after{
+ height: 15px;
+ }
+ }
+ &::after{
+ content: "";
+ height: 5px;
+ display: block;
+ border-radius: 6px;
+ background-color: #fffef870;
+ transition: height .4s ease;
+ }
+}
\ No newline at end of file
diff --git a/src/css/index/index.less b/src/css/index/index.less
index 400c394..ef0088f 100644
--- a/src/css/index/index.less
+++ b/src/css/index/index.less
@@ -1,90 +1,4 @@
-/**
-* 用户头像
-**/
-.userProfile{
- display: flex;
- align-items: center;
- height: 100px;
- width: 300px;
- font-size: 2.0833em;
- line-height: 1.3;
- .head{
- width: 100px;
- height: 100%;
- position: relative;
- text-align: center;
- display: flex;
- align-items: center;
- justify-content: center;
- cursor: pointer;
- .avatar{
- width: 100%;
- height: 100%;
- position: absolute;
- border-radius: 50%;
- overflow: hidden;
- left: 0;
- right: 0;
- bottom: 0;
- top: 0;
- transition: transform .6s linear, left .6s linear;
- }
- &:hover .avatar{
- transform: rotate(-360deg);
- left: -105%;
- }
- }
- .text{
- flex: 1;
- width: 0;
- margin-left: 10px;
- .userName{
- font-size: 1em;
- }
- .userDesc{
- margin-top: 4px;
- font-size: .7em;
- }
- }
-}
-
-/**
-* 用户头像End
-**/
-.mb{
- margin-bottom: 20px;
-}
-header{
- position: sticky;
- top: 0;
- z-index: 999;
- font-size: 1.333em;
- background-color: #fffef870;
- border-bottom-left-radius: 6px;
- border-bottom-right-radius: 6px;
- margin-bottom: 15px;
- padding: 0 30px;
- height: 35px;
- line-height: 35px;
- .item{
- cursor: pointer;
- padding: 0 10px;
- &:hover{
- background-color: #fffef870;
- }
- }
- .menulist{
- li{
- float: left;
- }
- }
- .oplist{
- li{
- float: right;
- }
- }
-}
.panel{
// background-color: #fffef870;
@@ -135,23 +49,7 @@ header{
}
}
-.line{
- height: 15px;
- width: 200px;
- margin: 0 auto;
- cursor: pointer;
- &:hover{
- height: 15px;
- &::after{
- height: 15px;
- }
- }
- &::after{
- content: "";
- height: 5px;
- display: block;
- border-radius: 6px;
- background-color: #fffef870;
- transition: height .4s ease;
- }
+.motto{
+ text-align: center;
+ font-size: 20px;
}
\ No newline at end of file
diff --git a/src/html/__include/header.pug b/src/html/__include/header.pug
new file mode 100644
index 0000000..af2b9ae
--- /dev/null
+++ b/src/html/__include/header.pug
@@ -0,0 +1,18 @@
+-
+ var menulist = [
+ {text: "首页", path: "#"},
+ {text: "归档", path: "#"},
+ {text: "关于", path: "/about"},
+ ];
+ var oplist = [
+ {text: "注册/登录", path: "/login", id: "loginbtn"}
+ ];
+header.clearfix.mb
+ ul.menulist
+ for menu in menulist
+ li
+ a.item(href=menu.path,id=menu.id)= menu.text
+ ul.oplist
+ for op in oplist
+ li
+ a.item(href=op.path,id=op.id)= op.text
diff --git a/src/html/__include/person.pug b/src/html/__include/person.pug
index 73161fe..76c6a88 100644
--- a/src/html/__include/person.pug
+++ b/src/html/__include/person.pug
@@ -1,6 +1,7 @@
.userProfile.mb
- .head 无极
- img(src=avatarURL, alt="topuser", srcset="").avatar
- .text
- .userName 龙门客栈
- .userDesc.over-ellipsis 白龙马，蹄儿朝西
\ No newline at end of file
+ - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg"
+ .head XYX
+ img(src=avatarURL, alt="topuser", srcset="").avatar
+ .text
+ .userName 温小鱼
+ .userDesc.over-ellipsis 红尘一剑，骑马远游。
\ No newline at end of file
diff --git a/src/html/__layout/layout.pug b/src/html/__layout/layout.pug
index 135b39d..fac9ddd 100644
--- a/src/html/__layout/layout.pug
+++ b/src/html/__layout/layout.pug
@@ -2,7 +2,7 @@ doctype html
html(lang="zh-cn")
head
block title
- title 我的站点 - #{title}
+ title #{title}
include ../__include/head.pug
block head
body
diff --git a/src/html/detail.pug b/src/html/detail.pug
new file mode 100644
index 0000000..adc8d0e
--- /dev/null
+++ b/src/html/detail.pug
@@ -0,0 +1,23 @@
+//- 继承布局
+extends __layout/layout.pug
+
+block title
+ - var title = "过往"
+
+block content
+ - var content = `先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
+ - 宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
+ - 侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
+ - 将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
+ - 亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
+ - 臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
+ - 先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝`
+ .container.page
+ include __include/header
+ include __include/person
+ .line
+ .panel
+ h1 出师表
+ span.author 诸葛亮
+ .content!= content
+ .float 订阅
\ No newline at end of file
diff --git a/src/html/index.pug b/src/html/index.pug
index 7c5a65c..8b09f55 100644
--- a/src/html/index.pug
+++ b/src/html/index.pug
@@ -2,36 +2,11 @@
extends __layout/layout.pug
block title
- - var title = "哈哈"
+ - var title = "今生今世"
block content
- - var avatarURL = "https://cdn.pixabay.com/photo/2021/06/22/14/55/girl-6356393_960_720.jpg"
- - var content = `先帝创业未半而中道崩殂，今天下三分，益州疲弊，此诚危急存亡之秋也。然侍卫之臣不懈于内，忠志之士忘身于外者，盖追先帝之殊遇，欲报之于陛下也。诚宜开张圣听，以光先帝遗德，恢弘志士之气，不宜妄自菲薄，引喻失义，以塞忠谏之路也。
- - 宫中府中，俱为一体；陟罚臧否，不宜异同。若有作奸犯科及为忠善者，宜付有司论其刑赏，以昭陛下平明之理，不宜偏私，使内外异法也。
- - 侍中、侍郎郭攸之、费祎、董允等，此皆良实，志虑忠纯，是以先帝简拔以遗陛下。愚以为宫中之事，事无大小，悉以咨之，然后施行，必能裨补阙漏，有所广益。
- - 将军向宠，性行淑均，晓畅军事，试用于昔日，先帝称之曰能，是以众议举宠为督。愚以为营中之事，悉以咨之，必能使行阵和睦，优劣得所。
- - 亲贤臣，远小人，此先汉所以兴隆也；亲小人，远贤臣，此后汉所以倾颓也。先帝在时，每与臣论此事，未尝不叹息痛恨于桓、灵也。侍中、尚书、长史、参军，此悉贞良死节之臣，愿陛下亲之信之，则汉室之隆，可计日而待也。
- - 臣本布衣，躬耕于南阳，苟全性命于乱世，不求闻达于诸侯。先帝不以臣卑鄙，猥自枉屈，三顾臣于草庐之中，咨臣以当世之事，由是感激，遂许先帝以驱驰。后值倾覆，受任于败军之际，奉命于危难之间，尔来二十有一年矣。
- - 先帝知臣谨慎，故临崩寄臣以大事也。受命以来，夙夜忧叹，恐托付不效，以伤先帝之明；故五月渡泸，深入不毛。今南方已定，兵甲已足，当奖率三军，北定中原，庶竭驽钝，攘除奸凶，兴复汉室，还于旧都。此臣所以报先帝`
- - var menulist = ["首页", "文档", "归档", "关于"];
- - var oplist = ["注册/登陆"];
.container.page
- header.clearfix.mb
- ul.menulist
- for menu in menulist
- li.item= menu
- ul.oplist
- for op in oplist
- li.item= op
- .userProfile.mb
- .head 无极
- img(src=avatarURL, alt="topuser", srcset="").avatar
- .text
- .userName 龙门客栈
- .userDesc.over-ellipsis 白龙马，蹄儿朝西
- .line
- .panel
- h1 出师表
- span.author 诸葛亮
- .content!= content
- .float 订阅
\ No newline at end of file
+ include __include/header
+ include __include/person
+ .line
+ .motto 衣带渐宽终不悔
\ No newline at end of file