diff --git a/src/assets/images/appearset_bgc_big.png b/src/assets/images/appearset_bgc_big.png
new file mode 100644
index 0000000..09f4d22
Binary files /dev/null and b/src/assets/images/appearset_bgc_big.png differ
diff --git a/src/router/modules/root.js b/src/router/modules/root.js
index f6fb21f..271f88b 100644
--- a/src/router/modules/root.js
+++ b/src/router/modules/root.js
@@ -1,4 +1,9 @@
 export default [
+    {
+        path: '/test',
+        meta: {requireLogin: false},
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/test')
+    },
     {
         path: '/',
         meta: {requireLogin: false},
@@ -61,5 +66,9 @@ export default [
         path: '/project/preview',
         meta: {requireLogin: false},
         component: () => import(/* webpackChunkName: 'root' */ '@/views/form/PreView.vue')
+    }, {
+        path: '/project/view',
+        meta: {requireLogin: false},
+        component: () => import(/* webpackChunkName: 'root' */ '@/views/form/ProjectForm.vue')
     }
 ]
diff --git a/src/views/form/PreView.vue b/src/views/form/PreView.vue
index 481b16f..34925f3 100644
--- a/src/views/form/PreView.vue
+++ b/src/views/form/PreView.vue
@@ -1,134 +1,107 @@
 <template>
-    <div class="preview-form">
-        <div class="" v-if="!formState">
-            <el-row  type="flex" justify="center" align="middle">
-                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
-                    <h4 class="form-name-text">
-                        {{formConf.title}}</h4>
-                </el-col>
-            </el-row>
-            <el-row type="flex" justify="center" align="middle">
-                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
-                    <p class="form-name-text">
-                        {{formConf.description}}
-                    </p>
-                </el-col>
-            </el-row>
-            <el-divider></el-divider>
-            <parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/>
-        </div>
-        <div v-if="formState">
-            <p style="text-align: center">
-                <i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p>
-        </div>
+    <div class="preview-container">
+        <el-tabs type="card" v-if="projectConfig.projectKey">
+            <el-tab-pane>
+            <span slot="label"><i class="el-icon-mobile"></i>
+                手机
+            </span>
+                <div class="preview-layer">
+                    <div class="preview-bg"/>
+                    <div class="preview-phone">
+                        <iframe id="preview-html" name="preview-html" class="preview-html"
+                                frameborder="0"
+                                src="http://localhost:8888/#/project/view?key=ec4dfaab04a94608a972845a5a459d3e"
+                        />
+                    </div>
+                </div>
+            </el-tab-pane>
+            <el-tab-pane>
+            <span slot="label"><i class="el-icon-monitor"></i>
+                电脑
+            </span>
+                <project-form :projectConfig="projectConfig" />
+            </el-tab-pane>
+        </el-tabs>
     </div>
+
 </template>
 
 <script>
-import Parser from '@/components/parser/Parser'
-import {dbDataConvertForItemJson} from '@/utils/convert'
-// 若parser是通过安装npm方式集成到项目中的，使用此行引入
-// import Parser from 'form-gen-parser'
-window.onload = function() {
-    document.addEventListener('touchstart', function(event) {
-        if (event.touches.length > 1) {
-            event.preventDefault()
-        }
-    })
-    document.addEventListener('gesturestart', function(event) {
-        event.preventDefault()
-    })
-}
+import ProjectForm from './ProjectForm'
+
 export default {
-    components: {
-        Parser
-    },
-    props: {},
-    data() {
-        return {
-            key2: +new Date(),
+    name: 'PreView',
+    props: {
+        projectConfig: {
             projectKey: '',
-            formState: false,//是否填写
-            formConf: {
-                fields: [],
-                __methods__: {
-                    clickTestButton1() {
-                        console.log(
-                            `%c【测试按钮1】点击事件里可以访问当前表单：
-                1) formModel='formData', 所以this.formData可以拿到当前表单的model
-                2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
-              `,
-                            'color:#409EFF;font-size: 15px'
-                        )
-                        console.log('表单的Model：', this.formData)
-                        console.log('表单的ref：', this.$refs.elForm)
-                    }
-                },
-                formRef: 'elForm',
-                formModel: 'formData',
-                size: 'small',
-                labelPosition: 'top',
-                labelWidth: 100,
-                formRules: 'rules',
-                gutter: 15,
-                disabled: false,
-                span: 24,
-                formBtns: true,
-                resetBtn: true ,
-                unFocusedComponentBorder: true
-            }
+            headImgUrl: '',
+            color: ''
         }
     },
-    computed: {},
-    watch: {},
-    created() {
-        this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
+    data() {
+        return {}
     },
     mounted() {
-        this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => {
-            if (res.data) {
-                let fields = res.data.projectItems.map(item => {
-                    return dbDataConvertForItemJson(item)
-                })
-                this.formConf.fields = fields
-                this.formConf.title = res.data.project.name
-                this.formConf.description = res.data.project.describe
-            }
-        })
-        this.projectKey = this.$route.query.key
-    },
-    methods: {
-        fillFormData(form, data) {
-            form.fields.forEach(item => {
-                const val = data[item.__vModel__]
-                if (val) {
-                    item.__config__.defaultValue = val
-                }
-            })
-        },
-        submitForm(data) {
-            this.$api.post('/user/project/result/create', {'projectKey': this.projectKey, 'collectData': data}).then(res => {
-                this.formState = true
-            })
+        this.projectConfig = {
+            headImgUrl: 'http://cdn1.wenjuan.com/appear-PC-防疫13.png',
+            projectKey: 'afd5c3562c924d20b7da67b1f192ce25'
         }
+    },
+    components: {
+        ProjectForm
     }
 }
 </script>
 
-<style lang="scss" scoped>
-.preview-form {
-    margin: 15px auto;
-    width: 800px;
-    padding: 15px;
-    background-repeat: repeat;
-    background-color: rgba(229, 239, 247, 0.87);
+<style scoped>
+
+.preview-container {
+    margin: 0;
+    padding: 0;
+    background-color: #f7f7f7;
 }
 
-@media screen and (max-width: 750px) {
-    .preview-form {
-        margin: 0px;
-        width: 93% !important;
-        background-color: white;
-    }
+/deep/ .el-tabs__header {
+    width: 300px;
+    margin: 0 auto;
+    border: none;
+}
+
+/deep/ .el-tabs--card > .el-tabs__header .el-tabs__item {
+    background-color: white;
+    border: 1px solid white;
+}
+
+div.preview-layer {
+    width: 500px;
+    height: 100%;
+    margin: 10px auto;
+    right: 0;
+    text-align: center;
+}
+
+div.preview-layer .preview-bg {
+    width: 500px;
+    height: 100%;
+    margin: 20px auto;
+    z-index: 999;
+    opacity: 0.7;
+}
+
+div.preview-layer .preview-phone {
+    width: 372px;
+    height: 744px;
+    background: url('~@/assets/images/appearset_bgc_big.png');
+    background-size: 372px 744px;
+    z-index: 1000;
+}
+
+.preview-html {
+    width: 318px !important;
+    height: 568px !important;
+    margin: 74px 0 0;
+    border-radius: 5px;
+    outline: none;
+    background-color: #fff;
 }
 </style>
diff --git a/src/views/form/PreView1.vue b/src/views/form/PreView1.vue
new file mode 100644
index 0000000..231b8ca
--- /dev/null
+++ b/src/views/form/PreView1.vue
@@ -0,0 +1,139 @@
+<template>
+    <div class="preview-form">
+        <div class="" v-if="!formState">
+            <el-row type="flex" justify="center" align="middle">
+                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
+                    <h4 class="form-name-text">
+                        {{formConf.title}}</h4>
+                </el-col>
+            </el-row>
+            <el-row type="flex" justify="center" align="middle">
+                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
+                    <p class="form-name-text">
+                        {{formConf.description}}
+                    </p>
+                </el-col>
+            </el-row>
+            <el-divider></el-divider>
+            <parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/>
+        </div>
+        <div v-if="formState">
+            <p style="text-align: center">
+                <i class="el-icon-check"/>您已完成本次问卷，感谢您的帮助与支持</p>
+        </div>
+    </div>
+</template>
+
+<script>
+import Parser from '@/components/parser/Parser'
+import {dbDataConvertForItemJson} from '@/utils/convert'
+// 若parser是通过安装npm方式集成到项目中的，使用此行引入
+// import Parser from 'form-gen-parser'
+window.onload = function() {
+    document.addEventListener('touchstart', function(event) {
+        if (event.touches.length > 1) {
+            event.preventDefault()
+        }
+    })
+    document.addEventListener('gesturestart', function(event) {
+        event.preventDefault()
+    })
+}
+export default {
+    components: {
+        Parser
+    },
+    props: {
+        projectKey: ''
+    },
+    data() {
+        return {
+            key2: +new Date(),
+            projectKey: '',
+            formState: false,//是否填写
+            formConf: {
+                fields: [],
+                __methods__: {
+                    clickTestButton1() {
+                        console.log(
+                            `%c【测试按钮1】点击事件里可以访问当前表单：
+                1) formModel='formData', 所以this.formData可以拿到当前表单的model
+                2) formRef='elForm', 所以this.$refs.elForm可以拿到当前表单的ref(vue组件)
+              `,
+                            'color:#409EFF;font-size: 15px'
+                        )
+                        console.log('表单的Model：', this.formData)
+                        console.log('表单的ref：', this.$refs.elForm)
+                    }
+                },
+                formRef: 'elForm',
+                formModel: 'formData',
+                size: 'small',
+                labelPosition: 'top',
+                labelWidth: 100,
+                formRules: 'rules',
+                gutter: 15,
+                disabled: false,
+                span: 24,
+                formBtns: true,
+                resetBtn: true,
+                unFocusedComponentBorder: true
+            }
+        }
+    },
+    computed: {},
+    watch: {},
+    created() {
+        this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
+    },
+    mounted() {
+        this.$api.get(`/user/project/query/details/${this.$route.query.key}`).then(res => {
+            if (res.data) {
+                let fields = res.data.projectItems.map(item => {
+                    return dbDataConvertForItemJson(item)
+                })
+                this.formConf.fields = fields
+                this.formConf.title = res.data.project.name
+                this.formConf.description = res.data.project.describe
+            }
+        })
+        this.projectKey = this.$route.query.key
+    },
+    methods: {
+        fillFormData(form, data) {
+            form.fields.forEach(item => {
+                const val = data[item.__vModel__]
+                if (val) {
+                    item.__config__.defaultValue = val
+                }
+            })
+        },
+        submitForm(data) {
+            this.$api.post('/user/project/result/create', {
+                'projectKey': this.projectKey,
+                'collectData': data
+            }).then(res => {
+                this.formState = true
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.preview-form {
+    margin: 15px auto;
+    width: 800px;
+    padding: 15px;
+    background-repeat: repeat;
+    background-color: rgba(229, 239, 247, 0.87);
+}
+
+@media screen and (max-width: 750px) {
+    .preview-form {
+        margin: 0px;
+        width: 93% !important;
+        background-color: white;
+    }
+}
+</style>
diff --git a/src/views/form/ProjectForm.vue b/src/views/form/ProjectForm.vue
new file mode 100644
index 0000000..fbe024b
--- /dev/null
+++ b/src/views/form/ProjectForm.vue
@@ -0,0 +1,136 @@
+<template>
+    <div class="project-form">
+        <div class="">
+            <el-image
+                :src="projectConfig.headImgUrl"
+                fit="scale-down"></el-image>
+            <el-row type="flex" justify="center" align="middle">
+                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
+                    <h4 class="form-name-text">
+                        {{formConf.title}}</h4>
+                </el-col>
+            </el-row>
+            <el-row type="flex" justify="center" align="middle">
+                <el-col :sm="{span:20}" :xs="{span:24,offset:0}" style="text-align: center">
+                    <p class="form-name-text">
+                        {{formConf.description}}
+                    </p>
+                </el-col>
+            </el-row>
+            <el-divider>
+            </el-divider>
+            <parser v-if="formConf.fields.length" :form-conf="formConf" @submit="submitForm"/>
+        </div>
+    </div>
+</template>
+
+<script>
+import Parser from '@/components/parser/Parser'
+import {dbDataConvertForItemJson} from '@/utils/convert'
+
+window.onload = function() {
+    document.addEventListener('touchstart', function(event) {
+        if (event.touches.length > 1) {
+            event.preventDefault()
+        }
+    })
+    document.addEventListener('gesturestart', function(event) {
+        event.preventDefault()
+    })
+}
+export default {
+    components: {
+        Parser
+    },
+    props: {
+        projectConfig: {
+            headImgUrl: '',
+            color: '',
+            projectKey: '',
+            showBtn: false
+        }
+    },
+    data() {
+        return {
+            key2: +new Date(),
+            projectKey: '',
+            formConf: {
+                fields: [],
+                __methods__: {},
+                formRef: 'elForm',
+                formModel: 'formData',
+                size: 'small',
+                labelPosition: 'top',
+                labelWidth: 100,
+                formRules: 'rules',
+                gutter: 15,
+                disabled: false,
+                span: 24,
+                formBtns: true,
+                resetBtn: true,
+                unFocusedComponentBorder: true
+            }
+        }
+    },
+    computed: {},
+    watch: {},
+    created() {
+        //不存去路由中尝试获取
+        if (!this.projectConfig) {
+            this.projectConfig = {
+                headImgUrl: '',
+                color: '',
+                projectKey: '',
+                showBtn: false
+            }
+        }
+        if (this.projectConfig && this.projectConfig.projectKey) {
+            this.projectKey = this.projectConfig.projectKey
+        } else if (this.$route.query.key) {
+            this.projectKey = this.$route.query.key
+        }
+        this.formConf.formBtns = this.projectConfig.showBtn
+        this.formConf.size = window.innerWidth < 480 ? 'medium' : 'small'
+    },
+    mounted() {
+        this.$api.get(`/user/project/query/details/${this.projectKey}`).then(res => {
+            if (res.data) {
+                let fields = res.data.projectItems.map(item => {
+                    return dbDataConvertForItemJson(item)
+                })
+                this.formConf.fields = fields
+                this.formConf.title = res.data.project.name
+                this.formConf.description = res.data.project.describe
+            }
+        })
+    },
+    methods: {
+        submitForm(data) {
+            this.$api.post('/user/project/result/create', {
+                'projectKey': this.projectKey,
+                'collectData': data
+            }).then(res => {
+                this.formState = true
+            })
+        }
+    }
+}
+</script>
+
+<style lang="scss" scoped>
+.project-form {
+    margin: 15px auto;
+    width: 800px;
+    padding: 15px;
+    background-repeat: repeat;
+    background-color: rgba(229, 239, 247, 0.87);
+}
+
+@media screen and (max-width: 750px) {
+    .project-form {
+        margin: 0px;
+        width: 93% !important;
+        background-color: white;
+    }
+}
+</style>
diff --git a/src/views/form/theme.vue b/src/views/form/theme.vue
index db2feeb..b0dbb02 100644
--- a/src/views/form/theme.vue
+++ b/src/views/form/theme.vue
@@ -1,42 +1,71 @@
-<template xmlns="http://www.w3.org/1999/html" xmlns="http://www.w3.org/1999/html">
+<template>
     <div class="theme-container">
         <el-row>
-            <el-col :span="8" :offset="1">
-                <div class="left-container">
-                    <p class="theme-title">外观主题</p>
-                    <el-row>
-                        <el-col :span="3">
-                            <span class="theme-prompt-text">风格</span>
-                        </el-col>
-                        <el-col :span="3" v-for="item in styleList">
-                            <span class="style-btn">{{item.label}}</span>
-                        </el-col>
-                    </el-row>
-                    <el-row>
-                        <el-col :span="3">
-                            <span class="theme-prompt-text">颜色</span>
-                        </el-col>
-                        <el-col v-bind:style="{backgroundColor: c}" class="color-btn" :span="3" v-for="c in colorList">
-                        </el-col>
-                    </el-row>
-                </div>
+            <el-col :span="5" :offset="1">
+                <el-scrollbar style="height: 77vh">
+                    <div class="left-container">
+                        <p class="theme-title">外观主题</p>
+                        <el-row>
+                            <el-col :span="3">
+                                <span class="theme-prompt-text">风格</span>
+                            </el-col>
+                            <el-col :span="3" v-for="item in styleList">
+                            <span
+                                :class="{'style-btn-active':activeStyle==item.key}"
+                                class="style-btn" @click="activeStyleHandler(item)">{{item.label}}</span>
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="3">
+                                <span class="theme-prompt-text">颜色</span>
+                            </el-col>
+                            <el-col :span="3">
+                            <span
+                                :class="{'style-btn-active':activeColor=''}"
+                                class="style-btn" @click="activeColorHandler('')">全部</span>
+                            </el-col>
+                            <el-col
+                                :class="{'style-btn-active':activeColor==c}"
+                                @click.native="activeColorHandler(c)" v-bind:style="{backgroundColor: c}"
+                                class="color-btn"
+                                :span="3" v-for="c in colorList">
+                            </el-col>
+                        </el-row>
+                        <el-row>
+                            <el-col :span="8" v-for="t in themeList">
+                                <el-image
+                                    class="head-list-img"
+                                    style="width: 100px; height: 100px"
+                                    :src="t.headImgUrl"
+                                    fit="cover"
+                                ></el-image>
+                            </el-col>
+                        </el-row>
+                    </div>
+                </el-scrollbar>
             </el-col>
-            <el-col :span="8">
-
+            <el-col :offset="0" :span="12">
+                <pre-view :projectKey="projectKey"/>
             </el-col>
-            <el-col :span="8">
-                外观设置
+            <el-col :span="6">
+                <div class="right-container"></div>
             </el-col>
         </el-row>
     </div>
 </template>
 
 <script>
+import PreView from './PreView'
+
 export default {
     name: 'theme',
+    components: {
+        PreView
+    },
     data() {
         return {
             styleList: [
+                {'label': '全部', 'key': ''},
                 {'label': '节日', 'key': 'festival'},
                 {'label': '亲子', 'key': 'parent_child'},
                 {'label': '风景', 'key': 'scenery'},
@@ -56,10 +85,35 @@ export default {
                 '#484848',
                 '#EAEAEA',
                 '#804000'
-            ]
+            ],
+            activeColor: '',
+            activeStyle: '',
+            projectKey: '',
+            themeList: []
         }
-    }, methods: {
-        tet() {
+    },
+    mounted() {
+        this.projectKey = this.$route.query.key
+        this.queryProjectTheme()
+    },
+    methods: {
+        activeStyleHandler(item) {
+            this.activeStyle = item.key
+            this.queryProjectTheme()
+        },
+        activeColorHandler(item) {
+            this.activeColor = item
+            this.queryProjectTheme()
+        },
+        queryProjectTheme() {
+            this.$api.get('/project/theme/query', {
+                params: {
+                    'color': this.activeColor,
+                    'style': this.activeStyle
+                }
+            }).then(res => {
+                this.themeList = res.data
+            })
         }
     }
 }
@@ -69,14 +123,15 @@ export default {
 .theme-container {
     width: 100%;
     height: 100%;
-    overflow-y: hidden;
     background-color: #f7f7f7;
     font-family: "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
+    overflow: hidden;
+
 }
 
 .left-container {
     width: 341px;
-    height: 845px;
+    height: 70vh;
     line-height: 20px;
     border-radius: 7px;
     text-align: center;
@@ -85,16 +140,15 @@ export default {
     background-color: white;
 }
 
+
 .style-btn {
-    line-height: 25px;
+    line-height: 30px;
     border-radius: 4px;
-    padding: 2px;
-    color: rgba(16, 16, 16, 100);
+    padding: 3px;
+    color: #707070;
     font-size: 14px;
-    margin: 3px;
-    text-align: center;
-    font-family: Arial;
-    border: 1px solid rgba(187, 187, 187, 100);
+    margin: 0 2px 4px 0;
+//margin: 5px 9px; text-align: center; border: 1px solid #EAEAEA;
 }
 
 .theme-title {
@@ -106,8 +160,8 @@ export default {
 
 .theme-prompt-text {
     color: rgba(16, 16, 16, 100);
-    font-size: 14px;
-    line-height: 20px;
+    font-size: 16px;
+    line-height: 30px;
     text-align: left;
     font-family: SourceHanSansSC-regular;
 }
@@ -129,5 +183,28 @@ export default {
 .color-btn:hover,
 .style-btn:hover {
     cursor: pointer;
+    border: 1px solid rgba(11, 141, 213, 100);
+}
+
+.style-btn-active {
+    border: 1px solid rgba(11, 141, 213, 100);
+}
+
+.head-list-img {
+    border: 2px solid transparent;
+}
+
+.head-list-img:hover {
+    cursor: pointer;
+    border: 2px solid rgba(11, 141, 213, 100);
+}
+
+.right-container {
+    width: 456px;
+    height: 600px;
+    line-height: 20px;
+    text-align: center;
+    box-shadow: 0px 1px 6px 0px rgba(0, 0, 0, 0.4);
+    border: 1px solid rgba(255, 255, 255, 100);
 }
 </style>
diff --git a/src/views/home/HomeView.vue b/src/views/home/HomeView.vue
index 0065b72..220b5d5 100644
--- a/src/views/home/HomeView.vue
+++ b/src/views/home/HomeView.vue
@@ -1,5 +1,17 @@
 <template>
     <el-row>
+        <!--      轮播·1-->
+        <el-row>
+            <el-col :span="24">
+                <el-carousel height="55px">
+                    <el-carousel-item v-for="item in 2" :key="item">
+                        <img style="height: 55px; width: 100%;"
+                             src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c4aj.png"
+                        >
+                    </el-carousel-item>
+                </el-carousel>
+            </el-col>
+        </el-row>
         <Dashboard />
         <HomeFunction />
     </el-row>
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index e2eb0bc..b62b098 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -33,18 +33,6 @@
             </el-row>
         </el-header>
         <el-main style="padding: 2px;">
-            <!--      轮播·1-->
-            <el-row>
-                <el-col :span="24">
-                    <el-carousel height="55px">
-                        <el-carousel-item v-for="item in 2" :key="item">
-                            <img style="height: 55px; width: 100%;"
-                                 src="https://freebrio.oss-cn-shanghai.aliyuncs.com/t/v2_q2c4aj.png"
-                            >
-                        </el-carousel-item>
-                    </el-carousel>
-                </el-col>
-            </el-row>
             <router-view />
         </el-main>
     </el-container>