devttl/WebStack-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix #4

Browse Source
This commit is contained in:
陈嘉圣 2022-04-28 00:18:29 +08:00
parent dcc114a579
commit 8dbc1dab67
5 changed files with 161 additions and 98 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
public/assets/js/app.js Normal file
View File

@ -0,0 +1,33 @@
$(document).ready(function () {
$(document).on('click', '.has-sub', function () {
var _this = $(this)
if (!$(this).hasClass('expanded')) {
setTimeout(function () {
_this.find('ul').attr("style", "")
}, 300);
} else {
$('.has-sub ul').each(function (id, ele) {
var _that = $(this)
if (_this.find('ul')[0] != ele) {
setTimeout(function () {
_that.attr("style", "")
}, 300);
}
})
}
})
$('.user-info-menu .hidden-sm').click(function () {
if ($('.sidebar-menu').hasClass('collapsed')) {
$('.has-sub.expanded > ul').attr("style", "")
} else {
$('.has-sub.expanded > ul').show()
}
})
$("#main-menu li ul li").click(function () {
$(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
$(this).addClass('active'); // 添加当前元素的样式
});
return false;
});

51
public/index.html
View File

@ -1,12 +1,14 @@
<!DOCTYPE html> <!DOCTYPE html>
<html lang="zh"> <html lang="zh">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="author" content="viggo" /> <meta name="author" content="viggo" />
<title>WebStack.cc - 设计师网址导航</title> <title>WebStack.cc - 设计师网址导航</title>
<meta name="keywords" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc"> <meta name="keywords"
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
<meta name="description" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc"> <meta name="description" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
<link rel="shortcut icon" href="favicon.png"> <link rel="shortcut icon" href="favicon.png">
@ -19,21 +21,22 @@
<meta property="og:type" content="article"> <meta property="og:type" content="article">
<meta property="og:url" content="http://www.webstack.cc/"> <meta property="og:url" content="http://www.webstack.cc/">
<meta property="og:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc"> <meta property="og:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
<meta property="og:description" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc"> <meta property="og:description"
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
<meta property="og:image" content="http://webstack.cc/assets/images/webstack_banner_cn.png"> <meta property="og:image" content="http://webstack.cc/assets/images/webstack_banner_cn.png">
<meta property="og:site_name" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc"> <meta property="og:site_name" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
<!-- / Twitter Cards --> <!-- / Twitter Cards -->
<meta name="twitter:card" content="summary_large_image"> <meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc"> <meta name="twitter:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
<meta name="twitter:description" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc"> <meta name="twitter:description"
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
<meta name="twitter:image" content="http://www.webstack.cc/assets/images/webstack_banner_cn.png"> <meta name="twitter:image" content="http://www.webstack.cc/assets/images/webstack_banner_cn.png">
</head> </head>
<body class="page-body"> <body class="page-body">
<div id="app"></div> <div id="app"></div>
<!-- built files will be auto injected --> <!-- built files will be auto injected -->
<!-- <script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/js/jquery-1.11.1.min.js"></script>
<script src="./assets/js/bootstrap.min.js"></script> <script src="./assets/js/bootstrap.min.js"></script>
<script src="./assets/js/TweenMax.min.js"></script> <script src="./assets/js/TweenMax.min.js"></script>
<script src="./assets/js/resizeable.js"></script> <script src="./assets/js/resizeable.js"></script>
@ -41,41 +44,7 @@
<script src="./assets/js/xenon-api.js"></script> <script src="./assets/js/xenon-api.js"></script>
<script src="./assets/js/xenon-toggles.js"></script> <script src="./assets/js/xenon-toggles.js"></script>
<script src="./assets/js/xenon-custom.js"></script> <script src="./assets/js/xenon-custom.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> <script src="./assets/js/app.js"></script> -->
<script type="text/javascript">
Vue.nextTick(() => {
$(document).on('click', '.has-sub', function(){
var _this = $(this)
if(!$(this).hasClass('expanded')) {
setTimeout(function(){
_this.find('ul').attr("style","")
}, 300);
} else {
$('.has-sub ul').each(function(id,ele){
var _that = $(this)
if(_this.find('ul')[0] != ele) {
setTimeout(function(){
_that.attr("style","")
}, 300);
}
})
}
})
$('.user-info-menu .hidden-sm').click(function(){
if($('.sidebar-menu').hasClass('collapsed')) {
$('.has-sub.expanded > ul').attr("style","")
} else {
$('.has-sub.expanded > ul').show()
}
})
$("#main-menu li ul li").click(function() {
$(this).siblings('li').removeClass('active'); // 删除其他兄弟元素的样式
$(this).addClass('active'); // 添加当前元素的样式
});
})
</script>
</body> </body>
</html> </html>

32
src/assets/js/app.js Normal file
View File

@ -0,0 +1,32 @@
export function loadJs() {
const jsArr = [
{ id: "js-1", src: "./assets/js/jquery-1.11.1.min.js" },
{ id: "js-2", src: "./assets/js/bootstrap.min.js" },
{ id: "js-3", src: "./assets/js/TweenMax.min.js" },
{ id: "js-4", src: "./assets/js/resizeable.js" },
{ id: "js-5", src: "./assets/js/joinable.js" },
{ id: "js-6", src: "./assets/js/xenon-api.js" },
{ id: "js-7", src: "./assets/js/xenon-toggles.js" },
{ id: "js-8", src: "./assets/js/xenon-custom.js" },
{ id: "js-9", src: "./assets/js/app.js" },
];
const srcArr = document.getElementsByTagName("script");
for (let i = 0; i < srcArr.length; i++) {
for (let j = 0; j < jsArr.length; j++) {
// console.log(`srcArr[${i}]`, srcArr[i]);
// console.log(`jsArr[${j}]`, jsArr[j]);
if (srcArr[i].id == jsArr[j].id) {
srcArr[i].remove();
}
}
}
const body = document.getElementsByTagName('body')[0];
for (let i = 0; i < jsArr.length; i++) {
const script = document.createElement("script");
script.src = jsArr[i].src;
script.id = jsArr[i].id;
script.defer = true;
body.append(script);
}
}

8
src/main.js
View File

@ -11,6 +11,7 @@ import './assets/css/xenon-core.css'
import './assets/css/xenon-components.css' import './assets/css/xenon-components.css'
import './assets/css/xenon-skins.css' import './assets/css/xenon-skins.css'
import './assets/css/nav.css' import './assets/css/nav.css'
import { loadJs } from './assets/js/app.js'
Vue.config.productionTip = false Vue.config.productionTip = false
Vue.use(VueRouter) Vue.use(VueRouter)
@ -25,6 +26,13 @@ const router = new VueRouter({
mode: 'history' mode: 'history'
}) })
router.afterEach((to, from, next) => {
console.log("to => ", to, "from => ", from, "next => ", next);
if (to.path == '/' && to.hash == '') {
loadJs();
}
})
new Vue({ new Vue({
render: h => h(App), render: h => h(App),
router router

65
src/views/index.vue
View File

@ -9,7 +9,11 @@
<img src="../assets/images/logo@2x.png" width="100%" alt="" /> <img src="../assets/images/logo@2x.png" width="100%" alt="" />
</a> </a>
<a href="#" class="logo-collapsed"> <a href="#" class="logo-collapsed">
<img src="../assets/images/logo-collapsed@2x.png" width="40" alt="" /> <img
src="../assets/images/logo-collapsed@2x.png"
width="40"
alt=""
/>
</a> </a>
</div> </div>
<div class="mobile-menu-toggle visible-xs"> <div class="mobile-menu-toggle visible-xs">
@ -24,15 +28,19 @@
<!-- 侧边栏 --> <!-- 侧边栏 -->
<ul id="main-menu" class="main-menu"> <ul id="main-menu" class="main-menu">
<li v-for="(menu, idx) in items" :key="idx"> <li v-for="(menu, idx) in items" :key="idx">
<a :href="'#'+transName(menu)" class="smooth" @click="moveSlow"> <a :href="'#' + transName(menu)" class="smooth">
<i :class="menu.icon"></i> <i :class="menu.icon"></i>
<span class="title">{{ transName(menu) }}</span> <span class="title">{{ transName(menu) }}</span>
</a> </a>
<ul v-if="menu.children"> <ul v-if="menu.children">
<li v-for="(submenu, idx) in menu.children" :key="idx"> <li v-for="(submenu, idx) in menu.children" :key="idx">
<a :href="'#'+transName(submenu)" class="smooth" @click="moveSlow"> <a :href="'#' + transName(submenu)" class="smooth">
<span class="title">{{ transName(submenu) }}</span> <span class="title">{{ transName(submenu) }}</span>
<span v-show="submenu.is_hot" class="label label-pink pull-right hidden-collapsed">Hot</span> <span
v-show="submenu.is_hot"
class="label label-pink pull-right hidden-collapsed"
>Hot</span
>
</a> </a>
</li> </li>
</ul> </ul>
@ -42,7 +50,9 @@
<router-link to="/about"> <router-link to="/about">
<i class="linecons-heart"></i> <i class="linecons-heart"></i>
<span class="tooltip-blue">关于本站</span> <span class="tooltip-blue">关于本站</span>
<span class="label label-Primary pull-right hidden-collapsed">♥︎</span> <span class="label label-Primary pull-right hidden-collapsed"
>♥︎</span
>
</router-link> </router-link>
</li> </li>
</ul> </ul>
@ -60,7 +70,11 @@
<img :src="lang.flag" /> {{ lang.name }} <img :src="lang.flag" /> {{ lang.name }}
</a> </a>
<ul class="dropdown-menu languages"> <ul class="dropdown-menu languages">
<li :class="{active: langItem.key === lang.key}" v-for="langItem in langList" :key="langItem.key"> <li
:class="{ active: langItem.key === lang.key }"
v-for="langItem in langList"
:key="langItem.key"
>
<a href="#" @click="lang = langItem"> <a href="#" @click="lang = langItem">
<img :src="langItem.flag" /> {{ langItem.name }} <img :src="langItem.flag" /> {{ langItem.name }}
</a> </a>
@ -92,38 +106,45 @@
</template> </template>
<script> <script>
import WebItem from '../components/WebItem.vue' import WebItem from "../components/WebItem.vue";
import Footer from '../components/Footer.vue' import Footer from "../components/Footer.vue";
import itemsData from '../assets/data.json' import itemsData from "../assets/data.json";
// import { loadJs } from '../assets/js/app.js'
export default { export default {
name: 'Index', name: "Index",
components: { components: {
WebItem, WebItem,
Footer Footer,
}, },
data() { data() {
return { return {
items: itemsData, items: itemsData,
lang: {}, lang: {},
langList: [ langList: [
{key: 'zh', name: '简体中文', flag: './assets/images/flags/flag-cn.png'}, {
{key: 'en', name: 'English', flag: './assets/images/flags/flag-us.png'} key: "zh",
] name: "简体中文",
} flag: "./assets/images/flags/flag-cn.png",
},
{
key: "en",
name: "English",
flag: "./assets/images/flags/flag-us.png",
},
],
};
}, },
created() { created() {
this.lang = this.langList[0] this.lang = this.langList[0];
// loadJs();
}, },
methods: { methods: {
transName(webItem) { transName(webItem) {
return this.lang.key === 'en' ? webItem.en_name : webItem.name; return this.lang.key === "en" ? webItem.en_name : webItem.name;
}, },
moveSlow() { },
};
}
}
}
</script> </script>
<style> <style>