diff --git a/assets/css/details.css b/assets/css/details.css
index afb89d8..58aaa6e 100644
--- a/assets/css/details.css
+++ b/assets/css/details.css
@@ -14,22 +14,39 @@
}
.content .header {
width: 100%;
- height: 80px;
- padding: 0 30px;
+ padding: 30px;
border-bottom: 1px solid #ebebeb;
font-weight: 650;
font-size: 20px;
color: #000000;
line-height: 20px;
- justify-content: space-between;
+ flex-direction: column;
}
-.content .header .views {
- font-size: 12px;
- color: #aaa;
- font-weight: 400;
+.content .header .label {
+ flex-wrap: wrap;
+ margin-bottom: 15px;
}
-.content .header .views .eye-icon {
- margin-right: 5px;
+.content .header .label .item {
+ font-size: 14px;
+ color: #555555;
+ padding: 0 9px;
+ height: 24px;
+ line-height: 24px;
+ background-color: #f2f2f2;
+ border-radius: 6px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ margin-bottom: 5px;
+}
+.content .header .label .item.icon {
+ padding: 0;
+}
+.content .header .label .item:not(:last-child) {
+ margin-right: 10px;
+}
+.content .header .label .item.blue {
+ color: #ffffff;
+ background-color: #04b0d5;
}
.content .left {
width: 658px;
diff --git a/assets/css/details.less b/assets/css/details.less
index d898919..287e805 100644
--- a/assets/css/details.less
+++ b/assets/css/details.less
@@ -15,20 +15,42 @@
.header {
width: 100%;
- height: 80px;
- padding: 0 30px;
+ padding: 30px;
border-bottom: 1px solid #ebebeb;
font-weight: 650;
font-size: 20px;
color: #000000;
line-height: 20px;
- justify-content: space-between;
- .views {
- font-size: 12px;
- color: #aaa;
- font-weight: 400;
- .eye-icon {
- margin-right: 5px;
+ flex-direction: column;
+
+ .label {
+ flex-wrap: wrap;
+ margin-bottom: 15px;
+
+ .item {
+ font-size: 14px;
+ color: #555555;
+ padding: 0 9px;
+ height: 24px;
+ line-height: 24px;
+ background-color: rgba(242, 242, 242, 1);
+ border-radius: 6px;
+ margin-bottom: 10px;
+ cursor: pointer;
+ margin-bottom: 5px;
+
+ &.icon {
+ padding: 0;
+ }
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+
+ &.blue {
+ color: #ffffff;
+ background-color: #04b0d5;
+ }
}
}
}
diff --git a/assets/img/essence-icon.png b/assets/img/essence-icon.png
new file mode 100644
index 0000000..93b00a2
Binary files /dev/null and b/assets/img/essence-icon.png differ
diff --git a/assets/img/recommend-icon.png b/assets/img/recommend-icon.png
new file mode 100644
index 0000000..48f2bf3
Binary files /dev/null and b/assets/img/recommend-icon.png differ
diff --git a/components/DetailsArea.vue b/components/DetailsArea.vue
index 288cf09..e097513 100644
--- a/components/DetailsArea.vue
+++ b/components/DetailsArea.vue
@@ -18,24 +18,25 @@