bri-components 1.5.22 → 1.6.0

package/src/components/Error/Error404.vue

@@ -1,40 +1,40 @@
-<template>
-    <div class="error">
-        <div class="error-body">
-            <Card class="error-body-card">
-                <div class="error-body-title">
-                    <span>4</span><!--
-                    --><span class="span-404"><Icon type="ios-navigate-outline" /></span><!--
-                    --><span>4</span>
-                </div>
-                <p class="error-body-message">抱歉，您访问的页面不存在！</p>
-                <p class="error-body-message">I'm sorry, The page you visited is incorrect!</p>
-
-                <!-- 返回按钮组件 -->
-                <error-back></error-back>
-            </Card>
-        </div>
-    </div>
-</template>
-
-<script>
-    import errorBack from "./errorBack.vue";
-
-    export default {
-        name: "Error404",
-        components: {
-            errorBack
-        },
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less" scoped>
-    @import url("./error.less");
-</style>
+<template>
+    <div class="error">
+        <div class="error-body">
+            <Card class="error-body-card">
+                <div class="error-body-title">
+                    <span>4</span><!--
+                    --><span class="span-404"><Icon type="ios-navigate-outline" /></span><!--
+                    --><span>4</span>
+                </div>
+                <p class="error-body-message">抱歉，您访问的页面不存在！</p>
+                <p class="error-body-message">I'm sorry, The page you visited is incorrect!</p>
+
+                <!-- 返回按钮组件 -->
+                <error-back></error-back>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import errorBack from "./errorBack.vue";
+
+    export default {
+        name: "Error404",
+        components: {
+            errorBack
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    @import url("./error.less");
+</style>

package/src/components/Error/Error500.vue

@@ -1,51 +1,51 @@
-<template>
-    <div class="error">
-        <div class="error-body">
-            <Card class="error-body-card">
-                <div class="error-body-title">
-                    <span>5</span><!--
-                    --><span class="span-500-0">
-                        <Icon type="logo-freebsd-devil" />
-                    </span><!--
-                    --><span class="span-500-0">
-                        <Icon type="logo-freebsd-devil" />
-                    </span>
-                </div>
-                <p class="error-body-message">{{ msg }}</p>
-                <p class="error-body-message">The server is wrong!</p>
-
-                <!-- 返回按钮组件 -->
-                <error-back></error-back>
-            </Card>
-        </div>
-    </div>
-</template>
-
-<script>
-    import errorBack from "./errorBack.vue";
-
-    export default {
-        name: "Error500",
-        components: {
-            errorBack
-        },
-        props: {},
-        data () {
-            return {};
-        },
-        computed: {
-            queryMsg () {
-                return this.$route.query.msg;
-            },
-            msg () {
-                return `${this.queryMsg ? `服务器错误：${this.queryMsg}` : "抱歉，服务器错误"}！`;
-            }
-        },
-        created () {},
-        methods: {}
-    };
-</script>
-
-<style lang="less" scoped>
-    @import url("./error.less");
-</style>
+<template>
+    <div class="error">
+        <div class="error-body">
+            <Card class="error-body-card">
+                <div class="error-body-title">
+                    <span>5</span><!--
+                    --><span class="span-500-0">
+                        <Icon type="logo-freebsd-devil" />
+                    </span><!--
+                    --><span class="span-500-0">
+                        <Icon type="logo-freebsd-devil" />
+                    </span>
+                </div>
+                <p class="error-body-message">{{ msg }}</p>
+                <p class="error-body-message">The server is wrong!</p>
+
+                <!-- 返回按钮组件 -->
+                <error-back></error-back>
+            </Card>
+        </div>
+    </div>
+</template>
+
+<script>
+    import errorBack from "./errorBack.vue";
+
+    export default {
+        name: "Error500",
+        components: {
+            errorBack
+        },
+        props: {},
+        data () {
+            return {};
+        },
+        computed: {
+            queryMsg () {
+                return this.$route.query.msg;
+            },
+            msg () {
+                return `${this.queryMsg ? `服务器错误：${this.queryMsg}` : "抱歉，服务器错误"}！`;
+            }
+        },
+        created () {},
+        methods: {}
+    };
+</script>
+
+<style lang="less" scoped>
+    @import url("./error.less");
+</style>

package/src/components/Error/error.less

@@ -1,163 +1,163 @@
-.error {
-    &-body {
-        width: 900px;
-        height: 550px;
-        position: absolute;
-        left: 50%;
-        top: 50%;
-        transform: translate(-50%,-50%);
-        &-card {
-            width: 900px;
-            height: 550px;
-        }
-        &-title {
-            text-align: center;
-            font-size: 240px;
-            font-weight: 700;
-            color: #2d8cf0;
-            height: 260px;
-            line-height: 260px;
-            margin-top: 40px;
-
-            .span-403-0 {
-                display: inline-block;
-                position: relative;
-                width: 170px;
-                height: 170px;
-                border-radius: 50%;
-                border: 20px solid #ed3f14;
-                color: #ed3f14;
-                margin-right: 10px;
-                i{
-                    display: inline-block;
-                    font-size: 120px;
-                    position: absolute;
-                    left: 50%;
-                    top: 50%;
-                    transform: translate(-50%,-50%);
-                    
-                }
-            }
-            .span-403-3 {
-                display: inline-block;
-                position: relative;
-                width: 100px;
-                height: 190px;
-                border-radius: 50%;
-                margin-right: 10px;
-                transform-origin: center bottom;
-                animation: error403animation 2.8s ease 0s infinite;
-                // i {
-                //     display: inline-block;
-                //     font-size: 190px;
-                //     position: absolute;
-                //     left: 20px;
-                //     transform: translate(-50%,-60%);
-                //     transform-origin: center bottom;
-                //     animation: error403animation 2.8s ease 0s infinite;
-                // }
-            }
-
-            .span-404 {
-                display: inline-block;
-                color: #19be6b;
-                font-size: 230px;
-                animation: error404animation 3s ease 0s infinite alternate;
-            }
-
-            .span-500-0 {
-                display: inline-block;
-                position: relative;
-                width: 170px;
-                height: 170px;
-                border-radius: 50%;
-                border: 20px solid #ed3f14;
-                color: #ed3f14;
-                margin-right: 10px;
-                i {
-                    display: inline-block;
-                    font-size: 120px;
-                    position: absolute;
-                    bottom: -10px;
-                    left: 10px;
-                    transform-origin: center bottom;
-                    animation: error500animation 3s ease 0s infinite alternate;
-                }
-            }
-        }
-        &-message {
-            display: block;
-            text-align: center;
-            font-size: 30px;
-            font-weight: 500;
-            letter-spacing: 3px;
-            color: #dddde2;
-        }
-    }
-}
-
-@keyframes error403animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    40% {
-        transform: rotateZ(-20deg);
-    }
-    45% {
-        transform: rotateZ(-15deg);
-    }
-    50% {
-        transform: rotateZ(-20deg);
-    }
-    55% {
-        transform: rotateZ(-15deg);
-    }
-    60% {
-        transform: rotateZ(-20deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
-}
-
-@keyframes error404animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-60deg);
-    }
-    40% {
-        transform: rotateZ(-10deg);
-    }
-    60% {
-        transform: rotateZ(50deg);
-    }
-    80% {
-        transform: rotateZ(-20deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
-}
-
-@keyframes error500animation {
-    0% {
-        transform: rotateZ(0deg);
-    }
-    20% {
-        transform: rotateZ(-10deg);
-    }
-    40% {
-        transform: rotateZ(5deg);
-    }
-    60% {
-        transform: rotateZ(-5deg);
-    }
-    80% {
-        transform: rotateZ(10deg);
-    }
-    100% {
-        transform: rotateZ(0deg);
-    }
+.error {
+    &-body {
+        width: 900px;
+        height: 550px;
+        position: absolute;
+        left: 50%;
+        top: 50%;
+        transform: translate(-50%,-50%);
+        &-card {
+            width: 900px;
+            height: 550px;
+        }
+        &-title {
+            text-align: center;
+            font-size: 240px;
+            font-weight: 700;
+            color: #2d8cf0;
+            height: 260px;
+            line-height: 260px;
+            margin-top: 40px;
+
+            .span-403-0 {
+                display: inline-block;
+                position: relative;
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                border: 20px solid #ed3f14;
+                color: #ed3f14;
+                margin-right: 10px;
+                i{
+                    display: inline-block;
+                    font-size: 120px;
+                    position: absolute;
+                    left: 50%;
+                    top: 50%;
+                    transform: translate(-50%,-50%);
+                    
+                }
+            }
+            .span-403-3 {
+                display: inline-block;
+                position: relative;
+                width: 100px;
+                height: 190px;
+                border-radius: 50%;
+                margin-right: 10px;
+                transform-origin: center bottom;
+                animation: error403animation 2.8s ease 0s infinite;
+                // i {
+                //     display: inline-block;
+                //     font-size: 190px;
+                //     position: absolute;
+                //     left: 20px;
+                //     transform: translate(-50%,-60%);
+                //     transform-origin: center bottom;
+                //     animation: error403animation 2.8s ease 0s infinite;
+                // }
+            }
+
+            .span-404 {
+                display: inline-block;
+                color: #19be6b;
+                font-size: 230px;
+                animation: error404animation 3s ease 0s infinite alternate;
+            }
+
+            .span-500-0 {
+                display: inline-block;
+                position: relative;
+                width: 170px;
+                height: 170px;
+                border-radius: 50%;
+                border: 20px solid #ed3f14;
+                color: #ed3f14;
+                margin-right: 10px;
+                i {
+                    display: inline-block;
+                    font-size: 120px;
+                    position: absolute;
+                    bottom: -10px;
+                    left: 10px;
+                    transform-origin: center bottom;
+                    animation: error500animation 3s ease 0s infinite alternate;
+                }
+            }
+        }
+        &-message {
+            display: block;
+            text-align: center;
+            font-size: 30px;
+            font-weight: 500;
+            letter-spacing: 3px;
+            color: #dddde2;
+        }
+    }
+}
+
+@keyframes error403animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    40% {
+        transform: rotateZ(-20deg);
+    }
+    45% {
+        transform: rotateZ(-15deg);
+    }
+    50% {
+        transform: rotateZ(-20deg);
+    }
+    55% {
+        transform: rotateZ(-15deg);
+    }
+    60% {
+        transform: rotateZ(-20deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+
+@keyframes error404animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-60deg);
+    }
+    40% {
+        transform: rotateZ(-10deg);
+    }
+    60% {
+        transform: rotateZ(50deg);
+    }
+    80% {
+        transform: rotateZ(-20deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
+}
+
+@keyframes error500animation {
+    0% {
+        transform: rotateZ(0deg);
+    }
+    20% {
+        transform: rotateZ(-10deg);
+    }
+    40% {
+        transform: rotateZ(5deg);
+    }
+    60% {
+        transform: rotateZ(-5deg);
+    }
+    80% {
+        transform: rotateZ(10deg);
+    }
+    100% {
+        transform: rotateZ(0deg);
+    }
 }

package/src/components/Error/errorBack.vue

@@ -1,40 +1,40 @@
-<template>
-    <div class="error-back">
-        <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
-        <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
-    </div>
-</template>
-
-<script>
-    export default {
-        name: "errorBack",
-        props: {
-            backNum: {
-                type: Number,
-                default: -1
-            }
-        },
-        data () {
-            return {};
-        },
-        computed: {},
-        created () {},
-        methods: {
-            goHome () {
-                this.$router.push({
-                    path: "/"
-                });
-            },
-            backPage () {
-                this.$router.go(this.backNum);
-            }
-        }
-    };
-</script>
-
-<style lang="less" scoped>
-    .error-back{
-        text-align: center;
-        padding-top: 40px;
-    }
-</style>
+<template>
+    <div class="error-back">
+        <Button @click="goHome" size="large" style="width: 200px;" type="text">返回首页</Button>
+        <Button @click="backPage" size="large" style="width: 200px;margin-left: 40px;" type="primary">返回上一页</Button>
+    </div>
+</template>
+
+<script>
+    export default {
+        name: "errorBack",
+        props: {
+            backNum: {
+                type: Number,
+                default: -1
+            }
+        },
+        data () {
+            return {};
+        },
+        computed: {},
+        created () {},
+        methods: {
+            goHome () {
+                this.$router.push({
+                    path: "/"
+                });
+            },
+            backPage () {
+                this.$router.go(this.backNum);
+            }
+        }
+    };
+</script>
+
+<style lang="less" scoped>
+    .error-back{
+        text-align: center;
+        padding-top: 40px;
+    }
+</style>