page{
  height: 100%;
  width:100%;
}
.container {
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
}
/* 显示的题目 */
.container .question {
  width: 100%;
  height: 10%;
  background: #f0efef;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  color: #fb21a1;
  box-shadow: 2rpx 5rpx 2rpx silver;
}
/* 刷新按钮 */
.container .question .userinfo-avatar {
  height: 80rpx;
  width: 80rpx;
  border-radius: 50%;
  overflow: hidden;
}
.container .question text {
  margin: auto 10rpx auto 20rpx;
}
.container .question .refresh-btn {
  width: 50rpx;
  height: 50rpx;
  transform: scaleX(-1);
}
/* 中间画板 */ .container-in
.container .palette {
  width: 100%;
  height: 56%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 2rpx 5rpx 2rpx silver;
}
.container-in{
  position: relative;
}
.move-canvas {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
  overflow: hidden;
}

/* 默认结果展示区 */

.base-img {
  transform: scale(0);
  position: absolute;
  left: 0;
  top: 2000px;
  z-index: 0;
}


.canvas-result {
  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

 .action_box{
  height: 80rpx;
  width: 100%;
  position: fixed;
  left: 0;
  bottom: 0;
  background:  rgb(245, 199, 199);
  display: flex;
  align-items: center;
  justify-content: space-around;
}
.icon-text{
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Etype%3C/title%3E %3Cpath d='M20 3h-16c-0.6 0-1 0.4-1 1v3c0 0.6 0.4 1 1 1s1-0.4 1-1v-2h6v14h-2c-0.6 0-1 0.4-1 1s0.4 1 1 1h6c0.6 0 1-0.4 1-1s-0.4-1-1-1h-2v-14h6v2c0 0.6 0.4 1 1 1s1-0.4 1-1v-3c0-0.6-0.4-1-1-1z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
  background-size: cover;
  display: inline-block;
  width: 40rpx;
  height: 40rpx; 
  /* position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 50rpx; */
}
.icon-pen{
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E %3Ctitle%3Eedit-pencil%3C/title%3E %3Cpath d='M12.3 3.7l4 4-12.3 12.3h-4v-4l12.3-12.3zM13.7 2.3l2.3-2.3 4 4-2.3 2.3-4-4z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E");
  background-size: cover;
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  /* position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 55rpx; */
}
.icon-back{
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E %3Ctitle%3Eundo2%3C/title%3E %3Cpath d='M23.808 32c3.554-6.439 4.153-16.26-9.808-15.932v7.932l-12-12 12-12v7.762c16.718-0.436 18.58 14.757 9.808 24.238z' fill='%23d6204b'%3E%3C/path%3E %3C/svg%3E ");
  background-size: cover;
  display: inline-block;
  width: 36rpx;
  height: 36rpx;
  /* position: absolute;
  left:50%;
  transform: translateX(-50%);
  bottom: 50rpx; */
}

.icon-save{
  background-image: url("data:image/svg+xml,%3Csvg version='1.1' xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E %3Ctitle%3Esave%3C/title%3E %3Cpath d='M21.7 7.3l-5-5c-0.2-0.2-0.4-0.3-0.7-0.3h-11c-1.7 0-3 1.3-3 3v14c0 1.7 1.3 3 3 3h14c1.7 0 3-1.3 3-3v-11c0-0.3-0.1-0.5-0.3-0.7zM16 20h-8v-6h8v6zM20 19c0 0.6-0.4 1-1 1h-1v-7c0-0.6-0.4-1-1-1h-10c-0.6 0-1 0.4-1 1v7h-1c-0.6 0-1-0.4-1-1v-14c0-0.6 0.4-1 1-1h1v4c0 0.6 0.4 1 1 1h8c0.6 0 1-0.4 1-1s-0.4-1-1-1h-7v-3h7.6l4.4 4.4v10.6z'%3E%3C/path%3E %3C/svg%3E");
  background-size: cover;
  display: inline-block;
  width: 40rpx;
  height: 40rpx;
}
.icon_back{
  width: 120rpx;
  height: 80rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.icon_back image{
  width: 50rpx;
  height: 50rpx;
}

.base-img-bg {
  width: 0;
  height: 0;
  position: relative;
  overflow: hidden;
}

.base-img {
  transform: scale(0);
  position: absolute;
  left: 0;
  top: 2000px;
  z-index: 0;
}
.text-input-bg {
  width: 100%;
  height: 100%;
  padding-top: 200rpx;
  box-sizing: border-box;
  background: rgba(0, 0, 0, 0.9);
  position: absolute;
  left: 0;
  top: 0;
  z-index: 4;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-direction: column;
}
.text-model {
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 10;
  overflow: hidden;
}
.text-area-move {
  width: 500rpx;
  line-height: 40rpx;
  min-height: 80rpx;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 8px;
  border: 1px dashed #999;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  z-index: 100;
}

.textarea {
  width: 500rpx;
  text-align: center;
}

.delete-txt {
  width: 40rpx;
  height: 40rpx;
  text-align: center;
  line-height: 40rpx;
  background-color: rgba(255, 255, 255, 0.98);
  border:1px solid #ccc;
  position: absolute;
  font-size: 40rpx;
  border-radius: 100%;
  color: #999;
  top: -20rpx;
  right: -20rpx;
}
.currentItem{
  background: rgba(0,0,0,.6);
  color: #FFF;
  padding: 0 20rpx;
  line-height: 50rpx;
  z-index: 5;
  width: 80rpx;
  border-radius: 20rpx;
  text-align: center;
  position: fixed;
  left: 50%;
  top: 10rpx;
  transform: translateX(-50%);
}
.icon{
  height: 80rpx;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.choose{
  background: rgb(231, 223, 223)
}
.del_icon{
  width: 38rpx;
  height: 38rpx;
}