index copy.vue 7.2 KB
<template>
<div class="app-container home">
    <el-row :gutter="20">
            <h2>技术学习参考</h2>
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
            <h3>前端:</h3>
            <p>
                Node.js 教程 => |
                <el-link href="https://www.runoob.com/nodejs/nodejs-tutorial.html" target="_blank">https://www.runoob.com/nodejs/nodejs-tutorial.html</el-link>
            </p>
            <p>
                ES6 教程 => | 
                <el-link href="https://www.runoob.com/w3cnote/es6-tutorial.html" target="_blank">https://www.runoob.com/w3cnote/es6-tutorial.html</el-link>
            </p>
            <p>
                ECMAScript 6 简明教程  => | 
                <el-link href="https://www.runoob.com/w3cnote/es6-concise-tutorial.html" target="_blank">https://www.runoob.com/w3cnote/es6-concise-tutorial.html</el-link>
            </p>
            <p>
                Vue2 教程 => | 
                <el-link href="https://v2.cn.vuejs.org/" target="_blank">https://v2.cn.vuejs.org/</el-link>
            </p>
            <p>
                一个 Vue 2  => | 
                <el-link href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank">https://element.eleme.cn/#/zh-CN/component/installation</el-link>
            </p>
        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
            <h3>后端:</h3>
            <p>
                Redis 配置  => |
                <el-link href="https://www.runoob.com/redis/redis-conf.html" target="_blank">https://www.runoob.com/redis/redis-conf.html</el-link>
            </p>
            <p>
                MySQL 教程 => | 
                <el-link href="https://www.runoob.com/mysql/mysql-tutorial.html" target="_blank">https://www.runoob.com/mysql/mysql-tutorial.html</el-link>
            </p>
            <p>
                Spring基础知识汇总  => | 
                <el-link href="https://www.runoob.com/w3cnote/basic-knowledge-summary-of-spring.html" target="_blank">https://www.runoob.com/w3cnote/basic-knowledge-summary-of-spring.html</el-link>
            </p>
            <p>
                SpringBootに入門する為の助走本 => | 
                <el-link href="https://www.runoob.com/vue3/vue3-tutorial.html" target="_blank">https://qiita.com/sugaryo/items/5695bfcc21365f429767</el-link>
            </p>
        </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
        <el-col :sm="24" :lg="12" style="padding-left: 20px">
            <h2>NTSD后台管理框架</h2>
            <p>
                可用于所有的Web应用程序,如网站管理后台,网站会员中心,CMS,CRM,OA等等。所有前端后台代码封装过后十分精简易上手,出错概率低。同时支持移动客户端访问。
            </p>
            <p>
                <b>当前版本:</b> <span>v{{ version }}</span>
            </p>
            <p>
                <el-button size="mini" icon="el-icon-s-home" plain @click="goTarget('http://www.netsdar.com')">访问主页</el-button>
            </p>
        </el-col>

        <el-col :sm="24" :lg="12" style="padding-left: 50px">
            <el-row>
                <el-col :span="12">
                    <h2>技术选型</h2>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="6">
                    <h4>后端技术</h4>
                    <ul>
                        <li>SpringBoot</li>
                        <li>Spring Security</li>
                        <li>JWT</li>
                        <li>MyBatis</li>
                        <li>Druid</li>
                        <li>Fastjson</li>
                        <li>...</li>
                    </ul>
                </el-col>
                <el-col :span="6">
                    <h4>前端技术</h4>
                    <ul>
                        <li>Vue</li>
                        <li>Vuex</li>
                        <li>Element-ui</li>
                        <li>Axios</li>
                        <li>Sass</li>
                        <li>Quill</li>
                        <li>...</li>
                    </ul>
                </el-col>
            </el-row>
        </el-col>
    </el-row>
    <el-divider />
    <el-row :gutter="20">
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="update-log">
                <div slot="header" class="clearfix">
                    <span>联系信息</span>
                </div>
                <div class="body">
                    <p>
                        <i class="el-icon-s-promotion"></i> 官网:<el-link href="http://www.netsdar.com" target="_blank">http://www.netsdar.com</el-link>
                    </p>
                </div>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="update-log">
                <div slot="header" class="clearfix">
                    <span>更新日志</span>
                </div>
                <el-collapse accordion>
                    <el-collapse-item title="v1.0.1 - 2022-03-01">
                        <li>NTSD前后端分离系统正式发布</li>
                    </el-collapse-item>
                </el-collapse>
            </el-card>
        </el-col>
        <el-col :xs="24" :sm="24" :md="12" :lg="8">
            <el-card class="update-log">
                <div slot="header" class="clearfix">
                    <span>捐赠支持</span>
                </div>
                <div class="body">
                    <img src="http://2020.ifanxu.com/wx-about/w.jpg" alt="donate" width="70%" />
                    <span style="display: inline-block; height: 30px; line-height: 30px">你可以请作者喝杯咖啡表示鼓励</span>
                </div>
            </el-card>
        </el-col>
    </el-row>
</div>
</template>

<script>
export default {
    name: "Index",
    data() {
        return {
            // 版本号
            version: "1.0.1",
        };
    },
    methods: {
        goTarget(href) {
            window.open(href, "_blank");
        },
    },
};
</script>

<style lang="scss" scoped>
.home {
    blockquote {
        padding: 10px 20px;
        margin: 0 0 20px;
        font-size: 17.5px;
        border-left: 5px solid #eee;
    }

    hr {
        margin-top: 20px;
        margin-bottom: 20px;
        border: 0;
        border-top: 1px solid #eee;
    }

    .col-item {
        margin-bottom: 20px;
    }

    ul {
        padding: 0;
        margin: 0;
    }

    font-family: "open sans",
    "Helvetica Neue",
    Helvetica,
    Arial,
    sans-serif;
    font-size: 13px;
    color: #676a6c;
    overflow-x: hidden;

    ul {
        list-style-type: none;
    }

    h4 {
        margin-top: 0px;
    }

    h2 {
        margin-top: 10px;
        font-size: 26px;
        font-weight: 100;
    }

    p {
        margin-top: 10px;

        b {
            font-weight: 700;
        }
    }

    .update-log {
        ol {
            display: block;
            list-style-type: decimal;
            margin-block-start: 1em;
            margin-block-end: 1em;
            margin-inline-start: 0;
            margin-inline-end: 0;
            padding-inline-start: 40px;
        }
    }
}
</style>