LoveNav/love-nav-vue
5
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

update

Browse Source
This commit is contained in:
landaiqing
2023-12-22 22:57:37 +08:00
parent e8e402cf4d
commit d20dea0944
21 changed files with 2413 additions and 145 deletions
Download Patch File Download Diff File Expand all files Collapse all files

214
src/components/home/HomeHeader.vue
View File

@@ -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);
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
});
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'}, 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
});
}
})
},
// 注册提交
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) => {
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: error,
offset: 50
message: "请填写完整信息！",
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "两次密码不相同",
offset: 50
});
}
}
})
},
//重置
resetForm(formName) {
@@ -406,44 +432,48 @@ export default {
},
// 发送邮箱验证码
sendEmail() {
if (this.registerFrom.email !== null) {
sendActiveCode().then(response => {
console.log(response);
Vue.prototype.$notify({
title: '成功',
message: ('i', {style: 'color: teal'}, response.data.msg),
type: 'success',
offset: 50
});
}).catch((error) => {
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'}, res.data),
type: 'success',
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: 0
});
})
}else {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 50
message: '请填写邮箱！',
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
});
}
}
},
//点击图片更换验证码

7
src/components/hotNews/HotNews.vue
View File

@@ -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>

7
src/components/setting/home/PersonalHomePage.vue
View File

@@ -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
View 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&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;q=80')"></div>
<img class="card-avatar" src="https://images.unsplash.com/photo-1549068106-b024baf5062d?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=crop&amp;w=934&amp;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>

4
src/components/setting/layout/SettingLeftSide.vue
View File

@@ -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>

2
src/components/setting/layout/SettingMainHeader.vue
View File

@@ -19,7 +19,7 @@ import $ from 'jquery'
export default {
name:"SettingMainHeader",
props:{
tabList:Object
tabList:Array
},
data() {
return {

123
src/components/setting/onsite/BaseSettings.vue
View File

@@ -1,13 +1,97 @@
<template>
<div class="main">
<span class="title">发信配置</span>
<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
View File

File diff suppressed because it is too large Load Diff

227
src/components/setting/onsite/Import.vue Normal file
View 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>

40
src/components/setting/onsite/ImportExport.vue
View File

@@ -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>

2
src/components/setting/onsite/OnSiteSetting.vue
View File

@@ -1,5 +1,5 @@
<template>
<div class="main">
<div class="main-container">
<SettingMainHeader :tab-list="tabList"></SettingMainHeader>
<router-view></router-view>
</div>