我的档案
This commit is contained in:
parent
f7dd399ec1
commit
9ee0987df6
13709
package-lock.json
generated
Normal file
13709
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
12
src/App.vue
12
src/App.vue
@ -1,11 +1,15 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="nav">
|
<!-- <div id="nav">
|
||||||
<router-link to="/">Home</router-link> |
|
<router-link to="/">Home</router-link> |
|
||||||
<router-link to="/about">About</router-link>
|
<router-link to="/about">About</router-link>
|
||||||
</div>
|
</div> -->
|
||||||
<router-view/>
|
<router-view/>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss">
|
||||||
|
.one-line-hide {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
@ -14,7 +14,12 @@ const routes: Array<RouteRecordRaw> = [
|
|||||||
// this generates a separate chunk (about.[hash].js) for this route
|
// this generates a separate chunk (about.[hash].js) for this route
|
||||||
// which is lazy-loaded when the route is visited.
|
// which is lazy-loaded when the route is visited.
|
||||||
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/archives',
|
||||||
|
name: 'Archives',
|
||||||
|
component: () => import('../views/mine/Archives.vue')
|
||||||
|
},
|
||||||
]
|
]
|
||||||
|
|
||||||
const router = createRouter({
|
const router = createRouter({
|
||||||
|
|||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home">
|
<div class="home">
|
||||||
<img alt="Vue logo" src="../assets/logo.png">
|
<!-- <img alt="Vue logo" src="../assets/logo.png"> -->
|
||||||
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
<HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|||||||
407
src/views/mine/Archives.vue
Normal file
407
src/views/mine/Archives.vue
Normal file
@ -0,0 +1,407 @@
|
|||||||
|
<template>
|
||||||
|
<div class="archives">
|
||||||
|
<div class="user-info">
|
||||||
|
<div class="avatar">
|
||||||
|
<a-avatar :size="85" shape="circle" src="https://fanyi-cdn.cdn.bcebos.com/static/translation/img/header/logo_40c4f13.svg">
|
||||||
|
<template v-slot:icon><UserOutlined /></template>
|
||||||
|
</a-avatar>
|
||||||
|
<div class="user-name">
|
||||||
|
<div class="value">{{ formData.name }}</div>
|
||||||
|
<div class="update-btn" @click="updateUserName">修改</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-box basic">
|
||||||
|
<div class="title">基本信息</div>
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="input-box country">
|
||||||
|
<div class="label">来自国家</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.country"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['美国', '英国']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="input-box address">
|
||||||
|
<div class="label">居住地</div>
|
||||||
|
<a-input size="small" v-model:value="formData.address" placeholder="请输入居住地" />
|
||||||
|
</div>
|
||||||
|
<div class="input-box teach-lang">
|
||||||
|
<div class="label">授课语言</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.teachingLang"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="input-box speak-lang">
|
||||||
|
<div class="label">我还会说</div>
|
||||||
|
<div class="speak-array">
|
||||||
|
<div class="lang-items">
|
||||||
|
<div class="speak-item" v-for="(lang, index) in formData.speakLang" :key="index">
|
||||||
|
<a-select
|
||||||
|
v-model:value="lang.lang"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
<div class="proficiency">
|
||||||
|
<div class="p-title">熟练度</div>
|
||||||
|
<div class="value">
|
||||||
|
<a-rate v-model:value="lang.proficiency" style="fontSize: 15px">
|
||||||
|
<template v-slot:character><SmileOutlined /></template>
|
||||||
|
</a-rate>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="update-btn" @click="addSpeakLang">继续添加</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-box native-lang">
|
||||||
|
<div class="label">母语</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.nativeLang"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['英语', '法语']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="input-box video-lang">
|
||||||
|
<div class="label">短视频</div>
|
||||||
|
<a-upload
|
||||||
|
list-type="picture"
|
||||||
|
action="//jsonplaceholder.typicode.com/posts/"
|
||||||
|
>
|
||||||
|
<div class="upload-image">
|
||||||
|
<PlaySquareOutlined style="fontSize: 22px;" />
|
||||||
|
</div>
|
||||||
|
</a-upload>
|
||||||
|
<div class="demand">
|
||||||
|
<p class="one-line-hide">视频要求：</p>
|
||||||
|
<p class="one-line-hide"> 1.上传视频时间要求为30s之内</p>
|
||||||
|
<p class="one-line-hide">2.支持文件大小100M</p>
|
||||||
|
<p class="one-line-hide">3.文件扩展名：fiv、mp4…文件扩展名：fiv、mp4…</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-box introduce">
|
||||||
|
<div class="label">自我介绍</div>
|
||||||
|
<a-textarea v-model:value="formData.introduce" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-box contact">
|
||||||
|
<div class="title">联系方式</div>
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="input-box mailbox">
|
||||||
|
<div class="label">邮箱</div>
|
||||||
|
<a-input size="small" v-model:value="formData.mail" placeholder="请输入邮箱" />
|
||||||
|
</div>
|
||||||
|
<div class="input-box phone-box">
|
||||||
|
<div class="label">手机号</div>
|
||||||
|
<div class="phone">{{ formData.phone }}</div>
|
||||||
|
<div class="update-btn" @click="updatePhoneNumber">更换手机号</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="form-box system-setting">
|
||||||
|
<div class="title">系统设置</div>
|
||||||
|
<div class="main-container">
|
||||||
|
<div class="input-box password-box">
|
||||||
|
<div class="label">密码</div>
|
||||||
|
<div class="password">{{ formData.password }}</div>
|
||||||
|
<div class="update-btn" @click="updateUserPassword">修改密码</div>
|
||||||
|
</div>
|
||||||
|
<div class="input-box time-zone-box">
|
||||||
|
<div class="label">时区</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.timeZone"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['北京 GMT +08:00']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="input-box currency-box">
|
||||||
|
<div class="label">货币</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.currency"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['人民币']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
<div class="input-box time-zone">
|
||||||
|
<div class="label">语言</div>
|
||||||
|
<a-select
|
||||||
|
v-model:value="formData.language"
|
||||||
|
style="width: 171px"
|
||||||
|
size="small"
|
||||||
|
ref="select"
|
||||||
|
>
|
||||||
|
<a-select-option v-for="(item, index) in ['英语', '中文']" :key="index" :value="item">
|
||||||
|
{{ item }}
|
||||||
|
</a-select-option>
|
||||||
|
</a-select>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="submit-btn" @click="submitInfo">保存信息</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts">
|
||||||
|
import { defineComponent, reactive } from "vue";
|
||||||
|
import { UserOutlined, SmileOutlined, PlaySquareOutlined } from '@ant-design/icons-vue';
|
||||||
|
|
||||||
|
export default defineComponent({
|
||||||
|
name: "Archives",
|
||||||
|
components: {
|
||||||
|
UserOutlined,
|
||||||
|
SmileOutlined,
|
||||||
|
PlaySquareOutlined,
|
||||||
|
},
|
||||||
|
setup(){
|
||||||
|
interface SpeakItem{
|
||||||
|
lang: string;
|
||||||
|
proficiency: number;
|
||||||
|
}
|
||||||
|
const otherSpeak: Array<SpeakItem> = [{
|
||||||
|
lang: '请选择',
|
||||||
|
proficiency: 0,
|
||||||
|
}];
|
||||||
|
const formBasic = {
|
||||||
|
name: 'Lorem Sum',
|
||||||
|
country: '美国',
|
||||||
|
address: '',
|
||||||
|
teachingLang: '英语',
|
||||||
|
speakLang: otherSpeak,
|
||||||
|
nativeLang: '英语',
|
||||||
|
shortVideo: '',
|
||||||
|
introduce: '',
|
||||||
|
mail: '',
|
||||||
|
phone: '136 **** 6111',
|
||||||
|
password: '***********',
|
||||||
|
timeZone: '北京 GMT +08:00',
|
||||||
|
currency: '人民币',
|
||||||
|
language: '中文',
|
||||||
|
}
|
||||||
|
// 表单数据
|
||||||
|
const formData = reactive(formBasic);
|
||||||
|
/**
|
||||||
|
* 修改用户名
|
||||||
|
*/
|
||||||
|
function updateUserName (): void {
|
||||||
|
console.log('修改');
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 添加我还会说语言
|
||||||
|
*/
|
||||||
|
function addSpeakLang (): void {
|
||||||
|
formData.speakLang.push({
|
||||||
|
lang: '请选择',
|
||||||
|
proficiency: 0,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 修改手机号
|
||||||
|
*/
|
||||||
|
function updatePhoneNumber (): void {
|
||||||
|
console.log('修改手机号');
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 修改密码
|
||||||
|
*/
|
||||||
|
function updateUserPassword(): void {
|
||||||
|
console.log('修改密码');
|
||||||
|
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 提交表单
|
||||||
|
*/
|
||||||
|
function submitInfo (): void {
|
||||||
|
console.log('12');
|
||||||
|
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
formData,
|
||||||
|
updateUserName,
|
||||||
|
addSpeakLang,
|
||||||
|
updatePhoneNumber,
|
||||||
|
updateUserPassword,
|
||||||
|
submitInfo,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.archives {
|
||||||
|
width: 100%;
|
||||||
|
background-color: #ffffff;
|
||||||
|
padding: 46px;
|
||||||
|
.update-btn {
|
||||||
|
font-size: 11px;
|
||||||
|
color: #08AE98;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.user-info {
|
||||||
|
.avatar {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
.user-name {
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-end;
|
||||||
|
margin-top: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
.value {
|
||||||
|
font-size: 17px;
|
||||||
|
color: #111111;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.form-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
.title {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #111111;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.main-container {
|
||||||
|
margin-left: 17px;
|
||||||
|
.input-box {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 28px;
|
||||||
|
.label {
|
||||||
|
width: 60px;
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
margin-right: 30px;
|
||||||
|
line-height: 23px;
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
.ant-input {
|
||||||
|
width: 171px;
|
||||||
|
padding: 6px 11px;
|
||||||
|
border-radius: 3px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
font-size: 11px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.speak-lang {
|
||||||
|
.speak-array {
|
||||||
|
display: flex;
|
||||||
|
.lang-items {
|
||||||
|
.speak-item {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
}
|
||||||
|
.proficiency {
|
||||||
|
margin: 0 107px 0 17px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
.p-title {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
margin-right: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.update-btn {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.video-lang {
|
||||||
|
.upload-image {
|
||||||
|
width: 171px;
|
||||||
|
height: 96px;
|
||||||
|
border: 1px solid #DCDFE0;
|
||||||
|
border-radius: 3px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-right: 17px;
|
||||||
|
}
|
||||||
|
.demand {
|
||||||
|
line-height: 17px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #808080;
|
||||||
|
width: 134px;
|
||||||
|
p {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.introduce {
|
||||||
|
.ant-input {
|
||||||
|
width: 359px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.phone-box {
|
||||||
|
.phone {
|
||||||
|
font-size: 11px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: #404040;
|
||||||
|
margin-right: 112px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.password-box {
|
||||||
|
.password {
|
||||||
|
margin-right: 123px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.submit-btn {
|
||||||
|
width: 63px;
|
||||||
|
height: 23px;
|
||||||
|
background: #08AE98;
|
||||||
|
border-radius: 3px;
|
||||||
|
font-size: 10px;
|
||||||
|
font-weight: 500;
|
||||||
|
color: #FFFFFF;
|
||||||
|
text-align: center;
|
||||||
|
line-height: 23px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
Loading…
Reference in New Issue
Block a user