作者： admin

10 月 25 日，Next.js 13 正式发布。同时，Vercel 还推出并开源了下一代打包工具：Turbopack。Turbopack 是针对 JavaScript 和 TypeScript 优化的增量打包工具，由 Webpack 的创建者 Tobias Koppers 和 Next.js 团队使用 Rust 编写。Turbopack 的推出吸引了众多开发者的关注，下面就来看看 Turbopack 都有哪些优势！

https://mp.weixin.qq.com/s/9zXDqfxn2SWyoj6WCgJ1XQ

‘sameorigin’只允许同域名的地址在iframe中使用

解决：修改xxx.com的nginx或者apache的设置

在配置文件中加入X-Frame-Options属性的值：

参考值：

add_header X-Frame-Options ALLOWALL; #允许所有域名iframe

add_header X-Frame-Options DENY; #不允许任何域名iframe,包括相同的域名

add_header X-Frame-Options SANEORIGIN; #允许相同域名iframe,如a.test.com允许b.test.com

add_header X-Frame-Options ALLOW-FROM uri; #允许指定域名iframe

修改完成之后记得重启Nginx服务，重启之后配置生效，再次请求，搞定。

https://blog.csdn.net/qq_36527174/article/details/110873134

这里只处理了海口的数据作为案例：

https://sdeno.com/wp-content/uploads/2022/11/map/3.html

地图点击区域高亮参考：https://blog.csdn.net/wgf1997/article/details/124815817

https://chenxuan0000.github.io/vue-seamless-scroll/guide/

本地文档：地址1

import vueSeamlessScroll from 'vue-seamless-scroll/src';

export default {
  name: "index",
  components: {
    vueSeamlessScroll
  },
  data(){
     return:{
     listData:[
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },{
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
        {
          title:'111',
          date:'12211',
        },
      ]
     }
  }
}

                <div class="scroll-title" style="display: flex">
                  <div>排名</div>
                  <div>科室</div>
                  <div>人次</div>
                  <div>占比(%)</div>
                </div>
                <vue-seamless-scroll :data="listData" class="seamless-scrollwarp">
                  <ul class="item">
                    <li v-for="(item, index) in listData" :key="index">
                      <span class="title" v-text="item.title"></span>
                      <span class="date" v-text="item.date"></span>
                      <span class="date" v-text="item.date"></span>
                      <span class="date" v-text="item.date"></span>
                    </li>
                  </ul>
                </vue-seamless-scroll>


.scroll-title{
    display: flex;
    &>div{
      flex: 1;
      text-align: center;
    }
  }

  .seamless-scrollwarp {
    height: 230px;
    margin: 0 auto;
    overflow: hidden;
    ul {
      list-style: none;
      padding: 0;
      margin: 0 auto;
      li,
      a {
        height: 30px;
        line-height: 30px;
        display: flex;
        justify-content: space-between;
        font-size: 15px;
        span{
          flex: 1;
          text-align: center;
        }
      }
    }
  }

html编码

encodeURIComponent("http://xxx.com/#/1.html")
http%3A%2F%2Fxxx.com%2F%23%2F1.html

相应解码

decodeURIComponent('http%3A%2F%2Fxxx.com%2F%23%2F1.html')
'http://xxx.com/#/1.html'

base64方法

var Base64 = {
  _keyStr: "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/=",
  encode: function(e) {
    var t = "";
    var n, r, i, s, o, u, a;
    var f = 0;
    e = Base64._utf8_encode(e);
    while (f < e.length) {
      n = e.charCodeAt(f++);
      r = e.charCodeAt(f++);
      i = e.charCodeAt(f++);
      s = n >> 2;
      o = (n & 3) << 4 | r >> 4;
      u = (r & 15) << 2 | i >> 6;
      a = i & 63;
      if (isNaN(r)) {
        u = a = 64
      } else if (isNaN(i)) {
        a = 64
      }
      t = t + this._keyStr.charAt(s) + this._keyStr.charAt(o) + this._keyStr.charAt(u) + this._keyStr.charAt(a)
    }
    return t
  },
  decode: function(e) {
    var t = "";
    var n, r, i;
    var s, o, u, a;
    var f = 0;
    e = e.replace(/[^A-Za-z0-9+/=]/g, "");
    while (f < e.length) {
      s = this._keyStr.indexOf(e.charAt(f++));
      o = this._keyStr.indexOf(e.charAt(f++));
      u = this._keyStr.indexOf(e.charAt(f++));
      a = this._keyStr.indexOf(e.charAt(f++));
      n = s << 2 | o >> 4;
      r = (o & 15) << 4 | u >> 2;
      i = (u & 3) << 6 | a;
      t = t + String.fromCharCode(n);
      if (u != 64) {
        t = t + String.fromCharCode(r)
      }
      if (a != 64) {
        t = t + String.fromCharCode(i)
      }
    }
    t = Base64._utf8_decode(t);
    return t
  },
  _utf8_encode: function(e) {
    e = e.replace(/rn/g, "n");
    var t = "";
    for (var n = 0; n < e.length; n++) {
      var r = e.charCodeAt(n);
      if (r < 128) {
        t += String.fromCharCode(r)
      } else if (r > 127 && r < 2048) {
        t += String.fromCharCode(r >> 6 | 192);
        t += String.fromCharCode(r & 63 | 128)
      } else {
        t += String.fromCharCode(r >> 12 | 224);
        t += String.fromCharCode(r >> 6 & 63 | 128);
        t += String.fromCharCode(r & 63 | 128)
      }
    }
    return t
  },
  _utf8_decode: function(e) {
    var t = "";
    var n = 0;
    var r = c1 = c2 = 0;
    while (n < e.length) {
      r = e.charCodeAt(n);
      if (r < 128) {
        t += String.fromCharCode(r);
        n++
      } else if (r > 191 && r < 224) {
        c2 = e.charCodeAt(n + 1);
        t += String.fromCharCode((r & 31) << 6 | c2 & 63);
        n += 2
      } else {
        c2 = e.charCodeAt(n + 1);
        c3 = e.charCodeAt(n + 2);
        t += String.fromCharCode((r & 15) << 12 | (c2 & 63) << 6 | c3 & 63);
        n += 3
      }
    }
    return t
  }
}



 Base64.encode('http://xxx.com/#/1.html')//加密
 Base64.decode('aHR0cDovL3h4eC5jb20vIy8xLmh0bWw=') //解密