|
|
@@ -0,0 +1,177 @@
|
|
|
+<template>
|
|
|
+ <div class="check-page flex-col">
|
|
|
+ <div class="main-container flex-col">
|
|
|
+ <div class="content-wrapper flex-row justify-between">
|
|
|
+ <div class="left-panel flex-col justify-between">
|
|
|
+ <div class="tips-container flex-row">
|
|
|
+ <img class="tips-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/tips-icon.png" />
|
|
|
+ <span class="tips-tex">请在圆盘上摆上鞋子（注意左右脚），要求鞋外侧朝向拍照机，鞋子中轴线和红外线对齐</span>
|
|
|
+ <img class="close-icon" referrerpolicy="no-referrer" src="@/assets/images/Photography/close-icon.png" />
|
|
|
+ </div>
|
|
|
+ <div class="camera-preview flex col center ">
|
|
|
+ <span v-if="!imageUrl" class="fs-14">这是一个面对鞋子的镜头</span>
|
|
|
+ <img v-if="imageUrl" class="camera-img" :src="imageUrl" />
|
|
|
+ <span v-if="imageUrl" class="camera-description">这是一张用于检查镜头是否合适的测试图</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="example-image flex-col"><span class="example-text">示范图片</span></div>
|
|
|
+ </div>
|
|
|
+ <div v-if="!imageUrl" class="action-button flex cente">
|
|
|
+ <div @click="toPhoto" class="check-button button--primary1 flex-col"><span class="button-text">拍照检查</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ <div v-else class="action-button flex center">
|
|
|
+ <div @click="imageUrl = ''" class="check-button button--white flex-col">
|
|
|
+ <span class="button-text">重新拍照检查</span>
|
|
|
+ </div>
|
|
|
+ <router-link class="mar-left-20 " :to="{
|
|
|
+ name: 'PhotographyShot'
|
|
|
+ }">
|
|
|
+ <div class="check-button button--primary1 flex-col">
|
|
|
+ <span class="button-text">确认无误，下一步</span>
|
|
|
+ </div>
|
|
|
+ </router-link>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script>
|
|
|
+const url = 'https://ossimg.valimart.net/uploads/vali_ai/20240312/171022217892595.png'
|
|
|
+export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ imageUrl: '',
|
|
|
+
|
|
|
+ };
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ toPhoto() {
|
|
|
+ this.imageUrl = url
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style scoped lang="scss">
|
|
|
+.check-page {
|
|
|
+ background-color: rgba(234, 236, 237, 1);
|
|
|
+ position: relative;
|
|
|
+ width: 1200px;
|
|
|
+ height: 768px;
|
|
|
+ overflow: hidden;
|
|
|
+
|
|
|
+ .main-container {
|
|
|
+ width: 1200px;
|
|
|
+ height: 739px;
|
|
|
+ margin-bottom: 1px;
|
|
|
+
|
|
|
+ .content-wrapper {
|
|
|
+ width: 896px;
|
|
|
+ height: 644px;
|
|
|
+ margin: 10px 0 0 284px;
|
|
|
+
|
|
|
+ .left-panel {
|
|
|
+ width: 633px;
|
|
|
+ height: 644px;
|
|
|
+
|
|
|
+ .tips-container {
|
|
|
+ background-color: rgba(255, 241, 222, 0.8);
|
|
|
+ border-radius: 4px;
|
|
|
+ width: 633px;
|
|
|
+ height: 40px;
|
|
|
+ border: 1px solid rgba(255, 228, 190, 1);
|
|
|
+ justify-content: flex-center;
|
|
|
+
|
|
|
+ .tips-icon {
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ margin: 12px 0 0 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tips-tex {
|
|
|
+ width: 549px;
|
|
|
+ height: 22px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: NaN;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 22px;
|
|
|
+ margin: 9px 0 0 7px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .close-icon {
|
|
|
+ width: 12px;
|
|
|
+ height: 12px;
|
|
|
+ margin: 14px 16px 0 17px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera-preview {
|
|
|
+ box-shadow: 0px 2px 10px 0px rgba(0, 32, 78, 0.1);
|
|
|
+ background-color: rgba(255, 255, 255, 1);
|
|
|
+ height: 600px;
|
|
|
+ width: 600px;
|
|
|
+ margin: 4px 0 0 16px;
|
|
|
+ position: relative;
|
|
|
+ .camera-description{
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20px;
|
|
|
+ width: 60%;
|
|
|
+ padding: 8px 20px;
|
|
|
+ background: rgba($color: #ffffff, $alpha: .2);
|
|
|
+ border-radius: 20px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .camera-img {
|
|
|
+ width: 100%;
|
|
|
+
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .example-image {
|
|
|
+ background-color: rgba(216, 216, 216, 1);
|
|
|
+ height: 200px;
|
|
|
+ margin-top: 10px;
|
|
|
+ width: 200px;
|
|
|
+
|
|
|
+ .example-text {
|
|
|
+ width: 56px;
|
|
|
+ height: 20px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ color: rgba(71, 71, 71, 1);
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: NaN;
|
|
|
+ text-align: left;
|
|
|
+ white-space: nowrap;
|
|
|
+ line-height: 20px;
|
|
|
+ margin: 90px 0 0 72px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .action-button {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 28px;
|
|
|
+
|
|
|
+ .check-button {
|
|
|
+ .button-text {
|
|
|
+ width: 180px;
|
|
|
+ overflow-wrap: break-word;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: center;
|
|
|
+ white-space: nowrap;
|
|
|
+ height: 40px;
|
|
|
+ line-height: 40px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
