Services/shop-platform
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore: src/app 目录与华为云第一台服务器上的代码做第一次比较合并

Browse Source
This commit is contained in:
ZF Sun
2025-11-22 15:00:41 +08:00
parent c1170aafa8
commit f03dbbfc60
53 changed files with 3726 additions and 1228 deletions
Download Patch File Download Diff File Expand all files Collapse all files

820
src/app/component/view/digit/css/design.css
View File

@@ -1,406 +1,416 @@
@CHARSET "UTF-8";
/*图文导航组件*/
.digit-navigation .preview-draggable .preview-box {
padding: 8px 0;
margin: 0 15px;
border-radius: 5px;
}
.digit-navigation .preview-draggable ul {
overflow: hidden;
list-style: none;
}
.digit-navigation .preview-draggable ul.horizontal-scroll {
overflow-x: scroll;
white-space: nowrap;
}
.digit-navigation .preview-draggable ul.horizontal-scroll::-webkit-scrollbar {
display: none;
}
.digit-navigation .preview-draggable li {
width: 50%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.digit-navigation .preview-draggable li img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.digit-navigation .preview-draggable li:last-child {
border: 0;
}
.digit-navigation .preview-draggable li span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
display: block;
line-height: 20px;
}
/*.digit-navigation .preview-draggable .digit-nav{visibility: hidden;}*/
.digit-navigation .preview-draggable .digit-nav>.wrap {
/* overflow-x: hidden;white-space: nowrap; background: #ffffff; */
display: flex;
/* justify-content: space-around; */
flex-wrap: wrap;
padding: 0 5px;
}
.digit-navigation .digit-nav-list .template-list .template-item {
float: left;
text-align: center;
border: 1px solid #e5e5e5;
margin-right: 20px;
padding: 5px;
background: #ffffff;
cursor: pointer;
}
.digit-navigation .digit-nav-list .template-list .template-item img {
display: block;
}
.digit-navigation .add-item {
padding: 10px;
border: 1px dashed #e5e5e5;
margin: 16px 0 10px;
cursor: pointer;
text-align: center;
}
.digit-navigation .add-item i {
display: inline-block;
height: 24px;
line-height: 24px;
font-size: 18px;
margin-right: 10px;
font-style: normal;
}
.digit-navigation .add-item span {
display: inline-block;
height: 24px;
line-height: 24px;
}
.digit-navigation .error-msg {
margin: 5px 0 0 53px;
color: #f44;
display: none;
}
/* 新的css */
.digit-navigation .digit-nav{
padding: 10px 5px;
}
/* 预览 */
/* 固定显示 */
.digit-navigation .digit-nav.fixed{
display: flex;
flex-wrap: wrap;
}
/* 单边滑动 */
.digit-navigation .digit-nav.singleSlide{
display: flex;
overflow-x: auto;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar {
height: 5px;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar-track {
background-color: #e4e4e4;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar-thumb {
background-color: #999;
}
.digit-navigation .digit-nav.singleSlide .digit-nav-item{
flex-shrink: 0;
}
/* 分页 */
.digit-navigation .digit-nav.pageSlide{
position: relative;
}
.digit-navigation .digit-nav.pageSlide .digit-nav-wrap{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .arrows{
display: flex;
justify-content: space-between;
padding: 0 15px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .arrows i{
display: none;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, .35);
border-radius: 50%;
cursor: pointer;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap{
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap.hide{
display: none;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap.straightLine i{
width: 12px;
height: 4px;
border-radius: 0;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap i{
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
margin-right: 5px;
cursor: pointer;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap i.active{
background-color: rgba(0, 0, 0, .5);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn:hover .arrows i{
display: block;
}
.digit-navigation .digit-nav .digit-nav-item{
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 0;
box-sizing: border-box;
}
.newright{
margin-right: 10px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-text{
padding-top: 6px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 40px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img .tag{
position: absolute;
top: -5px;
right: -12px;
color: #fff;
background-color: red;
border-radius: 12px;
border-bottom-left-radius: 0;
transform: scale(0.8);
padding: 2px 6px;
font-size: 12px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img img{
max-width: 100%;
max-height: 100%;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img i{
font-size: 25px;
color: #666;
}
/* 图文导航项 */
.digit-navigation p.hint {
padding-left: 15px;
font-size: 12px;
color: #909399;
line-height: 20px;
}
.digit-navigation .digit-nav-list>ul {
padding: 10px 0 10px 15px;
}
.digit-navigation .digit-nav-list>ul>li {
padding: 10px 10px 10px 0px;
background: #ffffff;
border: 1px dashed #e5e5e5;
position: relative;
margin-top: 16px;
}
.digit-navigation .digit-nav-list>ul>li>.iconfont {
position: absolute;
top: calc(50% - 10px);
left: 15px;
cursor: move;
font-size: 20px;
}
.digit-navigation .digit-nav-list>ul>li:first-child {
margin-top: 0;
}
.digit-navigation .digit-nav-list>ul>li:hover .del {
display: block;
}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block, .digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div{
width: 50px;
height: 50px;
line-height: 50px;
}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {
width: 35px;
height: 35px;
}
.digit-navigation .edit-attribute .icon-box {
width: 60px;
height: 60px;
font-size: 60px;
border: 1px dashed #ddd;
display: flex;
align-items: center;
justify-content: center;
padding: 0!important;
cursor: pointer;
position: relative;
}
.digit-navigation .edit-attribute .icon-box .select-icon {
width: inherit;
height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.digit-navigation .edit-attribute .icon-box .select-icon .add {
font-size: 26px;
color: var(--base-color);
}
.digit-navigation .edit-attribute .icon-box .operation {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
flex-direction: column;
display: none;
}
.digit-navigation .edit-attribute .icon-box:hover .operation {
display: flex;
}
.digit-navigation .edit-attribute .icon-box .operation-warp {
flex: 1;
height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.digit-navigation .edit-attribute .icon-box .iconfont {
margin: 0 3px;
font-size: 16px!important;
}
.digit-navigation .edit-attribute .icon-box .operation .js-replace{
line-height: 1;
color: #fff;
text-align: center;
padding: 5px 0;
background: rgba(0,0,0,.7);
font-size: 12px;
height: unset;
}
.digit-navigation .edit-attribute .digit-nav-list .icon-box .icon-wrap:hover .operation{
display: block;
}
.digit-navigation .edit-attribute .digit-nav-list .img-upload .upload-img-box:hover .operation{
display: block;
}
.digit-navigation .edit-attribute .navigation-set-list .img-upload {
display: flex;
align-items: center;
}
.digit-navigation .edit-attribute .navigation-set-list .img-upload img {
width: 100%;
height: 100%;
}
.digit-navigation .edit-attribute .navigation-set-list .action-box {
display: flex;
}
.digit-navigation .edit-attribute .navigation-set-list .action {
margin-right: 3px;
width: 42px;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid #EEEEEE;
cursor: pointer;
}
.digit-navigation .edit-attribute .navigation-set-list .action:hover {
border-color: var(--base-color);
color: var(--base-color);
}
.digit-navigation .img-icon-box{
display: flex;
align-items: center;
@CHARSET "UTF-8";
.digit-navigation .preview-draggable {padding: 0;}
.digit-navigation .audio-wrap audio{width: 100%;position: relative;}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .audio-add-box .img-block {width: 200px !important;height: 125px !important;margin-bottom: 30px;margin-right: 0;position: relative;}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .audio-add-box .img-block > div {line-height: 125px;height: 125px !important;width: 100%;text-align: center;}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .audio-add-box .img-block audio {width: 100% !important;height: 125px !important;}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .audio-add-box .img-block span{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);}
.digit-navigation .audio-zhezhao {position: absolute;background: #fff;width: 61%;height: 125px;top: 1px;right: 32px;text-align: center;line-height: 105px;display: none;}
.digit-navigation .audio-zhezhao span {position: absolute;top: 35px;left: 80px;color: #909399;}
/*图文导航组件*/
.digit-navigation .preview-draggable .preview-box {
padding: 8px 0;
margin: 0 15px;
border-radius: 5px;
}
.digit-navigation .preview-draggable ul {
overflow: hidden;
list-style: none;
}
.digit-navigation .preview-draggable ul.horizontal-scroll {
overflow-x: scroll;
white-space: nowrap;
}
.digit-navigation .preview-draggable ul.horizontal-scroll::-webkit-scrollbar {
display: none;
}
.digit-navigation .preview-draggable li {
width: 50%;
text-align: center;
display: inline-block;
vertical-align: top;
}
.digit-navigation .preview-draggable li img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
.digit-navigation .preview-draggable li:last-child {
border: 0;
}
.digit-navigation .preview-draggable li span {
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
height: 20px;
display: block;
line-height: 20px;
}
/*.digit-navigation .preview-draggable .digit-nav{visibility: hidden;}*/
.digit-navigation .preview-draggable .digit-nav>.wrap {
/* overflow-x: hidden;white-space: nowrap; background: #ffffff; */
display: flex;
/* justify-content: space-around; */
flex-wrap: wrap;
padding: 0 5px;
}
.digit-navigation .digit-nav-list .template-list .template-item {
float: left;
text-align: center;
border: 1px solid #e5e5e5;
margin-right: 20px;
padding: 5px;
background: #ffffff;
cursor: pointer;
}
.digit-navigation .digit-nav-list .template-list .template-item img {
display: block;
}
.digit-navigation .add-item {
padding: 10px;
border: 1px dashed #e5e5e5;
margin: 16px 0 10px;
cursor: pointer;
text-align: center;
}
.digit-navigation .add-item i {
display: inline-block;
height: 24px;
line-height: 24px;
font-size: 18px;
margin-right: 10px;
font-style: normal;
}
.digit-navigation .add-item span {
display: inline-block;
height: 24px;
line-height: 24px;
}
.digit-navigation .error-msg {
margin: 5px 0 0 53px;
color: #f44;
display: none;
}
/* 新的css */
.digit-navigation .digit-nav{
padding: 10px 5px;
}
/* 预览 */
/* 固定显示 */
.digit-navigation .digit-nav.fixed{
display: flex;
flex-wrap: wrap;
}
/* 单边滑动 */
.digit-navigation .digit-nav.singleSlide{
display: flex;
overflow-x: auto;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar {
height: 5px;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar-track {
background-color: #e4e4e4;
}
.digit-navigation .digit-nav.singleSlide::-webkit-scrollbar-thumb {
background-color: #999;
}
.digit-navigation .digit-nav.singleSlide .digit-nav-item{
flex-shrink: 0;
}
/* 分页 */
.digit-navigation .digit-nav.pageSlide{
position: relative;
}
.digit-navigation .digit-nav.pageSlide .digit-nav-wrap{
display: flex;
flex-wrap: wrap;
width: 100%;
height: 100%;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn{
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .arrows{
display: flex;
justify-content: space-between;
padding: 0 15px;
position: relative;
top: 50%;
transform: translateY(-50%);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .arrows i{
display: none;
width: 36px;
height: 36px;
line-height: 36px;
text-align: center;
color: #fff;
background-color: rgba(0, 0, 0, .35);
border-radius: 50%;
cursor: pointer;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap{
text-align: center;
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap.hide{
display: none;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap.straightLine i{
width: 12px;
height: 4px;
border-radius: 0;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap i{
display: inline-block;
width: 7px;
height: 7px;
border-radius: 50%;
background-color: rgba(0, 0, 0, .1);
margin-right: 5px;
cursor: pointer;
}
.digit-navigation .digit-nav.pageSlide .carousel-btn .dot-wrap i.active{
background-color: rgba(0, 0, 0, .5);
}
.digit-navigation .digit-nav.pageSlide .carousel-btn:hover .arrows i{
display: block;
}
.digit-navigation .digit-nav .digit-nav-item{
display: flex;
flex-direction: column;
align-items: center;
padding: 7px 0;
box-sizing: border-box;
}
.newright{
margin-right: 10px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-text{
padding-top: 6px;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
width: 100%;
text-align: center;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 50px;
height: 50px;
font-size: 40px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img .tag{
position: absolute;
top: -5px;
right: -12px;
color: #fff;
background-color: red;
border-radius: 12px;
border-bottom-left-radius: 0;
transform: scale(0.8);
padding: 2px 6px;
font-size: 12px;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img img{
max-width: 100%;
max-height: 100%;
}
.digit-navigation .digit-nav .digit-nav-item .digit-img i{
font-size: 25px;
color: #666;
}
/* 图文导航项 */
.digit-navigation p.hint {
padding-left: 15px;
font-size: 12px;
color: #909399;
line-height: 20px;
}
.digit-navigation .digit-nav-list>ul {
padding: 10px 0 10px 15px;
}
.digit-navigation .digit-nav-list>ul>li {
padding: 10px 10px 10px 0px;
background: #ffffff;
border: 1px dashed #e5e5e5;
position: relative;
margin-top: 16px;
}
.digit-navigation .digit-nav-list>ul>li>.iconfont {
position: absolute;
top: calc(50% - 10px);
left: 15px;
cursor: move;
font-size: 20px;
}
.digit-navigation .digit-nav-list>ul>li:first-child {
margin-top: 0;
}
.digit-navigation .digit-nav-list>ul>li:hover .del {
display: block;
}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block, .digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image > div{
width: 50px;
height: 50px;
line-height: 50px;
}
.digit-navigation .edit-attribute .attr-wrap .restore-wrap .img-block.has-choose-image img {
width: 35px;
height: 35px;
}
.digit-navigation .edit-attribute .icon-box {
width: 60px;
height: 60px;
font-size: 60px;
border: 1px dashed #ddd;
display: flex;
align-items: center;
justify-content: center;
padding: 0!important;
cursor: pointer;
position: relative;
}
.digit-navigation .edit-attribute .icon-box .select-icon {
width: inherit;
height: inherit;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
line-height: 1;
}
.digit-navigation .edit-attribute .icon-box .select-icon .add {
font-size: 26px;
color: var(--base-color);
}
.digit-navigation .edit-attribute .icon-box .operation {
position: absolute;
width: 100%;
height: 100%;
background: rgba(0,0,0,.6);
flex-direction: column;
display: none;
}
.digit-navigation .edit-attribute .icon-box:hover .operation {
display: flex;
}
.digit-navigation .edit-attribute .icon-box .operation-warp {
flex: 1;
height: 0;
display: flex;
align-items: center;
justify-content: center;
color: #fff;
}
.digit-navigation .edit-attribute .icon-box .iconfont {
margin: 0 3px;
font-size: 16px!important;
}
.digit-navigation .edit-attribute .icon-box .operation .js-replace{
line-height: 1;
color: #fff;
text-align: center;
padding: 5px 0;
background: rgba(0,0,0,.7);
font-size: 12px;
height: unset;
}
.digit-navigation .edit-attribute .digit-nav-list .icon-box .icon-wrap:hover .operation{
display: block;
}
.digit-navigation .edit-attribute .digit-nav-list .img-upload .upload-img-box:hover .operation{
display: block;
}
.digit-navigation .edit-attribute .navigation-set-list .img-upload {
display: flex;
align-items: center;
}
.digit-navigation .edit-attribute .navigation-set-list .img-upload img {
width: 100%;
height: 100%;
}
.digit-navigation .edit-attribute .navigation-set-list .action-box {
display: flex;
}
.digit-navigation .edit-attribute .navigation-set-list .action {
margin-right: 3px;
width: 42px;
height: 28px;
line-height: 28px;
text-align: center;
border: 1px solid #EEEEEE;
cursor: pointer;
}
.digit-navigation .edit-attribute .navigation-set-list .action:hover {
border-color: var(--base-color);
color: var(--base-color);
}
.digit-navigation .img-icon-box{
display: flex;
align-items: center;
}

313
src/app/component/view/digit/design.html
View File

@@ -1,157 +1,158 @@
<nc-component :data="data[index]" class="digit-navigation">
<!-- 预览 -->
<template slot="preview">
<template v-if="nc.lazyLoad">
<div :class="['digit-nav',nc.showStyle] " :style="{
backgroundColor: nc.componentBgColor,
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''
}">
<div class="digit-nav-item" v-for="(item) in nc.list" :key="item.id" :style="{width: (100 / nc.rowCount + '%')}">
<!-- <div class="digit-img" v-show="nc.mode != 'text'" :style="{'font-size' : nc.imageSize + 'px', width: nc.imageSize + 'px', height: nc.imageSize + 'px'}">
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
<img v-if="!item.icon && !item.imageUrl" :src="changeImgUrl('public/static/img/default_img/square.png')" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
<span class="tag" v-if="item.label.control" :style="{color: item.label.textColor,backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')'}">{{item.label.text}}</span>
</div> -->
<!-- margin-right: 10px; -->
<div class="digit-text" :style="{fontSize: nc.font.size+'px',fontWeight: nc.font.weight, color: nc.font.color,backgroundColor:nc.mode=='text'?nc.font.bgcolor:'',paddingBottom:nc.mode=='text'?'7px':''}" style="border-radius: 4px;">
<span :style="{fontSize: nc.font.titlesize+'px',color: nc.font.titlecolor}">{{item.title}}</span>
<span :style="{fontSize: nc.font.unitsize+'px',color: nc.font.unitcolor}">{{item.unit}}</span>
</div>
<div :style="{fontSize: nc.font.descsize+'px',color: nc.font.desccolor}">{{item.desc}}</div>
<!-- <div class="fui-cell-group fui-cell-click" style="margin-top: 0px; background-color: #ffffff;font-size:26px">
<div class="fui-cell">
<div class="fui-cell-icon" style="color: #999999;">
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: '30px', maxHeight: '30px', borderRadius: nc.aroundRadius + 'px'}">
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
</div>
<div class="fui-cell-text" style="color: #000000;padding-left: 6px;">{{item.title}}</div>
<div class="fui-cell-remark" style="color: #888888;">查看</div>
</div>
</div> -->
</div>
</div>
</template>
</template>
<!-- 内容编辑 -->
<template slot="edit-content">
<template v-if="nc.lazyLoad">
<digit-nav-list></digit-nav-list>
<div class="template-edit-title">
<h3>数字项设置</h3>
<div class="layui-form-item icon-radio">
<label class="layui-form-label sm">显示样式</label>
<div class="layui-input-block">
<span v-for="item in nc.tempData.rowCountList" :class="[{'layui-hide': item.value != nc.rowCount}]">{{item.name}}</span>
<ul class="icon-wrap">
<li v-for="item in nc.tempData.rowCountList" :class="[item.value == nc.rowCount ? 'text-color border-color' : '']" @click="nc.tempData.methods.setnum(item.value)">
<i :class="['iconfont',item.src]"></i>
</li>
</ul>
</div>
</div>
<div class="digit-nav-list">
<!-- <p class="hint">建议上传尺寸相同的图片(60px * 60px)</p> -->
<ul class="navigation-set-list">
<li v-for="(item,previewIndex) in nc.list" :key="item.id" class="content-block">
<!-- <template>
<div class="layui-form-item">
<label class="layui-form-label sm">图片</label>
<div class="layui-input-block">
<image-upload :data="{ data : item }" :condition="['listmenu','img'].includes(nc.mode)" data-disabled="1"></image-upload>
</div>
</div>
</template> -->
<div class="layui-form-item">
<label class="layui-form-label sm">数字</label>
<div class="layui-input-block">
<input type="number" name='title' placeholder="请输入数字" v-model="item.title" maxlength="20" class="layui-input" autocomplete="off" />
<input type="text" name='unit' placeholder="请输入单位" v-model="item.unit" maxlength="20" class="layui-input" autocomplete="off" />
<input type="text" name='desc' placeholder="请输入描述" v-model="item.desc" maxlength="20" class="layui-input" autocomplete="off" />
</div>
</div>
<!-- <nc-link :data="{ field : item.link, label:'链接' }"></nc-link> -->
<!-- <i class="del" @click="nc.list.splice(previewIndex,1)" data-disabled="1">x</i>
<div class="error-msg"></div>
<div class="iconfont icontuodong"></div> -->
</li>
<!-- <div class="add-item text-color" @click="nc.tempData.methods.addNav()">
<i>+</i>
<span>添加一个数字组</span>
</div> -->
</ul>
</div>
</div>
</template>
</template>
<!-- 样式编辑 -->
<template slot="edit-style">
<template v-if="nc.lazyLoad">
<div class="template-edit-title">
<!--
<h3>图文导航</h3>
<color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
<div class="template-edit-title" v-show="['listmenu','img'].includes(nc.mode) && nc.type == 'img'">
<h3>图片设置</h3>
<template v-if="nc.type == 'img'">
<slide :data="{ field : 'aroundRadius', label : '图片圆角', max : 50 }"></slide>
<slide :data="{ field : 'imageSize', label : '图片大小', min: 30, max : 60 }"></slide>
</template>
</div> -->
<div class="template-edit-title">
<h3>数字文字设置</h3>
<slide :data="{ field : 'titlesize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'titlecolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
<div class="template-edit-title">
<h3>单位文字设置</h3>
<slide :data="{ field : 'unitsize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'unitcolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
<div class="template-edit-title">
<h3>描述文字设置</h3>
<slide :data="{ field : 'descsize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'desccolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
</template>
</template>
<!-- 资源 -->
<template slot="resource">
<js>
var listmenuNavResourcePath = "{$resource_path}"; // http路径
var listmenuNavRelativePath = "{$relative_path}"; // 相对路径
</js>
<css src="{$resource_path}/css/design.css?v={$version}"></css>
<js src="{$resource_path}/js/design.js?v={$version}"></js>
</template>
<nc-component :data="data[index]" class="digit-navigation">
<!-- 预览 -->
<template slot="preview">
<template v-if="nc.lazyLoad">
<div :class="['digit-nav',nc.showStyle] " :style="{
backgroundImage: 'url('+nc.imageUrl+')',
backgroundSize:'100% 100%',
borderTopLeftRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderTopRightRadius: (nc.componentAngle == 'round' ? nc.topAroundRadius + 'px' : 0),
borderBottomLeftRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
borderBottomRightRadius: (nc.componentAngle == 'round' ? nc.bottomAroundRadius + 'px' : 0),
boxShadow: nc.ornament.type == 'shadow' ? ('0 0 5px ' + nc.ornament.color) : '',
border: nc.ornament.type == 'stroke' ? '1px solid ' + nc.ornament.color : ''
}">
<div class="digit-nav-item" v-for="(item) in nc.list" :key="item.id" :style="{width: (100 / nc.rowCount + '%')}">
<!-- <div class="digit-img" v-show="nc.mode != 'text'" :style="{'font-size' : nc.imageSize + 'px', width: nc.imageSize + 'px', height: nc.imageSize + 'px'}">
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
<img v-if="!item.icon && !item.imageUrl" :src="changeImgUrl('public/static/img/default_img/square.png')" alt="" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px', borderRadius: nc.aroundRadius + 'px'}">
<span class="tag" v-if="item.label.control" :style="{color: item.label.textColor,backgroundImage: 'linear-gradient(' + item.label.bgColorStart + ',' + item.label.bgColorEnd + ')'}">{{item.label.text}}</span>
</div> -->
<!-- margin-right: 10px; -->
<div class="digit-text" :style="{fontSize: nc.font.size+'px',fontWeight: nc.font.weight, color: nc.font.color,backgroundColor:nc.mode=='text'?nc.font.bgcolor:'',paddingBottom:nc.mode=='text'?'7px':''}" style="border-radius: 4px;">
<span :style="{fontSize: nc.font.titlesize+'px',color: nc.font.titlecolor}">{{item.title}}</span>
<span :style="{fontSize: nc.font.unitsize+'px',color: nc.font.unitcolor}">{{item.unit}}</span>
</div>
<div :style="{fontSize: nc.font.descsize+'px',color: nc.font.desccolor}">{{item.desc}}</div>
<!-- <div class="fui-cell-group fui-cell-click" style="margin-top: 0px; background-color: #ffffff;font-size:26px">
<div class="fui-cell">
<div class="fui-cell-icon" style="color: #999999;">
<img v-if="item.iconType == 'img' && item.imageUrl" :src="changeImgUrl(item.imageUrl)" alt="" :style="{maxWidth: '30px', maxHeight: '30px', borderRadius: nc.aroundRadius + 'px'}">
<iconfont v-if="item.iconType == 'icon' && item.icon" :icon="item.icon" :value="(item.style ? item.style : null)" :style="{maxWidth: nc.imageSize + 'px', maxHeight: nc.imageSize + 'px'}"></iconfont>
</div>
<div class="fui-cell-text" style="color: #000000;padding-left: 6px;">{{item.title}}</div>
<div class="fui-cell-remark" style="color: #888888;">查看</div>
</div>
</div> -->
</div>
</div>
</template>
</template>
<!-- 内容编辑 -->
<template slot="edit-content">
<template v-if="nc.lazyLoad">
<!-- <digit-nav-list></digit-nav-list> -->
<div class="template-edit-title">
<h3>数字项设置</h3>
<div class="layui-form-item icon-radio">
<label class="layui-form-label sm">显示样式</label>
<div class="layui-input-block">
<span v-for="item in nc.tempData.rowCountList" :class="[{'layui-hide': item.value != nc.rowCount}]">{{item.name}}</span>
<ul class="icon-wrap">
<li v-for="item in nc.tempData.rowCountList" :class="[item.value == nc.rowCount ? 'text-color border-color' : '']" @click="nc.tempData.methods.setnum(item.value)">
<i :class="['iconfont',item.src]"></i>
</li>
</ul>
</div>
</div>
<div class="digit-nav-list">
<!-- <p class="hint">建议上传尺寸相同的图片(60px * 60px)</p> -->
<ul class="navigation-set-list">
<li v-for="(item,previewIndex) in nc.list" :key="item.id" class="content-block">
<!-- <template>
<div class="layui-form-item">
<label class="layui-form-label sm">图片</label>
<div class="layui-input-block">
<image-upload :data="{ data : item }" :condition="['listmenu','img'].includes(nc.mode)" data-disabled="1"></image-upload>
</div>
</div>
</template> -->
<div class="layui-form-item">
<label class="layui-form-label sm">数字</label>
<div class="layui-input-block">
<input type="number" name='title' placeholder="请输入数字" v-model="item.title" maxlength="20" class="layui-input" autocomplete="off" />
<input type="text" name='unit' placeholder="请输入单位" v-model="item.unit" maxlength="20" class="layui-input" autocomplete="off" />
<input type="text" name='desc' placeholder="请输入描述" v-model="item.desc" maxlength="20" class="layui-input" autocomplete="off" />
</div>
</div>
<!-- <nc-link :data="{ field : item.link, label:'链接' }"></nc-link> -->
<!-- <i class="del" @click="nc.list.splice(previewIndex,1)" data-disabled="1">x</i>
<div class="error-msg"></div>
<div class="iconfont icontuodong"></div> -->
</li>
<!-- <div class="add-item text-color" @click="nc.tempData.methods.addNav()">
<i>+</i>
<span>添加一个数字组</span>
</div> -->
</ul>
</div>
</div>
</template>
</template>
<!-- 样式编辑 -->
<template slot="edit-style">
<template v-if="nc.lazyLoad">
<div class="template-edit-title">
<h3>背景设置</h3>
<digit-images></digit-images>
<!-- <color v-if="nc.ornament.type != 'default'" :data="{ field : 'color', 'label' : '边框颜色', parent : 'ornament', defaultColor : '#EDEDED' }"></color>
<div class="template-edit-title" v-show="['listmenu','img'].includes(nc.mode) && nc.type == 'img'">
<h3>图片设置</h3>
<template v-if="nc.type == 'img'">
<slide :data="{ field : 'aroundRadius', label : '图片圆角', max : 50 }"></slide>
<slide :data="{ field : 'imageSize', label : '图片大小', min: 30, max : 60 }"></slide>
</template>
</div> -->
<div class="template-edit-title">
<h3>数字文字设置</h3>
<slide :data="{ field : 'titlesize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'titlecolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
<div class="template-edit-title">
<h3>单位文字设置</h3>
<slide :data="{ field : 'unitsize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'unitcolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
<div class="template-edit-title">
<h3>描述文字设置</h3>
<slide :data="{ field : 'descsize',parent:'font', label : '文字大小', min: 12, max : 40 }"></slide>
<color :data="{ field : 'desccolor', label : '文字颜色',parent:'font',defaultColor: '#303133' }"></color>
</div>
</template>
</template>
<!-- 资源 -->
<template slot="resource">
<js>
var listmenuNavResourcePath = "{$resource_path}"; // http路径
var listmenuNavRelativePath = "{$relative_path}"; // 相对路径
</js>
<css src="{$resource_path}/css/design.css?v={$version}"></css>
<js src="{$resource_path}/js/design.js?v={$version}"></js>
</template>
</nc-component>

1006
src/app/component/view/digit/js/design.js
View File

File diff suppressed because it is too large Load Diff