2023-10-20

src/component/HomePage/collectionModal.vue

@@ -7,6 +7,7 @@
             :maskClosable="false"
             :centered="true"
 			:closable="false"
+			wrapClassName="#app"
         >
             <div class="collection_title">
 				<div class="collection_title_text">
@@ -17,8 +18,8 @@
 					<!-- <div v-show="collectionStep === 5">Markets Sketch</div> -->
 					<div class="collection_title_text_intro">select moodboard for your collection</div>
 				</div>
-				<div>
-					<a-progress :strokeWidth= 13 :width= 60 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
+				<div class="collection_progress">
+					<a-progress :strokeWidth= 13 strokeColor="#341e57" type="circle" :percent="collectionStep*25" :format="percent => `${collectionStep}/4`" />
 				</div>
          
             </div>
@@ -163,6 +164,18 @@ export default defineComponent({
 		font-weight: 900;
 		color: rgba(0,0,0,.65);
 		align-items: center;
+		.collection_progress{
+			width: 8rem;
+			height: 8rem;
+			>div{
+				width: 100% !important;
+				height: 100% !important;
+				:deep(.ant-progress-inner){
+					width: 100% !important;
+					height: 100% !important;
+				}
+			}
+		}
 		.collection_title_text{
 			margin-right: 4rem;
 		}
@@ -264,7 +277,7 @@ export default defineComponent({
 	// max-width: 1200px ;
 	// max-width: 1150px ;
 	.ant-modal-content{
-		border-radius: 10px;
+		border-radius: 1rem;
 		overflow: hidden;
 		.ant-modal-header{
 			background-color: #fff;
@@ -282,7 +295,12 @@ export default defineComponent({
 		}
 		.ant-progress-circle .ant-progress-text{
 			color:rgba(0, 0, 0, 0.55);
+			font-size: 1.6rem;
 		}
 	}
 }
+// .ant-progress-circle .ant-progress-inner{
+// 	width: 8rem !important;
+// 	height: 8rem !important;
+// }
 </style>