356 lines
7.6 KiB
Vue
356 lines
7.6 KiB
Vue
<template>
|
|
<div class="equipment-index">
|
|
<!-- 背景图片 -->
|
|
<div
|
|
class="absolute inset-0 bg-cover bg-center bg-no-repeat equipment-bg"
|
|
:style="{ backgroundImage: getBackgroundImage(IMAGE_PATHS.EQUIPMENT.BG) }"
|
|
>
|
|
<div class="equipment-bar">
|
|
<img src="@/assets/images/equipment/侧边导航栏.png" alt="" :hidden="hiddenbar" />
|
|
<div class="equipment-item" :hidden="hiddenbar">
|
|
<span>
|
|
<img src="@/assets/images/equipment/选中按钮.png" alt="" />
|
|
<img src="@/assets/images/equipment/手机-亮.png" alt="" />
|
|
</span>
|
|
<div>
|
|
<img src="@/assets/images/equipment/设备列表合图.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<!-- 设备准备按钮 -->
|
|
<div class="equipment-bt">
|
|
<img src="@/assets/images/equipment/按钮选中-设备准备.png" alt="" />
|
|
</div>
|
|
<div
|
|
:class="hiddenbar ? 'equipment-unfold1' : 'equipment-unfold2'"
|
|
@click="hiddenbarclick()"
|
|
>
|
|
<img
|
|
:src="
|
|
hiddenbar
|
|
? '/src/assets/images/equipment/按钮-展开.png'
|
|
: '/src/assets/images/equipment/按钮-收缩.png'
|
|
"
|
|
alt=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div class="equipment-layout">
|
|
<div class="equipment-home">
|
|
<div
|
|
class="equipment-leftbutton"
|
|
@click="prevPhone"
|
|
:style="{ visibility: currentIndex > 0 ? 'visible' : 'hidden' }"
|
|
>
|
|
<img src="@/assets/images/equipment/按钮-左滑.png" alt="" />
|
|
</div>
|
|
<div class="equipment-phoneImg">
|
|
<img :src="phoneList[currentIndex].phoneImg" alt="" />
|
|
</div>
|
|
<div
|
|
class="equipment-rightbutton"
|
|
@click="nextPhone"
|
|
:style="{ visibility: currentIndex < phoneList.length - 1 ? 'visible' : 'hidden' }"
|
|
>
|
|
<img src="@/assets/images/equipment/按钮-右滑.png" alt="" />
|
|
</div>
|
|
</div>
|
|
<div class="equipment-purpose">
|
|
<div class="plate">
|
|
<img src="@/assets/images/equipment/浮空屏.png" alt="" />
|
|
</div>
|
|
|
|
<div class="title">
|
|
<img :src="platetitleList[currentIndex].title" alt="" />
|
|
</div>
|
|
<div class="plate-content">
|
|
<div class="text">
|
|
<img :src="platetextList[currentIndex].text" alt="" />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="shooting-return">
|
|
<img src="@/assets/images/shooting/返回.png" alt="" @click="back" />
|
|
</div>
|
|
|
|
<!-- 引导步骤 -->
|
|
<GuideSteps
|
|
:steps="steps"
|
|
:highlight-selector="currentHighlight"
|
|
:highlight-padding="12"
|
|
:highlight-radius="20"
|
|
@step-change="handleStepChange"
|
|
position-offset-y="85%"
|
|
>
|
|
<GuideStepsItem>
|
|
<img src="@/assets/images/equipment/设备准备引导1.png" alt="" />
|
|
</GuideStepsItem>
|
|
</GuideSteps>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
<script lang="tsx" setup>
|
|
import { getBackgroundImage, getStaticImage, IMAGE_PATHS } from '@/utils'
|
|
import { GuideSteps, GuideStepsItem } from '@/components/Guide'
|
|
import { ref, computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
|
|
const router = useRouter()
|
|
|
|
const back = () => {
|
|
// 跳转设备准备
|
|
router.back()
|
|
}
|
|
const steps = [
|
|
{ id: 'step1', content: '先认识 Vlog：点击右侧「1.vlog初识」继续' },
|
|
{ id: 'step2', content: '这是主要内容区域的边框' }
|
|
]
|
|
const stepIndex = ref(0)
|
|
const hiddenbar = ref(false)
|
|
const currentIndex = ref(0) // 当前显示的图片索引
|
|
|
|
const phoneList = ref([
|
|
{ phoneImg: getStaticImage('equipment/设备-手机1.png') },
|
|
{ phoneImg: getStaticImage('equipment/设备-手机2.png') }
|
|
])
|
|
|
|
const platetitleList = ref([
|
|
{ title: getStaticImage('equipment/标题-苹果.png') },
|
|
{ title: getStaticImage('equipment/标题-安卓小米.png') }
|
|
])
|
|
|
|
const platetextList = ref([
|
|
{ text: getStaticImage('equipment/内容-苹果.png') },
|
|
{ text: getStaticImage('equipment/内容-安卓小米.png') }
|
|
])
|
|
const hiddenbarclick = () => {
|
|
hiddenbar.value = !hiddenbar.value
|
|
}
|
|
|
|
// 下一张图片
|
|
const nextPhone = () => {
|
|
if (currentIndex.value < phoneList.value.length - 1) {
|
|
currentIndex.value++
|
|
}
|
|
}
|
|
|
|
// 上一张图片
|
|
const prevPhone = () => {
|
|
if (currentIndex.value > 0) {
|
|
currentIndex.value--
|
|
}
|
|
}
|
|
|
|
interface SimpleStep {
|
|
id: string
|
|
content: string
|
|
}
|
|
|
|
const handleStepChange = (_step: SimpleStep | null, index: number) => {
|
|
stepIndex.value = index
|
|
}
|
|
|
|
const currentHighlight = computed(() =>
|
|
stepIndex.value === 0 ? '.img-switch-item--vlog' : '.work-border'
|
|
)
|
|
</script>
|
|
<style lang="less">
|
|
.equipment-index {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.equipment-bg {
|
|
// display: flex;
|
|
}
|
|
|
|
.equipment-layout {
|
|
position: relative;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.equipment-bar {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 10;
|
|
|
|
.equipment-bt {
|
|
position: absolute;
|
|
top: 0;
|
|
left: -135px;
|
|
width: 577px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.equipment-unfold1 {
|
|
position: absolute;
|
|
top: 490px;
|
|
left: -41px;
|
|
width: 150px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.equipment-unfold2 {
|
|
position: absolute;
|
|
top: 490px;
|
|
left: 268px;
|
|
width: 150px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.equipment-item {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
padding-top: 220px;
|
|
padding-left: 20px;
|
|
|
|
span {
|
|
display: flex;
|
|
}
|
|
}
|
|
|
|
.guide-ui {
|
|
top: 80% !important;
|
|
}
|
|
|
|
.dragon-character {
|
|
top: 80% !important;
|
|
}
|
|
}
|
|
|
|
.equipment-home {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.equipment-leftbutton {
|
|
position: absolute;
|
|
top: 511px;
|
|
left: 350px;
|
|
width: 200px;
|
|
height: 200px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
|
|
.equipment-phoneImg {
|
|
position: absolute;
|
|
top: 313px;
|
|
left: 500px;
|
|
width: 446px;
|
|
height: 484px;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: contain;
|
|
}
|
|
}
|
|
|
|
.equipment-rightbutton {
|
|
position: absolute;
|
|
top: 511px;
|
|
right: 770px;
|
|
width: 200px;
|
|
height: 200px;
|
|
cursor: pointer;
|
|
z-index: 10;
|
|
}
|
|
}
|
|
|
|
.equipment-purpose {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
|
|
.plate {
|
|
position: absolute;
|
|
top: 30px;
|
|
left: 1200px;
|
|
width: 600px;
|
|
/* 调整为你需要的宽度 */
|
|
height: 1000px;
|
|
/* 调整为你需要的高度 */
|
|
|
|
img {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
}
|
|
|
|
.plate-content {
|
|
position: absolute;
|
|
bottom: 144px;
|
|
left: 1235px;
|
|
width: 600px;
|
|
height: 797px;
|
|
overflow: hidden;
|
|
/* 隐藏超出部分 */
|
|
object-fit: contain;
|
|
|
|
// display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
overflow-y: auto;
|
|
/* 允许垂直滚动 */
|
|
scrollbar-width: none;
|
|
/* Firefox隐藏滚动条 */
|
|
-ms-overflow-style: none;
|
|
/* IE和Edge隐藏滚动条 */
|
|
|
|
&::-webkit-scrollbar {
|
|
display: none;
|
|
/* Chrome, Safari隐藏滚动条 */
|
|
}
|
|
}
|
|
|
|
.title {
|
|
// margin-top: 47px;
|
|
width: 400px;
|
|
z-index: 2;
|
|
position: absolute;
|
|
top: 36px;
|
|
left: 1304px;
|
|
}
|
|
|
|
.text {
|
|
position: absolute;
|
|
top: -9px;
|
|
left: 8px;
|
|
z-index: 2;
|
|
|
|
img {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|