洛阳学员端
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

66 lines
1.3 KiB

10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
10 months ago
  1. <template>
  2. <view class="tabCon">
  3. <view class="tab1">
  4. <view class="card" v-for="(item,index) in siteList" :key="index">
  5. <view class="name">{{ item.name }}</view>
  6. <view class="adr">{{ item.address }}</view>
  7. <view class="flex-b">
  8. <view class="distance">距您 {{ $u.utils.distanceFn(item.distance) }}</view>
  9. <view class="btn" @click="mapClick(item)">导航</view>
  10. </view>
  11. </view>
  12. </view>
  13. </view>
  14. </template>
  15. <script>
  16. export default {
  17. props: ['siteList'],
  18. methods: {
  19. mapClick(item) {
  20. this.$u.utils.openMap(item.lat,item.lng)
  21. }
  22. }
  23. }
  24. </script>
  25. <style lang="scss" scoped>
  26. .tabCon {
  27. width: 100%;
  28. .tab1 {
  29. width: 100%;
  30. .card {
  31. padding: 28rpx 28rpx 28rpx 36rpx;
  32. border-bottom: 1rpx solid #F4F4F4;
  33. .name {
  34. font-size: 32rpx;
  35. color: #333;
  36. margin-bottom: 8rpx;
  37. }
  38. .adr {
  39. font-size: 24rpx;
  40. color: #999;
  41. margin-bottom: 10rpx;
  42. }
  43. .flex-b {
  44. .distance {
  45. font-size: 24rpx;
  46. color: #666;
  47. }
  48. .btn {
  49. width: 130rpx;
  50. height: 60rpx;
  51. background: rgba(25,137,250,0.1);
  52. border: 2rpx solid #1989FA;
  53. border-radius: 8rpx;
  54. font-size: 28rpx;
  55. color: $themC;
  56. text-align: center;
  57. line-height: 60rpx;
  58. }
  59. }
  60. }
  61. }
  62. }
  63. </style>