mirror of
https://gitee.com/ElemeFE/element.git
synced 2024-11-30 03:07:36 +08:00
Carousel: fix items hides up when data is asynchronously updated
This commit is contained in:
Leopoldthecoder
杨奕
parent
42849a89fe
commit
bc893b5051
@ -1,188 +0,0 @@
|
|||||||
<style>
|
|
||||||
.page-changelog {
|
|
||||||
padding-bottom: 100px;
|
|
||||||
|
|
||||||
.fr {
|
|
||||||
float: right;
|
|
||||||
padding: 0;
|
|
||||||
|
|
||||||
&.el-button {
|
|
||||||
transform: translateY(-3px);
|
|
||||||
}
|
|
||||||
|
|
||||||
a {
|
|
||||||
display: block;
|
|
||||||
padding: 10px 15px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover a {
|
|
||||||
color: #409EFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.heading {
|
|
||||||
font-size: 24px;
|
|
||||||
margin-bottom: 60px;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.timeline {
|
|
||||||
padding: 0;
|
|
||||||
padding-bottom: 10px;
|
|
||||||
position: relative;
|
|
||||||
color: #5e6d82;
|
|
||||||
|
|
||||||
> li {
|
|
||||||
position: relative;
|
|
||||||
padding-bottom: 15px;
|
|
||||||
list-style: none;
|
|
||||||
line-height: 1.8;
|
|
||||||
border: 1px solid #ddd;
|
|
||||||
border-radius: 4px;
|
|
||||||
|
|
||||||
&:not(:last-child) {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 30px 30px 15px;
|
|
||||||
|
|
||||||
ul {
|
|
||||||
padding: 0;
|
|
||||||
padding-top: 5px;
|
|
||||||
padding-left: 27px;
|
|
||||||
|
|
||||||
li {
|
|
||||||
padding-left: 0;
|
|
||||||
color: #555;
|
|
||||||
word-break: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
li::before {
|
|
||||||
content: '';
|
|
||||||
circle: 4px #fff;
|
|
||||||
border: solid 1px #333;
|
|
||||||
margin-right: -12px;
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
li li {
|
|
||||||
font-size: 16px;
|
|
||||||
list-style: none;
|
|
||||||
padding-left: 20px;
|
|
||||||
padding-bottom: 5px;
|
|
||||||
color: #333;
|
|
||||||
word-break: break-all;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
circle: 6px #333;
|
|
||||||
transform: translateX(-20px);
|
|
||||||
display: inline-block;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
i {
|
|
||||||
padding: 0 20px;
|
|
||||||
display: inline-block;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
margin:0;
|
|
||||||
padding: 15px 30px;
|
|
||||||
border-bottom: 1px solid #ddd;
|
|
||||||
font-size: 20px;
|
|
||||||
color: #333;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
a {
|
|
||||||
opacity: 1;
|
|
||||||
font-size: 20px;
|
|
||||||
float: none;
|
|
||||||
margin-left: 0;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 0;
|
|
||||||
margin-bottom: -10px;
|
|
||||||
font-size: 18px;
|
|
||||||
padding-left: 54px;
|
|
||||||
padding-top: 30px;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
em {
|
|
||||||
position: absolute;
|
|
||||||
right: 30px;
|
|
||||||
font-style: normal;
|
|
||||||
top: 23px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="page-changelog">
|
|
||||||
<div class="heading">
|
|
||||||
<el-button class="fr">
|
|
||||||
<a href="https://github.com/ElemeFE/element/releases" target="_blank">GitHub Releases</a>
|
|
||||||
</el-button>
|
|
||||||
Lista de cambios
|
|
||||||
</div>
|
|
||||||
<ul class="timeline" ref="timeline">
|
|
||||||
</ul>
|
|
||||||
<change-log ref="changeLog"></change-log>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import ChangeLog from '../../../CHANGELOG.es.md';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
components: {
|
|
||||||
ChangeLog
|
|
||||||
},
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
count: 3
|
|
||||||
};
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
const changeLog = this.$refs.changeLog;
|
|
||||||
const changeLogNodes = changeLog.$el.children;
|
|
||||||
let a = changeLogNodes[1].querySelector('a');
|
|
||||||
a && a.remove();
|
|
||||||
let release = changeLogNodes[1].textContent.trim();
|
|
||||||
let fragments = `<li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
|
||||||
|
|
||||||
for (let len = changeLogNodes.length, i = 2; i < len; i++) {
|
|
||||||
let node = changeLogNodes[i];
|
|
||||||
a = changeLogNodes[i].querySelector('a');
|
|
||||||
a && a.getAttribute('class') === 'header-anchor' && a.remove();
|
|
||||||
if (node.tagName !== 'H3') {
|
|
||||||
fragments += changeLogNodes[i].outerHTML;
|
|
||||||
} else {
|
|
||||||
release = changeLogNodes[i].textContent.trim();
|
|
||||||
fragments += `</li><li><h3><a href="https://github.com/ElemeFE/element/releases/tag/v${release}" target="_blank">${release}</a></h3>`;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
fragments = fragments.replace(/#(\d+)/g, '<a href="https://github.com/ElemeFE/element/issues/$1" target="_blank">#$1</a>');
|
|
||||||
fragments = fragments.replace(/@(\w+)/g, '<a href="https://github.com/$1" target="_blank">@$1</a>');
|
|
||||||
this.$refs.timeline.innerHTML = `${fragments}</li>`;
|
|
||||||
|
|
||||||
changeLog.$el.remove();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,288 +0,0 @@
|
|||||||
<style>
|
|
||||||
.page-component__scroll {
|
|
||||||
height: calc(100% - 80px);
|
|
||||||
margin-top: 80px;
|
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
|
||||||
overflow-x: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-component {
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
&.page-container {
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-component__nav {
|
|
||||||
width: 240px;
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
bottom: 0;
|
|
||||||
margin-top: 80px;
|
|
||||||
transition: padding-top .3s;
|
|
||||||
|
|
||||||
.el-scrollbar__wrap {
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-extended {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.side-nav {
|
|
||||||
height: 100%;
|
|
||||||
padding-top: 50px;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
padding-right: 0;
|
|
||||||
|
|
||||||
& > ul {
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-component__content {
|
|
||||||
padding-left: 270px;
|
|
||||||
padding-bottom: 100px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-top: 50px;
|
|
||||||
|
|
||||||
> {
|
|
||||||
h3 {
|
|
||||||
margin: 55px 0 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
table {
|
|
||||||
border-collapse: collapse;
|
|
||||||
width: 100%;
|
|
||||||
background-color: #fff;
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 45px;
|
|
||||||
line-height: 1.5em;
|
|
||||||
|
|
||||||
strong {
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
td, th {
|
|
||||||
border-bottom: 1px solid #d8d8d8;
|
|
||||||
padding: 15px;
|
|
||||||
max-width: 250px;
|
|
||||||
}
|
|
||||||
|
|
||||||
th {
|
|
||||||
text-align: left;
|
|
||||||
white-space: nowrap;
|
|
||||||
color: #666;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
td {
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
th:first-child, td:first-child {
|
|
||||||
padding-left: 10px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
ul:not(.timeline) {
|
|
||||||
margin: 10px 0;
|
|
||||||
padding: 0 0 0 20px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #5e6d82;
|
|
||||||
line-height: 2em;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-component-up {
|
|
||||||
background-color: #fff;
|
|
||||||
position: fixed;
|
|
||||||
right: 100px;
|
|
||||||
bottom: 150px;
|
|
||||||
size: 40px;
|
|
||||||
border-radius: 20px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: .3s;
|
|
||||||
box-shadow: 0 0 6px rgba(0,0,0, .12);
|
|
||||||
|
|
||||||
i {
|
|
||||||
color: #409EFF;
|
|
||||||
display: block;
|
|
||||||
line-height: 40px;
|
|
||||||
text-align: center;
|
|
||||||
font-size: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.hover {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.back-top-fade-enter,
|
|
||||||
.back-top-fade-leave-active {
|
|
||||||
transform: translateY(-30px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.page-component {
|
|
||||||
.page-component__nav {
|
|
||||||
width: 100%;
|
|
||||||
position: static;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
.side-nav {
|
|
||||||
padding-top: 0;
|
|
||||||
padding-left: 50px;
|
|
||||||
}
|
|
||||||
.page-component__content {
|
|
||||||
padding-left: 10px;
|
|
||||||
padding-right: 10px;
|
|
||||||
}
|
|
||||||
.content {
|
|
||||||
padding-top: 0;
|
|
||||||
}
|
|
||||||
.content > table {
|
|
||||||
overflow: auto;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
.page-component-up {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<el-scrollbar class="page-component__scroll" ref="componentScrollBar">
|
|
||||||
<div class="page-container page-component">
|
|
||||||
<el-scrollbar class="page-component__nav">
|
|
||||||
<side-nav :data="navsData[lang]" :base="`/${ lang }/component`"></side-nav>
|
|
||||||
</el-scrollbar>
|
|
||||||
<div class="page-component__content">
|
|
||||||
<router-view class="content"></router-view>
|
|
||||||
<footer-nav></footer-nav>
|
|
||||||
</div>
|
|
||||||
<transition name="back-top-fade">
|
|
||||||
<div
|
|
||||||
class="page-component-up"
|
|
||||||
:class="{ 'hover': hover }"
|
|
||||||
v-show="showBackToTop"
|
|
||||||
@mouseenter="hover = true"
|
|
||||||
@mouseleave="hover = false"
|
|
||||||
@click="toTop">
|
|
||||||
<i class="el-icon-caret-top"></i>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</el-scrollbar>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import bus from '../../bus';
|
|
||||||
import navsData from '../../nav.config.json';
|
|
||||||
import throttle from 'throttle-debounce/throttle';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lang: this.$route.meta.lang,
|
|
||||||
navsData,
|
|
||||||
hover: false,
|
|
||||||
showBackToTop: false,
|
|
||||||
scrollTop: 0,
|
|
||||||
showHeader: true,
|
|
||||||
componentScrollBar: null,
|
|
||||||
componentScrollBoxElement: null
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
'$route.path'() {
|
|
||||||
// 触发伪滚动条更新
|
|
||||||
this.componentScrollBox.scrollTop = 0;
|
|
||||||
this.$nextTick(() => {
|
|
||||||
this.componentScrollBar.update();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
renderAnchorHref() {
|
|
||||||
if (/changelog/g.test(location.href)) return;
|
|
||||||
const anchors = document.querySelectorAll('h2 a,h3 a');
|
|
||||||
const basePath = location.href.split('#').splice(0, 2).join('#');
|
|
||||||
|
|
||||||
[].slice.call(anchors).forEach(a => {
|
|
||||||
const href = a.getAttribute('href');
|
|
||||||
a.href = basePath + href;
|
|
||||||
});
|
|
||||||
},
|
|
||||||
|
|
||||||
goAnchor() {
|
|
||||||
if (location.href.match(/#/g).length > 1) {
|
|
||||||
const anchor = location.href.match(/#[^#]+$/g);
|
|
||||||
if (!anchor) return;
|
|
||||||
const elm = document.querySelector(anchor[0]);
|
|
||||||
if (!elm) return;
|
|
||||||
|
|
||||||
setTimeout(_ => {
|
|
||||||
this.componentScrollBox.scrollTop = elm.offsetTop;
|
|
||||||
}, 50);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
toTop() {
|
|
||||||
this.hover = false;
|
|
||||||
this.showBackToTop = false;
|
|
||||||
this.componentScrollBox.scrollTop = 0;
|
|
||||||
},
|
|
||||||
|
|
||||||
handleScroll() {
|
|
||||||
const scrollTop = this.componentScrollBox.scrollTop;
|
|
||||||
this.showBackToTop = scrollTop >= 0.5 * document.body.clientHeight;
|
|
||||||
if (this.showHeader !== this.scrollTop > scrollTop) {
|
|
||||||
this.showHeader = this.scrollTop > scrollTop;
|
|
||||||
}
|
|
||||||
if (scrollTop === 0) {
|
|
||||||
this.showHeader = true;
|
|
||||||
}
|
|
||||||
if (!this.navFaded) {
|
|
||||||
bus.$emit('fadeNav');
|
|
||||||
}
|
|
||||||
this.scrollTop = scrollTop;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
created() {
|
|
||||||
bus.$on('navFade', val => {
|
|
||||||
this.navFaded = val;
|
|
||||||
});
|
|
||||||
window.addEventListener('hashchange', () => {
|
|
||||||
if (location.href.match(/#/g).length < 2) {
|
|
||||||
document.documentElement.scrollTop = document.body.scrollTop = 0;
|
|
||||||
this.renderAnchorHref();
|
|
||||||
} else {
|
|
||||||
this.goAnchor();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
this.componentScrollBar = this.$refs.componentScrollBar;
|
|
||||||
this.componentScrollBox = this.componentScrollBar.$el.querySelector('.el-scrollbar__wrap');
|
|
||||||
this.throttledScrollHandler = throttle(300, this.handleScroll);
|
|
||||||
this.componentScrollBox.addEventListener('scroll', this.throttledScrollHandler);
|
|
||||||
this.renderAnchorHref();
|
|
||||||
this.goAnchor();
|
|
||||||
document.body.classList.add('is-component');
|
|
||||||
},
|
|
||||||
destroyed() {
|
|
||||||
document.body.classList.remove('is-component');
|
|
||||||
},
|
|
||||||
beforeDestroy() {
|
|
||||||
this.componentScrollBox.removeEventListener('scroll', this.throttledScrollHandler);
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,82 +0,0 @@
|
|||||||
<style scoped>
|
|
||||||
.cards {
|
|
||||||
margin: 30px 0 70px;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
background: #fbfcfd;
|
|
||||||
height: 204px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 40px auto 25px;
|
|
||||||
width: 80px;
|
|
||||||
height: 80px;
|
|
||||||
}
|
|
||||||
h4 {
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1f2d3d;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
span {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #99a9bf;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h2>Disciplinas de diseño</h2>
|
|
||||||
<el-row :gutter="14" class="cards">
|
|
||||||
<el-col :xs="12" :sm="6">
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/consistency.png" alt="Consistency">
|
|
||||||
<h4>Consistencia</h4>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="6">
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/feedback.png" alt="Feedback">
|
|
||||||
<h4>Comentarios</h4>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="6">
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/efficiency.png" alt="Efficiency">
|
|
||||||
<h4>Eficiencia</h4>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="12" :sm="6">
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/controllability.png" alt="Controllability">
|
|
||||||
<h4>Control</h4>
|
|
||||||
<span></span>
|
|
||||||
</div>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
<h3>Consistencia</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Consistente con la vida real: </strong>en línea con el proceso y la vida real, y cumple con los idiomas y hábitos a los que los usuarios están acostumbrados.</li>
|
|
||||||
<li><strong>Consistente dentro de la interfaz: </strong>todos los elementos deben ser consistentes, como: estilo de diseño, iconos y texto, posición de los elementos, etc.</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Comentarios</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Comentarios sobre la operación: </strong>Permite a los usuarios percibir claramente las operaciones mediante actualizaciones de estilo y efectos interactivos.</li>
|
|
||||||
<li><strong>Comentarios visuales: </strong>Refleja el estado actual al actualizar o reorganizar los elementos de la página.</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Eficiencia</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Simplifica el proceso: </strong>Mantiene el proceso operativo simple e intuitivo.</li>
|
|
||||||
<li><strong>Bien definido y claro: </strong>Expresa las intenciones claramente para que los usuarios puedan comprender y tomar decisiones rápidamente.</li>
|
|
||||||
<li><strong>Fácil de identificar: </strong>La interfaz debe ser sencilla, lo que permitirá a los usuarios a identificar y liberarlos de la memorización y recuerdos.</li>
|
|
||||||
</ul>
|
|
||||||
<h3>Control</h3>
|
|
||||||
<ul>
|
|
||||||
<li><strong>Toma de decisiones: </strong>Brindar consejos sobres las operaciones es aceptable, pero no tomar desiciones para los usuarios.</li>
|
|
||||||
<li><strong>Consecuencias controladas: </strong>Los usuarios deben tener la libertad de operar, incluida la cancelación, el aborto o la terminación de las operaciones actuales.</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
<style>
|
|
||||||
.page-guide {
|
|
||||||
padding: 55px 30px 95px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.content {
|
|
||||||
padding-left: 25px;
|
|
||||||
margin-left: -1px;
|
|
||||||
h2 {
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: 22px;
|
|
||||||
font-weight: normal;
|
|
||||||
margin: 0 0 30px;
|
|
||||||
color: #1f2d3d;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
line-height: 1.6;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #5e6d82;
|
|
||||||
}
|
|
||||||
ul {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
li {
|
|
||||||
font-size: 14px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
color: #99a9bf;
|
|
||||||
list-style: none;
|
|
||||||
|
|
||||||
&:before {
|
|
||||||
content: '';
|
|
||||||
display: inline-block;
|
|
||||||
width: 4px;
|
|
||||||
height: @width;
|
|
||||||
border-radius: 50%;
|
|
||||||
vertical-align: middle;
|
|
||||||
background-color: #5e6d82;
|
|
||||||
margin-right: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
strong {
|
|
||||||
color: #5e6d82;
|
|
||||||
font-weight: 400;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.page-guide {
|
|
||||||
.content {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="page-container page-guide">
|
|
||||||
<el-row>
|
|
||||||
<el-col :xs="24" :sm="5">
|
|
||||||
<side-nav :data="navsData" :base="`/${ lang }/guide`"></side-nav>
|
|
||||||
</el-col>
|
|
||||||
<el-col :xs="24" :sm="19">
|
|
||||||
<router-view class="content"></router-view>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
lang: this.$route.meta.lang,
|
|
||||||
navsData: [
|
|
||||||
{
|
|
||||||
path: '/design',
|
|
||||||
name: 'Disciplinas de diseño'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
path: '/nav',
|
|
||||||
name: 'Navegación'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
};
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,323 +0,0 @@
|
|||||||
<style scoped>
|
|
||||||
.banner {
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
.banner-desc {
|
|
||||||
padding-top: 20px;
|
|
||||||
|
|
||||||
h1 {
|
|
||||||
font-size: 34px;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 48px;
|
|
||||||
color: #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
font-size: 18px;
|
|
||||||
line-height: 28px;
|
|
||||||
color: #888;
|
|
||||||
margin: 10px 0 5px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.jumbotron {
|
|
||||||
width: 890px;
|
|
||||||
height: 465px;
|
|
||||||
margin: 30px auto 100px;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
div {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background-color: transparent;
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
position: absolute;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-cloud-1 {
|
|
||||||
right: 0;
|
|
||||||
top: 0;
|
|
||||||
height: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-plant-2 {
|
|
||||||
left: 60px;
|
|
||||||
top: 200px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-web {
|
|
||||||
height: 385px;
|
|
||||||
top: 35px;
|
|
||||||
left: 110px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-cloud-2 {
|
|
||||||
left: 0;
|
|
||||||
top: 50px;
|
|
||||||
height: 55px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-compo-1 {
|
|
||||||
left: 94px;
|
|
||||||
height: 90px;
|
|
||||||
top: 220px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-compo-2 {
|
|
||||||
right: 73px;
|
|
||||||
top: 60px;
|
|
||||||
height: 124px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-compo-3 {
|
|
||||||
right: 42px;
|
|
||||||
top: 200px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-plant-1 {
|
|
||||||
bottom: 0;
|
|
||||||
left: 30px;
|
|
||||||
height: 185px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-figure-1 {
|
|
||||||
bottom: 0;
|
|
||||||
right: 180px;
|
|
||||||
height: 140px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.jumbotron-figure-2 {
|
|
||||||
bottom: 0;
|
|
||||||
right: 10px;
|
|
||||||
height: 68px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cards {
|
|
||||||
margin: 0 auto 110px;
|
|
||||||
width: 1140px;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
@utils-clearfix;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 -11px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: 33.33333%;
|
|
||||||
padding: 0 19px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
float: left;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 160px;
|
|
||||||
height: 120px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
height: 430px;
|
|
||||||
width: 100%;
|
|
||||||
background:#ffffff;
|
|
||||||
border:1px solid #eaeefb;
|
|
||||||
border-radius:5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
transition: all .3s ease-in-out;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 66px auto 60px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1f2f3d;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #99a9bf;
|
|
||||||
padding: 0 25px;
|
|
||||||
line-height: 20px;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
height: 53px;
|
|
||||||
line-height: 52px;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #409EFF;
|
|
||||||
text-align: center;
|
|
||||||
border: 0;
|
|
||||||
border-top: 1px solid #eaeefb;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
width: 100%;
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
background-color: #fff;
|
|
||||||
border-radius: 0 0 5px 5px;
|
|
||||||
transition: all .3s;
|
|
||||||
text-decoration: none;
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: #fff;
|
|
||||||
background: #409EFF;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
&:hover {
|
|
||||||
bottom: 6px;
|
|
||||||
box-shadow: 0 6px 18px 0 rgba(232,237,250,0.50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 1140px) {
|
|
||||||
.cards {
|
|
||||||
width: 100%;
|
|
||||||
.container {
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.banner .container {
|
|
||||||
width: 100%;
|
|
||||||
box-sizing: border-box;
|
|
||||||
}
|
|
||||||
.banner img {
|
|
||||||
right: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 1000px) {
|
|
||||||
.banner .container {
|
|
||||||
img {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.jumbotron {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@media (max-width: 768px) {
|
|
||||||
.cards {
|
|
||||||
li {
|
|
||||||
width: 80%;
|
|
||||||
margin: 0 auto 20px;
|
|
||||||
float: none;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
height: auto;
|
|
||||||
padding-bottom: 54px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.banner-stars {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
.banner-desc {
|
|
||||||
#line2 {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 32px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<div class="banner">
|
|
||||||
<div class="banner-desc">
|
|
||||||
<h1>Un kit de interfaz de usuario para la web</h1>
|
|
||||||
<p>Element, una librería de componentes basada en Vue 2.0 para desarrolladores, diseñadores y jefes de producto</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="jumbotron">
|
|
||||||
<div>
|
|
||||||
<img class="jumbotron-plant-2" src="~examples/assets/images/plant-2.png" alt="">
|
|
||||||
<img class="jumbotron-web" src="~examples/assets/images/web.png" alt="">
|
|
||||||
<img class="jumbotron-plant-1" src="~examples/assets/images/plant-1.png" alt="">
|
|
||||||
<img class="jumbotron-figure-1" src="~examples/assets/images/figure-1.png" alt="">
|
|
||||||
<img class="jumbotron-figure-2" src="~examples/assets/images/figure-2.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div data-hover-layer="0">
|
|
||||||
<img class="jumbotron-cloud-1" src="~examples/assets/images/cloud-1.png" alt="">
|
|
||||||
<img class="jumbotron-cloud-2" src="~examples/assets/images/cloud-2.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div data-hover-layer="1">
|
|
||||||
<img class="jumbotron-compo-1" src="~examples/assets/images/compo-1.png" alt="">
|
|
||||||
<img class="jumbotron-compo-2" src="~examples/assets/images/compo-2.png" alt="">
|
|
||||||
<img class="jumbotron-compo-3" src="~examples/assets/images/compo-3.png" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="cards">
|
|
||||||
<ul class="container">
|
|
||||||
<li>
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/guide.png" alt="">
|
|
||||||
<h3>Guía</h3>
|
|
||||||
<p>Entender los líneamientos de diseño, ayudando a diseñadores a crear productos que sean lógicos, razonablemente estructurados y fáciles de usar.</p>
|
|
||||||
<router-link
|
|
||||||
active-class="active"
|
|
||||||
to="/es/guide/design"
|
|
||||||
exact>Ver detalle
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/component.png" alt="">
|
|
||||||
<h3>Componentes</h3>
|
|
||||||
<p>Experimenta la interacción al pasear con los ejemplos de los componentes. Utiliza el código encapsulado para mejorar la eficiencia en el desarrollo.</p>
|
|
||||||
<router-link
|
|
||||||
active-class="active"
|
|
||||||
to="/es/component/layout"
|
|
||||||
exact>Ver detalle
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li>
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/resource.png" alt="">
|
|
||||||
<h3>Recursos</h3>
|
|
||||||
<p>Descarga los recursos de diseño relevantes para dar forma a un prototipo o borrador, aumentando la eficiencia del diseño.</p>
|
|
||||||
<router-link
|
|
||||||
active-class="active"
|
|
||||||
to="/es/resource"
|
|
||||||
exact>Ver detalle
|
|
||||||
</router-link>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
import { Hover } from 'perspective.js';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
mounted() {
|
|
||||||
new Hover('.jumbotron', { // eslint-disable-line
|
|
||||||
max: 3,
|
|
||||||
scale: 1,
|
|
||||||
perspective: 700,
|
|
||||||
layers: [{
|
|
||||||
multiple: 0.01,
|
|
||||||
reverseTranslate: true
|
|
||||||
}, {
|
|
||||||
multiple: 0.02,
|
|
||||||
reverseTranslate: true
|
|
||||||
}]
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,166 +0,0 @@
|
|||||||
<style scoped>
|
|
||||||
h3 {
|
|
||||||
margin-bottom: 15px;
|
|
||||||
}
|
|
||||||
.block {
|
|
||||||
margin-bottom: 55px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
margin: 0 0 15px;
|
|
||||||
}
|
|
||||||
.nav-demos {
|
|
||||||
p {
|
|
||||||
margin-bottom: 50px;
|
|
||||||
}
|
|
||||||
h5 {
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
padding: 15px;
|
|
||||||
background-color: #F9FAFC;
|
|
||||||
width: 100%;
|
|
||||||
margin-bottom: 15px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.dialog-img {
|
|
||||||
position: fixed;
|
|
||||||
overflow: auto;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 1000;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
outline: 0;
|
|
||||||
|
|
||||||
.imgWrap {
|
|
||||||
margin: 0 auto;
|
|
||||||
position: relative;
|
|
||||||
top: 100px;
|
|
||||||
padding-bottom: 50px;
|
|
||||||
}
|
|
||||||
img {
|
|
||||||
display: block;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.mask {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
left: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background-color: #373737;
|
|
||||||
background-color: rgba(55, 55, 55, 0.6);
|
|
||||||
height: 100%;
|
|
||||||
z-index: 1000;
|
|
||||||
}
|
|
||||||
.zoom-enter-active,
|
|
||||||
.zoom-leave-active {
|
|
||||||
transition: transform .3s cubic-bezier(0.78, 0.14, 0.15, 0.86), opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
||||||
}
|
|
||||||
.zoom-enter,
|
|
||||||
.zoom-leave-active {
|
|
||||||
transform: scale(0.3);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
.fade-enter-active,
|
|
||||||
.fade-leave-active {
|
|
||||||
transition: opacity .3s cubic-bezier(0.78, 0.14, 0.15, 0.86);
|
|
||||||
}
|
|
||||||
.fade-enter,
|
|
||||||
.fade-leave-active {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div>
|
|
||||||
<h2>Navegación</h2>
|
|
||||||
<div class="block">
|
|
||||||
<p>La navegación se centra en resolver los problemas de los usuarios sobre donde ir y como llegar ahí. En general, se puede categorizar en 'navegación de barra lateral' y 'navegación superior'.</p>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<h3>Elige la navegación correcta</h3>
|
|
||||||
<p>Una navegación apropiada provee a los usuarios una mejor experiencia, mientras que una inapropiada genera confusión. Esta es la diferencia entre la navegación de la barra lateral y la navegación superior.</p>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<h3>Navegación lateral</h3>
|
|
||||||
<el-row :gutter="20">
|
|
||||||
<el-col :span="9">
|
|
||||||
<p>Fija la navegación del lado izquierdo, esto permitirá una mejor visibilidad, lo que facilitará el cambio de pagina. En este caso, el área superior de la pagina contiene herramientas comúnmente utilizadas, por ejemplo, barra de búsqueda, botón de ayuda, botón de aviso, etc. Adecuado para sitios web de gestión.</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="15" class="nav-demos">
|
|
||||||
<img src="~examples/assets/images/navbar_1.png" alt="Categorías de Nivel 1" @click="enlarge(846, $event)">
|
|
||||||
<h5>Categorías de Nivel 1</h5>
|
|
||||||
<p>Adecuado para sitios con una estructura simple con un solo nivel de páginas. No se necesita un 'breadcrumb'.</p>
|
|
||||||
<img src="~examples/assets/images/navbar_2.png" alt="Categorías de Nivel 2" @click="enlarge(846, $event)">
|
|
||||||
<h5>Categorías de Nivel 2</h5>
|
|
||||||
<p>La barra lateral muestra hasta dos niveles de navegación. Se recomienda utilizar un 'breadcrumb' en combinación con la navegación de segundo nivel, lo que facilita la localización y navegación de los usuarios.</p>
|
|
||||||
<img src="~examples/assets/images/navbar_3.png" alt="Categorías de Nivel 3" @click="enlarge(846, $event)">
|
|
||||||
<h5>Categorías de Nivel 3</h5>
|
|
||||||
<p>Adecuado para sitios web bastante complejos. La barra lateral izquierda contiene navegación de primer nivel, y la columna central muestra navegación de segundo nivel u otras opciones de utilidad.</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<div class="block">
|
|
||||||
<h3>Navegación superior</h3>
|
|
||||||
<el-row>
|
|
||||||
<el-col :span="10">
|
|
||||||
<p>Se ajusta de acuerdo a la exploración normal de arriba a abajo, lo que hace que las cosas sean más naturales. La cantidad de navegación y la longitud del texto están limitadas al ancho de la parte superior.</p>
|
|
||||||
</el-col>
|
|
||||||
<el-col :span="14" class="nav-demos">
|
|
||||||
<img src="~examples/assets/images/navbar_0.png" alt="" @click="enlarge(846, $event)">
|
|
||||||
<p>Adecuado para sitios con pocas navegaciones y grandes trozos.</p>
|
|
||||||
</el-col>
|
|
||||||
</el-row>
|
|
||||||
</div>
|
|
||||||
<transition name="fade">
|
|
||||||
<div class="mask" v-show="showDialog" @click="showDialog = false"></div>
|
|
||||||
</transition>
|
|
||||||
<transition name="zoom">
|
|
||||||
<div class="dialog-img" :style='imgWrapStyle' v-show="showDialog" @click="showDialog = false">
|
|
||||||
<div class="imgWrap" :style="imgStyle">
|
|
||||||
<img :src="imgUrl" alt="">
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</transition>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
<script>
|
|
||||||
export default {
|
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
imgUrl: '',
|
|
||||||
imgBound: {},
|
|
||||||
showDialog: false,
|
|
||||||
imgStyle: {},
|
|
||||||
imgWrapStyle: {}
|
|
||||||
};
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
showDialog(val) {
|
|
||||||
document.body.style.overflow = val ? 'hidden' : '';
|
|
||||||
}
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
enlarge(imgWidth, ev) {
|
|
||||||
var imgNode = ev.target;
|
|
||||||
// var bound = imgNode.getBoundingClientRect();
|
|
||||||
var offset = {};
|
|
||||||
var doc = document;
|
|
||||||
|
|
||||||
offset.left = (doc.body.scrollWidth - imgWidth) / 2;
|
|
||||||
offset.top = 100;
|
|
||||||
|
|
||||||
this.imgUrl = imgNode.src;
|
|
||||||
this.imgBound = imgNode.getBoundingClientRect();
|
|
||||||
|
|
||||||
this.imgWrapStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
|
||||||
// this.imgStyle.transformOrigin = `${ev.clientX}px ${ev.clientY}px`;
|
|
||||||
this.imgStyle.width = imgWidth + 'px';
|
|
||||||
this.showDialog = true;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
@ -1,160 +0,0 @@
|
|||||||
<style scoped>
|
|
||||||
.page-resource {
|
|
||||||
padding-top: 55px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
.resource-placeholder {
|
|
||||||
margin: 50px auto 100px;
|
|
||||||
text-align: center;
|
|
||||||
|
|
||||||
img {
|
|
||||||
width: 150px;
|
|
||||||
}
|
|
||||||
|
|
||||||
h4 {
|
|
||||||
margin: 20px 0 16px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #1f2f3d;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
p {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 14px;
|
|
||||||
color: #99a9bf;
|
|
||||||
line-height: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.cards {
|
|
||||||
margin: 35px auto 110px;
|
|
||||||
|
|
||||||
.container {
|
|
||||||
@utils-clearfix;
|
|
||||||
padding: 0;
|
|
||||||
margin: 0 -11px;
|
|
||||||
width: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
li {
|
|
||||||
width: 33.33333%;
|
|
||||||
padding: 0 11px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
float: left;
|
|
||||||
list-style: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h2 {
|
|
||||||
font-size: 28px;
|
|
||||||
margin: 0;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #5e6d82;
|
|
||||||
}
|
|
||||||
.card {
|
|
||||||
height: 394px;
|
|
||||||
width: 100%;
|
|
||||||
background:#ffffff;
|
|
||||||
border:1px solid #eaeefb;
|
|
||||||
border-radius:5px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
text-align: center;
|
|
||||||
position: relative;
|
|
||||||
transition: bottom .3s;
|
|
||||||
bottom: 0;
|
|
||||||
|
|
||||||
img {
|
|
||||||
margin: 75px auto 35px;
|
|
||||||
height: 87px;
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
margin: 0 0 10px;
|
|
||||||
font-size: 18px;
|
|
||||||
color: #1f2f3d;
|
|
||||||
font-weight: normal;
|
|
||||||
height: 22px;
|
|
||||||
}
|
|
||||||
p {
|
|
||||||
font-size: 14px;
|
|
||||||
color: #99a9bf;
|
|
||||||
padding: 0 30px;
|
|
||||||
margin: 0;
|
|
||||||
line-height: 1.6;
|
|
||||||
}
|
|
||||||
a {
|
|
||||||
height: 42px;
|
|
||||||
width: 190px;
|
|
||||||
display: inline-block;
|
|
||||||
line-height: @height;
|
|
||||||
font-size: 14px;
|
|
||||||
background-color: #409EFF;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
border: 0;
|
|
||||||
padding: 0;
|
|
||||||
cursor: pointer;
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: all .3s;
|
|
||||||
text-decoration: none;
|
|
||||||
margin-top: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@media (max-width: 850px) {
|
|
||||||
.cards {
|
|
||||||
li {
|
|
||||||
max-width: 500px;
|
|
||||||
float: none;
|
|
||||||
margin: 10px auto 30px;
|
|
||||||
width: 80%;
|
|
||||||
.card {
|
|
||||||
height: auto;
|
|
||||||
padding-bottom: 20px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
h3 {
|
|
||||||
height: auto;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<template>
|
|
||||||
<div class="page-container page-resource">
|
|
||||||
<h2>Recursos</h2>
|
|
||||||
<!--<div class="resource-placeholder">-->
|
|
||||||
<!--<img src="~examples/assets/images/resource-placeholder.svg" alt="">-->
|
|
||||||
<!--<h4>En construcción</h4>-->
|
|
||||||
<!--<p>Se están desarrollando más recursos</p>-->
|
|
||||||
<!--</div>-->
|
|
||||||
|
|
||||||
<p>Se están desarrollando más recursos</p>
|
|
||||||
<div class="cards">
|
|
||||||
<ul class="container">
|
|
||||||
<!--<li>-->
|
|
||||||
<!--<div class="card">-->
|
|
||||||
<!--<img src="~examples/assets/images/Axure-Components.svg" alt="">-->
|
|
||||||
<!--<h3>Componetes de Axure</h3>-->
|
|
||||||
<!--<p>Mediante la importación de elementos de interfaz de usuario en Axure, se puede aplicar fácilmente a todos los componentes que proporcionamos durante el diseño de interacción.</p>-->
|
|
||||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element_Components_v1.1.0.rplib">Descarga</a>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</li>-->
|
|
||||||
<li>
|
|
||||||
<div class="card">
|
|
||||||
<img src="~examples/assets/images/Sketch-Template.svg" alt="">
|
|
||||||
<h3>Plantilla de Sketch</h3>
|
|
||||||
<p>Aplica componentes de la plantilla Element para que pueda mejorarla eficiencia del diseño manteniendo un estilo visual unificado.</p>
|
|
||||||
<a href="https://github.com/ElementUI/Resources/raw/master/Element%20UI%20Kit_v2.0.sketch">Descarga</a>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<!--<li>-->
|
|
||||||
<!--<div class="card">-->
|
|
||||||
<!--<img src="~examples/assets/images/Module.svg" alt="">-->
|
|
||||||
<!--<h3>Documentación de diseño de interacción</h3>-->
|
|
||||||
<!--<p>Eche un vistazo más de cerca a la documentación de diseño de interacción. Conoce más detalles de cada componente desde una perspectiva microcósmica.</p>-->
|
|
||||||
<!--<a href="https://github.com/ElementUI/Resources/raw/master/Element%20Components%20Documentation.zip">Descarga</a>-->
|
|
||||||
<!--</div>-->
|
|
||||||
<!--</li>-->
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
@ -195,6 +195,7 @@ export default {
|
|||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
let length = this.items.length;
|
let length = this.items.length;
|
||||||
|
const oldIndex = this.activeIndex;
|
||||||
if (index < 0) {
|
if (index < 0) {
|
||||||
this.activeIndex = length - 1;
|
this.activeIndex = length - 1;
|
||||||
} else if (index >= length) {
|
} else if (index >= length) {
|
||||||
@ -202,6 +203,9 @@ export default {
|
|||||||
} else {
|
} else {
|
||||||
this.activeIndex = index;
|
this.activeIndex = index;
|
||||||
}
|
}
|
||||||
|
if (oldIndex === this.activeIndex) {
|
||||||
|
this.resetItemPosition(oldIndex);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
|
|
||||||
prev() {
|
prev() {
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user