fix: bug

2022-10-09 18:00:58 +08:00
parent b57c3e758d
commit 41bdb381e2
852 changed files with 252340 additions and 0 deletions
--- a/src/views/planetDesign/Theme/components/ThemeExample/index.vue
+++ b/src/views/planetDesign/Theme/components/ThemeExample/index.vue
@@ -0,0 +1,126 @@
+<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: 6px;
+  background-color: #ddd;
+}
+.theme-example-bg::-webkit-scrollbar-thumb {
+  background-color: #a5b1c6;
+}
+.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: 405px;
+    right: 300px;
+    height: calc(100% - 200px) !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>