魔法詩(shī)網(wǎng)頁(yè)
源代碼獲取方式見(jiàn)文章結(jié)尾處
1、項(xiàng)目簡(jiǎn)介
魔法詩(shī)是一套基于前端開(kāi)發(fā)框架 Vue3 開(kāi)發(fā)的僅包含前端頁(yè)面的響應(yīng)式網(wǎng)站，此網(wǎng)頁(yè)主要是通過(guò)靜態(tài)的頁(yè)面展示給用戶(hù)一些炫酷的界面。無(wú)論是用在平時(shí)學(xué)校的小型練手項(xiàng)目，畢業(yè)設(shè)計(jì)還是在工作中的實(shí)際項(xiàng)目開(kāi)發(fā)都可以有很好的參考作用。
2、項(xiàng)目環(huán)境
魔法詩(shī)僅僅是本地環(huán)境開(kāi)發(fā)，不具備上線(xiàn)部署的功能，用戶(hù)如果想要參考此項(xiàng)目的源代碼，只需要拉取整個(gè)項(xiàng)目到本地即可快速進(jìn)行二次開(kāi)發(fā)。
- 拉取整個(gè)項(xiàng)目到本地
git clone https://gitee.com/a-jingchao/magic-poetry.git
- 運(yùn)行項(xiàng)目所需要的依賴(lài)資源
3、項(xiàng)目技術(shù)
- vue3
- vue cli
- vue-router
4、網(wǎng)頁(yè)界面
4.1 主界面
4.1.1 頁(yè)面預(yù)覽
4.1.2 界面說(shuō)明
主界面所在的vue文件為App.vue，其中由動(dòng)態(tài)背景視頻和主界面構(gòu)成。主界面又由頭部組件（HeaderComponent.vue）和左側(cè)組件（LeftComponent.vue）組成。
4.2 百寶箱
4.2.1 頁(yè)面預(yù)覽
4.2.2 界面說(shuō)明
百寶箱所在的vue文件為T(mén)reasureView.vue，從上到下由組件ContentWrapper.vue、LineCard.vue、Block.vue組成。
4.2.2 顏色剪切板
4.2.2.1 頁(yè)面預(yù)覽
4.2.2.2 界面說(shuō)明
顏色剪切板所在的vue文件為ColorClipboardView.vue，進(jìn)入到此頁(yè)面，用戶(hù)可以通過(guò)輸入顏色、年份、季節(jié)或者十六進(jìn)制代碼來(lái)查詢(xún)需要的顏色，點(diǎn)擊顏色快就可以復(fù)制顏色的十六進(jìn)制代碼，如上圖所示。
4.2.3 畫(huà)廊
4.2.3.1 頁(yè)面預(yù)覽
4.2.3.2 界面說(shuō)明
畫(huà)廊所在的vue文件為GalleryView.vue，用戶(hù)可以通過(guò)左右按鈕來(lái)選擇圖片或者通過(guò)底部的圖片列表來(lái)選擇圖片。
4.2.4 數(shù)字時(shí)鐘
4.2.4.1 頁(yè)面預(yù)覽
4.2.4.2 界面說(shuō)明
數(shù)字時(shí)鐘所在的vue文件為DigitalClockView.vue，頁(yè)面時(shí)間將動(dòng)態(tài)更新。
4.3 記錄線(xiàn)
4.3.1 頁(yè)面預(yù)覽
4.3.2 界面說(shuō)明
記錄線(xiàn)所在頁(yè)面的vue文件為RecordView.vue，頁(yè)面使用flex布局實(shí)現(xiàn)橫向的三欄布局，每個(gè)div通過(guò)nth-child選擇是否顯示右側(cè)的border（即界面中的每個(gè)板塊的白色分界線(xiàn)）
4.4 喜捷徑
4.4.1 頁(yè)面預(yù)覽
4.4.2 界面說(shuō)明
喜捷徑所在頁(yè)面的vue文件為ShortcutView.vue，頁(yè)面中的各個(gè)板塊使用ul、li標(biāo)簽，通過(guò)柵格布局實(shí)現(xiàn)。
4.5 炫酷卡片
4.5.1 用戶(hù)卡片
4.5.1.1 頁(yè)面預(yù)覽
4.5.1.2 界面說(shuō)明
用戶(hù)卡片所在的vue文件為UserCardView.vue，卡片有兩種不同的狀態(tài)，默認(rèn)狀態(tài)與鼠標(biāo)劃過(guò)狀態(tài)分別如上圖所示。
4.5.2 肖像卡片
4.5.2.1 頁(yè)面預(yù)覽
4.5.2.2 界面說(shuō)明
肖像卡片所在的vue文件為ProfileCardView.vue，肖像卡片有三種不同的樣式，用戶(hù)選擇底部的按鈕可以切換不同的狀態(tài)進(jìn)而可以展示不同的信息。具體實(shí)現(xiàn)細(xì)節(jié)參加項(xiàng)目源代碼。
4.5.3 新聞卡片
4.5.3.1 頁(yè)面預(yù)覽
4.5.3.2 界面說(shuō)明
新聞卡片所在的vue文件為NewsCardView.vue，其中包含了兩種不同樣式的新聞卡片，用戶(hù)鼠標(biāo)滑動(dòng)到卡片上即會(huì)動(dòng)態(tài)展示除了標(biāo)題外的更多信息（如卡片二所示）。
4.6 優(yōu)美畫(huà)面
4.6.1 貓吻蝴蝶
4.6.1.1 頁(yè)面預(yù)覽
4.6.1.2 界面說(shuō)明
貓吻蝴蝶所在的vue文件為CatButterflyView.vue，其中圖片上方的兩個(gè)按鈕皆為同一種類(lèi)型的邊框流動(dòng)按鈕，光標(biāo)移動(dòng)到按鈕上的樣式如圖中的第二個(gè)按鈕。
4.6.2 狗與玫瑰
4.6.2.1 頁(yè)面預(yù)覽
4.6.2.2 界面說(shuō)明
狗與玫瑰所在的vue文件為DogRoseView.vue，此頁(yè)面純屬娛樂(lè)！
4.6.3 綠眼貓咪
4.6.3.1 頁(yè)面預(yù)覽
4.6.3.2 界面說(shuō)明
綠眼喵咪所在的vue文件為GreenEyesCatView.vue，此頁(yè)面為一個(gè)動(dòng)態(tài)加載的頁(yè)面，主要為了從一開(kāi)始的朦朧狀態(tài)，到最后的清晰狀態(tài)的展示。
4.7 小玩意兒
4.7.1 流光按鈕
4.7.1.1 頁(yè)面預(yù)覽
4.7.1.2 界面說(shuō)明
流光按鈕所在的vue文件為T(mén)imeButtonView.vue，其中三個(gè)按鈕均為同一種風(fēng)格的按鈕，他們擁有流動(dòng)的邊框，故我將其稱(chēng)作流光按鈕，按鈕選中后的樣式如圖第二個(gè)按鈕所示。流光按鈕并不是通過(guò)一對(duì)普通的button標(biāo)簽完成的，而是通過(guò)一對(duì)嵌套四對(duì)span標(biāo)簽的a標(biāo)簽實(shí)現(xiàn)的。具體實(shí)現(xiàn)細(xì)節(jié)參見(jiàn)源代碼。
4.7.2 動(dòng)畫(huà)按鈕
4.7.2.1 頁(yè)面預(yù)覽
4.7.2.2 界面說(shuō)明
動(dòng)畫(huà)按鈕所在的vue文件為AnimationButtonView.vue，其中每個(gè)按鈕都是一種具有動(dòng)畫(huà)效果的按鈕，各具風(fēng)格。
4.7.3 文章詳情頁(yè)
4.7.3.1 頁(yè)面預(yù)覽
4.7.3.2 界面說(shuō)明
文章詳情頁(yè)所在的vue文件為ArticleDetailsView.vue，其中主要包含了封面介紹頁(yè)，文章信息展示以及文章中的引用等。具體實(shí)現(xiàn)細(xì)節(jié)參見(jiàn)項(xiàng)目源代碼。
4.7.4 個(gè)人信息頁(yè)
4.7.4.1 頁(yè)面預(yù)覽
4.7.4.2 界面說(shuō)明
個(gè)人信息頁(yè)所在的vue文件為PersonalInfoView.vue，其中主要包含了個(gè)人主界面（頭像，身份，城市……），個(gè)人介紹部分，個(gè)人作品集和聯(lián)系我們四部分，界面中均使用flex布局。
4.7.5 按鈕懸停樣式
4.7.5.1 頁(yè)面預(yù)覽
4.7.5.2 界面說(shuō)明
按鈕懸停樣式所在的vue文件為HoverButtonView.vue，此按鈕與動(dòng)畫(huà)按鈕相比較更加的樸素，低調(diào)，但是每個(gè)按鈕也都具備了自己的特點(diǎn)，詳細(xì)參見(jiàn)項(xiàng)目源代碼。
5、其他
5.1 源代碼獲取
????微信公眾號(hào)【京茶吉鹿】?jī)?nèi)回復(fù)“魔法詩(shī)”????文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-478653.html
5.2 后續(xù)
如果可能，后續(xù)會(huì)繼續(xù)寫(xiě)博客來(lái)分解每一個(gè)界面，剖析每一個(gè)頁(yè)面的源代碼。敬請(qǐng)期待！文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-478653.html
完
到了這里，關(guān)于魔法詩(shī)~~~一套基于Vue開(kāi)發(fā)的實(shí)用、高端、炫酷的響應(yīng)式前端網(wǎng)頁(yè)?。?！的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
