979 lines
24 KiB
Vue
979 lines
24 KiB
Vue
<template>
|
||
<div id="index" ref="appRef">
|
||
<!-- <div class="bg" :style="{
|
||
backgroundImage:
|
||
'url(' + require(`@/assets/${backgroundPic.index}.png`) + ')',
|
||
}"> -->
|
||
<div class="bg">
|
||
<iframe :src="buildUrl" ref="iframe" frameborder="0" width="100%" height="100%" style="position: absolute"></iframe>
|
||
<div class="body-left"></div>
|
||
<div class="body-right"></div>
|
||
<div class="body-bottom"></div>
|
||
<dv-loading v-if="loading">Loading...</dv-loading>
|
||
<div v-else class="host-body">
|
||
<HeaderIndex :cdata="{ title: '房地资源', margin: '26px auto' }" style="position: relative"/>
|
||
<div class="main" style="margin-top:-80px">
|
||
<div class="left">
|
||
<h1>基础数据展示</h1>
|
||
<BasicBox1 title="土地信息基本展示" :dataSource="dataSource1" />
|
||
<BasicBox1 title="土地权证信息展示" :dataSource="dataSource2" />
|
||
<BasicBox1 title="土地资产信息展示" :dataSource="dataSource3" />
|
||
</div>
|
||
|
||
<div class="right">
|
||
<h1>房地项目全生命周期管理</h1>
|
||
<!-- <BasicBox1 title="土地使用保管单位" :dataSource="dataSource4" /> -->
|
||
<!-- <BasicBox1 title="系统填报进度" :dataSource="dataSource5">
|
||
<template slot="top">
|
||
<div class="progress">
|
||
|
||
<span>可行性研究</span>
|
||
<span>编制计划</span>
|
||
<span>初步设计</span>
|
||
<span>服务采购</span>
|
||
<span>建设手续</span>
|
||
<span>造价管理</span>
|
||
<span class="safe">安全管理</span>
|
||
<span>进度管理</span>
|
||
<span>施工图管理</span>
|
||
<span>竣工管理</span>
|
||
<span>质量管理</span>
|
||
<div class="safeIcon"></div>
|
||
</div>
|
||
<div class="rtitle">详细信息</div>
|
||
</template>
|
||
|
||
</BasicBox1> -->
|
||
<BasicBox1 title="房产信息基本展示" :dataSource="dataSource4" />
|
||
<BasicBox1 title="房产权证信息展示" :dataSource="dataSource5" />
|
||
<BasicBox1 title="房产资产信息展示" :dataSource="dataSource6" />
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
import * as mockData from "./mock"
|
||
import drawMixin from "@/utils/drawMixin";
|
||
import headerIndex from "@/components/layout/header.vue";
|
||
import BasicBox1 from "@/components/BasicBox1"
|
||
import router from "@/router";
|
||
export default {
|
||
mixins: [drawMixin],
|
||
data() {
|
||
return {
|
||
buildUrl:this.$route.params.url,
|
||
buildingData:this.$route.params.id,
|
||
backgroundPic: {
|
||
index: "landRes2/bg",
|
||
},
|
||
loading: false,
|
||
...mockData.default,
|
||
dataSource1:[],
|
||
dataSource2:[],
|
||
dataSource3:[],
|
||
dataSource4:[],
|
||
dataSource5:[],
|
||
dataSource6:[],
|
||
shengdalouData:[
|
||
{
|
||
dataSource1: [
|
||
{
|
||
key: "宗地实物ID",
|
||
value: "010070000000000001182512"
|
||
},
|
||
{
|
||
key: "宗地地址信息",
|
||
value: "江苏省南京市鼓楼区上海路215号"
|
||
},
|
||
{
|
||
key: "宗地取得时间",
|
||
value: "2004年11月01日 "
|
||
},
|
||
{
|
||
key: "宗地规划用途",
|
||
value: "商业服务业设施用地"
|
||
},
|
||
{
|
||
key: "土地性质",
|
||
value: "自有"
|
||
},
|
||
{
|
||
key: "土地使用权类型",
|
||
value: "出让"
|
||
},
|
||
{
|
||
key: "土地实际用途",
|
||
value: "办公用房占地"
|
||
},
|
||
{
|
||
key: "土地等级",
|
||
value: "四级土地"
|
||
},
|
||
{
|
||
key: "获得价格",
|
||
value: "57575万元"
|
||
},
|
||
{
|
||
key: "土地面积",
|
||
value: "6611.1"
|
||
},
|
||
{
|
||
key: "已使用面积",
|
||
value: "6611.1"
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
],
|
||
},
|
||
{
|
||
dataSource2: [
|
||
{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},
|
||
{
|
||
key: "土地不动产证号",
|
||
value: "宁鼓国用（2006）第03345号"
|
||
},
|
||
{
|
||
key: "不动产单元号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地所有权人",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
{
|
||
key: "宗地地号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "宗地图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "权证图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "使用终止日期",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地实际持有人",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "附着建筑物数量",
|
||
value: "1"
|
||
},
|
||
{
|
||
key: "无证原因",
|
||
value: "有证"
|
||
},
|
||
],
|
||
},{
|
||
dataSource3: [
|
||
{
|
||
key: "资产编码",
|
||
value: "270100001441"
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: "575750000元"
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: "365760000元"
|
||
},
|
||
{
|
||
key: "净值增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
},{
|
||
dataSource4: [
|
||
{
|
||
key: '实物管理部门',
|
||
value: '后勤部'
|
||
},{
|
||
key: '总(分)部/各单位本部',
|
||
value: '国网江苏电力'
|
||
},
|
||
{
|
||
key: '地市公司/分支机构',
|
||
value: '国网江苏电力本部'
|
||
},
|
||
{
|
||
key: '县级电力公司/其他县级单位',
|
||
value: '无'
|
||
},
|
||
{
|
||
key: '使用保管部门',
|
||
value: '后勤部'
|
||
},
|
||
{
|
||
key: "地址信息",
|
||
value: "江苏省南京市鼓楼区上海路215号"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource5: [
|
||
{
|
||
key: "房产编号",
|
||
value: "1300025762"
|
||
},
|
||
{
|
||
key: "来源",
|
||
value: "自建"
|
||
},
|
||
{
|
||
key: "房产分类",
|
||
value: "调度控制用房"
|
||
},
|
||
{
|
||
key: "房产类型",
|
||
value: "运行调度控制楼"
|
||
},
|
||
{
|
||
key: "建筑面积",
|
||
value: "71177.16"
|
||
},{
|
||
key: "可使用面积",
|
||
value: "71177.16"
|
||
},
|
||
{
|
||
key: "总建筑层数",
|
||
value: "38"
|
||
},
|
||
{
|
||
key: "地上层数",
|
||
value: "35"
|
||
},
|
||
{
|
||
key: "地下层数",
|
||
value: "3"
|
||
},
|
||
{
|
||
key: "建成年份",
|
||
value: "2004"
|
||
},{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},{
|
||
key: "房产（不动产）权证号",
|
||
value: "宁房权证鼓初字第310990号"
|
||
},{
|
||
key: "房产证载人名称",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource6: [
|
||
{
|
||
key: "已使用面积",
|
||
value: "71177.16"
|
||
},
|
||
{
|
||
key: "自用面积",
|
||
value: "71177.16"
|
||
},
|
||
{
|
||
key: "出租面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "被占用面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "资产编码",
|
||
value: "270100001441"
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: "575750000元"
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: "365760000元"
|
||
},
|
||
{
|
||
key: "资产增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
}
|
||
],
|
||
shidalouData:[
|
||
{
|
||
dataSource1: [
|
||
{
|
||
key: "宗地实物ID",
|
||
value: "010070000000000001182512"
|
||
},
|
||
{
|
||
key: "宗地地址信息",
|
||
value: "南京市建邺区奥体大街1号"
|
||
},
|
||
{
|
||
key: "宗地取得时间",
|
||
value: " "
|
||
},
|
||
{
|
||
key: "宗地规划用途",
|
||
value: "科教用地"
|
||
},
|
||
{
|
||
key: "土地性质",
|
||
value: "自有"
|
||
},
|
||
{
|
||
key: "土地使用权类型",
|
||
value: "出让"
|
||
},
|
||
{
|
||
key: "土地实际用途",
|
||
value: "科教用地"
|
||
},
|
||
{
|
||
key: "土地等级",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "获得价格",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "土地面积",
|
||
value: "37272.58"
|
||
},
|
||
{
|
||
key: "已使用面积",
|
||
value: "37272.58"
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
],
|
||
},
|
||
{
|
||
dataSource2: [
|
||
{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},
|
||
{
|
||
key: "土地不动产证号",
|
||
value: "宁雨国用（2006）第00923号"
|
||
},
|
||
{
|
||
key: "不动产单元号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地所有权人",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
{
|
||
key: "宗地地号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "宗地图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "权证图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "使用终止日期",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地实际持有人",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "附着建筑物数量",
|
||
value: "1"
|
||
},
|
||
{
|
||
key: "无证原因",
|
||
value: "有证"
|
||
},
|
||
],
|
||
},{
|
||
dataSource3: [
|
||
{
|
||
key: "资产编码",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "净值增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
},{
|
||
dataSource4: [
|
||
{
|
||
key: '实物管理部门',
|
||
value: ''
|
||
},{
|
||
key: '总(分)部/各单位本部',
|
||
value: '国网江苏电力'
|
||
},
|
||
{
|
||
key: '地市公司/分支机构',
|
||
value: '国网江苏电力本部'
|
||
},
|
||
{
|
||
key: '县级电力公司/其他县级单位',
|
||
value: '无'
|
||
},
|
||
{
|
||
key: '使用保管部门',
|
||
value: '后勤部'
|
||
},
|
||
{
|
||
key: "地址信息",
|
||
value: "南京市建邺区奥体大街1号"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource5: [
|
||
{
|
||
key: "房产编号",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "来源",
|
||
value: "自建"
|
||
},
|
||
{
|
||
key: "房产分类",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "房产类型",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "建筑面积",
|
||
value: "5689.53"
|
||
},{
|
||
key: "可使用面积",
|
||
value: "5689.53"
|
||
},
|
||
{
|
||
key: "总建筑层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "地上层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "地下层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "建成年份",
|
||
value: ""
|
||
},{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},{
|
||
key: "房产（不动产）权证号",
|
||
value: "宁房权证建初字第421579号"
|
||
},{
|
||
key: "房产证载人名称",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource6: [
|
||
{
|
||
key: "已使用面积",
|
||
value: "56879.53"
|
||
},
|
||
{
|
||
key: "自用面积",
|
||
value: "56879.53"
|
||
},
|
||
{
|
||
key: "出租面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "被占用面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "资产编码",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
}
|
||
],
|
||
fuwudashaData:[
|
||
{
|
||
dataSource1: [
|
||
{
|
||
key: "宗地实物ID",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "宗地地址信息",
|
||
value: "南京市建邺区奥体大街9号"
|
||
},
|
||
{
|
||
key: "宗地取得时间",
|
||
value: " "
|
||
},
|
||
{
|
||
key: "宗地规划用途",
|
||
value: "商业服务业设施用地"
|
||
},
|
||
{
|
||
key: "土地性质",
|
||
value: "自有"
|
||
},
|
||
{
|
||
key: "土地使用权类型",
|
||
value: "出让"
|
||
},
|
||
{
|
||
key: "土地实际用途",
|
||
value: "办公用房占地"
|
||
},
|
||
{
|
||
key: "土地等级",
|
||
value: "四级土地"
|
||
},
|
||
{
|
||
key: "获得价格",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "土地面积",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "已使用面积",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
],
|
||
},
|
||
{
|
||
dataSource2: [
|
||
{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},
|
||
{
|
||
key: "土地不动产证号",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "不动产单元号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地所有权人",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
{
|
||
key: "宗地地号",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "宗地图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "权证图",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "使用终止日期",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "土地实际持有人",
|
||
value: "无"
|
||
},
|
||
{
|
||
key: "附着建筑物数量",
|
||
value: "1"
|
||
},
|
||
{
|
||
key: "无证原因",
|
||
value: "有证"
|
||
},
|
||
],
|
||
},{
|
||
dataSource3: [
|
||
{
|
||
key: "资产编码",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "净值增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
},{
|
||
dataSource4: [
|
||
{
|
||
key: '实物管理部门',
|
||
value: '后勤部'
|
||
},{
|
||
key: '总(分)部/各单位本部',
|
||
value: '国网江苏电力'
|
||
},
|
||
{
|
||
key: '地市公司/分支机构',
|
||
value: '国网江苏电力本部'
|
||
},
|
||
{
|
||
key: '县级电力公司/其他县级单位',
|
||
value: '无'
|
||
},
|
||
{
|
||
key: '使用保管部门',
|
||
value: '后勤部'
|
||
},
|
||
{
|
||
key: "地址信息",
|
||
value: "南京市建邺区奥体大街9号"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource5: [
|
||
{
|
||
key: "房产编号",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "来源",
|
||
value: "自建"
|
||
},
|
||
{
|
||
key: "房产分类",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "房产类型",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "建筑面积",
|
||
value: ""
|
||
},{
|
||
key: "可使用面积",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "总建筑层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "地上层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "地下层数",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "建成年份",
|
||
value: ""
|
||
},{
|
||
key: "是否有证",
|
||
value: "是"
|
||
},{
|
||
key: "房产（不动产）权证号",
|
||
value: ""
|
||
},{
|
||
key: "房产证载人名称",
|
||
value: "国网江苏省电力有限公司"
|
||
},
|
||
|
||
],
|
||
},{
|
||
dataSource6: [
|
||
{
|
||
key: "已使用面积",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "自用面积",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "出租面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "被占用面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "闲置面积",
|
||
value: "0"
|
||
},
|
||
{
|
||
key: "资产编码",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产原值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产净值",
|
||
value: ""
|
||
},
|
||
{
|
||
key: "资产增加方式",
|
||
value: "固定资产增加-基本建设"
|
||
},
|
||
],
|
||
}
|
||
],
|
||
};
|
||
},
|
||
components: {
|
||
HeaderIndex: headerIndex,
|
||
BasicBox1
|
||
},
|
||
mounted() {
|
||
this.timeFn();
|
||
this.cancelLoading();
|
||
this.buildData();
|
||
console.log(this.$route.params.id +'2222')
|
||
console.log(this.shengdalouData[0].dataSource1[0] +'9999')
|
||
},
|
||
beforeDestroy() {
|
||
clearInterval(this.timing);
|
||
},
|
||
methods: {
|
||
timeFn() {
|
||
// this.timing = setInterval(() => {
|
||
// this.dateDay = formatTime(new Date(), "HH: mm: ss");
|
||
// this.dateYear = formatTime(new Date(), "yyyy-MM-dd");
|
||
// this.dateWeek = this.weekday[new Date().getDay()];
|
||
// }, 1000);
|
||
},
|
||
cancelLoading() {
|
||
setTimeout(() => {
|
||
this.loading = false;
|
||
}, 500);
|
||
},
|
||
/**
|
||
* 切换数据
|
||
*/
|
||
buildData(){
|
||
if (this.buildingData == '省大楼'){
|
||
this.dataSource1 = this.shengdalouData[0].dataSource1
|
||
this.dataSource2 = this.shengdalouData[1].dataSource2
|
||
this.dataSource3 = this.shengdalouData[2].dataSource3
|
||
this.dataSource4 = this.shengdalouData[3].dataSource4
|
||
this.dataSource5 = this.shengdalouData[4].dataSource5
|
||
this.dataSource6 = this.shengdalouData[5].dataSource6
|
||
}else if (this.buildingData == '市大楼'){
|
||
this.dataSource1 = this.shidalouData[0].dataSource1
|
||
this.dataSource2 = this.shidalouData[1].dataSource2
|
||
this.dataSource3 = this.shidalouData[2].dataSource3
|
||
this.dataSource4 = this.shidalouData[3].dataSource4
|
||
this.dataSource5 = this.shidalouData[4].dataSource5
|
||
this.dataSource6 = this.shidalouData[5].dataSource6
|
||
}else if (this.buildingData === '服务大厦'){
|
||
this.dataSource1 = this.fuwudashaData[0].dataSource1
|
||
this.dataSource2 = this.fuwudashaData[1].dataSource2
|
||
this.dataSource3 = this.fuwudashaData[2].dataSource3
|
||
this.dataSource4 = this.fuwudashaData[3].dataSource4
|
||
this.dataSource5 = this.fuwudashaData[4].dataSource5
|
||
this.dataSource6 = this.fuwudashaData[5].dataSource6
|
||
}
|
||
}
|
||
},
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
@import "~@/assets/scss/index.scss";
|
||
.body-left{
|
||
background: url('../../../assets/left.png') no-repeat!important;
|
||
}
|
||
.body-right{
|
||
background: url('../../../assets/right.png') no-repeat!important;
|
||
}
|
||
|
||
.body-bottom{
|
||
background: url('../../../assets/down.png') no-repeat!important;
|
||
}
|
||
.main {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
.left,
|
||
.right {
|
||
width: 23%;
|
||
padding-right: 20px;
|
||
position: relative;
|
||
}
|
||
.left{
|
||
left: 1%;
|
||
}
|
||
.right {
|
||
//right: 2%;
|
||
h1 {
|
||
left: 25%;
|
||
|
||
}
|
||
|
||
text-align: left;
|
||
|
||
.rtitle {
|
||
font-size: 20px;
|
||
padding-left: 20px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
background: url("~@/assets/landRes2/mask.png") no-repeat;
|
||
color: #B4E9FF;
|
||
background-size: cover;
|
||
}
|
||
}
|
||
|
||
.progress {
|
||
background: url("~@/assets/landRes2/process.png") no-repeat top;
|
||
margin: 20px 0 65px 0;
|
||
height: 165px;
|
||
width: 100%;
|
||
position: relative;
|
||
|
||
.safe {
|
||
color: #FECB12;
|
||
}
|
||
|
||
.safeIcon {
|
||
width: 20px;
|
||
height: 20px;
|
||
position: absolute;
|
||
display: inline-block;
|
||
left: 110px;
|
||
top: 99px;
|
||
background: url("~@/assets/landRes2/process-step.png") no-repeat center;
|
||
}
|
||
|
||
|
||
|
||
span {
|
||
color: #B3E8FE;
|
||
font-size: 13px;
|
||
position: absolute;
|
||
left: 85px;
|
||
top: 15px;
|
||
|
||
&:nth-child(6),
|
||
&:nth-child(2),
|
||
&:nth-child(9) {
|
||
left: 285px;
|
||
}
|
||
|
||
&:nth-child(1),
|
||
&:nth-child(5),
|
||
&:nth-child(8) {
|
||
left: 185px;
|
||
}
|
||
|
||
&:nth-child(n+4) {
|
||
top: 75px;
|
||
}
|
||
|
||
&:nth-child(n+7) {
|
||
top: 120px;
|
||
}
|
||
|
||
&:nth-child(n+10) {
|
||
top: 165px;
|
||
left: 185px
|
||
}
|
||
|
||
&:nth-child(11) {
|
||
top: 165px;
|
||
left: 285px
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
h1 {
|
||
text-align: center;
|
||
position: absolute;
|
||
top: -40px;
|
||
left: 35%;
|
||
font-size: 22px;
|
||
color: #A5E7ED;
|
||
font-weight: bolder;
|
||
mask-image: -webkit-gradient(linear, top, bottom, from(#ecf9fa), to(#ACF2F8));
|
||
|
||
}
|
||
</style>
|