+
{{ item.coins || "投币" }}
-
+
转发
diff --git a/component/item-forum/item-forum.js b/component/item-forum/item-forum.js
index 8de34d4..afbc3bf 100644
--- a/component/item-forum/item-forum.js
+++ b/component/item-forum/item-forum.js
@@ -1,6 +1,6 @@
// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent } = Vue;
+const { defineComponent, ref } = Vue;
import { itemBottom } from "../item-bottom/item-bottom.js";
import { itemHead } from "../item-head/item-head.js";
@@ -8,16 +8,20 @@ import { itemHead } from "../item-head/item-head.js";
export const itemForum = defineComponent({
name: "item-forum",
props: {
- title: {
- type: String,
- default: "默认标题",
+ itemdata: {
+ type: Object,
+ default: () => {},
},
},
- // 方法
- methods: {
- handleClick() {
- alert("组件按钮被点击");
- },
+
+ setup(props) {
+ let res = props.itemdata;
+ res.content = res?.content?.replace(/\[.*?\]/g, "");
+ res.content = res?.content?.replace(/\<.*?\>/g, "");
+ res.content = res?.content?.replace(/\[.*?\../g, "");
+
+ let item = ref({ ...res });
+ return { item };
},
components: {
@@ -25,5 +29,5 @@ export const itemForum = defineComponent({
itemHead,
},
- template: `
香港
香港
【干货】香港留学费用准备
在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…
`,
+ template: `
{{ item.title }}
{{ item.content }}
`,
});
diff --git a/component/item-forum/item-forum.txt b/component/item-forum/item-forum.txt
index 21f862f..40b92ef 100644
--- a/component/item-forum/item-forum.txt
+++ b/component/item-forum/item-forum.txt
@@ -1,15 +1,9 @@
-
-
-
-
-
香港
-
香港
-
+
-
【干货】香港留学费用准备
+
{{ item.title }}
-
在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…
+
{{ item.content }}
-
+
\ No newline at end of file
diff --git a/component/item-head/item-head.js b/component/item-head/item-head.js
index 1b9e63c..9759e0e 100644
--- a/component/item-head/item-head.js
+++ b/component/item-head/item-head.js
@@ -1,22 +1,32 @@
// my-component.js
// 引入全局 Vue 对象（因在 HTML 中通过 script 引入，Vue 已挂载到 window）
-const { defineComponent } = Vue;
+const { defineComponent, ref } = Vue;
// 定义组件（直接使用模板）
export const itemHead = defineComponent({
name: "item-head",
props: {
- title: {
- type: String,
- default: "默认标题",
- },
- },
- // 方法
- methods: {
- handleClick() {
- alert("组件按钮被点击");
+ itemdata: {
+ type: Object,
+ default: () => {},
},
},
- template: `
小P学姐
2025-8-11 01:30
3016
`,
+ setup(props) {
+ let sectionn = ref([]);
+ let tags = ref([]);
+ let item = ref({ ...props.itemdata });
+
+ let timestamp = ref(strtimeago(item.value.release_at, 4));
+
+ if (item.value.type == "tenement") timestamp = timeago(item.value.updatetime, 2);
+ sectionn.value = item.value.sectionn || [];
+
+ const sectionSet = new Set(sectionn.value);
+ tags.value = item.value.tags.filter((tag) => !sectionSet.has(tag));
+
+ return { item, timestamp, sectionn, tags };
+ },
+
+ template: `
![]()
{{ item.user.nickname || item.nickname || '匿名用户' }}
{{ timestamp }}
{{ item.views }}
{{ item }}
{{ item }}
`,
});
diff --git a/component/item-head/item-head.txt b/component/item-head/item-head.txt
index dbe4d10..da1ea1a 100644
--- a/component/item-head/item-head.txt
+++ b/component/item-head/item-head.txt
@@ -1,16 +1,16 @@
-
-
小P学姐
-
-
2025-8-11 01:30
+
![]()
+
{{ item.user.nickname || item.nickname || '匿名用户' }}
+
+
{{ timestamp }}
-
3016
+
{{ item.views }}
-
-->
-
\ No newline at end of file
+
+
+
+
+
+
{{ item }}
+
{{ item }}
+
\ No newline at end of file
diff --git a/component/item-offer/item-offer.js b/component/item-offer/item-offer.js
index 84c0057..9017cbe 100644
--- a/component/item-offer/item-offer.js
+++ b/component/item-offer/item-offer.js
@@ -8,21 +8,11 @@ import { itemHead } from "../item-head/item-head.js";
export const itemOffer = defineComponent({
name: "item-offer",
props: {
- title: {
- type: String,
- default: "默认标题",
- },
item: {
type: Object,
default: () => {},
},
},
- // 方法
- methods: {
- handleClick() {
- alert("组件按钮被点击");
- },
- },
components: {
itemBottom,
diff --git a/component/item-summary/item-summary.js b/component/item-summary/item-summary.js
index ec4f2cb..be5dfa0 100644
--- a/component/item-summary/item-summary.js
+++ b/component/item-summary/item-summary.js
@@ -8,21 +8,11 @@ import { itemHead } from "../item-head/item-head.js";
export const itemSummary = defineComponent({
name: "item-summary",
props: {
- title: {
- type: String,
- default: "默认标题",
- },
item: {
type: Object,
default: () => {},
},
},
- // 方法
- methods: {
- handleClick() {
- alert("组件按钮被点击");
- },
- },
components: {
itemBottom,
diff --git a/component/item-tenement/item-tenement.js b/component/item-tenement/item-tenement.js
index 7a4f7e4..94f5086 100644
--- a/component/item-tenement/item-tenement.js
+++ b/component/item-tenement/item-tenement.js
@@ -34,5 +34,5 @@ export const itemTenement = defineComponent({
itemHead,
},
- template: `
{{ item.title }}
{{ item.content }}
进行中
{{ item?.time.num }}
{{ item.time.unit }}后结束 已结束
{{ item?.data?.votes }}
人参与
{{ index + 1 }}
{{ item.value }}
`,
+ template: `
三房找一位室友合租，家具设备齐全
{{ item }}
{{ item.location || '九龙 > 尖沙咀/佐敦' }}
HK$
{{ item.rent }}
/月 [ 租期{{ item.rentalduration }} ]
`,
});
diff --git a/component/item-tenement/item-tenement.txt b/component/item-tenement/item-tenement.txt
index 6e2c881..d6c3b5d 100644
--- a/component/item-tenement/item-tenement.txt
+++ b/component/item-tenement/item-tenement.txt
@@ -1,5 +1,30 @@
-
+
三房找一位室友合租，家具设备齐全
+
+
+
+
+
+ {{ item }}
+
+
+
+ {{ item.location || '九龙 > 尖沙咀/佐敦' }}
+
+
+
+
+
HK$
+
{{ item.rent }}
+
/月
+
[ 租期{{ item.rentalduration }} ]
+
+
+
+
+
+
\ No newline at end of file
diff --git a/css/details.css b/css/details.css
new file mode 100644
index 0000000..fd3b7cf
--- /dev/null
+++ b/css/details.css
@@ -0,0 +1,496 @@
+#details {
+ width: 1200px;
+ margin: 0 auto;
+}
+#details .head-top {
+ margin-bottom: 30px;
+}
+#details .head-top .logo {
+ height: 52px;
+}
+#details .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;
+}
+#details .head-top .input-box .input {
+ border: none;
+ outline: none;
+ height: 100%;
+ background-color: transparent;
+}
+#details .head-top .input-box .icon {
+ width: 18px;
+ height: 18px;
+ margin-left: 15rpx;
+ cursor: pointer;
+}
+#details .head-top .post-list .post-item {
+ width: 84px;
+ height: 34px;
+ cursor: pointer;
+}
+#details .head-top .post-list .post-item:not(:last-child) {
+ margin-right: 10px;
+}
+#details .head-navigation {
+ margin-bottom: 20px;
+}
+#details .head-navigation .icon {
+ width: 16px;
+ height: 16px;
+}
+#details .head-navigation .arrows {
+ width: 7px;
+ height: 12px;
+ margin: 0 5px;
+}
+#details .head-navigation .text {
+ padding: 0 5px;
+ font-size: 14px;
+ color: #000000;
+ cursor: pointer;
+}
+#details .head-navigation .text:hover {
+ text-decoration: underline;
+}
+#details .matter {
+ align-items: flex-start;
+ margin-bottom: 50px;
+}
+#details .matter .matter-left {
+ width: 890px;
+ margin-right: 20px;
+}
+#details .matter .matter-left .block {
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 10px;
+ margin-bottom: 12px;
+}
+#details .matter .matter-left .matter-head {
+ height: 80px;
+ padding-left: 30px;
+ padding-right: 30px;
+ border-bottom: 1px solid #ebebeb;
+}
+#details .matter .matter-left .matter-head .avatar {
+ width: 40px;
+ height: 40px;
+ margin-right: 16px;
+}
+#details .matter .matter-left .matter-head .content {
+ flex-direction: column;
+}
+#details .matter .matter-left .matter-head .content .name {
+ font-size: 14px;
+ color: #333333;
+ margin-bottom: 2px;
+}
+#details .matter .matter-left .matter-head .content .name .icon {
+ height: 14px;
+}
+#details .matter .matter-left .matter-head .content .time {
+ font-size: 13px;
+ color: #aaaaaa;
+}
+#details .matter .matter-left .matter-head .operate .view {
+ font-size: 12px;
+ color: #aaaaaa;
+ margin-right: 15px;
+}
+#details .matter .matter-left .matter-head .operate .view .icon {
+ width: 13px;
+ height: 8px;
+ margin-right: 5px;
+}
+#details .matter .matter-left .matter-head .operate .btn {
+ width: 24px;
+ height: 16px;
+ background-color: #f2f2f2;
+ border-radius: 150px;
+}
+#details .matter .matter-left .matter-head .operate .btn .icon {
+ width: 18px;
+ height: 18px;
+}
+#details .matter .matter-left .label {
+ padding: 20px 30px 20px;
+}
+#details .matter .matter-left .label .item {
+ font-size: 14px;
+ color: #555555;
+ padding: 0 9px;
+ height: 24px;
+ line-height: 24px;
+ background-color: #f2f2f2;
+ border-radius: 6px;
+ margin-bottom: 10px;
+}
+#details .matter .matter-left .label .item.icon {
+ padding: 0;
+}
+#details .matter .matter-left .label .item:not(:last-child) {
+ margin-right: 10px;
+}
+#details .matter .matter-left .label .item.blue {
+ color: #ffffff;
+ background-color: #04b0d5;
+}
+#details .matter .matter-left .title {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 24px;
+ color: #000000;
+ line-height: 36px;
+ padding: 0 30px;
+ margin-bottom: 30px;
+}
+#details .matter .matter-left .html {
+ padding: 0 30px;
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-size: 15px;
+ color: #555555;
+ line-height: 24px;
+ margin-bottom: 66px;
+}
+#details .matter .matter-left .last-time {
+ color: #aaaaaa;
+ font-size: 13px;
+ padding: 0 30px 20px;
+}
+#details .matter .matter-left .bottom {
+ border-top: 1px solid #ebebeb;
+ height: 64px;
+ line-height: 64px;
+ justify-content: flex-end;
+ padding-right: 30px;
+ position: sticky;
+ bottom: 0;
+ background: #ffff;
+ border-radius: 0 0 10px 10px;
+}
+#details .matter .matter-left .bottom .bottom-item {
+ font-size: 14px;
+ color: #333333;
+}
+#details .matter .matter-left .bottom .bottom-item .icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 6px;
+}
+#details .matter .matter-left .bottom .bottom-item:not(:last-child) {
+ margin-right: 60px;
+}
+#details .matter .matter-left .related .related-head {
+ padding-left: 30px;
+ padding-top: 20px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #ebebeb;
+}
+#details .matter .matter-left .related .related-head .text {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 16px;
+ color: #000000;
+ margin-right: 14px;
+}
+#details .matter .matter-left .related .related-head .time {
+ font-family: "ArialMT", "Arial", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+}
+#details .matter .matter-left .related .list {
+ padding: 14px 30px;
+ flex-wrap: wrap;
+}
+#details .matter .matter-left .related .list .item {
+ width: 50%;
+ font-size: 14px;
+ color: #555555;
+ cursor: pointer;
+}
+#details .matter .matter-left .related .list .item:hover {
+ color: #000000;
+}
+#details .matter .matter-left .related .list .item .dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #f68251;
+ margin-right: 10px;
+}
+#details .matter .matter-left .related .list .item:not(:nth-last-child(-n + 2)) {
+ margin-bottom: 7px;
+}
+#details .matter .matter-left .related .list .item .text {
+ width: 352px;
+}
+#details .matter .sidebar-box .adv {
+ width: 291px;
+ height: 220px;
+ margin-bottom: 12px;
+ display: block;
+ cursor: pointer;
+}
+#details .matter .sidebar-box .adv .adv-img {
+ width: 291px;
+ height: 220px;
+ border-radius: 8px;
+}
+#details .matter .sidebar-box .sidebar-item {
+ width: 291px;
+ background-color: #ffffff;
+ border-radius: 8px;
+ margin-bottom: 12px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-header {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 15px;
+ color: #000000;
+ padding: 16px;
+ border-bottom: 1px solid #f2f2f2;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content {
+ flex-direction: column;
+ padding: 20px 0;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .sidebar-QRCode {
+ width: 120px;
+ height: 120px;
+ margin-bottom: 18px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .hint {
+ font-size: 14px;
+ color: #555555;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .hint .saoma-icon {
+ width: 14px;
+ height: 14px;
+ margin-right: 8px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box {
+ padding: 16px 5px 30px 16px;
+ width: 100%;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 22px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-name {
+ font-size: 14px;
+ color: #000000;
+ margin-bottom: 11px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-info {
+ color: #7f7f7f;
+ font-size: 13px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .author-box .author-content .author-info .amount {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .medal {
+ width: calc(100% - 16px);
+ padding-bottom: 22px;
+ margin-left: 16px;
+ border-bottom: 1px solid #f2f2f2;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 14px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-list {
+ flex-wrap: wrap;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .medal .medal-list .medal-item {
+ width: 32px;
+ height: 32px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .recently {
+ width: 100%;
+ padding: 30px 16px 10px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 14px;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list {
+ flex-direction: column;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item {
+ font-size: 14px;
+ color: #000000;
+ margin-bottom: 9px;
+ cursor: pointer;
+}
+#details .matter .sidebar-box .sidebar-item .sidebar-content .recently .recently-list .recently-item .dot {
+ width: 6px;
+ height: 6px;
+ margin-right: 8px;
+ border-radius: 50%;
+ background-color: #f68251;
+ margin-right: 10px;
+}
+#details .coins-area {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+}
+#details .coins-area .coins-box {
+ width: 624px;
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 11px;
+ flex-direction: column;
+ padding: 40px 30px 35px;
+ position: relative;
+}
+#details .coins-area .coins-box .fork {
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ cursor: pointer;
+}
+#details .coins-area .coins-box .coins-head {
+ margin-bottom: 32px;
+}
+#details .coins-area .coins-box .coins-head .icon {
+ width: 50px;
+ height: 60px;
+ margin-right: 16px;
+}
+#details .coins-area .coins-box .coins-head .text {
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-weight: 400;
+ color: #7f7f7f;
+ font-size: 14px;
+}
+#details .coins-area .coins-box .coins-head .text .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-size: 18px;
+ color: #000000;
+ margin: 0 5px;
+}
+#details .coins-area .coins-box .coins-input {
+ width: 333px;
+ height: 36px;
+ background-color: #ffffff;
+ border: 1px solid #d7d7d7;
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 31px;
+}
+#details .coins-area .coins-box .coins-input .input {
+ height: 100%;
+ border: none;
+ outline: none;
+ font-size: 14px;
+ padding: 0 10px;
+}
+#details .coins-area .coins-box .coins-input .btn {
+ width: 84px;
+ height: 100%;
+ line-height: 36px;
+ text-align: center;
+ background-color: #50e3c2;
+}
+#details .coins-area .coins-box .coins-info {
+ color: #555555;
+ font-size: 14px;
+ margin-bottom: 43px;
+}
+#details .coins-area .coins-box .coins-info .icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 6px;
+}
+#details .coins-area .coins-box .coins-info .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+}
+#details .coins-area .coins-box .coins-info .strategy {
+ margin-left: 5px;
+ color: #026277;
+ cursor: pointer;
+}
+#details .coins-area .coins-box .coins-list-area {
+ max-height: 347px;
+ background-color: #fbfbfb;
+ border-radius: 16px;
+ width: 100%;
+ padding: 20px 20px 0;
+ flex-direction: column;
+}
+#details .coins-area .coins-box .coins-list-area .coins-total {
+ color: #7f7f7f;
+ font-size: 14px;
+}
+#details .coins-area .coins-box .coins-list-area .coins-total .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+}
+#details .coins-area .coins-box .coins-list-area .list {
+ overflow: auto;
+}
+#details .coins-area .coins-box .coins-list-area .list .item {
+ height: 65px;
+ padding: 0 35px;
+}
+#details .coins-area .coins-box .coins-list-area .list .item:not(:last-child) {
+ border-bottom: 1px solid #f2f2f2;
+}
+#details .coins-area .coins-box .coins-list-area .list .item .serial {
+ font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: #ffb600;
+ margin-right: 114px;
+}
+#details .coins-area .coins-box .coins-list-area .list .item .user {
+ color: #555555;
+ font-size: 13px;
+}
+#details .coins-area .coins-box .coins-list-area .list .item .user .avatar {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+}
+#details .coins-area .coins-box .coins-list-area .list .item .amount {
+ color: #000000;
+ font-size: 16px;
+}
+#details .coins-area .coins-box .coins-list-area .list .item .amount .text {
+ font-size: 13px;
+ margin-left: 2px;
+}
diff --git a/css/details.less b/css/details.less
new file mode 100644
index 0000000..a532df0
--- /dev/null
+++ b/css/details.less
@@ -0,0 +1,585 @@
+#details {
+ 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;
+ }
+ }
+
+ .post-list {
+ .post-item {
+ width: 84px;
+ height: 34px;
+ cursor: pointer;
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+
+ .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 {
+ align-items: flex-start;
+ margin-bottom: 50px;
+
+ .matter-left {
+ width: 890px;
+ margin-right: 20px;
+
+ .block {
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 10px;
+ margin-bottom: 12px;
+ }
+
+ .matter-head {
+ height: 80px;
+ padding-left: 30px;
+ padding-right: 30px;
+ border-bottom: 1px solid #ebebeb;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ margin-right: 16px;
+ }
+
+ .content {
+ flex-direction: column;
+ .name {
+ font-size: 14px;
+ color: #333333;
+ margin-bottom: 2px;
+
+ .icon {
+ height: 14px;
+ }
+ }
+
+ .time {
+ font-size: 13px;
+ color: #aaaaaa;
+ }
+ }
+
+ .operate {
+ .view {
+ .icon {
+ width: 13px;
+ height: 8px;
+ margin-right: 5px;
+ }
+
+ font-size: 12px;
+ color: #aaaaaa;
+ margin-right: 15px;
+ }
+
+ .btn {
+ width: 24px;
+ height: 16px;
+ background-color: rgba(242, 242, 242, 1);
+ border-radius: 150px;
+
+ .icon {
+ width: 18px;
+ height: 18px;
+ }
+ }
+ }
+ }
+
+ .label {
+ padding: 20px 30px 20px;
+
+ .item {
+ font-size: 14px;
+ color: #555555;
+ padding: 0 9px;
+ height: 24px;
+ line-height: 24px;
+ background-color: rgba(242, 242, 242, 1);
+ border-radius: 6px;
+ margin-bottom: 10px;
+
+ &.icon {
+ padding: 0;
+ }
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+
+ &.blue {
+ color: #ffffff;
+ background-color: #04b0d5;
+ }
+ }
+ }
+
+ .title {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 24px;
+ color: #000000;
+ line-height: 36px;
+ padding: 0 30px;
+ margin-bottom: 30px;
+ }
+
+ .html {
+ padding: 0 30px;
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-size: 15px;
+ color: #555555;
+ line-height: 24px;
+ margin-bottom: 66px;
+ }
+
+ .last-time {
+ color: #aaaaaa;
+ font-size: 13px;
+ padding: 0 30px 20px;
+ }
+
+ .bottom {
+ border-top: 1px solid #ebebeb;
+ height: 64px;
+ line-height: 64px;
+ justify-content: flex-end;
+ padding-right: 30px;
+ position: sticky;
+ bottom: 0;
+ background: #ffff;
+ border-radius: 0 0 10px 10px;
+
+ .bottom-item {
+ .icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 6px;
+ }
+ font-size: 14px;
+ color: #333333;
+
+ &:not(:last-child) {
+ margin-right: 60px;
+ }
+ }
+ }
+
+ .related {
+ .related-head {
+ padding-left: 30px;
+ padding-top: 20px;
+ padding-bottom: 12px;
+ border-bottom: 1px solid #ebebeb;
+ .text {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 16px;
+ color: #000000;
+ margin-right: 14px;
+ }
+
+ .time {
+ font-family: "ArialMT", "Arial", sans-serif;
+ font-weight: 400;
+ font-style: normal;
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+ }
+ }
+
+ .list {
+ padding: 14px 30px;
+ flex-wrap: wrap;
+
+ .item {
+ width: 50%;
+ font-size: 14px;
+ color: #555555;
+ cursor: pointer;
+
+ &:hover {
+ color: #000000;
+ }
+
+ .dot {
+ width: 6px;
+ height: 6px;
+ border-radius: 50%;
+ background-color: #f68251;
+ margin-right: 10px;
+ }
+
+ &:not(:nth-last-child(-n + 2)) {
+ margin-bottom: 7px;
+ }
+
+ .text {
+ width: 352px;
+ }
+ }
+ }
+ }
+ }
+
+ .sidebar-box {
+ .adv {
+ width: 291px;
+ height: 220px;
+ margin-bottom: 12px;
+ display: block;
+ cursor: pointer;
+
+ .adv-img {
+ width: 291px;
+ height: 220px;
+ border-radius: 8px;
+ }
+ }
+
+ .sidebar-item {
+ width: 291px;
+ background-color: rgba(255, 255, 255, 1);
+ border-radius: 8px;
+ margin-bottom: 12px;
+
+ .sidebar-header {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 15px;
+ color: #000000;
+ padding: 16px;
+ border-bottom: 1px solid #f2f2f2;
+ }
+
+ .sidebar-content {
+ flex-direction: column;
+ padding: 20px 0;
+
+ .sidebar-QRCode {
+ width: 120px;
+ height: 120px;
+ margin-bottom: 18px;
+ }
+
+ .hint {
+ .saoma-icon {
+ width: 14px;
+ height: 14px;
+ margin-right: 8px;
+ }
+
+ font-size: 14px;
+ color: #555555;
+ }
+
+ .author-box {
+ padding: 16px 5px 30px 16px;
+ width: 100%;
+ .avatar {
+ width: 50px;
+ height: 50px;
+ border-radius: 50%;
+ margin-right: 22px;
+ }
+
+ .author-content {
+ .author-name {
+ font-size: 14px;
+ color: #000000;
+ margin-bottom: 11px;
+ }
+
+ .author-info {
+ color: #7f7f7f;
+ font-size: 13px;
+ .amount {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+ }
+ }
+ }
+ }
+
+ .medal {
+ width: calc(100% - 16px);
+ padding-bottom: 22px;
+ margin-left: 16px;
+ border-bottom: 1px solid #f2f2f2;
+ .medal-title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 14px;
+ }
+
+ .medal-list {
+ flex-wrap: wrap;
+
+ .medal-item {
+ width: 32px;
+ height: 32px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ }
+ }
+ }
+
+ .recently {
+ width: 100%;
+ padding: 30px 16px 10px;
+
+ .recently-title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 14px;
+ }
+
+ .recently-list {
+ flex-direction: column;
+
+ .recently-item {
+ font-size: 14px;
+ color: #000000;
+ margin-bottom: 9px;
+ cursor: pointer;
+
+ .dot {
+ width: 6px;
+ height: 6px;
+ margin-right: 8px;
+ border-radius: 50%;
+ background-color: #f68251;
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+
+ .coins-area {
+ position: fixed;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+
+ .coins-box {
+ width: 624px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 11px;
+ flex-direction: column;
+ padding: 40px 30px 35px;
+ position: relative;
+
+ .fork {
+ width: 12px;
+ height: 12px;
+ position: absolute;
+ top: 20px;
+ right: 20px;
+ cursor: pointer;
+ }
+
+ .coins-head {
+ margin-bottom: 32px;
+
+ .icon {
+ width: 50px;
+ height: 60px;
+ margin-right: 16px;
+ }
+
+ .text {
+ font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
+ font-weight: 400;
+ color: #7f7f7f;
+ font-size: 14px;
+ .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-size: 18px;
+ color: #000000;
+ margin: 0 5px;
+ }
+ }
+ }
+
+ .coins-input {
+ width: 333px;
+ height: 36px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(215, 215, 215, 1);
+ border-radius: 8px;
+ overflow: hidden;
+ margin-bottom: 31px;
+
+ .input {
+ height: 100%;
+ border: none;
+ outline: none;
+ font-size: 14px;
+ padding: 0 10px;
+ }
+
+ .btn {
+ width: 84px;
+ height: 100%;
+ line-height: 36px;
+ text-align: center;
+ background-color: rgba(80, 227, 194, 1);
+ }
+ }
+
+ .coins-info {
+ color: #555555;
+ font-size: 14px;
+ margin-bottom: 43px;
+
+ .icon {
+ width: 16px;
+ height: 16px;
+ margin-right: 6px;
+ }
+
+ .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+ }
+
+ .strategy {
+ margin-left: 5px;
+ color: #026277;
+ cursor: pointer;
+ }
+ }
+
+ .coins-list-area {
+ max-height: 347px;
+ background-color: rgba(251, 251, 251, 1);
+ border-radius: 16px;
+ width: 100%;
+ padding: 20px 20px 0;
+ flex-direction: column;
+
+ .coins-total {
+ color: #7f7f7f;
+ font-size: 14px;
+ .sum {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+ }
+ }
+
+ .list {
+ overflow: auto;
+
+ .item {
+ height: 65px;
+ padding: 0 35px;
+
+ &:not(:last-child) {
+ border-bottom: 1px solid #f2f2f2;
+ }
+ .serial {
+ font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
+ font-weight: 700;
+ font-style: normal;
+ color: #ffb600;
+ margin-right: 114px;
+ }
+
+ .user {
+ color: #555555;
+ font-size: 13px;
+ .avatar {
+ width: 32px;
+ height: 32px;
+ margin-right: 10px;
+ }
+ }
+
+ .amount {
+ color: #000000;
+ font-size: 16px;
+ .text {
+ font-size: 13px;
+ margin-left: 2px;
+ }
+ }
+ }
+ }
+ }
+ }
+ }
+}
diff --git a/css/homepage-me.css b/css/homepage-me.css
new file mode 100644
index 0000000..6656f1a
--- /dev/null
+++ b/css/homepage-me.css
@@ -0,0 +1,464 @@
+#homepage-me {
+ width: 1200px;
+ margin: 0 auto;
+}
+#homepage-me .head-top {
+ margin-bottom: 30px;
+}
+#homepage-me .head-top .logo {
+ height: 52px;
+}
+#homepage-me .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-me .head-top .input-box .input {
+ border: none;
+ outline: none;
+ height: 100%;
+ background-color: transparent;
+}
+#homepage-me .head-top .input-box .icon {
+ width: 18px;
+ height: 18px;
+ margin-left: 15rpx;
+ cursor: pointer;
+}
+#homepage-me .head-top .sign-in {
+ width: 192px;
+ height: 40px;
+ border-radius: 83px;
+ cursor: pointer;
+}
+#homepage-me .head-top .sign-in.sign-in-already {
+ background-color: #ffffff;
+ font-size: 14px;
+ color: #333;
+}
+#homepage-me .head-top .sign-in.sign-in-already .sign-icon {
+ width: 20px;
+ height: 20px;
+ margin-right: 10px;
+}
+#homepage-me .head-top .sign-in.sign-in-no {
+ position: relative;
+ z-index: 1;
+ padding-right: 8px;
+}
+#homepage-me .head-top .sign-in.sign-in-no .sign-in-bj {
+ position: absolute;
+ top: 0;
+ left: 0;
+ z-index: -1;
+ width: 190px;
+ height: 40px;
+}
+#homepage-me .head-top .sign-in.sign-in-no .coin-bj {
+ position: absolute;
+ width: 157px;
+ height: 33px;
+ top: 4px;
+ left: 29px;
+}
+#homepage-me .head-top .sign-in.sign-in-no .coin-icon {
+ width: 43px;
+ height: 51px;
+ align-self: flex-end;
+ z-index: 1;
+ margin-left: -2px;
+}
+#homepage-me .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-me .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-me .head-top .sign-in.sign-in-no .sign-go .sign-go-bj {
+ width: 100%;
+ height: 100%;
+ position: absolute;
+ z-index: -1;
+}
+#homepage-me .head-top .sign-in.sign-in-no .petal1,
+#homepage-me .head-top .sign-in.sign-in-no .petal2,
+#homepage-me .head-top .sign-in.sign-in-no .petal3 {
+ position: absolute;
+}
+#homepage-me .head-top .sign-in.sign-in-no .petal1 {
+ width: 24px;
+ height: 10px;
+ top: 3px;
+ left: 55px;
+}
+#homepage-me .head-top .sign-in.sign-in-no .petal2 {
+ width: 16px;
+ height: 14px;
+ top: 25px;
+ left: 92px;
+}
+#homepage-me .head-top .sign-in.sign-in-no .petal3 {
+ width: 17px;
+ height: 12px;
+ top: 25px;
+ left: 136px;
+}
+#homepage-me .head-navigation {
+ margin-bottom: 20px;
+}
+#homepage-me .head-navigation .icon {
+ width: 16px;
+ height: 16px;
+}
+#homepage-me .head-navigation .arrows {
+ width: 7px;
+ height: 12px;
+ margin: 0 5px;
+}
+#homepage-me .head-navigation .text {
+ padding: 0 5px;
+ font-size: 14px;
+ color: #000000;
+ cursor: pointer;
+}
+#homepage-me .head-navigation .text:hover {
+ text-decoration: underline;
+}
+#homepage-me .matter {
+ align-items: flex-start;
+}
+#homepage-me .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: 39px;
+ padding-bottom: 38px;
+ margin-right: 20px;
+}
+#homepage-me .matter .card-user .avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+}
+#homepage-me .matter .card-user .name-area {
+ margin-bottom: 40px;
+}
+#homepage-me .matter .card-user .name-area .username {
+ font-size: 15px;
+ color: #333;
+ margin-bottom: 12px;
+}
+#homepage-me .matter .card-user .name-area .uid {
+ color: #7f7f7f;
+ font-size: 13px;
+}
+#homepage-me .matter .card-user .name-area .uid .icon {
+ width: 14px;
+ height: 14px;
+ margin-left: 9px;
+ cursor: pointer;
+}
+#homepage-me .matter .card-user .bi-box {
+ position: relative;
+ width: 260px;
+ height: 65px;
+ background: linear-gradient(255.75deg, #ffbd15 0%, #fff5d1 99%);
+ border-radius: 12px;
+ z-index: 1;
+ justify-content: space-between;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-bottom: 40px;
+}
+#homepage-me .matter .card-user .bi-box .bi-masking {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 260px;
+ height: 65px;
+ z-index: -1;
+}
+#homepage-me .matter .card-user .bi-box .bi-icon {
+ width: 50px;
+ height: 56px;
+ margin-right: 7px;
+}
+#homepage-me .matter .card-user .bi-box .bi-content {
+ flex-direction: column;
+}
+#homepage-me .matter .card-user .bi-box .bi-content .bi-sum {
+ font-family: Arial-Black, "Arial Black", sans-serif;
+ font-weight: 900;
+ font-style: normal;
+ font-size: 16px;
+ color: #000000;
+}
+#homepage-me .matter .card-user .bi-box .bi-content .bi-text {
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+}
+#homepage-me .matter .card-user .bi-box .bi-btn {
+ width: 98px;
+ height: 26px;
+ background-color: #fff6d8;
+ border-radius: 60px;
+ box-shadow: rgba(0, 0, 0, 0.145) 0px 0px 5px;
+ font-size: 15px;
+ line-height: 26px;
+ font-size: 13px;
+ color: #ab7713;
+}
+#homepage-me .matter .card-user .bi-box .bi-btn .bi-question {
+ width: 14px;
+ height: 14px;
+ margin-left: 5px;
+}
+#homepage-me .matter .card-user .medal-area {
+ margin: 0 30px;
+ align-self: self-start;
+}
+#homepage-me .matter .card-user .medal-area .title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 13px;
+}
+#homepage-me .matter .card-user .medal-area .list {
+ flex-direction: row;
+ flex-wrap: wrap;
+}
+#homepage-me .matter .card-user .medal-area .list .item {
+ height: 30px;
+ max-width: 30px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+}
+#homepage-me .matter .matter-content .message-box {
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 10px;
+ padding-left: 95px;
+ padding-right: 40px;
+ padding-bottom: 31px;
+ margin-bottom: 20px;
+}
+#homepage-me .matter .matter-content .message-box .header {
+ border-bottom: 1px dotted #d7d7d7;
+ padding-top: 46px;
+ padding-bottom: 19px;
+ position: relative;
+}
+#homepage-me .matter .matter-content .message-box .header .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ position: absolute;
+ top: 40px;
+ left: -55px;
+}
+#homepage-me .matter .matter-content .message-box .header .username {
+ font-size: 14px;
+ color: #333333;
+}
+#homepage-me .matter .matter-content .message-box .header .icon {
+ height: 40px;
+}
+#homepage-me .matter .matter-content .message-box .info-list {
+ flex-flow: wrap;
+ padding-top: 20px;
+ border-bottom: 1px dotted #d7d7d7;
+}
+#homepage-me .matter .matter-content .message-box .info-list .item {
+ width: 50%;
+ margin-bottom: 15px;
+}
+#homepage-me .matter .matter-content .message-box .info-list .item .label {
+ font-size: 14px;
+ color: #7f7f7f;
+ width: 87px;
+}
+#homepage-me .matter .matter-content .message-box .info-list .item .value {
+ font-size: 14px;
+ color: #000000;
+}
+#homepage-me .matter .matter-content .message-box .info-list .item .status {
+ color: #555555;
+ font-size: 13px;
+ padding: 0 6px;
+ height: 20px;
+ line-height: 20px;
+ background-color: #f0f1ec;
+ border-radius: 23px;
+ margin-left: 10px;
+}
+#homepage-me .matter .matter-content .message-box .info-list .item .status.blue {
+ color: #ffffff;
+ background-color: #04b0d5;
+}
+#homepage-me .matter .matter-content .message-box .stats {
+ padding-top: 20px;
+ padding-bottom: 21px;
+ font-size: 14px;
+}
+#homepage-me .matter .matter-content .message-box .stats .item .text {
+ color: #7f7f7f;
+ margin-right: 5px;
+}
+#homepage-me .matter .matter-content .message-box .stats .item .num {
+ font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
+ font-weight: 700;
+ color: #04b0d5;
+}
+#homepage-me .matter .matter-content .message-box .stats .line {
+ color: #d7d7d7;
+ margin: 0 14px;
+}
+#homepage-me .matter .matter-content .message-box .tags {
+ flex-wrap: wrap;
+}
+#homepage-me .matter .matter-content .message-box .tags .item {
+ padding: 0 10px;
+ font-size: 14px;
+ color: #333333;
+ height: 24px;
+ background-color: #f6f6f6;
+ border: 1px solid #f0f1ec;
+ border-radius: 5px;
+ margin-right: 20px;
+ margin-bottom: 10px;
+}
+#homepage-me .matter .matter-content .message-box .tags .item .icon {
+ height: 13px;
+ margin-right: 7px;
+}
+#homepage-me .matter .matter-content .list-area {
+ width: 860px;
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 10px;
+}
+#homepage-me .matter .matter-content .list-area .operation-box {
+ padding-top: 40px;
+ padding-left: 95px;
+ padding-right: 40px;
+ padding-bottom: 18px;
+ font-size: 18px;
+ color: #7f7f7f;
+ border-bottom: 1px dotted #d7d7d7;
+}
+#homepage-me .matter .matter-content .list-area .operation-box .operation-item {
+ position: relative;
+ cursor: pointer;
+}
+#homepage-me .matter .matter-content .list-area .operation-box .operation-item:not(:last-child) {
+ margin-right: 40px;
+}
+#homepage-me .matter .matter-content .list-area .operation-box .operation-item.pitch {
+ font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 18px;
+ color: #000000;
+}
+#homepage-me .matter .matter-content .list-area .operation-box .operation-item.pitch::after {
+ content: "";
+ width: 100%;
+ height: 6px;
+ background-color: #50e3c2;
+ border-radius: 26px;
+ position: absolute;
+ bottom: -21px;
+ display: block;
+}
+#homepage-me .matter .matter-content .list-area .classify {
+ padding-top: 37px;
+ padding-bottom: 23px;
+ padding-left: 95px;
+ padding-right: 40px;
+}
+#homepage-me .matter .matter-content .list-area .classify .item {
+ width: 50px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ background-color: #ffffff;
+ border: 1px solid #f2f2f2;
+ border-radius: 12px;
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+}
+#homepage-me .matter .matter-content .list-area .classify .item.pitch {
+ background-color: #d35110;
+ color: #ffffff;
+}
+#homepage-me .matter .matter-content .list-area .classify .item:not(:last-child) {
+ margin-right: 10px;
+}
+#homepage-me .matter .matter-content .list-area .issue-data {
+ color: #7f7f7f;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding-left: 95px;
+ padding-right: 40px;
+}
+#homepage-me .matter .matter-content .list-area .issue-data .num {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+}
+#homepage-me .matter .matter-content .list-area .list-box {
+ padding-left: 95px;
+ padding-right: 40px;
+}
+#homepage-me .matter .matter-content .list-area .list-box .item-box {
+ margin-bottom: 20px;
+}
+#homepage-me .matter .matter-content .list-area .empty {
+ width: 725px;
+ height: 360px;
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 10px;
+ flex-direction: column;
+ margin-bottom: 20px;
+ margin-left: 95px;
+ margin-right: 40px;
+}
+#homepage-me .matter .matter-content .list-area .empty .empty-icon {
+ width: 80px;
+ height: 94px;
+}
+#homepage-me .matter .matter-content .list-area .empty .empty-text {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-top: 10px;
+}
+#homepage-me .matter .matter-content .list-area .load-more {
+ padding: 20px 0 40px;
+ color: #7f7f7f;
+ font-size: 14px;
+}
diff --git a/css/homepage-me.less b/css/homepage-me.less
new file mode 100644
index 0000000..cf6d438
--- /dev/null
+++ b/css/homepage-me.less
@@ -0,0 +1,535 @@
+#homepage-me {
+ 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 {
+ align-items: flex-start;
+ .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: 39px;
+ padding-bottom: 38px;
+ margin-right: 20px;
+ .avatar {
+ width: 120px;
+ height: 120px;
+ border-radius: 8px;
+ margin-bottom: 20px;
+ }
+
+ .name-area {
+ margin-bottom: 40px;
+
+ .username {
+ font-size: 15px;
+ color: #333;
+ margin-bottom: 12px;
+ }
+
+ .uid {
+ color: #7f7f7f;
+ font-size: 13px;
+ .icon {
+ width: 14px;
+ height: 14px;
+ margin-left: 9px;
+ cursor: pointer;
+ }
+ }
+ }
+
+ .bi-box {
+ width: 260px;
+ height: 65px;
+ position: relative;
+ width: 260px;
+ height: 65px;
+ background: linear-gradient(255.75deg, rgb(255, 189, 21) 0%, rgb(255, 245, 209) 99%);
+ border-radius: 12px;
+ z-index: 1;
+ justify-content: space-between;
+ padding-left: 10px;
+ padding-right: 10px;
+ margin-bottom: 40px;
+
+ .bi-masking {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 260px;
+ height: 65px;
+ z-index: -1;
+ }
+
+ .bi-icon {
+ width: 50px;
+ height: 56px;
+ margin-right: 7px;
+ }
+
+ .bi-content {
+ flex-direction: column;
+
+ .bi-sum {
+ font-family: Arial-Black, "Arial Black", sans-serif;
+ font-weight: 900;
+ font-style: normal;
+ font-size: 16px;
+ color: #000000;
+ }
+
+ .bi-text {
+ font-size: 13px;
+ letter-spacing: normal;
+ color: #333333;
+ }
+ }
+
+ .bi-btn {
+ width: 98px;
+ height: 26px;
+ background-color: rgb(255, 246, 216);
+ border-radius: 60px;
+ box-shadow: rgba(0, 0, 0, 0.145) 0px 0px 5px;
+ font-size: 15px;
+ color: rgb(171, 119, 19);
+ line-height: 26px;
+
+ font-size: 13px;
+ color: rgb(171, 119, 19);
+ .bi-question {
+ width: 14px;
+ height: 14px;
+ margin-left: 5px;
+ }
+ }
+ }
+
+ .medal-area {
+ margin: 0 30px;
+ align-self: self-start;
+
+ .title {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 13px;
+ }
+
+ .list {
+ flex-direction: row;
+ flex-wrap: wrap;
+
+ .item {
+ height: 30px;
+ max-width: 30px;
+ margin-right: 8px;
+ margin-bottom: 8px;
+ }
+ }
+ }
+ }
+
+ .matter-content {
+ .message-box {
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 10px;
+ padding-left: 95px;
+ padding-right: 40px;
+ padding-bottom: 31px;
+ margin-bottom: 20px;
+
+ .header {
+ border-bottom: 1px dotted #d7d7d7;
+ padding-top: 46px;
+ padding-bottom: 19px;
+ position: relative;
+
+ .avatar {
+ width: 40px;
+ height: 40px;
+ border-radius: 50%;
+ position: absolute;
+ top: 40px;
+ left: -55px;
+ }
+
+ .username {
+ font-size: 14px;
+ color: #333333;
+ }
+
+ .icon {
+ height: 40px;
+ }
+ }
+
+ .info-list {
+ flex-flow: wrap;
+ padding-top: 20px;
+ border-bottom: 1px dotted #d7d7d7;
+
+ .item {
+ width: 50%;
+ margin-bottom: 15px;
+ .label {
+ font-size: 14px;
+ color: #7f7f7f;
+ width: 87px;
+ }
+ .value {
+ font-size: 14px;
+ color: #000000;
+ }
+
+ .status {
+ color: #555555;
+ font-size: 13px;
+ padding: 0 6px;
+ height: 20px;
+ line-height: 20px;
+ background-color: rgba(240, 241, 236, 1);
+ border-radius: 23px;
+ margin-left: 10px;
+
+ &.blue {
+ color: #ffffff;
+ background-color: rgba(4, 176, 213, 1);
+ }
+ }
+ }
+ }
+
+ .stats {
+ padding-top: 20px;
+ padding-bottom: 21px;
+ font-size: 14px;
+
+ .item {
+ .text {
+ color: #7f7f7f;
+ margin-right: 5px;
+ }
+
+ .num {
+ font-family: "Arial-BoldMT", "Arial Bold", "Arial", sans-serif;
+ font-weight: 700;
+ color: #04b0d5;
+ }
+ }
+
+ .line {
+ color: #d7d7d7;
+ margin: 0 14px;
+ }
+ }
+
+ .tags {
+ flex-wrap: wrap;
+ .item {
+ padding: 0 10px;
+ font-size: 14px;
+ color: #333333;
+ height: 24px;
+ background-color: rgba(246, 246, 246, 1);
+ border: 1px solid rgba(240, 241, 236, 1);
+ border-radius: 5px;
+ margin-right: 20px;
+ margin-bottom: 10px;
+
+ .icon {
+ height: 13px;
+ margin-right: 7px;
+ }
+ }
+ }
+ }
+
+ .list-area {
+ width: 860px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 10px;
+
+ .operation-box {
+ padding-top: 40px;
+ padding-left: 95px;
+ padding-right: 40px;
+ padding-bottom: 18px;
+ font-size: 18px;
+ color: rgb(127, 127, 127);
+ border-bottom: 1px dotted #d7d7d7;
+
+ .operation-item {
+ position: relative;
+ cursor: pointer;
+ &:not(:last-child) {
+ margin-right: 40px;
+ }
+
+ &.pitch {
+ font-family: PingFangSC-Semibold, "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 18px;
+ color: #000000;
+
+ &::after {
+ content: "";
+ width: 100%;
+ height: 6px;
+ background-color: rgb(80, 227, 194);
+ border-radius: 26px;
+ position: absolute;
+ bottom: -21px;
+ display: block;
+ }
+ }
+ }
+ }
+
+ .classify {
+ padding-top: 37px;
+ padding-bottom: 23px;
+ padding-left: 95px;
+ padding-right: 40px;
+ .item {
+ width: 50px;
+ height: 32px;
+ line-height: 32px;
+ text-align: center;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(242, 242, 242, 1);
+ border-radius: 12px;
+ color: #333333;
+ cursor: pointer;
+ font-size: 15px;
+
+ &.pitch {
+ background-color: rgba(211, 81, 16, 1);
+ color: #ffffff;
+ }
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+ }
+
+ .issue-data {
+ color: #7f7f7f;
+ font-size: 14px;
+ margin-bottom: 20px;
+ padding-left: 95px;
+ padding-right: 40px;
+
+ .num {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ color: #000000;
+ margin: 0 5px;
+ }
+ }
+
+ .list-box {
+ padding-left: 95px;
+ padding-right: 40px;
+ .item-box {
+ margin-bottom: 20px;
+ }
+ }
+
+ .empty {
+ width: 725px;
+ height: 360px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 10px;
+ flex-direction: column;
+ margin-bottom: 20px;
+ margin-left: 95px;
+ margin-right: 40px;
+
+ .empty-icon {
+ width: 80px;
+ height: 94px;
+ }
+
+ .empty-text {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-top: 10px;
+ }
+ }
+
+ .load-more {
+ padding: 20px 0 40px;
+ color: #7f7f7f;
+ font-size: 14px;
+ }
+ }
+ }
+ }
+}
diff --git a/css/homepage-other.css b/css/homepage-other.css
index c3d7269..f97d0eb 100644
--- a/css/homepage-other.css
+++ b/css/homepage-other.css
@@ -1,44 +1,3 @@
-* {
- 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;
@@ -222,7 +181,7 @@ body {
cursor: pointer;
}
#homepage-other .matter .card-user .medal-area {
- margin: 0 30px 44px;
+ margin: 0 30px 36px;
align-self: self-start;
}
#homepage-other .matter .card-user .medal-area .title {
@@ -237,6 +196,7 @@ body {
height: 30px;
max-width: 30px;
margin-right: 8px;
+ margin-bottom: 8px;
}
#homepage-other .matter .card-user .btn-area .item {
width: 200px;
@@ -398,3 +358,25 @@ body {
#homepage-other .matter .matter-content .list-area .list-box .item-box {
margin-bottom: 20px;
}
+#homepage-other .matter .matter-content .list-area .empty {
+ width: 725px;
+ height: 360px;
+ background-color: #ffffff;
+ border: 1px solid #e9eef2;
+ border-radius: 10px;
+ flex-direction: column;
+}
+#homepage-other .matter .matter-content .list-area .empty .empty-icon {
+ width: 80px;
+ height: 94px;
+}
+#homepage-other .matter .matter-content .list-area .empty .empty-text {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-top: 10px;
+}
+#homepage-other .matter .matter-content .list-area .load-more {
+ padding: 20px 0 40px;
+ color: #7f7f7f;
+ font-size: 14px;
+}
diff --git a/css/homepage-other.less b/css/homepage-other.less
index 99a5a7d..157202a 100644
--- a/css/homepage-other.less
+++ b/css/homepage-other.less
@@ -1,53 +1,3 @@
-* {
- 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;
@@ -251,7 +201,7 @@ body {
}
.medal-area {
- margin: 0 30px 44px;
+ margin: 0 30px 36px;
align-self: self-start;
.title {
@@ -266,6 +216,7 @@ body {
height: 30px;
max-width: 30px;
margin-right: 8px;
+ margin-bottom: 8px;
}
}
}
@@ -461,6 +412,31 @@ body {
margin-bottom: 20px;
}
}
+
+ .empty {
+ width: 725px;
+ height: 360px;
+ background-color: rgba(255, 255, 255, 1);
+ border: 1px solid rgba(233, 238, 242, 1);
+ border-radius: 10px;
+ flex-direction: column;
+ .empty-icon {
+ width: 80px;
+ height: 94px;
+ }
+
+ .empty-text {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-top: 10px;
+ }
+ }
+
+ .load-more {
+ padding: 20px 0 40px;
+ color: #7f7f7f;
+ font-size: 14px;
+ }
}
}
}
diff --git a/css/public.css b/css/public.css
index d17b0bc..77c260e 100644
--- a/css/public.css
+++ b/css/public.css
@@ -39,6 +39,13 @@ body {
overflow: hidden;
text-overflow: ellipsis;
}
+.two-line-display {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
.item-box {
max-width: 897px;
width: 100%;
@@ -91,7 +98,7 @@ body {
height: 18px;
}
.item-box .label {
- margin-bottom: 10px;
+ flex-wrap: wrap;
}
.item-box .label .item {
font-size: 14px;
@@ -101,6 +108,7 @@ body {
line-height: 24px;
background-color: #f2f2f2;
border-radius: 6px;
+ margin-bottom: 10px;
}
.item-box .label .item.icon {
padding: 0;
@@ -395,6 +403,60 @@ body {
font-size: 14px;
color: #555555;
}
+.item-box.item-tenement .title {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 20px;
+ color: #000000;
+ line-height: 36px;
+ margin-bottom: 10px;
+}
+.item-box.item-tenement .site-box {
+ margin-bottom: 10px;
+}
+.item-box.item-tenement .site-box .site-item {
+ font-size: 15px;
+ color: #555555;
+}
+.item-box.item-tenement .site-box .site-item .site-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 4px;
+}
+.item-box.item-tenement .price-section {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 21px;
+}
+.item-box.item-tenement .price-section .unit {
+ font-family: "Arial-Black", "Arial Black", sans-serif;
+ font-weight: 900;
+ color: #000000;
+ margin-right: 6px;
+}
+.item-box.item-tenement .price-section .price {
+ font-family: "Arial-Black", "Arial Black", sans-serif;
+ font-weight: 900;
+ font-size: 20px;
+ color: #f95d5d;
+ margin-right: 7px;
+}
+.item-box.item-tenement .price-section .text {
+ color: #555555;
+ margin-right: 21px;
+}
+.item-box.item-tenement .picture {
+ overflow: auto;
+}
+.item-box.item-tenement .picture .picture-item {
+ width: 120px;
+ height: 100px;
+ border-radius: 10px;
+}
+.item-box.item-tenement .picture .picture-item:not(:last-child) {
+ margin-right: 10px;
+}
.item-box .comment {
height: 40px;
background-color: #f6f6f6;
diff --git a/css/public.less b/css/public.less
index f55f020..382734c 100644
--- a/css/public.less
+++ b/css/public.less
@@ -48,6 +48,14 @@ body {
text-overflow: ellipsis;
}
+.two-line-display {
+ display: -webkit-box;
+ -webkit-box-orient: vertical;
+ -webkit-line-clamp: 2;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
.item-box {
max-width: 897px;
width: 100%;
@@ -108,7 +116,7 @@ body {
}
.label {
- margin-bottom: 10px;
+ flex-wrap: wrap;
.item {
font-size: 14px;
@@ -118,6 +126,7 @@ body {
line-height: 24px;
background-color: rgba(242, 242, 242, 1);
border-radius: 6px;
+ margin-bottom: 10px;
&.icon {
padding: 0;
@@ -476,6 +485,71 @@ body {
}
}
+ &.item-tenement {
+ .title {
+ font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
+ font-weight: 650;
+ font-style: normal;
+ font-size: 20px;
+ color: #000000;
+ line-height: 36px;
+ margin-bottom: 10px;
+ }
+
+ .site-box {
+ margin-bottom: 10px;
+
+ .site-item {
+ .site-icon {
+ width: 18px;
+ height: 18px;
+ margin-right: 4px;
+ }
+
+ font-size: 15px;
+ color: #555555;
+ }
+ }
+
+ .price-section {
+ font-size: 14px;
+ color: #7f7f7f;
+ margin-bottom: 21px;
+ .unit {
+ font-family: "Arial-Black", "Arial Black", sans-serif;
+ font-weight: 900;
+ color: #000000;
+ margin-right: 6px;
+ }
+
+ .price {
+ font-family: "Arial-Black", "Arial Black", sans-serif;
+ font-weight: 900;
+ font-size: 20px;
+ color: #f95d5d;
+ margin-right: 7px;
+ }
+
+ .text {
+ color: #555555;
+ margin-right: 21px;
+ }
+ }
+
+ .picture {
+ overflow: auto;
+ .picture-item {
+ width: 120px;
+ height: 100px;
+ border-radius: 10px;
+
+ &:not(:last-child) {
+ margin-right: 10px;
+ }
+ }
+ }
+ }
+
.comment {
height: 40px;
background-color: rgba(246, 246, 246, 1);
diff --git a/css/sectionIndex.css b/css/section-index.css
similarity index 70%
rename from css/sectionIndex.css
rename to css/section-index.css
index f659189..add6738 100644
--- a/css/sectionIndex.css
+++ b/css/section-index.css
@@ -140,9 +140,11 @@
#sectionIndex .head-navigation .text:hover {
text-decoration: underline;
}
+#sectionIndex .matter {
+ align-items: flex-start;
+}
#sectionIndex .matter .sidebar {
width: 150px;
- height: 1225px;
background-color: #08353e;
border: 1px solid #e9eef2;
border-radius: 10px;
@@ -166,14 +168,18 @@
margin-left: 20px;
margin-right: 20px;
}
-#sectionIndex .matter .sidebar .list:not(:last-child) {
- border-bottom: 1px solid rgba(255, 255, 255, 0.24705882);
+#sectionIndex .matter .sidebar .list .line {
+ height: 1px;
+ background-color: rgba(255, 255, 255, 0.24705882);
+ margin-top: 10px;
+ margin-bottom: 10px;
}
#sectionIndex .matter .sidebar .list .item {
height: 50px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
z-index: 1;
+ cursor: pointer;
}
#sectionIndex .matter .sidebar .list .item .text {
z-index: 1;
@@ -276,6 +282,7 @@
border-radius: 8px;
font-size: 14px;
color: #333;
+ cursor: pointer;
}
#sectionIndex .matter .matter-content .info .right .bottom .btn .icon {
width: 16px;
@@ -388,131 +395,8 @@
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/section-index.less
similarity index 70%
rename from css/sectionIndex.less
rename to css/section-index.less
index 134019b..11c7a48 100644
--- a/css/sectionIndex.less
+++ b/css/section-index.less
@@ -159,9 +159,9 @@
}
.matter {
+ align-items: flex-start;
.sidebar {
width: 150px;
- height: 1225px;
background-color: rgba(8, 53, 62, 1);
border: 1px solid rgba(233, 238, 242, 1);
border-radius: 10px;
@@ -185,14 +185,19 @@
padding-bottom: 10px;
margin-left: 20px;
margin-right: 20px;
- &:not(:last-child) {
- border-bottom: 1px solid rgba(255, 255, 255, 0.24705882);
+ .line {
+ height: 1px;
+ background-color: rgba(255, 255, 255, 0.24705882);
+ margin-top: 10px;
+ margin-bottom: 10px;
}
+
.item {
height: 50px;
font-size: 14px;
color: rgba(255, 255, 255, 0.8);
z-index: 1;
+ cursor: pointer;
.text {
z-index: 1;
@@ -305,6 +310,7 @@
border-radius: 8px;
font-size: 14px;
color: #333;
+ cursor: pointer;
.icon {
width: 16px;
height: 16px;
@@ -433,155 +439,7 @@
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;
- }
- }
- }
- }
}
}
}
diff --git a/details.html b/details.html
new file mode 100644
index 0000000..7d00ff5
--- /dev/null
+++ b/details.html
@@ -0,0 +1,205 @@
+
+
+
+
+
+
+
版块首页
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
首页
+
+
GTSuperstar 的个人主页
+
+
+
+
+
+
+
+
+
+
{{ authorInfo.nickname || '匿名用户' }}
+
![]()
+
+
{{ timestamp }}
+
+
+
+
+
3016
+
+
+
+
+
+
+
+
+
+
+
+
香港
+
香港
+
+
+
[申请定位] 港理工各专业申请难度分析
+
+
+
+
最后编辑：{{ updatedTime || timestamp }}
+
+
+
+
{{ info.likes || "赞" }}
+
+
+
+
{{ info.collections || "收藏" }}
+
+
+
+
{{ info.comments || "讨论" }}
+
+
+
+
{{ info.coins || "投币" }}
+
+
+
+
转发
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 你当前共有
934
寄托币
+
[挣币攻略]
+
+
+
+
+
+
+
1
+
+
+
4564sd56f456
+
+
+
+
+
+
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/homepage-me.html b/homepage-me.html
new file mode 100644
index 0000000..8acc3ae
--- /dev/null
+++ b/homepage-me.html
@@ -0,0 +1,193 @@
+
+
+
+
+
+
+
Document
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
已签到，明天再来
+
+
+
+
+
+
签到领寄托币
+
+
+ GO
+
+
+
+
+
+
+
+
+
+
首页
+
+
GTSuperstar 的个人主页
+
+
+
+
+
+
+
+
GTSuperstar
+
+ UID: 3276161
+ 
+
+
+
+
+
+
+
勋章 6
+
+
+
+
+
+
+
+
+
+
+
+
+
+ 注册时间
+ 2019-7-26 16:38
+
+
+ 最后登录
+ 2025-10-16 10:32
+
+
+ 在线时长
+ 1304 小时
+
+
+ 上次访问 IP
+ 116.237.182.149 -- 上海长宁区
+
+
+ Email
+ skysuper007@qq.com
+ 未认证
+
+
+ 手机号
+ 15934271290
+ 已认证
+
+
+ 累计签到
+ 1341 天
+
+
+ 本月签到
+ 6 天
+
+
+ 寄托币
+ 13813
+
+
+
+
+
+
+
+ Offer ×
+ 6
+
+ |
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {{ item.type }}
+
+
+
+
+
+
+
+
+
+
+
+
- 暂无内容 -
+
+
+
加载更多…
+
+
+
+
+
+
+
+
\ No newline at end of file
diff --git a/homepage-other.html b/homepage-other.html
index 1c4d759..ff0328d 100644
--- a/homepage-other.html
+++ b/homepage-other.html
@@ -51,8 +51,8 @@
-
GTSuperstar
-
+
GTSuperstar
+
UID: 3276161
@@ -151,8 +151,8 @@
共
57
个创作，获得
1093
个赞
-
-
{{ item.type }}
+
+
@@ -161,6 +161,13 @@
+
+
+
+
- 暂无内容 -
+
加载更多…
+ 
+ 
+ 
+ 
+ 
+
+
+ 
+ 微信扫一扫
+ 
+ 已签到，明天再来
+ 
+ 
+ 
+ 签到领寄托币
+ 
+ GO
+ 
+ 
+ 
+ 
+ 
+ 
+ 
+ 阿尔托大学
+