fix #4
This commit is contained in:
陈嘉圣
parent
dcc114a579
commit
8dbc1dab67
33
public/assets/js/app.js
Normal file
33
public/assets/js/app.js
Normal 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;
|
||||||
|
});
|
||||||
@ -1,81 +1,50 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="zh">
|
<html lang="zh">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<meta name="author" content="viggo" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>WebStack.cc - 设计师网址导航</title>
|
<meta name="author" content="viggo" />
|
||||||
<meta name="keywords" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
|
<title>WebStack.cc - 设计师网址导航</title>
|
||||||
<meta name="description" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
<meta name="keywords"
|
||||||
<link rel="shortcut icon" href="favicon.png">
|
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
|
||||||
|
<meta name="description" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
||||||
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
<link rel="shortcut icon" href="favicon.png">
|
||||||
<!--[if lt IE 9]>
|
|
||||||
|
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
|
||||||
|
<!--[if lt IE 9]>
|
||||||
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
|
||||||
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
|
||||||
<![endif]-->
|
<![endif]-->
|
||||||
<!-- / FB Open Graph -->
|
<!-- / FB Open Graph -->
|
||||||
<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"
|
||||||
<meta property="og:image" content="http://webstack.cc/assets/images/webstack_banner_cn.png">
|
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
|
||||||
<meta property="og:site_name" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
<meta property="og:image" content="http://webstack.cc/assets/images/webstack_banner_cn.png">
|
||||||
<!-- / Twitter Cards -->
|
<meta property="og:site_name" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
||||||
<meta name="twitter:card" content="summary_large_image">
|
<!-- / Twitter Cards -->
|
||||||
<meta name="twitter:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
<meta name="twitter:card" content="summary_large_image">
|
||||||
<meta name="twitter:description" content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
|
<meta name="twitter:title" content="WebStack - 收集国内外优秀设计网站、UI设计资源网站、灵感创意网站、素材资源网站，定时更新分享优质产品设计书签。www.webstack.cc">
|
||||||
<meta name="twitter:image" content="http://www.webstack.cc/assets/images/webstack_banner_cn.png">
|
<meta name="twitter:description"
|
||||||
</head>
|
content="UI设计,UI设计素材,设计导航,网址导航,设计资源,创意导航,创意网站导航,设计师网址大全,设计素材大全,设计师导航,UI设计资源,优秀UI设计欣赏,设计师导航,设计师网址大全,设计师网址导航,产品经理网址导航,交互设计师网址导航,www.webstack.cc">
|
||||||
|
<meta name="twitter:image" content="http://www.webstack.cc/assets/images/webstack_banner_cn.png">
|
||||||
|
</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>
|
<script src="./assets/js/joinable.js"></script>
|
||||||
<script src="./assets/js/joinable.js"></script>
|
<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="./assets/js/app.js"></script> -->
|
||||||
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
|
</body>
|
||||||
<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(){
|
</html>
|
||||||
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>
|
|
||||||
</html>
|
|
||||||
32
src/assets/js/app.js
Normal file
32
src/assets/js/app.js
Normal 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);
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -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
|
||||||
|
|||||||
@ -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>
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user