|
@@ -1,5 +1,5 @@
|
|
<script setup>
|
|
<script setup>
|
|
-// import { ref } from 'vue'
|
|
|
|
|
|
+import { onMounted, inject } from 'vue'
|
|
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
import useSizeAdapt from "@/useFunctions/useSizeAdapt"
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Swiper, SwiperSlide } from 'swiper/vue'
|
|
import { Pagination } from 'swiper/modules'
|
|
import { Pagination } from 'swiper/modules'
|
|
@@ -7,30 +7,27 @@ import { Pagination } from 'swiper/modules'
|
|
// import 'swiper/css'
|
|
// import 'swiper/css'
|
|
// import 'swiper/css/pagination'
|
|
// import 'swiper/css/pagination'
|
|
|
|
|
|
|
|
+
|
|
|
|
+const $env = inject('$env')
|
|
|
|
+
|
|
const {
|
|
const {
|
|
windowSizeInCssForRef,
|
|
windowSizeInCssForRef,
|
|
windowSizeWhenDesignForRef,
|
|
windowSizeWhenDesignForRef,
|
|
} = useSizeAdapt()
|
|
} = useSizeAdapt()
|
|
|
|
|
|
const emit = defineEmits(['close'])
|
|
const emit = defineEmits(['close'])
|
|
|
|
+const props = defineProps({
|
|
|
|
+ list: {
|
|
|
|
+ type: Array,
|
|
|
|
+ default: () => {return []},
|
|
|
|
+ },
|
|
|
|
+})
|
|
|
|
|
|
const modules = [Pagination]
|
|
const modules = [Pagination]
|
|
const paginationOptions = { clickable: true }
|
|
const paginationOptions = { clickable: true }
|
|
-
|
|
|
|
-const stepList = [
|
|
|
|
- {
|
|
|
|
- id: 0,
|
|
|
|
- title: "直杆带曲"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 1,
|
|
|
|
- title: "直杆带曲2"
|
|
|
|
- },
|
|
|
|
- {
|
|
|
|
- id: 2,
|
|
|
|
- title: "直杆带曲3"
|
|
|
|
- },
|
|
|
|
-]
|
|
|
|
|
|
+onMounted(() => {
|
|
|
|
+ console.log(props.list)
|
|
|
|
+})
|
|
|
|
|
|
|
|
|
|
</script>
|
|
</script>
|
|
@@ -44,11 +41,23 @@ const stepList = [
|
|
:pagination="paginationOptions"
|
|
:pagination="paginationOptions"
|
|
>
|
|
>
|
|
<SwiperSlide
|
|
<SwiperSlide
|
|
- v-for="(item,index) in stepList"
|
|
|
|
|
|
+ v-for="(item,index) in list"
|
|
:key="index"
|
|
:key="index"
|
|
class="step-item"
|
|
class="step-item"
|
|
>
|
|
>
|
|
- {{ item.title }}
|
|
|
|
|
|
+ <!-- <div>{{ item['名称'] }}</div> -->
|
|
|
|
+ <div class="name-box">
|
|
|
|
+ <div
|
|
|
|
+ v-for="(item1,index1) in item['显示名称']"
|
|
|
|
+ :key="index1"
|
|
|
|
+ >
|
|
|
|
+ {{ item1 }}
|
|
|
|
+ </div>
|
|
|
|
+ </div>
|
|
|
|
+ <img
|
|
|
|
+ :src="`${$env.BASE_URL}configMultiMedia/zhupuImages/${item['名称']}.png`"
|
|
|
|
+ alt=""
|
|
|
|
+ >
|
|
</SwiperSlide>
|
|
</SwiperSlide>
|
|
</Swiper>
|
|
</Swiper>
|
|
<div class="system-btns">
|
|
<div class="system-btns">
|
|
@@ -97,6 +106,30 @@ const stepList = [
|
|
display: flex;
|
|
display: flex;
|
|
justify-content: center;
|
|
justify-content: center;
|
|
align-items: center;
|
|
align-items: center;
|
|
|
|
+ position: relative;
|
|
|
|
+ >.name-box{
|
|
|
|
+ position: absolute;
|
|
|
|
+ left: calc(70 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ top: calc(100 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ writing-mode: horizontal-tb;
|
|
|
|
+ background: url(@/assets/images/name-bg.png);
|
|
|
|
+ background-size: 100% 100%;
|
|
|
|
+ padding: 15px ;
|
|
|
|
+ color: #476446;
|
|
|
|
+ font-family: 'KingHwa_OldSong';
|
|
|
|
+ font-size: calc(24 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ line-height: calc(29 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ >:nth-child(odd){
|
|
|
|
+ color:#7B916B;
|
|
|
|
+ font-size: calc(16 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ line-height: calc(21 / v-bind('windowSizeWhenDesignForRef') * v-bind('windowSizeInCssForRef'));
|
|
|
|
+ transform: translateX(-40%)
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+ >img{
|
|
|
|
+ // width: 40%;
|
|
|
|
+ margin-left: calc(50 /v-bind('windowSizeWhenDesignForRef')* v-bind('windowSizeInCssForRef'))
|
|
|
|
+ }
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|