/* 右侧固定按钮 */
.fixed-sidebar {
  position: fixed;
  right: 10px;
  bottom: 70%;
  z-index: 1000;
  background-color: #dddddd;
}

/* 悬浮按钮 */
.fixed-sidebar .fixed-button {
  width: 68px;
  height: 68px;
  cursor: pointer;
  background: url(../../img/incss/fixed-sidebar-icon.png) 0 -130px no-repeat;
}

/* 二维码 */
.fixed-sidebar .qr-container {
  position: absolute;
  right: 68px; /* 让二维码显示在按钮左侧 */

  /* 计算规则 = (138px / 2) - (68px / 2)  = 69 - 34 = 35px */
  bottom: -35px;
  width: 146px;
  height: 138px;

  box-sizing: border-box;

  /* box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2); */
  /* border-radius: 5px; */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.fixed-sidebar .qr-container::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 0;

  /* 图片处理 */
  width: 9px;
  height: 16px;
  background: url(../../img/incss/fixed-sidebar-icon.png) -88px -350px no-repeat;
}

.fixed-sidebar .qr-container img {
  width: 138px;
  height: 138px;

  border: 1px solid #ccc;
  background: #fff;
}

/* 鼠标悬停时显示二维码 */
.fixed-sidebar:hover .qr-container {
  opacity: 1;
  visibility: visible;
}

.fixed-sidebar:hover {
  background-color: #669fdd;
}

/* !!!!!!!!! 响应式 !!!!!!!!! */
@media screen and (max-width: 768px) {
  .fixed-sidebar {
    bottom: 100px;
  }
}