diff --git a/examples/app.vue b/examples/app.vue index c34ddfdff..065c61878 100644 --- a/examples/app.vue +++ b/examples/app.vue @@ -119,117 +119,6 @@ margin: 20px 0; } - .carbon-teaser { - border-radius: 0; - overflow: hidden; - - .el-dialog__header { - display: none; - } - - .el-dialog__body { - padding: 0; - display: flex; - justify-content: center; - position: relative; - background: #000; - } - - .carbon-teaser__main { - height: 100vh; - min-height: 600px; - } - - .carbon-teaser__close { - position: absolute; - width: 40px; - height: 40px; - top: 25px; - right: 45px; - text-align: center; - cursor: pointer; - opacity: .8; - transition: .2s ease-out; - - &::after, - &::before { - position: absolute; - content: ''; - display: inline-block; - width: 4px; - border-radius: 1px; - height: 40px; - background: #ff3737; - box-shadow: 1px 0 1px 0 rgba(255, 255, 255, .3) inset, -2px 0 1px 0 rgba(0, 0, 0, .1) inset; - transition: .2s ease-out; - } - - &::after { - transform: rotate(45deg); - } - - &::before { - transform: rotate(-45deg); - } - - &:hover { - opacity: 1; - - &::after, - &::before { - box-shadow: 2px 0 1px 0 rgba(255, 255, 255, .4) inset, -2px 0 1px 0 rgba(0, 0, 0, .1) inset, 0 0 10px 3px #ff1616; - } - } - - } - - .carbon-teaser__button { - position: absolute; - bottom: 12%; - display: block; - width: 400px; - height: 19.11%; - - [class*=carbon-teaser__more] { - position: absolute; - top: 0; - display: block; - width: 100%; - height: 100%; - cursor: pointer; - background-repeat: no-repeat; - background-position: center; - background-size: auto 80%; - transition: .2s ease-in; - } - - [class*=dark] { - background-image: url(~examples/assets/images/button-d-cn.png); - &.is-en { - background-image: url(~examples/assets/images/button-d-en.png); - } - } - - [class*=light] { - opacity: 0; - background-image: url(~examples/assets/images/button-l-cn.png); - &.is-en { - background-image: url(~examples/assets/images/button-l-en.png); - } - } - - &:hover { - [class*=light] { - opacity: 1; - } - - [class*=dark] { - opacity: 0; - } - } - } - } - @media (max-width: 1140px) { .container, .page-container { @@ -252,23 +141,6 @@ - - - - - - - -
-
@@ -281,19 +153,9 @@ export default { name: 'app', - data() { - return { - dialogVisible: false - }; - }, - computed: { lang() { return this.$route.path.split('/')[1] || 'zh-CN'; - }, - - hrefOfCarbonLearnMore() { - return this.lang === 'zh-CN' ? 'https://github.com/ElemeFE/element/issues/7236' : 'https://github.com/ElemeFE/element/issues/7237'; } }, @@ -330,10 +192,6 @@ document.documentElement.scrollTop = document.body.scrollTop = elm.offsetTop + 120; }, 50); } - }, - - handleDialogClose() { - localStorage.setItem('CARBON_TEASER_V2', 1); } }, @@ -341,15 +199,35 @@ this.localize(); this.renderAnchorHref(); this.goAnchor(); - - const intrigued = localStorage.getItem('CARBON_TEASER_V2'); - if (!intrigued) { - const img = new Image(); - img.onload = () => { - this.dialogVisible = true; - }; - img.src = 'https://i.loli.net/2017/09/27/59cb11edaa26d.jpg'; - } + setTimeout(() => { + const notified = localStorage.getItem('ALPHA_NOTIFIED'); + if (!notified) { + const h = this.$createElement; + const title = this.lang === 'zh-CN' + ? '2.0.0-alpha.1 发布' + : '2.0.0-alpha.1 released'; + const messages = this.lang === 'zh-CN' + ? ['点击', '这里', '查看详情'] + : ['Click ', 'here', ' to learn more']; + this.$notify.success({ + title, + duration: 0, + message: h('span', [ + messages[0], + h('a', { + attrs: { + target: '_blank', + href: `https://github.com/ElemeFE/element/issues/${ this.lang === 'zh-CN' ? '7304' : '7305' }` + } + }, messages[1]), + messages[2] + ]), + onClose() { + localStorage.setItem('ALPHA_NOTIFIED', 1); + } + }); + } + }, 3500); }, created() {