图层

src/style/cus.scss

@@ -12,6 +12,39 @@
   word-break: break-all;
 }
 
+.__box-shadow {
+  box-shadow: 0px 1px 4px 0px rgba(0,0,0,0.4);
+}
+
+.__background-grid {
+  background-image: url("@/assets/images/gis-layout/background-grid.png");
+  background-size: 100% 100%;
+  background-repeat: repeat;
+}
+
+.__check {
+  width: 16px;
+  height: 16px;
+  border: 1px solid #d3d3d3;
+  border-radius: 2px;
+  overflow: hidden;
+  &.active {
+    background-color: #6587ff;
+    border-color: #6587ff;
+    display: grid;
+    place-items: center;
+    &:after {
+      content: '✔';
+      color: #ffffff;
+      font-size: 14px;
+    }
+  }
+  &:hover {
+    opacity: 0.75;
+    cursor: pointer;
+  }
+}
+
 .__normal-page {
   margin-left: 10px;
   flex: 1;

src/style/index.scss

@@ -5,6 +5,7 @@
 * {
   outline: none;  // dom元素选中带边框
   -webkit-user-drag: none;
+  line-height: 1;
 }
 
 html, body {

src/views/gis/layout/index.vue

@@ -12,6 +12,41 @@
         </div>
       </template>
     </div>
+    <div class="gis-tools">
+      <div class="gt-search __box-shadow">
+        <el-autocomplete
+            ref="ref_search"
+            v-model="searchInput"
+            :fetch-suggestions="searchHandleMapSearch"
+            :popper-append-to-body="false"
+            clearable
+            :debounce="800"
+            placeholder="请输入关键字进行搜索"
+            @select="searchToMapLocation"
+        >
+          <template #default="{ item }">
+            <div class="search-item __hover">
+              <img :src="item.icon"/>
+              <div class="name">{{item.name}}</div>
+            </div>
+          </template>
+        </el-autocomplete>
+        <div class="search-icon __hover" @click="ref_search.focus()">
+          <SvgIcon name="search" color="#ffffff"/>
+        </div>
+      </div>
+      <div class="gt-tools __box-shadow">
+        <template v-for="(item, index) in ToolsMapper">
+          <div class="tools-line" v-if="index > 0"/>
+          <div class="tools-item __hover" :class="{active: toolsType === item.value}" @click="toolsHandleClick(item)">
+            {{item.label}}
+          </div>
+        </template>
+      </div>
+      <div class="gt-tools-component" v-if="toolsType && toolsType !== 'clear'">
+        <Component :is="toolsCom" :map="map" :mapFunc="mapFunc"/>
+      </div>
+    </div>
     <div class="gis-content">
       <RouterViewCom/>
     </div>
@@ -35,18 +70,26 @@ import {useStore} from 'vuex'
 import {useRouter, useRoute} from 'vue-router'
 import {ElMessage, ElMessageBox} from "element-plus";
 import RouterViewCom from '@/layout/router-view.vue'
-import store from "@/store";
-import * as source from "ol/source";
-import * as layer from "ol/layer";
-import * as proj from "ol/proj";
-import * as extent from "ol/extent";
-import WMTSTileGrid from "ol/tilegrid/WMTS";
-import WMTSSource from "ol/source/WMTS";
+import ElementCom from './tools/element.vue'
+import SelectCom from './tools/select.vue'
+import AnalysisCom from './tools/analysis.vue'
+import ToolCom from './tools/tool.vue'
+import PositionCom from './tools/position.vue'
+import BaseCom from './tools/base.vue'
+import ExampleCom from './tools/example.vue'
+
 
 export default defineComponent({
   name: '',
   components: {
-    RouterViewCom
+    RouterViewCom,
+    ElementCom,
+    SelectCom,
+    AnalysisCom,
+    ToolCom,
+    PositionCom,
+    BaseCom,
+    ExampleCom,
   },
   props: {},
   setup(props, {emit}) {
@@ -57,89 +100,99 @@ export default defineComponent({
     const state = reactive({
       map: <any>null,
       mapFunc: <any>null,
+      searchInput: '',
+      toolsType: '',
+      toolsCom: null,
+      toolsParams: {
+
+      }
     })
+    const ToolsMapper = [
+      {label: '图层', value: 'element', com: ElementCom},
+      {label: '框选', value: 'select', com: SelectCom},
+      {label: '周边分析', value: 'analysis', com: AnalysisCom},
+      {label: '清空图层', value: 'clear', com: undefined},
+      {label: '工具', value: 'tool', com: ToolCom},
+      {label: '定位', value: 'position', com: PositionCom},
+      {label: '底图', value: 'base', com: BaseCom},
+      {label: '图例', value: 'example', com: ExampleCom},
+    ]
+    const ref_search = ref()
     const mapLoad = (map, func) => {
       state.map = map
       state.mapFunc = func
-      // initWMSElement3()
-    }
-    const initWMSElement = () => {
-      const p = 'EPSG:4326'
-      // 切片方案（0-18级
-      const projection = proj.get(p);
-      const projectionExtent = projection.getExtent();
-      const size = extent.getWidth(projectionExtent) / 256;
-      const resolutions = new Array(19);
-      const matrixIds = new Array(19);
-      for (let z = 0; z < 19; ++z) {
-        resolutions[z] = size / Math.pow(2, z);
-        matrixIds[z] = z;
-      }
-      const _tileWMS = new WMTSSource({
-        // url: 'http://192.168.31.19:8082/poiwmts/color/getTile2', // 这里需要替换成你的 WMTS 服务的 URL
-        url: 'https://t4.tianditu.gov.cn/cva_w/wmts?tk=3cac3e6d53faf0377fa96bad29f03d2d', // 这里需要替换成你的 WMTS 服务的 URL
-        // layer: 'your_layer_name', // 替换为你的图层名称
-        layer: 'cva', // 替换为你的图层名称
-        matrixSet: 'w',
-        format: 'tiles',
-        // format: 'image/png',
-        projection: p,
-        tileGrid: new WMTSTileGrid({
-          origin: extent.getTopLeft(projectionExtent),
-          resolutions: resolutions, // 这里填写你的分辨率数组
-          matrixIds: matrixIds, // 这里填写你的矩阵ID数组
-        }),
-        style: 'default', // 样式
-        wrapX: true
-      })
-      const layer_Debug = new layer.Tile({
-        source: new source.TileDebug({
-          projection: projection,
-          tileGrid: _tileWMS.getTileGrid(),
-        }),
-        zIndex: 3
-      })
-      const wmts = new layer.Tile({
-        source: _tileWMS,
-        zIndex: 2,
-      })
-      state.map.addLayer(wmts)
-      // state.map.addLayer(layer_Debug)
-    }
-    const initWMSElement3 = () => {
-      const wmts = new layer.Tile({
-        source: new source.XYZ({
-          projection: "EPSG:4326",
-          url: `http://59.255.48.160:81/vec_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=vec&style=default&opacity=1&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}
-`,
-        }),
-      })
-      const wmts2 = new layer.Tile({
-        source: new source.XYZ({
-          projection: "EPSG:4326",
-          url: `http://59.212.37.22/mapserver/vmap/hn_bigdata_2018dt/getMAP?x={x}&y={y}&l={z}&styleId=hn_bigdata_2018dtys1&ratio=1&tilesize=256&clientVersion=jssdk_bate@%20leaflet%202.1.5`,
-        }),
-        // extent: [109.04065590655215,18.651584245734945,110.3178165510834,19.541476823859945]
-      })
-      const wmts3 = new layer.Tile({
-        source: new source.XYZ({
-          projection: "EPSG:4326",
-          url: `http://59.255.48.160:81/cva_c/wmts?tk=您的密钥&service=WMTS&request=GetTile&version=1.0.0&layers=&styles=&tilematrixSet=c&format=tiles&height=256&width=256&layer=cva&style=default&zIndex=1&tilematrix={z}&tilerow={y}&tilecol={x}`,
-        }),
-      })
-      state.map.addLayer(wmts)
-      // state.map.addLayer(wmts2)
-      state.map.addLayer(wmts3)
     }
     const menuCpt = computed(() => {
       return router.options.routes.filter(v => v.name === store.state.gis.menuRootName)[0].children
     })
+    const searchHandleMapSearch = (queryString: string, cb: (arg: any) => void) => {
+      if (queryString.trim()) {
+        const arr = [
+          {name: 123},
+          {name: 123},
+          {name: 123},
+          {name: 123},
+          {name: 123},
+          {name: 123},
+        ]
+        // if (state.showBayonet) {
+        //   state.searchAllList.bayonet.forEach(v => {
+        //     if (v.name?.includes(queryString)) {
+        //       arr.push(v)
+        //     }
+        //   })
+        // }
+        // if (state.showVideo) {
+        //   state.searchAllList.video.forEach(v => {
+        //     if (v.name?.includes(queryString)) {
+        //       arr.push(v)
+        //     }
+        //   })
+        // }
+        // if (state.showElement) {
+        //   state.searchAllList.element.forEach(v => {
+        //     if (v.name?.includes(queryString)) {
+        //       arr.push(v)
+        //     }
+        //   })
+        // }
+        cb(arr)
+      } else {
+        cb([])
+      }
+    }
+    const searchToMapLocation = (val) => {
+      state.searchInput = val.name
+      // if (val.source === 'element') {
+      //   state.elementFilter.forEach(l => {
+      //     l.list.forEach(v => {
+      //       if (v.value === val.elementType) {
+      //         v.active = true
+      //       }
+      //     })
+      //   })
+      // }
+      // positionSwitchGeom(val.geomType, val.coordinates, true, val.source)
+    }
+    const toolsHandleClick = (item) => {
+      if (item.value === 'clear') {
+
+      } else {
+        state.toolsCom = item.com
+        state.toolsType = (state.toolsType === item.value ? '' : item.value)
+      }
+    }
     onMounted(() => {
     })
     return {
       ...toRefs(state),
       mapLoad,
-      menuCpt
+      ToolsMapper,
+      ref_search,
+      menuCpt,
+      searchHandleMapSearch,
+      searchToMapLocation,
+      toolsHandleClick,
     }
   },
 })
@@ -167,7 +220,7 @@ export default defineComponent({
     bottom: $menuBottom;
     display: flex;
     justify-content: center;
-    //align-items: center;
+    align-items: center;
     &:before, &:after {
       content: '';
       background-image: url("@/assets/images/gis-layout/gis-layout-menu_side.png");
@@ -218,9 +271,109 @@ export default defineComponent({
       }
     }
   }
-  .gis-content {
+  .gis-tools {
     position: absolute;
     z-index: 3;
+    top: 10px;
+    right: 10px;
+    width: 404px;
+    >div {
+      box-sizing: border-box;
+    }
+    .gt-search {
+      height: 38px;
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .search-icon {
+        width: 54px;
+        height: 100%;
+        background-color: #3e8ef7;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+      }
+      :deep(.el-autocomplete) {
+        flex: 1;
+        height: 100%;
+        .el-input {
+          width: 100%;
+          height: 100%;
+          .el-input__wrapper {
+            border-radius: 0;
+          }
+        }
+      }
+      :deep(.el-autocomplete__popper) {
+        opacity: 0.9;
+        background-image: linear-gradient(45deg,transparent 10px,#101D69 10px), linear-gradient(-135deg,transparent 10px,#101D69 10px);
+        border: none;
+        .el-popper__arrow::before {
+          background: #101D69;
+          border-color: #101D69;
+        }
+        .el-autocomplete-suggestion {
+          .el-scrollbar {
+            .el-autocomplete-suggestion__wrap {
+              .el-scrollbar__view {
+                >li {
+                  &:hover {
+                    background-color: rgba(59,84,172,0.5);
+                  }
+                  .search-item {
+                    display: flex;
+                    align-items: center;
+                    justify-content: flex-start;
+                    >img {
+                      margin-right: 6px;
+                      width: 16px;
+                      height: 16px;
+                    }
+                    .name {
+                      color: #ffffff;
+                    }
+                  }
+                }
+              }
+            }
+          }
+        }
+      }
+    }
+    .gt-tools {
+      width: 100%;
+      height: 38px;
+      margin-top: 2px;
+      background-color: #FFFFFF;
+      border: 1px solid #C7CFDE;
+      display: flex;
+      align-items: center;
+      justify-content: space-around;
+      padding: 0 8px;
+      .tools-item {
+        font-size: 14px;
+        font-family: Microsoft YaHei;
+        font-weight: 400;
+        color: #AEAEAE;
+        &.active {
+          color: #1174DB;
+          font-weight: bold;
+        }
+      }
+      .tools-line {
+        width: 1px;
+        height: 16px;
+        background: linear-gradient(0deg, rgba(174,174,174,0) 0%, rgba(213,213,213,0.99) 50%, rgba(174,174,174,0) 100%);
+      }
+    }
+    .gt-tools-component {
+      width: 100%;
+      margin-top: 2px;
+    }
+  }
+  .gis-content {
+    position: absolute;
+    z-index: 4;
     top: 0;
     left: 0;
   }

src/views/gis/layout/tools/analysis.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="analysis-com">
+    周边分析
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/layout/tools/base.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="base-com">
+    底图
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/layout/tools/element.vue

@@ -0,0 +1,185 @@
+<template>
+  <div class="element-com __box-shadow">
+    <div class="all">
+      <div class="check __hover" @click="switchListActive(isSelectAllCpt ? false : true)">
+        <div class="__check" :class="{active: isSelectAllCpt}"/>全选
+      </div>
+    </div>
+    <div class="list">
+      <template v-for="item in list">
+        <div class="check __hover" @click="switchItemActive(item)">
+          <div class="__check" :class="{active: item.active}"/>{{item.label}}
+        </div>
+        <template v-if="item.children?.length > 0">
+          <template v-for="son in item.children">
+            <div class="check __hover" style="margin-left: 30px;" @click="switchItemActive(son)">
+              <div class="__check" :class="{active: son.active}"/>{{son.label}}
+            </div>
+          </template>
+        </template>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({
+      list: <any>[
+        {
+          label: '处置力量',
+          active: false,
+          children: [
+            {label: '海岸警察', value: 'hajc', active: false},
+            {label: '缉私警', value: 'jsj', active: false},
+            {label: '网格员', value: 'wgy', active: false},
+          ]
+        },
+        {
+          label: '危险车辆', value: 'wxcl', active: true
+        },
+        {
+          label: '设备资源',
+          active: true,
+          children: [
+            {label: '公安类设备', value: 'galsb', active: true},
+            {label: '社会类设备', value: 'shlsb', active: true},
+            {label: '民用类设备', value: 'mylsb', active: true},
+          ]
+        },
+        {
+          label: '企业',
+          active: false,
+          children: [
+            {label: '零关税自用进口生产设备', value: 'lgszyjkscsb', active: false},
+            {label: '加工增值免关税', value: 'jgzzmgs', active: false},
+            {label: '零关税进口原辅料', value: 'lgsjkyfl', active: false},
+          ]
+        },
+        {
+          label: '景区', value: 'jq', active: false
+        },
+        {
+          label: '旅馆', value: 'lg', active: false
+        },
+        {
+          label: '出租屋', value: 'czw', active: false
+        },
+        {
+          label: '火车站', value: 'hcz', active: false
+        },
+      ]
+    })
+    const isSelectAllCpt = computed(() => {
+      let flag = true
+      state.list.forEach(p => {
+        if (!p.active) {
+          flag = false
+        }
+        p.children?.forEach(s => {
+          if (!s.active) {
+            flag = false
+          }
+        })
+      })
+      return flag
+    })
+    const switchListActive = (flag) => {
+      state.list.forEach(p => {
+        p.active = flag
+        p.children?.forEach(s => {
+          s.active = flag
+        })
+      })
+    }
+    const switchItemActive = (item) => {
+      state.list.forEach(p => {
+        if (`${p.label}_${p.value}` === `${item.label}_${item.value}`) {
+          p.active = !p.active
+          p.children?.forEach(v => {
+            v.active = p.active
+          })
+        }
+        p.children?.forEach(s => {
+          if (`${s.label}_${s.value}` === `${item.label}_${item.value}`) {
+            s.active = !s.active
+            p.active = p.children.every(v => v.active)
+          }
+        })
+      })
+    }
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+      isSelectAllCpt,
+      switchListActive,
+      switchItemActive
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+.check {
+  display: flex;
+  align-items: center;
+  font-size: 16px;
+  font-family: Microsoft YaHei;
+  font-weight: 400;
+  color: #4C4C4C;
+  height: 30px;
+  .__check {
+    margin-right: 12px;
+  }
+}
+
+.element-com {
+  position: fixed;
+  width: 404px;
+  height: calc(100% - 100px);
+  background-color: #FFFFFF;
+  padding: 10px 12px 10px 28px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  .all {
+    margin-left: auto;
+  }
+  .list {
+    flex: 1;
+    overflow-y: auto;
+  }
+}
+</style>

src/views/gis/layout/tools/example.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="example-com">
+    图例
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/layout/tools/position.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="position-com">
+    定位
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/layout/tools/select.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="select-com">
+    框选
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>

src/views/gis/layout/tools/tool.vue

@@ -0,0 +1,51 @@
+<template>
+  <div class="tool-com">
+    工具
+  </div>
+</template>
+
+<script lang="ts">
+import {
+  defineComponent,
+  computed,
+  onMounted,
+  ref,
+  reactive,
+  watch,
+  getCurrentInstance,
+  ComponentInternalInstance,
+  toRefs,
+  nextTick
+} from 'vue'
+import {useStore} from 'vuex'
+import {useRouter, useRoute} from 'vue-router'
+import {ElMessage, ElMessageBox} from "element-plus";
+
+export default defineComponent({
+  name: '',
+  components: {},
+  props: {
+    map: {
+      required: true
+    },
+    mapFunc: {
+      required: true
+    }
+  },
+  setup(props, {emit}) {
+    const store = useStore();
+    const router = useRouter();
+    const route = useRoute();
+    const that = (getCurrentInstance() as ComponentInternalInstance).appContext.config.globalProperties
+    const state = reactive({})
+    onMounted(() => {
+    })
+    return {
+      ...toRefs(state),
+    }
+  },
+})
+</script>
+
+<style scoped lang="scss">
+</style>