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>