界面二次优化

 .gitignore

New file
@@ -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

 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",

 src/App.vue

@@ -20,6 +20,7 @@


<style>
    @import url("https://www.layuicdn.com/layui/css/layui.css");
    .app {
        overflow: auto;
        border: none;

 src/assets/es.md

New file
@@ -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
                ]
              }
            ]
          }
        }
      }
}
```

	

 src/assets/md.css

New file
@@ -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;
}

 src/components/HelloWorld - 副本.vue

File was deleted

 src/components/HelloWorld.vue

File was deleted

 src/components/demo.vue

File was deleted

 src/components/globalUploader.vue

File was deleted

 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;

 src/components/layouts/box1.vue

File was deleted

 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;
        }

 src/components/layouts/box2.vue

File was deleted

 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>

 src/components/layouts/box3.vue

File was deleted

 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;

 src/components/layouts/box4.vue

File was deleted

 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>


 src/components/layouts/box5.vue

File was deleted

 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 {

 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%;

 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,

 src/components/layouts/main3-show.vue

New file
@@ -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>

 src/components/layouts/mdDetail.vue

New file
@@ -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>

 src/components/layouts/module.vue

New file
@@ -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>

 src/components/layouts/music.vue

New file
@@ -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>

 src/components/layouts/musicPanal.vue

New file
@@ -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>

 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>

 src/components/layouts/tag-time.vue

New file
@@ -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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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>

 src/components/layouts/tagInfo.vue

New file
@@ -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">&#xe63f;</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">&#xe63f;</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">&#xe63f;</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>

 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,
            },
			

        ]
    },

 src/js/bus.js

File was deleted

 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');

 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();
})


 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: {