在项目根目录新建vue.config.js,添加如下代码。

 chainWebpack: config => {  
        //通过运行 vue inspect plugins 的值html插件别名。。  
        config.plugin('html-index').tap(args => {  
            args[0].minify = {  
                removeAttributeQuotes: false  
            }  
            return args  
        })  
    },

之前按照vue官方文档查的说添加
有的说添加

config.plugin('html').tap

报错说

TypeError: Cannot set property 'minify' of undefined

通过运行

vue inspect plugins

看到插件列表，htmlWebpackPlugin别名改成了html-index

为什么要动态设置原生导航栏搜索框中placeholder的提示内容呢？

一般原生导航栏搜索框中placeholder的提示内容是在pages.json中app-plus中设置，就相当于默认值，偶尔业务需求可能要改变值

需求：
大多数商城商品搜索框placeholder中都会自动显示一些热搜商品名称，
点击搜索后这些热搜商品可以直接进行搜索，可以有效提高用户对某一系列产品的搜索率

实现方法：

       //这个操作一般放在 onLoad 函数中  

       uni.request({ //发起网络请求  
                url: 'https://xxx.xxx.com,   //要显示的文字数据接口  
                success: (res) => {  
                 console.log(res.data);  
                    this.value = res.data.title   //将请求结果赋值data函数中定义的vlaue值中  
                    var _this=this   //这个我知道你懂的  
                    let webview = this.$mp.page.$getAppWebview();  //获取当前窗口实例  
                            webview.setStyle({'titleNView':{"searchInput": { //修改当前窗口search样式  
                                                                      "placeholder": _this.value,  
                                     }    
                    }})   
                } //成功回调结束  
            });

我也是uni-app小白一枚，有不对的地方各位多多指教

想学吗，我教你呀！保你会

请移步 新的文档。此文档以停止更新

宿主App与小程序相互通讯

注：2.6.10 版本开始支持此功能

宿主 App 向小程序发送事件

iOS 平台

API

Class DCUniMPSDKEngine.h  
/// 向小程序发送事件  
/// @param event 事件名称  
/// @param data 数据：NSString 或 NSDictionary 类型  
+ (void)sendUniMPEvent:(NSString *)event data:(id)data;

示例

[DCUniMPSDKEngine sendUniMPEvent:@"NativeEvent" data:@{@"msg":@"native message"}];

Android 平台

API

DCUniMPSDK.getInstance().sendUniMPEvent(event, data)

参数说明

返回值

示例

JSONObject data = new JSONObject();  
data.put("sj", "点击了关于");  
DCUniMPSDK.getInstance().sendUniMPEvent("gy", data);

小程序平台

监听宿主App发送事件

示例

uni.onNativeEventReceive((event,data)=>{  
    console.log('接收到宿主App消息：' + event + data);  
    this.nativeMsg = '接收到宿主App消息 event：' + event + " data: " + data;  
})

参数说明

小程序向宿主 App 发送事件

小程序平台

API

向宿主App发送事件

uni.sendNativeEvent(event,callback)

参数说明

示例

// 向宿主App发送事件  
uni.sendNativeEvent('unimp-event', {  
    msg: 'unimp message!!!'  
}, ret => {  
    this.nativeMsg = '宿主App回传的数据：' + ret;  
})

iOS 平台

当接收到小程序发送的事件会触发 DCUniMPSDKEngineDelegate 的协议方法，需宿主App实现该方法

协议方法说明

/// 监听小程序向原生发送事件方法  
/// @param event 事件名称  
/// @param data 数据：NSString 或 NSDictionary 类型  
/// @param callback 回调数据给小程序  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback;  

DCUniMPKeepAliveCallback 说明  
/// 回调数据给小程序的 block 定义  
/// result：回调参数支持 NSString 或 NSDictionary 类型  
/// keepAlive：如果 keepAlive 为 YES，则可以多次回调数据给小程序，反之触发一次后回调方法即被移除  
typedef void (^DCUniMPKeepAliveCallback)(id result, BOOL keepAlive);  

示例

/// 监听小程序发送的事件方法  
- (void)onUniMPEventReceive:(NSString *)event data:(id)data callback:(DCUniMPKeepAliveCallback)callback {  

    NSLog(@"Receive UniMP event: %@ data: %@",event,data);  

    // 回传数据给小程序  
    // DCUniMPKeepAliveCallback 用法请查看定义说明  
    if (callback) {  
        callback(@"native callback message",NO);  
    }  
}

Android 平台

API

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(callBack)
设置监听小程序发送给宿主的事件

参数说明

返回值

无

示例

DCUniMPSDK.getInstance().setOnUniMPEventCallBack(new DCUniMPSDK.IOnUniMPEventCallBack() {  
    @Override  
    public void onUniMPEventReceive(String event, Object data, DCUniMPJSCallback callback) {  
        Log.d("cs", "onUniMPEventReceive    event="+event);  
        //回传数据给小程序  
        callback.invoke( "收到消息");  
    }  
});

课程地址：https://study.163.com/course/introduction.htm?courseId=1209811811
联系方式：qq:1901090033

最近在做UNI项目，编译为H5，部署到自己的服务器时，出现了一个很蛋疼的问题:

**has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource**

这不就是万恶的跨域么？但奇葩的是，在前端代码所在服务器上curl接口地址，是可以ping通的哦。
第一想法，上UNI官网看看，毕竟官网的意见还是相对权威的，总结官网的观点就是2句话：

方案1：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上。
方案2：由后台服务器配置策略，设为允许跨域访问。

第1种方案不可行，接口服务器是客户的，不为我们所用。
第2种方案，后台服务器已经开放了跨域限制了，可H5页面还是请求不到。。。

官方不行，那就百度、谷歌走一通，大部分的回答都是配置devServer,范例如下:
"h5": {
"devServer": {
"port": 8000,
"disableHostCheck": true,
"proxy": {
"/dpc": {
"target": "http://dpc.dapeis.net",
"changeOrigin": true,
"secure": false
}
}
}
}
我欣喜若狂地尝试了一通，结果TMM，还是不行。。。说实在的 我实在想不通这样配置，是怎么实现了代理的。。。（麻烦有识之士留言）
如是乎，我去吃个饭，洗个澡，冷静了一下，，，出来后脑子灵光一闪，我把接口地址指向前端代码所在服务器A，再由A通过nginx转向到正式的接口服务器，不就好了。。。
激动时刻来了，还真的可以访问了。。。特此留言，兴许能帮到后期遇到同样问题的同行。。。

PS:诚接各类软件定制开发

ios端携带from-data name参数不是'file' , php 就接收不到信息 Array\n(\n)\n
ios端 name 参数改为file php 就可以正常接收

通过本篇教程，可以学习到ios证书申请和打包ipa上传到App Store进行TestFlight测试的流程！

TestFlight测试分内部及外部测试，针对没有上架的app，可以通过此方式安装到手机测试。

内部测试（上传即可测试）：通过测试码安装，一个码安装一个手机。

外部测试（上传后需通过审核）：通过一个链接跳转到TestFlight应用安装，有效期限90天，安装数量1万台。

TestFlight上架App Store审核分7步进行，需要注册一个苹果的开发者账号才能操作

1、安装iOS证书申请辅助软件Appuploader

2、申请iOS发布证书（p12）

3、申请iOS发布描述文件（mobileprovision）

4、打包ipa

5、上传ipa到iTunes Connect

6、申请TestFlight内部测试及外部测试

详细图文请看

https://blog.csdn.net/qtb58/article/details/105163258

如题 ，之前用 mac 来 开发 uni-app 的 ios 应用方便， 但是现在切换到 windows， 怎么更好的调试 IOS 应用。

有没有详细的教程或者 说明。 例如 自定义基座可以 用连wifi 进行 热调试

HubilderX 的自定义基座也打了【ios的测试证书】，但是接下来怎么做不太清楚

详细问题描述

上传发帖，让我找到插件原作者提供相关代码，已经找到作者，并让对方提供了响应js 对调部分的代码，原贴为：

https://ask.dcloud.net.cn/question/91199

问题为插件部分多次响应js 的回调参数，但是 uni 这边无法收到回调，重现版本为： HBuilderX 2.6.6

附上插件部分代码：

function upImgs(paths){
//通知扫描文件夹
var main = plus.android.runtimeMainActivity();
var appContext = plus.android.invoke(main, "getApplicationContext");
var MediaScannerConnection = plus.android.importClass("android.media.MediaScannerConnection");
MediaScannerConnection.scanFile(appContext,paths,null,null);
}

其中paths是一个待更新的文件路径数组，文件不能是文件夹，只能是绝对路径，亲测有效。

本人纯android开发者 接触过其他混合开发的插件开发 (注:并不是开发混合app只开发插件)
刚刚接触就发现了好多插件开发文档，一时间无头脑不知从何入手，旧的文档新的文档也不知道用哪个好一些，各种模式的开发弄得眼花缭乱，首次接触给我的感觉就是，乱，5+SDK 等等模式也不知道是干嘛的 具体简介也不知道在哪。
顺着文档和demo简单弄了下 ，
①遇到了第一个问题，无法调用sdk中的界面，期间找了很多帖子，也发了贴子也加了群，都是无果 ，帖子没人回答，回答也是敷衍了事，群里也是，期间也是很多其他方式的插件开发文档看的头晕目眩，真心不知道用那种,此处包括问帖子之类耗时从年前到年后只算工作时间 大概2个多月。
原因:文档用的依赖关键字过于老旧，目前android studio 早就放弃了这种方式 ,修改了之后可以了

②遇到第二个问题,无法找到assets下的文件,接着因为sdk中我们的模块需要用到授权，也就是assets中读取我们的资源文件,这里也是问了帖子，回复是官方摒弃了这种5+SDK的插件开发模式，那如果摒弃为何还能在官方找到这类文档误导开发者，并且没有任何官方摒弃和放弃维护与技术支持的声明？自此我前面的工作全部作废，因为官方不推荐后面也可能出现很多问题，历时也是2个月。

以上用了几个月的时间，完成了一个官方不维护不支持的一个插件开发的半成品都不算。

复工之后也就是3月份，由于客户用了年后最新的官方文档也就是另一种插件开发模式，是可以调通了，期间也是采坑无数，于是借鉴客户的demo进行了最新的尝试。

①第一个问题，根据最新的文档，开发者自己创建的项目，无法运行，无数尝试都无果，最后，使用官方提供的demo进行修改才可以正常运行。
②第二个问题，项目可以运行了，依旧是assets下的文件读取不到，具体原因不知，因为自己莫名其妙可以了又。
③第三个问题，插件在android studio下可以通过了，打包成arr插件文件，用Hbulid进行插件集成和测试，调用arr插件的时候直接找不到，插件里的桥接类，最后莫名自己又可以了
④第四个问题，在android下的assets中放的授权文件，再次无法读取。

以上用时，2周多的时间，目前还停留在第四个问题，
那我就请问，何来的开发时间段(针对插件开发而言),之前发的吐槽帖子有人说开发时间短等各种圆场官方，首先那是你作为web开发者，开发app，而我们是原生开发者开发插件，本质就不一样，这个东西出来新的想法和模式其实都不错但是，就插件开发这块对我们开发者很不友好，这样我们如何给好评。

uniapp h5 位置选择，微信定位+腾讯位置服务获取当前地址，逆地址解析
https://wanghuohuo.blog.csdn.net/article/details/105137028
一、获取当前地理坐标
首先引入JSSDK

npm install jweixin-module --save
使用

var jweixin = require('jweixin-module')
jweixin.ready(function(){
// TODO
});
DCloud官网的论坛，有分享的例子http://ask.dcloud.net.cn/article/36007。

我这里做个定位接口例子。

首先要看微信的文档。清楚大致的流程。https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

1、common目录，创建文件，名称是wechat.js。内容如下：

   注意要点：

1、前端域名要放在微信公众平台js安全域名下。

2、 url:(window.location.href).split('#')[0]  当前页面url作为参数 进行数字签名。

// import request from './request';
var jweixin = require('jweixin-module');
import store from '@/store'
import api from '@/common/vmeitime-http/' //自己封装的网络请求类，也可以直接使用uni.request

export default {
//判断是否在微信中
isWechat: function() {
var ua = window.navigator.userAgent.toLowerCase();
if (ua.match(/micromessenger/i) == 'micromessenger') {
// console.log('是微信客户端')
return true;
} else {
// console.log('不是微信客户端')
return false;
}
},
//初始化sdk配置
initJssdkShare: function(callback, url) {
//服务端进行签名 ，可使用uni.request替换。 签名算法请看文档
post(
'https://fbyc.microchainsoft.cn/index/wechat/getSignPackage',
{
url: url
},
function(res) {
// console.log(res)
if (res.data) {
jweixin.config({
debug: true,
appId: res.data.appId,
timestamp: res.data.timestamp,
nonceStr: res.data.nonceStr,
signature: res.data.signature,
jsApiList: [
'checkJsApi',
'onMenuShareTimeline',
'onMenuShareAppMessage',
'getLocation'
]
});
//配置完成后，再执行分享等功能
if (callback) {
callback(res.data);
}
}
});
},
initJssdk:function(callback){

    api.getAddressCoordinate({  
            appId:uni.getStorageSync('hmAppId'),  
            url:(window.location.href).split('#')[0]  
        }).then((res)=>{  
            if(res.data){  
                console.log(".data===="+JSON.stringify(res.data))  
                console.log(".data.data===="+JSON.stringify(res.data.data))  
                jweixin.config({  
                    debug: false,  
                    appId: res.data.data.appId,  
                    timestamp: res.data.data.timestamp,  
                    nonceStr: res.data.data.nonceStr,  
                    signature: res.data.data.signature,  
                    jsApiList: [  
                        'checkJsApi',  
                        'getLocation'  
                    ]  
                });  
                //配置完成后，再执行分享等功能    
                if (callback) {  
                    callback(res.data);  
                }  
            }  
            }).catch((err) => {  
                    console.log("微信signature失败"+err)  
            })  
},  
//在需要自定义分享的页面中调用    
share: function(data, url) {  
    url = url ? url : window.location.href;  
    if (!this.isWechat()) {  
        return;  
    }  
    //每次都需要重新初始化配置，才可以进行分享    
    this.initJssdkShare(function(signData) {  
        jweixin.ready(function() {  
            var shareData = {  
                title: data && data.title ? data.title : signData.site_name,  
                desc: data && data.desc ? data.desc : signData.site_description,  
                link: url,  
                imgUrl: data && data.img ? data.img : signData.site_logo,  
                success: function(res) {  
                    //用户点击分享后的回调，这里可以进行统计，例如分享送金币之类的    
                    // post('/api/member/share');  
                },  
                cancel: function(res) {}  
            };  
            //分享给朋友接口    
            jweixin.onMenuShareAppMessage(shareData);  
            //分享到朋友圈接口    
            jweixin.onMenuShareTimeline(shareData);  
        });  
    }, url);  
},  
//在需要定位页面调用  
location: function(callback) {  
    if (!this.isWechat()) {  
        console.log('不是微信客户端')  
        return;  
    }  
    console.info('定位')  
    this.initJssdk(function(res) {  
        jweixin.ready(function() {  
            console.info('定位ready')  
            jweixin.getLocation({  
                type: 'gcj02', // 默认为wgs84的gps坐标，如果要返回直接给openLocation用的火星坐标，可传入'gcj02'  
                success: function (res) {  
                    // console.log(res);  
                    callback(res)  
                },  
                fail:function(res){  
                    console.log(res)  
                },  
                // complete:function(res){  
                //     console.log(res)  
                // }  
            });  
        });  
    });  
}  

}
 2、main.js加载该文件

// #ifdef H5
import wechat from './common/util/wechat'
if(wechat.isWechat()){
Vue.prototype.$wechat =wechat;
}
// #endif
3、页面中使用 

// #ifdef H5
//获取定位经纬度
if (this.$wechat && this.$wechat.isWechat()) {
this.$wechat.location(function (res) {
console.log(res)
// let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
// let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
// todo
let latitude = 31.14979;
let longitude = 121.12426;

                //根据经纬度，解析区域，提示用户输入  
             });  
        }  
        // #endif  

 
二、逆地址解析
1、腾讯位置服务申请 服务调用前提 KEY

2、引入vue-jsonp 解决腾讯位置服务跨域请求问题

npm install vue-jsonp --save  

使用

import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

调用

this.$jsonp(url,{
                          key: this.publicKey,
                          location: locationObj
                        }).then(e => {
                            res(e.result);
                        })
                        .catch(err => {
                            res(err);
                        })

3、引入mimap组件 https://ext.dcloud.net.cn/plugin?id=1448

qqmap-wx-jssdk.min.js 可从微信下载

<template>

<view class="server-place">

<map

id='map'

ref='map'

v-bind:style="{height: mapH + 'px'}"

style="width: 100%;"

latitude="latitude"

longitude="longitude"

controls='controls' @regionchange='mapChange'>
</map>

<view class="map-tools">  

    <view class="my-location" @click.stop="toMyLocation">  
        <image class="left" src="/static/img/areame.png" mode=""></image>  
        <view class="right">  
            <text class="title">我的位置</text>  
            <text class="text">{{myAddress}}</text>  
        </view>  
    </view>  

    <view class="start-place">  
        <view class="place">  
            <text class="title">{{tipText}}</text>  
            <text class="text">{{addressObj.address.formatted_addresses.recommend}}</text>  
        </view>  
        <view class="tip">{{descText}}</view>  
        <button @click.stop="submitAdress" class="sure" type="primary">确认选择</button>  
    </view>  
</view>  

</view>

</template>

<script>
var jweixin = require('jweixin-module');
const app = getApp()
var QQMapWX = require('./qqmap-wx-jssdk.min.js')
var qqmapsdk = new QQMapWX({
key: 'LXCBZ-NNIKD-UZ64F-H6AFI-UNJLH-OCFGE' //app的key
})
// 'YVEBZ-JS7LF-PK2JW-JJNFX-BITHO-ATB57'
export default {
props: {
tipText: {
type: String,
default: '选择位置'
},
descText: {
type: String,
default: '使用当前定位或在地图上标记位置'
},
},
data() {
return {
publicKey:'',// h5的key
mapH: 0, // 地图高度，可在initMapH()中设置高度
longitude: 0, // 初始经度
latitude: 0, // 初始纬度
myAddress: '', // 初始地址信息
addressObj: { // 地图选点信息
longitude: '',
latitude: '',
address: {
address:'',
formatted_addresses:{
recommend:'请选择位置'
}
}

            },  
            controls: [           // 地图中心点图标, 可更换iconPath, 详情见官方文档关于map组件的介绍  
                {  
                    iconPath: '/static/img/areacenter.png',  
                    position: {   
                        // left: 175,  
                        left: window.screen.width/2-20,  
                        top: 210,  
                        width: 40,   
                        height: 40,  
                    },  
                    clickable: false  
                }  
            ],  
        };  
    },  
    mounted() {  
        let _this = this  
        _this.$api.getAddressKey({  
            appId: uni.getStorageSync('hmAppId'),  
        }).then(res=>{  
            if(res.data.code == 10000){  
                _this.publicKey=res.data.data.key;  
                this.getLocation()  
                this.initMapH()  
            }  
        }).catch(res=>{  
            console.error("查询key失败: " + JSON.stringify(res));  
        })  
    },  
    methods:{  
        // 查询现在的位置  
        getLocation() {  
            let this_ = this  
             if (this.$wechat && this.$wechat.isWechat()) {  
                this.$wechat.location(function (res) {  
                    console.log(res)  
                    let latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90  
                    let longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。  
                    let res2={  
                            latitude: latitude ,  
                            longitude: longitude  
                        }  
                        this_.initMap(res2)  

                    //根据经纬度，解析区域，提示用户输入  
                });  
            }else{  
                console.error("不在微信环境中")  
            }  
        },  

        // 初始化我的位置  
        async initMap(res) {  
            this.longitude = res.longitude;  
            this.latitude = res.latitude;  

            this.addressObj = Object.assign({}, this.addressObj,{  
                longitude: res.longitude,  
                latitude: res.latitude,  
                address: await this.getAddressName(res)  
            })  
            this.myAddress = this.addressObj.address.formatted_addresses.recommend  
        },  

        // 地图选择位置后 查询地点名称  
        async checkMap(res) {  
            this.addressObj = Object.assign({}, this.addressObj,{  
                longitude: res.longitude,  
                latitude: res.latitude,  
                address: await this.getAddressName(res)  
            })  
            console.log('当前位置:' + res.latitude + '|' + res.longitude);  
        },  

        // 监听地图位置变化  
        mapChange(e) {  
            let that = this  
            clearTimeout(this.timer)  
            this.timer = setTimeout(() => {  
                if (e.type == 'end') {  
                    that.mapCtx = uni.createMapContext('map', this)  
                    that.mapCtx.getCenterLocation({  
                        success: res => {  
                            this.checkMap(res)  
                        },  
                        fail: err => {  
                            console.log(err);  
                        }  
                    })  
                }  
            }, 200)  
        },  
        // 查询地图中心点的名称  
        getAddressName(addressObj) {  

            return new Promise((res) => {  
                // #ifdef APP-PLUS  
                    qqmapsdk.reverseGeocoder({  
                        location: {  
                            latitude: addressObj.latitude,  
                            longitude: addressObj.longitude  
                        },  
                        get_poi: 1,  
                        poi_options: "page_size=1;page_index=1",  
                        output: 'jsonp',  
                        success: (e) => {  
                            res(e.result.formatted_addresses.recommend);  
                        },  
                        fail: err => {  
                            res(err);  
                        }  
                    })  
                // #endif  

                // #ifndef APP-PLUS  
                    // ======================== jsonp跨域 ========================   
                    let locationObj = addressObj.latitude+','+addressObj.longitude  
                    let url = 'https://apis.map.qq.com/ws/geocoder/v1?coord_type=5&get_poi=1&output=jsonp&poi_options=page_size=1;page_index=1';  
                    this.$jsonp(url,{  
                      key: this.publicKey,  
                      location: locationObj  
                    }).then(e => {  
                        res(e.result);  
                    })  
                    .catch(err => {  
                        res(err);  
                    })  
                // #endif  

            })  

        },  
        // 计算地图的高度  
        initMapH() {  
            // #ifdef APP-PLUS  
                this.mapH = uni.getSystemInfoSync().windowHeight - 210;  
            // #endif  
            // #ifndef APP-PLUS  
                this.mapH = uni.getSystemInfoSync().windowHeight - 170;  
            // #endif  
        },  
        // 移动到我的位置  
        toMyLocation() {  
            this.getLocation()  
        },  
        // 提交  
        submitAdress() {  
            this.controls = []  
            setTimeout(() => {  
                this.$emit('selectAddress', this.addressObj)  
            }, 100)  
        }  
    },  
}  

</script>

<style lang="scss" scoped>
.server-place{
position: fixed;
left: 0;
top: 0;
height: 100vh;
width: 100%;
background: #ffffff;
z-index: 999;
.icon-img{
width: 36px;
height: 36px;
display: block;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
margin-top: -70px;
}
.map-tools{
position: fixed;
width: 100%;
bottom: 0rem;
left: 0;
padding-bottom: .5rem;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
.my-location{
width: 90%;
margin: 0 auto;
height: 2.5rem;
box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);
background: #fff;
border-radius: 0.5rem;
display: flex;
justify-content: flex-start;
align-items: center;
overflow: hidden;
.left{
background: #3384ff;
// flex: 20%;
width: 2.5rem;
height: 100%;
}
.right{
font-size: 0.57rem;
margin-left: .5rem;
color: #111;
// flex: 80%;
display: flex;
justify-content: center;
align-items: flex-start;
flex-direction: column;
.text{
width: 12rem;
overflow: hidden;
white-space:nowrap;
text-overflow: ellipsis;
color: #3384FF;
margin-top: .3rem;
}
}
}

        .start-place{  
            width: 85%;  
            margin: 0 auto;  
            height: 5.5rem;  
            margin: 0 auto;  
            margin-top: .6rem;  
            box-shadow: 0px 3px 20px rgba(0, 0, 0, 0.2);  
            background: #fff;  
            border-radius: 0.5rem;  
            padding: .5rem;  
            .place{  
                .title{  
                    font-size: 0.67rem;  
                    font-weight: bold;  
                    color: #111;  
                }  
                .text{  
                    font-size: 0.76rem;  
                    color: #3384FF;  
                    font-weight: bold;  
                    width: 12rem;  
                    vertical-align: middle;  
                    display: inline-block;  
                    margin-left: .5rem;  
                    overflow: hidden;  
                    white-space:nowrap;  
                    text-overflow: ellipsis;  
                }  
            }  
            .tip{  
                font-size: 0.57rem;  
                color: #666;  
                margin-top: .5rem;  
            }  
            .sure{  
                margin-top: .5rem;  
                color: #FFFFFF;  
                background: #212121;  
                font-weight: 600;  
            }  

        }  
    }  
}  

</style>
4、相关图标

  https://share.weiyun.com/5aMXvh8