From f1d4b2555685f1cf4a1c836b38f3b2e97e0fc17b Mon Sep 17 00:00:00 2001 From: "DESKTOP-RQ919RC\\Pc" <1300399510@qq.com> Date: Tue, 21 Oct 2025 19:05:17 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E6=96=B0=E5=A2=9E=E7=94=A8=E6=88=B7?= =?UTF-8?q?=E4=B8=BB=E9=A1=B5=E5=92=8C=E4=B8=AA=E4=BA=BA=E4=B8=BB=E9=A1=B5?= =?UTF-8?q?=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 新增用户主页和个人主页的HTML、CSS和JS文件 添加相关图片资源 重构sectionIndex页面为section-index.html 更新sectionIndex.js以支持组件导入 --- component/item-forum/item-forum.js | 27 +++ component/item-forum/item-forum.text | 5 + css/homepage-other.css | 229 +++++++++++++++++++++++ css/homepage-other.less | 269 +++++++++++++++++++++++++++ css/sectionIndex.css | 183 +++++++++++++++++- css/sectionIndex.less | 216 ++++++++++++++++++++- homepage-other.html | 88 +++++++++ img/copy-icon.png | Bin 0 -> 903 bytes img/triangle-red.svg | 6 + js/homepage-other.js | 13 ++ js/sectionIndex.js | 7 +- section-index.html | 210 +++++++++++++++++++++ sectionIndex.html | 117 ------------ 13 files changed, 1246 insertions(+), 124 deletions(-) create mode 100644 component/item-forum/item-forum.js create mode 100644 component/item-forum/item-forum.text create mode 100644 css/homepage-other.css create mode 100644 css/homepage-other.less create mode 100644 homepage-other.html create mode 100644 img/copy-icon.png create mode 100644 img/triangle-red.svg create mode 100644 js/homepage-other.js create mode 100644 section-index.html delete mode 100644 sectionIndex.html diff --git a/component/item-forum/item-forum.js b/component/item-forum/item-forum.js new file mode 100644 index 0000000..a205751 --- /dev/null +++ b/component/item-forum/item-forum.js @@ -0,0 +1,27 @@ +// my-component.js +// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window） +const { defineComponent } = Vue; +console.log("11223131321321"); + +// 定义组件（直接使用模板） +export const MyComponent = defineComponent({ + name: "MyComponent", + props: { + title: { + type: String, + default: "默认标题", + }, + }, + // 方法 + methods: { + handleClick() { + alert("组件按钮被点击"); + }, + }, + // 直接使用template选项，包含标题、文本内容和按钮 + template: `
+

{{ title }}

+

这是从text文件加载的模板内容

+ +
`, +}); diff --git a/component/item-forum/item-forum.text b/component/item-forum/item-forum.text new file mode 100644 index 0000000..ae3af1c --- /dev/null +++ b/component/item-forum/item-forum.text @@ -0,0 +1,5 @@ +
+

{{ title }}

+

这是从text文件加载的模板内容

+ +
\ No newline at end of file diff --git a/css/homepage-other.css b/css/homepage-other.css new file mode 100644 index 0000000..bd760c9 --- /dev/null +++ b/css/homepage-other.css @@ -0,0 +1,229 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; +} +body { + background-color: #eef2f5; +} +/* 公共的 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; +} +.one-line-display { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} +#homepage-other { + width: 1200px; + margin: 0 auto; +} +#homepage-other .head-top { + margin-bottom: 30px; +} +#homepage-other .head-top .logo { + height: 52px; +} +#homepage-other .head-top .input-box { + width: 370px; + height: 40px; + background-color: #ebebeb; + border: 2px solid #d7d7d7; + border-radius: 11px; + padding: 0 15px; + justify-content: space-between; + margin-right: 20px; +} +#homepage-other .head-top .input-box .input { + border: none; + outline: none; + height: 100%; + background-color: transparent; +} +#homepage-other .head-top .input-box .icon { + width: 18px; + height: 18px; + margin-left: 15rpx; + cursor: pointer; +} +#homepage-other .head-top .sign-in { + width: 192px; + height: 40px; + border-radius: 83px; + cursor: pointer; +} +#homepage-other .head-top .sign-in.sign-in-already { + background-color: #ffffff; + font-size: 14px; + color: #333; +} +#homepage-other .head-top .sign-in.sign-in-already .sign-icon { + width: 20px; + height: 20px; + margin-right: 10px; +} +#homepage-other .head-top .sign-in.sign-in-no { + position: relative; + z-index: 1; + padding-right: 8px; +} +#homepage-other .head-top .sign-in.sign-in-no .sign-in-bj { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 190px; + height: 40px; +} +#homepage-other .head-top .sign-in.sign-in-no .coin-bj { + position: absolute; + width: 157px; + height: 33px; + top: 4px; + left: 29px; +} +#homepage-other .head-top .sign-in.sign-in-no .coin-icon { + width: 43px; + height: 51px; + align-self: flex-end; + z-index: 1; + margin-left: -2px; +} +#homepage-other .head-top .sign-in.sign-in-no .text { + text-align: center; + text-shadow: 1px 1px 2px #a63603; + -webkit-text-shadow: 1px 1px 2px #a63603; + -moz-text-shadow: 1px 1px 2px #a63603; + font-size: 15px; + color: #fff; +} +#homepage-other .head-top .sign-in.sign-in-no .sign-go { + width: 30px; + height: 30px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + font-size: 12px; + color: #710600; + position: relative; +} +#homepage-other .head-top .sign-in.sign-in-no .sign-go .sign-go-bj { + width: 100%; + height: 100%; + position: absolute; + z-index: -1; +} +#homepage-other .head-top .sign-in.sign-in-no .petal1, +#homepage-other .head-top .sign-in.sign-in-no .petal2, +#homepage-other .head-top .sign-in.sign-in-no .petal3 { + position: absolute; +} +#homepage-other .head-top .sign-in.sign-in-no .petal1 { + width: 24px; + height: 10px; + top: 3px; + left: 55px; +} +#homepage-other .head-top .sign-in.sign-in-no .petal2 { + width: 16px; + height: 14px; + top: 25px; + left: 92px; +} +#homepage-other .head-top .sign-in.sign-in-no .petal3 { + width: 17px; + height: 12px; + top: 25px; + left: 136px; +} +#homepage-other .head-navigation { + margin-bottom: 20px; +} +#homepage-other .head-navigation .icon { + width: 16px; + height: 16px; +} +#homepage-other .head-navigation .arrows { + width: 7px; + height: 12px; + margin: 0 5px; +} +#homepage-other .head-navigation .text { + padding: 0 5px; + font-size: 14px; + color: #000000; + cursor: pointer; +} +#homepage-other .head-navigation .text:hover { + text-decoration: underline; +} +#homepage-other .matter .card-user { + width: 320px; + background: -webkit-linear-gradient(270.06444514deg, #ffffff 0%, #eef8f9 100%); + background: -moz-linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%); + background: linear-gradient(179.93555486deg, #ffffff 0%, #eef8f9 100%); + box-sizing: border-box; + border: 1px solid #e9eef2; + border-radius: 10px; + flex-direction: column; + padding-top: 115px; + padding-bottom: 40px; +} +#homepage-other .matter .card-user .avatar { + width: 120px; + height: 120px; + border-radius: 8px; +} +#homepage-other .matter .card-user .name-area .username { + font-size: 15px; + color: #333; +} +#homepage-other .matter .card-user .name-area .uid { + color: #7f7f7f; + font-size: 13px; +} +#homepage-other .matter .card-user .name-area .uid .icon { + width: 14px; + height: 14px; + margin-left: 9px; + cursor: pointer; +} +#homepage-other .matter .card-user .medal-area { + margin: 0 30px; + align-self: self-start; +} +#homepage-other .matter .card-user .medal-area .title { + font-size: 14px; + color: #7f7f7f; +} +#homepage-other .matter .card-user .medal-area .list { + flex-direction: row; +} +#homepage-other .matter .card-user .medal-area .list .item { + height: 30px; + max-width: 30px; +} diff --git a/css/homepage-other.less b/css/homepage-other.less new file mode 100644 index 0000000..d9a815f --- /dev/null +++ b/css/homepage-other.less @@ -0,0 +1,269 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: "PingFangSC-Regular", "PingFang SC", sans-serif; + font-weight: 400; + font-style: normal; +} + +body { + background-color: rgba(238, 242, 245, 1); +} + +/* 公共的 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; +} + +.one-line-display { + word-break: keep-all; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#homepage-other { + width: 1200px; + margin: 0 auto; + .head-top { + margin-bottom: 30px; + + .logo { + height: 52px; + } + + .input-box { + width: 370px; + height: 40px; + background-color: rgba(235, 235, 235, 1); + border: 2px solid rgba(215, 215, 215, 1); + border-radius: 11px; + padding: 0 15px; + justify-content: space-between; + margin-right: 20px; + + .input { + border: none; + outline: none; + height: 100%; + background-color: transparent; + } + + .icon { + width: 18px; + height: 18px; + margin-left: 15rpx; + cursor: pointer; + } + } + + .sign-in { + width: 192px; + height: 40px; + border-radius: 83px; + cursor: pointer; + + &.sign-in-already { + background-color: #ffffff; + font-size: 14px; + color: #333; + .sign-icon { + width: 20px; + height: 20px; + margin-right: 10px; + } + } + + &.sign-in-no { + position: relative; + z-index: 1; + padding-right: 8px; + .sign-in-bj { + position: absolute; + top: 0; + left: 0; + z-index: -1; + width: 190px; + height: 40px; + } + + .coin-bj { + position: absolute; + width: 157px; + height: 33px; + top: 4px; + left: 29px; + } + + .coin-icon { + width: 43px; + height: 51px; + align-self: flex-end; + z-index: 1; + margin-left: -2px; + } + + .text { + text-align: center; + text-shadow: 1px 1px 2px #a63603; + -webkit-text-shadow: 1px 1px 2px #a63603; + -moz-text-shadow: 1px 1px 2px #a63603; + font-size: 15px; + color: #fff; + } + + .sign-go { + width: 30px; + height: 30px; + font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif; + font-weight: 700; + font-size: 12px; + color: #710600; + position: relative; + + .sign-go-bj { + width: 100%; + height: 100%; + position: absolute; + z-index: -1; + } + } + + .petal1, + .petal2, + .petal3 { + position: absolute; + } + + .petal1 { + width: 24px; + height: 10px; + top: 3px; + left: 55px; + } + + .petal2 { + width: 16px; + height: 14px; + top: 25px; + left: 92px; + } + .petal3 { + width: 17px; + height: 12px; + top: 25px; + left: 136px; + } + } + } + } + + .head-navigation { + margin-bottom: 20px; + .icon { + width: 16px; + height: 16px; + } + + .arrows { + width: 7px; + height: 12px; + margin: 0 5px; + } + + .text { + padding: 0 5px; + font-size: 14px; + color: #000000; + cursor: pointer; + &:hover { + text-decoration: underline; + } + } + } + + .matter { + .card-user { + width: 320px; + background: -webkit-linear-gradient(270.064445137829deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%); + background: -moz-linear-gradient(179.935554862171deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%); + background: linear-gradient(179.935554862171deg, rgba(255, 255, 255, 1) 0%, rgba(238, 248, 249, 1) 100%); + box-sizing: border-box; + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + flex-direction: column; + padding-top: 115px; + padding-bottom: 40px; + + .avatar { + width: 120px; + height: 120px; + border-radius: 8px; + } + + .name-area { + .username { + font-size: 15px; + color: #333; + } + + .uid { + color: #7f7f7f; + font-size: 13px; + .icon { + width: 14px; + height: 14px; + margin-left: 9px; + cursor: pointer; + } + } + } + + .medal-area { + margin: 0 30px; + align-self: self-start; + .title { + font-size: 14px; + color: #7f7f7f; + } + + .list { + flex-direction: row; + .item { + height: 30px; + max-width: 30px; + } + } + } + } + + .matter-content { + } + } +} diff --git a/css/sectionIndex.css b/css/sectionIndex.css index 3642903..5b44c89 100644 --- a/css/sectionIndex.css +++ b/css/sectionIndex.css @@ -333,12 +333,13 @@ body { border: 1px solid #e9eef2; border-radius: 10px; padding: 19px 14px; + margin-bottom: 20px; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .head-top { width: 64px; height: 24px; border-radius: 20px 20px 20px 0; - margin-bottom: 22px; + margin-bottom: 13px; background-color: #f68251; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .head-top .icon { @@ -355,7 +356,7 @@ body { } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list { flex-wrap: wrap; - padding: 0 5px; + padding: 0 50px 0 5px; justify-content: space-between; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item { @@ -364,6 +365,10 @@ body { line-height: 20px; margin-bottom: 12px; position: relative; + cursor: pointer; +} +#sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item:hover { + color: #000000; } #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item .dot { width: 6px; @@ -375,6 +380,180 @@ body { #sectionIndex .matter .matter-content .details-box .content-box .selectives-box .list .item .text { width: 265px; } +#sectionIndex .matter .matter-content .details-box .content-box .red-tag { + width: 732px; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding-top: 21px; + padding-bottom: 8px; + margin-bottom: 12px; +} +#sectionIndex .matter .matter-content .details-box .content-box .red-tag .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + padding: 0 21px; + margin-bottom: 12px; + position: relative; +} +#sectionIndex .matter .matter-content .details-box .content-box .red-tag .title .icon { + width: 10px; + height: 18px; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); +} +#sectionIndex .matter .matter-content .details-box .content-box .red-tag .list { + flex-wrap: wrap; + display: flex; + padding: 0 21px; +} +#sectionIndex .matter .matter-content .details-box .content-box .red-tag .list .item { + height: 32px; + background-color: #f6f6f6; + border: 1px solid #f2f2f2; + border-radius: 16px; + line-height: 36px; + font-size: 14px; + color: #333333; + padding: 0 21px; + margin-right: 10px; + margin-bottom: 14px; + cursor: pointer; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box { + width: 732px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box { + width: 100%; + background-color: #ffffff; + border: 1px solid #e9eef2; + border-radius: 10px; + padding: 18px 20px 0; + margin-bottom: 12px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head { + margin-bottom: 14px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .avatar { + width: 28px; + height: 28px; + border-radius: 50%; + margin-right: 8px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .name { + font-style: normal; + color: #555555; + font-size: 14px; + margin-right: 8px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .group { + height: 15px; + margin-right: 8px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .time { + font-size: 13px; + color: #aaaaaa; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view { + font-size: 12px; + color: #aaaaaa; + margin-right: 15px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .view .icon { + width: 13px; + height: 8px; + margin-right: 5px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn { + width: 24px; + height: 16px; + background-color: #f2f2f2; + border-radius: 150px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .item-head .btn .icon { + width: 18px; + height: 18px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label { + margin-bottom: 10px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item { + font-size: 14px; + color: #555555; + padding: 0 9px; + height: 24px; + line-height: 24px; + background-color: #f2f2f2; + border-radius: 6px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.icon { + padding: 0; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item:not(:last-child) { + margin-right: 10px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .label .item.blue { + color: #ffffff; + background-color: #04b0d5; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .title { + font-weight: 650; + font-size: 20px; + color: #000000; + line-height: 36px; + margin-bottom: 7px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .message { + font-size: 14px; + color: #555555; + white-space: pre-wrap; + margin-bottom: 15px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment { + height: 40px; + background-color: #f6f6f6; + border-radius: 10px; + padding: 0 10px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .icon { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .comment .text { + font-size: 14px; + color: #7f7f7f; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom { + height: 55px; + justify-content: flex-end; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item { + cursor: pointer; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item:not(:last-child) { + margin-right: 60px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .icon { + width: 20px; + height: 20px; + margin-right: 8px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item .text { + color: #aaaaaa; + font-size: 13px; +} +#sectionIndex .matter .matter-content .details-box .content-box .list-box .item-box .bottom .bottom-item.like .icon { + width: 18px; + height: 18px; +} #sectionIndex .matter .matter-content .details-box .side-box { width: 291px; height: 300px; diff --git a/css/sectionIndex.less b/css/sectionIndex.less index a40ff99..57bacd6 100644 --- a/css/sectionIndex.less +++ b/css/sectionIndex.less @@ -376,12 +376,13 @@ body { border: 1px solid #e9eef2; border-radius: 10px; padding: 19px 14px; - + margin-bottom: 20px; + .head-top { width: 64px; height: 24px; border-radius: 20px 20px 20px 0; - margin-bottom: 22px; + margin-bottom: 13px; background-color: rgba(246, 130, 81, 1); .icon { width: 15px; @@ -400,7 +401,7 @@ body { .list { flex-wrap: wrap; - padding: 0 5px; + padding: 0 50px 0 5px; justify-content: space-between; .item { @@ -409,6 +410,10 @@ body { line-height: 20px; margin-bottom: 12px; position: relative; + cursor: pointer; + &:hover { + color: #000000; + } .dot { width: 6px; @@ -424,6 +429,211 @@ body { } } } + + .red-tag { + width: 732px; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding-top: 21px; + padding-bottom: 8px; + margin-bottom: 12px; + + .title { + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + font-weight: 650; + font-style: normal; + font-size: 16px; + color: #000000; + padding: 0 21px; + margin-bottom: 12px; + position: relative; + .icon { + width: 10px; + height: 18px; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + } + } + + .list { + flex-wrap: wrap; + display: flex; + padding: 0 21px; + + .item { + height: 32px; + background-color: rgba(246, 246, 246, 1); + border: 1px solid rgba(242, 242, 242, 1); + border-radius: 16px; + line-height: 36px; + font-size: 14px; + color: #333333; + padding: 0 21px; + margin-right: 10px; + margin-bottom: 14px; + cursor: pointer; + } + } + } + + .list-box { + width: 732px; + + .item-box { + width: 100%; + background-color: rgba(255, 255, 255, 1); + border: 1px solid rgba(233, 238, 242, 1); + border-radius: 10px; + padding: 18px 20px 0; + margin-bottom: 12px; + + .item-head { + margin-bottom: 14px; + .avatar { + width: 28px; + height: 28px; + border-radius: 50%; + margin-right: 8px; + } + + .name { + font-style: normal; + color: #555555; + font-size: 14px; + margin-right: 8px; + } + + .group { + height: 15px; + margin-right: 8px; + } + + .time { + font-size: 13px; + color: #aaaaaa; + } + + .view { + font-size: 12px; + color: #aaaaaa; + margin-right: 15px; + + .icon { + width: 13px; + height: 8px; + margin-right: 5px; + } + } + + .btn { + width: 24px; + height: 16px; + background-color: rgba(242, 242, 242, 1); + border-radius: 150px; + + .icon { + width: 18px; + height: 18px; + } + } + } + + .label { + margin-bottom: 10px; + + .item { + font-size: 14px; + color: #555555; + padding: 0 9px; + height: 24px; + line-height: 24px; + background-color: rgba(242, 242, 242, 1); + border-radius: 6px; + + &.icon { + padding: 0; + } + + &:not(:last-child) { + margin-right: 10px; + } + + &.blue { + color: #ffffff; + background-color: #04b0d5; + } + } + } + + .title { + font-weight: 650; + font-size: 20px; + color: #000000; + line-height: 36px; + margin-bottom: 7px; + font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif; + } + + .message { + font-size: 14px; + color: #555555; + white-space: pre-wrap; + margin-bottom: 15px; + } + + .comment { + height: 40px; + background-color: rgba(246, 246, 246, 1); + border-radius: 10px; + padding: 0 10px; + + .icon { + width: 20px; + height: 20px; + border-radius: 50%; + margin-right: 10px; + } + + .text { + font-size: 14px; + color: #7f7f7f; + } + } + + .bottom { + height: 55px; + justify-content: flex-end; + + .bottom-item { + cursor: pointer; + &:not(:last-child) { + margin-right: 60px; + } + + .icon { + width: 20px; + height: 20px; + margin-right: 8px; + } + + .text { + color: #aaaaaa; + font-size: 13px; + } + + &.like { + .icon { + width: 18px; + height: 18px; + } + } + } + } + } + } } .side-box { diff --git a/homepage-other.html b/homepage-other.html new file mode 100644 index 0000000..e64c419 --- /dev/null +++ b/homepage-other.html @@ -0,0 +1,88 @@ + + + + + + + Document + + + + + +
+
+ +
+
+ + +
+ + + +
+ +
+ +
首页
+ +
GTSuperstar 的个人主页
+
+ +
+
+ 用户头像 + +
+

GTSuperstar

+

+ UID: 3276161 + +

+
+ +
+

勋章 6

+
+ 勋章1 +
+
+ +
+
发私信
+
用户管理
+
内容管理
+
+
+
+ +
+
+
+ + + + \ No newline at end of file diff --git a/img/copy-icon.png b/img/copy-icon.png new file mode 100644 index 0000000000000000000000000000000000000000..66dbc4c836fa96869967c6f592df364072b9d567 GIT binary patch literal 903 zcmV;219<$2P)Px#L}ge>W=%~1DgXcg2mk?xX#fNO00031000^Q000001E2u_0{{R30RRC20H6W@ z1ONa40RR91FrWhf1ONa40RR91FaQ7m0NXcg3;+NE@kvBMRA>e5S>18sFc7v4JfBN& z2j>o=tKibX`6>v^0I$it!UNC&9UL9R>3~#_qyu<{f%{gY^(Y!_*_YTNGt!LMm9*M_ zFR%`RFFwMi`p@U{pSY7Yz1Nifd_M1RXFC`S-bSO*YuWuq20-~W82>6`*5ZC1hT)&d zWRjaQB6Fi^4ds)n^A^tpWIw`z3sXj;2+U?PN}Z+2q{TJK`)2T8O{dc#?=>=jFLepw zv<&jdX@wz3ryrb7jZ&yf#aR}-y#_8Y_n2}Zo$eXGdILyN7_kK?(gwI#EEWl1@Fff& zMO7pSmE(9kCWQ3m>cR(d?*_RR<0!pw{NXL6!46EUb>0y4g!PTuBfau>1|Tf);c%c* zb&DB8h@x!|Kwbc6mDc$($*0pPrn4f2P-6v{yN~vs7sT%r zM+!ZwP}}(Y?|F)gMR|m*A#@4#I&WjlDP$_Y!f%iV{07)_J0-8uSd@Y6MSaxzf&BLm_hu=0i?&2 z$fZC2OZw|O9*;Lf%Y7lsz3Vtu-3y^>-Q2~cwRVwSa6EQxglaI~u^z~Z4dXT_ zU$cV25`+Z<;5*C*%q?bXBZ{H~9k>hvgeGK<)_zjAJ1)Nm=v@Gssq~iQyJ8drl2NS= zC~xwo7Q3jcJYAMmh%WT|eS!6gHXV&O$QA0#s-79Q;KzlJk%qilYAyl9?vm1 dW_!J^kbfa5@(Ir9bin`s002ovPDHLkV1k5QgfsvE literal 0 HcmV?d00001 diff --git a/img/triangle-red.svg b/img/triangle-red.svg new file mode 100644 index 0000000..2ec917d --- /dev/null +++ b/img/triangle-red.svg @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/js/homepage-other.js b/js/homepage-other.js new file mode 100644 index 0000000..da4b270 --- /dev/null +++ b/js/homepage-other.js @@ -0,0 +1,13 @@ +const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue; +import { MyComponent } from "../component/item-forum/item-forum.js"; + +const appSectionIndex = createApp({ + setup() { + let signInAlreadyState = ref(false); + console.log(23212312311111); + + return { signInAlreadyState }; + }, +}); +appSectionIndex.component("MyComponent", MyComponent); +appSectionIndex.mount("#homepage-other"); diff --git a/js/sectionIndex.js b/js/sectionIndex.js index c733011..6cb78f0 100644 --- a/js/sectionIndex.js +++ b/js/sectionIndex.js @@ -1,9 +1,12 @@ const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue; +import { MyComponent } from "../component/item-forum/item-forum.js"; -createApp({ +const appSectionIndex = createApp({ setup() { let signInAlreadyState = ref(false); return { signInAlreadyState }; }, -}).mount("#sectionIndex"); +}); +appSectionIndex.component("MyComponent", MyComponent); +appSectionIndex.mount("#sectionIndex"); diff --git a/section-index.html b/section-index.html new file mode 100644 index 0000000..55b9e21 --- /dev/null +++ b/section-index.html @@ -0,0 +1,210 @@ + + + + + + + Document + + + + + +
+
+ +
+
+ + +
+ + + +
+ +
+ +
首页
+ +
首页
+
+ +
+
+
论坛版块
+
+
+ 香港 +
+
+
+
+ 香港 +
+
+
+
+ 香港 +
+
+
+
+ 香港 +
+
+
+
+
+ +
+
香港留学
+
+
+
申港超强资料包
+ +
+
+
+
+ 共 +
124,098
+ 个帖子 +
+
+ +
发帖
+
+
+
+
+
+
+
+
+ +
精选
+
+
+
+
+
美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）
+
+
+
+ +
+
热门标签 + +
+
+
热门标签
+
+
+ +
+
+
+ +
小P学姐
+ +
2025-8-11 01:30
+
+ +
+ +
3016
+
+ +
+ +
+ + +
+ +
+ + +
香港
+
香港
+
+ +
【干货】香港留学费用准备
+ +
+ 在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定… +
+ +
+ +
+ 在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定… +
+
+ +
+ + + + +
+
+
+ +
+
+
+
+
+
+ + + + \ No newline at end of file diff --git a/sectionIndex.html b/sectionIndex.html deleted file mode 100644 index fbff579..0000000 --- a/sectionIndex.html +++ /dev/null @@ -1,117 +0,0 @@ - - - - - - Document - - - - - -
-
- -
-
- - -
- - - -
- -
- -
首页
- -
首页
-
- -
-
-
论坛版块
-
-
- 香港 -
-
-
-
- 香港 -
-
-
-
- 香港 -
-
-
-
- 香港 -
-
-
-
-
- -
-
香港留学
-
-
-
申港超强资料包
- -
-
-
-
- 共 -
124,098
- 个帖子 -
-
- -
发帖
-
-
-
-
-
-
-
-
- -
精选
-
-
-
-
-
美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）
-
-
-
-
-
-
-
-
-
- - -