CameraMachine/frontend/src/views/Photography/shot.vue

<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">
                <el-input  class="input-item" v-model="input2" placeholder="请输入货号">
                  <template #append>
                    <el-button class="input-button"  type="primary" @click="input2 = ''">确认</el-button>
                  </template>
                </el-input>
         
              </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-item{
                ::v-deep{
                  .el-input__inner{
                    height: 36px;
                    line-height: 36px;
                  }
                }
              }
           
            }
          }
          .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>