no message
This commit is contained in:
DESKTOP-RQ919RC\Pc
255
css/index.css
Normal file
255
css/index.css
Normal file
@@ -0,0 +1,255 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
}
|
||||||
|
.one-line-display {
|
||||||
|
word-break: keep-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
/* 公共的 css 样式 */
|
||||||
|
.flexflex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.flexcenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flexjcenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
.flexacenter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.flex1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
.flexcolumn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
view,
|
||||||
|
swiper,
|
||||||
|
swiper-item,
|
||||||
|
scroll-view,
|
||||||
|
textarea,
|
||||||
|
editor {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: #f5f5f5;
|
||||||
|
padding-bottom: 3.2rem;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .title-box {
|
||||||
|
width: 9.4rem;
|
||||||
|
margin: 0 auto 0.4rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 0.0133rem solid #f2f2f2;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .title-box .input {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 1rem;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 0.56rem;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
.container .editor-box {
|
||||||
|
width: 9.4rem;
|
||||||
|
margin: 0 auto 0.4rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 0.0133rem solid #f2f2f2;
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .editor {
|
||||||
|
margin: 0.4rem;
|
||||||
|
width: 8.6rem;
|
||||||
|
min-height: 10rem;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.container .editor-box .editor img {
|
||||||
|
width: 8.6rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
.container .editor-box .label {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100vw;
|
||||||
|
height: 0.64rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
width: 9.4rem;
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
.container .editor-box .label .item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.64rem;
|
||||||
|
line-height: 0.64rem;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border-radius: 1.46rem;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #606060;
|
||||||
|
padding: 0 0.24rem;
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
.container .editor-box .label .item:not(:last-of-type) {
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .label .item:first-of-type {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .label .item:last-of-type {
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list {
|
||||||
|
margin: 0 0.4rem 0.4rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list .item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.72rem;
|
||||||
|
line-height: 0.72rem;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 0.0133rem solid #ebebeb;
|
||||||
|
border-radius: 1.46rem;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
color: #555555;
|
||||||
|
padding: 0 0.24rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list .item.pitch {
|
||||||
|
background-color: #f6f6bd;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list .item .icon {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin-right: 0.14rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list .unfold {
|
||||||
|
width: 0.72rem;
|
||||||
|
height: 0.72rem;
|
||||||
|
background-color: #f6f6f6;
|
||||||
|
border: 0.0133rem solid #ebebeb;
|
||||||
|
border-radius: 1.4667rem;
|
||||||
|
}
|
||||||
|
.container .editor-box .btn-list .unfold .icon {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
}
|
||||||
|
.container .anonymity {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
.container .anonymity .icon {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
border: 0.0133rem solid #797979;
|
||||||
|
}
|
||||||
|
.container .anonymity .icon-pitch {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
}
|
||||||
|
.container .anonymity .text {
|
||||||
|
color: #000000;
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
.container .new-footer-btn {
|
||||||
|
width: 10rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
background-color: #ffffff;
|
||||||
|
border: 0.0133rem solid #ebebeb;
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0.34rem 0.3rem 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
.container .new-footer-btn .save-draft-btn {
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
color: #7f7f7f;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
.container .new-footer-btn .save-draft-btn .save-draft-icon-box {
|
||||||
|
width: 0.84rem;
|
||||||
|
height: 0.84rem;
|
||||||
|
background-color: rgba(242, 242, 242, 0.69803922);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
}
|
||||||
|
.container .new-footer-btn .save-draft-btn .save-draft-icon-box .save-draft-icon {
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
}
|
||||||
|
.container .new-footer-btn .new-footer-submit {
|
||||||
|
height: 1.4rem;
|
||||||
|
line-height: 1.4rem;
|
||||||
|
text-align: center;
|
||||||
|
background-color: #cff7ff;
|
||||||
|
border: 0.0133rem solid #badee6;
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-size: 0.5067rem;
|
||||||
|
color: #026277;
|
||||||
|
}
|
||||||
|
.container .pop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
z-index: 101;
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
.container .pop .emoji-system-list {
|
||||||
|
width: 100vw;
|
||||||
|
background-color: #ececec;
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.4rem 0.4rem 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 0;
|
||||||
|
animation: growHeight 0.5s ease forwards;
|
||||||
|
}
|
||||||
|
@keyframes growHeight {
|
||||||
|
0% {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
height: 8.6667rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.container .pop .emoji-system-list .item {
|
||||||
|
margin-bottom: 0.1333rem;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 1.15rem;
|
||||||
|
min-height: 0.9333rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
.container .pop .emoji-system-list .item:nth-child(8n-1) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
.container .pop .emoji-system-list .fill {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.2667rem;
|
||||||
|
}
|
||||||
297
css/index.less
Normal file
297
css/index.less
Normal file
@@ -0,0 +1,297 @@
|
|||||||
|
* {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
}
|
||||||
|
|
||||||
|
.one-line-display {
|
||||||
|
word-break: keep-all;
|
||||||
|
white-space: nowrap;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 公共的 css 样式 */
|
||||||
|
.flexflex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexjcenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexacenter {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex1 {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flexcolumn {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
view,
|
||||||
|
swiper,
|
||||||
|
swiper-item,
|
||||||
|
scroll-view,
|
||||||
|
textarea,
|
||||||
|
editor {
|
||||||
|
box-sizing: border-box;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 400;
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.container {
|
||||||
|
min-height: 100vh;
|
||||||
|
background-color: rgba(245, 245, 245, 1);
|
||||||
|
padding-bottom: 3.2rem;
|
||||||
|
padding-top: 0.4rem;
|
||||||
|
|
||||||
|
.title-box {
|
||||||
|
width: 9.4rem;
|
||||||
|
margin: 0 auto 0.4rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 0.0133rem solid rgba(242, 242, 242, 1);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
padding: 0.4rem;
|
||||||
|
|
||||||
|
.input {
|
||||||
|
width: 100%;
|
||||||
|
min-height: 1rem;
|
||||||
|
word-break: break-all;
|
||||||
|
line-height: 0.56rem;
|
||||||
|
outline: none;
|
||||||
|
border: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.editor-box {
|
||||||
|
width: 9.4rem;
|
||||||
|
margin: 0 auto 0.4rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 0.0133rem solid rgba(242, 242, 242, 1);
|
||||||
|
border-radius: 0.4rem;
|
||||||
|
|
||||||
|
.editor {
|
||||||
|
margin: 0.4rem;
|
||||||
|
width: 8.6rem;
|
||||||
|
min-height: 10rem;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
img {
|
||||||
|
width: 8.6rem;
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.label {
|
||||||
|
white-space: nowrap;
|
||||||
|
width: 100vw;
|
||||||
|
height: 0.64rem;
|
||||||
|
margin-bottom: 0.4rem;
|
||||||
|
width: 9.4rem;
|
||||||
|
overflow: auto;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.64rem;
|
||||||
|
line-height: 0.64rem;
|
||||||
|
background-color: rgba(246, 246, 246, 1);
|
||||||
|
border-radius: 1.46rem;
|
||||||
|
font-size: 0.28rem;
|
||||||
|
color: #606060;
|
||||||
|
padding: 0 0.24rem;
|
||||||
|
display: inline-flex;
|
||||||
|
|
||||||
|
&:not(:last-of-type) {
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:first-of-type {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:last-of-type {
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn-list {
|
||||||
|
margin: 0 0.4rem 0.4rem;
|
||||||
|
|
||||||
|
.item {
|
||||||
|
width: fit-content;
|
||||||
|
height: 0.72rem;
|
||||||
|
line-height: 0.72rem;
|
||||||
|
background-color: rgba(246, 246, 246, 1);
|
||||||
|
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||||
|
border-radius: 1.46rem;
|
||||||
|
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
color: #555555;
|
||||||
|
padding: 0 0.24rem;
|
||||||
|
margin-right: 0.2rem;
|
||||||
|
|
||||||
|
&.pitch {
|
||||||
|
background-color: rgba(246, 246, 189, 1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 0.4rem;
|
||||||
|
height: 0.4rem;
|
||||||
|
margin-right: 0.14rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.unfold {
|
||||||
|
width: 0.72rem;
|
||||||
|
height: 0.72rem;
|
||||||
|
background-color: rgba(246, 246, 246, 1);
|
||||||
|
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||||
|
border-radius: 1.4667rem;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.anonymity {
|
||||||
|
margin-left: 0.4rem;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
border: 0.0133rem solid #797979;
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon-pitch {
|
||||||
|
width: 0.32rem;
|
||||||
|
height: 0.32rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
color: rgb(0, 0, 0);
|
||||||
|
margin-left: 0.16rem;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-footer-btn {
|
||||||
|
width: 10rem;
|
||||||
|
height: 2.4rem;
|
||||||
|
background-color: rgba(255, 255, 255, 1);
|
||||||
|
border: 0.0133rem solid rgba(235, 235, 235, 1);
|
||||||
|
position: fixed;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 10;
|
||||||
|
padding: 0.34rem 0.3rem 0;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.save-draft-btn {
|
||||||
|
flex-direction: column;
|
||||||
|
margin-right: 0.4rem;
|
||||||
|
color: #7f7f7f;
|
||||||
|
font-size: 0.32rem;
|
||||||
|
|
||||||
|
.save-draft-icon-box {
|
||||||
|
width: 0.84rem;
|
||||||
|
height: 0.84rem;
|
||||||
|
background-color: rgba(242, 242, 242, 0.698039215686274);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
margin-bottom: 0.12rem;
|
||||||
|
|
||||||
|
.save-draft-icon {
|
||||||
|
width: 0.48rem;
|
||||||
|
height: 0.48rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.new-footer-submit {
|
||||||
|
height: 1.4rem;
|
||||||
|
line-height: 1.4rem;
|
||||||
|
text-align: center;
|
||||||
|
background-color: rgba(207, 247, 255, 1);
|
||||||
|
border: 0.0133rem solid rgba(186, 222, 230, 1);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||||
|
font-weight: 650;
|
||||||
|
font-size: 0.5067rem;
|
||||||
|
color: #026277;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.pop {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
// background-color: rgba(0, 0, 0, 0.5);
|
||||||
|
z-index: 101;
|
||||||
|
align-items: flex-end;
|
||||||
|
|
||||||
|
.emoji-system-list {
|
||||||
|
width: 100vw;
|
||||||
|
background-color: rgba(236, 236, 236, 1);
|
||||||
|
overflow: auto;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
justify-content: space-between;
|
||||||
|
position: relative;
|
||||||
|
padding: 0.4rem 0.4rem 0;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
height: 0;
|
||||||
|
animation: growHeight 0.5s ease forwards;
|
||||||
|
|
||||||
|
@keyframes growHeight {
|
||||||
|
0% {
|
||||||
|
height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
height: 8.6667rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
margin-bottom: 0.1333rem;
|
||||||
|
display: inline-block;
|
||||||
|
min-width: 1.15rem;
|
||||||
|
min-height: 0.9333rem;
|
||||||
|
text-align: center;
|
||||||
|
|
||||||
|
&:nth-child(8n-1) {
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.fill {
|
||||||
|
width: 100%;
|
||||||
|
height: 2.2667rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
70
index.html
Normal file
70
index.html
Normal file
@@ -0,0 +1,70 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
<head>
|
||||||
|
<meta charset="UTF-8" />
|
||||||
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
|
<title>发布帖子</title>
|
||||||
|
<link rel="stylesheet" href="./css/index.css" />
|
||||||
|
<script src="./js/vue.global.js"></script>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div class="container" id="appIndex">
|
||||||
|
<div class="title-box">
|
||||||
|
<textarea class="input" placeholder="输入标题（非必填）" :maxlength="titleLength" v-model="title" ref="titleTextarea" @input="adjustTextareaHeight"></textarea>
|
||||||
|
</div>
|
||||||
|
<div class="editor-box">
|
||||||
|
<div class="editor" ref="editorRef" id="editor" placeholder="输入正文" contenteditable="true" @input="onEditorInput"></div>
|
||||||
|
|
||||||
|
<div class="label flexflex" scroll-x>
|
||||||
|
<div class="item" v-for="index in 8" :key="index" @click="insertLabel">#推荐标签</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="btn-list flexacenter">
|
||||||
|
<div class="item flexacenter" :class="{ 'pitch': isPTitle }" @click="paragraphTitle">
|
||||||
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/T-icon.png" />
|
||||||
|
<div class="text">段落标题</div>
|
||||||
|
</div>
|
||||||
|
<div class="item flexacenter" @click="insertImage">
|
||||||
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/img-icon.png" />
|
||||||
|
<div class="text">图片</div>
|
||||||
|
</div>
|
||||||
|
<div class="item flexacenter" bind:tap="openEmoji">
|
||||||
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/smiling-face-round-black.png" />
|
||||||
|
<div class="text">表情</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex1"></div>
|
||||||
|
<div class="unfold flexcenter">
|
||||||
|
<!-- https://app.gter.net/image/miniApp/offer/fold-icon.png -->
|
||||||
|
<img class="icon" src="https://app.gter.net/image/miniApp/offer/unfold-icon.png" />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="anonymity flexacenter" bind:tap="cutAnonymity">
|
||||||
|
<img v-if="info.anonymity == 1" class="icon-pitch" src="https://app.gter.net/image/miniApp/offer/tick-box.svg" />
|
||||||
|
<div v-else class="icon"></div>
|
||||||
|
<div class="text">匿名发布</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- <cover-view class="new-footer-btn">
|
||||||
|
<cover-view view class="flexacenter save-draft-btn" bindtap="handleLastPublish" data-state="0">
|
||||||
|
<cover-view class="flexcenter save-draft-icon-box">
|
||||||
|
<cover-image class="save-draft-icon" mode="widthFix" src="https://app.gter.net/image/miniApp/offer/draft-icon.png"></cover-image>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view>存草稿</cover-view>
|
||||||
|
</cover-view>
|
||||||
|
<cover-view class="new-footer-submit flex1 flexcenter" bindtap="authenticationSubmit">发布</cover-view>
|
||||||
|
</cover-view> -->
|
||||||
|
|
||||||
|
<!-- <view class="pop flexflex" wx:if="{{ emojiState }}" bind:tap="closeEmoji">
|
||||||
|
<scroll-view class="emoji-system-list" scroll-y="{{ true }}" show-scrollbar="{{ false }}" enhanced="{{ true }}" style="font-size: {{ isIos ? '60rpx' : '50rpx' }};">
|
||||||
|
<view class="item" wx:for="{{ optionEmoji }}" wx:key="index" catch:tap="selectEmoji" data-item="{{ item }}">{{ item }}</view>
|
||||||
|
<view class="fill"></view>
|
||||||
|
</scroll-view>
|
||||||
|
</view> -->
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script src="./js/fontSize.js"></script>
|
||||||
|
<script src="./js/index.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
2
js/axios.min.js
vendored
Normal file
2
js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
40
js/fontSize.js
Normal file
40
js/fontSize.js
Normal file
@@ -0,0 +1,40 @@
|
|||||||
|
(function (window, document) {
|
||||||
|
var sizeUI = 750; // 定义设计图尺寸
|
||||||
|
var remBase = 75; // 定义基准值
|
||||||
|
var docEl = document.documentElement;
|
||||||
|
var bodyEl = document.querySelector("body");
|
||||||
|
|
||||||
|
setRemUnit();
|
||||||
|
|
||||||
|
window.addEventListener("resize", setRemUnit);
|
||||||
|
window.addEventListener("pageshow", function (e) {
|
||||||
|
if (e.persisted) setRemUnit();
|
||||||
|
});
|
||||||
|
|
||||||
|
function setRemUnit() {
|
||||||
|
var docFontSize = (docEl.clientWidth / sizeUI) * remBase;
|
||||||
|
console.log("bodyEl", bodyEl);
|
||||||
|
docEl.style.fontSize = docFontSize + "px";
|
||||||
|
bodyEl.style.fontSize = 16 / docFontSize + "rem";
|
||||||
|
handleRemAdapt();
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleRemAdapt() {
|
||||||
|
var currentFontSize = parseInt(docEl.style.fontSize);
|
||||||
|
var temp = currentFontSize;
|
||||||
|
for (var i = 0; i < 100; i++) {
|
||||||
|
var realFontSize = parseInt(window.getComputedStyle(docEl).fontSize);
|
||||||
|
var differ = realFontSize - currentFontSize;
|
||||||
|
if (Math.abs(differ) >= 1) {
|
||||||
|
if (differ > 0) {
|
||||||
|
temp--;
|
||||||
|
} else {
|
||||||
|
temp++;
|
||||||
|
}
|
||||||
|
docEl.style.fontSize = temp + "px";
|
||||||
|
} else {
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})(window, document);
|
||||||
131
js/index.js
Normal file
131
js/index.js
Normal file
@@ -0,0 +1,131 @@
|
|||||||
|
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||||
|
createApp({
|
||||||
|
setup() {
|
||||||
|
let titleLength = ref(200);
|
||||||
|
|
||||||
|
let title = ref("发");
|
||||||
|
|
||||||
|
let info = ref({
|
||||||
|
anonymity: 0,
|
||||||
|
});
|
||||||
|
|
||||||
|
const titleTextarea = ref(null);
|
||||||
|
|
||||||
|
const adjustTextareaHeight = () => {
|
||||||
|
nextTick(() => {
|
||||||
|
const textarea = titleTextarea.value;
|
||||||
|
if (textarea) {
|
||||||
|
textarea.style.height = "auto";
|
||||||
|
textarea.style.height = textarea.scrollHeight + "px";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
watch(title, () => {
|
||||||
|
adjustTextareaHeight();
|
||||||
|
});
|
||||||
|
|
||||||
|
const editorRef = ref(null);
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
document.addEventListener("selectionchange", getFocusedNodeName);
|
||||||
|
});
|
||||||
|
|
||||||
|
// 获取当前焦点所在的节点名称（仅在.editor内）
|
||||||
|
const getFocusedNodeName = () => {
|
||||||
|
const selection = window.getSelection();
|
||||||
|
if (!selection.rangeCount) return null;
|
||||||
|
|
||||||
|
lastSelection = selection.getRangeAt(0);
|
||||||
|
|
||||||
|
// 获取焦点所在的节点
|
||||||
|
let focusedNode = selection.focusNode;
|
||||||
|
|
||||||
|
// 如果是文本节点，取其父元素
|
||||||
|
if (focusedNode.nodeType === Node.TEXT_NODE) {
|
||||||
|
focusedNode = focusedNode.parentNode;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 检查节点是否在.editor容器内
|
||||||
|
const isInEditor = editorRef.value.contains(focusedNode);
|
||||||
|
if (!isInEditor) return null;
|
||||||
|
|
||||||
|
if (focusedNode.tagName?.toLowerCase() == "h2") isPTitle.value = true;
|
||||||
|
else isPTitle.value = false;
|
||||||
|
};
|
||||||
|
|
||||||
|
const isPTitle = ref(false);
|
||||||
|
|
||||||
|
let lastSelection = null;
|
||||||
|
|
||||||
|
const onEditorInput = () => {
|
||||||
|
const selection = window.getSelection();
|
||||||
|
|
||||||
|
if (selection.rangeCount > 0) {
|
||||||
|
lastSelection = selection.getRangeAt(0);
|
||||||
|
updatePTitleStatus();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const paragraphTitle = () => {
|
||||||
|
editorRef.value.focus();
|
||||||
|
if (!lastSelection) return;
|
||||||
|
const selection = window.getSelection();
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(lastSelection);
|
||||||
|
const focusNode = lastSelection.startContainer;
|
||||||
|
document.execCommand("formatBlock", false, focusNode?.parentNode?.tagName == "H2" ? "P" : "H2");
|
||||||
|
};
|
||||||
|
|
||||||
|
const updatePTitleStatus = () => {
|
||||||
|
if (lastSelection) {
|
||||||
|
const node = lastSelection.commonAncestorContainer;
|
||||||
|
isPTitle.value = node.nodeName === "H2" || (node.nodeType === Node.TEXT_NODE && node.parentNode?.nodeName === "H2");
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const insertImage = () => {
|
||||||
|
const input = document.createElement("input");
|
||||||
|
input.type = "file";
|
||||||
|
input.accept = "image/*";
|
||||||
|
input.onchange = (e) => {
|
||||||
|
const file = e.target.files[0];
|
||||||
|
const reader = new FileReader();
|
||||||
|
reader.onload = (e) => {
|
||||||
|
// 创建图片元素
|
||||||
|
const img = document.createElement("img");
|
||||||
|
img.src = e.target.result;
|
||||||
|
img.alt = "用户上传图片";
|
||||||
|
|
||||||
|
// 确保编辑器获得焦点
|
||||||
|
editorRef.value.focus();
|
||||||
|
|
||||||
|
// 获取选择对象
|
||||||
|
const selection = window.getSelection();
|
||||||
|
|
||||||
|
// 如果有选择范围，在选择范围插入图片
|
||||||
|
console.log("rangeCount", selection.rangeCount);
|
||||||
|
|
||||||
|
if (selection.rangeCount > 0) {
|
||||||
|
const range = selection.getRangeAt(0);
|
||||||
|
range.deleteContents(); // 清除当前选择内容
|
||||||
|
range.insertNode(img); // 插入图片
|
||||||
|
|
||||||
|
// 将光标移动到图片后面
|
||||||
|
range.setStartAfter(img);
|
||||||
|
range.setEndAfter(img);
|
||||||
|
selection.removeAllRanges();
|
||||||
|
selection.addRange(range);
|
||||||
|
} else {
|
||||||
|
// 如果没有选择范围，直接追加到编辑器末尾
|
||||||
|
editorRef.value.appendChild(img);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
reader.readAsDataURL(file);
|
||||||
|
};
|
||||||
|
input.click();
|
||||||
|
};
|
||||||
|
|
||||||
|
return { editorRef, info, title, titleLength, titleTextarea, adjustTextareaHeight, isPTitle, paragraphTitle, insertImage, onEditorInput };
|
||||||
|
},
|
||||||
|
}).mount("#appIndex");
|
||||||
18039
js/vue.global.js
Normal file
18039
js/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user