一些小的研究

自己工作中的一些心得和总结，主要研究css比较多，水平不高见笑了（

文字省略

// 最多一行
.text-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

// 最多两行
.text-ellipsis-l2 {
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2; // 控制行数
  line-break: anywhere;
  -webkit-box-orient: vertical;
}

三层阴影

// 一级阴影（向下）
.shadow-1-down {
	box-shadow: 0 1px 2px -2px rgba(0, 0, 0, 0.16), 0px 3px 6px 0px rgba(0, 0, 0, 0.12), 0px 5px 12px 4px rgba(0, 0, 0, 0.09);
}

// 一级阴影（向右）
.shadow-1-right {
	box-shadow: 1px 0px 2px -2px rgba(0, 0, 0, 0.16),3px 0px 6px 0px rgba(0, 0, 0, 0.12),5px 0px 12px 4px rgba(0, 0, 0, 0.09);
}

// 一级阴影（向上）
.shadow-1-up {
	box-shadow: 0 -1px 2px -2px rgba(0, 0, 0, 0.16), 0px -3px 6px 0px rgba(0, 0, 0, 0.12), 0px -5px 12px 4px rgba(0, 0, 0, 0.09);
}

// 二级阴影（向下）
.shadow-2-down {
	box-shadow: 0 3px 6px -4px rgba(0, 0, 0, 0.12), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 9px 28px 8px rgba(0, 0, 0, 0.05);
}

// 三级阴影（向下）
.shadow-3-down {
	box-shadow: 0 6px 16px -8px rgba(0, 0, 0, 0.08), 0px 9px 28px 0px rgba(0, 0, 0, 0.05), 0px 12px 48px 16px rgba(0, 0, 0, 0.03);
}

地图

引入api

<script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=4DhqddD68oinNGW7zcvhsxCbqldTdjvF">
</script>

html地图容器

<div class="map" id="mymap" style="margin:40px 0;width:100%;height:500px;" data-content="地址：{{ $cfg['address'] }}" data-name="{{ $cfg['webname'] }}"></div>

js

// 百度地图API功能
var mymap = document.getElementById("mymap");
var content = mymap.getAttribute("data-content");
var company = mymap.getAttribute("data-name");
var map = new BMapGL.Map("mymap");
var point = new BMapGL.Point({{ $cfg['jwd'] }}); // 经纬度，这里是直接取了后台的
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
map.centerAndZoom(point, 16);
var opts = {
  width: 200, // 信息窗口宽度
  height: 60, // 信息窗口高度 
  title: company, // 信息窗口标题
}
var infoWindow = new BMapGL.InfoWindow(content, opts); // 创建信息窗口对象 
map.openInfoWindow(infoWindow, point); //开启信息窗口
map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
var scaleCtrl = new BMapGL.ScaleControl(); // 添加比例尺控件
map.addControl(scaleCtrl);
var zoomCtrl = new BMapGL.ZoomControl({
  anchor: BMAP_ANCHOR_TOP_LEFT
}); // 添加缩放控件
map.addControl(zoomCtrl);

地图坐标查询地址 https://api.map.baidu.com/lbsapi/getpoint/index.html

引入依赖，设置下地图容器宽高，加上后面渲染地图的js，即可在网页任何部分使用地图