From 56a4b88b16b5f86a2a697018a3e2546d3abf73e3 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 14 Jan 2022 02:04:24 +0800
Subject: [PATCH] 界面二次优化
---
src/components/layouts/main2-show.vue | 20
src/components/layouts/musicPanal.vue | 83 ++
.gitignore | 63 +
vue.config.js | 11
src/assets/md.css | 422 +++++++++++++
src/components/layouts/box3-archive.vue | 21
src/assets/es.md | 482 +++++++++++++++
src/components/layouts/tagInfo.vue | 71 ++
src/config/router.config.js | 23
src/components/layouts/main3-show.vue | 172 +++++
src/components/layouts/mdDetail.vue | 157 ++++
src/components/layouts/tag-header.vue | 84 +-
src/router/router.js | 2
src/components/layouts/box5-article.vue | 2
src/components/layouts/box2-class.vue | 24
src/components/layouts/music.vue | 63 +
src/components/layouts/main1-show.vue | 11
/dev/null | 3
src/components/layouts/box1-info.vue | 23
src/components/layouts/main.vue | 10
src/components/layouts/tag-time.vue | 67 ++
src/main.js | 34
package.json | 2
src/components/layouts/module.vue | 29
src/App.vue | 1
src/components/layouts/box4-minibox.vue | 31
26 files changed, 1,792 insertions(+), 119 deletions(-)
diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..a831a48
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1,63 @@
+/node_modules/*
+/node_modules
+/dist/*
+/dist
+/*.iml
+/*/*.iml
+/*/*/*.iml
+/.idea/
+/doc/db/jeecgcloud_mysql5.7.sql
+/nf-common/nf-common-cloud/nf-common-cloud.iml
+/nf-auth/nf-auth-shiro/src/main/resources/rebel.xml
+/nf-cloud-gateway/src/main/resources/rebel.xml
+/nf-cloud-monitor/src/main/resources/rebel.xml
+/nf-cloud-system/nf-cloud-system-api/src/main/java/rebel.xml
+/nf-cloud-system/nf-cloud-system-biz/src/main/resources/rebel.xml
+/nf-common/nf-common-cloud/src/main/java/rebel.xml
+/nf-common/nf-common-core/src/main/resources/rebel.xml
+/nf-common/nf-constant/src/main/resources/rebel.xml
+/nf-common/nf-model/src/main/resources/rebel.xml
+/nf-cloud-system/nf-cloud-system-biz/target/
+/*/*/target/
+/*/target/
+
+
+*/target
+*.iml
+/.idea
+*.class
+target/
+.project
+.settings/
+.classpath
+.factorypath
+*.json
+
+######################
+# Logs
+######################
+*.log
+logs/
+*/logs
+logs/*
+*/logs
+.log
+*.log.[0-9].gz
+######################
+# tomcat
+
+
+################################
+
+test/java/*
+*/test/java/*
+
+test/resources/*
+*/test/resources/*
+
+/nf-common/nf-model/nf-cloud-system/
+/nf-common/nf-model/nf-common/
+
+/mdms-bg-java/nf-common/nf-model/src/main/java/org/jeecg/CodeGenerator.java
+
+/nf-auth/nf-auth-shiro/src/main/java/rebel.xml
diff --git a/package.json b/package.json
index deb32e9..ce68bb1 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,6 @@
"axios": "^0.24.0",
"babel-plugin-import": "^1.13.3",
"core-js": "^2.6.5",
- "element-ui": "^2.15.6",
- "jquery": "^3.6.0",
"jsdom": "^18.1.1",
"location": "0.0.1",
"navigator": "^1.0.1",
diff --git a/src/App.vue b/src/App.vue
index e6b625b..733dab0 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -20,6 +20,7 @@
<style>
+ @import url("https://www.layuicdn.com/layui/css/layui.css");
.app {
overflow: auto;
border: none;
diff --git a/src/assets/es.md b/src/assets/es.md
new file mode 100644
index 0000000..13ca26a
--- /dev/null
+++ b/src/assets/es.md
@@ -0,0 +1,482 @@
+
+# ElasticSearch 聚合(aggregations)
+
+| Syntax | Description |
+| ----------- | ----------- |
+| Header | Title |
+| Paragraph | Text |
+
+
+ | Syntax | Description |
+ | ----------- | ----------- |
+ | Header | Title |
+ | Paragraph | Text |
+
+### 特点
+
++ 聚合和搜索是使用同样的数据结构，因此聚合和搜索可以是一起执行的.
+ 这表示我们可以在一次json请求裡，同时对相同的数据进行 搜索/过滤 + 分析
++ 桶 和 度量
+ - 桶（bucket）
+
+ 1.是按照某种方式对数据进行分组，但不包括计算，因此bucket中往往会嵌套另一种聚合：metrics aggregations即度量
+
+ 2.桶可以被嵌套在其他桶里面
+
+ 3.比较常用的桶划分方式有
+ - Terms Aggregation：根据词条内容分组，词条内容完全匹配的为一组
+ - filter：一个用来过滤的桶 和用在主查询query的 "过滤filter" 的用法是一模一样的，都是过滤
+ - top_hits桶 : 在某个桶底下找出这个桶的前几笔hits，返回的hits格式和主查询query返回的hits格式一模一样
+ - Date Histogram Aggregation：根据日期阶梯分组，例如给定阶梯为周，会自动每周分为一组
+ - Histogram Aggregation：根据数值阶梯分组，与日期类似
+ - Range Aggregation：数值和日期的范围分组，指定开始和结束，然后按段分组
+
+ - 度量（metrics）
+
+ 分组完成以后，我们一般会对组中的数据进行聚合运算，例如求平均值、最大、最小、求和等，这些在ES中称为度量
+
+ 常用的度量集合方式有
+ - Avg Aggregation：求平均值
+ - Max Aggregation：求最大值
+ - Min Aggregation：求最小值
+ - Percentiles Aggregation：求百分比
+ - Stats Aggregation：同时返回avg、max、min、sum、count等
+ - Sum Aggregation：求和
+ - Top hits Aggregation：求前几
+ - Value Count Aggregation：求总数
+
+### aggs 聚合的模板
+
++ 当query和aggs一起存在时，会先执行query的主查询，主查询query执行完后会搜出一批结果，而这些结果才会被拿去aggs拿去做聚合
+ 另外要注意aggs后面会先接一层自定义的这个聚合的名字，然后才是接上要使用的聚合桶
+ 如果有些情况不在意查询结果是什麽，而只在意aggs的结果，可以把size设为0，如此可以让返回的hits结果集是0，加快返回的速度
+
++ 一个aggs裡可以有很多个聚合，每个聚合彼此间都是独立的，因此可以一个聚合拿来统计数量、一个聚合拿来分析数据、一个聚合拿来计算标准差...，让一次搜索就可以把想要做的事情一次做完
+
++ aggs可以嵌套在其他的aggs裡面，而嵌套的桶能作用的文档集范围，是外层的桶所输出的结果集
+
++ 模板
+```
+GET /test/doc/_search
+{
+ "query": { ... },
+ "size": 0,
+ "aggs": {
+ "custom_name1": { //aggs后面接著的是一个自定义的name
+ "桶": { ... } //再来才是接桶
+ },
+ "custom_name2": { //一个aggs裡可以有很多聚合
+ "桶": { ... }
+ },
+ "custom_name3": {
+ "桶": {
+ .....
+ },
+ "aggs": { //aggs可以嵌套在别的aggs裡面
+ "in_name": { //记得使用aggs需要先自定义一个name
+ "桶": { ... } //in_name的桶作用的文档是custom_name3的桶的结果
+ }
+ }
+ }
+ }
+```
++ 结果模板
+```
+ {
+ "hits": {
+ "total": 8,
+ "max_score": 0,
+ "hits": [] //因为size设为0，所以没有查询结果返回
+ },
+ "aggregations": {
+ "custom_name1": {
+ ...
+ },
+ "custom_name2": {
+ ...
+ },
+ "custom_name3": {
+ ... ,
+ "in_name": {
+ ....
+ }
+ }
+ }
+ }
+```
+
+### 数据准备
+```
+PUT /test
+{
+ "mappings": {
+ "dynamic": "strict",
+ "properties": {
+ "color": {
+ "type": "keyword"
+ },
+ "price": {
+ "type": "long"
+ }
+ }
+ }
+}
+
+POST /test/_doc/1
+{"color":"red","price":100}
+
+POST /test/_doc/2
+{"color":"green","price":500}
+
+POST /test/_doc/3
+{"color":["red","blue"],"price":1000}
+```
+
+### 示例
+- trems桶
+
+ - 找出共几组颜色和组内颜色个数
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_terms": {
+ "terms": {
+ "field": "color"
+ }
+ }
+ }
+}
+```
+聚合结果
+```
+{
+ "aggregations" : {
+ "my_terms" : {
+ "doc_count_error_upper_bound" : 0,
+ "sum_other_doc_count" : 0,
+ "buckets" : [
+ {
+ "key" : "red",
+ "doc_count" : 2
+ },
+ {
+ "key" : "blue",
+ "doc_count" : 1
+ },
+ {
+ "key" : "green",
+ "doc_count" : 1
+ }
+ ]
+ }
+ }
+}
+```
+ - 在示例1基础上,对分组的颜色求价格平均和最小值
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_terms": {
+ "terms": {
+ "field": "color"
+ },
+ "aggs": {
+ "my_avg_price": {
+ "avg": {
+ "field": "price"
+ }
+ },
+ "my_min_price": {
+ "min": {
+ "field": "price"
+ }
+ }
+ }
+ }
+ }
+}
+```
+聚合结果
+```
+ {
+ "aggregations" : {
+ "my_terms" : {
+ "doc_count_error_upper_bound" : 0,
+ "sum_other_doc_count" : 0,
+ "buckets" : [
+ {
+ "key" : "red",
+ "doc_count" : 2,
+ "my_avg_price" : {
+ "value" : 550.0
+ },
+ "my_min_price" : {
+ "value" : 100.0
+ }
+ },
+ {
+ "key" : "blue",
+ "doc_count" : 1,
+ "my_avg_price" : {
+ "value" : 1000.0
+ },
+ "my_min_price" : {
+ "value" : 1000.0
+ }
+ },
+ {
+ "key" : "green",
+ "doc_count" : 1,
+ "my_avg_price" : {
+ "value" : 500.0
+ },
+ "my_min_price" : {
+ "value" : 500.0
+ }
+ }
+ ]
+ }
+ }
+```
+
+- filter桶
+ 过滤只查看红颜色的分组情况
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_fliter": {
+ "filter": {
+ "bool": {
+ "must": {
+ "terms": {
+ "color": [
+ "red"
+ ]
+ }
+ }
+ }
+ }
+ }
+ }
+}
+```
+聚合结果
+```
+{
+ "aggregations" : {
+ "my_fliter" : {
+ "doc_count" : 2
+ }
+ }
+}
+```
+
+ filter桶和terms桶叠加嵌套使用
+ 过滤含有红颜色的文档,再对其中包含的颜色进行分组
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_fliter": {
+ "filter": {
+ "bool": {
+ "must": {
+ "terms": {
+ "color": [
+ "red"
+ ]
+ }
+ }
+ }
+ },
+ "aggs": {
+ "my_trems": {
+ "terms": {
+ "field": "color"
+ }
+ }
+ }
+ }
+ }
+}
+```
+聚合结果
+ - 因为terms桶嵌套在filter桶内，所以query查询出来的文档们会先经过filter桶，如果符合filter桶，才会进入到terms桶内
+ - 此处通过filter桶的文档只有两笔，分别是{"color": "red"}以及{"color": ["red", "blue"]}，所以terms桶只会对这两笔文档做分组
+ - 这也是为什麽terms桶裡没有出现color为green的分组，因为这个文档在filter桶就被挡下来了
+ - 需注意的是聚合中取的是query之后文档内容,如果query中限制只查询green的文档,那么聚合将无对应内容展示
+```
+{
+ "aggregations" : {
+ "my_fliter" : {
+ "doc_count" : 2,
+ "my_trems" : {
+ "doc_count_error_upper_bound" : 0,
+ "sum_other_doc_count" : 0,
+ "buckets" : [
+ {
+ "key" : "red",
+ "doc_count" : 2
+ },
+ {
+ "key" : "blue",
+ "doc_count" : 1
+ }
+ ]
+ }
+ }
+ }
+}
+```
+ 当然也可以先进行trems桶嵌套filter桶,意义则是分组后再进行过滤
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_trems": {
+ "terms": {
+ "field": "color"
+ },
+ "aggs": {
+ "my_fliter": {
+ "filter": {
+ "bool": {
+ "must": {
+ "terms": {
+ "color": [
+ "red"
+ ]
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
+```
+聚合结果
+ - 在分组中进行过滤,可以看到green中my_filter中的doc_count结果为0
+ - 而至于为什么bule中含有一条doc_count=1,是因为原文档是{"color":["red","blue"]}
+```
+{
+
+ "aggregations" : {
+ "my_trems" : {
+ "doc_count_error_upper_bound" : 0,
+ "sum_other_doc_count" : 0,
+ "buckets" : [
+ {
+ "key" : "red",
+ "doc_count" : 2,
+ "my_fliter" : {
+ "doc_count" : 2
+ }
+ },
+ {
+ "key" : "blue",
+ "doc_count" : 1,
+ "my_fliter" : {
+ "doc_count" : 1
+ }
+ },
+ {
+ "key" : "green",
+ "doc_count" : 1,
+ "my_fliter" : {
+ "doc_count" : 0
+ }
+ }
+ ]
+ }
+ }
+}
+```
+- top_hits桶
+
+ 在某个桶底下找出这个桶的前几笔hits，返回的hits格式和主查询query返回的hits格式一模一样
+
+ 另外,该桶中不能再嵌套子聚合
+ Aggregator [my_top_hit] of type [top_hits] cannot accept sub-aggregations
+
+ - top_hits桶支持的参数
+
+ - from、size
+ - sort : 设置返回的hits的排序
+
+ 要注意，假设在主查询query裡已经对数据设置了排序sort，此sort并不会对aggs裡面的数据造成影响，也就是说主查询query查找出来的数据会先丢进aggs而非先经过sort，因此就算主查询设置了sort，也不会影响aggs数据裡的排序
+ 因此如果在top_hits桶裡的返回的hits数据想要排序，需要自己在top_hits桶裡设置sort
+ 如果没有设置sort，默认使用主查询query所查出来的_score排序
+ - _source : 设置返回的字段
+
+ 按价格排序,取前两条记录
+```
+GET /test/_search
+{
+ "size": 0,
+ "aggs": {
+ "my_top_hit": {
+ "top_hits": {
+ "size": 2,
+ "sort": ["price"] #默认升序asc
+ #"sort": {"price":"desc"}这种写法也可以
+ }
+ }
+ }
+}
+```
+聚合结果
+```
+{
+ "aggregations" : {
+ "my_top_hit" : {
+ "hits" : {
+ "total" : {
+ "value" : 3,
+ "relation" : "eq"
+ },
+ "max_score" : null,
+ "hits" : [
+ {
+ "_index" : "test",
+ "_type" : "_doc",
+ "_id" : "1",
+ "_score" : null,
+ "_source" : {
+ "color" : "red",
+ "price" : 100
+ },
+ "sort" : [
+ 100
+ ]
+ },
+ {
+ "_index" : "test",
+ "_type" : "_doc",
+ "_id" : "2",
+ "_score" : null,
+ "_source" : {
+ "color" : "green",
+ "price" : 500
+ },
+ "sort" : [
+ 500
+ ]
+ }
+ ]
+ }
+ }
+ }
+}
+```
+
+
\ No newline at end of file
diff --git a/src/assets/md.css b/src/assets/md.css
new file mode 100644
index 0000000..20a713b
--- /dev/null
+++ b/src/assets/md.css
@@ -0,0 +1,422 @@
+body{
+ margin: 0 auto;
+ font-family: "Microsoft YaHei", arial,sans-serif;
+ color: #444444;
+ line-height: 1;
+ padding: 30px;
+}
+@media screen and (min-width: 768px) {
+ body {
+ width: 748px;
+ margin: 10px auto;
+ }
+}
+h1, h2, h3, h4 {
+ color: #111111;
+ font-weight: 400;
+ margin-top: 1em;
+}
+
+h1, h2, h3, h4, h5 {
+ font-family: Georgia, Palatino, serif;
+}
+h1, h2, h3, h4, h5, p , dl{
+ margin-bottom: 16px;
+ padding: 0;
+}
+h1 {
+ font-size: 48px;
+ line-height: 54px;
+}
+h2 {
+ font-size: 36px;
+ line-height: 42px;
+}
+h1, h2 {
+ border-bottom: 1px solid #EFEAEA;
+ padding-bottom: 10px;
+}
+h3 {
+ font-size: 24px;
+ line-height: 30px;
+}
+h4 {
+ font-size: 21px;
+ line-height: 26px;
+}
+h5 {
+ font-size: 18px;
+ list-style: 23px;
+}
+a {
+ color: #0099ff;
+ margin: 0;
+ padding: 0;
+ vertical-align: baseline;
+}
+a:hover {
+ text-decoration: none;
+ color: #ff6600;
+}
+a:visited {
+ /*color: purple;*/
+}
+ul, ol {
+ padding: 0;
+ padding-left: 24px;
+ margin: 0;
+}
+li {
+ line-height: 24px;
+}
+p, ul, ol {
+ font-size: 16px;
+ line-height: 24px;
+}
+
+ol ol, ul ol {
+ list-style-type: lower-roman;
+}
+
+/*pre {
+ padding: 0px 24px;
+ max-width: 800px;
+ white-space: pre-wrap;
+}
+code {
+ font-family: Consolas, Monaco, Andale Mono, monospace;
+ line-height: 1.5;
+ font-size: 13px;
+}*/
+
+code, pre {
+ border-radius: 3px;
+ background-color:#f7f7f7;
+ color: inherit;
+}
+
+code {
+ font-family: Consolas, Monaco, Andale Mono, monospace;
+ margin: 0 2px;
+}
+
+pre {
+ line-height: 1.7em;
+ overflow: auto;
+ padding: 6px 10px;
+ border-left: 5px solid #6CE26C;
+}
+
+pre > code {
+ border: 0;
+ display: inline;
+ max-width: initial;
+ padding: 0;
+ margin: 0;
+ overflow: initial;
+ line-height: inherit;
+ font-size: .85em;
+ white-space: pre;
+ background: 0 0;
+
+}
+
+code {
+ color: #666555;
+}
+
+
+/** markdown preview plus 对于代码块的处理有些问题, 所以使用统一的颜色 */
+/*code .keyword {
+ color: #8959a8;
+}
+
+code .number {
+ color: #f5871f;
+}
+
+code .comment {
+ color: #998
+}*/
+
+aside {
+ display: block;
+ float: right;
+ width: 390px;
+}
+blockquote {
+ border-left:.5em solid #eee;
+ padding: 0 0 0 2em;
+ margin-left:0;
+}
+blockquote cite {
+ font-size:14px;
+ line-height:20px;
+ color:#bfbfbf;
+}
+blockquote cite:before {
+ content: '\2014 \00A0';
+}
+
+blockquote p {
+ color: #666;
+}
+hr {
+ text-align: left;
+ color: #999;
+ height: 2px;
+ padding: 0;
+ margin: 16px 0;
+ background-color: #e7e7e7;
+ border: 0 none;
+}
+
+dl {
+ padding: 0;
+}
+
+dl dt {
+ padding: 10px 0;
+ margin-top: 16px;
+ font-size: 1em;
+ font-style: italic;
+ font-weight: bold;
+}
+
+dl dd {
+ padding: 0 16px;
+ margin-bottom: 16px;
+}
+
+dd {
+ margin-left: 0;
+}
+
+/* Code below this line is copyright Twitter Inc. */
+
+button,
+input,
+select,
+textarea {
+ font-size: 100%;
+ margin: 0;
+ vertical-align: baseline;
+ *vertical-align: middle;
+}
+button, input {
+ line-height: normal;
+ *overflow: visible;
+}
+button::-moz-focus-inner, input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+button,
+input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer;
+ -webkit-appearance: button;
+}
+input[type=checkbox], input[type=radio] {
+ cursor: pointer;
+}
+/* override default chrome & firefox settings */
+input:not([type="image"]), textarea {
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+
+input[type="search"] {
+ -webkit-appearance: textfield;
+ -webkit-box-sizing: content-box;
+ -moz-box-sizing: content-box;
+ box-sizing: content-box;
+}
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+label,
+input,
+select,
+textarea {
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: normal;
+ margin-bottom: 18px;
+}
+input[type=checkbox], input[type=radio] {
+ cursor: pointer;
+ margin-bottom: 0;
+}
+input[type=text],
+input[type=password],
+textarea,
+select {
+ display: inline-block;
+ width: 210px;
+ padding: 4px;
+ font-size: 13px;
+ font-weight: normal;
+ line-height: 18px;
+ height: 18px;
+ color: #808080;
+ border: 1px solid #ccc;
+ -webkit-border-radius: 3px;
+ -moz-border-radius: 3px;
+ border-radius: 3px;
+}
+select, input[type=file] {
+ height: 27px;
+ line-height: 27px;
+}
+textarea {
+ height: auto;
+}
+/* grey out placeholders */
+:-moz-placeholder {
+ color: #bfbfbf;
+}
+::-webkit-input-placeholder {
+ color: #bfbfbf;
+}
+input[type=text],
+input[type=password],
+select,
+textarea {
+ -webkit-transition: border linear 0.2s, box-shadow linear 0.2s;
+ -moz-transition: border linear 0.2s, box-shadow linear 0.2s;
+ transition: border linear 0.2s, box-shadow linear 0.2s;
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
+}
+input[type=text]:focus, input[type=password]:focus, textarea:focus {
+ outline: none;
+ border-color: rgba(82, 168, 236, 0.8);
+ -webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+ -moz-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+ box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1), 0 0 8px rgba(82, 168, 236, 0.6);
+}
+/* buttons */
+button {
+ display: inline-block;
+ padding: 4px 14px;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+ font-size: 13px;
+ line-height: 18px;
+ -webkit-border-radius: 4px;
+ -moz-border-radius: 4px;
+ border-radius: 4px;
+ -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05);
+ background-color: #0064cd;
+ background-repeat: repeat-x;
+ background-image: -khtml-gradient(linear, left top, left bottom, from(#049cdb), to(#0064cd));
+ background-image: -moz-linear-gradient(top, #049cdb, #0064cd);
+ background-image: -ms-linear-gradient(top, #049cdb, #0064cd);
+ background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #049cdb), color-stop(100%, #0064cd));
+ background-image: -webkit-linear-gradient(top, #049cdb, #0064cd);
+ background-image: -o-linear-gradient(top, #049cdb, #0064cd);
+ background-image: linear-gradient(top, #049cdb, #0064cd);
+ color: #fff;
+ text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.25);
+ border: 1px solid #004b9a;
+ border-bottom-color: #003f81;
+ -webkit-transition: 0.1s linear all;
+ -moz-transition: 0.1s linear all;
+ transition: 0.1s linear all;
+ border-color: #0064cd #0064cd #003f81;
+ border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
+}
+button:hover {
+ color: #fff;
+ background-position: 0 -15px;
+ text-decoration: none;
+}
+button:active {
+ -webkit-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+ -moz-box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+ box-shadow: inset 0 3px 7px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05);
+}
+button::-moz-focus-inner {
+ padding: 0;
+ border: 0;
+}
+table {
+ *border-collapse: collapse; /* IE7 and lower */
+ border-spacing: 0;
+ width: 100%;
+}
+table {
+ border: solid #ccc 1px;
+ -moz-border-radius: 6px;
+ -webkit-border-radius: 6px;
+ border-radius: 6px;
+ /*-webkit-box-shadow: 0 1px 1px #ccc;
+ -moz-box-shadow: 0 1px 1px #ccc;
+ box-shadow: 0 1px 1px #ccc; */
+}
+table tr:hover {
+ background: #fbf8e9;
+ -o-transition: all 0.1s ease-in-out;
+ -webkit-transition: all 0.1s ease-in-out;
+ -moz-transition: all 0.1s ease-in-out;
+ -ms-transition: all 0.1s ease-in-out;
+ transition: all 0.1s ease-in-out;
+}
+table td, .table th {
+ border-left: 1px solid #ccc;
+ border-top: 1px solid #ccc;
+ padding: 10px;
+ text-align: left;
+}
+
+table th {
+ background-color: #dce9f9;
+ background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
+ background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
+ background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
+ background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
+ background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
+ background-image: linear-gradient(top, #ebf3fc, #dce9f9);
+ /*-webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
+ -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
+ box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;*/
+ border-top: none;
+ text-shadow: 0 1px 0 rgba(255,255,255,.5);
+ padding: 5px;
+}
+
+table td:first-child, table th:first-child {
+ border-left: none;
+}
+
+table th:first-child {
+ -moz-border-radius: 6px 0 0 0;
+ -webkit-border-radius: 6px 0 0 0;
+ border-radius: 6px 0 0 0;
+}
+table th:last-child {
+ -moz-border-radius: 0 6px 0 0;
+ -webkit-border-radius: 0 6px 0 0;
+ border-radius: 0 6px 0 0;
+}
+table th:only-child{
+ -moz-border-radius: 6px 6px 0 0;
+ -webkit-border-radius: 6px 6px 0 0;
+ border-radius: 6px 6px 0 0;
+}
+table tr:last-child td:first-child {
+ -moz-border-radius: 0 0 0 6px;
+ -webkit-border-radius: 0 0 0 6px;
+ border-radius: 0 0 0 6px;
+}
+table tr:last-child td:last-child {
+ -moz-border-radius: 0 0 6px 0;
+ -webkit-border-radius: 0 0 6px 0;
+ border-radius: 0 0 6px 0;
+}
diff --git "a/src/components/HelloWorld - \345\211\257\346\234\254.vue" "b/src/components/HelloWorld - \345\211\257\346\234\254.vue"
deleted file mode 100644
index 7fd2dc5..0000000
--- "a/src/components/HelloWorld - \345\211\257\346\234\254.vue"
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br>
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
- <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
- <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
- <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
- <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
- <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
- <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
- <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
- </ul>
- </div>
-</template>
-
-<script>
-export default {
- name: 'HelloWorld',
- props: {
- msg: String
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/components/HelloWorld.vue b/src/components/HelloWorld.vue
deleted file mode 100644
index 7fd2dc5..0000000
--- a/src/components/HelloWorld.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<template>
- <div class="hello">
- <h1>{{ msg }}</h1>
- <p>
- For a guide and recipes on how to configure / customize this project,<br>
- check out the
- <a href="https://cli.vuejs.org" target="_blank" rel="noopener">vue-cli documentation</a>.
- </p>
- <h3>Installed CLI Plugins</h3>
- <ul>
- <li><a href="https://github.com/vuejs/vue-cli/tree/dev/packages/%40vue/cli-plugin-babel" target="_blank" rel="noopener">babel</a></li>
- </ul>
- <h3>Essential Links</h3>
- <ul>
- <li><a href="https://vuejs.org" target="_blank" rel="noopener">Core Docs</a></li>
- <li><a href="https://forum.vuejs.org" target="_blank" rel="noopener">Forum</a></li>
- <li><a href="https://chat.vuejs.org" target="_blank" rel="noopener">Community Chat</a></li>
- <li><a href="https://twitter.com/vuejs" target="_blank" rel="noopener">Twitter</a></li>
- <li><a href="https://news.vuejs.org" target="_blank" rel="noopener">News</a></li>
- </ul>
- <h3>Ecosystem</h3>
- <ul>
- <li><a href="https://router.vuejs.org" target="_blank" rel="noopener">vue-router</a></li>
- <li><a href="https://vuex.vuejs.org" target="_blank" rel="noopener">vuex</a></li>
- <li><a href="https://github.com/vuejs/vue-devtools#vue-devtools" target="_blank" rel="noopener">vue-devtools</a></li>
- <li><a href="https://vue-loader.vuejs.org" target="_blank" rel="noopener">vue-loader</a></li>
- <li><a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">awesome-vue</a></li>
- </ul>
- </div>
-</template>
-
-<script>
-export default {
- name: 'HelloWorld',
- props: {
- msg: String
- }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped>
-h3 {
- margin: 40px 0 0;
-}
-ul {
- list-style-type: none;
- padding: 0;
-}
-li {
- display: inline-block;
- margin: 0 10px;
-}
-a {
- color: #42b983;
-}
-</style>
diff --git a/src/components/demo.vue b/src/components/demo.vue
deleted file mode 100644
index 7416f27..0000000
--- a/src/components/demo.vue
+++ /dev/null
@@ -1,48 +0,0 @@
-<!-- 一个上传事例文件 -->
-<template>
- <div>
- <el-button @click="upload">上传</el-button>
- </div>
-</template>
-
-<script>
- import Bus from '@/js/bus';
- import $ from 'jquery'
-
- export default {
- components: {},
- data() {
- return {}
- },
- mounted() {
- // 文件选择后的回调
- Bus.$on('fileAdded', () => {
- console.log('文件已选择')
- });
-
- // 文件上传成功的回调
- Bus.$on('fileSuccess', () => {
- console.log('文件上传成功')
- });
- },
- computed: {},
- methods: {
- upload() {
- // 打开文件选择框
- Bus.$emit('openUploader', {
- id: Math.ceil(Math.random()*10000) ,// 传入的参数
-
-
- })
- }
- },
- destroyed() {
- Bus.$off('fileAdded');
- Bus.$off('fileSuccess');
- },
- }
-</script>
-
-<style scoped lang="scss">
-
-</style>
diff --git a/src/components/globalUploader.vue b/src/components/globalUploader.vue
deleted file mode 100644
index 50d6d3b..0000000
--- a/src/components/globalUploader.vue
+++ /dev/null
@@ -1,534 +0,0 @@
-<template>
- <div id="global-uploader">
- <!-- 上传 -->
- <uploader ref="uploaderId" :options="options" :autoStart="false" @file-added="onFileAdded"
- @file-success="onFileSuccess" @file-progress="onFileProgress" @file-error="onFileError"
- @file-complete="onFileComplete" class="uploader-app">
- <uploader-unsupport></uploader-unsupport>
-
- <uploader-btn id="global-uploader-btn" :directory="false" :attrs="attrs" ref="uploadBtn">选择文件</uploader-btn>
-
- <uploader-list v-show="panelShow">
- <div class="file-panel" slot-scope="props" :class="{'collapse': collapse}">
- <div class="file-title">
- <h2>文件列表</h2>
- <div class="operate">
- <el-button @click="fileListShow" type="text" :title="collapse ? '展开':'折叠' ">
- <i class="iconfont" :class="collapse ? 'inuc-fullscreen': 'inuc-minus-round'"></i>
- </el-button>
- <el-button @click="close" type="text" title="关闭">
- <i class="iconfont icon-close"></i>
- </el-button>
- </div>
- </div>
-
- <ul class="file-list">
- <li v-for="file in props.fileList" :key="file.id">
- <uploader-file :class="'file_' + file.id" ref="files" :file="file" :list="true">
- </uploader-file>
- </li>
- <div class="no-file" v-if="!props.fileList.length"><i class="iconfont icon-empty-file"></i>
- 暂无待上传文件</div>
- </ul>
- </div>
- </uploader-list>
-
- </uploader>
-
- </div>
-</template>
-
-<script>
- /**
- * 全局上传插件
- * 调用方法：Bus.$emit('openUploader', {}) 打开文件选择框，参数为需要传递的额外参数
- * 监听函数：Bus.$on('fileAdded', fn); 文件选择后的回调
- * Bus.$on('fileSuccess', fn); 文件上传成功的回调
- */
-
- import {
- ACCEPT_CONFIG
- } from '@/js/config';
- import Bus from '@/js/bus';
- import SparkMD5 from 'spark-md5';
- import $ from 'jquery';
- import Element from 'element-ui';
-
- // 这两个是我自己项目中用的，请忽略
- // import {Ticket} from '@/assets/js/utils';
- // import api from '@/api';
-
- export default {
- data() {
- return {
- options: {
- //target: "http://192.168.21.184:8089/aa",
- chunkSize: 6 * 1024 * 1024,
- fileParameterName: 'upFile',
- forceChunkSize: true,
- maxChunkRetries: 3,
- testChunks: true, //是否开启服务器分片校验
- // 服务器分片校验函数，秒传及断点续传基础
- checkChunkUploadedByResponse: function(chunk, message) {
- let resp = JSON.parse(message);
- if (!resp.success) {
- console.error("校验分片异常")
- return false;
- }
-
- //已经秒传
- if (resp.result.chunkIndex != null && resp.result.chunkIndex[chunk.offset] > 0) {
- console.log(chunk.offset + 1 + "已经秒传..")
- return true;
- }
- console.log(chunk.offset + 1 + "正常上传..")
-
- return false;
- },
- headers: {
- // Authorization: Ticket.get() && "Bearer " + Ticket.get().access_token
- },
- query() {
- //aa: "bbb";
- }
- },
- attrs: {
- accept: ACCEPT_CONFIG.getAll()
- },
- panelShow: true, //选择文件后，展示上传panel
- collapse: true,
- }
- },
- mounted() {
- Bus.$on('openUploader', query => {
- this.params = query || {};
-
- if (this.$refs.uploadBtn) {
- $('#global-uploader-btn').click();
- }
- });
- },
- computed: {
- //Uploader实例
- uploader() {
- return this.$refs.uploaderId.uploader;
- }
- },
- methods: {
- onFileAdded(file) {
-
- this.panelShow = true;
- this.computeMD5(file);
-
- Bus.$emit('fileAdded');
- },
-
- onFileComplete(rootFile) {
- console.log(11111)
- console.log(rootFile)
- },
- onFileProgress(rootFile, file, chunk) {
- console.log(`上传中 ${file.name}，chunk：${chunk.startByte / 1024 / 1024} ~ ${chunk.endByte / 1024 / 1024}`)
- },
- onFileSuccess(rootFile, file, response, chunk) {
- console.log("上传完成回调", response);
- let res;
- try {
- if (typeof response =="string") {
- res = JSON.parse(response);
- } else {
- res = response;
- }
- // 服务器自定义的错误（即虽返回200，但是是错误的情况），这种错误是Uploader无法拦截的
- if (!res.success) {
- this.$message({
- message: res.errmsg,
- type: 'error'
- });
- // 文件状态设为“失败”
- this.statusSet(file.id, 'failed');
- return
- }
-
- } catch (ex) {
- console.log(ex)
- }
-
- var $this = this;
-
-
- // 文件状态设为“合并中”
- $this.statusSet(file.id, 'merging');
-
- //请求合并
- $this.$axios.get('http://192.168.21.184:8001/commonFileUpload/doMerge?mainMD5=' + file.uniqueIdentifier +
- "&mediaId=" + localStorage.getItem("mediaId"))
- .then(function(response) {
-
- if (response.data.success) {
- // 文件合并成功
- Bus.$emit('fileSuccess');
- $this.statusRemove(file.id);
-
- console.log('文件合并成功');
- console.log('上传成功');
- console.log("文件上传结束" + new Date().getTime())
- } else {
- //请求合并异常
- $this.statusRemove(file.id);
- $this.statusSet(file.id, 'mergingExcetion');
- }
-
- })
- .catch(function(error) {
- console.error(error);
- $this.$message({
- message: "合并异常",
- type: 'error'
- });
- $this.statusRemove(file.id);
- $this.statusSet(file.id, 'mergingExcetion');
- });
-
-
- },
-
- onFileError(rootFile, file, response, chunk) {
- this.$message({
- message: response,
- type: 'error'
- })
- },
-
- /**
- * 计算md5，实现断点续传及秒传
- * @param file
- */
- computeMD5(file) {
- let fileReader = new FileReader();
- let time = new Date().getTime();
- console.log("文件上传开始" + new Date().getTime())
- let blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;
-
- let currentChunk = 0;
- const chunkSize = 6 * 1024 * 1024; //md5计算时切片大小
- let chunks = Math.ceil(file.size / chunkSize);
-
- let spark = new SparkMD5.ArrayBuffer();
-
- // 文件状态设为"计算MD5"
- this.statusSet(file.id, 'md5');
- file.pause();
-
- loadNext();
-
- fileReader.onload = (e => {
- spark.append(e.target.result);
-
- if (currentChunk < chunks) {
- currentChunk++;
- loadNext();
-
- // 实时展示MD5的计算进度
- this.$nextTick(() => {
- $(`.myStatus_${file.id}`).text('校验MD5 ' + ((currentChunk / chunks) * 100)
- .toFixed(0) + '%')
- })
- } else {
- let md5 = spark.end();
- this.computeMD5Success(md5, file);
- console.log(
- `MD5计算完毕：${file.name} \nMD5：${md5} \n分片：${chunks} 大小:${file.size} 用时：${new Date().getTime() - time} ms`
- );
- }
- });
-
- fileReader.onerror = function() {
- this.error(`文件${file.name}读取出错，请检查该文件`)
- file.cancel();
- };
-
- function loadNext() {
- let start = currentChunk * chunkSize;
- let end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize;
-
- fileReader.readAsArrayBuffer(blobSlice.call(file.file, start, end));
- }
- },
-
- computeMD5Success(md5, file) {
- //1.初始化分片上传请求,获取分片参数
-
- //计算内网ip是否联通,选择上传接口url,如果是
-
- let $this = this;
- //this.$axios.post('http://192.168.21.184:8001/commonFileUpload/createShardPost', {
- this.$axios.post('http://192.168.21.184:8001/sfcMedia/addMedia', {
- storeType: "0",
- title: file.name,
- typeId: "4",
- dirId: "7",
- uploadDto: {
- internalHostList:["192.168.40.149:9000"],
- mainMD5: md5,
- size: file.size,
- fileName: file.name,
- ext: file.name.substring(file.name.lastIndexOf(".") + 1, file.name.length), //文件名没有点号会异常
- type: file.type
- }
- }, {
- headers: {
- 'Sys-Access-Token': "eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJ0b2tlbktleU5hbWUiOiJTeXMtQWNjZXNzLVRva2VuIiwidXNlck5hbWUiOiJhZG1pbiIsImV4cCI6MTY0MTM3OTQ0NX0.FQXRgkLXlmgpLDcP2cbZZBNwCEDZJoeoHen6OZz5Wbk",
- }
- }).then(function(response) {
- console.log("文件上传请求初始化");
- console.log(response);
- if (response.data.success) {
- let uploadOptions = response.data.result;
-
- localStorage.setItem("mediaId",uploadOptions.mediaId)
- let uploadURLArray = uploadOptions.uploadUrlList;
-
-
- console.log("文件上传url", uploadURLArray)
- // 将自定义参数直接加载uploader实例的opts上
- let opts = $this.uploader.opts;
-
- //opts.target = "http://192.168.21.184:8001/commonFileUpload/doUpload"; //上传接口
- opts.target = function(file, chunk, isTest, obj) {
- //定义分片检测url
- if (isTest) {
- return "http://192.168.21.184:8001/commonFileUpload/checkShardStatus"
- }
- let chunkUploadUrl = uploadURLArray[chunk.offset]
- if (chunkUploadUrl == undefined || chunkUploadUrl == null || chunkUploadUrl ==
- "") {
- console.error("获取分片上传链接异常 chunkNumber:{}", (chunk.offset + 1))
- return "";
- }
- return chunkUploadUrl;
- }
-
- //分片请求成功后处理
- opts.processResponse = function(response, cb, file, chunk) {
- console.log("分片" + (chunk.offset + 1) + "上传成功", response)
-
- //通知服务器分片上传状态
- $this.$axios.get(
- 'http://192.168.21.184:8001/commonFileUpload/updateProgress?mainMD5=' +
- file.uniqueIdentifier +
- "&chunk=" + (chunk.offset + 1) +
- "&chunkSize=" + (chunk.loaded)
- )
- .then(function(re) {
- console.log("分片更新上传进度成功", re)
- cb(null, re.data)
- })
- .catch(function(error) {
- console.error("分片更新上传进度异常", error);
- cb(null, error)
- });
-
- }
-
- opts.processParams = function(params, file, chunk, isTest) {
- if (isTest) {
- return params;
- }
- return {};
- }
-
- opts.method = "octet";
- opts.testMethod = "GET"; //调用分片上传验证请求类型
- opts.uploadMethod = "PUT"; //调用分片上传时使用的http方法请求类型
-
- //opts.chunkSize = uploadOptions.chunkSize; //切片大小
- $this.params.mainMD5 = md5; //mainMD5参数
- $this.params.chunkNumber = opts.chunkNumber; //分片索引参数
- Object.assign(opts, {
- query: {
- ...$this.params,
- }
- })
-
- file.uniqueIdentifier = md5;
- file.resume();
- $this.statusRemove(file.id);
- } else {
- //中断上传
- file.cancel();
- }
- })
- .catch(function(error) {
- console.error(error);
- //中断上传
- file.cancel();
- return;
- });
-
-
- },
-
- fileListShow() {
- let $list = $('#global-uploader .file-list');
-
- if ($list.is(':visible')) {
- $list.slideUp();
- this.collapse = true;
- } else {
- $list.slideDown();
- this.collapse = false;
- }
- },
- close() {
- this.uploader.cancel();
-
- this.panelShow = false;
- },
-
- /**
- * 新增的自定义的状态: 'md5'、'transcoding'、'failed'
- * @param id
- * @param status
- */
- statusSet(id, status) {
- let statusMap = {
- md5: {
- text: '校验MD5',
- bgc: '#fff'
- },
- merging: {
- text: '合并中',
- bgc: '#e2eeff'
- },
- mergingExcetion: {
- text: '合并异常',
- bgc: '#e2eeff'
- },
- transcoding: {
- text: '转码中',
- bgc: '#e2eeff'
- },
- failed: {
- text: '上传失败',
- bgc: '#e2eeff'
- }
- }
-
- this.$nextTick(() => {
- $(`<p class="myStatus_${id}"></p>`).appendTo(`.file_${id} .uploader-file-status`).css({
- 'position': 'absolute',
- 'top': '0',
- 'left': '0',
- 'right': '0',
- 'bottom': '0',
- 'zIndex': '1',
- 'backgroundColor': statusMap[status].bgc
- }).text(statusMap[status].text);
- })
- },
- statusRemove(id) {
- this.$nextTick(() => {
- $(`.myStatus_${id}`).remove();
- })
- },
-
- error(msg) {
- this.$notify({
- title: '错误',
- message: msg,
- type: 'error',
- duration: 2000
- })
- }
- },
- watch: {},
- destroyed() {
- Bus.$off('openUploader');
- },
- components: {}
- }
-</script>
-
-<style>
- #global-uploader {
- position: fixed;
- z-index: 20;
- right: 15px;
- bottom: 15px;
- }
-
- #global-uploader .uploader-app {
- width: 1820px;
- }
-
- #global-uploader .file-panel {
- background-color: #fff;
- border: 1px solid #e2e2e2;
- border-radius: 7px 7px 0 0;
- box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
- }
-
- #global-uploader .file-panel .file-title {
- display: flex;
- height: 40px;
- line-height: 40px;
- padding: 0 15px;
- border-bottom: 1px solid #ddd;
- }
-
- #global-uploader .file-panel .file-title .operate {
- flex: 1;
- text-align: right;
- }
-
- #global-uploader .file-panel .file-list {
- position: relative;
- height: 240px;
- overflow-x: hidden;
- overflow-y: auto;
- background-color: #fff;
- }
-
- #global-uploader .file-panel .file-list>li {
- background-color: #fff;
- }
-
- #global-uploader .file-panel.collapse .file-title {
- background-color: #E7ECF2;
- }
-
- #global-uploader .no-file {
- position: absolute;
- top: 50%;
- left: 50%;
- transform: translate(-50%, -50%);
- font-size: 16px;
- }
-
- #global-uploader .uploader-file-icon:before {
- content: "" !important;
- }
-
- #global-uploader .uploader-file-actions>span {
- margin-right: 6px;
- }
-
- #global-uploader .uploader-file-icon[icon=image] {
- background: url(../images/image-icon.png);
- }
-
- #global-uploader .uploader-file-icon[icon=video] {
- background: url(../images/video-icon.png);
- }
-
- #global-uploader .uploader-file-icon[icon=document] {
- background: url(../images/text-icon.png);
- }
-
- /* 隐藏上传按钮 */
- #global-uploader-btn {
- position: absolute;
- clip: rect(0, 0, 0, 0);
- }
-</style>
diff --git a/src/components/layouts/box1-info.vue b/src/components/layouts/box1-info.vue
index 7be6382..a1dbf30 100644
--- a/src/components/layouts/box1-info.vue
+++ b/src/components/layouts/box1-info.vue
@@ -1,15 +1,19 @@
<template>
+ <div class="blog-container ">
<div class="blog-avatar">
- <img :src="avatar">
- <div class="blog-user-message">
- <span>{{name}}</span>
- <span>{{sentence}}</span>
- <span>
- <a-icon type="environment" />{{location}}
- </span>
- </div>
+ <router-link to="/tagInfo">
+ <img :src="avatar"></img>
+ </router-link>
</div>
-
+ <div class="blog-user-message">
+ <span>{{name}}</span>
+ <span>{{sentence}}</span>
+ <span>
+ <a-icon type="environment" />{{location}}
+ </span>
+ </div>
+ </div>
+
</template>
<script>
@@ -29,7 +33,6 @@
</script>
<style lang="less">
-
/*头像部分*/
.blog-avatar {
border-radius: 15px;
diff --git a/src/components/layouts/box1.vue b/src/components/layouts/box1.vue
deleted file mode 100644
index 7be6382..0000000
--- a/src/components/layouts/box1.vue
+++ /dev/null
@@ -1,61 +0,0 @@
-<template>
- <div class="blog-avatar">
- <img :src="avatar">
- <div class="blog-user-message">
- <span>{{name}}</span>
- <span>{{sentence}}</span>
- <span>
- <a-icon type="environment" />{{location}}
- </span>
- </div>
- </div>
-
-</template>
-
-<script>
- export default {
- name: "box",
- data() {
- return {
- avatar: "http://t.inleft.com/share/media_photo/xigong.png",
- name: "inleft",
- sentence: "十里寒塘路,烟花一半醒",
- location: "广州"
- }
- }
- }
-</script>
-
-</script>
-
-<style lang="less">
-
- /*头像部分*/
- .blog-avatar {
- border-radius: 15px;
- background-color: white;
-
- img {
- width: 60px;
- height: auto;
- border-radius: 50%;
- display: block;
- margin: 10px auto 10px;
- padding-top: 10px;
- }
- }
-
- /* 一言 */
- .blog-user-message {
- text-align: center;
- font-size: 15px;
- color: #555;
- padding-top: 10px;
- padding-bottom: 10px;
-
- span {
- display: block;
- padding-bottom: 5px;
- }
- }
-</style>
diff --git a/src/components/layouts/box2-class.vue b/src/components/layouts/box2-class.vue
index faab681..ec5232e 100644
--- a/src/components/layouts/box2-class.vue
+++ b/src/components/layouts/box2-class.vue
@@ -4,26 +4,28 @@
<div class="blog-scroll ">
<div class="blog-log-list">
<div class="blog-log-item" v-for="item in list1">
- <a href="#">
+ <router-link to="/main1">
<span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
+ </router-link>
+
+ <span>{{item.count}}</span>
</div>
</div>
<div class="blog-log-list">
<div class="blog-log-item" v-for="item in list2">
- <a href="#">
+ <router-link to="/box1">
<span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
+ </router-link>
+ <span>{{item.count}}</span>
+
</div>
</div>
<div class="blog-log-list">
<div class="blog-log-item" v-for="item in list2">
- <a href="#">
+ <router-link to="/box1">
<span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
+ </router-link>
+ <span>{{item.count}}</span>
</div>
</div>
</div>
@@ -89,11 +91,11 @@
border-left: none;
}
- a span:first-child {
+ .link span:first-child {
color: #999;
}
- a span:last-child {
+ .link span:last-child {
font-weight: 600;
font-size: 15px;
}
diff --git a/src/components/layouts/box2.vue b/src/components/layouts/box2.vue
deleted file mode 100644
index faab681..0000000
--- a/src/components/layouts/box2.vue
+++ /dev/null
@@ -1,105 +0,0 @@
-<template>
- <div class="blog-container ">
- <span class="blog-pigeonhole">分类</span>
- <div class="blog-scroll ">
- <div class="blog-log-list">
- <div class="blog-log-item" v-for="item in list1">
- <a href="#">
- <span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
- </div>
- </div>
- <div class="blog-log-list">
- <div class="blog-log-item" v-for="item in list2">
- <a href="#">
- <span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
- </div>
- </div>
- <div class="blog-log-list">
- <div class="blog-log-item" v-for="item in list2">
- <a href="#">
- <span>{{item.name}}</span>
- <span>{{item.count}}</span>
- </a>
- </div>
- </div>
- </div>
- </div>
-
-</template>
-
-<script>
- export default {
- data() {
- return {
- list1: [{
- name: "日志",
- count: 10
- }, {
- name: "分类",
- count: 12
- }, {
- name: "标签",
- count: 14
- }],
- list2: [{
- name: "Tag",
- count: 133
- }, {
- name: "专题",
- count: 10
- }, {
- name: "偏好",
- count: 12
- }, {
- name: "星标",
- count: 14
- }]
- }
- }
- }
-</script>
-
-</script>
-
-<style lang="less">
- /*日志部分*/
- .blog-log-list {
- line-height: 1.6;
- padding-left: 3%;
- padding-right: 3%;
-
- flex-wrap: wrap;
- /*让弹性盒元素在必要的时候拆行：*/
- display: -webkit-flex;
- display: flex;
- -webkit-justify-content: center;
- justify-content: center;
- }
-
- .blog-log-item {
- border-left: 2px solid rgba(222, 229, 231, .45);
- width: 23%;
- margin-bottom: 10px;
-
- :first-child {
- border-left: none;
- }
-
- a span:first-child {
- color: #999;
- }
-
- a span:last-child {
- font-weight: 600;
- font-size: 15px;
- }
-
- span {
- display: block;
- }
- }
-</style>
diff --git a/src/components/layouts/box3-archive.vue b/src/components/layouts/box3-archive.vue
index bbf9fe5..e1a3f8f 100644
--- a/src/components/layouts/box3-archive.vue
+++ b/src/components/layouts/box3-archive.vue
@@ -7,10 +7,11 @@
<div class="blog-pigeonhole-list">
<div class="blog-pigeonhole-item" v-for="item in list2020">
- <a href="#">
+ <router-link to="/tagTime">
<span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
+ </router-link>
+ <span>{{item.count}}篇</span>
+
</div>
</div>
</div>
@@ -19,22 +20,22 @@
<div class="blog-pigeonhole-list">
<div class="blog-pigeonhole-item" v-for="item in list2019">
- <a href="#">
+ <router-link to="/tagTime">
<span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
+ </router-link>
+ <span>{{item.count}}篇</span>
</div>
</div>
</div>
<div>
<p class="blog-pigeonhole-p">2019</p>
<div class="blog-pigeonhole-list">
-
+
<div class="blog-pigeonhole-item" v-for="item in list2019">
- <a href="#">
+ <router-link to="/tagTime">
<span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
+ </router-link>
+ <span>{{item.count}}篇</span>
</div>
</div>
</div>
diff --git a/src/components/layouts/box3.vue b/src/components/layouts/box3.vue
deleted file mode 100644
index bbf9fe5..0000000
--- a/src/components/layouts/box3.vue
+++ /dev/null
@@ -1,160 +0,0 @@
-<template>
- <div class="blog-container">
- <span class="blog-pigeonhole">归档信息</span>
- <div class="blog-scroll ">
- <div class="">
- <p class="blog-pigeonhole-p">2020</p>
- <div class="blog-pigeonhole-list">
-
- <div class="blog-pigeonhole-item" v-for="item in list2020">
- <a href="#">
- <span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
- </div>
- </div>
- </div>
- <div>
- <p class="blog-pigeonhole-p">2019</p>
- <div class="blog-pigeonhole-list">
-
- <div class="blog-pigeonhole-item" v-for="item in list2019">
- <a href="#">
- <span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
- </div>
- </div>
- </div>
- <div>
- <p class="blog-pigeonhole-p">2019</p>
- <div class="blog-pigeonhole-list">
-
- <div class="blog-pigeonhole-item" v-for="item in list2019">
- <a href="#">
- <span>{{item.month}}月</span>
- <span>{{item.count}}篇</span>
- </a>
- </div>
- </div>
- </div>
- </div>
- </div>
-
-</template>
-
-<script>
- export default {
- data() {
- return {
- list2019: [{
- month: "12",
- count: 10
- }, {
- month: "10",
- count: 11
- }, {
- month: "9",
- count: 9
- }],
- list2020: [{
- month: "12",
- count: 8
- }, {
- month: "10",
- count: 7
- }, {
- month: "9",
- count: 6
- }, {
- month: "8",
- count: 5
- }, {
- month: "7",
- count: 4
- }, {
- month: "6",
- count: 3
- }, {
- month: "5",
- count: 2
- }, {
- month: "4",
- count: 1
- }]
- }
- }
- }
-</script>
-
-</script>
-
-<style lang="less">
- /*归档部分*/
-
- .blog-pigeonhole {
- font-size: 15px;
- }
-
- .blog-pigeonhole-p {
- width: 20%;
- text-align: center;
- line-height: 20px;
- border-radius: 6px 6px 6px 6px;
- /*background-color: #edf0f3;*/
- margin-left: 3%;
- margin-bottom: 3%;
- opacity: 0.7;
- }
-
- .blog-pigeonhole-list {
- line-height: 1.6;
- padding-left: 3%;
- padding-right: 3%;
- /*display: flex; !*弹性盒子*!*/
- /*justify-content: flex-end; !*在弹性盒对象的 <div> 元素中的各项周围留有空白：*!*/
-
- display: flex;
- display: -webkit-flex;
- -webkit-justify-content: flex-start;
- justify-content: flex-start;
-
- flex-wrap: wrap;
- /*让弹性盒元素在必要的时候拆行：*/
- align-content: flex-start;
- -webkit-align-content: flex-start;
-
- }
-
- .blog-pigeonhole-item {
- min-width: 22%;
- margin-left: 1.5%;
- margin-right: 1.5%;
- margin-bottom: 5%;
-
- a span:first-child {
- height: 22px;
- background-color: #edf0f3;
- border-radius: 6px 6px 0 0;
- opacity: .8;
- color: #999aaa;
- line-height: 22px;
- margin-bottom: 1px;
- text-align: center;
- }
-
- a span:last-child {
- height: 22px;
- background-color: #f6f8fa;
- border-radius: 0 0 6px 6px;
- color: #555666;
- line-height: 20px;
- font-weight: 600;
- text-align: center;
- }
-
- span {
- display: block;
- }
- }
-</style>
diff --git a/src/components/layouts/box4-minibox.vue b/src/components/layouts/box4-minibox.vue
index 628178e..f674bbb 100644
--- a/src/components/layouts/box4-minibox.vue
+++ b/src/components/layouts/box4-minibox.vue
@@ -1,12 +1,14 @@
<template>
<div class="blog-container ">
<div>
- <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}" >{{title}}</span>
+ <span class="blog-right-side-portion-title " v-bind:class="{'title-remark':isShowRemark}">{{title}}</span>
</div>
<div class="blog-scroll show-line ">
<div class="blog-right-side-meta " v-for="item in list">
<div>
- <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
+ <router-link to="/box1">
+ <span class="blog-display-hide-content">{{item.name}}</span>
+ </router-link>
</div>
</div>
</div>
@@ -19,7 +21,7 @@
props: {
title: "",
list: "",
- isShowRemark:false
+ isShowRemark: false
},
data() {
return {
@@ -33,20 +35,20 @@
<style lang="less">
/*右边的部分*/
-
+
.blog-right-side-portion-title {
- display: block;
- font-size: 15px;
- padding-bottom: 8px;
-
+ display: block;
+ font-size: 15px;
+ padding-bottom: 8px;
+
}
-
+
span.title-remark::after {
- content: "(按字母索引)";
- color: #999;
- font-size: 10px;
+ content: "(按字母索引)";
+ color: #999;
+ font-size: 10px;
}
-
+
.blog-right-side-meta span {
/*word-break: keep-all;*/
/*word-wrap: break-word;*/
@@ -68,7 +70,8 @@
}
div .blog-right-side-meta a span:hover {
- background: #262a30;;
+ background: #262a30;
+ ;
color: #fff;
white-space: normal;
word-break: break-word;
diff --git a/src/components/layouts/box4.vue b/src/components/layouts/box4.vue
deleted file mode 100644
index cf8763e..0000000
--- a/src/components/layouts/box4.vue
+++ /dev/null
@@ -1,78 +0,0 @@
-<template>
- <div class="blog-container ">
- <div>
- <span class="blog-right-side-portion-title title-remark">{{title}}</span>
- </div>
- <div class="blog-scroll show-line">
- <div class="blog-right-side-meta " v-for="item in list">
- <div>
- <a href="#"> <span class="blog-display-hide-content">{{item.name}}</span></a>
- </div>
- </div>
- </div>
- </div>
-
-</template>
-
-<script>
- export default {
- props: {
- title: "",
- list: ""
- },
- data() {
- return {
-
- }
- }
- }
-</script>
-
-</script>
-
-<style lang="less">
- /*右边的部分*/
-
- .blog-right-side-portion-title {
- display: block;
- font-size: 15px;
- padding-bottom: 8px;
-
- }
-
- span.title-remark::after {
- content: "(按字母索引)";
- color: #999;
- font-size: 10px;
- }
-
- .blog-right-side-meta span {
- /*word-break: keep-all;*/
- /*word-wrap: break-word;*/
- color: #999;
- font-size: 13px;
- line-height: 17px;
- display: block;
- overflow: hidden;
- text-overflow: ellipsis;
-
- white-space: nowrap;
- /* normal文本换行*/
-
- word-break: keep-all;
- // transition-property: background-color;
- // transition-duration: .2s;
- // transition-timing-function: ease-in-out;
- // transition-delay: 0s;
- }
-
- div .blog-right-side-meta a span:hover {
- background: #262a30;;
- color: #fff;
- white-space: normal;
- word-break: break-word;
- /*可以换行 white-space CSS 属性是用来设置如何处理元素中的空白。*/
- height: 20%;
- z-index: 600;
- }
-</style>
diff --git a/src/components/layouts/box5-article.vue b/src/components/layouts/box5-article.vue
index cc2365e..b9105b5 100644
--- a/src/components/layouts/box5-article.vue
+++ b/src/components/layouts/box5-article.vue
@@ -67,7 +67,7 @@
</div>
<div class="article-split-line"></div>
<div class="article-read-btn">
- <router-link class="btn" to="/box1">阅读全文 »</router-link>
+ <router-link class="btn" to="/mdDetail">阅读全文 »</router-link>
</div>
</div>
diff --git a/src/components/layouts/box5.vue b/src/components/layouts/box5.vue
deleted file mode 100644
index c74c4f9..0000000
--- a/src/components/layouts/box5.vue
+++ /dev/null
@@ -1,221 +0,0 @@
-<template>
- <div class="blog-article">
- <!-- <div class="index-post-img">
- <a href="#">
- <div class="item-thumb lazy"
- style="background-image: url(https://image.ishelo.com/usr/themes/handsome/assets/img/sj/5.jpg)">
- </div>
- </a>
- </div> -->
-
- <div class="article-meta">
- <h2 class="article-title"><a href="#">陈奕迅-Body Song 歌词</a></h2>
- <div class="article-split-line"></div>
- <div class="article-summary blog-scroll">
- <p>Baby Song - 陈奕迅 (Eason Chan)</p>
- <p>词：岑宁儿</p>
- <p>曲：岑宁儿</p>
- <p>你的眼睛 像颗水晶通透</p>
- <p>里面有一个无穷无尽的宇宙</p>
- <p>小小的你 在你小小的梦里</p>
- <p>把我所有大大的事情都吹进风里</p>
- <p>我为我将对你撒的谎先跟你道歉</p>
- <p>当你发现黑白不是那么的分明</p>
- <p>世界不是那么的公平</p>
- <p>别太失望 我讲的是个梦想</p>
- <p>不用太听我们的话</p>
- <p>不要让任何人告诉你</p>
- <p>你该怎样对待世界</p>
- <p>或它该怎对你</p>
- <p>要跟现在一样随心</p>
- <p>让你的眼睛和心依然纯净</p>
- <p>可惜世界不及你好</p>
- <p>原谅我们 我们都还在找</p>
- <p>而时间它只负责流动</p>
- <p>不负责 育你成长</p>
- <p>不过你只需要倾听</p>
- <p>倾听你的心</p>
- <p>你的眼睛 像颗水晶通透</p>
- <p>里面有一个无穷无尽的宇宙</p>
- <p>小小的你 在你小小的梦里</p>
- <p>把我所有大大的事情都吹进风里</p>
- <p>都吹进风里</p>
- <p>-</p>
- </div>
- <div class="article-split-line"></div>
- <div class="article-message-info ">
- <ul>
- <li>
- <a-icon type="read" />
- <!-- <a-icon type="eye" /> -->
- <span> 101</span>
- </li>
- <li>
- <a-icon type="like" />
- <span> 233</span>
-
- </li>
- <li>
- <a-icon type="folder-open" />
- <span> 歌词</span>
- </li>
- <li>
- <a-icon type="clock-circle" />
- <span>2020-05-26 18:00:00</span>
- </li>
- </ul>
- </div>
- <div class="article-split-line"></div>
- <div class="article-read-btn"><a class="btn" href="#" rel="contents">阅读全文 »</a></div>
- </div>
-
- </div>
-
-</template>
-
-<script>
- export default {
- props: {
- title: "",
- list: ""
- },
- data() {
- return {
-
- }
- }
- }
-</script>
-
-</script>
-
-<style lang="less">
- /*文章部分*/
- .blog-article {
- margin-top: 10px;
- margin-bottom: 20px;
- border-radius: 15px;
- border: none;
- /*box-shadow: 1px 1px 5px 5px rgba(17, 150, 196, 0.35);*/
- }
-
- .article-meta {
- padding: 30px 30px 10px;
- background-color: white;
- border-radius: 15px;
- }
-
- .article-title {
- color: #555;
- font-size: 14px;
- line-height: 14px;
- padding-bottom: 15px;
- margin-top: 0 !important;
- display: block;
- overflow: hidden;
- white-space: nowrap;
- text-overflow: ellipsis;
- text-align: center;
- }
-
- .article-split-line {
- width: 100%;
- height: 2px;
- overflow: hidden;
- font-size: 0;
- margin-top: 8px;
- margin-bottom: 8px;
- border-color: rgba(237, 241, 242, .6);
-
- border-bottom: 1px solid rgba(222, 229, 231, .45);
- display: block
- }
-
- .article-message-info {
- text-align: center;
-
- li {
- display: inline-block;
- padding-right: 5px;
- padding-left: 5px;
-
- span {
- padding-left: 0px;
- }
- }
- }
-
-
- .article-summary {
- max-height: 200px;
- overflow: hidden;
-
- p {
- line-height: 17px;
- font-size: 10px;
- }
- }
-
- .article-summary p {
- text-align: center;
- }
-
- .article-read-btn {
- text-align: center;
- display: block;
- }
-
- .btn {
- display: inline-block;
- padding: 0 20px;
- color: #555;
- background: #fff;
- border: 2px solid #555;
- text-decoration: none;
- border-radius: 2px;
-
- line-height: 2;
- font-size: 14px;
- overflow-wrap: break-word;
- word-wrap: break-word;
- cursor: pointer;
-
- transition-property: background-color;
- transition-duration: .2s;
- transition-timing-function: ease-in-out;
- transition-delay: 0s;
- }
-
- .btn:hover {
- background: #262a30;
- color: #fff;
- }
-
- /*文章图片部分*/
- .item-thumb {
- min-height: 250px;
- position: relative;
- display: block;
- background-position: 50% 50%;
- background-size: cover;
- border-radius: 15px;
- }
-
- .item-thumb {
- cursor: pointer;
- transition: all 0.6s;
- }
-
- .item-thumb:hover {
- transform: scale(1.05);
- }
-
- .item-thumb-small {
- cursor: pointer;
- transition: all 0.6s;
- }
-
- .item-thumb-small:hover {
- transform: scale(1.05);
- }
-</style>
diff --git a/src/components/layouts/main.vue b/src/components/layouts/main.vue
index 79520f9..264591e 100644
--- a/src/components/layouts/main.vue
+++ b/src/components/layouts/main.vue
@@ -1,8 +1,8 @@
<template>
- <div id="components-layout-basic">
+ <div id="components-layout-basic" >
<a-layout>
<a-layout-header>
- <tag-Header></tag-Header>
+ <tag-Header ></tag-Header>
</a-layout-header>
<a-layout>
<router-view class="fade"></router-view>
@@ -28,7 +28,8 @@
return {
}
- }
+ },
+
}
</script>
@@ -42,7 +43,8 @@
.ant-layout {}
.ant-layout-header {
- background-color: #001529;
+ margin-bottom: 15px;
+ background-color: #ffffff;
}
.ant-layout-footer {
diff --git a/src/components/layouts/main1-show.vue b/src/components/layouts/main1-show.vue
index 788f72f..6bdab98 100644
--- a/src/components/layouts/main1-show.vue
+++ b/src/components/layouts/main1-show.vue
@@ -62,6 +62,17 @@
</script>
<style lang="less">
+ .swichTag {
+ padding: 30px 30px 10px;
+ background-color: white;
+ border-radius: 15px;
+ }
+
+ .article-detail {
+ max-height: 750px;
+ overflow: overlay;
+ }
+
.blog-main {
padding-left: 5%;
padding-right: 5%;
diff --git a/src/components/layouts/main2-show.vue b/src/components/layouts/main2-show.vue
index 14f1fda..549e0a0 100644
--- a/src/components/layouts/main2-show.vue
+++ b/src/components/layouts/main2-show.vue
@@ -2,36 +2,32 @@
<div class="blog-main">
<a-row>
<a-col v-bind="colApiLeft">
- <boxLeft></boxLeft>
+ <music :searchType="searchType"></music>
</a-col>
<a-col v-bind="colApiMain ">
- <boxLeft></boxLeft>
+ <musicPanal></musicPanal>
+ <!-- <boxLeft></boxLeft> -->
</a-col>
<a-col v-bind="colApiRight">
- <boxLeft></boxLeft>
</a-col>
</a-row>
</div>
</template>
<script>
+ import music from "./music.vue"
+ import musicPanal from "./musicPanal.vue"
import boxLeft from "./boxLeft.vue"
- import boxRight from "./boxRight.vue"
- import box6 from "./box6-articleList.vue"
export default {
components: {
+ music,
+ musicPanal,
boxLeft,
- boxRight,
- box6
},
data() {
return {
- sliderApi: {
- collapsible: true, //是否可收起
-
- collapsedWidth: 0 //收缩宽度，设置为 0 会出现特殊 trigger
- },
+ searchType:"乐谱搜索",
colApiLeft: {
xs: 0,
sm: 0,
diff --git a/src/components/layouts/main3-show.vue b/src/components/layouts/main3-show.vue
new file mode 100644
index 0000000..2640272
--- /dev/null
+++ b/src/components/layouts/main3-show.vue
@@ -0,0 +1,172 @@
+<template>
+ <div class="blog-main">
+ <a-row>
+ <a-col v-bind="colApiLeft">
+ <music :searchType="searchType"></music>
+ </a-col>
+ <a-col v-bind="colApiMain ">
+ <boxModule></boxModule>
+ <!-- <boxLeft></boxLeft> -->
+ </a-col>
+ <a-col v-bind="colApiRight">
+ </a-col>
+ </a-row>
+ </div>
+</template>
+
+<script>
+ import music from "./music.vue"
+ import musicPanal from "./musicPanal.vue"
+ import boxLeft from "./boxLeft.vue"
+ import boxModule from "./module.vue"
+ export default {
+ components: {
+ music,
+ musicPanal,
+ boxLeft,
+ boxModule,
+ },
+
+ data() {
+ return {
+ searchType:"动漫搜索",
+ colApiLeft: {
+ xs: 0,
+ sm: 0,
+ md: 0,
+ lg: 8,
+ xl: 8,
+ xxl: 6,
+ },
+ colApiRight: {
+ xs: 0,
+ sm: 0,
+ md: 0,
+ lg: 0,
+ xl: 0,
+ xxl: 4,
+ },
+ colApiMain: {
+ xs: 24,
+ sm: 24,
+ md: 24,
+ lg: 14,
+ xl: 14,
+ xxl: 14,
+ }
+ }
+ }
+ }
+</script>
+
+<style lang="less">
+ .blog-main {
+ padding-left: 5%;
+ padding-right: 5%;
+ }
+
+
+
+ /*左右两边的盒子容器*/
+ .blog-cell {
+ opacity: 0.8;
+ padding: 0px 25px 10px;
+ }
+
+ /*左边部分*/
+ .blog-left-side {
+ position: sticky;
+ // top: 80px;
+ padding-left: 2%;
+ /*padding-right: 2%;*/
+ z-index: 100;
+ }
+
+ /*中间部分*/
+ .blog-body {
+ padding-top: 10px;
+ /*padding-left: 3%;*/
+ /*padding-right: 3%;*/
+ }
+
+ /*右边部分*/
+ .blog-right-side {
+ position: sticky;
+ top: -19%;
+ padding-top: 10px;
+ /*padding-left: 2%;*/
+ /*padding-right: 2%;*/
+ z-index: 100;
+ }
+
+ div .blog-right-side-meta div {
+ padding-left: 6%;
+ padding-right: 6%;
+ margin-bottom: 3%;
+ }
+
+
+ /*---------------------
+ | 核心盒子构成start |
+ ------- ---------------*/
+ .blog-container {
+ border-radius: 15px;
+ background-color: white;
+
+ line-height: 1.4;
+ white-space: nowrap;
+ /*规定段落中的文本不进行换行：*/
+ text-align: center;
+ padding-top: 20px;
+ padding-bottom: 20px;
+ max-height: 300px;
+ /*margin-top: 10px;*/
+ /*min-height: 200px;*/
+
+ // overflow-x: hidden;
+ // overflow-y: overlay;
+ // display: block;
+
+ padding-top: 10px;
+ padding-bottom: 20px;
+ overflow: hidden;
+ box-shadow: 1px 1px 1px 2px #1196c459
+ }
+
+ .show-line {
+ border-top: 1px solid #999;
+ }
+
+ .blog-scroll {
+ padding-top: 10px;
+ max-height: 200px;
+
+ overflow-x: hidden;
+ overflow-y: overlay;
+ }
+
+
+ .blog-scroll:hover::-webkit-scrollbar {
+ display: block;
+ }
+
+ .blog-scroll:hover::-webkit-scrollbar {
+ display: block;
+ }
+
+ .blog-scroll::-webkit-scrollbar {
+ width: 5px;
+ display: none;
+ }
+
+ .blog-scroll::-webkit-scrollbar-thumb {
+ background-color: rgba(153, 154, 170, 0.3);
+ border-radius: 2px;
+ }
+
+ /*margin滚动条上偏移*/
+ .blog-scroll::-webkit-scrollbar-track {
+ margin-top: 5px;
+ margin-bottom: 5px;
+ }
+</style>
diff --git a/src/components/layouts/mdDetail.vue b/src/components/layouts/mdDetail.vue
new file mode 100644
index 0000000..60da741
--- /dev/null
+++ b/src/components/layouts/mdDetail.vue
@@ -0,0 +1,157 @@
+<template>
+ <div class="article-meta">
+ <a-button @click="back">
+ <a-icon type="left" />
+ </a-button>
+ <a-divider orientation="left">
+ 文章详情
+ </a-divider>
+ <div class="markdown-body article-detail">
+ <vue-markdown :source="source"></vue-markdown>
+ </div>
+ </div>
+</template>
+
+<script>
+ import VueMarkdown from 'vue-markdown'
+ import esPath from '../../assets/es.md'
+
+ export default {
+ // props: ['id'], //接收动态路由的值
+ components: {
+ VueMarkdown
+ },
+ data() {
+ return {
+ source: esPath,
+ }
+ },
+ methods: {
+ back: function() {
+ this.$router.go(-1);
+
+ }
+ },
+ mounted() {
+ // console.log(this.$route.params)
+ // console.log(this.$route.params.id)
+ // console.log(this.$route.query.id)
+ }
+ }
+</script>
+
+<style scoped>
+ @import '../../assets/md.css';
+
+
+
+ /* #test{
+ padding-left: 25%;
+ padding-right: 25%;
+ } */
+ /* h3 {
+ margin: 40px 0 0;
+ }
+
+ ul {
+ list-style-type: none;
+ padding: 0;
+ }
+
+ li {
+ display: inline-block;
+ margin: 0 10px;
+ }
+
+ a {
+ color: #42b983;
+ }
+
+ */
+
+
+ /* 自己也可以再调整调整 (贡献一版 我们调整的一版样式) */
+ /* .markdown-body {
+ padding: 20px;
+ min-width: 200px;
+ max-width: 900px;
+ font-size: 12px;
+
+ h2 {
+ font-size: 18px;
+ margin: 1em 0 15px;
+ padding-top: 0.8em;
+ padding-bottom: 0.8em;
+ }
+
+ h3 {
+ font-size: 14px;
+ margin: 22px 0 16px;
+ }
+
+ h4 {
+ font-size: 13px;
+ margin: 20px 0 16px;
+ }
+
+ h5 {
+ font-size: 12px;
+ margin: 16px 0 16px;
+ font-weight: 700;
+ }
+
+ p {
+ font-size: 12px;
+ line-height: 24px;
+ color: #666666;
+ margin-top: 0px;
+ margin: 8px 0;
+ margin: 14px 0 14px;
+ }
+
+ pre {
+ background-color: #eee;
+ margin-bottom: 8px;
+ margin-top: 8px;
+ margin: 12px 0 12px;
+ }
+
+ blockquote {
+ margin-bottom: 8px;
+ margin-top: 8px;
+ margin: 14px 0 14px;
+ background-color: #eee;
+ padding: 16px 16px;
+ }
+
+ tr {
+ background-color: #f5f5f5;
+ }
+
+ code {
+ background-color: #eee;
+ }
+
+ ul,
+ ol,
+ li {
+ list-style: unset;
+ font-size: 12px;
+ line-height: 20px;
+ color: #666666;
+ margin-top: 0px;
+ margin: 8px 0;
+ }
+
+ blockquote {
+ border-color: #48b6e2;
+ }
+
+ table {
+ display: table;
+ width: 100%;
+ max-width: 100%;
+ margin-bottom: 20px;
+ }
+ } */
+</style>
diff --git a/src/components/layouts/module.vue b/src/components/layouts/module.vue
new file mode 100644
index 0000000..e537612
--- /dev/null
+++ b/src/components/layouts/module.vue
@@ -0,0 +1,29 @@
+<template>
+ <div class="module-box">
+ <!-- <iframe src="http://yun.gofor.live/" width="100%" height="800" frameborder="0" scrolling="auto" id="iframename" name="iframename"></iframe> -->
+ <iframe src="http://t.inleft.com/share/" width="100%" height="800" frameborder="0" scrolling="auto" id="iframename" name="iframename"></iframe>
+ </div>
+</template>
+
+<script>
+ export default {
+ components: {},
+ props: {},
+ data() {
+ return {
+
+ }
+ },
+ methods: {
+
+ }
+ }
+</script>
+
+<style>
+ .module-box{
+ background-color: #FFFFFF;
+ border-radius: 20px;
+ }
+
+</style>
diff --git a/src/components/layouts/music.vue b/src/components/layouts/music.vue
new file mode 100644
index 0000000..2747537
--- /dev/null
+++ b/src/components/layouts/music.vue
@@ -0,0 +1,63 @@
+<template>
+ <div class="blog-cell ">
+ <div class="blog-container">
+ <div class="blog-user-message blog-cell ">
+ <span>{{searchType}}</span>
+ <hr>
+ <div>
+ <a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
+ <a-input>
+ <a-icon slot="suffix" type="search" class="certain-category-icon" />
+ </a-input>
+ </a-auto-complete>
+ </div>
+ <hr>
+ <span>{{sentence}}</span>
+ </div>
+ </div>
+ </div>
+
+</template>
+
+<script>
+ export default {
+ name: "box",
+ props: {
+ searchType: ""
+ },
+ data() {
+ return {
+ sentence: "十里寒塘路,烟花一半醒",
+ search: {
+ placeholder: "搜索..",
+ allowClear: true,
+ // autoFocus: true,
+ backfill: true,
+ dataSource: [],
+ },
+ }
+ },
+ methods: {
+ onSearch(searchText) {
+ this.dataSource = !searchText ? [] : [searchText, searchText.repeat(2), searchText.repeat(3)];
+ console.log("补全..");
+ },
+ onSelect(value) {
+ console.log('回车', value);
+ },
+ onChange(value) {
+ console.log('修改', value);
+ },
+ keyListener(value) {
+ console.log('ref', this.$refs.mySearch);
+ console.log('键盘', value);
+ },
+ },
+ }
+</script>
+
+</script>
+
+<style lang="less">
+
+</style>
diff --git a/src/components/layouts/musicPanal.vue b/src/components/layouts/musicPanal.vue
new file mode 100644
index 0000000..0de9b25
--- /dev/null
+++ b/src/components/layouts/musicPanal.vue
@@ -0,0 +1,83 @@
+<template>
+ <div>
+ <div class="article-meta ">
+
+ <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
+ <legend>卡片面板</legend>
+ </fieldset>
+
+ <div class="layui-bg-gray" style="padding: 30px;">
+ <div class="layui-row layui-col-space15">
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">卡片面板</div>
+ <div class="layui-card-body">
+ 卡片式面板面板通常用于非白色背景色的主体内<br>
+ 从而映衬出边框投影
+ </div>
+ </div>
+ </div>
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">卡片面板</div>
+ <div class="layui-card-body">
+ 结合 layui 的栅格系统<br>
+ 轻松实现响应式布局
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+ <div class="blog-cell">
+
+ <fieldset class="layui-elem-field layui-field-title" style="margin-top: 20px;">
+ <legend>卡片面板</legend>
+ </fieldset>
+
+ <div class="layui-bg-gray" style="padding: 30px;">
+ <div class="layui-row layui-col-space15">
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">卡片面板</div>
+ <div class="layui-card-body">
+ 卡片式面板面板通常用于非白色背景色的主体内<br>
+ 从而映衬出边框投影
+ </div>
+ </div>
+ </div>
+ <div class="layui-col-md6">
+ <div class="layui-card">
+ <div class="layui-card-header">卡片面板</div>
+ <div class="layui-card-body">
+ 结合 layui 的栅格系统<br>
+ 轻松实现响应式布局
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+
+ </div>
+
+ </div>
+
+</template>
+
+<script>
+ export default {
+ name: "box",
+ data() {
+ return {
+
+ }
+ }
+ }
+</script>
+
+</script>
+
+<style lang="less">
+
+</style>
diff --git a/src/components/layouts/tag-header.vue b/src/components/layouts/tag-header.vue
index 15ac349..2380bdf 100644
--- a/src/components/layouts/tag-header.vue
+++ b/src/components/layouts/tag-header.vue
@@ -1,14 +1,17 @@
<template>
- <div>
+ <div class="layui-row">
<a-row type="flex" justify="start">
<a-col v-bind="showSmall">
- <router-link class="btn" to="/main1">Home »</router-link>
+ <router-link to="/main1">Home »</router-link>
</a-col>
<a-col v-bind="showSmall">
- <router-link class="btn" to="/main1">Home2 »</router-link>
+ <router-link to="/main2">乐谱搜索 »</router-link>
</a-col>
<a-col v-bind="showSmall">
- <router-link class="btn" to="/main2">我的信息 »</router-link>
+ <router-link to="/main3">动漫搜索 »</router-link>
+ </a-col>
+ <a-col v-bind="showMain">
+ <router-link to="/tagInfo">关于我 »</router-link>
</a-col>
<a-col v-bind="showMain">
<a-auto-complete v-bind="search" @select="onSelect" @search="onSearch" @change="onChange">
@@ -17,10 +20,50 @@
</a-input>
</a-auto-complete>
</a-col>
- <a-col v-bind="showMain">
- <router-link class="btn" to="/main2">我的信息 »</router-link>
- </a-col>
+
</a-row>
+
+ <!-- <ul class="layui-nav ">
+ <li class="layui-nav-item blog-displayIn-minScreen">
+ <i class="layui-icon layui-icon-spread-left">Home</i>
+ </li>
+ <li class="layui-nav-item blog-displayIn-BidScreen">
+ <legend> Home</legend>
+ </li>
+ <li class="layui-nav-item">
+ <a href="javascript:;">文章<span class="layui-nav-more"></span></a>
+ <dl class="layui-nav-child layui-anim layui-anim-upbit">
+ <dd><a href="#">按时间线</a></dd>
+ <dd><a href="#">按Tag</a></dd>
+ <dd><a href="#">按热度</a></dd>
+ </dl>
+ </li>
+ <li class="layui-nav-item"><a href="#">曲谱/曲库</a></li>
+ <li class="layui-nav-item">
+ <a href="javascript:;">动漫<span class="layui-nav-more"></span></a>
+ <dl class="layui-nav-child layui-anim layui-anim-upbit">
+ <dd><a href="#">番</a></dd>
+ <dd><a href="#">电影</a></dd>
+ <dd><a href="#">声优</a></dd>
+ </dl>
+ </li>
+ <li class="layui-nav-item blog-displayIn-BidScreen"><a href="#">第九艺术</a></li>
+ </ul>
+ <ul class="layui-nav layui-layout-right">
+ <li class="layui-nav-item blog-displayIn-BidScreen">
+ <input type="text" placeholder="搜索一下" value="" class="layui-input">
+ </li>
+ <li class="layui-nav-item">
+ <a href="javascript:;">
+ <img src="http://t.inleft.com/share/media_photo/xigong.png" class="layui-nav-img">
+ inleft
+ </a>
+ <dl class="layui-nav-child">
+ <dd><a href="#">About</a></dd>
+ <dd><a href="#">时间轴</a></dd>
+ </dl>
+ </li>
+ </ul> -->
</div>
</template>
@@ -83,32 +126,5 @@
</script>
<style lang="less">
- /*头像部分*/
- .blog-avatar {
- border-radius: 15px;
- background-color: white;
- img {
- width: 60px;
- height: auto;
- border-radius: 50%;
- display: block;
- margin: 10px auto 10px;
- padding-top: 10px;
- }
- }
-
- /* 一言 */
- .blog-user-message {
- text-align: center;
- font-size: 15px;
- color: #555;
- padding-top: 10px;
- padding-bottom: 10px;
-
- span {
- display: block;
- padding-bottom: 5px;
- }
- }
</style>
diff --git a/src/components/layouts/tag-time.vue b/src/components/layouts/tag-time.vue
new file mode 100644
index 0000000..8117c9f
--- /dev/null
+++ b/src/components/layouts/tag-time.vue
@@ -0,0 +1,67 @@
+<template>
+ <div class="swichTag">
+ <a-divider orientation="left">
+ 归档时间线
+ </a-divider>
+
+ <fieldset class="layui-elem-field layui-field-title ">
+ <legend><a name="docend">2020年</a></legend>
+ </fieldset>
+
+ <div class="layui-field-box">
+ <ul class="layui-timeline">
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h3 class="layui-timeline-title">8月18日</h3>
+ <p>
+ layui 2.0 的一切准备工作似乎都已到位。发布之弦，一触即发。
+ <br>不枉近百个日日夜夜与之为伴。因小而大，因弱而强。
+ <br>无论它能走多远，抑或如何支撑？至少我曾倾注全心，无怨无悔 <i class="layui-icon"></i>
+ </p>
+ </div>
+ </li>
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h3 class="layui-timeline-title">8月16日</h3>
+ <p>杜甫的思想核心是儒家的仁政思想，他有“<em>致君尧舜上，再使风俗淳</em>”的宏伟抱负。个人最爱的名篇有：</p>
+ <ul>
+ <li>《登高》</li>
+ <li>《茅屋为秋风所破歌》</li>
+ </ul>
+ </div>
+ </li>
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h3 class="layui-timeline-title">8月15日</h3>
+ <p>
+ 中国人民抗日战争胜利72周年
+ <br>常常在想，尽管对这个国家有这样那样的抱怨，但我们的确生在了最好的时代
+ <br>铭记、感恩
+ <br>所有为中华民族浴血奋战的英雄将士
+ <br>永垂不朽
+ </p>
+ </div>
+ </li>
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <div class="layui-timeline-title">过去</div>
+ </div>
+ </li>
+ </ul>
+ </div>
+
+ </div>
+</template>
+
+<script>
+</script>
+
+<style lang="less">
+
+
+
+</style>
diff --git a/src/components/layouts/tagInfo.vue b/src/components/layouts/tagInfo.vue
new file mode 100644
index 0000000..e6bd914
--- /dev/null
+++ b/src/components/layouts/tagInfo.vue
@@ -0,0 +1,71 @@
+<template>
+ <div class="swichTag">
+ <blockquote class="layui-elem-quote layui-quote-nm">关于我的一些..小故事</blockquote>
+
+ <div class="layui-field-box">
+ <ul class="layui-timeline">
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h4 class="layui-timeline-title">过去</h4>
+ <p>
+ <ul>
+ <li> 尘世间一个迷途小码农</li>
+ <li> 喜欢钢琴~喜欢吉他 </li>
+ </ul>
+ </p>
+ </div>
+ </li>
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h4 class="layui-timeline-title">202108</h4>
+ <p>到我提笔准备写下篇类日记的时候,时间已经来到了16号,
+ <br>此刻的心情,也是平静了许多,想来,这周算是近年来比较忙的周末了吧,从周五凌晨1点就开始马不停蹄..
+ </p>
+ <br>然后,从哪里说起好呢,似乎从哪里起头都是一笔坏账啊..
+ <br>临上车前,我靠在车站的栏杆上,她拿着个电动小风扇,倒是自己不吹,直愣愣对着我,在我旁边吱吱说话,不过此刻我早就不记得她说过了什么,
+ <br>那时,我满脑子都是在想:说吧,说吧,你再不说,以后可能就没机会了
+ <br>没等我脑子缓过神来,我把目光从直视栏杆的方向就自然扭回到了她的方向,话题一转:你觉得,我是在用什么心情在看你呢
+ <br>
+ <br>她啊了一下,似乎也没停顿,这个比较直的女孩就接过我的话:应该是.....她自顾说了几个她觉得的我对她的印象,但我又不记得了,
+ <br>几分神,我顿了顿,遥遥头:不是,我是说,我对你的...
+ <br>我的双手在胸前不停打转,很想通过肢体的语言给她传递我心里的感受,有那么一会,我实在是不知道怎么说下去了..
+ <br>
+ <br>客车要发动了,我停下双手,想起也是在5年前的一个场景,我眼神示意了下车子,我要走了..客流开始向车的入口靠过去,我正要提步,
+ <br>"哎..给我一个拥抱吧"..我张了双臂,她稍微停了下,还是靠了过来..
+ <br>离开她的怀抱后,我比一个六的手势:"其实,六年前,到现在为止"..趁机,我在她耳边,轻轻地道:
+ <br>
+ <br>希望我们的故事还没有终点..
+ </div>
+ </li>
+
+ <li class="layui-timeline-item">
+ <i class="layui-icon layui-timeline-axis"></i>
+ <div class="layui-timeline-content layui-text">
+ <h3 class="layui-timeline-title">
+ ...
+ <p>
+ <em>爱她所爱,思她所思,为她承担伤痛</em>
+ <br>度过苦难 无论贫寒,无论卑贱或富贵
+ <br>无论身处乱世还是神所不顾 我都愿为她拔剑而战
+ <br>为她收起翅膀
+ <br>不离不弃,直至永远
+ </p>
+ </h3>
+ </div>
+ </li>
+
+ </ul>
+
+ </div>
+
+ </div>
+</template>
+
+<script>
+</script>
+
+<style lang="less">
+
+</style>
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 48f57b5..5a2f759 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -1,9 +1,13 @@
import main from '../components/layouts/main.vue'
import main1 from '../components/layouts/main1-show.vue'
import main2 from '../components/layouts/main2-show.vue'
+import main3 from '../components/layouts/main3-show.vue'
import box6 from '../components/layouts/box6-articleList.vue'
import box1 from '../components/layouts/box1-info.vue'
import box2 from '../components/layouts/box2-class.vue'
+import tagTime from '../components/layouts/tag-time.vue'
+import tagInfo from '../components/layouts/tagInfo.vue'
+import mdDetail from '../components/layouts/mdDetail.vue'
export const asyncRouterMap = [{
@@ -25,6 +29,18 @@
{
path: '/box1',
component: box1,
+ },
+ {
+ path: '/tagTime',
+ component: tagTime,
+ },
+ {
+ path: '/tagInfo',
+ component: tagInfo,
+ },
+ {
+ path: '/mdDetail',
+ component: mdDetail,
}
]
},
@@ -36,11 +52,16 @@
component: box6,
}]
},
+
{
path: '/main2',
component: main2,
-
},
+ {
+ path: '/main3',
+ component: main3,
+ },
+
]
},
diff --git a/src/js/bus.js b/src/js/bus.js
deleted file mode 100644
index 0948c2e..0000000
--- a/src/js/bus.js
+++ /dev/null
@@ -1,3 +0,0 @@
-import Vue from 'vue';
-
-export default new Vue();
diff --git a/src/main.js b/src/main.js
index e319c2b..54904d9 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,26 +1,28 @@
import Vue from 'vue';
import App from './App';
-import uploader from 'vue-simple-uploader'
+import axios from 'axios'
+import router from './router/router.js'
-import 'element-ui/lib/theme-chalk/index.css';
import Antd from 'ant-design-vue/es';
-import 'ant-design-vue/dist/antd.less'; // 引入官方提供的 less 样式入口文件
-import $ from 'jquery'
-
-import axios from 'axios'
-import Element from 'element-ui'
-import store from "@/components/test7/store.js"
+import 'ant-design-vue/dist/antd.css';
+Vue.use(Antd);
Vue.prototype.$axios = axios
-Vue.use(Antd);
-Vue.use(Element)
-Vue.use(uploader)
-// Vue.component(Button.name, Button);
-// Vue.config.productionTip = false;
+
+import {
+ Layout,
+ Row,
+ Col,
+} from 'ant-design-vue'
+Vue.use(Layout)
+Vue.use(Row)
+Vue.use(Col)
new Vue({
- render: h => h(App),
- store,
-}).$mount('#app');
+ el: '#app',
+ router, //挂载路由
+ render: h => h(App)
+})
+// .$mount('#app');
diff --git a/src/router/router.js b/src/router/router.js
index 0a44ef4..1522bca 100644
--- a/src/router/router.js
+++ b/src/router/router.js
@@ -16,7 +16,7 @@
})
router.beforeEach((to, from, next) => {
- window.document.title = to.meta.title == undefined?'默认标题':to.meta.title
+ window.document.title = to.meta.title == undefined?'在你左边,听风及雨':to.meta.title
next();
})
diff --git a/vue.config.js b/vue.config.js
index 65de8c0..5f1c892 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -1,5 +1,16 @@
// vue.config.js for less-loader@6.0.0
module.exports = {
+ configureWebpack: (config) => {
+ config.module.rules.push({
+ test: /\.md/,
+ use: [{
+ loader: 'text-loader', // 解决ivew组件 忽略前缀i的问题
+ options: {
+ prefix: false
+ }
+ }]
+ })
+ },
css: {
loaderOptions: {
less: {
--
Gitblit v1.9.1