123 lines
5.1 KiB
HTML
123 lines
5.1 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
|
|
<title>Title</title>
|
|
<link rel="stylesheet" href="css/reset.css">
|
|
<link rel="stylesheet" href="css/swiper.css">
|
|
<link rel="stylesheet" href="css/style.css">
|
|
<script src="js/rem.js"></script>
|
|
</head>
|
|
<body>
|
|
<div id="app" v-cloak>
|
|
<div class="swiper mySwiper detail-swiper">
|
|
<div class="swiper-wrapper">
|
|
<div class="swiper-slide" v-for="item in heritageDetail.libraryCover">
|
|
<a href="javascript: void(0);">
|
|
<img :src="requestUrl + 'library/route/file/downloadfile/true/' + item" alt="">
|
|
</a>
|
|
</div>
|
|
</div>
|
|
<div class="swiper-pagination"></div>
|
|
</div>
|
|
<div class="heritage-info">
|
|
<h3>{{heritageDetail.libraryTitle}}</h3>
|
|
<p class="num">
|
|
<span>项目编号：</span>{{heritageDetail.libraryNumber}}
|
|
</p>
|
|
<p class="time">
|
|
<span>公布时间：</span>{{heritageDetail.libraryApplyTime}}
|
|
</p>
|
|
<p class="heritage-area">
|
|
<span>所属地区：</span>{{heritageDetail.libraryArea}}
|
|
</p>
|
|
<p class="org">
|
|
<span>申报地区或单位：</span>{{heritageDetail.libraryAddress}}
|
|
</p>
|
|
<p class="from">
|
|
<span>数据来源：</span>{{heritageDetail.librarySource}}
|
|
</p>
|
|
<p class="lv">
|
|
<span>非遗等级：</span>{{heritageDetail.libraryLevel}}级
|
|
</p>
|
|
<p class="type">
|
|
<span>类型：</span>{{heritageDetail.libraryTypeValue}}
|
|
</p>
|
|
<p class="protect">
|
|
<span>保护单位：</span>{{heritageDetail.libraryAuthor}}
|
|
</p>
|
|
</div>
|
|
<div class="heritage-desc">
|
|
<h3>相关描述</h3>
|
|
<div class="heritage-desc-box" v-html="heritageDetail.librarySummary"></div>
|
|
</div>
|
|
<div class="heritage-people">
|
|
<h3>相关传承人</h3>
|
|
<div class="heritage-people-box" v-for="people in heritagePeople">
|
|
<div class="heritage-people-name">
|
|
<div class="heritage-people-num">{{people.libraryPersonNumber}}</div>
|
|
<div class="heritage-people-name-box">
|
|
{{people.libraryPersonName}}
|
|
<img src="image/man.png" alt="" v-if="people.libraryPersonSex == '1'">
|
|
<img src="image/woman.png" alt="" v-else>
|
|
</div>
|
|
</div>
|
|
<div class="heritage-people-info">
|
|
<div class="heritage-people-info-box">
|
|
<span>民族：</span>{{people.libraryPersonNationDictionaryName}}
|
|
</div>
|
|
<div class="heritage-people-info-box">
|
|
<span>出生日期：</span>{{people.libraryPersonBirthday}}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script src="js/vue.js"></script>
|
|
<script src="js/jquery-2.1.4.min.js"></script>
|
|
<script src="js/ajax.js"></script>
|
|
<script src="js/swiper.js"></script>
|
|
<script>
|
|
var vue = new Vue({
|
|
el: '#app',
|
|
data: {
|
|
requestUrl: 'http://219.159.20.131:8081/',
|
|
heritageId: '',
|
|
heritageDetail: {},
|
|
heritagePeople: []
|
|
},
|
|
methods: {
|
|
getHeritageDetail: function () {
|
|
var self = this
|
|
doGetForm(self.requestUrl + 'library/app/intangiblelibrary/getintangiblelibrarybyidrelease/' + self.heritageId, {}, {}, function (code, data) {
|
|
data.libraryCover = data.libraryCover.split(',')
|
|
data.libraryApplyTime = data.libraryApplyTime.split(' ')[0]
|
|
self.heritageDetail = data
|
|
self.$nextTick(function () {
|
|
var swiper = new Swiper(".mySwiper", {
|
|
pagination: '.swiper-pagination',
|
|
paginationClickable: true,
|
|
autoplay: 3000
|
|
});
|
|
})
|
|
})
|
|
},
|
|
getHeritagePeople: function () {
|
|
var self= this
|
|
doGetForm(self.requestUrl + 'library/app/intangiblelibraryperson/listintangiblelibrarypersonrelease', {
|
|
intangibleLibraryId: self.heritageId
|
|
}, {}, function (code, data) {
|
|
self.heritagePeople = data
|
|
})
|
|
}
|
|
},
|
|
mounted: function () {
|
|
this.heritageId = window.location.search.replace('?','').split('=')[1]
|
|
this.getHeritageDetail()
|
|
this.getHeritagePeople()
|
|
}
|
|
})
|
|
</script>
|
|
</body>
|
|
</html> |