diff --git a/public/header1.png b/public/header1.png
new file mode 100644
index 0000000..b8784fe
Binary files /dev/null and b/public/header1.png differ
diff --git a/public/header2.jpg b/public/header2.jpg
new file mode 100644
index 0000000..aea451f
Binary files /dev/null and b/public/header2.jpg differ
diff --git a/public/roll_1.jpg b/public/roll_1.jpg
new file mode 100644
index 0000000..ef49ee2
Binary files /dev/null and b/public/roll_1.jpg differ
diff --git a/public/roll_2.jpg b/public/roll_2.jpg
new file mode 100644
index 0000000..a753534
Binary files /dev/null and b/public/roll_2.jpg differ
diff --git a/public/roll_3.jpg b/public/roll_3.jpg
new file mode 100644
index 0000000..199a236
Binary files /dev/null and b/public/roll_3.jpg differ
diff --git a/public/roll_4.jpg b/public/roll_4.jpg
new file mode 100644
index 0000000..02e7c29
Binary files /dev/null and b/public/roll_4.jpg differ
diff --git a/src/plugins/ant-design-vue.js b/src/plugins/ant-design-vue.js
index af30def..12e3833 100644
--- a/src/plugins/ant-design-vue.js
+++ b/src/plugins/ant-design-vue.js
@@ -1,5 +1,5 @@
 import Vue from 'vue'
-import { Pagination, Button, LocaleProvider, Layout, Menu, Dropdown, Icon, Tabs, List, Card, Modal, Checkbox, Input, FormModel, message, Avatar, Divider, PageHeader, Breadcrumb, Upload, Statistic, Table, DatePicker, InputNumber, Collapse, Tag, Tooltip, Select, Comment, Popconfirm, Popover, Rate } from 'ant-design-vue'
+import { Pagination, Button, LocaleProvider, Layout, Menu, Dropdown, Icon, Tabs, List, Card, Modal, Checkbox, Input, FormModel, message, Descriptions, Carousel, Avatar, Divider, PageHeader, Breadcrumb, Upload, Switch, Statistic, Radio, Table, DatePicker, InputNumber, Collapse, Form, Steps, Tag, Tooltip, Select, Comment, Popconfirm, Popover, Rate, Result, Drawer } from 'ant-design-vue'
 import { Col, Row } from 'ant-design-vue/lib/grid'
 import BreadcrumbItem from 'ant-design-vue/lib/breadcrumb/BreadcrumbItem'
 import BreadcrumbSeparator from 'ant-design-vue/lib/breadcrumb/BreadcrumbSeparator'
@@ -10,6 +10,7 @@ import Meta from 'ant-design-vue/lib/card/Meta'
 Vue.component(LocaleProvider.name, LocaleProvider)
 Vue.component(Pagination.name, Pagination)
 Vue.component(Button.name, Button)
+Vue.component(Button.Group.name, Button.Group)
 Vue.component(Layout.name, Layout)
 Vue.component(Layout.Header.name, Layout.Header)
 Vue.component(Layout.Sider.name, Layout.Sider)
@@ -57,3 +58,42 @@ Vue.component(Comment.name, Comment)
 Vue.component(Popconfirm.name, Popconfirm)
 Vue.component(Popover.name, Popover)
 Vue.component(Rate.name, Rate)
+Vue.component(PageHeader.name, PageHeader)
+Vue.component(Descriptions.name, Descriptions)
+Vue.component(Carousel.name, Carousel)
+Vue.component(Input.Search.name, Input.Search)
+Vue.component(Descriptions.Item.name, Descriptions.Item)
+Vue.component(Avatar.name, Avatar)
+Vue.component(FormModel.name, FormModel)
+Vue.component(FormModel.Item.name, FormModel.Item)
+Vue.component(Select.name, Select)
+Vue.component(Select.Option.name, Select.Option)
+Vue.component(DatePicker.name, DatePicker)
+Vue.component(Switch.name, Switch)
+Vue.component(Checkbox.name, Checkbox)
+Vue.component(Checkbox.Group.name, Checkbox.Group)
+Vue.component(Radio.name, Radio)
+Vue.component(Radio.Group.name, Radio.Group)
+Vue.component(Radio.Button.name, Radio.Button)
+Vue.component(Input.name, Input)
+Vue.component(Table.name, Table)
+Vue.component(Tag.name, Tag)
+Vue.component(Divider.name, Divider)
+Vue.component(Input.TextArea.name, Input.TextArea)
+Vue.component(Comment.name, Comment)
+Vue.component(Tooltip.name, Tooltip)
+Vue.component(Breadcrumb.name, Breadcrumb)
+Vue.component(Breadcrumb.Item.name, Breadcrumb.Item)
+Vue.component(Form.Item.name, Form.Item)
+Vue.component(Steps.name, Steps)
+Vue.component(Steps.Step.name, Steps.Step)
+Vue.component(Col.name, Col)
+Vue.component(Row.name, Row)
+Vue.component(Card.Meta.name, Card.Meta)
+Vue.prototype.$message = message
+// Vue.prototype.$router = router
+Vue.component(Upload.name, Upload)
+Vue.component(Rate.name, Rate)
+Vue.component(Result.name, Result)
+// Vue.component(Drawer.name, Drawer)
+Vue.use(Drawer)
diff --git a/src/router/index.js b/src/router/index.js
index 17e0362..232be52 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -121,6 +121,36 @@ const routes = [
     path: '/developer_finance',
     name: 'DeveloperFinance',
     component: () => import('../views/Developer_finance')
+  },
+  {
+    path: '/single_game',
+    name: 'Single_game',
+    component: () => import('../views/Single_game.vue')
+  },
+  {
+    path: '/admin',
+    name: 'Admin',
+    component: () => import('../views/Admin.vue')
+  },
+  {
+    path: '/racing',
+    name: 'Racing',
+    component: () => import('../views/Racing.vue')
+  },
+  {
+    path: '/register',
+    name: 'Register',
+    component: () => import('../views/Register.vue')
+  },
+  {
+    path: '/register_email',
+    name: 'Register_email',
+    component: () => import('../views/Register_email.vue')
+  },
+  {
+    path: '/support_developer',
+    name: 'Support_developer',
+    component: () => import('../views/Support_developer.vue')
   }
 ]
 
@@ -141,3 +171,8 @@ const router = new VueRouter({
 // })
 
 export default router
+const originalPush = VueRouter.prototype.push
+
+VueRouter.prototype.push = function push (location) {
+  return originalPush.call(this, location).catch(err => err)
+}
diff --git a/src/static/reset.less b/src/static/reset.less
index de719c7..776660b 100644
--- a/src/static/reset.less
+++ b/src/static/reset.less
@@ -47,5 +47,37 @@
 .ant-tooltip-inner {
   color: greenyellow;
 }
+.ant-comment {
+  color: white;
+}
+.ant-avatar > .alt-avatar-alter {
+  color: white;
+}
+.ant-radio-wrapper {
+  color: white;
+}
+.ant-descriptions-item {
+  color: white;
+}
+.ant-descriptions-title {
+  color: white;
+}
+.ant-descriptions-item-label {
+  color: white;
+}
+.ant-descriptions-item-content {
+  color: white;
+}
+.ant-comment-content-author-name {
+  color: white;
+}
+.ant-menu.ant-menu-inline.ant-menu-root.ant-menu-dark {
+  height: 400px;
+}
+.ant-form.ant-form-horizontal {
+  border-style: dashed;
+  border-color: dodgerblue;
+  border-radius: 25px;
+}
 
 
diff --git a/src/views/Admin.vue b/src/views/Admin.vue
new file mode 100644
index 0000000..da741e2
--- /dev/null
+++ b/src/views/Admin.vue
@@ -0,0 +1,317 @@
+<template>
+  <div>
+    <a-row type="flex" justify="center" align="top">
+      <a-col :span="4">
+        <a-avatar :size="100" icon="user" style="margin-top: 50px; color: dodgerblue"/>
+        <br />
+        <strong style="font-size: 25px;margin-top: 30px; margin-left: 10px">admin</strong>
+      </a-col>
+      <a-col :span="16">
+        <a-tabs default-active-key="1" @change="callback"
+            style="width: 600px; color: white">
+          <a-tab-pane key="1" tab="Create users">
+            <a-form-model ref="ruleForm" :model="form" :label-col="labelCol" :wrapper-col="wrapperCol">
+              <a-form-model-item label="Account name" placeholder="please input the account name">
+                <a-input v-model="form.name"/>
+              </a-form-model-item>
+              <a-form-model-item label="E-mail">
+                <a-input v-model="form.email"/>
+              </a-form-model-item>
+              <a-form-model-item label="Password">
+                <a-input v-model="form.password" type="password"/>
+              </a-form-model-item>
+              <a-form-model-item label="Account role">
+                <a-radio-group v-model="form.role">
+                  <a-radio value="p">
+                    Player
+                  </a-radio>
+                  <a-radio value="d">
+                    Developer
+                  </a-radio>
+                  <a-radio value="a">
+                    Admin
+                  </a-radio>
+                </a-radio-group>
+              </a-form-model-item>
+              <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+                <a-button type="primary" @click="onSubmit" style="margin-left: 200px">
+                  Create
+                </a-button>
+                <a-button style="margin-left: 2px" @click="resetForm">
+                  Cancel
+                </a-button>
+              </a-form-model-item>
+            </a-form-model>
+          </a-tab-pane>
+          <a-tab-pane key="2" tab="Modify Profiles">
+            <a-input-search
+              placeholder="input user id/name/e-mail"
+              enter-button="Search"
+              size="small"
+              @search="onSearch"
+              style="width: 400px"
+            />
+            <br /><br />
+            <a-descriptions :model="profile" title="User Info">
+              <a-descriptions-item label="User ID" v-model="profile.user_id">
+                {{profile.user_id}}
+              </a-descriptions-item>
+              <a-descriptions-item label="User name" v-model="profile.name">
+                {{profile.name}}
+              </a-descriptions-item>
+              <a-descriptions-item label="User E-mail" v-model="profile.email">
+                {{profile.email}}
+              </a-descriptions-item>
+              <a-descriptions-item label="balance" v-model="profile.balance">
+                {{profile.balance}}
+              </a-descriptions-item>
+              <a-descriptions-item label="role" v-model="profile.role">
+                {{profile.role}}
+              </a-descriptions-item>
+              <a-descriptions-item label="bio" v-model="profile.bio">
+                {{profile.bio}}
+              </a-descriptions-item>
+              <a-descriptions-item label="is_online" v-model="profile.is_online">
+                {{profile.is_online}}
+              </a-descriptions-item>
+              <a-descriptions-item label="created_at" v-model="profile.created_at">
+                {{profile.created_at}}
+              </a-descriptions-item>
+              <a-descriptions-item label="is_locked" v-model="profile.is_locked" >
+                {{profile.is_locked}}
+              </a-descriptions-item>
+            </a-descriptions>
+            <a-button type="primary" style="margin-top: 10px" @click="changeStatus">
+              ChangeLockStatus
+            </a-button>
+            <a-radio-group :value="current_role" @change="handleRoleChange" style="margin-left: 10px">
+              <a-radio-button value="a">
+                Admin
+              </a-radio-button>
+              <a-radio-button value="d">
+                Developer
+              </a-radio-button>
+              <a-radio-button value="p">
+                Player
+              </a-radio-button>
+            </a-radio-group>
+          </a-tab-pane>
+          <a-tab-pane key="3" tab="Upload Documents">
+            <div>
+              <strong style="font-size: 25px; margin-top: 20px">Upload User Document</strong>
+              <br /><br />
+              <a-upload
+                name="manual"
+                :multiple="true"
+                action="http://10.21.40.23/api/admin/manual"
+                accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
+                :headers="headers"
+                @change="handleChange"
+                style="margin-left:20px;margin-top: 100px"
+              >
+                <a-button> <a-icon type="upload" /> Click to Upload </a-button>
+              </a-upload>
+              <br /><br />
+            </div>
+            <div>
+              <strong style="font-size: 25px; margin-top: 20px">Upload Developer Document</strong>
+              <br /><br />
+              <a-upload
+                name="file"
+                :multiple="true"
+                action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
+                :headers="headers"
+                @change="handleChange"
+                style="margin-left:20px;margin-top: 100px"
+              >
+                <a-button> <a-icon type="upload" /> Click to Upload </a-button>
+              </a-upload>
+            </div>
+          </a-tab-pane>
+        </a-tabs>
+      </a-col>
+    </a-row>
+  </div>
+</template>
+
+<script>
+import qs from 'qs'
+
+export default {
+  name: 'Admin',
+  data () {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        name: '',
+        email: '',
+        password: '',
+        role: ''
+      },
+      profile: {
+        user_id: 'x',
+        name: '',
+        email: '',
+        avatar: '',
+        balance: '',
+        role: '',
+        bio: '',
+        is_online: '',
+        created_at: '',
+        is_locked: ''
+      },
+      current_role: '',
+      headers: {
+        authorization: 'authorization-text'
+      }
+    }
+  },
+  methods: {
+    callback (key) {
+      console.log(key)
+    },
+    onSubmit () {
+      console.log('submit!', this.form)
+      var obji = {
+        user_email: this.form.email,
+        user_name: this.form.name,
+        password: this.form.password,
+        role: this.form.role
+      }
+      obji = qs.stringify(obji)
+      this.$http.post('/api/admin/user/create', obji)
+        .then((response) => {
+          console.log(response)
+          // if (response.status === 200 && response.code === 0) {
+          //   this.$message.success('Create successfully')
+          // } else {
+          //   this.$message.error('Error!')
+          // }
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Create successfully')
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    onSearch (value) {
+      console.log(value)
+      // const result = this.$http.get('/api/admin/user/info', value)
+      // console.log(result)
+      // this.profile = result.data
+      // console.log(this.profile)
+      this.$http.get('/api/admin/user/info', {
+        params: {
+          admin_id: 1,
+          user_name: value
+        }
+      })
+        .then((response) => {
+          console.log(response.data.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Query successfully')
+            // this.profile = response.data.data
+            this.profile.user_id = response.data.data.id.toString()
+            this.profile.name = response.data.data.name
+            this.profile.email = response.data.data.email
+            this.profile.avatar = response.data.data.avatar
+            this.profile.balance = response.data.data.balance.toString()
+            this.profile.role = response.data.data.role
+            this.profile.bio = response.data.data.bio
+            this.profile.is_online = response.data.data.online.toString()
+            this.profile.created_at = response.data.data.createdAt.toString()
+            this.profile.is_locked = response.data.data.locked.toString()
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    changeStatus () {
+      var obji = {
+        user_id: Number(this.profile.user_id),
+        user_email: this.profile.user_email,
+        user_name: this.profile.user_name,
+        lock: Boolean(this.profile.lock)
+      }
+      obji = qs.stringify(obji)
+      this.$http.post('/api/admin/user/account/lock', obji)
+        .then((response) => {
+          console.log(response.data)
+          // if (response.status === 200 && response.code === 0) {
+          //   this.$message.success('Create successfully')
+          // } else {
+          //   this.$message.error('Error!')
+          // }
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Change successfully')
+            if (this.profile.is_locked === 'ture') {
+              this.profile.is_locked = 'false'
+            } else {
+              this.profile.is_locked = 'ture'
+            }
+          } else {
+            this.$message.error('Error!')
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    handleRoleChange (e) {
+      this.$http.post('/api/admin/user/assign', {
+        params: {
+          admin_id: 1,
+          user_id: this.profile.user_id,
+          role: e.target.value
+        }
+      })
+        .then((response) => {
+          console.log(response)
+          // if (response.status === 200 && response.code === 0) {
+          //   this.$message.success('Create successfully')
+          // } else {
+          //   this.$message.error('Error!')
+          // }
+          if (response.status === 200) {
+            if (this.profile.role !== e.target.value) {
+              this.$message.success('Change successfully')
+              this.profile.role = e.target.value
+            }
+          } else {
+            this.$message.error('Error!')
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    resetForm () {
+      console.log(this.form)
+      this.$refs.ruleForm.resetFields()
+    },
+    handleChange (info) {
+      if (info.file.status !== 'uploading') {
+        console.log(info.file, info.fileList)
+      }
+      if (info.file.status === 'done') {
+        this.$message.success(`${info.file.name} file uploaded successfully`)
+      } else if (info.file.status === 'error') {
+        this.$message.error(`${info.file.name} file upload failed.`)
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Racing.vue b/src/views/Racing.vue
new file mode 100644
index 0000000..db522f3
--- /dev/null
+++ b/src/views/Racing.vue
@@ -0,0 +1,13 @@
+<template>
+<p>Racing games</p>
+</template>
+
+<script>
+export default {
+  name: 'Racing'
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Register.vue b/src/views/Register.vue
index 461bd0f..c361dbd 100644
--- a/src/views/Register.vue
+++ b/src/views/Register.vue
@@ -1,9 +1,300 @@
 <template>
-  <h1>here</h1>
+  <div>
+    <a-row>
+      <a-col :span="12">
+        <a-form-model
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="labelCol"
+          :wrapper-col="wrapperCol"
+          style="padding:20px;margin-left: 80px;margin-top: 60px; width: 400px;height:400px">
+          <a-form-model-item label="Name">
+            <a-input
+              v-model="form.name"
+              placeholder="please input your name"
+              style="width: 250px"/>
+          </a-form-model-item>
+          <a-form-model-item label="E-mail">
+            <a-input
+              v-model="form.email"
+              placeholder="please input the binding e-mail"
+              style="width: 250px"/>
+          </a-form-model-item>
+          <a-form-model-item label="Password">
+          <a-input
+            v-model="form.password"
+            placeholder="please input the password"
+            type="password"
+            style="width: 250px"/>
+          </a-form-model-item>
+          <a-form-model-item label="Role">
+            <a-radio-group v-model="form.role">
+              <a-radio value="p">
+                Player
+              </a-radio>
+              <a-radio value="d">
+                Developer
+              </a-radio>
+            </a-radio-group>
+          </a-form-model-item>
+          <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
+            <a-button type="primary" @click="onSubmit">
+              Confirm
+            </a-button>
+            <a-drawer
+              title="E-mail Confirm"
+              placement="right"
+              :closable="false"
+              :visible="visible"
+              :after-visible-change="afterVisibleChange"
+              @close="onClose"
+              width="520"
+            >
+              <a-form-model :model = "conForm">
+                <a-form-model-item>
+                  <p style="margin-left: 30px">
+                    We have sent an account activation code to your e-mail box. Please enter the activation code in
+                    the input box below
+                  </p>
+                </a-form-model-item>
+                  <a-form-model-item style="width: 250px;margin-left: 50px">
+                  <a-input v-model="conForm.confirm" placeholder="Activation code"/>
+                </a-form-model-item>
+                <a-form-model-item style="margin-left: 300px">
+                  <a-button type="primary" @click="toConfirm">
+                    Submit
+                  </a-button>
+                </a-form-model-item>
+                <a-form-model-item>
+                  <a-button type="primary" style="margin-left: 300px" @click="reSend">
+                    Resend code
+                  </a-button>
+                </a-form-model-item>
+              </a-form-model>
+            </a-drawer>
+            <a-button style="margin-left: 10px;">
+              Cancel
+            </a-button>
+          </a-form-model-item>
+        </a-form-model>
+      </a-col>
+      <a-col :span="12">
+        <div><img
+          src="https://www.sustech.edu.cn/wp-content/themes/twentyseventeen/images/sustech-logo-cn.png"
+          alt="Game Pic"
+          style="margin-left: 200px"
+        >
+        </div>
+      </a-col>
+    </a-row>
+<!--    <a-form-model-->
+<!--      ref="ruleForm"-->
+<!--      :model="form"-->
+<!--      :rules="rules"-->
+<!--      :label-col="labelCol"-->
+<!--      :wrapper-col="wrapperCol"-->
+<!--      style="padding:20px;margin-left: 80px;margin-top: 60px; width: 400px;height:400px">-->
+<!--      <a-form-model-item label="Name">-->
+<!--        <a-input-->
+<!--          v-model="form.name"-->
+<!--          placeholder="please input your name"-->
+<!--          style="width: 250px"/>-->
+<!--      </a-form-model-item>-->
+<!--      <a-form-model-item label="E-mail">-->
+<!--        <a-input-->
+<!--          v-model="form.email"-->
+<!--          placeholder="please input the binding e-mail"-->
+<!--          style="width: 250px"/>-->
+<!--      </a-form-model-item>-->
+<!--      <a-form-model-item label="Password">-->
+<!--      <a-input-->
+<!--        v-model="form.password"-->
+<!--        placeholder="please input the password"-->
+<!--        type="password"-->
+<!--        style="width: 250px"/>-->
+<!--      </a-form-model-item>-->
+<!--      <a-form-model-item label="Role">-->
+<!--        <a-radio-group v-model="form.role">-->
+<!--          <a-radio value="p">-->
+<!--            Player-->
+<!--          </a-radio>-->
+<!--          <a-radio value="d">-->
+<!--            Developer-->
+<!--          </a-radio>-->
+<!--        </a-radio-group>-->
+<!--      </a-form-model-item>-->
+<!--      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">-->
+<!--        <a-button type="primary" @click="onSubmit">-->
+<!--            Create-->
+<!--          </a-button>-->
+<!--        <a-button style="margin-left: 10px;">-->
+<!--          Cancel-->
+<!--        </a-button>-->
+<!--      </a-form-model-item>-->
+<!--    </a-form-model>-->
+<!--    <div><img-->
+<!--      src="https://www.sustech.edu.cn/wp-content/themes/twentyseventeen/images/sustech-logo-cn.png"-->
+<!--      alt="Game Pic"-->
+<!--      style="margin-left: 200px"-->
+<!--    >-->
+<!--    </div>-->
+  </div>
 </template>
-<script>
 
+<script>
+import qs from 'qs'
+export default {
+  name: 'Register',
+  data () {
+    return {
+      labelCol: { span: 4 },
+      wrapperCol: { span: 14 },
+      form: {
+        name: '',
+        email: '',
+        password: '',
+        role: ''
+      },
+      visible: false,
+      conForm: {
+        confirm: ''
+      },
+      rules: {
+        name: [
+          { required: true, message: 'Please input user name', trigger: 'blur' },
+          { min: 1, max: 8, message: 'Length should be 1 to 8', trigger: 'blur' }
+        ],
+        email: [
+          { required: true, message: 'Please input user email', trigger: 'blur' },
+          { validator: this.validatorEmail }
+        ],
+        password: [
+          { required: true, message: 'Please input account password', trigger: 'blur' },
+          { min: 6, max: 8, message: 'Length should be 6 to 8', trigger: 'blur' },
+          { validator: this.validatorPassword }
+        ]
+      }
+    }
+  },
+  methods: {
+    onSubmit () {
+      this.visible = true
+      // this.$refs.ruleForm.validate(valid => {
+      //   // 校验未全部通过，结束当前提交
+      //   if (!valid) return false
+      // })
+      console.log('submit!', this.form)
+      var that = this
+      var obj = {
+        name: this.form.name,
+        email: this.form.email,
+        password: this.form.password,
+        role: this.form.role
+      }
+      obj = qs.stringify(obj)
+      this.$http.post('/api/user/register', obj)
+        .then((response) => {
+          console.log(response)
+          if (response.status === 200) {
+            that.$message.success('Register successfully')
+          } else {
+            // that.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+      // this.$http.post('10.21.21.230/register', {
+      //   name: this.form.name,
+      //   email: this.form.email,
+      //   password: this.form.password,
+      //   role: this.form.role
+      // })
+      //   .then((response) => {
+      //     console.log(response)
+      //     if (response.status === 200) {
+      //       that.$message.success('Register successfully')
+      //     } else {
+      //       that.$message.error('Error!')
+      //     }
+      //   })
+      //   .catch((error) => {
+      //     console.log(error)
+      //   })
+    },
+    validatorEmail (rule, value, callback) {
+      const phoneReg = /@+/
+      if (!phoneReg.test(value)) {
+        callback(new Error('Please input a valid e-mail'))
+        return
+      }
+      callback()
+    },
+    validatorPassword (rule, value, callback) {
+      const phoneReg = /[A-Z0-9]+/
+      if (!phoneReg.test(value)) {
+        callback(new Error('Please input a valid password'))
+        return
+      }
+      callback()
+    },
+    afterVisibleChange (val) {
+      console.log('visible', val)
+    },
+    showDrawer () {
+      this.visible = true
+    },
+    onClose () {
+      this.visible = false
+    },
+    toConfirm () {
+      console.log('submit!', this.conForm)
+      console.log('submit email!', this.form.email)
+      var objc = {
+        email: this.form.email,
+        confirm: parseInt(this.conForm.confirm)
+      }
+      objc = qs.stringify(objc)
+      this.$http.post('/api/user/register/confirm', objc)
+        .then((response) => {
+          console.log(response)
+          if (response.status === 200 && response.code === 0) {
+            this.$message.success('Activate successfully')
+          } else {
+            // that.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    reSend () {
+      console.log('submit!', this.form)
+      var objc = {
+        email: this.form.email
+      }
+      objc = qs.stringify(objc)
+      this.$http.post('/api/user/register/resend', objc)
+        .then((response) => {
+          console.log(response)
+          if (response.status === 200 && response.code === 0) {
+            this.$message.success('Activate successfully')
+          } else {
+            // that.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    }
+  }
+}
 </script>
-<style>
+
+<style scoped>
 
 </style>
diff --git a/src/views/Register_email.vue b/src/views/Register_email.vue
new file mode 100644
index 0000000..0514a94
--- /dev/null
+++ b/src/views/Register_email.vue
@@ -0,0 +1,100 @@
+<template>
+  <div>
+    <a-form-model :model = "form" style="margin-left: 200px;margin-right: 200px; margin-top: 100px">
+      <a-form-model-item>
+        <p style="color: white; margin-left: 300px;font-size: 25px">
+          E-mail Confirmation
+        </p>
+        <p style="color: white; margin-left: 30px">
+          We have sent an account activation code to your e-mail box. Please enter the activation code in
+          the input box below
+        </p>
+      </a-form-model-item>
+      <a-form-model-item style="width: 300px; margin-left: 275px">
+      <a-input v-model="form.confirm" placeholder="Activation code"/>
+    </a-form-model-item>
+    <a-form-model-item style="margin-left: 600px">
+      <a-button type="primary" @click="onSubmit">
+        Submit
+      </a-button>
+    </a-form-model-item>
+    <a-form-model-item>
+      <a-button style="margin-left: 10px" @click="reSend">
+        resend code
+      </a-button>
+    </a-form-model-item>
+    </a-form-model>
+  </div>
+</template>
+
+<script>
+import qs from 'qs'
+
+export default {
+  name: 'Register_email',
+  data () {
+    return {
+      form: {
+        confirm: ''
+      },
+      email: ''
+    }
+  },
+  created () {
+    this.initialPage()
+  },
+  methods: {
+    initialPage () {
+      console.log('router query here', this.$route.query.target_email)
+      this.email = this.$route.query.target_email
+      console.log('email!', this.email)
+    },
+    onSubmit () {
+      console.log('submit!', this.form)
+      console.log('submit email!', this.email)
+      var objc = {
+        email: this.email,
+        confirm: parseInt(this.form.activation)
+      }
+      objc = qs.stringify(objc)
+      this.$http.post('/api/user/register/confirm', objc)
+        .then((response) => {
+          console.log(response)
+          if (response.status === 200 && response.code === 0) {
+            this.$message.success('Activate successfully')
+          } else {
+            // that.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    reSend () {
+      console.log('submit!', this.form)
+      var objc = {
+        email: this.email
+      }
+      objc = qs.stringify(objc)
+      this.$http.post('/api/user/register/resend', objc)
+        .then((response) => {
+          console.log(response)
+          if (response.status === 200 && response.code === 0) {
+            this.$message.success('Activate successfully')
+          } else {
+            // that.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Single_game.vue b/src/views/Single_game.vue
new file mode 100644
index 0000000..6c008f8
--- /dev/null
+++ b/src/views/Single_game.vue
@@ -0,0 +1,323 @@
+<template>
+<div>
+  <a-breadcrumb separator=">" style="color: white; margin-top: 10px; margin-left: 10px">
+    <router-link to="/store">
+      <a-breadcrumb-item style="color: white">Store</a-breadcrumb-item>
+    </router-link>
+    <router-link to="/racing">
+      <a-breadcrumb-item style="color: white">Racing</a-breadcrumb-item>
+    </router-link>
+    <a-breadcrumb-item style="color: white">{{this.game.name}}</a-breadcrumb-item>
+  </a-breadcrumb>
+  <a-row type="flex" justify="center" align="top" style="margin-top: 30px">
+    <a-col :span="6.5">
+      <img :src="this.game_url" alt="game line" style="width: 350px; height: 238px">
+    </a-col>
+    <a-col :span="6.5">
+      <video width="350px" height="238px" controls>
+        <source src="https://www.sustech.edu.cn/wp-content/uploads/物理系林君浩团队在本征磁性拓扑绝缘体表面精细结构表征研究中取得重要进展.mp4" type="video/mp4">
+        <source src="https://www.sustech.edu.cn/wp-content/uploads/物理系林君浩团队在本征磁性拓扑绝缘体表面精细结构表征研究中取得重要进展.mp4" type="video/ogg" />
+        <source src="https://www.sustech.edu.cn/wp-content/uploads/物理系林君浩团队在本征磁性拓扑绝缘体表面精细结构表征研究中取得重要进展.mp4" type="video/webm" />
+        Your browser does not support the video tag.
+      </video>
+    </a-col>
+  </a-row>
+  <a-row type="flex" justify="center">
+    <a-col :span="13">
+      <strong style="font-size: 16px">Score</strong>
+      <a-rate style="margin-left: 16px" v-model="score" />
+      <br />
+      <br />
+      <strong style="font-size: 16px">Description</strong>
+      <br />
+      <p>price: {{this.game.price}}</p>
+      <p>
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+        xxxxxxxxxxxxxxxxx
+      </p>
+      </a-col>
+  </a-row>
+  <a-button v-if="game_status === 'purchase'" type="primary" style="margin-left: 800px; margin-top: 20px" @click="purchaseGame">
+    Purchase
+  </a-button>
+  <a-button v-else-if="game_status === 'download'" type="primary" style="margin-left: 800px; margin-top: 20px" @click="downloadGame">
+    Download
+  </a-button>
+  <a-button v-else type="primary" style="margin-left: 800px; margin-top: 20px" disabled="true" @click="downloadGame">
+    Download
+  </a-button>
+  <br />
+  <strong style="font-size: 25px; margin-left: 300px">Comments</strong>
+  <br />
+  <div style="margin-left: 300px; margin-top: 20px; width: 600px">
+    <a-list
+      v-if="comments.length"
+      :data-source="comments"
+      :header="`${comments.length} ${comments.length > 1 ? 'replies' : 'reply'}`"
+      item-layout="horizontal"
+    >
+      <div v-for="(comment, index) in comments" :key="index">
+        <a-list-item slot="renderItem" slot-scope="comment">
+          <a-comment
+            :author="comment.user_name"
+            :avatar="comment.avatar"
+            :content="comment.content"
+            :datetime="comment.datetime"
+          />
+        </a-list-item>
+        <br />
+        <a-rate :value="comment.grade" />
+      </div>
+    </a-list>
+    <a-comment>
+      <a-avatar
+        slot="avatar"
+        src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"
+        alt="Han Solo"
+      />
+      <div slot="content">
+        <a-form :form="commentForm" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
+          <a-form-item>
+            <strong style="font-size: 16px">Score</strong>
+            <a-rate style="margin-left: 16px" v-model="this.commentForm.score" />
+          </a-form-item>
+          <a-form-item>
+            <a-textarea :rows="4" v-model="this.commentForm.content" />
+          </a-form-item>
+          <a-form-item>
+          </a-form-item>
+          <a-form-item>
+            <a-button html-type="submit" :loading="submitting" type="primary" @click="submitComments">
+              Add Comment
+            </a-button>
+          </a-form-item>
+        </a-form>
+      </div>
+    </a-comment>
+  </div>
+</div>
+</template>
+
+<script>
+import moment from 'moment'
+export default {
+  name: 'single_game',
+  data () {
+    return {
+      comments: [],
+      submitting: false,
+      value: '',
+      moment,
+      game: {},
+      score: 2,
+      game_url: '',
+      balance: 0,
+      game_status: 'purchase',
+      info_list: [],
+      commentForm: {
+        score: 0,
+        content: ''
+      }
+    }
+  },
+  created () {
+    this.initialPage()
+    this.gameStatus()
+    this.getScoreComment()
+  },
+  // watch: {
+  //   // 监测路由变化,只要变化了就调用获取路由参数方法将数据存储本组件即可
+  //   $route: 'getParams'
+  // },
+  methods: {
+    initialPage () {
+      console.log('router query here', this.$route.query.target_game)
+      this.game = this.$route.query.target_game
+      console.log('pass game here', this.game)
+      this.game_url = 'http://10.17.91.184/game/getPhoto/' + this.game.front_image
+      console.log('game_url', this.game_url)
+    },
+    // getParams () {
+    //   console.log('which game is here', this.$route.query.which_game)
+    //   var routerParams = this.$route.query.which_game
+    //   console.log('传来的参数==' + routerParams)
+    //   this.game = routerParams
+    // },
+    handleSubmit () {
+      if (!this.value) {
+        return
+      }
+
+      this.submitting = true
+
+      setTimeout(() => {
+        this.submitting = false
+        this.comments = [
+          {
+            author: 'Han Solo',
+            avatar: 'https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png',
+            content: this.value,
+            datetime: moment().fromNow()
+          },
+          ...this.comments
+        ]
+        this.value = ''
+      }, 1000)
+    },
+    handleChange (e) {
+      this.value = e.target.value
+    },
+    gameStatus () {
+      // var objj = {
+      //   user_id: '',
+      //   game_id: this.game.id
+      // }
+      this.$http.get('/game/status', {
+        headers: {
+          token: '4abb359b-81ab-4fb2-9717-36e3ac67d728'
+        },
+        params: {
+          game_id: this.game.id
+        }
+      })
+        .then((response) => {
+          console.log(response.data.data)
+          if (response.status === 200 && response.data.code === 0) {
+            console.log('query status return', response.data.data)
+            this.$message.success('Query successfully')
+            this.game_status = response.data.data
+            console.log('query status', this.game_status)
+            // this.profile = response.data.data
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    purchaseGame () {
+      var objj = {
+        token: ''
+      }
+      this.$http.get('/api/user/info', objj)
+        .then((response) => {
+          console.log(response.data.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Query successfully')
+            // this.profile = response.data.data
+            this.balance = response.data.data.balance
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+      if (this.balance >= this.game.price) {
+        var r = confirm('Are you sure to buy this game?')
+        if (r === true) {
+          var obji = {
+            user_id: 15752,
+            game_id: this.game.id
+          }
+          this.$http.post('/game/purchase', obji)
+            .then((response) => {
+              console.log(response.data)
+              // if (response.status === 200 && response.code === 0) {
+              //   this.$message.success('Create successfully')
+              // } else {
+              //   this.$message.error('Error!')
+              // }
+              if (response.status === 200 && response.data.code === 0) {
+                this.$message.success('Purchase successfully')
+              } else {
+                this.$message.error(response.data.msg)
+              }
+            })
+            .catch((error) => {
+              console.log(error)
+            })
+        }
+      } else {
+        alert('No sufficient funds')
+      }
+    },
+    downloadGame () {
+      var objj = {
+        user_id: '',
+        game_id: this.game.id
+      }
+      this.$http.get('/game/download', objj)
+        .then((response) => {
+          console.log(response.data.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Download successfully')
+            // this.profile = response.data.data
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    getScoreComment () {
+      this.$http.get('/comment/GID/' + this.game.id)
+        .then((response) => {
+          console.log(response.data.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Query comments successfully')
+            this.comments = response.data.info_list
+
+            // this.profile = response.data.data
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    submitComments () {
+      var obji = {
+        user_id: '',
+        game_id: this.game.id,
+        comments: this.commentForm.content,
+        score: this.commentForm.score
+      }
+      this.$http.post('/comment/submit', obji)
+        .then((response) => {
+          console.log(response.data)
+          // if (response.status === 200 && response.code === 0) {
+          //   this.$message.success('Create successfully')
+          // } else {
+          //   this.$message.error('Error!')
+          // }
+          if (response.status === 200 && response.data.code === 0) {
+            this.$message.success('Submit comment successfully')
+          } else {
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>
diff --git a/src/views/Store.vue b/src/views/Store.vue
index 37c7c29..d4674fb 100644
--- a/src/views/Store.vue
+++ b/src/views/Store.vue
@@ -1,60 +1,277 @@
 <template>
-  <div style="width: 256px">
+  <div>
+    <div style="margin: auto; text-align: center;">
+      <a-carousel style="width: 450px; display: inline-block;" arrows autoplay>
+        <div slot="prevArrow" class="custom-slick-arrow" style="left: 10px; zIndex: 1">
+          <a-icon type="left-circle" />
+        </div>
+        <div slot="nextArrow" class="custom-slick-arrow" style="right: 10px">
+          <a-icon type="right-circle" />
+        </div>
+        <div><img src="header1.png" alt="Game Pic"></div>
+        <div><img src="header2.jpg" alt="Game Pic"></div>
+        <div><img src="header1.png" alt="Game Pic"></div>
+        <div><img src="header2.jpg" alt="Game Pic"></div>
+      </a-carousel>
+    </div>
+    <a-input-search placeholder="search the game" style="width: 200px; margin-left: 900px; margin-top: 10px" @search="onSearch" />
+    <br />
     <a-button type="primary" size="large" style="margin-bottom: 16px" @click="toggleCollapsed">
       <a-icon :type="collapsed ? 'right-circle' : 'left-circle'" />
     </a-button>
-    <a-menu
-      :default-selected-keys="['1']"
-      mode="inline"
-      theme="dark"
-      :inline-collapsed="collapsed"
-    >
-      <a-menu-item key="1">
-        <a-icon type="smile" />
-        <span>All</span>
-      </a-menu-item>
-      <a-sub-menu key="sub1">
-        <span slot="title"><a-icon type="menu" /><span>Screenshots</span></span>
-        <a-menu-item key="5">
-          Racing
+    <a-row>
+      <a-col :span="6">
+        <div style="width: 256px">
+      <a-menu
+        :default-selected-keys="['All Games']"
+        mode="inline"
+        theme="dark"
+        :inline-collapsed="collapsed"
+        @click="handleClick"
+        v-model="menu_key"
+      >
+        <a-menu-item key="All Games">
+          <a-icon type="star" />
+          <span>All Games</span>
         </a-menu-item>
-      </a-sub-menu>
-      <a-sub-menu key="sub2">
-        <span slot="title"><a-icon type="highlight" /><span>Review</span></span>
-        <a-menu-item key="9">
-          Option 9
+        <a-menu-item key="Action">
+          <a-icon type="star" />
+          <span>Action</span>
         </a-menu-item>
-        <a-sub-menu key="sub3" title="Submenu">
-          <a-menu-item key="11">
-            Option 11
-          </a-menu-item>
-        </a-sub-menu>
-      </a-sub-menu>
-      <a-menu-item key="4">
-        <a-icon type="menu" /><span>Guides</span>
-      </a-menu-item>
-    </a-menu>
+        <a-menu-item key="Adventure">
+          <a-icon type="star" />
+          <span>Adventure</span>
+        </a-menu-item>
+        <a-menu-item key="Casual">
+          <a-icon type="star" />
+          <span>Casual</span>
+        </a-menu-item>
+        <a-menu-item key="Racing">
+          <a-icon type="star" />
+          <span>Racing</span>
+        </a-menu-item>
+      </a-menu>
+    </div>
+      </a-col>
+<!--      <a-col :span="18">-->
+        <strong style = "font-size: 25px;">{{this.menu_key[0]}}</strong>
+        <br />
+        <div v-for="(game, index) in games" :key="index">
+          <a-col :span="6">
+            <router-link to= "/single_game">
+              <a-card hoverable style="width: 200px;margin-top:20px;margin-left: 20px" @click="clickGame(game)">
+                <img
+                  slot="cover"
+                  alt="example"
+                  :src="urls[index]"
+                  height="100" width="100"
+                />
+              <a-card-meta :title="game.name" description="xxxxxxxx">
+              </a-card-meta>
+              </a-card>
+            </router-link>
+          </a-col>
+<!--          <div v-if="(index+1) % 3 === 0">-->
+<!--            <br />-->
+<!--          </div>-->
+<!--          <p>{{index}}</p>-->
+        </div>
+<!--        <br />-->
+<!--        <br />-->
+<!--        <a-pagination-->
+<!--          :default-current="1"-->
+<!--          :total="90"-->
+<!--          :defaultPageSize="9"-->
+<!--          style="margin-left: 700px; margin-top: 50px"-->
+<!--          @change="onChange"-->
+<!--        />-->
+<!--      </a-col>-->
+    </a-row>
+    <br />
+      <br />
+      <a-pagination
+        :default-current="1"
+        :total="90"
+        :defaultPageSize="9"
+        style="margin-left: 700px; margin-top: 50px"
+        @change="onChange"
+      />
   </div>
 </template>
 
 <script>
 // // @ is an alias to /src
+import qs from 'qs'
+
 export default {
   name: 'Store',
   components: {
   },
   data () {
     return {
+      menu_key: ['All Games'],
       collapsed: false,
-      selectedKeys: ['1'],
-      openKeys: ['sub1'],
-      preOpenKeys: ['sub1']
+      num_pages: 10,
+      current: 1,
+      games: [],
+      urls: {},
+      target_game: {},
+      search_game: ''
     }
   },
+  mounted () {
+    this.UpdateGate(this.menu_key[0])
+  },
   methods: {
+    // goToSDetails (id) {
+    //   this.$router.push({
+    //     path: '/single_game',
+    //     query: {
+    //       nameId: this.list[id].nameCn
+    //     }
+    //   })
+    // },
     toggleCollapsed () {
       this.collapsed = !this.collapsed
+    },
+    clickGame (game) {
+      this.$router.push({
+        path: '/single_game',
+        query: { target_game: game }
+      })
+    },
+    // onChange (a, b, c) {
+    //   console.log(a, b, c)
+    // },
+    onSearch (value) {
+      console.log(value)
+      this.$http.get('/game/list', {
+        params: {
+          tag: '',
+          name: value,
+          page: this.current - 1
+        }
+      })
+        .then((response) => {
+          console.log('type of urls', typeof this.urls)
+          console.log('reponse.data is here', response.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.games = response.data.data.content
+            console.log('Game Look here', this.games)
+            console.log('Length is here', this.games.length)
+            for (let i = 0; i < this.games.length; i++) {
+              console.log('Game[i] is here', this.games[i])
+              this.urls[i] = 'http://10.17.91.184/game/getPhoto/' + this.games[i].front_image
+              // var obji = { i: 'http://10.17.91.184/game/getPhoto/' + this.games[i].front_image }
+              // this.urls.assign(obji)
+            }
+            console.log('array urls', this.urls)
+            this.$message.success('Query successfully')
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
+    },
+    handleClick (e) {
+      console.log('click', e.key)
+      this.menu_key[0] = e.key
+      this.UpdateGate(this.menu_key[0], this.current)
+    },
+    onChange (current) {
+      this.current = current
+      this.UpdateGate(this.menu_key[0], this.current)
+    },
+    UpdateGate (menu, pagee) {
+      console.log('HERE', menu)
+      var tmp = menu
+      if (menu === 'All Games') {
+        tmp = ''
+      }
+      console.log('tmp', tmp)
+      console.log('pagee', pagee)
+      var obji = {
+        tag: tmp,
+        name: '',
+        page: this.current - 1
+      }
+      obji = qs.stringify(obji)
+      console.log(obji)
+      this.$http.get('/game/list', {
+        params: {
+          tag: tmp,
+          name: '',
+          page: this.current - 1
+        }
+      })
+        .then((response) => {
+          console.log('type of urls', typeof this.urls)
+          console.log('reponse.data is here', response.data)
+          if (response.status === 200 && response.data.code === 0) {
+            this.games = response.data.data.content
+            console.log('Game Look here', this.games)
+            console.log('Length is here', this.games.length)
+            for (let i = 0; i < this.games.length; i++) {
+              console.log('Game[i] is here', this.games[i])
+              this.urls[i] = 'http://10.17.91.184/game/getPhoto/' + this.games[i].front_image
+              // var obji = { i: 'http://10.17.91.184/game/getPhoto/' + this.games[i].front_image }
+              // this.urls.assign(obji)
+            }
+            console.log('array urls', this.urls)
+            this.$message.success('Query successfully')
+          } else {
+            // this.$message.error('Error!')
+            this.$message.error(response.data.msg)
+          }
+        })
+        .catch((error) => {
+          console.log(error)
+        })
     }
   }
 }
 </script>
+
+<style scoped>
+  .home-container {
+    text-align: left;
+    background: black;
+    color: #fff;
+    height: 100%;
+    /*width: 100%;*/
+  }
+
+  .ant-carousel >>> .slick-slide {
+    text-align: center;
+    height: 300px;
+    line-height: 300px;
+    background: #364d79;
+    overflow: hidden;
+  }
+
+  .ant-carousel >>> .custom-slick-arrow {
+    width: 25px;
+    height: 25px;
+    font-size: 25px;
+    color: #fff;
+    background-color: rgba(31, 45, 61, 0.11);
+    opacity: 0.3;
+  }
+  .ant-carousel >>> .custom-slick-arrow:before {
+    display: none;
+  }
+  .ant-carousel >>> .custom-slick-arrow:hover {
+    opacity: 0.5;
+  }
+
+  .ant-carousel >>> .slick-slide h3 {
+    color: #fff;
+  }
+
+  h3 {
+    color: #fff;
+  }
+</style>
diff --git a/src/views/Support_developer.vue b/src/views/Support_developer.vue
new file mode 100644
index 0000000..ec3dc32
--- /dev/null
+++ b/src/views/Support_developer.vue
@@ -0,0 +1,50 @@
+<template>
+  <div class="about_developer">
+    <a-button-group style="margin-left: 800px; margin-top: 30px">
+      <router-link to="/support">
+        <a-button>Player</a-button>
+      </router-link>
+      <a-button type="primary">
+        Developer
+      </a-button>
+    </a-button-group>
+    <br><br>
+    <strong  style="margin-left:30px; font-size: 36px; margin-top: 20px">Developer Document</strong>
+    <p style="margin-left:30px; width: 400px; margin-top: 30px">
+      First, xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    </p>
+    <p style="margin-left:30px; width: 600px; margin-top: 20px">
+      Second, xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    </p>
+    <p style="margin-left:30px; width: 400px; margin-top: 20px">
+      Third, xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+      xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx
+    </p>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'Support_developer'
+}
+</script>
+
+<style scoped>
+
+</style>