From 22da4ba8793a21afab76587196149ac359273b82 Mon Sep 17 00:00:00 2001 From: 0xJacky Date: Sun, 20 Feb 2022 13:08:47 +0800 Subject: [PATCH] use brace as code editor --- frontend/package.json | 4 +- frontend/src/assets/css/dark.less | 10 +- frontend/src/assets/css/style.bak.less | 1499 ----------------- frontend/src/assets/css/style.less | 36 +- frontend/src/components/Logo/Logo.vue | 21 +- .../src/components/PageHeader/PageHeader.vue | 2 +- .../components/VueItextarea/VueItextarea.vue | 15 +- frontend/src/layouts/BaseLayout.vue | 38 +- frontend/src/layouts/HeaderLayout.vue | 5 +- frontend/src/layouts/SideBar.vue | 21 +- frontend/src/views/domain/DomainEdit.vue | 4 + frontend/yarn.lock | 11 + server/api/analytic.go | 4 + server/test/analytic_test.go | 7 + 14 files changed, 134 insertions(+), 1543 deletions(-) delete mode 100644 frontend/src/assets/css/style.bak.less diff --git a/frontend/package.json b/frontend/package.json index 37882e3b..12eb42ac 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -40,6 +40,7 @@ "@vue/cli-service": "~4.5.0", "babel-eslint": "^10.1.0", "babel-plugin-import": "^1.13.3", + "brace": "https://github.com/nightwing/brace", "easygettext": "^2.17.0", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", @@ -54,7 +55,8 @@ "vue-cli-plugin-generate-build-id": "^0.2.0", "vue-cropper": "^0.5.6", "vue-template-babel-compiler": "^1.1.2", - "vue-template-compiler": "^2.6.11" + "vue-template-compiler": "^2.6.11", + "vue2-ace-editor": "^0.0.15" }, "eslintConfig": { "root": true, diff --git a/frontend/src/assets/css/dark.less b/frontend/src/assets/css/dark.less index aa7b5800..805cb4cd 100644 --- a/frontend/src/assets/css/dark.less +++ b/frontend/src/assets/css/dark.less @@ -9,6 +9,8 @@ @text-color-secondary: #bdbdbd; @heading-color: #fff; + @item-hover-bg: @black_bg; + @body-background: @black_bg; @component-background: @black_content; @layout-body-background: @black_bg; @@ -22,7 +24,7 @@ @item-active-bg: #161717; - @link-color: #fff; + @link-color: #bcbcbc; @table-row-hover-bg: @black_bg; @table-selected-row-bg: @black_bg; @@ -45,7 +47,6 @@ // --- @alert-message-color: @black; - .ant-select-dropdown-menu-item:hover { background: @black_bg; } @@ -65,4 +66,9 @@ background-color: @black_bg !important; } + .ant-card { + // box-shadow: 0 0 30px rgb(0, 0, 0, 10%) !important; + box-shadow: none !important; + } + } diff --git a/frontend/src/assets/css/style.bak.less b/frontend/src/assets/css/style.bak.less deleted file mode 100644 index 3f165564..00000000 --- a/frontend/src/assets/css/style.bak.less +++ /dev/null @@ -1,1499 +0,0 @@ -/* 基准 */ -* { - -webkit-tap-highlight-color: transparent -} - -/*::selection { - background: unset; - color: unset; -} - -::-moz-selection { - background: unset; - color: unset; -}*/ - -a { - color: #444; - @media (prefers-color-scheme: dark) { - color: #f5f5f5; - } - text-decoration: none; - -webkit-transition: all .3s ease; - -moz-transition: all .3s ease; - -ms-transition: all .3s ease; - -o-transition: all .3s ease; - transition: all .3s ease; - - &:hover { - color: #19B5FE; - text-decoration: none; - } - - &:focus { - outline: 0; - text-decoration: none; - } -} - -b { - font-weight: normal -} - -i { - font-style: normal -} - -p { - margin: 0 -} - -h1, h2, h4 { - margin: 0; - font-weight: normal; -} - -h3 { - font-size: 17px; - font-weight: 400 -} - -h4 { - font-size: 15px; -} - -ul { - margin: 0; - padding: 0; - list-style: none -} - -img { - border: 0 -} - -code { - font-family: Menlo, monospace; - font-size: 90% -} - -p > code { - padding: 0.2em 0.4em; - background: #e1e9ed -} - -pre { - text-align: left; - overflow-x: scroll; - background-color: #f5f5f5; - padding: 10pt 15pt; - font-size: 13px; - border-radius: 4px; - color: #333; - border: 1px solid rgba(0, 0, 0, 0.15) -} - -button { - box-shadow: unset !important; -} - -.clear { - clear: both -} - -.center { - display: flex; - justify-content: center; -} - -.limit-max { - max-width: 1000px; -} - -.ant-notification { - z-index: 2100 -} - -.ant-comment-actions { - margin-top: unset; -} - -.ant-input:hover { - -} - -.grecaptcha-badge { - visibility: hidden; -} - -.card { - border-radius: 10px; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - margin: 0 0 30px 0; - position: relative; -} - -.card .ant-card-head { - border: 0; -} - -.card .ant-card-head-title { - color: #444; - font-weight: 300; - text-align: left; - height: 48px; - padding: 20px 0 0 0; -} - -.container .content .ant-card-head-title { - height: unset; - font-size: 22px; -} - -.card .ant-card-body { - padding: 6px 24px 20px 24px; -} - -.border-radius { - border-radius: 10px !important; -} - -#nprogress .bar { - z-index: 2030 !important; - background: #1890ff !important; -} - -.loading { - position: fixed; - background: #ffffff; - z-index: 2030; - width: 100%; - height: 100%; - top: 0; - right: 0; -} - -.loading .wrapper { - position: relative; - display: flex; - align-items: center; - height: 100%; - -} - -.loading .wrapper .ant-spin { - position: unset; -} - -/* body */ -body { - margin: 0; - padding: 0; - //cursor: default; - //-webkit-user-select: none; - -webkit-text-size-adjust: none; - -webkit-font-smoothing: antialiased; - font-family: "Myriad Pro", "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif - -} - -/* header */ -header { - height: 50px; - position: fixed; - width: 100%; - border: 0; - background: #fff; - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.05); - z-index: 1001; -} - -header .title { - float: left; - line-height: 50px; - padding: 0 0 0 15px; -} - -header .title i { - font-size: 110px; -} - -header .title .svg { - height: 30px; -} - -header .menu { - height: 50px; - border: 0; -} - -header .menu .horizontal_menu { - text-align: right; -} - -header .menu .horizontal_menu li { - line-height: 50px -} - -header .menu .horizontal_menu li a { - display: inline !important -} - -header .login_button { - float: right; - line-height: 50px; - padding: 0 10px 0 0 -} - -header .avatar { - float: right; - line-height: 50px; - padding: 0 10px 0 0 -} - -.user-pop-card { - width: 180px; -} - -.user-pop-card table { - width: 100%; -} - -.user-pop-card tr { - line-height: 2; -} - -.ant-popover-inner-content .ant-divider-horizontal { - margin: 12px 0; -} - -.container { - width: 100%; - display: flex; - justify-content: center; - padding: 80px 15px 0 15px -} - -.container .breadcrumb .ant-card-body { - padding: 15px 25px; -} - -.container .breadcrumb .ant-breadcrumb { - font-size: 13px; -} - -.container .content { - padding: 0 30px 0 0; -} - -/* Home */ -.container .content .home { - -} - -.container .content .home .carousel img { - width: 90%; - clear: both; - display: block; - margin: auto; - padding-bottom: 15px; -} - -.container .content .home .card.config { - box-shadow: unset; -} - -.container .content .home .card.gallery { - width: 300px; - margin: 0 0 10px 0; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.15); -} - -.container .content .home .card.gallery .ant-card-meta { - padding: 18px 0 0 0; -} - -.container .content .home .card.gallery .ant-card-meta .ant-card-meta-detail .ant-card-meta-title { - font-size: 14px; - margin: unset; -} - -.container .content .home .card.gallery .ant-card-meta .ant-card-meta-avatar { - padding-right: 10px; -} - -.container .content .home .card.gallery .ant-card-meta .ant-card-meta-detail .ant-card-meta-description { - font-size: 10px; - font-weight: 300; -} - -.card .card-wrapper { - margin: 15px 0 10px 0; - width: 100%; - overflow: auto; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; -} - -.gallery .banner .wrapper::-webkit-scrollbar { - height: 3px; -} - -.card .card-wrapper.sub { - text-align: center; -} - -.card .card-wrapper a { - text-decoration: none; -} - -.card .card-wrapper::-webkit-scrollbar { - height: 3px; -} - -/* trick to only apply in webkit */ -@media screen and (-webkit-min-device-pixel-ratio: 0) { - .card .card-wrapper { - background-color: rgba(0, 0, 0, 0); - -webkit-background-clip: text; - transition: background-color .8s; - } - - .card .card-wrapper::-webkit-scrollbar-track { - display: none; - } - - .card .card-wrapper::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: inherit; - } - - .card .card-wrapper::-webkit-scrollbar-thumb:hover { - background: #20A4F1; - } - - .gallery .banner .wrapper { - background-color: rgba(0, 0, 0, 0); - -webkit-background-clip: text; - transition: background-color .8s; - } - - .gallery .banner .wrapper::-webkit-scrollbar-track { - display: none; - } - - .gallery .banner .wrapper::-webkit-scrollbar-thumb { - border-radius: 4px; - background-color: inherit; - } - - .gallery .banner .wrapper::-webkit-scrollbar-thumb:hover { - background: #20A4F1; - } - -} - -.card .card-wrapper ul { - font-size: 0; - white-space: nowrap; - word-break: normal; - padding: 0; -} - -.card .card-wrapper li { - display: inline-block; - padding: 0 15px 0 4px; - vertical-align: top; -} - -.card .card-wrapper li:nth-last-child(1) { - padding: 0 0 0 4px; -} - -.card .card-wrapper .card-block { - float: left; - position: relative; - border-radius: 18px; - width: 210px; - height: 280px -} - -.card .card-wrapper .card-block .card-content { - position: relative; -} - -.card .card-wrapper .card-block .card-content .pic { - width: 80px; - overflow: hidden; - padding-top: 36px; - margin: 0 auto; -} - -.card .card-wrapper .card-block .card-content .pic img { - width: 80px; - height: 80px; - border-radius: 50%; -} - -.card .card-wrapper .card-block .card-content .info { - font-size: 18px; - display: block; - padding: 13px; - margin: 0 auto; - width: 98%; - white-space: normal; -} - -.card .card-wrapper .card-block .card-content .info h2 { - color: #fff; - font-size: 12px; - font-weight: 600 -} - -.card .card-wrapper .card-block .card-content .info p { - margin-top: 5px; - color: #fff; - font-size: 12px; - font-weight: 500 -} - -.card .card-wrapper button { - border-radius: 25px; - font-size: 12px; - height: 26px; - width: 48%; -} - -.card .card-wrapper .enter { -} - -.card .card-wrapper .enter button { - width: unset; -} - -.card .card-wrapper .card-block .card-content button:hover { - color: #ffffff; - border-color: #ffffff; - -} - -.card .card-wrapper .card-block .card-content button:focus { - color: #ffffff; - border-color: #ffffff; - -} - -@media screen and (max-width: 800px) { - .card .card-wrapper li { - padding: 0 20px 0 4px; - } -} - -.container .content .home .source { - font-size: 11px; - color: #8e8e90; - position: absolute; - top: 18px; -} - -.container .content .home .source img { - height: 20px; - border-radius: 50%; -} - -.container .content .home .ant-card-head-title { - padding: 40px 0 5px 0; -} - - -/* Firmwares */ -.container .content .home .source .firmwares-ipswme-icon { - width: 20px; - height: 20px; - vertical-align: middle; - margin-right: 5px; -} - -.container .content .home .firmwares .select { - padding: 10px; -} - -.container .content .home .firmwares .sub-title { - padding: 0 0 0 5px; - margin: -10px 0 0 0; -} - -.container .content .home .firmwares .download button { - width: 100%; - border-radius: 12px; - font-size: 13px; - height: 36px; -} - -.container .content .home .firmwares h3 { - margin: 10px 0 0 0; - font-weight: 300; - border-bottom: 1px solid #e9e9e9; -} - -.container .content .home .firmwares .details { - -} - -.container .content .home .firmwares .details li { - color: #555; - font-size: 13px; - line-height: 31px; -} - -.container .content .home .firmwares .beta-download .ant-btn { - -} - -.container .content .home .firmwares .beta-download .ant-btn-group > .ant-btn:first-child:not(:last-child), .ant-btn-group > span:first-child:not(:last-child) > .ant-btn { - border-bottom-left-radius: 12px; - border-top-left-radius: 12px; -} - -.container .content .home .firmwares .beta-download .ant-btn-group > .ant-btn:last-child:not(:first-child), .ant-btn-group > span:last-child:not(:first-child) > .ant-btn { - border-bottom-right-radius: 12px; - border-top-right-radius: 12px; - padding: 0 8px; -} - -.container .content .home .firmwares .details .tss { - text-align: center; -} - -.container .content .home .firmwares .ok { - color: #5bb0ed; -} - -.container .content .home .firmwares .no { - color: #ee5854; -} - -/* Price Tag */ -.pricetag .row { - -} - -.pricetag .row .app { - padding: 9px; -} - -.pricetag .row .app .artwork { - -} - -.pricetag .row .app .artwork img { - float: left; - height: 50px; - border-radius: 10px; -} - -.pricetag .row .app .info { - margin: 0 0 0 65px; - border-bottom: 1px solid #e8e8e8; - height: 50px; -} - -.pricetag .row .app .info .description { - float: left; -} - -.pricetag .row .app .info .description .title { - overflow: hidden; - text-overflow: ellipsis; - white-space: nowrap; - font-size: 14px; - width: 120px; -} - -.pricetag .row .app .info .description span { - font-size: 11px; - color: #979797; -} - -.pricetag .row .app .info .button { - float: right; - line-height: 35px; -} - -.pricetag button { - border-radius: 25px; - font-size: 12px; - height: 26px; - box-shadow: unset; -} - -.pricetag .get-more-app { - padding: 15px 0 0 0; -} - -/* gallery */ -.gallery .banner { - margin: 0 0 20px 0; -} - -.gallery .banner .wrapper { - width: 100%; - overflow: auto; - overflow-y: hidden; - -webkit-overflow-scrolling: touch; -} - -.gallery .banner .wrapper ul { - font-size: 0; - white-space: nowrap; - word-break: normal; - padding: 0; -} - -.gallery .banner .wrapper li { - display: inline-block; - padding: 0 15px 0 4px; - vertical-align: top; -} - -.gallery .banner .wrapper li:last-child { - display: inline-block; - padding: 0 4px 0 0; -} - -.gallery .banner .wrapper .block { - float: left; - height: 200px; - width: 480px; - position: relative; -} - -.gallery .banner .wrapper .background { - border-radius: 10px; - background-repeat: no-repeat; - background-size: 100% 100%; - height: 100%; - width: 100%; - background-position: center; - position: absolute; - z-index: -1; -} - -.gallery .banner .wrapper .background .inner { - background: rgba(0, 0, 0, .5); - border-radius: 10px; - height: 100%; -} - -.gallery .banner .wrapper .card-content, -.gallery .banner .wrapper .card-content .info { - width: 100%; - height: 100%; -} - -.gallery .banner .wrapper .card-content .info h1 { - color: #ffffff; - position: absolute; - font-size: 26px; - left: 50%; - top: 50%; - transform: translate(-50%, -50%); -} - -.gallery .gallery-content { - -} - -.gallery .gallery-content .title { - padding: 20px 0 0 0; -} - -.gallery .gallery-content .title .avatar { - float: left; - padding: 0 15px 0 0; -} - -.gallery .gallery-content .title .avatar { - float: left; - padding: 0 15px 0 0; -} - -.gallery .gallery-content .title .subscribe { - float: right; -} - -.gallery .gallery-content .title .subscribe button { - border-radius: 20px; -} - -.gallery .gallery-content .menu .ant-menu-item { - width: 33.3%; - text-align: center; -} - -.gallery .ant-comment-inner { - -} - -.gallery .official { - margin: 20px 0 0 0; -} - -.gallery .official .card h2 { - font-size: 20px; -} - -.gallery .official .card .digest { - padding: 10px 0 0 0; -} - -.gallery .official .card .digest p { - line-height: 1.3; -} - -.gallery .official .card .ant-card-cover img { - border-radius: 10px 10px 0 0; -} - -.gallery .official .card .ant-card-body { - padding: 30px; - white-space: pre-wrap; -} - -.gallery .official .card .ant-card-meta-title { - text-overflow: unset; - overflow: unset; - white-space: unset; -} - - -/* Feedback */ -.container .content .topic.feedback .article:first-of-type { - margin: 20px 0 0 0; -} - -.container .content .topic.feedback .article { - padding: 20px 0 0 0; - margin: 30px 0 0 0 -} - -.container .content .topic.feedback .article .ant-card-actions { - border: unset; - background: unset; -} - -/* Discuss */ -.editor textarea { - min-height: 180px; - width: 100%; - outline: none; - resize: none; - outline: none; -} - -.editor .input_length { - float: right; -} - -.editor .allow_comment { - margin: 10px 0 0 0; - float: left; -} - -.editor .ant-upload-list-picture-card { - width: 100%; -} - -.editor .save { - margin: 10px 0 0 0; - float: right; -} - -/* Topic */ -.container .content .topic .article { - position: relative; - padding: 36px 30px 20px 30px; - border-radius: 10px; - background-color: #fff; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - margin: 0 0 30px 0; -} - -.container .content .topic .article.major .post_info { - border-radius: 10px 10px 0 0; - position: relative; -} - -.container .content .topic .banner img { - border-radius: 10px 10px 0 0; - width: 100%; -} - -.container .content .topic .article .post_info .title { - padding: 0 0 20px 0; -} - -.container .content .topic .article .post_info .title h1 { - font-size: 23px; -} - -.container .content .topic .article .post_info .avatar { - float: left; -} - -.container .content .topic .article .post_info .author { - display: block; - padding: 0 0 0 46px; -} - -.container .content .topic .article .post_info .author p { - text-indent: unset; - line-height: 16px; - font-size: 13px; -} - -.container .content .topic .article.major .post_content { - padding: 18px 0 0 0; -} - -.container .content .topic .article .post_content img { - margin-left: auto; - margin-right: auto; - display: block; - max-width: 80%; - width: 320px; - border-radius: 4px; -} - -.container .content .topic .article.major .post_content h1 { - font-size: 20px; - text-align: left; - font-weight: bold; - margin: 20px 0; - border-left: 5px solid red; - padding-left: 10px -} - -.container .content .topic .article.major .post_content h2 { - font-size: 18px; - text-align: left; - font-weight: bold; - margin: 20px 0; - border-left: 5px solid red; - padding-left: 10px -} - -.container .content .topic .article.major .post_content h3 { - font-weight: bold; - font-size: 16px; - margin: 20px 0 -} - -.container .content .topic .article.major .post_content p { - margin: 10px; - line-height: 1.75; - font-size: 14px; - letter-spacing: 2px -} - -.container .content .topic .article.major .post_content code { - font-size: 80%; - overflow: auto; - color: #333; - background: rgb(247, 247, 247); - border-radius: 2px; - padding: 10px; - line-height: 1.3; - border: 1px solid rgb(236, 236, 236); - margin: 20px 0; -} - -.container .content .topic .article.major .post_content ol { - margin-left: 0; - padding-left: 20px -} - -.container .content .topic .article.major .post_content ul { - margin-left: 0; - padding-left: 30px; - list-style: disc; - letter-spacing: 2px -} - -.container .content .topic .article.major .post_content table { - border-collapse: collapse; - margin: 20px 0; -} - -.container .content .topic .article.major .post_content thead { - background: rgba(0, 0, 0, 0.05); -} - -.container .content .topic .article.major .post_content td { - font-size: 80%; - border: 1px solid #dfdfdf; - padding: 4px 8px; -} - -.container .content .topic .article .post_content .hljs-left { - text-align: left; -} - -.container .content .topic .article .post_content .hljs-center { - text-align: center; -} - -.container .content .topic .article .post_content .hljs-right { - text-align: right; -} - -.container .content .topic .article .post_modified { - color: #8e8e90; - float: right; - text-indent: unset; - font-size: 13px; -} - -.container .content .topic .article h1 { - overflow: hidden; - color: #333; - text-overflow: ellipsis; - font-weight: 300; - font-size: 22px -} - -.container .content .topic .article h2 { - font-size: 17px; - font-weight: 400; - line-height: 18px; - padding: 18px 0 8px; - color: #474747; -} - -.container .content .topic .article h3 { - font-size: 15px; - font-weight: 400; - line-height: 18px; - padding: 15px 0 5px; - color: #474747; -} - -.container .content .topic .article p { - color: #333; - font-size: 13px; - line-height: 26px; -} - -.container .content .topic .article .favour .action { - padding: 10px; -} - -/* Donate-pages */ -.container .content .topic .donate p { - text-indent: unset; - text-align: center; -} - -.container .content .topic .donate .left-thanks img { - width: 33%; - float: left; - padding: 30px 0 0 0; -} - -.container .content .topic .article .donate .donate_form { - float: left; - width: 33%; - padding: 10px 0 30px 0; -} - -.container .content .topic .donate .right-thanks img { - width: 33%; - float: left; - padding: 30px 0 0 0; -} - -.container .content .topic .article .donate .donate_form .switch { - float: left; -} - -.container .content .topic .article .donate .donate_form .create_order { - padding: 15px 0 15px 0; - float: right; -} - -.container .content .topic .donate .menu .ant-menu-item { - width: 33.3%; - text-align: center; -} - -.container .content .topic .donate .pagination { - float: right; - padding: 20px 0 0 0; -} - -.container .content .topic .donate .ant-table-small { - border: 0; - text-align: center; -} - -.container .content .topic .donate .ant-table-small .ant-table-body th { - width: 33.3%; - text-align: center; -} - -.container .content .topic .donate .ant-table-small .ant-table-body tr { - width: 33.3%; - text-align: center; -} - -/* Install */ -.container .content .topic.install .button { - text-align: center; - padding: 15px 0 15px 0; -} - -.container .content .topic.install .button button:first-child { - margin: 0 15px 0 0; -} - -/* TimeLine */ -.ant-timeline-item-content { - margin: 0 0 0 15px; -} - -.ant-timeline-item-content .timeline-content p { - text-indent: unset !important; -} - - -/* Widget */ -.widget-area { - -} - -.widget-area .card { - text-align: center; - -} - -.widget-area .card .ant-card-head { - -} - -.widget-area .card .ant-card-head-title { - -} - -.widget-area .card .ant-card-body { - padding: 6px 24px 24px 20px; -} - -.widget-area .card p { - line-height: 30px; - font-size: 13px; -} - -.widget-area .card button { - margin: 10px 0 0 0; - border-radius: 20px; -} - -.widget-area .contact-us { - text-align: left; -} - -.widget-area .contact-us .item { - height: 45px; - padding: 0 5px 0 5px; - font-size: 13px; -} - -.widget-area .contact-us .item span { - margin: 0 10px 0 0 -} - -/* Footer */ -footer { - margin: 5px auto 0; - height: 50px; - font-size: 12px; -} - -footer .row { - -} - -footer .row .col { - padding: 0 15px 15px; - text-align: center; -} - -/* Login */ -.login { - position: fixed; - height: 100%; - width: 100%; -} - -.login .wrapper { - position: relative; - display: flex; - align-items: center; - background: #fff; - padding: 20px; - border-radius: 10px; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - height: 360px; -} - -.login .wrapper .welcome { - display: inline-table; - margin: 0 auto; -} - - -.login .wrapper h1, .login .wrapper h2 { - font-weight: 300; - text-align: center; -} - -.login .login-panel { - background: #fff; - padding: 20px; - margin: 0 0 0 -150px; - border-radius: 10px; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - max-width: 340px; -} - -.login .login-panel .logo { - text-align: center; - padding: 26px; -} - -.login .login-panel .login-form { - width: 75%; -} - -.login .login-panel .login-form .ant-form-item { - margin: 0 0 15px 0; -} - -.login .login-panel .login-form .ant-form-item:last-child { - margin: 0; -} - -.login .login-panel .login-form .ant-form-item input { - border-radius: 20px; -} - -.login .login-panel .login-form .checkbox { - padding: 0 0 15px 0; -} - -.login .login-panel .login-form .login-form-button { - margin: 13px 0; -} - -.login .login-panel .login-form .login-form-button button { - border-radius: 20px; -} - -.login .login-panel .login-form .remember { - float: right; - font-size: 13px; -} - -.login .login-panel .login-form .login-form-forgot { - font-size: 12px; -} - -.login .login-panel .welcome { - margin: 0 auto; - text-align: center; -} - -.login .login-panel .welcome h1 { - font-size: 16px; - font-weight: 300; -} - -.login .login-panel .welcome h2 { - font-size: 14px; - font-weight: 300; -} - -/* Register */ -.register .login-panel { - margin: unset; - width: 100%; - max-width: 340px; -} - -/* User Center */ -.container .sidebar { - padding: 20px; - background: #fff; - border-radius: 10px; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - margin: 0 30px 0 0; -} - -.container .sidebar ul { - border: 0; -} - -.container.user-center { - padding: 80px 15px 30px 15px; -} - -.container .user-panel { - padding: 25px; - background: #fff; - border-radius: 10px; - box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); - position: relative; -} - -.container .user-panel .avatar { - padding: 10px; - float: left; -} - -.container .user-panel .welcome { - padding: 35px 0 0 10px; - float: left; - -} - -.container .user-panel h1 { - padding: 0 0 20px 0; - font-size: 27px; - font-weight: 300; -} - -.container .user-panel .post { - -} - -.container .user-panel .post a { - color: #1890ff; -} - -.container .user-panel .input { - padding: 0 20px 20px 0; -} - -.container .user-panel .switch { - padding: 5px 0 5px 0; -} - -.container .user-panel .save { - float: right; - padding: 20px 0 0 0; -} - -.container .user-panel .contribute .allow_comment { - padding: 20px 0 0 0; -} - -.container .user-panel .message .delete-button { - float: right; - margin: 10px 0 0 0; -} - -.container .user-panel .message .message-block .ant-card-body { - padding: 20px -} - -.container .user-panel .message .message-block .ant-card-meta-title { - font-weight: 300; - font-size: 13px; -} - -.container .user-panel .message .message-block .ant-card-meta-description { - color: unset; -} - -.container .user-panel .message .message-block .send_date { - position: absolute; - top: 20px; - right: 20px; - font-weight: 300; - font-size: 12px; -} - -.container .user-panel .message .message-block .is_read { - margin: 10px 0 0 40px; -} - -/* "Auto" Layout */ -/** -{ - xs: '480px', - sm: '576px', - md: '768px', - lg: '992px', - xl: '1200px', - xxl: '1600px', -} -**/ -@media (max-width: 320px) { - header .menu li.home_link { - display: none !important; - } - - .container .content .topic .article { - border-radius: unset; - padding: 36px 5px 20px 5px; - } - - .container .content .topic .article .donate td { - font-size: 12px; - } - - .gallery .banner { - height: 115px !important; - } - - .gallery .banner .wrapper .block { - height: 115px !important; - width: 276px !important; - } - -} - -@media (max-width: 576px) { - header .menu .horizontal_menu { - text-align: center; - } - - .gallery .banner { - height: 150px; - } - - .gallery .banner .wrapper .block { - height: 150px; - width: 360px; - } - - .container .content .topic .article .donate .donate_form .create_order { - - } -} - -@media (max-width: 768px) { - header .menu .horizontal_menu li i { - display: none; - } - - .ant-menu-item, .ant-menu-submenu-title { - padding: 0 16px; - } - - .container { - padding: 40px 0 0 0; - } - - .container.user-center { - padding: 40px 0 30px 0; - } - - .container .content { - padding: unset; - } - - .container .breadcrumb { - margin: 35px 0; - } - - .container .content .home .carousel { - padding: 40px 0 0 0; - } - - .container .content .topic .banner img { - border-radius: unset; - } - - .container .content .topic .article { - border-radius: unset; - padding: 36px 16px 20px 16px; - } - - .container .content .topic .article.major .post_info { - border-radius: unset; - } - - .gallery .banner { - margin: 30px 0 20px 0; - } - - .ant-card { - border-radius: unset; - } - - .login .wrapper { - display: none; - } - - .login.activate .wrapper, .login .wrapper.registered { - display: flex; - } - - .login .login-panel { - margin: unset; - } - - .login .login-panel .logo { - padding: 26px 26px 10px 26px; - } - - .user-panel { - border-radius: 0 !important; - } - - footer { - margin: 0 auto; - width: 100%; - height: 50px; - border-top: none; - text-align: center - } - - footer ul li { - float: none !important; - margin-right: 0; - font-size: 12px !important; - line-height: 20px !important; - } - - footer ul li span { - display: none; - } - - footer ul li a { - font-size: 12px !important; - } -} - -@media (min-width: 768px) and (max-width: 992px) { - .container .content { - padding: unset; - } - -} - -@media (min-width: 992px) and (max-width: 1200px) { - -} - -@media (min-width: 1200px) { - .login .login-panel .welcome { - display: none; - } - - .login.register .login-panel .welcome { - display: block; - } - -} diff --git a/frontend/src/assets/css/style.less b/frontend/src/assets/css/style.less index 4deca2c0..a1cb7b31 100644 --- a/frontend/src/assets/css/style.less +++ b/frontend/src/assets/css/style.less @@ -31,7 +31,6 @@ a { text-decoration: none; -webkit-transition: all .3s ease; -moz-transition: all .3s ease; - -ms-transition: all .3s ease; -o-transition: all .3s ease; transition: all .3s ease; @@ -149,9 +148,34 @@ button { box-shadow: 0 0 30px rgba(200, 200, 200, 0.25); } -.ant-collapse { - background: #ffffff; - @media (prefers-color-scheme: dark) { - background: #28292c; - } +.ant-list-item-action { + margin-left: 0 !important; } + +/*@media (max-width: 900px) { + + .ant-steps-navigation > .ant-steps-item::after { + position: relative; + top: -2px; + left: 50%; + display: block; + width: 8px; + height: 8px; + margin-bottom: 8px; + text-align: center; + transform: rotate(135deg); + } + + .ant-steps-navigation > .ant-steps-item.ant-steps-item-active::before { + top: 0; + right: 0; + left: unset; + display: block; + width: 3px; + height: calc(100% - 24px); + } + + .ant-steps-horizontal.ant-steps-label-horizontal .ant-steps-item, .ant-steps-horizontal.ant-steps-label-horizontal { + display: block; + } +}*/ diff --git a/frontend/src/components/Logo/Logo.vue b/frontend/src/components/Logo/Logo.vue index 2c7e535e..d60345b3 100644 --- a/frontend/src/components/Logo/Logo.vue +++ b/frontend/src/components/Logo/Logo.vue @@ -19,13 +19,20 @@ export default { diff --git a/frontend/src/components/PageHeader/PageHeader.vue b/frontend/src/components/PageHeader/PageHeader.vue index c192e289..da44df00 100644 --- a/frontend/src/components/PageHeader/PageHeader.vue +++ b/frontend/src/components/PageHeader/PageHeader.vue @@ -68,7 +68,7 @@ export default { padding: 16px 32px 0; border-bottom: 1px solid #e8e8e8; @media (prefers-color-scheme: dark) { - background: transparent; + background: #28292c; border-bottom: unset; } diff --git a/frontend/src/components/VueItextarea/VueItextarea.vue b/frontend/src/components/VueItextarea/VueItextarea.vue index 90e8393c..f99b0f3d 100644 --- a/frontend/src/components/VueItextarea/VueItextarea.vue +++ b/frontend/src/components/VueItextarea/VueItextarea.vue @@ -1,5 +1,6 @@ diff --git a/frontend/src/layouts/BaseLayout.vue b/frontend/src/layouts/BaseLayout.vue index fadfa540..7646ff03 100644 --- a/frontend/src/layouts/BaseLayout.vue +++ b/frontend/src/layouts/BaseLayout.vue @@ -17,6 +17,7 @@ :collapsible="true" :style="{zIndex: 11}" theme="light" + class="layout-sider" > @@ -47,7 +48,7 @@ import HeaderLayout from './HeaderLayout' import SideBar from './SideBar' import FooterLayout from './FooterLayout' import PageHeader from '@/components/PageHeader/PageHeader' -import zh_CN from 'ant-design-vue/lib/locale-provider/zh_CN' +import zh_CN from 'ant-design-vue/es/locale/zh_CN' export default { name: 'BaseLayout', @@ -55,7 +56,7 @@ export default { return { collapsed: this.collapse(), zh_CN, - clientWidth: document.body.clientWidth + clientWidth: document.body.clientWidth, } }, mounted() { @@ -73,7 +74,28 @@ export default { methods: {} } +