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/components/mobilePopupOur/index.vue | 457 ++++++++++++++++++++++++++++++++++++++++++++------------
1 files changed, 354 insertions(+), 103 deletions(-)
diff --git a/src/components/mobilePopupOur/index.vue b/src/components/mobilePopupOur/index.vue
index c9e8cc9..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>
@@ -25,40 +27,28 @@
</div>
<div class="m_p_center">
<el-tabs v-model="activeName" @tab-click="handleClick">
- <el-tab-pane label="西东大街" name="first">
+ <el-tab-pane
+ v-for="(item, index) in tabTable"
+ :key="index"
+ :label="item.label"
+ :name="item.value"
+ >
<div class="m_p_c_tableIn">
+ <el-empty
+ v-show="item.child.length == 0"
+ description="暂无数据"
+ ></el-empty>
<mobilePopupOurOnce
- v-for="(item, index) in tableData1"
- :key="index"
- :onceData="item"
+ v-for="(citem, cindex) in item.child"
+ :key="cindex"
+ :ends="item.child.length - 1 == cindex"
+ :onceData="citem"
></mobilePopupOurOnce>
- </div>
- </el-tab-pane>
- <el-tab-pane label="长江路" name="second">
- <div class="m_p_c_tableIn">
- <mobilePopupOurOnce
- v-for="(item, index) in tableData2"
- :key="index"
- :onceData="item"
- ></mobilePopupOurOnce>
- </div>
- </el-tab-pane>
- <el-tab-pane label="科技园" name="third">
- <div class="m_p_c_tableIn">
- <mobilePopupOurOnce
- v-for="(item, index) in tableData3"
- :key="index"
- :onceData="item"
- ></mobilePopupOurOnce>
- </div>
- </el-tab-pane>
- <el-tab-pane label="逸夫楼" name="fourth">
- <div class="m_p_c_tableIn">
- <mobilePopupOurOnce
- v-for="(item, index) in tableData4"
- :key="index"
- :onceData="item"
- ></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>
@@ -75,6 +65,7 @@
name: "mobilePopupOur",
data() {
return {
+ searchLabel: "",
choiceValue: "",
choiceData: [
{
@@ -90,76 +81,329 @@
value: "3",
},
],
+ tabTable: [
+ {
+ 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: "",
+ 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: ["定位"],
+ },
+ ],
+ },
+ {
+ label: "长江路",
+ value: "second",
+ child: [
+ {
+ name: "电力部门1",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545091094,
+ y: 4654237.53861168,
+ z: 3288210.9971238153,
+ },
+ position: [121.49190702133591, 31.234911741858513],
+ buts: ["实景", "图集", "定位"],
+ },
+ {
+ name: "保安部门1",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.541509094,
+ y: 4654237.53816168,
+ z: 3288210.9971125853,
+ },
+ position: [121.49907021413591, 31.234911741895513],
+ buts: ["图集", "定位"],
+ },
+ {
+ name: "图书馆1",
+ icon: "",
+ Cartesian3: {
+ x: -2852016.545019094,
+ y: 4654237.53861168,
+ z: 3288210.9971123853,
+ },
+ position: [121.49901024133591, 31.234911749581513],
+ buts: ["定位"],
+ },
+ ],
+ },
+ {
+ label: "科技园",
+ value: "third",
+ child: [],
+ },
+ {
+ label: "逸夫楼",
+ value: "fourth",
+ child: [],
+ },
+ ],
fullscreenLoading: false,
activeName: "first",
- tableData1: [
- {
- name: "电力部门",
- icon: "",
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门",
- icon: "",
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆",
- icon: "",
- buts: ["定位"],
- },
- ],
- tableData2: [
- {
- name: "电力部门2",
- icon: "",
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门2",
- icon: "",
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆2",
- icon: "",
- buts: ["定位"],
- },
- ],
- tableData3: [
- {
- name: "电力部门3",
- icon: "",
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门3",
- icon: "",
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆3",
- icon: "",
- buts: ["定位"],
- },
- ],
- tableData4: [
- {
- name: "电力部门4",
- icon: "",
- buts: ["实景", "图集", "定位"],
- },
- {
- name: "保安部门4",
- icon: "",
- buts: ["图集", "定位"],
- },
- {
- name: "图书馆4",
- icon: "",
- buts: ["定位"],
- },
- ],
};
},
// watch: {
@@ -169,17 +413,19 @@
// },
// },
mounted() {
- // this.fullscreenLoading = true;
+ 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;
this.fullscreenLoading = false;
this.$store.commit("MSET_BIGPOPUPAFTER", false);
console.log("请求对应街道接口");
- }, 1000);
+ }, 500);
// this.choiceValue = this.choiceData[0].name;
},
methods: {
@@ -187,7 +433,12 @@
console.log(tab.name);
},
choiceIt(name) {
- this.choiceValue = name;
+ this.fullscreenLoading = true;
+ setTimeout(() => {
+ this.choiceValue = name;
+ this.fullscreenLoading = false;
+ console.log("请求对应头部下拉菜单接口");
+ }, 500);
},
closeBigPopup() {
this.$store.commit("MSET_BIGPOPUP", false);
--
Gitblit v1.9.3