初始上传
This commit is contained in:
698
app/component/view/text/css/design.css
Executable file
698
app/component/view/text/css/design.css
Executable file
@@ -0,0 +1,698 @@
|
||||
@CHARSET "UTF-8";
|
||||
/*标题组件*/
|
||||
.component-title h2 {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.component-title p {
|
||||
font-size: 12px;
|
||||
color: #8c8c8c;
|
||||
padding: 5px 0 0;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.component-title .style-list-box-text {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.style-list-con-text {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.style-list-con-text .style-li-text {
|
||||
overflow: hidden;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 280px;
|
||||
height: 100px;
|
||||
margin-right: 12px;
|
||||
margin-top: 15px;
|
||||
cursor: pointer;
|
||||
border: 1px solid #ededed;
|
||||
background: #f7f8fa;
|
||||
}
|
||||
|
||||
.style-list-con-text .style-li-text img {
|
||||
max-width: 280px;
|
||||
max-height: 220px;
|
||||
}
|
||||
|
||||
.style-list-con-text .style-li-text:nth-child(1), .style-list-con-text .style-li-text:nth-child(2), .style-list-con-text .style-li-text:nth-child(3) {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.style-list-con-text .style-li-text:nth-child(3n) {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
.layui-layer-page .layui-layer-content {
|
||||
overflow: auto !important;
|
||||
}
|
||||
|
||||
.component-title .text-title-img {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
/* 文本标题 */
|
||||
.component-title .text-title {
|
||||
text-align: center;
|
||||
position: relative;
|
||||
padding: 5px 0;
|
||||
}
|
||||
|
||||
.component-title .text-title .text-title-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-1 .text-title-box {
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.component-title .text-title .line-left, .component-title .text-title .line-right {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
width: 30px;
|
||||
height: 1px;
|
||||
top: 50%;
|
||||
}
|
||||
|
||||
.component-title .text-style-1 .line-left {
|
||||
left: 0;
|
||||
margin-left: -30px;
|
||||
background-color: #dde0e7;
|
||||
}
|
||||
|
||||
.component-title .text-style-1 .line-right {
|
||||
right: 0;
|
||||
margin-right: -30px;
|
||||
background-color: #dde0e7;
|
||||
}
|
||||
|
||||
/* 图二 */
|
||||
.text-title-style-2 {
|
||||
width: 100%;
|
||||
height: 6px;
|
||||
margin-top: 3px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-title .inner-line {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
.component-title .text-style-2 .line-triangle {
|
||||
background: transparent !important;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
border: 6px solid #000;
|
||||
border-top-color: transparent !important;
|
||||
border-left-color: transparent !important;
|
||||
left: 50%;
|
||||
bottom: 0;
|
||||
margin-left: -6px;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
/* 图三 */
|
||||
.text-title-style-3 {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
margin-top: 5px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .line-short {
|
||||
width: 162px;
|
||||
height: 3px;
|
||||
background: #000;
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -81px;
|
||||
}
|
||||
|
||||
/* 图四 */
|
||||
.component-title .text-style-4 .text-title-line {
|
||||
height: 5px;
|
||||
position: relative;
|
||||
text-align: center;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.component-title .text-style-4 .line-left {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
left: 0;
|
||||
width: calc((100% - 22px) / 2);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
.component-title .text-style-4 .line-center {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border: 1px solid #000;
|
||||
display: inline-block;
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
margin-left: -3px;
|
||||
}
|
||||
|
||||
.component-title .text-style-4 .line-right {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
top: 4px;
|
||||
right: 0;
|
||||
width: calc((100% - 22px) / 2);
|
||||
height: 1px;
|
||||
}
|
||||
|
||||
/* 图五 */
|
||||
.component-title .text-style-5 .text-title-con {
|
||||
display: inline-block;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.text-title-border {
|
||||
position: absolute;
|
||||
top: -5px;
|
||||
bottom: -5px;
|
||||
left: -5px;
|
||||
right: -5px;
|
||||
border: 1px solid;
|
||||
}
|
||||
|
||||
.component-title .text-style-5 .text-title-block {
|
||||
display: inline-block;
|
||||
padding: 5px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-5 .line-left {
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
left: 0;
|
||||
margin-left: -30px;
|
||||
}
|
||||
|
||||
.component-title .text-style-5 .line-right {
|
||||
height: 5px;
|
||||
position: absolute;
|
||||
width: 40px;
|
||||
top: 50%;
|
||||
margin-top: -2px;
|
||||
right: 0;
|
||||
margin-right: -30px;
|
||||
}
|
||||
|
||||
/* 图六 */
|
||||
.component-title .text-title .text-title-outer {
|
||||
display: inline-block;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-title .text-title-outer .text-title-con {
|
||||
display: inline-block;
|
||||
padding: 3px 25px;
|
||||
border: 1px solid;
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.component-title .text-title .text-title-outer .text-title-con-2 {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 5px;
|
||||
right: -5px;
|
||||
bottom: -5px;
|
||||
left: 5px;
|
||||
border: 1px solid;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 图八 */
|
||||
.component-title .text-style-8 .text-title-con {
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.component-title .text-style-8 .line-left {
|
||||
position: absolute;
|
||||
display: inline-block;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
left: 0;
|
||||
width: 2px;
|
||||
}
|
||||
|
||||
/* 图九 */
|
||||
.component-title .text-style-9 .text-title-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box span {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 66px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .more {
|
||||
font-size: 12px;
|
||||
width: 66px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .center {
|
||||
width: calc(100% - 132px);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .center div {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .center img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box .center span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-title-box i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-title .text-style-9 .text-subTitle-box p {
|
||||
/*letter-spacing: 7px;*/
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 图十 */
|
||||
.component-title .text-style-10 .text-title-box {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box span {
|
||||
padding: 0 8px;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .left {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
width: 66px;
|
||||
height: 20px;
|
||||
top: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .more {
|
||||
font-size: 12px;
|
||||
width: 66px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .center {
|
||||
width: calc(100% - 132px);
|
||||
margin: 0 auto;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .center div {
|
||||
width: 20px;
|
||||
text-align: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .center img {
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .center span {
|
||||
max-width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box .center > img {
|
||||
width: 99px;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 50%;
|
||||
margin-left: -50px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-title-box i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-title .text-style-10 .text-subTitle-box p {
|
||||
letter-spacing: 7px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
/* 图十一 */
|
||||
.component-title .text-style-11 {
|
||||
text-align: unset;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-title-box {
|
||||
position: relative;
|
||||
margin: 5px 0;
|
||||
padding-left: 17px;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-title-box .left {
|
||||
width: calc(100% - 66px);
|
||||
text-align: left;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-title-box .more {
|
||||
font-size: 12px;
|
||||
width: 68px;
|
||||
text-align: right;
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
transform: translateY(-50%);
|
||||
right: 10px;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-title-box i {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-title-box .text-title-con {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-subTitle-box {
|
||||
position: relative;
|
||||
z-index: 5;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .text-subTitle-box p {
|
||||
letter-spacing: 7px;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .left-img {
|
||||
width: 30.5px;
|
||||
position: absolute;
|
||||
bottom: -13px;
|
||||
left: 8px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.component-title .text-style-11 .right-img {
|
||||
width: 17.5px;
|
||||
position: absolute;
|
||||
top: -7px;
|
||||
left: 86px;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
/* 图十二 */
|
||||
.component-title .text-style-12 .text-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.component-title .text-style-12 .text-title-box .more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.component-title .text-style-12 .text-title-box .title {
|
||||
text-align: left;
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.component-title .text-style-12 .text-title-box .sub-title {
|
||||
margin-left: 8px;
|
||||
text-align: left;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.component-title .text-style-12 .text-title-box .more > span {
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
font-size: 12px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
.component-title .text-style-12 .text-title-box .more > i{
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
/* 图十三 */
|
||||
.component-title .text-style-13 .text-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.component-title .text-style-13 .text-title-box .right-img {
|
||||
transform: rotateY(180deg);
|
||||
}
|
||||
|
||||
.component-title .text-style-13 .text-title-box img {
|
||||
max-height: 25px;
|
||||
max-width: 38px;
|
||||
}
|
||||
|
||||
.component-title .text-style-13 .text-title-box .text-title {
|
||||
max-width: 210px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
margin: 0 8px;
|
||||
}
|
||||
|
||||
/* 图十四 */
|
||||
.component-title .text-title.text-style-14 {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
text-align: initial;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .text {
|
||||
font-size: 0;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .zone {
|
||||
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .iconfont {
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(1) {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(2) {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .iconfont:nth-of-type(3) {
|
||||
opacity: 0.4;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .title-wrap .sub-title {
|
||||
opacity: 0.6;
|
||||
margin-top: 5px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .more {
|
||||
font-size: 0;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-14 .more span {
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
/* 图十五 */
|
||||
.component-title .text-title.text-style-15 {
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .title-wrap {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .line {
|
||||
border-left: 4px solid;
|
||||
transform: rotate(40deg);
|
||||
border-radius: 20px;
|
||||
height: 14px;
|
||||
display: block;
|
||||
margin-right: 6px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .line:nth-of-type(1) {
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .line:nth-of-type(2) {
|
||||
height: 20px;
|
||||
margin-right: 5px;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .my {
|
||||
transform: rotate(40deg);
|
||||
line-height: 0;
|
||||
position: relative;
|
||||
top: 2px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .my .yuan {
|
||||
font-size: 50px;
|
||||
border-radius: 50%;
|
||||
width: 4px;
|
||||
height: 4px;
|
||||
display: block;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .ornament .my .vertical {
|
||||
border-left: 4px solid;
|
||||
height: 10px;
|
||||
margin-top: 2px;
|
||||
display: inline-block;
|
||||
border-radius: 20px;
|
||||
}
|
||||
|
||||
.component-title .text-title.text-style-15 .sub-title {
|
||||
opacity: 0.6;
|
||||
margin-top: 2px;
|
||||
}
|
||||
|
||||
/* 图十六 */
|
||||
.component-title .text-style-16 .text-title-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px;
|
||||
}
|
||||
|
||||
.component-title .text-style-16 .text-title-box .more {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.component-title .text-style-16 .text-title-box .title {
|
||||
text-align: left;
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.component-title .text-style-16 .text-title-box .sub-title {
|
||||
margin-left: 10px;
|
||||
text-align: left;
|
||||
max-width: 150px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
border-radius: 17px;
|
||||
background-image: radial-gradient(transparent 60%, #fff);
|
||||
height: 25px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 0 10px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.component-title .text-style-16 .text-title-box .sub-title > i {
|
||||
padding: 6px;
|
||||
background-image: radial-gradient(transparent 30%, #fff);
|
||||
border-radius: 50%;
|
||||
margin-left: -10px;
|
||||
margin-right: 3px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.component-title .text-style-16 .text-title-box .more > span {
|
||||
max-width: 100px;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
326
app/component/view/text/design.html
Executable file
326
app/component/view/text/design.html
Executable file
@@ -0,0 +1,326 @@
|
||||
<nc-component :data="data[index]" class="component-title">
|
||||
<!-- 预览 -->
|
||||
<template slot="preview">
|
||||
<div class="preview-box" :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) }">
|
||||
|
||||
<!-- 图零 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-if="nc.style == 'style-0'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, padding: '0 7px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图一 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-if="nc.style == 'style-1'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, padding: '0 7px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="line-left" :style="{ background: nc.textColor }"></span>
|
||||
<span class="line-right" :style="{ background: nc.textColor }"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图二 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-2'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
</div>
|
||||
<div :class="'text-title-'+ nc.style">
|
||||
<span class="inner-line" :style="{ background: nc.textColor }"></span>
|
||||
<span class="line-triangle" :style="{ borderColor: nc.textColor, opacity: nc.textColor ? 1 : 0 }"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图三 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-3'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
</div>
|
||||
<div :class="'text-title-'+ nc.style">
|
||||
<span class="inner-line" :style="{ background: nc.textColor }"></span>
|
||||
<span class="line-short" :style="{ background: nc.textColor, opacity: nc.textColor ? 1 : 0 }"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图四 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-4'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
</div>
|
||||
<div class="text-title-line">
|
||||
<span class="line-left" :style="{ background: nc.textColor }"></span>
|
||||
<span class="line-center" :style="{ borderColor: nc.textColor, opacity: nc.textColor ? 1 : 0 }"></span>
|
||||
<span class="line-right" :style="{ background: nc.textColor }"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图五 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-5'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-block" :style="{ borderColor: nc.textColor, opacity: nc.textColor ? 1 : 0 }">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', borderColor: nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="line-left" :style="{ background: nc.textColor }"></span>
|
||||
<span class="line-right" :style="{ background: nc.textColor }"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图六 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-6'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-outer" :style="{ borderColor: nc.textColor }">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', borderColor: nc.textColor, background: '#fff', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="text-title-con-2" :style="{ borderColor: nc.textColor, opacity: nc.textColor ? 1 : 0 }"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图七 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-7'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="text-title-outer" :style="{ borderColor: nc.textColor }">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : '#fff', paddingBottom: 3+'px', borderColor: nc.textColor, background: nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="text-title-con-2" :style="{ borderColor: nc.textColor, opacity: nc.textColor ? 1 : 0 }"></span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图八 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-8'" >
|
||||
<div class="text-title-box" v-show="nc.text" :style="{ textAlign: 'left'}">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="line-left" :style="{ height: nc.fontSize + 'px', background: nc.textColor}"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图九 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-9'" >
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<div class="left"></div>
|
||||
<div class="center">
|
||||
<div><img src="{$resource_path}/img/style9-1.png" /></div>
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<div><img src="{$resource_path}/img/style9-2.png" /></div>
|
||||
</div>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }">{{nc.more.text}} <i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
<div class="text-subTitle-box" v-show="nc.subTitle.text">
|
||||
<p v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 1 : 0 }">{{ nc.subTitle.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-10'" >
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<div class="left"></div>
|
||||
<div class="center">
|
||||
<div><img src="{$resource_path}/img/style10-1.png" /></div>
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<div><img src="{$resource_path}/img/style10-2.png" /></div>
|
||||
<img src="{$resource_path}/img/style10-3.png" />
|
||||
</div>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }">{{nc.more.text}} <i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
<div class="text-subTitle-box" v-show="nc.subTitle.text">
|
||||
<p v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 1 : 0 }">{{ nc.subTitle.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十一 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-11'" >
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<div class="left">
|
||||
<span class="text-title-con" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, paddingBottom: 3+'px', fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<div class="text-subTitle-box" v-show="nc.subTitle.text">
|
||||
<p v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 1 : 0 }">{{ nc.subTitle.text }}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }"><span>{{nc.more.text}}</span> <i class="iconfont iconyoujiantou"></i></div>
|
||||
<img class="left-img" src="{$resource_path}/img/style11-1.png" />
|
||||
<img class="right-img" src="{$resource_path}/img/style11-2.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十二 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-if="nc.style == 'style-12'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="title" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="sub-title" v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 1 : 0 }">{{nc.subTitle.text}}</span>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }"><span>{{nc.more.text}}</span> <i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十三 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-13'" >
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<img class="left-img" src="{$resource_path}/img/style13-1.png" />
|
||||
<span class="text-title" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, opacity: nc.textColor ? 1 : 0,fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<img class="right-img" src="{$resource_path}/img/style13-1.png" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十四 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-14'">
|
||||
<div class="title-wrap">
|
||||
<div class="text">
|
||||
<span :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<span class="zone" :style="{ fontSize : nc.fontSize + 'px', fontWeight: nc.fontWeight }">专区</span>
|
||||
</div>
|
||||
<i class="iconfont icondanxuan-xuanzhong" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
<i class="iconfont icondanxuan-xuanzhong" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
<i class="iconfont icondanxuan-xuanzhong" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
<div class="sub-title" v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 0.6 : 0 }">{{nc.subTitle.text}}</div>
|
||||
</div>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }"><span>{{nc.more.text}}</span> <i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
|
||||
<!-- 图十五 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-else-if="nc.style == 'style-15'">
|
||||
<div class="title-wrap">
|
||||
<div class="ornament" style="margin-right: 20px;">
|
||||
<span class="line" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></span>
|
||||
<span class="line" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></span>
|
||||
<span class="my">
|
||||
<i class="yuan" :style="{ backgroundColor : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
<i class="vertical" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
</span>
|
||||
</div>
|
||||
<span :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<div class="ornament" style="margin-left: 20px;">
|
||||
<span class="line" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></span>
|
||||
<span class="line" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></span>
|
||||
<span class="my">
|
||||
<i class="yuan" :style="{ backgroundColor : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
<i class="vertical" :style="{ color : nc.textColor,fontWeight: nc.fontWeight }"></i>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="sub-title" v-show="nc.subTitle.text" :style="{ fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 0.6 : 0 }">{{nc.subTitle.text}}</div>
|
||||
</div>
|
||||
|
||||
<!-- 图十六 -->
|
||||
<div class="text-title" :class="'text-'+ nc.style" v-if="nc.style == 'style-16'">
|
||||
<div class="text-title-box" v-show="nc.text">
|
||||
<span class="title" :style="{ fontSize : nc.fontSize + 'px', color : nc.textColor, fontWeight: nc.fontWeight }">{{ nc.text }}</span>
|
||||
<div class="sub-title" v-show="nc.subTitle.text" :style="{ backgroundColor: nc.subTitle.bgColor, fontSize : nc.subTitle.fontSize + 'px', color: nc.subTitle.color, opacity: nc.subTitle.color ? 1 : 0 }">
|
||||
<i :class="[nc.subTitle.icon]" :style="{ backgroundColor: nc.subTitle.bgColor}"></i>
|
||||
<span :style="{ fontWeight: nc.subTitle.fontWeight}">{{nc.subTitle.text}}</span>
|
||||
</div>
|
||||
<div v-show="nc.more.isShow == 1" class="more" :style="{ color: nc.more.color, opacity: nc.more.color ? 1 : 0 }"><span>{{nc.more.text}}</span> <i class="iconfont iconyoujiantou"></i></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<!-- 内容编辑 -->
|
||||
<template slot="edit-content">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>风格设置</h3>
|
||||
<text-style></text-style>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title">
|
||||
<h3>标题内容</h3>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">标题名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.text" maxlength="15" placeholder="请输入标题" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<nc-link :data="{ field : nc.link }"></nc-link>
|
||||
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-if="nc.subTitle.isElementShow">
|
||||
<h3>副标题内容</h3>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">副标题名称</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" maxlength="30" v-model="nc.subTitle.text" placeholder="请输入副标题名称" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- “更多”按钮设置 -->
|
||||
<div class="template-edit-title" v-if="nc.more.isElementShow">
|
||||
<h3>“更多”按钮内容</h3>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">按钮文字</label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" v-model="nc.more.text" maxlength="8" placeholder="查看更多" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
<nc-link :data="{ field : nc.more.link }"></nc-link>
|
||||
</div>
|
||||
|
||||
<!-- 弹框 -->
|
||||
<article class="style-list-box-text">
|
||||
<div class="style-list-text layui-form">
|
||||
<div class="style-list-con-text">
|
||||
<div class="style-li-text" v-for="(value,name,index) in nc.tempData.styleList" :key="name" :class="{'selected border-color': nc.style == name}" :data_key="name">
|
||||
<span class="layui-hide">风格{{index + 1}}</span>
|
||||
<img :src="'{$resource_path}/img/style' + index + '.png'" />
|
||||
</div>
|
||||
</div>
|
||||
<input type="hidden" name="style">
|
||||
<input type="hidden" name="style_name" />
|
||||
</div>
|
||||
</article>
|
||||
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 样式编辑 -->
|
||||
<template slot="edit-style">
|
||||
<template v-if="nc.lazyLoad">
|
||||
<div class="template-edit-title">
|
||||
<h3>标题样式</h3>
|
||||
<slide :data="{ field : 'fontSize', label : '文字大小', min: 12, max : 20 }"></slide>
|
||||
<text-font-weight></text-font-weight>
|
||||
<color :data="{ field : 'textColor', label : '文字颜色',defaultColor : '#303133'}"></color>
|
||||
</div>
|
||||
|
||||
<div class="template-edit-title" v-if="nc.subTitle.isElementShow">
|
||||
<h3>副标题样式</h3>
|
||||
<slide :data="{ field : 'fontSize',parent:'subTitle', label : '文字大小', min: 12, max : 16 }"></slide>
|
||||
<color :data="{ field : 'color', label : '文字颜色', parent : 'subTitle',defaultColor : '#999999'}"></color>
|
||||
<div v-show="nc.style == 'style-16'">
|
||||
<color :data="{ field : 'bgColor', label : '背景颜色', parent : 'subTitle',defaultColor: ''}"></color>
|
||||
<text-font-weight :weight-data="{ parent : 'subTitle' }"></text-font-weight>
|
||||
<nc-icon :data="{ field : 'icon' , label:'选择图标', parent : 'subTitle'}"></nc-icon>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- “更多”按钮设置 -->
|
||||
<div class="template-edit-title" v-show="nc.more.isElementShow">
|
||||
<h3>“更多”按钮样式</h3>
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label sm">是否显示</label>
|
||||
<div class="layui-input-block">
|
||||
<div class="layui-unselect layui-form-checkbox" lay-skin="primary" @click="nc.more.isShow = nc.more.isShow ? 0 : 1" :class="{ 'layui-form-checked' : nc.more.isShow == 1 }">
|
||||
<span>{{ nc.more.isShow == 1 ? '显示' : '隐藏' }}</span>
|
||||
<i class="layui-icon layui-icon-ok"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<color :data="{ field : 'color', 'label' : '文字颜色',parent : 'more',defaultColor : '#999999'}"></color>
|
||||
</div>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
<!-- 资源 -->
|
||||
<template slot="resource">
|
||||
<js>
|
||||
var textResourcePath = "{$resource_path}"; // http路径
|
||||
var textRelativePath = "{$relative_path}"; // 相对路径
|
||||
</js>
|
||||
<css src="{$resource_path}/css/design.css"></css>
|
||||
<js src="{$resource_path}/js/design.js"></js>
|
||||
</template>
|
||||
|
||||
</nc-component>
|
||||
BIN
app/component/view/text/img/style0.png
Executable file
BIN
app/component/view/text/img/style0.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
app/component/view/text/img/style1.png
Executable file
BIN
app/component/view/text/img/style1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.5 KiB |
BIN
app/component/view/text/img/style10-1.png
Executable file
BIN
app/component/view/text/img/style10-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
app/component/view/text/img/style10-2.png
Executable file
BIN
app/component/view/text/img/style10-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
app/component/view/text/img/style10-3.png
Executable file
BIN
app/component/view/text/img/style10-3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
BIN
app/component/view/text/img/style10.png
Executable file
BIN
app/component/view/text/img/style10.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 9.6 KiB |
BIN
app/component/view/text/img/style11-1.png
Executable file
BIN
app/component/view/text/img/style11-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.9 KiB |
BIN
app/component/view/text/img/style11-2.png
Executable file
BIN
app/component/view/text/img/style11-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.1 KiB |
BIN
app/component/view/text/img/style11.png
Executable file
BIN
app/component/view/text/img/style11.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.5 KiB |
BIN
app/component/view/text/img/style12.png
Executable file
BIN
app/component/view/text/img/style12.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
app/component/view/text/img/style13-1.png
Executable file
BIN
app/component/view/text/img/style13-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 5.6 KiB |
BIN
app/component/view/text/img/style13.png
Executable file
BIN
app/component/view/text/img/style13.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 8.1 KiB |
BIN
app/component/view/text/img/style14.png
Executable file
BIN
app/component/view/text/img/style14.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.0 KiB |
BIN
app/component/view/text/img/style15.png
Executable file
BIN
app/component/view/text/img/style15.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
app/component/view/text/img/style16.png
Executable file
BIN
app/component/view/text/img/style16.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 6.1 KiB |
BIN
app/component/view/text/img/style2.png
Executable file
BIN
app/component/view/text/img/style2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.2 KiB |
BIN
app/component/view/text/img/style3.png
Executable file
BIN
app/component/view/text/img/style3.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
app/component/view/text/img/style4.png
Executable file
BIN
app/component/view/text/img/style4.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
BIN
app/component/view/text/img/style5.png
Executable file
BIN
app/component/view/text/img/style5.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
app/component/view/text/img/style6.png
Executable file
BIN
app/component/view/text/img/style6.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
app/component/view/text/img/style7.png
Executable file
BIN
app/component/view/text/img/style7.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 4.1 KiB |
BIN
app/component/view/text/img/style8.png
Executable file
BIN
app/component/view/text/img/style8.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.3 KiB |
BIN
app/component/view/text/img/style9-1.png
Executable file
BIN
app/component/view/text/img/style9-1.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
app/component/view/text/img/style9-2.png
Executable file
BIN
app/component/view/text/img/style9-2.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
app/component/view/text/img/style9.png
Executable file
BIN
app/component/view/text/img/style9.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 7.5 KiB |
321
app/component/view/text/js/design.js
Executable file
321
app/component/view/text/js/design.js
Executable file
@@ -0,0 +1,321 @@
|
||||
var styleHtml = '<div class="layui-form-item">';
|
||||
styleHtml += '<label class="layui-form-label sm">风格选择</label>';
|
||||
styleHtml += '<div class="layui-input-block">';
|
||||
styleHtml += '<div v-if="data.styleName" class="text-color selected-style" @click="selectStyle()">{{data.styleName}} <i class="layui-icon layui-icon-right"></i></div>';
|
||||
styleHtml += '</div>';
|
||||
styleHtml += '</div>';
|
||||
|
||||
Vue.component("text-style", {
|
||||
template: styleHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
styleList: {
|
||||
"style-0": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-1": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-2": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-3": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-4": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-5": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-6": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-7": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-8": {
|
||||
"text": "标题栏",
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-9": {
|
||||
"text": "为您推荐",
|
||||
"textColor": "#3b2ce7",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "夏日清爽出行必备",
|
||||
"isElementShow": true,
|
||||
"color": "#b7bcd2"
|
||||
},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-10": {
|
||||
"text": "为您推荐",
|
||||
"textColor": "#FF95AC",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "夏日清爽出行必备",
|
||||
"isElementShow": true,
|
||||
"color": "#B7BCD2"
|
||||
},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-11": {
|
||||
"text": "为您推荐",
|
||||
"textColor": "#FF3B3B",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "夏日清爽出行必备",
|
||||
"isElementShow": true,
|
||||
"color": "#FFB2B2"
|
||||
},
|
||||
"more": {
|
||||
"text": "查看更多",
|
||||
"link": {"name": ""},
|
||||
"isShow": true,
|
||||
"isElementShow": true,
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"style-12": {
|
||||
"text": "标题栏",
|
||||
"textColor": "#303133",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "副标题",
|
||||
"isElementShow": true,
|
||||
"color": "#999999"
|
||||
},
|
||||
"more": {
|
||||
"text": "更多",
|
||||
"link": {"name": ""},
|
||||
"isShow": true,
|
||||
"isElementShow": true,
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"style-13": {
|
||||
"text": "夏日纳凉精选",
|
||||
"textColor": "#FFC425",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {"isElementShow": false},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-14": {
|
||||
"text": "标题",
|
||||
"textColor": "#9849FF",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "TITLE ZONE",
|
||||
"isElementShow": true,
|
||||
"color": "#9849FF"
|
||||
},
|
||||
"more": {
|
||||
"text": "更多",
|
||||
"link": {"name": ""},
|
||||
"isShow": true,
|
||||
"isElementShow": true,
|
||||
"color": "#999999"
|
||||
}
|
||||
},
|
||||
"style-15": {
|
||||
"text": "标题专区",
|
||||
"textColor": "#9849FF",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "TITLE ZONE",
|
||||
"isElementShow": true,
|
||||
"color": "#9849FF"
|
||||
},
|
||||
"more": {"isElementShow": false}
|
||||
},
|
||||
"style-16": {
|
||||
"text": "标题专区",
|
||||
"textColor": "#303133",
|
||||
"fontSize": 16,
|
||||
"fontWeight": 'bold',
|
||||
"subTitle": {
|
||||
"fontSize": 14,
|
||||
"text": "副标题",
|
||||
"isElementShow": true,
|
||||
"color": "#FFFFFF",
|
||||
"bgColor": "#FC0F85",
|
||||
"icon": "icondiy icon-system-bargain-one",
|
||||
"fontWeight": 'bold',
|
||||
|
||||
},
|
||||
"more": {
|
||||
"text": "更多",
|
||||
"link": {"name": ""},
|
||||
"isShow": true,
|
||||
"isElementShow": true,
|
||||
"color": "#999999"
|
||||
}
|
||||
}
|
||||
},
|
||||
list: {},
|
||||
}
|
||||
},
|
||||
created: function () {
|
||||
if (!this.$parent.data.verify) this.$parent.data.verify = [];
|
||||
this.$parent.data.verify.push(this.verify);//加载验证方法
|
||||
|
||||
this.$parent.data.ignore = ['elementAngle', 'elementBgColor']; //加载忽略内容 -- 其他设置中的属性设置
|
||||
this.$parent.data.ignoreLoad = true; // 等待忽略数组赋值后加载
|
||||
|
||||
// this.$parent.data.hidden = ['textColor'];// 隐藏公共属性编辑
|
||||
|
||||
// 组件所需的临时数据
|
||||
this.$parent.data.tempData = {
|
||||
styleList: this.styleList
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
verify: function (index) {
|
||||
var res = {code: true, message: ""};
|
||||
return res;
|
||||
},
|
||||
selectStyle: function () {
|
||||
var self = this;
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '风格选择',
|
||||
area: ['930px', '630px'],
|
||||
btn: ['确定', '返回'],
|
||||
content: $(".draggable-element[data-index='" + self.data.index + "'] .edit-attribute .style-list-box-text").html(),
|
||||
success: function (layero, index) {
|
||||
$(".layui-layer-content input[name='style']").val(self.data.style);
|
||||
$(".layui-layer-content input[name='style_name']").val(self.data.styleName);
|
||||
$("body").off("click", ".layui-layer-content .style-list-con-text .style-li-text").on("click", ".layui-layer-content .style-list-con-text .style-li-text", function () {
|
||||
$(this).addClass("selected border-color").siblings().removeClass("selected border-color bg-color-after");
|
||||
$(".layui-layer-content input[name='style']").val($(this).attr("data_key"));
|
||||
$(".layui-layer-content input[name='style_name']").val($(this).find("span").text());
|
||||
});
|
||||
},
|
||||
yes: function (index, layero) {
|
||||
self.data.style = $(".layui-layer-content input[name='style']").val();
|
||||
self.data.styleName = $(".layui-layer-content input[name='style_name']").val();
|
||||
|
||||
var data = self.styleList[self.data.style];
|
||||
self.data.text = data.text;
|
||||
|
||||
if (data.fontSize) self.data.fontSize = data.fontSize;
|
||||
else self.data.fontSize = 16;
|
||||
|
||||
if (data.fontWeight) self.data.fontWeight = data.fontWeight;
|
||||
else self.data.fontWeight = 'normal';
|
||||
|
||||
if (data.subTitle.text) self.data.subTitle.text = data.subTitle.text;
|
||||
else self.data.subTitle.text = '副标题';
|
||||
|
||||
if (data.subTitle.color) self.data.subTitle.color = data.subTitle.color;
|
||||
else self.data.subTitle.color = '#999999';
|
||||
|
||||
if (data.subTitle.fontSize) self.data.subTitle.fontSize = data.subTitle.fontSize;
|
||||
else self.data.subTitle.fontSize = 14;
|
||||
|
||||
if (data.subTitle.isElementShow) self.data.subTitle.isElementShow = data.subTitle.isElementShow;
|
||||
else self.data.subTitle.isElementShow = false;
|
||||
|
||||
if (data.subTitle.bgColor) self.data.subTitle.bgColor = data.subTitle.bgColor;
|
||||
else self.data.subTitle.bgColor = '';
|
||||
|
||||
if (data.subTitle.icon) self.data.subTitle.icon = data.subTitle.icon;
|
||||
else self.data.subTitle.icon = '';
|
||||
|
||||
if (data.subTitle.fontWeight) self.data.subTitle.fontWeight = data.subTitle.fontWeight;
|
||||
else self.data.subTitle.fontWeight = 'normal';
|
||||
|
||||
if (data.more.text) self.data.more.text = data.more.text;
|
||||
else self.data.more.text = '查看更多';
|
||||
|
||||
if (data.more.isElementShow) self.data.more.isElementShow = data.more.isElementShow;
|
||||
else self.data.more.isElementShow = false;
|
||||
|
||||
if (data.more.isShow) self.data.more.isShow = data.more.isShow;
|
||||
else self.data.more.isShow = false;
|
||||
|
||||
if (data.more.color) self.data.more.color = data.more.color;
|
||||
else self.data.more.color = '#999999';
|
||||
|
||||
layer.closeAll()
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 主标题文字粗细
|
||||
var fontWeightHtml = '<div class="layui-form-item icon-radio">';
|
||||
fontWeightHtml += '<label class="layui-form-label sm">文字粗细</label>';
|
||||
fontWeightHtml += '<div class="layui-input-block">';
|
||||
fontWeightHtml += '<template v-for="(item, index) in thicknessList">';
|
||||
fontWeightHtml += '<span :class="[item.value == data.fontWeight ? \'\' : \'layui-hide\']">{{item.name}}</span>';
|
||||
fontWeightHtml += '</template>';
|
||||
fontWeightHtml += '<ul class="icon-wrap">';
|
||||
fontWeightHtml += '<li v-for="(item, index) in thicknessList" :class="[item.value == data.fontWeight ? \'text-color border-color\' : \'\']" @click="change(item)">';
|
||||
fontWeightHtml += '<i class="iconfont" :class="[{\'text-color\': item.value == data.fontWeight}, item.src]"></i>';
|
||||
fontWeightHtml += '</li>';
|
||||
fontWeightHtml += '</ul>';
|
||||
fontWeightHtml += '</div>';
|
||||
fontWeightHtml += '</div>';
|
||||
|
||||
Vue.component("text-font-weight", {
|
||||
props: {
|
||||
weightData: {
|
||||
type: Object,
|
||||
default: function () {
|
||||
return {};
|
||||
}
|
||||
}
|
||||
},
|
||||
template: fontWeightHtml,
|
||||
data: function () {
|
||||
return {
|
||||
data: this.$parent.data,
|
||||
thicknessList: [
|
||||
{name: "加粗", src: "iconbold", value: "bold"},
|
||||
{name: "常规", src: "iconbold-copy", value: "normal"}
|
||||
]
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
if (this.weightData.parent !== undefined) this.data = this.$parent.data[this.weightData.parent];
|
||||
},
|
||||
methods: {
|
||||
change: function (item) {
|
||||
this.data.fontWeight = item.value;
|
||||
}
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user