更新

src/components/OneFile/OneFile.vue

@@ -0,0 +1,104 @@
+<template>
+    <div style="display:flex;flex-direction:row;flex-wrap: nowrap">
+        <div style="display: flex;flex-direction:column;flex-wrap: nowrap">
+            <div class="PageHeader">
+                <br/>
+                <el-page-header  @back="goBack" style="justify-content:left;display: flex;">
+                    <div slot="title" style="font-size:23px;font-weight: 600;"></div>
+                    <div slot="content" class="test" style="font-size:23px;font-weight: 600;">
+                        <div>OneFile</div>
+                    </div>
+                </el-page-header>
+            </div>
+            <div class="PageContent" style="display: flex;flex-direction: column;flex-wrap: nowrap">
+                <el-card style="border: none">
+                    <el-image :src="require('@/assets/images/oneFile.png')"></el-image>
+                    <span style="text-align: left;display: flex;flex-direction: row;justify-content: flex-start;margin-top: 15px">
+                        OneFile 汇集了一个文件、运行简单、一看就懂的开源项目。 包括：游戏、编译器、服务器、工具、实用库等有趣的开源项目，而且复制代码就能跑，点击即可在线查看源码和试玩。
+                    </span>
+                    <div style="margin-top: 20px">
+                        <template>
+                            <el-table
+                                border
+                                :data="tableData"
+                                style="width: 100%;box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);border-radius: 10px;border: none">
+                                <el-table-column
+                                    prop="name"
+                                    label="名称"
+                                    width="130">
+                                </el-table-column>
+                                <el-table-column
+                                    prop="language"
+                                    label="语言"
+                                    width="130">
+                                </el-table-column>
+                                <el-table-column
+                                    prop="description"
+                                    label="描述">
+                                </el-table-column>
+                            </el-table>
+                        </template>
+                    </div>
+                    <el-card style="border: none;margin-top: 20px">
+                        <div style="display: flex;flex-direction: column;flex-wrap: nowrap;justify-content: flex-start;text-align: left">
+                            <b>「OneFile」:</b><span>一个开源项目，在这里你可以找到有趣运行简单的程序。同时它也是一个编程挑战，你也可以提交一个文件接受挑战。<el-link><b>点击加入</b></el-link> OneFile 编程挑战，一个文件而已就写点有趣的代码吧！</span>
+                        </div>
+                    </el-card>
+                </el-card>
+
+
+            </div>
+        </div>
+        <RightTools></RightTools>
+    </div>
+</template>
+
+<script>
+import RightTools from "@/components/Home/RightTools.vue";
+
+export default {
+    name: "OneFile",
+    components: {RightTools},
+    data(){
+        return{
+            tableData: [{
+                date: '2016-05-02',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1518 弄'
+            }, {
+                date: '2016-05-04',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1517 弄'
+            }, {
+                date: '2016-05-01',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1519 弄'
+            }, {
+                date: '2016-05-03',
+                name: '王小虎',
+                address: '上海市普陀区金沙江路 1516 弄'
+            }]
+        }
+    },
+    methods:{
+        goBack() {
+            window.history.go(-1);
+        },
+    }
+}
+</script>
+
+<style scoped>
+::v-deep .el-page-header__left{
+    left:10px;
+}
+::v-deep .el-page-header__content{
+    flex:1;
+}
+::v-deep .el-table {
+    tr th,
+    tr td {
+        border-right: none;
+    }
+}
+</style>