| | |
| | | <div class="top1"> |
| | | <span class="botcon"> |
| | | <span class="icon"></span> |
| | | <span class="text">态势标绘</span> |
| | | <span class="text">军标标绘</span> |
| | | </span> |
| | | <span class="close" |
| | | @click="close">x</span> |
| | | </div> |
| | | <div class="next"> |
| | | <el-form ref="form" |
| | | :model="form" |
| | | label-width="240px"> |
| | | <el-form-item label="区域:"> |
| | | <el-select v-model="form.points" |
| | | @change="changeplase"> |
| | | <el-option v-for="(item, index) in regions" |
| | | :key="index" |
| | | :label="item.vname" |
| | | :value="{ value: item.vlatlngs, label: item.vname }"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="起始时间:"> |
| | | <el-date-picker v-model="form.startTime" |
| | | value-format="yyyyMMdd" |
| | | :picker-options="pickerOptions" |
| | | format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | @change="change"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="结束时间:"> |
| | | <el-date-picker v-model="form.endTime" |
| | | value-format="yyyyMMdd" |
| | | :picker-options="pickerOptions" |
| | | format="yyyy-MM-dd" |
| | | type="date" |
| | | placeholder="选择日期" |
| | | @change="change1"> |
| | | </el-date-picker> |
| | | </el-form-item> |
| | | <el-form-item label="分析类型:"> |
| | | <el-select v-model="form.analysisType"> |
| | | <el-option label="频点" |
| | | value="1"></el-option> |
| | | <el-option label="频段" |
| | | value="2"></el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | <el-form-item label="无线电业务:"> |
| | | <el-select v-model="form.radio" |
| | | @change="choose"> |
| | | <el-option v-for="item in radios" |
| | | :key="item.value" |
| | | :label="item.bussName" |
| | | :value="item.startFreq + '-' + item.endFreq"> |
| | | </el-option> |
| | | </el-select> |
| | | </el-form-item> |
| | | </el-form> |
| | | <div class="btns"> |
| | | <span @click="reset">重置</span> |
| | | <span @click="analysis">分析</span> |
| | | </div> |
| | | </div> |
| | | <div class="showpic" |
| | | v-if="showpic"> |
| | | <div :style="innerbac" |
| | | @click="openDia"></div> |
| | | </div> |
| | | <changePic @colordata="getdata" /> |
| | | |
| | | </div> |
| | | </template> |
| | | |
| | | <script> |
| | | import { createPic,freqBandAnalysis,showCQ } from "../../api/http"; |
| | | import changePic from "../common/color.vue"; |
| | | |
| | | import bus from "../../utils/bus"; |
| | | import axios from "axios"; |
| | | |
| | | let hander,divPoint3; |
| | | let Base64=require("js-base64").Base64; |
| | | export default { |
| | | components: { |
| | | changePic, |
| | | }, |
| | | data () { |
| | | return { |
| | | form: { |
| | | points: "", |
| | | startTime: new Date("2016-06-01"), |
| | | endTime: new Date("2016-06-30"), |
| | | radio: "调频广播", |
| | | freqStart: "87", |
| | | freqEnd: "108", |
| | | analysisType: "频点", |
| | | }, |
| | | nowfile: "", |
| | | showsituation: false, |
| | | imageid: null, |
| | | showpic: false, |
| | | pickerOptions: {}, |
| | | chooseplase: "", |
| | | options: [], |
| | | regions: [], |
| | | radios: [], |
| | | colorContainer: {}, |
| | | innerbac: { |
| | | width: "30%", |
| | | height: "70%", |
| | | border: "1px solid #000", |
| | | transform: "translate(40px,90px)", |
| | | backgroundImage: |
| | | "url("+require("@/assets/image/botbtn/color.png")+")", |
| | | backgroundPosition: "center", |
| | | backgroundSize: ` 100% 100%`, |
| | | }, |
| | | |
| | | showdata1: true, |
| | | showdata2: true, |
| | | showDianci: false, |
| | | |
| | | showsituation: false, |
| | | }; |
| | | }, |
| | | mounted () { |
| | | bus.$on("clearEve",(e) => { |
| | | this.reset(); |
| | | |
| | | }); |
| | | bus.$on("radioData",(e) => { |
| | | this.radios=e; |
| | | }); |
| | | bus.$on("guanzhou",(e) => { |
| | | this.form.startTime=e.fromdate; |
| | | this.form.endTime=e.todate; |
| | | |
| | | }); |
| | | bus.$on("areaData",(e) => { |
| | | this.regions=e; |
| | | |
| | | }); |
| | | bus.$on("showdio",(e) => { |
| | | this.showsituation=e=="7-9" |
| | | this.showsituation=e=="7-9-1" |
| | | this.showdata1=true; |
| | | this.showdata2=true; |
| | | }); |
| | | }, |
| | | methods: { |
| | | changeplase (value) { |
| | | if(value.label.indexOf("广州")>-1) { |
| | | this.chooseplase="广州"; |
| | | this.form.startTime=new Date("2019-10-08"); |
| | | this.form.endTime=new Date("2019-10-16"); |
| | | window.Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees( |
| | | 113.29503528791071, |
| | | 23.104708355136264, |
| | | 4109.8492337442767 |
| | | ), |
| | | orientation: { |
| | | heading: 0.8349372341578318, |
| | | pitch: -0.85222154573481174, |
| | | roll: 0, |
| | | }, |
| | | }); |
| | | } else { |
| | | this.chooseplase="上海"; |
| | | this.form.startTime=new Date("2016-06-01"); |
| | | this.form.endTime=new Date("2016-06-30"); |
| | | window.Viewer.camera.flyTo({ |
| | | destination: Cesium.Cartesian3.fromDegrees( |
| | | 121.23142475566037, |
| | | 30.314431916707203, |
| | | 101204.78027978493 |
| | | ), |
| | | orientation: { |
| | | heading: 0.149372341578318, |
| | | pitch: -0.8022154573481174, |
| | | roll: 0, |
| | | }, |
| | | }); |
| | | } |
| | | }, |
| | | change () { |
| | | this.showdata1=false; |
| | | }, |
| | | change1 () { |
| | | this.showdata2=false; |
| | | }, |
| | | openDia () { |
| | | bus.$emit("changeColor",true); |
| | | }, |
| | | choose (value) { |
| | | let arr=value.split("-"); |
| | | this.form.freqStart=arr[0]; |
| | | this.form.freqEnd=arr[1]; |
| | | }, |
| | | close () { |
| | | this.showsituation=false; |
| | | }, |
| | | getdata (data) { |
| | | this.colorContainer=data; |
| | | }, |
| | | // 点击获得态势 |
| | | getTaishi () { |
| | | if(hander) { |
| | | return; |
| | | } |
| | | hander=new Cesium.ScreenSpaceEventHandler(Viewer.scene.canvas); |
| | | let pickFeature; |
| | | // 鼠标点击事件 |
| | | hander.setInputAction((event) => { |
| | | // 拾取对象 |
| | | divPoint3&&divPoint3.deleteObject(); |
| | | let clickPosition=viewer.scene.camera.pickEllipsoid(event.position); |
| | | // 转经纬度(弧度)坐标 |
| | | let radiansPos=Cesium.Cartographic.fromCartesian(clickPosition); |
| | | let lon=Cesium.Math.toDegrees(radiansPos.longitude); |
| | | let lat=Cesium.Math.toDegrees(radiansPos.latitude); |
| | | let filename=this.nowfile; |
| | | let obj={ |
| | | lat: lat, |
| | | lng: lon, |
| | | analysisAction: "-1", |
| | | analysisType: "1", |
| | | filename: filename, |
| | | }; |
| | | showCQ(obj).then((res) => { |
| | | let data=res.data; |
| | | if(data!="无数据") { |
| | | divPoint3=sgworld.Creator.createDivPoint( |
| | | "合肥", |
| | | { lon: obj.lng,lat: obj.lat }, |
| | | { |
| | | type: "custom", |
| | | offset: ["c",60], |
| | | description: ` |
| | | <div class="divPoint-custom"> |
| | | <p>${data}</p> |
| | | </div> |
| | | `, |
| | | near: 0, |
| | | far: 100000, |
| | | } |
| | | ); |
| | | } |
| | | }); |
| | | //把你拾取的东西打印出来看看什么值可以用作判断 |
| | | },Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | }, |
| | | analysis () { |
| | | this.reset(); |
| | | let that=this; |
| | | if(that.imageid) { |
| | | window.Viewer.entities.removeById(that.imageid); |
| | | that.imageid=null; |
| | | } |
| | | let data={ |
| | | colorName: "-100,0000FF;120,FF0000", |
| | | startTime: "20160601000000", |
| | | endTime: 20160630000000, |
| | | freqStart: 87000000, |
| | | freqEnd: 108000000, |
| | | freqPoint: 87000000, |
| | | points: |
| | | "[[30.5504351,120.5667114],[32.0499889,120.5667114],[32.0499889,122.4453735],[30.5504351,122.4453735]]", |
| | | radius: 0, |
| | | analysisAction: "3", |
| | | analysisType: 1, |
| | | }; |
| | | data={ ...data,...this.form }; |
| | | data.freqStart=data.freqStart*1000000; |
| | | data.freqEnd=data.freqEnd*1000000; |
| | | data.startTime=data.startTime+"000000"; |
| | | data.endTime=data.endTime*1000000; |
| | | data.analysisType=="频点"? (data.analysisType=1):""; |
| | | delete data.radio; |
| | | if(this.showdata1) { |
| | | data.startTime=20160601000000; |
| | | this.chooseplase&&this.chooseplase=="上海" |
| | | ? (data.startTime=20160601000000) |
| | | :(data.startTime=20191008000000); |
| | | } |
| | | if(this.showdata2) { |
| | | data.endTime=20160630000000; |
| | | this.chooseplase&&this.chooseplase=="上海" |
| | | ? (data.endTime=20160630000000) |
| | | :(data.endTime=20191016000000); |
| | | } |
| | | const loading=that.$loading({ |
| | | lock: true, |
| | | text: "计算中", |
| | | spinner: "el-icon-loading", |
| | | background: "rgba(0, 0, 0, 0.7)", |
| | | }); |
| | | data.points=data.points.value; |
| | | freqBandAnalysis(data) |
| | | .then((res) => { |
| | | if(res.message==="Success") { |
| | | let points=res.data.imgBounds; |
| | | that.nowfile=Base64.encode(res.data.url) |
| | | var data1={ |
| | | colorSchemes: 1, |
| | | file: Base64.encode(res.data.url), |
| | | maxColor: "FF0000", |
| | | maxValue: 100, |
| | | minColor: "0000FF", |
| | | minValue: 0, |
| | | showBounds: this.form.points.value, |
| | | }; |
| | | data1={ ...data1,...this.colorContainer }; |
| | | createPic(data1) |
| | | .then((res2) => { |
| | | let rectangle=sgworld.Creator.addSimpleGraphic("rectangle",{ |
| | | removeEdit: true, |
| | | coordinates: Cesium.Rectangle.fromDegrees( |
| | | points.xmin, |
| | | points.ymin, |
| | | points.xmax, |
| | | points.ymax |
| | | ), |
| | | color: "rgba(255,255,255,0.5)", |
| | | image: |
| | | "http://221.224.53.36:9081/calc/picurl?file="+ |
| | | Base64.encode(res2.data), |
| | | }); |
| | | that.showDianci=true; |
| | | // 图片获取成功 开启拾取 |
| | | that.getTaishi(); |
| | | if(that.imageid) { |
| | | window.Viewer.entities.removeById(that.imageid); |
| | | that.imageid=null; |
| | | } |
| | | that.imageid=rectangle.id; |
| | | |
| | | loading.close(); |
| | | that.$message({ |
| | | message: "计算成功", |
| | | type: "success", |
| | | }); |
| | | that.showpic=true; |
| | | }) |
| | | .catch((error) => { |
| | | loading.close(); |
| | | }); |
| | | } |
| | | }) |
| | | .catch((error) => { |
| | | loading.close(); |
| | | }); |
| | | }, |
| | | reset () { |
| | | //重置 |
| | | if(this.imageid) { |
| | | window.Viewer.entities.removeById(this.imageid); |
| | | hander&& |
| | | hander.removeInputAction(Cesium.ScreenSpaceEventType.LEFT_CLICK); |
| | | hander=null; |
| | | divPoint3&&divPoint3.deleteObject(); |
| | | |
| | | this.imageid=null; |
| | | this.showDianci=false; |
| | | } |
| | | }, |
| | | }, |
| | | watch: { |
| | | colorContainer: { |
| | |
| | | :unique-opened="true" |
| | | @select="handleSelect" |
| | | class="el-menu-vertical-demo"> |
| | | <el-submenu index="1"> |
| | | <!-- <el-submenu index="1"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>频谱态势分析</span> |
| | |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="5-1">数据分析报告</el-menu-item> |
| | | |
| | | </el-menu-item-group> |
| | | </el-submenu> --> |
| | | <el-submenu index="6"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>数据资源管理子系统</span> |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="6-1">通用模版管理</el-menu-item> |
| | | <el-menu-item index="6-2">通信资源管理</el-menu-item> |
| | | <el-menu-item index="6-3">通信网系管理</el-menu-item> |
| | | <el-menu-item index="6-4">通信想定管理</el-menu-item> |
| | | <el-menu-item index="6-5">多媒体素材管理</el-menu-item> |
| | | <el-menu-item index="6-6">仿真模型管理</el-menu-item> |
| | | <el-menu-item index="6-7">用户管理和系统设置</el-menu-item> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <el-submenu index="7"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>综合态势显示子系统</span> |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="7-1">目录管理</el-menu-item> |
| | | |
| | | <!-- |
| | | <el-submenu index="7-2"> |
| | | <template slot="title">ZC环境显示</template> |
| | | <el-menu-item index="7-2-1">东南沿海、TD</el-menu-item> |
| | | </el-submenu> |
| | | <el-submenu index="7-3"> |
| | | <template slot="title">通信态势显示</template> |
| | | <el-menu-item index="7-3-1">基站、监测站</el-menu-item> |
| | | </el-submenu> --> |
| | | <el-menu-item index="7-4">信息链路显示</el-menu-item> |
| | | <el-menu-item index="7-5">作战态势显示</el-menu-item> |
| | | <el-menu-item index="7-6">想定资料显示</el-menu-item> |
| | | <el-menu-item index="7-7">态势显示控制</el-menu-item> |
| | | <el-menu-item index="7-8">多媒体素材浏览</el-menu-item> |
| | | <!-- <el-menu-item index="7-9">态势标绘</el-menu-item> --> |
| | | <el-submenu> |
| | | <template slot="title">态势标绘</template> |
| | | <el-menu-item index="7-9-1">军标标绘</el-menu-item> |
| | | <el-menu-item index="7-9-2">图元标绘</el-menu-item> |
| | | <el-menu-item index="7-9-3">模型标绘</el-menu-item> |
| | | </el-submenu> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <!-- <el-submenu index="8"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>通信方案筹划子系统</span> |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="8-1">通信方案管理</el-menu-item> |
| | | <el-menu-item index="8-2">通信方案拟制</el-menu-item> |
| | | <el-menu-item index="8-3">通信网系构建</el-menu-item> |
| | | <el-menu-item index="8-4">通信方案讲评</el-menu-item> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <el-submenu index="9"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>通信效能评估子系统</span> |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="9-1">通信毁伤影响评估</el-menu-item> |
| | | <el-menu-item index="9-2">通信干扰影响评估</el-menu-item> |
| | | <el-menu-item index="9-3">辅助计算分析</el-menu-item> |
| | | </el-menu-item-group> |
| | | </el-submenu> |
| | | <el-submenu index="10"> |
| | | <template slot="title"> |
| | | <i class="el-icon-location"></i> |
| | | <span>作战行动影响分析子系统</span> |
| | | </template> |
| | | <el-menu-item-group> |
| | | <el-menu-item index="10-1">情报链路行动影响分析</el-menu-item> |
| | | <el-menu-item index="10-2">指挥链路行动影响分析</el-menu-item> |
| | | <el-menu-item index="10-3">打击链路行动影响分析</el-menu-item> |
| | | <el-menu-item index="10-4">保障链路行动影响分析和评估分析结果展示 |
| | | </el-menu-item> |
| | | </el-menu-item-group> |
| | | </el-submenu> --> |
| | | </el-menu> |
| | | |
| | | </div> |
| | |
| | | </div> |
| | | </div> |
| | | </template> |
| | | |
| | | |
| | | <script> |
| | | let gdMap=null; |
| | | let dxMap=null; |
| | |
| | | }, |
| | | methods: { |
| | | handleSelect (key,keyPath) { |
| | | var val=keyPath[1] |
| | | var val=keyPath[1]; |
| | | switch(val) { |
| | | case "1-3": |
| | | this.nowchoose=2; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "1-2"://null |
| | | case "1-2": //null |
| | | this.nowchoose=7; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | |
| | | this.nowchoose=1; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "2-6"://null |
| | | case "2-6": //null |
| | | this.nowchoose=8; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | |
| | | this.nowchoose=3; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "2-4"://null |
| | | case "2-4": //null |
| | | this.nowchoose=9; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "2-3"://null |
| | | case "2-3": //null |
| | | this.nowchoose=10; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "2-2": |
| | | this.nowchoose='1-4'; |
| | | this.nowchoose="1-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | |
| | |
| | | break; |
| | | case "3-1": |
| | | this.nowchoose=6; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | |
| | | case "4-1": |
| | | this.nowchoose="4-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "4-2": |
| | | this.nowchoose="4-2"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "4-3": |
| | | this.nowchoose="4-3"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "4-4": |
| | | this.nowchoose="4-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "4-5": |
| | | this.nowchoose="4-5"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "5-1": |
| | | this.nowchoose="5-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-1": |
| | | this.nowchoose="6-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-2": |
| | | this.nowchoose="6-2"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-3": |
| | | this.nowchoose="6-3"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-4": |
| | | this.nowchoose="6-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-5": |
| | | this.nowchoose="6-5"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-6": |
| | | this.nowchoose="6-6"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "6-7": |
| | | this.nowchoose="6-7"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | |
| | | case "7-1": |
| | | this.nowchoose="7-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-2-1": |
| | | this.nowchoose="7-2-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-3-1": |
| | | this.nowchoose="7-3-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-4": |
| | | this.nowchoose="7-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-5": |
| | | this.nowchoose="7-5"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-6": |
| | | this.nowchoose="7-6"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-7": |
| | | this.nowchoose="7-7"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-8": |
| | | this.nowchoose="7-8"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "7-9-1": |
| | | this.nowchoose="7-9-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "8-1": |
| | | this.nowchoose="8-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "8-2": |
| | | this.nowchoose="8-2"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "8-3": |
| | | this.nowchoose="8-3"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "8-4": |
| | | this.nowchoose="8-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "9-1": |
| | | this.nowchoose="9-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "9-2": |
| | | this.nowchoose="9-2"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "9-3": |
| | | this.nowchoose="9-3"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "10-1": |
| | | this.nowchoose="10-1"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "10-2": |
| | | this.nowchoose="10-2"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "10-3": |
| | | this.nowchoose="10-3"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | case "10-4": |
| | | this.nowchoose="10-4"; |
| | | bus.$emit("showdio",this.nowchoose); |
| | | break; |
| | | } |
| | |
| | | }, |
| | | }; |
| | | </script> |
| | | |
| | | |
| | | <style scoped> |
| | | .content { |
| | | /* height: 2000px; */ |
| | |
| | | flex-direction: column; |
| | | } |
| | | .container { |
| | | width: 400px; |
| | | width: 500px; |
| | | margin-left: 100px; |
| | | height: 1600px; |
| | | display: flex; |
| | |
| | | height: 190px; |
| | | background: transparent; |
| | | } |
| | | </style> |
| | | </style> |