mod: 拍摄

frontend/src/App.vue

@@ -21,3 +21,7 @@
   filter: drop-shadow(0 0 2em #42b883aa);
 }
 </style>
+<style lang="scss">
+  @use '@/styles/index.scss'
+</style>
+

frontend/src/router/index.ts

@@ -10,6 +10,11 @@ const routes: RouteRecordRaw[] = [
         path: "/home",
         name: "home",
         component: () => import("@/views/Home/index.vue"),
+    },
+    {
+        path: "/photography",
+        name: "Photography",
+        component: () => import("@/views/Photography/index.vue"),
     }
 ];
 

frontend/src/styles/color.scss

@@ -0,0 +1,22 @@
+$primary: #2CFFFC;
+$primary1 : #68BCA5;
+$blue1 : #0000ff;
+
+$primary2 : #608DFF;
+
+
+
+$color-black : #000;
+$color-black-1 : #585858;
+$color-black-2 : #535353;
+$color-black-3 : #454545;
+$color-black-4 : #333333;
+$color-black-5 : #666666;
+$color-black-6 : #999999;
+$color-black-7 : #212121;
+$color-white : #ffffff;
+$color-white-1 : #eeeeee;
+$color-white-2 : #b0b0b0;
+$color-white-3 : #eeeeee;
+$color-white-4 : #eeeeee;
+

frontend/src/styles/index.scss

@@ -0,0 +1,15 @@
+@use "./pub.scss" ;
+@use "./lanhu.scss" ;
+@use "./color.scss"  as *;
+
+.button--primary1{
+  color: #fff !important;
+  background: linear-gradient(135deg, #2FB0FF 0%, #B863FB 100%) !important;
+
+  border:none !important;
+  border-radius: 4px;
+  &.disabled{
+    pointer-events:none;
+    opacity: .6;
+  }
+}

frontend/src/styles/lanhu.scss

@@ -0,0 +1,66 @@
+
+body * {
+  box-sizing: border-box;
+  flex-shrink: 0;
+}
+body {
+  font-family: PingFangSC-Regular, Roboto, Helvetica Neue, Helvetica, Tahoma,
+    Arial, PingFang SC-Light, Microsoft YaHei;
+}
+button {
+  margin: 0;
+  padding: 0;
+  border: 1px solid transparent;
+  outline: none;
+  background-color: transparent;
+}
+
+button:active {
+  opacity: 0.6;
+}
+.flex-col {
+  display: flex;
+  flex-direction: column;
+}
+.flex-row {
+  display: flex;
+  flex-direction: row;
+}
+.justify-start {
+    display: flex;
+    justify-content: flex-start;
+  }
+.justify-center {
+    display: flex;
+    justify-content: center;
+}
+  
+.justify-end {
+    display: flex;
+    justify-content: flex-end;
+}
+.justify-evenly {
+    display: flex;
+    justify-content: space-evenly;
+}
+.justify-around {
+    display: flex;
+    justify-content: space-around;
+}
+.justify-between {
+    display: flex;
+    justify-content: space-between;
+}
+.align-start {
+    display: flex;
+    align-items: flex-start;
+}
+.align-center {
+    display: flex;
+    align-items: center;
+}
+.align-end {
+    display: flex;
+    align-items: flex-end;
+}
+   

frontend/src/styles/pub.scss

@@ -0,0 +1,244 @@
+@use "./color.scss"  as *;
+
+.flex { display: flex; display: -webkit-flex;  align-items: center; justify-content: center;}
+.flex.left { justify-content: flex-start}
+.flex.center { justify-content: center}
+.flex.col { flex-direction: column;}
+.flex.right { justify-content:flex-end}
+.flex.around { justify-content: space-around }
+.flex.between { justify-content: space-between }
+.flex.wrap {     flex-wrap: wrap; }
+.flex.top {align-items: flex-start}
+.flex.bottom { align-items: flex-end}
+.flex-item { flex: 1}
+.flex-item.left { text-align: left}
+.flex-item.right { text-align: right}
+
+.f-left { float: left}
+.f-right { float: right}
+
+.clear, .clearfix:after {
+  clear: both;
+}
+.clear, .clearfix:before, .clearfix:after {
+  display: block;
+  overflow: hidden;
+  visibility: hidden;
+  width: 0; height: 0;
+}
+.clearfix:before, .clearfix:after {
+  content: '';
+}
+.clearfix {
+  *zoom: 1;
+}
+.te-l { text-align:left;}
+.te-c { text-align:center;}
+.te-r { text-align:right;}
+
+.chaochu	{ display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
+.chaochu_1	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 1;-webkit-box-orient: vertical; word-break:break-all;}
+.chaochu_2	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical; word-break:break-all;}
+.chaochu_3	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 3;-webkit-box-orient: vertical; word-break:break-all;}
+.chaochu_4	{overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-line-clamp: 4;-webkit-box-orient: vertical; word-break:break-all;}
+
+.cu-p { cursor: pointer;}
+.line-20 { line-height: 20px}
+.line-30 { line-height: 30px}
+.line-40 { line-height: 40px}
+.line-50 { line-height: 50px}
+.mar-top-5 { margin-top: 5px;}
+.mar-top-10 { margin-top: 10px;}
+.mar-top-15 { margin-top: 15px;}
+.mar-top-20 { margin-top: 20px;}
+.mar-top-30 { margin-top: 30px;}
+.mar-top-40 { margin-top: 40px;}
+.mar-top-50 { margin-top: 50px;}
+.mar-left-10 { margin-left: 10px;}
+.mar-left-20 { margin-left: 20px;}
+.mar-left-30 { margin-left: 30px;}
+.mar-left-40 { margin-left: 40px;}
+.mar-left-50 { margin-left: 50px;}
+.mar-right-5 { margin-right: 5px;}
+.mar-right-10 { margin-right: 10px;}
+.mar-right-20 { margin-right: 20px;}
+.mar-right-30 { margin-right: 30px;}
+.mar-right-40 { margin-right: 40px;}
+.mar-right-50 { margin-right: 50px;}
+.fs-11 { font-size: 11px}
+.fs-12 { font-size: 12px}
+.fs-14 { font-size: 14px}
+.fs-15 { font-size: 15px}
+.fs-16 { font-size: 16px}
+.fs-17 { font-size: 17px}
+.fs-18 { font-size: 18px}
+.fs-19 { font-size: 19px}
+.fs-20 { font-size: 20px}
+.fs-30 { font-size: 30px}
+
+
+
+.c-primary {color:$primary2 }
+.c-blue {color: $blue1 }
+.c-333 { color:#333; }
+.c-666 { color:#666; }
+.c-999 { color:#999; }
+.c-fff { color:#fff; }
+.c-eee { color:#eee; }
+.c-b0 { color: #b0b0b0;;}
+.bg-fff { background: #fff;}
+
+.fw-b{
+  font-weight: 500;
+}
+.fw-b6{
+  font-weight: 600;
+}
+.pad-5 { padding: 5px;}
+.pad-10 { padding: 10px;}
+.pad-20 { padding: 20px;}
+.pad-30 { padding: 30px;}
+.pad-40 { padding: 40px;}
+.pad-50 { padding: 50px;}
+.w-full { width: 100%}
+.h-full { height: 100% }
+
+
+
+::-webkit-scrollbar {/*滚动条整体样式*/ width: 8px;     /*高宽分别对应横竖滚动条的尺寸*/ height: 8px; background: #000;}
+::-webkit-scrollbar-thumb {/*滚动条里面小方块*/ border-radius: 10px;  background: #ddd;}
+::-webkit-scrollbar-track {/*滚动条里面轨道*/ -webkit-box-shadow: none; border-radius: 10px; background: none;}
+
+
+.tabs { display: flex; height: 50px; line-height: 50px; border-bottom: 2px solid #dfe4ed; margin-bottom: 15px;  justify-items: left;}
+.tabs .tab { margin-right: 10px; padding: 0 10px; position: relative; cursor: pointer; height: 50px; line-height: 50px; }
+.tabs .tab.active { color:$primary2}
+.tabs .tab.active::after { content: ""; position: absolute; left: 0;  right: 0; bottom: -2px; height: 2px; background: $primary2;}
+
+/*div page*/
+.bg-efefef { background: #efefef;}
+.anm { transition: 0.5s;  }
+
+.page—wrap {
+  width: 1200px;
+  margin:  0 auto;
+}
+
+.el-button__primary {
+  background: #2CFFFC;
+  color: #000;
+  &:hover,&.active {
+    background: rgba(0, 244, 34, 1);
+    color: #000;
+  }
+}
+
+.relative{
+  position: relative;
+}
+.middle{
+  vertical-align: middle;
+}
+.bor-radius-10{
+  border-radius: 10px;
+  overflow: hidden;
+}
+.bor-radius-4{
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.miniappIcon{
+  top:8px;
+}
+// 放大元素  鼠标移入
+.zoom-ele{
+  overflow: hidden;
+  cursor: pointer;
+  img{
+    transition: transform 0.3s;
+    display: block;
+    &:hover{
+      transform: scale(1.1);
+    }
+  }
+}
+
+// 放大元素  鼠标点击
+.magnify-ele{
+  transition: transform 0.4s;
+  &:active{
+    transform: scale(1.2);
+  }
+}
+
+/*单行溢出隐藏*/
+.overflow1{
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+/*两行溢出隐藏*/
+.overflow2{
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.cur-p{
+  cursor: pointer;
+}
+.disable-el{
+  pointer-events: none;
+}
+
+
+
+.grayscale {
+  >div {
+    filter: grayscale(1);
+  }
+  ~div img {
+    filter: grayscale(1);
+  }
+}
+
+
+.button-black {
+  background: $color-black !important;
+  color: #fff !important;
+  &:hover {
+    background: $color-black-7 !important;
+  }
+  &.active {
+    background: linear-gradient(135deg, #2FB0FF 0%, #B863FB 100%) !important;
+  }
+}
+
+.nav-back {
+  background: linear-gradient( 90deg, #6B6394 0%, #3A345A 100%);
+  border-radius: 8px;
+  padding: 0 15px;
+  color: #fff;
+  padding-left: 30px;
+  position: relative;
+  height: 30px;
+  line-height: 30px;
+  font-size: 14px;
+  margin-right: 15px;
+  &:before {
+    content: "";
+    display: block;
+    width: 12px;
+    height: 12px;
+    border-left:1px solid  #D8D8D8;
+    border-bottom:1px solid  #D8D8D8;
+    position: absolute;
+    left:11px;
+    top:50%;
+    margin-top: -5px;
+    transform:rotate(45deg);
+  }
+}
+
+

frontend/src/views/Photography/index.vue

@@ -0,0 +1,575 @@
+<template>
+  <div class="photography-page flex-col">
+    <div class="main-container flex-col">
+      <div class="content-wrapper flex-row">
+        <div class="step-number flex-col"><span class="text_22">1</span></div>
+        <div class="step-one flex-col justify-between">
+          <div class="step-header flex-row">
+            <span class="step-title">第一步：获取商品货号</span>
+            <img
+              class="step-icon"
+              referrerpolicy="no-referrer"
+              src="@/assets/images/Photography/step1-icon.png"
+            />
+            <img
+              class="step-divider"
+              referrerpolicy="no-referrer"
+              src="@/assets/images/Photography/step-divider-line.png"
+            />
+          </div>
+          <div class="step-content flex-row justify-between">
+            <div class="method-container flex-col">
+              <div class="auto-method flex-row justify-between">
+                <div class="text-method-tag flex-col"><span class="text_4">自动获取</span></div>
+                <span class="method-description">用遥控器扫描商品资料二维码</span>
+              </div>
+              <div class="scan-method flex-row justify-between">
+                <div class="remote-control flex-col">
+                  <div class="scan-button flex-col"></div>
+                  <img
+                    class="scan-line"
+                    referrerpolicy="no-referrer"
+                    src="@/assets/images/Photography/remote-scan-line.png"
+                  />
+                </div>
+                <span class="scan-label">遥控器扫描键</span>
+              </div>
+              <div class="manual-method flex-row justify-between">
+                <div class="method-tag flex-col"><span class="text_7">手动获取</span></div>
+                <span class="method-description">手工输入货号</span>
+              </div>
+              <div class="input-container flex-row">
+                <div class="input-wrapper flex-row justify-end">
+                  <span class="input-placeholder">请输入货号</span>
+                  <div class="confirm-button flex-col"><span class="button-text">确认</span></div>
+                </div>
+              </div>
+            </div>
+            <img
+              class="remote-image"
+              referrerpolicy="no-referrer"
+              src="@/assets/images/Photography/remote-control.png"
+            />
+          </div>
+        </div>
+        <div class="step-two flex-col justify-between">
+          <span class="step-title">第二步：启动拍摄（根据左右脚按遥控器左右键启动）</span>
+          <div class="shooting-container flex-col">
+            <div class="shooting-tips flex-row justify-between">
+              <img
+                class="info-icon"
+                referrerpolicy="no-referrer"
+                src="@/assets/images/Photography/info-icon.png"
+              />
+              <span class="tips-text">遥控左右按键可启动拍摄，中间按钮可在拍摄5张主图后解锁，用于拍摄自定义图</span>
+            </div>
+            <span class="left-foot-text">遥控器左键：控制左脚鞋启动拍摄</span>
+            <div class="remote-control-container flex-row justify-end">
+              <div class="remote-buttons flex-row">
+                <div class="left-button flex-col"></div>
+                <div class="right-button flex-col"></div>
+              </div>
+              <img
+                class="left-button-image"
+                referrerpolicy="no-referrer"
+                src="@/assets/images/Photography/remote-left-button.png"
+              />
+              <img
+                class="right-button-image"
+                referrerpolicy="no-referrer"
+                src="@/assets/images/Photography/remote-right-button.png"
+              />
+            </div>
+            <span class="right-foot-text">遥控器右键：控制右脚鞋启动拍摄</span>
+          </div>
+        </div>
+        <div class="history-section flex-col justify-end">
+          <span class="history-title">拍摄历史</span>
+          <img
+            class="divider-line"
+            referrerpolicy="no-referrer"
+            src="@/assets/images/Photography/divider-line.png"
+          />
+          <div class="empty-state flex-col justify-between">
+            <img
+              class="empty-icon"
+              referrerpolicy="no-referrer"
+              src="@/assets/images/Photography/empty-state-icon.png"
+            />
+            <span class="empty-text">暂无数据</span>
+          </div>
+          <div class="next-step button--primary1 flex-col"><span class="next-step-text">拍摄完毕，进入下一步处理</span></div>
+        </div>
+      </div>
+      <img
+        class="camera-image"
+        referrerpolicy="no-referrer"
+        src="@/assets/images/Photography/camera-icon.png"
+      />
+      <div class="step-number-two flex-col"><span class="step-text">2</span></div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      constants: {}
+    };
+  },
+  methods: {}
+};
+</script>
+<style scoped lang="scss"  >
+.photography-page {
+  background-color: rgba(255, 255, 255, 1);
+  position: relative;
+  width: 1200px;
+  height: 768px;
+  overflow: hidden;
+
+  .main-container {
+    position: relative;
+    width: 1200px;
+    height: 739px;
+    margin-bottom: 1px;
+    .content-wrapper{
+      width: 1180px;
+      height: 738px;
+      margin-left: 20px;
+      .step-number {
+        background-color: rgba(22, 119, 255, 1);
+        border-radius: 50%;
+        height: 32px;
+        margin-top: 51px;
+        width: 32px;
+        .text_22 {
+          width: 6px;
+          height: 22px;
+          overflow-wrap: break-word;
+          color: rgba(255, 255, 255, 1);
+          font-size: 14px;
+          font-weight: NaN;
+          text-align: right;
+          white-space: nowrap;
+          line-height: 22px;
+          margin: 5px 0 0 13px;
+        }
+      }
+      .step-one {
+        width: 426px;
+        height: 521px;
+        margin: 55px 0 0 5px;
+        .step-header {
+          width: 391px;
+          height: 24px;
+          margin-left: 3px;
+          .step-title {
+            width: 160px;
+            height: 24px;
+            overflow-wrap: break-word;
+            color: rgba(0, 0, 0, 0.85);
+            font-size: 16px;
+            font-family: PingFangSC-Medium;
+            font-weight: 500;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 24px;
+          }
+          .step-icon {
+            width: 32px;
+            height: 20px;
+            margin-top: 4px;
+          }
+          .step-divider {
+            width: 191px;
+            height: 1px;
+            margin: 13px 0 0 8px;
+          }
+        }
+        .step-content {
+          width: 426px;
+          height: 469px;
+          margin-top: 28px;
+          .method-container {
+            background-color: rgba(247, 247, 247, 1);
+            height: 469px;
+            width: 353px;
+            .auto-method {
+              width: 253px;
+              height: 24px;
+              margin: 28px 0 0 14px;
+              .text-method-tag {
+                background-color: rgba(0, 174, 30, 1);
+                height: 24px;
+                width: 65px;
+                .text_4 {
+                  width: 56px;
+                  height: 20px;
+                  overflow-wrap: break-word;
+                  color: rgba(255, 255, 255, 1);
+                  font-size: 14px;
+                  font-family: PingFangSC-Semibold;
+                  font-weight: 600;
+                  text-align: left;
+                  white-space: nowrap;
+                  line-height: 20px;
+                  margin: 2px 0 0 4px;
+                }
+              }
+              .method-description {
+                width: 182px;
+                height: 20px;
+                overflow-wrap: break-word;
+                color: rgba(71, 71, 71, 1);
+                font-size: 14px;
+                font-family: PingFangSC-Semibold;
+                font-weight: 600;
+                text-align: left;
+                white-space: nowrap;
+                line-height: 20px;
+                margin-top: 2px;
+              }
+            }
+            .scan-method {
+              width: 263px;
+              height: 246px;
+              margin: 9px 0 0 85px;
+              .remote-control {
+                height: 246px;
+                background: url(@/assets/images/Photography/left-button.png)
+                  0px 0px no-repeat;
+                background-size: 98px 246px;
+                width: 97px;
+                position: relative;
+                .scan-button {
+                  background-color: rgba(0, 174, 30, 1);
+                  border-radius: 50%;
+                  width: 27px;
+                  height: 27px;
+                  margin: 27px 0 0 34px;
+                }
+                .scan-line {
+                  position: absolute;
+                  left: 52px;
+                  top: 40px;
+                  width: 112px;
+                  height: 1px;
+                }
+              }
+              .scan-label {
+                width: 96px;
+                height: 22px;
+                overflow-wrap: break-word;
+                color: rgba(0, 174, 30, 1);
+                font-size: 16px;
+                font-family: PingFangSC-Semibold;
+                font-weight: 600;
+                text-align: left;
+                white-space: nowrap;
+                line-height: 22px;
+                margin-top: 30px;
+              }
+            }
+            .manual-method {
+              width: 155px;
+              height: 24px;
+              margin: 53px 0 0 14px;
+              .method-tag {
+                background-color: rgba(0, 148, 174, 1);
+                height: 24px;
+                width: 65px;
+                .text_7 {
+                  width: 56px;
+                  height: 20px;
+                  overflow-wrap: break-word;
+                  color: rgba(255, 255, 255, 1);
+                  font-size: 14px;
+                  font-family: PingFangSC-Semibold;
+                  font-weight: 600;
+                  text-align: left;
+                  white-space: nowrap;
+                  line-height: 20px;
+                  margin: 2px 0 0 4px;
+                }
+              }
+              .method-description {
+                width: 84px;
+                height: 20px;
+                overflow-wrap: break-word;
+                color: rgba(71, 71, 71, 1);
+                font-size: 14px;
+                font-family: PingFangSC-Semibold;
+                font-weight: 600;
+                text-align: left;
+                white-space: nowrap;
+                line-height: 20px;
+                margin-top: 2px;
+              }
+            }
+            .input-container {
+              width: 260px;
+              height: 36px;
+              margin: 7px 0 42px 83px;
+              .input-wrapper {
+                background-color: rgba(255, 255, 255, 1);
+                border-radius: 6px;
+                width: 260px;
+                height: 36px;
+                border: 1px solid rgba(179, 180, 181, 1);
+                .input-placeholder {
+                  width: 70px;
+                  height: 20px;
+                  overflow-wrap: break-word;
+                  color: rgba(187, 187, 187, 1);
+                  font-size: 14px;
+                  font-weight: NaN;
+                  text-align: left;
+                  white-space: nowrap;
+                  line-height: 20px;
+                  margin: 8px 0 0 10px;
+                }
+                .confirm-button {
+                  background-color: rgba(22, 119, 255, 1);
+                  border-radius: 0px 6px 6px 0px;
+                  height: 36px;
+                  margin-left: 124px;
+                  width: 56px;
+                  .button-text {
+                    width: 28px;
+                    height: 20px;
+                    overflow-wrap: break-word;
+                    color: rgba(255, 255, 255, 1);
+                    font-size: 14px;
+                    font-weight: NaN;
+                    text-align: left;
+                    white-space: nowrap;
+                    line-height: 20px;
+                    margin: 8px 0 0 14px;
+                  }
+                }
+              }
+            }
+          }
+          .remote-image {
+            width: 61px;
+            height: 38px;
+            margin-top: 216px;
+          }
+        }
+      }
+      .step-two {
+        width: 384px;
+        height: 521px;
+        margin: 55px 0 0 7px;
+        .step-title {
+          width: 384px;
+          height: 24px;
+          overflow-wrap: break-word;
+          color: rgba(0, 0, 0, 0.85);
+          font-size: 16px;
+          font-family: PingFangSC-Medium;
+          font-weight: 500;
+          text-align: left;
+          white-space: nowrap;
+          line-height: 24px;
+        }
+        .shooting-container {
+          background-color: rgba(247, 247, 247, 1);
+          width: 353px;
+          height: 469px;
+          margin: 28px 0 0 2px;
+          .shooting-tips {
+            width: 325px;
+            height: 40px;
+            margin: 12px 0 0 15px;
+            .info-icon {
+              width: 16px;
+              height: 16px;
+              margin-top: 2px;
+            }
+            .tips-text {
+              width: 302px;
+              height: 40px;
+              overflow-wrap: break-word;
+              color: rgba(255, 76, 0, 1);
+              font-size: 14px;
+              font-weight: NaN;
+              text-align: left;
+              line-height: 20px;
+            }
+          }
+          .left-foot-text {
+            width: 240px;
+            height: 22px;
+            overflow-wrap: break-word;
+            color: rgba(0, 174, 30, 1);
+            font-size: 16px;
+            font-family: PingFangSC-Semibold;
+            font-weight: 600;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 22px;
+            margin: 36px 0 0 9px;
+          }
+          .remote-control-container {
+            position: relative;
+            width: 280px;
+            height: 298px;
+            margin: 9px 0 0 35px;
+            .remote-buttons {
+              width: 206px;
+              height: 233px;
+              background: url(@/assets/images/Photography/right-button.png)
+                100% no-repeat;
+              background-size: 100% 100%;
+              margin: 30px 0 0 37px;
+              .left-button {
+                background-color: rgba(0, 174, 30, 1);
+                border-radius: 50%;
+                width: 55px;
+                height: 55px;
+                margin: 91px 0 0 1px;
+              }
+              .right-button {
+                background-color: rgba(0, 148, 174, 1);
+                border-radius: 50%;
+                width: 55px;
+                height: 55px;
+                margin: 91px 2px 0 93px;
+              }
+            }
+            .left-button-image {
+              width: 40px;
+              height: 148px;
+              margin: 150px 0 0 -3px;
+            }
+            .right-button-image {
+              position: absolute;
+              left: 0;
+              top: 0;
+              width: 40px;
+              height: 148px;
+            }
+          }
+          .right-foot-text {
+            width: 240px;
+            height: 22px;
+            overflow-wrap: break-word;
+            color: rgba(0, 148, 174, 1);
+            font-size: 16px;
+            font-family: PingFangSC-Semibold;
+            font-weight: 600;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 22px;
+            margin: 12px 0 18px 98px;
+          }
+        }
+      }
+      .history-section {
+        background-color: rgba(234, 236, 237, 1);
+        width: 322px;
+        height: 738px;
+        margin-left: 4px;
+        .history-title {
+          width: 64px;
+          height: 22px;
+          overflow-wrap: break-word;
+          color: rgba(51, 51, 51, 1);
+          font-size: 16px;
+          font-family: PingFangSC-Semibold;
+          font-weight: 600;
+          text-align: center;
+          white-space: nowrap;
+          line-height: 22px;
+          margin: 9px 0 0 10px;
+        }
+        .divider-line {
+          width: 322px;
+          height: 1px;
+          margin-top: 9px;
+        }
+        .empty-state {
+          width: 56px;
+          height: 48px;
+          margin: 253px 0 0 133px;
+          .empty-icon {
+            width: 32px;
+            height: 18px;
+            margin-left: 12px;
+          }
+          .empty-text {
+            width: 56px;
+            height: 20px;
+            overflow-wrap: break-word;
+            color: rgba(153, 153, 153, 1);
+            font-size: 14px;
+            font-weight: NaN;
+            text-align: left;
+            white-space: nowrap;
+            line-height: 20px;
+            margin-top: 10px;
+          }
+        }
+        .next-step {
+          height: 50px;
+          background: url(@/assets/images/Photography/SketchPng0a50a29c175ab72b0f2d38d430200d3e7fa3837ba2ebd7d0dfedebd005804b3a.png)
+            100% no-repeat;
+          background-size: 100% 100%;
+          margin-top: 346px;
+          width: 322px;
+          .next-step-text {
+            width: 192px;
+            height: 22px;
+            overflow-wrap: break-word;
+            color: rgba(255, 255, 255, 1);
+            font-size: 16px;
+            font-weight: NaN;
+            text-align: center;
+            white-space: nowrap;
+            line-height: 22px;
+            margin: 14px 0 0 65px;
+          }
+        }
+      }
+    }
+    .camera-image {
+      position: absolute;
+      left: 304px;
+      top: 212px;
+      width: 111px;
+      height: 111px;
+    }
+    .step-number-two {
+      background-color: rgba(22, 119, 255, 1);
+      border-radius: 50%;
+      height: 32px;
+      width: 32px;
+      position: absolute;
+      left: 450px;
+      top: 51px;
+      .step-text {
+        width: 9px;
+        height: 22px;
+        overflow-wrap: break-word;
+        color: rgba(255, 255, 255, 1);
+        font-size: 14px;
+        font-weight: NaN;
+        text-align: right;
+        white-space: nowrap;
+        line-height: 22px;
+        margin: 5px 0 0 12px;
+      }
+    }
+  }
+}
+
+
+ 
+
+</style>
+
+<style lang="scss" scoped>
+
+</style>