<%@ 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>