| | |
|---|
| | | <template> |
|---|
| | | <div class="data-detail-image"> |
|---|
| | | <div class="images"> |
|---|
| | | <mt-swipe :show-indicators="false" :auto="0" :continuous="false" @change="ChangeImage"> |
|---|
| | | <mt-swipe-item v-for="item in images.data" :key="item.key"> |
|---|
| | | <img :src="item.path"/> |
|---|
| | | </mt-swipe-item> |
|---|
| | | </mt-swipe> |
|---|
| | | </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 }} |
|---|
| | | </mt-tab-container-item> |
|---|
| | | <mt-tab-container-item id="2"> |
|---|
| | | {{ image.introduction }} |
|---|
| | | </mt-tab-container-item> |
|---|
| | | </mt-tab-container> |
|---|
| | | </div> |
|---|
| | | </div> |
|---|
| | | <div class="data-detail-image"> |
|---|
| | | <div class="images"> |
|---|
| | | <mt-swipe :show-indicators="false" :auto="0" :continuous="false" @change="ChangeImage"> |
|---|
| | | <mt-swipe-item v-for="item in images.data" :key="item.key"> |
|---|
| | | <img :src="item.path"/> |
|---|
| | | </mt-swipe-item> |
|---|
| | | </mt-swipe> |
|---|
| | | </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 == "" ? "暂无内容" : 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> |
|---|
| | | </template> |
|---|
| | | |
|---|
| | | <script> |
|---|
| | | import {GetImageDetail as Api_GetImageDetail} from "@/api/apilist"; |
|---|
| | | |
|---|
| | | export default { |
|---|
| | | name: "detailImage", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | navIndex: "1", |
|---|
| | | images: { |
|---|
| | | pageSize: 10, |
|---|
| | | currentPage: 1, |
|---|
| | | total: 0, |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | image: { |
|---|
| | | id: "", |
|---|
| | | name: "", |
|---|
| | | path: "", |
|---|
| | | keyWord: "", |
|---|
| | | introduction: "", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ChangeImage: function (index) { |
|---|
| | | this.image = this.images.data[index]; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | let imageId = this.$route.query.id; |
|---|
| | | let objId = this.$route.query.objId; |
|---|
| | | Api_GetImageDetail(imageId, 1, objId, 999).then(res => { |
|---|
| | | this.images = res; |
|---|
| | | this.image = res.data[0]; |
|---|
| | | }, rej => { |
|---|
| | | alert(rej); |
|---|
| | | }).catch(err => { |
|---|
| | | console.log(err); |
|---|
| | | alert('错误的请求！'); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | name: "detailImage", |
|---|
| | | data() { |
|---|
| | | return { |
|---|
| | | navIndex: "1", |
|---|
| | | images: { |
|---|
| | | pageSize: 10, |
|---|
| | | currentPage: 1, |
|---|
| | | total: 0, |
|---|
| | | data: [] |
|---|
| | | }, |
|---|
| | | image: { |
|---|
| | | id: "", |
|---|
| | | name: "", |
|---|
| | | path: "", |
|---|
| | | keyWord: "", |
|---|
| | | introduction: "", |
|---|
| | | } |
|---|
| | | } |
|---|
| | | }, |
|---|
| | | methods: { |
|---|
| | | ChangeImage: function (index) { |
|---|
| | | this.image = this.images.data[index]; |
|---|
| | | }, |
|---|
| | | }, |
|---|
| | | created() { |
|---|
| | | let imageId = this.$route.query.id; |
|---|
| | | let objId = this.$route.query.objId; |
|---|
| | | Api_GetImageDetail(imageId, 1, objId, 999).then(res => { |
|---|
| | | this.images = res; |
|---|
| | | this.image = res.data[0]; |
|---|
| | | }, rej => { |
|---|
| | | alert(rej); |
|---|
| | | }).catch(err => { |
|---|
| | | console.log(err); |
|---|
| | | alert('错误的请求！'); |
|---|
| | | }); |
|---|
| | | } |
|---|
| | | } |
|---|
| | | </script> |
|---|
| | | |
|---|
| | |
|---|
| | | |
|---|
| | | |
|---|
| | | .data-detail-image { |
|---|
| | | width: 100%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .images { |
|---|
| | | width: 100%; |
|---|
| | | height: 31.5vh; |
|---|
| | | width: 100%; |
|---|
| | | height: 31.5vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .images img { |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | object-fit: cover; |
|---|
| | | width: 100%; |
|---|
| | | height: 100%; |
|---|
| | | object-fit: cover; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content { |
|---|
| | | width: 100%; |
|---|
| | | height: 66vh; |
|---|
| | | box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|---|
| | | opacity: 1; |
|---|
| | | border-radius: 10px; |
|---|
| | | width: 100%; |
|---|
| | | height: 66vh; |
|---|
| | | box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.16); |
|---|
| | | opacity: 1; |
|---|
| | | border-radius: 10px; |
|---|
| | | |
|---|
| | | padding-top: 1vh; |
|---|
| | | padding-top: 1vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content > div{ |
|---|
| | | width: 90%; |
|---|
| | | margin-left: 5%; |
|---|
| | | .content > div { |
|---|
| | | width: 90%; |
|---|
| | | margin-left: 5%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .content > .line{ |
|---|
| | | width: 100%; |
|---|
| | | background: #F8F8F8; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 1vh; |
|---|
| | | .content > .line { |
|---|
| | | width: 100%; |
|---|
| | | background: #F8F8F8; |
|---|
| | | margin-left: 0; |
|---|
| | | height: 1vh; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mint-navbar { |
|---|
| | | width: 100%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mint-navbar /deep/ .mint-tab-item{ |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | .mint-navbar /deep/ .mint-tab-item { |
|---|
| | | display: flex; |
|---|
| | | flex-direction: column; |
|---|
| | | justify-content: center; |
|---|
| | | align-items: center; |
|---|
| | | |
|---|
| | | padding: 7px 0; |
|---|
| | | 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: 2rem; |
|---|
| | | color: #767676; |
|---|
| | | opacity: 1; |
|---|
| | | width: 8rem; |
|---|
| | | font-size: 2rem; |
|---|
| | | font-family: Source Han Sans CN; |
|---|
| | | font-weight: 500; |
|---|
| | | line-height: 2rem; |
|---|
| | | color: #767676; |
|---|
| | | opacity: 1; |
|---|
| | | |
|---|
| | | padding: 10px 0; |
|---|
| | | padding: 10px 0; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mint-navbar /deep/ .is-selected { |
|---|
| | | color: #BC0000; |
|---|
| | | border-bottom: 0px; |
|---|
| | | color: #BC0000; |
|---|
| | | border-bottom: 0px; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mint-navbar /deep/ .is-selected .mint-tab-item-label { |
|---|
| | | color: #BC0000; |
|---|
| | | border-bottom: 0.3vh solid #BC0000; |
|---|
| | | color: #BC0000; |
|---|
| | | border-bottom: 0.3vh solid #BC0000; |
|---|
| | | } |
|---|
| | | |
|---|
| | | .mint-tab-container { |
|---|
| | | width: 100%; |
|---|
| | | width: 100%; |
|---|
| | | } |
|---|
| | | |
|---|
| | | |
|---|
| | | .mint-tab-container { |
|---|
| | | text-align: left; |
|---|
| | | font-size: 1.87rem; |
|---|
| | | font-family: Source Han Serif CN; |
|---|
| | | font-weight: 400; |
|---|
| | | line-height: 3rem; |
|---|
| | | color: #585858; |
|---|
| | | opacity: 1; |
|---|
| | | margin-top: 2vh; |
|---|
| | | text-align: left; |
|---|
| | | font-size: 1.87rem; |
|---|
| | | font-family: Source Han Serif CN; |
|---|
| | | font-weight: 400; |
|---|
| | | line-height: 3rem; |
|---|
| | | color: #585858; |
|---|
| | | opacity: 1; |
|---|
| | | margin-top: 2vh; |
|---|
| | | } |
|---|
| | | </style> |
|---|
