2 分钟 读完 (大约 364 个字)

每周分享常用编程技巧与规范（前端）

使用对象代替 if 及 switch 的简单赋值逻辑

场景：根据不同会员等级用户给予不同的折扣

  • 旧方案 使用if 或者 switch进行不同等级会员赋予不同折扣
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
let userRank = '白银会员'
let discount = 9.8

// 数据多我就switch
switch(userRank){
    case '白银会员':
        discount = 9.8
        break
    case '黄金会员':
        discount = 9.5
        break
    case '钻石会员':
        discount = 9.3
        break
}
// 数据少我就if判断
if (userRank === '白银会员'){
    discount = 9.8
}else if(userRank === '黄金会员'){
    discount = 9.5
}else if(userRank === '钻石会员'){
    discount = 9.3
}
  • 新方案 采用对象的方式,适合简单判断赋值情况。相对于之前的方案，代码量少，而且更加清晰。
1
2
3
4
5
6
7
8
let userRank = '白银会员'
let discountObj = {
    '白银会员': 9.8,
    '黄金会员': 9.5,
    '钻石会员': 9.3
}

let discount = discountObj[userRank] || 9.8

三元与短路操作

场景：判断会员等级是否是‘钻石’，如果是给予高等级客服待遇，实际使用最多的场景为判断后台返回数据中某个字段是否有值，没有着赋予一个默认值。

  • 旧代码 if 循环
1
2
3
4
let priority = 'low'
if(userRank === '钻石会员'){
    priority = 'hight'
}
  • 新代码 短路操作
1
2
3
4
// 过滤数据
let userRank = data.userRank || '白银会员'
// 三目运算
(urserRank === '钻石会员')?priority = 'hight':priority = 'low'

使用双位运算符~~

场景：代替正数的floor(),与负数的ceil(),整体来说就是浮点数只保留整数部分

1
2
3
4
5
6
// 9
Math.floor(9.9)
~~9.9
// -9
Math.celi(-9.9)
~~-9.9
Chrome 调试对象非及时跟新问题
前端
2 分钟 读完 (大约 349 个字)

Chrome 调试对象非及时跟新问题

问题

今天调试代码准备追踪下对象的变化，但是突然发现在chrom调试中对象没有随方法的调用而发生变化
如下：
对象显示细节.png

但是可以明显发现 对象显示的概括和点击显示的详情不符，概括应该是正常的。然后我又试了下每个对象显示出来的就点开详情，可以发现这次对象都正常显示。因此我们可以猜想应该是chrome调试在点击对象的详情的时候才调用的遍历显示对象，因此之前对象显示了但是我又点击详情，因此在后面点击的时候才调用循环显示这个对象的属性。
即这个时候的对象是现在的情况，不是当时显示的时候的对象。

下面我们可以新建一个简单对象来验证下：
对象细节.png

然后我们可以看看其实chrome有标记的：
对象细节1.png

明确标识了显示的是点击的时候对象，出”bug”除了自己尝试，还可以关注官方的文档/工具的细节，稳住不急。

BFC简述总结
前端
7 分钟 读完 (大约 1124 个字)

BFC简述总结

定义

BFC(block formatting context),中文“块级格式化上下文”，是块盒子的布局过程发生的区域，也是浮动元素与其他元素交互的区域。如果一个元素具有BFC,内部元素无法影响到外部元素；外部元素也无法影响内部。类似一块具有结界的元素或则一个单独的文档流。

在块格式化上下文中，盒子一个接一个地垂直排列，从包含块的顶部开始。两个同胞框之间的垂直距离由“margin”属性决定。块格式上下文中相邻块级框之间的垂直边距折叠。

在块格式设置上下文中，每个框的左外边缘与包含块的左边缘相接触(对于从右到左的格式设置，右边缘相接触)。即使在浮动存在的情况下也是如此(尽管一个盒子的行盒可能会因为浮动而收缩)，除非盒子建立一个新的块格式上下文(在这种情况下，盒子本身可能会因为浮动而变窄)。

注意：BFC属于正常文档流，floats、绝对定位元素、不是块状盒子的块状容器（例如：inline-block、table-cell、table-caption），以及其他情况，会为其内容创建新的的BFC。

所以之前常见元素之间能相互影响的情况：

  • margin重叠—影响外部元素
  • 浮动—直接影响父元素的高度，间接影响其他元素的布局

都可以借助新建BFC进行处理

触发条件

  • <html>根元素
  • 浮动元素—float 的值不是none
  • overflow—值不为 visible 的块元素
  • display 的值不是table-cell\table-caption和inline-block中的任何一个
  • 绝对定位元素—元素的 position 为 absolute 或 fixed
  • 弹性元素—display为 flex 或 inline-flex元素的直接子元素
  • 网格元素—display为 grid 或 inline-grid 元素的直接子元素
  • 多列容器—元素的 column-count 或 column-width 不为 auto，包括 column-count 为 1
  • column-span 为 all 的元素始终会创建一个新的BFC，即使该元素没有包裹在一个多列容器中

BFC应用

margin 重叠

1
2
3
4
<body>
  <div style="width: 200px;height: 200px;background-color: red;margin: 20px;"></div>
  <div style="width: 200px;height: 200px;background-color: green;margin: 20px;"></div>
</body>

重叠示例：
margin重叠.gif

两个块状元素上下margin出现重叠，如果要避免重叠根据上面BFC的介绍，我们可以新建一个BFC区域。

1
2
3
4
<body>
  <div style="width: 200px;height: 200px;background-color: red;margin: 20px;over"></div>
  <div style="width: 200px;height: 200px;background-color: green;margin: 20px;"></div>
</body>

创建新的BFC消除影响，原理：BFC不会被其他元素的margin影响

1
2
3
4
5
6
7
8
<body>
  <div style="overflow: hidden;">
    <div style="width: 200px;height: 200px;background-color: red;margin: 20px;"></div>
  </div>
  <div>
    <div style="width: 200px;height: 200px;background-color: green;margin: 20px;"></div>
  </div>
</body>

消除marin重叠.png

清除浮动（阻止元素被浮动元素覆盖）

1
2
3
4
<body>
  <div style="width: 200px;height: 200px;float: left;background-color: blueviolet;"></div>
  <div style="width: 200px;height: 200px;background-color: brown;"></div>
</body>

紫色下面还有一个大小完全一致的深红色的盒子被浮动的盒子完全覆盖

浮动元素覆盖.png

1
2
3
4
5
6
7
8
<body>
  <!-- <div style="overflow: hidden;"> -->
    <div style="width: 200px;height: 200px;float: left;background-color: blueviolet;"></div>
  <!-- </div> -->
  <div style="overflow: hidden;">
    <div style="width: 200px;height: 200px;background-color: brown;"></div>
  </div>
</body>

将被覆盖元素用新建的BFC包裹，原理：浮动元素是一个BFC和新建的BFC按普通文档流依次排列

防止被浮动元素覆盖.png

清除浮动（BFC包含浮动元素）

1
2
3
4
<body>
<div style="width: 200px;height: 200px;float: right;background-color: blueviolet;"></div>
<div style="width: 200px;height: 200px;background-color: brown;"></div>
</body>

浮动

影响外部div元素位置上移

1
2
3
4
5
6
<body>
  <div style="overflow: hidden;">
    <div style="width: 200px;height: 200px;float: right;background-color: blueviolet;"></div>
  </div>
    <div style="width: 200px;height: 200px;background-color: brown;"></div>
</body>

将浮动元素用一个新建的BFC包裹，但是不是使用浮动建立的。新BFC回归文档流，float元素在新BFC中浮动，无法出来。

清除浮动

自适应布局

  • BFC 与 float

    相对纯流体布局，自适应内容自动填满浮动以外区域。无需考虑浮动元素的宽度；无需考虑margin和padding撑开间距。

可以考虑抽象几个通用的布局类名：

  • .left { float:left; }
  • .right { float:right; }
  • .bfc { overflow:hidden; }

由于创建BFC的元素都比较特殊，有其自己的属性，一般建议使用

  • overflow:heidden
  • 融合display:table-cell 和 display:inline-block
    1
    2
    3
    4
    5
    6
    .lbf-content{
      display:tabel-cell;width:9999px;
      // 兼容IE7
      display:inlinte-block;
      width:auto;
    }

总结

BFC 类似于在一个文档流中又创建了一个文档流；日常中元素会相互影响，但是文档流不会；因此可以利用新建文档流包裹元素来避免影响。

参考：css2.2

阿里云部署Laravel与Vue
运维
6 分钟 读完 (大约 944 个字)

阿里云部署Laravel与Vue

购买阿里云ecs服务器

选择系统Centos 7

设置安全组仅开放必须端口

准备好域名并设置好解析

使用ssh登陆服务器设置新账户并加入sudoers /etc/suders

关闭root账户ssh登录并可更改ssh端口 /etc/ssh/ssh_config

PermitRootLogin yes => no

更新yum源（例如：epel,remi） remi依赖于epel,remi 为php与mysql的最新源

  • 安装 epel yum install epel-release

  • 安装 remi rpm -Uvh https://rpms.remirepo.net/enterprise/remi-release-7.rpm

    安装php73

    安装PHP-FPM

    安装nginx

    安装Laravel php必须条件与扩展

  • PHP >= 7.1.3

  • BCMath PHP Extension

  • Ctype PHP Extension

  • JSON PHP Extension

  • Mbstring PHP Extension

  • OpenSSL PHP Extension

  • PDO PHP Extension

  • Tokenizer PHP Extension

  • XML PHP Extension

    Laravel 5.8 要求

    配置Nginx

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    server {
        listen 80;
        # 响应头允许在<frame>中嵌入页面只限本域名下
        add_header X-Frame-Options "SAMEORIGIN";
        # 开启内建的xss过滤，在检测到后禁止加载页面
        add_header X-XSS-Protection "1; mode=block"; 
        # 禁用浏览器对 Content-Type 类型进行猜测的行为
        add_header X-Content-Type-Options "nosniff";

        root /usr/share/nginx/html;
        index index.php index.html index.htm;

        server_name XXX.XXX.XX;
        # Vue等路由框架使用 history模式
        # 跳转https
        return      301 https://;
        location / {
            try_files $uri $uri/ /index.html
        }

        # php 转发
        location / {
            try_files $uri $uri/ /index.php?query_string;
        }

        # php 脚本请求抓发 FastCGI
        location ~ \.php$ {
            try_files $uri /index.php =404;
            fastcgi_split_path_info ^(.+\.php)(/.+)$;
            # FastCGI监听端口
            fastcgi_pass 127.0.0.1:9000;
            # 设置默认首页
            fastcgi_index index.php;
            # 设置脚本文件请求的路径
            fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
            # 引入fastcgi的配置文件
            include fastcgi_params;
        }
    }

    到此已可以正常使用，可以通过ftp传输源码

    安装git

  • yum install git

  • 密钥目录 ~/.ssh

  • 生成密钥 ssh-keygen -t rsa

    安装composer

  • wget https://dl.laravel-china.org/composer.phar -O /usr/local/bin/composer

  • chmod a+x /usr/local/bin/composer

  • composer config -g repo.packagist composer https://packagist.laravel-china.org

    配置ssl

  • 购买ssl证书

  • 配置nginx ssl相关配置

    .crt文件：是证书文件，crt是pem文件的扩展名

    .key文件：证书的私钥文件

    将证书文件默认放置在/etc/pki/nginx/a.crt

    将私钥文件默认放置在/etc/pki/nginx/private/b.key

    我习惯在/etc/nginx/cert下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
server {
    # 端口
    listen 443;
    # 访问的域名
    server_name localhost;
    ssl on;
    # 默认网站根目录
    root /usr/share/nginx/html;
    # 证书文件放置目录
    ssl_certificate "/etc/pki/nginx/a.crt";
    # 证书私钥文件放置目录
    ssl_certificate_key "/etc/pki/nginx/private/b.key";
    ssl_session_timeout 5m;
    ssl_ciphers ECDHE-RSA-AES128-GCM-SHA256:ECDHE:ECDH:AES:HIGH:!NULL:!aNULL:!MD5:!ADH:!RC4;
    # 协议
    ssl_protocols TLSv1 TLSv1.1 TLSv1.2;
    ssl_prefer_server_ciphers on;
    # 默认请求
    location / {
        try_files $uri $uri/ =404;
    }
    # Vue等路由框架使用 history模式
    location / {
        try_files $uri $uri/ /index.html
    }
    # php 转发
    location / {
        try_files $uri $uri/ /index.php?query_string;
    }
    # php 脚本请求抓发 FastCGI
    location ~ \.php$ {
        try_files $uri /index.php =404;
        fastcgi_split_path_info ^(.+\.php)(/.+)$;
        # FastCGI监听端口
        fastcgi_pass 127.0.0.1:9000;
        # 设置默认首页
        fastcgi_index index.php;
        # 设置脚本文件请求的路径
        fastcgi_param SCRIPT_FILENAME $document_root$fastcgi_script_name;
        # 引入fastcgi的配置文件
        include fastcgi_params;
    }
}

文件部署

  • 创建网站目录 mkdir
  • 更改网站目录用户名与用户组为Nginx的用户名与用户组
  • 更改php-fpm的用户组为Nginx的一样 使用ps aux |grep php-fpm检测php-fpm的运行用户
  • git 源码
  • composer update
  • 配置.env
  • 更改 storage 目录权限 chmod -R 755
  • 创建网站目录 mkdir
  • 更改网站目录用户名与用户组为Nginx的用户名与用户组
  • git dist 注意.gitignore 不要添加dist

注意：php 的名称可能是 php7* 等其他形式，注意使用 Tab。并 cp 一个 php 命令文件，因为有些服务默认调用的是 php。php-fpm 可以使用 systemctl 查询真正服务名称。安装出现其他名称的命令和服务的原因在于软件版本的众多，可以避免覆盖。

css世界--流
前端技术
5 分钟 读完 (大约 747 个字)

css世界--流

本书主要基于css2进行讲解，本书除了对于一些属性的讲解，最重要的部分就是对于css流的介绍。在一开始学习了解css的时候我们就知道css的基础就是“流”，但是当时对于流的理解是css自身的一种属性。但是通过本书可以了解到流也是由来和作用。

流体布局

所谓“流体布局”，指的是利用元素“流”的特性实现的各类布局效果，因为“流”本身具有自适应性，所以“流体布局”往往都是具有自适应性的。但是，“流体布局”并不等于“自适应布局”

无宽度

对于块状元素，如果width:auto,则元素会如流水一样充满整个容器，而一旦设定了width具体数值，则元素的流动性会消失。如果宽度作用在content box上，内外流动性皆无。

CSS流体布局下的宽度分离原则

所谓“宽度分离原则”，就是css中width属性不与影响宽度的padding/border（有时候包括margin）属性共存。
如下：

  • 不要出现这种写法
    1
    .box { width:100px; border: 1px solid; padding:20px;}
  • 鼓励这种写法(分离 width 独立占用一层标签，padding\border\margin利用流动性在内部自适应)
    1
    2
    3
    4
    5
    6
    7
    .father {
      width:142px;
    }
    .son {
      padding:20px;
      border:1px solid;
    }
    思想：
    便于维护，盒子尺寸中4个属性都能影响到宽度，因此改动需要非常小心精确算好对于宽度的影响。宽度分离后，宽度在外层单独固定。内部调整padding\margin\border相互自适应调整（流体）依旧充满整个父元素空间。如果不考虑替换元素，所有页面基本只需要一个width设定就可以了，内部元素根据流体填充。

*{box-sizing:border-box} vs 宽度分离

border-box 无法解决所有问题。box-sizing 不支持margin-box，只有元素没有水平margin的时候，box-sizing才能和我们预想中一样，宽度分离可以使用所有情况。
而且 box-sizing 的初衷是解决替换元素的宽度自适应问题。

无宽度业务运用

通用：

  1. 如必须使用 width 属性数值使用比例数值

左右两栏布局

  1. position:absolute + padding-left
  2. float:left + padding-left

多栏布局

  1. column-width + 百分比

总结：宽度分离—充分利用流动性用内部元素充满父元素，不要用具体数值限制非直接内容元素的宽度，让他们被具体内容填充。具体的排版使用padding\margin\float\positon 等属性进行调整。充分利用子元素填充支撑父元素。

《完全写作指南》--- Laura Brown
读书笔记
9 分钟 读完 (大约 1368 个字)

《完全写作指南》--- Laura Brown

简介

该书籍主要分成3部分：写作的流程；电子写作和技术革新；分类写作。前两部分告诉我们，只要思路清晰、流程顺畅、有好的习惯，写作是一个非常简单的事情，主要介绍了写作的六个核心步骤：确定写作目标、深度了解读者、展开头脑风暴、组织结构、打初稿、修改。后一部分分类写作主要提供各种场景下写作的模版与注意事项类似工具查找类。

书籍要点

写作的步骤

这六个步骤，没有固定的顺序，按自己习惯和喜好来安排即可。只需要每个步骤都在写作过程中考虑到就可以了（除了修改无法第一个开始）。

  • 明确你的目标

目标需要更现实，更能突出重点的。例如：求职信，一种目标是“我找工作”，另一种目标是“给读信的人一些信息，争取让他们面试我”。

  • 了解你的读者

了解读者，主要为了根据不同的读者提供不同的信息要点与书写时候的态度。
对于信息不同对象本身掌握的信息知识，和想知道的信息都是不同的。例如：同事（事情细节）、领导（事件结果）。
对于态度，主要考虑读者的情绪，他会带这什么情绪来阅读，我们需要针对性列出我们文章的合理性。例如：加薪、预算增加请求（一般领导会带有抵触情绪）。

  • 用头脑风暴锁定你想表达的内容

头脑风暴是偏排所有可能相关内容的过程，将她们排列在一起，以备写作用。而且头脑风暴可以多次使用，经历的越多越好。

头脑风暴的规则：

  • 像出的点子越多越好

  • 不要审查，不要评论（打击积极性，而且每个想法都是有支撑点的）

  • 接受不同寻常的想法（能想出来，都是有原因的。而且主要是产生想法的支撑点，说不定能指向一个新方向）

  • 合并改进你的点子（合并相似的）

  • 组织文章（提纲）

我用什么形式组织文章，很大程度上取决于文章类型和我想表达什么目标。
例如：指南–循序渐进式的提纲；描述某件事–可以按时间顺序进行组织；说服某人–可以先将原因按重要程度进行排列，然后用一个无法拒绝的原因放在结尾。

小技巧：不好说的问题可以进行归类，防止读者针对细节提问。

  • 写初稿
    这是最容易产生焦虑感的步骤，一次写好文章基本不可能的。我们最好一旦开始写，就借这股气一直写下去，直到写不动了，就停下来休息下。并回顾看看自己写的文章，可以借助上面几个步骤来检查。

  • 修改
    修改并不意味着写的不好，只是写作流程中的一个环节。

方法：

  • 分批修改（针对文章比较长，或比较重要）：多看几遍，每次修改一部分问题，分批修改更加轻松
  • 需求帮助：自己看自己的文章容易失去洞察力，可以邀请他人联合相互检查，但是检查前需要告诉他人文章的目标，读者。

互联网上写作注意点

  • 写不写
    写文字之前考虑下我这样写的目的是不是因为可以躲在文字后面，可以不见对方，如果是这样需要考虑下面谈或电话。

  • 方式
    每种交流工具都对于不同的场景：

    • 即时信息
      简单、简短的沟通（例：闲聊、工作中需要快速回答的问题）；
      缺点：人多的时候交流会出现多线交叉，历史信息不容易查询
    • 短信
      与及时信息相似，但是接收会更及时
    • 电子邮件
      使用与比较复杂和正式的内容，而且易于保存与查找
    • 社交网络
      主要用于群发信息但是社交网络的公共性，撤回也是存在于网络上的，发送需要慎重

  • 刊登测试
    互联网上任何都是永久存在并公开的，需要考虑 如果我这个是发在 《人民日报》头版头条是什么想法。

总结

步骤不多也不复杂，但是需要多使用养好习惯。这些步骤我们之前日常写作也会有涉及但是并没有主动考虑，只是带过。刻意使用的时候会发现一个不同的世界。希望以后文章能越写越好（我最讨厌写作文了(┬＿┬)）。

ISBN: 9787210074885

奇怪的行高
前端技术
6 分钟 读完 (大约 895 个字)

奇怪的行高

问题点

我们先想想这段代码的浏览器渲染效果是什么样？

1
2
3
4
5
6
7
<!-- 页面骨架 -->
  <div class="test">
    <span class="size-style">sphinx</span>
  </div>
  <div class="test1">
    <span class="size-style1">sphinx</span>
  </div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
/* 页面样式 */
  .test {
    font-family: simsun;
    line-height: 40px;
    background-color: yellow;
    display: inline-block;
  }
  .size-style {
    font-size: 31px;
    background-color: white;
  }

  .test1 {
    font-family: simsun; //宋体，字体显示区域大小与字体大小一致
    line-height: 40px;
    font-size: 31px;
    background-color: yellow;
    display: inline-block;
  }
  .size-style1 {
    background-color: white;
  }

粗看这段代码是两个一模一样的行内块级元素并排，因为 CSS font-size 属性的继承性，内部只有一个子元素，属性值写在子或父元素全部一致。理论渲染的效果也应该是一样。

理论效果.png

  • test 与 test1 的高度为 40px (行高)

但是实际浏览器渲染的结果如下图所示

实际效果.png

  • test1 元素高度 44px
  • test 元素高度 40px (行高)

这多出来来的4px高度是撒？

看渲染效果 test 和 test1 大体相似上半行距和字体显示局域是一样的，区别在于下半行距，test 多出的 4px就在这个区域。我们可以猜测是 test 内的 span 下方多出一个块级元素或换行的行内元素还有同行的行内元素（无宽度）。

  1. 我们先试试改变行高这个 4px 差的差距会跟随变化吗。（有变化=>但是从数值看不会是元素下方的）
  2. 删除 test 上的 line-height 属性。（发现 line-height 的默认值不会产生这个 4px 的误差）
  3. 查询 line-height 的默认值，是相对量。尝试使用其他相对量。(发现相对量不会产生 4px 误差；只有绝对量才会产生)。
  4. 尝试改变 font-size 的值（发现 4px 大小发生变化；额外元素能响应 font-size,但是想不出那个元素符合）。
  5. 好难看不出这是个撒，google了下发现每个 line-box 的起始位置都有一个宽度为 0 的字符（CSS 文档将其称为 strut），并将其纳入 line-box 的高度的计算中。

下面我们来验证下这个看不见的字符

前提：

  • 行内元素默认对齐是根据字符的基线
  • font-size的大小不等于实际看见的字符大小（content area）
  • 同一个 size 不同字体看见的字符大小也不一样，具体跟字体自己的规定相关（注：simsun 宋体 字符大小和font-size一致）
1
2
3
4
5
6
<div class="test">
  <span class="size-style2">x</span>
</div>
<div class="test">
  <span class="size-style">sphinx</span>
</div>
1
2
3
.size-style2 {
   background-color: white;  //其他属性继承自父元素，模拟幽灵元素
}

snipaste_20200229_172517.png

可以发现x字符由于字体和字号的不一样,字符占据的空间 + 字间距对比会有下沉。如果用一个元素包裹 x 和 test1 元素就会渲染出 test1 的样式。test1 中幽灵元素没造成影响是因为幽灵元素继承了父元素的字体字号与中属性一致​。​

问题解决

可以发现只要控制幽灵元素和其上下间距的范围不超出想实现效果的范围即可

方案：

  • 减小幽灵元素的字体大小（推荐，比较彻底直接设置0）
  • 减小幽灵元素的行高大小

参考：

关注我

链接

分类

标签云

BFC CSS Centos Chrome Laraver PHP Vue css html 写作 前端 笔记 读书 调试

最新文章

归档

标签

BFC 1
CSS 1
Centos 1
Chrome 1
Laraver 1
PHP 1
Vue 1
css 2
html 2
写作 1
前端 4
笔记 1
读书 1
调试 1

最新文章

归档

标签

BFC 1
CSS 1
Centos 1
Chrome 1
Laraver 1
PHP 1
Vue 1
css 2
html 2
写作 1
前端 4
笔记 1
读书 1
调试 1
Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×