feat: 成就总览(未完成)

.gitignore

@@ -2,6 +2,7 @@
 node_modules
 /dist
 package-lock.json
+.history
 
 # local env files
 .env.local

src/assets/css/wiki/SeniorityItem.less

@@ -0,0 +1,61 @@
+.m-seniority__item {
+    .flex();
+    .u-left__img {
+        .h(70px);
+    }
+    .m-info_layout {
+        flex: 1;
+        .pr();
+        background-color: #ebe1d1;
+        .u-progress {
+            .h(66px);
+            border: 2px solid white;
+            .w(33%);
+            max-width: calc(100% - 4px);
+            &.style1 {
+                background: linear-gradient(90deg, #f7f7f7 0%, #ccb1af 100%);
+            }
+            &.style2 {
+                background: linear-gradient(90deg, #ffffff 0%, #bfbfbf 100%);
+            }
+            &.style3 {
+                background: linear-gradient(90deg, #f7f7f7 0%, #ccb89b 100%);
+            }
+        }
+        .m-seniority__title {
+            .pa();
+            .lt(8px,10px);
+            right: 8px;
+            .flex();
+            .flex(x,space-between);
+            .color(#70532d);
+            .fz(16px,24px);
+            .bold();
+            .u-text {
+                .color(#3d3d3d);
+            }
+        }
+        .m-seniority__num {
+            .pa();
+            .lb(8px,10px);
+            .flex();
+            background-color: rgba(255, 255, 255, 0.5);
+            padding: 2px 4px;
+            .r(2px);
+            .m-item {
+                .flex();
+                .flex(y);
+                .u-icon {
+                    .size(14px);
+                }
+                .u-text {
+                    .color(#A1A1A1);
+                    .fz(12px,18px);
+                }
+                &:last-child {
+                    .ml(12px);
+                }
+            }
+        }
+    }
+}

src/assets/css/wiki/TreeProgress.less

@@ -0,0 +1,25 @@
+.m-tree__layout {
+    .u-tree__item {
+        .pl(16px);
+        .color(rgba(255,255,255,0.5));
+        .fz(16px,24px);
+        .pr();
+        .pointer();
+        transition: 0.2s all;
+        &::before {
+            content: "";
+            .size(4px,24px);
+            background: rgba(255, 255, 255, 0.5);
+            .db();
+            .pa();
+            .lt(0);
+        }
+        &:hover {
+            background: rgba(255, 255, 255, 0.25);
+            .color(white);
+            &::before {
+                background: rgba(245, 224, 201, 0.75);
+            }
+        }
+    }
+}

src/assets/css/wiki/overview.less

@@ -0,0 +1,131 @@
+.m-layout {
+    height: calc(100vh - @header-height);
+    opacity: 1;
+    background: url(../../img/wiki/overview/bg_right_bottom.png) right bottom no-repeat,
+        url(../../img/wiki/overview/bg_left_top.png) left top no-repeat,
+        linear-gradient(152.57deg, rgba(150, 128, 87, 1) 0%, rgba(87, 75, 65, 1) 27.78%, rgba(0, 0, 0, 1) 100%);
+    background-size: 1000px, 319px, cover;
+    display: flex;
+    justify-content: center;
+    .m-left {
+        .w(180px);
+        .u-title__img {
+            .db();
+        }
+        .m-seniority {
+            .mt(46px);
+            .pr();
+            .u-img {
+                border-radius: 10px;
+                border: 0.5px solid rgba(255, 255, 255, 1);
+                .db();
+                box-sizing: border-box;
+            }
+            .u-text {
+                .pa();
+                .lb(0,28px);
+                right: 0;
+                .x();
+                .fz(12px,18px);
+                .color(#969696);
+                span {
+                    &:last-child {
+                        .color(#CCA16C);
+                        .bold();
+                    }
+                }
+            }
+        }
+    }
+    .m-right {
+        .w(960px);
+        .pt(80px);
+
+        .m-top {
+            .flex();
+            .flex(y,flex-end);
+            .m-info {
+                .lh(1);
+                flex: 1;
+                .pb(24px);
+                .m-user {
+                    .flex();
+                    .flex(y);
+                    .u-user__name {
+                        .color(#FFECCC);
+                        .fz(35px,35px);
+                        .bold();
+                    }
+                    .u-sect {
+                        .size(28px);
+                        .ml(8px);
+                    }
+                    .m-change {
+                        .flex();
+                        .flex(y);
+                        .ml(36px);
+                        .pointer();
+                        border-radius: 4px;
+                        border: 1px solid #bfb8ac;
+                        padding: 2px 4px 2px 4px;
+                        .u-text {
+                            .color(#BFB8AC);
+                            .fz(16px,24px);
+                        }
+                    }
+                }
+                .m-total {
+                    .mt(8px);
+                    background-color: #f7f7f7;
+                    padding: 12px 8px;
+                    .m-text__info {
+                        .flex();
+                        .flex(y);
+                        .pr();
+                        .fz(32px,47px);
+                        .bold();
+                        .u-text {
+                            .color(#414140);
+                        }
+                        .u-icon {
+                            .size(32px);
+                        }
+                        .u-num {
+                            .color(#B59457);
+                            .ml(8px);
+                        }
+                        .u-percent {
+                            .pa();
+                            .rt(0,50%);
+                            .color(#947e5d);
+                            .fz(24px);
+                            transform: translateY(-50%);
+                        }
+                    }
+                    .m-progress {
+                        .mt(8px);
+                        .u-progress {
+                            .h(12px);
+                            .w(80%);
+                            background: linear-gradient(90deg, #f2e9da 0%, #b59457 100%);
+                        }
+                    }
+                }
+            }
+            .m-large {
+                .size(200px);
+                .ml(48px);
+                .pt(23px);
+            }
+        }
+        .m-list {
+            .mt(18px);
+            .flex();
+            flex-wrap: wrap;
+            gap: 12px 24px;
+            .m-seniority__item {
+                .w(calc(33.3333333% - 16px));
+            }
+        }
+    }
+}

src/components/wiki/SeniorityItem.vue

@@ -0,0 +1,46 @@
+<template>
+    <div class="m-seniority__item">
+        <img class="u-left__img" src="../../assets/img/wiki/overview/seniority_item_bg.png" alt="">
+        <div class="m-info_layout">
+            <div class="u-progress style1"></div>
+            <div class="m-seniority__title">
+                <div class="u-text">杂文</div>
+                <div class="u-percent">26%</div>
+            </div>
+            <div class="m-seniority__num">
+                <div class="m-item">
+                    <img class="u-icon" src="../../assets/img/wiki/overview/tasks_num.png" alt="" />
+                    <div class="u-text">12/32</div>
+                </div>
+                <div class="m-item">
+                    <img class="u-icon" :src="iconPath('point.svg')" alt="" />
+                    <div class="u-text">191/1324</div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { __cdn } from "@jx3box/jx3box-common/data/jx3box.json";
+export default {
+    name: "SeniorityItem",
+    components: {},
+    data: function () {
+        return {
+            loading: false,
+        };
+    },
+    computed: {},
+    watch: {},
+    methods: {
+        iconPath(url) {
+            return `${__cdn}img/dashboard/${url}`;
+        },
+    },
+    created: function () {},
+};
+</script>
+<style lang="less">
+@import "~@/assets/css/wiki/SeniorityItem.less";
+</style>

src/components/wiki/TreeProgress.vue

@@ -0,0 +1,24 @@
+<template>
+    <div class="m-tree__layout">
+        <div class="u-tree__item">完成进度</div>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "TreeProgress",
+    components: {},
+    data: function () {
+        return {
+            loading: false,
+        };
+    },
+    computed: {},
+    watch: {},
+    methods: {},
+    created: function () {},
+};
+</script>
+<style lang="less">
+@import "~@/assets/css/wiki/TreeProgress.less";
+</style>

src/layout/wiki-layout.vue

@@ -0,0 +1,81 @@
+<template>
+    <div>
+        <Header></Header>
+
+        <Main :withoutLeft="withoutLeft" :withoutRight="withoutRight">
+            <div class="m-main" :class="'p-' + pageName">
+                <slot></slot>
+            </div>
+        </Main>
+    </div>
+</template>
+
+<script>
+export default {
+    name: "DefaultLayout",
+    props: {
+        name: {
+            type: String,
+            default: "Wiki",
+        },
+        slug: {
+            type: String,
+            default: "achievement",
+        },
+        root: {
+            type: String,
+            default: "",
+        },
+        withoutRight: {
+            type: Boolean,
+            default: false,
+        },
+        publishEnable: {
+            type: Boolean,
+            default: false,
+        },
+        adminEnable: {
+            type: Boolean,
+            default: false,
+        },
+        topicEnable: {
+            type: Boolean,
+            default: false,
+        },
+        feedbackEnable: {
+            type: Boolean,
+            default: false,
+        },
+        overlayEnable: {
+            type: Boolean,
+            default: false,
+        },
+        crumbEnable: {
+            type: Boolean,
+            default: true,
+        },
+        withoutLeft: {
+            type: Boolean,
+            default: false,
+        },
+        adminMarks: {
+            type: Array,
+            default: () => [],
+        },
+    },
+    computed: {
+        computedRoot: function () {
+            return this.root ? this.root : this.slug;
+        },
+        pageName: function () {
+            return this.$route.name;
+        },
+    },
+};
+</script>
+
+<style lang="less">
+.c-main {
+    margin-top: @header-height;
+}
+</style>