AI_Change_code/miniProgram/pages/work/index.wxss

/* pages/work/index.wxss */
.w_body{
  width: 100%;
  height: 100%;
}

.w_body > .work{
  width: 100%;
  height: 100%;
}

.c_top{
  position: fixed;
  z-index: 999;
  left: var(--left);
  height: var(--h);
  top: var(--top);
  font-weight: bold;
  padding: 0 30rpx;
  border-radius: 40rpx;
  background: rgba(255, 255, 255, 0.7);
  border: 1rpx solid rgba(0, 0, 0, 0.1);
  display: flex;
  align-items: center;
}
.c_top>.iconfont{
  color: #3B3B3B;
  font-size: 20rpx;
}

.c_top>.txt{
  color: #3B3B3B;
  font-size: 26rpx;
  display: inline-block;
  margin-left: 20rpx;
}

 .c_bg{
  position: fixed;
  z-index: -1;
  transform: translate(-50%,-50%);
  left: 50%;
  top: 50%;
  width: 100%;
  height: 100%;
  filter: blur(10px);
}

.share_btn{
  position: absolute;
  bottom: var(--bottom);
  height: 160rpx;
  width: 100%;
  left: 0;
  z-index: 99;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.share_bg{
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.2) 0%, #FFFFFF 100%);
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  left: 0;
  opacity: 0.8;
  z-index: -1;
}

.share_btn>view:not(.share_bg){
  background: #fff;
  width: 320rpx;
  height: 112rpx;
  border-radius: 20rpx;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.share_btn>view:not(.share_bg) .txt{
  color: #3B3B3B;
  margin-left: 20rpx;
  display: inline-block;
  font-size: 32rpx;
}


.share_btn>view:not(.share_bg)>.iconfont{
  font-size: 48rpx;
}

.share_btn>view:not(.share_bg)>.iconzhongxinpaizhaoyuan{
  color: #545571;
}
.share_btn>view:not(.share_bg)>.iconxiazai{
  color: #51BF08;
}

.share_btn>.share-quan{
  min-width: 400rpx!important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20rpx;
  color: #202020;
}

.share_btn>.share-quan>image{
  width: 70rpx;
  height: 70rpx;
  margin-right: 12rpx;
}