smallchill
6 years ago
parent
3dc3cb6481
commit
ea625db524
31 changed files with 533 additions and 790 deletions
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 254 KiB |
|
After Width: | Height: | Size: 310 KiB |
|
After Width: | Height: | Size: 190 KiB |
|
After Width: | Height: | Size: 136 KiB |
@ -0,0 +1,126 @@ |
||||
<template> |
||||
<div class="basic-block" |
||||
:style="styleName"> |
||||
<div class="box" |
||||
:style="boxStyleName"> |
||||
<router-link :to="to"> |
||||
<span v-text="text"></span> |
||||
<p v-text="dept"></p> |
||||
<i :class="icon"></i> |
||||
</router-link> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'basicBlock', |
||||
props: { |
||||
icon: { |
||||
type: String, |
||||
}, |
||||
background: { |
||||
type: String, |
||||
}, |
||||
to: { |
||||
type: Object, |
||||
default: () => { |
||||
return {} |
||||
} |
||||
}, |
||||
text: { |
||||
type: String, |
||||
}, |
||||
dept: { |
||||
type: String, |
||||
}, |
||||
time: { |
||||
type: [Number, String] |
||||
}, |
||||
gutter: { |
||||
type: [Number, String], |
||||
default: 5, |
||||
}, |
||||
color: { |
||||
type: String, |
||||
}, |
||||
width: { |
||||
type: [Number, String] |
||||
}, |
||||
height: { |
||||
type: [Number, String] |
||||
} |
||||
}, |
||||
computed: { |
||||
styleName () { |
||||
return { |
||||
animationDelay: `${this.time / 25}s`, |
||||
width: this.setPx(this.width), |
||||
height: this.setPx(this.height), |
||||
margin: this.setPx(this.gutter) |
||||
} |
||||
}, |
||||
boxStyleName () { |
||||
return { |
||||
backgroundColor: this.color, |
||||
backgroundImage: `url('${this.background}')`, |
||||
|
||||
} |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.basic-block { |
||||
opacity: 0; |
||||
|
||||
box-sizing: border-box; |
||||
color: #fff; |
||||
animation: mymove 1s; |
||||
animation-fill-mode: forwards; |
||||
.box { |
||||
position: relative; |
||||
box-sizing: border-box; |
||||
padding: 15px; |
||||
width: 100%; |
||||
height: 100%; |
||||
transition: all 1s; |
||||
background-size: cover; |
||||
&:hover { |
||||
transform: rotateY(360deg); |
||||
} |
||||
} |
||||
|
||||
a { |
||||
color: #fff; |
||||
} |
||||
span { |
||||
display: block; |
||||
font-size: 16px; |
||||
} |
||||
p { |
||||
width: 80%; |
||||
font-size: 10px; |
||||
color: #eee; |
||||
line-height: 22px; |
||||
} |
||||
i { |
||||
position: absolute; |
||||
bottom: 15px; |
||||
right: 15px; |
||||
font-size: 50px !important ; |
||||
} |
||||
@keyframes mymove { |
||||
from { |
||||
opacity: 0; |
||||
transform: scale(0); |
||||
} |
||||
to { |
||||
opacity: 1; |
||||
transform: scale(1); |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,87 @@ |
||||
<template> |
||||
<el-popover placement="bottom" |
||||
width="350" |
||||
trigger="click"> |
||||
|
||||
<el-tabs v-model="activeName"> |
||||
<el-tab-pane label="邮件(1)" |
||||
name="first"></el-tab-pane> |
||||
<el-tab-pane label="消息(2)" |
||||
name="second"></el-tab-pane> |
||||
<el-tab-pane label="通知" |
||||
name="third"></el-tab-pane> |
||||
</el-tabs> |
||||
<el-scrollbar style="height:300px"> |
||||
<avue-notice :data="data" |
||||
:option="option" |
||||
@page-change="pageChange"></avue-notice> |
||||
</el-scrollbar> |
||||
<div slot="reference"> |
||||
<el-badge is-dot> |
||||
<i class="el-icon-bell"></i> |
||||
</el-badge> |
||||
</div> |
||||
</el-popover> |
||||
</template> |
||||
|
||||
<script> |
||||
let list = [{ |
||||
img: 'https://avuejs.com/images/logo-bg.jpg', |
||||
title: '史蒂夫·乔布斯 关注了你', |
||||
subtitle: '05-08 15:08', |
||||
tag: '已经开始', |
||||
status: 0 |
||||
}, { |
||||
img: 'https://avuejs.com/images/logo-bg.jpg', |
||||
title: '斯蒂夫·沃兹尼亚克 关注了你', |
||||
subtitle: '05-08 15:08', |
||||
tag: '未开始', |
||||
status: 1 |
||||
}, { |
||||
img: 'https://avuejs.com/images/logo-bg.jpg', |
||||
title: '蒂姆·库克 关注了你', |
||||
subtitle: '05-08 15:08', |
||||
status: 3, |
||||
tag: '有错误' |
||||
}, { |
||||
img: 'https://avuejs.com/images/logo-bg.jpg', |
||||
title: '比尔·费尔南德斯 关注了你', |
||||
subtitle: '05-08 15:08', |
||||
status: 4, |
||||
tag: '已完成' |
||||
}]; |
||||
export default { |
||||
name: "top-notice", |
||||
data () { |
||||
return { |
||||
activeName: 'first', |
||||
option: { |
||||
props: { |
||||
img: 'img', |
||||
title: 'title', |
||||
subtitle: 'subtitle', |
||||
tag: 'tag', |
||||
status: 'status' |
||||
}, |
||||
}, |
||||
data: list, |
||||
} |
||||
}, |
||||
created () { |
||||
|
||||
}, |
||||
methods: { |
||||
pageChange (page, done) { |
||||
setTimeout(() => { |
||||
this.$message.success('页码' + page) |
||||
this.data = this.data.concat(list); |
||||
done(); |
||||
}, 1000) |
||||
|
||||
}, |
||||
} |
||||
}; |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
</style> |
||||
@ -0,0 +1,156 @@ |
||||
<template> |
||||
<basic-container> |
||||
<div class="wel"> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-platform-eleme" |
||||
text="开始菜单1" |
||||
time="1" |
||||
background="/img/bg/bg3.jpg" |
||||
color="#d56259"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-eleme" |
||||
text="开始菜单2" |
||||
time="2" |
||||
background="/img/bg/bg2.jpg" |
||||
color="#419ce7"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-delete-solid" |
||||
text="开始菜单3" |
||||
time="3" |
||||
color="#56b69b"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-delete" |
||||
text="开始菜单4" |
||||
time="4" |
||||
color="#d44858"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-tools" |
||||
text="开始菜单5" |
||||
time="5" |
||||
color="#3a1f7e"></basic-block> |
||||
<basic-block :width="410" |
||||
:height="height" |
||||
icon="el-icon-setting" |
||||
text="开始菜单6" |
||||
time="6" |
||||
background="/img/bg/bg1.jpg" |
||||
dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述" |
||||
color="#422829"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-user-solid" |
||||
text="开始菜单7" |
||||
time="7" |
||||
color="#613cbd"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-star-off" |
||||
text="开始菜单8" |
||||
time="8" |
||||
color="#da542e"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-goods" |
||||
text="开始菜单9" |
||||
time="9" |
||||
color="#2e8aef"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-circle-check" |
||||
text="开始菜单10" |
||||
time="10" |
||||
color="#3d17b8"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-platform" |
||||
text="开始菜单11" |
||||
time="11" |
||||
color="#e31462"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-fold" |
||||
text="开始菜单12" |
||||
time="12" |
||||
color="#d9532d"></basic-block> |
||||
<basic-block :width="410" |
||||
:height="height" |
||||
icon="el-icon-s-open" |
||||
text="开始菜单13" |
||||
time="13" |
||||
dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述" |
||||
color="#b72147"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-flag" |
||||
text="开始菜单14" |
||||
time="14" |
||||
color="#01a100"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-data" |
||||
text="开始菜单15" |
||||
time="15" |
||||
color="#0c56bf"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-grid" |
||||
text="开始菜单16" |
||||
time="16" |
||||
color="#0098a9"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-release" |
||||
text="开始菜单17" |
||||
time="17" |
||||
background="/img/bg/bg2.jpg" |
||||
color="#209bdf"></basic-block> |
||||
<basic-block :width="width" |
||||
:height="height" |
||||
icon="el-icon-s-home" |
||||
text="开始菜单18" |
||||
time="18" |
||||
background="/img/bg/bg3.jpg" |
||||
color="#603bbc"></basic-block> |
||||
<basic-block :width="515" |
||||
:height="height" |
||||
icon="el-icon-s-promotion" |
||||
text="开始菜单19" |
||||
time="19" |
||||
dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述" |
||||
color="#009bad"></basic-block> |
||||
<basic-block :width="515" |
||||
:height="height" |
||||
icon="el-icon-s-custom" |
||||
text="开始菜单20" |
||||
time="20" |
||||
background="/img/bg/bg4.jpg" |
||||
dept="这是一段很长的很长很长很长的描述这是一段很长的很长很长很长的描述" |
||||
color="#d74e2a"></basic-block> |
||||
</div> |
||||
</basic-container> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
data() { |
||||
return { |
||||
width: 200, |
||||
height: 120, |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.wel { |
||||
display: flex; |
||||
flex-wrap: wrap; |
||||
width: 1100px; |
||||
margin: 0 auto; |
||||
} |
||||
</style> |
||||
Loading…
Reference in new issue