Cesium简单案例

一、Cesium组件

1、HTML

<template><div id="cesiumContainer"><!-- 地图工具栏 --><ul class="mapTools"><li v-for="item in toolsData" :key="item.id" @click="toolsClick(item)"><!-- 显示label --><el-tooltipv-if="item.id == 1"class="item"effect="dark":content="item.label"placement="left"><span class="label">{{ item.text }}</span></el-tooltip><el-tooltipv-elseclass="item"effect="dark":content="item.label"placement="left"><!-- 显示icon --><span :class="item.icon" class="icon"></span></el-tooltip></li></ul><!-- 模型信息弹窗-全局注册 --><Popupref="Popup":popupInfo="popupInfo":popupPs="popupPs"@message="popupMsg"></Popup></div>
</template>

2、Script

javascript"><script>
import * as turf from "@turf/turf";
export default {name: "Cesium",components: {Popup: () => import("./popup.vue"),},props: {},data() {return {// ----------------------<<地图>>----------------------// cesium相机初始位置ps: {lon: 100,lat: 30,height: 1000,},// 地图工具栏列表toolsData: [{id: 1,text: "2D",label: "2D/3D切换",icon: "",},{id: 2,label: "开始记录数据",icon: "el-icon-video-camera",},{id: 3,label: "隐藏模拟航迹",icon: "el-icon-s-promotion",},{id: 4,label: "暂停飞行",icon: "el-icon-video-pause",},{id: 5,label: "清除所有模型",icon: "el-icon-delete",},],// -----------测试数据-----------// 是否创建测试模型isCreate: false,// 飞行时间flyTime: 0,// 点位数组pointArr: [{lon: 100.957787,lat: 30.739748,height: 100,time: 0,},{lon: 100.959787,lat: 30.739748,height: 100,time: 5,},{lon: 100.961787,lat: 30.739748,height: 100,time: 10,},{lon: 100.963787,lat: 30.739748,height: 100,time: 15,},{lon: 100.965787,lat: 30.739748,height: 100,time: 20,},{lon: 100.965787,lat: 30.737748,height: 100,time: 15,},{lon: 100.965787,lat: 30.735748,height: 100,time: 25,},{lon: 100.965787,lat: 30.733748,height: 100,time: 30,},{lon: 100.963787,lat: 30.733748,height: 100,time: 35,},{lon: 100.961787,lat: 30.733748,height: 100,time: 35,},{lon: 100.959787,lat: 30.733748,height: 100,time: 35,},{lon: 100.957787,lat: 30.733748,height: 100,time: 35,},{lon: 100.957787,lat: 30.735748,height: 100,time: 35,},{lon: 100.957787,lat: 30.737748,height: 100,time: 35,},{lon: 100.957787,lat: 30.739748,height: 100,time: 35,},],// 线条数组lineArr: [],// 起始时间start: "",// 结束时间stop: "",// -----------测试数据-----------// 弹窗详细信息popupInfo: {},// 弹窗位置popupPs: {x: 0,y: 0,},// 选中模型idselModelId: "",};},mounted() {// 初始化地图this.initMap();this.addArrow();},methods: {// -------------------------<<地图>>------------------------// 初始化地图initMap() {// 配置在线地图tokenCesium.Ion.defaultAccessToken ="在线地图token";let imageryProvider;// 离线地图-nginx服务// const url = `http://127.0.0.1:9000`;// imageryProvider = new Cesium.UrlTemplateImageryProvider({//   url: `${url}/{z}/{x}/{y}.png`,// });//在线地图// if (window.navigator.onLine){}imageryProvider = new Cesium.ArcGisMapServerImageryProvider({url: "https://services.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer",});window.viewer = new Cesium.Viewer("cesiumContainer", {geocoder: false, //右上角搜索homeButton: false, //右上角homesceneModePicker: false, //右上角2D/3D切换baseLayerPicker: false, //右上角地形navigationHelpButton: false, //右上角帮助animation: true, //左下角圆盘动画控件timeline: true, //底部时间轴fullscreenButton: false, //右下角全屏控件vrButton: false, //如果设置为true，将创建VRButton小部件。scene3DOnly: false, // 每个几何实例仅以3D渲染以节省GPU内存infoBox: false, //隐藏点击要素后的提示信息imageryProvider: imageryProvider, //地图地址selectionIndicator: false,});// 隐藏左下角商标信息viewer._cesiumWidget._creditContainer.style.display = "none";// 隐藏底部时间轴viewer.timeline.container.style.display = "none";viewer.scene.globe.depthTestAgainstTerrain = false; //开启深度检测// 设置最小缩放级别，以米为单位viewer.scene.screenSpaceCameraController.minimumZoomDistance = 500.0;// 设置最大缩放级别，以米为单位viewer.scene.screenSpaceCameraController.maximumZoomDistance = 20000000.0;// 隐藏动画控件const animationContainer = document.querySelector(".cesium-viewer-animationContainer");animationContainer.style.display = "none";// 自动播放动画viewer.clock.shouldAnimate = true;// 启用光照viewer.scene.globe.enableLighting = true;// 设置相机初始位置viewer.camera.setView({destination: Cesium.Cartesian3.fromDegrees(this.ps.lon,this.ps.lat,this.ps.height),// 设置相机方向，俯视和仰视的视角orientation: {heading: Cesium.Math.toRadians(0), //坐标系旋转0度pitch: Cesium.Math.toRadians(-90), //设置俯仰角度为-90度},});// --------<<鼠标事件>>--------// 移除左键双击默认事件// viewer.screenSpaceEventHandler.removeInputAction(//   Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK// );// 注册左键单击事件this.leftClick();// 注册右键单击事件// this.rightClick();// 注册地图拖拽事件this.setMouseEvent();// 相机移动事件viewer.scene.camera.moveEnd.addEventListener(this.updatePopup);// 注册地图缩放事件this.setWheelEvent();},// -----------------------<<模型操作>>-----------------------// 创建新模型addModel(info) {if (viewer.entities.getById(info.desc.id)) {return;}// 转换笛卡尔空间直角坐标const position = new Cesium.Cartesian3.fromDegrees(info.desc.position.lon,info.desc.position.lat,info.desc.position.height);//模型朝向const heading = Cesium.Math.toRadians(90); // 方位const pitch = 0; // 俯仰const roll = 0; // 偏移角度const hpr = new Cesium.HeadingPitchRoll(heading, pitch, roll);const orientation = Cesium.Transforms.headingPitchRollQuaternion(position,hpr);// ++++++++++<<创建模型>>++++++++++const entity = viewer.entities.add({id: info.desc.id, //模型idname: info.type, // 模型名称，这里用作模型类型，方便模型增删改查position: position, //模型位置，高度orientation: orientation,model: {uri: info.desc.path, //模型文件minimumPixelSize: 50, //模型最小像素大小maximumScale: 100, //模型最大像素大小color: Cesium.Color.WHITE,},description: info.desc, // 模型详细信息});},// 创建点位addPoint(ps) {// 添加点位viewer.entities.add({name: "point", // 所属的父级idposition: Cesium.Cartesian3.fromDegrees(ps.lon,ps.lat,ps.height // 高度可以自己定义，也可以根据传进来的高度进行绘制),point: {pixelSize: 5,// 点位颜色，fromCssColorString 可以直接使用CSS颜色color: Cesium.Color.fromCssColorString("tomato"),// 边框颜色outlineColor: Cesium.Color.fromCssColorString("#fff"),// 边框宽度(像素)outlineWidth: 2,// 显示在距相机的距离处的属性，多少区间内是可以显示的distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,15000000),// 是否开启深度监测disableDepthTestDistance: Number.POSITIVE_INFINITY,},});},// 创建线条addLine() {if (this.lineArr.length == 0) {return;}// 航迹线idlet id = `line`;viewer.entities.add({id, //  模型idname: "line", // 所属的父级id// polyline 折线polyline: {// 参数依次为[经度1, 纬度1, 高度1, 经度2, 纬度2, 高度2]positions: Cesium.Cartesian3.fromDegreesArrayHeights(this.lineArr),// 注：线条起止，可以获取鼠标点击位置的经纬度进行线条绘制// 宽度width: 2,// 线的颜色material: Cesium.Color.fromCssColorString("tomato"), //  "tomato"clampToGround: false, // 不紧贴地面// 线的顺序,仅当`clampToGround`为true并且支持地形上的折线时才有效。zIndex: 999,// 显示在距相机的距离处的属性，多少区间内是可以显示的distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,15000000),// 是否显示show: true,},});},// 添加箭头addArrow() {let arr = [0, 45, 90, 135, 180, -135, -90, -45];var pixelOffset, endPs, entity, labelEntity;arr.forEach((item) => {// 计算箭头结束点endPs = this.calcArrowEndPosition([100.9621, 30.7368], 0.1, item);entity = viewer.entities.add({polyline: {name: "arrow",positions: [Cesium.Cartesian3.fromDegrees(100.9621, 30.7368),Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat),],width: 10,material: new Cesium.PolylineArrowMaterialProperty(Cesium.Color.CYAN),vertexFormat: Cesium.PolylineMaterialAppearance.VERTEX_FORMAT,},// 显示在距相机的距离处的属性，多少区间内是可以显示的distanceDisplayCondition: new Cesium.DistanceDisplayCondition(0,15000000),});// 调整label偏移位置if (item == 45 || item == -45 || item == 0) {pixelOffset = new Cesium.Cartesian2(0, -10);} else if (item == 135 || item == -135 || item == 180) {pixelOffset = new Cesium.Cartesian2(0, 10);} else if (item == 90) {pixelOffset = new Cesium.Cartesian2(20, 0);} else if (item == -90) {pixelOffset = new Cesium.Cartesian2(-20, 0);}// 创建标签实体labelEntity = viewer.entities.add({position: Cesium.Cartesian3.fromDegrees(endPs.lon, endPs.lat), // 点位坐标point: {pixelSize: 0, // 点位大小color: Cesium.Color.WHITE.withAlpha(0), // 点位颜色，透明},label: {text: `${item}度`, // 文本内容font: "18px monospace", // 字体样式style: Cesium.LabelStyle.FILL_AND_OUTLINE, // label样式outlineWidth: 2, // 外边框宽度verticalOrigin: Cesium.VerticalOrigin.CENTER, // 文字对齐方式BOTTOM,TOP,CENTERpixelOffset: pixelOffset, // (0:经度偏移，0:纬度偏移)},});labelEntity.label.fillColor = Cesium.Color.WHITE; // 设置填充颜色为白色labelEntity.label.outlineColor = Cesium.Color.RED; // 设置轮廓颜色为红色});},// 计算箭头结束点calcArrowEndPosition(ps, range, angel) {var pt = turf.point(ps, { "marker-color": "F00" }); // 起始点var distance = range; // 距离var bearing = angel; // 角度var options = { units: "miles" }; // 英里var destination = turf.rhumbDestination(pt, distance, bearing, options);return {lon: destination.geometry.coordinates[0],lat: destination.geometry.coordinates[1],};},// 根据id删除模型removeEntitiesById(id) {// 根据id获取实体let entities = viewer.entities.getById(id);// 删除实体viewer.entities.remove(entities);},// 删除所有模型delAllModel() {// 删除所有模型viewer.entities.removeAll();// 关闭popupthis.$refs.Popup.closePopup();this.lineArr = [];if (this.isCreate) {this.addTrack();this.addModels();}},// 选中模型clickModel(id, type, row = {}) {// 取消选中模型this.cancelPopup();// 选中模型idthis.selModelId = id;// 获取点击模型的实体let entities = viewer.entities.getById(id);// 点击模型添加选中颜色entities.model.color = Cesium.Color.RED;switch (type) {case 1:// 显示弹窗this.$refs.Popup.openPopup();break;case 2:// 获取模型信息this.popupInfo = JSON.parse(JSON.stringify(row));// 获取cartesian3坐标const cartesian3 = Cesium.Cartesian3.fromDegrees(row.position.lon,row.position.lat,row.position.height);// cartesian3转换为cartesian2坐标（屏幕坐标）this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3);// 显示弹窗this.$refs.Popup.openPopup();break;}},// 取消选中模型cancelPopup() {this.selModelId = "";// 获取所有模型的实体集合const entitiesArr = viewer.entities.values;if (entitiesArr.length !== 0) {// 取消所有模型选中颜色for (let i = 0; i < entitiesArr.length; i++) {if (entitiesArr[i]._name == "model") {entitiesArr[i].model.color = Cesium.Color.WHITE;}}}// 关闭消息显示框this.$refs.Popup.closePopup();},// -----------------------<<鼠标事件>>-----------------------// 左键单击leftClick() {// 添加用户输入监听范围（element）let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// 处理用户输入事件handler.setInputAction((event) => {let pick = viewer.scene.pick(event.position);if (Cesium.defined(pick)) {if (pick.id._name !== "model") {return;}// 选中模型样式this.clickModel(pick.id._id, 1);// 获取模型信息this.popupInfo = JSON.parse(JSON.stringify(pick.id._description._value));// 获取cartesian3坐标const cartesian3 = pick.id._position._value;// cartesian3转换为cartesian2坐标（屏幕坐标）this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,cartesian3);} else {this.cancelPopup();}}, Cesium.ScreenSpaceEventType.LEFT_CLICK);},// 右键单击rightClick() {// 添加用户输入监听范围（element）let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// 处理用户输入事件handler.setInputAction((event) => {// 获取pick拾取对象let pick = viewer.scene.pick(event.position);// 判断是否获取到了pick，获取到了，拾取模型信息，未获取到，添加点位if (!Cesium.defined(pick)) {const position = viewer.scene.camera.pickEllipsoid(event.position,viewer.scene.globe.ellipsoid);// 笛卡尔坐标转弧度let cartographic = Cesium.Cartographic.fromCartesian(position,viewer.scene.globe.ellipsoid,new Cesium.Cartographic());// Cesium.Math.toDegrees 弧度转度，将弧度转换成经纬度let lon = Cesium.Math.toDegrees(cartographic.longitude);let lat = Cesium.Math.toDegrees(cartographic.latitude);console.log(lon + "," + lat);// 创建点位this.addPoint({lon,lat,height: 10,});// 存储点位this.pointArr.push({lon,lat,height: 10,time: "",});// 存储线条点位this.lineArr.push(lon, lat, 10);}}, Cesium.ScreenSpaceEventType.RIGHT_CLICK);},// 地图拖拽setMouseEvent() {let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// *****注册鼠标右键按下事件*****handler.setInputAction((event) => {let pick = viewer.scene.pick(event.position);// *****注册鼠标移动事件*****viewer.screenSpaceEventHandler.setInputAction((arg) => {// 更新弹框位置this.updatePopup();}, Cesium.ScreenSpaceEventType.MOUSE_MOVE);// *****注册鼠标抬起事件*****viewer.screenSpaceEventHandler.setInputAction(({ position }) => {// *****解除viewer的MOUSE_MOVE事件监听器*****viewer.screenSpaceEventHandler.removeInputAction(Cesium.ScreenSpaceEventType.MOUSE_MOVE);// 解除相机锁定viewer.scene.screenSpaceCameraController.enableZoom = true;}, Cesium.ScreenSpaceEventType.LEFT_UP);}, Cesium.ScreenSpaceEventType.LEFT_DOWN);},// 地图缩放事件setWheelEvent() {let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// 处理用户输入事件handler.setInputAction((event) => {// 更新弹框位置this.updatePopup();}, Cesium.ScreenSpaceEventType.WHEEL);},// 鼠标双击事件leftDoubleClick() {let handler = new Cesium.ScreenSpaceEventHandler(viewer.scene.canvas);// 处理用户输入事件handler.setInputAction((event) => {let pick = viewer.scene.pick(event.position);if (Cesium.defined(pick)) {}}, Cesium.ScreenSpaceEventType.LEFT_DOUBLE_CLICK);},// -----------------------<<其他操作>>-----------------------// 更新信息弹框位置updatePopup() {// 获取选中模型if (!this.selModelId) {return;}let entities = viewer.entities.getById(this.selModelId);this.popupPs = Cesium.SceneTransforms.wgs84ToWindowCoordinates(viewer.scene,entities._position._value);},// 子组件消息popupMsg() {// 取消选中模型this.cancelPopup();},// 工具栏点击事件toolsClick(item) {switch (item.id) {case 1: // 2D/3D切换if (item.text == "3D") {item.text = "2D";// 切换为3Dviewer.scene.morphTo3D(0);} else {item.text = "3D";// 切换为2Dviewer.scene.morphTo2D(0);}break;case 2: // 数据记录if (item.icon == "el-icon-video-camera") {item.icon = "el-icon-video-camera-solid";item.label = "停止记录数据";this.$message.success("开始记录数据");} else {item.icon = "el-icon-video-camera";item.label = "开始记录数据";this.$message.success("停止记录数据");}break;case 3: // 隐藏模拟航迹// 获取所有模型的实体集合const entitiesArrS = viewer.entities.values;// 临时数组const tempS = [];// 将模型实体深拷贝if (entitiesArrS.length !== 0) {for (let i = 0; i < entitiesArrS.length; i++) {if (entitiesArrS[i]._name == "point" ||entitiesArrS[i]._id == "line") {tempS.push(entitiesArrS[i]);}}}// 如果有航迹-隐藏航迹，否则显示航迹if (tempS.length !== 0) {item.icon = "el-icon-position";item.label = "显示模拟航迹";// 航迹点清空this.lineArr = [];// 删除航迹点tempS.forEach((item) => {this.removeEntitiesById(item._id);});} else {item.icon = "el-icon-s-promotion";item.label = "隐藏模拟航迹";// 添加航迹this.addTrack();}break;case 4: // 飞机飞行控制// 停止动画if (viewer.clock.multiplier == 1) {viewer.clock.multiplier = 0;item.icon = "el-icon-video-play";item.label = "继续飞行";} else {viewer.clock.multiplier = 1;item.icon = "el-icon-video-pause";item.label = "暂停飞行";}break;case 5: // 清除所有模型this.delAllModel();break;}this.cancelPopup();},// ----------<<自动飞行测试>>----------addTrack() {if (this.lineArr.length !== 0) {return;}// 创建航迹点for (let i = 0; i < this.pointArr.length; i++) {// 绘制点位this.addPoint({lon: this.pointArr[i].lon,lat: this.pointArr[i].lat,height: this.pointArr[i].height,});// 存储点位绘制航迹this.lineArr.push(this.pointArr[i].lon,this.pointArr[i].lat,this.pointArr[i].height);}// 绘制航迹this.addLine();},addModels() {this.isCreate = true;// 计算时间飞行数据let property = this.computeFlight(this.pointArr);// ++++++++++<<创建模型>>++++++++++const entity = viewer.entities.add({id: `testModel`, //模型idname: "model", // 模型名称，这里用作模型类型，方便场景模型增删改查// 和时间轴关联availability: new Cesium.TimeIntervalCollection([new Cesium.TimeInterval({start: this.start,stop: this.stop,}),]),position: property, //模型位置，高度orientation: new Cesium.VelocityOrientationProperty(property),model: {uri: "./Cesium/model/air/test1.gltf", //模型文件minimumPixelSize: 80, //模型最小像素大小maximumScale: 100, //模型最大像素大小},});},// 移动modelMove() {if (this.lineArr.length == 0) {return;}for (let i = 0; i < this.pointArr.length; i++) {this.pointArr[i].time = this.flyTime;this.flyTime += 3;}// 起始时间this.start = Cesium.JulianDate.fromDate(new Date());// 结束时间this.stop = Cesium.JulianDate.addSeconds(this.start,this.pointArr[this.pointArr.length - 1].time,new Cesium.JulianDate());// 设置始时钟始时间viewer.clock.startTime = this.start.clone();// 设置时钟当前时间viewer.clock.currentTime = this.start.clone();// 设置始终停止时间viewer.clock.stopTime = this.stop.clone();// 时间速率，数字越大时间过的越快viewer.clock.multiplier = 1;// 时间轴viewer.timeline.zoomTo(this.start, this.stop);// 循环执行,即为2，到达终止时间，重新从起点时间开始LOOP_STOP// viewer.clock.clockRange = Cesium.ClockRange.CLAMPED;viewer.clock.clockRange = Cesium.ClockRange.LOOP_STOP;// 创建模型this.addModels();},// 计算飞行computeFlight(source) {// 取样位置 相当于一个集合let property = new Cesium.SampledPositionProperty();for (let i = 0; i < source.length; i++) {let time = Cesium.JulianDate.addSeconds(this.start,source[i].time,new Cesium.JulianDate());let position = Cesium.Cartesian3.fromDegrees(source[i].lon,source[i].lat,source[i].height);// 添加位置，和时间对应property.addSample(time, position);}return property;},// ----------<<自动飞行测试>>----------},
};
</script>

3、Css

<style lang="less" scoped>
#cesiumContainer {width: 100%;height: 100%;position: relative;.mapTools {position: absolute;top: 10px;right: 10px;border-radius: 5px;// background: rgba(255, 255, 255, 0.9);background-color: rgba(#001c22, 0.8);z-index: 999;li {width: 35px;height: 35px;color: #fff;display: flex;align-items: center;justify-content: center;border-radius: 5px;cursor: pointer;.icon {font-size: 20px;}&:hover {background: #087b7a;color: #fff;}}}
}
</style>

二、Popup组件

1、HTML

<template><divclass="cesiumPopup":style="{ top: popupPs.y + 'px', left: popupPs.x + 'px' }"v-if="show"><!-- 头部 --><ul class="head"><li><span>设备信息</span></li><li><span class="el-icon-close" @click="closePopup"></span></li></ul><!-- 模型内容 --><ul class="content"><li><span class="subTitle">模型标识</span><span class="subValue">{{ popupInfo.id }}</span></li><li><span class="subTitle">模型名称</span><span class="subValue">{{ popupInfo.name }}</span></li><li><span class="subTitle">模型地址</span><span class="subValue">{{ popupInfo.ip }}</span></li><li><span class="subTitle">模型端口</span><span class="subValue">{{ popupInfo.port }}</span></li><li><span class="subTitle">模型位置</span><span class="subValue">{{`${filterNumber(popupInfo.position.lon, 6)}，${filterNumber(popupInfo.position.lat,6)}，${popupInfo.position.height}`}}</span></li><li><span class="subTitle">模型状态</span><spanclass="subValue":style="popupInfo.status == 1 ? 'color:#04F44C' : 'color:#F52E2E'">{{ popupInfo.status == 1 ? "正常" : "异常" }}</span></li></ul></div>
</template>

2、Script

javascript"><script>
export default {name: "Popup",components: {},props: {popupInfo: {type: Object,default: () => {return {id: "",position: {lon: "",lat: "",alt: "",},status: "",ip: "",isSelect: "",name: "",port: "",};},},popupPs: {type: Object,default: () => {return {x: 0,y: 0,};},},},data() {return {show: false,};},computed: {},created() {},mounted() {},methods: {openPopup() {this.show = true;},closePopup() {this.show = false;},// 过滤数据filterNumber(val, digit) {return val.toFixed(digit);},},
};
</script>

3、Css

<style lang="less" scoped>
.cesiumPopup {min-width: 300px;position: absolute;transform: translate(-50%, -130%);z-index: 1;background-color: rgba(#001c22, 0.8);color: #fff;font-size: 12px;box-sizing: border-box;.head {height: 30px;display: flex;align-items: center;justify-content: space-between;background-color: #048197;padding: 0px 10px;box-sizing: border-box;box-shadow: inset -2px 0px 2px rgba(#333, 0.5),inset 2px 2px 2px rgba(#fff, 0.5);.el-icon-close {font-size: 16px;cursor: pointer;&:hover {color: tomato;}}}.content {height: 85%;padding: 10px;box-sizing: border-box;display: flex;flex-direction: column;justify-content: space-between;box-shadow: inset -2px -2px 2px rgba(#333, 0.5),inset 2px 0px 2px rgba(#5696a2, 0.7);li {margin: 5px 0px;display: flex;align-items: center;.subTitle {width: 20%;display: inline-block;background-color: #013946;border: 1px solid #119ea0;margin-right: 5px;padding: 1px 5px;}.subValue {width: 80%;display: inline-block;border: 1px solid #119ea0;box-sizing: border-box;padding: 1px 5px;}}}
}
</style>