From c6acd5d27f4b60a759b79ee3c6d7660db73a131f Mon Sep 17 00:00:00 2001
From: wangqing <smalljop@foxmail.com>
Date: Tue, 24 Nov 2020 18:33:17 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E5=96=84=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/appearset_bgc_big.png | Bin 0 -> 8610 bytes
 src/router/modules/root.js              |   9 ++
 src/views/form/PreView.vue              | 201 ++++++++++--------------
 src/views/form/PreView1.vue             | 139 ++++++++++++++++
 src/views/form/ProjectForm.vue          | 136 ++++++++++++++++
 src/views/form/theme.vue                | 153 +++++++++++++-----
 src/views/home/HomeView.vue             |  12 ++
 src/views/home/index.vue                |  12 --
 8 files changed, 498 insertions(+), 164 deletions(-)
 create mode 100644 src/assets/images/appearset_bgc_big.png
 create mode 100644 src/views/form/PreView1.vue
 create mode 100644 src/views/form/ProjectForm.vue

diff --git a/src/assets/images/appearset_bgc_big.png b/src/assets/images/appearset_bgc_big.png
new file mode 100644
index 0000000000000000000000000000000000000000..09f4d22c3a8df95f3c88f5c7e66d79f184a6d6ff
GIT binary patch
literal 8610
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
O@u?&&%k9s9V*Ec|s6_w(

literal 0
HcmV?d00001

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>