From 968576b665ae4a5aec6c025a11758db6e0d2914c Mon Sep 17 00:00:00 2001
From: dayou <853094838@qq.com>
Date: Fri, 22 Mar 2024 17:51:32 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E7=9A=AE=E8=82=A4=E8=AE=BE=E7=BD=AE=20?=
 =?UTF-8?q?(#78)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../modules/survey/template/banner/index.json | 109 +++++------
 .../surveyTemplate/survey/normal.json         |   4 -
 .../template/surveyTemplate/survey/nps.json   |   4 -
 .../surveyTemplate/survey/register.json       |   4 -
 .../template/surveyTemplate/survey/vote.json  |   4 -
 .../template/surveyTemplate/templateBase.json |  11 +-
 .../config/setterConfig/bannerConfig.js       |  82 ++++-----
 .../config/setterConfig/logoConfig.js         |  10 +-
 .../config/setterConfig/skinConfig.js         |  46 +++++
 web/src/management/config/skinPresets.js      |   7 +
 .../questionModule => }/components/logo.vue   |   9 +-
 .../components/mainTitle.vue                  |  12 +-
 .../components/materialGroup.vue              |   0
 .../components/questionWrapper.vue            |   6 +-
 .../components/setterField.vue                |   0
 .../questionModule => }/components/submit.vue |   4 +-
 web/src/management/pages/edit/index.vue       |   1 -
 .../edit/modules/generalModule/pageNav.vue    |  31 ++--
 .../questionModule/components/bannerList.vue  |  77 --------
 .../modules/questionModule/previewPanel.vue   |  40 +++--
 .../modules/questionModule/setterPanel.vue    |  14 +-
 .../components/banner.vue                     |   4 +-
 .../settingModule/components/overTime.vue     |   3 +-
 .../settingModule/components/success.vue      |   3 +-
 .../settingModule/config/baseFormConfig.js    |   6 +-
 .../catalogPanel.vue}                         |  43 +++--
 .../previewPanel.vue}                         |  35 ++--
 .../setterPanel.vue}                          |   6 +-
 .../settingModule/skin/catalogPanel.vue       | 170 ++++++++++++++++++
 .../settingModule/skin/previewPanel.vue       | 169 +++++++++++++++++
 .../settingModule/skin/setterPanel.vue        | 119 ++++++++++++
 .../pages/edit/pages/skin/content.vue         |  32 ++++
 .../pages/edit/pages/skin/index.vue           |  68 +++++++
 .../{resultConfig.vue => skin/result.vue}     |   8 +-
 web/src/management/router/index.js            |  31 +++-
 web/src/management/store/edit/actions.js      |   3 +
 web/src/management/store/edit/mutations.js    |   7 +-
 web/src/management/store/edit/state.js        |  11 +-
 web/src/management/styles/icon.scss           |  11 +-
 web/src/management/styles/skin.scss           |  12 ++
 web/src/management/styles/variable.scss       |  35 ++++
 .../questions/common/css/default.scss         |  25 +--
 .../questions/common/css/radioStar.scss       |   1 +
 .../AdvancedConfig/OptionConfig.vue           |   2 +-
 .../components/Options/OptionEdit.vue         |   2 +-
 .../components/Options/OptionEditBar.vue      |   2 +-
 .../questions/components/Progress.vue         |   1 +
 .../materials/setters/widgets/ColorPicker.vue |  31 ++++
 .../materials/setters/widgets/FormItem.vue    |  13 +-
 .../setters/widgets/InputPercent.vue          |  11 +-
 .../setters/widgets/SliderSetter.vue          |  37 ++++
 web/src/render/App.vue                        |  36 +++-
 web/src/render/components/header.vue          |  43 +----
 web/src/render/components/logo.vue            |   1 -
 web/src/render/components/mainTitle.vue       |  68 +++++++
 web/src/render/components/submit.vue          |   5 +-
 web/src/render/pages/errorPage.vue            |  28 ++-
 web/src/render/pages/index.vue                |  40 ++++-
 web/src/render/pages/successPage.vue          |  26 ++-
 59 files changed, 1218 insertions(+), 405 deletions(-)
 create mode 100644 web/src/management/config/setterConfig/skinConfig.js
 create mode 100644 web/src/management/config/skinPresets.js
 rename web/src/management/pages/edit/{modules/questionModule => }/components/logo.vue (89%)
 rename web/src/management/pages/edit/{modules/questionModule => }/components/mainTitle.vue (83%)
 rename web/src/management/pages/edit/{modules/questionModule => }/components/materialGroup.vue (100%)
 rename web/src/management/pages/edit/{modules/questionModule => }/components/questionWrapper.vue (99%)
 rename web/src/management/pages/edit/{modules/questionModule => }/components/setterField.vue (100%)
 rename web/src/management/pages/edit/{modules/questionModule => }/components/submit.vue (90%)
 delete mode 100644 web/src/management/pages/edit/modules/questionModule/components/bannerList.vue
 rename web/src/management/pages/edit/modules/{questionModule => settingModule}/components/banner.vue (95%)
 rename web/src/management/pages/edit/modules/settingModule/{resultCatalog.vue => result/catalogPanel.vue} (65%)
 rename web/src/management/pages/edit/modules/settingModule/{resultPreview.vue => result/previewPanel.vue} (61%)
 rename web/src/management/pages/edit/modules/settingModule/{resultSetter.vue => result/setterPanel.vue} (97%)
 create mode 100644 web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue
 create mode 100644 web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue
 create mode 100644 web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue
 create mode 100644 web/src/management/pages/edit/pages/skin/content.vue
 create mode 100644 web/src/management/pages/edit/pages/skin/index.vue
 rename web/src/management/pages/edit/pages/{resultConfig.vue => skin/result.vue} (56%)
 create mode 100644 web/src/management/styles/skin.scss
 create mode 100644 web/src/materials/setters/widgets/ColorPicker.vue
 create mode 100644 web/src/materials/setters/widgets/SliderSetter.vue
 create mode 100644 web/src/render/components/mainTitle.vue

diff --git a/server/src/modules/survey/template/banner/index.json b/server/src/modules/survey/template/banner/index.json
index 80a8f056..e1cd290d 100644
--- a/server/src/modules/survey/template/banner/index.json
+++ b/server/src/modules/survey/template/banner/index.json
@@ -1,12 +1,64 @@
 {
 	"temp": {
 		"key": "default",
-		"name": "默认分类",
+		"name": "全部",
 		"list": [{
 			"src": "/imgs/skin/17e06b7604a007e1d3e1453b9ddadc3c.webp",
 			"title": "1"
 		}]
-},
+	},
+	"scenery": {
+		"key": "scenery",
+		"name": "风景",
+		"list": [{
+			"src": "/imgs/skin/SyiLRcukyE1558430525760.webp",
+			"title": "1"
+		}, {
+			"src": "/imgs/skin/sqYig4AcWr1558430525663.webp",
+			"title": "2"
+		}, {
+			"src": "/imgs/skin/ElNeqJT2I21558430526165.webp",
+			"title": "3"
+		}, {
+			"src": "/imgs/skin/CxQkSU6AY21558430526163.webp",
+			"title": "4"
+		}, {
+			"src": "/imgs/skin/VTUwbp6vY61558430527320.webp",
+			"title": "5"
+		}, {
+			"src": "/imgs/skin/SHs0K703Yn1558430527218.webp",
+			"title": "6"
+		}, {
+			"src": "/imgs/skin/oVTedX9V4s1558430527671.webp",
+			"title": "7"
+		}]
+	},
+	"business": {
+		"key": "business",
+		"name": "商务",
+		"list": [{
+			"src": "/imgs/skin/3ABKqvDaVn1558514860472.webp",
+			"title": "1"
+		}, {
+			"src": "/imgs/skin/OewuaQmWoq1558514860285.webp",
+			"title": "2"
+		}, {
+			"src": "/imgs/skin/HuVqqtbFjs1558514860570.webp",
+			"title": "3"
+		}, {
+			"src": "/imgs/skin/icSlqsr0uZ1558514860875.webp",
+			"title": "4"
+		}, {
+			"src": "/imgs/skin/Qu9rg33wmq1558514861015.webp",
+			"title": "5"
+		}, {
+			"src": "/imgs/skin/145gBCRtNP1558514861211.webp",
+			"title": "6"
+		}, {
+			"src": "/imgs/skin/ykWLFV0QWj1558514861444.webp",
+			"title": "7"
+		}]
+	},
 	"activity": {
 		"key": "activity",
 		"name": "节日",
@@ -41,32 +93,6 @@
 			"title": "7"
 		}]
 	},
-	"scenery": {
-		"key": "scenery",
-		"name": "风景",
-		"list": [{
-			"src": "/imgs/skin/SyiLRcukyE1558430525760.webp",
-			"title": "1"
-		}, {
-			"src": "/imgs/skin/sqYig4AcWr1558430525663.webp",
-			"title": "2"
-		}, {
-			"src": "/imgs/skin/ElNeqJT2I21558430526165.webp",
-			"title": "3"
-		}, {
-			"src": "/imgs/skin/CxQkSU6AY21558430526163.webp",
-			"title": "4"
-		}, {
-			"src": "/imgs/skin/VTUwbp6vY61558430527320.webp",
-			"title": "5"
-		}, {
-			"src": "/imgs/skin/SHs0K703Yn1558430527218.webp",
-			"title": "6"
-		}, {
-			"src": "/imgs/skin/oVTedX9V4s1558430527671.webp",
-			"title": "7"
-		}]
-	},
 	"transportation": {
 		"key": "transportation",
 		"name": "交通",
@@ -119,32 +145,7 @@
 			"title": "7"
 		}]
 	},
-	"business": {
-		"key": "business",
-		"name": "商务",
-		"list": [{
-			"src": "/imgs/skin/3ABKqvDaVn1558514860472.webp",
-			"title": "1"
-		}, {
-			"src": "/imgs/skin/OewuaQmWoq1558514860285.webp",
-			"title": "2"
-		}, {
-			"src": "/imgs/skin/HuVqqtbFjs1558514860570.webp",
-			"title": "3"
-		}, {
-			"src": "/imgs/skin/icSlqsr0uZ1558514860875.webp",
-			"title": "4"
-		}, {
-			"src": "/imgs/skin/Qu9rg33wmq1558514861015.webp",
-			"title": "5"
-		}, {
-			"src": "/imgs/skin/145gBCRtNP1558514861211.webp",
-			"title": "6"
-		}, {
-			"src": "/imgs/skin/ykWLFV0QWj1558514861444.webp",
-			"title": "7"
-		}]
-	},
+	
 	"campus": {
 		"key": "campus",
 		"name": "校园",
diff --git a/server/src/modules/survey/template/surveyTemplate/survey/normal.json b/server/src/modules/survey/template/surveyTemplate/survey/normal.json
index ad7cfabd..4038eb28 100644
--- a/server/src/modules/survey/template/surveyTemplate/survey/normal.json
+++ b/server/src/modules/survey/template/surveyTemplate/survey/normal.json
@@ -124,9 +124,5 @@
     "endTime": "2028-05-22 17:17:48",
     "tLimit": "0",
     "language": "chinese"
-  },
-  "skinConf": {
-    "skinColor": "#4a4c5b",
-    "inputBgColor": "#ffffff"
   }
 }
diff --git a/server/src/modules/survey/template/surveyTemplate/survey/nps.json b/server/src/modules/survey/template/surveyTemplate/survey/nps.json
index 0cedd519..2618856d 100644
--- a/server/src/modules/survey/template/surveyTemplate/survey/nps.json
+++ b/server/src/modules/survey/template/surveyTemplate/survey/nps.json
@@ -13,10 +13,6 @@
       "msg_9004": "提交失败！"
     }
   },
-  "skinConf": {
-    "skinColor": "#4a4c5b",
-    "inputBgColor": "#ffffff"
-  },
   "bannerConf": {
     "titleConfig": {
       "mainTitle": "<h3 style=\"text-align: center\">满意度调研</h3> <p>&nbsp;</p> <p>为了给您提供更好的服务，希望您能抽出几分钟时间，将您的感受和建议告诉我们，<span style=\"color: rgb(204, 0, 0)\">期待您的参与</span></p>",
diff --git a/server/src/modules/survey/template/surveyTemplate/survey/register.json b/server/src/modules/survey/template/surveyTemplate/survey/register.json
index 853af1aa..d9562a0e 100644
--- a/server/src/modules/survey/template/surveyTemplate/survey/register.json
+++ b/server/src/modules/survey/template/surveyTemplate/survey/register.json
@@ -156,9 +156,5 @@
     "endTime": "2028-05-22 17:17:48",
     "tLimit": "0",
     "language": "chinese"
-  },
-  "skinConf": {
-    "skinColor": "#4a4c5b",
-    "inputBgColor": "#ffffff"
   }
 }
diff --git a/server/src/modules/survey/template/surveyTemplate/survey/vote.json b/server/src/modules/survey/template/surveyTemplate/survey/vote.json
index 293cf607..9c25ad76 100644
--- a/server/src/modules/survey/template/surveyTemplate/survey/vote.json
+++ b/server/src/modules/survey/template/surveyTemplate/survey/vote.json
@@ -143,9 +143,5 @@
     "endTime": "2028-05-25 10:22:23",
     "tLimit": "0",
     "language": "chinese"
-  },
-  "skinConf": {
-    "skinColor": "#4a4c5b",
-    "inputBgColor": "#ffffff"
   }
 }
diff --git a/server/src/modules/survey/template/surveyTemplate/templateBase.json b/server/src/modules/survey/template/surveyTemplate/templateBase.json
index 4ecea689..cc17b7f3 100644
--- a/server/src/modules/survey/template/surveyTemplate/templateBase.json
+++ b/server/src/modules/survey/template/surveyTemplate/templateBase.json
@@ -37,6 +37,15 @@
     },
     "skinConf": {
       "skinColor": "#4a4c5b",
-      "inputBgColor": "#ffffff"
+      "inputBgColor": "#ffffff",
+      "backgroundConf": {
+        "color": "#fff"
+      },
+      "themeConf": {
+        "color": "#ffa600"
+      },
+      "contentConf": {
+        "opacity": 100
+      }
     }
   }
diff --git a/web/src/management/config/setterConfig/bannerConfig.js b/web/src/management/config/setterConfig/bannerConfig.js
index 0596fe9d..49c0d771 100644
--- a/web/src/management/config/setterConfig/bannerConfig.js
+++ b/web/src/management/config/setterConfig/bannerConfig.js
@@ -1,55 +1,41 @@
 export default [
   {
-    label: '头图配置（默认尺寸：750*260）',
-    type: 'Customed',
-    key: 'bannerConfig',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
-    content: [
-      {
-        label: '顶部图片地址',
-        type: 'Input',
-        key: 'bannerConfig.bgImage',
-        direction: 'horizon',
-      },
-      {
-        label: '顶部视频地址',
-        type: 'Input',
-        key: 'bannerConfig.videoLink',
-        direction: 'horizon',
-      },
-      {
-        label: '视频海报地址',
-        type: 'Input',
-        key: 'bannerConfig.postImg',
-        direction: 'horizon',
-      },
-    ],
+    label: '顶部图片地址',
+    type: 'Input',
+    key: 'bgImage',
+    inline: true,
+    direction: 'horizon',
+    labelStyle: { width: '120px' }
   },
   {
-    label: '头图跳转',
-    type: 'Customed',
-    key: 'bannerConfig-Jump',
-    labelStyle: {
-      fontWeight: 'bold',
+    label: '顶部视频地址',
+    type: 'Input',
+    key: 'videoLink',
+    direction: 'horizon',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: '视频海报地址',
+    type: 'Input',
+    key: 'postImg',
+    direction: 'horizon',
+    labelStyle: { width: '120px' }
+  },
+  {
+    label: '图片支持点击',
+    type: 'CustomedSwitch',
+    direction: 'horizon',
+    labelStyle: { width: '120px' },
+    key: 'bgImageAllowJump',
+  },
+  {
+    label: '跳转链接',
+    type: 'Input',
+    direction: 'horizon',
+    labelStyle: { width: '120px' },
+    key: 'bgImageJumpLink',
+    relyFunc: (data) => {
+      return !!data?.bgImageAllowJump;
     },
-    content: [
-      {
-        label: '图片支持点击',
-        type: 'CustomedSwitch',
-        direction: 'space_between',
-        key: 'bannerConfig.bgImageAllowJump',
-      },
-      {
-        label: '跳转链接',
-        type: 'Input',
-        direction: 'horizon',
-        key: 'bannerConfig.bgImageJumpLink',
-        relyFunc: (data) => {
-          return !!data?.bannerConfig?.bgImageAllowJump;
-        },
-      },
-    ],
   },
 ];
diff --git a/web/src/management/config/setterConfig/logoConfig.js b/web/src/management/config/setterConfig/logoConfig.js
index 2fe8c0eb..94505b34 100644
--- a/web/src/management/config/setterConfig/logoConfig.js
+++ b/web/src/management/config/setterConfig/logoConfig.js
@@ -4,17 +4,15 @@ export default [
     type: 'Input',
     key: 'logoImage',
     tip: '默认尺寸200px*50px',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
+    direction: 'horizon',
+    labelStyle: { width: '120px' }
   },
   {
     label: 'Logo大小',
     type: 'InputPercent',
     key: 'logoImageWidth',
     tip: '填写宽度百分比，例如30%',
-    labelStyle: {
-      fontWeight: 'bold',
-    },
+    direction: 'horizon',
+    labelStyle: { width: '120px' }
   },
 ];
diff --git a/web/src/management/config/setterConfig/skinConfig.js b/web/src/management/config/setterConfig/skinConfig.js
new file mode 100644
index 00000000..84b00601
--- /dev/null
+++ b/web/src/management/config/setterConfig/skinConfig.js
@@ -0,0 +1,46 @@
+import bannerConfig from "./bannerConfig"
+import logoConfig from "./logoConfig"
+
+export default [
+  {
+    name: '头图',
+    key: 'bannerConf.bannerConfig',
+    formConfigList: bannerConfig
+  }, 
+  {
+    name: '背景',
+    key: 'skinConf.backgroundConf',
+    formConfigList: [{
+      direction: 'space_between',
+      label: '背景颜色',
+      type: 'ColorPicker',
+      key: 'color',
+    }],
+  },
+  {
+    name: '主题色',
+    key: 'skinConf.themeConf',
+    formConfigList: [{
+      direction: 'space_between',
+      direction: 'space_between',
+      label: '全局应用',
+      type: 'ColorPicker',
+      key: 'color',
+    }],
+  },
+  {
+    key: 'skinConf.contentConf',
+    name: '内容区域',
+    formConfigList: [{
+      direction: 'space_between',
+      label: '内容透明度',
+      type: 'SliderSetter',
+      key: 'opacity',
+    }],
+  },
+  {
+    name: '品牌logo',
+    key: 'bottomConf',
+    formConfigList: logoConfig
+  }
+]
\ No newline at end of file
diff --git a/web/src/management/config/skinPresets.js b/web/src/management/config/skinPresets.js
new file mode 100644
index 00000000..ad622e19
--- /dev/null
+++ b/web/src/management/config/skinPresets.js
@@ -0,0 +1,7 @@
+
+export default {
+  'default-1': {
+    'skinConf.backgroundConf.color': '#90b4fa',
+    'skinConf.themeConf.color': '#FAA600',
+  }
+}
\ No newline at end of file
diff --git a/web/src/management/pages/edit/modules/questionModule/components/logo.vue b/web/src/management/pages/edit/components/logo.vue
similarity index 89%
rename from web/src/management/pages/edit/modules/questionModule/components/logo.vue
rename to web/src/management/pages/edit/components/logo.vue
index 393dd9f8..2fd94f74 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/logo.vue
+++ b/web/src/management/pages/edit/components/logo.vue
@@ -3,7 +3,7 @@
     <div class="question-logo" @click="onSelect">
       <img
         v-if="logoImg !== ''"
-        :style="{ width: bottomConf.logoImageWidth }"
+        :style="{ width: logoConf.logoImageWidth }"
         class="bottom-logo"
         :src="logoImg"
       />
@@ -18,7 +18,10 @@
 export default {
   name: 'LogoPreview',
   props: {
-    bottomConf: Object,
+    logoConf: {
+      type: Object,
+      default: () => {}
+    },
     isSelected: Boolean,
   },
   data() {
@@ -31,7 +34,7 @@ export default {
   },
   computed: {
     logoImg() {
-      const { logoImage } = this.bottomConf;
+      const { logoImage = {} } = this.logoConf;
       return logoImage;
     },
   },
diff --git a/web/src/management/pages/edit/modules/questionModule/components/mainTitle.vue b/web/src/management/pages/edit/components/mainTitle.vue
similarity index 83%
rename from web/src/management/pages/edit/modules/questionModule/components/mainTitle.vue
rename to web/src/management/pages/edit/components/mainTitle.vue
index 5caaa1ac..53932a43 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/mainTitle.vue
+++ b/web/src/management/pages/edit/components/mainTitle.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="title-wrapper" @click="handleClick()">
-    <div class="main-title" :class="{ active: isSelected }">
+    <div class="main-title" :class="{ active: isSelected }" >
       <richEditor
         :value="bannerConf?.titleConfig?.mainTitle"
         @input="onTitleInput"
@@ -17,6 +17,10 @@ export default {
     return {};
   },
   props: {
+    preview: {
+      type: Boolean,
+      default: false,
+    },
     bannerConf: {
       type: Object,
     },
@@ -27,7 +31,11 @@ export default {
   computed: {},
   methods: {
     handleClick() {
-      this.$emit('select');
+      if(this.preview) {
+        return false
+      } else {
+        this.$emit('select');
+      }
     },
     onTitleInput(val) {
       if (!this.isSelected) {
diff --git a/web/src/management/pages/edit/modules/questionModule/components/materialGroup.vue b/web/src/management/pages/edit/components/materialGroup.vue
similarity index 100%
rename from web/src/management/pages/edit/modules/questionModule/components/materialGroup.vue
rename to web/src/management/pages/edit/components/materialGroup.vue
diff --git a/web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue b/web/src/management/pages/edit/components/questionWrapper.vue
similarity index 99%
rename from web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue
rename to web/src/management/pages/edit/components/questionWrapper.vue
index d7a1f84d..b8080352 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/questionWrapper.vue
+++ b/web/src/management/pages/edit/components/questionWrapper.vue
@@ -193,9 +193,9 @@ export default defineComponent({
   &.spliter {
     border-bottom: 0.12rem solid $spliter-color;
   }
-  // &:last-child{
-  //   border: none;
-  // }
+  &:last-child{
+    border: none;
+  }
   .editor {
     display: flex;
     font-size: 0.32rem;
diff --git a/web/src/management/pages/edit/modules/questionModule/components/setterField.vue b/web/src/management/pages/edit/components/setterField.vue
similarity index 100%
rename from web/src/management/pages/edit/modules/questionModule/components/setterField.vue
rename to web/src/management/pages/edit/components/setterField.vue
diff --git a/web/src/management/pages/edit/modules/questionModule/components/submit.vue b/web/src/management/pages/edit/components/submit.vue
similarity index 90%
rename from web/src/management/pages/edit/modules/questionModule/components/submit.vue
rename to web/src/management/pages/edit/components/submit.vue
index bddecd73..b3b1ee50 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/submit.vue
+++ b/web/src/management/pages/edit/components/submit.vue
@@ -6,7 +6,6 @@
   >
     <el-button
       class="submit-btn"
-      :style="{ 'background-color': skinConf.skinColor }"
       type="primary"
       >{{ submitConf.submitTitle }}</el-button
     >
@@ -41,8 +40,9 @@ export default {
   .submit-btn {
     color: white;
     border: none;
-    width: 250px;
+    width: 100%;
     height: 44px;
+    background-color: var(--primary-color);
   }
 }
 </style>
diff --git a/web/src/management/pages/edit/index.vue b/web/src/management/pages/edit/index.vue
index b6060730..414d2d3e 100644
--- a/web/src/management/pages/edit/index.vue
+++ b/web/src/management/pages/edit/index.vue
@@ -23,7 +23,6 @@ export default {
   },
   async created() {
     this.$store.commit('edit/setSurveyId', this.$route.params.id);
-    this.$store.dispatch('getBannerData');
     try {
       await this.$store.dispatch('edit/init');
     } catch (error) {
diff --git a/web/src/management/pages/edit/modules/generalModule/pageNav.vue b/web/src/management/pages/edit/modules/generalModule/pageNav.vue
index 66f96ff4..5cfef8b5 100644
--- a/web/src/management/pages/edit/modules/generalModule/pageNav.vue
+++ b/web/src/management/pages/edit/modules/generalModule/pageNav.vue
@@ -7,21 +7,25 @@
         :to="{ name: btnItem.router }"
         tag="div"
         replace
+        v-slot="{ href, route, navigate, isActive, isExactActive }"
+        custom
+      >
+      <div
+        :class="[
+          (isActive && btnItem.key === 'skinsettings'  ) || isExactActive ? 'router-link-exact-active' : '']"
       >
         <i class="iconfont" :class="[btnItem.icon]"></i>
-        <span>{{ btnItem.text }}</span>
+        <a :href="href" @click="navigate"><span>{{ btnItem.text }}</span></a>
+        <!-- <span>{{ btnItem.text }}</span> -->
+      </div>
+        
       </router-link>
-      <i
-        v-if="btnItem.next"
-        :key="btnItem.key + '-next'"
-        class="iconfont icon-jiantou next"
-      ></i>
     </template>
   </div>
 </template>
 <script>
 export default {
-  name: 'pageTitle',
+  name: 'pageNav',
   props: {},
   data() {
     return {
@@ -41,10 +45,11 @@ export default {
           next: true,
         },
         {
-          icon: 'icon-jieguoyeshezhi',
-          text: '结果页设置',
-          router: 'QuestionEditResultConfig',
-          key: 'status',
+          icon: 'icon-yangshishezhi',
+          text: '皮肤设置',
+          router: 'QuestionSkinSetting',
+          key: 'skinsettings',
+          next: true,
         },
       ],
     };
@@ -62,7 +67,9 @@ export default {
     color: #92949d;
     padding: 0 20px;
     cursor: pointer;
-
+    a{
+      color: inherit;
+    }
     &.router-link-exact-active {
       color: $font-color-title;
 
diff --git a/web/src/management/pages/edit/modules/questionModule/components/bannerList.vue b/web/src/management/pages/edit/modules/questionModule/components/bannerList.vue
deleted file mode 100644
index 99f3ec4a..00000000
--- a/web/src/management/pages/edit/modules/questionModule/components/bannerList.vue
+++ /dev/null
@@ -1,77 +0,0 @@
-<template>
-  <div class="banner-list-wrapper">
-    <el-collapse v-model="curSkinGroupKey">
-      <el-collapse-item
-        v-for="(bannerGroup, index) in bannerList"
-        :key="index"
-        :title="bannerGroup.name"
-        :name="bannerGroup.key"
-      >
-        <div
-          class="single-banner-wrapper"
-          v-for="(banner, bannerIndex) in bannerGroup.list"
-          :key="bannerIndex"
-        >
-          <img
-            class="banner-img"
-            :src="banner.src"
-            loading="lazy"
-            @click="changeBanner(banner.src)"
-          />
-        </div>
-      </el-collapse-item>
-    </el-collapse>
-  </div>
-</template>
-<script>
-export default {
-  name: 'bannerList',
-  data() {
-    return {
-      curSkinGroupKey: ['temp'],
-    };
-  },
-  computed: {
-    bannerList() {
-      return this.$store?.state?.bannerList || [];
-    },
-  },
-  methods: {
-    changeBanner(imgSrc) {
-      this.$emit('change', imgSrc);
-    },
-  },
-};
-</script>
-<style lang="scss" rel="stylesheet/scss" scoped>
-.banner-list-wrapper {
-  padding: 5px 18px 100px 19px;
-  overflow-x: hidden;
-
-  .banner-img {
-    position: relative;
-    margin-bottom: 10px;
-    width: 100%;
-    min-height: 111px;
-    cursor: pointer;
-    transition: all 0.2s;
-    &:hover {
-      -webkit-filter: brightness(90%);
-      filter: brightness(90%);
-    }
-  }
-
-  ::v-deep .el-collapse-item__header {
-    font-size: 16px;
-    color: $font-color-title;
-    border-bottom: none;
-  }
-
-  ::v-deep .el-collapse-item__arrow.is-active {
-    right: 0;
-  }
-  ::v-deep .el-collapse-item__arrow {
-    right: 0;
-  }
-}
-</style>
diff --git a/web/src/management/pages/edit/modules/questionModule/previewPanel.vue b/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
index 4dbbf232..2a8c1728 100644
--- a/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/previewPanel.vue
@@ -1,13 +1,7 @@
 <template>
   <div class="main-operation" @click="onMainClick" ref="mainOperation">
-    <!-- <div class="toolbar"></div> -->
     <div class="operation-wrapper" ref="operationWrapper">
       <div class="box content" ref="box">
-        <banner
-          :bannerConf="bannerConf"
-          :is-selected="currentEditOne === 'banner'"
-          @select="onSelectEditOne('banner')"
-        />
         <mainTitle
           :bannerConf="bannerConf"
           :is-selected="currentEditOne === 'mainTitle'"
@@ -28,29 +22,22 @@
           :is-selected="currentEditOne === 'submit'"
           @select="onSelectEditOne('submit')"
         />
-        <logo
-          :bottom-conf="bottomConf"
-          :is-selected="currentEditOne === 'logo'"
-          @select="onSelectEditOne('logo')"
-        />
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import materialGroup from './components/materialGroup.vue';
-import banner from './components/banner.vue';
-import mainTitle from './components/mainTitle.vue';
-import submit from './components/submit.vue';
-import logo from './components/logo.vue';
+import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
+import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
+import submit from '@/management/pages/edit/components/submit.vue';
+import logo from '@/management/pages/edit/components/logo.vue';
 import { mapState, mapGetters } from 'vuex';
 import { get as _get } from 'lodash-es';
 
 export default {
   name: 'mainOperation',
   components: {
-    banner,
     mainTitle,
     submit,
     logo,
@@ -81,6 +68,23 @@ export default {
     },
   },
   watch: {
+    skinConf: {
+      handler (skinConf)  {
+        const { themeConf, backgroundConf, contentConf} = skinConf
+        const root = document.documentElement;
+        if(themeConf?.color) {
+          root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+        }
+        if(backgroundConf?.color) {
+          root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+        }
+        if(contentConf?.opacity) {
+          root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
+        }
+      },
+      immediate: true, // 立即触发回调函数
+      deep: true
+    },
     autoScrollData(newVal) {
       const { currentEditOne } = newVal;
       if (typeof currentEditOne === 'number') {
@@ -188,7 +192,7 @@ export default {
 }
 
 .operation-wrapper {
-  margin-top: 38px;
+  margin-top: 50px;
   margin-bottom: 45px;
   // min-height: 812px;
   overflow-x: hidden;
diff --git a/web/src/management/pages/edit/modules/questionModule/setterPanel.vue b/web/src/management/pages/edit/modules/questionModule/setterPanel.vue
index 0f290c42..8b90bbe9 100644
--- a/web/src/management/pages/edit/modules/questionModule/setterPanel.vue
+++ b/web/src/management/pages/edit/modules/questionModule/setterPanel.vue
@@ -13,14 +13,12 @@
         :module-config="moduleConfig"
         @form-change="onFormChange"
       />
-      <bannerList v-if="currentEditOne === 'banner'" @change="onClickSkin" />
     </template>
   </div>
 </template>
 
 <script>
-import bannerList from './components/bannerList.vue';
-import setterField from './components/setterField.vue';
+import setterField from '@/management/pages/edit/components/setterField.vue';
 import { mapGetters } from 'vuex';
 
 export default {
@@ -42,16 +40,9 @@ export default {
     }),
   },
   components: {
-    bannerList,
     setterField,
   },
   methods: {
-    onClickSkin(src) {
-      this.onFormChange({
-        key: 'bannerConfig.bgImage',
-        value: src,
-      });
-    },
     onFormChange(data) {
       const { key, value } = data;
       const resultKey = `${this.currentEditKey}.${key}`;
@@ -75,7 +66,6 @@ export default {
   font-size: 14px;
   color: $primary-color;
   padding-left: 20px;
-  background: #f9fafc;
   border-bottom: 1px solid #edeffc;
 }
 
@@ -98,6 +88,6 @@ export default {
 }
 
 .question-config-form {
-  padding: 30px 20px 50px 20px;
+  padding: 30px 20px 50px 20px!important;
 }
 </style>
diff --git a/web/src/management/pages/edit/modules/questionModule/components/banner.vue b/web/src/management/pages/edit/modules/settingModule/components/banner.vue
similarity index 95%
rename from web/src/management/pages/edit/modules/questionModule/components/banner.vue
rename to web/src/management/pages/edit/modules/settingModule/components/banner.vue
index 4e5e4a15..79d470cf 100644
--- a/web/src/management/pages/edit/modules/questionModule/components/banner.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/banner.vue
@@ -11,7 +11,7 @@
       <div class="video">
         <video
           class="custom-video"
-          :poster="bannerConf.bannerConfig.postImg"
+          :poster="bannerConf.bannerConfigpostImg"
           preload="auto"
           controls
           :src="bannerConf.bannerConfig.videoLink"
@@ -31,6 +31,7 @@ export default {
   props: {
     bannerConf: {
       type: Object,
+      default: () => {}
     },
     isSelected: {
       type: Boolean,
@@ -59,6 +60,7 @@ export default {
 
   .banner {
     width: 100%;
+    display: flex;
 
     img {
       width: 100%;
diff --git a/web/src/management/pages/edit/modules/settingModule/components/overTime.vue b/web/src/management/pages/edit/modules/settingModule/components/overTime.vue
index fbffbbd9..178f0235 100755
--- a/web/src/management/pages/edit/modules/settingModule/components/overTime.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/overTime.vue
@@ -26,11 +26,12 @@ export default {
 .over-time {
   text-align: center;
   margin-bottom: 5.5rem;
+  height: 100%;
 
   .title-msg {
     width: 100%;
     font-size: 16px;
-    color: #999;
+    color: #666;
   }
 }
 
diff --git a/web/src/management/pages/edit/modules/settingModule/components/success.vue b/web/src/management/pages/edit/modules/settingModule/components/success.vue
index 9b272857..c978b10e 100644
--- a/web/src/management/pages/edit/modules/settingModule/components/success.vue
+++ b/web/src/management/pages/edit/modules/settingModule/components/success.vue
@@ -32,7 +32,7 @@ export default {
   text-align: center;
   width: 100%;
   display: inline-block;
-
+  height: 100%;
   .success-img {
     margin-top: -0.2rem;
     width: 100px;
@@ -46,7 +46,6 @@ export default {
   width: 100%;
   position: relative;
   padding-top: 1.8rem;
-  background: #fff;
 }
 
 .title-msg {
diff --git a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js b/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
index 71690d05..db8bab33 100644
--- a/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
+++ b/web/src/management/pages/edit/modules/settingModule/config/baseFormConfig.js
@@ -5,7 +5,7 @@ export default {
     label: '答题有效期',
     type: 'QuestionTime',
     placeholder: 'yyyy-MM-dd hh:mm:ss',
-    direction: 'horizon',
+    // direction: 'horizon',
   },
   // base_showVote: {
   //   key: 'baseConf.showVoteProcess',
@@ -42,7 +42,7 @@ export default {
     key: 'baseConf.tLimit',
     label: '问卷回收总数',
     type: 'InputNumber',
-    direction: 'horizon',
+    // direction: 'horizon',
     tip: '0为无限制，此功能用于限制该问卷总提交的数据量。当数据量达到限额时，该问卷将不能继续提交',
     tipShow: true,
     placement: 'top',
@@ -53,7 +53,7 @@ export default {
     label: '答题时段',
     tip: '问卷仅在指定时间段内可填写',
     type: 'QuestionTimeHour',
-    direction: 'horizon',
+    // direction: 'horizon',
     placement: 'top',
   },
   // skin_skinColor: {
diff --git a/web/src/management/pages/edit/modules/settingModule/resultCatalog.vue b/web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
similarity index 65%
rename from web/src/management/pages/edit/modules/settingModule/resultCatalog.vue
rename to web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
index 5e20428f..cbd80fd1 100644
--- a/web/src/management/pages/edit/modules/settingModule/resultCatalog.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/catalogPanel.vue
@@ -1,21 +1,24 @@
 <template>
-  <div class="status-list-wrapper">
-    <div
-      v-for="(status, index) in statusList"
-      :key="index"
-      class="status-item"
-      @click="filterDisabledStatus({ type: status.type })"
-    >
-      <span>{{ status.title }}</span>
-      <div class="preview-item">
-        <img :src="status.previewImg" :alt="status.title" />
+  <div class="tab-box">
+    <div class="title">结果页状态选择</div>
+    <div class="status-list-wrapper">
+      <div
+        v-for="(status, index) in statusList"
+        :key="index"
+        class="status-item"
+        @click="filterDisabledStatus({ type: status.type })"
+      >
+        <span>{{ status.title }}</span>
+        <div class="preview-item">
+          <img :src="status.previewImg" :alt="status.title" />
+        </div>
       </div>
     </div>
   </div>
 </template>
 <script>
 import { mapMutations } from 'vuex';
-import { EDIT_STATUS_MAP } from './enum';
+import { EDIT_STATUS_MAP } from '../enum';
 
 export default {
   name: 'resultConfigList',
@@ -47,13 +50,27 @@ export default {
 };
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
-.status-list-wrapper {
+.tab-box {
   width: 300px;
   height: 100%;
+  box-shadow: none;
+  border: none;
+  overflow-y: auto;
+  background-color: #fff;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: $primary-color;
+    padding-left: 20px;
+    // background: #f9fafc;
+    border-bottom: 1px solid #edeffc;
+  }
+}
+.status-list-wrapper {
   padding: 19px 18px 100px 19px;
   overflow-y: auto;
   overflow-x: hidden;
-  background-color: #fff;
 
   label.title {
     font-size: 16px;
diff --git a/web/src/management/pages/edit/modules/settingModule/resultPreview.vue b/web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
similarity index 61%
rename from web/src/management/pages/edit/modules/settingModule/resultPreview.vue
rename to web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
index 592914ad..8cf41327 100644
--- a/web/src/management/pages/edit/modules/settingModule/resultPreview.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/previewPanel.vue
@@ -1,19 +1,21 @@
 <template>
   <div class="result-config-preview">
-    <div class="status-preview">
-      <component
-        :is="currentEditStatus"
-        :key="currentEditStatus"
-        :module-config="moduleConfig"
-      />
-    </div>
+    <div class="result-page-wrap">
+      <div class="result-page">
+        <component
+          :is="currentEditStatus"
+          :key="currentEditStatus"
+          :module-config="moduleConfig"
+        />
+      </div>
+    </div>  
   </div>
 </template>
 <script>
 import { mapState } from 'vuex';
-import success from './components/success';
-import overTime from './components/overTime';
-import { EDIT_STATUS_MAP } from './enum';
+import success from '../components/success';
+import overTime from '../components/overTime';
+import { EDIT_STATUS_MAP } from '../enum';
 import { get as _get } from 'lodash-es';
 
 export default {
@@ -51,13 +53,20 @@ export default {
   background-color: #f6f7f9;
 }
 
-.status-preview {
+.result-page-wrap {
   width: 90%;
-  margin-top: 38px;
+  margin-top: 50px;
   min-height: 812px;
   max-height: 812px;
   overflow-x: hidden;
   overflow-y: auto;
-  background-color: #fff;
+  background-color: var(--primary-background-color);
+  padding: 0 0.3rem;
+  .result-page{
+    background: rgba(255, 255, 255, var(--opacity)); 
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
 }
 </style>
diff --git a/web/src/management/pages/edit/modules/settingModule/resultSetter.vue b/web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
similarity index 97%
rename from web/src/management/pages/edit/modules/settingModule/resultSetter.vue
rename to web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
index 009db273..466b92b5 100644
--- a/web/src/management/pages/edit/modules/settingModule/resultSetter.vue
+++ b/web/src/management/pages/edit/modules/settingModule/result/setterPanel.vue
@@ -31,13 +31,13 @@
 <script>
 import FormItem from '@/materials/setters/widgets/FormItem.vue';
 import setterLoader from '@/materials/setters/setterLoader';
-import statusConfig from './config/statusConfig';
+import statusConfig from '../config/statusConfig';
 import { mapState } from 'vuex';
 import { get as _get, pick as _pick } from 'lodash-es';
 
 const textMap = {
   Success: '提交成功页面配置',
-  OvertTme: '问卷过期页面配置',
+  OverTime: '问卷过期页面配置',
 };
 
 export default {
@@ -150,7 +150,7 @@ export default {
   font-size: 14px;
   color: $primary-color;
   padding-left: 20px;
-  background: #f9fafc;
+  // background: #f9fafc;
   border-bottom: 1px solid #edeffc;
 }
 
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue
new file mode 100644
index 00000000..ad3f76eb
--- /dev/null
+++ b/web/src/management/pages/edit/modules/settingModule/skin/catalogPanel.vue
@@ -0,0 +1,170 @@
+<template>
+  <div class="tab-box">
+    <div class="title">主题设置</div>
+    <div class="content">
+      <div  class="tag-list">
+        <el-tag 
+          v-for="item in groupList"
+          :class="[groupName === item.value ? 'current' : '', 'tag']"  
+          type = 'info' 
+          :key="item.value"
+          @click="() => changeGroup(item.value)">
+          {{item.label}}
+        </el-tag>
+      </div>
+      <div class="banner-list-wrapper">
+        <div
+          class="single-banner-wrapper"
+          v-for="(banner, bannerIndex) in currentBannerList"
+          :key="bannerIndex"
+        >
+          <img
+            class="banner-img"
+            :src="banner.src"
+            loading="lazy"
+            @click="changePreset(banner)"
+          />
+        </div>
+      </div>
+    </div>
+    
+   
+  </div>
+</template>
+<script>
+import { mapActions } from 'vuex'
+
+import skinPresets from '@/management/config/skinPresets.js'
+export default {
+  name: 'catalogPanel',
+  data() {
+    return {
+      skinPresets: [],
+      groupName: 'temp',
+    };
+  },
+  computed: {
+    bannerList() {
+      return this.$store?.state?.bannerList || [];
+    },
+    groupList() {
+      return Object.keys(this.bannerList).map((key) => {
+        return {
+          label: this.bannerList[key].name,
+          value: key
+        }
+      })
+    },
+    currentBannerList () {
+      const arr =  Object.keys(this.bannerList).map((key) => {
+        return  this.bannerList[key]
+      }).map(data => {
+        return data.list.map(item => {
+          item.group = data.key;
+          return item;
+        })
+      })
+      const  allbanner =  arr.reduce((acc, curr) => {
+        return acc.concat(curr);
+      }, []);
+      return allbanner.filter(item => {
+        if(this.groupName === "temp") {
+          return true
+        } else {
+          return item.group === this.groupName
+        }
+      })
+    }
+  },
+  mounted() {
+    
+  },
+  methods: {
+    ...mapActions({
+      changeThemePreset: 'edit/changeThemePreset',
+    }),
+    changeGroup(value) {
+      this.groupName = value
+    },
+  changePreset(banner) {
+      const name = banner.group + '-' + banner.title
+      let presets = {
+        'bannerConf.bannerConfig.bgImage': banner.src,
+        'skinConf.themeConf.color': '#FAA600',
+        'skinConf.backgroundConf.color': '#fff',
+      }
+      if(skinPresets[name]){
+        presets = Object.assign(presets, skinPresets[name])
+      }
+       
+      
+      this.changeThemePreset(presets)
+    }
+  },
+};
+</script>
+<style lang="scss" rel="stylesheet/scss" scoped>
+.tab-box {
+  width: 300px;
+  height: 100%;
+  box-shadow: none;
+  border: none;
+  overflow-y: auto;
+  background-color: #fff;
+  .title {
+    height: 40px;
+    line-height: 40px;
+    font-size: 14px;
+    color: $primary-color;
+    padding-left: 20px;
+    // background: #f9fafc;
+    border-bottom: 1px solid #edeffc;
+  }
+  .content{ 
+    padding: 12px;
+  }
+  .tag-list{
+    display: flex;
+    flex-wrap: wrap;
+    .tag{
+      margin: 5px 8px;
+      cursor: pointer;
+      &.current{
+        color: $primary-color;
+        background-color: $primary-bg-color;
+      }
+    }
+  }
+  .banner-list-wrapper {
+    padding: 15px 3px 100px 3px;
+    overflow-x: hidden;
+
+    .banner-img {
+      position: relative;
+      margin-bottom: 10px;
+      width: 100%;
+      // min-height: 111px;
+      cursor: pointer;
+      transition: all 0.2s;
+      border-radius: 4px;
+      &:hover {
+        -webkit-filter: brightness(90%);
+        filter: brightness(90%);
+      }
+    }
+
+    ::v-deep .el-collapse-item__header {
+      font-size: 16px;
+      color: $font-color-title;
+      border-bottom: none;
+    }
+
+    ::v-deep .el-collapse-item__arrow.is-active {
+      right: 0;
+    }
+    ::v-deep .el-collapse-item__arrow {
+      right: 0;
+    }
+  }
+}
+</style>
\ No newline at end of file
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue
new file mode 100644
index 00000000..6ea54b15
--- /dev/null
+++ b/web/src/management/pages/edit/modules/settingModule/skin/previewPanel.vue
@@ -0,0 +1,169 @@
+<template>
+  <div class="main-operation">
+    <div class="operation-wrapper">
+      <div class="box" ref="box">
+        <div class="mask"></div>
+        <banner
+          :bannerConf="bannerConf"
+        />
+        <div class="content">
+          <mainTitle
+            :isSelected="false"
+            :bannerConf="bannerConf"
+          />
+          <materialGroup
+            :questionDataList="questionDataList"
+            ref="materialGroup"
+          />
+          <submit
+            :submit-conf="submitConf"
+            :skin-conf="skinConf"
+            :is-selected="currentEditOne === 'submit'"
+          />
+          <logo
+            :logo-conf="bottomConf"
+            :is-selected="currentEditOne === 'logo'"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import materialGroup from '@/management/pages/edit/components/materialGroup.vue';
+import banner from '../components/banner.vue';
+import mainTitle from '@/management/pages/edit/components/mainTitle.vue';
+import submit from '@/management/pages/edit/components/submit.vue';
+import logo from '@/management/pages/edit/components/logo.vue';
+import { mapState, mapGetters } from 'vuex';
+import { get as _get } from 'lodash-es';
+
+export default {
+  name: 'previewPanel',
+  components: {
+    banner,
+    mainTitle,
+    submit,
+    logo,
+    materialGroup,
+  },
+  data() {
+    return {
+      isAnimating: false,
+    };
+  },
+  computed: {
+    ...mapState({
+      bannerConf: (state) => _get(state, 'edit.schema.bannerConf'),
+      submitConf: (state) => _get(state, 'edit.schema.submitConf'),
+      bottomConf: (state) => _get(state, 'edit.schema.bottomConf'),
+      skinConf: (state) => _get(state, 'edit.schema.skinConf'),
+      questionDataList: (state) => _get(state, 'edit.schema.questionDataList'),
+      currentEditOne: (state) => _get(state, 'edit.currentEditOne'),
+    }),
+    ...mapGetters({
+      currentEditKey: 'edit/currentEditKey',
+    }),
+  },
+  watch: {
+    skinConf: {
+      handler (skinConf)  {
+        const { themeConf, backgroundConf, contentConf} = skinConf
+        const root = document.documentElement;
+        if(themeConf?.color) {
+          root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+        }
+        if(backgroundConf?.color) {
+          root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+        }
+        if(contentConf?.opacity.toString()) {
+          root.style.setProperty('--opacity', contentConf?.opacity/100); // 设置全局透明度
+        }
+      },
+      immediate: true, // 立即触发回调函数
+      deep: true
+    }
+  },
+  methods: {
+    animate(dom, property, targetValue) {
+      const origin = dom[property];
+      const subVal = targetValue - origin;
+
+      const flag = subVal < 0 ? -1 : 1;
+
+      const step = flag * 50;
+
+      const totalCount = Math.floor(subVal / step) + 1;
+
+      let runCount = 0;
+      const run = () => {
+        dom[property] += step;
+        runCount++;
+        if (runCount < totalCount) {
+          requestAnimationFrame(run);
+        } else {
+          this.isAnimating = false;
+        }
+      };
+
+      requestAnimationFrame(run);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.main-operation {
+  width: 100%;
+  height: 100%;
+  min-width: 500px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  background-color: #f6f7f9;
+}
+
+.toolbar {
+  width: 100%;
+  height: 38px;
+  background-color: #fff;
+  flex-grow: 0;
+  flex-shrink: 0;
+}
+
+.operation-wrapper {
+  margin-top: 50px;
+  margin-bottom: 45px;
+  // min-height: 812px;
+  overflow-x: hidden;
+  overflow-y: auto;
+  // padding-right: 30px;
+  margin-right: 0px;
+  scrollbar-width: none;
+  width: 90%;
+  -ms-overflow-style: none;
+  
+  &::-webkit-scrollbar {
+    display: none;
+  }
+
+  .box {
+    background-color: var(--primary-background-color);
+    position: relative;
+    .mask{
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      left: 0;
+      right: 0;
+      z-index: 999;
+    }
+    .content {
+      margin: 0 0.3rem;
+      background: rgba(255, 255, 255, var(--opacity));
+      border-radius: 8px 8px 0 0;
+    }
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue b/web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue
new file mode 100644
index 00000000..6b0bd46f
--- /dev/null
+++ b/web/src/management/pages/edit/modules/settingModule/skin/setterPanel.vue
@@ -0,0 +1,119 @@
+<template>
+  <div class="setter-wrapper">
+    <div class="setter-title">
+      样式设置
+    </div>
+    <div class="setter-content">
+      <el-collapse v-model="collapse">
+        <el-collapse-item
+          v-for="(collapse, index) in skinConfig"
+          :key="index"
+          :title="collapse.name"
+          :name="collapse.key"
+        >
+          <setterField
+            :form-config-list="collapse.formConfigList"
+            :module-config="_get(schema, collapse.key, {})"
+            @form-change="(key) => { onFormChange(key, collapse.key) }"
+          /> 
+        </el-collapse-item>
+      </el-collapse>
+    </div>
+     <!-- -->
+  </div>
+</template>
+<script>
+import skinConfig from '@/management/config/setterConfig/skinConfig';
+import setterField from '@/management/pages/edit/components/setterField.vue';
+import { mapState, mapGetters } from 'vuex';
+import { get as _get } from 'lodash-es'
+export default {
+  name: 'setterPanel',
+  components: {
+    setterField,
+  },
+  data() {
+    return {
+      collapse: '',
+      skinConfig,
+    };
+  },
+  computed: {
+    ...mapState({
+      skinConf: (state) => _get(state, 'edit.schema.skinConf'),
+      schema: (state) => _get(state, 'edit.schema'),
+    }),
+  },
+  methods: {
+    _get,
+    onFormChange(data,collapse) {
+      const { key, value } = data;
+      const currentEditKey = `${collapse}`
+      const resultKey = `${currentEditKey}.${key}`;
+      this.$store.dispatch('edit/changeSchema', { key: resultKey, value });
+    },
+  },
+};
+</script>
+<style lang="scss" rel="stylesheet/scss" scoped>
+.setter-wrapper {
+  width: 360px;
+  height: 100%;
+  overflow-x: hidden;
+  overflow-y: auto;
+  background-color: #fff;
+}
+
+.setter-title {
+  height: 40px;
+  line-height: 40px;
+  font-size: 14px;
+  color: $primary-color;
+  padding-left: 20px;
+  // background: #f9fafc;
+  border-bottom: 1px solid #edeffc;
+}
+.setter-content{
+  padding: 10px 20px;
+  .el-collapse {
+    border: none;
+    ::v-deep .el-collapse-item__header{
+      font-size: 14px;
+      color: #606266;
+      font-weight: bold;
+      border: none;
+    }
+    ::v-deep .el-collapse-item__wrap{
+      border: none;
+      .el-collapse-item__content{
+        padding-bottom: 0px!important;
+      }
+
+    }
+  }
+  .config-form{
+    padding: 0!important;
+  }
+}
+.no-select-question {
+  padding-top: 125px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    width: 160px;
+    padding: 25px;
+  }
+
+  .tip {
+    font-size: 14px;
+    color: $normal-color;
+    letter-spacing: 0;
+  }
+}
+
+.question-config-form {
+  padding: 30px 20px 50px 20px;
+}
+</style>
diff --git a/web/src/management/pages/edit/pages/skin/content.vue b/web/src/management/pages/edit/pages/skin/content.vue
new file mode 100644
index 00000000..fe396def
--- /dev/null
+++ b/web/src/management/pages/edit/pages/skin/content.vue
@@ -0,0 +1,32 @@
+<template>
+    <commonTemplate>
+      <catalogPanel slot="left"></catalogPanel>
+      <previewPanel slot="center"></previewPanel>
+      <setterPanel slot="right"></setterPanel>
+    </commonTemplate>
+  </template>
+  <script>
+  import commonTemplate from '../../components/commonTemplate.vue';
+  import catalogPanel from '../../modules/settingModule/skin/catalogPanel.vue';
+  import previewPanel from '../../modules/settingModule/skin/previewPanel.vue';
+  import setterPanel from '../../modules/settingModule/skin/setterPanel.vue';
+  
+  export default {
+    name: 'editIndex',
+    components: {
+      commonTemplate,
+      catalogPanel,
+      previewPanel,
+      setterPanel,
+    },
+    created() {
+      this.$store.dispatch('getBannerData');
+    }
+  };
+  </script>
+  <style lang="scss" scoped>
+  .navbar {
+    border-bottom: 1px solid #e7e9eb;
+  }
+  </style>
+  
\ No newline at end of file
diff --git a/web/src/management/pages/edit/pages/skin/index.vue b/web/src/management/pages/edit/pages/skin/index.vue
new file mode 100644
index 00000000..c211d413
--- /dev/null
+++ b/web/src/management/pages/edit/pages/skin/index.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="skin-content">
+    <div class="navbar-tab"> 
+      <el-radio-group size="mini" style="margin-bottom: 30px;" v-model="activeRouter">
+        <el-radio-button :label="btnItem.router" :key="btnItem.router" v-for="btnItem in btnList" >
+          <span>{{ btnItem.text }}</span>
+        </el-radio-button>
+      </el-radio-group>
+    </div>
+    <router-view></router-view>
+  </div>
+</template>
+<script>
+export default {
+  name: 'skinPage',
+  props: {},
+  data() {
+    return {
+      activeRouter: this.$route.name,
+      btnList: [
+        {
+          text: '内容页',
+          router: 'QuestionSkinSetting',
+          key: 'skinsettings',
+          next: true,
+        },
+        {
+          text: '结果页',
+          router: 'QuestionEditResultConfig',
+          key: 'status',
+        },
+      ],
+    };
+  },
+  watch: {
+    activeRouter: {
+      handler (val)  {
+        this.$router.push({ name: val})
+      }
+    }
+  },
+};
+</script>
+<style lang="scss" scoped>
+.skin-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  width: 100%;
+  height: 100%;
+
+  .navbar-tab {
+    position: absolute;
+    top: 10px;
+    cursor: pointer;
+    z-index: 9999;
+    ::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner{
+        color:  $primary-color;
+        background-color: #fff!important;
+        // &:active{
+        //   color: $primary-color;
+        // }
+    }
+    
+  }
+}
+</style>
diff --git a/web/src/management/pages/edit/pages/resultConfig.vue b/web/src/management/pages/edit/pages/skin/result.vue
similarity index 56%
rename from web/src/management/pages/edit/pages/resultConfig.vue
rename to web/src/management/pages/edit/pages/skin/result.vue
index c8dca99a..60bd114d 100644
--- a/web/src/management/pages/edit/pages/resultConfig.vue
+++ b/web/src/management/pages/edit/pages/skin/result.vue
@@ -6,10 +6,10 @@
   </commonTemplate>
 </template>
 <script>
-import commonTemplate from '../components/commonTemplate.vue';
-import resultCatalog from '../modules/settingModule/resultCatalog.vue';
-import resultPreview from '../modules/settingModule/resultPreview.vue';
-import resultSetter from '../modules/settingModule/resultSetter.vue';
+import commonTemplate from '../../components/commonTemplate.vue';
+import resultCatalog from '../../modules/settingModule/result/catalogPanel.vue';
+import resultPreview from '../../modules/settingModule/result/previewPanel.vue';
+import resultSetter from '../../modules/settingModule/result/setterPanel.vue';
 
 export default {
   name: 'editIndex',
diff --git a/web/src/management/router/index.js b/web/src/management/router/index.js
index 00996a6b..cce439ef 100644
--- a/web/src/management/router/index.js
+++ b/web/src/management/router/index.js
@@ -24,12 +24,14 @@ const routes = [
     meta: {
       needLogin: true,
     },
+    // redirect: '/question',
     component: () =>
       import(/* webpackChunkName: "editPage" */ '../pages/edit/index.vue'),
     children: [
       {
         path: '',
         name: 'QuestionEditIndex',
+        
         meta: {
           needLogin: true,
         },
@@ -50,15 +52,32 @@ const routes = [
           ),
       },
       {
-        path: 'resultConfig',
-        name: 'QuestionEditResultConfig',
+        path: 'skin',
+        name: 'SkinSetting',
         meta: {
           needLogin: true,
         },
-        component: () =>
-          import(
-            /* webpackChunkName: "QuestionEditResultConfig" */ '../pages/edit/pages/resultConfig.vue'
-          ),
+        component: () => import(/* webpackChunkName: "skin" */ '../pages/edit/pages/skin/index.vue'),
+        children: [
+          {
+            path: '',
+            name: 'QuestionSkinSetting',
+            meta: {
+              needLogin: true,
+            },
+            component: () =>
+              import('../pages/edit/pages/skin/content.vue'),
+          },
+          {
+            path: 'result',
+            name: 'QuestionEditResultConfig',
+            meta: {
+              needLogin: true,
+            },
+            component: () =>
+              import('../pages/edit/pages/skin/result.vue'),
+          }
+        ],
       },
     ],
   },
diff --git a/web/src/management/store/edit/actions.js b/web/src/management/store/edit/actions.js
index 3b87752d..0d6b34c1 100644
--- a/web/src/management/store/edit/actions.js
+++ b/web/src/management/store/edit/actions.js
@@ -66,4 +66,7 @@ export default {
     commit('changeSchema', { key, value });
     commit('updateSchemaUpdateTime', Date.now());
   },
+  changeThemePreset({ commit }, presets) {
+    commit('changeThemePreset', presets)
+  },
 };
diff --git a/web/src/management/store/edit/mutations.js b/web/src/management/store/edit/mutations.js
index 8a716427..3a01ee78 100644
--- a/web/src/management/store/edit/mutations.js
+++ b/web/src/management/store/edit/mutations.js
@@ -1,4 +1,4 @@
-import { set as _set, merge as _merge } from 'lodash-es';
+import { get as _get, set as _set, merge as _merge } from 'lodash-es';
 
 export default {
   setCurrentEditOne(state, data) {
@@ -86,4 +86,9 @@ export default {
   changeSchema(state, { key, value }) {
     _set(state.schema, key, value);
   },
+  changeThemePreset(state, presets) {
+    Object.keys(presets).forEach(key => {
+      _set(state.schema, key, presets[key]);
+    })
+  }
 };
diff --git a/web/src/management/store/edit/state.js b/web/src/management/store/edit/state.js
index c5d55d5c..cd2fee07 100644
--- a/web/src/management/store/edit/state.js
+++ b/web/src/management/store/edit/state.js
@@ -24,8 +24,15 @@ export default {
       logoImageWidth: '28%',
     },
     skinConf: {
-      skinColor: '#4a4c5b',
-      inputBgColor: '#ffffff',
+      backgroundConf: {
+        color: "#fff"
+      },
+      themeConf: {
+        color: "#ffa600"
+      },
+      contentConf: {
+        opacity: 100
+      }
     },
     baseConf: {
       begTime: '',
diff --git a/web/src/management/styles/icon.scss b/web/src/management/styles/icon.scss
index 19191e0f..8eb810a6 100644
--- a/web/src/management/styles/icon.scss
+++ b/web/src/management/styles/icon.scss
@@ -1,8 +1,8 @@
 @font-face {
   font-family: "iconfont"; /* Project id 4263849 */
-  src: url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.woff2?t=1695630919866') format('woff2'),
-       url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.woff?t=1695630919866') format('woff'),
-       url('//at.alicdn.com/t/c/font_4263849_tcd4y5836dg.ttf?t=1695630919866') format('truetype');
+  src: url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.woff2?t=1695630919866') format('woff2'),
+       url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.woff?t=1695630919866') format('woff'),
+       url('//at.alicdn.com/t/c/font_4263849_t1b52yiuhie.ttf?t=1695630919866') format('truetype');
 }
 
 .iconfont {
@@ -50,7 +50,7 @@
 }
 
 .icon-wenjuanshezhi:before {
-  content: "\e6cc";
+  content: "\eacc";
 }
 
 .icon-jiantou:before {
@@ -124,3 +124,6 @@
 .icon-erweima:before {
   content: "\e6c0";
 }
+.icon-yangshishezhi:before {
+  content: "\e6e6";
+}
diff --git a/web/src/management/styles/skin.scss b/web/src/management/styles/skin.scss
new file mode 100644
index 00000000..99eedd02
--- /dev/null
+++ b/web/src/management/styles/skin.scss
@@ -0,0 +1,12 @@
+// 定义颜色变量
+$primary-color: #ffa600;
+$primary-background-color: #fff;
+$opacity: 1;
+
+// 使用CSS自定义属性
+:root {
+  --primary-color: #{$primary-color};
+  --primary-background-color: #{$primary-background-color};
+  --opacity: #{$opacity};
+}
+
diff --git a/web/src/management/styles/variable.scss b/web/src/management/styles/variable.scss
index 956a00b5..93924326 100644
--- a/web/src/management/styles/variable.scss
+++ b/web/src/management/styles/variable.scss
@@ -1,8 +1,10 @@
+@import './skin.scss';
 $primary-color: #ffa600;
 $primary-color-hover: #fbb733;
 $primary-color-deep: #D48D00;
 $primary-color-light: #fffcf0;
 
+
 $normal-color: #4a4c5b;
 $normal-color-hover: #626369;
 $normal-color-deep: #292a36;
@@ -22,6 +24,7 @@ $background-color: #f6f7f9;
 $background-color-light: #ffffff;
 $background-color-gray: #F7F9Fb;
 $background-color-dark: #E7E9EB;
+$primary-bg-color: #fef6e6;
 
 $title-color-deep: #292a36;
 $title-color: #4a4c5b;
@@ -32,3 +35,35 @@ $light-focus-color: #666666;
 $spliter-color: #f7f7f7;
 
 $error-color: #ec4e29;
+
+$primary-color-light: hsl(48, 100%, 97%);
+
+
+
+
+$title-size: 0.32rem;
+$font-size: 0.28rem;
+$tip-size: 0.22rem;
+
+.el-radio__input.is-checked+.el-radio__label {
+  color: $font-color !important;
+}
+
+.el-switch.is-checked .el-switch__core {
+  border-color: $primary-color !important;
+  background-color: $primary-color !important;
+}
+
+.el-checkbox__input.is-checked .el-checkbox__inner,
+.question-edit-wrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+  background-color: $primary-color !important;
+  border-color: $primary-color !important;
+}
+
+.el-checkbox__input.is-focus .el-checkbox__inner {
+  border-color: $primary-color !important;
+}
+
+.el-checkbox__input.is-checked+.el-checkbox__label {
+  color: $font-color !important;
+}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/default.scss b/web/src/materials/questions/common/css/default.scss
index 7bd31e67..576ae519 100644
--- a/web/src/materials/questions/common/css/default.scss
+++ b/web/src/materials/questions/common/css/default.scss
@@ -1,4 +1,4 @@
-$primary-color: #FAA600;
+$primary-color: var(--primary-color);
 $primary-color-light: hsl(48, 100%, 97%);
 
 $title-color-deep: #292a36;
@@ -19,26 +19,3 @@ $error-color: #ec4e29;
 $title-size: 0.32rem;
 $font-size: 0.28rem;
 $tip-size: 0.22rem;
-
-.el-radio__input.is-checked+.el-radio__label {
-  color: $font-color !important;
-}
-
-.el-switch.is-checked .el-switch__core {
-  border-color: $primary-color !important;
-  background-color: $primary-color !important;
-}
-
-.el-checkbox__input.is-checked .el-checkbox__inner,
-.question-edit-wrapper .el-checkbox__input.is-indeterminate .el-checkbox__inner {
-  background-color: $primary-color !important;
-  border-color: $primary-color !important;
-}
-
-.el-checkbox__input.is-focus .el-checkbox__inner {
-  border-color: $primary-color !important;
-}
-
-.el-checkbox__input.is-checked+.el-checkbox__label {
-  color: $font-color !important;
-}
\ No newline at end of file
diff --git a/web/src/materials/questions/common/css/radioStar.scss b/web/src/materials/questions/common/css/radioStar.scss
index 253cfc92..ee38b93d 100644
--- a/web/src/materials/questions/common/css/radioStar.scss
+++ b/web/src/materials/questions/common/css/radioStar.scss
@@ -1,3 +1,4 @@
+@import './default.scss';
 .star-wrapper-main {
     // .isShowInput{
     //   padding-bottom: 0 !important ;
diff --git a/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue b/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
index 33fd2663..42f6a959 100644
--- a/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
+++ b/web/src/materials/questions/components/AdvancedConfig/OptionConfig.vue
@@ -252,7 +252,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import '../../common/css/default.scss';
+// @import '../../common/css/default.scss';
 .ceilingPopper {
   max-width: 1000px !important ;
 }
diff --git a/web/src/materials/questions/components/Options/OptionEdit.vue b/web/src/materials/questions/components/Options/OptionEdit.vue
index 7dd66f65..d5c8cac6 100644
--- a/web/src/materials/questions/components/Options/OptionEdit.vue
+++ b/web/src/materials/questions/components/Options/OptionEdit.vue
@@ -115,7 +115,7 @@ export default {
 </script>
 
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import '../../common/css/default.scss';
+// @import '../../common/css/default.scss';
 .option-edit-wrap {
   .focus {
     margin-top: 31px;
diff --git a/web/src/materials/questions/components/Options/OptionEditBar.vue b/web/src/materials/questions/components/Options/OptionEditBar.vue
index 3e2464e1..da8960c9 100644
--- a/web/src/materials/questions/components/Options/OptionEditBar.vue
+++ b/web/src/materials/questions/components/Options/OptionEditBar.vue
@@ -118,7 +118,7 @@ export default defineComponent({
 });
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
-@import '../../common/css/default.scss';
+// @import '../../common/css/default.scss';
 
 .option-edit-bar-wrap {
   margin-top: 20px;
diff --git a/web/src/materials/questions/components/Progress.vue b/web/src/materials/questions/components/Progress.vue
index 7b09ee61..ddd82d5c 100644
--- a/web/src/materials/questions/components/Progress.vue
+++ b/web/src/materials/questions/components/Progress.vue
@@ -40,6 +40,7 @@ export default {
 };
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
+@import '../common/css/default.scss';
 .process-outer {
   position: relative;
   border-radius: 0.16rem;
diff --git a/web/src/materials/setters/widgets/ColorPicker.vue b/web/src/materials/setters/widgets/ColorPicker.vue
new file mode 100644
index 00000000..f8fae036
--- /dev/null
+++ b/web/src/materials/setters/widgets/ColorPicker.vue
@@ -0,0 +1,31 @@
+<template>
+  <el-form-item class="pick-wrap">
+    <el-color-picker :value="formConfig.value" @change="changeData"></el-color-picker>
+  </el-form-item>
+</template>
+<script>
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+export default {
+  name: 'ColorPicker',
+  props: {
+    formConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    changeData(value) {
+      const key = this.formConfig.key;
+      this.$emit(FORM_CHANGE_EVENT_KEY, {
+        key,
+        value,
+      });
+    },
+  },
+};
+</script>
+<style lang="scss" scoped>
+.pick-wrap{
+  text-align: end;
+}
+</style>
diff --git a/web/src/materials/setters/widgets/FormItem.vue b/web/src/materials/setters/widgets/FormItem.vue
index edb859c4..5f27d5ff 100644
--- a/web/src/materials/setters/widgets/FormItem.vue
+++ b/web/src/materials/setters/widgets/FormItem.vue
@@ -1,7 +1,7 @@
 <template>
   <el-form-item
     :class="{
-      horizion: formConfig.direction === 'horizon',
+      horizon: formConfig.direction === 'horizon',
       space_between: formConfig.direction === 'space_between',
     }"
   >
@@ -46,4 +46,15 @@ export default {
   display: flex;
   flex-direction: row;
 }
+.space_between{
+  display: flex;
+  justify-content: space-between;
+  
+  ::v-deep> label{
+    flex: 1;
+  }
+  ::v-deep> div{
+    flex: 1;
+  }
+}
 </style>
diff --git a/web/src/materials/setters/widgets/InputPercent.vue b/web/src/materials/setters/widgets/InputPercent.vue
index c3e3c293..84ccbb3d 100644
--- a/web/src/materials/setters/widgets/InputPercent.vue
+++ b/web/src/materials/setters/widgets/InputPercent.vue
@@ -1,5 +1,6 @@
 <template>
   <el-input
+    class="custom-input"
     :placeholder="formConfig.placeholder"
     v-model="value"
     @input="changeData"
@@ -67,4 +68,12 @@ export default {
   },
 };
 </script>
-<style lang="scss" rel="stylesheet/scss" scoped></style>
+<style lang="scss" rel="stylesheet/scss" scoped>
+.custom-input{
+  ::v-deep .el-input__inner{
+    width: 100px;
+    padding-right: 0px;
+  }
+}
+
+</style>
diff --git a/web/src/materials/setters/widgets/SliderSetter.vue b/web/src/materials/setters/widgets/SliderSetter.vue
new file mode 100644
index 00000000..b34f1d62
--- /dev/null
+++ b/web/src/materials/setters/widgets/SliderSetter.vue
@@ -0,0 +1,37 @@
+<template>
+  <el-form-item class="slider-wrap">
+    <el-slider :value="formConfig.value" @input="changeData" :format-tooltip="formatTooltip"></el-slider>
+    <!-- <span>{{ formConfig.value + '%'  }}</span> -->
+  </el-form-item>
+</template>
+<script>
+import { FORM_CHANGE_EVENT_KEY } from '@/materials/setters/constant';
+export default {
+  name: 'SliderSetter',
+  props: {
+    formConfig: {
+      type: Object,
+      required: true,
+    },
+  },
+  methods: {
+    formatTooltip (val) {
+      return val + '%';
+    },
+    changeData(value) {
+      const key = this.formConfig.key;
+      this.$emit(FORM_CHANGE_EVENT_KEY, {
+        key,
+        value,
+      });
+    },
+  },
+};
+</script>
+<style>
+.slider-wrap{
+  flex: 1;
+  /* display: flex; */
+  padding: 0 20px;
+}
+</style>
\ No newline at end of file
diff --git a/web/src/render/App.vue b/web/src/render/App.vue
index 9746a705..00dcdc07 100644
--- a/web/src/render/App.vue
+++ b/web/src/render/App.vue
@@ -1,7 +1,7 @@
 <template>
   <div id="app">
     <Component v-if="$store.state.router" :is="$store.state.router"></Component>
-    <logo></logo>
+    <logo v-if="!['successPage', 'indexPage'].includes($store.state.router)"></logo>
   </div>
 </template>
 
@@ -14,6 +14,7 @@ import errorPage from './pages/errorPage.vue';
 import successPage from './pages/successPage.vue';
 
 import logo from './components/logo.vue';
+import { get as _get, value } from 'lodash-es'
 
 export default {
   name: 'App',
@@ -27,7 +28,16 @@ export default {
   data() {
     return {};
   },
-  computed: {},
+  computed: {
+    skinConf () {
+      return _get(this.$store, 'state.skinConf', {});
+    },
+  },
+  watch: {
+    skinConf(value) {
+      this.setSkin(value)
+    }
+  },
   async created() {
     this.init();
   },
@@ -59,6 +69,7 @@ export default {
               skinConf,
               submitConf,
             };
+            this.setSkin(skinConf)
             this.$store.commit('setSurveyPath', surveyPath);
             this.$store.dispatch('init', questionData);
             this.$store.dispatch('getEncryptInfo');
@@ -73,6 +84,20 @@ export default {
         }
       }
     },
+    setSkin(skinConf) {
+      const { themeConf, backgroundConf, contentConf} = skinConf
+      const root = document.documentElement;
+      if(themeConf?.color) {
+        root.style.setProperty('--primary-color', themeConf?.color); // 设置主题颜色
+      }
+      if(backgroundConf?.color) {
+        root.style.setProperty('--primary-background-color', backgroundConf?.color); // 设置背景颜色
+      }
+      if(contentConf?.opacity.toString()) {
+        console.log({opacity: (contentConf?.opacity)/100})
+        root.style.setProperty('--opacity', (contentConf?.opacity)/100); // 设置全局透明度
+      }
+    }
   },
 };
 </script>
@@ -86,10 +111,7 @@ html {
   background: rgb(238, 238, 238);
 }
 
-body,
-.container {
-  height: 100%;
-}
+
 
 #app {
   position: relative;
@@ -97,7 +119,7 @@ body,
   width: 100%;
   max-width: 750px;
   margin: auto;
-  min-height: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   flex: 1;
diff --git a/web/src/render/components/header.vue b/web/src/render/components/header.vue
index f3d03354..86a2ed50 100755
--- a/web/src/render/components/header.vue
+++ b/web/src/render/components/header.vue
@@ -32,7 +32,7 @@
         <div class="iconfont icon-kaishi play-icon" @click="play()"></div>
       </div>
     </div>
-    <div
+    <!-- <div
       class="titlePanel"
       v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle"
     >
@@ -41,7 +41,7 @@
         v-if="bannerConf.titleConfig.mainTitle"
         v-safe-html="bannerConf.titleConfig.mainTitle"
       ></div>
-    </div>
+    </div> -->
   </div>
 </template>
 <script>
@@ -53,7 +53,7 @@ export default {
   computed: {
     bannerConf() {
       return _get(this.$store, 'state.bannerConf', {});
-    },
+    }
   },
   methods: {
     onBannerClick() {
@@ -90,6 +90,7 @@ export default {
   }
 
   .banner {
+    display: flex;
     .banner-img {
       width: 100%;
 
@@ -133,39 +134,3 @@ export default {
   }
 }
 </style>
-
-<style lang="scss">
-@import '@/render/styles/variable.scss';
-
-.mainTitle {
-  font-size: 0.28rem;
-  line-height: 0.4rem;
-  color: $title-color;
-
-  ol {
-    list-style: decimal;
-  }
-
-  ul {
-    list-style: disc;
-  }
-
-  img {
-    width: 100%;
-  }
-  h1,
-  h2,
-  h3,
-  h4,
-  h5,
-  h6,
-  p {
-    line-height: 0.6rem;
-    color: $title-color-deep;
-    margin-bottom: 0.35rem;
-  }
-  p {
-    margin-bottom: 0;
-  }
-}
-</style>
diff --git a/web/src/render/components/logo.vue b/web/src/render/components/logo.vue
index c2179064..037dd5ea 100644
--- a/web/src/render/components/logo.vue
+++ b/web/src/render/components/logo.vue
@@ -31,7 +31,6 @@ export default {
 }
 
 .logo-wrapper {
-  max-width: 300px;
   text-align: center;
   font-size: 0;
   padding: 0.1rem 0 0.5rem;
diff --git a/web/src/render/components/mainTitle.vue b/web/src/render/components/mainTitle.vue
new file mode 100644
index 00000000..54579068
--- /dev/null
+++ b/web/src/render/components/mainTitle.vue
@@ -0,0 +1,68 @@
+<template>
+  <div class="question-header">
+    <div
+      class="titlePanel"
+      v-if="bannerConf.titleConfig && bannerConf.titleConfig.mainTitle"
+    >
+      <div
+        class="mainTitle"
+        v-if="bannerConf.titleConfig.mainTitle"
+        v-safe-html="bannerConf.titleConfig.mainTitle"
+      ></div>
+    </div>
+  </div>
+</template>
+<script>
+import { get as _get } from 'lodash-es';
+export default {
+  name: 'mainTitle',
+  computed: {
+    bannerConf() {
+      return _get(this.$store, 'state.bannerConf', {});
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+@import '@/render/styles/variable.scss';
+.question-header {
+  .titlePanel {
+    position: relative;
+    width: 100%;
+    padding: 0.4rem 0.4rem;
+    box-sizing: border-box;
+  }
+}
+.mainTitle {
+  font-size: 0.28rem;
+  line-height: 0.4rem;
+  color: $title-color;
+
+  ol {
+    list-style: decimal;
+  }
+
+  ul {
+    list-style: disc;
+  }
+
+  img {
+    width: 100%;
+  }
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6,
+  p {
+    line-height: 0.6rem;
+    color: $title-color-deep;
+    margin-bottom: 0.35rem;
+  }
+  p {
+    margin-bottom: 0;
+  }
+}
+</style>
diff --git a/web/src/render/components/submit.vue b/web/src/render/components/submit.vue
index a7bb1e08..5b362f13 100644
--- a/web/src/render/components/submit.vue
+++ b/web/src/render/components/submit.vue
@@ -2,7 +2,6 @@
   <div class="question-submit_wrapper">
     <button
       class="question-submit-btn"
-      :style="{ backgroundColor: skinConf.skinColor }"
       @click="submit"
     >
       {{ submitConf.submitTitle }}
@@ -60,9 +59,9 @@ export default {
     font-weight: 500;
     text-align: center;
     color: #fff;
-    background: $primary-color;
+    background: var(--primary-color);
     border-radius: 0.08rem;
-    margin-top: 0.4rem;
+    margin: 0.4rem 0;
     cursor: pointer;
   }
 }
diff --git a/web/src/render/pages/errorPage.vue b/web/src/render/pages/errorPage.vue
index a8ebc3e0..69a0a9f8 100755
--- a/web/src/render/pages/errorPage.vue
+++ b/web/src/render/pages/errorPage.vue
@@ -1,8 +1,12 @@
 <template>
-  <div class="error-wrapper">
-    <img class="error-img" :src="errorImageUrl" />
-    <div class="bottom-word" v-html="errorMsg"></div>
-  </div>
+  <div class="result-page-wrap">
+    <div class="result-page">
+      <div class="error-wrapper">
+        <img class="error-img" :src="errorImageUrl" />
+        <div class="bottom-word" v-html="errorMsg"></div>
+      </div>
+    </div>
+  </div>  
 </template>
 <script>
 export default {
@@ -29,6 +33,22 @@ export default {
 };
 </script>
 <style lang="scss" rel="stylesheet/scss" scoped>
+
+.result-page-wrap {
+  width: 100%;
+  flex: 1;
+  text-align: center;
+  overflow: hidden;
+  background: var(--primary-background-color);
+  
+  padding: 0 0.3rem;
+  .result-page{
+    background: rgba(255, 255, 255, var(--opacity)); 
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
+}
 .error-wrapper {
   text-align: center;
   font-size: 14px;
diff --git a/web/src/render/pages/index.vue b/web/src/render/pages/index.vue
index abc8be1f..9df1ac08 100644
--- a/web/src/render/pages/index.vue
+++ b/web/src/render/pages/index.vue
@@ -1,23 +1,31 @@
 <template>
   <div class="index">
     <progressBar />
-    <Header></Header>
-    <mainRenderer ref="main"></mainRenderer>
-    <submit
-      :validate="validate"
-      :renderData="renderData"
-      @submit="onSubmit"
-    ></submit>
+    <div class="wrapper" ref="box">
+      <Header></Header>
+      <div class="content">
+        <mainTitle></mainTitle>
+        <mainRenderer ref="main"></mainRenderer>
+        <submit
+          :validate="validate"
+          :renderData="renderData"
+          @submit="onSubmit"
+        ></submit>
+        <logo></logo>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
 import Header from '../components/header.vue';
+import mainTitle from '../components/mainTitle.vue'
 import submit from '../components/submit.vue';
 import mainRenderer from '../components/mainRenderer';
 import progressBar from '../components/progressBar';
 import { submitForm } from '@/render/api/survey';
 import encrypt from '../utils/encrypt';
+import logo from '../components/logo.vue';
 
 export default {
   name: 'indexPage',
@@ -33,9 +41,11 @@ export default {
   },
   components: {
     Header,
+    mainTitle,
     submit,
     mainRenderer,
     progressBar,
+    logo,
   },
   computed: {
     formModel() {
@@ -121,6 +131,20 @@ export default {
 
 <style scoped lang="scss">
 .index {
-  padding-bottom: 0.8rem;
+  // padding-bottom: 0.8rem;
+  min-height: 100%;
+  .wrapper{
+    min-height: 100%;
+    background-color: var(--primary-background-color);
+    display: flex;
+    flex-direction: column;
+    .content{
+      flex: 1;
+      margin: 0 0.3rem;
+      background: rgba(255, 255, 255, var(--opacity)); 
+      border-radius: 8px 8px 0 0;
+      height: 100%;
+    }
+  }
 }
 </style>
diff --git a/web/src/render/pages/successPage.vue b/web/src/render/pages/successPage.vue
index 96365ab3..2a79d6ac 100644
--- a/web/src/render/pages/successPage.vue
+++ b/web/src/render/pages/successPage.vue
@@ -1,14 +1,19 @@
 <template>
-  <div class="result-page">
-    <div class="result-content">
-      <img src="/imgs/icons/success.webp" />
-      <div class="msg" v-safe-html="successMsg"></div>
+  <div class="result-page-wrap">
+    <div class="result-page">
+      <div class="result-content">
+        <img src="/imgs/icons/success.webp" />
+        <div class="msg" v-safe-html="successMsg"></div>
+      </div>
+      <logo></logo>
     </div>
   </div>
 </template>
 <script>
+import logo from '../components/logo.vue';
 export default {
   name: 'resultPage',
+  components: {logo},
   computed: {
     submitConf() {
       return this.$store?.state?.submitConf || {};
@@ -22,11 +27,20 @@ export default {
 <style lang="scss" rel="stylesheet/scss" scoped>
 @import '@/render/styles/variable.scss';
 
-.result-page {
+.result-page-wrap {
   width: 100%;
   flex: 1;
   text-align: center;
   overflow: hidden;
+  background: var(--primary-background-color);
+  
+  padding: 0 0.3rem;
+  .result-page{
+    background: rgba(255, 255, 255, var(--opacity)); 
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+  }
 }
 
 .result-content {
@@ -37,7 +51,7 @@ export default {
   width: 100%;
   position: relative;
   padding-top: 2rem;
-  background: #fff;
+  flex: 1;
 
   img {
     width: 2rem;