| | |
| | | <template> |
| | | <div> |
| | | <div class="flytoBtns" v-if="showFly"> |
| | | <!-- <div class="flytoBtns" v-if="showFly"> |
| | | <span @click="tofly(true)">上海</span> |
| | | <span @click="tofly(false)">广州</span> |
| | | </div> |
| | | </div> --> |
| | | <div class="top"> |
| | | <div class="far"> |
| | | <span |
| | | v-for="(item, index) in top2" |
| | | :key="index" |
| | | :key="index + '-top2'" |
| | | @mousemove="changebac(index)" |
| | | @mouseout="returnbac(index)" |
| | | @click="ishow(index)" |
| | | :style="{ background: `url(${item.img})` }" |
| | | ></span> |
| | | <span |
| | | v-for="(item, index) in bot1" |
| | | :key="index + '-bot1'" |
| | | @mousemove="changebac1(index)" |
| | | @click="remove(index)" |
| | | @mouseout="returnbac1(index)" |
| | | :style="{ background: `url(${item.img})` }" |
| | | ></span> |
| | | </div> |
| | | <div class="far_2"> |
| | | <span @click="benear"></span> |
| | | <span @click="befar"></span> |
| | | </div> |
| | | </div> |
| | | <div class="bot" v-if="showtool" id="move3"> |
| | |
| | | { img: require("@/assets/image/test/组 167.png") }, |
| | | { img: require("@/assets/image/test/组 168.png") }, |
| | | ], |
| | | bot1: [ |
| | | { img: require("@/assets/image/test/组 163.png") }, |
| | | { img: require("@/assets/image/test/组 164.png") }, |
| | | { img: require("@/assets/image/test/组 165.png") }, |
| | | ], |
| | | form: { |
| | | name: "", |
| | | date1: "20160615000000", |
| | |
| | | }); |
| | | }, |
| | | methods: { |
| | | remove(index) { |
| | | if (index == 0) { |
| | | bus.$emit("clearEve", true); |
| | | window.FieldIntensity && window.FieldIntensity.deleteObject(); |
| | | window.imageidXT && window.Viewer.entities.removeById(window.imageidXT); |
| | | } |
| | | if (index == 1) { |
| | | window.createTool = true; |
| | | } |
| | | }, |
| | | benear() { |
| | | $(".navigation-control")[0].click(); |
| | | }, |
| | | befar() { |
| | | $(".navigation-control-last")[0].click(); |
| | | }, |
| | | tofly(data) { |
| | | if (data) { |
| | | //上海 |
| | |
| | | { img: require("@/assets/image/test/组 168.png") }, |
| | | ]; |
| | | this.$set(this.top2, index, data[index]); |
| | | }, |
| | | changebac1(index) { |
| | | let movein = [ |
| | | { img: require("@/assets/image/change/组172.png") }, |
| | | { img: require("@/assets/image/change/组173.png") }, |
| | | { img: require("@/assets/image/change/组174.png") }, |
| | | ]; |
| | | this.$set(this.bot1, index, movein[index]); |
| | | }, |
| | | returnbac1(index) { |
| | | let movein = [ |
| | | { img: require("@/assets/image/test/组 163.png") }, |
| | | { img: require("@/assets/image/test/组 164.png") }, |
| | | { img: require("@/assets/image/test/组 165.png") }, |
| | | ]; |
| | | this.$set(this.bot1, index, movein[index]); |
| | | }, |
| | | close() { |
| | | this.showtool = false; |
| | |
| | | cursor: move; |
| | | } |
| | | .top { |
| | | width: 100px; |
| | | height: 295px; |
| | | transform: translateX(-103px); |
| | | width: 700px; |
| | | height: 100px; |
| | | /* transform: translateX(-103px); */ |
| | | display: flex; |
| | | flex-direction: column; |
| | | justify-content: space-between; |
| | | margin-top: 60px; |
| | | } |
| | | |
| | | .far { |
| | | display: block; |
| | | width: 100%; |
| | | height: 100%; |
| | | display: flex; |
| | | flex-direction: column; |
| | | /* flex-direction: column; */ |
| | | } |
| | | .far > span { |
| | | display: block; |
| | | width: 100%; |
| | | height: 30%; |
| | | width: calc(100% / 6); |
| | | height: 100%; |
| | | background-size: 100% 100% !important; |
| | | background-repeat: no-repeat !important; |
| | | background-position: center !important; |
| | | } |
| | | |
| | | .far_2 { |
| | | width: calc(700px / 6); |
| | | height: 200px; |
| | | /* display: flex; */ |
| | | /* flex-direction: column; */ |
| | | position: absolute; |
| | | /* background-color: #fff; */ |
| | | left: 705px; |
| | | } |
| | | .far_2 > span { |
| | | display: block; |
| | | width: 100%; |
| | | height: 49%; |
| | | cursor: pointer; |
| | | background-size: 100% 100% !important; |
| | | background-repeat: no-repeat !important; |
| | | background-position: center !important; |
| | | } |
| | | .far_2 > span:nth-child(1) { |
| | | background: url(../../../assets/image/test/+.png); |
| | | } |
| | | .far_2 > span:nth-child(1):hover { |
| | | background: url(../../../assets/image/change/图层2.png); |
| | | } |
| | | .far_2 > span:nth-child(2) { |
| | | background: url(../../../assets/image/test/-.png); |
| | | } |
| | | .far_2 > span:nth-child(2):hover { |
| | | background: url(../../../assets/image/change/图层1.png); |
| | | } |
| | | .bot { |
| | | width: 940px; |
| | | height: 1200px; |