From 3063e55a3ce855f36654b19b8db90b0ad161404b Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 23 Dec 2021 09:33:34 +0800
Subject: [PATCH] +样式
---
src/components/mobileWindow/index.vue | 16 ++-
src/styles/entitys/text-entitys.scss | 65 +++++++++---
src/components/mobileCortrolButtom/index.vue | 4
src/styles/mobile/popup.scss | 64 +++++++++---
src/components/mobileLeftNav/index.vue | 81 +++++++++++++--
src/router/axios.js | 4
src/store/modules/mobile.js | 27 ++++-
src/components/mobilePopupOurOnce/index.vue | 1
8 files changed, 199 insertions(+), 63 deletions(-)
diff --git a/src/components/mobileCortrolButtom/index.vue b/src/components/mobileCortrolButtom/index.vue
index c15bfaf..b851a50 100644
--- a/src/components/mobileCortrolButtom/index.vue
+++ b/src/components/mobileCortrolButtom/index.vue
@@ -143,7 +143,7 @@
align-items: center;
justify-content: center;
color: white;
- font-size: 22px;
+ font-size: 32px;
margin-left: 12px;
border-radius: 5px;
.icons {
@@ -152,7 +152,7 @@
height: 100%;
}
.icon {
- font-size: 20px;
+ font-size: 32px;
color: #fff;
&::before {
width: 100%;
diff --git a/src/components/mobileLeftNav/index.vue b/src/components/mobileLeftNav/index.vue
index aba8411..ccf3c39 100644
--- a/src/components/mobileLeftNav/index.vue
+++ b/src/components/mobileLeftNav/index.vue
@@ -76,7 +76,8 @@
checked: "/img/leftnav/tag-checked.png",
layer: "tagLayer",
methods: getListarchitecture1,
- imgSrc: "img/mobile/pink.png",
+ imgSrc: "https://map.hit.edu.cn/images/tarrow_xq.png",
+ // imgSrc: "img/mobile/pink.png",
},
// {
// flag: false,
@@ -96,7 +97,8 @@
checked: "/img/leftnav/scene-checked.png",
layer: "sceneLayer",
methods: getListarchitecture,
- imgSrc: "img/mobile/blue.png",
+ imgSrc: "img/leftnav/map-panorama.png",
+ // imgSrc: "img/mobile/blue.png",
},
// {
// flag: false,
@@ -116,7 +118,8 @@
checked: "/img/leftnav/aed-checked.png",
layer: "aedLayer",
methods: getListaed,
- imgSrc: "img/mobile/pink.png",
+ imgSrc: "img/leftnav/map-aed.png",
+ // imgSrc: "img/mobile/pink.png",
},
{
flag: false,
@@ -126,7 +129,8 @@
checked: "/img/leftnav/park-checked.png",
layer: "parkLayer",
methods: getListparking,
- imgSrc: "img/mobile/popcorn.png",
+ imgSrc: "https://map.hit.edu.cn/images/p-biao.png",
+ // imgSrc: "img/mobile/popcorn.png",
},
{
flag: false,
@@ -136,7 +140,8 @@
checked: "/img/leftnav/come-checked.png",
layer: "comeLayer",
methods: getListdoor,
- imgSrc: "img/mobile/purple.png",
+ imgSrc: "img/leftnav/map-activity.png",
+ // imgSrc: "img/mobile/purple.png",
},
],
viewer: null,
@@ -438,24 +443,74 @@
// this.comeLayer["positions"] = positions6;
let ourNum = that.leftNavData.length;
for (let n = 0; n < ourNum; n++) {
- this.leftNavData[n].methods().then((res) => {
+ let ourD = this.leftNavData[n];
+ ourD.methods().then((res) => {
+ let dom;
let data = res.data.data;
let position = that.changePoiton(data);
let num = data.length;
for (let k = 0; k < num; k++) {
- const divIcon = new that.DC.DivIcon(
- position[k],
- `
+ if (ourD.label == "标签") {
+ dom = `
<div class="tag-entitys-box">
<div class="tag-content">
${data[k].mechanismname}
</div>
<div class="tag-angle-content">
- <img src="${this.leftNavData[n].imgSrc}">
+ <img src="${ourD.imgSrc}">
</div>
</div>
- `
- );
+ `;
+ } else if (ourD.label == "实景") {
+ // <div class="way-title" style="border: white 1px solid; padding-left: 2px;font-size: 12px; background: #0066ff; width: 12px;line-height: 13px; padding:2px 1px 2px 1px; color:white;">
+ // ${data[k].mechanismname}
+ // </div>
+ dom = `
+ <div class="way-entitys-box mobile-way-entitys-box">
+ <div class="way-sign-box ">
+ <img src="img/leftnav/map-panorama.png">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "AED") {
+ dom = `
+ <div class="mobiletag-entitys-box">
+ <div class="tag-content">
+ ${data[k].mechanismname}
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "停车") {
+ dom = `
+ <div class="park-entitys-box">
+ <div class="park-title" alt="${data[k].mechanismname}">
+ </div>
+ <div class="park-sign-box">
+ <div>
+ <img src="https://map.hit.edu.cn/images/p-biao.png" width="14" height="14" alt="${data[k].mechanismname}" title="${data[k].mechanismname}">
+ </div>
+ <div>
+ <img src="https://map.hit.edu.cn/images/roadsign.png" width="5" height="21">
+ </div>
+ </div>
+ </div>
+ `;
+ } else if (ourD.label == "出入") {
+ dom = `
+ <div class="mobiletag-entitys-box-pink">
+ <div class="tag-content">
+ ${data[k].mechanismname}
+ </div>
+ <div class="tag-angle-content">
+ <img src="${ourD.imgSrc}">
+ </div>
+ </div>
+ `;
+ }
+ const divIcon = new that.DC.DivIcon(position[k], dom);
//订阅事件
divIcon.on(DC.MouseEventType.CLICK, (e) => {
// console.log(data[k]);
@@ -519,7 +574,7 @@
.m-left-coutrol {
position: absolute;
left: -24px;
- top: 96px;
+ top: 60px;
width: 25px;
height: 60px;
background-color: #fff;
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index 0191526..bb3a62e 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -104,6 +104,7 @@
lntLat: that.ourData.lntLat,
query: { ...this.ourData, seebut: this.seebut },
useJWD: true, //仅使用经纬度
+ from: "PopupOurOnce",
};
that.popupsDom = that.$store.dispatch("setMobileWindows", d);
}, 500);
diff --git a/src/components/mobileWindow/index.vue b/src/components/mobileWindow/index.vue
index 48516c1..e373fd8 100644
--- a/src/components/mobileWindow/index.vue
+++ b/src/components/mobileWindow/index.vue
@@ -8,7 +8,7 @@
<div class="mobilelabel-content">
<div class="mobile-popup-imgs-heard">
<div class="mobile-popup-imgs-h-close">
- <i class="el-icon-circle-close icon" @click="closeWindow"></i>
+ <i class="el-icon-close icon" @click="closeWindow"></i>
</div>
<img :src="url" alt="" />
<el-image
@@ -29,6 +29,7 @@
<div class="m-c-title">{{ item.name }}：</div>
<span class="m-c-center">{{ item.value }}</span>
</div>
+ <div class="mobileBig-center-introduce" v-html="introduce"></div>
</div>
</div>
<div class="mobile-popup-control">
@@ -109,6 +110,9 @@
value: queryData[k] ? queryData[k] : "暂无",
});
}
+ if (k == "introduce") {
+ this.introduce = queryData[k];
+ }
}
}
}
@@ -129,11 +133,13 @@
name: "address",
value: "地址",
},
- {
- name: "introduce",
- value: "详情",
- },
+ // {
+ // name: "introduce",
+ // value: "详情",
+ // },
],
+ introduce:
+ "1，是一个阿拉伯数字。1是一个自然数，是最小的正整数，是最小的正奇数。1是一个有理数，是一位数，也是奇数。1既不是质数也不是合数。1的n次方（n∈R）都等于1。1的倒数是它本身。一个或者几个事物所组成的整体，可以看作是单位“1”。",
title: "",
fullscreenLoading: false,
url: "/img/job/one.jpg",
diff --git a/src/router/axios.js b/src/router/axios.js
index 5833396..56b898b 100644
--- a/src/router/axios.js
+++ b/src/router/axios.js
@@ -9,8 +9,8 @@
const service = axios.create({
// baseURL: 'http://192.168.0.107:83',
- // baseURL: 'http://192.168.0.107:80',
- baseURL: 'http://localhost:82',
+ baseURL: 'http://192.168.0.107:80',
+ // baseURL: 'http://localhost:82',
timeout: 600000 // request timeout
})
diff --git a/src/store/modules/mobile.js b/src/store/modules/mobile.js
index 064f3c4..16b0434 100644
--- a/src/store/modules/mobile.js
+++ b/src/store/modules/mobile.js
@@ -89,12 +89,16 @@
setMobileWindows({ state, commit, dispatch }, data) {//打开随地图移动窗口
// 关闭前一个弹窗？
dispatch("closeMobileWindowsDom");
+ let clnt = data.from == "PopupOurOnce" ? +data.lntLat[0] : +data.lntLat[0],
+ clat = data.from == "PopupOurOnce" ? +data.lntLat[1] - 0.00008 : +data.lntLat[1] - 0.00048,
+ calt = data.from == "PopupOurOnce" ? 0 : 90.648862227;
if (data.useJWD) {
var ellipsoid = state.mviewer.scene.globe.ellipsoid;
var cartographic = global.DC.Namespace.Cesium.Cartographic.fromDegrees(
- data.lntLat[0],
- data.lntLat[1] - 0.00048,
- "90.648862227"
+ // data.lntLat[0],
+ // data.lntLat[1] - 0.00048,//数值增大是下
+ // "90.648862227"
+ clnt, clat, calt
);
data.position = ellipsoid.cartographicToCartesian(cartographic);
}
@@ -121,11 +125,20 @@
// Lat: - 0.0108 y轴 减是上
// h：4000
// lnt： + 0.01187 x轴
- // Lat: - 0.0308y轴
+ // Lat: - 0.0308 y轴
+ // h：330
+ // lnt： + 0.01197 x轴
+ // Lat: - 0.0021 y轴
+ let Flys = [
+ data.from == "PopupOurOnce" ? +data.lntLat[0] + 0.01197 : +data.lntLat[0] + 0.01197,
+ data.from == "PopupOurOnce" ? +data.lntLat[1] - 0.0021 : +data.lntLat[1] - 0.0021,
+ data.from == "PopupOurOnce" ? 330 : 330,
+ ]
let Position = new global.DC.Position(//转坐标
- +data.lntLat[0] + 0.01197,
- +data.lntLat[1] - 0.0021,
- 330,
+ // +data.lntLat[0] + 0.01197,
+ // +data.lntLat[1] - 0.0021,
+ // 330,
+ ...Flys,
0,
-45
);
diff --git a/src/styles/entitys/text-entitys.scss b/src/styles/entitys/text-entitys.scss
index 3266845..90f4722 100644
--- a/src/styles/entitys/text-entitys.scss
+++ b/src/styles/entitys/text-entitys.scss
@@ -1,32 +1,20 @@
-.tag-entitys-box {
+$imgsize: 25px;
+
+.mobiletag-entitys-box {
+ // 手机地图点 勿删
height: 28px;
- // border: 1px solid red;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
.tag-content {
- // display: inline;
- // height: 20px;
- // line-height: 20px;
- // border: #FFFFFF solid 1px;
- // padding: 1px 4px 1px 4px;
- // color: #FFFFFF;
- // text-align: center;
- // background-color: #cc0000;
- // border-radius: 4px;
- // box-shadow: 2px 2px 10px white;
font-size: 1.1rem;
font-weight: 900;
color: red;
-webkit-text-stroke-color: #fff;
-webkit-text-stroke-width: 0.6px;
}
- $imgsize: 30px;
.tag-angle-content {
- // height: 9px;
- // text-align: center;
- // margin: -6px 26px 0px 10px;
width: $imgsize;
height: $imgsize;
img {
@@ -35,7 +23,52 @@
}
}
}
+.mobiletag-entitys-box-pink {
+ // 手机地图点 勿删 粉色
+ height: 28px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-direction: column;
+ .tag-content {
+ font-size: 1.1rem;
+ font-weight: 900;
+ color: #fe77fe;
+ -webkit-text-stroke-color: #fff;
+ -webkit-text-stroke-width: 0.6px;
+ }
+ .tag-angle-content {
+ width: $imgsize;
+ height: $imgsize;
+ img {
+ width: 100%;
+ height: 100%;
+ }
+ }
+}
+.tag-entitys-box {
+ height: 28px;
+ .tag-content {
+ display: inline;
+ height: 20px;
+ line-height: 20px;
+ border: #ffffff solid 1px;
+ padding: 1px 4px 1px 4px;
+ color: #ffffff;
+ text-align: center;
+ background-color: #cc0000;
+ border-radius: 4px;
+ box-shadow: 2px 2px 10px white;
+ font-size: 0.875rem;
+ }
+
+ .tag-angle-content {
+ height: 9px;
+ text-align: center;
+ margin: -6px 26px 0px 10px;
+ }
+}
.way-entitys-box {
.way-title {
border: white 1px solid;
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 76c64ad..a006b78 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -16,25 +16,27 @@
left: 1000px;
position: absolute;
height: auto;
- // background-color: #fff;
+ // background-color: #fff;
background-image: linear-gradient(
// 135deg,
- #28bbf0a1 30px,
- #28bbf0a1 30px,
- // #28bbf0a1 50%,
+ // #28bbf06c 50%,
// transparent 50%
- #28bbf0a1 100%,
- transparent 100%
+ #28bbf06c 35px,
+ #28bbf06c 35px,
+ #28bbf06c calc(100% - 34px),
+ transparent calc(100% - 34px)
),
linear-gradient(
// -45deg,
- transparent 30px,
- #28bbf0a1 30px,
- // #28bbf0a1 50.1%,
+ // #28bbf06c 50.1%,
// transparent 50%
- #28bbf0a1 100%,
- transparent 100%
+ transparent 35px,
+ #28bbf06c 35px,
+ #28bbf06c calc(100% - 0px),
+ transparent calc(100% - 0px)
);
+ // background-image: linear-gradient(135deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50%, transparent 50%),
+ // linear-gradient(-45deg, transparent 30px, #28bbf06c 30px, #28bbf06c 50.1%, transparent 50%);
border-radius: 10px;
position: relative;
@@ -43,12 +45,16 @@
color: #fff;
width: 100%;
height: 35px;
- background-image: linear-gradient(#29baf1, #28bbf0);
+ // background-image: linear-gradient(135deg, transparent 25px, #29baf1 25px);
+ background-image: linear-gradient(#29baf1a1, #29baf1a1);
+
+ // background-image: linear-gradient(#29baf1, #28bbf0);
// background-color: #f7f7f7;
border-bottom: 1px solid #ebebeb;
- font-size: 14px;
+ font-size: 16px;
border-radius: 10px 10px 0 0;
padding: 8px 14px;
+ line-height: 20px;
box-sizing: border-box;
}
.mobilelabel-content {
@@ -59,8 +65,10 @@
.mobile-popup-imgs-h-close {
width: 35px;
height: 34px;
- background-image: linear-gradient(#29baf1, #28bbf0);
+ // background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ // background-image: linear-gradient(#29baf1, #28bbf0);
// background-color: #f7f7f7;
+ background-color: transparent;
position: absolute;
@extend .centersFlex;
border-radius: 100px;
@@ -77,13 +85,16 @@
letter-spacing: 1px;
box-sizing: border-box;
img {
+ margin-left: calc(50% - 35px);
width: 70px;
height: 70px;
}
+ $centerFontSize: 15px;
//内容显示
.mobileBig-center-our {
width: 100%;
height: auto;
+ font-size: $centerFontSize;
.mobileBig-center {
width: 100%;
min-height: 30px;
@@ -101,18 +112,26 @@
line-height: 25px;
}
}
+ .mobileBig-center-introduce {
+ width: 100%;
+ height: auto;
+ // border: 1px solid red;
+ text-indent: 2em;
+ color: #fff;
+ }
}
}
.mobile-popup-control {
width: 100%;
height: 20px;
- background-color: #f7f7f7;
+ // background-color: #f7f7f7;
border-top: 1px solid #ebebeb;
padding: 5px 0 8px 0;
border-radius: 0 0 10px 10px;
display: flex;
align-items: center;
- background-image: linear-gradient(#29baf1, #28bbf0);
+ background-image: linear-gradient(#29baf1a1, #29baf1a1);
+ // background-image: linear-gradient(#29baf1, #28bbf0);
justify-content: center;
position: relative;
&::before {
@@ -212,8 +231,8 @@
@extend .flexCenter;
.el-icon-s-flag.icon {
position: relative;
- top: 10px;
- left: 10px;
+ top: 4px;
+ left: 4px;
}
}
}
@@ -399,3 +418,12 @@
// }
}
}
+
+//左侧弹窗全景图片变小
+.mobile-way-entitys-box {
+ $size: 30px;
+ img {
+ width: $size;
+ height: $size;
+ }
+}
--
Gitblit v1.9.3