实时预览-页面色彩

src/components/preview/logoBack_color.vue

@@ -0,0 +1,116 @@
+<template>
+    <div class="preview_color">
+        <div class="top" :style="{backgroundColor:themeColor}">品牌LOGO</div>
+        <div class="bottom flex">
+            <div class="left">
+                <span class="desc">获取帮助</span>
+                <div class="left-item">常见问题</div>
+                <div class="left-item">联系客服</div>
+                <div class="left-item">报告样例</div>
+            </div>
+            <div class="right">
+                <p class="scroll" >正在检测文章的滚动条</p>
+                <div class="tab flex"  :style="{backgroundColor:navColor}">
+                    <div class="tab_item" :style="{backgroundColor:tabColor}">检测论文</div>
+                    <div class="tab_item">下载检测报告</div>
+                    <div class="tab_item">下载检测报告</div>
+                </div>
+                <div class="right_bot column">
+                    <b>检测上传板块</b>
+                    <button :style="{backgroundColor:themeColor}">提交论文</button>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+
+export default {
+    // 站点设置
+    name: '',
+    props: ['themeColor','navColor','tabColor'],
+    components: {
+        
+    },
+    data() {
+        return {
+        }
+    }
+}
+</script>
+<style scoped lang="scss">
+.preview_color{
+    width: 100%;
+    .top{
+        padding: 12px 27px;
+        color: #FFFFFF;
+        box-sizing: border-box;
+        border-radius: 12px 12px 0 0;
+    }
+    .bottom{
+        font-size: 12px;
+        display: flex;
+        align-items: flex-start;
+        .left{
+            width: 100px;
+            text-align: center;
+            padding: 14px;
+            box-sizing: border-box;
+            display: flex;
+            flex-direction: column;
+            gap: 7px;
+            .desc{
+                display: block;
+                color: #626573;
+                margin-bottom: 10px;
+            }
+            .left-item{
+                padding: 7px 9px;
+                border-radius: 4px;
+                box-sizing: border-box;
+                border: 1px solid #475DB9;
+                font-size: 12px;
+                font-weight: normal;
+                line-height: 13px;
+                letter-spacing: 0.08em;
+                color: #3B4D98;
+            }
+        }
+        .right{
+            flex: 1;
+            .scroll{
+                background: #E9F6FD;
+                padding: 7px 14px;
+                box-sizing: border-box;
+                line-height: 28px;
+                font-size: 12px;
+                line-height: 13px;
+                letter-spacing: 0.08em;
+                color: #626573;
+            }
+            .tab{
+                color: #fff;
+                .tab_item{
+                    padding: 8px 12px;
+                }
+            }
+            .right_bot{
+                padding: 25px 24px 17px;
+                background: #FFFFFF;
+                b{
+                    display: block;
+                    margin-bottom: 20px;
+                }
+                button{
+                    font-family: Microsoft YaHei UI;
+                    border-radius: 4px;
+                    border: none;
+                    padding: 7px 10px;
+                    color: #fff;
+                    letter-spacing: 0.08em;
+                }
+            }
+        }
+    }
+}
+</style>

src/components/site/serviceSetting/menuColorSet.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="main-content12">
+    <div class="main">
         <div class="pageheader">
             <span class="pagetitle">基本设置</span>
         </div>
@@ -10,18 +10,20 @@
                 <div class="flex-wrap">
                     <div class="flex-left">
                         <GuipFormItem column="column" label="提交页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片"
+                                :default-icon="require('@/assets/upLoad_grey.svg')"
                                 :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                                hover-text-color="#006AFF" />
                         </GuipFormItem>
                         <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                     </div>
                     <div class="flex-line "></div>
                     <div class="flex-right">
                         <GuipFormItem column="column" label="报告页Logo上传">
-                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片" :default-icon="require('@/assets/upLoad_grey.svg')"
+                            <hover-button slot="formDom" ref="GuipInput" button-text="选择图片"
+                                :default-icon="require('@/assets/upLoad_grey.svg')"
                                 :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                                hover-text-color="#006AFF" />
                         </GuipFormItem>
                         <div slot="tip" class="el-upload__tip desc">支持png、jpg格式，尺寸32PX*32PX</div>
                     </div>
@@ -29,19 +31,52 @@
             </el-form>
         </div>
 
-        <div class="flex-common">
+        <div class="flex-common mt12">
             <h3 class="mb16">页面色彩</h3>
 
-            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32"/>
+            <PromptText text='操作说明：点击色块可打开调色盘改色，也可直接更改6位色值数据进行改色' :type="1" class="mb32" />
 
             <el-form ref="formRef">
                 <div class="flex-wrap">
                     <div class="flex-left">
-                        aaa
+                        <GuipFormItem column="column" label="主题颜色">
+                            <span class="desc" slot="formRight"> 按钮及提示文字颜色</span>
+                            <div class="flex gap12" slot="formDom">
+                                <el-color-picker popper-class="color-drop" v-model="themeColor"></el-color-picker>
+                                <GuipInput ref="GuipInput" style="flex:1" v-model="themeColor" placeholder="请输入主题颜色"
+                                    @change="changeThemeColor">
+                                </GuipInput>
+                            </div>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" class="mt24" label="选中颜色">
+                            <span class="desc" slot="formRight"> 分页导航栏选中色</span>
+                            <div class="flex gap12" slot="formDom">
+                                <el-color-picker popper-class="color-drop" v-model="tabColor"></el-color-picker>
+                                <GuipInput ref="GuipInput" style="flex:1" v-model="tabColor" placeholder="请输入选中颜色"
+                                    @change="changetabColor">
+                                </GuipInput>
+                            </div>
+                        </GuipFormItem>
+                        <GuipFormItem column="column" class="mt24" label="导航栏色">
+                            <span class="desc" slot="formRight"> logo处导航栏背景色</span>
+                            <div class="flex gap12" slot="formDom">
+                                <el-color-picker popper-class="color-drop" v-model="navColor"></el-color-picker>
+                                <GuipInput ref="GuipInput" style="flex:1" v-model="navColor" placeholder="请输入导航栏色"
+                                    @change="changeNavColor">
+                                </GuipInput>
+                            </div>
+                        </GuipFormItem>
                     </div>
                     <div class="flex-line "></div>
                     <div class="flex-right">
-                        bbb
+
+                        <DevicePreview :showMobile="false">
+                            <template #desktop>
+                                <!-- 电脑端内容 -->
+                                <LogoBackColor :themeColor="themeColor" :navColor="navColor" :tabColor="tabColor"/>
+                            </template>
+
+                        </DevicePreview>
                     </div>
                 </div>
             </el-form>
@@ -58,24 +93,60 @@ import HoverButton from "@/components/HoverButton.vue";
 import GuipFormItem from "@/components/GuipFormItem.vue";
 import PromptText from "@/components/PromptText.vue";
 import GuipButton from "@/components/GuipButton.vue";
+import DevicePreview from "@/components/PreviewTab.vue";
+import LogoBackColor from "@/components/preview/logoBack_color.vue";
+import GuipInput from '@/components/GuipInput.vue';
 
 export default {
     name: '',
-  props:[],
+    props: [],
     components: {
-      GuipButton, PromptText, GuipFormItem, HoverButton
+        GuipButton,
+        PromptText,
+        GuipFormItem,
+        HoverButton,
+        DevicePreview,
+        LogoBackColor,
+        GuipInput
 
     },
-  data(){
+    options: { styleIsolation: "shared" },
+    data() {
         return {
-
+            themeColor:'#3B82F6',
+            navColor:'#3B82F6',
+            tabColor:'#70A6FF',
+            saveBtnStyleObj:{}
         }
     },
-  methods:{
+    methods: {
-
+        changeThemeColor(val){
+            if (!val.trim().startsWith("#")){
+                this.themeColor = '#'+ val.trim()
+                console.log(this.themeColor,'=====xiugai');
+            }
+        },
+        changetabColor(val){
+            if (!val.trim().startsWith("#")){
+                this.tabColor = '#'+ val.trim()
+            }
+        },
+        changeNavColor(val){
+            if (!val.trim().startsWith("#")){
+                this.navColor = '#'+ val.trim()
+            }
+        }
     }
 }
 </script>
 <style lang="scss">
    
+    .color-drop .el-color-dropdown__btns{
+        display: flex;
+        justify-content: space-between;
+    }
+    .color-drop .el-button {
+                width: 70px;
+                height: 30px;
+            }
 </style>

src/style/theme/common.scss

@@ -236,7 +236,7 @@ body {
     .flex-common{
         .flex-left,
         .flex-right {
-            min-width: 440px;
+            // min-width: 440px;
             max-width: 590px;
             flex: 1;
         }
@@ -256,6 +256,22 @@ body {
     /* text/text_4 */
     color: #8A9099;
 }
+// 颜色选择器
+.el-color-picker__trigger{
+    padding: 0;
+    border: none;
+    // border: 1px solid #DFE2E6;
+    .el-color-picker__color{
+        border-color: #DFE2E6;
+        border-radius: 4px;
+    }
+    .el-color-picker__icon{
+        display: none !important;
+    }
+    .el-color-picker__color-inner{
+        border-radius: 4px;
+    }
+}
 .borderNone{
     border: none !important;
 }
@@ -288,7 +304,7 @@ body {
 
     .flex-left,
     .flex-right {
-        min-width: 460px;
+        // min-width: 460px;
         max-width: 590px;
         flex: 1;
     }