update
This commit is contained in:
parent
e8e402cf4d
commit
d20dea0944
11
package-lock.json
generated
11
package-lock.json
generated
@ -14,6 +14,7 @@
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"gsap": "^3.12.4",
|
||||
"jquery": "^3.7.1",
|
||||
"qs": "^6.11.2",
|
||||
"vue": "^2.6.14",
|
||||
@ -6309,6 +6310,11 @@
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/gsap": {
|
||||
"version": "3.12.4",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.4.tgz",
|
||||
"integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
|
||||
},
|
||||
"node_modules/gzip-size": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
|
||||
@ -16111,6 +16117,11 @@
|
||||
"integrity": "sha512-RbJ5/jmFcNNCcDV5o9eTnBLJ/HszWV0P73bc+Ff4nS/rJj+YaS6IGyiOL0VoBYX+l1Wrl3k63h/KrH+nhJ0XvQ==",
|
||||
"dev": true
|
||||
},
|
||||
"gsap": {
|
||||
"version": "3.12.4",
|
||||
"resolved": "https://registry.npmmirror.com/gsap/-/gsap-3.12.4.tgz",
|
||||
"integrity": "sha512-1ByAq8dD0W4aBZ/JArgaQvc0gyUfkGkP8mgAQa0qZGdpOKlSOhOf+WNXjoLimKaKG3Z4Iu6DKZtnyszqQeyqWQ=="
|
||||
},
|
||||
"gzip-size": {
|
||||
"version": "6.0.0",
|
||||
"resolved": "https://registry.npmmirror.com/gzip-size/-/gzip-size-6.0.0.tgz",
|
||||
|
||||
@ -14,6 +14,7 @@
|
||||
"core-js": "^3.8.3",
|
||||
"echarts": "^5.4.3",
|
||||
"element-ui": "^2.15.14",
|
||||
"gsap": "^3.12.4",
|
||||
"jquery": "^3.7.1",
|
||||
"qs": "^6.11.2",
|
||||
"vue": "^2.6.14",
|
||||
|
||||
@ -1,12 +0,0 @@
|
||||
import request from "@/utils/request.js";
|
||||
import qs from "qs";
|
||||
|
||||
const baseUrl = '/api'
|
||||
|
||||
|
||||
export function getHotNews() {
|
||||
return request({
|
||||
url: baseUrl+"/hot",
|
||||
method: "get",
|
||||
});
|
||||
}
|
||||
@ -1,29 +1,34 @@
|
||||
import request from "@/utils/request.js";
|
||||
import qs from "qs";
|
||||
|
||||
const baseUrl = '/dev'
|
||||
import http from '@/utils/http'
|
||||
|
||||
|
||||
export function login(params) {
|
||||
return request({
|
||||
url: baseUrl+"/login",
|
||||
method: "post",
|
||||
url: "/login",
|
||||
method: "get",
|
||||
data:params
|
||||
});
|
||||
|
||||
|
||||
|
||||
}
|
||||
|
||||
export function register(params) {
|
||||
return request({
|
||||
url: baseUrl+"/register",
|
||||
method: "post",
|
||||
url: "/register",
|
||||
method: "get",
|
||||
data:params
|
||||
});
|
||||
}
|
||||
|
||||
export function sendActiveCode() {
|
||||
export function sendActiveCode(userEmail) {
|
||||
return request({
|
||||
url: baseUrl+"/sendActiveCode",
|
||||
url: "/sendActiveCode",
|
||||
method: "get",
|
||||
|
||||
params:userEmail
|
||||
});
|
||||
}
|
||||
//其实，也不一定就是params，也可以是 query 还有 data 的呀！
|
||||
//params是添加到url的请求字符串中的，用于get请求。会将参数加到 url后面。所以，传递的都是字符串。无法传递参数中含有json格式的数据
|
||||
//而data是添加到请求体（body）中的， 用于post请求。添加到请求体（body）中，json 格式也是可以的。
|
||||
BIN
src/assets/img/daoru.a909296f.webp
Normal file
BIN
src/assets/img/daoru.a909296f.webp
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 86 KiB |
@ -90,7 +90,7 @@
|
||||
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button @click="resetForm('loginForm')">重置</el-button>
|
||||
<el-button type="primary" @click="submitLoginForm()">登录
|
||||
<el-button type="primary" @click="submitLoginForm('loginForm')">登录
|
||||
</el-button
|
||||
>
|
||||
|
||||
@ -101,28 +101,28 @@
|
||||
<el-tab-pane name="2">
|
||||
<span slot="label"><i class="el-icon-edit"></i> 注册</span>
|
||||
<el-form :model="registerFrom" :rules="registerRules" ref="registerFrom" class="form">
|
||||
<el-form-item prop="username">
|
||||
<el-form-item prop="userLogin">
|
||||
<el-input
|
||||
v-model="registerFrom.username"
|
||||
v-model="registerFrom.userLogin"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="用户名"
|
||||
auto-complete="off"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<el-form-item prop="userEmail">
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="registerFrom.email"
|
||||
v-model="registerFrom.userEmail"
|
||||
placeholder="邮箱"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<el-form-item prop="userPassword">
|
||||
<!-- type：密码显示* -->
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="registerFrom.password"
|
||||
v-model="registerFrom.userPassword"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
@ -143,14 +143,14 @@
|
||||
</el-form-item>
|
||||
|
||||
|
||||
<el-form-item prop="captcha"
|
||||
<el-form-item prop="activeCode"
|
||||
style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
|
||||
<div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-evenly">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
placeholder="验证码"
|
||||
v-model="registerFrom.captcha"
|
||||
v-model="registerFrom.activeCode"
|
||||
class="vertify_code"
|
||||
auto-complete="false"
|
||||
style=""
|
||||
@ -164,7 +164,7 @@
|
||||
|
||||
</el-form-item>
|
||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||
<el-button type="primary" @click="submitRegisterForm()">注册
|
||||
<el-button type="primary" @click="submitRegisterForm('registerFrom')">注册
|
||||
</el-button
|
||||
>
|
||||
<el-button @click="resetForm('registerFrom')">重置</el-button>
|
||||
@ -243,10 +243,8 @@
|
||||
</template>
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import {login, register, sendActiveCode} from "@/api/login";
|
||||
import Vue from "vue";
|
||||
|
||||
|
||||
import axios from "axios";
|
||||
export default {
|
||||
name: "HomeHeader",
|
||||
components: {},
|
||||
@ -273,10 +271,10 @@ export default {
|
||||
remember: null
|
||||
},
|
||||
registerFrom: {
|
||||
username: null,
|
||||
email: null,
|
||||
captcha: null,
|
||||
password: null,
|
||||
userLogin: null,
|
||||
userEmail: null,
|
||||
activeCode: null,
|
||||
userPassword: null,
|
||||
repassword: null,
|
||||
},
|
||||
repasswordForm: {
|
||||
@ -294,19 +292,19 @@ export default {
|
||||
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
registerRules: {
|
||||
username: [
|
||||
userLogin: [
|
||||
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||
],
|
||||
email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
userEmail: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||
userPassword: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
||||
captcha: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
},
|
||||
repasswordRelus: {
|
||||
email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
||||
captcha: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
activeCode: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||
}
|
||||
}
|
||||
},
|
||||
@ -358,47 +356,75 @@ export default {
|
||||
},
|
||||
// 登录提交
|
||||
submitLoginForm() {
|
||||
login(this.loginForm).then(response => {
|
||||
console.log(response);
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/login',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
offset: 0
|
||||
});
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
});
|
||||
})
|
||||
},
|
||||
// 注册提交
|
||||
submitRegisterForm() {
|
||||
if (this.registerFrom.password === this.registerFrom.repassword) {
|
||||
register(this.registerFrom).then(response => {
|
||||
console.log(response);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "两次密码不相同",
|
||||
offset: 50
|
||||
message: "请填写完整信息！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
// 注册提交
|
||||
submitRegisterForm(formName) {
|
||||
this.$refs[formName].validate((valid) => {
|
||||
if (valid) {
|
||||
if (this.registerFrom.userPassword===this.registerFrom.repassword){
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/register',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
console.log(res);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 0
|
||||
});
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 0
|
||||
});
|
||||
})
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "密码不一致",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请填写完整信息！",
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
})
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
@ -406,42 +432,46 @@ export default {
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendEmail() {
|
||||
if (this.registerFrom.email !== null) {
|
||||
sendActiveCode().then(response => {
|
||||
console.log(response);
|
||||
var _this=this;
|
||||
if (this.registerFrom.userEmail !== null) {
|
||||
axios({
|
||||
method: 'get',
|
||||
url: '/api/sendActiveCode',
|
||||
params: this.registerFrom
|
||||
}).then(function (res) {
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
message: ('i', {style: 'color: teal'}, res.data),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
offset: 0
|
||||
});
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!_this.timer) {
|
||||
_this.sendTime = TIME_COUNT;
|
||||
_this.showTime = false;
|
||||
_this.timer = setInterval(() => {
|
||||
if (_this.sendTime > 0 && _this.sendTime <= TIME_COUNT) {
|
||||
_this.sendTime--;
|
||||
} else {
|
||||
_this.showTime = true;
|
||||
clearInterval(_this.timer); // 清除定时器
|
||||
_this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
}).catch((error)=>{
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
offset: 0
|
||||
});
|
||||
}).then(()=>{
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!this.timer) {
|
||||
this.sendTime = TIME_COUNT;
|
||||
this.showTime = false;
|
||||
this.timer = setInterval(() => {
|
||||
if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
|
||||
this.sendTime--;
|
||||
} else {
|
||||
this.showTime = true;
|
||||
clearInterval(this.timer); // 清除定时器
|
||||
this.timer = null;
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
|
||||
}else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请先填写邮箱！",
|
||||
offset: 50
|
||||
message: '请填写邮箱！',
|
||||
offset: 0
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {getHotNews} from "@/api/api";
|
||||
import NewsCard from "@/components/hotNews/NewsCard.vue";
|
||||
|
||||
export default {
|
||||
@ -23,11 +22,7 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
getNews(){
|
||||
getHotNews().then(res=>{
|
||||
console.log(res);
|
||||
})
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,14 @@
|
||||
<template>
|
||||
<div>
|
||||
首页
|
||||
<div class="main">
|
||||
<PersonalInfoCard></PersonalInfoCard>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import PersonalInfoCard from "@/components/setting/home/PersonalInfoCard.vue";
|
||||
|
||||
export default {
|
||||
name: "PersonalHomePage",
|
||||
components: {PersonalInfoCard},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
|
||||
471
src/components/setting/home/PersonalInfoCard.vue
Normal file
471
src/components/setting/home/PersonalInfoCard.vue
Normal file
@ -0,0 +1,471 @@
|
||||
<template>
|
||||
<div class="card" data-state="#about">
|
||||
<div class="card-header">
|
||||
<div class="card-cover" style="background-image: url('https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80')"></div>
|
||||
<img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=934&q=80" alt="avatar">
|
||||
<h1 class="card-fullname">William Rocheald</h1>
|
||||
<h2 class="card-jobtitle">UI Developer</h2>
|
||||
</div>
|
||||
<div class="card-main">
|
||||
<div class="card-section is-active" id="about">
|
||||
<div class="card-content">
|
||||
<div class="card-subtitle">ABOUT</div>
|
||||
<p class="card-desc">Whatever tattooed stumptown art party sriracha gentrify hashtag intelligentsia readymade schlitz brooklyn disrupt.
|
||||
</p>
|
||||
</div>
|
||||
<div class="card-social">
|
||||
<a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.997 3.985h2.191V.169C17.81.117 16.51 0 14.996 0c-3.159 0-5.323 1.987-5.323 5.639V9H6.187v4.266h3.486V24h4.274V13.267h3.345l.531-4.266h-3.877V6.062c.001-1.233.333-2.077 2.051-2.077z"></path></svg></a>
|
||||
<a href="#"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
|
||||
<path d="M512 97.248c-19.04 8.352-39.328 13.888-60.48 16.576 21.76-12.992 38.368-33.408 46.176-58.016-20.288 12.096-42.688 20.64-66.56 25.408C411.872 60.704 384.416 48 354.464 48c-58.112 0-104.896 47.168-104.896 104.992 0 8.32.704 16.32 2.432 23.936-87.264-4.256-164.48-46.08-216.352-109.792-9.056 15.712-14.368 33.696-14.368 53.056 0 36.352 18.72 68.576 46.624 87.232-16.864-.32-33.408-5.216-47.424-12.928v1.152c0 51.008 36.384 93.376 84.096 103.136-8.544 2.336-17.856 3.456-27.52 3.456-6.72 0-13.504-.384-19.872-1.792 13.6 41.568 52.192 72.128 98.08 73.12-35.712 27.936-81.056 44.768-130.144 44.768-8.608 0-16.864-.384-25.12-1.44C46.496 446.88 101.6 464 161.024 464c193.152 0 298.752-160 298.752-298.688 0-4.64-.16-9.12-.384-13.568 20.832-14.784 38.336-33.248 52.608-54.496z"></path></svg></a>
|
||||
<a href="#"><svg viewBox="0 0 512 512" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M301 256c0 24.852-20.148 45-45 45s-45-20.148-45-45 20.148-45 45-45 45 20.148 45 45zm0 0"></path>
|
||||
<path d="M332 120H180c-33.086 0-60 26.914-60 60v152c0 33.086 26.914 60 60 60h152c33.086 0 60-26.914 60-60V180c0-33.086-26.914-60-60-60zm-76 211c-41.355 0-75-33.645-75-75s33.645-75 75-75 75 33.645 75 75-33.645 75-75 75zm86-146c-8.285 0-15-6.715-15-15s6.715-15 15-15 15 6.715 15 15-6.715 15-15 15zm0 0"></path>
|
||||
<path d="M377 0H135C60.562 0 0 60.563 0 135v242c0 74.438 60.563 135 135 135h242c74.438 0 135-60.563 135-135V135C512 60.562 451.437 0 377 0zm45 332c0 49.625-40.375 90-90 90H180c-49.625 0-90-40.375-90-90V180c0-49.625 40.375-90 90-90h152c49.625 0 90 40.375 90 90zm0 0"></path></svg></a>
|
||||
<a href="#"><svg viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M23.994 24v-.001H24v-8.802c0-4.306-.927-7.623-5.961-7.623-2.42 0-4.044 1.328-4.707 2.587h-.07V7.976H8.489v16.023h4.97v-7.934c0-2.089.396-4.109 2.983-4.109 2.549 0 2.587 2.384 2.587 4.243V24zM.396 7.977h4.976V24H.396zM2.882 0C1.291 0 0 1.291 0 2.882s1.291 2.909 2.882 2.909 2.882-1.318 2.882-2.909A2.884 2.884 0 002.882 0z"></path></svg></a>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-section" id="experience">
|
||||
<div class="card-content">
|
||||
<div class="card-subtitle">WORK EXPERIENCE</div>
|
||||
<div class="card-timeline">
|
||||
<div class="card-item" data-year="2014">
|
||||
<div class="card-item-title">Front-end Developer at <span>JotForm</span></div>
|
||||
<div class="card-item-desc">Disrupt stumptown retro everyday carry unicorn.</div>
|
||||
</div>
|
||||
<div class="card-item" data-year="2016">
|
||||
<div class="card-item-title">UI Developer at <span>GitHub</span></div>
|
||||
<div class="card-item-desc">Developed new conversion funnels and disrupt.</div>
|
||||
</div>
|
||||
<div class="card-item" data-year="2018">
|
||||
<div class="card-item-title">Illustrator at <span>Google</span></div>
|
||||
<div class="card-item-desc">Onboarding illustrations for App.</div>
|
||||
</div>
|
||||
<div class="card-item" data-year="2020">
|
||||
<div class="card-item-title">Full-Stack Developer at <span>CodePen</span></div>
|
||||
<div class="card-item-desc">Responsible for the encomposing brand expreience.</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-section" id="contact">
|
||||
<div class="card-content">
|
||||
<div class="card-subtitle">CONTACT</div>
|
||||
<div class="card-contact-wrapper">
|
||||
<div class="card-contact">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M21 10c0 7-9 13-9 13s-9-6-9-13a9 9 0 0118 0z"></path>
|
||||
<circle cx="12" cy="10" r="3"></circle></svg>
|
||||
Algonquin Rd, Three Oaks Vintage, MI, 49128
|
||||
</div>
|
||||
<div class="card-contact">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M22 16.92v3a2 2 0 01-2.18 2 19.79 19.79 0 01-8.63-3.07 19.5 19.5 0 01-6-6 19.79 19.79 0 01-3.07-8.67A2 2 0 014.11 2h3a2 2 0 012 1.72 12.84 12.84 0 00.7 2.81 2 2 0 01-.45 2.11L8.09 9.91a16 16 0 006 6l1.27-1.27a2 2 0 012.11-.45 12.84 12.84 0 002.81.7A2 2 0 0122 16.92z"></path></svg>(269) 756-9809</div>
|
||||
<div class="card-contact">
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||
<path d="M4 4h16c1.1 0 2 .9 2 2v12c0 1.1-.9 2-2 2H4c-1.1 0-2-.9-2-2V6c0-1.1.9-2 2-2z"></path>
|
||||
<path d="M22 6l-10 7L2 6"></path></svg>
|
||||
william@rocheald.com
|
||||
</div>
|
||||
<button class="contact-me">WORK TOGETHER</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-buttons">
|
||||
<button data-section="#about" class="is-active">ABOUT</button>
|
||||
<button data-section="#experience">EXPERIENCE</button>
|
||||
<button data-section="#contact">CONTACT</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "PersonalInfoCard",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
const buttons = document.querySelectorAll(".card-buttons button");
|
||||
const sections = document.querySelectorAll(".card-section");
|
||||
const card = document.querySelector(".card");
|
||||
|
||||
const handleButtonClick = e => {
|
||||
const targetSection = e.target.getAttribute("data-section");
|
||||
const section = document.querySelector(targetSection);
|
||||
targetSection !== "#about" ?
|
||||
card.classList.add("is-active") :
|
||||
card.classList.remove("is-active");
|
||||
card.setAttribute("data-state", targetSection);
|
||||
sections.forEach(s => s.classList.remove("is-active"));
|
||||
buttons.forEach(b => b.classList.remove("is-active"));
|
||||
e.target.classList.add("is-active");
|
||||
section.classList.add("is-active");
|
||||
};
|
||||
|
||||
buttons.forEach(btn => {
|
||||
btn.addEventListener("click", handleButtonClick);
|
||||
});
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
* {
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
|
||||
.card {
|
||||
max-width: 340px;
|
||||
margin: auto;
|
||||
overflow-y: auto;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
overflow-x: hidden;
|
||||
background-color: var(--theme-bg-color);
|
||||
color: var(--theme-color);
|
||||
display: flex;
|
||||
transition: 0.3s;
|
||||
flex-direction: column;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 0 0 8px rgba(255, 255, 255, 0.2);
|
||||
top: 20px;
|
||||
left: 20px;
|
||||
}
|
||||
|
||||
.card[data-state="#about"] {
|
||||
height: 450px;
|
||||
}
|
||||
.card[data-state="#about"] .card-main {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.card[data-state="#contact"] {
|
||||
height: 430px;
|
||||
}
|
||||
|
||||
.card[data-state="#experience"] {
|
||||
height: 550px;
|
||||
}
|
||||
|
||||
.card.is-active .card-header {
|
||||
height: 80px;
|
||||
}
|
||||
.card.is-active .card-cover {
|
||||
height: 100px;
|
||||
top: -50px;
|
||||
}
|
||||
.card.is-active .card-avatar {
|
||||
transform: none;
|
||||
left: 20px;
|
||||
width: 50px;
|
||||
height: 50px;
|
||||
bottom: 10px;
|
||||
}
|
||||
.card.is-active .card-fullname,
|
||||
.card.is-active .card-jobtitle {
|
||||
left: 86px;
|
||||
transform: none;
|
||||
}
|
||||
.card.is-active .card-fullname {
|
||||
bottom: 18px;
|
||||
font-size: 19px;
|
||||
}
|
||||
.card.is-active .card-jobtitle {
|
||||
bottom: 16px;
|
||||
letter-spacing: 1px;
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
.card-header {
|
||||
position: relative;
|
||||
display: flex;
|
||||
height: 200px;
|
||||
flex-shrink: 0;
|
||||
width: 100%;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.card-header * {
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.card-cover {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
height: 160px;
|
||||
top: -20%;
|
||||
left: 0;
|
||||
will-change: top;
|
||||
background-size: cover;
|
||||
background-position: center;
|
||||
filter: blur(30px);
|
||||
transform: scale(1.2);
|
||||
transition: 0.5s;
|
||||
}
|
||||
|
||||
.card-avatar {
|
||||
width: 100px;
|
||||
height: 100px;
|
||||
box-shadow: 0 8px 8px rgba(0, 0, 0, 0.2);
|
||||
border-radius: 50%;
|
||||
-o-object-position: center;
|
||||
object-position: center;
|
||||
-o-object-fit: cover;
|
||||
object-fit: cover;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-64px);
|
||||
}
|
||||
|
||||
.card-fullname {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
white-space: nowrap;
|
||||
transform: translateY(-10px) translateX(-50%);
|
||||
left: 50%;
|
||||
}
|
||||
|
||||
.card-jobtitle {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
font-size: 11px;
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
opacity: 0.7;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 1.5px;
|
||||
margin: 0;
|
||||
left: 50%;
|
||||
transform: translateX(-50%) translateY(-7px);
|
||||
}
|
||||
|
||||
.card-main {
|
||||
position: relative;
|
||||
flex: 1;
|
||||
display: flex;
|
||||
padding-top: 10px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.card-subtitle {
|
||||
font-weight: 700;
|
||||
font-size: 13px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.card-desc {
|
||||
line-height: 1.6;
|
||||
color: #636b6f;
|
||||
font-size: 14px;
|
||||
margin: 0;
|
||||
font-weight: 400;
|
||||
font-family: "DM Sans", sans-serif;
|
||||
}
|
||||
|
||||
.card-social {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 20px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.card-social svg {
|
||||
fill: #a5b5ce;
|
||||
width: 16px;
|
||||
display: block;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.card-social a {
|
||||
color: #8797a1;
|
||||
height: 32px;
|
||||
width: 32px;
|
||||
border-radius: 50%;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: 0.3s;
|
||||
background-color: rgba(93, 133, 193, 0.05);
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.card-social a:hover svg {
|
||||
fill: #637faa;
|
||||
}
|
||||
.card-social a:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.card-buttons {
|
||||
display: flex;
|
||||
background-color: var(--theme-bg-color);
|
||||
margin-top: auto;
|
||||
color: var(--theme-color);
|
||||
position: sticky;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
}
|
||||
.card-buttons button {
|
||||
flex: 1 1 auto;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
background: 0;
|
||||
font-size: 13px;
|
||||
border: 0;
|
||||
padding: 15px 5px;
|
||||
cursor: pointer;
|
||||
color: #5c5c6d;
|
||||
transition: 0.3s;
|
||||
font-family: "Jost", sans-serif;
|
||||
font-weight: 500;
|
||||
outline: 0;
|
||||
border-bottom: 3px solid transparent;
|
||||
}
|
||||
.card-buttons button.is-active, .card-buttons button:hover {
|
||||
color: #2b2c48;
|
||||
border-bottom: 3px solid #8a84ff;
|
||||
background: linear-gradient(to bottom, rgba(127, 199, 231, 0) 0%, rgba(207, 204, 255, 0.2) 44%, rgba(211, 226, 255, 0.4) 100%);
|
||||
}
|
||||
|
||||
.card-section {
|
||||
display: none;
|
||||
}
|
||||
.card-section.is-active {
|
||||
display: block;
|
||||
-webkit-animation: fadeIn 0.6s both;
|
||||
animation: fadeIn 0.6s both;
|
||||
}
|
||||
|
||||
@-webkit-keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translatey(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes fadeIn {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: translatey(40px);
|
||||
}
|
||||
100% {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
.card-timeline {
|
||||
margin-top: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.card-timeline:after {
|
||||
background: linear-gradient(to top, rgba(134, 214, 243, 0) 0%, #516acc 100%);
|
||||
content: "";
|
||||
left: 42px;
|
||||
width: 2px;
|
||||
top: 0;
|
||||
height: 100%;
|
||||
position: absolute;
|
||||
content: "";
|
||||
}
|
||||
|
||||
.card-item {
|
||||
position: relative;
|
||||
padding-left: 60px;
|
||||
padding-right: 20px;
|
||||
padding-bottom: 30px;
|
||||
z-index: 1;
|
||||
}
|
||||
.card-item:last-child {
|
||||
padding-bottom: 5px;
|
||||
}
|
||||
.card-item:after {
|
||||
content: attr(data-year);
|
||||
width: 10px;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 37px;
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
line-height: 0.6;
|
||||
border: 2px solid #fff;
|
||||
font-size: 11px;
|
||||
text-indent: -35px;
|
||||
border-radius: 50%;
|
||||
color: rgba(134, 134, 134, 0.7);
|
||||
background: linear-gradient(to bottom, #a0aee3 0%, #516acc 100%);
|
||||
}
|
||||
|
||||
.card-item-title {
|
||||
font-weight: 500;
|
||||
font-size: 14px;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.card-item-desc {
|
||||
font-size: 13px;
|
||||
color: #6f6f7b;
|
||||
line-height: 1.5;
|
||||
font-family: "DM Sans", sans-serif;
|
||||
}
|
||||
|
||||
.card-contact-wrapper {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.card-contact {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
font-size: 13px;
|
||||
color: #6f6f7b;
|
||||
font-family: "DM Sans", sans-serif;
|
||||
line-height: 1.6;
|
||||
cursor: pointer;
|
||||
}
|
||||
.card-contact + .card-contact {
|
||||
margin-top: 16px;
|
||||
}
|
||||
.card-contact svg {
|
||||
flex-shrink: 0;
|
||||
width: 30px;
|
||||
min-height: 34px;
|
||||
margin-right: 12px;
|
||||
transition: 0.3s;
|
||||
padding-right: 12px;
|
||||
border-right: 1px solid #dfe2ec;
|
||||
}
|
||||
|
||||
.contact-me {
|
||||
border: 0;
|
||||
outline: none;
|
||||
background: linear-gradient(to right, rgba(83, 200, 239, 0.8) 0%, rgba(81, 106, 204, 0.8) 96%);
|
||||
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.15);
|
||||
color: #fff;
|
||||
padding: 12px 16px;
|
||||
width: 100%;
|
||||
border-radius: 5px;
|
||||
margin-top: 25px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
font-family: "Jost", sans-serif;
|
||||
transition: 0.3s;
|
||||
}
|
||||
</style>
|
||||
@ -3,7 +3,7 @@
|
||||
<div class="side-wrapper">
|
||||
<!-- <div class="side-title">Apps</div>-->
|
||||
<div class="side-menu">
|
||||
<router-link to="/personal">
|
||||
<router-link to="/admin">
|
||||
<svg viewBox="0 0 512 512">
|
||||
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>
|
||||
@ -14,7 +14,7 @@
|
||||
首页
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
</router-link>
|
||||
<router-link to="/admin">
|
||||
<router-link to="/system">
|
||||
<svg viewBox="0 0 512 512">
|
||||
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
<path d="M0 0h128v128H0zm0 0M192 0h128v128H192zm0 0M384 0h128v128H384zm0 0M0 192h128v128H0zm0 0" data-original="#bfc9d1"></path>
|
||||
|
||||
@ -19,7 +19,7 @@ import $ from 'jquery'
|
||||
export default {
|
||||
name:"SettingMainHeader",
|
||||
props:{
|
||||
tabList:Object
|
||||
tabList:Array
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
@ -1,13 +1,97 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="base-main">
|
||||
<div>
|
||||
<span class="title">发信配置</span>
|
||||
<div>
|
||||
<el-form v-model="from">
|
||||
<el-form-item prop="username">
|
||||
<span class="min-title">邮箱用户名<br></span>
|
||||
<el-input
|
||||
v-model="from.username"
|
||||
prefix-icon="el-icon-user"
|
||||
placeholder="邮箱用户名"
|
||||
auto-complete="off"
|
||||
style="width: 600px"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="password">
|
||||
<span class="min-title">邮箱密码/授权码<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-unlock"
|
||||
:type="passwordVisible"
|
||||
v-model="from.password"
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
style="width: 600px"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="email">
|
||||
<span class="min-title">发件邮箱<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-s-promotion"
|
||||
v-model="from.email"
|
||||
placeholder="邮箱"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="smtp">
|
||||
<span class="min-title">SMTP地址<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-connection"
|
||||
v-model="from.smtp"
|
||||
placeholder="smtp"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
|
||||
</el-form-item>
|
||||
<el-form-item prop="port">
|
||||
<span class="min-title">端口<br></span>
|
||||
<el-input
|
||||
prefix-icon="el-icon-place"
|
||||
v-model="from.port"
|
||||
placeholder="port"
|
||||
style="width: 600px"
|
||||
>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-button class="el-button">保存修改</el-button>
|
||||
</el-form>
|
||||
<div style="display: flex;flex-direction: row;align-items: flex-start">
|
||||
<span class="min-title">常用邮箱的STMP地址:<br>
|
||||
QQ邮箱：smtp.qq.com<br>
|
||||
网易163：smtp.163.com<br>
|
||||
Gmail：smtp.gmail.com<br>
|
||||
</span>
|
||||
<span style="margin-left: 20px" class="min-title">常用邮箱的端口:<br>
|
||||
SMTP：25<br>
|
||||
SMTP SSL：465<br></span>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "BaseSettings",
|
||||
components: {},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
passwordVisible: "password",
|
||||
icon: "el-icon-view",
|
||||
from: {
|
||||
username: null,
|
||||
password: null,
|
||||
email: null,
|
||||
smtp: null,
|
||||
port: null,
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
@ -16,19 +100,31 @@ export default {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
methods: {
|
||||
// 显示密码
|
||||
showPass() {
|
||||
if (this.passwordVisible === "text") {
|
||||
this.passwordVisible = "password";
|
||||
//更换图标
|
||||
this.icon = "el-icon-view";
|
||||
} else {
|
||||
this.passwordVisible = "text";
|
||||
this.icon = "el-icon-lock";
|
||||
}
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main {
|
||||
.base-main {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
//align-items: center; margin-left: 50px; overflow: scroll;
|
||||
margin-left: 50px;
|
||||
overflow: scroll;
|
||||
//align-items: center; margin-left: 50px; overflow: scroll; margin-left: 50px;
|
||||
overflow: scroll !important;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
font-size: 20px;
|
||||
@ -36,4 +132,15 @@ export default {
|
||||
margin-top: 10px;
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
|
||||
.min-title {
|
||||
color: var(--theme-color);
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
.el-button{
|
||||
color: var(--theme-color);
|
||||
background-color: var(--theme-bg-color);
|
||||
border-color:var(--border-color) ;
|
||||
}
|
||||
|
||||
</style>
|
||||
1067
src/components/setting/onsite/Export.vue
Normal file
1067
src/components/setting/onsite/Export.vue
Normal file
File diff suppressed because it is too large
Load Diff
227
src/components/setting/onsite/Import.vue
Normal file
227
src/components/setting/onsite/Import.vue
Normal file
@ -0,0 +1,227 @@
|
||||
<template>
|
||||
<div class="container">
|
||||
<div class="main-box">
|
||||
<div class="box-content">
|
||||
<div class="svg">
|
||||
<svg width="33" height="28.5" viewBox="0 0 66 57" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M2.70977 0H19.4194C20.2733 0 21.0742 0.402215 21.5857 1.08315L25.3821 6.14266C25.8937 6.82361 26.6946 7.22581 27.5484 7.22581H62.3226C63.8185 7.22581 65.0323 8.43956 65.0323 9.93548V53.2903C65.0323 54.7862 63.8185 56 62.3226 56H2.70968C1.21376 56 0 54.7862 0 53.2903V2.70968C0 1.21375 1.21385 0 2.70977 0Z" transform="translate(0.0177612 0.740387)" fill="#4F8AFE"></path>
|
||||
</svg>
|
||||
</div>
|
||||
<div class="text">
|
||||
<p class="title">上传文件</p>
|
||||
</div>
|
||||
<div class="dots">
|
||||
<div></div>
|
||||
<div></div>
|
||||
<div></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name: "Import",
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
|
||||
|
||||
.container {
|
||||
-webkit-transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
|
||||
transition: all 600ms cubic-bezier(0.81,-0.12, 0.64, 0.99);
|
||||
}
|
||||
|
||||
.main-box {
|
||||
cursor: pointer;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
-webkit-box-pack: start;
|
||||
-ms-flex-pack: start;
|
||||
justify-content: flex-start;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
width: 250px;
|
||||
height: 70px;
|
||||
background: #FFFFFF;
|
||||
-webkit-box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 3px 8px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 24px;
|
||||
padding: 40px;
|
||||
-webkit-transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
transition: all 800ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
}
|
||||
|
||||
.box-content {
|
||||
width: 100%;
|
||||
display: -webkit-box;
|
||||
display: -ms-flexbox;
|
||||
display: flex;
|
||||
position: relative;
|
||||
/* flex-direction: row; */
|
||||
/* flex-wrap: nowrap; */
|
||||
-webkit-box-pack: justify;
|
||||
-ms-flex-pack: justify;
|
||||
justify-content: space-between;
|
||||
-webkit-box-align: center;
|
||||
-ms-flex-align: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.box-content .text {
|
||||
position: relative;
|
||||
left: -10px;
|
||||
//margin-left: 82px;
|
||||
}
|
||||
|
||||
.text .title {
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: bold;
|
||||
line-height: normal;
|
||||
font-size: 18px;
|
||||
color: #4F4F4F;
|
||||
}
|
||||
|
||||
.text span {
|
||||
font-family: sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: 500;
|
||||
line-height: normal;
|
||||
font-size: 20px;
|
||||
color: #4F4F4F;
|
||||
}
|
||||
|
||||
.dots div {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background: #4F8AFE;
|
||||
margin: 3px;
|
||||
border-radius: 100%;
|
||||
-webkit-border-radius: 100%;
|
||||
-moz-border-radius: 100%;
|
||||
-ms-border-radius: 100%;
|
||||
-o-border-radius: 100%;
|
||||
}
|
||||
|
||||
.blue-bg {
|
||||
display: none;
|
||||
position: absolute;
|
||||
right: 400px;
|
||||
z-index: 1;
|
||||
width: 82.35px;
|
||||
height: 70px;
|
||||
background: #4F8AFE;
|
||||
-webkit-box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
|
||||
border-radius: 0 24px 24px 0;
|
||||
-webkit-border-radius: 0 24px 24px 0;
|
||||
-moz-border-radius: 0 24px 24px 0;
|
||||
-ms-border-radius: 0 24px 24px 0;
|
||||
-o-border-radius: 0 24px 24px 0;
|
||||
}
|
||||
|
||||
.box-content::after {
|
||||
content: '';
|
||||
/*display: none;
|
||||
*/
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -10px;
|
||||
z-index: -1;
|
||||
width: 100px;
|
||||
height: 70px;
|
||||
background: #4F8AFE;
|
||||
border-radius: 0 24px 24px 0;
|
||||
-webkit-border-radius: 0 24px 24px 0;
|
||||
-moz-border-radius: 0 24px 24px 0;
|
||||
-ms-border-radius: 0 24px 24px 0;
|
||||
-o-border-radius: 0 24px 24px 0;
|
||||
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
}
|
||||
|
||||
.main-box:hover .box-content::after {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
-webkit-transform: translateX(120px);
|
||||
transform: translateX(120px);
|
||||
}
|
||||
|
||||
.box-content::before {
|
||||
content: '';
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
right: -30px;
|
||||
/* z-index:1; */
|
||||
width: 162px;
|
||||
height: 70px;
|
||||
background: url('data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iOTIiIGhlaWdodD0iNTciIHZpZXdCb3g9IjAgMCA5MiA1NyIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHBhdGggZD0iTTE3Ljc2ODkgNTZINzMuNzcyM0M4My41ODYyIDU2IDkxLjU0NDggNDguMDQxMyA5MS41NDQ4IDM4LjIyNzZDOTEuNTQ0OCAyOS40NzM4IDg1LjIxNjQgMjIuMjE4MSA3Ni44ODQgMjAuNzQ0Qzc0LjYzMTMgMTQuMTQyNSA2OC4zOTEzIDkuMzg4MDcgNjEuMDI2NiA5LjM4ODA3QzU4LjQwMDUgOS4zODgwNyA1NS45MjcgMTAuMDEwNSA1My43MTQ0IDExLjA4NjZDNTAuMzEzMyA0LjUwNTI1IDQzLjQ1ODggMCAzNS41NDQyIDBDMjQuMjQ4OSAwIDE1LjA4OTggOS4xNTkzNSAxNS4wODk4IDIwLjQ1NDRDMTUuMDg5OCAyMC41MzA3IDE1LjEwMTggMjAuNjAzIDE1LjEwMTggMjAuNjc5M0M2LjU1Njg3IDIxLjk3MjIgNi4wNzE3OGUtMDYgMjkuMzI0NiA2LjA3MTc4ZS0wNiAzOC4yMzA3Qy0wLjAwODAyNDM3IDQ4LjA0NDUgNy45NTA2OCA1NS45OTkgMTcuNzY4MyA1NS45OTlMMTcuNzY4OSA1NloiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAuMjk0MjUgMC4yNDAzODcpIiBmaWxsPSJ3aGl0ZSIvPgo8L3N2Zz4K');
|
||||
background-repeat: no-repeat;
|
||||
background-position: 45px center;
|
||||
-webkit-transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
transition: all 700ms cubic-bezier(0.82, -0.02, 0.4, 1.18);
|
||||
}
|
||||
|
||||
.main-box:hover .box-content::before {
|
||||
opacity: 1;
|
||||
position: absolute;
|
||||
/* z-index: 1; */
|
||||
-webkit-transform: translateX(120px) scale(.7);
|
||||
transform: translateX(120px) scale(.7);
|
||||
}
|
||||
|
||||
.dots div {
|
||||
-webkit-transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
|
||||
transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02);
|
||||
}
|
||||
|
||||
.main-box:hover .dots div:nth-child(1) {
|
||||
-webkit-transform: translateY(9px);
|
||||
transform: translateY(9px);
|
||||
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
|
||||
}
|
||||
|
||||
.main-box:hover .dots div:nth-child(2) {
|
||||
-webkit-transform: scale(3);
|
||||
transform: scale(3);
|
||||
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
|
||||
}
|
||||
|
||||
.main-box:hover .dots div:nth-child(3) {
|
||||
-webkit-transform: translateY(-9px);
|
||||
transform: translateY(-9px);
|
||||
/* transition: all 500ms cubic-bezier(0.65, 0.51, 0.37, 1.02); */
|
||||
}
|
||||
|
||||
.container:hover {
|
||||
/* z-index: 2; */
|
||||
-webkit-transform: translateX(-75px);
|
||||
transform: translateX(-75px);
|
||||
}
|
||||
|
||||
|
||||
.dr {
|
||||
position: absolute;
|
||||
bottom: 16px;
|
||||
right: 16px;
|
||||
width:70px;
|
||||
}
|
||||
</style>
|
||||
@ -1,9 +1,31 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div>
|
||||
<el-image style="margin-top: 20px;width: 300px;height: 250px" :src="require('@/assets/img/daoru.a909296f.webp')"></el-image>
|
||||
</div>
|
||||
<div style="margin-top: 20px;display: flex;align-items: center;flex-direction: column">
|
||||
<span class="title">导入数据</span>
|
||||
<div style="width: 200px;height: 70px">
|
||||
<Import></Import>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 20px">
|
||||
<span class="title">导出数据</span>
|
||||
<div>
|
||||
<Export></Export>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import Import from "@/components/setting/onsite/Import.vue";
|
||||
import Export from "@/components/setting/onsite/Export.vue";
|
||||
|
||||
export default {
|
||||
name: "ImportExport",
|
||||
components: {Export, Import},
|
||||
data() {
|
||||
return {}
|
||||
},
|
||||
@ -19,5 +41,23 @@ export default {
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
.main{
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
overflow: scroll;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-weight: bolder;
|
||||
font-size: 20px;
|
||||
color: var(--theme-color);
|
||||
margin-top: 10px;
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
|
||||
.min-title {
|
||||
color: var(--theme-color);
|
||||
//background-color: var(--theme-bg-color);
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div class="main">
|
||||
<div class="main-container">
|
||||
<SettingMainHeader :tab-list="tabList"></SettingMainHeader>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
|
||||
@ -56,13 +56,18 @@ const routes = [
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
redirect: '/personal',
|
||||
redirect: '/admin',
|
||||
name: '/settings',
|
||||
component: settings,
|
||||
children: [
|
||||
{
|
||||
path: '/admin',
|
||||
name: '/admin',
|
||||
component: personalHomePage
|
||||
},
|
||||
{
|
||||
path: '/system',
|
||||
name: '/system',
|
||||
redirect: '/appearance',
|
||||
component: systemSettings,
|
||||
children:[
|
||||
@ -88,11 +93,7 @@ const routes = [
|
||||
name: '/website',
|
||||
component: websiteManage
|
||||
},
|
||||
{
|
||||
path: '/personal',
|
||||
name: '/personal',
|
||||
component: personalHomePage
|
||||
},
|
||||
|
||||
{
|
||||
path: '/onSite',
|
||||
name: '/onSite',
|
||||
|
||||
@ -6,7 +6,7 @@ import { Message} from 'element-ui';
|
||||
//1. 创建新的axios实例，
|
||||
const service = axios.create({
|
||||
// 公共接口--这里注意后面会讲
|
||||
// baseURL: process.env.VUE_APP_BASE_API,
|
||||
baseURL: '/api',
|
||||
// 超时时间 单位是ms，这里设置了3s的超时时间
|
||||
timeout: 3 * 1000
|
||||
})
|
||||
@ -15,7 +15,8 @@ service.interceptors.request.use(config => {
|
||||
//发请求前做的一些处理，数据转化，配置请求头，设置token,设置loading等，根据需求去添加
|
||||
config.data = JSON.stringify(config.data); //数据转化,也可以使用qs转换
|
||||
config.headers = {
|
||||
'Content-Type':'application/json' //配置请求头
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
"Content-Type": "application/json;charset=utf-8"
|
||||
}
|
||||
//如有需要：注意使用token的时候需要引入cookie方法或者用本地localStorage等方法，推荐js-cookie
|
||||
//const token = getCookie('名称');//这里取token之前，你肯定需要先拿到token,存一下
|
||||
|
||||
233
src/utils/tools.js
Normal file
233
src/utils/tools.js
Normal file
@ -0,0 +1,233 @@
|
||||
|
||||
|
||||
/**
|
||||
* 通用js方法封装处理
|
||||
* Copyright (c) 2019 tszh
|
||||
*/
|
||||
|
||||
// 日期格式化
|
||||
export function parseTime(time, pattern) {
|
||||
if (arguments.length === 0 || !time) {
|
||||
return null
|
||||
}
|
||||
const format = pattern || '{y}-{m}-{d} {h}:{i}:{s}'
|
||||
let date
|
||||
if (typeof time === 'object') {
|
||||
date = time
|
||||
} else {
|
||||
if ((typeof time === 'string') && (/^[0-9]+$/.test(time))) {
|
||||
time = parseInt(time)
|
||||
} else if (typeof time === 'string') {
|
||||
time = time.replace(new RegExp(/-/gm), '/').replace('T', ' ').replace(new RegExp(/\.[\d]{3}/gm), '');
|
||||
}
|
||||
if ((typeof time === 'number') && (time.toString().length === 10)) {
|
||||
time = time * 1000
|
||||
}
|
||||
date = new Date(time)
|
||||
}
|
||||
const formatObj = {
|
||||
y: date.getFullYear(),
|
||||
m: date.getMonth() + 1,
|
||||
d: date.getDate(),
|
||||
h: date.getHours(),
|
||||
i: date.getMinutes(),
|
||||
s: date.getSeconds(),
|
||||
a: date.getDay()
|
||||
}
|
||||
const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
|
||||
let value = formatObj[key]
|
||||
// Note: getDay() returns 0 on Sunday
|
||||
if (key === 'a') { return ['日', '一', '二', '三', '四', '五', '六'][value] }
|
||||
if (result.length > 0 && value < 10) {
|
||||
value = '0' + value
|
||||
}
|
||||
return value || 0
|
||||
})
|
||||
return time_str
|
||||
}
|
||||
|
||||
// 表单重置
|
||||
export function resetForm(refName) {
|
||||
if (this.$refs[refName]) {
|
||||
this.$refs[refName].resetFields();
|
||||
}
|
||||
}
|
||||
|
||||
// 添加日期范围
|
||||
export function addDateRange(params, dateRange, propName) {
|
||||
let search = params;
|
||||
search.params = typeof (search.params) === 'object' && search.params !== null && !Array.isArray(search.params) ? search.params : {};
|
||||
dateRange = Array.isArray(dateRange) ? dateRange : [];
|
||||
if (typeof (propName) === 'undefined') {
|
||||
search.params['beginTime'] = dateRange[0];
|
||||
search.params['endTime'] = dateRange[1];
|
||||
} else {
|
||||
search.params['begin' + propName] = dateRange[0];
|
||||
search.params['end' + propName] = dateRange[1];
|
||||
}
|
||||
return search;
|
||||
}
|
||||
|
||||
// 回显数据字典
|
||||
export function selectDictLabel(datas, value) {
|
||||
if (value === undefined) {
|
||||
return "";
|
||||
}
|
||||
var actions = [];
|
||||
Object.keys(datas).some((key) => {
|
||||
if (datas[key].value == ('' + value)) {
|
||||
actions.push(datas[key].label);
|
||||
return true;
|
||||
}
|
||||
})
|
||||
if (actions.length === 0) {
|
||||
actions.push(value);
|
||||
}
|
||||
return actions.join('');
|
||||
}
|
||||
|
||||
// 回显数据字典（字符串、数组）
|
||||
export function selectDictLabels(datas, value, separator) {
|
||||
if (value === undefined || value.length ===0) {
|
||||
return "";
|
||||
}
|
||||
if (Array.isArray(value)) {
|
||||
value = value.join(",");
|
||||
}
|
||||
var actions = [];
|
||||
var currentSeparator = undefined === separator ? "," : separator;
|
||||
var temp = value.split(currentSeparator);
|
||||
Object.keys(value.split(currentSeparator)).some((val) => {
|
||||
var match = false;
|
||||
Object.keys(datas).some((key) => {
|
||||
if (datas[key].value == ('' + temp[val])) {
|
||||
actions.push(datas[key].label + currentSeparator);
|
||||
match = true;
|
||||
}
|
||||
})
|
||||
if (!match) {
|
||||
actions.push(temp[val] + currentSeparator);
|
||||
}
|
||||
})
|
||||
return actions.join('').substring(0, actions.join('').length - 1);
|
||||
}
|
||||
|
||||
// 字符串格式化(%s )
|
||||
export function sprintf(str) {
|
||||
var args = arguments, flag = true, i = 1;
|
||||
str = str.replace(/%s/g, function () {
|
||||
var arg = args[i++];
|
||||
if (typeof arg === 'undefined') {
|
||||
flag = false;
|
||||
return '';
|
||||
}
|
||||
return arg;
|
||||
});
|
||||
return flag ? str : '';
|
||||
}
|
||||
|
||||
// 转换字符串，undefined,null等转化为""
|
||||
export function parseStrEmpty(str) {
|
||||
if (!str || str == "undefined" || str == "null") {
|
||||
return "";
|
||||
}
|
||||
return str;
|
||||
}
|
||||
|
||||
// 数据合并
|
||||
export function mergeRecursive(source, target) {
|
||||
for (var p in target) {
|
||||
try {
|
||||
if (target[p].constructor == Object) {
|
||||
source[p] = mergeRecursive(source[p], target[p]);
|
||||
} else {
|
||||
source[p] = target[p];
|
||||
}
|
||||
} catch (e) {
|
||||
source[p] = target[p];
|
||||
}
|
||||
}
|
||||
return source;
|
||||
};
|
||||
|
||||
/**
|
||||
* 构造树型结构数据
|
||||
* @param {*} data 数据源
|
||||
* @param {*} id id字段 默认 'id'
|
||||
* @param {*} parentId 父节点字段 默认 'parentId'
|
||||
* @param {*} children 孩子节点字段 默认 'children'
|
||||
*/
|
||||
export function handleTree(data, id, parentId, children) {
|
||||
let config = {
|
||||
id: id || 'id',
|
||||
parentId: parentId || 'parentId',
|
||||
childrenList: children || 'children'
|
||||
};
|
||||
|
||||
var childrenListMap = {};
|
||||
var nodeIds = {};
|
||||
var tree = [];
|
||||
|
||||
for (let d of data) {
|
||||
let parentId = d[config.parentId];
|
||||
if (childrenListMap[parentId] == null) {
|
||||
childrenListMap[parentId] = [];
|
||||
}
|
||||
nodeIds[d[config.id]] = d;
|
||||
childrenListMap[parentId].push(d);
|
||||
}
|
||||
|
||||
for (let d of data) {
|
||||
let parentId = d[config.parentId];
|
||||
if (nodeIds[parentId] == null) {
|
||||
tree.push(d);
|
||||
}
|
||||
}
|
||||
|
||||
for (let t of tree) {
|
||||
adaptToChildrenList(t);
|
||||
}
|
||||
|
||||
function adaptToChildrenList(o) {
|
||||
if (childrenListMap[o[config.id]] !== null) {
|
||||
o[config.childrenList] = childrenListMap[o[config.id]];
|
||||
}
|
||||
if (o[config.childrenList]) {
|
||||
for (let c of o[config.childrenList]) {
|
||||
adaptToChildrenList(c);
|
||||
}
|
||||
}
|
||||
}
|
||||
return tree;
|
||||
}
|
||||
|
||||
/**
|
||||
* 参数处理
|
||||
* @param {*} params 参数
|
||||
*/
|
||||
export function tansParams(params) {
|
||||
let result = ''
|
||||
for (const propName of Object.keys(params)) {
|
||||
const value = params[propName];
|
||||
var part = encodeURIComponent(propName) + "=";
|
||||
if (value !== null && value !== "" && typeof (value) !== "undefined") {
|
||||
if (typeof value === 'object') {
|
||||
for (const key of Object.keys(value)) {
|
||||
if (value[key] !== null && value[key] !== "" && typeof (value[key]) !== 'undefined') {
|
||||
let params = propName + '[' + key + ']';
|
||||
var subPart = encodeURIComponent(params) + "=";
|
||||
result += subPart + encodeURIComponent(value[key]) + "&";
|
||||
}
|
||||
}
|
||||
} else {
|
||||
result += part + encodeURIComponent(value) + "&";
|
||||
}
|
||||
}
|
||||
}
|
||||
return result
|
||||
}
|
||||
|
||||
// 验证是否为blob格式
|
||||
export function blobValidate(data) {
|
||||
return data.type !== 'application/json'
|
||||
}
|
||||
83
src/utils/validate.js
Normal file
83
src/utils/validate.js
Normal file
@ -0,0 +1,83 @@
|
||||
/**
|
||||
* @param {string} path
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isExternal(path) {
|
||||
return /^(https?:|mailto:|tel:)/.test(path)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUsername(str) {
|
||||
const valid_map = ['admin', 'editor']
|
||||
return valid_map.indexOf(str.trim()) >= 0
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} url
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validURL(url) {
|
||||
const reg = /^(https?|ftp):\/\/([a-zA-Z0-9.-]+(:[a-zA-Z0-9.&%$-]+)*@)*((25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9][0-9]?)(\.(25[0-5]|2[0-4][0-9]|1[0-9]{2}|[1-9]?[0-9])){3}|([a-zA-Z0-9-]+\.)*[a-zA-Z0-9-]+\.(com|edu|gov|int|mil|net|org|biz|arpa|info|name|pro|aero|coop|museum|[a-zA-Z]{2}))(:[0-9]+)*(\/($|[a-zA-Z0-9.,?'\\+&%$#=~_-]+))*$/
|
||||
return reg.test(url)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validLowerCase(str) {
|
||||
const reg = /^[a-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validUpperCase(str) {
|
||||
const reg = /^[A-Z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validAlphabets(str) {
|
||||
const reg = /^[A-Za-z]+$/
|
||||
return reg.test(str)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} email
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function validEmail(email) {
|
||||
const reg = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
|
||||
return reg.test(email)
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {string} str
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isString(str) {
|
||||
if (typeof str === 'string' || str instanceof String) {
|
||||
return true
|
||||
}
|
||||
return false
|
||||
}
|
||||
|
||||
/**
|
||||
* @param {Array} arg
|
||||
* @returns {Boolean}
|
||||
*/
|
||||
export function isArray(arg) {
|
||||
if (typeof Array.isArray === 'undefined') {
|
||||
return Object.prototype.toString.call(arg) === '[object Array]'
|
||||
}
|
||||
return Array.isArray(arg)
|
||||
}
|
||||
@ -14,23 +14,28 @@ module.exports = defineConfig({
|
||||
|
||||
'/api': {
|
||||
//后端接口的baseurl
|
||||
target: 'https://open.tophub.today',
|
||||
target: 'http://localhost:8080',
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
// ws: true, //是否代理 websockets
|
||||
// secure: true,
|
||||
// 'secure': true,
|
||||
headers: {
|
||||
Connection: "kepp-alive"
|
||||
Connection: "kepp-alive",
|
||||
'Access-Control-Allow-Origin': '*',
|
||||
"Content-Type": "application/json;charset=utf-8"
|
||||
},
|
||||
pathRewrite: {
|
||||
//这里的作用是使用去掉api
|
||||
'^/api': ''
|
||||
}
|
||||
},
|
||||
|
||||
|
||||
|
||||
'/dev': {
|
||||
//后端接口的baseurl
|
||||
target: 'http://localhost:8080',
|
||||
target: 'https://open.tophub.today',
|
||||
//是否允许跨域
|
||||
changeOrigin: true,
|
||||
// ws: true, //是否代理 websockets
|
||||
|
||||
Loading…
Reference in New Issue
Block a user