From d3fc230051884ee203e8adef0b8ff4158c2b43fe Mon Sep 17 00:00:00 2001
From: liuyg <376836862@qq.com>
Date: Thu, 16 Dec 2021 16:39:21 +0800
Subject: [PATCH] +全屏弹窗样式修改
---
src/styles/mobile/popup.scss | 12 ++
src/components/mobilePopupOur/index.vue | 320 +++++++++++++++++++++++++++++++++++++++++-----------
src/components/mobilePopupOurOnce/index.vue | 14 +
3 files changed, 271 insertions(+), 75 deletions(-)
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index b782dec..b3c26ad 100644
--- a/src/components/mobilePopupOur/index.vue
+++ b/src/components/mobilePopupOur/index.vue
@@ -6,7 +6,9 @@
</div>
<div class="m_p_h_center">
<div>
- <div v-if="mBigPopup.search" style="color: #fff">查询结果</div>
+ <div v-if="mBigPopup.search" style="color: #fff">
+ 查询结果{{ searchLabel ? "--" + searchLabel : "" }}
+ </div>
<el-dropdown trigger="click" @command="choiceIt" v-else>
<span class="el-dropdown-link">
{{ choiceValue }}<i class="el-icon-arrow-down el-icon--right"></i>
@@ -32,11 +34,21 @@
:name="item.value"
>
<div class="m_p_c_tableIn">
+ <el-empty
+ v-show="item.child.length == 0"
+ description="暂无数据"
+ ></el-empty>
<mobilePopupOurOnce
v-for="(citem, cindex) in item.child"
:key="cindex"
+ :ends="item.child.length - 1 == cindex"
:onceData="citem"
></mobilePopupOurOnce>
+ <div v-show="item.child.length != 0">
+ <el-divider content-position="left">
+ <i class="el-icon-s-promotion"></i> 暂无更多
+ </el-divider>
+ </div>
</div>
</el-tab-pane>
</el-tabs>
@@ -53,6 +65,7 @@
name: "mobilePopupOur",
data() {
return {
+ searchLabel: "",
choiceValue: "",
choiceData: [
{
@@ -73,6 +86,237 @@
label: "西东大街",
value: "first",
child: [
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
+ {
+ name: "电力部门",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545079094,
+ y: 4654237.53861168,
+ z: 3288210.9971253853,
+ },
+ position: [121.49907024133591, 31.234911748958513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门",
+ icon: "",
+ Cartesian3: {
+ x: -2853624.057617497,
+ y: 4654505.819491945,
+ z: 3286416.3935731286,
+ },
+ position: [121.51198333955459, 31.216073280697593],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆",
+ icon: "",
+ Cartesian3: {
+ x: -2852304.498038979,
+ y: 4655537.369322868,
+ z: 3286133.4029617086,
+ },
+ position: [121.4945198122125, 31.213002416673532],
+ buts: ["定位"],
+ },
{
name: "电力部门",
icon: "",
@@ -150,80 +394,12 @@
{
label: "科技园",
value: "third",
- child: [
- {
- name: "电力部门2",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门2",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆2",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["定位"],
- },
- ],
+ child: [],
},
{
label: "逸夫楼",
value: "fourth",
- child: [
- {
- name: "电力部门3",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门3",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆3",
- icon: "",
- Cartesian3: {
- x: -2852016.545079094,
- y: 4654237.53861168,
- z: 3288210.9971253853,
- },
- position: [121.49907024133591, 31.234911748958513],
- buts: ["定位"],
- },
- ],
+ child: [],
},
],
fullscreenLoading: false,
@@ -240,7 +416,9 @@
this.fullscreenLoading = true;
setTimeout(() => {
if (this.mBigPopup.search) {
+ this.searchLabel = this.mBigPopup.value;
console.log("查询搜索结果", this.mBigPopup.value);
+ this.fullscreenLoading = false;
return;
}
this.choiceValue = this.mBigPopup.name;
diff --git a/src/components/mobilePopupOurOnce/index.vue b/src/components/mobilePopupOurOnce/index.vue
index 018560c..a9437b1 100644
--- a/src/components/mobilePopupOurOnce/index.vue
+++ b/src/components/mobilePopupOurOnce/index.vue
@@ -1,6 +1,12 @@
<template>
<div class="mobilePopupOurOnce">
- <div class="mobilePopupOurOnce_center">
+ <div
+ class="mobilePopupOurOnce_center"
+ :style="{
+ borderBottom: !ends ? '#d4d4d4 dashed 1px' : '',
+ marginBottom: !ends ? '6px' : '',
+ }"
+ >
<div class="mobilePopupOurOnce_left">
<img src="img/cc/cc.png" alt="" />
</div>
@@ -29,7 +35,7 @@
<script>
import { mapGetters } from "vuex";
export default {
- props: ["onceData"],
+ props: ["onceData", "ends"],
name: "mobilePopupOurOnce",
created() {
this.DC = global.DC;
@@ -84,9 +90,9 @@
padding: 0 0;
margin: 0 8px;
.mobilePopupOurOnce_center {
- margin-bottom: 8px;
+ // margin-bottom: 8px;
height: 80px;
- border-bottom: #d4d4d4 dashed 1px;
+ // border-bottom: #d4d4d4 dashed 1px;
padding-bottom: 8px;
@extend .flexCenter;
.mobilePopupOurOnce_left {
diff --git a/src/styles/mobile/popup.scss b/src/styles/mobile/popup.scss
index 139dcd9..442cf72 100644
--- a/src/styles/mobile/popup.scss
+++ b/src/styles/mobile/popup.scss
@@ -1,4 +1,5 @@
#mobile-map_popup_content {
+ //弹窗
width: 100%;
position: fixed;
z-index: 99;
@@ -144,4 +145,15 @@
}
}
}
+
+ //滚动条
+ /*定义滑块 内阴影+圆角*/
+ ::-webkit-scrollbar-thumb {
+ border-radius: 10px;
+ width: 2px !important;
+ /*滚动条的圆角*/
+ -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.9);
+ background-color: #f1f1f1;
+ /*滚动条的背景颜色*/
+ }
}
--
Gitblit v1.9.3