15分钟

package.json

@@ -12,7 +12,7 @@
     "@amap/amap-jsapi-loader": "^1.0.1",
     "axios": "^0.27.2",
     "core-js": "^3.6.5",
-    "echarts": "^4.8.0",
+    "echarts": "^4.9.0",
     "image-conversion": "^2.1.1",
     "lib-flexible": "^0.3.2",
     "node-sass": "^4.14.1",

src/views/zhulao/api/index.js

@@ -92,4 +92,32 @@ export function queryaction(params) {
         requestBase: 'VUE_APP_ZL_HEALTH',
         params
     })
+}
+
+// 查询全部机构分类
+export function institutional(params) {
+    return request({
+        url: '/cms/portal/institutions-type/treeselect',
+        method: 'get',
+        requestBase: 'VUE_APP_ZL_WSS_ZP',
+        params
+    })
+}
+// // 15分钟生活圈搜索接口
+export function institutions_search(params) {
+    return request({
+        url: '/cms/portal/institutions/list',
+        method: 'get',
+        requestBase: 'VUE_APP_ZL_WSS_ZP',
+        params
+    })
+}
+// 获取养老机构管理详细信息 /cms/portal/institutions/{id}
+export function institutions_detail(id,params) {
+    return request({
+        url: '/cms/portal/institutions/' + id,
+        method: 'get',
+        requestBase: 'VUE_APP_ZL_WSS_ZP',
+        params
+    })
 }

src/views/zhulao/router/router.js

@@ -43,6 +43,22 @@ const routes = [{
              },
              component: () => import('../views/circle/index.vue')
     },
+    {
+        path: '/list',
+        name: 'list',
+        meta: {
+            keepAlive: false
+        },
+        component: () => import('../views/circle/list.vue')
+    },
+    {
+        path: '/detail',
+        name: 'detail',
+        meta: {
+            keepAlive: false
+        },
+        component: () => import('../views/circle/detail.vue')
+    },
     {
         path: '/goodsDetails',
         name: 'goodsDetails',

src/views/zhulao/views/circle/detail.vue

@@ -0,0 +1,214 @@
+<template>
+  <div class="page">
+    <van-nav-bar title="中心详情" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <div class="loop_image">
+        <van-image :src="institutionsItem.coverImgUrl" lazy-load fit="fill" />
+    </div>
+    <div class="info_top">
+        <div class="name_bg">
+            <div class="name">{{institutionsItem.name?institutionsItem.name:''}}</div>
+        </div>
+        <div class="phone_bg">
+            <div>{{institutionsItem.contact?institutionsItem.contact:''}} {{institutionsItem.phone?institutionsItem.phone:''}}</div>
+        </div>
+        <div class="address_bg">
+            <div>{{institutionsItem.detailedAddress}}</div>
+        </div>
+    </div>
+
+    <div class="info_center">
+        <span class="title">基本信息</span>
+        <div class="content">
+        <div>
+            <span>服务对象:</span>
+            <span class="label">{{institutionsItem.serviceObject?institutionsItem.serviceObject:''}}</span>
+        </div>
+        <div v-if="institutionsItem.isCharge">
+            <span>收费标准:</span>
+            <span class="label">{{institutionsItem.chargingTandard?institutionsItem.chargingTandard:''}}</span>
+        </div>
+        <div v-if="institutionsItem.isCharge">
+            <span>空闲床位数:</span>
+            <span class="label">{{institutionsItem.bedNo?institutionsItem.bedNo:''}}</span>
+        </div>
+        </div>
+    </div>
+
+    <div class="info_center">
+        <span class="title">服务项目</span>
+        <div class="content minHeight">
+            {{institutionsItem.serviceItems?institutionsItem.serviceItems:''}}
+        </div>
+    </div>
+
+    <div class="info_center">
+        <span class="title">服务详情</span>
+        <div class="content">
+           {{institutionsItem.content}}
+        </div>
+    </div>
+
+  </div>
+</template>
+<script>
+import {institutions_detail} from '../../api/index.js'
+export default {
+    data() {
+        return {
+            institutionsId:'',
+            institutionsItem:{}
+        }
+    },
+    filters: {},
+    mounted() {
+    },
+    created() {
+        this.institutionsId = this.$route.query.institutionsId
+        this.getInstitutions_detail()
+    },
+    methods: {
+        async getInstitutions_detail() {
+            var detailData = await institutions_detail( this.institutionsId,{})
+            this.institutionsItem = detailData.data
+            console.log(this.institutionsItem)
+        },
+    }
+}
+</script>
+<style lang="scss" scoped>
+.page {
+  background-color: #f5f5f5;
+  width: 100%;
+  height: 100%;
+}
+.loop_image {
+    width: 100%;
+    height: 320px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    .van-image {
+        width: 100%;
+        height: 100%;
+    }
+}
+
+.info_top {
+    width: 100%;
+    height: auto;
+    padding: 10px;
+    box-sizing: border-box;
+    .name_bg {
+        display: flex; 
+        justify-content: space-between;
+        align-items: center;
+    }
+    .name {
+        flex: .7;
+        color: black;
+        font-weight: 600;
+        font-size: 36px;
+    }
+}
+.phone_bg {
+  margin-top: 20px;
+  font-size: 32px;
+  color: rgb(49, 49, 49);
+}
+.info_center {
+  padding: 10px;
+  box-sizing: border-box;
+}
+.info_center .title {
+  display: inline-block;
+  width: auto;
+  height: 50px;
+  border-left: 5px rgb(32, 126, 248) solid;
+  padding-left: 10px;
+  box-sizing: border-box;
+  font-size: 34px;
+  font-weight: 600;
+  color: black;
+}
+.info_center .content {
+    font-size: 32px;
+    width: 100%;
+    height: auto;
+    background-color: #fff;
+    border-radius: 10px;
+    padding: 20px;
+    box-sizing: border-box;
+}
+.label {
+     margin-left: 10px;
+}
+.minHeight {
+    min-height: 20px;
+}
+
+
+
+
+.item_bg {
+  padding: 10px 15px;
+  box-sizing: border-box;
+  width: 96%;
+  min-height: 220px;
+  border-radius: 10px;
+  background-color: white;
+  margin: 10px auto;
+  font-size: 32px;
+}
+.top_bg {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.name {
+  flex: .8;
+}
+.distance_bg {
+  flex: .2;
+}
+.distance_icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 10rpx;
+}
+.dis_text {
+  color: rgb(243, 99, 80);
+  font-size: 28px;
+}
+.judge_bg {
+  width: 100%;
+  height: auto;
+}
+.address_bg {
+  width: 100%;
+  height: auto;
+  color: #3a3939;
+  font-size: 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.location_icon {
+  width: 30px;
+  height: 30px;
+  margin: 7px 10px 0 0;
+}
+.judge_bg {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 6px 0;
+}
+.star_icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 6px;
+}
+
+</style>

src/views/zhulao/views/circle/index.vue

@@ -1,6 +1,20 @@
 <template>
   <div class="page">
     <van-nav-bar title="养老服务圈" fixed placeholder safe-area-inset-top />
+    
+    <div class="input_bg">
+      <image class="search-icon" src="/images/elderly/search.png"></image>
+      <van-search id="address" class="text" placeholder="搜索" @input="addressInputAction" />
+      <div class="list_bg" @click="jumpRows">
+        <van-image :src="require('../../assets/images/elderly/line.png')"></van-image>
+        <span>列表</span>
+      </div>
+      <!-- <input bindinput="addressInputAction" id="address" class="text" placeholder="搜索" /> -->
+    </div>
+    <van-tabs @click="clickTab" sticky offset-top="80">
+      <van-tab v-for="item in categorieList" sticky :key="item.id" :title="item.name" :name="item.id" >
+      </van-tab>
+    </van-tabs>
      <div
           class="map_bg"
           id="container_home"
@@ -13,28 +27,172 @@
 <script>
 import Tabbar from '../../components/Tabbar.vue'
 import AMapLoader from "@amap/amap-jsapi-loader";
-const map = ''
-const AMapOut =''
-const placeSearch = ''
-const address = ''
+import { institutional,institutions_search} from '../../api/index.js'
+window._AMapSecurityConfig = {
+  securityJsCode: '0f17176ade9bdeee2ed7b9990e6423bd',
+};
+const radius = 2500 //圆半径
+var map
+var AMapOut
+var infoWindow
+var placeSearch = ''
+var address = ''
 export default {
     components: { Tabbar },
     data() {
       return {
-       
+        categoryId:'',
+        addressInput:'',
+        allInfo: {
+          id: "",
+          dictCode: 0,
+          name: "全部",
+          children: [],
+          dictSort: 0,
+          dictType: "cms_institutional_nature",
+        },
+        categorieList: [],
+        latitude: 22.5436,
+        longitude: 114.057999,
+        institutionList: [], //获取的机构
+        markers:[]
       }
     },
+    mounted() {
+      this.mapInit()
+    },
     created() {
-      this.initMap()
+      window.jumpDetailTap=(id)=>{
+         console.log('跳转到详情页:'+id);
+          this.$router.push({path:'/detail',query:{institutionsId:id}})
+      }
+      this.getInstitutional()
+      // this.getInstitutions_search()
     },
   methods: {
+    async getInstitutional() {
+      var institutionalData = await institutional();
+      institutionalData.data.splice(0, 0, this.allInfo);
+      this.categorieList = institutionalData.data
+    },
+
+     async getInstitutions_search(naturesType) {
+      console.log('tab点击2:'+naturesType)
+      var institutionSearch = await institutions_search({
+        "radius": radius,
+        "institutionalTypeList": naturesType,
+        "lat": this.latitude,
+        "lng": this.longitude
+      })
+      console.log('tab点击3:'+institutionSearch.rows)
+      let markersTemp = []
+      institutionSearch.rows.forEach((e, index) => {
+        markersTemp.push(this.formatData(e, index))
+      });
+      console.log("15分钟搜索接口");
+      console.log(markersTemp);
+      this.institutionList = institutionSearch.rows
+      this.markers = markersTemp
+      this.addMarkers();
+    },
+
+    addMarkers() {
+      this.markers.forEach((item, index) => {
+          let markerContent = '' +
+          '<div class="custom-content-marker">' +
+          '   <img :src="item.iconPath" />' +
+          '</div>';
+          var marker = new AMapOut.Marker({
+            position: new AMapOut.LngLat(item.longitude,item.latitude),
+            // content:markerContent,
+            offset: new AMapOut.Pixel(0, 0),
+            icon: item.iconPath, // 添加 Icon 图标 URL
+            title: item.id
+          });
+          marker.on('click', markerTap);
+          function markerTap(e) {
+            console.log('markerTap:')
+            console.log(e)
+            // var positionInfo = map.getPosition()
+            // console.log('positionInfo:')
+            // console.log(positionInfo)
+            // 在地图上打开信息窗体
+             var windowContent =  
+            '<div class="customCallout" onclick="jumpDetailTap('+ `${item.id}`+')">' +
+            '<div class="customCallout_top">' +
+              '<img class="icon" src=' + `${item.coverImgUrl}` + ' />' +
+              '<div class="callout-right">' +
+                '<div class="title">' +
+                   `${item.name}` +
+                '</div>'+
+                '<div class="name">' +
+                  `${item.contact}` + `${item.phone}` +
+                '</div>' +
+              '</div>' +
+            '</div>'+
+            '<div class="address">' +
+              `${item.detailedAddress}`+
+            '</div>' +
+            
+            '</div>';
+            infoWindow.setContent(windowContent);
+            // infoWindow.on('click', function windowCallback(e) {
+            //   console.log('窗体点击')
+            //   console.log(e)
+            //   // this.$router.push({path:'/detail',query:{institutionsId:e.id}})
+            // });
+
+            infoWindow.open(map, [e.lnglat.lng,e.lnglat.lat]);
+          }
+          map.add(marker)
+      })
+    },
+
+    formatData(e, index) {
+      var mapIcon = this.getMapIcon(e.institutionalTypeId)
+      return {
+        id: e.id,
+        latitude: e.lat,
+        longitude: e.lng,
+        // iconPath:e.coverImgUrl ? e.coverImgUrl : '/image/location.png',
+        iconPath: mapIcon ? mapIcon : '/image/elderly/location.png',
+        width: 30,
+        height: 35,
+        name:e.name,
+        coverImgUrl:e.coverImgUrl,
+        contact:e.contact,
+        phone:e.phone,
+        detailedAddress:e.detailedAddress,
+        customCallout: {
+          display: 'BYCLICK', //ALWAYS  BYCLICK
+          anchorX: 0,
+          anchorY: -8
+        }
+      }
+    },
+
+    getMapIcon(institutionalTypeId) {
+      let mapIconUrl;
+      try {
+        this.categorieList.forEach((item, index) => {
+          item.children.forEach((childItem, childIndex) => {
+            if (institutionalTypeId == childItem.id) {
+              mapIconUrl = childItem.mapIconUrl
+              throw Error();
+            }
+          });
+        });
+      } catch (e) {}
+      return mapIconUrl
+    },
+
     /**地图初始化 */
     async initMap() {
         await AMapLoader.load({
-        key: process.env.VITE_APP_AMAP_KEY,
-        version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-        plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
-      })
+          key: "017ac002b4b1a16ec87b2182b17bbed9", //process.env.VITE_APP_AMAP_KEY,
+          version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          plugins: ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation"], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+        })
         .then((AMap) => {
           AMapOut.value = AMap;
           map.value = new AMap.Map("container_home", {
@@ -50,8 +208,8 @@ export default {
             input: "address",
           };
 
-          // var autocomplete = new AMap.AutoComplete(autoOptions);
-          placeSearch.value = new AMap.PlaceSearch({
+          var autocomplete = new AMap.AutoComplete(autoOptions);
+            placeSearch.value = new AMap.PlaceSearch({
             city: "深圳",
             citylimit: true,
             pageSize: 1, // 单页显示结果条数
@@ -69,18 +227,251 @@ export default {
         .catch((e) => {
           console.log(e);
         });
+    },
+
+
+    async  mapInit(){
+      AMapOut =  await AMapLoader.load({
+          "key": "017ac002b4b1a16ec87b2182b17bbed9",   // 申请好的Web端开发者Key，首次调用 load 时必填
+          "version": "2.0",   // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
+          "plugins": ["AMap.PlaceSearch", "AMap.AutoComplete", "AMap.Geolocation","AMap.InfoWindow"]  //插件列表
+      })
+      map =new AMapOut.Map('container_home', {
+        // center: [117.743109, 36.862989],
+        center: [114.057999, 22.5436],
+        zoom: 11,
+        resizeEnable : true
+      });
+      var circle = new AMapOut.Circle({
+          center: new AMapOut.LngLat("114.057999", "22.5436"), // 圆心位置
+          radius: radius,  //半径
+          strokeColor: "#fff",  //线颜色
+          strokeOpacity: 1,  //线透明度
+          strokeWeight: 2,  //线粗细度
+          fillColor: '#3B82F670',
+          fillOpacity: 0.35 //填充透明度
+      });
+      map.add(circle);
+
+      var autoOptions = {
+        city: "邹平",
+        input: "address",
+      };
+
+      var autocomplete =new AMapOut.AutoComplete(autoOptions);
+
+      //  var windowContent =  
+      //   '<div class="custom-content-window">' +
+      //     '测试跳转跳转调准大幅度' +
+      //   '</div>';
+
+      infoWindow = new AMapOut.InfoWindow({
+        isCustom:true,
+        // content: windowContent,
+        anchor: 'top-center',
+        offset: [0,-135]
+      });
+      var geolocation =new AMapOut.Geolocation({
+        enableHighAccuracy: false,//是否使用高精度定位，默认:true
+        timeout: 30000,          //超过10秒后停止定位，默认：无穷大
+        maximumAge: 0,           //定位结果缓存0毫秒，默认：0
+        convert: true,          //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
+        showButton: true,        //显示定位按钮，默认：true
+        buttonPosition: 'RT',    //定位按钮停靠位置，默认：'LB'，左下角
+        buttonOffset: new AMapOut.Pixel(10, 20),//定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
+        showMarker: true,        //定位成功后在定位到的位置显示点标记，默认：true
+        showCircle: true,        //定位成功后用圆圈表示定位精度范围，默认：true
+        panToLocation: true,     //定位成功后将定位到的位置作为地图中心点，默认：true
+        zoomToAccuracy:true      //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false
+
+      });
+      map.addControl(geolocation);
+      geolocation.getCurrentPosition(function(status,result){
+        if(status=='complete'){
+            onComplete(result)
+        }else{
+            onError(result)
+        }
+      });
+      function onComplete(result) {
+        console.log(result)
+        
+      }
+      function  onError(err) {
+        console.log(err)
+      }
+    
+    },
+
+    // 地址栏输入
+    addressInputAction(value) {
+      console.log('地址栏输入')
+      console.log(value)
+      this.addressInput = value
+    },
+
+    clickTab(e) {
+      console.log('tab点击1')
+      console.log(e)
+      this.categoryId = e
+      this.getInstitutions_search(e)
+    },
+    // 跳转到列表页
+    jumpRows() {
+      this.$router.push({path:'/list',query:{longitude:this.longitude,latitude:this.latitude,categoryId:this.categoryId,radius:radius}})
     }
+
   }
 }
 </script>
 
-<style lang="scss" scoped>
+<style lang="scss">
 .page {
   background-color: #f5f5f5;
+  height: 100%;
+}
+.input_bg {
+  background-color: white;
+  width: 100%;
+  height: 80px;
+  z-index: 9;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  .text {
+    width: 85%;
+    height: 100%;
+    font-size: 32px;
+    color: #535356;
+    border: none;
+    margin: 0 auto;
+  }
+  .list_bg {
+    width: 15%;
+    height: 100%;
+    color: #535356;
+    display: flex;
+    justify-content: space-around;
+    align-items: center;
+    font-size: 30px;
+    .van-image {
+      width: 38px;
+      height: 38px;
+    }
+  }
 }
+
 .map_bg {
   width: 100%;
-  height: 100%;
-  background-color: antiquewhite;
+  height:calc(100% - 360px);
+}
+.van-tabs {
+    border-bottom: 0;
+    text-align: center;
+    ::v-deep .van-tab {
+      font-size: 32px;
+    }
+   
+    ::v-deep .van-tabs__nav--complete {
+      padding: 0;
+      
+    }
+    ::v-deep .van-tabs__line {
+      height: 0;
+    }
+    ::v-deep .van-tabs__wrap {
+      height: 80px;
+      .van-tab__span {
+        font-size: 32px;
+      }
+    }
+    ::v-deep .van-tabs__content {
+      height: calc(100% - 60px);
+      overflow-y: auto;
+    }
+}
+
+.custom-content-window {
+  width: 160px;
+  height: 100px;
+  background-color: rgb(239, 176, 176);
+  color: rgb(189, 137, 241);
+}
+
+.customCallout {
+  box-sizing: border-box;
+  background-color: #fff; 
+  border: 1px solid #ccc;
+  border-radius: 5px;
+  width: 460px;
+  height: auto;
+  padding: 10px;
+  box-sizing: border-box;
+  opacity: 1;
+}
+.customCallout_top {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+}
+
+.icon {
+  width: 160px;
+  height: 100px;
+  margin-right: 10px;
+}
+
+.title {
+  color: #333333;
+  font-size: 28px;
+  width: 100%;
+  margin-bottom: 5px;
+  word-break: break-all;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:3; 
+  white-space: normal;
+}
+.name {
+  font-size: 26px;
+  word-break: break-all;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:2; 
+  white-space: normal;
+}
+.address {
+  font-family: Microsoft YaHei;
+  color: #5c5b5b;
+  font-size: 26px;
+  width: 100%;
+  height: auto;
+  padding: 6px 0;
+  box-sizing: border-box;
+  word-break: break-all;
+  overflow:hidden;
+  text-overflow:ellipsis;
+  display:-webkit-box;
+  -webkit-box-orient:vertical;
+  -webkit-line-clamp:3; 
+  white-space: normal;
+}
+
+
+.custom-content-marker {
+  width: 45px;
+  height: 55px;
+  font-size: 28px;
+}
+
+.custom-content-marker img {
+    width: 100%;
+    height: 100%;
 }
 </style>

src/views/zhulao/views/circle/list.vue

@@ -0,0 +1,158 @@
+<template>
+  <div>
+    <van-nav-bar title="商户列表" @click-left="$router.back()" left-arrow fixed placeholder safe-area-inset-top />
+    <div class="page_list">
+        <div v-for="(item,index) in merList" :key="index">
+            <div class="item_bg" @click="detailTap(item.id)">
+                <div class="top_bg">
+                    <div class="name">{{item.name}}</div>
+                    <div class="distance_bg">
+                    <van-image class="distance_icon" :src="require('../../assets/images/elderly/location.png')" />
+                    <span class="dis_text">{{item.distance| distanceConversion}}</span>
+                    </div>
+                </div>
+                <div class="judge_bg">
+                    <div  v-for="(starItem,starIndex) in starTotal" :key="starIndex">
+                        <van-image class="star_icon" :src="item.score > starIndex ? require('../../assets/images/elderly/xx.png') : require('../../assets/images/elderly/collection.png')" />
+                    </div>
+                </div>
+                <div class="address_bg">
+                    <van-image class="location_icon" :src="require('../../assets/images/elderly/icondistance.png')" />
+                    <div>{{item.detailedAddress}}</div>
+                </div>
+            </div>
+        </div>
+    </div>
+  </div>
+</template>
+<script>
+import {institutions_search} from '../../api/index.js'
+export default {
+    data() {
+        return {
+            merList:[],
+            starTotal:5,
+            radius:0,
+            longitude:'',
+            latitude:'',
+            categoryId:''
+
+        }
+    },
+    filters: {
+      distanceConversion(num) {
+        var dis
+        if (num >= 5000) {
+            dis = '>5km'
+        } else if (num >= 1000 && num < 10000) {
+            dis = (num / 1000).toFixed(2) + 'km'
+        } else {
+            dis = num + 'm'
+        }
+        return dis
+      }
+    },
+    mounted() {
+    },
+    created() {
+        this.longitude = this.$route.query.longitude
+        this.latitude = this.$route.query.latitude
+        this.radius = this.$route.query.radius
+        this.categoryId = this.$route.query.categoryId
+        this.getInstitutions_search()
+    },
+    methods: {
+        async getInstitutions_search() {
+            var institutionSearch = await institutions_search({
+                "radius": this.radius,
+                "institutionalTypeList":this.categoryId,
+                "lat": this.latitude,
+                "lng": this.longitude,
+                "pageNum":1,
+                'pageSize':10
+            })
+            let merListTemp=[]
+            institutionSearch.rows.forEach((e) => {
+                // e.distance = util.getDistance(this.data.latitude,this.data.longitude,e.lat,e.lng)
+                e.score = 4
+                merListTemp.push(e)
+            });
+           this.merList =merListTemp
+        },
+        detailTap(id) {
+            console.log('商户id')
+            console.log(id)
+            this.$router.push({path:'/detail',query:{institutionsId:id}})
+        }
+    }
+}
+</script>
+<style lang="scss" scoped>
+.page_list {
+  width: 100%;
+  height: 100%;
+  background-color: #f1f1f1;
+}
+.item_bg {
+  padding: 10px 15px;
+  box-sizing: border-box;
+  width: 96%;
+  min-height: 220px;
+  border-radius: 10px;
+  background-color: white;
+  margin: 10px auto;
+  font-size: 32px;
+}
+.top_bg {
+  width: 100%;
+  height: auto;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.name {
+  flex: .8;
+}
+.distance_bg {
+  flex: .2;
+}
+.distance_icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 10rpx;
+}
+.dis_text {
+  color: rgb(243, 99, 80);
+  font-size: 28px;
+}
+.judge_bg {
+  width: 100%;
+  height: auto;
+}
+.address_bg {
+  width: 100%;
+  height: auto;
+  color: #3a3939;
+  font-size: 30px;
+  display: flex;
+  justify-content: flex-start;
+  align-items: flex-start;
+}
+.location_icon {
+  width: 30px;
+  height: 30px;
+  margin: 7px 10px 0 0;
+}
+.judge_bg {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  margin: 6px 0;
+}
+.star_icon {
+  width: 30px;
+  height: 30px;
+  margin-right: 6px;
+}
+
+</style>

vue.config.js

@@ -58,6 +58,7 @@ module.exports = {
     devServer: {
         port: port,
         open: true,
+        https: false,
         overlay: {
             warnings: false,
             errors: true