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

<template>
  <div class="photography-page flex-col">
    <div class="main-container">
      <div class="content-wrapper flex-row">
        <img class="camera-image" referrerpolicy="no-referrer" src="@/assets/images/Photography/camera-icon.png" />
        <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-number flex-col"><span class="text_22">2</span></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>
      <div class="history-section flex-col">
          <span class="history-title">拍摄历史</span>
          <img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />
          <div class="history-warp">
            <div class="history-item " style="padding:10px;">
              <div class="flex-item left c-333">货号：AU7729 8192 9291</div>
              <el-skeleton class="mar-top-10" style="width: 100%" :loading="loading" animated :throttle="500">
                <template #template>
                  <div class="flex top  left">
                    <el-skeleton-item variant="image" style="width: 146px; height: 146px" />
                    <div style=" flex: 1; height: 100%; margin-top: -6px;" class="flex top wrap between">
                      <el-skeleton-item v-for="i in 4" :key="i" variant="image"
                        style="width: 70px; height: 70px;margin:  6px 0 0 6px; " />
                    </div>
                  </div>
                </template>
                <template #default>
                  <div class="flex top  left">
                    <el-popover v-if="test_image_url" width="280" height="280" trigger="hover">
                      <template #reference>
                        <el-image :src="ossResize(test_image_url, {
                          m: 'fill',
                          h: 146,
                          w: 146
                        })" fit="contain" class="cur-p" style="width: 146px; height: 146px" />
                      </template>
                      <el-image style="width: 250px;height: 250px" fit="contain" :src="ossResize(test_image_url, {
                        m: 'fill',
                        h: 250,
                        w: 250
                      })
                        " />
                    </el-popover>
                    <div style=" flex: 1; height: 100%; margin-top: -6px;" class="flex top wrap between">
                      <template v-for="i in 4" :key="i">
                        <el-popover v-if="test_image_url" width="280" height="280" trigger="hover">
                          <template #reference>
                            <el-image :src="ossResize(test_image_url, {
                              m: 'fill',
                              h: 80,
                              w: 80
                            })" fit="contain" class="cur-p" style="width: 70px; height: 70px;margin:  6px 0 0 6px;" />
                          </template>
                          <el-image style="width: 250px;height: 250px" fit="contain" :src="ossResize(test_image_url, {
                            m: 'fill',
                            h: 250,
                            w: 250
                          })
                            " />
                        </el-popover>
                      </template>
                    </div>
                  </div>
                </template>
              </el-skeleton>
            </div>
            <template v-for="i in 5" :key="i">
              <img class="divider-line" referrerpolicy="no-referrer"
                src="@/assets/images/Photography/divider-line.png" />
              <div class="history-item" style="padding:10px;">
                <div class="flex-item left c-333">货号：AU7729 8192 9291</div>
                <el-skeleton class="mar-top-10" style="width: 100%" :loading="loading" animated :throttle="500">
                  <template #template>
                    <div class="flex top  left">
                      <el-skeleton-item variant="image" style="width: 146px; height: 146px" />
                      <div style=" flex: 1; height: 100%; margin-top: -6px;  margin-left: 8px;"
                        class="flex top wrap between">
                        <el-skeleton-item v-for="i in 4" :key="i" variant="image"
                          style="width: 70px; height: 70px;margin:  6px 0 0 0px; " />
                      </div>
                    </div>
                    <div style=" flex: 1; height: 100%; margin-top: 4px;" class="flex top wrap between">
                      <el-skeleton-item v-for="i in 4" :key="i" variant="image"
                        style="width: 70px; height: 70px;margin:  6px 0 0 0px; " />
                    </div>
                  </template>
                  <template #default>
                    <div class="flex top  left">
                      <el-image :src="ossResize(test_image_url, {
                        m: 'fill',
                        h: 80,
                        w: 80
                      })" fit="contain" style="width: 146px; height: 146px" />
                      <div style=" flex: 1; height: 100%; margin-top: -6px;  margin-left: 8px;"
                        class="flex top wrap between">
                        <el-image v-for="i in 4" :key="i" :src="ossResize(test_image_url, {
                          m: 'fill',
                          h: 80,
                          w: 80
                        })" fit="contain" style="width: 70px; height: 70px;margin:  6px 0 0 0px; " />
                      </div>
                    </div>
                    <div style=" flex: 1; height: 100%; margin-top: 4px; margin-left: -6px;" class="flex top wrap left">
                      <el-image v-for="i in 6" :key="i" :src="ossResize(test_image_url, {
                        m: 'fill',
                        h: 80,
                        w: 80
                      })" fit="contain" style="width: 70px; height: 70px; margin: 6px 0 0 7px; " />
                    </div>
                  </template>
                </el-skeleton>
              </div>

            </template>
          </div>

          <!-- 无数据 -->
          <!-- <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 @click="loading = !loading" class="next-step button--primary1 flex-col"><span
              class="next-step-text">拍摄完毕，进入下一步处理</span></div>
        </div>
   
    </div>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { ossResize } from '@/utils/appfun'
const input2 = ref('')
const loading = ref(true)
const test_image_url = ref('https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png')


</script>

<style scoped lang="scss">
.photography-page {
  background-color: rgba(255, 255, 255, 1);
  position: relative;
  .main-container {
    position: relative;
    display: flex;
    .content-wrapper {
      flex-grow: 1 ;
      position: relative;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin:  auto;
      justify-content: center;

  
      .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 {
                :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;
          }
        }
      }

    
    }

    .camera-image {
      position: absolute;
      left: 620px;
      top: 220px;
      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;
      }
    }
  }
}

.history-section {
        background-color: rgba(234, 236, 237, 1);
        width: 332px;
        height: 100vh;

        .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: 100%;
          height: 1px;
          margin-top: 9px;
        }

        .history-warp {
          width: 100%;
          flex-grow: 1;
          overflow: auto;
          height: calc(100% - 125px);
        }

        .empty-state {
          width: 56px;
          height: 48px;

          .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-size: 100% 100%;
          width: 100%;
          line-height: 50px;

          .next-step-text {
            width: 100%;
            overflow-wrap: break-word;
            color: rgba(255, 255, 255, 1);
            font-weight: NaN;
            text-align: center;
            white-space: nowrap;

          }
        }
      }
</style>

<style lang="scss" scoped></style>