Skip to content

O
office-mobile
Commit 07b3131d by 无尘
Options

feat: 增加自定义模板和系统模板预览页面

parent a5e91e64
Showing with 1878 additions and 0 deletions
src/components/app/cloudDaily/birthday-membership-data.vue 0 → 100644
<!--
<birthday-membership-data
:fieldName="fieldName">
</birthday-membership-data>
-->
<template>
<div class="birth-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="data-list">
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">订单数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费人数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费金额占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'birthday-membership-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.birth-number-contain {
background: #fff;
padding: 0 12px;
position: relative;
.build-title {
height: 56px;
line-height: 56px;
// padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 14px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.data-item {
margin-top: 10px;
.data-item-title {
width: 90px;
display: inline-block;
}
.data-bottom {
width: calc(100% - 90px);
height: 10px;
background: #f3f3f9;
display: inline-block;
position: relative;
margin-top: 20px;
border-radius: 2px;
}
.data-num {
position: absolute;
color: #508cee;
top: -21px;
left: 0;
font-size: 14px;
font-weight: 600;
}
.data-percent {
position: absolute;
top: -20px;
right: 0;
}
.data-top {
background: #508cee;
height: 10px;
position: absolute;
left: 0;
top: 0;
width: 80%;
border-radius: 2px;
}
.data-ratio {
font-size: 14px;
font-weight: 600;
margin-left: 5px;
}
.data-percent-first {
margin-right: 5px;
}
.data-percent-second {
margin-left: 5px;
}
.data-title {
height: 30px;
}
.gic-pull-right {
float: right;
}
}
}
</style>
src/components/app/cloudDaily/error-mointor.vue 0 → 100644
<!--
<error-mointor
:fieldName="fieldName">
</error-mointor>
-->
<template>
<div class="anomal-monitor-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="progress-contain">
<div class="progress-center">
<div id="container_progress1" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 72.2668; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-left" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">75.00%</div>
</div>
<p class="progress-text">无导购率</p>
</div>
<div class="progress-center">
<div id="container_progress2" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 216.8; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-mid" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">25.00%</div>
</div>
<p class="progress-text">退单率</p>
</div>
<div class="progress-center">
<div id="container_progress3" class="container-progress" style="position: relative;">
<svg viewBox="0 0 100 100" style="display: block; width: 100%;">
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#eee" stroke-width="8" fill-opacity="0"></path>
<path d="M 50,50 m 0,-46 a 46,46 0 1 1 0,92 a 46,46 0 1 1 0,-92" stroke="#1890ff" stroke-width="8" fill-opacity="0" style="stroke-dasharray: 289.067, 289.067; stroke-dashoffset: 14.4534; transition: stroke-dashoffset 1.5s ease-in;"></path>
</svg>
<div class="progressbar-text progressbar-text-right" style="position: absolute; left: 50%; top: 50%; padding: 0px; margin: 0px; transform: translate(-50%, -50%); color: #1890ff; font-size: 16px; font-weight: 600;">95.00%</div>
</div>
<p class="progress-text">凭空退单率</p>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'error-mointor',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 14px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.progress-contain {
display: flex;
background: #fff;
padding: 15px 0 30px 0;
.progress-center {
display: flex;
align-items: center;
flex-flow: column;
flex: 1;
.progress-text {
margin-top: 10px;
font-size: 12px;
}
.container-progress {
position: relative;
width: 80px;
height: 80px;
svg {
display: block;
width: 100%;
}
svg:not(:root) {
overflow: hidden;
}
.progressbar-text-left {
position: absolute;
left: 50%;
top: 50%;
padding: 0px;
margin: 0px;
transform: translate(-50%, -50%);
color: #1890ff;
font-size: 16px;
font-weight: 600;
}
}
}
}
</style>
src/components/app/cloudDaily/membership-data.vue 0 → 100644
<!--
<membership-data
:fieldName="fieldName">
</membership-data>
-->
<template>
<div class="data-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<table class="data-number-table">
<thead>
<tr>
<th class="w_22"></th>
<th class="w_26">日</th>
<th class="w_26">月</th>
</tr>
</thead>
<tbody>
<tr>
<td colspan="1">会员总数</td>
<td colspan="2">9,000,000</td>
</tr>
<tr>
<td>新增会员</td>
<td>473,960</td>
<td>473,960</td>
</tr>
<tr>
<td>同比</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>环比</td>
<td>100%</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'membership-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.data-number-contain {
position: relative;
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 14px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
.data-number-table {
width: 100%;
text-align: center;
thead {
font-weight: 700;
tr {
height: 50px;
line-height: 50px;
background: #f3f4f8;
font-size: 12px;
text-align: left;
}
th {
text-align: center;
}
.w_22 {
width: 22%;
}
.w_26 {
width: 26%;
}
}
tbody {
tr {
height: 50px;
line-height: 50px;
font-size: 12px;
td:first-child {
font-size: 13px;
font-weight: 600;
}
}
tr:first-child {
font-weight: 600;
color: #7ca5f1;
}
tr:nth-child(odd) {
background: #fff;
}
}
}
}
</style>
src/components/app/cloudDaily/old-customer-data.vue 0 → 100644
<!--
<old-customer-data
:fieldName="fieldName">
</old-customer-data>
-->
<template>
<div class="birth-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<div class="data-list">
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">订单数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费人数占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
<div class="data-item">
<div class="data-progress">
<span class="data-item-title">消费金额占比</span>
<div class="data-bottom">
<div class="data-num">80.00%</div>
<div class="data-percent"><span class="data-percent-first">8000</span>/<span class="data-percent-second">10000</span></div>
<div class="data-top"></div>
</div>
</div>
<div class="data-title">
<p class="gic-pull-right">环比<span class="data-ratio">50.55%</span></p>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'old-customer-data',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.birth-number-contain {
background: #fff;
padding: 0 12px;
position: relative;
.build-title {
height: 56px;
line-height: 56px;
// padding-left: 10px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 14px;
border-left: 2px solid #2b3953;
padding-left: 14px;
font-size: 17px;
font-weight: 600;
}
}
.data-item {
margin-top: 10px;
.data-item-title {
width: 90px;
display: inline-block;
}
.data-bottom {
width: calc(100% - 90px);
height: 10px;
background: #f3f3f9;
display: inline-block;
position: relative;
margin-top: 20px;
border-radius: 2px;
}
.data-num {
position: absolute;
color: #508cee;
top: -21px;
left: 0;
font-size: 14px;
font-weight: 600;
}
.data-percent {
position: absolute;
top: -20px;
right: 0;
}
.data-top {
background: #508cee;
height: 10px;
position: absolute;
left: 0;
top: 0;
width: 80%;
border-radius: 2px;
}
.data-ratio {
font-size: 14px;
font-weight: 600;
margin-left: 5px;
}
.data-percent-first {
margin-right: 5px;
}
.data-percent-second {
margin-left: 5px;
}
.data-title {
height: 30px;
}
.gic-pull-right {
float: right;
}
}
}
</style>
src/components/app/cloudDaily/store-performance.vue 0 → 100644
<!--
<store-performance
:fieldName="fieldName">
</store-performance>
-->
<template>
<div class="data-number-contain">
<h3 class="build-title title-flag">
<span>{{ fieldName }}</span>
</h3>
<table class="data-number-table">
<thead>
<tr>
<th class="w_22"></th>
<th class="w_26">日</th>
<th class="w_26">月</th>
</tr>
</thead>
<tbody>
<tr>
<td>指标</td>
<td>473,960</td>
<td>473,960</td>
</tr>
<tr>
<td>累计销售额</td>
<td>473,960</td>
<td>999,476,960</td>
</tr>
<tr>
<td>达成率</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>同比</td>
<td>100%</td>
<td>100%</td>
</tr>
<tr>
<td>环比</td>
<td>100%</td>
<td>100%</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'store-performance',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.data-number-contain {
position: relative;
.build-title {
height: 56px;
line-height: 56px;
padding-left: 10px;
text-align: left;
background: #fff;
span {
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
display: inline-block;
height: 14px;
line-height: 14px;
}
}
.data-number-table {
width: 100%;
text-align: center;
thead {
font-weight: 700;
tr {
height: 50px;
line-height: 50px;
background: #f3f4f8;
font-size: 12px;
text-align: left;
}
th {
text-align: center;
}
.w_22 {
width: 22%;
}
.w_26 {
width: 26%;
}
}
tbody {
tr {
height: 50px;
line-height: 50px;
font-size: 12px;
td:first-child {
font-size: 13px;
font-weight: 600;
}
}
tr:first-child {
font-weight: 600;
color: #7ca5f1;
}
tr:nth-child(odd) {
background: #fff;
}
}
}
}
</style>
src/components/app/cloudDaily/time-progress.vue 0 → 100644
<!--
<time-progress
:fieldName="fieldName">
</time-progress>
-->
<template>
<div class="time-progress-contain">
<div>
<p class="build-title title-flag">
<span>{{ fieldName }}</span>
</p>
</div>
<div class="time-progress-item">
<div class="time-progress-title">
<p class="gic-pull-left">50.00%</p>
<p class="gic-pull-right"><span>15</span>/<span>30</span></p>
</div>
<div class="time-progress-bottom">
<div class="time-progress-top"></div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'time-progress',
props: {
fieldName: {
type: String,
default() {
return '';
}
}
},
data() {
return {};
}
};
</script>
<style type="text/less" lang="less" scoped>
.gic-pull-left {
float: left;
}
.gic-pull-right {
float: right;
}
.time-progress-contain {
background: #fff;
position: relative;
.time-progress-item {
padding: 0 15px 30px 15px;
.time-progress-title {
height: 30px;
}
.time-progress-bottom {
position: relative;
width: 100%;
height: 10px;
background: #f3f3f9;
border-radius: 2px;
}
.time-progress-top {
position: absolute;
left: 0;
top: 0;
width: 50%;
height: 10px;
background: #508cee;
border-radius: 2px;
}
}
}
.build-title {
padding-left: 10px;
height: 56px;
line-height: 56px;
text-align: left;
background: #fff;
span {
display: inline-block;
height: 14px;
line-height: 14px;
border-left: 2px solid #2b3953;
padding-left: 12px;
font-size: 17px;
font-weight: 600;
}
}
</style>
src/router.js
......@@ -16,6 +16,22 @@ const routes = [{
}
},
{
path: '/systemTemplate',
name: '系统模板',
component: () => import('./views/app/systemTemplate'),
meta: {
title: '系统模板'
}
},
{
path: '/defineTemplate',
name: '自定义模板',
component: () => import('./views/app/defineTemplate'),
meta: {
title: '自定义模板'
}
},
{
name: 'index',
path: '/index',
component: () =>
......
src/views/app/defineTemplate.vue 0 → 100644
<template>
<div class="template-wrap" :style="{ height: bodyHeight }">
<div class="template-contain">
<!-- 模板body -->
<div class="template-body">
<!-- 中间 -->
<div class="template-cell template-cell-m">
<div class="phone-view">
<div class="phone-show-content">
<!-- 拖拽展示区域 -->
<div class="drag-show-content">
<div class="view-container">
<ul class="view-content" id="showPhoneView">
<template v-if="tempaletDataList.length == 0">
<img class="templet-null-img" src="../../assets/no-data_icon.png" />
<p class="templet-null-text">暂无数据</p>
</template>
<div class="drag-wrap">
<li :class="['filed-item', 'li-block']" v-for="(item, index) in tempaletDataList" :key="'li1' + index" >
<div v-if="!!item.systemFlag || !item.name.includes('groupc')">
<!-- 输入 -->
<input-com v-if="item.type == 1 || item.type == 2 || item.type == 3 || item.type == 10 || item.type == 9" :childItem="item"></input-com>
<!-- 选择 -->
<select-com v-if="item.type == 4 || item.type == 5" :childItem="item"></select-com>
<!-- 日期区间 -->
<date-range-com v-if="item.type == 6" :childItem="item"></date-range-com>
<!-- 图片 -->
<image-com v-if="item.type == 7" :childItem="item"></image-com>
<!-- 业绩王/竞品品牌 组块的 -->
<block-com v-if="item.type == '11'" :childItem="item"></block-com>
</div>
<template>
<div class="block" v-if="item.name.includes('groupc')">
<div class="block-head">
<div :class="['opencard-item-title', item.title.length >= 6 ? 'title-pre-wrap' : '']">{{ item.title }}</div>
</div>
<ul class="view-content">
<div :class="['drag-wrap', 'block-wrap', item.fieldCode]" >
<li :class="['filed-item', 'child-filed-item', currentChildKey == childItem.name && currentChildIndex == ind ? 'active-item' : '']" v-for="(childItem, ind) in item.children" :key="'li' + ind" >
<!-- item -->
<!-- 选择 -->
<select-com v-if="childItem.type == 4 || childItem.type == 5" :childItem="childItem"></select-com>
<!-- 日期区间 -->
<date-range-com v-if="childItem.type == 6" :childItem="childItem"></date-range-com>
<!-- 图片 -->
<image-com v-if="childItem.type == 7" :childItem="childItem"></image-com>
<!-- 单行/多行/数字输入框 -->
<input-com v-if="childItem.type == 1 || childItem.type == 2 || childItem.type == 3 || childItem.type == 10 || childItem.type == 9" :childItem="childItem"></input-com>
<!-- 业绩王/竞品品牌 组块的 -->
<block-com v-if="childItem.type == '11' && !!childItem.systemFlag" :childItem="childItem"></block-com>
</li>
</div>
</ul>
</div>
</template>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import imageCom from './template/image.vue';
import selectCom from './template/select.vue';
import dateRangeCom from './template/date-range.vue';
import inputCom from './template/input.vue';
import blockCom from './template/block.vue';
export default {
name: 'customSetTemplate',
data() {
return {
bodyHeight: (document.documentElement.clientHeight || document.body.clientHeight) + 'px',
templateId: '', // 模板 id
oparateType: '', // 编辑： edit；复制: copy
counter: 1, // 计数器
// rightOption
selectKey: '',
// 交易信息
tradeInfo: [],
// 人员信息
personInfo: [],
// 商品信息
goodsInfo: [],
// 竞品信息
competeInfo: [],
// 自定义
defineInfo: [],
// 中间数据集合
currentIndex: 0, //当前选择的 item
// children
currentChildKey: null,
currentChildIndex: null,
childIndex: 0,
tempaletDataList: [],// 已经选择的字段集合
setList: [],
}
},
methods: {
/**
* 路由跳转
*/
changeRoute(route) {
this.$router.push(route);
},
/**
* 处理已存配置信息
*/
handleGetInfo(result) {
const that = this;
let data = JSON.parse(JSON.stringify(result));
that.cids = []; // 设置计数器
/* eslint-disable */
data.forEach(function(ele) {
ele.title = (ele.title).trim(); // 返回字段有空格
ele.isMust = !!ele.isMust ? true : false;
ele.memory = !!ele.memory ? true : false;
// 兼容老数据，增加字段
let nameFlag = ele.name.includes('textc') || ele.name.includes('paragraphc') || ele.name.includes('numberc') || ele.name.includes('checkboxesOrRadioc') || ele.name.includes('datec') || ele.name.includes('dateareac') || ele.name.includes('picc') || ele.name.includes('introductionc') || ele.name.includes('pricec') || ele.name.includes('groupc');
if (nameFlag) {
// 自定义
ele.systemFlag = false;
ele.parentCode = 'defineInfo';
}else {
that.setParent.push(ele.name);
ele.systemFlag = true;
if (ele.classify == 1) {
ele.parentCode = 'tradeInfo';
}
if (ele.classify == 2) {
ele.parentCode = 'personInfo';
}
if (ele.classify == 3) {
ele.parentCode = 'goodsInfo';
}
if (ele.classify == 4) {
ele.parentCode = 'competeInfo';
}
}
if (ele.hasOwnProperty('openCapitalize')) {
ele.openCapitalize = !!ele.openCapitalize ? true : false;
}
if (ele.hasOwnProperty('list') && !!ele.list && !!ele.list.length) {
ele.list.forEach(child => {
child.isMust = !!child.isMust ? true : false;
if (ele.name.includes('groupc')) { // 返回字段有空格
child.isMust = !!child.isMust ? true : false;
child.memory = !!child.memory ? true : false;
let childFlag = child.name.includes('textc') || child.name.includes('paragraphc') || child.name.includes('numberc') || child.name.includes('checkboxesOrRadioc') || child.name.includes('datec') || child.name.includes('dateareac') || child.name.includes('picc') || child.name.includes('introductionc') || child.name.includes('pricec') || child.name.includes('groupc');
if (childFlag) {
child.systemFlag = false;
}else {
that.setParent.push(child.name);
child.systemFlag = true;
if (child.classify == 1) {
child.parentCode = 'tradeInfo';
}
if (child.classify == 2) {
child.parentCode = 'personInfo';
}
if (child.classify == 3) {
child.parentCode = 'goodsInfo';
}
if (child.classify == 4) {
child.parentCode = 'competeInfo';
}
}
}
})
if (ele.name.includes('groupc')) {
ele.children = ele.list;
}
}
if (ele.hasOwnProperty('children')) {
ele.children.forEach(child => {
child.isMust = !!child.isMust ? true : false;
child.memory = !!child.memory ? true : false;
})
}
});
// console.log(JSON.stringify(data))
that.tempaletDataList = data;
}
},
components: {
imageCom,
selectCom,
dateRangeCom,
inputCom,
blockCom
},
mounted() {
// let that = this;
}
}
</script>
<style type="text/less" lang="less" scoped>
@import './template/template.less';
</style>
src/views/app/template/block.vue 0 → 100644
<template>
<div class="block block-field">
<div class="block-head">
<div :class="['opencard-item-title', childItem.title.length >= 6 ? 'title-pre-wrap' : '']">{{ childItem.title }}</div>
</div>
<ul class="view-content">
<li class="block-filed-item border-top-1" v-for="(childList, chinldIndex) in childItem.list" :key="'performance' + chinldIndex">
<div :class="['opencard-item-title', childList.title.length >= 6 ? 'title-pre-wrap' : '']">{{ childList.title }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag ">{{ childList.placeholder }} {{ !!childList.isMust ? '（必填）' : '' }}</span>
</div>
</li>
</ul>
<div class="compete-add" v-if="childItem.name == 'competitorInfo'">
+竞品信息
</div>
</div>
</template>
<script>
export default {
name: 'block-com',
props: {
childItem: {
type: [Object, Array],
default() {
return {};
}
}
}
};
</script>
<style type="text/less" lang="less" scoped>
@import './template.less';
</style>
src/views/app/template/date-range.vue 0 → 100644
<template>
<div>
<div>
<div :class="['opencard-item-title', childItem.startTitle.length >= 6 ? 'title-pre-wrap' : '']">{{ childItem.startTitle }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.placeholder }} {{ !!childItem.isMust ? '（必填）' : '' }}<i class="el-icon-arrow-right"></i></span>
</div>
</div>
<div class="b-t-1">
<div :class="['opencard-item-title', childItem.endTitle.length >= 6 ? 'title-pre-wrap' : '']">{{ childItem.endTitle }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.placeholder }} {{ !!childItem.isMust ? '（必填）' : '' }} <i class="el-icon-arrow-right"></i></span>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'date-range-com',
props: {
childItem: {
type: [Object, Array],
default() {
return {};
}
}
}
};
</script>
<style type="text/less" lang="less" scoped>
@import './template.less';
</style>
src/views/app/template/image.vue 0 → 100644
<template>
<div class="image-com">
<div :class="['opencard-item-title', childItem.title.length >= 6 ? 'title-pre-wrap' : '']">{{ childItem.title }}</div>
<div class="must">{{ !!childItem.isMust ? '（必填）' : '' }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag select-flag"><i class="iconfont icon-icon"></i></span>
</div>
</div>
</template>
<script>
export default {
name: 'image-com',
props: {
childItem: {
type: [Object, Array],
default() {
return {};
}
}
}
};
</script>
<style type="text/less" lang="less" scoped>
@import './template.less';
.image-com {
overflow: hidden;
.must {
width: 70px;
height: 46px;
line-height: 46px;
float: left;
color: #c0c4cc;
font-size: 14px;
}
.draged-item-show {
width: 155px;
float: left;
.show-warm-text.select-flag {
width: 155px;
}
}
}
</style>
src/views/app/template/input.vue 0 → 100644
<template>
<div :class="[childItem.type == 2 ? 'h-66' : '']">
<div :class="['opencard-item-title', childItem.title.length >= 6 ? 'title-pre-wrap' : '']" v-if="childItem.type != 9">{{ childItem.title }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag" :style="{ 'padding-left': childItem.type == 9 ? '15px' : '0' }">{{ childItem.placeholder }} {{ !!childItem.isMust ? '（必填）' : '' }}</span>
</div>
<div class="show-capitalize font-12 color-909399 p-l-10 border-box" v-if="childItem.type == 10 && !!childItem.openCapitalize">大写：壹万元整(示例)</div>
</div>
</template>
<script>
export default {
name: 'input-com',
props: {
childItem: {
type: [Object, Array],
default() {
return {};
}
}
}
};
</script>
<style type="text/less" lang="less" scoped>
@import './template.less';
.h-66 {
height: 66px;
}
</style>
src/views/app/template/select.vue 0 → 100644
<template>
<div>
<div :class="['opencard-item-title', childItem.title.length >= 6 ? 'title-pre-wrap' : '']">{{ childItem.title }}</div>
<div class="draged-item-show">
<span class="show-warm-text show-warm-text-flag select-flag">{{ childItem.placeholder }} {{ !!childItem.isMust ? '（必填）' : '' }} <i class="el-icon-arrow-right"></i></span>
</div>
</div>
</template>
<script>
export default {
name: 'select-com',
props: {
childItem: {
type: [Object, Array],
default() {
return {};
}
}
}
};
</script>
<style type="text/less" lang="less" scoped>
@import './template.less';
</style>
src/views/app/template/template.less 0 → 100644
.template-wrap {
width: 100%;
/*height: 100%;*/
min-height: 480px;
padding: 0;
margin: 0;
background-size: 100% 100%;
.b-t-1 {
border-top: 1px solid #e4e7ed;
}
.template-contain {
width: 100%;
height: 100%;
margin: 0 auto;
}
.template-body {
width: 100%;
height: 100%;
position: relative;
/* 中间 */
/* 模板 */
.template-cell-m {
width: 100%;
height: 100%;
min-height: 480px;
margin: 0;
position: relative;
.view-content {
position: relative;
background: #f0eff4;
}
.templet-null-img {
width: 60px;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.templet-null-text {
position: absolute;
top: 50%;
left: 50%;
margin-top: 60px;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
font-size: 14px;
color: #606266;
}
}
.drag-wrap {
min-height: 480px;
overflow-x: hidden;
overflow-y: auto;
}
.phone-container {
margin-top: 40px;
}
.phone-view {
width: 100%;
height: 100%;
/*margin: 0 20px;*/
position: relative;
background: #f0eff4;
}
.phone-show-content {
width: 100%;
height: 100%;
overflow-y: auto;
}
.opend-card-item {
height: 46px;
line-height: 46px;
background: #fff;
border-bottom: 1px solid #e7e7eb;
font-size: 14px;
position: relative;
&.sex::after {
content: '';
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
}
.opend-card-group-title {
height: 40px;
line-height: 40px;
padding-left: 10px;
}
.opend-card-item {
height: 46px;
line-height: 46px;
background: #fff;
border-bottom: 1px solid #e7e7eb;
}
.phone-list-item {
height: 44px;
line-height: 44px;
background: #fff;
margin-bottom: 5px;
}
.item-title {
width: 100px;
float: left;
padding-left: 10px;
}
.filed-item {
height: 46px;
width: 100%;
height: auto;
background: #fff;
position: relative;
cursor: move;
padding: 0px;
margin: 0;
font-size: 12px;
color: #292929;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
&.active-item {
border: 1px solid #1890ff;
}
&+.filed-item {
margin-top: 5px;
&.li-block {
margin-top: 15px;
}
}
}
.block-filed-item {
width: 100%;
height: auto;
position: relative;
padding: 0px;
margin: 0;
font-size: 12px;
color: #292929;
background: #fff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
.show-warm-text {
.select-flag {
text-align: left;
}
}
}
.compete-add {
width: 100%;
height: 46px;
line-height: 46px;
text-align: center;
background: #fff;
font-size: 12px;
color: #1890ff;
}
/* 组块 */
.block {
min-height: 308px;
background: #f0eff4;
&.block-field {
min-height: 127px;
}
.block-head {
width: 100%;
background: #f5f5f8;
padding: 0;
height: 35px;
.opencard-item-title {
height: 35px;
line-height: 35px;
/* &.block-pre-wrap{
line-height: 12px;
word-break: break-all;
white-space: pre-wrap;
padding-top: 7px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}*/
}
}
.drag-wrap {
min-height: 250px;
}
}
.opencard-drag {
background: #fff;
height: 46px;
}
.opencard-item-title {
width: 90px;
height: 46px;
line-height: 46px;
text-align: left;
float: left;
padding-left: 10px;
overflow: hidden;
white-space: nowrap;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 14px;
&.title-pre-wrap {
line-height: 15px;
word-break: break-all;
white-space: pre-wrap;
padding-top: 9px;
}
/*&.block-pre-wrap{
line-height: 12px;
word-break: break-all;
white-space: pre-wrap;
padding-top: 9px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}*/
}
.show-warm-text {
color: #c0c4cc;
width: 185px;
text-align: left;
display: inline-block;
white-space: nowrap;
height: 46px;
line-height: 46px;
font-size: 14px;
.el-icon-arrow-right {
font-size: 20px;
vertical-align: middle;
}
.iconfont.icon-icon {
font-size: 20px;
color: #808995;
}
&.select-flag {
width: 225px;
text-align: right;
}
}
.limit-w-340 {
/deep/ .el-input__inner {
font-size: 12px;
color: #fff;
background-color: rgba(255, 255, 255, 0.1);
}
.tip {
color: rgba(255, 255, 255, 0.7);
}
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment