From 29d2cbce17cdec547303f08ed6fa71852e0b7090 Mon Sep 17 00:00:00 2001
From: 康凯 <kangk26@foxmail.com>
Date: Tue, 14 Dec 2021 18:33:01 +0800
Subject: [PATCH] 图片详情页，关键词、简介状态栏高亮线太长，并且与下面正文有分割线
---
src/views/scenery/detailImage.vue | 49 +++++++++++++++++++++++++++++++++++++++----------
1 files changed, 39 insertions(+), 10 deletions(-)
diff --git a/src/views/scenery/detailImage.vue b/src/views/scenery/detailImage.vue
index 07a9a97..a4986ef 100644
--- a/src/views/scenery/detailImage.vue
+++ b/src/views/scenery/detailImage.vue
@@ -12,6 +12,7 @@
<mt-tab-item id="1">关键词</mt-tab-item>
<mt-tab-item id="2">简介</mt-tab-item>
</mt-navbar>
+ <div class="line"></div>
<mt-tab-container v-model="navIndex">
<mt-tab-container-item id="1">
{{ image.keyWord }}
@@ -69,6 +70,8 @@
</script>
<style scoped>
+
+
.data-detail-image {
width: 100%;
}
@@ -99,27 +102,52 @@
margin-left: 5%;
}
-.mint-navbar{
- margin-bottom: 4vh;
+.content > .line{
+ width: 100%;
+ background: #F8F8F8;
+ margin-left: 0;
+ height: 1vh;
}
-.mint-navbar .mint-tab-item /deep/ .mint-tab-item-label {
+.mint-navbar {
+ width: 100%;
+}
+
+.mint-navbar /deep/ .mint-tab-item{
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ padding: 7px 0;
+}
+
+.mint-navbar /deep/ .mint-tab-item-label {
+ width: 8rem;
font-size: 2rem;
font-family: Source Han Sans CN;
font-weight: 500;
- line-height: 3rem;
+ line-height: 2rem;
color: #767676;
opacity: 1;
+
+ padding: 10px 0;
}
-.mint-navbar .is-selected {
- border-bottom: 0.3rem solid #BC0000;
-}
-
-.mint-navbar .is-selected /deep/ .mint-tab-item-label {
+.mint-navbar /deep/ .is-selected {
color: #BC0000;
- font-weight: bold;
+ border-bottom: 0px;
}
+
+.mint-navbar /deep/ .is-selected .mint-tab-item-label {
+ color: #BC0000;
+ border-bottom: 0.3vh solid #BC0000;
+}
+
+.mint-tab-container {
+ width: 100%;
+}
+
.mint-tab-container {
text-align: left;
@@ -129,5 +157,6 @@
line-height: 3rem;
color: #585858;
opacity: 1;
+ margin-top: 2vh;
}
</style>
--
Gitblit v1.9.3