-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathCommunity.html
142 lines (132 loc) · 7.18 KB
/
Community.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Excellent community</title>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script>
<script type="text/javascript" src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<link href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="./css/community.css" />
<script src="./js/community.js"></script>
</head>
<body>
<div id="app" class="container">
<div class="row">
<div class="col-md-3 left">
<div class="title">
<img width="120px" src="./image/community.jpg"><br>
<span class="titlespan">Excellent <span style="color:#aaa;font-weight:bold">community</span></span><br>
<small>精选优质社区</small><br>
</div>
<div class="navbar list-group">
<router-link to="/design" class="list-group-item">设计</router-link>
<router-link to="/article" class="list-group-item">艺术</router-link>
<router-link to="/audio" class="list-group-item">音影</router-link>
<router-link to="/tool" class="list-group-item">工具</router-link>
<router-link to="source" class="list-group-item">素材</router-link>
<router-link to="/inspiration" class="list-group-item">灵感</router-link>
<router-link to="/brain" class="list-group-item">在线作品集</router-link>
</div>
</div>
<div class="col-md-9 right">
<router-view></router-view>
</div>
</div>
</div>
<template id="design">
<div id="vuedesign">
<div class="vuedesignheader">设计</div>
<div class="listcontainer">
<span class="rightlisttitle" v-for="rightlist in books">
<a :href="rightlist.href">
<strong class="listtitle">{{rightlist.title}}<br><small>{{rightlist.introduce}}</small>
<br><small>{{rightlist.Enintroduce}}</small></strong>
<img :src="rightlist.src">
</a>
<span class="rightbtm"><img id="hert" src="./image/community/heart.png"></span>
</span>
</div>
</div>
</template>
<template id="article">
<div class="vuedesignheader">艺术</div>
</template>
<template id="audio">
<div class="vuedesignheader">影音</div>
</template>
<template id="tool">
<div class="vuedesignheader">工具</div>
</template>
<template id="source">
<div class="vuedesignheader">素材</div>
</template>
<template id="inspiration">
<div class="vuedesignheader">灵感</div>
</template>
<template id="brain">
<div class="vuedesignheader">脑洞</div>
</template>
<script>
const Design = Vue.extend({
template: "#design",
data() {
return {
books: [
{ src: "./image/community/198cc4aa43548069892bab5c3207f663.png", Enintroduce: "Friend with design", introduce: "国内知名视觉设计师社区", title: "视觉中国", href: "http://shijue.me/" },
{ src: "./image/community/21eafce001739230ca544e5763913b8b.jpg", Enintroduce: "Play with creativity", introduce: "国内知名综合设计师社区", title: "站酷", href: "http://www.zcool.com.cn/" },
{ src: "./image/community/2a43ddc477ea389606658bfc33b1a735.png", Enintroduce: "Being a life Designer", introduce: "采集你最美的爱图", title: "花瓣", href: "http://huaban.com/" },
{ src: "./image/community/361e42b731873ce497ee64c3cfe86a7f.png", Enintroduce: "Youth Design Network", introduce: "专注于年轻", title: "Wevux", href: "http://wevux.com/" },
{ src: "./image/community/4948fd268ac5dc15c662dd823ca3c0f2.jpg", Enintroduce: "Visual impact of game", introduce: "热门游戏视觉网", title: "Artstation", href: "https://www.artstation.com/" },
{ src: "./image/community/67f5a86fccfb053366983bb32ceaa80c.jpg", Enintroduce: "Where Designers Get Inspired And Hired", introduce: "启发设计师平台", title: "Dribbble", href: "https://dribbble.com/" },
{ src: "./image/community/67f5a86fccfb053366983bb32ceaa822.bmp", Enintroduce: "The Global Network For Creatives", introduce: "全球创意设计", title: "Uplabs", href: "https://www.uplabs.com/" },
{ src: "./image/community/94ae1ab2db995da864656da699695848.png", Enintroduce: "Find good design", introduce: "国内新鲜设计平台", title: "设计癖", href: "http://www.shejipi.com/" },
{ src: "./image/community/9afce7cea33b1f270fa61a168bc790cc.bmp", Enintroduce: "Magazine wind vane", introduce: "设计类杂志圣经", title: "Wallpaper", href: "https://www.wallpaper.com/" },
{ src: "./image/community/ad3c8637802b4a1d860765c88d1a1499.png", Enintroduce: "Landing Page Design Inspiration", introduce: "网页设计灵感库", title: "Lapa", href: "https://www.lapa.ninja/" },
{ src: "./image/community/af498e4360d9202d248fee6c0317f871.jpg", Enintroduce: "design intern portfolios", introduce: "顶尖设计实习生", title: "Cofolios", href: "http://cofolios.com/" },
{ src: "./image/community/b53c0cf8df102608219259bbb15ccce55.bmp", Enintroduce: "Global design classroom", introduce: "国外设计作品集", title: "全球设计精品收录", href: "http://www.doooor.com/" },
]
}
}
});
const article = Vue.extend({
template: "#article"
});
const audio = Vue.extend({
template: "#audio"
});
const tool = Vue.extend({
template: "#tool"
});
const source = Vue.extend({
template: "#source"
});
const inspiration = Vue.extend({
template: "#inspiration"
});
const brain = Vue.extend({
template: "#brain"
});
const routes = [
{ path: "/design", component: Design },
{ path: "/article", component: article },
{ path: "/audio", component: audio },
{ path: "/tool", component: tool },
{ path: "/source", component: source },
{ path: "/inspiration", component: inspiration },
{ path: "/brain", component: brain },
{ path: '/', redirect: '/design' }
];
const router = new VueRouter({
routes: routes
})
var app = new Vue({
router: router,
}).$mount("#app")
//Jquery区
//$(".rightbtm>img").attr('src','./image/community/heartclick.png')
</script>
</body>
</html>