1147 lines
54 KiB
Vue
1147 lines
54 KiB
Vue
|
<template>
|
|||
|
|
<div id="app">
|
|||
|
|
<a-config-provider :theme="dark ? {algorithm: antTheme.darkAlgorithm} : undefined">
|
|||
|
|
<div class="_fc-t-header">
|
|||
|
|
<img class="_fc-t-logo" src="https://pro.form-create.com/doc/logo.png">
|
|||
|
|
<div class="_fc-t-name">FcDesigner Pro | <span style="color: #387BF6;font-size:14px;">Ant Design Vue 版</span></div>
|
|||
|
|
<div class="_fc-t-menu">
|
|||
|
|
<a-button type="link" target="_blank" href="https://www.form-create.com/">首页</a-button>
|
|||
|
|
<a-button type="link" target="_blank" href="https://pro.form-create.com/doc/">文档</a-button>
|
|||
|
|
<a-button type="link" target="_blank" href="https://www.form-create.com/price.html">购买</a-button>
|
|||
|
|
<a-button type="link" target="_blank" href="https://pro.form-create.com/antd/mobile"><span
|
|||
|
|
style="color:#f56c6c;">移动端设计器📱</span></a-button>
|
|||
|
|
<a-button type="link" target="_blank" href="https://www.form-create.com/v3/designer">开源版
|
|||
|
|
</a-button>
|
|||
|
|
<a-dropdown trigger="click" size="default">
|
|||
|
|
<span>
|
|||
|
|
<span>多语言切换</span>
|
|||
|
|
<i class="fc-icon icon-down"></i>
|
|||
|
|
</span>
|
|||
|
|
<template #overlay>
|
|||
|
|
<a-menu>
|
|||
|
|
<a-menu-item @click="handleCommand('zh')">中文</a-menu-item>
|
|||
|
|
<a-menu-item @click="handleCommand('en')">英文</a-menu-item>
|
|||
|
|
<a-menu-item @click="handleCommand('jp')">日文</a-menu-item>
|
|||
|
|
</a-menu>
|
|||
|
|
</template>
|
|||
|
|
</a-dropdown>
|
|||
|
|
<a-dropdown trigger="click" size="default">
|
|||
|
|
<span>
|
|||
|
|
<span>主题切换</span>
|
|||
|
|
<i class="fc-icon icon-down"></i>
|
|||
|
|
</span>
|
|||
|
|
<template #overlay>
|
|||
|
|
<a-menu>
|
|||
|
|
<template v-for="item in themes">
|
|||
|
|
<a-menu-item @click="handleTheme(item.label)"
|
|||
|
|
:style="{backgroundColor: item.value, borderRadius: 0}">
|
|||
|
|
<span style="display:block;height: 15px;width:30px;"> </span>
|
|||
|
|
</a-menu-item>
|
|||
|
|
</template>
|
|||
|
|
</a-menu>
|
|||
|
|
</template>
|
|||
|
|
</a-dropdown>
|
|||
|
|
<a-switch
|
|||
|
|
ref="switch"
|
|||
|
|
class="_fc-t-switch"
|
|||
|
|
size="default"
|
|||
|
|
v-model:checked="dark"
|
|||
|
|
>
|
|||
|
|
<template #checkedChildren>
|
|||
|
|
<svg viewBox="0 0 24 24" class="dark-icon">
|
|||
|
|
<path
|
|||
|
|
d="M11.01 3.05C6.51 3.54 3 7.36 3 12a9 9 0 0 0 9 9c4.63 0 8.45-3.5 8.95-8c.09-.79-.78-1.42-1.54-.95A5.403 5.403 0 0 1 11.1 7.5c0-1.06.31-2.06.84-2.89c.45-.67-.04-1.63-.93-1.56z"
|
|||
|
|
fill="currentColor"></path>
|
|||
|
|
</svg>
|
|||
|
|
</template>
|
|||
|
|
<template #unCheckedChildren>
|
|||
|
|
<svg viewBox="0 0 24 24" class="light-icon">
|
|||
|
|
<path
|
|||
|
|
d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"
|
|||
|
|
fill="currentColor"></path>
|
|||
|
|
</svg>
|
|||
|
|
</template>
|
|||
|
|
</a-switch>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<fc-designer ref="designer" :theme="theme" :list="list" @save="onSave" @switchForm="switchForm"
|
|||
|
|
:field="field"
|
|||
|
|
:locale="locale" :handle="handle" :config="config">
|
|||
|
|
<template #block_fff="scope">
|
|||
|
|
<template #block_fff="scope">
|
|||
|
|
自定义内容
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
<template #handle>
|
|||
|
|
<div class="handle">
|
|||
|
|
<a-dropdown trigger="click" size="default">
|
|||
|
|
<span>
|
|||
|
|
<span>导入</span>
|
|||
|
|
<i class="fc-icon icon-down"></i>
|
|||
|
|
</span>
|
|||
|
|
<template #overlay>
|
|||
|
|
<a-menu>
|
|||
|
|
<a-menu-item @click="setJson">导入JSON</a-menu-item>
|
|||
|
|
<a-menu-item @click="setOption">导入Options</a-menu-item>
|
|||
|
|
</a-menu>
|
|||
|
|
</template>
|
|||
|
|
</a-dropdown>
|
|||
|
|
<a-dropdown trigger="click" size="default">
|
|||
|
|
<span style="margin-left: 12px;">
|
|||
|
|
<span>导出</span>
|
|||
|
|
<i class="fc-icon icon-down"></i>
|
|||
|
|
</span>
|
|||
|
|
<template #overlay>
|
|||
|
|
<a-menu>
|
|||
|
|
<a-menu-item @click="showJson">生成JSON</a-menu-item>
|
|||
|
|
<a-menu-item @click="showOption">生成Options</a-menu-item>
|
|||
|
|
<a-menu-item @click="copyUrl">生成预览链接</a-menu-item>
|
|||
|
|
</a-menu>
|
|||
|
|
</template>
|
|||
|
|
</a-dropdown>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
</fc-designer>
|
|||
|
|
|
|||
|
|
<div class="_fc-copyright" height="30px">
|
|||
|
|
<div class="_fc-b-item">
|
|||
|
|
<iframe
|
|||
|
|
src="https://ghbtns.com/github-btn.html?user=xaboy&repo=form-create-designer&type=star&count=true"
|
|||
|
|
frameborder="0" scrolling="0" width="120" height="21" title="GitHub"></iframe>
|
|||
|
|
</div>
|
|||
|
|
<span style="margin: 0 5px;">|</span>
|
|||
|
|
<div class="_fc-b-item">
|
|||
|
|
<a href='https://gitee.com/xaboy/form-create-designer' target="_blank"
|
|||
|
|
style="display: inline-flex;"><img
|
|||
|
|
src='https://gitee.com/xaboy/form-create-designer/badge/star.svg?theme=dark' alt='gitee'/></a>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<a-modal :title="title[type]" v-model:open="state" class="_fc-t-dialog">
|
|||
|
|
<div ref="editor" v-if="state"></div>
|
|||
|
|
<span style="color: red;" v-if="err">输入内容格式有误!</span>
|
|||
|
|
<template #footer>
|
|||
|
|
<template v-if="type > 2">
|
|||
|
|
<a-button @click="state = false">取 消</a-button>
|
|||
|
|
<a-button type="primary" @click="onOk">确 定</a-button>
|
|||
|
|
</template>
|
|||
|
|
</template>
|
|||
|
|
</a-modal>
|
|||
|
|
</a-config-provider>
|
|||
|
|
<AiTool @chat="handleChat"></AiTool>
|
|||
|
|
<div class="float_nav">
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="icon ser"></div>
|
|||
|
|
<p class="flex flex-justify-center align-center">
|
|||
|
|
联系客服
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="item">
|
|||
|
|
<div class="icon wx"></div>
|
|||
|
|
<p class="flex flex-justify-center align-center">
|
|||
|
|
公众号
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<a class="item" target="_blank" href="https://github.com/xaboy/form-create-designer">
|
|||
|
|
<div class="icon open"></div>
|
|||
|
|
<p class="flex flex-justify-center align-center">
|
|||
|
|
下载源码
|
|||
|
|
</p>
|
|||
|
|
</a>
|
|||
|
|
<div class="_alert wx_alert">
|
|||
|
|
<img src="https://static.form-create.com/file/img/wx_qrcode.jpg" alt="">
|
|||
|
|
<span>关注官方公众号</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="_alert ser_alert">
|
|||
|
|
<img src="https://www.form-create.com/static/service_qrcode.jpg?20240904" alt="">
|
|||
|
|
<span>扫码联系客服</span>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
import jsonlint from 'jsonlint-mod';
|
|||
|
|
import 'codemirror/lib/codemirror.css';
|
|||
|
|
import 'codemirror/addon/lint/lint.css';
|
|||
|
|
import CodeMirror from 'codemirror/lib/codemirror';
|
|||
|
|
import 'codemirror/addon/lint/lint';
|
|||
|
|
import 'codemirror/addon/lint/json-lint';
|
|||
|
|
import 'codemirror/mode/javascript/javascript';
|
|||
|
|
import 'codemirror/mode/vue/vue';
|
|||
|
|
import 'codemirror/mode/xml/xml';
|
|||
|
|
import 'codemirror/mode/css/css';
|
|||
|
|
import 'codemirror/addon/mode/overlay';
|
|||
|
|
import 'codemirror/addon/mode/simple';
|
|||
|
|
import 'codemirror/addon/selection/selection-pointer';
|
|||
|
|
import 'codemirror/mode/handlebars/handlebars';
|
|||
|
|
import 'codemirror/mode/htmlmixed/htmlmixed';
|
|||
|
|
import 'codemirror/mode/pug/pug';
|
|||
|
|
|
|||
|
|
import is from '@form-create/utils/lib/type';
|
|||
|
|
import formCreate from '@form-create/ant-design-vue';
|
|||
|
|
import ZhCn from "../src/locale/zh-cn";
|
|||
|
|
import En from "../src/locale/en";
|
|||
|
|
import Jp from "../src/locale/jp";
|
|||
|
|
import {copyTextToClipboard} from "../src/utils";
|
|||
|
|
import {theme as antTheme} from 'ant-design-vue';
|
|||
|
|
import forms from "./forms";
|
|||
|
|
import AiTool from "./components/AiTool.vue";
|
|||
|
|
|
|||
|
|
|
|||
|
|
const TITLE = ['生成规则', '表单规则', '生成组件', '设置生成规则', '设置表单规则'];
|
|||
|
|
|
|||
|
|
export default {
|
|||
|
|
name: 'app',
|
|||
|
|
components: {
|
|||
|
|
AiTool,
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
let data = window.location.hash.substring(1);
|
|||
|
|
let hashData = null;
|
|||
|
|
if (data) {
|
|||
|
|
try {
|
|||
|
|
hashData = JSON.parse(decodeURIComponent(escape(atob(data))));
|
|||
|
|
} catch (e) {
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
return {
|
|||
|
|
antTheme,
|
|||
|
|
dark: false,
|
|||
|
|
state: false,
|
|||
|
|
value: null,
|
|||
|
|
title: TITLE,
|
|||
|
|
editor: null,
|
|||
|
|
err: false,
|
|||
|
|
type: -1,
|
|||
|
|
lang: 'zh',
|
|||
|
|
locale: null,
|
|||
|
|
hashData,
|
|||
|
|
onSave() {
|
|||
|
|
console.log(arguments);
|
|||
|
|
},
|
|||
|
|
theme: '',
|
|||
|
|
themes: [
|
|||
|
|
{
|
|||
|
|
value: '#2E73FF',
|
|||
|
|
label: '',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '#F27024',
|
|||
|
|
label: 'orange',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '#18BF82',
|
|||
|
|
label: 'green',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '#884CFF',
|
|||
|
|
label: 'purple',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: '#FE679A',
|
|||
|
|
label: 'pink',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
list: forms(),
|
|||
|
|
handle: [
|
|||
|
|
{
|
|||
|
|
label: '自定义操作',
|
|||
|
|
handle: () => {
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
field: [{
|
|||
|
|
label: '商品表',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '商品ID',
|
|||
|
|
item: 'input',
|
|||
|
|
field: 'goods_id',
|
|||
|
|
update: {
|
|||
|
|
disabled: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '商品名称',
|
|||
|
|
field: 'goods_name',
|
|||
|
|
item: 'input',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '商品分类',
|
|||
|
|
field: 'goods_cate',
|
|||
|
|
rule: {
|
|||
|
|
"type": "select",
|
|||
|
|
"field": "Fyvqm1ef5b5ud9c",
|
|||
|
|
"title": "选择器",
|
|||
|
|
"info": "",
|
|||
|
|
"effect": {
|
|||
|
|
"fetch": ""
|
|||
|
|
},
|
|||
|
|
"$required": false,
|
|||
|
|
"options": [
|
|||
|
|
{
|
|||
|
|
"label": "电子产品",
|
|||
|
|
"value": "电子产品"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "日用百货",
|
|||
|
|
"value": "日用百货"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "时尚女装",
|
|||
|
|
"value": "时尚女装"
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
"label": "潮牌男装",
|
|||
|
|
"value": "潮牌男装"
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
"_fc_id": "id_Flmkm1ef5b5udac",
|
|||
|
|
"name": "ref_Fzvkm1ef5b5udbc",
|
|||
|
|
"display": true,
|
|||
|
|
"hidden": false,
|
|||
|
|
"_fc_drag_tag": "select"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '商品上架时间',
|
|||
|
|
field: 'goods_update_time',
|
|||
|
|
rule: [
|
|||
|
|
{
|
|||
|
|
"type": "datePicker",
|
|||
|
|
"field": "Fip1m14iqwv9ccc",
|
|||
|
|
"title": "日期",
|
|||
|
|
"info": "",
|
|||
|
|
"$required": false,
|
|||
|
|
"props": {
|
|||
|
|
"type": "datetime"
|
|||
|
|
},
|
|||
|
|
"_fc_id": "id_Fg4gm14iqwv9cdc",
|
|||
|
|
"name": "ref_Fba2m14iqwv9cec",
|
|||
|
|
"display": true,
|
|||
|
|
"hidden": false,
|
|||
|
|
"_fc_drag_tag": "datePicker"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}, {
|
|||
|
|
label: '用户表',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
label: '用户ID',
|
|||
|
|
field: 'user_id',
|
|||
|
|
item: 'input',
|
|||
|
|
update: {
|
|||
|
|
disabled: true
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '手机号',
|
|||
|
|
field: 'phone',
|
|||
|
|
rule: {
|
|||
|
|
"type": "input",
|
|||
|
|
"field": "Fif4m1efbeddguc",
|
|||
|
|
"title": "手机号",
|
|||
|
|
"info": "",
|
|||
|
|
"$required": false,
|
|||
|
|
"_fc_id": "id_F3a9m1efbedegvc",
|
|||
|
|
"name": "ref_Festm1efbedegwc",
|
|||
|
|
"display": true,
|
|||
|
|
"hidden": false,
|
|||
|
|
"_fc_drag_tag": "input",
|
|||
|
|
"validate": [
|
|||
|
|
{
|
|||
|
|
"transform": "[[FORM-CREATE-PREFIX-function anonymous(val\n) {\nthis.type = Array.isArray(val) ? 'array' : (typeof val); return val;\n}-FORM-CREATE-SUFFIX]]",
|
|||
|
|
"mode": "pattern",
|
|||
|
|
"trigger": "blur",
|
|||
|
|
"pattern": "^(?:(?:\\+|00)86)?1[3-9]\\d{9}$",
|
|||
|
|
"message": "请输入正确的手机号"
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '用户名称',
|
|||
|
|
field: 'username',
|
|||
|
|
item: 'input',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '用户备注',
|
|||
|
|
field: 'user_mark',
|
|||
|
|
item: 'textarea',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
label: '用户头像',
|
|||
|
|
field: 'avatar',
|
|||
|
|
rule: {
|
|||
|
|
"type": "upload",
|
|||
|
|
"field": "F0gfm1ef9o5mffc",
|
|||
|
|
"title": "用户头像",
|
|||
|
|
"info": "",
|
|||
|
|
"$required": false,
|
|||
|
|
"props": {
|
|||
|
|
"action": "/",
|
|||
|
|
"onSuccess": "[[FORM-CREATE-PREFIX-function anonymous(res,file\n) {\nfile.url = res.data.url;\n}-FORM-CREATE-SUFFIX]]"
|
|||
|
|
},
|
|||
|
|
"_fc_id": "id_Fsokm1ef9o5mfgc",
|
|||
|
|
"name": "ref_Fv5hm1ef9o5mfhc",
|
|||
|
|
"display": true,
|
|||
|
|
"hidden": false,
|
|||
|
|
"_fc_drag_tag": "upload"
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}],
|
|||
|
|
config: {
|
|||
|
|
ai: {
|
|||
|
|
api: 'https://api.form-create.com/ai/demo/chat'
|
|||
|
|
},
|
|||
|
|
localeOptions: [
|
|||
|
|
{value: 'zh-cn', label: '简体中文'},
|
|||
|
|
{value: 'en', label: 'English'},
|
|||
|
|
],
|
|||
|
|
fieldReadonly: false,
|
|||
|
|
showSaveBtn: true,
|
|||
|
|
varList: [
|
|||
|
|
{
|
|||
|
|
id: '$cookie',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
id: 'token',
|
|||
|
|
label: '用户令牌'
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
id: 'user',
|
|||
|
|
label: '用户信息',
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
id: 'name',
|
|||
|
|
label: '用户名称'
|
|||
|
|
}
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
],
|
|||
|
|
fieldList: [
|
|||
|
|
{
|
|||
|
|
value: 'goods',
|
|||
|
|
label: '商品表',
|
|||
|
|
selectable: false,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'goods_id',
|
|||
|
|
label: '商品ID',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'goods_name',
|
|||
|
|
label: '商品名称',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'goods_info',
|
|||
|
|
label: '商品简介',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'goods_cate',
|
|||
|
|
label: '商品分类',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'goods_update_time',
|
|||
|
|
label: '商品上架时间',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'user',
|
|||
|
|
label: '用户表',
|
|||
|
|
selectable: false,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'user_id',
|
|||
|
|
label: '用户ID',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'phone',
|
|||
|
|
label: '手机号',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'username',
|
|||
|
|
label: '用户名称',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'user_mark',
|
|||
|
|
label: '用户备注',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'avatar',
|
|||
|
|
label: '用户头像',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'order',
|
|||
|
|
label: '订单表',
|
|||
|
|
selectable: false,
|
|||
|
|
children: [
|
|||
|
|
{
|
|||
|
|
value: 'order_id',
|
|||
|
|
label: '订单ID',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'order_sn',
|
|||
|
|
label: '订单号',
|
|||
|
|
},
|
|||
|
|
{
|
|||
|
|
value: 'order_time',
|
|||
|
|
label: '订单时间',
|
|||
|
|
},
|
|||
|
|
],
|
|||
|
|
},
|
|||
|
|
]
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
watch: {
|
|||
|
|
state(n) {
|
|||
|
|
if (!n) {
|
|||
|
|
this.value = null;
|
|||
|
|
this.err = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
value() {
|
|||
|
|
this.load();
|
|||
|
|
},
|
|||
|
|
dark(n) {
|
|||
|
|
if (document.startViewTransition) {
|
|||
|
|
const c = this.$refs.switch.$el.getBoundingClientRect()
|
|||
|
|
, u = c.left + c.width / 2
|
|||
|
|
, d = c.top + c.height / 2
|
|||
|
|
, f = Math.hypot(Math.max(u, innerWidth - u), Math.max(d, innerHeight - d));
|
|||
|
|
const g = [`circle(0px at ${u}px ${d}px)`, `circle(${f}px at ${u}px ${d}px)`];
|
|||
|
|
document.startViewTransition(() => {
|
|||
|
|
this.changeDark(n);
|
|||
|
|
}).ready.then(() => {
|
|||
|
|
document.documentElement.animate({
|
|||
|
|
clipPath: n ? [...g].reverse() : g
|
|||
|
|
}, {
|
|||
|
|
duration: 400,
|
|||
|
|
easing: "ease-in",
|
|||
|
|
pseudoElement: n ? "::view-transition-old(root)" : "::view-transition-new(root)"
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
} else {
|
|||
|
|
this.changeDark(n);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleChat() {
|
|||
|
|
this.$refs.designer.activeModule = 'ai';
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
document.querySelector('._fd-ai-chat-input textarea').focus();
|
|||
|
|
})
|
|||
|
|
},
|
|||
|
|
switchForm() {
|
|||
|
|
console.log('switchForm', arguments);
|
|||
|
|
},
|
|||
|
|
changeDark(n) {
|
|||
|
|
if (n) {
|
|||
|
|
document.documentElement.classList.add('dark');
|
|||
|
|
} else {
|
|||
|
|
document.documentElement.classList.remove('dark');
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleCommand(lang) {
|
|||
|
|
if (this.lang !== lang) {
|
|||
|
|
if (lang === 'zh') {
|
|||
|
|
this.locale = ZhCn;
|
|||
|
|
} else if (lang === 'en') {
|
|||
|
|
this.locale = En;
|
|||
|
|
} else {
|
|||
|
|
this.locale = Jp;
|
|||
|
|
}
|
|||
|
|
this.lang = lang;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
handleTheme(theme) {
|
|||
|
|
this.theme = theme;
|
|||
|
|
},
|
|||
|
|
changeLocale() {
|
|||
|
|
if (this.lang === 'cn') {
|
|||
|
|
this.locale = En;
|
|||
|
|
this.lang = 'en';
|
|||
|
|
} else {
|
|||
|
|
this.locale = ZhCn;
|
|||
|
|
this.lang = 'cn';
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
load() {
|
|||
|
|
let val;
|
|||
|
|
if (this.type === 2) {
|
|||
|
|
val = this.value;
|
|||
|
|
} else {
|
|||
|
|
val = formCreate.toJson(this.value, 2);
|
|||
|
|
}
|
|||
|
|
this.$nextTick(() => {
|
|||
|
|
this.editor = CodeMirror(this.$refs.editor, {
|
|||
|
|
lineNumbers: true,
|
|||
|
|
mode: this.type === 2 ? {name: 'vue'} : 'application/json',
|
|||
|
|
gutters: ['CodeMirror-lint-markers'],
|
|||
|
|
// lint: true,
|
|||
|
|
line: true,
|
|||
|
|
tabSize: 2,
|
|||
|
|
lineWrapping: true,
|
|||
|
|
value: val || ''
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
onValidationError(e) {
|
|||
|
|
this.err = e.length !== 0;
|
|||
|
|
},
|
|||
|
|
showJson() {
|
|||
|
|
this.state = true;
|
|||
|
|
this.type = 0;
|
|||
|
|
this.value = this.$refs.designer.getRule();
|
|||
|
|
},
|
|||
|
|
showOption() {
|
|||
|
|
this.state = true;
|
|||
|
|
this.type = 1;
|
|||
|
|
this.value = this.$refs.designer.getOption();
|
|||
|
|
},
|
|||
|
|
setJson() {
|
|||
|
|
this.state = true;
|
|||
|
|
this.type = 3;
|
|||
|
|
this.value = [];
|
|||
|
|
},
|
|||
|
|
setOption() {
|
|||
|
|
this.state = true;
|
|||
|
|
this.type = 4;
|
|||
|
|
this.value = {form: {}};
|
|||
|
|
},
|
|||
|
|
copyUrl() {
|
|||
|
|
const rule = this.$refs.designer.getJson();
|
|||
|
|
const options = this.$refs.designer.getOptionsJson();
|
|||
|
|
const str = btoa(unescape(encodeURIComponent(JSON.stringify({rule, options}))));
|
|||
|
|
copyTextToClipboard(location.origin + location.pathname + '#' + str);
|
|||
|
|
},
|
|||
|
|
onOk() {
|
|||
|
|
if (this.err) return;
|
|||
|
|
const json = this.editor.getValue();
|
|||
|
|
let val = JSON.parse(json);
|
|||
|
|
if (this.type === 3) {
|
|||
|
|
if (!Array.isArray(val)) {
|
|||
|
|
this.err = true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.$refs.designer.setRule(formCreate.parseJson(json));
|
|||
|
|
} else {
|
|||
|
|
if (!is.Object(val) || !val.form) {
|
|||
|
|
this.err = true;
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
this.$refs.designer.setOption(val);
|
|||
|
|
}
|
|||
|
|
this.state = false;
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
beforeCreate() {
|
|||
|
|
window.jsonlint = jsonlint;
|
|||
|
|
},
|
|||
|
|
mounted() {
|
|||
|
|
if (this.hashData && this.hashData.rule) {
|
|||
|
|
this.$refs.designer.setRule(this.hashData.rule);
|
|||
|
|
if (this.hashData.options) {
|
|||
|
|
this.$refs.designer.setOptions(this.hashData.options);
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
this.$refs.designer.setOption({
|
|||
|
|
language: {
|
|||
|
|
"zh-cn": {
|
|||
|
|
"Az87OmQS": "商品名称",
|
|||
|
|
"BAVvUidu": "商品价格",
|
|||
|
|
"CkD1fG2H": "商品描述",
|
|||
|
|
"DgH2iJ3K": "库存数量",
|
|||
|
|
"EhI3jK4L": "发货方式",
|
|||
|
|
"FiJ4kL5M": "配送时间",
|
|||
|
|
"GjK5lM6N": "用户评价",
|
|||
|
|
"HkL6mN7O": "添加到购物车",
|
|||
|
|
"IkM7nO8P": "立即购买",
|
|||
|
|
"JlN8oP9Q": "优惠活动",
|
|||
|
|
"KmO9pQ0R": "搜索商品",
|
|||
|
|
"LnP0qR1S": "分类",
|
|||
|
|
"MoQ1rS2T": "品牌",
|
|||
|
|
"NpR2sT3U": "付款方式",
|
|||
|
|
"OqS3tU4V": "订单确认",
|
|||
|
|
"PrT4uV5W": "用户注册",
|
|||
|
|
"QsU5vW6X": "用户登录",
|
|||
|
|
"RtV6wX7Y": "联系客服",
|
|||
|
|
"SuW7xY8Z": "退出登录",
|
|||
|
|
"TvX8yZ9A": "个人信息",
|
|||
|
|
"UwY9zA0B": "购物车",
|
|||
|
|
"VxZ0aB1C": "结算",
|
|||
|
|
"WyA1bC2D": "运费",
|
|||
|
|
"XzB2cD3E": "订单状态",
|
|||
|
|
"YaC3dE4F": "支付成功",
|
|||
|
|
"ZbD4eF5G": "支付失败"
|
|||
|
|
},
|
|||
|
|
"en": {
|
|||
|
|
"Az87OmQS": "Goods name",
|
|||
|
|
"BAVvUidu": "Goods price",
|
|||
|
|
"CkD1fG2H": "Product description",
|
|||
|
|
"DgH2iJ3K": "Stock quantity",
|
|||
|
|
"EhI3jK4L": "Shipping method",
|
|||
|
|
"FiJ4kL5M": "Delivery time",
|
|||
|
|
"GjK5lM6N": "User reviews",
|
|||
|
|
"HkL6mN7O": "Add to cart",
|
|||
|
|
"IkM7nO8P": "Buy now",
|
|||
|
|
"JlN8oP9Q": "Promotions",
|
|||
|
|
"KmO9pQ0R": "Search products",
|
|||
|
|
"LnP0qR1S": "Category",
|
|||
|
|
"MoQ1rS2T": "Brand",
|
|||
|
|
"NpR2sT3U": "Payment method",
|
|||
|
|
"OqS3tU4V": "Order confirmation",
|
|||
|
|
"PrT4uV5W": "User registration",
|
|||
|
|
"QsU5vW6X": "User login",
|
|||
|
|
"RtV6wX7Y": "Contact customer service",
|
|||
|
|
"SuW7xY8Z": "Logout",
|
|||
|
|
"TvX8yZ9A": "Personal information",
|
|||
|
|
"UwY9zA0B": "Shopping cart",
|
|||
|
|
"VxZ0aB1C": "Checkout",
|
|||
|
|
"WyA1bC2D": "Shipping fee",
|
|||
|
|
"XzB2cD3E": "Order status",
|
|||
|
|
"YaC3dE4F": "Payment successful",
|
|||
|
|
"ZbD4eF5G": "Payment failed"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.$refs.designer.setRule(formCreate.parseJson("[{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"height\":\"100px\",\"width\":\"100%\",\"display\":\"flex\",\"justifyContent\":\"center\",\"alignItems\":\"center\"},\"children\":[\"<div style=\\\"width: 100%; display: flex; justify-content: center; align-items: center;border: 1px solid #f6f6f7;\\n border-radius: 12px;\\n height: 100%;\\n background-color: var(--fc-bg-color-3);\\\">\\n👈🏻 点击左侧边栏 <i class=\\\"fc-icon icon-menu2\\\" style=\\\"font-size:26px;margin:0 2px;color:var(--fc-style-color-1);\\\"></i> 按钮查看更多功能示例\\n </div>\"],\"_fc_id\":\"id_F85km1usjbq4egc\",\"name\":\"ref_F2n0m1usjbq4ehc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false},{\"type\":\"html\",\"native\":true,\"attrs\":{\"innerHTML\":\"\"},\"style\":{\"display\":\"block\",\"width\":\"100%\"},\"children\":[\"<div class=\\\"_fd-view-box\\\">\\n <div class=\\\"title\\\">FormCreate 设计器高级版演示站</div>\\n <div class=\\\"desc\\\">全面实现多端表单设计，为企业提供低代码表单解决方案</div>\\n<div class=\\\"_fd-view-products\\\">\\n <a class=\\\"_fd-view-product\\\" href=\\\"https://pro.form-create.com/view\\\" target=\\\"_blank\\\">\\n <div><div>ElementPlus版PC端设计器👨🏻💻(Vue3)</div><span>立即体验</span></div> <span>采用 Vue3.0 和 ElementPlus 进行页面构建</span>\\n </a>\\n <a class=\\\"_fd-view-product vue2\\\" href=\\\"https://pro.form-create.com/vue2/view\\\" target=\\\"_blank\\\">\\n <div><div>ElementUI版PC端设计器👨🏻💻(Vue2)</div><span>立即体验</span></div> <span>采用 Vue2.7 和 ElementUI 进行页面构建</span>\\n </a>\\n <a class=\\\"_fd-view-product\\\" href=\\\"https://pro.form-create.com/mobile\\\" target=\\\"_blank\\\">\\n <div><div>ElementPlus版移动端设计器📱(Vue3)</div><span>立即体验</span></div> <span>采用 Vue3.0 和 ElementPlus 进行页面构建，移动端采用Vant4.0</span>\\n </a>\\n <a class=\\\"_fd-view-product vue2\\\" href=\\\"https://pro.form-create.com/vue2/mobile\\\" target=\\\"_blank\\\">\\n <div><div>ElementUI版移动端设计器📱(Vue2)</div><span>立即体验</span></div> <span>采用 Vue2.7 和 ElementUI 进行页面构建，移动端采用Vant2.0</span>\\n </a>\\n <a class=\\\"_fd-view-product\\\" href=\\\"https://pro.form-create.com/antd/view\\\" target=\\\"_blank\\\">\\n <div><div>Ant Design Vue版PC端设计器👨🏻💻(Vue3)</div><span>立即体验</span></div> <span>采用 Vue3.0 和 Ant Design Vue 进行页面构建</span>\\n </a>\\n <a class=\\\"_fd-view-product vue2\\\" href=\\\"https://pro.form-create.com/vue2/antd/view\\\" target=\\\"_blank\\\">\\n <div><div>Ant Design Vue版PC端设计器👨🏻💻(Vue2)</div><span>立即体验</span></div> <span>采用 Vue2.7 和 Ant Design Vue 进行页面构建</span>\\n </a>\\n <a class=\\\"_fd-view-product\\\" href=\\\"https://pro.form-create.com/antd/mobile\\\" target=\\\"_blank\\\">\\n <div><div>Ant Design Vue版移动端设计器📱(Vue3)</div><span>立即体验</span></div> <span>采用 Vue3.0 和 Ant Design Vue 进行页面构建，移动端采用Vant4.0</span>\\n </a>\\n <a class=\\\"_fd-view-product vue2\\\" href=\\\"https://pro.form-create.com/vue2/antd/mobile\\\" target=\\\"_blank\\\">\\n <div><div>Ant Design Vue版移动端设计器📱(Vue2)</div><span>立即体验</span></div> <span>采用 Vue2.7 和 Ant Design Vue 进行页面构建，移动端采用Vant2.0</span>\\n </a>\\n </div>\\n</div>\"],\"_fc_id\":\"id_Fr6ym35jirw4acc\",\"name\":\"ref_Fcfnm35jirw4adc\",\"_fc_drag_tag\":\"html\",\"display\":true,\"hidden\":false}]"))
|
|||
|
|
}
|
|||
|
|
this.$refs.designer.setGlobalEvent({
|
|||
|
|
"event_Feq4lui56zxbabc": {
|
|||
|
|
"label": "自定义",
|
|||
|
|
"deletable": false,
|
|||
|
|
"handle": "[[FORM-CREATE-PREFIX-function handle($inject){aaa;}-FORM-CREATE-SUFFIX]]"
|
|||
|
|
},
|
|||
|
|
"event_Feq4lui56zxbab2c": {
|
|||
|
|
"label": "自定义2",
|
|||
|
|
"handle": function ($inject) {
|
|||
|
|
console.log($inject);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
this.$refs.designer.setGlobalVariable({
|
|||
|
|
"var_Fppdlz6gytmzb1c": {
|
|||
|
|
"label": "token",
|
|||
|
|
"deletable": false,
|
|||
|
|
"handle": function (get, api) {
|
|||
|
|
return get('$cookie.token') || 'default Token'
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.$refs.designer.setGlobalClass({
|
|||
|
|
"cls_Fzmulzw3u0oib0c": {
|
|||
|
|
"label": "fff",
|
|||
|
|
"deletable": false,
|
|||
|
|
"style": {
|
|||
|
|
"color": "red"
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
this.$refs.designer.setGlobalData({
|
|||
|
|
"data_Fk6dlui4k0xuabc": {
|
|||
|
|
"label": "自定义数据",
|
|||
|
|
"type": "static",
|
|||
|
|
"data": [
|
|||
|
|
1,
|
|||
|
|
2,
|
|||
|
|
3,
|
|||
|
|
4
|
|||
|
|
]
|
|||
|
|
},
|
|||
|
|
"data_Fs1elui4kttlacc": {
|
|||
|
|
"action": "http://192.168.1.4:8081/",
|
|||
|
|
"deletable": false,
|
|||
|
|
"method": "GET",
|
|||
|
|
"headers": {},
|
|||
|
|
"data": {},
|
|||
|
|
"parse": "[[FORM-CREATE-PREFIX-function parse(res){return res.data;}-FORM-CREATE-SUFFIX]]",
|
|||
|
|
"onError": "[[FORM-CREATE-PREFIX-function onError(e){}-FORM-CREATE-SUFFIX]]",
|
|||
|
|
"label": "自定义接口数据",
|
|||
|
|
"type": "fetch"
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style>
|
|||
|
|
|
|||
|
|
::view-transition-old(root), ::view-transition-new(root) {
|
|||
|
|
animation: none;
|
|||
|
|
mix-blend-mode: normal
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::view-transition-old(root) {
|
|||
|
|
z-index: 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
::view-transition-new(root) {
|
|||
|
|
z-index: 2147483646
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark::view-transition-old(root) {
|
|||
|
|
z-index: 2147483646
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.dark::view-transition-new(root) {
|
|||
|
|
z-index: 1
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
body {
|
|||
|
|
min-height: 100vh;
|
|||
|
|
padding: 0;
|
|||
|
|
margin: 0;
|
|||
|
|
display: flex !important;
|
|||
|
|
flex-direction: column !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
#app {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
flex: 1;
|
|||
|
|
background: var(--fc-bg-color-1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
:focus-visible {
|
|||
|
|
outline: 0 none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-header {
|
|||
|
|
height: 60px;
|
|||
|
|
margin: 0 20px;
|
|||
|
|
position: relative;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
cursor: default;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-logo {
|
|||
|
|
height: 26px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-name {
|
|||
|
|
display: inline-block;
|
|||
|
|
color: var(--fc-text-color-1);
|
|||
|
|
font-size: 20px;
|
|||
|
|
font-weight: 600;
|
|||
|
|
margin-left: 5px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-menu {
|
|||
|
|
position: absolute;
|
|||
|
|
right: 0;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
width: 680px;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-menu .ant-btn {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-menu i {
|
|||
|
|
font-size: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-menu span {
|
|||
|
|
color: var(--fc-text-color-1);
|
|||
|
|
font-size: 16px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.handle {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-right: 20px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-menu .ant-dropdown-trigger, .handle .ant-dropdown-trigger {
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-copyright {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: flex-end;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 5px 20px;
|
|||
|
|
font-size: 16px;
|
|||
|
|
border-top: 1px solid var(--fc-line-color-3);
|
|||
|
|
background-color: var(--fc-bg-color-1);
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-dialog .CodeMirror {
|
|||
|
|
height: 450px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-dialog .CodeMirror-line {
|
|||
|
|
line-height: 16px !important;
|
|||
|
|
font-size: 13px !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.CodeMirror-lint-tooltip {
|
|||
|
|
z-index: 2021 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-b-item {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-switch .light-icon, ._fc-t-switch .dark-icon {
|
|||
|
|
width: 14px;
|
|||
|
|
height: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
font-style: normal;
|
|||
|
|
line-height: 0;
|
|||
|
|
text-align: center;
|
|||
|
|
text-transform: none;
|
|||
|
|
vertical-align: super;
|
|||
|
|
text-rendering: optimizeLegibility;
|
|||
|
|
-webkit-font-smoothing: antialiased;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-switch .dark-icon {
|
|||
|
|
border-radius: 50%;
|
|||
|
|
color: #cfd3dc;
|
|||
|
|
background-color: #141414;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-switch .ant-switch-inner-checked, ._fc-t-switch .ant-switch-inner-unchecked {
|
|||
|
|
display: flex !important;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-top: 0 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-switch .ant-switch-inner {
|
|||
|
|
display: inline-flex;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fc-t-switch.ant-switch-checked {
|
|||
|
|
background: #141414 !important;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-box > .title {
|
|||
|
|
font-weight: 800;
|
|||
|
|
font-size: 30px;
|
|||
|
|
line-height: 56px;
|
|||
|
|
color: #333333;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-box > .desc {
|
|||
|
|
text-align: center;
|
|||
|
|
font-size: 16px;
|
|||
|
|
line-height: 25px;
|
|||
|
|
color: #666666;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-products{
|
|||
|
|
display: grid;
|
|||
|
|
grid-template-columns: repeat(2, 1fr);
|
|||
|
|
width: 100%;
|
|||
|
|
grid-gap: 10px;
|
|||
|
|
padding: 10px;
|
|||
|
|
z-index: 901;
|
|||
|
|
position: relative;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
._fd-view-product{
|
|||
|
|
font-size: 12px;
|
|||
|
|
font-weight: 400;
|
|||
|
|
color: rgb(153, 153, 153);
|
|||
|
|
margin-bottom: 12px;
|
|||
|
|
border: 1px solid rgb(207, 222, 243);
|
|||
|
|
border-radius: 4px;
|
|||
|
|
background: center center / cover no-repeat #f6faff30;
|
|||
|
|
box-shadow: rgba(3, 51, 123, 0.08) 0px 5px 15px 1px;
|
|||
|
|
padding: 14px;
|
|||
|
|
background-image: url(data:image/png;base64,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
|
|||
|
|
background-position: right;
|
|||
|
|
background-size: auto;
|
|||
|
|
cursor: pointer;
|
|||
|
|
transition: background-color ease .3s;
|
|||
|
|
opacity: 0.95;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-product.vue2{
|
|||
|
|
border-color: #CCF6D5;
|
|||
|
|
background: center center / cover no-repeat #e6fae630;
|
|||
|
|
background-image: url(data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAAQ4AAAB8CAYAAACYLF7bAAAACXBIWXMAAAsTAAALEwEAmpwYAAAFG2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNy4wLWMwMDAgNzkuZGFiYWNiYiwgMjAyMS8wNC8xNC0wMDozOTo0NCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczpkYz0iaHR0cDovL3B1cmwub3JnL2RjL2VsZW1lbnRzLzEuMS8iIHhtbG5zOnBob3Rvc2hvcD0iaHR0cDovL25zLmFkb2JlLmNvbS9waG90b3Nob3AvMS4wLyIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0RXZ0PSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VFdmVudCMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIyLjQgKE1hY2ludG9zaCkiIHhtcDpDcmVhdGVEYXRlPSIyMDI0LTEyLTIzVDIxOjAwOjE4KzA4OjAwIiB4bXA6TW9kaWZ5RGF0ZT0iMjAyNC0xMi0yM1QyMToxNzowNSswODowMCIgeG1wOk1ldGFkYXRhRGF0ZT0iMjAyNC0xMi0yM1QyMToxNzowNSswODowMCIgZGM6Zm9ybWF0PSJpbWFnZS9wbmciIHBob3Rvc2hvcDpDb2xvck1vZGU9IjMiIHBob3Rvc2hvcDpJQ0NQcm9maWxlPSJzUkdCIElFQzYxOTY2LTIuMSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpkMTEyOWQwYS1jMzEy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
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-product.vue2 > div {
|
|||
|
|
color: #00C050;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
._fd-view-product:hover {
|
|||
|
|
background-color: #FFFFFF;
|
|||
|
|
color: rgb(153, 153, 153);
|
|||
|
|
}
|
|||
|
|
._fd-view-product > div {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
flex-direction: row;
|
|||
|
|
font-weight: 600;
|
|||
|
|
font-size: 15px;
|
|||
|
|
color: #2E73FF;
|
|||
|
|
margin-bottom: 6px;
|
|||
|
|
}
|
|||
|
|
._fd-view-product > div > span{
|
|||
|
|
font-size: 14px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav {
|
|||
|
|
position: fixed;
|
|||
|
|
right: 10px;
|
|||
|
|
top: 60%;
|
|||
|
|
z-index: 100;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
position: relative;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 60px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
border-radius: 4px;
|
|||
|
|
border: 1px solid #018EFF;
|
|||
|
|
transition: all 0.3s ease;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item + .item {
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .top {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
width: 60px;
|
|||
|
|
height: 30px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
margin-top: 10px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .top img {
|
|||
|
|
width: 10px;
|
|||
|
|
height: 12px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .top, .float_nav .item {
|
|||
|
|
cursor: pointer;
|
|||
|
|
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .icon {
|
|||
|
|
width: 27px;
|
|||
|
|
height: 25px;
|
|||
|
|
background-repeat: no-repeat;
|
|||
|
|
background-size: cover;
|
|||
|
|
background-position: center;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .ser {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/wx-icon.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .wx {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/qrcode-icon.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .open {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/git-icon.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav p {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 12px;
|
|||
|
|
color: #333333;
|
|||
|
|
line-height: 17px;
|
|||
|
|
margin: 0;
|
|||
|
|
padding: 0;
|
|||
|
|
margin-top: 4px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:hover p {
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:hover {
|
|||
|
|
background: #018EFF;
|
|||
|
|
border: 0 none;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:hover .ser {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/wx-icon2.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:hover .wx {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/qrcode-icon2.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:hover .open {
|
|||
|
|
background-image: url("https://static.form-create.com/file/img/git-icon2.png");
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:nth-child(1):hover ~ .ser_alert {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav .item:nth-child(2):hover ~ .wx_alert {
|
|||
|
|
display: flex;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav ._alert {
|
|||
|
|
width: 180px;
|
|||
|
|
height: 200px;
|
|||
|
|
background: #FFFFFF;
|
|||
|
|
box-shadow: 0px 1px 10px 0px rgba(0, 0, 0, 0.1);
|
|||
|
|
border-radius: 8px 8px 8px 8px;
|
|||
|
|
position: absolute;
|
|||
|
|
right: 75px;
|
|||
|
|
top: 0px;
|
|||
|
|
display: none;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
flex-direction: column;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav ._alert img {
|
|||
|
|
width: 135px;
|
|||
|
|
height: 135px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.float_nav ._alert span {
|
|||
|
|
font-weight: 400;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #3D3D3D;
|
|||
|
|
line-height: 17px;
|
|||
|
|
text-align: center;
|
|||
|
|
margin-top: 14px;
|
|||
|
|
}
|
|||
|
|
</style>
|