first

src/views/contract/cpns/ContractSignPanel.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+import { QrCodePanel } from '@/components'
+import SignSteps from './SignSteps.vue'
+
+interface Props {
+  expiresIn?: number
+}
+
+withDefaults(defineProps<Props>(), { expiresIn: 272 })
+
+const emit = defineEmits<{ refresh: [] }>()
+</script>
+
+<template>
+  <div class="sign-panel">
+    <div class="sign-panel__left">
+      <QrCodePanel :expires-in="expiresIn" @refresh="emit('refresh')" />
+    </div>
+    <div class="sign-panel__right">
+      <SignSteps />
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.sign-panel {
+  .flex(row, flex-start, stretch);
+  gap: @spacing-lg;
+  padding: @spacing-xl;
+  border-radius: @radius-lg;
+  background: @white;
+  box-shadow: @shadow-base;
+
+  &__left {
+    .flex(row, center);
+    flex-shrink: 0;
+    padding: @spacing-lg;
+    border-radius: @radius-base;
+    background: @bg-color-light;
+  }
+
+  &__right {
+    flex: 1;
+    min-width: 0;
+  }
+}
+</style>