udxcms 1.0.1

package/dist/components/businessComponents/LoadingDefault.vue

@@ -0,0 +1,88 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2021-04-02 18:58:32
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-04-18 16:35:44
+-->
+<template>
+    <div class='loading'>
+        <div class='loader'></div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'LoadingDefault'
+    }
+</script>
+
+<style lang="less" scoped>
+.loading {
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    align-self: center;
+}
+.loader {
+  position: relative;
+  width: 2.5em;
+  height: 2.5em;
+  transform: rotate(165deg);
+}
+.loader:before, .loader:after {
+  content: "";
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  display: block;
+  width: 0.5em;
+  height: 0.5em;
+  border-radius: 0.25em;
+  transform: translate(-50%, -50%);
+}
+.loader:before {
+  animation: before 2s infinite;
+}
+.loader:after {
+  animation: after 2s infinite;
+}
+
+@keyframes before {
+  0% {
+    width: 0.5em;
+    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+  35% {
+    width: 2.5em;
+    box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75);
+  }
+  70% {
+    width: 0.5em;
+    box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+  100% {
+    box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75);
+  }
+}
+@keyframes after {
+  0% {
+    height: 0.5em;
+    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+  35% {
+    height: 2.5em;
+    box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75);
+  }
+  70% {
+    height: 0.5em;
+    box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75);
+  }
+  100% {
+    box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75);
+  }
+}
+
+</style>

package/dist/components/businessComponents/LoadingDot.vue

@@ -0,0 +1,118 @@
+<!--
+ * @Descripttion: 
+ * @version: 
+ * @Author: 
+ * @Date: 2021-12-08 15:18:59
+ * @LastEditors: Lewis
+ * @LastEditTime: 2021-12-08 16:51:37
+-->
+<template>
+    <div class='loading-dot'>
+        <!-- <span class="ant-spin-dot ant-spin-dot-spin" :style="{'font-size': sacleArr[sacle]}">
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+            <i class="ant-spin-dot-item"></i>
+        </span> -->
+        <a-spin>
+          <a-icon  slot="indicator" type="loading" style="font-size: 24px" spin />
+        </a-spin>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'loading-dot',
+        props: {
+            sacle: {
+                type: String,
+                default: 'small'
+            }
+        },
+        data() {
+            return {
+                sacleArr: {
+                    small: '24px',
+                    default: '26px',
+                    large: '30px',
+                    bigLarge: '32px'
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+.loading-dot {
+    display: flex;
+    height: 100%;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+}
+// .ant-spin-dot {
+//     position: relative;
+//     display: inline-block;
+//     font-size: 20px;
+//     width: 1em;
+//     height: 1em
+// }
+
+// .ant-spin-dot-item {
+//     position: absolute;
+//     display: block;
+//     width: 0.4em;
+//     height: 0.4em;
+//     background-color: #1890ff;
+//     border-radius: 100%;
+//     transform: scale(.75);
+//     transform-origin: 50% 50%;
+//     opacity: .3;
+//     -webkit-animation: antSpinMove 1s linear infinite alternate;
+//     animation: antSpinMove 1s linear infinite alternate
+// }
+
+// .ant-spin-dot-item:first-child {
+//     top: 0;
+//     left: 0
+// }
+
+// .ant-spin-dot-item:nth-child(2) {
+//     top: 0;
+//     right: 0;
+//     -webkit-animation-delay: .4s;
+//     animation-delay: .4s
+// }
+
+// .ant-spin-dot-item:nth-child(3) {
+//     right: 0;
+//     bottom: 0;
+//     -webkit-animation-delay: .8s;
+//     animation-delay: .8s
+// }
+
+// .ant-spin-dot-item:nth-child(4) {
+//     bottom: 0;
+//     left: 0;
+//     -webkit-animation-delay: 1.2s;
+//     animation-delay: 1.2s
+// }
+
+// .ant-spin-dot-spin {
+//     transform: rotate(45deg);
+//     -webkit-animation: antRotate 1.2s linear infinite;
+//     animation: antRotate 1.2s linear infinite
+// }
+
+// @keyframes antRotate {
+//     to {
+//         transform: rotate(405deg)
+//     }
+// }
+
+// @keyframes antSpinMove {
+//     to {
+//         opacity: 1
+//     }
+// }
+</style>

package/dist/components/businessComponents/LoadingWallet.vue

@@ -0,0 +1,42 @@
+
+<template>
+	<div class="loading-wrapper">
+		<div class="loader">
+			<img src="../../assets/img/logo-plain.png" alt="logo" />
+		</div>
+	</div>
+</template>
+
+<script>
+// wallet loading 组件。
+export default {
+	name: "LoadingWallet",
+};
+</script>
+
+<style lang="less" scoped>
+.loading-wrapper {
+	height: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	align-self: center;
+	.loader {
+    // background-color: #eee;
+		position: relative;
+		width: 110px;
+		height: 110px;
+		img {
+			width: 100%;
+      transform: translateY(20px);
+      animation: bounce 300ms cubic-bezier(0.165, 0.840, 0.440, 1.000) infinite alternate;
+		}
+	}
+}
+
+@keyframes bounce {
+  100% {
+    transform: translateY(-20px);
+  }
+}
+</style>

package/dist/components/businessComponents/MarketChartmini.vue

@@ -0,0 +1,148 @@
+<template>
+    <div class='chart' :style="{width: parseInt(this.width) + 'px', height: parseInt(this.height) + 'px'}">
+        <v-chart :option="chartOption" />
+    </div>
+</template>
+
+<script>
+    let echarts = require('echarts')
+    import { use } from "echarts/core";
+    import VChart from 'vue-echarts'
+    import { CanvasRenderer } from "echarts/renderers";
+    import { LineChart } from "echarts/charts";
+    import { GridComponent, AriaComponent  } from "echarts/components";
+    use([
+        CanvasRenderer,
+        LineChart,
+        GridComponent,
+        AriaComponent
+    ]);
+    export default {
+        name: 'market-chart-mini',
+        components: {
+            VChart
+        },
+        props: {
+            data: {
+                type: Array,
+                default: []
+            },
+            width: {
+                type: String | Number,
+                default: '60'
+            },
+            height: {
+                type: String | Number,
+                default: '40'
+            },
+            isAare: {
+                type: Boolean,
+                default: true
+            },
+            lineColor: {
+                type: String,
+                default: '#8d8d8d'
+            },
+            lineColorR: {
+                type: String,
+                default: 'rgba(234,84,85,1)'
+            },
+            lineColorG: {
+                type: String,
+                default: 'rgba(53,199,155,1)'
+            },
+            footerColor: {
+                type: String,
+                default: 'rgba(183,218,255,0)'
+            },
+            chg: {
+                type: Number | String,
+                default: 0
+            }
+        },
+        computed: {
+            chartOption() {
+                let option = JSON.parse(JSON.stringify(this.initOptions))
+                option.series[0].lineStyle.color = this.lineColor
+                option.grid.height = parseInt(this.height)
+                this.formatData(option)
+                let ColorModel = Number(Boolean(this.chg <= 0))
+                if (this.chg * 1 !== 0) {
+                    option.series[0].areaStyle = {
+                        color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
+                            {
+                                offset: 0,
+                                color: ColorModel == 0 ? this.lineColorG : this.lineColorR
+                            }, 
+                            {
+                                offset: 1,
+                                color: this.footerColor
+                            }
+                        ])
+                    }
+                    option.series[0].lineStyle.color = ColorModel ? this.lineColorR: this.lineColorG
+                }
+                let isAare = this.isAare
+                if (!isAare) {
+                    delete option.series[0].areaStyle
+                }
+                return option
+            }
+        },
+        data() {
+            return {
+                initOptions: {
+                    xAxis: {type: 'category', boundaryGap: false,color: 'red', show: false},
+                    yAxis: {gridIndex: 0, boundaryGap: ['0', '0'], max: 0, min: 0, show: false},
+                    grid: {
+                        top: 5,
+                        left: 0,
+                        right: 0,
+                        bottom: 0,
+                        height: 40
+                    },
+                    series: [
+                        {
+                            data: [],
+                            type: 'line', smooth: false, seriesLayoutBy: 'row',
+                            symbol: 'none',
+                            lineStyle: {
+                                color: '#8d8d8d',
+                                width: 1
+                            },
+                            areaStyle: {
+                                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
+                                    offset: 0,
+                                    color: 'rgba(129,129,85,.3)'
+                                }, {
+                                    offset: 1,
+                                    color: 'rgba(183,218,255,0)'
+                                }])
+                            }
+                        }
+                    ]
+                }
+            }
+        },
+        methods: {
+            // 设置图标边界
+            formatData(option) {
+                let min = Math.min(...this.data)
+                let max = Math.max(...this.data)
+                option.yAxis.max = max + (max - min) / 2
+                option.yAxis.min = min - (max - min) / 2
+                option.series[0].data = this.data
+                if (max == min) {
+                    option.yAxis.max = 55
+                    option.yAxis.min = -20
+                    option.series[0].data = new Array(this.data.length).fill(50)
+                }
+                return option
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+
+</style>

package/dist/components/businessComponents/MediaList.vue

@@ -0,0 +1,49 @@
+<template>
+    <div class='media-list' v-if='linkArr.length'>
+        <a v-for="(item, index) in linkArr" :key='index' class='line-icon' :href='item.site' target="_blank">
+            <img :src="item.logo" alt="" />
+        </a>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'media-list',
+        data() {
+            return {
+                linkArr: []
+            }
+        },
+        created() {
+            this.getMediasFunc()
+        },
+        methods: {
+            getMediasFunc() {
+                this.linkArr = this.$t("media_common_media_channel") != "media_common_media_channel" ? JSON.parse(this.$t("media_common_media_channel")) : []
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .media-list {
+        width: 100%;
+        min-height: 48px;
+        background: white;
+        border-top: 1px solid var(--border-color-base);
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        .line-icon {
+            filter: brightness(.5);
+        }
+        .line-icon:not(:last-child) {
+            margin-right: 10px;
+        }
+        .line-icon img {
+            // filter: invert(1)
+            height: 28px;
+            width: 28px;
+        }
+    }
+</style>

package/dist/components/businessComponents/Modal.vue

@@ -0,0 +1,81 @@
+<!--
+ * @Author: Sneed
+ * @Date: 2021-03-09 16:40:27
+ * @LastEditTime: 2022-06-08 22:11:27
+ * @LastEditors: Lewis
+ * @Description: 
+-->
+<template>
+    <div class="modal" v-show="value">
+        <div class="container">
+            <div class="content">
+                <slot name="title" class="title">
+                    
+                </slot>
+                <slot name="content">
+                    
+                </slot>
+                <slot name="action">
+                </slot>
+            </div>
+            <div class="close">
+                <svg-icon class="icon" icon-class="close" @click="close"></svg-icon>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+export default {
+    props: {
+        value: {
+            type:Boolean,
+        }
+    },
+    methods: {
+        close() {
+            this.$emit('input',false);
+        }
+    }
+}
+</script>
+
+<style lang="less" scoped>
+    .modal {
+        width: 100vw;
+        height: 100vh;
+        position: fixed;
+        top: 0;
+        left: 0;
+        z-index: 500;
+        background: rgba(0,0,0,0.5);
+        .container {
+            
+            width: 300px;
+            overflow: hidden;
+            position: fixed;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%,-50%);
+            .content {
+                padding:0 20px 20px;
+                background: #fff;
+                width: 100%;
+                border-radius: 12px;
+            }
+            .close {
+                position: absolute;
+                top: -40px;
+                right: 10px;
+                text-align: center;
+                margin-top: 24px;
+                .icon {
+                    margin-top: 24px;
+                    width: 14px;
+                    height: 14px;
+                }
+            }
+            
+        }
+    }
+</style>

package/dist/components/businessComponents/NavInner.vue

@@ -0,0 +1,80 @@
+<!--
+ * @Author:
+ * @Date: 2020-12-11 15:35:25
+ * @LastEditTime: 2021-08-19 17:27:23
+ * @LastEditors: Lewis
+ * @Description:
+-->
+
+<template>
+    <div :class="['navs', cls]">
+        <div class='flex'>
+            <div v-for="(item, index) in nav" :key="index" class='navs-flex'>
+                <div :class="[{'nav-link': item.path}]" @click="goUrl(item.path)">{{item.label}}</div>
+                <img :src="require('../../assets/img/arrowRight.png')" v-if='index < nav.length - 1'/>
+            </div>
+        </div>
+        <div>
+            <slot></slot>
+        </div>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: 'NavInner',
+        props: {
+            nav: {
+                type: Array,
+                default: []
+            },
+            cls: {
+                type: String,
+                default: ''
+            }
+        },
+        data() {
+            return {
+
+            }
+        },
+        methods: {
+            goUrl(url) {
+                if (url) {
+                    this.$router.push({
+                        path: url
+                    })
+                }
+            }
+        }
+    }
+</script>
+
+<style lang="less" scoped>
+    .navs {
+        display: flex;
+        line-height: 24px;
+        text-align: left;
+        font-size: 24px;
+        font-family: FontMedium;
+        padding: 14px 10px;
+        align-items: center;
+        color: var(--text-color-secondary);
+        justify-content: space-between;
+        .navs-flex {
+            display: flex;
+            align-items: center;
+        }
+        .nav-link {
+            cursor: pointer;
+        }
+        .nav-link:hover {
+            color: var(--primary-color);
+        }
+        img {
+            margin:0 10px;
+            height: 16px;
+            width: 16px;
+        }
+    }
+</style>