admin manage page update
This commit is contained in:
parent
a45d591988
commit
e8e402cf4d
29
src/api/login.js
Normal file
29
src/api/login.js
Normal file
@ -0,0 +1,29 @@
|
|||||||
|
import request from "@/utils/request.js";
|
||||||
|
import qs from "qs";
|
||||||
|
|
||||||
|
const baseUrl = '/dev'
|
||||||
|
|
||||||
|
|
||||||
|
export function login(params) {
|
||||||
|
return request({
|
||||||
|
url: baseUrl+"/login",
|
||||||
|
method: "post",
|
||||||
|
data:params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function register(params) {
|
||||||
|
return request({
|
||||||
|
url: baseUrl+"/register",
|
||||||
|
method: "post",
|
||||||
|
data:params
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sendActiveCode() {
|
||||||
|
return request({
|
||||||
|
url: baseUrl+"/sendActiveCode",
|
||||||
|
method: "get",
|
||||||
|
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -565,7 +565,7 @@ body.light-mode .video-bg:before {
|
|||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
transition: 0.3s;
|
transition: 0.3s;
|
||||||
}
|
}
|
||||||
.content-section ul li:hover {
|
.content-section ul:hover {
|
||||||
background-color: var(--theme-bg-color);
|
background-color: var(--theme-bg-color);
|
||||||
}
|
}
|
||||||
.content-section ul li:hover:first-child {
|
.content-section ul li:hover:first-child {
|
||||||
@ -587,7 +587,7 @@ body.light-mode .video-bg:before {
|
|||||||
.products {
|
.products {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
width: 150px;
|
width: 40px;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 480px) {
|
@media screen and (max-width: 480px) {
|
||||||
.products {
|
.products {
|
||||||
@ -596,28 +596,29 @@ body.light-mode .video-bg:before {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.status {
|
.status {
|
||||||
margin-left: auto;
|
/*margin-left: auto;*/
|
||||||
width: 140px;
|
width: 140px;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
text-align: left;
|
||||||
}
|
}
|
||||||
@media screen and (max-width: 700px) {
|
@media screen and (max-width: 700px) {
|
||||||
.status {
|
.status {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.status-circle {
|
/*.status-circle {*/
|
||||||
width: 6px;
|
/* width: 6px;*/
|
||||||
height: 6px;
|
/* height: 6px;*/
|
||||||
background-color: #396df0;
|
/* background-color: #396df0;*/
|
||||||
position: absolute;
|
/* position: absolute;*/
|
||||||
border-radius: 50%;
|
/* border-radius: 50%;*/
|
||||||
top: 4px;
|
/* top: 4px;*/
|
||||||
left: -20px;
|
/* left: -20px;*/
|
||||||
}
|
/*}*/
|
||||||
.status-circle.green {
|
/*.status-circle.green {*/
|
||||||
background-color: #3bf083;
|
/* background-color: #3bf083;*/
|
||||||
}
|
/*}*/
|
||||||
.status-button {
|
.status-button {
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
margin-top: 0;
|
margin-top: 0;
|
||||||
@ -642,57 +643,57 @@ body.light-mode .video-bg:before {
|
|||||||
background: #1e59f1;
|
background: #1e59f1;
|
||||||
}
|
}
|
||||||
|
|
||||||
.menu {
|
/*.menu {*/
|
||||||
width: 5px;
|
/* width: 5px;*/
|
||||||
height: 5px;
|
/* height: 5px;*/
|
||||||
background-color: var(--button-inactive);
|
/* background-color: var(--button-inactive);*/
|
||||||
border-radius: 50%;
|
/* border-radius: 50%;*/
|
||||||
box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);
|
/* box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);*/
|
||||||
margin: 0 12px;
|
/* margin: 0 12px;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
@media screen and (max-width: 415px) {
|
@media screen and (max-width: 415px) {
|
||||||
.adobe-product .menu {
|
.adobe-product .menu {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.dropdown {
|
/*.dropdown {*/
|
||||||
position: relative;
|
/* position: relative;*/
|
||||||
height: 53px;
|
/* height: 53px;*/
|
||||||
width: 40px;
|
/* width: 40px;*/
|
||||||
top: -24px;
|
/* top: -24px;*/
|
||||||
display: flex;
|
/* display: flex;*/
|
||||||
left: -5px;
|
/* left: -5px;*/
|
||||||
background: transparent;
|
/* background: transparent;*/
|
||||||
border: none;
|
/* border: none;*/
|
||||||
cursor: pointer;
|
/* cursor: pointer;*/
|
||||||
}
|
/*}*/
|
||||||
.dropdown ul {
|
/*.dropdown ul {*/
|
||||||
position: absolute;
|
/* position: absolute;*/
|
||||||
background: var(--dropdown-bg);
|
/* background: var(--dropdown-bg);*/
|
||||||
height: 110px;
|
/* height: 30px;*/
|
||||||
width: 120px;
|
/* width: 50px;*/
|
||||||
right: 0;
|
/* right: 0;*/
|
||||||
top: 20px;
|
/* top: 20px;*/
|
||||||
pointer-events: none;
|
/* pointer-events: none;*/
|
||||||
opacity: 0;
|
/* opacity: 0;*/
|
||||||
transform: translatey(10px);
|
/* transform: translatey(10px);*/
|
||||||
transition: all 0.4s ease;
|
/* transition: all 0.4s ease;*/
|
||||||
}
|
/*}*/
|
||||||
.dropdown ul li a {
|
/*.dropdown ul li a {*/
|
||||||
text-decoration: none;
|
/* text-decoration: none;*/
|
||||||
color: var(--theme-color);
|
/* color: var(--theme-color);*/
|
||||||
font-size: 12px;
|
/* font-size: 12px;*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
.dropdown.is-active ul {
|
/*.dropdown.is-active ul {*/
|
||||||
opacity: 1;
|
/* opacity: 1;*/
|
||||||
pointer-events: all;
|
/* pointer-events: all;*/
|
||||||
transform: translatey(25px);
|
/* transform: translatey(25px);*/
|
||||||
}
|
/*}*/
|
||||||
.dropdown.is-active ul li:hover {
|
/*.dropdown.is-active ul:hover {*/
|
||||||
background-color: var(--dropdown-hover);
|
/* background-color: var(--dropdown-hover);*/
|
||||||
}
|
/*}*/
|
||||||
|
|
||||||
.button-wrapper {
|
.button-wrapper {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|||||||
1
src/assets/img/notice.svg
Normal file
1
src/assets/img/notice.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1703175714308" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7048" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M5.12 512c0 280.064 226.816 506.88 506.88 506.88s506.88-226.816 506.88-506.88-226.816-506.88-506.88-506.88S5.12 231.936 5.12 512z" fill="#FFE0DE" p-id="7049"></path><path d="M106.496 512c0 223.744 181.248 405.504 405.504 405.504s405.504-181.248 405.504-405.504v-0.512c0-223.744-181.248-405.504-405.504-405.504S106.496 287.744 106.496 512z" fill="#F55041" p-id="7050"></path><path d="M509.44 219.648c-12.8-7.68-28.16-7.68-41.472 0L338.944 330.752H264.192c-33.792 0-61.952 28.16-61.952 61.952v227.328c0 33.792 28.16 61.952 61.952 61.952h74.752l126.464 108.544 2.56 2.56c5.12 2.56 12.8 5.12 20.48 5.12 25.6 2.048 40.448-14.336 41.472-46.592V256c0-15.872-7.68-28.672-20.48-36.352zM605.184 372.224c-7.68-5.12-20.48-2.56-25.6 7.68-5.12 7.68-2.56 20.48 7.68 25.6 38.912 20.48 61.952 59.392 61.952 103.424 0 41.472-20.48 79.872-54.272 100.864-7.68 7.68-10.24 17.92-5.12 28.16 2.56 7.68 7.68 10.24 15.36 10.24 5.12 0 7.68-2.56 10.24-2.56 44.032-31.232 72.192-79.872 72.192-134.144 0-59.392-30.72-111.104-82.432-139.264z" fill="#FFFFFF" p-id="7051"></path><path d="M659.456 240.128c-7.68-5.12-20.48-2.56-25.6 7.68-5.12 7.68-2.56 20.48 7.68 25.6 84.992 46.592 139.264 136.704 139.264 235.008 0 93.184-46.592 178.176-123.904 227.328-7.68 7.68-10.24 17.92-5.12 28.16 2.56 7.68 23.04 10.24 25.6 5.12 88.064-56.832 141.824-152.576 141.824-258.048 0-113.152-61.952-216.576-159.744-270.848z" fill="#FFFFFF" p-id="7052"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.7 KiB |
BIN
src/assets/img/wallhaven-1pd98v.jpg
Normal file
BIN
src/assets/img/wallhaven-1pd98v.jpg
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.0 MiB |
66
src/components/home/Carousel.vue
Normal file
66
src/components/home/Carousel.vue
Normal file
@ -0,0 +1,66 @@
|
|||||||
|
<template>
|
||||||
|
<el-carousel :interval="5000" trigger="click" type="card" height="200px">
|
||||||
|
<el-carousel-item v-for="item in urls" :key="item">
|
||||||
|
<el-image :src="item" fit="scale-down" @click="goToLink('https://landaiqing.space')">
|
||||||
|
<div slot="error" class="image-slot">
|
||||||
|
<i class="el-icon-picture-outline"></i>
|
||||||
|
</div>
|
||||||
|
</el-image>
|
||||||
|
</el-carousel-item>
|
||||||
|
</el-carousel>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"CarouselComponent",
|
||||||
|
components:{
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
urls: [
|
||||||
|
'https://pic.imgdb.cn/item/65622651c458853aef5576d1.jpg',
|
||||||
|
'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
|
||||||
|
'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
|
||||||
|
]
|
||||||
|
}},
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goToLink(url){
|
||||||
|
window.open(url,'_blank')
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.el-carousel__item h3 {
|
||||||
|
color: #475669;
|
||||||
|
font-size: 14px;
|
||||||
|
opacity: 0.75;
|
||||||
|
line-height: 200px;
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n) {
|
||||||
|
background-color: #99a9bf;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-carousel__item:nth-child(2n+1) {
|
||||||
|
background-color: #d3dce6;
|
||||||
|
}
|
||||||
|
.el-carousel__item,.el-carousel {
|
||||||
|
border-radius: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -2,14 +2,16 @@
|
|||||||
<div class="header">
|
<div class="header">
|
||||||
<div class="menu-circle"></div>
|
<div class="menu-circle"></div>
|
||||||
<div class="header-menu">
|
<div class="header-menu">
|
||||||
<router-link class="menu-link notify" active-class="is-active" v-for="(item,index) in tabList" v-if="tabList.length>0" :key="item.index" :to="item.path" >{{item.libel}}</router-link>
|
<router-link class="menu-link notify" active-class="is-active" v-for="(item,index) in tabList"
|
||||||
|
v-if="tabList.length>0" :key="item.index" :to="item.path">{{ item.libel }}
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
<!-- <el-menu class="header-menu" :default-active="$route.path" router background-color="#0C0F194C">-->
|
<!-- <el-menu class="header-menu" :default-active="$route.path" router background-color="#0C0F194C">-->
|
||||||
<!-- <el-menu-item class="menu-link is-active" index="/home">ALL</el-menu-item>-->
|
<!-- <el-menu-item class="menu-link is-active" index="/home">ALL</el-menu-item>-->
|
||||||
<!-- <el-menu-item class="menu-link notify" index="/news">HotNews</el-menu-item>-->
|
<!-- <el-menu-item class="menu-link notify" index="/news">HotNews</el-menu-item>-->
|
||||||
<!-- <el-menu-item class="menu-link" index="/navDetail">Discover</el-menu-item>-->
|
<!-- <el-menu-item class="menu-link" index="/navDetail">Discover</el-menu-item>-->
|
||||||
<!-- <el-menu-item class="menu-link notify" index="#">Market</el-menu-item>-->
|
<!-- <el-menu-item class="menu-link notify" index="#">Market</el-menu-item>-->
|
||||||
<!-- </el-menu>-->
|
<!-- </el-menu>-->
|
||||||
<div class="search-bar">
|
<div class="search-bar">
|
||||||
<input type="text" placeholder="Search">
|
<input type="text" placeholder="Search">
|
||||||
</div>
|
</div>
|
||||||
@ -39,10 +41,10 @@
|
|||||||
:close-on-click-modal="true"
|
:close-on-click-modal="true"
|
||||||
|
|
||||||
>
|
>
|
||||||
<el-tabs type="border-card">
|
<el-tabs type="border-card" v-model="TabsValue">
|
||||||
<el-tab-pane>
|
<el-tab-pane name="1">
|
||||||
<span slot="label"><i class="el-icon-user-solid"></i>登录</span>
|
<span slot="label"><i class="el-icon-user-solid"></i>登录</span>
|
||||||
<el-form :model="loginForm" ref="ruleForm" class="form">
|
<el-form :model="loginForm" :rules="rules" ref="loginForm" class="form">
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="loginForm.username"
|
v-model="loginForm.username"
|
||||||
@ -60,10 +62,10 @@
|
|||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
auto-complete="new-password"
|
auto-complete="new-password"
|
||||||
>
|
>
|
||||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;">
|
<el-form-item prop="code" style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
|
||||||
<el-input
|
<el-input
|
||||||
prefix-icon="el-icon-mobile-phone"
|
prefix-icon="el-icon-mobile-phone"
|
||||||
type="text"
|
type="text"
|
||||||
@ -74,27 +76,31 @@
|
|||||||
style="width: 15.8vw"
|
style="width: 15.8vw"
|
||||||
></el-input>
|
></el-input>
|
||||||
<!-- <span class="code">验证码</span> -->
|
<!-- <span class="code">验证码</span> -->
|
||||||
<img src="imageUrl" @click="resetImg" class="vertify_img"/>
|
<img style="margin-left: 10px;" :src="codeUrl" @click="resetImg" class="vertify_img"/>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
|
<div
|
||||||
|
style="display: flex;flex-direction: row;justify-content: space-between;align-items: center;align-content: center">
|
||||||
<el-form-item prop="remember">
|
<el-form-item prop="remember">
|
||||||
<el-checkbox v-model="loginForm.remember" class="remember">记住我</el-checkbox>
|
<el-checkbox v-model="loginForm.remember" class="remember">记住我</el-checkbox>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<el-link @click="toRePassword" :underline="false">忘记密码？找回</el-link>
|
||||||
|
</el-form-item>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||||
<el-button type="primary" @click="submitLoginForm('ruleForm')" >登录
|
<el-button @click="resetForm('loginForm')">重置</el-button>
|
||||||
|
<el-button type="primary" @click="submitLoginForm()">登录
|
||||||
</el-button
|
</el-button
|
||||||
>
|
>
|
||||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
|
|
||||||
<el-tab-pane>
|
<el-tab-pane name="2">
|
||||||
<span slot="label"><i class="el-icon-edit"></i> 注册</span>
|
<span slot="label"><i class="el-icon-edit"></i> 注册</span>
|
||||||
<el-form :model="registerFrom" ref="ruleForm" class="form">
|
<el-form :model="registerFrom" :rules="registerRules" ref="registerFrom" class="form">
|
||||||
<el-form-item prop="username">
|
<el-form-item prop="username">
|
||||||
<el-input
|
<el-input
|
||||||
v-model="registerFrom.username"
|
v-model="registerFrom.username"
|
||||||
@ -120,7 +126,7 @@
|
|||||||
placeholder="密码"
|
placeholder="密码"
|
||||||
auto-complete="new-password"
|
auto-complete="new-password"
|
||||||
>
|
>
|
||||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<el-form-item prop="repassword">
|
<el-form-item prop="repassword">
|
||||||
@ -132,12 +138,13 @@
|
|||||||
placeholder="确认密码"
|
placeholder="确认密码"
|
||||||
auto-complete="new-password"
|
auto-complete="new-password"
|
||||||
>
|
>
|
||||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||||
</el-input>
|
</el-input>
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
|
|
||||||
|
|
||||||
<el-form-item prop="captcha" style="display: flex;flex-wrap: nowrap;flex-direction: row;align-items: center">
|
<el-form-item prop="captcha"
|
||||||
|
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">
|
<div style="display: flex;flex-wrap: nowrap;align-items: center;justify-content: space-evenly">
|
||||||
<el-input
|
<el-input
|
||||||
prefix-icon="el-icon-mobile-phone"
|
prefix-icon="el-icon-mobile-phone"
|
||||||
@ -150,26 +157,94 @@
|
|||||||
></el-input>
|
></el-input>
|
||||||
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
||||||
获取验证码
|
获取验证码
|
||||||
<span v-show="!showTime" class="count">({{sendTime}}s)</span>
|
<span v-show="!showTime" class="count">({{ sendTime }}s)</span>
|
||||||
</el-button>
|
</el-button>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
</el-form-item>
|
</el-form-item>
|
||||||
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||||
<el-button type="primary" @click="submitRegisterForm('ruleForm')" >注册
|
<el-button type="primary" @click="submitRegisterForm()">注册
|
||||||
</el-button
|
</el-button
|
||||||
>
|
>
|
||||||
<el-button @click="resetForm('ruleForm')">重置</el-button>
|
<el-button @click="resetForm('registerFrom')">重置</el-button>
|
||||||
|
</div>
|
||||||
|
</el-form>
|
||||||
|
</el-tab-pane>
|
||||||
|
|
||||||
|
<el-tab-pane name="3">
|
||||||
|
<span slot="label"><i class="el-icon-edit"></i> 找回密码</span>
|
||||||
|
<el-form :model="repasswordForm" :rules="repasswordRelus" ref="repasswordForm" class="form">
|
||||||
|
<el-form-item prop="email">
|
||||||
|
<el-input
|
||||||
|
prefix-icon="el-icon-s-promotion"
|
||||||
|
v-model="repasswordForm.email"
|
||||||
|
placeholder="邮箱"
|
||||||
|
>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="captcha"
|
||||||
|
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="repasswordForm.captcha"
|
||||||
|
class="vertify_code"
|
||||||
|
auto-complete="false"
|
||||||
|
style=""
|
||||||
|
></el-input>
|
||||||
|
<el-button style="margin-left: 5px" @click="sendEmail" type="success" :disabled="!showTime">
|
||||||
|
获取验证码
|
||||||
|
<span v-show="!showTime" class="count">({{ sendTime }}s)</span>
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="password">
|
||||||
|
<!-- type：密码显示* -->
|
||||||
|
<el-input
|
||||||
|
prefix-icon="el-icon-unlock"
|
||||||
|
:type="passwordVisible"
|
||||||
|
v-model="repasswordForm.password"
|
||||||
|
placeholder="密码"
|
||||||
|
auto-complete="new-password"
|
||||||
|
>
|
||||||
|
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item prop="repassword">
|
||||||
|
<!-- type：密码显示* -->
|
||||||
|
<el-input
|
||||||
|
prefix-icon="el-icon-unlock"
|
||||||
|
:type="passwordVisible"
|
||||||
|
v-model="repasswordForm.repassword"
|
||||||
|
placeholder="确认密码"
|
||||||
|
auto-complete="new-password"
|
||||||
|
>
|
||||||
|
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||||
|
</el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<div class="login-btn" style="display: flex;flex-direction: row;justify-content: space-between">
|
||||||
|
<el-button type="primary" @click="submitRegisterForm('repasswordForm')">确认
|
||||||
|
</el-button
|
||||||
|
>
|
||||||
|
<el-button @click="resetForm('repasswordForm')">重置</el-button>
|
||||||
</div>
|
</div>
|
||||||
</el-form>
|
</el-form>
|
||||||
</el-tab-pane>
|
</el-tab-pane>
|
||||||
</el-tabs>
|
</el-tabs>
|
||||||
|
|
||||||
</el-dialog>
|
</el-dialog>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
|
import {login, register, sendActiveCode} from "@/api/login";
|
||||||
|
import Vue from "vue";
|
||||||
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -177,11 +252,12 @@ export default {
|
|||||||
components: {},
|
components: {},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabList:[
|
TabsValue: '1',
|
||||||
{path:'/home',libel:'ALL'},
|
tabList: [
|
||||||
{path:'/news',libel:'HotNews'},
|
{path: '/home', libel: 'ALL'},
|
||||||
{path:'/navDetail',libel:'navDetail'},
|
{path: '/news', libel: '今日热点'},
|
||||||
{path:'/#',libel:'TEST'},
|
{path: '/navDetail', libel: '网站详情'},
|
||||||
|
{path: '/myNav', libel: '我的导航'},
|
||||||
],
|
],
|
||||||
loginDialogVisible: false,
|
loginDialogVisible: false,
|
||||||
passwordVisible: "password",
|
passwordVisible: "password",
|
||||||
@ -189,20 +265,49 @@ export default {
|
|||||||
showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
|
showTime: true, /* 布尔值，通过v-show控制显示‘获取按钮’还是‘倒计时’ */
|
||||||
sendTime: '', /* 倒计时 计数器 */
|
sendTime: '', /* 倒计时 计数器 */
|
||||||
timer: null,
|
timer: null,
|
||||||
|
codeUrl: 'http://localhost:8080/verifyCode',
|
||||||
loginForm: {
|
loginForm: {
|
||||||
username: null,
|
username: null,
|
||||||
password: null,
|
password: null,
|
||||||
code: null,
|
code: null,
|
||||||
remember: null
|
remember: null
|
||||||
},
|
},
|
||||||
registerFrom:{
|
registerFrom: {
|
||||||
username: null,
|
username: null,
|
||||||
email:null,
|
email: null,
|
||||||
captcha:null,
|
captcha: null,
|
||||||
password: null,
|
password: null,
|
||||||
repassword:null,
|
repassword: null,
|
||||||
},
|
},
|
||||||
ind: '0', // 用ind作为选择标识
|
repasswordForm: {
|
||||||
|
email: null,
|
||||||
|
captcha: null,
|
||||||
|
password: null,
|
||||||
|
repassword: null,
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
username: [
|
||||||
|
// required：规则，o：失去焦点触发
|
||||||
|
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||||
|
],
|
||||||
|
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||||
|
code: [{required: true, message: "请输入验证码", trigger: "blur"}],
|
||||||
|
},
|
||||||
|
registerRules: {
|
||||||
|
username: [
|
||||||
|
{required: true, message: "请输入用户名", trigger: "blur"},
|
||||||
|
],
|
||||||
|
email: [{required: true, message: "请输入邮箱", trigger: "blur"}],
|
||||||
|
password: [{required: true, message: "请输入密码", trigger: "blur"}],
|
||||||
|
repassword: [{required: true, message: "请输入确认密码", trigger: "blur"}],
|
||||||
|
captcha: [{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"}],
|
||||||
|
}
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
@ -214,7 +319,10 @@ export default {
|
|||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods: {
|
methods: {
|
||||||
|
//切换到找回密码
|
||||||
|
toRePassword() {
|
||||||
|
this.TabsValue = '3';
|
||||||
|
},
|
||||||
|
|
||||||
// 打开登陆注册
|
// 打开登陆注册
|
||||||
openLoginDialog() {
|
openLoginDialog() {
|
||||||
@ -237,10 +345,6 @@ export default {
|
|||||||
$(".header").removeClass("wide");
|
$(".header").removeClass("wide");
|
||||||
});
|
});
|
||||||
},
|
},
|
||||||
// 弹窗关闭
|
|
||||||
modalClose() {
|
|
||||||
this.loginDialogVisible = false;
|
|
||||||
},
|
|
||||||
// 显示密码
|
// 显示密码
|
||||||
showPass() {
|
showPass() {
|
||||||
if (this.passwordVisible === "text") {
|
if (this.passwordVisible === "text") {
|
||||||
@ -253,62 +357,114 @@ export default {
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
// 登录提交
|
// 登录提交
|
||||||
submitLoginForm(formName) {
|
submitLoginForm() {
|
||||||
// var _this=this;
|
login(this.loginForm).then(response => {
|
||||||
// this.$refs[formName].validate((valid) => {
|
console.log(response);
|
||||||
// if (valid) {
|
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
|
||||||
|
});
|
||||||
|
})
|
||||||
},
|
},
|
||||||
// 注册提交
|
// 注册提交
|
||||||
submitRegisterForm(formName) {
|
submitRegisterForm() {
|
||||||
// var _this=this;
|
if (this.registerFrom.password === this.registerFrom.repassword) {
|
||||||
// this.$refs[formName].validate((valid) => {
|
register(this.registerFrom).then(response => {
|
||||||
// if (valid) {
|
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
|
||||||
|
});
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
Vue.prototype.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: "两次密码不相同",
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
|
}
|
||||||
},
|
},
|
||||||
//重置
|
//重置
|
||||||
resetForm(formName) {
|
resetForm(formName) {
|
||||||
this.$refs[formName].resetFields();
|
this.$refs[formName].resetFields();
|
||||||
},
|
},
|
||||||
// 发送邮箱验证码
|
// 发送邮箱验证码
|
||||||
sendEmail(){
|
sendEmail() {
|
||||||
|
if (this.registerFrom.email !== null) {
|
||||||
const TIME_COUNT = 60; // 更改倒计时时间
|
sendActiveCode().then(response => {
|
||||||
if (!this.timer) {
|
console.log(response);
|
||||||
this.sendTime = TIME_COUNT;
|
Vue.prototype.$notify({
|
||||||
this.showTime = false;
|
title: '成功',
|
||||||
this.timer = setInterval(() => {
|
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||||
if (this.sendTime > 0 && this.sendTime <= TIME_COUNT) {
|
type: 'success',
|
||||||
this.sendTime--;
|
offset: 50
|
||||||
} else {
|
});
|
||||||
this.showTime = true;
|
}).catch((error) => {
|
||||||
clearInterval(this.timer); // 清除定时器
|
Vue.prototype.$notify.error({
|
||||||
this.timer = null;
|
title: '错误',
|
||||||
|
message: error,
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
|
}).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);
|
||||||
}
|
}
|
||||||
}, 1000);
|
})
|
||||||
|
} else {
|
||||||
|
Vue.prototype.$notify.error({
|
||||||
|
title: '错误',
|
||||||
|
message: "请先填写邮箱！",
|
||||||
|
offset: 50
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
},
|
},
|
||||||
//点击图片更换验证码
|
//点击图片更换验证码
|
||||||
resetImg() {
|
resetImg() {
|
||||||
this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
|
this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime();
|
||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style>
|
<style scoped>
|
||||||
.dialog {
|
.dialog {
|
||||||
backdrop-filter: blur(20px);
|
backdrop-filter: blur(20px);
|
||||||
|
color: var(--theme-color);
|
||||||
|
background-color: var(--theme-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog {
|
.el-dialog {
|
||||||
background: rgba(255, 255, 255, 0.98);
|
background: rgba(255, 255, 255, 0.98);
|
||||||
}
|
}
|
||||||
|
|
||||||
.el-dialog__header {
|
.el-dialog__header {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,195 +1,26 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<!-- <MainHeader></MainHeader>-->
|
|
||||||
<div class="content-wrapper">
|
<div class="content-wrapper">
|
||||||
<div class="content-wrapper-header">
|
<div>
|
||||||
<div class="content-wrapper-context">
|
<CarouselComponent></CarouselComponent>
|
||||||
<h3 class="img-content">
|
|
||||||
<svg viewBox="0 0 512 512">
|
|
||||||
<path d="M467 0H45C20.099 0 0 20.099 0 45v422c0 24.901 20.099 45 45 45h422c24.901 0 45-20.099 45-45V45c0-24.901-20.099-45-45-45z" fill="#d6355b" data-original="#ff468c"></path>
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M512 45v422c0 24.901-20.099 45-45 45H256V0h211c24.901 0 45 20.099 45 45z" fill="#d6355b" data-original="#d72878"></path>
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M467 30H45c-8.401 0-15 6.599-15 15v422c0 8.401 6.599 15 15 15h422c8.401 0 15-6.599 15-15V45c0-8.401-6.599-15-15-15z" fill="#2e000a" data-original="#700029"></path>
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M482 45v422c0 8.401-6.599 15-15 15H256V30h211c8.401 0 15 6.599 15 15z" fill="#2e000a" data-original="#4d0e06"></path>
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M181 391c-41.353 0-75-33.647-75-75 0-8.291 6.709-15 15-15s15 6.709 15 15c0 24.814 20.186 45 45 45s45-20.186 45-45-20.186-45-45-45c-41.353 0-75-33.647-75-75s33.647-75 75-75 75 33.647 75 75c0 8.291-6.709 15-15 15s-15-6.709-15-15c0-24.814-20.186-45-45-45s-45 20.186-45 45 20.186 45 45 45c41.353 0 75 33.647 75 75s-33.647 75-75 75z" fill="#d6355b" data-original="#ff468c"></path>
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M391 361h-30c-8.276 0-15-6.724-15-15V211h45c8.291 0 15-6.709 15-15s-6.709-15-15-15h-45v-45c0-8.291-6.709-15-15-15s-15 6.709-15 15v45h-15c-8.291 0-15 6.709-15 15s6.709 15 15 15h15v135c0 24.814 20.186 45 45 45h30c8.291 0 15-6.709 15-15s-6.709-15-15-15z" fill="#d6355b" data-original="#d72878"></path>
|
|
||||||
</svg>
|
|
||||||
Adobe Stock
|
|
||||||
</h3>
|
|
||||||
<div class="content-text">Grab yourself 10 free images from Adobe Stock in a 30-day free trial plan and find perfect image, that will help you with your new project.</div>
|
|
||||||
<button class="content-button">Start free trial</button>
|
|
||||||
</div>
|
|
||||||
<img class="content-wrapper-img" src="https://assets.codepen.io/3364143/glass.png" alt="">
|
|
||||||
</div>
|
|
||||||
<div class="content-section">
|
|
||||||
<div class="content-section-title">Installed</div>
|
|
||||||
<ul>
|
|
||||||
<li class="adobe-product">
|
|
||||||
<div class="products">
|
|
||||||
<svg viewBox="0 0 52 52" style="border:1px solid #3291b8">
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687"></path>
|
|
||||||
<path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Photoshop
|
|
||||||
</div>
|
|
||||||
<span class="status">
|
|
||||||
<span class="status-circle green"></span>
|
|
||||||
Updated</span>
|
|
||||||
<div class="button-wrapper">
|
|
||||||
<button class="content-button status-button open">Open</button>
|
|
||||||
<div class="menu">
|
|
||||||
<button class="dropdown">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Go to Discover</a></li>
|
|
||||||
<li><a href="#">Learn more</a></li>
|
|
||||||
<li><a href="#">Uninstall</a></li>
|
|
||||||
</ul>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="adobe-product">
|
|
||||||
<div class="products">
|
|
||||||
<svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13"></path>
|
|
||||||
<path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Illustrator
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<span class="status">
|
|
||||||
<span class="status-circle"></span>
|
|
||||||
Update Available</span>
|
|
||||||
<div class="button-wrapper">
|
|
||||||
<button class="content-button status-button">Update this app</button>
|
|
||||||
<div class="pop-up">
|
|
||||||
<div class="pop-up__title">Update This App
|
|
||||||
<svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
|
||||||
<circle cx="12" cy="12" r="10"></circle>
|
|
||||||
<path d="M15 9l-6 6M9 9l6 6"></path>
|
|
||||||
</svg>
|
|
||||||
</div>
|
|
||||||
<div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
|
|
||||||
<div class="checkbox-wrapper">
|
|
||||||
<input type="checkbox" id="check1" class="checkbox">
|
|
||||||
<label for="check1">Import previous settings and preferences</label>
|
|
||||||
</div>
|
|
||||||
<div class="checkbox-wrapper">
|
|
||||||
<input type="checkbox" id="check2" class="checkbox">
|
|
||||||
<label for="check2">Remove old versions</label>
|
|
||||||
</div>
|
|
||||||
<div class="content-button-wrapper">
|
|
||||||
<button class="content-button status-button open close">Cancel</button>
|
|
||||||
<button class="content-button status-button">Continue</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="menu">
|
|
||||||
<button class="dropdown">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Go to Discover</a></li>
|
|
||||||
<li><a href="#">Learn more</a></li>
|
|
||||||
<li><a href="#">Uninstall</a></li>
|
|
||||||
</ul>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
<li class="adobe-product">
|
|
||||||
<div class="products">
|
|
||||||
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
|
||||||
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
After Effects
|
|
||||||
</div>
|
|
||||||
<span class="status">
|
|
||||||
<span class="status-circle green"></span>
|
|
||||||
Updated</span>
|
|
||||||
<div class="button-wrapper">
|
|
||||||
<button class="content-button status-button open">Open</button>
|
|
||||||
<div class="menu">
|
|
||||||
<button class="dropdown">
|
|
||||||
<ul>
|
|
||||||
<li><a href="#">Go to Discover</a></li>
|
|
||||||
<li><a href="#">Learn more</a></li>
|
|
||||||
<li><a href="#">Uninstall</a></li>
|
|
||||||
</ul>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</li>
|
|
||||||
</ul>
|
|
||||||
</div>
|
|
||||||
<div class="content-section">
|
|
||||||
<div class="content-section-title">Apps in your plan</div>
|
|
||||||
<div class="apps-card">
|
|
||||||
<div class="app-card">
|
|
||||||
<span>
|
|
||||||
<svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
|
|
||||||
<path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
Premiere Pro
|
|
||||||
</span>
|
|
||||||
<div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
|
|
||||||
<div class="app-card-buttons">
|
|
||||||
<button class="content-button status-button">Update</button>
|
|
||||||
<div class="menu"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="app-card">
|
|
||||||
<span>
|
|
||||||
<svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
|
|
||||||
<path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
InDesign
|
|
||||||
</span>
|
|
||||||
<div class="app-card__subtext">Design and publish great projects & mockups</div>
|
|
||||||
<div class="app-card-buttons">
|
|
||||||
<button class="content-button status-button">Update</button>
|
|
||||||
<div class="menu"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="app-card">
|
|
||||||
<span>
|
|
||||||
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
|
||||||
<g xmlns="http://www.w3.org/2000/svg">
|
|
||||||
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
|
||||||
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
|
||||||
</g>
|
|
||||||
</svg>
|
|
||||||
After Effects
|
|
||||||
</span>
|
|
||||||
<div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
|
|
||||||
<div class="app-card-buttons">
|
|
||||||
<button class="content-button status-button">Update</button>
|
|
||||||
<div class="menu"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
<NoticeComponent></NoticeComponent>
|
||||||
|
<NavList></NavList>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
import {getHotNews} from "@/api/api";
|
import CarouselComponent from "@/components/home/Carousel.vue";
|
||||||
// import MainHeader from "@/components/home/MainHeader.vue";
|
import NavList from "@/components/home/NavList.vue";
|
||||||
|
import NoticeComponent from "@/components/home/Notice.vue";
|
||||||
export default {
|
export default {
|
||||||
name:"HomePage",
|
name:"HomePage",
|
||||||
components:{
|
components:{
|
||||||
// MainHeader
|
NoticeComponent,
|
||||||
|
NavList,
|
||||||
|
CarouselComponent
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
|||||||
74
src/components/home/NavList.vue
Normal file
74
src/components/home/NavList.vue
Normal file
@ -0,0 +1,74 @@
|
|||||||
|
<template>
|
||||||
|
<div class="content-section">
|
||||||
|
<div class="content-section-title">Apps in your plan</div>
|
||||||
|
<div class="apps-card">
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
|
||||||
|
<path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Premiere Pro
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
|
||||||
|
<path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
InDesign
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Design and publish great projects & mockups</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
||||||
|
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Effects
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "NavList",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
76
src/components/home/Notice.vue
Normal file
76
src/components/home/Notice.vue
Normal file
@ -0,0 +1,76 @@
|
|||||||
|
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="content-section" v-show="isShow">
|
||||||
|
<!-- <div class="content-section-title">公告</div>-->
|
||||||
|
<ul>
|
||||||
|
<li class="adobe-product">
|
||||||
|
<div class="products">
|
||||||
|
<el-image style="height: 26px;width: 26px" :src="require('@/assets/img/notice.svg')"></el-image>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span class="status">
|
||||||
|
<!-- <span class="status-circle"></span>-->
|
||||||
|
<span>测试公告！！！！！</span>
|
||||||
|
<span>测试公告！！！！！</span>
|
||||||
|
<span>测试公告！！！！！</span>
|
||||||
|
</span>
|
||||||
|
<div class="button-wrapper">
|
||||||
|
<button class="content-button status-button">查看详情</button>
|
||||||
|
<div class="pop-up">
|
||||||
|
<div class="pop-up__title">公告详情
|
||||||
|
<svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||||||
|
<circle cx="12" cy="12" r="10"></circle>
|
||||||
|
<path d="M15 9l-6 6M9 9l6 6"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
<div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>
|
||||||
|
<div class="checkbox-wrapper">
|
||||||
|
<input type="checkbox" id="check1" class="checkbox">
|
||||||
|
<label for="check1">Import previous settings and preferences</label>
|
||||||
|
</div>
|
||||||
|
<div class="checkbox-wrapper">
|
||||||
|
<input type="checkbox" id="check2" class="checkbox">
|
||||||
|
<label for="check2">Remove old versions</label>
|
||||||
|
</div>
|
||||||
|
<div class="content-button-wrapper">
|
||||||
|
<button class="content-button status-button open close">取消</button>
|
||||||
|
<button class="content-button status-button">确定</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<i @click="closeNotice" style="margin-left: 10px;" class="close-notice el-icon-circle-close"></i>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name:"NoticeComponent",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isShow:true,
|
||||||
|
}},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
closeNotice(){
|
||||||
|
this.isShow=false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.close-notice:hover {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -18,7 +18,7 @@
|
|||||||
<svg height="30" width="30">
|
<svg height="30" width="30">
|
||||||
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
||||||
</svg>
|
</svg>
|
||||||
<p class="nav__title">Weather</p>
|
<p class="nav__title">baidu</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@ -87,7 +87,8 @@ export default {
|
|||||||
}
|
}
|
||||||
|
|
||||||
.widget {
|
.widget {
|
||||||
background-color: #fff;
|
color: var(--theme-color);
|
||||||
|
background-color: var(--theme-bg-color);
|
||||||
border-radius: 1.0rem;
|
border-radius: 1.0rem;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
height: 540px;
|
height: 540px;
|
||||||
@ -146,7 +147,7 @@ export default {
|
|||||||
|
|
||||||
.nav__title
|
.nav__title
|
||||||
{
|
{
|
||||||
color: #444;
|
color: var(--theme-color);
|
||||||
position: absolute;
|
position: absolute;
|
||||||
}
|
}
|
||||||
.refresh{
|
.refresh{
|
||||||
@ -156,6 +157,7 @@ export default {
|
|||||||
.refresh:hover{
|
.refresh:hover{
|
||||||
font-size: 20px;
|
font-size: 20px;
|
||||||
color: #999ba5;
|
color: #999ba5;
|
||||||
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
.hot-rank-1 {
|
.hot-rank-1 {
|
||||||
color: #fff;
|
color: #fff;
|
||||||
|
|||||||
233
src/components/myNav/MyNav.vue
Normal file
233
src/components/myNav/MyNav.vue
Normal file
@ -0,0 +1,233 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main-container">
|
||||||
|
<!-- <MainHeader></MainHeader>-->
|
||||||
|
<div class="content-wrapper">
|
||||||
|
<!-- <div class="content-section">-->
|
||||||
|
<!-- <div class="content-section-title">Installed</div>-->
|
||||||
|
<!-- <ul>-->
|
||||||
|
<!-- <li class="adobe-product">-->
|
||||||
|
<!-- <div class="products">-->
|
||||||
|
<!-- <svg viewBox="0 0 52 52" style="border:1px solid #3291b8">-->
|
||||||
|
<!-- <g xmlns="http://www.w3.org/2000/svg">-->
|
||||||
|
<!-- <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#061e26" data-original="#393687"></path>-->
|
||||||
|
<!-- <path d="M12.16 39H9.28V11h9.64c2.613 0 4.553.813 5.82 2.44 1.266 1.626 1.9 3.76 1.9 6.399 0 .934-.027 1.74-.08 2.42-.054.681-.22 1.534-.5 2.561-.28 1.026-.66 1.866-1.14 2.52-.48.654-1.213 1.227-2.2 1.72-.987.494-2.16.74-3.52.74h-7.04V39zm0-12h6.68c.96 0 1.773-.187 2.44-.56.666-.374 1.153-.773 1.46-1.2.306-.427.546-1.04.72-1.84.173-.801.267-1.4.28-1.801.013-.399.02-.973.02-1.72 0-4.053-1.694-6.08-5.08-6.08h-6.52V27zM29.48 33.92l2.8-.12c.106.987.6 1.754 1.48 2.3.88.547 1.893.82 3.04.82s2.14-.26 2.98-.78c.84-.52 1.26-1.266 1.26-2.239s-.36-1.747-1.08-2.32c-.72-.573-1.6-1.026-2.64-1.36-1.04-.333-2.086-.686-3.14-1.06a7.36 7.36 0 01-2.78-1.76c-.987-.934-1.48-2.073-1.48-3.42s.54-2.601 1.62-3.761 2.833-1.739 5.26-1.739c.854 0 1.653.1 2.4.3.746.2 1.28.394 1.6.58l.48.279-.92 2.521c-.854-.666-1.974-1-3.36-1-1.387 0-2.42.26-3.1.78-.68.52-1.02 1.18-1.02 1.979 0 .88.426 1.574 1.28 2.08.853.507 1.813.934 2.88 1.28 1.066.347 2.126.733 3.18 1.16 1.053.427 1.946 1.094 2.68 2s1.1 2.106 1.1 3.6c0 1.494-.6 2.794-1.8 3.9-1.2 1.106-2.954 1.66-5.26 1.66-2.307 0-4.114-.547-5.42-1.64-1.307-1.093-1.987-2.44-2.04-4.04z" fill="#c1dbe6" data-original="#89d3ff"></path>-->
|
||||||
|
<!-- </g>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- Photoshop-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <span class="status">-->
|
||||||
|
<!-- <span class="status-circle green"></span>-->
|
||||||
|
<!-- Updated</span>-->
|
||||||
|
<!-- <div class="button-wrapper">-->
|
||||||
|
<!-- <button class="content-button status-button open">Open</button>-->
|
||||||
|
<!-- <div class="menu">-->
|
||||||
|
<!-- <button class="dropdown">-->
|
||||||
|
<!-- <ul>-->
|
||||||
|
<!-- <li><a href="#">Go to Discover</a></li>-->
|
||||||
|
<!-- <li><a href="#">Learn more</a></li>-->
|
||||||
|
<!-- <li><a href="#">Uninstall</a></li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </li>-->
|
||||||
|
<!-- <li class="adobe-product">-->
|
||||||
|
<!-- <div class="products">-->
|
||||||
|
<!-- <svg viewBox="0 0 52 52" style="border:1px solid #b65a0b">-->
|
||||||
|
<!-- <g xmlns="http://www.w3.org/2000/svg">-->
|
||||||
|
<!-- <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#261400" data-original="#6d4c13"></path>-->
|
||||||
|
<!-- <path d="M30.68 39h-3.24l-2.76-9.04h-8.32L13.72 39H10.6l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L17.12 27h6.84zM37.479 12.24c0 .453-.16.84-.48 1.16-.32.319-.7.479-1.14.479-.44 0-.827-.166-1.16-.5-.334-.333-.5-.713-.5-1.14s.166-.807.5-1.141c.333-.333.72-.5 1.16-.5.44 0 .82.16 1.14.48.321.322.48.709.48 1.162zM37.24 39h-2.88V18.96h2.88V39z" fill="#e6d2c0" data-original="#ffbd2e"></path>-->
|
||||||
|
<!-- </g>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- Illustrator-->
|
||||||
|
<!-- </div>-->
|
||||||
|
|
||||||
|
<!-- <span class="status">-->
|
||||||
|
<!-- <span class="status-circle"></span>-->
|
||||||
|
<!-- Update Available</span>-->
|
||||||
|
<!-- <div class="button-wrapper">-->
|
||||||
|
<!-- <button class="content-button status-button">Update this app</button>-->
|
||||||
|
<!-- <div class="pop-up">-->
|
||||||
|
<!-- <div class="pop-up__title">Update This App-->
|
||||||
|
<!-- <svg class="close" width="24" height="24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">-->
|
||||||
|
<!-- <circle cx="12" cy="12" r="10"></circle>-->
|
||||||
|
<!-- <path d="M15 9l-6 6M9 9l6 6"></path>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="pop-up__subtitle">Adjust your selections for advanced options as desired before continuing. <a href="#">Learn more</a></div>-->
|
||||||
|
<!-- <div class="checkbox-wrapper">-->
|
||||||
|
<!-- <input type="checkbox" id="check1" class="checkbox">-->
|
||||||
|
<!-- <label for="check1">Import previous settings and preferences</label>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="checkbox-wrapper">-->
|
||||||
|
<!-- <input type="checkbox" id="check2" class="checkbox">-->
|
||||||
|
<!-- <label for="check2">Remove old versions</label>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="content-button-wrapper">-->
|
||||||
|
<!-- <button class="content-button status-button open close">Cancel</button>-->
|
||||||
|
<!-- <button class="content-button status-button">Continue</button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="menu">-->
|
||||||
|
<!-- <button class="dropdown">-->
|
||||||
|
<!-- <ul>-->
|
||||||
|
<!-- <li><a href="#">Go to Discover</a></li>-->
|
||||||
|
<!-- <li><a href="#">Learn more</a></li>-->
|
||||||
|
<!-- <li><a href="#">Uninstall</a></li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </li>-->
|
||||||
|
<!-- <li class="adobe-product">-->
|
||||||
|
<!-- <div class="products">-->
|
||||||
|
<!-- <svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">-->
|
||||||
|
<!-- <g xmlns="http://www.w3.org/2000/svg">-->
|
||||||
|
<!-- <path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>-->
|
||||||
|
<!-- <path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>-->
|
||||||
|
<!-- </g>-->
|
||||||
|
<!-- </svg>-->
|
||||||
|
<!-- After Effects-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <span class="status">-->
|
||||||
|
<!-- <span class="status-circle green"></span>-->
|
||||||
|
<!-- Updated</span>-->
|
||||||
|
<!-- <div class="button-wrapper">-->
|
||||||
|
<!-- <button class="content-button status-button open">Open</button>-->
|
||||||
|
<!-- <div class="menu">-->
|
||||||
|
<!-- <button class="dropdown">-->
|
||||||
|
<!-- <ul>-->
|
||||||
|
<!-- <li><a href="#">Go to Discover</a></li>-->
|
||||||
|
<!-- <li><a href="#">Learn more</a></li>-->
|
||||||
|
<!-- <li><a href="#">Uninstall</a></li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
|
<!-- </button>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div class="content-section">
|
||||||
|
<div class="content-section-title">Apps in your plan</div>
|
||||||
|
<div class="apps-card">
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 512 512" style="border: 1px solid #a059a9">
|
||||||
|
<path xmlns="http://www.w3.org/2000/svg" d="M480 0H32C14.368 0 0 14.368 0 32v448c0 17.664 14.368 32 32 32h448c17.664 0 32-14.336 32-32V32c0-17.632-14.336-32-32-32z" fill="#210027" data-original="#7b1fa2"></path>
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M192 64h-80c-8.832 0-16 7.168-16 16v352c0 8.832 7.168 16 16 16s16-7.168 16-16V256h64c52.928 0 96-43.072 96-96s-43.072-96-96-96zm0 160h-64V96h64c35.296 0 64 28.704 64 64s-28.704 64-64 64zM400 256h-32c-18.08 0-34.592 6.24-48 16.384V272c0-8.864-7.168-16-16-16s-16 7.136-16 16v160c0 8.832 7.168 16 16 16s16-7.168 16-16v-96c0-26.464 21.536-48 48-48h32c8.832 0 16-7.168 16-16s-7.168-16-16-16z" fill="#f6e7fa" data-original="#e1bee7"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
Premiere Pro
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Edit, master and create fully proffesional videos</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 52 52" style="border: 1px solid #c1316d">
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#2f0015" data-original="#6f2b41"></path>
|
||||||
|
<path d="M18.08 39H15.2V13.72l-2.64-.08V11h5.52v28zM27.68 19.4c1.173-.507 2.593-.761 4.26-.761s3.073.374 4.22 1.12V11h2.88v28c-2.293.32-4.414.48-6.36.48-1.947 0-3.707-.4-5.28-1.2-2.08-1.066-3.12-2.92-3.12-5.561v-7.56c0-2.799 1.133-4.719 3.4-5.759zm8.48 3.12c-1.387-.746-2.907-1.119-4.56-1.119-1.574 0-2.714.406-3.42 1.22-.707.813-1.06 1.847-1.06 3.1v7.12c0 1.227.44 2.188 1.32 2.88.96.719 2.146 1.079 3.56 1.079 1.413 0 2.8-.106 4.16-.319V22.52z" fill="#e1c1cf" data-original="#ff70bd"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
InDesign
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Design and publish great projects & mockups</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="app-card">
|
||||||
|
<span>
|
||||||
|
<svg viewBox="0 0 52 52" style="border: 1px solid #C75DEB">
|
||||||
|
<g xmlns="http://www.w3.org/2000/svg">
|
||||||
|
<path d="M40.824 52H11.176C5.003 52 0 46.997 0 40.824V11.176C0 5.003 5.003 0 11.176 0h29.649C46.997 0 52 5.003 52 11.176v29.649C52 46.997 46.997 52 40.824 52z" fill="#3a3375" data-original="#3a3375"></path>
|
||||||
|
<path d="M27.44 39H24.2l-2.76-9.04h-8.32L10.48 39H7.36l8.24-28h3.32l8.52 28zm-6.72-12l-3.48-11.36L13.88 27h6.84zM31.48 33.48c0 2.267 1.333 3.399 4 3.399 1.653 0 3.466-.546 5.44-1.64L42 37.6c-2.054 1.254-4.2 1.881-6.44 1.881-4.64 0-6.96-1.946-6.96-5.841v-8.2c0-2.16.673-3.841 2.02-5.04 1.346-1.2 3.126-1.801 5.34-1.801s3.94.594 5.18 1.78c1.24 1.187 1.86 2.834 1.86 4.94V30.8l-11.52.6v2.08zm8.6-5.24v-3.08c0-1.413-.44-2.42-1.32-3.021-.88-.6-1.907-.899-3.08-.899-1.174 0-2.167.359-2.98 1.08-.814.72-1.22 1.773-1.22 3.16v3.199l8.6-.439z" fill="#e4d1eb" data-original="#e7adfb"></path>
|
||||||
|
</g>
|
||||||
|
</svg>
|
||||||
|
After Effects
|
||||||
|
</span>
|
||||||
|
<div class="app-card__subtext">Industry Standart motion graphics & visual effects</div>
|
||||||
|
<div class="app-card-buttons">
|
||||||
|
<button class="content-button status-button">Update</button>
|
||||||
|
<div class="menu"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import $ from 'jquery'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name:"MyNav",
|
||||||
|
components:{
|
||||||
|
// MainHeader
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
|
||||||
|
}},
|
||||||
|
mounted() {
|
||||||
|
this.Fun1();
|
||||||
|
this.Fun2();
|
||||||
|
this.Fun3();
|
||||||
|
this.Fun4();
|
||||||
|
this.dropdownFun();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
Fun1(){
|
||||||
|
$(document).click(function (e) {
|
||||||
|
var container = $(".status-button");
|
||||||
|
var dd = $(".dropdown");
|
||||||
|
if (!container.is(e.target) && container.has(e.target).length === 0) {
|
||||||
|
dd.removeClass("is-active");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
Fun2(){
|
||||||
|
$(".status-button:not(.open)").on("click", function () {
|
||||||
|
$(".overlay-app").addClass("is-active");
|
||||||
|
});
|
||||||
|
$(".pop-up .close").click(function () {
|
||||||
|
$(".overlay-app").removeClass("is-active");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
Fun3(){
|
||||||
|
$(".status-button:not(.open)").click(function () {
|
||||||
|
$(".pop-up").addClass("visible");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
Fun4(){
|
||||||
|
$(".pop-up .close").click(function () {
|
||||||
|
$(".pop-up").removeClass("visible");
|
||||||
|
});
|
||||||
|
},
|
||||||
|
dropdownFun(){
|
||||||
|
const dropdowns = document.querySelectorAll(".dropdown");
|
||||||
|
dropdowns.forEach(dropdown => {
|
||||||
|
dropdown.addEventListener("click", e => {
|
||||||
|
e.stopPropagation();
|
||||||
|
dropdowns.forEach(c => c.classList.remove("is-active"));
|
||||||
|
dropdown.classList.add("is-active");
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
25
src/components/setting/home/PersonalHomePage.vue
Normal file
25
src/components/setting/home/PersonalHomePage.vue
Normal file
@ -0,0 +1,25 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
首页
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "PersonalHomePage",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -3,6 +3,17 @@
|
|||||||
<div class="side-wrapper">
|
<div class="side-wrapper">
|
||||||
<!-- <div class="side-title">Apps</div>-->
|
<!-- <div class="side-title">Apps</div>-->
|
||||||
<div class="side-menu">
|
<div class="side-menu">
|
||||||
|
<router-link to="/personal">
|
||||||
|
<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>
|
||||||
|
</g>
|
||||||
|
<path xmlns="http://www.w3.org/2000/svg" d="M192 192h128v128H192zm0 0" fill="currentColor" data-original="#82b1ff"></path>
|
||||||
|
<path xmlns="http://www.w3.org/2000/svg" d="M384 192h128v128H384zm0 0M0 384h128v128H0zm0 0M192 384h128v128H192zm0 0M384 384h128v128H384zm0 0" fill="currentColor" data-original="#bfc9d1"></path>
|
||||||
|
</svg>
|
||||||
|
首页
|
||||||
|
<!-- <span class="notification-number updates">3</span>-->
|
||||||
|
</router-link>
|
||||||
<router-link to="/admin">
|
<router-link to="/admin">
|
||||||
<svg viewBox="0 0 512 512">
|
<svg viewBox="0 0 512 512">
|
||||||
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||||
@ -21,6 +32,13 @@
|
|||||||
网站管理
|
网站管理
|
||||||
<!-- <span class="notification-number updates">3</span>-->
|
<!-- <span class="notification-number updates">3</span>-->
|
||||||
</router-link>
|
</router-link>
|
||||||
|
<router-link to="/onSite">
|
||||||
|
<svg viewBox="0 0 488.932 488.932" fill="currentColor">
|
||||||
|
<path d="M243.158 61.361v-57.6c0-3.2 4-4.9 6.7-2.9l118.4 87c2 1.5 2 4.4 0 5.9l-118.4 87c-2.7 2-6.7.2-6.7-2.9v-57.5c-87.8 1.4-158.1 76-152.1 165.4 5.1 76.8 67.7 139.1 144.5 144 81.4 5.2 150.6-53 163-129.9 2.3-14.3 14.7-24.7 29.2-24.7 17.9 0 31.8 15.9 29 33.5-17.4 109.7-118.5 192-235.7 178.9-98-11-176.7-89.4-187.8-187.4-14.7-128.2 84.9-237.4 209.9-238.8z"></path>
|
||||||
|
</svg>
|
||||||
|
站内设置
|
||||||
|
<!-- <span class="notification-number updates">3</span>-->
|
||||||
|
</router-link>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<!-- <div class="side-wrapper">-->
|
<!-- <div class="side-wrapper">-->
|
||||||
|
|||||||
@ -18,13 +18,13 @@
|
|||||||
import $ from 'jquery'
|
import $ from 'jquery'
|
||||||
export default {
|
export default {
|
||||||
name:"SettingMainHeader",
|
name:"SettingMainHeader",
|
||||||
|
props:{
|
||||||
|
tabList:Object
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
tabList:[
|
|
||||||
{path:'/appearance',libel:'外观设置'},
|
|
||||||
{path:'/information',libel:'信息设置'},
|
|
||||||
{path:'/function',libel:'功能设置'}
|
|
||||||
]
|
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.toggleActive();
|
this.toggleActive();
|
||||||
|
|||||||
39
src/components/setting/onsite/BaseSettings.vue
Normal file
39
src/components/setting/onsite/BaseSettings.vue
Normal file
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<span class="title">发信配置</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "BaseSettings",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
//align-items: center; margin-left: 50px; overflow: scroll;
|
||||||
|
margin-left: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--theme-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
//background-color: var(--theme-bg-color);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
23
src/components/setting/onsite/ImportExport.vue
Normal file
23
src/components/setting/onsite/ImportExport.vue
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
<template>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "ImportExport",
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
34
src/components/setting/onsite/OnSiteSetting.vue
Normal file
34
src/components/setting/onsite/OnSiteSetting.vue
Normal file
@ -0,0 +1,34 @@
|
|||||||
|
<template>
|
||||||
|
<div class="main">
|
||||||
|
<SettingMainHeader :tab-list="tabList"></SettingMainHeader>
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import SettingMainHeader from "@/components/setting/layout/SettingMainHeader.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "OnSiteSetting",
|
||||||
|
components: {SettingMainHeader},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
tabList:[
|
||||||
|
{path:'/baseSettings',libel:'基础设置'},
|
||||||
|
{path:'/importExport',libel:'导入导出'},
|
||||||
|
]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {}
|
||||||
|
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -1,25 +1,99 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main">
|
<div class="main">
|
||||||
<div class="base-style">
|
<div class="base-style">
|
||||||
<span style="font-weight: bolder;font-size: 20px">基础样式</span>
|
<span class="title">基础样式</span>
|
||||||
|
<div class="base-style-content">
|
||||||
|
<div class="min-content">
|
||||||
|
<span class="min-title">Logo(浅色模式)</span>
|
||||||
|
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||||
|
</div>
|
||||||
|
<div class="min-content" style="margin-left: 10px">
|
||||||
|
<span class="min-title">Logo(深色模式)</span>
|
||||||
|
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||||
|
</div>
|
||||||
|
<div class="min-content" style="margin-left: 10px">
|
||||||
|
<span class="min-title">Favicon</span>
|
||||||
|
<UploadComponent style="margin-top: 10px"></UploadComponent>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="color-select">
|
||||||
|
<span class="theme-color-select">主题色：</span>
|
||||||
|
<el-color-picker v-model="color"></el-color-picker>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="background-img">
|
<div class="background-img">
|
||||||
|
<span class="title">背景图</span>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">浅色模式</span>
|
||||||
|
<div class="img-card">
|
||||||
|
<UploadComponent style="margin-left: 20px"></UploadComponent>
|
||||||
|
<div class="img-url">
|
||||||
|
<span class="min-title">图片链接</span>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="input"
|
||||||
|
clearable>
|
||||||
|
</el-input>
|
||||||
|
<span class="min-title">支持随机图链接</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">深色模式</span>
|
||||||
|
<div class="img-card">
|
||||||
|
<UploadComponent style="margin-left: 20px"></UploadComponent>
|
||||||
|
<div class="img-url">
|
||||||
|
<span class="min-title">图片链接</span>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="input"
|
||||||
|
clearable>
|
||||||
|
</el-input>
|
||||||
|
<span class="min-title">支持随机图链接</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="ui-model">
|
<div class="ui-model">
|
||||||
|
<span class="title">UI模式</span>
|
||||||
|
<div class="min-ui-model">
|
||||||
|
<div>
|
||||||
|
<span class="min-title">浅色模式切换：</span>
|
||||||
|
<el-switch
|
||||||
|
v-model="value"
|
||||||
|
active-color="#13ce66"
|
||||||
|
inactive-color="#ff4949"
|
||||||
|
active-value="100"
|
||||||
|
inactive-value="0">
|
||||||
|
</el-switch>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="min-title">默认深色：</span>
|
||||||
|
<el-switch
|
||||||
|
v-model="value"
|
||||||
|
active-color="#13ce66"
|
||||||
|
inactive-color="#ff4949"
|
||||||
|
active-value="100"
|
||||||
|
inactive-value="0">
|
||||||
|
</el-switch>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
|
|
||||||
|
import UploadComponent from "@/components/setting/system/Upload.vue";
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"AppearanceSettings",
|
name:"AppearanceSettings",
|
||||||
components: {},
|
components: {UploadComponent},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
color:'#409EFF',
|
||||||
|
input: '',
|
||||||
|
value:'',
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
@ -33,7 +107,6 @@ export default {
|
|||||||
methods: {
|
methods: {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
@ -42,5 +115,65 @@ export default {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-wrap: nowrap;
|
flex-wrap: nowrap;
|
||||||
//align-items: center;
|
//align-items: center;
|
||||||
|
margin-left: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--theme-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
//background-color: var(--theme-bg-color);
|
||||||
|
}
|
||||||
|
.base-style-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.min-title {
|
||||||
|
color: var(--theme-color);
|
||||||
|
//background-color: var(--theme-bg-color);
|
||||||
|
}
|
||||||
|
.min-content{
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
.theme-color-select{
|
||||||
|
color: var(--theme-color);
|
||||||
|
}
|
||||||
|
.color-select{
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.img-card{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: center;
|
||||||
|
border-radius: 20px;
|
||||||
|
width: 800px;
|
||||||
|
height: 200px;
|
||||||
|
background-color: var(--theme-bg-color);
|
||||||
|
color: var(--theme-color);
|
||||||
|
}
|
||||||
|
.img-url{
|
||||||
|
margin-left: 20px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
align-items: flex-start;
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
.min-ui-model{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,34 +1,181 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="main">
|
||||||
功能设置
|
<div class="nav-function">
|
||||||
</div>
|
<span class="title">导航栏功能：</span>
|
||||||
|
<div class="nav-function-content">
|
||||||
|
<div>
|
||||||
|
<span class="min-title">导航菜单</span>
|
||||||
|
<div v-for="(item,index) in form" :key="index" style="margin-top: 5px;display: flex;align-items: center">
|
||||||
|
<el-input
|
||||||
|
placeholder="名称"
|
||||||
|
v-model="form.name"
|
||||||
|
clearable style="width: 200px">
|
||||||
|
</el-input>
|
||||||
|
<el-input
|
||||||
|
placeholder="链接"
|
||||||
|
v-model="form.url"
|
||||||
|
clearable style="width: 200px;margin-left: 10px">
|
||||||
|
</el-input>
|
||||||
|
<i @click="deleteItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px"
|
||||||
|
class="el-icon-circle-close"></i>
|
||||||
|
</div>
|
||||||
|
<i @click="addItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px"
|
||||||
|
class="el-icon-circle-plus-outline"></i>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="min-title">搜索工具</span>
|
||||||
|
<div v-for="(item,index) in searchList" :key="index"
|
||||||
|
style="display: flex;flex-direction: row;align-items: center">
|
||||||
|
<div class="reach-card">
|
||||||
|
<span style="margin-left: 10px">{{ item.name }}</span>
|
||||||
|
<i @click="openSearchDialog" style="margin-right: 10px" class="el-icon-s-tools"></i>
|
||||||
|
</div>
|
||||||
|
<i @click="deleteSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px"
|
||||||
|
class="el-icon-circle-close"></i>
|
||||||
|
</div>
|
||||||
|
<i @click="addSearchItem" style="font-size: 25px;font-weight: bolder;margin-left: 10px"
|
||||||
|
class="el-icon-circle-plus-outline"></i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog
|
||||||
|
title="搜索设置"
|
||||||
|
:visible="DialogVisible"
|
||||||
|
width="30vw"
|
||||||
|
append-to-body
|
||||||
|
:show-close="true"
|
||||||
|
:close-on-click-modal="true"
|
||||||
|
:before-close="befoClose"
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<div class="search-content">
|
||||||
|
<label>名称：</label>
|
||||||
|
<el-input
|
||||||
|
placeholder="名称"
|
||||||
|
clearable style="width: 350px;margin-left: 10px">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div class="search-content">
|
||||||
|
<label>参数：</label>
|
||||||
|
<el-input
|
||||||
|
placeholder="参数"
|
||||||
|
clearable style="width: 350px;margin-left: 10px">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<span>说明： 用【{keywords}】代替关键词例如：https://www.google.com/search?q={keywords}</span>
|
||||||
|
</div>
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="DialogVisible = false">移除</el-button>
|
||||||
|
<el-button type="primary" @click="DialogVisible = false">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name:"FunctionSettings",
|
name: "FunctionSettings",
|
||||||
components:{
|
components: {},
|
||||||
|
|
||||||
|
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
DialogVisible:false,
|
||||||
}},
|
input: '',
|
||||||
|
form: [{
|
||||||
|
name: null,
|
||||||
|
url: null,
|
||||||
|
}],
|
||||||
|
searchList: [{
|
||||||
|
name: '百度',
|
||||||
|
url: ''
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
|
openSearchDialog(){
|
||||||
|
this.DialogVisible=true;
|
||||||
|
},
|
||||||
|
befoClose(){
|
||||||
|
this.DialogVisible=false;
|
||||||
|
},
|
||||||
|
addItem() {
|
||||||
|
this.form.push({
|
||||||
|
name: '',
|
||||||
|
url: ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
addSearchItem() {
|
||||||
|
this.searchList.push({
|
||||||
|
name: '',
|
||||||
|
url: ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteItem(item, index) {
|
||||||
|
if(this.form.length<=1){//如果只有一个输入框则不可以删除
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.form.splice(index, 1)
|
||||||
|
},
|
||||||
|
deleteSearchItem(item, index) {
|
||||||
|
if(this.searchList.length<=1){//如果只有一个输入框则不可以删除
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
this.searchList.splice(index, 1)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
margin-left: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.nav-function-content {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.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);
|
||||||
|
}
|
||||||
|
|
||||||
|
.reach-card {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
width: 100px;
|
||||||
|
height: 30px;
|
||||||
|
background-color: var(--theme-bg-color);
|
||||||
|
border-radius: 20px;
|
||||||
|
color: var(--theme-color);
|
||||||
|
margin-top: 5px;
|
||||||
|
|
||||||
|
}
|
||||||
|
.search-content{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: row;
|
||||||
|
align-items: center;
|
||||||
|
margin-top: 5px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,31 +1,214 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div class="main">
|
||||||
信息设置
|
<div class="base-info">
|
||||||
|
<span class="title">基础信息</span>
|
||||||
|
<div class="base-info-content">
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">站名:</span>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="input"
|
||||||
|
clearable
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">SEO描述:</span>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">SEO关键词:</span>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">底部链接（可用作友链）：</span>
|
||||||
|
<div v-for="(item, index) in form" :key="index" >
|
||||||
|
<el-form>
|
||||||
|
<el-form-item
|
||||||
|
label="名称"
|
||||||
|
:prop="'dynamicItem.' + index + '.name'"
|
||||||
|
:rules="{
|
||||||
|
required: true, message: '名称不能为空', trigger: 'blur'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-input style="width: 500px" v-model="item.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="链接"
|
||||||
|
:prop="'dynamicItem.' + index + '.phone'"
|
||||||
|
:rules="[
|
||||||
|
{required: true, message: 'url不能为空', trigger: 'blur'},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<el-input style="width: 500px" v-model="item.url"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">底部信息：</span>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">版权信息：</span>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">备案信息：</span>
|
||||||
|
<el-input
|
||||||
|
type="textarea"
|
||||||
|
:rows="3"
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="textarea"
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="advanced-info">
|
||||||
|
<span class="title">进阶信息</span>
|
||||||
|
<div style="display: flex;flex-direction: column">
|
||||||
|
<span class="min-title">代理网站提示语:</span>
|
||||||
|
<el-input
|
||||||
|
placeholder="请输入内容"
|
||||||
|
v-model="input"
|
||||||
|
clearable
|
||||||
|
style="width: 600px;">
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="min-title">社交媒体：</span>
|
||||||
|
<div v-for="(item, index) in form" :key="index" >
|
||||||
|
<el-form>
|
||||||
|
<el-form-item
|
||||||
|
label="名称"
|
||||||
|
:prop="'dynamicItem.' + index + '.name'"
|
||||||
|
:rules="{
|
||||||
|
required: true, message: '名称不能为空', trigger: 'blur'
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<el-input style="width: 500px" v-model="item.name"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item
|
||||||
|
label="链接"
|
||||||
|
:prop="'dynamicItem.' + index + '.phone'"
|
||||||
|
:rules="[
|
||||||
|
{required: true, message: 'url不能为空', trigger: 'blur'},
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<el-input style="width: 500px" v-model="item.url"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item>
|
||||||
|
<i class="el-icon-delete" @click="deleteItem(item, index)"></i>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
</div>
|
||||||
|
<el-button @click="addItem" style="width: 100px;" type="primary">增加</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script>
|
<script>
|
||||||
export default {
|
export default {
|
||||||
name:"InformationSettings",
|
name: "InformationSettings",
|
||||||
components:{
|
components: {},
|
||||||
},
|
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
input: '',
|
||||||
}},
|
textarea: '',
|
||||||
|
form: [{
|
||||||
|
name: null,
|
||||||
|
url: null,
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {},
|
||||||
|
|
||||||
},
|
|
||||||
methods: {
|
methods: {
|
||||||
|
addItem() {
|
||||||
|
this.form.push({
|
||||||
|
name: '',
|
||||||
|
url: ''
|
||||||
|
})
|
||||||
|
},
|
||||||
|
deleteItem(item, index) {
|
||||||
|
this.form.splice(index, 1)
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
.main {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
//align-items: center; margin-left: 50px; overflow: scroll;
|
||||||
|
margin-left: 50px;
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-info {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.advanced-info{
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
.title {
|
||||||
|
font-weight: bolder;
|
||||||
|
font-size: 20px;
|
||||||
|
color: var(--theme-color);
|
||||||
|
margin-top: 10px;
|
||||||
|
//background-color: var(--theme-bg-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.base-info-content {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.min-title {
|
||||||
|
color: var(--theme-color);
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="main-container">
|
<div class="main-container">
|
||||||
<setting-main-header></setting-main-header>
|
<setting-main-header :tab-list="tabList"></setting-main-header>
|
||||||
<router-view></router-view>
|
<router-view></router-view>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
@ -20,7 +20,11 @@ export default {
|
|||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
|
tabList:[
|
||||||
|
{path:'/appearance',libel:'外观设置'},
|
||||||
|
{path:'/information',libel:'信息设置'},
|
||||||
|
{path:'/function',libel:'功能设置'}
|
||||||
|
]
|
||||||
}},
|
}},
|
||||||
mounted() {
|
mounted() {
|
||||||
|
|
||||||
|
|||||||
154
src/components/setting/system/Upload.vue
Normal file
154
src/components/setting/system/Upload.vue
Normal file
@ -0,0 +1,154 @@
|
|||||||
|
<template>
|
||||||
|
<el-upload
|
||||||
|
class="upload-demo"
|
||||||
|
ref="upload"
|
||||||
|
:limit="limitNum"
|
||||||
|
:class="{hide:hideUploadEdit}"
|
||||||
|
:on-remove="handleRemove"
|
||||||
|
:on-change="handleEditChange"
|
||||||
|
:http-request="ImgUploadSectionFile"
|
||||||
|
:before-upload="beforeAvatarUpload"
|
||||||
|
:with-credentials="true"
|
||||||
|
:auto-upload="true"
|
||||||
|
accept=".png, .jpg"
|
||||||
|
action=""
|
||||||
|
list-type="picture-card"
|
||||||
|
:file-list="fileList"
|
||||||
|
></el-upload>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
name: "UploadComponent",
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
hideUploadEdit: false, // 隐藏'上传按钮'
|
||||||
|
limitNum: 1, // 图片数量
|
||||||
|
fileList: [] // 图片列表
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
methods: {
|
||||||
|
// on-change添加文件、上传成功和上传失败时都会被调用
|
||||||
|
handleEditChange(file, fileList) {
|
||||||
|
this.hideUploadEdit = fileList.length >= this.limitNum;
|
||||||
|
console.log("this.fileList:", this.fileList);
|
||||||
|
console.log("this.hideUploadEdit:", this.hideUploadEdit);
|
||||||
|
},
|
||||||
|
// on-remove文件列表移除文件时的钩子
|
||||||
|
handleRemove(file, fileList) {
|
||||||
|
if (fileList.length === 0) {
|
||||||
|
this.fileList = [];
|
||||||
|
} else {
|
||||||
|
let dl = this.fileList.indexOf(file);
|
||||||
|
this.fileList.splice(dl, 1);
|
||||||
|
}
|
||||||
|
this.hideUploadEdit = fileList.length >= this.limitNum;
|
||||||
|
},
|
||||||
|
// 上传到服务器
|
||||||
|
submitUpload() {
|
||||||
|
console.log(this.param);
|
||||||
|
if (!this.param) {
|
||||||
|
this.$message("请选择图片");
|
||||||
|
} else {
|
||||||
|
let formData = new FormData(); //formdata格式
|
||||||
|
formData.append("fileName", this.param.file);
|
||||||
|
axios({
|
||||||
|
method: "post",
|
||||||
|
url: '', //这里填写上传图片的接口,
|
||||||
|
data: {} //这里可以填写上传时携带的数据,不需要可以不写
|
||||||
|
})
|
||||||
|
.then(result => {
|
||||||
|
console.log("上传成功:", result);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// before-upload上传文件之前的钩子 -- 限制文件大小
|
||||||
|
beforeAvatarUpload(file) {
|
||||||
|
const isJPG = file.type === "image/jpeg" || file.type === "image/png";
|
||||||
|
const isLt2M = file.size / 1024 / 1024 < 2;
|
||||||
|
|
||||||
|
if (!isJPG) {
|
||||||
|
this.$message.error("上传图片只能是 JPG 或 PNG 格式!");
|
||||||
|
}
|
||||||
|
if (!isLt2M) {
|
||||||
|
this.$message.error("上传图片大小不能超过 2MB!");
|
||||||
|
}
|
||||||
|
return isJPG && isLt2M;
|
||||||
|
},
|
||||||
|
// http-request自定义上传
|
||||||
|
ImgUploadSectionFile(param) {
|
||||||
|
this.param = param;
|
||||||
|
|
||||||
|
// //下面代码放在这里的作用是:选中图片后立即上传,但我需要选中图片后再点击按钮上传,所以移到按钮的点击事件里
|
||||||
|
// let formData = new FormData(); //formdata格式
|
||||||
|
|
||||||
|
// console.log('param.file: ',param.file)
|
||||||
|
// console.log('param: ',param.file)
|
||||||
|
// formData.append("fileName", param.file);
|
||||||
|
// formData.append("userid", '15832919197225');
|
||||||
|
// formData.append("uuid", '7658798679');
|
||||||
|
// axios({
|
||||||
|
// method:'post',
|
||||||
|
// url:'http://139.155.91.117:8082/base/gps/fileUpload',
|
||||||
|
// data:formData
|
||||||
|
// }).then(result=>{
|
||||||
|
// console.log('上传成功:',result)
|
||||||
|
// }).catch(err=>{
|
||||||
|
// console.log(err)
|
||||||
|
// })
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
/* element-ui */
|
||||||
|
.avatar-uploader.el-upload {
|
||||||
|
border: 2px solid var(--theme-color);
|
||||||
|
border-radius: 6px;
|
||||||
|
cursor: pointer;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
. .el-upload:hover {
|
||||||
|
border-color: var(--theme-color);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-uploader-icon {
|
||||||
|
font-size: 28px;
|
||||||
|
color: var(--theme-color);
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
line-height: 178px;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar {
|
||||||
|
width: 178px;
|
||||||
|
height: 178px;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hide .el-upload--picture-card {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload-list__item {
|
||||||
|
transition: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*end*/
|
||||||
|
</style>
|
||||||
@ -11,6 +11,11 @@ import informationSettings from "@/components/setting/system/InformationSettings
|
|||||||
import functionSettings from "@/components/setting/system/FunctionSettings.vue";
|
import functionSettings from "@/components/setting/system/FunctionSettings.vue";
|
||||||
import systemSettings from "@/components/setting/system/SystemSettings.vue";
|
import systemSettings from "@/components/setting/system/SystemSettings.vue";
|
||||||
import websiteManage from "@/components/setting/website/websiteManage.vue";
|
import websiteManage from "@/components/setting/website/websiteManage.vue";
|
||||||
|
import myNav from "@/components/myNav/MyNav.vue";
|
||||||
|
import personalHomePage from "@/components/setting/home/PersonalHomePage.vue";
|
||||||
|
import onSiteSetting from "@/components/setting/onsite/OnSiteSetting.vue";
|
||||||
|
import baseSettings from "@/components/setting/onsite/BaseSettings.vue";
|
||||||
|
import importExport from "@/components/setting/onsite/ImportExport.vue";
|
||||||
const originalPush = VueRouter.prototype.push
|
const originalPush = VueRouter.prototype.push
|
||||||
VueRouter.prototype.push = function push(location) {
|
VueRouter.prototype.push = function push(location) {
|
||||||
return originalPush.call(this, location).catch(err => err)
|
return originalPush.call(this, location).catch(err => err)
|
||||||
@ -41,13 +46,18 @@ const routes = [
|
|||||||
path: '/navDetail',
|
path: '/navDetail',
|
||||||
name: 'navDetail',
|
name: 'navDetail',
|
||||||
component: navDetail
|
component: navDetail
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/myNav',
|
||||||
|
name: 'myNav',
|
||||||
|
component: myNav
|
||||||
}
|
}
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
path: '/settings',
|
path: '/settings',
|
||||||
redirect: '/admin',
|
redirect: '/personal',
|
||||||
name: 'settings',
|
name: '/settings',
|
||||||
component: settings,
|
component: settings,
|
||||||
children: [
|
children: [
|
||||||
{
|
{
|
||||||
@ -77,7 +87,30 @@ const routes = [
|
|||||||
path: '/website',
|
path: '/website',
|
||||||
name: '/website',
|
name: '/website',
|
||||||
component: websiteManage
|
component: websiteManage
|
||||||
}
|
},
|
||||||
|
{
|
||||||
|
path: '/personal',
|
||||||
|
name: '/personal',
|
||||||
|
component: personalHomePage
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/onSite',
|
||||||
|
name: '/onSite',
|
||||||
|
redirect:'/baseSettings',
|
||||||
|
component: onSiteSetting,
|
||||||
|
children:[
|
||||||
|
{
|
||||||
|
path: '/baseSettings',
|
||||||
|
name: '/baseSettings',
|
||||||
|
component: baseSettings
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/importExport',
|
||||||
|
name: '/importExport',
|
||||||
|
component: importExport
|
||||||
|
},
|
||||||
|
]
|
||||||
|
},
|
||||||
|
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
|
|||||||
@ -5,10 +5,15 @@ Vue.use(Vuex)
|
|||||||
|
|
||||||
export default new Vuex.Store({
|
export default new Vuex.Store({
|
||||||
state: {
|
state: {
|
||||||
|
theme:'dark',
|
||||||
},
|
},
|
||||||
getters: {
|
getters: {
|
||||||
},
|
},
|
||||||
mutations: {
|
mutations: {
|
||||||
|
SET_THEME:(state,data)=>{
|
||||||
|
state.theme=data;
|
||||||
|
window.sessionStorage.setItem('theme',data);
|
||||||
|
}
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
},
|
},
|
||||||
|
|||||||
@ -9,7 +9,7 @@
|
|||||||
Your browser does not support the video tag.
|
Your browser does not support the video tag.
|
||||||
</video>
|
</video>
|
||||||
</div>
|
</div>
|
||||||
<div class="dark-light">
|
<div class="dark-light" @click="changeStyle">
|
||||||
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
<svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.5" fill="none" stroke-linecap="round"
|
||||||
stroke-linejoin="round">
|
stroke-linejoin="round">
|
||||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||||||
@ -40,23 +40,51 @@ export default {
|
|||||||
HomeHeader,
|
HomeHeader,
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
return {}
|
return {
|
||||||
|
isLight:false,
|
||||||
|
darkMode:window.sessionStorage.getItem('theme')
|
||||||
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
this.toggleDarkLight();
|
let nowDate=new Date()
|
||||||
|
let hour=nowDate.getHours()
|
||||||
|
//黑夜时
|
||||||
|
if(hour>18&&hour<=24||hour<6){
|
||||||
|
this.goDark()
|
||||||
|
}
|
||||||
|
//根据本地存储状态哦按段
|
||||||
|
if(this.darkMode==='dark'){ this.goDark()}
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
|
|
||||||
},
|
},
|
||||||
computed: {},
|
computed: {},
|
||||||
methods:{
|
methods:{
|
||||||
toggleDarkLight() {
|
goDark() {
|
||||||
const toggleButton = document.querySelector('.dark-light');
|
//黑夜的
|
||||||
|
document.body.classList.remove('light-mode')
|
||||||
|
window.sessionStorage.setItem('theme', 'dark')
|
||||||
|
},
|
||||||
|
goLight(){
|
||||||
|
//白天的
|
||||||
|
document.body.classList.add('light-mode')
|
||||||
|
window.sessionStorage.setItem('theme','light')
|
||||||
|
},
|
||||||
|
changeStyle(){
|
||||||
|
this.isLight=!this.isLight
|
||||||
|
if(this.isLight!==true){
|
||||||
|
this.goDark();
|
||||||
|
}else{
|
||||||
|
this.goLight();
|
||||||
|
}
|
||||||
|
|
||||||
toggleButton.addEventListener('click', () => {
|
},
|
||||||
document.body.classList.toggle('light-mode');
|
// toggleDarkLight() {
|
||||||
});
|
// const toggleButton = document.querySelector('.dark-light');
|
||||||
}
|
// toggleButton.addEventListener('click', () => {
|
||||||
|
// document.body.classList.toggle('light-mode');
|
||||||
|
// });
|
||||||
|
// }
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@ -6,6 +6,10 @@ module.exports = defineConfig({
|
|||||||
client: {
|
client: {
|
||||||
overlay: false // 编译错误时，取消全屏覆盖
|
overlay: false // 编译错误时，取消全屏覆盖
|
||||||
},
|
},
|
||||||
|
open: true, //配置自动启动浏览器
|
||||||
|
host: "localhost",
|
||||||
|
https: false,
|
||||||
|
port: 8081,
|
||||||
proxy: {
|
proxy: {
|
||||||
|
|
||||||
'/api': {
|
'/api': {
|
||||||
@ -24,6 +28,22 @@ module.exports = defineConfig({
|
|||||||
'^/api': ''
|
'^/api': ''
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
'/dev': {
|
||||||
|
//后端接口的baseurl
|
||||||
|
target: 'http://localhost:8080',
|
||||||
|
//是否允许跨域
|
||||||
|
changeOrigin: true,
|
||||||
|
// ws: true, //是否代理 websockets
|
||||||
|
// secure: true,
|
||||||
|
// 'secure': true,
|
||||||
|
headers: {
|
||||||
|
Connection: "kepp-alive"
|
||||||
|
},
|
||||||
|
pathRewrite: {
|
||||||
|
//这里的作用是使用去掉api
|
||||||
|
'^/dev': ''
|
||||||
|
}
|
||||||
|
},
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user