From ef6159d225ce3c085031b7670e651c367dc6cb9b Mon Sep 17 00:00:00 2001
From: 康凯 <kangk26@foxmail.com>
Date: Mon, 23 May 2022 19:55:07 +0800
Subject: [PATCH] 样式
---
src/views/spirit/detailImage.vue | 61 ++++++++++++++++++++++--------
1 files changed, 45 insertions(+), 16 deletions(-)
diff --git a/src/views/spirit/detailImage.vue b/src/views/spirit/detailImage.vue
index 07a9a97..0f827f8 100644
--- a/src/views/spirit/detailImage.vue
+++ b/src/views/spirit/detailImage.vue
@@ -12,13 +12,14 @@
<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 }}
- </mt-tab-container-item>
- <mt-tab-container-item id="2">
- {{ image.introduction }}
- </mt-tab-container-item>
+ <mt-tab-container-item id="1">
+ {{ image.keyWord == "" ? "暂无内容" : image.keyWord }}
+ </mt-tab-container-item>
+ <mt-tab-container-item id="2">
+ {{ image.introduction == "" ? "暂无内容" : image.introduction }}
+ </mt-tab-container-item>
</mt-tab-container>
</div>
</div>
@@ -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