PrideDocs.vue 4.32 KB
Newer Older
1
2
<template>
    <div class="submit-data-container">
3
        <div class="panel nav"><NavBar/></div>
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
        <div class="content-container">
            <Affix :offset-top="20">
                <div class="menu-wrapper">
                    <Menu mode="vertical" :active-name="activeName" @on-select="menuSlect">
                        <MenuItem name="one">
                            <Icon type="ios-paper"></Icon>
                            Docs One
                        </MenuItem>
                        <MenuItem name="two">
                            <Icon type="ios-paper"></Icon>
                            Docs Two
                        </MenuItem>
                        <MenuItem name="three">
                            <Icon type="ios-paper"></Icon>
                            Docs Three
                        </MenuItem>
                    </Menu>
                </div>
            </Affix>
           
               
            <div class="markdown-wrapper">
                <vue-markdown class="markdown-body" :source="source"></vue-markdown>
                <!--<vue-markdown :anchor-attributes="anchorAttrs">[A link to a website](https://google.com)</vue-markdown>-->
            </div>
                
        </div>
    </div>
</template>
<script>
34
    import NavBar from '@/components/landingpage/Nav'
shabai517's avatar
shabai517 committed
35
    import store from "@/store/store.js"
36
37
38
39
    export default {
        data () {
            return {
                source: '',
shabai517's avatar
shabai517 committed
40
                markdownURL:this.$store.state.baseURL + '/static/markdown/documentationPage/content.md',
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
                activeName:'one'
                /*
                anchorAttrs: {
                    target: '_blank',
                    rel: 'noopener noreferrer nofollow',
                    tag:'test'
                }*/
            }
        },
        beforeRouteUpdate:function (to, from, next) {
            this.$nextTick(function(){
               let num = this.$route.query.num;
               this.goAnchor(num);
            });
            next();
        },
        components: {
58
            NavBar,
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
        },
        methods:{
            markdownQuery(){
                this.$http
                  .get(this.markdownURL)
                  .then(function(res){
                    this.source = res.body;
                    this.$nextTick(function(){
                        this.activeName = this.$route.query.num;
                        this.goAnchor(this.$route.query.num);
                    });
                   
                  },function(err){
                   
                  }); 
            },
            goAnchor(selector) {
                if(selector){
                    let anchor = this.$el.querySelector('#'+selector);
                    document.documentElement.scrollTop = anchor.offsetTop;
                }
                else
                    document.documentElement.scrollTop = 0;
            },
            menuSlect(name){
                if(this.$route.query.num == name){
                    let anchor = this.$el.querySelector('#'+name);
                    document.documentElement.scrollTop = anchor.offsetTop;
                    return;
                }
                this.activeName = name;
                this.$router.replace({name:'pridedocs',query: { num: name }});
            },
        },
        mounted:function(){
            this.markdownQuery();
        },
    }
</script>
<style>
 
</style>
<style scoped>
    .submit-data-container{
        width:100%;
        height: 100%;
        background: white;
    }
    .menu-wrapper .ivu-menu-vertical{
        position: absolute;
        min-width: 100px;
    }
    .markdown-wrapper{
        margin-left: 240px;
    }
    .content-container{
        padding: 90px 0;
        margin: 0 auto;
    }

    .markdown-body{
        display: inline-block;
    }
shabai517's avatar
shabai517 committed
122
123
124
125
126
127
    .menu-wrapper .ivu-menu-vertical{
        width: 200px !important;
    }
    .ivu-menu{
        z-index: 100;
    }
128
129
130
131
    @media (min-width: 768px) { 
        .content-container{
            width: 750px;
        }
shabai517's avatar
shabai517 committed
132
        
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
    }
    @media (min-width: 992px) { 
        .content-container{
            width: 970px;
        }
    }
    @media (min-width: 1200px) {
        .content-container{
            width: 1170px;
        }
    }
    @media (min-width: 1600px) {
        .content-container{
            width: 1552px;
        }
    }
</style>