deep-stack/cosmos-explorer
4
0
Fork 0
forked from LaconicNetwork/cosmos-explorer
Code Pull Requests Activity

open source

Browse Source
This commit is contained in:
dingyi
2021-03-15 01:14:32 +08:00
commit f4f0d29a40
208 changed files with 24908 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/DataTable.vue
+100
View File
@@ -0,0 +1,100 @@
<!--
* @Description:
* @Autor: dingyi
* @Date: 2020-03-22 19:19:39
* @LastEditors: dingyi
* @LastEditTime: 2020-07-18 16:30:27
* @FilePath: \look-web\src\components\DataTable.vue
-->
<script>
import DataTableColumn from "./DataTableColumn";
export default {
props: {
defaultSort: {
default() {
return {};
}
},
tableRowClassName: {
default() {
return null;
}
},
rowKey: {
default: null
},
columns: {
default() {
return [];
}
},
datas: {
default: null
},
tableSize: {
default: "small"
},
loading: {
default: false
}
},
components: {
DataTableColumn
}
};
</script>
<template>
<div style="overflow: auto;-webkit-overflow-scrolling: touch;">
<el-table
style="min-width: 600px;"
border
:size="tableSize"
:data="datas"
:default-sort="defaultSort"
v-show="columns.length > 0"
:row-class-name="tableRowClassName"
:header-cell-style="{ background: '#f1f5f7' }"
>
<el-table-column label="#" type="index" width="60"></el-table-column>
<el-table-column
v-for="(item, index) in columns"
:label="item.label"
:align="item.align"
:key="item[rowKey] || index"
:width="item.width"
:sortable="item.sortable"
:sort-method="item['sort-method']"
>
<template slot-scope="scope">
<data-table-column v-if="item.render" :column="item" :scope="scope" :render="item.render"></data-table-column>
<span v-else v-text="scope.row[item.prop]"></span>
</template>
</el-table-column>
<div
slot="empty"
class="datatable-empty"
v-loading="loading"
element-loading-text="Loading..."
>
<el-image style="width: 100px; height: 100px" src="/static/icon/empty3.png" fit="contain"></el-image>
<div style="line-height: 1;">No Data</div>
</div>
</el-table>
</div>
</template>
<style scoped>
.datatable-empty {
text-align: center;
padding: 80px 0;
}
.datatable-empty-icon {
font-size: 64px;
}
.datatable-paging-wrap {
margin-top: 20px;
}
</style>
src/components/DataTableColumn.vue
+18
View File
@@ -0,0 +1,18 @@
<script>
export default {
functional: true,
render: (h, context) => {
return context.props.render(h, context, context.props.scope);
},
props: {
scope: {
default() {
return {};
}
},
render: {
type: Function
}
}
};
</script>
src/components/Empty.vue
+26
View File
@@ -0,0 +1,26 @@
<template>
<div class="datatable-empty" v-loading="loading" element-loading-text="Loading...">
<el-image style="width: 100px; height: 100px" src="/static/icon/empty3.png" fit="contain"></el-image>
<div style="line-height: 1;">No Data</div>
</div>
</template>
<script>
export default {
props: {
loading: {
default: false
}
}
};
</script>
<style scoped>
.datatable-empty {
text-align: center;
margin: 30px 20px;
}
.datatable-empty-icon {
font-size: 64px;
}
</style>
src/components/FlipClock/FlipClock.vue
+100
View File
@@ -0,0 +1,100 @@
<!--
* @Description:
* @Autor: dingyi
* @Date: 2020-04-10 20:40:39
* @LastEditors: dingyi
* @LastEditTime: 2020-04-12 14:24:14
* @FilePath: \look-web\src\components\FlipClock\FlipClock.vue
-->
/*
* 翻牌时钟
* @author： 兔子先生
* @createDate: 2019-11-24
*/
<template>
<div class="FlipClock">
<Flipper ref="flipperDay1" frontText="9" />
<Flipper ref="flipperDay2" />
<Flipper ref="flipperDay3" />
<em>-</em>
<Flipper ref="flipperHour1" />
<Flipper ref="flipperHour2" />
<em>:</em>
<Flipper ref="flipperMinute1" />
<Flipper ref="flipperMinute2" />
<em>:</em>
<Flipper ref="flipperSecond1" />
<Flipper ref="flipperSecond2" />
</div>
</template>
<script>
import dayjs from "dayjs";
import Flipper from "./Flipper";
export default {
name: "FlipClock",
data() {
return {
target: "2020-05-01 10:30:30", // 目标时间
timer: null,
flipObjs: []
};
},
components: {
Flipper
},
methods: {
// 日期时间补零
padLeftZero(str) {
return ("00" + str).substr(str.length);
},
// 计算差值
calRange() {
const now = dayjs();
const diff = dayjs(this.target).diff(now, "s");
console.log(diff);
const daySencond = 24 * 60 * 60;
const diff_day = parseInt(diff / daySencond);
const diff_senconds = diff - diff_day * daySencond;
const diff_hours = parseInt(diff_senconds / 60 / 60);
const diff_mints = diff_senconds - diff_hours * 60 * 60;
const diff_min = parseInt(diff_mints / 60);
const diff_s = diff_mints - diff_min * 60;
console.log(diff_day, diff_hours, diff_min, diff_s);
},
testTimer() {
let target = 9;
const timer = setInterval(() => {
this.$refs.flipperDay1.flipDown(target, target - 1);
target -= 1;
if (target === 0) {
clearInterval(timer);
}
}, 1000);
}
},
mounted() {
this.calRange();
this.$nextTick(() => {
// this.testTimer()
});
}
};
</script>
<style>
.FlipClock {
text-align: center;
}
.FlipClock .M-Flipper {
margin: 0 3px;
}
.FlipClock em {
display: inline-block;
line-height: 102px;
font-size: 66px;
font-style: normal;
vertical-align: top;
}
</style>
src/components/FlipClock/Flipper.vue
+274
View File
@@ -0,0 +1,274 @@
/*
* 翻牌数字
* @author： 兔子先生
* @createDate: 2019-11-24
*/
<template>
<div class="M-Flipper" :class="[flipType, {'go': isFlipping}]">
<div class="digital front" :class="_textClass(frontTextFromData)"></div>
<div class="digital back" :class="_textClass(backTextFromData)"></div>
</div>
</template>
<script>
export default {
name: 'FlipClock',
data() {
return {
isFlipping: false,
flipType: 'down',
frontTextFromData: 0,
backTextFromData: 1
}
},
props: {
// front paper text
// 前牌文字
frontText: {
type: [Number, String],
default: 0
},
// back paper text
// 后牌文字
backText: {
type: [Number, String],
default: 1
},
// flipping duration, please be consistent with the CSS animation-duration value.
// 翻牌动画时间，与CSS中设置的animation-duration保持一致
duration: {
type: Number,
default: 600
}
},
methods: {
_textClass(number) {
return 'number' + number
},
_flip(type, front, back) {
// 如果处于翻转中，则不执行
if (this.isFlipping) {
return false
}
this.frontTextFromData = front
this.backTextFromData = back
// 根据传递过来的type设置翻转方向
this.flipType = type
// 设置翻转状态为true
this.isFlipping = true
setTimeout(() => {
// 设置翻转状态为false
this.isFlipping = false
this.frontTextFromData = back
}, this.duration)
},
// 下翻牌
flipDown(front, back) {
this._flip('down', front, back)
},
// 上翻牌
flipUp(front, back) {
this._flip('up', front, back)
},
// 设置前牌文字
setFront(text) {
this.frontTextFromData = text
},
// 设置后牌文字
setBack(text) {
this.backTextFromData = text
}
},
created() {
this.frontTextFromData = this.frontText
this.backTextFromData = this.backText
}
}
</script>
<style>
.M-Flipper {
display: inline-block;
position: relative;
width: 60px;
height: 100px;
line-height: 100px;
border: solid 1px #000;
border-radius: 10px;
background: #fff;
font-size: 66px;
color: #fff;
box-shadow: 0 0 6px rgba(0, 0, 0, 0.5);
text-align: center;
font-family: 'Helvetica Neue';
}
.M-Flipper .digital:before,
.M-Flipper .digital:after {
content: '';
position: absolute;
left: 0;
right: 0;
background: #000;
overflow: hidden;
box-sizing: border-box;
}
.M-Flipper .digital:before {
top: 0;
bottom: 50%;
border-radius: 10px 10px 0 0;
border-bottom: solid 1px #666;
}
.M-Flipper .digital:after {
top: 50%;
bottom: 0;
border-radius: 0 0 10px 10px;
line-height: 0;
}
/*向下翻*/
.M-Flipper.down .front:before {
z-index: 3;
}
.M-Flipper.down .back:after {
z-index: 2;
transform-origin: 50% 0%;
transform: perspective(160px) rotateX(180deg);
}
.M-Flipper.down .front:after,
.M-Flipper.down .back:before {
z-index: 1;
}
.M-Flipper.down.go .front:before {
transform-origin: 50% 100%;
animation: frontFlipDown 0.6s ease-in-out both;
box-shadow: 0 -2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.down.go .back:after {
animation: backFlipDown 0.6s ease-in-out both;
}
/*向上翻*/
.M-Flipper.up .front:after {
z-index: 3;
}
.M-Flipper.up .back:before {
z-index: 2;
transform-origin: 50% 100%;
transform: perspective(160px) rotateX(-180deg);
}
.M-Flipper.up .front:before,
.M-Flipper.up .back:after {
z-index: 1;
}
.M-Flipper.up.go .front:after {
transform-origin: 50% 0;
animation: frontFlipUp 0.6s ease-in-out both;
box-shadow: 0 2px 6px rgba(255, 255, 255, 0.3);
backface-visibility: hidden;
}
.M-Flipper.up.go .back:before {
animation: backFlipUp 0.6s ease-in-out both;
}
@keyframes frontFlipDown {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(-180deg);
}
}
@keyframes backFlipDown {
0% {
transform: perspective(160px) rotateX(180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
@keyframes frontFlipUp {
0% {
transform: perspective(160px) rotateX(0deg);
}
100% {
transform: perspective(160px) rotateX(180deg);
}
}
@keyframes backFlipUp {
0% {
transform: perspective(160px) rotateX(-180deg);
}
100% {
transform: perspective(160px) rotateX(0deg);
}
}
.M-Flipper .number0:before,
.M-Flipper .number0:after {
content: '0';
}
.M-Flipper .number1:before,
.M-Flipper .number1:after {
content: '1';
}
.M-Flipper .number2:before,
.M-Flipper .number2:after {
content: '2';
}
.M-Flipper .number3:before,
.M-Flipper .number3:after {
content: '3';
}
.M-Flipper .number4:before,
.M-Flipper .number4:after {
content: '4';
}
.M-Flipper .number5:before,
.M-Flipper .number5:after {
content: '5';
}
.M-Flipper .number6:before,
.M-Flipper .number6:after {
content: '6';
}
.M-Flipper .number7:before,
.M-Flipper .number7:after {
content: '7';
}
.M-Flipper .number8:before,
.M-Flipper .number8:after {
content: '8';
}
.M-Flipper .number9:before,
.M-Flipper .number9:after {
content: '9';
}
</style>
src/components/index.js
+15
View File
@@ -0,0 +1,15 @@
/*
* @Description:
* @Autor: dingyi
* @Date: 2020-03-27 11:41:45
* @LastEditors: dingyi
* @LastEditTime: 2020-04-05 11:08:46
* @FilePath: /look-web/src/components/index.js
*/
import Vue from 'vue'
import DataTable from './DataTable'
import Empty from './Empty'
Vue.component('dingyi-data-table', DataTable)
Vue.component('dingyi-empty', Empty)