Commit e1c5cfb4 authored by sunxiwei's avatar sunxiwei

登录、注册ajax;

parent 8993c8ae
......@@ -9,9 +9,10 @@
"version": "0.0.0",
"dependencies": {
"@mdi/font": "7.0.96",
"axios": "^1.6.8",
"roboto-fontface": "*",
"vue": "^3.3.0",
"vuetify": "^3.0.0"
"vuetify": "^3.5.9"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
......@@ -758,6 +759,21 @@
"node": ">= 8"
}
},
"node_modules/asynckit": {
"version": "0.4.0",
"resolved": "https://registry.npmjs.org/asynckit/-/asynckit-0.4.0.tgz",
"integrity": "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="
},
"node_modules/axios": {
"version": "1.6.8",
"resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
"integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
"dependencies": {
"follow-redirects": "^1.15.6",
"form-data": "^4.0.0",
"proxy-from-env": "^1.1.0"
}
},
"node_modules/balanced-match": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
......@@ -818,6 +834,17 @@
"fsevents": "~2.3.2"
}
},
"node_modules/combined-stream": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/combined-stream/-/combined-stream-1.0.8.tgz",
"integrity": "sha512-FQN4MRfuJeHf7cBbBMJFXhKSDq+2kAArBlmRBvcvFE5BB1HZKXtSFASDhdlz9zOYwxh8lDdnvmMOe/+5cdoEdg==",
"dependencies": {
"delayed-stream": "~1.0.0"
},
"engines": {
"node": ">= 0.8"
}
},
"node_modules/cross-env": {
"version": "7.0.3",
"resolved": "https://registry.npmjs.org/cross-env/-/cross-env-7.0.3.tgz",
......@@ -872,6 +899,14 @@
}
}
},
"node_modules/delayed-stream": {
"version": "1.0.0",
"resolved": "https://registry.npmjs.org/delayed-stream/-/delayed-stream-1.0.0.tgz",
"integrity": "sha512-ZySD7Nf91aLB0RxL4KGrKHBXl7Eds1DAmEdcoVawXnLD7SDhpNgtuII2aAkg7a7QS41jxPSZ17p4VdGnMHk3MQ==",
"engines": {
"node": ">=0.4.0"
}
},
"node_modules/entities": {
"version": "4.5.0",
"resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
......@@ -963,6 +998,38 @@
"node": ">=8"
}
},
"node_modules/follow-redirects": {
"version": "1.15.6",
"resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
"integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
"funding": [
{
"type": "individual",
"url": "https://github.com/sponsors/RubenVerborgh"
}
],
"engines": {
"node": ">=4.0"
},
"peerDependenciesMeta": {
"debug": {
"optional": true
}
}
},
"node_modules/form-data": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz",
"integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==",
"dependencies": {
"asynckit": "^0.4.0",
"combined-stream": "^1.0.8",
"mime-types": "^2.1.12"
},
"engines": {
"node": ">= 6"
}
},
"node_modules/fsevents": {
"version": "2.3.3",
"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.3.tgz",
......@@ -1120,6 +1187,25 @@
"node": ">=8.6"
}
},
"node_modules/mime-db": {
"version": "1.52.0",
"resolved": "https://registry.npmjs.org/mime-db/-/mime-db-1.52.0.tgz",
"integrity": "sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==",
"engines": {
"node": ">= 0.6"
}
},
"node_modules/mime-types": {
"version": "2.1.35",
"resolved": "https://registry.npmjs.org/mime-types/-/mime-types-2.1.35.tgz",
"integrity": "sha512-ZDY+bPm5zTTF+YpCrAU9nK0UgICYPT0QtT1NZWFv4s++TNkcgVaT0g6+4R2uI4MjQjzysHB1zxuWL50hzaeXiw==",
"dependencies": {
"mime-db": "1.52.0"
},
"engines": {
"node": ">= 0.6"
}
},
"node_modules/minimatch": {
"version": "9.0.3",
"resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.3.tgz",
......@@ -1226,6 +1312,11 @@
"node": "^10 || ^12 || >=14"
}
},
"node_modules/proxy-from-env": {
"version": "1.1.0",
"resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
"integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
},
"node_modules/queue-microtask": {
"version": "1.2.3",
"resolved": "https://registry.npmjs.org/queue-microtask/-/queue-microtask-1.2.3.tgz",
......@@ -1588,9 +1679,9 @@
}
},
"node_modules/vuetify": {
"version": "3.5.5",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.5.tgz",
"integrity": "sha512-WENee4TkmWmwMEtmAHaljQZjR2AdmK1zetzH2rpEhlvkiTDEuIB0yKLGBv+vshH0XBRS84cf7uSjfceOvAhhSQ==",
"version": "3.5.9",
"resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.5.9.tgz",
"integrity": "sha512-tA3N2uWZFNSZRFNnXN841x4rWozYXKC0fGW/mJIwcKkQiI0+gmVCETtjF8bnOS7L1s0buWzw94uYTlXQa5AQ4w==",
"engines": {
"node": "^12.20 || >=14.13"
},
......
......@@ -8,9 +8,10 @@
},
"dependencies": {
"@mdi/font": "7.0.96",
"axios": "^1.6.8",
"roboto-fontface": "*",
"vue": "^3.3.0",
"vuetify": "^3.0.0"
"vuetify": "^3.5.9"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.5.0",
......
......@@ -7,45 +7,63 @@
<!-- <v-card-title color="indigo">
提交比赛
</v-card-title> -->
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player1" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">VS</div>
</v-col>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player2" label="姓名"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
</v-row>
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="score1" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">:</div>
</v-col>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="score2" label="得分"
:items="['0', '1', '2', '3', '4', '5']"></v-autocomplete>
</v-col>
</v-row>
<v-btn :disabled="loading" :loading="loading" class="text-none mb-4" color="indigo-lighten-2" size="large"
variant="flat" block @click="loading = !loading">
提交
</v-btn>
<v-form v-model="isValid">
<v-row no-gutters>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player1" label="姓名" :rules="[rules.player1]"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">VS</div>
</v-col>
<v-col align-self="center">
<v-autocomplete variant="underlined" v-model="player2" label="姓名" :rules="[rules.player2]"
:items="['California', 'Colorado', 'Florida', 'Georgia', 'Texas', 'Wyoming']"></v-autocomplete>
</v-col>
</v-row>
<v-row no-gutters>
<v-col align-self="center">
<v-select variant="underlined" v-model="score1" label="得分" :rules="[rules.score1]"
:items="['0', '1', '2', '3', '4', '5']"></v-select>
</v-col>
<v-col cols="2" align-self="center">
<div class="text-h6" style="text-align: center;">:</div>
</v-col>
<v-col align-self="center">
<v-select variant="underlined" v-model="score2" label="得分" :rules="[rules.score2]"
:items="['0', '1', '2', '3', '4', '5']"></v-select>
</v-col>
</v-row>
<v-dialog>
<template v-slot:activator="{ props: activatorProps }">
<v-btn block v-bind="activatorProps" class="text-none mb-4" color="indigo" size="large"
variant="outlined">
<template v-slot:default>
{{ selectedDate.getFullYear() }}-{{ selectedDate.getMonth() + 1 }}-{{ selectedDate.getDate() }}
</template>
</v-btn>
</template>
<template v-slot:default="{ isActive }">
<v-card>
<v-locale-provider locale="zhHans">
<v-date-picker v-model="selectedDate" header="日期" title="选择比赛日期" color="indigo" width="100%"></v-date-picker>
</v-locale-provider>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn variant="flat" text="确定" color="indigo" @click="isActive.value = false"></v-btn>
</v-card-actions>
</v-card>
</template>
</v-dialog>
<v-btn :disabled="!isValid" :loading="loading" class="text-none mb-4" color="indigo" size="large" variant="flat"
block @click="submit">
提交
</v-btn>
</v-form>
</v-container>
<!-- <v-container>
</v-container> -->
<!-- <v-container>
</v-container> -->
</v-card>
......@@ -60,15 +78,53 @@
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
// import { reactive } from 'vue';
const isValid = ref(false);
const player1 = ref(null);
const player2 = ref(null);
const score1 = ref(null);
const score2 = ref(null);
const loading = ref(false);
const selectedDate = ref(new Date());
const rules = reactive({
email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
player1: v => !!v || '姓名不能为空',
player2: v => !!v || '姓名不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
score1: v => !!v || '得分不能为空',
score2: v => !!v || '得分不能为空',
});
function submit() {
loading.value = true;
axios.get('/api/players', {
usrname: usrname.value,
psword: password.value
})
.then(function (response) {
})
.catch(function (error) {
console.log(error);
});
axios.post('/api/register', {
usrname: usrname.value,
psword: password.value
})
.then(function (response) {
})
.catch(function (error) {
console.log(error);
});
loading.value = false;
}
</script>
......
<template>
<v-form
ref="form"
v-model="isValid"
class="pa-4 pt-6"
>
<v-text-field
v-model="usrname"
variant="filled"
:rules="[rules.usrname]"
color="pink"
label="用户名"
></v-text-field>
<v-text-field
v-model="password"
variant="filled"
:rules="[rules.password]"
color="pink"
label="密码"
type="password"
></v-text-field>
<v-form ref="form" v-model="isValid" class="pa-4 pt-6">
<v-text-field v-model="usrname" variant="filled" :rules="[rules.usrname]" color="indigo" label="用户名"></v-text-field>
<v-text-field v-model="password" variant="filled" :rules="[rules.password]" color="indigo" label="密码"
type="password"></v-text-field>
</v-form>
<!--
:rules="[rules.password]"
counter="6"
style="min-height: 96px"
<v-text-field
v-model="email"
:rules="[rules.email]"
variant="filled"
color="deep-purple"
label="Email address"
type="email"
></v-text-field> -->
<!-- <v-textarea
v-model="bio"
auto-grow
variant="filled"
color="deep-purple"
label="Bio"
rows="1"
></v-textarea> -->
<v-card-actions>
<v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
variant="flat" @click="login">
登录
</v-btn>
</v-form>
<!-- <v-divider></v-divider> -->
<v-card-actions>
<v-btn
:disabled="!isValid"
:loading="loading"
block
class="text-none mb-4"
color="pink"
size="x-large"
variant="flat"
@click="loading = !loading"
>
登录
</v-btn>
<!-- <v-btn
variant="text"
@click="form.reset()"
>
Clear
</v-card-actions>
<v-dialog v-model="realname1">
<v-card>
<v-card-text>如要加入俱乐部,请输入真实姓名:
<v-text-field v-model="realname" variant="filled" :rules="[rules.realname]" color="indigo"
label="姓名"></v-text-field>
<v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
variant="flat" @click="submit">
提交
</v-btn>
<v-spacer></v-spacer>
<v-btn
:disabled="!isValid"
:loading="isLoading"
color="deep-purple-accent-4"
>
Submit
</v-btn> -->
</v-card-actions>
<!-- <v-dialog
v-model="dialog"
max-width="400"
persistent
>
<v-card>
<v-card-title class="text-h5 bg-grey-lighten-3">
Legal
</v-card-title>
<v-card-text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</v-card-text>
<v-divider></v-divider>
<v-card-actions>
<v-btn
variant="text"
@click="agreement = false, dialog = false"
>
No
</v-btn>
<v-spacer></v-spacer>
<v-btn
color="deep-purple"
variant="tonal"
@click="agreement = true, dialog = false"
>
Yes
</v-btn>
</v-card-actions>
</v-card>
</v-dialog> -->
</v-card-text>
</v-card>
</v-dialog>
</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
const form = ref(null)
const rules = reactive({
email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
usrname:v => !!v || '用户名不能为空',
password:v => !!v || '密码不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
});
const usrname = ref(null);
const password = ref(null);
const isValid = ref(false);
const isLoading = ref(false);
const loading = ref(false);
const form = ref(null);
const rules = reactive({
email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
usrname: v => !!v || '用户名不能为空',
password: v => !!v || '密码不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
realname: v => !!v || '姓名不能为空',
});
const usrname = ref(null);
const password = ref(null);
const realname = ref(null);
const isValid = ref(false);
const realname1 = ref(false);
const loading = ref(false);
function login() {
loading.value = true;
axios.post('/api/login', {
usrname: usrname.value,
psword: password.value
})
.then(function (response) {
const data = response.data;
// console.log(data.is_member);
// console.log(data.is_member == 0);
// export default {
// data: () => ({
// agreement: false,
// bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
// dialog: false,
// email: undefined,
// isValid: false,
// isLoading: false,
// password: undefined,
// phone: undefined,
// rules: {
// email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
// length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
// required: v => !!v || 'This field is required',
// },
// }),
// }
</script>
\ No newline at end of file
if (data.status == 'SUCCESS') {
if (data.is_su) {
// window.location.href = '/main.html';
// console.log("su");
}
else if (data.is_member) {
// console.log("member");
window.location.href = '/main.html';
}
else if (!data.is_member) {
// console.log("not member");
// console.log(realname1);
realname1.value = true;
}
}
})
.catch(function (error) {
console.log(error);
});
loading.value = false;
}
function submit() {
loading.value = true;
axios.post('/api/setRealName', {
name: realname.value,
})
.then(function () {
alert('提交完成,请联系管理员审核');
})
.catch(function (error) {
console.log(error);
});
loading.value = false;
}
</script>
\ No newline at end of file
<template>
<v-form
ref="form"
v-model="isValid"
class="pa-4 pt-6"
>
<v-text-field
v-model="usrname"
variant="filled"
:rules="[rules.usrname]"
color="pink"
label="用户名"
></v-text-field>
<v-text-field
v-model="password"
variant="filled"
:rules="[rules.password]"
color="pink"
label="密码"
type="password"
></v-text-field>
<v-text-field
v-model="confirmpassword"
variant="filled"
:rules="[rules.confirmpassword]"
color="pink"
label="确认密码"
type="password"
></v-text-field>
<v-form ref="form" v-model="isValid" class="pa-4 pt-6">
<v-text-field v-model="usrname" variant="filled" :rules="[rules.usrname]" color="indigo" label="用户名"></v-text-field>
<v-text-field v-model="password" variant="filled" :rules="[rules.password]" color="indigo" label="密码"
type="password"></v-text-field>
<v-text-field v-model="confirmpassword" variant="filled" :rules="[rules.confirmpassword]" color="indigo" label="确认密码"
type="password"></v-text-field>
</v-form>
<v-card-actions>
<v-btn :disabled="!isValid" :loading="loading" block class="text-none mb-4" color="indigo" size="x-large"
variant="flat" @click="register">
注册
</v-btn>
</v-card-actions>
</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
import axios from 'axios';
const form = ref(null)
const rules = reactive({
email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
usrname: v => !!v || '用户名不能为空',
confirmpassword: v => v === password.value || '密码不匹配',
password: v => !!v || '密码不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
});
const usrname = ref(null);
const password = ref(null);
const confirmpassword = ref(null);
const isValid = ref(false);
// const isLoading = ref(false);
const loading = ref(false);
function register(){
loading.value =true;
axios.post('/api/register', {
usrname:usrname.value,
psword:password.value
})
.then(function (response) {
const data = response.data;
if(data.status == 'SUCCESS'){
alert('注册成功!');
}
else if(data.status == 'FAILED')
{
alert('用户名已存在!');
}
})
.catch(function (error) {
console.log(error);
});
loading.value =false;
}
<!--
:rules="[rules.password]"
counter="6"
style="min-height: 96px"
<v-text-field
v-model="email"
:rules="[rules.email]"
variant="filled"
color="deep-purple"
label="Email address"
type="email"
></v-text-field> -->
<!-- <v-textarea
v-model="bio"
auto-grow
variant="filled"
color="deep-purple"
label="Bio"
rows="1"
></v-textarea> -->
</v-form>
<v-card-actions>
<v-btn
:disabled="!isValid"
:loading="loading"
block
class="text-none mb-4"
color="pink"
size="x-large"
variant="flat"
@click="loading = !loading"
>
注册
</v-btn>
<!-- <v-btn
variant="text"
@click="form.reset()"
>
Clear
</v-btn>
<v-spacer></v-spacer>
<v-btn
:disabled="!isValid"
:loading="isLoading"
color="deep-purple-accent-4"
>
Submit
</v-btn> -->
</v-card-actions>
</template>
<script setup>
import { ref } from 'vue';
import { reactive } from 'vue';
const form = ref(null)
const rules = reactive({
email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
usrname:v => !!v || '用户名不能为空',
confirmpassword:v => v === password.value || '密码不匹配',
password:v => !!v || '密码不能为空',
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
required: v => !!v || 'This field is required',
});
const usrname = ref(null);
const password = ref(null);
const confirmpassword = ref(null);
const isValid = ref(false);
const isLoading = ref(false);
const loading = ref(false);
// export default {
// data: () => ({
// agreement: false,
// bio: 'Far far away, behind the word mountains, far from the countries Vokalia and Consonantia, there live the blind texts',
// dialog: false,
// email: undefined,
// isValid: false,
// isLoading: false,
// password: undefined,
// phone: undefined,
// rules: {
// email: v => !!(v || '').match(/@/) || 'Please enter a valid email',
// length: len => v => (v || '').length >= len || `Invalid character length, required ${len}`,
// password: v => !!(v || '').match(/^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*(_|[^\w])).+$/) ||
// 'Password must contain an upper case letter, a numeric character, and a special character',
// required: v => !!v || 'This field is required',
// },
// }),
// }
</script>
\ No newline at end of file
</script>
\ No newline at end of file
......@@ -13,13 +13,13 @@ const tab = ref(null)
<v-app class="h-100 w-100">
<v-main class="h-100 w-100 d-flex justify-center align-center">
<v-card class="main-card ">
<div class="card-title bg-deep-purple-accent-4 text-h5 text-center pa-5">
<div class="card-title bg-indigo text-h5 text-center pa-5">
南高乒乓球俱乐部
</div>
<v-tabs
v-model="tab"
bg-color="deep-purple-accent-4"
bg-color="indigo"
grow
>
<v-tab value="login">
......
......@@ -9,6 +9,8 @@ import { registerPlugins } from '@/plugins'
// Components
import App from './main.vue'
import { createVuetify } from 'vuetify'
import { zhHans } from 'vuetify/locale'
// Composables
import { createApp } from 'vue'
......@@ -17,4 +19,12 @@ const app = createApp(App)
registerPlugins(app)
const vuetify = createVuetify({
locale: {
locale: 'zhHans',
messages: { zhHans },
},
})
app.use(vuetify)
app.mount('#app')
<script setup>
import { ref } from 'vue';
import Gamemanage from './components/gamemanage.vue';
import Space from './components/space.vue';
import Home from './components/home.vue';
const tab = ref(null)
</script>
<template>
<div class="h-screen w-auto">
<v-window v-model="tab" class="h-screen w-auto">
......@@ -42,6 +34,15 @@ const tab = ref(null)
</div>
</template>
<script setup>
import { ref } from 'vue';
import Gamemanage from './components/gamemanage.vue';
import Space from './components/space.vue';
import Home from './components/home.vue';
const tab = ref(null)
</script>
<style>
.tabs {
width: 100%;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment