添加程序选择

src/components/LocationConfirmDialog/index.scss

@@ -0,0 +1,122 @@
+.locationDialogMask {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.4);
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  z-index: 10000;
+  animation: fadeIn 0.3s ease-out;
+}
+
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes slideUp {
+  from {
+    transform: translateY(100%);
+  }
+  to {
+    transform: translateY(0);
+  }
+}
+
+.locationDialogContainer {
+  width: 100%;
+  background: transparent;
+  animation: slideUp 0.3s ease-out;
+  padding-bottom: 20px;
+  background: #ffffff;
+  border-radius: 20px 20px 0px 0px;
+  height: 246px;
+}
+
+.locationDialogContent {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  overflow: hidden;
+  margin-left: 24px;
+  margin-right: 24px;
+}
+
+.locationDialogTitle {
+  padding-top: 48px;
+  padding-bottom: 32px;
+  margin-left: 32px;
+  margin-right: 32px;
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 20px;
+  line-height: 28px;
+  text-align: center;
+  color: #000000;
+}
+
+.locationDialogButtons {
+  display: flex;
+  flex-direction: column;
+  padding-bottom: 20px;
+  width:  calc(100% - 40px);
+}
+
+.locationDialogButton {
+  width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 16px;
+  cursor: pointer;
+  transition: opacity 0.2s;
+  margin-top: 20px;
+  
+  &:first-child {
+    margin-top: 0;
+  }
+  
+  &.primary {
+    background: #000000;
+    height: 52px;
+    
+    &:active {
+      opacity: 0.8;
+    }
+  }
+  
+  &.secondary {
+    width: 100%;
+    background: #ffffff;
+    height: 52px;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    
+    &:active {
+      background: rgba(0, 0, 0, 0.05);
+    }
+  }
+}
+
+.locationDialogButtonText {
+  font-family: "PingFang SC";
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 22px;
+  text-align: center;
+  
+  &.primary {
+    color: #ffffff;
+  }
+  
+  &.secondary {
+    color: #000000;
+  }
+}