From 99dc0cc2172ac8bc267e85435195318e40f03595 Mon Sep 17 00:00:00 2001
From: shuishen <1109946754@qq.com>
Date: Mon, 11 Apr 2022 11:26:17 +0800
Subject: [PATCH] 部分调整
---
src/views/hd/getMapDataInThere.vue | 910 ++++++++++++++++++++++++++++----------------------------
1 files changed, 454 insertions(+), 456 deletions(-)
diff --git a/src/views/hd/getMapDataInThere.vue b/src/views/hd/getMapDataInThere.vue
index b3aac79..ebdb33b 100644
--- a/src/views/hd/getMapDataInThere.vue
+++ b/src/views/hd/getMapDataInThere.vue
@@ -1,495 +1,493 @@
<template>
- <div class="getMapData" :key="Refresh">
- <MapInThere ref="getMapDataRefs" />
- <div class="controlMapWindow">
- <div class="controlMapWindowTitle">
- <el-button-group>
- <el-button
- type="primary"
- icon="el-icon-finished"
- @click="openDrawLineMethod"
- :disabled="fromView"
- >新增路线</el-button
- >
- <el-button
- type="primary"
- @click="openDrawPointMethod"
- icon="el-icon-coordinate"
- :disabled="fromView"
- >新增标点</el-button
- >
- </el-button-group>
- </div>
- <div class="controlMapWindowmain">
- <transition-group
- :name="animateName"
- :enter-active-class="animateEnter"
- :leave-active-class="animateLeave"
- >
- <div
- class="getMapData__once"
- v-for="(item, index) in ourDatas"
- :key="index"
- >
- <div class="getMapData_once_label">
- <el-tag> {{ item.label }}</el-tag>
+ <div class="getMapData" :key="Refresh">
+ <MapInThere ref="getMapDataRefs" />
+ <div class="controlMapWindow">
+ <div class="controlMapWindowTitle">
+ <el-button-group>
+ <el-button
+ type="primary"
+ icon="el-icon-finished"
+ @click="openDrawLineMethod"
+ :disabled="fromView"
+ >新增路线</el-button>
+ <el-button
+ type="primary"
+ @click="openDrawPointMethod"
+ icon="el-icon-coordinate"
+ :disabled="fromView"
+ >新增标点</el-button>
+ </el-button-group>
</div>
- <el-input
- :class="[
+ <div class="controlMapWindowmain">
+ <transition-group
+ :name="animateName"
+ :enter-active-class="animateEnter"
+ :leave-active-class="animateLeave"
+ >
+ <div class="getMapData__once" v-for="(item, index) in ourDatas" :key="index">
+ <div class="getMapData_once_label">
+ <el-tag>{{ item.label }}</el-tag>
+ </div>
+ <el-input
+ :class="[
'getMapData_once_name',
item.notPath == 2 ? 'notPath' : '',
]"
- @blur="myRules(index)"
- v-model="item.name"
- placeholder="请输入路径名称"
- :disabled="fromView"
- ></el-input>
- <transition
- :name="animateNames"
- :enter-active-class="animateEnters"
- :leave-active-class="animateLeaves"
- >
- <div class="notPathTitile" v-show="item.notPath == 2">
- 请输入名称或选择路径
- </div>
- </transition>
- <el-button
- class="getMapData_once_get"
- :type="item.value ? 'success' : 'primary'"
- :title="item.value ? '重新选择' : '点击选择'"
- :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
- @click="openMap(item.label, index, item.value)"
- :disabled="MapDataShow || fromView"
- ></el-button>
- <el-button
- class="getMapData_once_endBut"
- icon="el-icon-delete"
- circle
- @click="deleteRowOurs(index)"
- :disabled="MapDataShow || fromView"
- ></el-button>
- </div>
- </transition-group>
- </div>
+ @blur="myRules(index)"
+ v-model="item.name"
+ placeholder="请输入路径名称"
+ :disabled="fromView"
+ ></el-input>
+ <transition
+ :name="animateNames"
+ :enter-active-class="animateEnters"
+ :leave-active-class="animateLeaves"
+ >
+ <div class="notPathTitile" v-show="item.notPath == 2">请输入名称或选择路径</div>
+ </transition>
+ <el-button
+ class="getMapData_once_get"
+ :type="item.value ? 'success' : 'primary'"
+ :title="item.value ? '重新选择' : '点击选择'"
+ :icon="item.isLine ? 'el-icon-finished' : 'el-icon-add-location'"
+ @click="openMap(item.label, index, item.value)"
+ :disabled="MapDataShow || fromView"
+ ></el-button>
+ <el-button
+ class="getMapData_once_endBut"
+ icon="el-icon-delete"
+ circle
+ @click="deleteRowOurs(index)"
+ :disabled="MapDataShow || fromView"
+ ></el-button>
+ </div>
+ </transition-group>
+ </div>
+ </div>
</div>
- </div>
</template>
<script>
-import { mapGetters } from "vuex";
-import MapInThere from "@/components/map/mainInThere.vue";
+import { mapGetters } from "vuex"
+import MapInThere from "@/components/map/mainInThere.vue"
export default {
- name: "getMapData",
- components: {
- MapInThere,
- },
- computed: {
- ...mapGetters(["rotesData", "pointData"]),
- },
- watch: {
- ourDatas: {
- handler(val) {
- // console.log("深度监听：", val);
+ name: "getMapData",
+ components: {
+ MapInThere,
+ },
+ computed: {
+ ...mapGetters(["rotesData", "pointData"]),
+ },
+ watch: {
+ ourDatas: {
+ handler (val) {
+ // console.log("深度监听：", val);
+ this.checkDom("getMapDataRefs", (dom) => {
+ dom.onceOnlodad(val)
+ })
+ },
+ deep: true,
+ },
+ },
+ data () {
+ return {
+ Refresh: false,
+ // routers: [
+ // {
+ // label: "路径1",
+ // value: "",
+ // routerName: "",
+ // notPath: true,
+ // },
+ // ],
+ // potions: [
+ // {
+ // label: "标点1",
+ // value: "",
+ // potionName: "",
+ // notPath: true,
+ // },
+ // ],
+ //动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeIn",
+ animateLeave: "animated fadeOut",
+ //未输入动画效果
+ animateName: "custom-classes-transition",
+ animateEnter: "animated fadeInDown",
+ animateLeave: "animated fadeOut",
+ openTitle: "路径1",
+ MapDataShow: false,
+ fromView: false,
+ ourDatas: [
+ // {
+ // label: "路径2",
+ // value:
+ // "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
+ // name: "xxx2",
+ // notPath: false,
+ // isLine: true,
+ // id: 2,
+ // },
+ // {
+ // label: "路径3",
+ // value:
+ // "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
+ // name: "xxx3",
+ // notPath: false,
+ // isLine: true,
+ // id: 3,
+ // },
+ // {
+ // label: "标点4",
+ // value: [114.03887343706977, 27.63000553765213],
+ // name: "喜迎校庆选点1",
+ // notPath: false,
+ // isLine: false,
+ // id: 4,
+ // },
+ ],
+ nowId: 0,
+ }
+ },
+ mounted () {
+ // this.$emit("setMapData", [this.routers, this.potions]);
+ let that = this
+ if (that.ourDatas.length != 0) {
+ for (let k in that.ourDatas) {
+ that.ourDatas[k].id = +k + 1
+ }
+ }
+ //判断dom是否存在
this.checkDom("getMapDataRefs", (dom) => {
- dom.onceOnlodad(val);
- });
- },
- deep: true,
+ //提供数据
+ dom.onceOnlodad(that.ourDatas)
+ })
+ this.nowId = +this.ourDatas.length + 1
},
- },
- data() {
- return {
- Refresh: false,
- // routers: [
- // {
- // label: "路径1",
- // value: "",
- // routerName: "",
- // notPath: true,
- // },
- // ],
- // potions: [
- // {
- // label: "标点1",
- // value: "",
- // potionName: "",
- // notPath: true,
- // },
- // ],
- //动画效果
- animateName: "custom-classes-transition",
- animateEnter: "animated fadeIn",
- animateLeave: "animated fadeOut",
- //未输入动画效果
- animateName: "custom-classes-transition",
- animateEnter: "animated fadeInDown",
- animateLeave: "animated fadeOut",
- openTitle: "路径1",
- MapDataShow: false,
- fromView: false,
- ourDatas: [
- // {
- // label: "路径2",
- // value:
- // "LINESTRING(114.03870329193403 27.630853600622704,114.03979921475035 27.628518808535755,114.04046629820375 27.629042945534867,114.04041864938566 27.628971472307715);LINESTRING(114.0392325389847 27.631412806376527,114.03958275318838 27.630799931520087,114.0393492770526 27.630391348282462,114.03993296739206 27.629778473426025,114.04019562804483 27.629982765044836)",
- // name: "xxx2",
- // notPath: false,
- // isLine: true,
- // id: 2,
- // },
- // {
- // label: "路径3",
- // value:
- // "LINESTRING(114.03902048124041 27.631126394329247,114.03985626036528 27.6309025249208,114.03997565738312 27.630215992068223,114.03887123496811 27.630111519677616,114.03903540586764 27.6294548360795,114.04046817008171 27.6294548360795,114.04078158725353 27.629022021889835,114.0396174663296 27.628574283072936,114.03996073275589 27.628245941273878,114.04105023054368 27.628589207700166,114.04105023054368 27.628589207700166)",
- // name: "xxx3",
- // notPath: false,
- // isLine: true,
- // id: 3,
- // },
- // {
- // label: "标点4",
- // value: [114.03887343706977, 27.63000553765213],
- // name: "喜迎校庆选点1",
- // notPath: false,
- // isLine: false,
- // id: 4,
- // },
- ],
- nowId: 0,
- };
- },
- mounted() {
- // this.$emit("setMapData", [this.routers, this.potions]);
- let that = this;
- if (that.ourDatas.length != 0) {
- for (let k in that.ourDatas) {
- that.ourDatas[k].id = +k + 1;
- }
- }
- //判断dom是否存在
- this.checkDom("getMapDataRefs", (dom) => {
- //提供数据
- dom.onceOnlodad(that.ourDatas);
- });
- this.nowId = +this.ourDatas.length + 1;
- },
- methods: {
- openDrawLineMethod() {
- //添加线路的对象
- let id = this.nowId++;
- this.ourDatas.push({
- label: "路径" + +id,
- value: "",
- name: "",
- notPath: false,
- //notpath判断是否验证通过的提示 2 为不通过
- isLine: true,
- //isLine来判断是否是线
- id: +id,
- //id确定不重复
- });
- },
- openDrawPointMethod() {
- //添加点的对象
- let id = this.nowId++;
- this.ourDatas.push({
- label: "标点" + +id,
- value: "",
- name: "",
- notPath: false,
- isLine: false,
- id: +id,
- });
- },
- deleteRowOurs(index) {
- //删除
- this.ourDatas.splice(index, 1);
- },
- backMapDataOurData(val, index) {
- //在地图内useMapData方法中触发
- if (val == "line") {
- this.ourDatas[index].value = this.rotesData;
- } else if (val == "point") {
- this.ourDatas[index].value = this.pointData;
- } else if (val == "notData") {
- this.ourDatas[index].value = "";
- }
- //单个验证
- this.myRules(index);
- },
- //以上是添加数据集方法
- //选择map数据
- openMap(val, num, value) {
- //开始对地图做操作
- this.MapDataShow = true;
- this.openTitle = val;
- this.$refs.getMapDataRefs.init(val, num, value);
- },
- closeOpenedMap() {
- this.MapDataShow = false;
- // this.openTitle = "";
- },
- //下面是旧代码
- editInit(val) {
- //查看情况逆转String成为当页可使用数据,并做动作
- this.reverseMapData(val);
- },
- viewInit(val) {
- //查看情况逆转String成为当页可使用数据,并做动作
- this.reverseMapData(val);
- this.fromView = true; //查看数据不可改
- },
- reverseMapData(val, label) {
- //解释数据
- let rname = val[0][0].split(";"),
- r = val[0][1].split(";"),
- pname = val[1][0].split(";"),
- p = val[1][1].split(";");
- this.ourDatas = [];
- for (let k in r) {
- this.ourDatas.push({
- label: "路径" + (+k + 1),
- value: r[k],
- name: rname[k],
- notPath: false,
- isLine: true,
- id: this.ourDatas.length,
- });
- }
- for (let k in p) {
- let potion = p[k].split(",");
- this.ourDatas.push({
- label: "标点" + (+k + 1),
- value: [+potion[0], +potion[1]],
- name: pname[k],
- notPath: false,
- isLine: false,
- id: this.ourDatas.length,
- });
- }
- this.nowId = +this.ourDatas.length + 1;
- },
- myRules(index) {
- //单个验证
- if (this.ourDatas[index].name && this.ourDatas[index].value) {
- this.ourDatas[index].notPath = false;
- } else {
- this.ourDatas[index].notPath = 2;
- }
- },
- //自定义验证
- myRulesUse() {
- //把一个数组拆开两个来对应之前的数据
- let ourData = this.ourDatas;
- let lineBefor = [];
- let pointBefor = [];
- for (let o in ourData) {
- if (ourData[o].isLine) {
- lineBefor.push(ourData[o]);
- } else {
- pointBefor.push(ourData[o]);
- }
- }
- let line = this.changeMapData(lineBefor, "name");
- let point = this.changeMapData(pointBefor, "name");
- // console.log(line, point);
- if (line[0] == "namenot" || point[0] == "namenot") {
- //需要显示验证失败合集
- let errorId = [];
- if (line[0] == "namenot") {
- errorId.push(...line[1]);
- }
- if (point[0] == "namenot") {
- errorId.push(...point[1]);
- }
- // console.log(errorId, "errorId");
- for (let x in this.ourDatas) {
- // console.log(this.ourDatas[x], "x");
- let flog = true;
- for (let k in errorId) {
- if (errorId[k] == this.ourDatas[x].id) {
- flog = false;
+ methods: {
+ openDrawLineMethod () {
+ //添加线路的对象
+ let id = this.nowId++
+ this.ourDatas.push({
+ label: "路径" + +id,
+ value: "",
+ name: "",
+ notPath: false,
+ //notpath判断是否验证通过的提示 2 为不通过
+ isLine: true,
+ //isLine来判断是否是线
+ id: +id,
+ //id确定不重复
+ })
+ },
+ openDrawPointMethod () {
+ //添加点的对象
+ let id = this.nowId++
+ this.ourDatas.push({
+ label: "标点" + +id,
+ value: "",
+ name: "",
+ notPath: false,
+ isLine: false,
+ id: +id,
+ })
+ },
+ deleteRowOurs (index) {
+ //删除
+ this.ourDatas.splice(index, 1)
+ },
+ backMapDataOurData (val, index) {
+ //在地图内useMapData方法中触发
+ if (val == "line") {
+ this.ourDatas[index].value = this.rotesData
+ } else if (val == "point") {
+ this.ourDatas[index].value = this.pointData
+ } else if (val == "notData") {
+ this.ourDatas[index].value = ""
}
- }
- if (flog) {
- this.ourDatas[x].notPath = false;
- } else {
- this.ourDatas[x].notPath = 2;
- }
- }
- return false;
- } else {
- // console.log("通过");
- for (let i in this.ourDatas) {
- this.ourDatas[i].notPath = false;
- }
- return [line, point];
- }
- },
- //规则
- changeMapData(item, names) {
- let name = "",
- value = "",
- notData = [];
- let itemLength = item.length - 1;
- // console.log(item, names, 7777);
- for (let k in item) {
- let inItem = item[k];
- for (let kin in inItem) {
- if (
- inItem[kin] == "" &&
- kin != "notPath" &&
- kin != "isLine" &&
- kin != "id"
- ) {
- // console.log(kin);
- notData.push(inItem.id);
- break;
- }
- if (kin == names) {
- name += inItem[kin];
- if (k != itemLength) {
- name += ";";
+ //单个验证
+ this.myRules(index)
+ },
+ //以上是添加数据集方法
+ //选择map数据
+ openMap (val, num, value) {
+ //开始对地图做操作
+ this.MapDataShow = true
+ this.openTitle = val
+ this.$refs.getMapDataRefs.init(val, num, value)
+ },
+ closeOpenedMap () {
+ this.MapDataShow = false
+ // this.openTitle = "";
+ },
+ //下面是旧代码
+ editInit (val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val)
+ },
+ viewInit (val) {
+ //查看情况逆转String成为当页可使用数据,并做动作
+ this.reverseMapData(val)
+ this.fromView = true //查看数据不可改
+ },
+ reverseMapData (val, label) {
+ //解释数据
+ let rname = val[0][0].split(";"),
+ r = val[0][1].split(";"),
+ pname = val[1][0].split(";"),
+ p = val[1][1].split(";")
+ this.ourDatas = []
+ for (let k in r) {
+ this.ourDatas.push({
+ label: "路径" + (+k + 1),
+ value: r[k],
+ name: rname[k],
+ notPath: false,
+ isLine: true,
+ id: this.ourDatas.length,
+ })
}
- }
- if (kin == "value") {
- value += inItem[kin];
- if (k != itemLength) {
- value += ";";
+ for (let k in p) {
+ let potion = p[k].split(",")
+ this.ourDatas.push({
+ label: "标点" + (+k + 1),
+ value: [+potion[0], +potion[1]],
+ name: pname[k],
+ notPath: false,
+ isLine: false,
+ id: this.ourDatas.length,
+ })
}
- }
- }
- }
- return notData.length > 0 ? [names + "not", notData] : [name, value];
+ this.nowId = +this.ourDatas.length + 1
+ },
+ myRules (index) {
+ //单个验证
+ if (this.ourDatas[index].name && this.ourDatas[index].value) {
+ this.ourDatas[index].notPath = false
+ } else {
+ this.ourDatas[index].notPath = 2
+ }
+ },
+ //自定义验证
+ myRulesUse () {
+ //把一个数组拆开两个来对应之前的数据
+ let ourData = this.ourDatas
+ let lineBefor = []
+ let pointBefor = []
+ for (let o in ourData) {
+ if (ourData[o].isLine) {
+ lineBefor.push(ourData[o])
+ } else {
+ pointBefor.push(ourData[o])
+ }
+ }
+ let line = this.changeMapData(lineBefor, "name")
+ let point = this.changeMapData(pointBefor, "name")
+ // console.log(line, point);
+ if (line[0] == "namenot" || point[0] == "namenot") {
+ //需要显示验证失败合集
+ let errorId = []
+ if (line[0] == "namenot") {
+ errorId.push(...line[1])
+ }
+ if (point[0] == "namenot") {
+ errorId.push(...point[1])
+ }
+ // console.log(errorId, "errorId");
+ for (let x in this.ourDatas) {
+ // console.log(this.ourDatas[x], "x");
+ let flog = true
+ for (let k in errorId) {
+ if (errorId[k] == this.ourDatas[x].id) {
+ flog = false
+ }
+ }
+ if (flog) {
+ this.ourDatas[x].notPath = false
+ } else {
+ this.ourDatas[x].notPath = 2
+ }
+ }
+ return false
+ } else {
+ // console.log("通过");
+ for (let i in this.ourDatas) {
+ this.ourDatas[i].notPath = false
+ }
+ return [line, point]
+ }
+ },
+ //规则
+ changeMapData (item, names) {
+ let name = "",
+ value = "",
+ notData = []
+ let itemLength = item.length - 1
+ // console.log(item, names, 7777);
+ for (let k in item) {
+ let inItem = item[k]
+ for (let kin in inItem) {
+ if (
+ inItem[kin] == "" &&
+ kin != "notPath" &&
+ kin != "isLine" &&
+ kin != "id"
+ ) {
+ // console.log(kin);
+ notData.push(inItem.id)
+ break
+ }
+ if (kin == names) {
+ name += inItem[kin]
+ if (k != itemLength) {
+ name += ";"
+ }
+ }
+ if (kin == "value") {
+ value += inItem[kin]
+ if (k != itemLength) {
+ value += ";"
+ }
+ }
+ }
+ }
+ return notData.length > 0 ? [names + "not", notData] : [name, value]
+ },
+ checkDom (name, fn) {
+ // 声明定时器
+ let that = this
+ var timer = null
+ // 检查dom是否执行完成
+ function checkDom () {
+ let dom = that.$refs[name]
+ if (dom) {
+ // 执行dom加载完成后的操作
+ // 清除定时器
+ if (!timer) {
+ clearTimeout(timer)
+ }
+ if (fn) {
+ //回调函数
+ fn(dom)
+ return
+ } else {
+ return dom
+ }
+ } else {
+ // 自我调用
+ timer = setTimeout(checkDom, 100)
+ }
+ }
+ // 首次执行
+ checkDom()
+ },
},
- checkDom(name, fn) {
- // 声明定时器
- let that = this;
- var timer = null;
- // 检查dom是否执行完成
- function checkDom() {
- let dom = that.$refs[name];
- if (dom) {
- // 执行dom加载完成后的操作
- // 清除定时器
- if (!timer) {
- clearTimeout(timer);
- }
- if (fn) {
- //回调函数
- fn(dom);
- return;
- } else {
- return dom;
- }
- } else {
- // 自我调用
- timer = setTimeout(checkDom, 100);
- }
- }
- // 首次执行
- checkDom();
- },
- },
};
</script>
<style lang="scss">
.flexCenter {
- display: flex;
- align-items: center;
- justify-content: center;
+ display: flex;
+ align-items: center;
+ justify-content: center;
}
+
.getMapData {
- width: 100%;
- height: 100%;
- position: relative;
- .controlMapWindow {
- width: 320px;
- height: calc(100% - 20px);
- // border: 1px solid red;
- // box-shadow: 2px 0 15px 2px #acacac;
- position: absolute;
- left: 10px;
- top: 10px;
- background-color: #fff;
- border-radius: 0 15px 15px 0;
- padding: 10px 10px;
- overflow: hidden;
- .controlMapWindowTitle {
- height: 40px;
- width: 100%;
- margin-bottom: 5px;
- @extend .flexCenter;
+ width: 100%;
+ height: 100%;
+ position: relative;
+
+ .controlMapWindow {
+ width: 320px;
+ height: calc(100% - 20px);
+ // border: 1px solid red;
+ // box-shadow: 2px 0 15px 2px #acacac;
+ position: absolute;
+ left: 10px;
+ top: 10px;
+ background-color: #fff;
+ border-radius: 0 15px 15px 0;
+ padding: 10px 10px;
+ overflow: hidden;
+
+ .controlMapWindowTitle {
+ height: 40px;
+ width: 100%;
+ margin-bottom: 5px;
+ @extend .flexCenter;
+ }
+
+ .controlMapWindowmain {
+ width: 100%;
+ height: calc(100% - 45px);
+ overflow-x: hidden;
+ overflow-y: scroll;
+ .getMapData_left {
+ width: 50%;
+ height: 40px;
+ box-sizing: border-box;
+ }
+ .getMapData_right {
+ width: 50%;
+ height: 40px;
+ box-sizing: border-box;
+ }
+ .getMapData__once {
+ width: 100%;
+ height: 40px;
+ margin-bottom: 10px;
+ position: relative;
+ @extend .flexCenter;
+ flex-direction: row;
+ .getMapData_once_label {
+ padding-left: 15px;
+ width: 90px;
+ height: 100%;
+ @extend .flexCenter;
+ justify-content: space-around;
+ }
+ .getMapData_once_name {
+ width: calc(100% - 130px);
+ }
+ .getMapData_once_get {
+ padding: 6px 16px;
+ font-size: 20px;
+ }
+ .notPathTitile {
+ position: absolute;
+ left: 90px;
+ bottom: -20px;
+ color: red;
+ font-size: 1px;
+ }
+ }
+ }
}
- .controlMapWindowmain {
- width: 100%;
- height: calc(100% - 45px);
- overflow-x: hidden;
- overflow-y: scroll;
- .getMapData_left {
- width: 50%;
- height: 40px;
- box-sizing: border-box;
- }
- .getMapData_right {
- width: 50%;
- height: 40px;
- box-sizing: border-box;
- }
- .getMapData__once {
- width: 100%;
- height: 40px;
- margin-bottom: 10px;
- position: relative;
- @extend .flexCenter;
- flex-direction: row;
- .getMapData_once_label {
- padding-left: 15px;
- width: 90px;
- height: 100%;
- @extend .flexCenter;
- justify-content: space-around;
- }
- .getMapData_once_name {
- width: calc(100% - 130px);
- }
- .getMapData_once_get {
- padding: 6px 16px;
- font-size: 20px;
- }
- .notPathTitile {
- position: absolute;
- left: 90px;
- bottom: -20px;
- color: red;
- font-size: 1px;
- }
- }
+ // 验证
+ .notPath {
+ // border-bottom: 0.5px solid red;
}
- }
- // 验证
- .notPath {
- // border-bottom: 0.5px solid red;
- }
}
//过度动画
.list-enter {
- opacity: 0;
- transform: translateY(10px);
+ opacity: 0;
+ transform: translateY(10px);
}
+
.list-leave-to {
- opacity: 0;
- transform: translateY(-10px);
+ opacity: 0;
+ transform: translateY(-10px);
}
.list-enter-to,
.list-leave {
- opacity: 1;
+ opacity: 1;
}
- .list-enter-active,
+
+// .list-enter-active,
.list-leave-active {
- transition: all 0.3s;
+ transition: all 0.3s;
}
</style>
--
Gitblit v1.9.3