2 Star 27 Fork 5

京茶吉鹿 / magic-poetry

加入 Gitee
与超过 1200万 开发者一起发现、参与优秀开源项目,私有仓库也完全免费 :)
免费加入
克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
Apache-2.0

魔法诗README.md

1、项目简介

魔法诗是一套基于前端开发框架 Vue3 开发的仅包含前端页面的响应式网站,此网页主要是通过静态的页面展示给用户一些炫酷的界面。无论是用在平时学校的小型练手项目,毕业设计还是在工作中的实际项目开发都可以有很好的参考作用。

2、项目环境

魔法诗仅仅是本地环境开发,不具备上线部署的功能,用户如果想要参考此项目的源代码,只需要拉取整个项目到本地即可快速进行二次开发。

  • 拉取整个项目到本地
git clone https://gitee.com/a-jingchao/magic-poetry.git
  • 运行项目所需要的依赖资源

3、项目技术

  1. vue3
  2. vue cli
  3. vue-router

4、网页界面

4.1 主界面

4.1.1 页面预览

4.1.2 界面说明

主界面所在的vue文件为App.vue,其中由动态背景视频和主界面构成。主界面又由头部组件(HeaderComponent.vue)和左侧组件(LeftComponent.vue)组成。

4.2 百宝箱

4.2.1 页面预览

4.2.2 界面说明

百宝箱所在的vue文件为TreasureView.vue,从上到下由组件ContentWrapper.vue、LineCard.vue、Block.vue组成。

4.2.2 颜色剪切板

4.2.2.1 页面预览

4.2.2.2 界面说明

颜色剪切板所在的vue文件为ColorClipboardView.vue,进入到此页面,用户可以通过输入颜色、年份、季节或者十六进制代码来查询需要的颜色,点击颜色快就可以复制颜色的十六进制代码,如上图所示。

4.2.3 画廊

4.2.3.1 页面预览

4.2.3.2 界面说明

画廊所在的vue文件为GalleryView.vue,用户可以通过左右按钮来选择图片或者通过底部的图片列表来选择图片。

4.2.4 数字时钟

4.2.4.1 页面预览

4.2.4.2 界面说明

数字时钟所在的vue文件为DigitalClockView.vue,页面时间将动态更新。

4.3 记录线

4.3.1 页面预览

4.3.2 界面说明

记录线所在页面的vue文件为RecordView.vue,页面使用flex布局实现横向的三栏布局,每个div通过nth-child选择是否显示右侧的border(即界面中的每个板块的白色分界线)

4.4 喜捷径

4.4.1 页面预览

4.4.2 界面说明

喜捷径所在页面的vue文件为ShortcutView.vue,页面中的各个板块使用ul、li标签,通过栅格布局实现。

4.5 炫酷卡片

4.5.1 用户卡片

4.5.1.1 页面预览

4.5.1.2 界面说明

用户卡片所在的vue文件为UserCardView.vue,卡片有两种不同的状态,默认状态与鼠标划过状态分别如上图所示。

4.5.2 肖像卡片

4.5.2.1 页面预览

4.5.2.2 界面说明

肖像卡片所在的vue文件为ProfileCardView.vue,肖像卡片有三种不同的样式,用户选择底部的按钮可以切换不同的状态进而可以展示不同的信息。具体实现细节参加项目源代码。

4.5.3 新闻卡片

4.5.3.1 页面预览

4.5.3.2 界面说明

新闻卡片所在的vue文件为NewsCardView.vue,其中包含了两种不同样式的新闻卡片,用户鼠标滑动到卡片上即会动态展示除了标题外的更多信息(如卡片二所示)。

4.6 优美画面

4.6.1 猫吻蝴蝶

4.6.1.1 页面预览

4.6.1.2 界面说明

猫吻蝴蝶所在的vue文件为CatButterflyView.vue,其中图片上方的两个按钮皆为同一种类型的边框流动按钮,光标移动到按钮上的样式如图中的第二个按钮。

4.6.2 狗与玫瑰

4.6.2.1 页面预览

4.6.2.2 界面说明

狗与玫瑰所在的vue文件为DogRoseView.vue,此页面纯属娱乐!

4.6.3 绿眼猫咪

4.6.3.1 页面预览

4.6.3.2 界面说明

绿眼喵咪所在的vue文件为GreenEyesCatView.vue,此页面为一个动态加载的页面,主要为了从一开始的朦胧状态,到最后的清晰状态的展示。

4.7 小玩意儿

4.7.1 流光按钮

4.7.1.1 页面预览

4.7.1.2 界面说明

流光按钮所在的vue文件为TimeButtonView.vue,其中三个按钮均为同一种风格的按钮,他们拥有流动的边框,故我将其称作流光按钮,按钮选中后的样式如图第二个按钮所示。流光按钮并不是通过一对普通的button标签完成的,而是通过一对嵌套四对span标签的a标签实现的。具体实现细节参见源代码。

4.7.2 动画按钮

4.7.2.1 页面预览

4.7.2.2 界面说明

动画按钮所在的vue文件为AnimationButtonView.vue,其中每个按钮都是一种具有动画效果的按钮,各具风格。

4.7.3 文章详情页

4.7.3.1 页面预览

4.7.3.2 界面说明

文章详情页所在的vue文件为ArticleDetailsView.vue,其中主要包含了封面介绍页,文章信息展示以及文章中的引用等。具体实现细节参见项目源代码。

4.7.4 个人信息页

4.7.4.1 页面预览

4.7.4.2 界面说明

个人信息页所在的vue文件为PersonalInfoView.vue,其中主要包含了个人主界面(头像,身份,城市……),个人介绍部分,个人作品集和联系我们四部分,界面中均使用flex布局。

4.7.5 按钮悬停样式

4.7.5.1 页面预览

4.7.5.2 界面说明

按钮悬停样式所在的vue文件为HoverButtonView.vue,此按钮与动画按钮相比较更加的朴素,低调,但是每个按钮也都具备了自己的特点,详细参见项目源代码。

GitHub下载地址

https://github.com/Aubuary/magic-poetry

Apache License Version 2.0, January 2004 http://www.apache.org/licenses/ TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION 1. Definitions. "License" shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document. "Licensor" shall mean the copyright owner or entity authorized by the copyright owner that is granting the License. "Legal Entity" shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, "control" means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity. "You" (or "Your") shall mean an individual or Legal Entity exercising permissions granted by this License. "Source" form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files. "Object" form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types. "Work" shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below). "Derivative Works" shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof. "Contribution" shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as "Not a Contribution." "Contributor" shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work. 2. Grant of Copyright License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form. 3. Grant of Patent License. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed. 4. Redistribution. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions: (a) You must give any other recipients of the Work or Derivative Works a copy of this License; and (b) You must cause any modified files to carry prominent notices stating that You changed the files; and (c) You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and (d) If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License. You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License. 5. Submission of Contributions. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions. 6. Trademarks. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file. 7. Disclaimer of Warranty. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License. 8. Limitation of Liability. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages. 9. Accepting Warranty or Additional Liability. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability. END OF TERMS AND CONDITIONS APPENDIX: How to apply the Apache License to your work. To apply the Apache License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information. (Don't include the brackets!) The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives. Copyright [yyyy] [name of copyright owner] Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except in compliance with the License. You may obtain a copy of the License at http://www.apache.org/licenses/LICENSE-2.0 Unless required by applicable law or agreed to in writing, software distributed under the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the License for the specific language governing permissions and limitations under the License.

简介

魔法诗~~~一套基于Vue3开发的实用、高端、炫酷的响应式前端网页!!! 展开 收起
HTML 等 4 种语言
Apache-2.0
取消

发行版

暂无发行版

贡献者

全部

近期动态

加载更多
不能加载更多了
HTML
1
https://gitee.com/OHUHO/magic-poetry.git
git@gitee.com:OHUHO/magic-poetry.git
OHUHO
magic-poetry
magic-poetry
master

搜索帮助