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/scenery/detailImage.vue | 42 +++++++++++++++++++++++++++++++++---------
1 files changed, 33 insertions(+), 9 deletions(-)
diff --git a/src/views/scenery/detailImage.vue b/src/views/scenery/detailImage.vue
index a4986ef..ee8e973 100644
--- a/src/views/scenery/detailImage.vue
+++ b/src/views/scenery/detailImage.vue
@@ -6,6 +6,7 @@
<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">
@@ -14,12 +15,12 @@
</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>
@@ -45,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() {
@@ -59,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 => {
@@ -79,6 +87,7 @@
.images {
width: 100%;
height: 31.5vh;
+ position: relative;
}
.images img {
@@ -97,12 +106,12 @@
padding-top: 1vh;
}
-.content > div{
+.content > div {
width: 90%;
margin-left: 5%;
}
-.content > .line{
+.content > .line {
width: 100%;
background: #F8F8F8;
margin-left: 0;
@@ -113,7 +122,7 @@
width: 100%;
}
-.mint-navbar /deep/ .mint-tab-item{
+.mint-navbar /deep/ .mint-tab-item {
display: flex;
flex-direction: column;
justify-content: center;
@@ -159,4 +168,19 @@
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