|
|
@@ -41,6 +41,20 @@
|
|
|
</a-row>
|
|
|
</a-col>
|
|
|
<a-col :span="8">
|
|
|
+ <div class="cic-img">
|
|
|
+ <div class="double">
|
|
|
+ <div class="imgs">
|
|
|
+ <img class="__hover" :src="formData.certificateUrl" @click="onViewImg(formData.certificateUrl)"/>
|
|
|
+ <img class="__hover" :src="formData.captureUrl" @click="onViewImg(formData.certificateUrl)"/>
|
|
|
+ </div>
|
|
|
+ <div class="similar">
|
|
|
+ <div class="text">
|
|
|
+ <span class="small">相似度</span>
|
|
|
+ <span>{{Number(formData.similarity).toFixed(2)}}<span class="small">%</span></span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
</a-col>
|
|
|
</a-row>
|
|
|
</a-form>
|
|
|
@@ -175,4 +189,68 @@ defineExpose({
|
|
|
overflow-y: auto;
|
|
|
overflow-x: hidden;
|
|
|
}
|
|
|
+.cic-img {
|
|
|
+ margin-left: 20px;
|
|
|
+ width: 100%;
|
|
|
+ display: flex;
|
|
|
+ .double {
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ position: relative;
|
|
|
+ overflow: hidden;
|
|
|
+ .imgs {
|
|
|
+ height: 100%;
|
|
|
+ flex: 1;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(2, 1fr);
|
|
|
+ gap: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ >img {
|
|
|
+ width: 100%;
|
|
|
+ height: 160px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .similar {
|
|
|
+ position: absolute;
|
|
|
+ width: 64px;
|
|
|
+ height: 64px;
|
|
|
+ background-color: rgba(0, 103, 247, 0.8);
|
|
|
+ border-radius: 50%;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ bottom: -25px;
|
|
|
+ text-align: center;
|
|
|
+ &:before {
|
|
|
+ content: '';
|
|
|
+ width: 74px;
|
|
|
+ height: 74px;
|
|
|
+ background-color: rgba(0,103,247,0.2);
|
|
|
+ border-radius: 50%;
|
|
|
+ position: absolute;
|
|
|
+ z-index: 0;
|
|
|
+ }
|
|
|
+ .text {
|
|
|
+ z-index: 2;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ position: absolute;
|
|
|
+ top: 10px;
|
|
|
+ span {
|
|
|
+ font-family: PingFang SC, PingFang SC;
|
|
|
+ font-weight: 600;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ line-height: 1;
|
|
|
+ &.small {
|
|
|
+ font-size: 10px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</style>
|
CzRger