智能展厅项目总结

智能展厅

1.GitLab 配置密钥：

SSH密钥允许你的计算机和gitlab之间建立安全连接。

1. 检查SSH秘钥是否存在。桌面右击Git Bash Here打开终端执行命令 ：cat ~/.ssh/id_rsa.pub
   

2. 如果出现下图情况,说明已经配置过了密钥

   

3. 如果若密钥不存在 ，执行 下列命令生成密钥

   ssh-keygen -t rsa -C "2139304869@qq.com" 
   

   2139304869@qq.com是注册gitlab的邮箱

在c/user/mi/.ssh/id_rsa生成两个文件

私钥：id_rsa

公钥：id_rsa.pub

4

1. 打开id_rsa.pub，复制公钥。

2. 执行

   cat ~/.ssh/id_rsa.pub 
   

5.打开gitlab的User Settings的ssh keys

2.使用flex布局时justify-content失效原因

属性失效的原因：justify-content是控制在主轴上的对齐方式，所以效果生效时需要计算组件的宽度。当组件的主轴长度属性（主轴为横轴时就是width，为纵轴时就是height）没有进行设置时，属于灵活延展的，所以无法进行计算，故属性没有生效。

解决方案：为组件设置确定长度的主轴属性（width / height）

3.使用swiper插件遇到的问题：

（1）版本问题：

swiper有许多的版本，有些属性在相应的版本下才可以使用，所以一定要要注意版本问题。

（2）禁止鼠标滑动：

只需要在最外层的容器上增加class="swiper-no-swiping"

但是加上这个类后会出现点击切换效果失效。

解决方法：暂无

4.文字内嵌效果

text-shadow 并没有类似 box-shadow 的 inset 值来表示内外阴影 .

实现字体内嵌效果有两种途径：

• 在深色背景上使用浅色投影
• 直接在字体上添加暗部，造成视觉上的内嵌

用RGBA透明色模拟字体内阴影效果:

body{
	background-color:#e6eef3;
}
h2{
	font-family: 'STXingkaiSC';
	color: #00A3FF;
	color:rgba(0,80,255,0.7);
	text-shadow:0 3px 1px #e6eef3,0 0 0 #000,0 	3px 1px #e6eef3;
}

实现效果：

注意：

1. 背景色和模拟阴影必须相同

2. 在不支持RGBA的浏览器里，不能发挥作用，而且还必须在RGBA之上添加默认颜色以保证老浏览器能至少显示实色 。

3. text-shadow: h-shadow v-shadow blur color;

4. h-shadow 水平阴影的位置

   v-shadow 垂直阴影的位置

   blur 模糊的距离

   color 阴影的颜色

5. IE 9及更早版本的浏览器不支持 text-shadow 属性

5.如果出现Respose出现：{“code”:1128,“message”:“参数缺失”}

但是参数写的没有错，去写接口的文件里查看，发现

export function dvd_operation(status) {

 return request({

  url: 'dvd',

  method: 'post',

  status

 })

}//传入参数写成status,改成params即可,post/put都要用params

6. Vue项目中阻止页面放大缩小：

index.html中的meta中修改代码

其中的user-scalable=0是不允许页面通过手指就能放大缩小。

7.在vue项目里使用iconfont字体图标。

1. 搜索需要的图标加入购物车

2. 加入到项目中

3. 在我的图标中的我的项目，下载到本地

4. 把icon文件放在src->assets->icon中

5. 在main.js中引用

   import './assets/icon/iconfont.css'//引入font css
   

6. 应用：

   <div class="iconfont">&#xea53;</div>
   

8、禁止平板双指放大缩小

<script>
  window.addEventListener(
    "touchmove",
    function (event) {
      if (event.scale !== 1) {
        event.preventDefault();
      }
    }, {
    passive: false
  }
  );
</script>