39.前端代码与前端设计相融合bug

组内同学设计的前端界面是这样的：

为了将代码融合进前端界面，所以借用了figma里面的插件anima进行编写：

设计的前端界面大概是这样的css格式：

.talk {
  align-items: flex-start;
  display: flex;
  flex-direction: column;
  height: 1039px;
  position: relative;
}

.talk .back {
  align-self: stretch;
  height: 975.99px;
  position: relative;
  width: 100%;
}

.talk .hero-section {
  background-color: var(--danlan);
  height: 986px;
  left: 0;
  position: absolute;
  top: 53px;
  width: 1366px;
}

.talk .frame {
  align-items: center;
  background-color: #ffffff;
  border: 1px solid;
  display: flex;
  flex-direction: column;
  height: 991px;
  left: 1px;
  padding: 50px 20px;
  position: absolute;
  top: 0;
  width: 348px;
}

.talk .div {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  position: relative;
}

.talk .frame-2 {
  align-items: center;
  display: inline-flex;
  flex: 0 0 auto;
  gap: 10px;
  padding: 15px 0px;
  position: relative;
}

.talk .vuesax-linear {
  background-image: url(https://c.animaapp.com/ma28oshf5ECohh/img/message.png);
  background-size: 100% 100%;
  height: 16px;
  position: relative;
  width: 16px;
}

.talk .text-wrapper {
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 0;
  color: var(--neutral-gray-600);
  display: -webkit-box;
  font-family: var(--paragraph-p2-regular-font-family);
  font-size: var(--paragraph-p2-regular-font-size);
  font-style: var(--paragraph-p2-regular-font-style);
  font-weight: var(--paragraph-p2-regular-font-weight);
  height: 21px;
  letter-spacing: var(--paragraph-p2-regular-letter-spacing);
  line-height: var(--paragraph-p2-regular-line-height);
  margin-top: -1.00px;
  overflow: hidden;
  position: relative;
  text-overflow: ellipsis;
  white-space: nowrap;
  width: 237px;
}

.talk .vuesax-linear-2 {
  background-image: url(https://c.animaapp.com/ma28oshf5ECohh/img/message-1.png);
  background-size: 100% 100%;
  height: 16px;
  position: relative;
  width: 16px;
}

.talk .text-wrapper-2 {
  color: var(--neutral-gray-600);
  font-family: var(--paragraph-p2-regular-font-family);
  font-size: var(--paragraph-p2-regular-font-size);
  font-style: var(--paragraph-p2-regular-font-style);
  font-weight: var(--paragraph-p2-regular-font-weight);
  letter-spacing: var(--paragraph-p2-regular-letter-spacing);
  line-height: var(--paragraph-p2-regular-line-height);
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

.talk .vuesax-linear-3 {
  background-image: url(https://c.animaapp.com/ma28oshf5ECohh/img/message-2.png);
  background-size: 100% 100%;
  height: 16px;
  position: relative;
  width: 16px;
}

.talk .frame-3 {
  align-items: flex-start;
  display: inline-flex;
  flex: 0 0 auto;
  flex-direction: column;
  gap: 10px;
  margin-left: -20.00px;
  margin-right: -20.00px;
  position: relative;
}

.talk .mask-group-wrapper {
  height: 50px;
  position: relative;
  width: 348px;
}

.talk .mask-group {
  height: 168px;
  left: 0;
  position: absolute;
  top: -57px;
  width: 348px;
}

.talk .frame-4 {
  align-items: center;
  display: flex;
  gap: 54px;
  justify-content: space-around;
  left: 28px;
  padding: 0px 5px;
  position: absolute;
  top: 15px;
  width: 280px;
}

.talk .frame-5 {
  align-items: center;
  display: flex;
  gap: 10px;
  position: relative;
  width: 252px;
}

.talk .vuesax-linear-4 {
  background-image: url(https://c.animaapp.com/ma28oshf5ECohh/img/message-3.png);
  background-size: 100% 100%;
  height: 16px;
  position: relative;
  width: 16px;
}

.talk .text-wrapper-3 {
  color: var(--shenlan);
  font-family: var(--paragraph-p2-regular-font-family);
  font-size: var(--paragraph-p2-regular-font-size);
  font-style: var(--paragraph-p2-regular-font-style);
  font-weight: var(--paragraph-p2-regular-font-weight);
  letter-spacing: var(--paragraph-p2-regular-letter-spacing);
  line-height: var(--paragraph-p2-regular-line-height);
  margin-top: -1.00px;
  position: relative;
  white-space: nowrap;
  width: fit-content;
}

通过在vue文件中进行引入，使用这个设计：

最后呈现的效果大概是这样的，大体设计样式感觉好像差不多，但其实细看还有非常多不合理的地方，后续还需继续更改：