This commit is contained in:
2023-12-24 18:17:00 +08:00
parent f63aac52cb
commit 42c4b0ddc8
21 changed files with 2075 additions and 905 deletions

View File

@@ -1,56 +1,12 @@
<template>
<div class="main-container">
<div class="content-wrapper">
<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 &amp; 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 &amp; visual effects</div>
<div class="app-card-buttons">
<button class="content-button status-button">Update</button>
<div class="menu"></div>
</div>
<div class="wrapper">
<LeftSide :category="category"></LeftSide>
<div class="main-container">
<div class="content-wrapper">
<div v-for="(item,index) in userNavList" :key="index" class="content-section">
<div :id="item.name" class="content-section-title">{{ item.name }}</div>
<div class="apps-card">
<NavList v-if="item.childUC" v-for="(item,index2) in item.childUC" :key="index2" :nav="item"></NavList>
</div>
</div>
</div>
@@ -60,31 +16,112 @@
<script>
import $ from 'jquery'
import NavList from "@/components/home/NavList.vue";
import axios from "axios";
import Vue from "vue";
import LeftSide from "@/components/home/LeftSide.vue";
export default {
name:"MyNav",
components:{
name: "MyNav",
components: {
LeftSide,
NavList
// MainHeader
},
data() {
return {
}},
userNavList: [],
category: [],
}
},
// 监听,当路由发生变化的时候执行
watch: {
'$route': 'getPath'
},
mounted() {
this.Fun1();
this.Fun2();
this.Fun3();
this.Fun4();
this.dropdownFun();
this.getUserNav();
this.getCategoriesByUser();
},
created() {
},
computed: {
},
computed: {},
methods: {
Fun1(){
getCategoriesByUser(){
let _this = this;
if(localStorage.getItem('userId')&&localStorage.getItem('Authorization')){
axios({
method: 'post',
url: '/api/UrlAndCate/disposeBookmarkToJsonByUserId',
params:{
userId:localStorage.getItem('userId')
}
}).then(function (res) {
if (res.data.data) {
_this.category = res.data.data;
} else {
return false;
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error,
offset: 0
});
})
}else {
Vue.prototype.$notify.error({
title: '错误',
message: "登录信息失效,请重新登录",
offset: 0
});
}
},
getPath() {
document.querySelector(this.$route.query.name).scrollIntoView(true)
},
getUserNav() {
let _this = this;
if (localStorage.getItem("userId")) {
axios({
method: 'post',
url: '/api/UrlAndCate/disposeBookmarkToJson',
params: {
userId: localStorage.getItem("userId"),
}
}).then(function (res) {
if (res.data) {
_this.userNavList = res.data;
}
}).catch((error) => {
Vue.prototype.$notify.error({
title: '错误',
message: error === null ? '' : error,
offset: 0
});
})
} else {
Vue.prototype.$notify.error({
title: '错误',
message: "请先登录!",
offset: 0
});
}
},
Fun1() {
$(document).click(function (e) {
var container = $(".status-button");
var dd = $(".dropdown");
@@ -93,7 +130,7 @@ export default {
}
});
},
Fun2(){
Fun2() {
$(".status-button:not(.open)").on("click", function () {
$(".overlay-app").addClass("is-active");
});
@@ -101,17 +138,17 @@ export default {
$(".overlay-app").removeClass("is-active");
});
},
Fun3(){
Fun3() {
$(".status-button:not(.open)").click(function () {
$(".pop-up").addClass("visible");
});
},
Fun4(){
Fun4() {
$(".pop-up .close").click(function () {
$(".pop-up").removeClass("visible");
});
},
dropdownFun(){
dropdownFun() {
const dropdowns = document.querySelectorAll(".dropdown");
dropdowns.forEach(dropdown => {
dropdown.addEventListener("click", e => {
@@ -120,7 +157,7 @@ export default {
dropdown.classList.add("is-active");
});
});
}
},
}
}