This commit is contained in:
parent
9e07cf0214
commit
7dd0463161
|
@ -29,7 +29,6 @@ import {
|
|||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
InputGroup,
|
||||
InputSearch,
|
||||
Modal,
|
||||
Popover,
|
||||
|
@ -500,13 +499,13 @@ const formState = reactive({
|
|||
</div>
|
||||
</template>
|
||||
<template #content>
|
||||
<InputGroup compact>
|
||||
<div class="shop-seach flex items-center">
|
||||
<Select v-model:value="shopFlotter">
|
||||
<SelectOption value="1">全部应用磁贴</SelectOption>
|
||||
<SelectOption value="2">Option2</SelectOption>
|
||||
</Select>
|
||||
<InputSearch placeholder="" style="width: 200px" />
|
||||
</InputGroup>
|
||||
<InputSearch placeholder="" />
|
||||
</div>
|
||||
<div class="shop-box">
|
||||
<!-- <CheckboxGroup v-model:value="selectTilseArr" style="width: 100%"> -->
|
||||
<Collapse v-model:active-key="activeKeyArr" style="width: 100%">
|
||||
|
@ -870,4 +869,10 @@ const formState = reactive({
|
|||
background: white !important;
|
||||
}
|
||||
}
|
||||
|
||||
.shop-seach :deep(button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
||||
|
|
|
@ -1,7 +1,158 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, watch } from 'vue';
|
||||
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
import {
|
||||
ArrowLeftOutlined,
|
||||
ArrowRightOutlined,
|
||||
CheckCircleFilled,
|
||||
InfoCircleFilled,
|
||||
} from '@ant-design/icons-vue';
|
||||
import {
|
||||
Button,
|
||||
Checkbox,
|
||||
Form,
|
||||
FormItem,
|
||||
Input,
|
||||
Select,
|
||||
Steps,
|
||||
Textarea,
|
||||
} from 'ant-design-vue';
|
||||
import {
|
||||
VXETable,
|
||||
type VxeTableEvents,
|
||||
type VxeTableInstance,
|
||||
VxeUI,
|
||||
} from 'vxe-table';
|
||||
|
||||
const wrapperCol = { style: { width: '100px' } };
|
||||
watch(
|
||||
() => preferences.theme.mode,
|
||||
(n: any) => {
|
||||
VxeUI.setTheme(n);
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
interface RowVO {
|
||||
code: string;
|
||||
name: string;
|
||||
}
|
||||
|
||||
const selectRow = ref<null | RowVO>(null);
|
||||
|
||||
const tableData = ref<RowVO[]>([
|
||||
{ code: 'xzczcz', name: '个人工作台' },
|
||||
{ code: 'xzczcz', name: '综合行政' },
|
||||
{ code: 'xzczcz', name: '经营管理' },
|
||||
{ code: 'xzczcz', name: '安全生产' },
|
||||
{ code: 'xzczcz', name: '勘探开发' },
|
||||
{ code: 'xzczcz', name: '数据管理' },
|
||||
{ code: 'xzczcz', name: '中心工作' },
|
||||
{ code: 'xzczcz', name: '总部系统' },
|
||||
{ code: 'xzczcz', name: '功能模块' },
|
||||
{ code: 'xzczcz', name: '工程院系统' },
|
||||
]);
|
||||
|
||||
const tableRef = ref<VxeTableInstance<RowVO>>();
|
||||
|
||||
const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
|
||||
console.log('单元格点击事件');
|
||||
};
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
|
||||
selectRow.value = row;
|
||||
console.log('单选事件');
|
||||
};
|
||||
|
||||
const setSelectRow = (index: number) => {
|
||||
const $table = tableRef.value;
|
||||
if ($table) {
|
||||
$table.setRadioRow(tableData.value[index]);
|
||||
}
|
||||
};
|
||||
|
||||
const clearRadioRowEevnt = () => {
|
||||
const $table = tableRef.value;
|
||||
if ($table) {
|
||||
selectRow.value = null;
|
||||
$table.clearRadioRow();
|
||||
}
|
||||
};
|
||||
|
||||
const getRadioEvent = () => {
|
||||
const $table = tableRef.value;
|
||||
if ($table) {
|
||||
const currRow = $table.getRadioRecord();
|
||||
VXETable.modal.alert(JSON.stringify(currRow));
|
||||
}
|
||||
};
|
||||
const templateList = [
|
||||
{
|
||||
img: 'AUTO_1612159241967_C车辆调度.png',
|
||||
name: '多媒体',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612160044533_C市场管理.png',
|
||||
name: '柱状图',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612174485058_C投资共享.png',
|
||||
name: '卡片',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612175576303_C费用报销.png',
|
||||
name: '自定义',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612175837663_C设备管理.png',
|
||||
name: '仪表盘',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612176568856_C财务管理.png',
|
||||
name: '折线图',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612176967032_C土地信息.png',
|
||||
name: '列表',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612236164722_C门户网站.png',
|
||||
name: '数字',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612251274093_C集输防腐.png',
|
||||
name: '饼图',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612254108987_C新井日报.png',
|
||||
name: '快捷入口',
|
||||
},
|
||||
{
|
||||
img: 'AUTO_1612254711440_C单井曲线.png',
|
||||
name: '文本',
|
||||
},
|
||||
];
|
||||
|
||||
const nowCurrent = ref(0);
|
||||
const selectTemplate = (index: number) => {
|
||||
nowCurrent.value = index;
|
||||
};
|
||||
|
||||
const templateNum = ref(0);
|
||||
const templateClickNum = (index: number) => {
|
||||
templateNum.value = index;
|
||||
};
|
||||
</script>
|
||||
<template>
|
||||
<div class="w-[100%] px-2 bg-background mt-3 min-w-[1200px]">
|
||||
<div class="w-[70%] mx-auto pt-3">
|
||||
<Steps :current="nowCurrent" :items="[
|
||||
<div class="bg-background mt-3 w-[100%] min-w-[1200px] px-2">
|
||||
<div class="mx-auto w-[70%] pt-3">
|
||||
<Steps
|
||||
:current="nowCurrent"
|
||||
:items="[
|
||||
{
|
||||
title: '选择业务域',
|
||||
},
|
||||
|
@ -11,37 +162,61 @@
|
|||
{
|
||||
title: '填写磁贴信息',
|
||||
},
|
||||
]"></Steps>
|
||||
]"
|
||||
/>
|
||||
</div>
|
||||
<div class="flex gap-3 mt-3 pb-2 justify-center">
|
||||
<div class="mt-3 flex justify-center gap-3 pb-2">
|
||||
<div class="c-item flex flex-col items-center">
|
||||
<div class="s-t my-3">请选择业务域</div>
|
||||
<Form layout="inline" :wrapperCol="wrapperCol">
|
||||
<Form :wrapper-col="wrapperCol" layout="inline">
|
||||
<FormItem label="名称">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="编码">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<Button type="primary">查询</Button>
|
||||
</Form>
|
||||
<div class="text-xs flex gap-1">
|
||||
<div class="flex gap-1 text-xs">
|
||||
<InfoCircleFilled />
|
||||
<div>如果找不到相关业务,请<Button type="link">点击此处</Button>新建</div>
|
||||
<div>
|
||||
如果找不到相关业务,请<Button type="link">点击此处</Button>新建
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<vxe-table border ref="tableRef" height="70%" :data="tableData" :radio-config="{ highlight: true }"
|
||||
@cell-click="cellClickEvent" @radio-change="radioChangeEvent">
|
||||
<vxe-table
|
||||
ref="tableRef"
|
||||
:data="tableData"
|
||||
:radio-config="{ highlight: true }"
|
||||
border
|
||||
height="70%"
|
||||
@cell-click="cellClickEvent"
|
||||
@radio-change="radioChangeEvent"
|
||||
>
|
||||
<vxe-column type="radio" width="60">
|
||||
<template #header>
|
||||
<vxe-button mode="text" @click="clearRadioRowEevnt" :disabled="!selectRow">取消</vxe-button>
|
||||
<vxe-button
|
||||
:disabled="!selectRow"
|
||||
mode="text"
|
||||
@click="clearRadioRowEevnt"
|
||||
>
|
||||
取消
|
||||
</vxe-button>
|
||||
</template>
|
||||
</vxe-column>
|
||||
<vxe-column field="code" title="业务域编码" width="120"></vxe-column>
|
||||
<vxe-column field="name" title="业务域名称" width="120"></vxe-column>
|
||||
<vxe-column field="code" title="业务域编码" width="120" />
|
||||
<vxe-column field="name" title="业务域名称" width="120" />
|
||||
</vxe-table>
|
||||
<div class="flex justify-end w-[100%] px-3 py-3" v-if="nowCurrent == 0">
|
||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
|
||||
<div
|
||||
v-if="nowCurrent == 0"
|
||||
class="next-box flex w-[100%] justify-end px-3 py-3"
|
||||
>
|
||||
<Button
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="selectTemplate(1)"
|
||||
>
|
||||
<template #icon>
|
||||
<ArrowRightOutlined />
|
||||
</template>
|
||||
|
@ -49,60 +224,109 @@
|
|||
</div>
|
||||
<!-- <ArrowLeftOutlined /> -->
|
||||
</div>
|
||||
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 1">
|
||||
<div v-show="nowCurrent >= 1" class="c-item flex flex-col items-center">
|
||||
<div class="s-t my-3">请选择磁贴模板</div>
|
||||
<div class="flex flex-wrap h-[100%] gap-3 justify-center ">
|
||||
<div class="template-item flex flex-col justify-center gap-1 items-center"
|
||||
:class="{ 'active': templateNum == index }" v-for="(item, index) in templateList" :key="index"
|
||||
@click="templateClickNum(index)">
|
||||
<img :src="'/xbyt/' + item.img" class="w-[70px] h-[70px] object-contain">
|
||||
<div class="flex h-[100%] flex-wrap justify-center gap-3">
|
||||
<div
|
||||
v-for="(item, index) in templateList"
|
||||
:key="index"
|
||||
:class="{ active: templateNum == index }"
|
||||
class="template-item flex flex-col items-center justify-center gap-1"
|
||||
@click="templateClickNum(index)"
|
||||
>
|
||||
<img
|
||||
:src="`/xbyt/${item.img}`"
|
||||
class="h-[70px] w-[70px] object-contain"
|
||||
/>
|
||||
<div class="text-xs">{{ item.name }}</div>
|
||||
|
||||
<div class="active-icon" v-if="templateNum == index">
|
||||
<CheckCircleFilled style="color: hsl(var(--primary));font-size: 20px;"/>
|
||||
<div v-if="templateNum == index" class="active-icon">
|
||||
<CheckCircleFilled
|
||||
style="color: hsl(var(--primary)); font-size: 20px"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"
|
||||
v-if="templateList.length % 3 == 2"></div>
|
||||
<div
|
||||
v-if="templateList.length % 3 == 2"
|
||||
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
|
||||
style="cursor: default"
|
||||
></div>
|
||||
<template v-if="templateList.length % 3 == 1">
|
||||
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
|
||||
<div class="opacity-0 template-item flex flex-col justify-center gap-1 items-center" style="cursor: default;"></div>
|
||||
<div
|
||||
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
|
||||
style="cursor: default"
|
||||
></div>
|
||||
<div
|
||||
class="template-item flex flex-col items-center justify-center gap-1 opacity-0"
|
||||
style="cursor: default"
|
||||
></div>
|
||||
</template>
|
||||
</div>
|
||||
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 1">
|
||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(0)">
|
||||
<div
|
||||
v-if="nowCurrent == 1"
|
||||
class="next-box flex w-[100%] justify-between px-3 py-3"
|
||||
>
|
||||
<Button
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="selectTemplate(0)"
|
||||
>
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</Button>
|
||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(2)">
|
||||
<Button
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="selectTemplate(2)"
|
||||
>
|
||||
<template #icon>
|
||||
<ArrowRightOutlined />
|
||||
</template>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div class="c-item flex flex-col items-center" v-show="nowCurrent >= 2">
|
||||
<div v-show="nowCurrent >= 2" class="c-item flex flex-col items-center">
|
||||
<div class="s-t my-3">请填写磁贴信息</div>
|
||||
<div class="form-box">
|
||||
<Form :wrapperCol="{ style: { width: '300px' } }" :labelCol="{ style: { width: '80px' } }">
|
||||
<FormItem label="业务域" :rules="[{ required: true, message: '请输入业务域' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<Form
|
||||
:label-col="{ style: { width: '80px' } }"
|
||||
:wrapper-col="{ style: { width: '300px' } }"
|
||||
>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入业务域' }]"
|
||||
label="业务域"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="适用范围" :rules="[{ required: true, message: '请选择适用范围' }]">
|
||||
<Select placeholder="请选择"></Select>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请选择适用范围' }]"
|
||||
label="适用范围"
|
||||
>
|
||||
<Select placeholder="请选择" />
|
||||
</FormItem>
|
||||
<FormItem label="编码" :rules="[{ required: true, message: '请输入编码' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入编码' }]"
|
||||
label="编码"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="标题" :rules="[{ required: true, message: '请输入标题' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入标题' }]"
|
||||
label="标题"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="链接地址" :rules="[{ required: true, message: '请输入链接地址' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入链接地址' }]"
|
||||
label="链接地址"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="数据源">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="磁贴大小">
|
||||
<div class="flex items-center gap-4">
|
||||
|
@ -123,33 +347,55 @@
|
|||
</div>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="图标" :rules="[{ required: true, message: '请上传图标' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请上传图标' }]"
|
||||
label="图标"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="打开方式">
|
||||
<Select placeholder="请选择"></Select>
|
||||
<Select placeholder="请选择" />
|
||||
</FormItem>
|
||||
<FormItem label="作者" :rules="[{ required: true, message: '请输入作者' }]">
|
||||
<Input placeholder="请输入"></Input>
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入作者' }]"
|
||||
label="作者"
|
||||
>
|
||||
<Input placeholder="请输入" />
|
||||
</FormItem>
|
||||
<FormItem label="联系方式" :rules="[{ required: true, message: '请输入联系方式' }]">
|
||||
<FormItem
|
||||
:rules="[{ required: true, message: '请输入联系方式' }]"
|
||||
label="联系方式"
|
||||
>
|
||||
<div>
|
||||
<Input placeholder="请输入"></Input>
|
||||
<Input placeholder="请输入" />
|
||||
<Checkbox>经过授权才可使用</Checkbox>
|
||||
</div>
|
||||
</FormItem>
|
||||
<FormItem label="描述">
|
||||
<Textarea placeholder="请输入"></Textarea>
|
||||
<Textarea placeholder="请输入" />
|
||||
</FormItem>
|
||||
</Form>
|
||||
</div>
|
||||
<div class="flex justify-between w-[100%] px-3 py-3" v-if="nowCurrent == 2">
|
||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(1)">
|
||||
<div
|
||||
v-if="nowCurrent == 2"
|
||||
class="next-box flex w-[100%] justify-between px-3 py-3"
|
||||
>
|
||||
<Button
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="selectTemplate(1)"
|
||||
>
|
||||
<template #icon>
|
||||
<ArrowLeftOutlined />
|
||||
</template>
|
||||
</Button>
|
||||
<Button type="primary" size="large" shape="circle" @click="selectTemplate(3)">
|
||||
<Button
|
||||
shape="circle"
|
||||
size="large"
|
||||
type="primary"
|
||||
@click="selectTemplate(3)"
|
||||
>
|
||||
<template #icon>
|
||||
<ArrowRightOutlined />
|
||||
</template>
|
||||
|
@ -159,125 +405,10 @@
|
|||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch } from 'vue'
|
||||
import { Steps } from 'ant-design-vue';
|
||||
import { InfoCircleFilled, ArrowRightOutlined, ArrowLeftOutlined,CheckCircleFilled } from '@ant-design/icons-vue';
|
||||
import { type VxeGridProps, VxeUI } from 'vxe-table'
|
||||
import { VXETable, type VxeTableInstance, type VxeTableEvents } from 'vxe-table'
|
||||
|
||||
import { Button, Form, FormItem, Input, Select, Card, Pagination, Textarea, Checkbox } from 'ant-design-vue';
|
||||
import { preferences } from '@vben/preferences';
|
||||
|
||||
const wrapperCol = { style: { width: '100px' } };
|
||||
watch(() => preferences.theme.mode, (n: any) => {
|
||||
VxeUI.setTheme(n)
|
||||
},{
|
||||
deep: true,
|
||||
immediate: true
|
||||
})
|
||||
interface RowVO {
|
||||
code: string
|
||||
name: string
|
||||
}
|
||||
|
||||
const selectRow = ref<RowVO | null>(null)
|
||||
|
||||
const tableData = ref<RowVO[]>([
|
||||
{ code: "xzczcz", name: "个人工作台" },
|
||||
{ code: "xzczcz", name: "综合行政" },
|
||||
{ code: "xzczcz", name: "经营管理" },
|
||||
{ code: "xzczcz", name: "安全生产" },
|
||||
{ code: "xzczcz", name: "勘探开发" },
|
||||
{ code: "xzczcz", name: "数据管理" },
|
||||
{ code: "xzczcz", name: "中心工作" },
|
||||
{ code: "xzczcz", name: "总部系统" },
|
||||
{ code: "xzczcz", name: "功能模块" },
|
||||
{ code: "xzczcz", name: "工程院系统" },
|
||||
])
|
||||
|
||||
const tableRef = ref<VxeTableInstance<RowVO>>()
|
||||
|
||||
const cellClickEvent: VxeTableEvents.CellClick<RowVO> = () => {
|
||||
console.log('单元格点击事件')
|
||||
}
|
||||
|
||||
const radioChangeEvent: VxeTableEvents.RadioChange<RowVO> = ({ row }) => {
|
||||
selectRow.value = row
|
||||
console.log('单选事件')
|
||||
}
|
||||
|
||||
const setSelectRow = (index: number) => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
$table.setRadioRow(tableData.value[index])
|
||||
}
|
||||
}
|
||||
|
||||
const clearRadioRowEevnt = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
selectRow.value = null
|
||||
$table.clearRadioRow()
|
||||
}
|
||||
}
|
||||
|
||||
const getRadioEvent = () => {
|
||||
const $table = tableRef.value
|
||||
if ($table) {
|
||||
const currRow = $table.getRadioRecord()
|
||||
VXETable.modal.alert(JSON.stringify(currRow))
|
||||
}
|
||||
}
|
||||
const templateList = [{
|
||||
img: 'AUTO_1612159241967_C车辆调度.png',
|
||||
name: '多媒体'
|
||||
}, {
|
||||
img: 'AUTO_1612160044533_C市场管理.png',
|
||||
name: '柱状图'
|
||||
}, {
|
||||
img: 'AUTO_1612174485058_C投资共享.png',
|
||||
name: '卡片'
|
||||
}, {
|
||||
img: 'AUTO_1612175576303_C费用报销.png',
|
||||
name: '自定义'
|
||||
}, {
|
||||
img: 'AUTO_1612175837663_C设备管理.png',
|
||||
name: '仪表盘'
|
||||
}, {
|
||||
img: 'AUTO_1612176568856_C财务管理.png',
|
||||
name: '折线图'
|
||||
}, {
|
||||
img: 'AUTO_1612176967032_C土地信息.png',
|
||||
name: '列表'
|
||||
}, {
|
||||
img: 'AUTO_1612236164722_C门户网站.png',
|
||||
name: '数字'
|
||||
}, {
|
||||
img: 'AUTO_1612251274093_C集输防腐.png',
|
||||
name: '饼图'
|
||||
}, {
|
||||
img: 'AUTO_1612254108987_C新井日报.png',
|
||||
name: '快捷入口'
|
||||
}, {
|
||||
img: 'AUTO_1612254711440_C单井曲线.png',
|
||||
name: '文本'
|
||||
}]
|
||||
|
||||
let nowCurrent = ref(0);
|
||||
let selectTemplate = (index: number) => {
|
||||
nowCurrent.value = index
|
||||
}
|
||||
|
||||
let templateNum = ref(0);
|
||||
let templateClickNum = (index: number) => {
|
||||
templateNum.value = index
|
||||
}
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
.c-item {
|
||||
border: 1px solid #ccc;
|
||||
flex: .3333;
|
||||
flex: 0.3333;
|
||||
height: calc(100vh - 150px);
|
||||
}
|
||||
|
||||
|
@ -302,4 +433,10 @@ let templateClickNum = (index: number) => {
|
|||
max-height: 90%;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.next-box :deep(button) {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
</style>
|
Loading…
Reference in New Issue