<%@ page language="java" contentType="text/html; charset=utf-8"
pageEncoding="utf-8"%>
<%@include file="../common/common.jsp"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
<title>美丽乡村</title>
<style type="text/css">
#country {
overflow-y: auto;
overflow-x: hidden;
}
.countryItem {
margin-bottom: 10px;
color: #333;
}
.countryTexeCon {
padding: 10px 15px;
background-color: #ffffff;
}
.countryName {
padding-bottom: 5px;
color: #333;
}
.countryPro {
color: #929292;
font-size: 14px;
height: auto;
word-break: break-all;
}
.countryItem>img {
width: calc(100% - 6px);
height: 100%;
border: 3px solid #f1f1f1;
}
.countryText {
position: relative;
}
.countryTextTitle {
padding: 15px 0px;
position: absolute;
top: 0px;
left: 0px;
border-bottom: 1px solid #cccccc;
color: #333;
width: 100%;
text-align: center;
font-size: 21px;
background-color: #fbfbfb;
}
.countryTextTitle>img {
position: absolute;
top: 9px;
left: 12px;
width: 21px;
padding: 10px;
}
.countryText {
padding-top: 60px;
background-color: #fff;
}
.countryTextBody {
padding: 15px;
}
.countryTextBody .text {
text-indent: 28px;
}
.countryTextBody2 img {
max-width: 95%;
margin: 5px auto;
display: inherit;
}
.goArea {
margin-top: 5px;
padding: 5px 0;
background-color: aliceblue;
position: relative;
height: 25px;
}
.goArea>img {
position: absolute;
left: 10px;
top: 5px;
width: 23px;
}
.goArea>div {
position: absolute;
right: 10px;
top: 6px;
}
.goWay {
background-color: #0DBEF5;
color: white;
border-radius: 5px;
font-size: 14px;
padding: 2px 10px;
padding-left: 22px;
margin-left: 10px;
cursor: pointer;
position: relative;
}
.goWayImg {
position: absolute;
top: 2px;
left: 5px;
width: 16px;
}
.countryTextBody img{
max-width:100%;
}
[v-cloak] {
display: none;
}
</style>
</head>
<body style="background-color: #fbf7e9;">
<div id="country" v-cloak>
<div class="countryList" v-show="bl">
<div class="countryItem" v-for="(item,index) in countryList"
@click="goCountryText(item)">
<img :src=item.pictureUpload />
<div class="countryTexeCon">
<div class="countryName">{{item.name}}</div>
<div class="countryPro">{{item.brief}}</div>
</div>
</div>
</div>
<div class="countryText" v-show="!bl">
<div class="countryTextTitle">
<span>{{countryText.name}}</span> <img src="image/leftArrow.png"
@click="backCountryList()" />
</div>
<div class="countryTextBody">
<div v-html='countryText.description'></div>
<div class="goArea">
<img src="image/goArea.png">
<div>
<span class="goWay">公交<img class="goWayImg"
src="image/busIc.png"></span> <span class="goWay">驾车<img
class="goWayImg" src="image/driveIc.png"></span> <span
class="goWay">步行<img class="goWayImg"
src="image/walkIc.png"></span>
</div>
</div>
</div>
</div>
</div>
<div id="textR"></div>
</body>
<script type="text/javascript">
var base = $("base").attr("href");
var country = new Vue(
{
el : '#country',
created : function() {
this.$http(
{
url : base+"rest/transportCountry?id=",
}).then(
function(res) {
var tempC = res.data;
for (var i = 0; i < tempC.length; i++) {
var str = tempC[i].description;
var temp = document.getElementById("textR");
temp.innerHTML = str;
var output = temp.innerText || temp.textContent;
temp.innerHTML = "";
console.debug(tempC[i].description);
tempC[i].description = output;
}
this.countryList = tempC;
});
},
data : {
countryList : "",
bl : true,
countryText : {
name : "",
info : []
}
},
methods : {
goCountryText : function(item) {
this.bl = false;
this.countryText = item;
},
backCountryList : function() {
this.bl = true;
}
}
});
function updateBusSize() {
$("#country").height($(window).height());
};
// 更新页面元素高度
updateBusSize();
$(window).resize(function() {
updateBusSize();
});
var nowA = "";
var geolocation = new BMap.Geolocation();
geolocation.getCurrentPosition(function(r) {
if (this.getStatus() == BMAP_STATUS_SUCCESS) {
nowA = r.point.lat + ',' + r.point.lng;
} else {
alert('failed' + this.getStatus());
}
}, {
enableHighAccuracy : true
});
$(".goWay").click(
function() {
var way = $(this).text();
var goway = "";
if (way == "公交") {
goway = "transit";
} else if (way == "驾车") {
goway = "driving";
} else if (way == "步行") {
goway = "walking";
}
location.href = "http://api.map.baidu.com/direction?origin=latlng:"
+ nowA
+ "|name:&destination=latlng:"
+ country.countryText.lat
+ ","
+ country.countryText.lng
+ "|name:"
+ country.countryText.name
+ "&mode="
+ goway
+ "®ion=南京&output=html&src=yourCompanyName|yourAppName"
});
</script>
</html>
