128 lines
3.2 KiB
Vue
128 lines
3.2 KiB
Vue
<template>
|
|
<div class="example">
|
|
<div v-show="isMobile === 'pc'">
|
|
<div class="mobile-button">
|
|
<MobileButton :isMobile="isMobile" @mobile="(e) => isMobile = e" />
|
|
</div>
|
|
<div class="theme-example">
|
|
<div
|
|
class="example-bg"
|
|
:style="{
|
|
backgroundImage: `url(${themeInfo.background_status ? themeInfo.background_url : ''})`,
|
|
backgroundRepeat: themeInfo.background_site === 2 ? 'no-repeat' : '',
|
|
backgroundPosition: themeInfo.background_site === 2 ? '50% 0px' : '',
|
|
backgroundSize: themeInfo.background_site === 2 ? '' : ''
|
|
}"
|
|
alt
|
|
/>
|
|
<div class="theme-example-bg">
|
|
<Header />
|
|
<QRadio />
|
|
<QMatrix />
|
|
<QInput />
|
|
<QButton />
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 手机模拟器 -->
|
|
<div v-show="isMobile === 'mobile'" class="theme-mobile">
|
|
<div class="mobile-button">
|
|
<MobileButton :isMobile="isMobile" @mobile="(e) => isMobile = e" />
|
|
</div>
|
|
<Phone title="问卷标题">
|
|
<!-- <div> -->
|
|
<Header :isMobile="'mobile'" />
|
|
<QRadio :isMobile="'mobile'" />
|
|
<QMatrix :isMobile="'mobile'" />
|
|
<QInput :isMobile="'mobile'" />
|
|
<QButton :isMobile="'mobile'" />
|
|
<!-- </div> -->
|
|
</Phone>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { ref } from 'vue'
|
|
import useThemeInfo from '../../hooks/theme'
|
|
import MobileButton from '../MobileButton/index.vue'
|
|
import QRadio from '../ThemeQuestion/QRadio.vue'
|
|
import QMatrix from '../ThemeQuestion/QMatrix.vue'
|
|
import QInput from '../ThemeQuestion/QInput.vue'
|
|
import QButton from '../ThemeQuestion/QButton.vue'
|
|
import Header from '../Header/index.vue'
|
|
import Phone from "../Phone/Index.vue";
|
|
|
|
const { backgroundTransparency, backgroundColor, themeInfo } = useThemeInfo()
|
|
const isMobile = ref('pc')
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
@media screen and (max-width: 1440px) {
|
|
.theme-example {
|
|
height: 594px !important;
|
|
}
|
|
.example-bg {
|
|
height: 594px !important;
|
|
}
|
|
.theme-example-bg {
|
|
height: 594px !important;
|
|
}
|
|
}
|
|
.example {
|
|
margin-left: 290px;
|
|
margin-right: 290px;
|
|
background-color: #f5f5f5;
|
|
height: 100%;
|
|
padding: 0 15px;
|
|
}
|
|
.theme-mobile::-webkit-scrollbar {
|
|
display: none;
|
|
}
|
|
.theme-example-bg::-webkit-scrollbar {
|
|
width: 4px;
|
|
background-color: #ffffff;
|
|
}
|
|
.theme-example-bg::-webkit-scrollbar-thumb {
|
|
background-color: #D8D8D8;
|
|
border-radius: 10px;
|
|
}
|
|
.theme-mobile {
|
|
height: 100%;
|
|
overflow: auto;
|
|
}
|
|
.theme-example {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border-radius: 8px 8px 8px 8px;
|
|
.example-bg {
|
|
height: 765px;
|
|
border-radius: 10px;
|
|
opacity: v-bind(backgroundTransparency);
|
|
}
|
|
|
|
.theme-example-bg {
|
|
position: absolute;
|
|
left: 305px;
|
|
right: 300px;
|
|
height: calc(100% - 104px) !important;
|
|
overflow-y: auto;
|
|
overflow-x: hidden;
|
|
background-color: v-bind(backgroundColor);
|
|
}
|
|
}
|
|
|
|
.mobile {
|
|
width: 425px;
|
|
height: 856px;
|
|
background-size: 100% 100%;
|
|
background-image: url("../../../../../assets/img/answer/phone.png");
|
|
margin: auto;
|
|
}
|
|
.mobile-button {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
</style>
|