to:sync
This commit is contained in:
shaoyongjun
parent
a73c96f6fa
commit
07dcd13877
@ -15,6 +15,186 @@ body, html {
|
|||||||
|
|
||||||
/*选中可编辑框是 外层隐藏黑线*/
|
/*选中可编辑框是 外层隐藏黑线*/
|
||||||
outline: none;
|
outline: none;
|
||||||
|
|
||||||
|
margin: 0;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize24,
|
||||||
|
h1 {
|
||||||
|
font-size: 24px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize20,
|
||||||
|
h2 {
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize18,
|
||||||
|
h3 {
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize16,
|
||||||
|
h4 {
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize14,
|
||||||
|
h5 {
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize12,
|
||||||
|
h6 {
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
|
||||||
|
.fllil li {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.fllir li {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.radius {
|
||||||
|
border-radius: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenterLeft {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenterTop {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenter {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.distable {
|
||||||
|
display: table
|
||||||
|
}
|
||||||
|
|
||||||
|
.distablecell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.textels {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis
|
||||||
|
}
|
||||||
|
|
||||||
|
.marginCenter {
|
||||||
|
margin: 0 auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_l {
|
||||||
|
text-align: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_c {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_r {
|
||||||
|
text-align: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.unLine {
|
||||||
|
text-decoration: underline
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiexd {
|
||||||
|
position: fixed
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-hidden {
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.lblock {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle
|
||||||
}
|
}
|
||||||
|
|
||||||
html {
|
html {
|
||||||
@ -39,6 +219,7 @@ body {
|
|||||||
/*line-height: 1.5715;*/
|
/*line-height: 1.5715;*/
|
||||||
background-color: #fff;
|
background-color: #fff;
|
||||||
font-feature-settings: "tnum", "tnum";
|
font-feature-settings: "tnum", "tnum";
|
||||||
|
font-weight: normal;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
@ -76,7 +257,7 @@ header {
|
|||||||
left: 0;
|
left: 0;
|
||||||
/*right: 0;*/
|
/*right: 0;*/
|
||||||
width: 100%;
|
width: 100%;
|
||||||
min-height: 58rem;
|
/*min-height: 58rem;*/
|
||||||
|
|
||||||
/*background-color: #ffebc3;*/
|
/*background-color: #ffebc3;*/
|
||||||
/*background-color: deepskyblue;*/
|
/*background-color: deepskyblue;*/
|
||||||
@ -88,20 +269,6 @@ header {
|
|||||||
/*flex-wrap: nowrap;*/
|
/*flex-wrap: nowrap;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#head_top {*/
|
|
||||||
/* width: 100%;*/
|
|
||||||
/* height: 32rem;*/
|
|
||||||
|
|
||||||
/* border: 1px #f5f5f5 solid;*/
|
|
||||||
/* !*box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);*!*/
|
|
||||||
/* background-color: rgb(255, 255, 255);*/
|
|
||||||
/* !*background-color: blue;*!*/
|
|
||||||
|
|
||||||
/* font-size: 16rem;*/
|
|
||||||
/* display: flex;*/
|
|
||||||
/* justify-content: space-around;*/
|
|
||||||
/* align-items: center;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
.fixStylePosition {
|
.fixStylePosition {
|
||||||
display: block;
|
display: block;
|
||||||
@ -123,33 +290,20 @@ header {
|
|||||||
/*height: 130rem;*/
|
/*height: 130rem;*/
|
||||||
padding: 5rem 5rem;
|
padding: 5rem 5rem;
|
||||||
|
|
||||||
|
font-size: 16rem;
|
||||||
|
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
/*align-content: center;*/
|
/*align-content: center;*/
|
||||||
|
/*flex-direction: column;*/
|
||||||
|
/*align-items: center;*/
|
||||||
|
/*justify-content: center;*/
|
||||||
|
/*align-content: center;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
.fixStyleInnerSpan {
|
.fixStyleInnerSpan {
|
||||||
margin: 0 3rem;
|
margin: 0 1rem;
|
||||||
}
|
|
||||||
|
|
||||||
#_position_more {
|
|
||||||
position: fixed;
|
|
||||||
z-index: 99;
|
|
||||||
}
|
|
||||||
|
|
||||||
#_show_more {
|
|
||||||
margin: 1rem 0;
|
|
||||||
font-size: 12rem;
|
|
||||||
position: relative;
|
|
||||||
top: 1em;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
/*border: 1px red solid;*/
|
|
||||||
min-width: 5em;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
main {
|
main {
|
||||||
@ -158,7 +312,7 @@ main {
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
margin-top: 20rem;
|
margin-top: 30rem;
|
||||||
/*min-height: 80%;*/
|
/*min-height: 80%;*/
|
||||||
|
|
||||||
/*border: 1px greenyellow solid;*/
|
/*border: 1px greenyellow solid;*/
|
||||||
@ -204,26 +358,6 @@ main {
|
|||||||
/*flex: 1 1 100%;*/
|
/*flex: 1 1 100%;*/
|
||||||
}
|
}
|
||||||
|
|
||||||
/*#yxl_note p span[data-flag="span_pre"] {*/
|
|
||||||
/* !*border: 1px red solid;*!*/
|
|
||||||
/* !*min-width: 2em;*!*/
|
|
||||||
/* width: fit-content;*/
|
|
||||||
/* height: fit-content;*/
|
|
||||||
/* margin: 0 0;*/
|
|
||||||
/* text-indent: 0;*/
|
|
||||||
/* padding: 0 0;*/
|
|
||||||
|
|
||||||
/* display: inline;*/
|
|
||||||
|
|
||||||
/* justify-content: flex-end;*/
|
|
||||||
/* -moz-user-select: none;*/
|
|
||||||
/* user-select: none;*/
|
|
||||||
/* -webkit-user-select: none;*/
|
|
||||||
|
|
||||||
/* box-sizing: border-box;*/
|
|
||||||
/* white-space: nowrap;*/
|
|
||||||
/*}*/
|
|
||||||
|
|
||||||
#yxl_note p span[data-flag="span_content"] {
|
#yxl_note p span[data-flag="span_content"] {
|
||||||
/*border: 1px deepskyblue solid;*/
|
/*border: 1px deepskyblue solid;*/
|
||||||
margin: 0 0;
|
margin: 0 0;
|
||||||
@ -280,7 +414,7 @@ main {
|
|||||||
background-color: #e9e9eb;
|
background-color: #e9e9eb;
|
||||||
width: 1px;
|
width: 1px;
|
||||||
height: 18rem;
|
height: 18rem;
|
||||||
margin: 0 6rem;
|
margin: 0 3rem;
|
||||||
}
|
}
|
||||||
|
|
||||||
footer {
|
footer {
|
||||||
|
|||||||
134
static/css/my_drop.css
Normal file
134
static/css/my_drop.css
Normal file
@ -0,0 +1,134 @@
|
|||||||
|
/*隐藏滑动黑条*/
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my_style_nav {
|
||||||
|
font-size: 14rem;
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
padding: 0 0;
|
||||||
|
min-width: 10rem;
|
||||||
|
|
||||||
|
/*border: 1px blue solid;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.my_style_nav ul {
|
||||||
|
position: fixed;
|
||||||
|
z-index: 99;
|
||||||
|
/*left: 0;*/
|
||||||
|
top: 26rem;
|
||||||
|
|
||||||
|
/*height: 0;*/
|
||||||
|
/*width: 60rem;*/
|
||||||
|
transform: translate(1em, 0rem);
|
||||||
|
|
||||||
|
|
||||||
|
display: none;
|
||||||
|
flex-direction: column;
|
||||||
|
align-items: flex-end;
|
||||||
|
/*justify-content: center;*/
|
||||||
|
/*align-content: center;*/
|
||||||
|
|
||||||
|
/*opacity: 0;*/
|
||||||
|
/*min-height: 70rem;*/
|
||||||
|
max-height: 120rem;
|
||||||
|
/*overflow: hidden;*/
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
padding: 5rem 0;
|
||||||
|
border-radius: 5rem;
|
||||||
|
box-shadow: 0 40rem 80rem rgba(31, 35, 41, 0.1);
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
border: 1px #f5f5f5 solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.my_style_nav ul li {
|
||||||
|
float: none;
|
||||||
|
/*过渡代码*/
|
||||||
|
transition: all .3s;
|
||||||
|
background-color: rgb(255, 255, 255);
|
||||||
|
/*opacity: 0;*/
|
||||||
|
|
||||||
|
font-size: 16px;
|
||||||
|
line-height: 1.2;
|
||||||
|
padding: 2rem 5rem;
|
||||||
|
min-width: 55rem;
|
||||||
|
/*border-radius: 5rem;*/
|
||||||
|
/*min-width: 45rem;*/
|
||||||
|
|
||||||
|
/*border: 1px blue solid;*/
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
/*flex-direction: column;*/
|
||||||
|
/*align-items: center;*/
|
||||||
|
justify-content: flex-end;
|
||||||
|
/*align-content: center;*/
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.my_style_nav ul li span {
|
||||||
|
min-width: 20rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.my_style_nav ul li.done::before{*/
|
||||||
|
/* */
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
.my_style_nav ul li[data-my-select="true"]::before {
|
||||||
|
content: attr(data-my-select-v);
|
||||||
|
width: 1.2em;
|
||||||
|
transform: rotate(-3deg);
|
||||||
|
|
||||||
|
|
||||||
|
/*content: "";*/
|
||||||
|
/*border-color: black;*/
|
||||||
|
/*border-style: solid;*/
|
||||||
|
/*border-width: 0 0.1em 0.1em 0;*/
|
||||||
|
/*height: 1em;*/
|
||||||
|
/*width: 0.5em;*/
|
||||||
|
/*transform: rotate(50deg);*/
|
||||||
|
/*top: 1em;*/
|
||||||
|
margin-right: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*!*奇数项初始往右边偏移100%*!*/
|
||||||
|
/*.my_style_nav ul li:nth-of-type(1n) {*/
|
||||||
|
/* transform: translate3d(100%, 0, 0);*/
|
||||||
|
/*}*/
|
||||||
|
/*!*偶数项初始往左边偏移100%*!*/
|
||||||
|
/*.my_style_nav ul li:nth-of-type(2n) {*/
|
||||||
|
/* transform: translate3d(-100%, 0, 0);*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.my_style_nav:focus ul {*/
|
||||||
|
/* overflow: visible;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
|
||||||
|
.my_style_nav span {
|
||||||
|
min-width: 14rem;
|
||||||
|
min-height: 20rem;
|
||||||
|
padding: 0 1rem;
|
||||||
|
/*border: 1px red solid;*/
|
||||||
|
}
|
||||||
|
|
||||||
|
/*透明度和互动同时进行*/
|
||||||
|
.my_style_nav span:hover {
|
||||||
|
/*background: whitesmoke;*/
|
||||||
|
border-radius: 5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*兄弟 ul*/
|
||||||
|
.my_style_nav span:hover + ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my_style_nav ul:hover {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
201
static/css/reset.css
Normal file
201
static/css/reset.css
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 100%;
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
||||||
|
ol,
|
||||||
|
ul {
|
||||||
|
list-style: none
|
||||||
|
}
|
||||||
|
|
||||||
|
address,
|
||||||
|
caption,
|
||||||
|
cite,
|
||||||
|
code,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
strong,
|
||||||
|
th,
|
||||||
|
var {
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400
|
||||||
|
}
|
||||||
|
|
||||||
|
fieldset,
|
||||||
|
img {
|
||||||
|
border: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
textarea {
|
||||||
|
resize: none
|
||||||
|
}
|
||||||
|
|
||||||
|
a {
|
||||||
|
color: #000;
|
||||||
|
text-decoration: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize24,
|
||||||
|
h1 {
|
||||||
|
font-size: 24px
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize20,
|
||||||
|
h2 {
|
||||||
|
font-size: 20px
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize18,
|
||||||
|
h3 {
|
||||||
|
font-size: 18px
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize16,
|
||||||
|
h4 {
|
||||||
|
font-size: 16px
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize14,
|
||||||
|
h5 {
|
||||||
|
font-size: 14px
|
||||||
|
}
|
||||||
|
|
||||||
|
.fontsize12,
|
||||||
|
h6 {
|
||||||
|
font-size: 12px
|
||||||
|
}
|
||||||
|
|
||||||
|
.bold {
|
||||||
|
font-weight: 700
|
||||||
|
}
|
||||||
|
|
||||||
|
.fllil li {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.fllir li {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.fl {
|
||||||
|
float: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.fr {
|
||||||
|
float: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.radius {
|
||||||
|
border-radius: 100%
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenterLeft {
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenterTop {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.positionCenter {
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
margin: auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.distable {
|
||||||
|
display: table
|
||||||
|
}
|
||||||
|
|
||||||
|
.distablecell {
|
||||||
|
display: table-cell;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
|
|
||||||
|
.textels {
|
||||||
|
overflow: hidden;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis
|
||||||
|
}
|
||||||
|
|
||||||
|
.marginCenter {
|
||||||
|
margin: 0 auto
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_l {
|
||||||
|
text-align: left
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_c {
|
||||||
|
text-align: center
|
||||||
|
}
|
||||||
|
|
||||||
|
.t_r {
|
||||||
|
text-align: right
|
||||||
|
}
|
||||||
|
|
||||||
|
.unLine {
|
||||||
|
text-decoration: underline
|
||||||
|
}
|
||||||
|
|
||||||
|
.fiexd {
|
||||||
|
position: fixed
|
||||||
|
}
|
||||||
|
|
||||||
|
.absolute {
|
||||||
|
position: absolute
|
||||||
|
}
|
||||||
|
|
||||||
|
.relative {
|
||||||
|
position: relative
|
||||||
|
}
|
||||||
|
|
||||||
|
.wrapper {
|
||||||
|
clear: both;
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.o-hidden {
|
||||||
|
overflow: hidden
|
||||||
|
}
|
||||||
|
|
||||||
|
.hidden {
|
||||||
|
display: none
|
||||||
|
}
|
||||||
|
|
||||||
|
.block {
|
||||||
|
display: block
|
||||||
|
}
|
||||||
|
|
||||||
|
.lblock {
|
||||||
|
display: inline-block
|
||||||
|
}
|
||||||
|
|
||||||
|
.clear {
|
||||||
|
clear: both
|
||||||
|
}
|
||||||
|
|
||||||
|
.pointer {
|
||||||
|
cursor: pointer
|
||||||
|
}
|
||||||
|
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
vertical-align: middle
|
||||||
|
}
|
||||||
@ -9,13 +9,32 @@ define(function (require, exports, module) {
|
|||||||
console.log(("ctx init"));
|
console.log(("ctx init"));
|
||||||
|
|
||||||
//可以修改的
|
//可以修改的
|
||||||
let editFrontSize = localStorage.getItem('editFrontSize');
|
let editFrontSize = localStorage.getItem('refreshEditFrontSize');
|
||||||
if (editFrontSize !== undefined && editFrontSize !== null) {
|
if (editFrontSize !== undefined && editFrontSize !== null) {
|
||||||
this.editFrontSize = editFrontSize;
|
this.editFrontSize = editFrontSize;
|
||||||
} else {
|
} else {
|
||||||
this.editFrontSize = 14;
|
this.editFrontSize = 14;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//refreshPFontSize
|
||||||
|
let refreshPFontSize = localStorage.getItem('refreshPFontSize');
|
||||||
|
if (refreshPFontSize !== undefined && refreshPFontSize !== null) {
|
||||||
|
this.refreshPFontSize = refreshPFontSize;
|
||||||
|
} else {
|
||||||
|
this.refreshPFontSize = {
|
||||||
|
"font-weight": "normal",
|
||||||
|
"font-size": "defaultFontSize",
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
//refreshEditBgColor
|
||||||
|
let refreshEditBgColor = localStorage.getItem('refreshEditBgColor');
|
||||||
|
if (refreshEditBgColor !== undefined && refreshEditBgColor !== null) {
|
||||||
|
this.refreshEditBgColor = refreshEditBgColor;
|
||||||
|
} else {
|
||||||
|
this.refreshEditBgColor = null;
|
||||||
|
}
|
||||||
|
|
||||||
this.usn = "syjSyj";
|
this.usn = "syjSyj";
|
||||||
this.docType = 0;
|
this.docType = 0;
|
||||||
|
|
||||||
|
|||||||
@ -168,7 +168,33 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
//textContent 性能 准确性更好
|
//textContent 性能 准确性更好
|
||||||
return element.textContent || element.innerText;
|
return element.textContent || element.innerText;
|
||||||
|
},
|
||||||
|
|
||||||
|
GetDpr() {
|
||||||
|
//获取屏幕像素密度
|
||||||
|
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
|
||||||
|
if (!dpr) {
|
||||||
|
//devicePixelRatio这个属性是可以获取到设备的dpr
|
||||||
|
let devicePixelRatio = window?.devicePixelRatio;
|
||||||
|
//判断dpr是否为整数
|
||||||
|
let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
|
||||||
|
if (isRegularDpr) {
|
||||||
|
// 对于是整数的dpr，对dpr进行操作
|
||||||
|
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
|
||||||
|
dpr = 3;
|
||||||
|
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
|
||||||
|
dpr = 2;
|
||||||
|
} else {
|
||||||
|
dpr = 1;
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 其他设备下，仍旧使用1倍的方案
|
||||||
|
dpr = 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return dpr;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
@ -74,10 +74,6 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
//+/-
|
|
||||||
document.getElementById("my_fontSize+").addEventListener("click", this.AdjustMyFontSize, true)
|
|
||||||
document.getElementById("my_fontSize-").addEventListener("click", this.AdjustMyFontSize, true)
|
|
||||||
// document.getElementById("my_fontSize0").addEventListener("click", this.AdjustMyFontSize, true)
|
|
||||||
|
|
||||||
//::before
|
//::before
|
||||||
//样式事件监听
|
//样式事件监听
|
||||||
@ -88,13 +84,19 @@ define(function (require, exports, module) {
|
|||||||
myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false);
|
myBeforeStyleList[i].addEventListener('click', this.ApplyMyBeforeStyleListener, false);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
//监听下拉事件
|
||||||
|
let dropStyleList = document.querySelectorAll(".my_style_nav ul");
|
||||||
|
for (let i = 0; i < dropStyleList.length; i++) {
|
||||||
|
dropStyleList[i].addEventListener("click", this.DropDownStyleSelectListener, false);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
AdjustMyFontSize(e) {
|
DropDownStyleSelectListener(e) {
|
||||||
const handle = require('./impl/AdjustMyFontSizeEventImpl');
|
require('./impl/DropDownStyleSelectEventImpl').handle(e);
|
||||||
handle.handle(e);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Mousedown(e) {
|
Mousedown(e) {
|
||||||
const handle = require('./impl/MouseDownEventImpl');
|
const handle = require('./impl/MouseDownEventImpl');
|
||||||
handle.handle(e);
|
handle.handle(e);
|
||||||
|
|||||||
@ -1,53 +0,0 @@
|
|||||||
"use strict";
|
|
||||||
/**
|
|
||||||
* 使用样式事件
|
|
||||||
*/
|
|
||||||
define(function (require, exports, module) {
|
|
||||||
|
|
||||||
function handle(e) {
|
|
||||||
const ctx = require("../../common/ctx");
|
|
||||||
const utils = require("../../common/utils");
|
|
||||||
|
|
||||||
let event = utils.ParseEvent(e);
|
|
||||||
let curEl = utils.GetEventTarget(event);
|
|
||||||
let curId = curEl.getAttribute("id");
|
|
||||||
if (curId === "my_fontSize0") {
|
|
||||||
localStorage.clear();
|
|
||||||
location.reload();
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log("curId : ", curId, " target: ", curEl)
|
|
||||||
if (curId === null) { //防止点击到 path
|
|
||||||
let tmpSvg = curEl.parentElement.closest("span");
|
|
||||||
if (tmpSvg !== undefined && tmpSvg !== null) {
|
|
||||||
curId = tmpSvg.getAttribute("id");
|
|
||||||
}
|
|
||||||
}
|
|
||||||
if (curId === "my_fontSize+") {
|
|
||||||
if (ctx.editFrontSize >= 72) {
|
|
||||||
ctx.editFrontSize = 72;
|
|
||||||
} else {
|
|
||||||
ctx.editFrontSize++;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
if (ctx.editFrontSize <= 12) {
|
|
||||||
ctx.editFrontSize = 12
|
|
||||||
} else {
|
|
||||||
ctx.editFrontSize--;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//触发resize
|
|
||||||
let resizeImp = require("./RSizeEventImpl");
|
|
||||||
resizeImp.refreshEditFrontSize();
|
|
||||||
|
|
||||||
//保存在本地
|
|
||||||
localStorage.setItem('editFrontSize', ctx.editFrontSize);
|
|
||||||
//show
|
|
||||||
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
|
||||||
}
|
|
||||||
|
|
||||||
//导出
|
|
||||||
exports.handle = handle;
|
|
||||||
});
|
|
||||||
153
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
153
static/js/event/impl/DropDownStyleSelectEventImpl.js
Normal file
@ -0,0 +1,153 @@
|
|||||||
|
"use strict";
|
||||||
|
/**
|
||||||
|
* 拷贝事件
|
||||||
|
*/
|
||||||
|
define(function (require, exports, module) {
|
||||||
|
|
||||||
|
function handle(e) {
|
||||||
|
const utils = require("../../common/utils");
|
||||||
|
let event = utils.ParseEvent(e);
|
||||||
|
let target = utils.GetEventTarget(event);
|
||||||
|
console.log("target: ", target, target.tagName)
|
||||||
|
if (target.tagName === "SPAN") {
|
||||||
|
target = target.parentElement;
|
||||||
|
console.log("cur_target: ", target, target.tagName)
|
||||||
|
}
|
||||||
|
if (target.tagName === "LI") {
|
||||||
|
let curLi = target;
|
||||||
|
//处理 下拉选择/取消选择
|
||||||
|
let myParent = curLi.parentElement;
|
||||||
|
let dataMySelectV = myParent.getAttribute("data-my-select-v");
|
||||||
|
let liList = myParent.querySelectorAll("li");
|
||||||
|
for (let i = 0; i < liList.length; i++) {
|
||||||
|
let tmpLi = liList[i];
|
||||||
|
if (tmpLi.textContent === curLi.textContent) {
|
||||||
|
tmpLi.setAttribute("data-my-select", "true");
|
||||||
|
tmpLi.setAttribute("data-my-select-v", dataMySelectV);
|
||||||
|
tmpLi.style.setProperty("background-color", "#f0f0f0");
|
||||||
|
continue;
|
||||||
|
}
|
||||||
|
|
||||||
|
tmpLi.setAttribute("data-my-select", "false");
|
||||||
|
tmpLi.removeAttribute("data-my-select-v");
|
||||||
|
tmpLi.style.removeProperty("background-color");
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
//refreshPFontSize ; refreshEditFrontSize ; refreshEditColor ; refreshEditBgColor; other
|
||||||
|
let dataMyStyleType = myParent.getAttribute("data-my-style-type");
|
||||||
|
switch (dataMyStyleType) {
|
||||||
|
case "refreshPFontSize":
|
||||||
|
refreshPFontSize(target);
|
||||||
|
break;
|
||||||
|
case "refreshEditFrontSize":
|
||||||
|
refreshEditFrontSize(target);
|
||||||
|
break;
|
||||||
|
case "refreshEditColor":
|
||||||
|
refreshEditColor(target);
|
||||||
|
break
|
||||||
|
case "refreshEditBgColor":
|
||||||
|
refreshEditBgColor(target);
|
||||||
|
break
|
||||||
|
default :
|
||||||
|
console.log("暂时不支持")
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshEditColor(curLi) {
|
||||||
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
|
let select = utils.GetSelection();
|
||||||
|
let curP = select.anchorNode.parentElement.closest("p");
|
||||||
|
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||||
|
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||||
|
|
||||||
|
let tSpan = curLi.parentElement.parentElement.previousElementSibling;
|
||||||
|
console.log("refreshEditColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
|
||||||
|
|
||||||
|
tSpan.setAttribute("data-v", dataMySelectV)
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshEditBgColor(curLi) {
|
||||||
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
|
let select = utils.GetSelection();
|
||||||
|
let curP = select.anchorNode.parentElement.closest("p");
|
||||||
|
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||||
|
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||||
|
|
||||||
|
let tSpan = curLi.parentElement.parentElement.previousElementSibling;
|
||||||
|
console.log("refreshEditBgColor ", dataMySelectK, dataMySelectV, tSpan, tSpan.getAttribute("data-v"))
|
||||||
|
|
||||||
|
tSpan.setAttribute("data-v", dataMySelectV)
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshPFontSize(curLi) {
|
||||||
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
|
let select = utils.GetSelection();
|
||||||
|
let curP = select.anchorNode.parentElement.closest("p");
|
||||||
|
let dataMySelectK = curLi.getAttribute("data-my-style-k");
|
||||||
|
let dataMySelectV = curLi.getAttribute("data-my-style-v");
|
||||||
|
|
||||||
|
let kList = dataMySelectK.toString().split(",");
|
||||||
|
let vList = dataMySelectV.toString().split(",");
|
||||||
|
let total = kList.length;
|
||||||
|
let num = 0;
|
||||||
|
for (let i = 0; i < kList.length; i++) {
|
||||||
|
if (curP.style.getPropertyValue(kList[i]) === vList[i]) {
|
||||||
|
num++;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (vList[i] === "defaultFontSize") {
|
||||||
|
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||||
|
curP.style.setProperty(kList[i], myEditFrontSize.style.fontSize);
|
||||||
|
} else {
|
||||||
|
curP.style.setProperty(kList[i], vList[i]);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
//移除
|
||||||
|
if (total === num) {
|
||||||
|
for (let j = 0; j < kList.length; j++) {
|
||||||
|
curP.style.removeProperty(kList[j]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function refreshEditFrontSize(curLi) {
|
||||||
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
|
let curStyleV = curLi.getAttribute("data-my-style-v");
|
||||||
|
//设置当前的尺寸
|
||||||
|
ctx.editFrontSize = curStyleV;
|
||||||
|
let curClientW = ctx.getScreenWidth();
|
||||||
|
if (!curClientW) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||||||
|
//12～72 px 建议最大字体是48px
|
||||||
|
let dpr = utils.GetDpr();
|
||||||
|
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||||
|
if (ctx.isTablet) {
|
||||||
|
myEditFrontSize.style.fontSize = ctx.editFrontSize * dpr + 'px';
|
||||||
|
} else {
|
||||||
|
myEditFrontSize.style.fontSize = ctx.editFrontSize + 'px';
|
||||||
|
}
|
||||||
|
|
||||||
|
console.log("refreshEditFrontSize ", curLi, curStyleV,
|
||||||
|
"\nctx.editFrontSize: ", ctx.editFrontSize)
|
||||||
|
|
||||||
|
//保存在本地 refreshEditFrontSize
|
||||||
|
localStorage.setItem('refreshEditFrontSize', ctx.editFrontSize);
|
||||||
|
//show
|
||||||
|
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
||||||
|
}
|
||||||
|
|
||||||
|
//导出
|
||||||
|
exports.handle = handle;
|
||||||
|
});
|
||||||
@ -26,7 +26,7 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function other(mutation) {
|
function other(mutation) {
|
||||||
console.log("other ", mutation)
|
// console.log("other ", mutation)
|
||||||
// console.log("other -> mutation : ", mutation,
|
// console.log("other -> mutation : ", mutation,
|
||||||
// // 观察的变动类型（attributes、characterData或者childList）。
|
// // 观察的变动类型（attributes、characterData或者childList）。
|
||||||
// "\ntype", mutation.type,
|
// "\ntype", mutation.type,
|
||||||
@ -55,14 +55,14 @@ define(function (require, exports, module) {
|
|||||||
// target.clone()
|
// target.clone()
|
||||||
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
if (target.nodeName === "DIV" && mutation.previousSibling !== null) {
|
||||||
let newParagraph = mutation.previousSibling.nextSibling;
|
let newParagraph = mutation.previousSibling.nextSibling;
|
||||||
console.log(
|
// console.log(
|
||||||
"addNewP target: ", target,
|
// "addNewP target: ", target,
|
||||||
"\nnodeType: ", target.nodeType,
|
// "\nnodeType: ", target.nodeType,
|
||||||
"\nnodeName: ", target.nodeName,
|
// "\nnodeName: ", target.nodeName,
|
||||||
"\ndata: ", target.value,
|
// "\ndata: ", target.value,
|
||||||
"\n next: ", newParagraph,
|
// "\n next: ", newParagraph,
|
||||||
"\ncurRowNo: ", ctx.getCurRowNo()
|
// "\ncurRowNo: ", ctx.getCurRowNo()
|
||||||
)
|
// )
|
||||||
if (newParagraph !== undefined && newParagraph !== null) {
|
if (newParagraph !== undefined && newParagraph !== null) {
|
||||||
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
newParagraph.id = utils.Uuid(ctx.usn, ctx.docType);
|
||||||
let curNo = ctx.incrementNumThenReturn();
|
let curNo = ctx.incrementNumThenReturn();
|
||||||
@ -165,7 +165,7 @@ define(function (require, exports, module) {
|
|||||||
lastSpan = tmpSpan;
|
lastSpan = tmpSpan;
|
||||||
}
|
}
|
||||||
//选区调整
|
//选区调整
|
||||||
console.log("lastSpan : ", lastSpan)
|
// console.log("lastSpan : ", lastSpan)
|
||||||
utils.GetSelection().setPosition(lastSpan, 1);
|
utils.GetSelection().setPosition(lastSpan, 1);
|
||||||
} else {
|
} else {
|
||||||
console.log("TODO 暂时不支持")
|
console.log("TODO 暂时不支持")
|
||||||
|
|||||||
@ -24,6 +24,7 @@ define(function (require, exports, module) {
|
|||||||
*/
|
*/
|
||||||
function refreshRootFrontSize() {
|
function refreshRootFrontSize() {
|
||||||
const ctx = require("../../common/ctx");
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
let designWidth = ctx.designWith;
|
let designWidth = ctx.designWith;
|
||||||
let curDoc = document.documentElement;//当前文档的 root 元素
|
let curDoc = document.documentElement;//当前文档的 root 元素
|
||||||
let curClientW = ctx.getScreenWidth();
|
let curClientW = ctx.getScreenWidth();
|
||||||
@ -38,7 +39,7 @@ define(function (require, exports, module) {
|
|||||||
ctx.MyRoot().style.width = "100%";
|
ctx.MyRoot().style.width = "100%";
|
||||||
}
|
}
|
||||||
|
|
||||||
let dpr = getDpr();
|
let dpr = utils.GetDpr();
|
||||||
//set 1rem = curClientW / designWidth (支持响应式)
|
//set 1rem = curClientW / designWidth (支持响应式)
|
||||||
let nowFrontSize = '1px';
|
let nowFrontSize = '1px';
|
||||||
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
if (ctx.isTablet || ctx.isMobile || ctx.isIOS || ctx.isAndroid) {
|
||||||
@ -47,10 +48,21 @@ define(function (require, exports, module) {
|
|||||||
nowFrontSize = (curClientW / designWidth) + 'px';
|
nowFrontSize = (curClientW / designWidth) + 'px';
|
||||||
}
|
}
|
||||||
|
|
||||||
|
console.log(
|
||||||
|
"\nuserAgent: ", window.navigator.userAgent,
|
||||||
|
"\nisTablet: ", ctx.isTablet,
|
||||||
|
"\nisMobile: ", ctx.isMobile,
|
||||||
|
"\nisIOS: ", ctx.isIOS,
|
||||||
|
"\nisAndroid: ", ctx.isAndroid,
|
||||||
|
"\nwindow.innerWidth: ", window.innerWidth,
|
||||||
|
"\ngetScreenWidth: ", ctx.getScreenWidth(),
|
||||||
|
"curClientW : ", curClientW,
|
||||||
|
"\ndesignWidth: ", designWidth,
|
||||||
|
"\n1rem = ", nowFrontSize,
|
||||||
|
"\nnowFrontSize: ", nowFrontSize);
|
||||||
// curDoc.style.fontSize = dpr * nowFrontSize;
|
// curDoc.style.fontSize = dpr * nowFrontSize;
|
||||||
curDoc.style.fontSize = nowFrontSize;
|
|
||||||
|
|
||||||
console.log("curClientW :", curClientW, "designWidth: ", designWidth, "-> ", nowFrontSize);
|
curDoc.style.fontSize = nowFrontSize;
|
||||||
// let testDiv = document.getElementById("testDevice");
|
// let testDiv = document.getElementById("testDevice");
|
||||||
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
// testDiv.innerText += "\ncurClientW: " + curClientW;
|
||||||
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
// testDiv.innerText += "\ndesignWith: " + designWidth;
|
||||||
@ -69,33 +81,10 @@ define(function (require, exports, module) {
|
|||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function getDpr() {
|
|
||||||
//获取屏幕像素密度
|
|
||||||
let dpr = window.devicePixelRatio || 1;//当前设置下 物理像素和虚拟像素的比值
|
|
||||||
if (!dpr) {
|
|
||||||
//devicePixelRatio这个属性是可以获取到设备的dpr
|
|
||||||
let devicePixelRatio = window?.devicePixelRatio;
|
|
||||||
//判断dpr是否为整数
|
|
||||||
let isRegularDpr = devicePixelRatio.toString().match(/^[1-9]\d*$/g)
|
|
||||||
if (isRegularDpr) {
|
|
||||||
// 对于是整数的dpr，对dpr进行操作
|
|
||||||
if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
|
|
||||||
dpr = 3;
|
|
||||||
} else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
|
|
||||||
dpr = 2;
|
|
||||||
} else {
|
|
||||||
dpr = 1;
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
// 其他设备下，仍旧使用1倍的方案
|
|
||||||
dpr = 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
return dpr;
|
|
||||||
}
|
|
||||||
|
|
||||||
function refreshEditFrontSize() {
|
function refreshEditFrontSize() {
|
||||||
const ctx = require("../../common/ctx");
|
const ctx = require("../../common/ctx");
|
||||||
|
const utils = require("../../common/utils");
|
||||||
let curClientW = ctx.getScreenWidth();
|
let curClientW = ctx.getScreenWidth();
|
||||||
if (!curClientW) {
|
if (!curClientW) {
|
||||||
return
|
return
|
||||||
@ -103,7 +92,7 @@ define(function (require, exports, module) {
|
|||||||
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
//字体尺寸 https://www.shejidaren.com/zihao-daxiao-sheji-bilv.html
|
||||||
//12～72 px 建议最大字体是48px
|
//12～72 px 建议最大字体是48px
|
||||||
|
|
||||||
let dpr = getDpr();
|
let dpr = utils.GetDpr();
|
||||||
|
|
||||||
let myEditFrontSize = document.getElementById("myEdit_main");
|
let myEditFrontSize = document.getElementById("myEdit_main");
|
||||||
if (ctx.isTablet) {
|
if (ctx.isTablet) {
|
||||||
@ -113,7 +102,19 @@ define(function (require, exports, module) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
//show
|
//show
|
||||||
document.getElementById("cur_my_font_size").textContent = ctx.editFrontSize + "px"
|
let curMyFontSizeEl = document.getElementById("cur_my_font_size");
|
||||||
|
curMyFontSizeEl.textContent = ctx.editFrontSize + "px";
|
||||||
|
//更新默认值
|
||||||
|
let liList = curMyFontSizeEl.parentElement.nextElementSibling.querySelectorAll("ul li");
|
||||||
|
for (let i = 0; i < liList.length; i++) {
|
||||||
|
let tmpLi = liList[i];
|
||||||
|
if (tmpLi.getAttribute("data-my-style-v") === ctx.editFrontSize) {
|
||||||
|
tmpLi.setAttribute("data-my-select", "true");
|
||||||
|
tmpLi.setAttribute("data-my-select-v", tmpLi.parentElement.getAttribute("data-my-select-v"));
|
||||||
|
} else {
|
||||||
|
tmpLi.removeAttribute("data-my-select");
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@ -1,5 +1,14 @@
|
|||||||
"use strict";
|
"use strict";
|
||||||
define(function (require) {
|
define(function (require) {
|
||||||
|
const isDebug = false; // 控制是否屏蔽全局console.log 日志；isDebug设为false即可屏蔽
|
||||||
|
console.log = (function (oldLogFunc) {
|
||||||
|
return function () {
|
||||||
|
if (isDebug) {
|
||||||
|
oldLogFunc.apply(this, arguments);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(console.log);
|
||||||
|
|
||||||
const ctx = require('./common/ctx');
|
const ctx = require('./common/ctx');
|
||||||
const eventListener = require('./event/MyEventListener')
|
const eventListener = require('./event/MyEventListener')
|
||||||
const utils = require('./common/utils')
|
const utils = require('./common/utils')
|
||||||
|
|||||||
@ -11,7 +11,9 @@
|
|||||||
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
|
<!-- content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">-->
|
||||||
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
|
<link rel="stylesheet" type="text/css" href="./css/normalize.css">
|
||||||
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
<link rel="stylesheet" type="text/css" href="./css/myEdit.css">
|
||||||
<script src="./js/lib/sea.js"></script>
|
<link rel="stylesheet" type="text/css" href="./css/my_drop.css">
|
||||||
|
<!-- <script src="./js/lib/sea.js"></script>-->
|
||||||
|
<script src="https://www.mylomen.com/js/lib/sea.js"></script>
|
||||||
<script>
|
<script>
|
||||||
seajs.config({
|
seajs.config({
|
||||||
// base:'path',
|
// base:'path',
|
||||||
@ -32,56 +34,43 @@
|
|||||||
<body>
|
<body>
|
||||||
|
|
||||||
<header>
|
<header>
|
||||||
<!-- 顶部 -->
|
|
||||||
<!-- <div id="head_top" style="font-size: 12rem">-->
|
|
||||||
<!-- <div>测试</div>-->
|
|
||||||
<!-- <div></div>-->
|
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <span><button id="my_fontSize0">cls</button></span>-->
|
|
||||||
<!-- <span>｜</span>-->
|
|
||||||
<!-- <span><button id="my_fontSize+">+</button></span>-->
|
|
||||||
<!-- <span>｜</span>-->
|
|
||||||
<!-- <span><button id="my_fontSize-">-</button></span>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<div class="fixStylePosition" id="_style_utils">
|
<div class="fixStylePosition" id="_style_utils">
|
||||||
<div class="fixStyleOut">
|
<div class="fixStyleOut">
|
||||||
<div style="display: flex;margin: 0 0; ">
|
|
||||||
<div style="display: flex; margin: 0 0; align-items: center">
|
<!-- 字体 -->
|
||||||
<!-- <div>-->
|
<div style="display: flex;">
|
||||||
<!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"-->
|
<span>
|
||||||
<!-- xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">-->
|
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
||||||
<!-- <path-->
|
xmlns="http://www.w3.org/2000/svg" data-icon="TextOutlined">
|
||||||
<!-- d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"-->
|
<path
|
||||||
<!-- fill="currentColor"></path>-->
|
d="M2 3a1 1 0 0 1 1-1h18a1 1 0 0 1 1 1v4a1 1 0 1 1-2 0V4h-7v16h3a1 1 0 1 1 0 2H8a1 1 0 1 1 0-2h3V4H4v3a1 1 0 1 1-2 0V3Z"
|
||||||
<!-- </svg>-->
|
fill="currentColor"></path>
|
||||||
<!-- </div>-->
|
</svg>
|
||||||
<span id="my_fontSize-" style=" transform: rotate(90deg); align-content: center;
|
</span>
|
||||||
border-radius: 3rem;
|
<div class="my_style_nav">
|
||||||
background-color:lightgrey;">
|
<span>
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
|
||||||
<path
|
|
||||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
|
||||||
fill="currentColor"></path>
|
|
||||||
</svg>
|
|
||||||
</span>
|
|
||||||
<div style="margin: 0 2rem">
|
|
||||||
<span id="cur_my_font_size" style="font-size: 14px">14px</span>
|
|
||||||
</div>
|
|
||||||
<span id="my_fontSize+" style=" transform: rotate(-90deg); align-content: center;
|
|
||||||
margin-left: 2rem;
|
|
||||||
border-radius: 3rem;
|
|
||||||
background-color: lightgrey;">
|
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"
|
|
||||||
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||||
<path
|
<path
|
||||||
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
|
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshPFontSize">
|
||||||
|
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="font-weight,font-size"
|
||||||
|
data-my-style-v="normal,defaultFontSize"><span>正文</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,24px"><span>H1</span></li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,20px"><span>H2</span></li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,18px"><span>H3</span></li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,16px"><span>H4</span></li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,14px"><span>H5</span></li>
|
||||||
|
<li data-my-style-k="font-weight,font-size" data-my-style-v="500,12px"><span>H6</span></li>
|
||||||
|
</ul>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
|
|
||||||
<div style="display: flex;">
|
<div style="display: flex;">
|
||||||
@ -93,14 +82,6 @@
|
|||||||
fill="currentColor"></path>
|
fill="currentColor"></path>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none"-->
|
|
||||||
<!-- xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">-->
|
|
||||||
<!-- <path-->
|
|
||||||
<!-- d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"-->
|
|
||||||
<!-- fill="currentColor"></path>-->
|
|
||||||
<!-- </svg>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
</div>
|
||||||
<div style="width: 10rem"></div>
|
<div style="width: 10rem"></div>
|
||||||
<div>
|
<div>
|
||||||
@ -152,7 +133,8 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
<div>
|
|
||||||
|
<div style="display: flex; ">
|
||||||
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
<span class="fixStyleInnerSpan" data-k="color" data-v="blue">
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
<svg width="10rem" height="10rem" viewBox="0 0 240 240" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -173,6 +155,34 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<span class="my_style_nav">
|
||||||
|
<span>
|
||||||
|
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||||
|
<path
|
||||||
|
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||||
|
fill="currentColor">
|
||||||
|
</path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditColor">
|
||||||
|
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="color"
|
||||||
|
data-my-style-v="white">
|
||||||
|
<span>无色</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="color" data-my-style-v="red"><span style="color: red">红色</span></li>
|
||||||
|
<li data-my-style-k="color" data-my-style-v="#edce02"><span style="color: #edce02">黄色</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="color" data-my-style-v="blue"><span style="color: blue">蓝色</span></li>
|
||||||
|
<li data-my-style-k="color" data-my-style-v="black"><span style="color: black">黑色</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="color" data-my-style-v="gray"><span style="color: gray">灰色</span></li>
|
||||||
|
</ul>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex;">
|
||||||
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
<span class="fixStyleInnerSpan" data-k="background-color" data-v="yellow">
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
<svg width="10rem" height="10rem" viewBox="0 0 256 256" version="1.1"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -199,10 +209,64 @@
|
|||||||
</g>
|
</g>
|
||||||
</svg>
|
</svg>
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
|
<span class="my_style_nav">
|
||||||
|
<span>
|
||||||
|
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||||
|
<path
|
||||||
|
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||||
|
fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditBgColor">
|
||||||
|
<li data-my-select="true" data-my-select-v="✔" data-my-style-k="background-color"
|
||||||
|
data-my-style-v="transparent">
|
||||||
|
<span>空白</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="background-color" data-my-style-v="lightcoral"><span
|
||||||
|
style="color: lightcoral">浅红</span></li>
|
||||||
|
<li data-my-style-k="background-color" data-my-style-v="#fff897"><span
|
||||||
|
style="color: #fff897">浅黄</span>
|
||||||
|
</li>
|
||||||
|
<li data-my-style-k="background-color" data-my-style-v="lightblue"><span
|
||||||
|
style="color: lightblue">浅蓝</span></li>
|
||||||
|
</ul>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="my-divider-item"></div>
|
<div class="my-divider-item"></div>
|
||||||
<div style="display: flex; flex-direction:column; align-items: flex-end">
|
<div style="display: flex;margin: 0 0; ">
|
||||||
|
<span>
|
||||||
|
<span id="cur_my_font_size" style="font-size: 14px">14px</span>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<div class="my_style_nav">
|
||||||
|
<span>
|
||||||
|
<svg width="8rem" height="8rem" viewBox="0 0 24 24" fill="none"
|
||||||
|
xmlns="http://www.w3.org/2000/svg" data-icon="DownBoldOutlined">
|
||||||
|
<path
|
||||||
|
d="m3.414 7.086-.707.707a1 1 0 0 0 0 1.414l7.778 7.778a2 2 0 0 0 2.829 0l7.778-7.778a1 1 0 0 0 0-1.414l-.707-.707a1 1 0 0 0-1.415 0l-7.07 7.07-7.072-7.07a1 1 0 0 0-1.414 0Z"
|
||||||
|
fill="currentColor"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<ul class="menu fllil" data-my-select-v="✔" data-my-style-type="refreshEditFrontSize">
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="12"><span>12px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="14"><span>14px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="16"><span>16px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="18"><span>18px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="20"><span>21px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="24"><span>24px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="36"><span>36px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="48"><span>48px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="60"><span>60px</span></li>
|
||||||
|
<li data-my-style-k="font-size" data-my-style-v="72"><span>72px</span></li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
<span>
|
<span>
|
||||||
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
|
<svg width="10rem" height="10rem" viewBox="0 0 18 18" fill="none"
|
||||||
xmlns="http://www.w3.org/2000/svg">
|
xmlns="http://www.w3.org/2000/svg">
|
||||||
@ -210,28 +274,14 @@
|
|||||||
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
d="M4.2 10.4A1.19 1.19 0 013 9.2 1.19 1.19 0 014.2 8c.23 0 .43.06.6.17.2.1.33.24.44.43.11.18.17.38.17.6 0 .23-.06.43-.17.6-.1.2-.25.34-.43.45-.18.1-.38.16-.6.16zm4.72 0a1.19 1.19 0 01-1.2-1.2A1.19 1.19 0 018.92 8c.22 0 .42.06.6.17.19.1.33.24.44.43.1.18.16.38.16.6a1.22 1.22 0 01-.6 1.04c-.18.11-.38.17-.6.17zm4.72 0a1.19 1.19 0 01-1.2-1.2 1.19 1.19 0 011.2-1.2c.22 0 .42.06.6.17.18.1.33.24.44.43.11.18.16.38.16.6 0 .23-.05.43-.16.6a1.18 1.18 0 01-1.04.6z"
|
||||||
fill="#535353"></path>
|
fill="#535353"></path>
|
||||||
</svg>
|
</svg>
|
||||||
|
<!-- <ul class="menu fllil" data-my-select-v="✔" data-my-style-type="other">-->
|
||||||
|
<!-- <li data-my-select="true" data-my-select-v="✔">h1</li>-->
|
||||||
|
<!-- <li>h2</li>-->
|
||||||
|
<!-- <li>h3</li>-->
|
||||||
|
<!-- <li>h4</li>-->
|
||||||
|
<!-- <li>h5</li>-->
|
||||||
|
<!-- </ul>-->
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
<div id="_position_more">
|
|
||||||
<div id="_show_more">
|
|
||||||
<!-- <div id="my_fontSize0">-->
|
|
||||||
<!-- cls-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div>-->
|
|
||||||
<!-- <span id="my_fontSize-" style="border: 1px red solid; min-width: 2em">-</span>-->
|
|
||||||
<!-- <span style="border: 1px red solid;">14px</span>-->
|
|
||||||
<!-- <span id="my_fontSize+" style="border: 1px red solid; min-width: 6rem">+</span>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
<!-- <div style="display: flex;align-content:space-between;">-->
|
|
||||||
<!-- <span>-->
|
|
||||||
<!-- <svg width="10rem" height="10rem" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-icon="PrinterOutlined"><path d="M18.788 10.74a.97.97 0 1 1-1.94 0 .97.97 0 0 1 1.94 0Z" fill="currentColor"></path><path d="M6.5 1.333h11c1.15 0 1.97.967 1.967 1.967v3.367h.29a2.91 2.91 0 0 1 2.91 2.909v5.814c0 1.11-.976 1.943-1.937 1.943h-1.942v3.394c0 1.07-.956 1.94-1.94 1.94H7.153c-1.063 0-1.94-.942-1.94-1.94v-3.394h-1.94c-.932 0-1.942-.833-1.938-1.94V9.577a2.91 2.91 0 0 1 2.909-2.91h.29V3.3c0-1.05.867-1.97 1.967-1.967Zm11.027 5.334V3.273H6.473v3.394h11.054ZM5.212 15.394v-.485c0-1.088.945-1.94 1.94-1.94h9.697c1.077 0 1.94.973 1.94 1.94v.485h1.938V9.576a.97.97 0 0 0-.97-.97H4.244a.97.97 0 0 0-.97.97v5.818h1.94Zm1.94-.485v5.818h9.697V14.91H7.152Z" fill="currentColor"></path></svg>-->
|
|
||||||
<!-- </span>-->
|
|
||||||
<!-- <span>打印</span>-->
|
|
||||||
<!-- </div>-->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user