Home Explore Help
Sign In
xuyunhui
/
E-commerce
1
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

feat: 嵌入地图

wll8 5 months ago
parent
5271a3b239
commit
843858e92b
12 changed files with 438 additions and 186 deletions
Unified View Show Diff Stats
  1. 1 0
      .eslintrc.js
  2. 5 0
      README.md
  3. 31 0
      index.html
  4. 54 0
      index2.html
  5. 1 0
      package.json
  6. 23 0
      src/assets/styles/common.less
  7. 143 131
      src/components/bgBox/index.vue
  8. 1 1
      src/config.js
  9. 1 0
      src/main.js
  10. 138 5
      src/views/page2/index.vue
  11. 16 49
      src/views/page3/index.vue
  12. 24 0
      yarn.lock

+ 1 - 0
.eslintrc.js
View File 

@@ -2,6 +2,7 @@ module.exports = {
 
   "root": true,
 
   "root": true,
 
   "globals": {
 
   "globals": {
 
     echarts: true,
 
     echarts: true,
 
+    AMap: true,
 
   },
 
   },
 
   "env": {
 
   "env": {
 
     "node": true
 
     "node": true

+ 5 - 0
README.md
View File 

@@ -97,6 +97,11 @@ yarn build
 
   - https://icon-sets.iconify.design/?query=weather
 
   - https://icon-sets.iconify.design/?query=weather
 
 - 天气
 
 - 天气
 
   - https://lbs.amap.com/api/webservice/guide/api/weatherinfo
 
   - https://lbs.amap.com/api/webservice/guide/api/weatherinfo
 
+- 地图引入
 
+  - https://lbs.amap.com/api/javascript-api-v2/guide/abc/amap-vue
 
+  - https://lbs.amap.com/demo/list/js-api-v2
 
+  - 坐标获取 https://lbs.gaode.com/console/show/picker
 
+  - https://lbs.amap.com/demo/loca-api/demos/districtlayer/loca_dist_getstatus
 
 
 
 - [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-prev-section)
 
 - [（上）Vue+Echarts构建可视化大数据平台实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-prev-section)
 
 - [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-next-section)
 
 - [（下）Vue+Echarts构建大数据可视化酷炫展示公司品牌实战项目分享](https://54web3.cc/blog/induction-tutorial/vue-echarts-next-section)

File diff suppressed because it is too large
+ 31 - 0
index.html


+ 54 - 0
index2.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="zh-CN">
 
+<head>
 
+    <meta charset="utf-8">
 
+    <title>鼠标穿透示例</title>
 
+    <style>
 
+        body {
 
+            margin: 0;
 
+            height: 100vh;
 
+            background-color: #f0f0f0;
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+        }
 
+        .container {
 
+            position: relative;
 
+            width: 300px;
 
+            height: 300px;
 
+            background-color: rgba(0, 150, 255, 0.5); /* 半透明 */
 
+            display: flex;
 
+            justify-content: center;
 
+            align-items: center;
 
+            color: white;
 
+            font-size: 24px;
 
+            text-align: center;
 
+        }
 
+        .transparent-area {
 
+            position: absolute;
 
+            top: 20px;  /* 设置透明区域的顶部位置 */
 
+            left: 20px; /* 设置透明区域的左边位置 */
 
+            width: 100px; /* 设置透明区域宽度 */
 
+            height: 100px; /* 设置透明区域高度 */
 
+            background-color: transparent; /* 透明度 */
 
+            pointer-events: none; /* 允许鼠标事件穿透 */
 
+        }
 
+        .underlying {
 
+            position: absolute;
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: orange;
 
+            top: 100px;
 
+            left: 100px;
 
+            z-index: -1; /* 确保位于底层 */
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+    <div class="container">
 
+        <div>鼠标穿透示例</div>
 
+        <div class="transparent-area"></div> <!-- 允许鼠标穿透的区域 -->
 
+        <div class="underlying"></div> <!-- 背后的元素 -->
 
+    </div>
 
+</body>
 
+</html>

+ 1 - 0
package.json
View File 

@@ -11,6 +11,7 @@
 
     "lint": "vue-cli-service lint"
 
     "lint": "vue-cli-service lint"
 
   },
 
   },
 
   "dependencies": {
 
   "dependencies": {
 
+    "@amap/amap-jsapi-loader": "^1.0.1",
 
     "axios": "^1.7.7",
 
     "axios": "^1.7.7",
 
     "core-js": "^3.6.4",
 
     "core-js": "^3.6.4",
 
     "dayjs": "^1.11.13",
 
     "dayjs": "^1.11.13",

+ 23 - 0
src/assets/styles/common.less
View File 

@@ -0,0 +1,23 @@
 
+.g-bg1 {
 
+  background-image: url('~@/assets/img2/综合总览/编组 16.png'),
 
+    url('~@/assets/img2/综合总览/背景左线条.png'),
 
+    url('~@/assets/img2/综合总览/背景线条上.png'),
 
+    url('~@/assets/img2/综合总览/背景.png');
 
+  background-position: right 10px bottom 10px, 10px center,
 
+    left 510px top 13px, center;
 
+  background-size: auto;
 
+  background-repeat: no-repeat;
 
+  width: 1920px;
 
+  height: 1080px;
 
+}
 
+.g-bg2 {
 
+  background-image: url('~@/assets/img2/综合总览/编组 16.png'),
 
+  url('~@/assets/img2/综合总览/背景左线条.png'),
 
+  url('~@/assets/img2/综合总览/背景线条上.png');
 
+  background-position: right 10px bottom 10px, 10px center,
 
+    left 510px top 13px;
 
+  background-size: auto;
 
+  background-repeat: no-repeat;
 
+  width: 1920px;
 
+  height: 1080px;
 
+}

+ 143 - 131
src/components/bgBox/index.vue
View File 

@@ -1,61 +1,58 @@
 
 <template>
 
 <template>
 
   <div class="container-box" ref="editor">
 
   <div class="container-box" ref="editor">
 
-    <div class="box">
 
-      <div class="top">
 
-        <div class="logo">
 
-          <div>
 
-            <img
 
-              src="@/assets/img2/综合总览/编组.png"
 
-              alt=""
 
-              class="mt-20px ml-36px"
 
-            />
 
-          </div>
 
-          <div>
 
-            <img
 
-              src="@/assets/img2/综合总览/编组 23备份.png"
 
-              alt=""
 
-              class="ml-36px"
 
-            />
 
-          </div>
 
+    <div class="top">
 
+      <div class="logo">
 
+        <div>
 
+          <img
 
+            src="@/assets/img2/综合总览/编组.png"
 
+            alt=""
 
+            class="mt-20px ml-36px"
 
+          />
 
         </div>
 
         </div>
 
-        <div class="tabsBox mt-36px ml-50px">
 
-          <div class="tabs">
 
-            <div
 
-              :class="[`tab-item`, { cur: index === tabs.index }]"
 
-              :key="item"
 
-              @click="tabs.index = index"
 
-              v-for="(item, index) in tabs.list"
 
-            >
 
-              {{ item }}
 
-            </div>
 
-          </div>
 
+        <div>
 
+          <img
 
+            src="@/assets/img2/综合总览/编组 23备份.png"
 
+            alt=""
 
+            class="ml-36px"
 
+          />
 
         </div>
 
         </div>
 
-        <div class="tipsBox">
 
-          <div class="dateBox center">
 
-            <div class="time font-size-22px">{{ dateBox.time }}</div>
 
-            <div class="date font-size-16px">{{ dateBox.date }}</div>
 
-          </div>
 
-          <div class="line"></div>
 
-          <div class="weather">
 
-            <i :class="[`iconfont`, weather.天气图标]"></i>
 
-          </div>
 
-          <div class="temperature">
 
-            <img
 
-              class="pl-20px"
 
-              src="@/assets/img2/综合总览/编组 6.png"
 
-              alt=""
 
-            />
 
-            <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
 
-            <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
 
-          </div>
 
-          <div class="line"></div>
 
-          <div class="headPortrait">
 
-            <img src="https://httpbin.org/image/png" class="w-44px" alt="" />
 
+      </div>
 
+      <div class="tabsBox mt-36px ml-50px">
 
+        <div class="tabs">
 
+          <div
 
+            :class="[`tab-item`, { cur: index === tabs.index }]"
 
+            :key="item"
 
+            @click="tabs.index = index"
 
+            v-for="(item, index) in tabs.list"
 
+          >
 
+            {{ item }}
 
           </div>
 
           </div>
 
         </div>
 
         </div>
 
       </div>
 
       </div>
 
+      <div class="tipsBox">
 
+        <div class="dateBox center">
 
+          <div class="time font-size-22px">{{ dateBox.time }}</div>
 
+          <div class="date font-size-16px">{{ dateBox.date }}</div>
 
+        </div>
 
+        <div class="line"></div>
 
+        <div class="weather">
 
+          <i :class="[`iconfont`, weather.天气图标]"></i>
 
+        </div>
 
+        <div class="temperature">
 
+          <img class="pl-20px" src="@/assets/img2/综合总览/编组 6.png" alt="" />
 
+          <span class="font-size-30px pl-20px">{{ weather.温度 }}</span>
 
+          <img src="@/assets/img2/综合总览/编组 8.png" alt="" />
 
+        </div>
 
+        <div class="line"></div>
 
+        <div class="headPortrait">
 
+          <img src="https://httpbin.org/image/png" class="w-44px" alt="" />
 
+        </div>
 
+      </div>
 
+    </div>
 
+    <div class="box">
 
       <slot>内容区</slot>
 
       <slot>内容区</slot>
 
     </div>
 
     </div>
 
+    <div :class="[`bg`, bgType]"></div>
 
   </div>
 
   </div>
 
 </template>
 
 </template>
 
 
 
@@ -126,7 +123,7 @@ export default {
 
   data() {
 
   data() {
 
     return {
 
     return {
 
       tabs: {
 
       tabs: {
 
-        index: 0,
 
+        index: this.$props.tabIndex,
 
         list: [`综合总览`, `移栽分析`],
 
         list: [`综合总览`, `移栽分析`],
 
       },
 
       },
 
       dateBox: {
 
       dateBox: {
 
@@ -140,14 +137,28 @@ export default {
 
       },
 
       },
 
     }
 
     }
 
   },
 
   },
 
-  props: [`tabChange`],
 
+  props: {
 
+    tabChange: {
 
+      type: Function,
 
+      default: undefined,
 
+    },
 
+    tabIndex: {
 
+      type: Number,
 
+      default: 0,
 
+    },
 
+    bgType: {
 
+      type: String,
 
+      default: `g-bg1`,
 
+    },
 
+  },
 
   watch: {
 
   watch: {
 
     'tabs.index'(val) {
 
     'tabs.index'(val) {
 
       this.tabChange && this.tabChange(val)
 
       this.tabChange && this.tabChange(val)
 
     },
 
     },
 
   },
 
   },
 
   computed: {},
 
   computed: {},
 
-  async created() {
 
+  created() {
 
+    console.log(`进入了`)
 
     apiList.forEach((item) => {
 
     apiList.forEach((item) => {
 
       this.$bus.$on(item.key, (data) => {
 
       this.$bus.$on(item.key, (data) => {
 
         item.fn.call(this, data)
 
         item.fn.call(this, data)
 
@@ -159,6 +170,7 @@ export default {
 
   },
 
   },
 
   beforeDestroy() {
 
   beforeDestroy() {
 
     apiList.forEach((item) => {
 
     apiList.forEach((item) => {
 
+      console.log(`销毁了`, item.key)
 
       this.$bus.$off(item.key)
 
       this.$bus.$off(item.key)
 
     })
 
     })
 
   },
 
   },
 
@@ -169,99 +181,99 @@ export default {
 
 <style lang="less" scoped>
 
 <style lang="less" scoped>
 
 .container-box {
 
 .container-box {
 
   transform-origin: 0 0 0;
 
   transform-origin: 0 0 0;
 
-  background-image: url('~@/assets/img2/综合总览/编组 16.png'),
 
-    url('~@/assets/img2/综合总览/背景左线条.png'),
 
-    url('~@/assets/img2/综合总览/背景线条上.png'),
 
-    url('~@/assets/img2/综合总览/背景.png');
 
-  background-position: right 10px bottom 10px, 10px center, left 510px top 13px,
 
-    center;
 
-  background-size: auto;
 
-  background-repeat: no-repeat;
 
-  width: 1920px;
 
-  height: 1080px;
 
+  position: relative;
 
   color: #fff;
 
   color: #fff;
 
   font-family: PingFang SC, PingFang SC-Regular;
 
   font-family: PingFang SC, PingFang SC-Regular;
 
-  & > .box {
 
-    padding: 10px;
 
-    .top {
 
+  .top {
 
+    position: absolute;
 
+    display: flex;
 
+    width: 100%;
 
+    .line {
 
+      width: 0px;
 
+      height: 41px;
 
+      margin: 0 20px;
 
+      border: 1px solid rgba(255, 255, 255, 0.3);
 
+    }
 
+    .tabs {
 
+      font-size: 25px;
 
+      text-align: center;
 
       display: flex;
 
       display: flex;
 
-      .line {
 
-        width: 0px;
 
-        height: 41px;
 
-        margin: 0 20px;
 
-        border: 1px solid rgba(255, 255, 255, 0.3);
 
-      }
 
-      .tabs {
 
-        font-size: 25px;
 
-        text-align: center;
 
-        display: flex;
 
-        background-image: url('~@/assets/img2/综合总览/编组 9.png');
 
-        background-repeat: no-repeat;
 
-        background-position: center bottom;
 
-        width: 766px;
 
-        .tab-item {
 
-          line-height: 56px;
 
-          margin-right: 32px;
 
-          color: rgba(255, 255, 255, 0.6);
 
-          position: relative;
 
-          cursor: pointer;
 
-          &.cur {
 
-            color: #fbfdff;
 
-            &::before {
 
-              content: '';
 
-              display: block;
 
-              position: absolute;
 
-              width: 100%;
 
-              height: 4px;
 
-              background: linear-gradient(333deg, #158d8c 11%, #29f0f0 90%);
 
-              bottom: 0px;
 
-            }
 
-          }
 
-          &:first-child {
 
-            margin-left: 40px;
 
-          }
 
-          &:not(:last-child)::after {
 
+      background-image: url('~@/assets/img2/综合总览/编组 9.png');
 
+      background-repeat: no-repeat;
 
+      background-position: center bottom;
 
+      width: 766px;
 
+      .tab-item {
 
+        line-height: 56px;
 
+        margin-right: 32px;
 
+        color: rgba(255, 255, 255, 0.6);
 
+        position: relative;
 
+        cursor: pointer;
 
+        &.cur {
 
+          color: #fbfdff;
 
+          &::before {
 
             content: '';
 
             content: '';
 
             display: block;
 
             display: block;
 
-            width: 2px;
 
-            height: 25px;
 
-            background-color: rgba(255, 255, 255, 0.3);
 
             position: absolute;
 
             position: absolute;
 
-            top: 28%;
 
-            right: -16px;
 
+            width: 100%;
 
+            height: 4px;
 
+            background: linear-gradient(333deg, #158d8c 11%, #29f0f0 90%);
 
+            bottom: 0px;
 
           }
 
           }
 
         }
 
         }
 
-      }
 
-      .tipsBox {
 
-        display: flex;
 
-        align-items: center;
 
-        justify-content: flex-end;
 
-        width: 100%;
 
-        padding-right: 77px;
 
-        .dateBox {
 
-          .date {
 
-            color: rgba(255, 255, 255, 0.6);
 
-          }
 
+        &:first-child {
 
+          margin-left: 40px;
 
         }
 
         }
 
-        .weather {
 
-          i {
 
-            font-size: 44px;
 
-          }
 
+        &:not(:last-child)::after {
 
+          content: '';
 
+          display: block;
 
+          width: 2px;
 
+          height: 25px;
 
+          background-color: rgba(255, 255, 255, 0.3);
 
+          position: absolute;
 
+          top: 28%;
 
+          right: -16px;
 
         }
 
         }
 
-        .temperature {
 
-          // img {
 
-          //   padding: 0 20px;
 
-          // }
 
+      }
 
+    }
 
+    .tipsBox {
 
+      display: flex;
 
+      align-items: center;
 
+      justify-content: flex-end;
 
+      width: 100%;
 
+      padding-right: 77px;
 
+      .dateBox {
 
+        .date {
 
+          color: rgba(255, 255, 255, 0.6);
 
         }
 
         }
 
-        .headPortrait {
 
-          width: 44px;
 
-          height: 44px;
 
-          border-radius: 50%;
 
-          overflow: hidden;
 
-          cursor: pointer;
 
+      }
 
+      .weather {
 
+        i {
 
+          font-size: 44px;
 
         }
 
         }
 
       }
 
       }
 
+      .temperature {
 
+        // img {
 
+        //   padding: 0 20px;
 
+        // }
 
+      }
 
+      .headPortrait {
 
+        width: 44px;
 
+        height: 44px;
 
+        border-radius: 50%;
 
+        overflow: hidden;
 
+        cursor: pointer;
 
+      }
 
     }
 
     }
 
   }
 
   }
 
+  .bg {
 
+    pointer-events: none;
 
+  }
 
+  & > .box {
 
+    position: absolute;
 
+    top: 90px;
 
+    width: 100%;
 
+    box-sizing: border-box;
 
+    padding: 40px;
 
+  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 1 - 1
src/config.js
View File 

@@ -1,6 +1,6 @@
 
 export default {
 
 export default {
 
   development: {
 
   development: {
 
-    baseApi: `http://localhost:8100`,
 
+    baseApi: `http://127.0.0.1:8100`,
 
   },
 
   },
 
   prod: {
 
   prod: {
 
     baseApi: `http://127.0.0.1:8100`,
 
     baseApi: `http://127.0.0.1:8100`,

+ 1 - 0
src/main.js
View File 

@@ -10,6 +10,7 @@ import Toast from './components/toast'
 
 
 
 import '@/assets/styles/base.scss'
 
 import '@/assets/styles/base.scss'
 
 import '@/assets/styles/common.scss'
 
 import '@/assets/styles/common.scss'
 
+import '@/assets/styles/common.less'
 
 import '@/assets/iconfont/iconfont.css'
 
 import '@/assets/iconfont/iconfont.css'
 
 import '@/assets/icon2/font/iconfont.css'
 
 import '@/assets/icon2/font/iconfont.css'

+ 138 - 5
src/views/page2/index.vue
View File 

@@ -1,11 +1,16 @@
 
 <template>
 
 <template>
 
-  <bgBox :tabChange="tabChange">
 
-    <div>hello</div>
 
-  </bgBox>
 
+  <div>
 
+    <bgBox class="bgBox" bgType="g-bg2" :tabChange="tabChange" :tabIndex="1">
 
+      <div id="container" class="g-bg1"></div>
 
+    </bgBox>
 
+  </div>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
 import bgBox from '@/components/bgBox/index.vue'
 
 import bgBox from '@/components/bgBox/index.vue'
 
+import AMapLoader from '@amap/amap-jsapi-loader'
 
+
 
+window.map = {}
 
 
 
 export default {
 
 export default {
 
   components: {
 
   components: {
 
@@ -16,9 +21,102 @@ export default {
 
   },
 
   },
 
   computed: {},
 
   computed: {},
 
   async created() {},
 
   async created() {},
 
-  mounted() {},
 
+  mounted() {
 
+    this.initAMap()
 
+  },
 
+  unmounted() {
 
+    window.map.destroy()
 
+  },
 
   methods: {
 
   methods: {
 
+    async initAMap() {
 
+      const json = await this.$http.get(
 
+        `https://geo.datav.aliyun.com/areas_v3/bound/geojson?code=520600_full`
 
+      )
 
+      window._AMapSecurityConfig = {
 
+        securityJsCode: `a2017cdc059be6c03b430a3185098003`,
 
+      }
 
+      AMapLoader.load({
 
+        key: `6260c9b9128ad802001c8a5ff18bde16`, // 申请好的Web端开发者Key，首次调用 load 时必填
 
+        version: `2.0`, // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
 
+        plugins: [`AMap.Scale`], // 需要使用的的插件列表，如比例尺'AMap.Scale'，支持添加多个如：['...','...']
 
+      })
 
+        .then((AMap) => {
 
+          let content = [
 
+            `<div class='info_box_contant'> ` + `vo.aname` + ` </div>`,
 
+          ]
 
+          function addPolygon(data) {
 
+            const { name, center } = data.properties
 
+            const path = data.geometry.coordinates
 
+            let polygon = new AMap.Polygon({
 
+              path: path,
 
+              fillColor: `#ccebc5`,
 
+              strokeOpacity: 1,
 
+              fillOpacity: 0,
 
+              strokeColor: `#2b8cbe`,
 
+              strokeWeight: 4,
 
+              // strokeStyle: `dashed`,
 
+              strokeDasharray: [5, 5],
 
+              lineJoin: `round`,
 
+              lineCap: `round`,
 
+            })
 
+            polygon.on(`mouseover`, (e) => {
 
+              console.log(`mouseover`)
 
+              // 如果缩放过大还变色, 万一人家是想看放大后的详细地点, 变色后反而不方便
 
+              if (window.map.getZoom() <= 11) {
 
+                // infoWindow.open(window.map, [e.lnglat.lng, e.lnglat.lat]) // 后面的参数指的是经纬度，在此显示窗口
 
+                infoWindow.open(window.map, center) // 后面的参数指的是经纬度，在此显示窗口
 
+                polygon.setOptions({
 
+                  fillOpacity: 0.7,
 
+                  fillColor: `#7bccc4`,
 
+                })
 
+              }
 
+            })
 
+            polygon.on(`click`, (e) => {
 
+              console.log(`点击了`, data.properties)
 
+            })
 
+            polygon.on(`mouseout`, () => {
 
+              polygon.setOptions({
 
+                fillOpacity: 0,
 
+                fillColor: `#ccebc5`,
 
+              })
 
+              infoWindow.close()
 
+            })
 
+            window.map.add(polygon)
 
+          }
 
+          const infoWindow = new AMap.InfoWindow({
 
+            isCustom: true, // 使用自定义窗体
 
+            content: content.join(`<br>`),
 
+            offset: new AMap.Pixel(-15, -25),
 
+          })
 
+          window.map = new AMap.Map(`container`, {
 
+            // resizeEnable: true,
 
+            // 设置地图容器id
 
+            // viewMode: `2D`, // 2D视图
 
+            // mapStyle: `amap://styles/whitesmoke`, // 卫星地图样式
 
+            viewMode: `3D`, // 是否为3D地图模式
 
+            // zoom: 7, // 初始化地图级别
 
+            zoom: 9.22, // 初始化地图级别
 
+            // center: [107.943579, 30.131735], // 初始化地图中心点位置
 
+            center: [108.597461, 28.047503], // 初始化地图中心点位置
 
+            layers: [
 
+              new AMap.TileLayer.Satellite(),
 
+              new AMap.TileLayer.RoadNet(),
 
+            ],
 
+          })
 
+          window.map.setFeatures([`point`]) // 单一种类要素显示
 
+          let list = json.features.map((item) => item)
 
+          list.forEach((item) => {
 
+            addPolygon(item)
 
+          })
 
+        })
 
+        .catch((e) => {
 
+          console.log(e)
 
+        })
 
+    },
 
     tabChange(val) {
 
     tabChange(val) {
 
+      if (val === 0) {
 
+        this.$router.push(`/page1`)
 
+      }
 
       console.log(`val`, val)
 
       console.log(`val`, val)
 
     },
 
     },
 
   },
 
   },
 
@@ -26,6 +124,41 @@ export default {
 
 </script>
 
 </script>
 
 
 
 <style lang="less" scoped>
 
 <style lang="less" scoped>
 
-.box {
 
+#container {
 
+  position: absolute;
 
+  padding: 0px;
 
+  margin: 0px;
 
+  width: 100vw;
 
+  height: 100vh;
 
+  z-index: 8;
 
+
 
+  &::after {
 
+    content: '';
 
+    display: block;
 
+    width: 100%;
 
+    height: 100%;
 
+    position: absolute;
 
+    z-index: 9;
 
+    background: radial-gradient(transparent 80vh, rgba(0, 0, 0, 1));
 
+    pointer-events: none;
 
+  }
 
+}
 
+.bgBox {
 
+  ::v-deep {
 
+    .top {
 
+      z-index: 10;
 
+    }
 
+    .box {
 
+      background-color: #f00;
 
+      left: 0;
 
+      top: 0;
 
+      padding: 0;
 
+      z-index: 9;
 
+    }
 
+    .bg {
 
+      position: absolute;
 
+      z-index: 9;
 
+    }
 
+  }
 
 }
 
 }
 
 </style>
 
 </style>

+ 16 - 49
src/views/page3/index.vue
View File 

@@ -1,66 +1,33 @@
 
 <template>
 
 <template>
 
-  <div class="home-container">
 
-    <div class="wrap" ref="editor">
 
-      <div class="top"></div>
 
-      <div class="box">一些内容</div>
 
-    </div>
 
-  </div>
 
+  <bgBox :tabChange="tabChange">
 
+    <div class="myBox">内容</div>
 
+  </bgBox>
 
 </template>
 
 </template>
 
 
 
 <script>
 
 <script>
 
-import { screenSize } from '@/assets/js/utils'
 
+import bgBox from '@/components/bgBox/index.vue'
 
 
 
 export default {
 
 export default {
 
-  name: `Home`,
 
-  components: {},
 
+  components: {
 
+    bgBox,
 
+  },
 
   data() {
 
   data() {
 
     return {}
 
     return {}
 
   },
 
   },
 
   computed: {},
 
   computed: {},
 
-  created() {},
 
-  mounted() {
 
-    screenSize(this.$refs.editor)
 
+  async created() {},
 
+  mounted() {},
 
+  methods: {
 
+    tabChange(val) {
 
+      console.log(`val`, val)
 
+    },
 
   },
 
   },
 
-  methods: {},
 
 }
 
 }
 
 </script>
 
 </script>
 
 
 
 <style lang="less" scoped>
 
 <style lang="less" scoped>
 
-.home-container {
 
-  position: absolute;
 
-  left: 0;
 
-  top: 0;
 
-  width: 100%;
 
-  height: 100%;
 
-  .wrap {
 
-    transform-origin: 0px 0px 0px;
 
-    background: url(../../assets/img/bj.jpg) no-repeat;
 
-    background-size: contain;
 
-    background-position: 50% 0;
 
-    background-color: rgb(0, 0, 0);
 
-    min-width: auto;
 
-    width: 1920px;
 
-    min-height: auto;
 
-    height: 1080px;
 
-    overflow: auto;
 
-    .top {
 
-      position: absolute;
 
-      left: 0;
 
-      top: 0;
 
-      width: 100%;
 
-      height: 80px;
 
-      background-color: transparent;
 
-      background: url(../../assets/img/top_nav.png) no-repeat;
 
-      background-position: 65% 0;
 
-      border: none;
 
-      overflow: hidden;
 
-    }
 
-    .box {
 
-      color: #fff;
 
-      line-height: 100vh;
 
-      text-align: center;
 
-      font-size: 40px;
 
-    }
 
-  }
 
+.myBox {
 
+  background: #f00;
 
+  cursor: pointer;
 
 }
 
 }
 
 </style>
 
 </style>

+ 24 - 0
yarn.lock
View File 

@@ -20,6 +20,11 @@
 
     event-pubsub "4.3.0"

     event-pubsub "4.3.0"

     js-message "1.0.7"

     js-message "1.0.7"

 

 

+"@amap/amap-jsapi-loader@^1.0.1":

+  version "1.0.1"

+  resolved "https://registry.npmmirror.com/@amap/amap-jsapi-loader/-/amap-jsapi-loader-1.0.1.tgz#9ec4b4d5d2467eac451f6c852e35db69e9f9f0c0"

+  integrity sha512-nPyLKt7Ow/ThHLkSvn2etQlUzqxmTVgK7bIgwdBRTg2HK5668oN7xVxkaiRe3YZEzGzfV2XgH5Jmu2T73ljejw==

+

 "@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":

 "@ampproject/remapping@^2.2.0", "@ampproject/remapping@^2.2.1":

   version "2.3.0"

   version "2.3.0"

   resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"

   resolved "https://registry.npmmirror.com/@ampproject/remapping/-/remapping-2.3.0.tgz#ed441b6fa600072520ce18b43d2c8cc8caecc7f4"

@@ -3472,6 +3477,11 @@ camelcase-keys@^2.0.0:
 
     camelcase "^2.0.0"

     camelcase "^2.0.0"

     map-obj "^1.0.0"

     map-obj "^1.0.0"

 

 

+camelcase@^1.2.1:

+  version "1.2.1"

+  resolved "https://registry.npmmirror.com/camelcase/-/camelcase-1.2.1.tgz#9bb5304d2e0b56698b2c758b08a3eaa9daa58a39"

+  integrity sha512-wzLkDa4K/mzI1OSITC+DUyjgIl/ETNHE9QvYgy6J6Jvqyyz4C0Xfd+lQhb19sX2jMpZV4IssUn0VDVmglV+s4g==

+

 camelcase@^2.0.0:

 camelcase@^2.0.0:

   version "2.1.1"

   version "2.1.1"

   resolved "https://registry.npmmirror.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"

   resolved "https://registry.npmmirror.com/camelcase/-/camelcase-2.1.1.tgz#7c1d16d679a1bbe59ca02cacecfb011e201f5a1f"

@@ -10674,6 +10684,13 @@ update-browserslist-db@^1.1.1:
 
     escalade "^3.2.0"

     escalade "^3.2.0"

     picocolors "^1.1.0"

     picocolors "^1.1.0"

 

 

+uppercamelcase@^1.1.0:

+  version "1.1.0"

+  resolved "https://registry.npmmirror.com/uppercamelcase/-/uppercamelcase-1.1.0.tgz#324d98a6b3afc7e8a8953e10641509b0e4e23f97"

+  integrity sha512-C7YEMvhgrvTEKEEVqA7LXNID/1TvvIwYZqNIKLquS6y/MGSkRQAav9LnTTILlC1RqUM8eTVBOe1U/fnB652PRA==

+  dependencies:

+    camelcase "^1.2.1"

+

 uri-js@^4.2.2:

 uri-js@^4.2.2:

   version "4.4.1"

   version "4.4.1"

   resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

   resolved "https://registry.npmmirror.com/uri-js/-/uri-js-4.4.1.tgz#9b1a52595225859e55f669d928f88c6c57f2a77e"

@@ -10785,6 +10802,13 @@ vm2@^3.9.12:
 
     acorn "^8.7.0"

     acorn "^8.7.0"

     acorn-walk "^8.2.0"

     acorn-walk "^8.2.0"

 

 

+vue-amap@^0.5.10:

+  version "0.5.10"

+  resolved "https://registry.npmmirror.com/vue-amap/-/vue-amap-0.5.10.tgz#464516203af0c085d404bd8acabf2401e4a36ff6"

+  integrity sha512-9ViNCev1vx32+zZ5RvF/TmUZNbwL9QrdA2/OnD2GlXMfQBkJy7D08Vb7379t6guqnopDPtWJ8K6gg72h9+4GUg==

+  dependencies:

+    uppercamelcase "^1.1.0"

+

 vue-count-to@^1.0.13:

 vue-count-to@^1.0.13:

   version "1.0.13"

   version "1.0.13"

   resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"

   resolved "https://registry.npmmirror.com/vue-count-to/-/vue-count-to-1.0.13.tgz#3e7573ea6e64c2b2972f64e0a2ab2e23c7590ff3"

Some files were not shown because too many files changed in this diff