From 6f5331c9ba8b6ba44b45b6a89d7c7c813ab8052d Mon Sep 17 00:00:00 2001
From: zengh <123456>
Date: Fri, 08 Jul 2022 20:28:29 +0800
Subject: [PATCH] Merge remote-tracking branch 'origin/master'
---
src/components/splitScreen/index.vue | 153 ++----
src/views/farm/index.vue | 320 ++++++++++++
src/components/remote/index.vue | 128 +---
src/components/selectTime/index.vue | 307 ++++++++++++
src/components/timeLine/index.vue | 371 +++++++++-----
src/styles/index.scss | 1
src/styles/publicBox/trace-table.scss | 141 +++++
7 files changed, 1,088 insertions(+), 333 deletions(-)
diff --git a/src/components/remote/index.vue b/src/components/remote/index.vue
index 90e6af9..505957a 100644
--- a/src/components/remote/index.vue
+++ b/src/components/remote/index.vue
@@ -1,7 +1,15 @@
/* eslint-disable camelcase */
<template>
<div style="height: 100%; width: 100%; position: relative;">
- <div class="location-box">
+ <div v-show="SelectTimeFlag">
+ <select-time ref="leftRoller" :leftOrRight="'left'" class="l-time"></select-time>
+ </div>
+
+ <div v-show="SelectTimeFlag">
+ <select-time ref="rightRoller" :leftOrRight="'right'" class="r-time"></select-time>
+ </div>
+
+ <div class="location-box" v-show="!rollerCloseShow && !screenShow">
<el-input
placeholder="请输入地点/经纬度：113.25，30.53"
v-model="location"
@@ -12,21 +20,21 @@
</div>
<div class="tool-box">
- <div class="measure" v-show="screenShow">
+ <!-- <div class="measure" v-show="screenShow">
<div class="btn">
<span>
<i class="el-icon-time"></i>
</span>
标注
</div>
- </div>
+ </div>-->
<div class="measure" v-show="!screenShow">
- <div class="btn">
+ <div class="btn" @click="deactivate">
<span>
<i class="el-icon-time"></i>
</span>
- 标注
+ 清除
</div>
<div class="line"></div>
<div class="btn" @click="distanceSurface">
@@ -45,7 +53,7 @@
</div>
<div v-show="!rollerCloseShow && !screenShow" class="func">
- <div class="btn">
+ <div class="btn" style="color: #fff; background: #469CF3; height: 100%;">
<span>
<i class="el-icon-time"></i>
</span>
@@ -95,6 +103,7 @@
data () {
return {
+ SelectTimeFlag: false,
rollerCloseShow: false,
screenShow: false,
location: ''
@@ -138,76 +147,6 @@
)
// http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer
-
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengyjjddom',
- style: 'default',
- tileMatrixSetID: 'default028mm',
- format: 'image/png',
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
- maximumLevel: 19,
- tileMatrixLabels: [
- '0',
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
- '13',
- '14',
- '15',
- '16',
- '17',
- '18',
- '19'
- ]
- })
- )
-
- global.viewer.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengdom',
- style: 'default',
- tileMatrixSetID: 'default028mm',
- format: 'image/png',
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
- maximumLevel: 19,
- tileMatrixLabels: [
- '0',
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
- '13',
- '14',
- '15',
- '16',
- '17',
- '18',
- '19'
- ]
- })
- )
// 矢量电子
// global.viewer.imageryLayers.addImageryProvider(
@@ -354,12 +293,13 @@
}
},
- closeSplitScreen () {
- this.screenShow = false
- },
-
splitScreen () {
this.screenShow = true
+ this.deactivate()
+ },
+
+ closeSplitScreen () {
+ this.screenShow = false
},
distanceSurface () {
@@ -376,19 +316,27 @@
key: 'e9533f5acb2ac470b07f406a4d24b4f0'
})
global.viewer.mapSplit.enable = true
-
- global.viewer.mapSplit.addBaseLayer(baselayerElc)
} else {
global.viewer.mapSplit.enable = true
}
num++
this.rollerCloseShow = true
+ this.SelectTimeFlag = true
+ this.deactivate()
+ this.$refs.leftRoller.init()
+ this.$refs.rightRoller.init()
},
closeRollerShutters () {
global.viewer.mapSplit.enable = false
this.rollerCloseShow = false
+ this.SelectTimeFlag = false
+
+ this.$refs.leftRoller.clearLayer()
+ this.$refs.rightRoller.clearLayer()
+
+ // global.viewer.imageryLayers.removeAll()
}
}
}
@@ -415,6 +363,22 @@
width: 320px;
}
+.l-time {
+ position: absolute;
+ top: 30px;
+ left: 25%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+}
+
+.r-time {
+ position: absolute;
+ top: 30px;
+ right: 25%;
+ transform: translate(50%, 0);
+ z-index: 99;
+}
+
.tool-box {
display: flex;
justify-content: space-between;
diff --git a/src/components/selectTime/index.vue b/src/components/selectTime/index.vue
new file mode 100644
index 0000000..b8259be
--- /dev/null
+++ b/src/components/selectTime/index.vue
@@ -0,0 +1,307 @@
+<template>
+ <!--时间线-->
+ <div>
+ <div class="current-select" @click="listFlag = !listFlag">
+ <div class="title">2019-2M第一季度</div>
+ <i class="el-icon-caret-bottom"></i>
+ </div>
+
+ <div class="list-box" v-show="listFlag">
+ <ul>
+ <li
+ v-for="(item, index) in selectList"
+ :key="index"
+ @click="currentClick(item, index)"
+ >{{item.title}}</li>
+ </ul>
+ </div>
+ </div>
+</template>
+
+<script>
+let leftCurrentLayer = null
+let rightCurrentLayer = null
+
+window.splitScreenOneLayers = null
+window.splitScreenTwoLayers = null
+window.splitScreenThreeLayers = null
+window.splitScreenFourLayers = null
+
+export default {
+ name: 'selectTime',
+ props: ['leftOrRight', 'type'],
+ data () {
+ return {
+ selectList: [{
+ title: '2012-2M第一季度'
+ }, {
+ title: '2013-2M第一季度'
+ }, {
+ title: '2014-2M第一季度'
+ }, {
+ title: '2015-2M第一季度'
+ }, {
+ title: '2016-2M第一季度'
+ }, {
+ title: '2017-2M第一季度'
+ }, {
+ title: '2018-2M第一季度'
+ }, {
+ title: '2019-2M第一季度'
+ }, {
+ title: '2020-2M第一季度'
+ }, {
+ title: '2021-2M第一季度'
+ }, {
+ title: '2022-2M第一季度'
+ }],
+ listFlag: false,
+ currentTitle: null,
+ currentIndex: null
+ }
+ },
+ mounted () {
+
+ },
+
+ methods: {
+ init () {
+ this.currentTitle = this.selectList[0].title
+ this.currentIndex = 0
+
+ if (this.leftOrRight == 'left') {
+ this.leftAddLayer()
+ } else {
+ this.rightAddLayer()
+ }
+ },
+
+ clearLayer () {
+ if (this.leftOrRight == 'left') {
+ this.removeLeftAddLayer()
+ } else {
+ this.removeRightAddLayer()
+ }
+ },
+
+ leftAddLayer () {
+ leftCurrentLayer = global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengyjjddom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ }), 10
+ )
+ },
+
+ rightAddLayer () {
+ rightCurrentLayer = global.viewer.mapSplit.addBaseLayer(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengdom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ }), 21
+ )
+ },
+
+ removeLeftAddLayer () {
+ if (leftCurrentLayer != null) {
+ global.viewer.imageryLayers.remove(leftCurrentLayer)
+ leftCurrentLayer = null
+ }
+ },
+
+ removeRightAddLayer () {
+ if (rightCurrentLayer != null) {
+ global.viewer.imageryLayers.remove(rightCurrentLayer)
+ rightCurrentLayer = null
+ }
+ },
+
+ addLayers (variable) {
+ window[variable] = window[this.type].imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengdom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ }), 10
+ )
+ },
+
+ removeLayers (variable) {
+ if (window[variable] != null) {
+ window[this.type].imageryLayers.remove(window[variable])
+ window[variable] = null
+ }
+ },
+
+ currentClick (item, index) {
+ if (this.currentIndex == index) {
+ this.listFlag = false
+ return
+ }
+
+ if (this.leftOrRight) {
+ if (this.leftOrRight == 'left') {
+ this.removeLeftAddLayer()
+ this.leftAddLayer()
+ } else {
+ this.removeRightAddLayer()
+ this.rightAddLayer()
+ }
+
+ this.listFlag = false
+ } else {
+ if (this.type == 'viewerOne') {
+ this.removeLayers('splitScreenOneLayers')
+ this.addLayers('splitScreenOneLayers')
+ } else if (this.type == 'viewerTwo') {
+ this.removeLayers('splitScreenTwoLayers')
+ this.addLayers('splitScreenTwoLayers')
+ } else if (this.type == 'viewerThree') {
+ this.removeLayers('splitScreenThreeLayers')
+ this.addLayers('splitScreenThreeLayers')
+ } else if (this.type == 'viewerFour') {
+ this.removeLayers('splitScreenFourLayers')
+ this.addLayers('splitScreenFourLayers')
+ }
+
+ this.listFlag = false
+ }
+ }
+ },
+
+ destroyed () {
+ if (this.type) {
+ if (this.type == 'viewerOne') {
+ this.removeLayers('splitScreenOneLayers')
+ this.addLayers('splitScreenOneLayers')
+ } else if (this.type == 'viewerTwo') {
+ this.removeLayers('splitScreenTwoLayers')
+ this.addLayers('splitScreenTwoLayers')
+ } else if (this.type == 'viewerThree') {
+ this.removeLayers('splitScreenThreeLayers')
+ this.addLayers('splitScreenThreeLayers')
+ } else if (this.type == 'viewerFour') {
+ this.removeLayers('splitScreenFourLayers')
+ this.addLayers('splitScreenFourLayers')
+ }
+ }
+ }
+}
+</script>
+
+<style lang="scss" scoped>
+.current-select {
+ padding: 0 15px;
+ width: 166px;
+ height: 30px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background: #ffffff;
+ border-radius: 4px 4px 4px 4px;
+ box-sizing: border-box;
+ font-size: 12px;
+ color: #717171;
+ cursor: pointer;
+}
+
+.list-box {
+ position: absolute;
+ top: 32px;
+ width: 166px;
+ height: 240px;
+ overflow-y: auto;
+ background: #ffffff;
+ border-radius: 4px 4px 4px 4px;
+ box-sizing: border-box;
+ font-size: 12px;
+ color: #717171;
+
+ li {
+ line-height: 30px;
+ }
+}
+</style>
diff --git a/src/components/splitScreen/index.vue b/src/components/splitScreen/index.vue
index 2ce6c90..29d7def 100644
--- a/src/components/splitScreen/index.vue
+++ b/src/components/splitScreen/index.vue
@@ -1,10 +1,18 @@
/* eslint-disable camelcase */
<template>
<div class="current-wrapper" style="height: 100%; width: 100%; position: relative;">
- <div class="map-box" id="viewer-container-one"></div>
- <div class="map-box" id="viewer-container-two"></div>
- <div class="map-box" id="viewer-container-three"></div>
- <div class="map-box" id="viewer-container-four"></div>
+ <div class="map-box" id="viewer-container-one">
+ <select-time ref="leftRoller" :type="'viewerOne'" class="time"></select-time>
+ </div>
+ <div class="map-box" id="viewer-container-two">
+ <select-time ref="leftRoller" :type="'viewerTwo'" class="time"></select-time>
+ </div>
+ <div class="map-box" id="viewer-container-three">
+ <select-time ref="leftRoller" :type="'viewerThree'" class="time"></select-time>
+ </div>
+ <div class="map-box" id="viewer-container-four">
+ <select-time ref="leftRoller" :type="'viewerFour'" class="time"></select-time>
+ </div>
<div class="line-row"></div>
<div class="line-column"></div>
@@ -12,10 +20,10 @@
</template>
<script>
-let viewerOne = null
-let viewerTwo = null
-let viewerThree = null
-let viewerFour = null
+window.viewerOne = null
+window.viewerTwo = null
+window.viewerThree = null
+window.viewerFour = null
let handlerTL = null
let handlerTR = null
@@ -39,7 +47,7 @@
this.$nextTick(() => {
function initViewer () {
- viewerOne = new global.DC.Viewer('viewer-container-one', {
+ window.viewerOne = new global.DC.Viewer('viewer-container-one', {
contextOptions: {
webgl: {
alpha: true,
@@ -49,7 +57,7 @@
}
})
- viewerTwo = new global.DC.Viewer('viewer-container-two', {
+ window.viewerTwo = new global.DC.Viewer('viewer-container-two', {
contextOptions: {
webgl: {
alpha: true,
@@ -59,7 +67,7 @@
}
})
- viewerThree = new global.DC.Viewer('viewer-container-three', {
+ window.viewerThree = new global.DC.Viewer('viewer-container-three', {
contextOptions: {
webgl: {
alpha: true,
@@ -69,7 +77,7 @@
}
})
- viewerFour = new global.DC.Viewer('viewer-container-four', {
+ window.viewerFour = new global.DC.Viewer('viewer-container-four', {
contextOptions: {
webgl: {
alpha: true,
@@ -80,25 +88,25 @@
})
if (global.DC.Namespace.Cesium.FeatureDetection.supportsImageRenderingPixelated()) { // 判断是否支持图像渲染像素化处理
- viewerOne.setOptions({
+ window.viewerOne.setOptions({
resolutionScale: window.devicePixelRatio
})
- viewerTwo.setOptions({
+ window.viewerTwo.setOptions({
resolutionScale: window.devicePixelRatio
})
- viewerThree.setOptions({
+ window.viewerThree.setOptions({
resolutionScale: window.devicePixelRatio
})
- viewerFour.setOptions({
+ window.viewerFour.setOptions({
resolutionScale: window.devicePixelRatio
})
}
// 影像
- viewerOne.imageryLayers.addImageryProvider(
+ window.viewerOne.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -108,7 +116,7 @@
})
)
- viewerTwo.imageryLayers.addImageryProvider(
+ window.viewerTwo.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -118,7 +126,7 @@
})
)
- viewerThree.imageryLayers.addImageryProvider(
+ window.viewerThree.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
@@ -128,83 +136,13 @@
})
)
- viewerFour.imageryLayers.addImageryProvider(
+ window.viewerFour.imageryLayers.addImageryProvider(
new global.DC.Namespace.Cesium.UrlTemplateImageryProvider({
url: 'http://t{s}.tianditu.gov.cn/DataServer?T=img_w&x={x}&y={y}&l={z}&tk=e9533f5acb2ac470b07f406a4d24b4f0',
subdomains: ['0', '1', '2', '3', '4', '5', '6', '7'],
format: 'image/jpeg',
show: true,
maximumLevel: 18
- })
- )
-
- viewerOne.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengyjjddom',
- style: 'default',
- tileMatrixSetID: 'default028mm',
- format: 'image/png',
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
- maximumLevel: 19,
- tileMatrixLabels: [
- '0',
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
- '13',
- '14',
- '15',
- '16',
- '17',
- '18',
- '19'
- ]
- })
- )
-
- viewerOne.imageryLayers.addImageryProvider(
- new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
- url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
- layer: 'nanchengdom',
- style: 'default',
- tileMatrixSetID: 'default028mm',
- format: 'image/png',
- tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
- maximumLevel: 19,
- tileMatrixLabels: [
- '0',
- '1',
- '2',
- '3',
- '4',
- '5',
- '6',
- '7',
- '8',
- '9',
- '10',
- '11',
- '12',
- '13',
- '14',
- '15',
- '16',
- '17',
- '18',
- '19'
- ]
})
)
@@ -229,9 +167,9 @@
// })
// )
- that.initHandler(viewerOne, viewerTwo, viewerThree, viewerFour)
+ that.initHandler(window.viewerOne, window.viewerTwo, window.viewerThree, window.viewerFour)
- viewerOne.camera.setView({
+ window.viewerOne.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -246,7 +184,7 @@
}
})
- viewerTwo.camera.setView({
+ window.viewerTwo.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -261,7 +199,7 @@
}
})
- viewerThree.camera.setView({
+ window.viewerThree.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -276,7 +214,7 @@
}
})
- viewerFour.camera.setView({
+ window.viewerFour.camera.setView({
// Cesium的坐标是以地心为原点，一向指向南美洲，一向指向亚洲，一向指向北极州
// fromDegrees()方法，将经纬度和高程转换为世界坐标
destination: global.DC.Namespace.Cesium.Cartesian3.fromDegrees(
@@ -376,15 +314,15 @@
handlerBL = null
handlerBR = null
- viewerOne.destroy()
- viewerTwo.destroy()
- viewerThree.destroy()
- viewerFour.destroy()
+ window.viewerOne.destroy()
+ window.viewerTwo.destroy()
+ window.viewerThree.destroy()
+ window.viewerFour.destroy()
- viewerOne = null
- viewerTwo = null
- viewerThree = null
- viewerFour = null
+ window.viewerOne = null
+ window.viewerTwo = null
+ window.viewerThree = null
+ window.viewerFour = null
}
}
</script>
@@ -407,8 +345,17 @@
flex-wrap: wrap;
.map-box {
+ position: relative;
width: 50%;
height: 50%;
+
+ .time {
+ position: absolute;
+ top: 35px;
+ left: 50%;
+ transform: translate(-50%, 0);
+ z-index: 99;
+ }
}
.line-row {
diff --git a/src/components/timeLine/index.vue b/src/components/timeLine/index.vue
index 9c21240..3245627 100644
--- a/src/components/timeLine/index.vue
+++ b/src/components/timeLine/index.vue
@@ -31,117 +31,97 @@
</template>
<script>
+let currentYxOne = null
+let currentYxTwo = null
+
export default {
name: 'timeLine',
data () {
return {
timeIndex: 2,
- timeLineList: [{
- timestamp: '2012',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- icon: 'el-iconprev',
- year: '2012',
- info: '2012第一季度'
- }, {
- timestamp: '2013年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2013',
- info: '2012第二季度'
- }, {
- timestamp: '2014年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2014',
- info: '2012第三季度'
- }, {
- timestamp: '2015年',
- color: '#999',
- fontsize: 18,
- year: '2015',
- size: '28',
- bgcolor: '#e4e7ed',
- info: '2012第四季度'
- }, {
- timestamp: '2016年',
- color: '#999',
- fontsize: 18,
- size: '28',
- year: '2016',
- bgcolor: '#e4e7ed',
- info: '2013第一季度'
- }, {
- timestamp: '2017年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2017',
- info: '2013第二季度'
- }, {
- timestamp: '2018年',
- color: '#999',
- fontsize: 18,
- size: '28',
- bgcolor: '#e4e7ed',
- year: '2018',
- info: '2013第三季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2013第四季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第一季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第二季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第三季度'
- }, {
- timestamp: '2019年',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2014第四季度'
- }, {
- timestamp: '2019',
- color: '#999',
- fontsize: 18,
- year: '2019',
- bgcolor: '#e4e7ed',
- size: '28',
- info: '2015第一季度'
- }],
+ timeLineList: [
+ {
+ timestamp: '2012',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ icon: 'el-iconprev',
+ year: '2012',
+ info: '2012第一季度'
+ }, {
+ timestamp: '2013年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2013',
+ info: '2012第二季度'
+ }, {
+ timestamp: '2014年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2014',
+ info: '2012第三季度'
+ }, {
+ timestamp: '2015年',
+ color: '#999',
+ fontsize: 18,
+ year: '2015',
+ size: '28',
+ bgcolor: '#e4e7ed',
+ info: '2012第四季度'
+ }, {
+ timestamp: '2016年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ year: '2016',
+ bgcolor: '#e4e7ed',
+ info: '2013第一季度'
+ }, {
+ timestamp: '2017年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2017',
+ info: '2013第二季度'
+ }, {
+ timestamp: '2018年',
+ color: '#999',
+ fontsize: 18,
+ size: '28',
+ bgcolor: '#e4e7ed',
+ year: '2018',
+ info: '2013第三季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2013第四季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2014第一季度'
+ }, {
+ timestamp: '2019年',
+ color: '#999',
+ fontsize: 18,
+ year: '2019',
+ bgcolor: '#e4e7ed',
+ size: '28',
+ info: '2014第二季度'
+ }],
currentObj: {
timestamp: '2012',
color: '#999',
@@ -157,8 +137,100 @@
rightStart: true
}
},
+ mounted () {
+ this.$nextTick(() => {
+ this.addBaseLayer()
+ })
+ },
+
methods: {
+ addBaseLayer () {
+ currentYxOne = global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengyjjddom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengyjjddom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+
+ currentYxTwo = global.viewer.imageryLayers.addImageryProvider(
+ new global.DC.Namespace.Cesium.WebMapTileServiceImageryProvider({
+ url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ // url: 'http://arcgis.jxpskj.com:6080/arcgis/rest/services/nanchengdom/MapServer/WMTS',
+ layer: 'nanchengdom',
+ style: 'default',
+ tileMatrixSetID: 'default028mm',
+ format: 'image/png',
+ tilingScheme: new global.DC.Namespace.Cesium.GeographicTilingScheme(),
+ maximumLevel: 19,
+ tileMatrixLabels: [
+ '0',
+ '1',
+ '2',
+ '3',
+ '4',
+ '5',
+ '6',
+ '7',
+ '8',
+ '9',
+ '10',
+ '11',
+ '12',
+ '13',
+ '14',
+ '15',
+ '16',
+ '17',
+ '18',
+ '19'
+ ]
+ })
+ )
+ },
+ removeBaseLayer () {
+ if (currentYxOne != null) {
+ global.viewer.imageryLayers.remove(currentYxOne)
+ currentYxOne = null
+ }
+
+ if (currentYxTwo != null) {
+ global.viewer.imageryLayers.remove(currentYxTwo)
+ currentYxTwo = null
+ }
+ },
selectTime (e, item, index) {
+ if (this.currentInd == index) return
+
+ this.removeBaseLayer()
+
this.currentObj = item
this.currentInd = index
@@ -166,66 +238,86 @@
this.$refs.TimePointer.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft + parseInt(this.$refs.mytimeline.style.left) - 38 + 'px'
} else {
- if (e.target.offsetLeft <= 528) {
+ if (e.target.offsetLeft <= 480) {
this.$refs.TimePointer.style.left = e.target.offsetLeft + 14 + 'px'
this.$refs.TextPopup.style.left = e.target.offsetLeft - 38 + 'px'
}
}
+
+ this.addBaseLayer()
// offsetX
},
changeActive (index) {
this.timeIndex = index
},
moveLeft () {
- const leftWidth = parseInt(this.$refs.mytimeline.style.left)
- const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
+ // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
+ // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
- if (this.leftStart == false) {
- return
- } else {
- this.rightStart = true
- }
+ // if (this.leftStart == false) {
+ // return
+ // } else {
+ // this.rightStart = true
+ // }
if (this.currentInd <= 0) return
+
+ this.removeBaseLayer()
this.currentInd = this.currentInd - 1
this.currentObj = this.timeLineList[this.currentInd]
- if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
- if (leftWidth + 48 < 0) {
- this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
- } else {
- this.$refs.mytimeline.style.left = 0 + 'px'
+ this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) - 48 + 'px'
+ this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) - 48 + 'px'
- this.leftStart = false
- }
- }
+ this.addBaseLayer()
+
+ // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
+ // if (leftWidth + 48 < 0) {
+ // this.$refs.mytimeline.style.left = leftWidth + 48 + 'px'
+ // } else {
+ // this.$refs.mytimeline.style.left = 0 + 'px'
+
+ // this.leftStart = false
+ // }
+ // }
},
moveRight () {
- const leftWidth = parseInt(this.$refs.mytimeline.style.left)
- const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
+ // const leftWidth = parseInt(this.$refs.mytimeline.style.left)
+ // const boxWidth = parseInt(this.$refs.mytimeline.clientWidth)
- if (this.rightStart == false) {
- return
- } else {
- this.leftStart = true
- }
+ // if (this.rightStart == false) {
+ // return
+ // } else {
+ // this.leftStart = true
+ // }
if (this.currentInd >= this.timeLineList.length - 1) return
+
+ this.removeBaseLayer()
this.currentInd = this.currentInd + 1
this.currentObj = this.timeLineList[this.currentInd]
- if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 528) {
- if (Math.abs(leftWidth - 48) < boxWidth - 528) {
- this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
- } else {
- this.$refs.mytimeline.style.left = -(boxWidth - 528) + 'px'
+ this.$refs.TimePointer.style.left = parseInt(this.$refs.TimePointer.style.left) + 48 + 'px'
+ this.$refs.TextPopup.style.left = parseInt(this.$refs.TextPopup.style.left) + 48 + 'px'
- this.rightStart = false
- }
- }
+ this.addBaseLayer()
+
+ // if (leftWidth <= 0 && Math.abs(leftWidth) <= boxWidth - 480) {
+ // if (Math.abs(leftWidth - 48) < boxWidth - 480) {
+ // this.$refs.mytimeline.style.left = leftWidth - 48 + 'px'
+ // } else {
+ // this.$refs.mytimeline.style.left = -(boxWidth - 480) + 'px'
+
+ // this.rightStart = false
+ // }
+ // }
}
+ },
+
+ destroyed () {
+ this.removeBaseLayer()
}
}
</script>
@@ -252,6 +344,7 @@
img {
width: 20px;
+ cursor: pointer;
}
.year-box {
@@ -265,11 +358,11 @@
.time-line-box {
position: relative;
- width: 528px;
+ width: 480px;
height: 16px;
.ul_box {
position: relative;
- width: 528px;
+ width: 480px;
height: 16px;
overflow-x: hidden;
display: flex;
diff --git a/src/styles/index.scss b/src/styles/index.scss
index d48a890..420ea59 100644
--- a/src/styles/index.scss
+++ b/src/styles/index.scss
@@ -1,6 +1,7 @@
@import "./element-ui.scss";
@import "./publicBox/arc-nav-bar.scss";
@import "./publicBox/market-nav-bar.scss";
+@import "./publicBox/trace-table.scss";
html,
body {
diff --git a/src/styles/publicBox/trace-table.scss b/src/styles/publicBox/trace-table.scss
new file mode 100644
index 0000000..6ef7675
--- /dev/null
+++ b/src/styles/publicBox/trace-table.scss
@@ -0,0 +1,141 @@
+.public-trace-table {
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ width: 1208px;
+
+ background-color: transparent;
+ z-index: 99;
+ font-size: 14px;
+ box-shadow: inset 0px 0px 30px 1px rgba(33, 186, 196, 0.1600);
+ border: 1px solid #69E2ED;
+ background: rgba(20, 66, 104, 0.8);
+
+ .header {
+ position: relative;
+ border-radius: 8px 8px 0 0;
+ width: 100%;
+ height: 58px;
+ line-height: 58px;
+ background: linear-gradient(96deg, #142B4B 0%, #0F1525 100%);
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+
+ .logo {
+ position: aboslute;
+ top: 0;
+ left: 0;
+ width: 8px;
+ height: 100%;
+ background: #69E2ED;
+ }
+
+ .title {
+ position: absolute;
+ top: 0;
+ left: 25px;
+ font-size: 18px;
+ font-weight: bold;
+ color: #66DDE9;
+ }
+
+ .close {
+ position: absolute;
+ right: 20px;
+ top: 0;
+ left: auto;
+ bottom: 0;
+ margin: auto;
+ width: 28px;
+ height: 28px;
+ cursor: pointer;
+ opacity: 0.6;
+ }
+ }
+
+ .content {
+ clear: both;
+ width: 100%;
+ height: 500px;
+ margin-top: 0px;
+ text-align: center;
+ overflow-y: auto;
+ /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
+ border-radius: 0 0 8px 8px;
+
+ .farm-profiles {
+ position: relative;
+
+ .btn-grounp {
+ position: absolute;
+ top: 18px;
+ right: 20px;
+
+ .details {
+ text-align: right;
+ font-size: 18px;
+ color: #08F4FF;
+ cursor: pointer;
+ }
+
+ .scene {
+ margin-top: 24px;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 100px;
+ height: 30px;
+ background: rgba(102, 221, 233, 0.16);
+ border-radius: 4px 4px 4px 4px;
+ border: 1px solid #66DDE9;
+ box-sizing: border-box;
+
+ img {
+ // width: 70px;
+ height: 24px;
+ }
+ }
+ }
+
+ .farm-content {
+
+ padding: 30px 20px;
+ font-size: 16px;
+ color: #fff;
+
+ .row {
+ display: flex;
+ justify-content: space-between;
+
+ .l {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-end;
+ width: 100px;
+ height: 50px;
+ color: #A9D1D7;
+ }
+
+ .r {
+ display: flex;
+ align-items: flex-start;
+ justify-content: flex-start;
+ margin-left: 24px;
+ flex: 1;
+
+ img {
+ margin-right: 16px;
+ width: 102px;
+ height: 102px;
+ border-radius: 4px 4px 4px 4px;
+ }
+ }
+ }
+
+ }
+
+ }
+
+
+ }
+}
\ No newline at end of file
diff --git a/src/views/farm/index.vue b/src/views/farm/index.vue
index 2f74da9..fc56e58 100644
--- a/src/views/farm/index.vue
+++ b/src/views/farm/index.vue
@@ -2,14 +2,14 @@
* @Author: Morpheus
* @Date: 2022-05-11 15:00:23
* @Last Modified by: Morpheus
- * @Last Modified time: 2022-07-08 14:08:30
+ * @Last Modified time: 2022-07-08 20:01:42
* 驾驶舱
*/
<template>
<div class="container">
<mapBox ref="modalForm" />
- <div class="header">
+ <div class="current-header">
<div class="return">
<span @click="prev">
<i class="el-icon-back"></i> 返回
@@ -23,6 +23,11 @@
</div>
<div class="l-content">
+ <div class="t-l-border border-box"></div>
+ <div class="t-r-border border-box"></div>
+ <div class="b-l-border border-box"></div>
+ <div class="b-r-border border-box"></div>
+
<div class="tab-btn">
<div>
<div class="item" :class="{on: ncjscz == 'ncjs'}">
@@ -38,17 +43,117 @@
</div>
</div>
</div>
- <div class="content"></div>
+ <div v-show="ncjscz == 'ncjs'" class="detail-box">
+ <div class="item">
+ <div class="name">农场名称：</div>
+ <div class="deserve">xx农场</div>
+ </div>
+
+ <div class="item">
+ <div class="name">农场名称：</div>
+ <div class="deserve">xx农场</div>
+ </div>
+ </div>
+
+ <div v-show="ncjscz == 'cz'" class="lists-box nscz">
+ <div>
+ <div class="t-border"></div>
+ <div class="t-item">
+ <div>施肥</div>
+ <div>有机肥料、有机肥</div>
+ <div>2022-06-31</div>
+ </div>
+ <div class="b-item">
+ <div>水稻</div>
+ <div>林术</div>
+ <div>株良镇田南村5号地块</div>
+ </div>
+ </div>
+ </div>
</div>
<div class="r-content">
+ <div class="t-l-border border-box"></div>
+ <div class="t-r-border border-box"></div>
+ <div class="b-l-border border-box"></div>
+ <div class="b-r-border border-box"></div>
+
<div class="tab-btn">
- <div>种养品种</div>
- <div>地块</div>
- <div>物联网设备</div>
+ <div>
+ <div class="item" :class="{on: zydksb == 'zy'}">
+ <div @click="zydksb = 'zy'" class="title">种养品种</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div>
+ <div class="item" :class="{on: zydksb == 'dk'}">
+ <div @click="zydksb = 'dk'" class="title">地块</div>
+ <span></span>
+ </div>
+ </div>
+
+ <div>
+ <div class="item" :class="{on: zydksb == 'sb'}">
+ <div @click="zydksb = 'sb'" class="title">物联网设备</div>
+ <span></span>
+ </div>
+ </div>
</div>
- <div class="content"></div>
+
+ <div v-show="zydksb == 'zy'" class="lists-box dk">
+ <div>
+ <div class="title">
+ <img src="/img/icon/list-img.png" alt />水稻
+ </div>
+ <div class="num-unit">
+ 120
+ <span>亩</span>
+ </div>
+ </div>
+ </div>
+
+ <div v-show="zydksb == 'dk'" class="lists-box dk">
+ <div>
+ <div class="title">
+ <img src="/img/icon/jk.png" alt />某某地块
+ </div>
+ <div class="num-unit">
+ 0.24
+ <span>亩</span>
+ </div>
+ </div>
+ </div>
+
+ <div v-show="zydksb =='sb'" class="lists-box sb">
+ <div>
+ <div class="title">
+ <img src="/img/icon/jk.png" alt />监控设备
+ </div>
+ <div class="type off">在线</div>
+ </div>
+ </div>
</div>
+
+ <public-box class="public-trace-table">
+ <template slot="public-box-header">
+ <div class="logo"></div>
+ <div class="title">农产品溯源码</div>
+ <img
+ @click="farmProfiles = false"
+ src="/img/icon/public-close.png"
+ alt
+ class="close"
+ />
+ </template>
+ <template slot="public-box-content">
+ <div class="action-bar"></div>
+ <div class="table-list">
+ <div class="t-header"></div>
+ <div class="t-body"></div>
+ </div>
+ </template>
+ </public-box>
</div>
</template>
@@ -57,7 +162,8 @@
export default {
data () {
return {
- ncjscz: 'cz'
+ ncjscz: 'cz',
+ zydksb: 'sb'
}
},
created () {
@@ -87,7 +193,7 @@
width: 100%;
height: 100%;
- .header {
+ .current-header {
display: flex;
align-items: center;
justify-content: space-between;
@@ -146,6 +252,8 @@
.l-content,
.r-content {
+ display: flex;
+ flex-direction: column;
position: absolute;
top: 248px;
width: 440px;
@@ -194,6 +302,200 @@
}
}
}
+
+ .detail-box {
+ margin: 20px;
+ flex: 1;
+ overflow-y: auto;
+
+ .item {
+ display: flex;
+ align-items: center;
+ margin-top: 14px;
+ padding: 0 20px;
+ height: 56px;
+ background: #081e36;
+ font-size: 16px;
+ color: #84c3d2;
+
+ .name {
+ margin-right: 8px;
+ font-weight: bold;
+ color: #abebf7;
+ }
+ }
+
+ .item:first-child {
+ margin-top: 0;
+ }
+ }
+
+ .nscz.lists-box {
+ margin: 20px;
+ flex: 1;
+ overflow-y: auto;
+
+ & > div {
+ position: relative;
+ height: 84px;
+ margin-top: 10px;
+ padding: 10px 20px;
+ box-sizing: border-box;
+ display: flex;
+ flex-direction: column;
+ justify-content: space-between;
+
+ background: rgba(102, 221, 233, 0.1);
+ border-radius: 8px;
+ font-size: 18px;
+ color: #a9d1d7;
+
+ & > .t-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ & > div:first-child {
+ font-weight: bold;
+ color: #66dde9;
+ }
+ }
+
+ & > .b-item {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+
+ & > div:first-child {
+ color: #fff;
+ }
+ }
+
+ .t-border {
+ position: absolute;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: auto;
+ margin: auto;
+ width: 80%;
+ height: 1px;
+ background: linear-gradient(
+ 89deg,
+ rgba(102, 221, 233, 0) 0%,
+ #66dde9 51%,
+ rgba(102, 221, 233, 0) 100%
+ );
+ }
+ }
+
+ & > div:first-child {
+ margin-top: 0px;
+ }
+ }
+
+ .zy.lists-box,
+ .dk.lists-box,
+ .sb.lists-box {
+ margin: 20px;
+ flex: 1;
+ overflow-y: auto;
+
+ & > div {
+ position: relative;
+ height: 60px;
+ margin-top: 10px;
+ padding: 0 20px;
+ box-sizing: border-box;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+ font-size: 18px;
+ color: #a9d1d7;
+
+ .title {
+ display: flex;
+ align-items: center;
+
+ img {
+ margin-right: 18px;
+ width: 24px;
+ height: 24px;
+ }
+ }
+
+ .num-unit {
+ font-weight: bold;
+ color: #7ccfd6;
+
+ span {
+ font-size: 16px;
+ font-weight: 400;
+ color: #a9d1d7;
+ }
+ }
+
+ .type {
+ font-weight: bold;
+ color: #7ccfd6;
+ }
+
+ .off.type {
+ color: #d96b5a;
+ }
+ }
+
+ & > div:first-child {
+ margin-top: 0;
+ }
+
+ & > div:last-child {
+ border: none;
+ }
+ }
+
+ .zy.lists-box {
+ & > div {
+ height: 80px;
+ }
+ }
+
+ .border-box {
+ position: absolute;
+ width: 72px;
+ height: 56px;
+ z-index: 0;
+ }
+
+ .t-l-border {
+ top: -2px;
+ left: -2px;
+ border-top: 3px solid #09e2ef;
+ border-left: 3px solid #09e2ef;
+ border-top-left-radius: 30px;
+ }
+ .t-r-border {
+ top: -2px;
+ right: -2px;
+ border-top: 3px solid #09e2ef;
+ border-right: 3px solid #09e2ef;
+ border-top-right-radius: 30px;
+ }
+ .b-l-border {
+ bottom: -2px;
+ left: -2px;
+ border-bottom: 3px solid #09e2ef;
+ border-left: 3px solid #09e2ef;
+ border-bottom-left-radius: 30px;
+ }
+ .b-r-border {
+ bottom: -2px;
+ right: -2px;
+ border-bottom: 3px solid #09e2ef;
+ border-right: 3px solid #09e2ef;
+ border-bottom-right-radius: 30px;
+ }
}
.l-content {
--
Gitblit v1.9.3