Add one-way task completion and exportable pet identity cards

2026-10-05 11:32:32 +08:00
parent f0ee63e642
commit cb4ffa13e9
21 changed files with 999 additions and 117 deletions
@@ -0,0 +1,164 @@
+:host {
+  display: block;
+  margin-bottom: 30rpx;
+}
+.identity {
+  position: relative;
+  overflow: hidden;
+  border-radius: 28rpx;
+  border: 1rpx solid #ead8ca;
+  padding: 25rpx;
+  background: linear-gradient(125deg, #fff3e5, #f0e9f8);
+  box-shadow: 0 14rpx 35rpx #79543a0b;
+  color: #604a40;
+}
+.id-top {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding-bottom: 20rpx;
+  border-bottom: 1rpx solid #dfcdbf;
+}
+.brand {
+  display: flex;
+  gap: 9rpx;
+  align-items: center;
+}
+.brand image {
+  width: 44rpx;
+  height: 44rpx;
+}
+.brand-name,
+.brand-en {
+  display: block;
+}
+.brand-name {
+  font-size: 18rpx;
+  font-weight: 600;
+  color: #795a4b;
+}
+.brand-en {
+  font-size: 11rpx;
+  letter-spacing: 2rpx;
+  color: #a48d7e;
+}
+.id-title {
+  font-size: 23rpx;
+  letter-spacing: 3rpx;
+  font-weight: 600;
+}
+.id-body {
+  display: flex;
+  gap: 24rpx;
+  padding: 24rpx 0;
+}
+.portrait {
+  width: 166rpx;
+  height: 180rpx;
+  flex: none;
+  border: 6rpx solid #fffaf4;
+  border-radius: 18rpx;
+  overflow: hidden;
+  background: #fffaf4;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.portrait image {
+  width: 100%;
+  height: 100%;
+}
+.details {
+  flex: 1;
+  min-width: 0;
+}
+.pet-name {
+  display: block;
+  font-size: 34rpx;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.breed {
+  display: block;
+  font-size: 21rpx;
+  color: #886c5f;
+  margin: 2rpx 0 12rpx;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.facts {
+  display: flex;
+  gap: 22rpx;
+}
+.facts > view {
+  flex: 1;
+  min-width: 0;
+}
+.label {
+  display: block;
+  font-size: 17rpx;
+  color: #a48d7e;
+}
+.value {
+  display: block;
+  font-size: 21rpx;
+  font-weight: 500;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.coat {
+  margin-top: 9rpx;
+}
+.id-bottom {
+  border-top: 1rpx solid #dfcdbf;
+  padding-top: 15rpx;
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  gap: 10rpx;
+}
+.number {
+  display: block;
+  font-size: 18rpx;
+  letter-spacing: 1rpx;
+  color: #795a4b;
+}
+.motto {
+  font-size: 16rpx;
+  color: #886c5f;
+  max-width: 200rpx;
+  text-align: right;
+}
+.card-actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 16rpx;
+  margin-top: 12rpx;
+}
+.card-actions button {
+  margin: 0;
+  padding: 9rpx 20rpx;
+  border: 1rpx solid #ead8ca;
+  border-radius: 99rpx;
+  background: #fffaf4;
+  color: #886c5f;
+  font-size: 22rpx;
+  line-height: 1.5;
+}
+.card-actions .save {
+  background: #fff0e2;
+  color: #b95738;
+  border-color: #f1d6c4;
+}
+.export-canvas {
+  position: fixed;
+  left: -2000px;
+  top: 0;
+  width: 600px;
+  height: 380px;
+  pointer-events: none;
+}