From a7efb7d64225639c2eca1175b96c8d5b64b40c13 Mon Sep 17 00:00:00 2001
From: 康凯 <kangk26@foxmail.com>
Date: Thu, 27 Jan 2022 10:58:55 +0800
Subject: [PATCH] 修复：相关图片列表页面因屏幕长度太小造成排版混乱
---
src/views/scenery/detailImage.vue | 75 ++++++++++++++++++++++++++++++++-----
1 files changed, 64 insertions(+), 11 deletions(-)
diff --git a/src/views/scenery/detailImage.vue b/src/views/scenery/detailImage.vue
index 07a9a97..7d609ab 100644
--- a/src/views/scenery/detailImage.vue
+++ b/src/views/scenery/detailImage.vue
@@ -6,12 +6,14 @@
<img :src="item.path"/>
</mt-swipe-item>
</mt-swipe>
+ <div class="swipe-tip">{{ swipeTip.current }}/{{ swipeTip.total }}</div>
</div>
<div class="content">
<mt-navbar v-model="navIndex">
<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 }}
@@ -44,12 +46,17 @@
path: "",
keyWord: "",
introduction: "",
+ },
+ swipeTip: {
+ current: 0,
+ total: 0
}
}
},
methods: {
ChangeImage: function (index) {
this.image = this.images.data[index];
+ this.swipeTip.current = index + 1;
},
},
created() {
@@ -58,6 +65,8 @@
Api_GetImageDetail(imageId, 1, objId, 999).then(res => {
this.images = res;
this.image = res.data[0];
+ this.swipeTip.current = 1;
+ this.swipeTip.total = res.data.length;
}, rej => {
alert(rej);
}).catch(err => {
@@ -69,6 +78,8 @@
</script>
<style scoped>
+
+
.data-detail-image {
width: 100%;
}
@@ -76,6 +87,7 @@
.images {
width: 100%;
height: 31.5vh;
+ position: relative;
}
.images img {
@@ -94,32 +106,57 @@
padding-top: 1vh;
}
-.content > div{
+.content > div {
width: 90%;
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 +166,21 @@
line-height: 3rem;
color: #585858;
opacity: 1;
+ margin-top: 2vh;
+}
+
+.swipe-tip {
+ width: 15vw;
+ position: absolute;
+ right: 5vw;
+ bottom: 2vh;
+
+ font-size: 1.5rem;
+ font-family: Source Han Sans CN;
+ font-weight: 400;
+ line-height: 3.37rem;
+ color: #FFFFFF;
+ background: rgba(0, 0, 0, 0.6);
+ border-radius: 100px
}
</style>
--
Gitblit v1.9.3