85 lines
1.3 KiB
Vue
85 lines
1.3 KiB
Vue
<template>
|
|
<view :style="{height:more?'':height}" class="_divmore">
|
|
<slot></slot>
|
|
<view v-if="!more" class="_mark" @tap="showall" :style="{background:maskbg?'linear-gradient(0deg, '+maskbg+', transparent)':''}">
|
|
<view class="itm">»</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style scoped>
|
|
._divmore {
|
|
overflow: hidden;
|
|
display: block;
|
|
position: relative;
|
|
}
|
|
|
|
._mark {
|
|
position: absolute;
|
|
left: 0;
|
|
right: 0;
|
|
bottom: 0;
|
|
padding: 0;
|
|
margin: 0;
|
|
z-index: 1;
|
|
height: 3em;
|
|
display: flex;
|
|
align-items: flex-end;
|
|
justify-content: center;
|
|
}
|
|
|
|
._mark>.itm {
|
|
font-size: 2em;
|
|
color:var(--txt1);
|
|
animation: _slideDown 3s ease-in infinite;
|
|
}
|
|
|
|
@keyframes _slideDown {
|
|
0% {
|
|
transform: rotate(75deg) translateX(-1em);
|
|
opacity: 0;
|
|
}
|
|
12% {
|
|
transform: rotate(90deg) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
95% {
|
|
transform: rotate(90deg) translateX(0);
|
|
opacity: 1;
|
|
}
|
|
100% {
|
|
transform: rotate(110deg) translateX(0.5em);
|
|
opacity: 0;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<script>
|
|
export default {
|
|
emits: ['change'],
|
|
props: {
|
|
height: {
|
|
type: String,
|
|
default: '10em'
|
|
},
|
|
maskbg: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
more: false,
|
|
};
|
|
},
|
|
watch: {},
|
|
computed: {},
|
|
mounted() {},
|
|
methods: {
|
|
showall(){
|
|
this.more = true;
|
|
this.$emit('change', true);
|
|
}
|
|
}
|
|
}
|
|
</script> |