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;
|
||||
transition: 0.3s;
|
||||
}
|
||||
.content-section ul li:hover {
|
||||
.content-section ul:hover {
|
||||
background-color: var(--theme-bg-color);
|
||||
}
|
||||
.content-section ul li:hover:first-child {
|
||||
@ -587,7 +587,7 @@ body.light-mode .video-bg:before {
|
||||
.products {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150px;
|
||||
width: 40px;
|
||||
}
|
||||
@media screen and (max-width: 480px) {
|
||||
.products {
|
||||
@ -596,28 +596,29 @@ body.light-mode .video-bg:before {
|
||||
}
|
||||
|
||||
.status {
|
||||
margin-left: auto;
|
||||
/*margin-left: auto;*/
|
||||
width: 140px;
|
||||
font-size: 15px;
|
||||
position: relative;
|
||||
text-align: left;
|
||||
}
|
||||
@media screen and (max-width: 700px) {
|
||||
.status {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.status-circle {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
background-color: #396df0;
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
top: 4px;
|
||||
left: -20px;
|
||||
}
|
||||
.status-circle.green {
|
||||
background-color: #3bf083;
|
||||
}
|
||||
/*.status-circle {*/
|
||||
/* width: 6px;*/
|
||||
/* height: 6px;*/
|
||||
/* background-color: #396df0;*/
|
||||
/* position: absolute;*/
|
||||
/* border-radius: 50%;*/
|
||||
/* top: 4px;*/
|
||||
/* left: -20px;*/
|
||||
/*}*/
|
||||
/*.status-circle.green {*/
|
||||
/* background-color: #3bf083;*/
|
||||
/*}*/
|
||||
.status-button {
|
||||
font-size: 15px;
|
||||
margin-top: 0;
|
||||
@ -642,57 +643,57 @@ body.light-mode .video-bg:before {
|
||||
background: #1e59f1;
|
||||
}
|
||||
|
||||
.menu {
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
background-color: var(--button-inactive);
|
||||
border-radius: 50%;
|
||||
box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);
|
||||
margin: 0 12px;
|
||||
}
|
||||
/*.menu {*/
|
||||
/* width: 5px;*/
|
||||
/* height: 5px;*/
|
||||
/* background-color: var(--button-inactive);*/
|
||||
/* border-radius: 50%;*/
|
||||
/* box-shadow: 7px 0 0 0 var(--button-inactive), 14px 0 0 0 var(--button-inactive);*/
|
||||
/* margin: 0 12px;*/
|
||||
/*}*/
|
||||
|
||||
@media screen and (max-width: 415px) {
|
||||
.adobe-product .menu {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
.dropdown {
|
||||
position: relative;
|
||||
height: 53px;
|
||||
width: 40px;
|
||||
top: -24px;
|
||||
display: flex;
|
||||
left: -5px;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
.dropdown ul {
|
||||
position: absolute;
|
||||
background: var(--dropdown-bg);
|
||||
height: 110px;
|
||||
width: 120px;
|
||||
right: 0;
|
||||
top: 20px;
|
||||
pointer-events: none;
|
||||
opacity: 0;
|
||||
transform: translatey(10px);
|
||||
transition: all 0.4s ease;
|
||||
}
|
||||
.dropdown ul li a {
|
||||
text-decoration: none;
|
||||
color: var(--theme-color);
|
||||
font-size: 12px;
|
||||
}
|
||||
/*.dropdown {*/
|
||||
/* position: relative;*/
|
||||
/* height: 53px;*/
|
||||
/* width: 40px;*/
|
||||
/* top: -24px;*/
|
||||
/* display: flex;*/
|
||||
/* left: -5px;*/
|
||||
/* background: transparent;*/
|
||||
/* border: none;*/
|
||||
/* cursor: pointer;*/
|
||||
/*}*/
|
||||
/*.dropdown ul {*/
|
||||
/* position: absolute;*/
|
||||
/* background: var(--dropdown-bg);*/
|
||||
/* height: 30px;*/
|
||||
/* width: 50px;*/
|
||||
/* right: 0;*/
|
||||
/* top: 20px;*/
|
||||
/* pointer-events: none;*/
|
||||
/* opacity: 0;*/
|
||||
/* transform: translatey(10px);*/
|
||||
/* transition: all 0.4s ease;*/
|
||||
/*}*/
|
||||
/*.dropdown ul li a {*/
|
||||
/* text-decoration: none;*/
|
||||
/* color: var(--theme-color);*/
|
||||
/* font-size: 12px;*/
|
||||
/*}*/
|
||||
|
||||
.dropdown.is-active ul {
|
||||
opacity: 1;
|
||||
pointer-events: all;
|
||||
transform: translatey(25px);
|
||||
}
|
||||
.dropdown.is-active ul li:hover {
|
||||
background-color: var(--dropdown-hover);
|
||||
}
|
||||
/*.dropdown.is-active ul {*/
|
||||
/* opacity: 1;*/
|
||||
/* pointer-events: all;*/
|
||||
/* transform: translatey(25px);*/
|
||||
/*}*/
|
||||
/*.dropdown.is-active ul:hover {*/
|
||||
/* background-color: var(--dropdown-hover);*/
|
||||
/*}*/
|
||||
|
||||
.button-wrapper {
|
||||
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="menu-circle"></div>
|
||||
<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>
|
||||
<!-- <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 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 notify" index="#">Market</el-menu-item>-->
|
||||
<!-- </el-menu>-->
|
||||
<!-- <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 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 notify" index="#">Market</el-menu-item>-->
|
||||
<!-- </el-menu>-->
|
||||
<div class="search-bar">
|
||||
<input type="text" placeholder="Search">
|
||||
</div>
|
||||
@ -39,10 +41,10 @@
|
||||
:close-on-click-modal="true"
|
||||
|
||||
>
|
||||
<el-tabs type="border-card">
|
||||
<el-tab-pane>
|
||||
<el-tabs type="border-card" v-model="TabsValue">
|
||||
<el-tab-pane name="1">
|
||||
<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-input
|
||||
v-model="loginForm.username"
|
||||
@ -60,10 +62,10 @@
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</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
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
type="text"
|
||||
@ -74,27 +76,31 @@
|
||||
style="width: 15.8vw"
|
||||
></el-input>
|
||||
<!-- <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>
|
||||
<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-checkbox v-model="loginForm.remember" class="remember">记住我</el-checkbox>
|
||||
</el-form-item>
|
||||
|
||||
<el-form-item>
|
||||
<el-link @click="toRePassword" :underline="false">忘记密码?找回</el-link>
|
||||
</el-form-item>
|
||||
</div>
|
||||
|
||||
<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 @click="resetForm('ruleForm')">重置</el-button>
|
||||
|
||||
</div>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
|
||||
<el-tab-pane>
|
||||
<el-tab-pane name="2">
|
||||
<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-input
|
||||
v-model="registerFrom.username"
|
||||
@ -120,7 +126,7 @@
|
||||
placeholder="密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</el-form-item>
|
||||
<el-form-item prop="repassword">
|
||||
@ -132,12 +138,13 @@
|
||||
placeholder="确认密码"
|
||||
auto-complete="new-password"
|
||||
>
|
||||
<i slot="suffix" :class="icon" @click="showPass" ></i>
|
||||
<i slot="suffix" :class="icon" @click="showPass"></i>
|
||||
</el-input>
|
||||
</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">
|
||||
<el-input
|
||||
prefix-icon="el-icon-mobile-phone"
|
||||
@ -150,26 +157,94 @@
|
||||
></el-input>
|
||||
<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>
|
||||
</div>
|
||||
|
||||
|
||||
</el-form-item>
|
||||
<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 @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>
|
||||
</el-form>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import {login, register, sendActiveCode} from "@/api/login";
|
||||
import Vue from "vue";
|
||||
|
||||
|
||||
export default {
|
||||
@ -177,11 +252,12 @@ export default {
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
tabList:[
|
||||
{path:'/home',libel:'ALL'},
|
||||
{path:'/news',libel:'HotNews'},
|
||||
{path:'/navDetail',libel:'navDetail'},
|
||||
{path:'/#',libel:'TEST'},
|
||||
TabsValue: '1',
|
||||
tabList: [
|
||||
{path: '/home', libel: 'ALL'},
|
||||
{path: '/news', libel: '今日热点'},
|
||||
{path: '/navDetail', libel: '网站详情'},
|
||||
{path: '/myNav', libel: '我的导航'},
|
||||
],
|
||||
loginDialogVisible: false,
|
||||
passwordVisible: "password",
|
||||
@ -189,20 +265,49 @@ export default {
|
||||
showTime: true, /* 布尔值,通过v-show控制显示‘获取按钮’还是‘倒计时’ */
|
||||
sendTime: '', /* 倒计时 计数器 */
|
||||
timer: null,
|
||||
codeUrl: 'http://localhost:8080/verifyCode',
|
||||
loginForm: {
|
||||
username: null,
|
||||
password: null,
|
||||
code: null,
|
||||
remember: null
|
||||
},
|
||||
registerFrom:{
|
||||
registerFrom: {
|
||||
username: null,
|
||||
email:null,
|
||||
captcha:null,
|
||||
email: null,
|
||||
captcha: 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() {
|
||||
@ -214,7 +319,10 @@ export default {
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
|
||||
//切换到找回密码
|
||||
toRePassword() {
|
||||
this.TabsValue = '3';
|
||||
},
|
||||
|
||||
// 打开登陆注册
|
||||
openLoginDialog() {
|
||||
@ -237,10 +345,6 @@ export default {
|
||||
$(".header").removeClass("wide");
|
||||
});
|
||||
},
|
||||
// 弹窗关闭
|
||||
modalClose() {
|
||||
this.loginDialogVisible = false;
|
||||
},
|
||||
// 显示密码
|
||||
showPass() {
|
||||
if (this.passwordVisible === "text") {
|
||||
@ -253,32 +357,71 @@ export default {
|
||||
}
|
||||
},
|
||||
// 登录提交
|
||||
submitLoginForm(formName) {
|
||||
// var _this=this;
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// });
|
||||
submitLoginForm() {
|
||||
login(this.loginForm).then(response => {
|
||||
console.log(response);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
});
|
||||
})
|
||||
},
|
||||
// 注册提交
|
||||
submitRegisterForm(formName) {
|
||||
// var _this=this;
|
||||
// this.$refs[formName].validate((valid) => {
|
||||
// if (valid) {
|
||||
//
|
||||
// }
|
||||
//
|
||||
// });
|
||||
submitRegisterForm() {
|
||||
if (this.registerFrom.password === this.registerFrom.repassword) {
|
||||
register(this.registerFrom).then(response => {
|
||||
console.log(response);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
});
|
||||
})
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "两次密码不相同",
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
},
|
||||
//重置
|
||||
resetForm(formName) {
|
||||
this.$refs[formName].resetFields();
|
||||
},
|
||||
// 发送邮箱验证码
|
||||
sendEmail(){
|
||||
|
||||
sendEmail() {
|
||||
if (this.registerFrom.email !== null) {
|
||||
sendActiveCode().then(response => {
|
||||
console.log(response);
|
||||
Vue.prototype.$notify({
|
||||
title: '成功',
|
||||
message: ('i', {style: 'color: teal'}, response.data.msg),
|
||||
type: 'success',
|
||||
offset: 50
|
||||
});
|
||||
}).catch((error) => {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: error,
|
||||
offset: 50
|
||||
});
|
||||
}).then(()=>{
|
||||
const TIME_COUNT = 60; // 更改倒计时时间
|
||||
if (!this.timer) {
|
||||
this.sendTime = TIME_COUNT;
|
||||
@ -293,22 +436,35 @@ export default {
|
||||
}
|
||||
}, 1000);
|
||||
}
|
||||
})
|
||||
} else {
|
||||
Vue.prototype.$notify.error({
|
||||
title: '错误',
|
||||
message: "请先填写邮箱!",
|
||||
offset: 50
|
||||
});
|
||||
}
|
||||
|
||||
},
|
||||
//点击图片更换验证码
|
||||
resetImg() {
|
||||
this.imageUrl = "http://localhost:8082/helloGithub_war_exploded/VerifycodeServlet?" + new Date().getTime();
|
||||
this.codeUrl = "http://localhost:8080/verifyCode?" + new Date().getTime();
|
||||
},
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
<style scoped>
|
||||
.dialog {
|
||||
backdrop-filter: blur(20px);
|
||||
color: var(--theme-color);
|
||||
background-color: var(--theme-bg-color);
|
||||
}
|
||||
|
||||
.el-dialog {
|
||||
background: rgba(255, 255, 255, 0.98);
|
||||
}
|
||||
|
||||
.el-dialog__header {
|
||||
display: none;
|
||||
}
|
||||
|
@ -1,195 +1,26 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<!-- <MainHeader></MainHeader>-->
|
||||
<div class="content-wrapper">
|
||||
<div class="content-wrapper-header">
|
||||
<div class="content-wrapper-context">
|
||||
<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>
|
||||
<CarouselComponent></CarouselComponent>
|
||||
</div>
|
||||
<NoticeComponent></NoticeComponent>
|
||||
<NavList></NavList>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import $ from 'jquery'
|
||||
import {getHotNews} from "@/api/api";
|
||||
// import MainHeader from "@/components/home/MainHeader.vue";
|
||||
import CarouselComponent from "@/components/home/Carousel.vue";
|
||||
import NavList from "@/components/home/NavList.vue";
|
||||
import NoticeComponent from "@/components/home/Notice.vue";
|
||||
export default {
|
||||
name:"HomePage",
|
||||
components:{
|
||||
// MainHeader
|
||||
NoticeComponent,
|
||||
NavList,
|
||||
CarouselComponent
|
||||
},
|
||||
data() {
|
||||
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">
|
||||
<circle cx="18" cy="18" r="7.5" fill="#00c94c"></circle>
|
||||
</svg>
|
||||
<p class="nav__title">Weather</p>
|
||||
<p class="nav__title">baidu</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@ -87,7 +87,8 @@ export default {
|
||||
}
|
||||
|
||||
.widget {
|
||||
background-color: #fff;
|
||||
color: var(--theme-color);
|
||||
background-color: var(--theme-bg-color);
|
||||
border-radius: 1.0rem;
|
||||
flex-direction: column;
|
||||
height: 540px;
|
||||
@ -146,7 +147,7 @@ export default {
|
||||
|
||||
.nav__title
|
||||
{
|
||||
color: #444;
|
||||
color: var(--theme-color);
|
||||
position: absolute;
|
||||
}
|
||||
.refresh{
|
||||
@ -156,6 +157,7 @@ export default {
|
||||
.refresh:hover{
|
||||
font-size: 20px;
|
||||
color: #999ba5;
|
||||
cursor: pointer;
|
||||
}
|
||||
.hot-rank-1 {
|
||||
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-title">Apps</div>-->
|
||||
<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">
|
||||
<svg viewBox="0 0 512 512">
|
||||
<g xmlns="http://www.w3.org/2000/svg" fill="currentColor">
|
||||
@ -21,6 +32,13 @@
|
||||
网站管理
|
||||
<!-- <span class="notification-number updates">3</span>-->
|
||||
</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 class="side-wrapper">-->
|
||||
|
@ -18,13 +18,13 @@
|
||||
import $ from 'jquery'
|
||||
export default {
|
||||
name:"SettingMainHeader",
|
||||
props:{
|
||||
tabList:Object
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tabList:[
|
||||
{path:'/appearance',libel:'外观设置'},
|
||||
{path:'/information',libel:'信息设置'},
|
||||
{path:'/function',libel:'功能设置'}
|
||||
]
|
||||
|
||||
|
||||
}},
|
||||
mounted() {
|
||||
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>
|
||||
<div class="main">
|
||||
<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 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 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>
|
||||
</template>
|
||||
<script>
|
||||
|
||||
|
||||
import UploadComponent from "@/components/setting/system/Upload.vue";
|
||||
|
||||
export default {
|
||||
name:"AppearanceSettings",
|
||||
components: {},
|
||||
components: {UploadComponent},
|
||||
data() {
|
||||
return {
|
||||
|
||||
color:'#409EFF',
|
||||
input: '',
|
||||
value:'',
|
||||
}},
|
||||
mounted() {
|
||||
|
||||
@ -33,7 +107,6 @@ export default {
|
||||
methods: {
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
@ -42,5 +115,65 @@ export default {
|
||||
flex-direction: column;
|
||||
flex-wrap: nowrap;
|
||||
//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>
|
@ -1,34 +1,181 @@
|
||||
<template>
|
||||
<div>
|
||||
功能设置
|
||||
</div>
|
||||
<div class="main">
|
||||
<div class="nav-function">
|
||||
<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>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name:"FunctionSettings",
|
||||
components:{
|
||||
|
||||
|
||||
},
|
||||
name: "FunctionSettings",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}},
|
||||
DialogVisible:false,
|
||||
input: '',
|
||||
form: [{
|
||||
name: null,
|
||||
url: null,
|
||||
}],
|
||||
searchList: [{
|
||||
name: '百度',
|
||||
url: ''
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
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>
|
||||
<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>
|
@ -1,31 +1,214 @@
|
||||
<template>
|
||||
<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>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
name:"InformationSettings",
|
||||
components:{
|
||||
},
|
||||
name: "InformationSettings",
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
|
||||
}},
|
||||
input: '',
|
||||
textarea: '',
|
||||
form: [{
|
||||
name: null,
|
||||
url: null,
|
||||
}]
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
created() {
|
||||
|
||||
},
|
||||
computed: {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
addItem() {
|
||||
this.form.push({
|
||||
name: '',
|
||||
url: ''
|
||||
})
|
||||
},
|
||||
deleteItem(item, index) {
|
||||
this.form.splice(index, 1)
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</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;
|
||||
}
|
||||
|
||||
.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>
|
@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<div class="main-container">
|
||||
<setting-main-header></setting-main-header>
|
||||
<setting-main-header :tab-list="tabList"></setting-main-header>
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
</template>
|
||||
@ -20,7 +20,11 @@ export default {
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
tabList:[
|
||||
{path:'/appearance',libel:'外观设置'},
|
||||
{path:'/information',libel:'信息设置'},
|
||||
{path:'/function',libel:'功能设置'}
|
||||
]
|
||||
}},
|
||||
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 systemSettings from "@/components/setting/system/SystemSettings.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
|
||||
VueRouter.prototype.push = function push(location) {
|
||||
return originalPush.call(this, location).catch(err => err)
|
||||
@ -41,13 +46,18 @@ const routes = [
|
||||
path: '/navDetail',
|
||||
name: 'navDetail',
|
||||
component: navDetail
|
||||
},
|
||||
{
|
||||
path: '/myNav',
|
||||
name: 'myNav',
|
||||
component: myNav
|
||||
}
|
||||
],
|
||||
},
|
||||
{
|
||||
path: '/settings',
|
||||
redirect: '/admin',
|
||||
name: 'settings',
|
||||
redirect: '/personal',
|
||||
name: '/settings',
|
||||
component: settings,
|
||||
children: [
|
||||
{
|
||||
@ -77,7 +87,30 @@ const routes = [
|
||||
path: '/website',
|
||||
name: '/website',
|
||||
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({
|
||||
state: {
|
||||
theme:'dark',
|
||||
},
|
||||
getters: {
|
||||
},
|
||||
mutations: {
|
||||
SET_THEME:(state,data)=>{
|
||||
state.theme=data;
|
||||
window.sessionStorage.setItem('theme',data);
|
||||
}
|
||||
},
|
||||
actions: {
|
||||
},
|
||||
|
@ -9,7 +9,7 @@
|
||||
Your browser does not support the video tag.
|
||||
</video>
|
||||
</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"
|
||||
stroke-linejoin="round">
|
||||
<path d="M21 12.79A9 9 0 1111.21 3 7 7 0 0021 12.79z"></path>
|
||||
@ -40,23 +40,51 @@ export default {
|
||||
HomeHeader,
|
||||
},
|
||||
data() {
|
||||
return {}
|
||||
return {
|
||||
isLight:false,
|
||||
darkMode:window.sessionStorage.getItem('theme')
|
||||
}
|
||||
},
|
||||
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() {
|
||||
|
||||
},
|
||||
computed: {},
|
||||
methods:{
|
||||
toggleDarkLight() {
|
||||
const toggleButton = document.querySelector('.dark-light');
|
||||
|
||||
toggleButton.addEventListener('click', () => {
|
||||
document.body.classList.toggle('light-mode');
|
||||
});
|
||||
goDark() {
|
||||
//黑夜的
|
||||
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();
|
||||
}
|
||||
|
||||
},
|
||||
// toggleDarkLight() {
|
||||
// const toggleButton = document.querySelector('.dark-light');
|
||||
// toggleButton.addEventListener('click', () => {
|
||||
// document.body.classList.toggle('light-mode');
|
||||
// });
|
||||
// }
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
@ -6,6 +6,10 @@ module.exports = defineConfig({
|
||||
client: {
|
||||
overlay: false // 编译错误时,取消全屏覆盖
|
||||
},
|
||||
open: true, //配置自动启动浏览器
|
||||
host: "localhost",
|
||||
https: false,
|
||||
port: 8081,
|
||||
proxy: {
|
||||
|
||||
'/api': {
|
||||
@ -24,6 +28,22 @@ module.exports = defineConfig({
|
||||
'^/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