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

<template>

  <headerBar
      title="拍摄商品"
      showUser
      :menu="[
        {
          type:'setting'
        }
    ]"
  />

  <hardware-check/>

  <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="goods_art_no_tpl" placeholder="请输入货号">
                  <template #append>

                    <el-button class="input-button" type="primary" @click="saveGoodsArtNo">确认</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 flex between">
            <div>拍摄记录</div>
            <div class="c-666 fs-12" v-if="goodsList.length">
                    <el-button @click="delAll" class="input-button" type="primary" size="mini">一键删除</el-button>
            </div>
          </span>
          <img class="divider-line" referrerpolicy="no-referrer" src="@/assets/images/Photography/divider-line.png" />



          <div class="history-warp">
            <div v-if="!goodsList.length" class="fs-14 c-666 mar-top-50">
              {{ loading ? '数据正在加载中，请稍候...' : '暂无数据，请先进行拍摄'}}
            </div>
              <div v-else class="history-item clearfix"  v-for="item,index in goodsList" style="padding:10px;">
                <div class="flex  between flex-item  c-333">
                  <div class="chaochu flex-item flex left">货号：{{ item.goods_art_no }}</div>
                  <div class="c-666 fs-12">{{ getTime(item.action_time) }}</div>
                </div>
                <div class="mar-top-10" style="width: 100%" >
                    <component class="history-item_image"
                         v-loading="!image.image_path && runAction.goods_art_no == item.goods_art_no"
                         v-for="image in item.items"
                               :is="image.image_path ? 'div' : 'p'"

                    >
                      <el-popover
                          popper-class="shot-image-popper"
                          placement="left"
                          :hide-after="0"
                          v-if="image.image_path"
                      >
                        <template #reference>
                          <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
                            <template #error>
                              <div class="image-slot"></div>
                            </template>
                          </el-image>
                        </template>


                        <el-image  :src="getFilePath(image.image_path)"  fit="contain" >
                          <template #error>
                            <div class="image-slot"></div>
                          </template>
                        </el-image>
                      </el-popover>


                      <el-image :src="getFilePath(image.image_path)"  fit="contain" v-else>
                        <template #error>
                          <div class="image-slot"></div>
                        </template>
                      </el-image>
                    </component>
                </div>
              </div>

          </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 v-if="goodsList.length" class="next-step button--primary1 flex-col" @click="openPhotographyDetail"><span
              class="next-step-text">拍摄完毕，进入下一步处理</span></div>
        </div>

    </div>
  </div>
</template>
<script setup lang="ts">
import headerBar from '@/components/header-bar/index.vue'
import { ref, reactive, onMounted, onBeforeUnmount,watchEffect } from 'vue'
import icpList from '@/utils/ipc'
import client from "@/stores/modules/client";
import socket from "@/stores/modules/socket";
import { ElMessage ,ElMessageBox } from 'element-plus'
import { getFilePath,getRouterUrl } from '@/utils/appfun'
import {useRouter} from "vue-router";
import HardwareCheck from '@/components/check/index.vue'
import checkInfo from "@/stores/modules/check";


const loading = ref(false)
const runLoading = ref(false)
const takePictureLoading = ref(false)


const clientStore = client();

const Router = useRouter()
const goodsList = ref([])
const  goods_art_no_tpl = ref('')
const  goods_art_no = ref('')
const runAction = ref({
  "action": "",
  "goods_art_no": ""
})

// 初始化 WebSocket 状态管理
const socketStore = socket()

/**
 * 保存货号模板到货号变量中。
 */
function saveGoodsArtNo(){
  if(goods_art_no_tpl.value){
    goods_art_no.value = goods_art_no_tpl.value
    ElMessage.success('商品货号'+goods_art_no.value+'获取成功，请在遥控器上按下左或右脚按键，启动拍摄')
  }
}

/**
 * 获取拍照记录。
 * @param params - 可选参数，用于分页或其他筛选条件。
 */
async function getPhotoRecords(params?:{}) {
  clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
  loading.true = true;
  clientStore.ipc.send(icpList.takePhoto.getPhotoRecords,{
    ...params,
    page:1,
    size:100,
  });
  clientStore.ipc.on(icpList.takePhoto.getPhotoRecords, (event, result) => {

    loading.true = false;
    clientStore.ipc.removeAllListeners(icpList.takePhoto.getPhotoRecords);
    if(result.code === 0){
      goodsList.value = result.data.list
    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
  });
}

/**
 * 执行拍照操作。
 * @param data - 包含拍摄所需的数据对象。
 */
async function runGoods(data) {
  console.log('aa2')
  await socketStore.connectSocket();

  console.log('aa3')
  socketStore.sendMessage({
    type: 'run_mcu',
    data,
  })

  ElMessage.success('开始拍摄，请稍后')
  runLoading.value = true;
  runAction.value = data
  goods_art_no.value = ''
  goods_art_no_tpl.value = ''


  clientStore.ipc.on(icpList.socket.message + '_run_mcu', (event, result) => {

    clientStore.ipc.removeAllListeners(icpList.socket.message + '_run_mcu');
    console.log('_run_mcu');
    console.log(result);
    if(result.code !== 0 && result.msg){
      ElMessage.error(result.msg)
      runLoading.value = false
      return;
    }
  })


}

/**
 * 格式化时间字符串。
 * @param time - 原始时间字符串。
 * @returns 格式化后的时间字符串，若输入为空则返回 null。
 */
const getTime = function(time){
  if(!time) return null
  return time.replace('T',' ').substr(5,11)
}

/**
 * 删除所有商品货号的历史记录。
 */
async function delAll(){
    let params = goodsList.value.map(item=>item.goods_art_no)
    await ElMessageBox.confirm('确定要删除当下的历史记录吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
    })
    del({goods_art_nos:params})
}

/**
 * 删除指定的商品货号。
 * @param params - 包含需要删除的货号列表的对象。
 */
const del = async function(params){

  clientStore.ipc.removeAllListeners(icpList.takePhoto.delectGoodsArts);
  clientStore.ipc.send(icpList.takePhoto.delectGoodsArts,params);
  clientStore.ipc.on(icpList.takePhoto.delectGoodsArts, (event, result) => {
    clientStore.ipc.removeAllListeners(icpList.takePhoto.delectGoodsArts);
    if(result.code === 0){
      ElMessage.info('货号删除成功')
      getPhotoRecords()
    }else if(result.msg) {
      ElMessage.error(result.msg)
    }
  });

}

/**
 * 检查是否可以进入下一步操作。
 */
const  next = async function(){
  if(runLoading.value){
    ElMessage.error('正在拍摄中，请稍候')
    return;
  }
  if(goodsList.length){
    ElMessage.error('请先拍摄商品。')
    return;
  }
}

/**
 * 页面挂载时初始化事件监听器并获取初始数据。
 */
onMounted(async () => {
  // 监听蓝牙扫描事件
  clientStore.ipc.on(icpList.socket.message + '_blue_tooth_scan', (event, result) => {

    console.log('_blue_tooth_scan')
    if (result.code === 0 && result.data?.data) {
      console.log(goods_art_no.value);
      if(!goods_art_no.value){
          ElMessage.error('请先扫描货号或者手动输入货号!')
          return;
      }
      runGoods({
        ...result.data?.data,
        goods_art_no: goods_art_no.value
      })

    }
  });


  await getPhotoRecords();
  // 监听图片处理完成事件
  clientStore.ipc.on(icpList.socket.message + '_image_process', (event, result) => {
    console.log('_image_process')
    console.log(result)
    getPhotoRecords()
    // 延迟两秒再获取一遍数据
    setTimeout(()=>{
      getPhotoRecords()
    },3000)
  })

  // 监听拍照完成事件
  clientStore.ipc.on(icpList.socket.message + '_photo_take', (event, result) => {
    console.log('_photo_take')
    console.log(result)
    if(result.status === 2 && result.msg.includes('执行完成')){
      getPhotoRecords()
      // 延迟两秒再获取一遍数据
      setTimeout(()=>{
        getPhotoRecords()
      },3000)
      takePictureLoading.value = false;
    }

  })

  // 监听拍照完成后的最终状态事件
  clientStore.ipc.on(icpList.socket.message + '_photo_take_finish', (event, result) => {
    console.log('_photo_take_finish')
    console.log(result)
    if(result.code === 0) runLoading.value = false;

  })

  // 监听手动触发拍照事件
  clientStore.ipc.on(icpList.socket.message + '_handler_take_picture', async (event, result) => {
    console.log('_photo_take_finish')
    console.log(result)
    if(result.code === 0){
      if(runLoading.value || takePictureLoading.value){
        ElMessage.error('拍摄程序正在运行，请稍候')
        return
      }

      ElMessage.success('正在拍摄中，请稍候')

      await socketStore.connectSocket();
      socketStore.sendMessage(result.data)
      takePictureLoading.value = true;

      getPhotoRecords()
      // 延迟两秒再获取一遍数据
      setTimeout(()=>{
        getPhotoRecords()
      },3000)

    }

  })

})

const checkInfoStore = checkInfo()
checkInfoStore.set_blue_tooth_scan_NO('')
watchEffect(async ()=>{
  if(checkInfoStore.blue_tooth_scan_NO){
    ElMessage.success('商品货号'+checkInfoStore.blue_tooth_scan_NO+'获取成功，请在遥控器上按下左或右脚按键，启动拍摄')
    goods_art_no.value = checkInfoStore.blue_tooth_scan_NO
    checkInfoStore.set_blue_tooth_scan_NO('')
  }
})


/**
 * 页面卸载时移除所有事件监听器。
 */
onBeforeUnmount(() => {
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_blue_tooth_scan');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_image_process');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_run_mcu');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_photo_take');
  clientStore.ipc.removeAllListeners(icpList.socket.message + '_photo_take_finish');


})

/**
 * 打开主图详情页面。
 */
function openPhotographyDetail() {

  if(takePictureLoading.value){
    ElMessage.error('正在拍摄中，请稍候')
    return;
  }
  const { href } = Router.resolve({
    name: 'PhotographyDetail',
    query:{
      goods_art_nos:goodsList.value.map(item=>item.goods_art_no),
    }
  })

  clientStore.ipc.removeAllListeners(icpList.utils.openMain);
  let params = {
    title: '主图与详情生成',
    width: 1000,
    height: 630,
    frame: true,
    id: "PhotographyDetail",
    url: getRouterUrl(href)
  }
  clientStore.ipc.send(icpList.utils.openMain, params);
}

</script>


<style  lang="scss">
.shot-image-popper {
  width: calc(100vw - 370px) !important;
  left: 20px !important;
  top: 50px !important;
  height: calc(100vh - 70px) !important;
  transform: translate(0px, 0px) !important;

  .el-image {
    width: 100%;
    height:100%;
    display: block;

    .el-image__inner {
      width: 100%;
      height:100%;
      display: block;

    }
  }
}

</style>
<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: calc(100vh - 30px);

        .history-title {
          width: calc(100% - 20px);
          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);

          .history-item {
            .history-item_image {
              width: 70px;
              height: 70px;
              float: left;
              margin: 6px 0 0 6px;
              background: #F7F7F7;
              .el-image {
                display: block;
                width:100%;
                height: 100%;
              }
              &:first-child {
                width: 146px;
                height: 146px;
              }
              &.el-loading-parent--relative{
                ::v-deep {
                  .el-loading-mask { display: none}
                }
              }

            }

            p:first-of-type {
              ::v-deep {
                .el-loading-mask { display: block !important;}
              }
            }
          }
        }

        .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>