1571 lines
45 KiB
Vue
1571 lines
45 KiB
Vue
<template>
|
||
<div id="index" ref="appRef" style="overflow: hidden">
|
||
<!-- <div class="bg" :style="{
|
||
backgroundImage:
|
||
'url(' + require(`../../assets/${backgroundPic.index}.png`) + ')',
|
||
}"> -->
|
||
|
||
<!-- <iframe
|
||
name="myframe"
|
||
frameborder="0"
|
||
width="100%"
|
||
height="100%"
|
||
style="position: absolute;"
|
||
ref="iframe"
|
||
:src="videoUrl"
|
||
:key="videoUrl"
|
||
></iframe> -->
|
||
<div class="bg" @contextmenu.prevent="show()">
|
||
<!-- <div class="body-bottom" @contextmenu.prevent="show()"></div>
|
||
<dv-loading v-if="loading">Loading...</dv-loading> -->
|
||
|
||
<!-- <div v-else class="host-body"> -->
|
||
<headerIndex
|
||
style="position: "
|
||
/>
|
||
<div class="mains">
|
||
<div class="leftContent">
|
||
<div class="kehuCount">
|
||
<div style="color:#fff;font-size:12px">客户总数</div>
|
||
<div style="color:#fff;font-size:25px;font-weight: 700;">{{totalCustomer}} <span style="color:#fff;font-size:12px">个</span></div>
|
||
</div>
|
||
<div class="countInfor">
|
||
<div class="content" v-for="(item,index) in leftInfodata" :key="index">
|
||
<div style="width:100px;height:100px" :id="'echarts'+ index"></div>
|
||
<!-- <img :src="item.pic" style="width:30px;height:30px"/> -->
|
||
<div class="text">
|
||
<div style="color:#fff;font-size:12px">{{item.text}}</div>
|
||
<div style="color:#fff;font-size:24px;font-weight: 300;">{{item.num}}</div>
|
||
</div>
|
||
<div style="color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%">{{item.unit}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="rightContent">
|
||
<div class="kehuCount">
|
||
<div style="color:#fff;font-size:12px">主要总数</div>
|
||
<div style="color:#fff;font-size:25px;font-weight: 700;">{{totalTransformationSite}} <span style="color:#fff;font-size:12px">个</span></div>
|
||
</div>
|
||
<div class="countInfor">
|
||
<div class="content" v-for="(item,index) in rightInfodata" :key="index">
|
||
<div style="width:100px;height:100px" :id="'rightEcharts'+ index"></div>
|
||
<!-- <img :src="item.pic" style="width:32px;height:32px"/> -->
|
||
<div class="text">
|
||
<div style="color:#fff;font-size:12px">{{item.text}}</div>
|
||
<div style="color:#fff;font-size:24px;font-weight: 300;">{{item.num}}</div>
|
||
</div>
|
||
<div style="color:#fff;font-size:12px;display: flex;align-items: flex-end;height:58%">{{item.unit}}</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- </div> -->
|
||
<div class="yellowIcon">
|
||
<div style="width:288px;height:47px;" v-show="popShow" @mouseover="popInfor" @mouseleave="popInforLeave"></div>
|
||
<img src="@/assets/newbanImg/title.png" style="width:288px;height:47px;cursor: pointer;z-index:9999" @mouseover="popInfor" @mouseleave="popInforLeave" v-show="!popShow"/>
|
||
<img src="@/assets/newbanImg/yellowIcon.png" style="width:160px;height:161px;cursor: pointer;" @click="intoMain"/>
|
||
</div>
|
||
<div v-show="popShow" id="pop">
|
||
<div class="mask">
|
||
<img src="@/assets/newbanImg/contentPop.png" style="width:288px;height:275px;" @mouseover="popInfor" @mouseleave="popInforLeave"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import CustomDvScrollBoard from "@/components/customDvScrollBoard";
|
||
import CustomDvScrollBoard1 from "@/components/customDvScrollBoard1";
|
||
import drawMixin from "@/utils/drawMixin";
|
||
import headerIndex from "@/components/layout/header";
|
||
import BasicBox from "@/components/BasicBox";
|
||
import dialogComponent from "@/components/dialog";
|
||
import Chart from "./chart.vue";
|
||
// import io from 'socket.io-client'
|
||
import BasicBox5 from "@/components/BasicBox5";
|
||
import axios from "axios";
|
||
import {getHomePageInfo} from "@/api/api";
|
||
import mqtt from 'mqtt'
|
||
// let socketRefs = '';
|
||
|
||
export default {
|
||
mixins: [drawMixin],
|
||
data() {
|
||
return {
|
||
totalCustomer:'',//客户总数
|
||
totalTransformationSite:'',//主要总数
|
||
popShow:false,
|
||
leftInfodata:[
|
||
{pic:require('@/assets/newbanImg/biandianzhan.png'),num:'',text:'变电站总数',unit:'座',name:'totalSite'},
|
||
{pic:require('@/assets/newbanImg/daibangongdan.png'),num:'',text:"代办工单总数",unit:'条',name:'workOrder'},
|
||
{pic:require('@/assets/newbanImg/jinggao.png'),num:'',text:"告警总数",unit:'条',name:'warningNum'},
|
||
],
|
||
rightInfodata:[
|
||
{pic:require('@/assets/newbanImg/zhuyao.png'),num:'',text:'主要总容量',unit:'kVA',name:'transformationCapacity'},
|
||
{pic:require('@/assets/newbanImg/shishifuhe.png'),num:'',text:"实时负荷",unit:'kW',name:'realTimeLoad'},
|
||
{pic:require('@/assets/newbanImg/zuori.png'),num:'',text:"昨日总电量",unit:'kWh',name:'yesterdayTotalElectricity'},
|
||
],
|
||
Visible: false,
|
||
basicInfoShow: true,
|
||
videoUrl: "/land/landMap.html",
|
||
cityName: "",
|
||
nanj: true,
|
||
landC: false,
|
||
backgroundPic: {
|
||
index: "landRes/BG",
|
||
},
|
||
activeColor: -1,
|
||
loading: false,
|
||
imgListData: {},
|
||
imgList: [],
|
||
|
||
configData: {
|
||
jiangsu: {
|
||
// header:['规划用途', '全省数量', '全省占比'],
|
||
data: [],
|
||
},
|
||
nanjing: {
|
||
// header:['规划用途', '南京数量', '南京占比'],
|
||
data: [],
|
||
},
|
||
zhengjiang: {
|
||
header: ["规划用途", "全省数量", "全省占比"],
|
||
data: [],
|
||
},
|
||
changzhou: {
|
||
header: [],
|
||
data: [],
|
||
},
|
||
},
|
||
config: {
|
||
// header:['规划用途', '全省数量', '全省占比'],
|
||
data: [],
|
||
},
|
||
config1: {
|
||
data: [],
|
||
},
|
||
levelConfigData: { nanjing: { data: [0] } },
|
||
levelConfig: {
|
||
data: [10],
|
||
shape: "round",
|
||
waveNum: 2,
|
||
},
|
||
levelConfig1: {
|
||
data: [55],
|
||
shape: "round",
|
||
waveNum: 2,
|
||
},
|
||
resourcesListData: {
|
||
nanjing: [
|
||
{
|
||
name: "南京规划阶段",
|
||
count: 4,
|
||
},
|
||
{
|
||
name: "南京计划阶段",
|
||
count: 4,
|
||
},
|
||
{
|
||
name: "南京建设阶段",
|
||
count: 1,
|
||
},
|
||
{
|
||
name: "南京投运阶段",
|
||
count: 1,
|
||
},
|
||
],
|
||
zhengjiang: [
|
||
{
|
||
name: "规划阶段",
|
||
count: 62,
|
||
},
|
||
{
|
||
name: "计划阶段",
|
||
count: 9,
|
||
},
|
||
{
|
||
name: "建设阶段",
|
||
count: 2,
|
||
},
|
||
{
|
||
name: "投运阶段",
|
||
count: 5,
|
||
},
|
||
],
|
||
},
|
||
resourcesList: [],
|
||
centerListData: {
|
||
nanjing: [],
|
||
zhengjiang: [],
|
||
},
|
||
centerList: [
|
||
{
|
||
title: "不动产权证信息",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/bdc.png"),
|
||
},
|
||
{
|
||
title: "土地证信息",
|
||
count: "无",
|
||
imgUrl: require("@/assets/landRes/tdz.png"),
|
||
},
|
||
{
|
||
title: "房产证信息",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/fdc.png"),
|
||
},
|
||
{
|
||
title: "确权情况",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/qq.png"),
|
||
},
|
||
],
|
||
rankingConfig: {
|
||
data: [
|
||
{
|
||
name: "类别1",
|
||
value: 6,
|
||
},
|
||
{
|
||
name: "类别2",
|
||
value: 8,
|
||
},
|
||
{
|
||
name: "类别3",
|
||
value: 9,
|
||
},
|
||
{
|
||
name: "类别4",
|
||
value: 3,
|
||
},
|
||
{
|
||
name: "类别5",
|
||
value: 8,
|
||
},
|
||
{
|
||
name: "类别6",
|
||
value: 11,
|
||
},
|
||
{
|
||
name: "类别7",
|
||
value: 13,
|
||
},
|
||
{
|
||
name: "类别7",
|
||
value: 6,
|
||
},
|
||
],
|
||
rowNum: 7,
|
||
waitTime: 99999999999999999,
|
||
},
|
||
// socketId:'',
|
||
//默认数据
|
||
workListData: [],
|
||
workListDatafcz: [],
|
||
//建筑物信息
|
||
// workList:[
|
||
// { key: "建筑物名称", value: "",name:"jd" },
|
||
// { key: "坐落地址", value: "",name:"tudi" },
|
||
// { key: "不动产证号", value: "" ,name:"bdczh"},
|
||
// { key: "权利人", value: "",name:"qlr" },
|
||
// { key: "坐落", value: "" ,name:"zl"},
|
||
// ],
|
||
workList: [],
|
||
runOnce: true,
|
||
//不动产权证信息
|
||
workListBdc: [],
|
||
//土地证
|
||
workListNew: [],
|
||
//房产证数据
|
||
workListFCZ: [],
|
||
workListqq: [{ key: "确权信息", value: "", name: "qq" }],
|
||
tit: "建筑物信息",
|
||
// socketData:'jiangsu',
|
||
count: 1,
|
||
params: {},
|
||
leftOpen: true,
|
||
rightOpen: true,
|
||
jdNameNew: "",
|
||
itemViewM: "",
|
||
photoPathsM: [],
|
||
searchShow:true
|
||
};
|
||
},
|
||
|
||
components: {
|
||
headerIndex,
|
||
BasicBox,
|
||
CustomDvScrollBoard,
|
||
CustomDvScrollBoard1,
|
||
dialogComponent,
|
||
BasicBox5,
|
||
Chart,
|
||
},
|
||
computed: {
|
||
// query() {
|
||
// return this.socketData
|
||
// },
|
||
// 'socketRefs': function(){
|
||
// return this.firstname + '-' + this.lastname
|
||
// }
|
||
},
|
||
|
||
mounted() {
|
||
// this.getDataByMqtt(
|
||
// "ws://175.24.235.243:8083/mqtt",
|
||
// "tra_topic"
|
||
// );
|
||
this.cancelLoading();
|
||
// this.initWebSocket();
|
||
// window.addEventListener("message", this.handleMessage);
|
||
this.go("nanjing");
|
||
// this.type=this.params.type
|
||
// this.getJdData(this.params.type)
|
||
// this.workListData = this.workList
|
||
let that = this;
|
||
window.addEventListener('message', function (e) {
|
||
var res = e.data;
|
||
if (res.params != null) {
|
||
that.searchShow = false
|
||
}
|
||
})
|
||
|
||
window.setInterval(()=>{
|
||
getHomePageInfo({
|
||
}).then((res)=>{
|
||
this.totalCustomer = res.data.data.totalCustomer
|
||
this.totalTransformationSite = res.data.data.totalTransformationSite
|
||
let realTimeLoad = res.data.data.realTimeLoad.toString();
|
||
let realData = realTimeLoad.substring(0,realTimeLoad.indexOf(".")+3)
|
||
for(var key in res.data.data){
|
||
for (let i = 0; i < this.leftInfodata.length; i++) {
|
||
if (key == this.leftInfodata[i].name) {
|
||
this.leftInfodata[i].num = res.data.data[key]
|
||
}
|
||
}
|
||
for (let i = 0; i < this.rightInfodata.length; i++) {
|
||
if (key == this.rightInfodata[i].name) {
|
||
this.rightInfodata[i].num = res.data.data[key]
|
||
this.rightInfodata[1].num = realData
|
||
}
|
||
}
|
||
}
|
||
})
|
||
},3000)
|
||
this.leftInfodata.forEach((item,index) => {
|
||
if (index != null) {
|
||
this.leftInitEcharts('echarts' + index)
|
||
}
|
||
});
|
||
this.rightInfodata.forEach((item,index) => {
|
||
if (index != null) {
|
||
this.rightInitEcharts('rightEcharts' + index)
|
||
}
|
||
});
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timing);
|
||
},
|
||
|
||
watch: {
|
||
jdNameNew: {
|
||
handler(newVal) {
|
||
this.$refs.iframe.contentWindow.getMessageFromParent(newVal);
|
||
},
|
||
},
|
||
},
|
||
methods: {
|
||
leftInitEcharts(id){
|
||
console.log(id,'id');
|
||
var imageUrl = '';
|
||
if (id == 'echarts0') {
|
||
imageUrl = '/newbanImg/biandianzhan.png'
|
||
}else if (id == 'echarts1') {
|
||
imageUrl = '/newbanImg/daibangongdan.png'
|
||
}else if (id == 'echarts2') {
|
||
imageUrl = '/newbanImg/jinggao.png'
|
||
}
|
||
var myChart = this.$echarts.init(document.getElementById(id));
|
||
var option = {
|
||
angleAxis: {
|
||
max: 100,
|
||
// 隐藏刻度线
|
||
show: false,
|
||
startAngle: 90
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
polar: {
|
||
radius: '100%' //图形大小
|
||
},
|
||
graphic: {
|
||
elements:[
|
||
{
|
||
type: 'image',
|
||
left: 'center',
|
||
top: 'middle',
|
||
style: {
|
||
image: imageUrl,
|
||
width: 25,
|
||
height: 25,
|
||
}
|
||
}
|
||
]
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
data: ['56.77'],
|
||
showBackground: true,
|
||
roundCap: true,
|
||
// backgroundStyle: {
|
||
// color: 'rgba(64, 76, 76, 1)',
|
||
// },
|
||
coordinateSystem: 'polar',
|
||
barWidth: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgb(24,234,253)'
|
||
}
|
||
},
|
||
}]
|
||
}
|
||
myChart.setOption(option);
|
||
},
|
||
rightInitEcharts(id){
|
||
console.log(id,'id');
|
||
var imageUrl = '';
|
||
if (id == 'rightEcharts0') {
|
||
imageUrl = '/newbanImg/zhuyao.png'
|
||
}else if (id == 'rightEcharts1') {
|
||
imageUrl = '/newbanImg/shishifuhe.png'
|
||
}else if (id == 'rightEcharts2') {
|
||
imageUrl = '/newbanImg/zuori.png'
|
||
}
|
||
var myChart = this.$echarts.init(document.getElementById(id));
|
||
var option = {
|
||
angleAxis: {
|
||
max: 100,
|
||
// 隐藏刻度线
|
||
show: false,
|
||
startAngle: 90
|
||
},
|
||
radiusAxis: {
|
||
type: 'category',
|
||
show: true,
|
||
axisLabel: {
|
||
show: false,
|
||
},
|
||
axisLine: {
|
||
show: false,
|
||
},
|
||
axisTick: {
|
||
show: false
|
||
},
|
||
},
|
||
polar: {
|
||
radius: '100%' //图形大小
|
||
},
|
||
graphic: {
|
||
elements:[
|
||
{
|
||
type: 'image',
|
||
left: 'center',
|
||
top: 'middle',
|
||
style: {
|
||
image: imageUrl,
|
||
width: 25,
|
||
height: 25,
|
||
}
|
||
}
|
||
]
|
||
},
|
||
series: [{
|
||
type: 'bar',
|
||
data: ['56.77'],
|
||
showBackground: true,
|
||
roundCap: true,
|
||
// backgroundStyle: {
|
||
// color: 'rgba(64, 76, 76, 1)',
|
||
// },
|
||
coordinateSystem: 'polar',
|
||
barWidth: 2,
|
||
itemStyle: {
|
||
normal: {
|
||
color: 'rgb(24,234,253)'
|
||
}
|
||
},
|
||
}]
|
||
}
|
||
myChart.setOption(option);
|
||
},
|
||
intoMain(){
|
||
this.$router.push("landChildren");
|
||
},
|
||
popInfor(){
|
||
// // 鼠标在盒子内移动后盒子变粉
|
||
this.popShow = true
|
||
},
|
||
popInforLeave(){
|
||
this.popShow = false
|
||
},
|
||
guid() {
|
||
return 'xxxxxxxxxxxx4xxxyxxxxxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
|
||
var r = Math.random() * 16 | 0,
|
||
v = c == 'x' ? r : (r & 0x3 | 0x8);
|
||
return v.toString(16);
|
||
});
|
||
},
|
||
// mqtt订阅（独立）
|
||
getDataByMqtt(url, topic) {
|
||
const clientId = this.guid(); // 用户名
|
||
const host = url; // 一个测试用url，改成给的，ws://broker.emqx.io:8083/mqtt
|
||
const options = {
|
||
// 配置
|
||
// 测试：订阅本机IP
|
||
// host: host,
|
||
// port: port,
|
||
|
||
keepalive: 60, // 心跳时间，默认60s，设置为0禁用
|
||
// username: 'test', // 用户名（可选）
|
||
// password: 1234, // 密码（可选）
|
||
clientId: clientId, // 客户端ID，默认随机生成
|
||
protocolId: "MQTT",
|
||
protocolVersion: 4,
|
||
clean: true, // false在离线时接收QoS1和2的消息
|
||
reconnectPeriod: 2000, // 重连间隔，默认1000毫秒
|
||
connectTimeout: 30 * 1000, // 收到CONNACK之前的等待时间
|
||
will: {
|
||
// 遗嘱消息（客户端严重断开连接时Broker将自动发送的消息）
|
||
topic: "WillMsg", // 要发布的主题
|
||
payload: "[MQTT-TEST] 遗嘱消息：连接异常断开！", // 要发布的消息
|
||
qos: 2, // QoS(Quality of Service)，QoS0：只负责发，QoS1：保证消息至少送达1次，QoS2：保证消息到且仅到1次
|
||
retain: false, // 保留标志
|
||
},
|
||
};
|
||
if (this.mqttClient == undefined) {
|
||
this.mqttClient = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host, options); // 连接
|
||
// const client = mqtt.connect(host) // 连接
|
||
// 错误回调
|
||
this.mqttClient.on("error", (err) => {
|
||
console.log("[MQTT-TEST] 连接错误……");
|
||
this.mqttClient.end();
|
||
});
|
||
// 重连回调
|
||
this.mqttClient.on("reconnect", () => {
|
||
console.log("[MQTT-TEST] 重连中……");
|
||
});
|
||
// 连接回调
|
||
this.mqttClient.on("connect", (e) => {
|
||
// console.log(
|
||
// );
|
||
// 订阅
|
||
this.mqttClient.subscribe(topic, { qos: 2});
|
||
console.log("[MQTT-TEST] 连接回调....");
|
||
});
|
||
// 接收回调
|
||
this.mqttClient.on("message", (topic, message, packet) => {
|
||
console.log(
|
||
`[MQTT-TEST] 从主题 "${topic}" 收到的内容: ${message.toString()}`
|
||
);
|
||
// 解析后端数据
|
||
let dataReceived = JSON.parse(message.toString());
|
||
// this.infodata[4].num = dataReceived.realTimeLoad
|
||
console.log(dataReceived.realTimeLoad,'dataReceived');
|
||
});
|
||
}
|
||
|
||
},
|
||
go(val) {
|
||
if (val == "nanjing") {
|
||
this.nanj = false;
|
||
this.landC = true;
|
||
// console.log("")
|
||
this.imgList = this.imgListData.nanjing;
|
||
// this.centerList = this.centerListData.nanjing
|
||
this.config = this.configData.nanjing.data;
|
||
this.resourcesList = this.resourcesListData.nanjing;
|
||
this.levelConfig.data = this.levelConfigData.nanjing.data;
|
||
// this.$forceUpdate();
|
||
// this.cancelLoading();
|
||
} else if (val == "landChild") {
|
||
this.$router.push("/landChild");
|
||
this.landC = false;
|
||
}
|
||
},
|
||
show: function () {
|
||
this.leftOpen = true;
|
||
this.rightOpen = true;
|
||
this.basicInfoShow = true;
|
||
},
|
||
//获取基地数据
|
||
getJdData(val) {
|
||
axios
|
||
.get("/json/qqData.json")
|
||
.then((result) => {
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
this.workListqq[0].value = result.data[i].qq;
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
if (val == "不动产") {
|
||
// this.tit="土地证信息"
|
||
this.workListData = [];
|
||
axios
|
||
.get("/json/jdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
// this.workList.push(result.data[i])
|
||
this.workListData.push(result.data[i]);
|
||
this.changeWorkListBdc(result.data[i]);
|
||
this.changeWorkList(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
} else if (val == "土地证") {
|
||
// this.tit="土地证信息"
|
||
this.workListData = [];
|
||
this.fczShow = true;
|
||
axios
|
||
.get("/json/tdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
console.log("this.params.params", this.params.params);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListData.push(result.data[i]);
|
||
this.changeWorkListTd(result.data[i]);
|
||
this.changeWorkList(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
this.workListDatafcz = [];
|
||
axios
|
||
.get("/json/fczData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListDatafcz.push(result.data[i]);
|
||
this.changeWorkListfcz(result.data[i]);
|
||
// this.changeWorkList(result.data[i])
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
} else {
|
||
this.workListData = [];
|
||
this.fczShow = true;
|
||
axios
|
||
.get("/json/jdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
this.changeWorkListBdc(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
axios
|
||
.get("/json/tdData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
console.log("this.params.params", this.params.params);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListData.push(result.data[i]);
|
||
this.changeWorkListTd(result.data[i]);
|
||
this.changeWorkList(result.data[i]);
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
this.workListDatafcz = [];
|
||
axios
|
||
.get("/json/fczData.json")
|
||
.then((result) => {
|
||
console.log("getMenuData111", result.data);
|
||
for (var i = 0; i < result.data.length; i++) {
|
||
if (result.data[i].jd == this.params.params) {
|
||
console.log("result.data[i]", result.data[i]);
|
||
this.workListDatafcz.push(result.data[i]);
|
||
this.changeWorkListfcz(result.data[i]);
|
||
// this.changeWorkList(result.data[i])
|
||
}
|
||
}
|
||
})
|
||
.catch((error) => {
|
||
console.log(error);
|
||
});
|
||
}
|
||
},
|
||
getMain() {
|
||
this.$router.push({
|
||
name: "landChild",
|
||
params: { id: this.params.params, type: this.params.type },
|
||
});
|
||
},
|
||
//建筑物信息
|
||
changeWorkList(data) {
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workList.length; t++) {
|
||
if (list[i].name == this.workList[t].name) {
|
||
this.workList[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
this.workListData = this.workList;
|
||
},
|
||
//不动产
|
||
changeWorkListBdc(data) {
|
||
// this.workListBdc=[]
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListBdc.length; t++) {
|
||
if (list[i].name == this.workListBdc[t].name) {
|
||
this.workListBdc[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
// this.workListData = this.workListBdc
|
||
},
|
||
//土地证
|
||
changeWorkListTd(data) {
|
||
console.log("data", data);
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListNew.length; t++) {
|
||
if (list[i].name == this.workListNew[t].name) {
|
||
this.workListNew[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
this.workListData = this.workListNew;
|
||
},
|
||
//房产证
|
||
changeWorkListfcz(data) {
|
||
var entries = Object.entries(data);
|
||
var list = entries.map(function (item) {
|
||
return {
|
||
value: item[1],
|
||
name: item[0],
|
||
};
|
||
});
|
||
for (var i = 0; i < list.length; i++) {
|
||
for (var t = 0; t < this.workListFCZ.length; t++) {
|
||
if (list[i].name == this.workListFCZ[t].name) {
|
||
this.workListFCZ[t].value = list[i].value;
|
||
}
|
||
}
|
||
}
|
||
// this.workListData = this.workListFCZ
|
||
},
|
||
//获取地图参数
|
||
getFromIframe(value) {
|
||
this.tit = "建筑物信息";
|
||
(this.workListBdc = [
|
||
// { key: "建筑物名称", value: "",name:"jd" },
|
||
// { key: "坐落地址", value: "",name:"tudi" },
|
||
{ key: "不动产证号", value: "", name: "bdczh" },
|
||
{ key: "权力性质", value: "", name: "qlxz" },
|
||
{ key: "用途", value: "", name: "yt" },
|
||
{ key: "宗地面积", value: "", name: "zdmj" },
|
||
{ key: "建筑面积", value: "", name: "jzmj" },
|
||
{ key: "权利人", value: "", name: "qlr" },
|
||
// { key: "共有情况", value: "",name:"gyqk" },
|
||
// { key: "坐落", value: "" ,name:"zl"},
|
||
// { key: "不动产单元号", value: "" ,name:"bdcdyh"},
|
||
// { key: "权力类型", value: "" ,name:"qllx"},
|
||
// { key: "使用期限", value: "" ,name:"syqx"},
|
||
// { key: "房屋结构", value: "" ,name:"fwjg"},
|
||
// { key: "房屋总层数", value: "" ,name:"fwzcs"},
|
||
// { key: "所在层数", value: "" ,name:"szcs"},
|
||
// { key: "丘权号", value: "" ,name:"qqh"},
|
||
// { key: "来源", value: "" ,name:"ly"},
|
||
]),
|
||
(this.workListNew = [
|
||
// { key: "建筑物名称", value: "",name:"jd" },
|
||
// { key: "坐落地址", value: "",name:"tudi" },
|
||
{ key: "土地证号", value: "", name: "tdzh" },
|
||
{ key: "权力性质", value: "", name: "syqlx" },
|
||
{ key: "土地用途", value: "", name: "dlyt" },
|
||
{ key: "土地面积", value: "", name: "tdmj" },
|
||
{ key: "权利人", value: "", name: "tdsyqr" },
|
||
// { key: "共有情况", value: "",name:"gyqk" },
|
||
// { key: "坐落", value: "",name:"zl" },
|
||
// { key: "地号", value: "" ,name:"dh"},
|
||
|
||
// { key: "图号", value: "" ,name:"th"},
|
||
|
||
// { key: "使用权面积", value: "",name:"syqmj" },
|
||
// { key: "终止日期", value: "" ,name:"zzrq"},
|
||
]),
|
||
(this.workListFCZ = [
|
||
// { key: "建筑物名称", value: "",name:"jd" },
|
||
// { key: "坐落地址", value: "",name:"tudi" },
|
||
// { key: "房产证号", value: "" ,name:"fczh"},
|
||
// { key: "房产使用权人", value: "",name:"fwsyqr" },
|
||
// { key: "坐落", value: "",name:"zl" },
|
||
// { key: "房屋用途", value: "" ,name:"fwcb"},
|
||
// { key: "结构", value: "",name:"jg" },
|
||
// { key: "房屋总层数", value: "",name:"fwzcs" },
|
||
// { key: "面积", value: "" ,name:"jzmj"},
|
||
// { key: "面积", value: "" ,name:"cqly"},
|
||
{ key: "房产证号", value: "", name: "fczh" },
|
||
{ key: "房屋产别", value: "", name: "fwcb" },
|
||
{ key: "房屋用途", value: "", name: "fwyt" },
|
||
{ key: "房屋面积", value: "", name: "jzmj" },
|
||
{ key: "房产使用权人", value: "", name: "fwsyqr" },
|
||
]),
|
||
(this.activeColor = -1);
|
||
this.workListqq = [{ key: "确权信息", value: "", name: "qq" }];
|
||
this.params = value;
|
||
if (this.params.type == "不动产") {
|
||
this.centerList = [
|
||
{
|
||
title: "不动产权证信息",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/bdc.png"),
|
||
},
|
||
{
|
||
title: "确权情况",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/qq.png"),
|
||
},
|
||
{
|
||
title: "证件查看",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/fdc.png"),
|
||
},
|
||
];
|
||
} else if (this.params.type == "土地证") {
|
||
this.centerList = [
|
||
{
|
||
title: "土地证信息",
|
||
count: "无",
|
||
imgUrl: require("@/assets/landRes/tdz.png"),
|
||
},
|
||
{
|
||
title: "房产证信息",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/fdc.png"),
|
||
},
|
||
{
|
||
title: "确权情况",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/qq.png"),
|
||
},
|
||
{
|
||
title: "证件查看",
|
||
count: 0,
|
||
imgUrl: require("@/assets/landRes/bdc.png"),
|
||
},
|
||
];
|
||
}
|
||
this.getJdData(this.params.type);
|
||
this.leftOpen = false;
|
||
this.rightOpen = false;
|
||
this.Visible = false;
|
||
this.basicInfoShow = true;
|
||
},
|
||
|
||
//菜单跳转
|
||
btn(val, index) {
|
||
if (val != "证件查看") {
|
||
this.tit = val;
|
||
}
|
||
|
||
this.Visible = false;
|
||
this.basicInfoShow = true;
|
||
this.activeColor = index;
|
||
if (val == "不动产权证信息") {
|
||
this.workListData = this.workListBdc;
|
||
this.rightOpen = false;
|
||
} else if (val == "土地证信息") {
|
||
this.workListData = this.workListNew;
|
||
this.rightOpen = false;
|
||
} else if (val == "房产证信息") {
|
||
this.workListData = this.workListFCZ;
|
||
this.rightOpen = false;
|
||
} else if (val == "确权情况") {
|
||
console.log("this.workListqq", this.workListqq);
|
||
this.workListData = this.workListqq;
|
||
this.rightOpen = false;
|
||
}
|
||
},
|
||
|
||
search(data) {
|
||
console.log("data", data);
|
||
this.Visible = true;
|
||
this.basicInfoShow = false;
|
||
this.rightOpen = false;
|
||
this.$nextTick(() => {
|
||
//这里的dialog与上面dialog-component组件里面的ref属性值是一致的
|
||
//init调用的是dialog-component组件里面的init方法
|
||
//data是传递给弹窗页面的值
|
||
this.$refs.dialog.init(data);
|
||
});
|
||
},
|
||
//关闭查询弹框
|
||
getClose() {
|
||
this.Visible = false;
|
||
this.rightOpen = true;
|
||
this.basicInfoShow = true;
|
||
},
|
||
getjdName(val) {
|
||
this.jdNameNew = val;
|
||
},
|
||
getjdNameClick(val) {
|
||
console.log("val", val);
|
||
this.$router.push({
|
||
name: "landChild",
|
||
params: { id: val.jd, type: val.type },
|
||
});
|
||
},
|
||
goPage(val) {
|
||
if (val == 0) {
|
||
console.log("返回房地资源-主场景");
|
||
// this.$router.push("/land");
|
||
this.$router.push("/");
|
||
}
|
||
},
|
||
cancelLoading() {
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 500);
|
||
},
|
||
/**
|
||
* 动态传输城市名称
|
||
* @param event
|
||
*/
|
||
// handleMessage(event) {
|
||
// // 获取从iframe页面中传过来的值
|
||
// // var cmd = event.data.cmd;
|
||
// this.cityName = event.data.params;
|
||
// },
|
||
build() {
|
||
this.$router.push("/build");
|
||
},
|
||
},
|
||
created() {
|
||
window["vueDefinedMyProp"] = (build) => {
|
||
this.build();
|
||
};
|
||
window.getFromIframe = this.getFromIframe;
|
||
window.show = this.show;
|
||
},
|
||
};
|
||
</script>
|
||
<style lang="scss">
|
||
.dv-scroll-ranking-board .ranking-info .rank {
|
||
display: none;
|
||
}
|
||
</style>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "~@/common/var.scss";
|
||
|
||
/* 返回按钮 */
|
||
.back-button a {
|
||
position: absolute;
|
||
right: 22px;
|
||
top: 41px;
|
||
width: 55px;
|
||
height: 21px;
|
||
background-color: transparent;
|
||
border: 0;
|
||
background-image: url("../../assets/bt-02.png");
|
||
cursor: pointer;
|
||
}
|
||
.bg{
|
||
height: 1920px;
|
||
width: 1080px;
|
||
background: url("../../assets/newbanImg/mapBeijing.png") no-repeat !important;
|
||
background-size: 100% 100% !important;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: space-around;
|
||
.mains{
|
||
width: 100%;
|
||
height: calc(100% - 149px);
|
||
display: flex;
|
||
padding: 0 10px;
|
||
box-sizing: border-box;
|
||
justify-content: space-between;
|
||
align-items: flex-end;
|
||
.leftContent{
|
||
width: 20%;
|
||
height: 85%;
|
||
padding: 0 10px;
|
||
.kehuCount{
|
||
height: 15%;
|
||
width: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
padding-left: 10%;
|
||
}
|
||
.countInfor{
|
||
height: calc(100% - 40%);
|
||
width: 55%;
|
||
.content{
|
||
height: 25%;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.text{
|
||
height: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
|
||
}
|
||
.rightContent{
|
||
width: 20%;
|
||
height: 85%;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
.kehuCount{
|
||
height: 15%;
|
||
width: 55%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
}
|
||
.countInfor{
|
||
height: calc(100% - 40%);
|
||
width: 67%;
|
||
.content{
|
||
height: 25%;
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-around;
|
||
.text{
|
||
height: 50%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.yellowIcon{
|
||
position: absolute !important;
|
||
top: 28%;
|
||
left: 36%;
|
||
z-index: 999;
|
||
animation: movepoint 1s infinite;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
#pop{
|
||
position: absolute !important;
|
||
top: 6%;
|
||
left: 36%;
|
||
display: inline-block;
|
||
overflow: hidden;
|
||
width:288px;
|
||
height:275px;
|
||
.mask{
|
||
position: absolute;
|
||
width: 288px;
|
||
height: 275px;
|
||
top: 0;
|
||
left: 0;
|
||
z-index:999
|
||
}
|
||
}
|
||
@keyframes movepoint {
|
||
|
||
0% {
|
||
transform: translateY(0px);
|
||
}
|
||
50% {
|
||
transform: translateY(5px);
|
||
}
|
||
100% {
|
||
transform: translateY(0px);
|
||
}
|
||
|
||
}
|
||
.mask{
|
||
animation: animate 3s linear;
|
||
overflow: hidden;
|
||
}
|
||
@keyframes animate{
|
||
from {
|
||
height: 0px;
|
||
top : 230px;
|
||
}
|
||
to {
|
||
height: 275px;
|
||
top : 0px;
|
||
}
|
||
}
|
||
|
||
}
|
||
}
|
||
.back-button a:hover {
|
||
background-image: url("../../assets/bt-002.png");
|
||
}
|
||
.body-left {
|
||
// width: 500px!important;
|
||
// background: url('../../assets/left.png') no-repeat!important;
|
||
}
|
||
.body-right {
|
||
// width: 500px!important;
|
||
// background: url('../../assets/right.png') no-repeat!important;
|
||
}
|
||
|
||
.body-bottom {
|
||
height: 130px !important;
|
||
background: url("../../assets/down.png") no-repeat !important;
|
||
}
|
||
|
||
.informationOverview {
|
||
// width: 50%;
|
||
width: 43%;
|
||
display: inline-block;
|
||
margin-bottom: 10px;
|
||
padding: 20px 0 10px 0;
|
||
|
||
.cont {
|
||
height: 100%;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: space-evenly;
|
||
padding-left: 15px;
|
||
|
||
p {
|
||
text-align: center;
|
||
|
||
&:nth-child(1) {
|
||
color: #53a0ca;
|
||
font-weight: bolder;
|
||
border-bottom: 1px solid #103a55;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
&:nth-child(2) {
|
||
padding-top: 5px;
|
||
font-weight: bolder;
|
||
font-size: 24px;
|
||
}
|
||
}
|
||
}
|
||
|
||
img {
|
||
float: left;
|
||
padding-left: 30px;
|
||
}
|
||
}
|
||
|
||
.left {
|
||
height: 100%;
|
||
// width: 26%;
|
||
width: 24%;
|
||
margin-left: 2%;
|
||
padding-top: 15px;
|
||
}
|
||
|
||
.right {
|
||
height: 100%;
|
||
// width: 29%;
|
||
// margin-right: 1%;
|
||
width: 25%;
|
||
margin-right: 3%;
|
||
padding-top: 15px;
|
||
|
||
.panelBox {
|
||
display: flex;
|
||
}
|
||
|
||
.panel {
|
||
// margin: 20px;
|
||
position: relative;
|
||
text-align: center;
|
||
|
||
span {
|
||
position: absolute;
|
||
position: absolute;
|
||
top: 41px;
|
||
left: 42px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
div {
|
||
color: $default-font-color;
|
||
margin-top: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
&:not(:last-child) {
|
||
margin-right: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
&_box {
|
||
width: 98px;
|
||
height: 98px;
|
||
background-size: 100%;
|
||
}
|
||
|
||
// background-image: url("~@/assets/wisdom2/panel-blue.png");
|
||
background-repeat: no-repeat;
|
||
background-position: top;
|
||
|
||
// &:nth-child(2) {
|
||
// background-image: url("~@/assets/wisdom2/panel-green.png")
|
||
// }
|
||
|
||
// &:nth-child(3) {
|
||
// background-image: url("~@/assets/wisdom2/panel-blue.png")
|
||
// }
|
||
|
||
// &:nth-child(4) {
|
||
// background-image: url("~@/assets/wisdom2/panel-green.png")
|
||
// }
|
||
}
|
||
}
|
||
|
||
.center {
|
||
width: 41%;
|
||
height: 20%;
|
||
padding: 0 10px;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
align-content: flex-start;
|
||
position: relative;
|
||
left: 30%;
|
||
}
|
||
|
||
.scaleDesign {
|
||
/* display: inline-block; */
|
||
width: 50%;
|
||
text-align: center;
|
||
/* line-height: 90px; */
|
||
height: 100%;
|
||
display: block;
|
||
float: left;
|
||
margin-top: 10px;
|
||
|
||
&_item {
|
||
height: 50%;
|
||
height: 50%;
|
||
display: flex;
|
||
|
||
padding-left: 10px;
|
||
justify-content: center;
|
||
|
||
&:first-child {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.dv-water-pond-level {
|
||
display: -webkit-inline-box;
|
||
}
|
||
}
|
||
}
|
||
|
||
.scaleDesign2 {
|
||
display: inline-block;
|
||
|
||
width: 50%;
|
||
text-align: center;
|
||
|
||
&_item {
|
||
margin-bottom: 15px;
|
||
}
|
||
}
|
||
|
||
|
||
.leftModel {
|
||
width: 24%;
|
||
left: 1%;
|
||
top: 35%;
|
||
position: absolute;
|
||
transition: left 0.5s linear 0s;
|
||
.box {
|
||
font-size: 14px;
|
||
background: url("~@/assets/landRes/boxM.png") no-repeat;
|
||
// background-size: 100% 95%;
|
||
width: 50%;
|
||
margin: 1%;
|
||
text-align: center;
|
||
display: inline-block;
|
||
p {
|
||
color: #b4e9ff;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
padding: 15px 0;
|
||
width: 75%;
|
||
}
|
||
img {
|
||
float: left;
|
||
padding-left: 10px;
|
||
padding-top: 6px;
|
||
}
|
||
}
|
||
.box:hover {
|
||
background: url("~@/assets/landRes/boxX.png") no-repeat;
|
||
p {
|
||
color: #00fcff;
|
||
text-shadow: 0 0 5px #00fcff, 0 0 10px #00fcff, 0 0 15px #00fcff,
|
||
0 0 20px #00fcff;
|
||
}
|
||
}
|
||
.boxActive {
|
||
background: url("~@/assets/landRes/boxX.png") no-repeat;
|
||
width: 50%;
|
||
margin: 1%;
|
||
text-align: center;
|
||
display: inline-block;
|
||
font-size: 14px;
|
||
p {
|
||
color: #00fcff;
|
||
text-shadow: 0 0 5px #00fcff, 0 0 10px #00fcff, 0 0 15px #00fcff,
|
||
0 0 20px #00fcff;
|
||
font-size: 16px;
|
||
font-weight: 700;
|
||
padding: 15px 0;
|
||
width: 75%;
|
||
}
|
||
img {
|
||
float: left;
|
||
padding-left: 10px;
|
||
padding-top: 6px;
|
||
}
|
||
}
|
||
}
|
||
.leftClose {
|
||
left: -350px;
|
||
transition: left 0.5s linear 0s;
|
||
}
|
||
.rightModel {
|
||
right: 1%;
|
||
position: absolute;
|
||
height: 100%;
|
||
width: 10.5%;
|
||
top: 25%;
|
||
|
||
.search-middle {
|
||
height: 15%;
|
||
background: #fff;
|
||
border: 2px solid #4cfc9ba1;
|
||
// width: 80%;
|
||
width: 100%;
|
||
float: right;
|
||
}
|
||
.search-middle li {
|
||
width: 100%;
|
||
padding: 0px 10px;
|
||
margin: 15px 0px;
|
||
// text-align: center;
|
||
.liBox {
|
||
width: 30%;
|
||
height: 30px;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
display: inline-block;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.search-middle .search-container {
|
||
position: relative;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
.search-middle .search-container input:focus {
|
||
outline: none;
|
||
}
|
||
.search-middle .search-container input::-webkit-input-placeholder {
|
||
color: rgb(211, 245, 255);
|
||
}
|
||
.search-middle .search-container button {
|
||
width: 80px;
|
||
height: 100%;
|
||
position: absolute;
|
||
right: 0;
|
||
top: 0;
|
||
background-color: transparent;
|
||
background: 10px 10px url(~@/assets/search-button.png) no-repeat;
|
||
border: 0;
|
||
border-radius: 0;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
cursor: pointer;
|
||
padding-left: 20px;
|
||
color: #b4e9ff;
|
||
}
|
||
.rightShow {
|
||
top: 5%;
|
||
position: absolute;
|
||
right: 0px;
|
||
width: 100%;
|
||
transition: right 0.5s linear 0s;
|
||
.basicInfo {
|
||
margin-top: 20px;
|
||
li {
|
||
padding: 15px 0 !important;
|
||
}
|
||
}
|
||
.dialogN {
|
||
margin-top: 20px;
|
||
}
|
||
}
|
||
|
||
.rightClose {
|
||
right: -500px;
|
||
transition: right 0.5s linear 0s;
|
||
}
|
||
}
|
||
|
||
.d1 {
|
||
// position: absolute;
|
||
// left: 830px;
|
||
// top: 395px;
|
||
// left: 15px;
|
||
// top: 395px;
|
||
width: 154px;
|
||
height: 53px;
|
||
line-height: 35px;
|
||
text-align: center;
|
||
background: url("~@/assets/landRes/1-dialog.png") no-repeat center;
|
||
|
||
&:hover {
|
||
background: url("~@/assets/landRes/1-dialog-highlight.png") no-repeat center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.d2 {
|
||
// position: absolute;
|
||
// left: 1060px;
|
||
// top: 485px;
|
||
width: 182px;
|
||
height: 53px;
|
||
line-height: 35px;
|
||
text-align: center;
|
||
background: url("~@/assets/landRes/2-dialog.png") no-repeat center;
|
||
|
||
&:hover {
|
||
background: url("~@/assets/landRes/2-dialog-highlight.png") no-repeat center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
}
|
||
|
||
.d3 {
|
||
position: absolute;
|
||
left: 520px;
|
||
top: 515px;
|
||
width: 234px;
|
||
height: 53px;
|
||
line-height: 35px;
|
||
text-align: center;
|
||
font-size: 14px;
|
||
background: url("~@/assets/landRes/3-dialog.png") no-repeat center;
|
||
|
||
&:hover {
|
||
background: url("~@/assets/landRes/3-dialog-highlight.png") no-repeat center;
|
||
cursor: pointer;
|
||
color: #fff;
|
||
}
|
||
}
|
||
.footer-nav {
|
||
position: absolute;
|
||
/* top: 220px; */
|
||
top: 105px;
|
||
left: 1%;
|
||
margin: auto;
|
||
/* transform: scale(1, 1) translate(-50%, -50%); */
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 98%;
|
||
}
|
||
.baseBlock {
|
||
cursor: pointer;
|
||
width: 11.3%;
|
||
height: 100px;
|
||
background: url("../../assets/newimgs/zongshuKuang.png") no-repeat;
|
||
background-size: 100% 100%;
|
||
display: flex;
|
||
flex-flow: row nowrap;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
padding: 0 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
.baseBlock p {
|
||
width: 40%;
|
||
font-size: 22px;
|
||
color: #fff;
|
||
letter-spacing: 1px;
|
||
text-align: left;
|
||
}
|
||
@import "../../assets/scss/index.scss";
|
||
</style>
|