From 942ea17e085a125ac6f5080fe56f0bbb2d31569a Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 4 Jul 2025 15:58:51 +0800
Subject: [PATCH 1/4] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88-?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=89=B2=E5=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/preview/logoBack_color.vue          | 116 ++++++++++++++++++++
 .../site/serviceSetting/menuColorSet.vue           | 119 ++++++++++++++++-----
 src/style/theme/common.scss                        |  20 +++-
 3 files changed, 229 insertions(+), 26 deletions(-)
 create mode 100644 src/components/preview/logoBack_color.vue

diff --git a/src/components/preview/logoBack_color.vue b/src/components/preview/logoBack_color.vue
new file mode 100644
index 0000000..4420d4e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/menuColorSet.vue b/src/components/site/serviceSetting/menuColorSet.vue
index f1ad2bb..5c6f110 100644
--- a/src/components/site/serviceSetting/menuColorSet.vue
+++ b/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-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                            <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" />
                         </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-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                            <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" />
                         </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:[],
-  components: {
-      GuipButton, PromptText, GuipFormItem, HoverButton
-
-  },
-  data(){
-    return {
+    name: '',
+    props: [],
+    components: {
+        GuipButton,
+        PromptText,
+        GuipFormItem,
+        HoverButton,
+        DevicePreview,
+        LogoBackColor,
+        GuipInput
 
+    },
+    options: { styleIsolation: "shared" },
+    data() {
+        return {
+            themeColor:'#3B82F6',
+            navColor:'#3B82F6',
+            tabColor:'#70A6FF',
+            saveBtnStyleObj:{}
+        }
+    },
+    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()
+            }
+        }
     }
-  },
-  methods:{
-
-  }
 }
 </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>
\ No newline at end of file
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 5ac03a9..959fb4b 100644
--- a/src/style/theme/common.scss
+++ b/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;
     }

From c8d17fedeaefe0a6875ba26b2863edbf39308c7e Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 4 Jul 2025 15:58:51 +0800
Subject: [PATCH 2/4] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88-?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=89=B2=E5=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/preview/logoBack_color.vue          | 116 +++++++++++++++++++
 .../site/serviceSetting/menuColorSet.vue           | 127 ++++++++++++++++-----
 src/style/theme/common.scss                        |  20 +++-
 3 files changed, 233 insertions(+), 30 deletions(-)
 create mode 100644 src/components/preview/logoBack_color.vue

diff --git a/src/components/preview/logoBack_color.vue b/src/components/preview/logoBack_color.vue
new file mode 100644
index 0000000..4420d4e
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/src/components/site/serviceSetting/menuColorSet.vue b/src/components/site/serviceSetting/menuColorSet.vue
index 290593f..0aa3f3a 100644
--- a/src/components/site/serviceSetting/menuColorSet.vue
+++ b/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-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                            <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" />
                         </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-icon="require('@/assets/upLoad_active.svg')" default-text-color="#23242B"
-                                          hover-text-color="#006AFF"/>
+                            <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" />
                         </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,30 +93,66 @@ 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:[],
-  components: {
-      GuipButton, PromptText, GuipFormItem, HoverButton
+    name: '',
+    props: [],
+    components: {
+        GuipButton,
+        PromptText,
+        GuipFormItem,
+        HoverButton,
+        DevicePreview,
+        LogoBackColor,
+        GuipInput
 
-  },
-  data(){
-    return {
-        //添加按钮样式
-        saveBtnStyleObj: {
-            width: '144px',
-            height: '46px',
-            borderRadius: '4px',
-            background: '#006AFF',
+    },
+    options: { styleIsolation: "shared" },
+    data() {
+        return {
+            themeColor:'#3B82F6',
+            navColor:'#3B82F6',
+            tabColor:'#70A6FF',
+            //添加按钮样式
+            saveBtnStyleObj: {
+                width: '144px',
+                height: '46px',
+                borderRadius: '4px',
+                background: '#006AFF',
+            },
+        }
+    },
+    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()
+            }
+        }
     }
-  },
-  methods:{
-
-  }
 }
 </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>
\ No newline at end of file
diff --git a/src/style/theme/common.scss b/src/style/theme/common.scss
index 5ac03a9..959fb4b 100644
--- a/src/style/theme/common.scss
+++ b/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;
     }

From 29e672b5d9b9c64c229352b85f71c9bcaece643a Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 4 Jul 2025 15:58:51 +0800
Subject: [PATCH 3/4] =?UTF-8?q?=E5=AE=9E=E6=97=B6=E9=A2=84=E8=A7=88-?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E8=89=B2=E5=BD=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/site/serviceSetting/menuColorSet.vue | 10 ++--------
 1 file changed, 2 insertions(+), 8 deletions(-)

diff --git a/src/components/site/serviceSetting/menuColorSet.vue b/src/components/site/serviceSetting/menuColorSet.vue
index 0aa3f3a..5c6f110 100644
--- a/src/components/site/serviceSetting/menuColorSet.vue
+++ b/src/components/site/serviceSetting/menuColorSet.vue
@@ -116,13 +116,7 @@ export default {
             themeColor:'#3B82F6',
             navColor:'#3B82F6',
             tabColor:'#70A6FF',
-            //添加按钮样式
-            saveBtnStyleObj: {
-                width: '144px',
-                height: '46px',
-                borderRadius: '4px',
-                background: '#006AFF',
-            },
+            saveBtnStyleObj:{}
         }
     },
     methods: {
@@ -146,7 +140,7 @@ export default {
 }
 </script>
 <style lang="scss">
-
+   
     .color-drop .el-color-dropdown__btns{
         display: flex;
         justify-content: space-between;

From aeab64c1bd41d4736b74424bd8a880a6ffd1744a Mon Sep 17 00:00:00 2001
From: zq <136432190602163.com>
Date: Fri, 4 Jul 2025 16:53:39 +0800
Subject: [PATCH 4/4] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E5=A4=8D=E5=88=B6?=
 =?UTF-8?q?=E5=8A=9F=E8=83=BD=E5=8F=8A=E7=A4=BA=E4=BE=8B?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/main.js                 |  14 +++---
 src/utils/clipboard.js      |  80 +++++++++++++++++++++++++++++++
 src/utils/dirClipBoard.js   |  19 ++++++++
 src/views/elementGroups.vue | 113 ++++++++++++++++++++++++++++----------------
 4 files changed, 180 insertions(+), 46 deletions(-)
 create mode 100644 src/utils/clipboard.js
 create mode 100644 src/utils/dirClipBoard.js

diff --git a/src/main.js b/src/main.js
index 694041b..27f6d1d 100755
--- a/src/main.js
+++ b/src/main.js
@@ -14,11 +14,19 @@ import LoadingService from './services/loading'
 import { directive as clickaway } from 'vue-clickaway';
 import GuipMessage from '@/components/GuipMessage/index';
 import HeaderIcon from './utils/headerIcon'
+// 复制到粘贴板
+import clipboard from '@/utils/dirClipBoard';
+import { modernCopyToClipboard } from '@/utils/clipboard';
+// 复制
+Vue.prototype.$copy = modernCopyToClipboard;
 Vue.prototype.$loadingFn = LoadingService;
 Vue.config.productionTip = false;
+// 请求
 Vue.prototype.$http = request;
 Vue.use(ElementUI);
 Vue.use(GuipMessage)
+Vue.use(clipboard);
+
 Vue.directive('clickaway', clickaway);
 Vue.mixin(HeaderIcon)
 new Vue({
@@ -27,9 +35,3 @@ new Vue({
   render: h => h(App)
 }).$mount('#app')
 
-// function q(e) { 
-//   for (var t = 1; t < arguments.length; t++) { 
-//       var r = null != arguments[t] ? arguments[t] : {};
-//        t % 2 ? F(Object(r), !0).forEach((function (t) { T(e, t, r[t]) })) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(r)) : F(Object(r)).forEach((function (t) { Object.defineProperty(e, t, Object.getOwnPropertyDescriptor(r, t)) })) } return e }
-
-
diff --git a/src/utils/clipboard.js b/src/utils/clipboard.js
new file mode 100644
index 0000000..4bbc503
--- /dev/null
+++ b/src/utils/clipboard.js
@@ -0,0 +1,80 @@
+/**
+ * 复制文本到剪贴板
+ * @param {string} text 要复制的文本
+ * @param {Object} options 配置选项
+ * @param {string} options.successMsg 成功提示信息
+ * @param {string} options.errorMsg 失败提示信息
+ * @param {Vue} options.vm Vue实例(用于调用$message)
+ * @returns {Promise<boolean>} 是否复制成功
+ */
+export function copyToClipboard(text, options = {}) {
+    const {
+      successMsg = '复制成功',
+      errorMsg = '复制失败，请手动复制',
+      vm = null
+    } = options;
+  
+    return new Promise((resolve) => {
+      // 创建textarea元素
+      const textarea = document.createElement('textarea');
+      textarea.value = text;
+      textarea.style.position = 'fixed';  // 防止页面滚动
+      document.body.appendChild(textarea);
+      textarea.select();
+  
+      try {
+        // 执行复制命令
+        const successful = document.execCommand('copy');
+        if (successful) {
+          if (vm && vm.$Message) {
+            vm.$Message.success(successMsg);
+          } else {
+            console.log(successMsg);
+          }
+          resolve(true);
+        } else {
+          throw new Error('Copy command was unsuccessful');
+        }
+      } catch (err) {
+        console.error('复制失败:', err);
+        if (vm && vm.$Message) {
+          vm.$Message.error(errorMsg);
+        } else {
+          console.error(errorMsg);
+        }
+        resolve(false);
+      } finally {
+        document.body.removeChild(textarea);
+      }
+    });
+  }
+  
+  /**
+   * @param {string} text 要复制的文本
+   * @param {Object} options 配置选项
+   * @returns {Promise<boolean>} 是否复制成功
+   */
+  export async function modernCopyToClipboard(text, options = {}) {
+    const {
+      successMsg = '复制成功',
+      errorMsg = '复制失败，请手动复制',
+      vm = null
+    } = options;
+  
+    try {
+      // 使用现代剪贴板API
+      await navigator.clipboard.writeText(text);
+      if (vm && vm.$Message) {
+        vm.$Message.success(successMsg);
+      } else {
+        console.log(successMsg);
+      }
+      return true;
+    } catch (err) {
+      console.error(errorMsg, err);
+      // 现代API失败后回退到传统方法
+      return copyToClipboard(text, options);
+    }
+  }
+  
+  export default modernCopyToClipboard;
\ No newline at end of file
diff --git a/src/utils/dirClipBoard.js b/src/utils/dirClipBoard.js
new file mode 100644
index 0000000..a90d9e6
--- /dev/null
+++ b/src/utils/dirClipBoard.js
@@ -0,0 +1,19 @@
+import modernCopyToClipboard from '@/utils/clipboard';
+
+export default {
+  install(Vue) {
+    Vue.directive('clipboard', {
+      bind(el, binding) {
+        el.style.cursor = 'pointer';
+        el.addEventListener('click', async () => {
+          const text = binding.value || el.innerText;
+          const options = {
+            vm: binding.instance,
+            ...(binding.arg || {})
+          };
+          await modernCopyToClipboard(text, options);
+        });
+      }
+    });
+  }
+};
\ No newline at end of file
diff --git a/src/views/elementGroups.vue b/src/views/elementGroups.vue
index b1f92bf..083487b 100644
--- a/src/views/elementGroups.vue
+++ b/src/views/elementGroups.vue
@@ -1,49 +1,67 @@
 <template>
     <div class="main-content12">
         <div class="elementWrap">
-            <PromptText text='这是一个提示框' :type="1"/>
-            <PromptText text='这是一个提示框' :type="2"/>
-            <PromptText text='这是一个提示框' :type="3"/>
+            <PromptText text='这是一个提示框' :type="1" />
+            <PromptText text='这是一个提示框' :type="2" />
+            <PromptText text='这是一个提示框' :type="3" />
             <PromptText text="前期准备事项" :type="1" class="beforeNotice">
                 <template #next_desc>
                     <p class="flex">
-                        <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
-                              class="flex" target="_blank">
-                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                        <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
+                            target="_blank">
+                            <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                     </p>
                 </template>
                 <template #desc>
                     <p class="mt12 flex">
-                        1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F"
-                              class="flex" target="_blank">
-                        <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
+                        1. <a href="https://e.360.cn/static/zhihui/login/?rdurl=https%3A%2F%2Fe.360.cn%2F" class="flex"
+                            target="_blank">
+                            <img src="@/assets/site/form_linkActive.svg" alt="">前往登陆</a>登录360智慧平台
                     </p>
                     <p class="mt10 flex">
                         2. <a href="https://dianjing.e.360.cn/ocpc/list" class="flex" target="_blank">
-                        <img src="@/assets/site/form_linkActive.svg"
-                             alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
+                            <img src="@/assets/site/form_linkActive.svg"
+                                alt="">前往ocpc设置页</a>＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
                     </p>
                 </template>
             </PromptText>
 
+
+            
             <div class="ele-item">
-                    <label for="">实时预览外层嵌套</label>
-                    <!-- 默认 显示电脑端、手机端 -->
-                    <!--  :showMobile="false"  :showPc="false" -->
-                    <DevicePreview >
-                        <template #desktop>
-                            电脑端内容-内容自定义
-                        </template>
-                        <template #mobile>
-                            内容自定义
-                            手机端端内容-- 手机端端内容
-                        </template>
-                    </DevicePreview>
-                </div>
+                <label for="">实时预览外层嵌套</label>
+                <!-- 默认 显示电脑端、手机端 -->
+                <!--  :showMobile="false"  :showPc="false" -->
+                <DevicePreview>
+                    <template #desktop>
+                        电脑端内容-内容自定义
+                    </template>
+                    <template #mobile>
+                        内容自定义
+                        手机端端内容-- 手机端端内容
+                    </template>
+                </DevicePreview>
+            </div>
 
             <!-- 以 ele-item 为类名的这种div、 label 、 h3 仅在此页面进行布局使用，复制时无需复制此元素 -->
             <el-form :model="form" :rules="rules" class="el-row demo-ruleForm" ref="formRef">
-
+                <div class="ele-item">
+                    <label for="">copy固定内容</label>
+                    <!-- 复制固定文本 -->
+                    <GuipButton size="big" v-clipboard="'渝过田晴'">复制渝过田晴</GuipButton>
+                    
+                    <!-- 复制动态文本 -->
+                    <GuipButton size="big" v-clipboard="content">点击复制: {{ content }}</GuipButton>
+                </div>
+                <div class="ele-item">
+                    <label for="">手动点击copy</label>
+                    <GuipInput v-model="form.input1">
+                        <!-- 提示可以不添加 、图标可更换 -->
+                        <GuipToolTip content="点击复制到粘贴板"  slot="suffix">
+                            <img src="@/assets/menu/Totalprofit.svg" @click="handleClickCopy" />
+                        </GuipToolTip>
+                    </GuipInput>
+                </div>
                 <div class="ele-item">
                     <label for="">单选框(对象格式)：</label>
                     <GuipRadio v-model="form.language" :options="languageOptions" label="选择语言" prop="language"
@@ -260,7 +278,7 @@
                     <!-- 宽高单独传递 、其余统一放置在 customStyle 中-->
                     <hover-button button-text="自定义" :default-icon="require('@/assets/site/addIcon.svg')"
                         :hover-icon="require('@/assets/upLoad_active.svg')" default-text-color="#626573"
-                        hover-text-color="#006AFF"  width="110px" height="32px"
+                        hover-text-color="#006AFF" width="110px" height="32px"
                         :customStyle="{ fontSize: '12px', background: '#fff', borderRadius: '2px', borderColor: '#DFE2E6' }" />
 
                 </div>
@@ -343,20 +361,24 @@
                     <label for="">开关L</label>
                     <!-- active-value 开启状态的值 -->
                     <!-- inactive-value 关闭状态的值 -->
-                    <GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭" @change="onSwitchChange">
+                    <GuipSwitch :modelValue="switchValue" activeText="默认类型boolean" inactiveText="关闭"
+                        @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
                 <div class="ele-item">
                     <label for="">开关L</label>
                     <!-- 左侧不需要添加float 属性 -->
-                    <GuipSwitch :modelValue="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭" @change="onSwitchChange">
+                    <GuipSwitch :modelValue="switchValue" float="right" activeText="文案在右，默认左侧" inactiveText="关闭"
+                        @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
                 <div class="ele-item">
                     <label for="">开关L</label>
-                    <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number" @change="onSwitchChange">
+                    <GuipSwitch :modelValue="switchValue1" :active-value="1" :inactive-value="0" activeText="number"
+                        @change="onSwitchChange">
                     </GuipSwitch>
-                    <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string" @change="onSwitchChange">
+                    <GuipSwitch :modelValue="switchValue2" active-value="0" inactive-value="1" activeText="string"
+                        @change="onSwitchChange">
                     </GuipSwitch>
                 </div>
                 <div class="flex ele-item">
@@ -488,8 +510,10 @@
             </div>
             <div class="flex ele-item">
                 <label for="">一些功能集合</label>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）</GuipButton>
-                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）</GuipButton>
+                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog">打开弹框（标题巨左、按钮居右）
+                </GuipButton>
+                <GuipButton type="primary" :btnstyle="{ width: '300px' }" @click="openDialog1">打开弹框（标题巨中、按钮居中）
+                </GuipButton>
                 <GuipButton type="primary" @click="openLoading" size="page">展示加载动画 2s</GuipButton>
             </div>
 
@@ -576,6 +600,7 @@ export default {
     },
     data() {
         return {
+            content:'测试一下',
             domainOptions: [
                 {
                     value: '.chachongz.com',
@@ -648,19 +673,19 @@ export default {
                 domainSuffix: '11',
                 domainSuffix1: '.chachongz.com',
                 card: '1',
-                input1: '',
+                input1: '跨年的烟火,绽放天空',
                 input2: '',
                 input3: '',
             },
             languageOptions1: [
-                { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh',id:'1',name:'麻辣烫' },
-                { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh',id:'10',name:'易烊千玺' },
-                { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh',id:'11',name:'王鹤di' }, // 禁用选项
-                { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh',id:'12',name:'王俊凯' },
+                { label: 'JavaScript', value: 'js', selectedLabel: 'JavaScripthhhhhhhhhh', id: '1', name: '麻辣烫' },
+                { label: 'Python', value: 'py', selectedLabel: 'JavaScripthhhhhhhhhh', id: '10', name: '易烊千玺' },
+                { label: 'Java', value: 'java', disabled: true, selectedLabel: 'JavaScripthhhhhhhhhh', id: '11', name: '王源' }, // 禁用选项
+                { label: 'Go', value: 'go', selectedLabel: 'JavaScripthhhhhhhhhh', id: '12', name: '王俊凯' },
             ],
-            languageOptions:{
-                '20':'查重站',
-                '31':'AI站'
+            languageOptions: {
+                '20': '查重站',
+                '31': 'AI站'
             },
             rules: {
                 username: [
@@ -920,6 +945,14 @@ export default {
         }
     },
     methods: {
+        // 手动copy内容
+        handleClickCopy(){
+            this.$copy(this.form.input1, {
+                successMsg: '内容已复制到剪贴板',
+                errorMsg: '复制失败，请按Ctrl+C手动复制',
+                vm: this
+            });
+        },
         // 自定义的radio label 展示内容
         formatLabel(option) {
             return `${option.name} (ID: ${option.id})`;