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 @@
{{ info["views"] }}
-
{{ info["likes"] || "" }}
-
- -
{{ commentComments }}
-
+
{{ info["favs"] || "收藏" }}
+
+ +
{{ commentComments }}
+
+
+ +
{{ commentComments }}
+