基本设置
@@ -10,18 +10,20 @@
支持png、jpg格式，尺寸32PX*32PX
支持png、jpg格式，尺寸32PX*32PX
+
@@ -58,30 +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
+ 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:{}
+ }
+ },
+ 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:{
-
- }
}
\ No newline at end of file
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/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;
}
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} 是否复制成功
+ */
+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} 是否复制成功
+ */
+ 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 @@
-
+
@@ -343,20 +361,24 @@
-
+
页面色彩
-
- aaa
+
+ 按钮及提示文字颜色
+
+
+ 分页导航栏选中色
+
+
+ logo处导航栏背景色
+
+
+
+
+
+
+
+
+
+
+
+
+
- bbb
+
+
+
+
+
-
+
+
+
+ 电脑端内容-内容自定义
+
+
+ 内容自定义
+ 手机端端内容-- 手机端端内容
+
+
+
-
- 
前往登陆登录360智慧平台
+
+ 前往登陆登录360智慧平台
- 1.
- 前往登陆登录360智慧平台
+ 1.
+ 前往登陆登录360智慧平台
2.
- 前往ocpc设置页＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
+ 前往ocpc设置页＞点击“添加OCPC投放包”按钮。注意转换类型只能选择“订单”，其他的根据表单提示填写。
-
-
-
-
-
- 电脑端内容-内容自定义
-
-
- 内容自定义
- 手机端端内容-- 手机端端内容
-
-
-
+
+
+
+
+
+
+ 复制渝过田晴
+
+
+ 点击复制: {{ content }}
+
+
+
+
+
+
+ 
+
+
+
+
-
+
-
+
-
+
@@ -488,8 +510,10 @@
- 打开弹框（标题巨左、按钮居右）
- 打开弹框（标题巨中、按钮居中）
+ 打开弹框（标题巨左、按钮居右）
+
+ 打开弹框（标题巨中、按钮居中）
+
展示加载动画 2s
@@ -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})`;