合并
This commit is contained in:
@ -1,628 +0,0 @@
|
||||
<template>
|
||||
<div class="earth gis2D" id="earth">
|
||||
<header-top :isShowTab="false" :isShowLog="false"></header-top>
|
||||
<!-- <el-button class="btn" type="primary" @click="gengxin">更新</el-button> -->
|
||||
<div class="left_title_button">
|
||||
<div class="title">{{ projectName }}</div>
|
||||
<div class="btn" @click="updateZhiJiaZhuanDian('zhuangdian')">
|
||||
<SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
|
||||
<span>桩点-更新高程</span>
|
||||
</div>
|
||||
<div class="btn" @click="updateHighLevel('nibianqi')">
|
||||
<SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
|
||||
<span>逆变器-更新高程</span>
|
||||
</div>
|
||||
<div class="btn" @click="updateHighLevel('xiangbian')">
|
||||
<SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
|
||||
<span>箱变-更新高程</span>
|
||||
</div>
|
||||
<div class="btn" @click="updateZhiJiaZhuanDian('zhijia')">
|
||||
<SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
|
||||
<span>支架-更新高程</span>
|
||||
</div>
|
||||
<div class="btn" @click="centerHeight()">
|
||||
<SvgIcon :name="bottomSvg" :isStyle="true" :className="'width:250px;height:50px;'" />
|
||||
<span>光伏板-更新高程</span>
|
||||
</div>
|
||||
</div>
|
||||
<progressLoading :progress="progress" :tips="progressTips"></progressLoading>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
// import { toRefs, reactive, defineComponent, onMounted, getCurrentInstance, ref, nextTick } from 'vue';
|
||||
// import { ElLoading, ElMessage } from 'element-plus';
|
||||
// import headerTop from '../components/header/index.vue';
|
||||
// import { NextLoading } from '/@/utils/loading';
|
||||
// import { updateProjectId } from '/@/utils/tools';
|
||||
// import { useUserInfo } from '/@/stores/userInfo';
|
||||
// import progressLoading from '/@/components/progressLoading/index.vue';
|
||||
// // 资源接口
|
||||
// import { listQianqiMoxing } from '/@/api/system/qianqiManage/qianqiMoxing';
|
||||
// import { manageAll, updateAll, gisList, gisListZhijia, ZhuangdianEdit_detail, ZhijiaEdit_detail } from '/@/api/gis2D/all';
|
||||
// import { getSysProject } from '/@/api/system/sysProject';
|
||||
// import bottomSvg from '/@/assets/svg/bottom.svg';
|
||||
// // json字符判断
|
||||
// import { typeJSON } from '/@/utils/toolsValidate';
|
||||
// import { renderGuangfubanGlb } from '../utils/treeRender.js';
|
||||
// import zjImage from '/@/assets/images/tree_icon/zhijia.png';
|
||||
// import { Session } from '/@/utils/storage';
|
||||
// import axios from 'axios';
|
||||
// // import sign from '/@/utils/sign.js';
|
||||
import zdImage from '/@/assets/images/tree_icon/zhuangdian.png';
|
||||
let nibianqi = [];
|
||||
let xiangbian = [];
|
||||
let guanfuban = [];
|
||||
let YJ = window.YJ;
|
||||
// eslint-disable-next-line no-undef
|
||||
export default defineComponent({
|
||||
name: 'index',
|
||||
components: {
|
||||
headerTop,
|
||||
progressLoading,
|
||||
},
|
||||
setup() {
|
||||
const stores = useUserInfo();
|
||||
const state = reactive({
|
||||
projectId: stores.$state.userInfos.uprojectId,
|
||||
queryParam: {
|
||||
pageNum: 1,
|
||||
pageSize: 10000000000,
|
||||
projectId: stores.$state.userInfos.uprojectId,
|
||||
},
|
||||
projectName: '',
|
||||
bottomSvg,
|
||||
tools: null,
|
||||
zhuangdian: {
|
||||
// 桩点更新高层
|
||||
originArr: [] as any[], //源数据数组
|
||||
poiArr: [] as any[], //位置数据数组
|
||||
},
|
||||
zhijia: {
|
||||
// 支架更新高层
|
||||
originArr: [] as any[], //源数据数组
|
||||
poiArr: [] as any[], //位置数据数组
|
||||
},
|
||||
gfbArr: [] as any[],
|
||||
bbtArr: [] as any[],
|
||||
progress: -1, //加载进度
|
||||
progressTips: '数据更新中，请稍后……',
|
||||
loading: null,
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
// 关闭Loading效果
|
||||
NextLoading.done();
|
||||
createEarth();
|
||||
// 切换项目 项目ID数据同步
|
||||
let channel = new BroadcastChannel('BC-switchProject');
|
||||
channel.addEventListener('message', function (e) {
|
||||
if (e.data !== state.projectId) {
|
||||
//保存更新项目id
|
||||
updateProjectId(e.data);
|
||||
location.reload(); //刷新页面
|
||||
}
|
||||
});
|
||||
});
|
||||
const initData = () => {
|
||||
getRresource();
|
||||
// 获取所有数据
|
||||
getSourceAll();
|
||||
// 项目名称
|
||||
getProList(state.projectId);
|
||||
// 获取桩点
|
||||
getZhiJiaList();
|
||||
getXZhuangDianList();
|
||||
};
|
||||
const commonJson = (item) => {
|
||||
if (!item.detail) {
|
||||
//是否存在
|
||||
return false;
|
||||
}
|
||||
if (!typeJSON(item.detail)) {
|
||||
//是否是JSON字符
|
||||
return false;
|
||||
}
|
||||
return true;
|
||||
};
|
||||
// 渲染倾斜模型
|
||||
const renderModel = (item) => {
|
||||
let Nposition = {
|
||||
lng: 0,
|
||||
lat: 0,
|
||||
alt: 0,
|
||||
};
|
||||
let position = null;
|
||||
if (commonJson(item)) {
|
||||
position = JSON.parse(item.detail).position || Nposition;
|
||||
} else {
|
||||
position = Nposition;
|
||||
}
|
||||
let options = {
|
||||
id: item.sourceId,
|
||||
host: '',
|
||||
position,
|
||||
show: true,
|
||||
};
|
||||
// eslint-disable-next-line no-undef
|
||||
let model = new YJ.Zmkg.Source(options);
|
||||
model.on().then((res) => {
|
||||
if (model.source.tileset) {
|
||||
let bim = model.source.tileset.czmObject;
|
||||
}
|
||||
setTimeout(() => {
|
||||
if (model.id != 'dixing') {
|
||||
model.flyTo();
|
||||
}
|
||||
}, 1000);
|
||||
});
|
||||
};
|
||||
const getRresource = () => {
|
||||
getQxModelList();
|
||||
};
|
||||
// 渲染光伏板
|
||||
const redenrGfB = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '加载光伏板中....',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
let batchSize = 100;
|
||||
for (let i = 0; i < guanfuban.length; i += batchSize) {
|
||||
const batch = guanfuban.slice(i, i + batchSize);
|
||||
renderGuangfubanGlb(batch);
|
||||
}
|
||||
loading.close();
|
||||
};
|
||||
// 获取所有的数据
|
||||
const getSourceAll = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '获取数据中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
manageAll({ id: state.projectId }).then((res) => {
|
||||
loading.close();
|
||||
const { data } = res;
|
||||
let list = data.data;
|
||||
console.log('listlistlistlist', list);
|
||||
if (list.length > 0) {
|
||||
list.forEach((item: any) => {
|
||||
if (item.type == 18) {
|
||||
nibianqi.push(item);
|
||||
}
|
||||
if (item.type == 23) {
|
||||
xiangbian.push(item);
|
||||
}
|
||||
if (item.type == 15) {
|
||||
guanfuban.push(item);
|
||||
}
|
||||
});
|
||||
let one = JSON.parse(guanfuban[0].detail);
|
||||
if (one.height) {
|
||||
redenrGfB();
|
||||
} else {
|
||||
ElMessage.warning('请优先更新光伏板');
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
// 删除光伏板数据
|
||||
const removeSources = () => {
|
||||
window['$PROJECT_MAP'].forEach((item) => {
|
||||
// 清空地球上的实例
|
||||
try {
|
||||
item[0].remove();
|
||||
} catch (error) {}
|
||||
});
|
||||
window['$PROJECT_MAP'].clear();
|
||||
};
|
||||
// 数组分组工具方法
|
||||
const groupArr = (array, subGroupLength) => {
|
||||
let index = 0;
|
||||
let newArray = [];
|
||||
while (index < array.length) {
|
||||
newArray.push(array.slice(index, (index += subGroupLength)));
|
||||
}
|
||||
return newArray;
|
||||
};
|
||||
// 根据key去重
|
||||
const duplicateRemoveByKey = (arr: any) => {
|
||||
//根据key去重
|
||||
let arrMap = new Map();
|
||||
for (let item of arr) {
|
||||
if (!arrMap.has(item.id)) {
|
||||
arrMap.set(item.id, item);
|
||||
}
|
||||
}
|
||||
arr = [...arrMap.values()]; //把map中所有的值取出来放进数组
|
||||
return arr;
|
||||
};
|
||||
// 采样高层
|
||||
const updateZhiJiaZhuanDian = async (type: any) => {
|
||||
console.log(123);
|
||||
|
||||
let loading = null;
|
||||
let load = false;
|
||||
if (type == 'zhuangdian' && window.$PROJECT_MAP) {
|
||||
removeSources();
|
||||
load = true;
|
||||
} else {
|
||||
redenrGfB();
|
||||
}
|
||||
|
||||
if (type != 'zhuangdian' && type != 'zhijia') {
|
||||
loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '正在更新中',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
} else {
|
||||
state.progress = 0;
|
||||
}
|
||||
console.log('statestatestatestatestate', state);
|
||||
|
||||
if (state[type].poiArr.length && state[type].originArr.length) {
|
||||
let poiGroupArr = groupArr(state[type].poiArr, 500);
|
||||
let oriGroupArr = groupArr(state[type].originArr, 500);
|
||||
if (poiGroupArr.length) {
|
||||
for (let i in poiGroupArr) {
|
||||
await state.tools!.sampleHeightMostDetailed(poiGroupArr[i]).then((res: any) => {
|
||||
if (res.length === oriGroupArr[i].length) {
|
||||
// 返填重新赋值
|
||||
oriGroupArr[i] = oriGroupArr[i].map((v: any, i: any) => {
|
||||
let position = JSON.parse(v.detail);
|
||||
if (type === 'zhijia') {
|
||||
position.position.height = res[i].height ? res[i].height : 0;
|
||||
} else {
|
||||
position.position.alt = res[i].height ? res[i].height : 0;
|
||||
}
|
||||
v.detail = JSON.stringify(position);
|
||||
return v;
|
||||
});
|
||||
|
||||
state[type].originArr = [...state[type].originArr, ...oriGroupArr[i]];
|
||||
state[type].originArr = duplicateRemoveByKey(state[type].originArr);
|
||||
console.log(state[type].originArr);
|
||||
state.progressTips = `总计${poiGroupArr.length}组数据，正在进行第${Number(i) + 1}组数据采样`;
|
||||
state.progress = Number((((Number(i) + 1) / poiGroupArr.length) * 100).toFixed(2));
|
||||
if (type === 'zhuangdian' || type === 'zhijia') {
|
||||
// 全部采样完才请求接口
|
||||
if (Number(i) - 0 == poiGroupArr.length - 1) {
|
||||
updateAlt(type, loading);
|
||||
}
|
||||
} else {
|
||||
updateAlt(type, loading);
|
||||
}
|
||||
} else {
|
||||
loading?.close();
|
||||
ElMessage.success('更新失败');
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 更新高层
|
||||
const updateAlt = async (type: any, loading: any = null) => {
|
||||
if (type === 'zhuangdian') {
|
||||
chunkUpdateAlt(type, '/zm/api/v1/system/qianqiGuangfubanIdsZhuangdian/edit_detail');
|
||||
}
|
||||
if (type === 'zhijia') {
|
||||
chunkUpdateAlt(type, '/zm/api/v1/system/qianqiGuangfubanIdsZhijia/edit_detail');
|
||||
}
|
||||
};
|
||||
|
||||
// 更新高程 分组请求接口（桩点 支架）
|
||||
const chunkUpdateAlt = async (type: any, url: any) => {
|
||||
state.progress = 0;
|
||||
console.log(state.zhuangdian.originArr);
|
||||
let list = state[type].originArr.map((item: any) => {
|
||||
return JSON.parse(item.detail);
|
||||
});
|
||||
let groupList = groupArr(list, 5000);
|
||||
if (groupList.length) {
|
||||
for (let i in groupList) {
|
||||
state.progressTips = `总计${groupList.length}组数据，正在进行第${Number(i) + 1}组数据更新`;
|
||||
state.progress = Number(((Number(i) / groupList.length) * 100).toFixed(2));
|
||||
await axios({
|
||||
url: url,
|
||||
method: 'put',
|
||||
timeout: 0,
|
||||
headers: {
|
||||
Authorization: 'Bearer ' + `${Session.get('token')}`,
|
||||
'Content-Type': 'application/json',
|
||||
...sign({ projectId: state.projectId, list: groupList[i] }),
|
||||
},
|
||||
data: { projectId: state.projectId, list: groupList[i] },
|
||||
})
|
||||
.then((res: any) => {
|
||||
if (res.data.code === 0) {
|
||||
state.progress = 100;
|
||||
ElMessage.success(`第${Number(i) + 1}组数据更新成功，剩余${groupList.length - 1 - Number(i)}组数据`);
|
||||
if (type === 'zhuangdian') {
|
||||
getZhiJiaList();
|
||||
}
|
||||
} else {
|
||||
ElMessage.error(res.data.message);
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
ElMessage.error('请求失败');
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
// 获取支架列表
|
||||
const getZhiJiaList = async () => {
|
||||
state.zhijia.originArr = [];
|
||||
state.zhijia.poiArr = [];
|
||||
await gisListZhijia(state.queryParam).then((res: any) => {
|
||||
console.log('list接口', res);
|
||||
|
||||
if (res.code === 0 && res.data.list) {
|
||||
let arr = res.data.list.map((item, index) => {
|
||||
item.p_id = '106';
|
||||
item.checked = 1;
|
||||
item.is_show = 1;
|
||||
item.layer_index = 0;
|
||||
item.icon = zjImage;
|
||||
item.tree_index = 0;
|
||||
let detail = null;
|
||||
if (commonJson(item)) {
|
||||
detail = JSON.parse(item.detail);
|
||||
state.zhijia.originArr.push(item);
|
||||
state.zhijia.poiArr.push({ lng: detail.position.lng, lat: detail.position.lat });
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取桩点的数据
|
||||
const getXZhuangDianList = async () => {
|
||||
await gisList(state.queryParam).then((res: any) => {
|
||||
if (res.code === 0 && res.data.list) {
|
||||
state.zhuangdian.poiArr = [];
|
||||
let arr = res.data.list.map((item: any, index: any) => {
|
||||
item.p_id = '102';
|
||||
item.checked = 1;
|
||||
item.is_show = 1;
|
||||
item.layer_index = 0;
|
||||
item.icon = zdImage;
|
||||
item.tree_index = 0;
|
||||
let detail = null;
|
||||
if (commonJson(item)) {
|
||||
detail = JSON.parse(item.detail);
|
||||
state.zhuangdian.originArr.push(item);
|
||||
state.zhuangdian.poiArr.push({ lng: detail.position.lng, lat: detail.position.lat });
|
||||
}
|
||||
return item;
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取中心点高程（光伏板）
|
||||
const centerHeight = () => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '更新高程、中心点...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
let arr = [];
|
||||
guanfuban.forEach((item) => {
|
||||
arr.push(JSON.parse(item.detail));
|
||||
});
|
||||
let heightAndCenter = window.YJ.Zmkg.Guangfu.CenterHeight(arr);
|
||||
let center = heightAndCenter.center;
|
||||
heightAndCenter.Cartographic.then((Cartographic: any) => {
|
||||
if (Cartographic.length > 0) {
|
||||
loading.close();
|
||||
assemblingPhotovoltaicPanels(center, Cartographic);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 组装高程数据
|
||||
const assemblingPhotovoltaicPanels = async (center: any, height: any) => {
|
||||
guanfuban.forEach((item, index) => {
|
||||
let i = JSON.parse(item.detail);
|
||||
i.height = height[index].height;
|
||||
i.center = center[index];
|
||||
item.detail = JSON.stringify(i);
|
||||
});
|
||||
let data = [...guanfuban];
|
||||
let batchSize = 100000;
|
||||
for (let i = 0; i < data.length; i += batchSize) {
|
||||
const batch = data.slice(i, i + batchSize);
|
||||
await updateElevation(batch);
|
||||
}
|
||||
getSourceAll();
|
||||
};
|
||||
// 更新高程（箱变、逆变器）
|
||||
const updateHighLevel = (str: string) => {
|
||||
let gxArr;
|
||||
if (str == 'nibianqi') {
|
||||
gxArr = nibianqi;
|
||||
}
|
||||
if (str == 'xiangbian') {
|
||||
gxArr = xiangbian;
|
||||
}
|
||||
if (gxArr.length == 0) {
|
||||
ElMessage({
|
||||
message: '数据为空，请确认数据是否上传',
|
||||
type: 'warning',
|
||||
});
|
||||
return;
|
||||
}
|
||||
let arr = [];
|
||||
gxArr.forEach((item) => {
|
||||
let p = JSON.parse(item.detail).positions[0];
|
||||
arr.push(p);
|
||||
});
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '更新高程中...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
state.tools.sampleHeightMostDetailed(arr).then((Cartographic) => {
|
||||
if (Cartographic.length > 0) {
|
||||
loading.close();
|
||||
assemblyData(gxArr, Cartographic);
|
||||
}
|
||||
});
|
||||
};
|
||||
// 组装数据
|
||||
const assemblyData = (gxArr, arr) => {
|
||||
gxArr.forEach((item, index) => {
|
||||
let i = JSON.parse(item.detail);
|
||||
i.positions[0].alt = arr[index].height;
|
||||
item.detail = JSON.stringify(i);
|
||||
});
|
||||
updateElevation(gxArr);
|
||||
};
|
||||
// 更新高程(更新到后端)
|
||||
const updateElevation = (gxArr) => {
|
||||
const loading = ElLoading.service({
|
||||
lock: true,
|
||||
text: '上传中，请勿关闭页面...',
|
||||
background: 'rgba(0, 0, 0, 0.7)',
|
||||
});
|
||||
updateAll({ Modules: gxArr }).then((res) => {
|
||||
loading.close();
|
||||
if (res.code == 0) {
|
||||
ElMessage({
|
||||
message: '上传成功',
|
||||
type: 'success',
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取地形数据
|
||||
const getQxModelList = () => {
|
||||
listQianqiMoxing(state.queryParam).then((res: any) => {
|
||||
if (res.code === 0 && res.data.list && res.data.list.length) {
|
||||
res.data.list.forEach((item) => {
|
||||
renderModel(item);
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
// 获取当前项目信息
|
||||
const getProList = (id: any) => {
|
||||
getSysProject(id).then((res: any) => {
|
||||
const data = res.data;
|
||||
state.projectName = data.projectName;
|
||||
});
|
||||
};
|
||||
const createEarth = () => {
|
||||
// eslint-disable-next-line no-undef
|
||||
YJ.on().then((res: any) => {
|
||||
// eslint-disable-next-line no-undef
|
||||
let earth = new YJ.YJEarth('earth');
|
||||
// // this.areaShow = true
|
||||
// eslint-disable-next-line no-undef
|
||||
new YJ.Layer.ArcgisWXImagery();
|
||||
// // new YJ.Layer.ArcgisGRAYImagery()
|
||||
// // new YJ.Layer.ArcgisBLUEImagery()
|
||||
// // new YJ.Terrain.Arcgis()
|
||||
// eslint-disable-next-line no-undef
|
||||
new YJ.Layer.GDLWImagery();
|
||||
// eslint-disable-next-line no-undef
|
||||
state.tools = new YJ.Tools();
|
||||
// eslint-disable-next-line no-undef
|
||||
YJ.getEarth().propertyStyle = new Cesium.Cesium3DTileStyle({
|
||||
// let stayle = new Cesium.Cesium3DTileStyle({
|
||||
/*color: {
|
||||
evaluateColor: (feature, result) => {
|
||||
return bimTree.evaluateColor(feature, result)
|
||||
}
|
||||
},*/
|
||||
show: {
|
||||
evaluate: (feature) => {
|
||||
return evaluateShow(feature);
|
||||
},
|
||||
},
|
||||
});
|
||||
initData();
|
||||
});
|
||||
};
|
||||
// 监听模型加载显示隐藏
|
||||
const evaluateShow = (feature: any) => {
|
||||
return true;
|
||||
if (!feature) return true;
|
||||
if (!feature.hasProperty('id')) return true;
|
||||
var fid = feature.getProperty('id');
|
||||
// //获取tileset
|
||||
var tileset = feature.tileset.xbsjTileset;
|
||||
if (!tileset) return true;
|
||||
// //寻找这个tileset上绑定的配置
|
||||
var config = window._visibleConfig.find((f) => f.tileset === tileset);
|
||||
if (!config) return true;
|
||||
//如果配置里包含，那么返回可见性
|
||||
if (config.visibleCach.hasOwnProperty(fid)) {
|
||||
return config.visibleCach[fid];
|
||||
} else return false;
|
||||
//否则返回可见
|
||||
};
|
||||
|
||||
return {
|
||||
createEarth,
|
||||
evaluateShow,
|
||||
getRresource,
|
||||
getQxModelList,
|
||||
centerHeight,
|
||||
commonJson,
|
||||
updateHighLevel,
|
||||
updateZhiJiaZhuanDian,
|
||||
redenrGfB,
|
||||
...toRefs(state),
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.earth {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
overflow: hidden;
|
||||
position: relative;
|
||||
|
||||
.left_title_button {
|
||||
position: absolute;
|
||||
top: 10%;
|
||||
left: 30px;
|
||||
width: 250px;
|
||||
height: 100px;
|
||||
z-index: 1999;
|
||||
|
||||
.title {
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
font-size: 22px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
position: relative;
|
||||
margin-bottom: 30px;
|
||||
|
||||
> span {
|
||||
width: 100%;
|
||||
font-size: 22px;
|
||||
font-weight: bold;
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
letter-spacing: 3px;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user