@ -1,107 +1,108 @@
< template > < template >
< Simplebar style = "height: 100vh;overflow: auto;" @scroll ="handleScroll" >
< div class = "menu" v-if ="show_menu" >
< Simplebar @scroll ="handleScroll" >
<!-- 头部导航菜单 -- >
< div class = "headerMenu" v-if ="show_menu" >
< a -menu v -model :selectedKeys ="current" mode = "horizontal" :items ="items" style = "border-bottom: none;" / > < a -menu v -model :selectedKeys ="current" mode = "horizontal" :items ="items" style = "border-bottom: none;" / >
< a -input -search v -model :value ="value" placeholder = "search" style = "width: 200px" @search ="onSearch" / > < a -input -search v -model :value ="value" placeholder = "search" style = "width: 200px" @search ="onSearch" / >
< / div > < / div >
< div class = "salon-light-text" > < / div >
< div class = "carouse" >
< div class = "author" > < / div >
<!-- 轮播 -- >
< div >
< a -carousel autoplay > < a -carousel autoplay >
< div class = "img" > < img src = "/src/assets/images/nav1.png" alt = "" > < / div > < div class = "img" > < img src = "/src/assets/images/nav1.png" alt = "" > < / div >
< div class = "img" > < img src = "/src/assets/images/nav10.png" alt = "" > < / div > < div class = "img" > < img src = "/src/assets/images/nav10.png" alt = "" > < / div >
< div class = "img" > < img src = "/src/assets/images/nav13.png" alt = "" > < / div > < div class = "img" > < img src = "/src/assets/images/nav13.png" alt = "" > < / div >
< / a - c a r o u s e l > < / a - c a r o u s e l >
< / div > < / div >
< a -button type = "link" shape = "circle" class = "down_button" size = "large" @click ="downScroll" >
< template # icon >
< DownCircleOutlined style = "font-size: 35px;color: aliceblue;" spin / >
< / template >
< / a - b u t t o n >
< a -flex >
< a -flex vertical >
< a -card style = "width: 350px;" hoverable >
< template # cover >
< img alt = "example" :src ="img" style = "height: 350px;" / >
<!-- 操作按钮滚动 -- >
< div class = "anchorDown" >
< a -button type = "link" shape = "circle" size = "large" @click ="downScroll" >
< template # icon >
< DownCircleOutlined style = "font-size: 35px;color: aliceblue;" spin / >
< / template >
< / a - b u t t o n >
< / div >
<!-- 主要内容区域 -- >
< div class = "mainContainer" >
< a -card hoverable >
< img alt = "example" :src ="img" / >
< a -card -meta title = "SunFree" style = "min-height: 100px" >
< template # description >
< div class = "cardtext" > < / div >
< / template > < / template >
< a -card -meta title = "SunFree" style = "height: 100px" >
< template # description >
< div class = "cardtext" > < / div >
< / template >
< / a - c a r d - m e t a >
< a -space wrap class = "button-container" >
< a -button shape = "circle" size = "large" >
< GravatarLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< QQLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< WechatLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< MusicLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< GitHubLined / >
< / a - b u t t o n >
< / a - s p a c e >
< a -collapse class = "custom-collapse" v -model :activeKey ="activeKey" :bordered ="false"
expandIconPosition = "end" >
< template # expandIcon = "{ isActive }" >
< caret -right -outlined : rotate = "isActive ? 90 : 0" / >
< / template >
< a -collapse -panel key = "1" header = "内容1" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "2" header = "内容2" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "3" header = "内容3" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< / a - c o l l a p s e >
< / a - c a r d >
< / a - f l e x >
< a -flex style = "height: 500px;width: 60%;background-color: black;border: solid 1px red;" >
< / a - c a r d - m e t a >
< a -space wrap >
< a -button shape = "circle" size = "large" @click ="gravatarClick" >
< GravatarLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< QQLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< WechatLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< MusicLined / >
< / a - b u t t o n >
< a -button shape = "circle" size = "large" >
< GitHubLined / >
< / a - b u t t o n >
< / a - s p a c e >
< a -collapse v -model :activeKey ="activeKey" :bordered ="false" expandIconPosition = "end" >
< template # expandIcon = "{ isActive }" >
< caret -right -outlined : rotate = "isActive ? 90 : 0" / >
< / template >
< a -collapse -panel key = "1" header = "内容1" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "2" header = "内容2" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< a -collapse -panel key = "3" header = "内容3" :style ="customStyle" >
< p > { { text } } < / p >
< / a - c o l l a p s e - p a n e l >
< / a - c o l l a p s e >
< / a - c a r d >
< div class = "main" >
< div > < / div > < div > < / div >
< / a - f l e x >
< a -flex >
< a -card hoverable style = "width: 400px" >
< / div >
< div class = "rightBar" >
< a -card hoverable style = "width: 400px;" >
< template # cover > < template # cover >
< div id = "aplayer" style = "width: 400px" > < / div >
< div class = "heatmap" >
< div ref = "heat" style = "height: 100%;border-right: 1px solid #e9e9e9; " > < / div >
< div id = "aplayer" style = "width: 400px;" > < / div >
< div class = "heatmap" style = "border-right: rgba(0, 0, 0, 0.5);" >
< div ref = "heat" style = "height: 100%;" > < / div >
< / div > < / div >
< div class = "statistic" > < div class = "statistic" >
< a -row > < a -row >
< a -col :span ="8" > < a -col :span ="8" >
< a -statistic title = "DAYS" :value ="112893" / >
< a -statistic title = "DAYS" :value ="112893" / >
< / a - c o l > < / a - c o l >
< a -col :span ="8" > < a -col :span ="8" >
< a -statistic title = "DIARYS" :value ="112893" / >
< a -statistic title = "DIARYS" :value ="112893" / >
< / a - c o l > < / a - c o l >
< a -col :span ="8" > < a -col :span ="8" >
< a -statistic title = "BLOGS" :value ="112893" / >
< a -statistic title = "BLOGS" :value ="112893" / >
< / a - c o l > < / a - c o l >
< / a - r o w > < / a - r o w >
< / div > < / div >
< / template > < / template >
< / a - c a r d >
< a -card title = "随机文章" :bordered ="false" hoverable style = "width: 400px;margin: 12px 0;" >
sces
< / a - c a r d >
< a -card title = "标签云" :bordered ="false" hoverable style = "width: 400px;margin: 12px 0;" >
sces
< / a - c a r d > < / a - c a r d >
< / a - f l e x >
<!-- < a -flex >
< div id = "aplayer" > < / div >
< div >
< div ref = "heat" style = "height: 200px;width: 500px;" > < / div >
< / div >
< / a - f l e x > - - >
< / a - f l e x >
< / div >
< / div >
< / Simplebar > < / Simplebar >
< / template > < / template >
< script lang = "ts" setup > < script lang = "ts" setup >
import Simplebar from 'simplebar-vue' ;
import 'simplebar-vue/dist/simplebar.min.css' ;
import { h , reactive , ref } from 'vue' ; import { h , reactive , ref } from 'vue' ;
import { MenuProps } from 'ant-design-vue/es/menu' ; import { MenuProps } from 'ant-design-vue/es/menu' ;
import { HomeOutlined , HighlightOutlined , ProfileOutlined , CameraOutlined , UsergroupDeleteOutlined , DownCircleOutlined } from '@ant-design/icons-vue' ; import { HomeOutlined , HighlightOutlined , ProfileOutlined , CameraOutlined , UsergroupDeleteOutlined , DownCircleOutlined } from '@ant-design/icons-vue' ;
@ -113,7 +114,8 @@ import 'APlayer/dist/APlayer.min.css';
import APlayer from 'APlayer' ; import APlayer from 'APlayer' ;
import { createEcharts } from "@/hooks/intex" import { createEcharts } from "@/hooks/intex"
import { SettingOutlined , EditOutlined , EllipsisOutlined } from '@ant-design/icons-vue' ; import { SettingOutlined , EditOutlined , EllipsisOutlined } from '@ant-design/icons-vue' ;
import { useRouter } from 'vue-router'
const router = useRouter ( )
const heat = ref ( null ) ; const heat = ref ( null ) ;
const activeKey = ref ( [ '' ] ) ; const activeKey = ref ( [ '' ] ) ;
const text = ` A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. ` ; const text = ` A dog is a type of domesticated animal.Known for its loyalty and faithfulness,it can be found as a welcome guest in many households across the world. ` ;
@ -121,7 +123,7 @@ const customStyle =
'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden' ; 'background: #f7f7f7;border-radius: 4px;margin-bottom: 12px;border: 0;overflow: hidden' ;
onMounted ( ( ) => { onMounted ( ( ) => {
/ / 定 义 h o m e 页 的 博 客 标 题 名 / / 定 义 h o m e 页 的 博 客 标 题 名
new Typed ( '.salon-light-text ' , {
new Typed ( '.author ' , {
strings : [ 'SunFree.' ] , strings : [ 'SunFree.' ] ,
typeSpeed : 200 , typeSpeed : 200 ,
backSpeed : 150 , backSpeed : 150 ,
@ -175,28 +177,35 @@ onMounted(() => {
const currentDate = new Date ( ) ; const currentDate = new Date ( ) ;
for ( let i = 0 ; i < numDays ; i ++ ) { for ( let i = 0 ; i < numDays ; i ++ ) {
const date = new Date ( currentDate ) ; const date = new Date ( currentDate ) ;
date . setDate ( currentDate . getDate ( ) + i ) ;
date . setDate ( currentDate . getDate ( ) - i ) ;
dates . push ( dates . push (
{ date : date . toISOString ( ) . split ( 'T' ) [ 0 ] , blogCount : 0 } { date : date . toISOString ( ) . split ( 'T' ) [ 0 ] , blogCount : 0 }
) ; / / 包 含 日 期 和 评 论 数 ) ; / / 包 含 日 期 和 评 论 数
} }
return dates ; return dates ;
} }
/ / 初 始 化 6 0 天 的 数 据 / / 初 始 化 6 0 天 的 数 据
const data = generateDates ( 60 ) ; const data = generateDates ( 60 ) ;
console . log ( ` output-> ` , data )
data [ 3 ] . blogCount = 5 ; data [ 3 ] . blogCount = 5 ;
data [ 15 ] . blogCount = 10 ; data [ 15 ] . blogCount = 10 ;
data [ 25 ] . blogCount = 3 ; data [ 25 ] . blogCount = 3 ;
const formattedData = data . map ( ( value , index ) => [ index % 15 , Math . floor ( index / 15 ) , value . blogCount ] ) ;
/ / 重 新 排 列 数 据
const newData = [ ] ;
for ( let i = 0 ; i < 60 ; i += 15 ) {
/ / 取 出 每 个 1 5 天 的 数 据 ， 并 反 转 顺 序
const chunk = data . slice ( i , i + 15 ) . reverse ( ) ;
newData . push ( ... chunk ) ;
}
const formattedData = newData . map ( ( value , index ) => [ index % 15 , Math . floor ( index / 15 ) , value . blogCount ] ) ;
const heatMapData = { const heatMapData = {
tooltip : { tooltip : {
position : 'top' , position : 'top' ,
formatter : function ( params ) {
const item = data [ params . dataIndex ] ;
formatter : function ( params : any ) {
const item = newD ata[ params . dataIndex ] ;
if ( item . blogCount > 0 ) { if ( item . blogCount > 0 ) {
return ` ${ item . date } <br/>COMMENTS: ${ item . blogCount } ` ; return ` ${ item . date } <br/>COMMENTS: ${ item . blogCount } ` ;
} else { } else {
@ -243,7 +252,7 @@ onMounted(() => {
type : 'heatmap' , type : 'heatmap' ,
data : formattedData , data : formattedData ,
itemStyle : { itemStyle : {
borderColor : 'rgba(0, 0, 0, 0.4 )' , / / 设 置 边 框 颜 色
borderColor : 'rgba(0, 0, 0, 0.1 )' , / / 设 置 边 框 颜 色
borderWidth : 0.5 , / / 设 置 边 框 宽 度 borderWidth : 0.5 , / / 设 置 边 框 宽 度
} , } ,
label : { label : {
@ -259,7 +268,8 @@ onMounted(() => {
} }
} ] } ]
} ; } ;
createEcharts ( heat , heatMapData )
createEcharts ( heat , heatMapData ) ;
} ) } )
const current = ref < string [ ] > ( [ 'mail' ] ) ; const current = ref < string [ ] > ( [ 'mail' ] ) ;
const show_menu = ref ( false ) ; const show_menu = ref ( false ) ;
@ -346,14 +356,23 @@ const onSearch = (searchValue: string) => {
const img = ref ( "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" ) const img = ref ( "https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png" )
const gravatarClick = ( ) => {
window . open ( "https://www.baidu.com" )
}
< / script > < / script >
< style scoped > < style scoped >
. menu {
. simplebar - wrapper {
height : 100 vh ;
overflow : auto ;
}
. headerMenu {
display : flex ; display : flex ;
justify - content : center ; justify - content : center ;
align - items : center ; align - items : center ;
padding : 10 px 0 ; padding : 10 px 0 ;
width : 100 % ; width : 100 % ;
padding : 0 24 px ;
border - bottom : 1 px solid rgba ( 5 , 5 , 5 , 0.06 ) ; border - bottom : 1 px solid rgba ( 5 , 5 , 5 , 0.06 ) ;
position : fixed ; position : fixed ;
background - color : white ; background - color : white ;
@ -363,36 +382,12 @@ const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
z - index : 999 ; z - index : 999 ;
} }
. m enu> * {
. headerM enu> * {
margin : 0 24 px ; margin : 0 24 px ;
} }
: deep ( . slick - slide ) {
text - align : center ;
height : 100 vh ;
line - height : 160 px ;
background : # 364 d79 ;
overflow : hidden ;
}
: deep ( . slick - slide h3 ) {
color : # fff ;
}
. down_button {
position : absolute ;
bottom : 100 px ;
left : 50 % ;
border - style : hidden ;
transform : translateX ( - 50 % ) ;
}
. Typewriter__wrapper {
font - size : 100 px ;
font - family : 'Courier New' , Courier , monospace
}
. salon - light - text {
/* 作者名称 */
. author {
position : absolute ; position : absolute ;
display : inline - block ; display : inline - block ;
font - size : 100 px ; font - size : 100 px ;
@ -423,6 +418,45 @@ const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
} }
} }
. anchorDown {
position : absolute ;
bottom : 100 px ;
left : 50 % ;
border - style : hidden ;
transform : translateX ( - 50 % ) ;
}
. mainContainer {
display : flex ;
justify - content : center ;
padding - top : 60 px ;
background - color : rgba ( 5 , 5 , 5 , 0.08 ) ;
}
. mainContainer > : first - child {
width : 15 % ;
}
. mainContainer img {
width : 100 % ;
/* 图片宽度占满容器 */
aspect - ratio : 1 / 1 ;
/* 图片自适应容器并保持宽高比例 */
}
. main {
height : 500 px ;
width : 45 % ;
margin : 0 24 px ;
background - color : black ;
border : solid 1 px red ;
}
. rightBar {
width : 20 % ;
}
. button - container button { . button - container button {
margin : 24 px 6 px ; margin : 24 px 6 px ;
} }
@ -439,7 +473,12 @@ const img = ref("https://os.alipayobjects.com/rmsportal/QBnOOoLaAfKPirc.png")
. heatmap { . heatmap {
margin : 24 px 0 ; margin : 24 px 0 ;
} }
. statistic {
. statistic {
text - align : center ; text - align : center ;
} }
. sitebar {
width : 400 px ;
}
< / style > < / style >
panda
9 months ago