diff --git "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-details.html" "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-details.html" index e388e7e38c70ee279b8f88f77d4cb639eb050b98..99280f1f953646c9f5417b065e412964ed6d2bad 100644 --- "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-details.html" +++ "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-details.html" @@ -11,221 +11,18 @@ -
-
- -
+
+ + +
- -
-
-
-
-

“线框”在设计中有哪些妙用？

-
-
124人浏览 / 3人评论
-
-
-

在日常的设计工作中，线框是常用到的设计元素之一，在一些优秀的作品中也常常会出现，而对于一些设计师而言，懂得参考优秀作品中用的设计元素，但却不知为什么用？用的目的是什么？也有些作品整体看起来会出现散乱、区域划分不明显、缺少细节感等等的情况，那么又该从哪些方面入手解决呢？本期就与大家一起分析：线框在设计中有哪些妙用？上述问题如何通过线框得到相应的解决！ -

-

-

线框在设计环节中可以看做为点状元素、亦可以看做为线状元素，在之前文章《解密设计中的点线面》中分别说过点状、线状元素的作用，而线框在设计中则可以同时兼顾这两优点，虽然是元素相同，但是用的目的不同，发挥的作用也会有所不同，比如：

-

这里出现的线框元素就起到了一定的装饰、衬托画面的作用，以点线面的角度来看则符合点状元素的特点，虽然这类元素对于作品整体而言只是次要的视觉元素，但是有与无的差别还是一目了然的，有此类元素，画面则呈现出一种更加丰富、饱满的视觉感受；而无此类元素，给人的感觉虽然画面元素依然很多，但是总带有单薄、不够饱满、缺少细节的感觉！

-

-

线框还有另一种很直观的作用，即：增强画面细节感、设计感，这一作用的线框在很多优秀的作品中都能看到，大到页面、小到优惠券、按钮。

- -
-
- -
-

相关文章

-
-
- -
- -
-
- 如何有效避免设计作品“空”？ -
- -
-
- -
- -
-
- 高点击率钻展，设计环节… -
- -
-
- -
- -
-
- 无敌配色技巧（一） -
- -
-
-
-
- - -
-
- - -
- - -

全部评论

-
-
- -
-
-
-
晴天下起了小雨
-
2017-10-01 18:00
-
-
很喜欢，果断关注了
-
- -
回复
-
- -
-
- -
-
-
-
wjmyly7336064
-
2017-10-01 18:00
-
-
相当实用，赞美了
- -
- -
-
-
橘大佬
-
2017-10-01 18:00
-
-
就是有些细节再到位点就好了…
-
- -
- -
- -
回复
-
- -
- -
- -
-
- -
-
个人微信号
-
- -

关注作者获取更多模板信息，定时发布干货文章

-
- -
-
- -
- -
-
最新文章
-
- -
-
- -
- -
-
热门标签
- -
-
- -
-
-
- - -
-
-

本设计由简.工作室荣誉出品

-

copyright @ 2017~2018 简.工作室（www.jeanstudio.cn）

-
-
+ + + \ No newline at end of file diff --git "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-index.html" "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-index.html" index 5af361d90d5b0b27a7bc81675344a6b6d42026ab..3934c9e6d8ec79b452214297d6304dd6fecf43d0 100644 --- "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-index.html" +++ "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/calmlog-index.html" @@ -12,8 +12,8 @@
- - + +
diff --git "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/js/main.js" "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/js/main.js" index 93bb64c665e2751a3ad7681663db78804ce8f266..ab595f141c37444ce0733404afff7cd1d398b0d7 100644 --- "a/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/js/main.js" +++ "b/\345\272\204\346\230\255\345\261\261/vue front \345\215\232\345\256\242/js/main.js" @@ -24,19 +24,23 @@ let getQueryParam = function(name, defaultValue) { Vue.component('co-header', { data: function() { return { - category_id:1, + category_id:0, navList:[] } }, props:['category_id'] , created:function(){ + let categoryId = getQueryParam('category_id',0); + this.category_id = categoryId; + console.log(this.category_id==0); let _this = this; axios.get("http://localhost:8901/api/category/categoryList") .then(function (response) { if (response.data.status == 0) { let list = response.data.data.navName; _this.navList = list; + console.log(_this.navList); } else { alert("获取导航Nav失败，具体信息：" + response.data.message); } @@ -53,11 +57,11 @@ Vue.component('co-header', {
@@ -70,7 +74,7 @@ Vue.component('co-middle', { data: function() { return { articleList: [], - category_id:1, + category_id:0, page: 1, page_size: 4, total: 0, @@ -78,28 +82,27 @@ Vue.component('co-middle', { }, created:function(){ let _this=this; - this.category_id = getQueryParam('category_id',1); + this.category_id = getQueryParam('category_id',0); axios.get("http://localhost:8901/api/article/articleList", { - params: { - 'category_id':_this.category_id, - 'page':_this.page, - 'page_size':_this.page_size - } + params: { + 'category_id': _this.category_id, + 'page': _this.page, + 'page_size': _this.page_size + } }) - .then(function (response) { + .then(function(response) { if (response.data.status == 0) { let list = response.data.data.articleData.data; _this.articleList = list; _this.total = response.data.data.total; - console.log(response) + // console.log(response) } else { alert("获取文章失败，具体信息：" + response.data.message); } }) - } - , + }, computed: { - paginator: function () { + paginator: function() { let result = { range: 2, // 页码每边显示几条 page: this.page, // 当前页 @@ -119,22 +122,22 @@ Vue.component('co-middle', { break; } } - console.log(result); + // console.log(result); return result; } }, - methods:{ - getArticleList:function (page) { + methods: { + getArticleList: function(page) { let _this = this; - this.page=page; + this.page = page; axios.get("http://localhost:8901/api/article/articleList", { - params: { - 'page':_this.page, - 'page_size':_this.page_size - } - }) - .then(function (response) { + params: { + 'page': _this.page, + 'page_size': _this.page_size + } + }) + .then(function(response) { if (response.data.status == 0) { let list = response.data.data.articleData.data; _this.articleList = list; @@ -158,14 +161,14 @@ Vue.component('co-middle', {
- +

{{item.article_title}}

+ v-bind:href="'calmlog-details.html?article_id='+item.article_id">{{item.article_title}}

{{item.intro}}

阅读更多... + v-bind:href="'calmlog-details.html?article_id='+item.article_id">阅读更多...

@@ -221,11 +224,11 @@ Vue.component('co-middle', {
` }); -Vue.component('co-bottom',{ - data:function(){ - return{} +Vue.component('co-bottom', { + data: function() { + return {} }, - template:`
+ template: `

本设计由简.工作室荣誉出品

copyright @ 2017~2018 简.工作室（www.jeanstudio.cn）

@@ -233,10 +236,159 @@ Vue.component('co-bottom',{
` }); +Vue.component('co-middle-details', { + data: function() { + return { + articleList: [], + commentInfo: { + comment_content: "", + email: "", + nickname: "", + article_id: '' + }, + commentList: [], + } + }, + created: function() { + // 请求评论列表接口：ajax, jquery + // 遍历评论列表数据，追加到评论列表 + let _this = this; + let articleId = getQueryParam('article_id'); + console.log(); + this.commentInfo.article_id = articleId; + axios.get("http://localhost:8901/api/comment/list/article_id/" + articleId) + .then(function(response) { + if (response.data.status == 0) { // 服务端成功处理 + let commentList = response.data.data.commentList; + _this.commentList = commentList; + } else { + alert("获取评论评论失败，具体信息：" + response.data.message); + } + }) + .catch(function(error) { + console.log(error); + }); + + axios.get("http://localhost:8901/api/Article/index/articleId/" + _this.commentInfo.article_id) + .then(function(response) { + if (response.data.status == 0) { + let list = response.data.data.articleData; + _this.articleList = list; + } else { + alert("获取导航文章失败，具体信息：" + response.data.message); + } + }) + .catch(function(error) { + console.log(error); + }); + + }, + computed: { + countComment: function() { + return this.commentList.length; + } + }, + filters: { + format: function(date) { + var time = new Date(date * 1000); + var y = time.getFullYear(); + var m = time.getMonth() + 1; + var d = time.getDate(); + var h = time.getHours(); + var mm = time.getMinutes(); + var s = time.getSeconds(); + return y + '-' + m + '-' + d + ' ' + h + ':' + mm + ':' + s; + } + }, + methods: { + leaveMassage: function() { + let params = new URLSearchParams; + let _this = this; + params.append("comment_content", this.commentInfo.comment_content); + params.append("email", this.commentInfo.email); + params.append("nickname", this.commentInfo.nickname); + params.append("article_id", this.commentInfo.article_id); + axios.post("http://localhost:8901/api/comment/add/", params) + .then(function(response) { + if (response.data.status == 0) { + _this.commentList.unshift(response.data.data.comment); + _this.commentInfo.comment_content = ''; + _this.commentInfo.email = ''; + _this.commentInfo.nickname = ''; + } + }) + .catch(function(error) { + console.log(error); + }) + + } + }, + template: `
+
+
+
+

{{articleList.article_title}}

+
+
{{countComment}}人评论 / 发布时间：{{articleList.add_time | format}} +
+
+
+ +
+
+ +
+
+
+ + + + +
+ + +

全部评论

+ +
+
+ +
+
+
+
{{item.nickname}}
+
{{item.add_time | format}}
+
+
{{item.comment_content}}
+
+ +
回复
+
+ +
+ +
+ +
+
+ +
+
个人微信号
+
+ +

关注作者获取更多模板信息，定时发布干货文章

+
+ +
+
+
+
+
` +}) let app = new Vue({ el: "#app", data: { - category_id: 1 + categoryId: 1 } }); diff --git "a/\345\272\204\346\230\255\345\261\261/vue \347\273\203\344\271\240 6.7 6.9 6.15 6.18/blog.7z" "b/\345\272\204\346\230\255\345\261\261/vue \347\273\203\344\271\240 6.7 6.9 6.15 6.18/blog.7z" index f8eaa4ea5dd90be7dbf4574f0063d6189ca258b7..aa7ab9539cfa43723626b098723f6a5af989052d 100644 Binary files "a/\345\272\204\346\230\255\345\261\261/vue \347\273\203\344\271\240 6.7 6.9 6.15 6.18/blog.7z" and "b/\345\272\204\346\230\255\345\261\261/vue \347\273\203\344\271\240 6.7 6.9 6.15 6.18/blog.7z" differ