feat: 添加论坛首页相关资源文件和基础功能
新增论坛首页所需的图片资源、CSS样式文件、Vue组件和基础功能实现。包括： 1. 添加多个图标图片资源 2. 创建index.css和sectionIndex.css样式文件 3. 实现论坛首页的Vue组件结构和基础交互 4. 添加论坛板块列表和帖子展示功能 5. 实现公共样式和布局组件
This commit is contained in:
A1300399510
354
css/index copy.css
Normal file
354
css/index copy.css
Normal file
@@ -0,0 +1,354 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
padding: 10px;
|
||||
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;
|
||||
}
|
||||
.topic-and-selectives .head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.topic-and-selectives .head-top .icon {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.topic-and-selectives .head-top .text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
.topic-and-selectives .topic-box {
|
||||
width: 308px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .head-top {
|
||||
background-color: #f4ae38;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head {
|
||||
height: 109px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background-color: #f4ae38;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .left {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .left .number {
|
||||
color: #333333;
|
||||
margin-right: 3px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item .img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(6) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(5) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-head .people .right .item:nth-child(4) {
|
||||
margin-right: -7px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item:hover {
|
||||
color: #000000;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item .img {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
.topic-and-selectives .topic-box .topic-list .item .text {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box {
|
||||
width: 628px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .head-top {
|
||||
background-color: #f68251;
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item .dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.topic-and-selectives .selectives-box .list .item .text {
|
||||
width: 265px;
|
||||
}
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
}
|
||||
.forum-sections-list .img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
.forum-sections-list .title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.forum-sections-list .list .line:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.forum-sections-list .list .line .item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
background-color: #f6f6f6;
|
||||
border: 1px solid #f2f2f2;
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
}
|
||||
.forum-sections-list .list .line .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box {
|
||||
width: 897px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
}
|
||||
.item-box .item-head {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.item-box .item-head .avatar {
|
||||
width: 28px;
|
||||
height: 28px;
|
||||
border-radius: 50%;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .name {
|
||||
font-style: normal;
|
||||
color: #555555;
|
||||
font-size: 14px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .group {
|
||||
height: 15px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .item-head .time {
|
||||
font-size: 13px;
|
||||
color: #aaaaaa;
|
||||
}
|
||||
.item-box .item-head .view {
|
||||
font-size: 12px;
|
||||
color: #aaaaaa;
|
||||
margin-right: 15px;
|
||||
}
|
||||
.item-box .item-head .view .icon {
|
||||
width: 13px;
|
||||
height: 8px;
|
||||
margin-right: 5px;
|
||||
}
|
||||
.item-box .item-head .btn {
|
||||
width: 24px;
|
||||
height: 16px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 150px;
|
||||
}
|
||||
.item-box .item-head .btn .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
.item-box .label {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item-box .label .item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
padding: 0 9px;
|
||||
height: 24px;
|
||||
line-height: 24px;
|
||||
background-color: #f2f2f2;
|
||||
border-radius: 6px;
|
||||
}
|
||||
.item-box .label .item.icon {
|
||||
padding: 0;
|
||||
}
|
||||
.item-box .label .item:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .label .item.blue {
|
||||
color: #ffffff;
|
||||
background-color: #04b0d5;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
.item-box .message {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
white-space: pre-wrap;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.item-box .comment {
|
||||
height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
border-radius: 10px;
|
||||
padding: 0 10px;
|
||||
}
|
||||
.item-box .comment .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
border-radius: 50%;
|
||||
margin-right: 10px;
|
||||
}
|
||||
.item-box .comment .text {
|
||||
font-size: 14px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
.item-box .bottom {
|
||||
height: 55px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
.item-box .bottom .bottom-item {
|
||||
cursor: pointer;
|
||||
}
|
||||
.item-box .bottom .bottom-item:not(:last-child) {
|
||||
margin-right: 60px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .icon {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
margin-right: 8px;
|
||||
}
|
||||
.item-box .bottom .bottom-item .text {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
}
|
||||
.item-box .bottom .bottom-item.like .icon {
|
||||
width: 18px;
|
||||
height: 18px;
|
||||
}
|
||||
@@ -1,4 +1,46 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
body {
|
||||
padding: 10px;
|
||||
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;
|
||||
}
|
||||
#sectionIndex .head .logo {
|
||||
width: 136px;
|
||||
height: 68px;
|
||||
}
|
||||
|
||||
@@ -1,4 +1,59 @@
|
||||
*{
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
#sectionIndex {
|
||||
.head {
|
||||
.logo {
|
||||
width: 136px;
|
||||
height: 68px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
430
css/sectionIndex.less
Normal file
430
css/sectionIndex.less
Normal file
@@ -0,0 +1,430 @@
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
body {
|
||||
padding: 10px;
|
||||
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;
|
||||
}
|
||||
|
||||
.topic-and-selectives {
|
||||
.head-top {
|
||||
width: 64px;
|
||||
height: 24px;
|
||||
border-radius: 20px 20px 20px 0;
|
||||
margin-bottom: 10px;
|
||||
.icon {
|
||||
width: 15px;
|
||||
height: 12px;
|
||||
margin-right: 3px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
color: #ffffff;
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.topic-box {
|
||||
width: 308px;
|
||||
height: 320px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
margin-right: 12px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
}
|
||||
|
||||
.topic-head {
|
||||
height: 109px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border-radius: 8px;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
padding: 12px 16px;
|
||||
margin-bottom: 12px;
|
||||
|
||||
.title {
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
line-height: 23px;
|
||||
}
|
||||
|
||||
.hint {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #7f7f7f;
|
||||
}
|
||||
|
||||
.people {
|
||||
position: relative;
|
||||
justify-content: space-between;
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
width: 30px;
|
||||
height: 4px;
|
||||
background-color: rgba(244, 174, 56, 1);
|
||||
border-radius: 150px;
|
||||
}
|
||||
|
||||
.left {
|
||||
color: #aaaaaa;
|
||||
font-size: 13px;
|
||||
|
||||
.number {
|
||||
color: #333333;
|
||||
|
||||
margin-right: 3px;
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
.item {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
.img {
|
||||
width: 26px;
|
||||
height: 26px;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
&:nth-child(6) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
&:nth-child(5) {
|
||||
margin-right: -9px;
|
||||
}
|
||||
|
||||
&:nth-child(4) {
|
||||
margin-right: -7px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.topic-list {
|
||||
.item {
|
||||
&:hover {
|
||||
color: #000000;
|
||||
}
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 1px;
|
||||
}
|
||||
|
||||
.img {
|
||||
width: 12px;
|
||||
height: 10px;
|
||||
margin-right: 9px;
|
||||
}
|
||||
|
||||
.text {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 28px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.selectives-box {
|
||||
width: 628px;
|
||||
height: 320px;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #e9eef2;
|
||||
border-radius: 10px;
|
||||
padding: 10px;
|
||||
|
||||
.head-top {
|
||||
background-color: rgba(246, 130, 81, 1);
|
||||
margin-bottom: 22px;
|
||||
}
|
||||
|
||||
.list {
|
||||
flex-wrap: wrap;
|
||||
padding: 0 5px;
|
||||
justify-content: space-between;
|
||||
|
||||
.item {
|
||||
font-size: 14px;
|
||||
color: #555555;
|
||||
line-height: 20px;
|
||||
margin-bottom: 12px;
|
||||
position: relative;
|
||||
|
||||
.dot {
|
||||
width: 6px;
|
||||
height: 6px;
|
||||
border-radius: 50%;
|
||||
background-color: #f68251;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.text {
|
||||
width: 265px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.forum-sections-list {
|
||||
position: relative;
|
||||
width: 897px;
|
||||
height: 240px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding-left: 70px;
|
||||
padding-top: 20px;
|
||||
|
||||
.img {
|
||||
position: absolute;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
width: 60px;
|
||||
height: 240px;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-family: "PingFangSC-Semibold", "PingFang SC Semibold", "PingFang SC", sans-serif;
|
||||
font-weight: 650;
|
||||
font-style: normal;
|
||||
font-size: 16px;
|
||||
color: #000000;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.list {
|
||||
.line {
|
||||
&:not(:last-child) {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.item {
|
||||
font-family: "PingFangSC-Regular", "PingFang SC", sans-serif;
|
||||
font-weight: 400;
|
||||
font-style: normal;
|
||||
font-size: 14px;
|
||||
color: #333;
|
||||
padding: 0 18px;
|
||||
height: 32px;
|
||||
background-color: rgba(246, 246, 246, 1);
|
||||
border: 1px solid rgba(242, 242, 242, 1);
|
||||
border-radius: 16px;
|
||||
cursor: pointer;
|
||||
|
||||
&:not(:last-child) {
|
||||
margin-right: 10px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.item-box {
|
||||
width: 897px;
|
||||
background-color: rgba(255, 255, 255, 1);
|
||||
border: 1px solid rgba(233, 238, 242, 1);
|
||||
border-radius: 10px;
|
||||
padding: 18px 20px 0;
|
||||
|
||||
.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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
BIN
img/bi-copper-icon.png
Normal file
BIN
img/bi-copper-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.3 KiB |
6
img/collect-golden.svg
Normal file
6
img/collect-golden.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="20px" height="19px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -366 -5694 )">
|
||||
<path d="M 19.3269230769231 6.8122243226213 C 19.775641025641 6.88405797101449 20 7.06763285024155 20 7.36294896030246 C 20 7.53854232304138 19.8958333333333 7.73009871875656 19.6875 7.93761814744802 L 15.3245192307692 12.1758034026465 L 16.3581730769231 18.1619407687461 C 16.3661858974359 18.217811384163 16.3701923076923 18.2976265490443 16.3701923076923 18.40138626339 C 16.3701923076923 18.5689981096408 16.328125 18.7106700273052 16.2439903846154 18.8264020163831 C 16.1598557692308 18.942134005461 16.0376602564103 19 15.8774038461538 19 C 15.7251602564103 19 15.5649038461538 18.9521109010712 15.3966346153846 18.8563327032136 L 10 16.0308758664146 L 4.60336538461538 18.8563327032136 C 4.42708333333333 18.9521109010712 4.26682692307692 19 4.12259615384615 19 C 3.95432692307692 19 3.828125 18.942134005461 3.74399038461538 18.8264020163831 C 3.65985576923077 18.7106700273052 3.61778846153846 18.5689981096408 3.61778846153846 18.40138626339 C 3.61778846153846 18.3534971644612 3.62580128205128 18.2736819995799 3.64182692307692 18.1619407687461 L 4.67548076923077 12.1758034026465 L 0.300480769230769 7.93761814744802 C 0.100160256410256 7.72211720226843 0 7.53056080655325 0 7.36294896030246 C 0 7.06763285024155 0.224358974358974 6.88405797101449 0.673076923076923 6.8122243226213 L 6.70673076923077 5.93824826717076 L 9.41105769230769 0.490863264020163 C 9.56330128205128 0.16362108800672 9.75961538461539 0 10 0 C 10.2403846153846 0 10.4366987179487 0.16362108800672 10.5889423076923 0.490863264020163 L 13.2932692307692 5.93824826717076 L 19.3269230769231 6.8122243226213 Z " fill-rule="nonzero" fill="#f3974b" stroke="none" transform="matrix(1 0 0 1 366 5694 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/collect-gray.png
Normal file
BIN
img/collect-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
BIN
img/discuss-icon.png
Normal file
BIN
img/discuss-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.7 KiB |
BIN
img/essence-icon.png
Normal file
BIN
img/essence-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 71 KiB |
BIN
img/like-icon.png
Normal file
BIN
img/like-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
img/like-red-icon.png
Normal file
BIN
img/like-red-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 965 B |
BIN
img/logo-icon.png
Normal file
BIN
img/logo-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.4 KiB |
BIN
img/recommend-icon.png
Normal file
BIN
img/recommend-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 65 KiB |
6
img/sections-left.svg
Normal file
6
img/sections-left.svg
Normal file
@@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<svg version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" width="60px" height="240px" xmlns="http://www.w3.org/2000/svg">
|
||||
<g transform="matrix(1 0 0 1 -360 -1036 )">
|
||||
<path d="M 10 1 L 58.3017434089711 1 C 34.1415425553555 34.0611806206907 20 75.1021981437059 20 120 C 20 165.351835775029 34.4290045215671 206.768488498722 59.0387603330385 240 L 10 240 C 4.39999999999998 240 0 235.618257261411 0 230.041493775934 L 0 10.954356846473 C 0 5.37759336099589 4.39999999999998 0.995850622406579 10 1 Z " fill-rule="nonzero" fill="#50e3c2" stroke="none" transform="matrix(1 0 0 1 360 1036 )" />
|
||||
</g>
|
||||
</svg>
|
||||
BIN
img/share-gray.png
Normal file
BIN
img/share-gray.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.4 KiB |
158
index.html
158
index.html
@@ -1,13 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
</head>
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/index.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<!-- 论坛 -->
|
||||
<div></div>
|
||||
</body>
|
||||
<body>
|
||||
<div class="container" id="appIndex">
|
||||
<!-- 话题和精选 -->
|
||||
<div v-if="false" class="topic-and-selectives flexflex">
|
||||
<div class="topic-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/well-white.svg" />
|
||||
<div class="text">话题</div>
|
||||
</div>
|
||||
<div class="topic-head flexflex" bind:tap="goDetails" data-uniqid="{{ ongoingbj.uniqid }}">
|
||||
<div class="title one-line-display">{{ ongoingbj.title }}</div>
|
||||
<div class="hint one-line-display">{{ ongoingbj.description }}</div>
|
||||
<div class="people flexacenter">
|
||||
<div class="left flexacenter">
|
||||
<div class="number">{{ ongoingbj.comments }}</div>
|
||||
<div class="text">人正在讨论</div>
|
||||
</div>
|
||||
<div class="right flexacenter">
|
||||
<div class="item flexcenter" v-for="(item, index) in ongoingbj.commentUser" :key="index" :style="{zIndex: 7 - index }">
|
||||
<img class="img" :src="item.avatar" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="topic-list">
|
||||
<div class="item flexacenter" v-for="(item, index) in pastList" :key="index" bind:tap="goDetails" data-uniqid="{{ item.uniqid }}">
|
||||
<img class="img" src="https://app.gter.net/image/miniApp/offer/well-yellow.svg" />
|
||||
<div class="text one-line-display flex1">{{ item.title }}</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="selectives-box">
|
||||
<div class="head-top flexcenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/handpick-icon.png" />
|
||||
<div class="text">精选</div>
|
||||
</div>
|
||||
<div class="list flexflex">
|
||||
<div class="item flexacenter" v-for="(item, index) in 16" :key="index">
|
||||
<div class="dot"></div>
|
||||
<div class="text one-line-display">美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）美国各院校申请时间汇总（一）</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 论坛板块列表 -->
|
||||
<div v-if="false" class="forum-sections-list">
|
||||
<img class="img" src="./img/sections-left.svg" />
|
||||
<div class="title">论坛版块</div>
|
||||
<div class="list">
|
||||
<div class="line flexacenter">
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
</div>
|
||||
<div class="line flexacenter">
|
||||
<div class="item flexacenter">经济/商科</div>
|
||||
<div class="item flexacenter">经济/商科</div>
|
||||
<div class="item flexacenter">经济/商科</div>
|
||||
</div>
|
||||
<div class="line flexacenter">
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
</div>
|
||||
<div class="line flexacenter">
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
<div class="item flexacenter">香港</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="item-box item-forum">
|
||||
<div class="item-head flexacenter">
|
||||
<img class="avatar" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
|
||||
<div class="name">小P学姐</div>
|
||||
<img class="group" src="https://o.x-php.com/Zvt57TuJSUvkyhw-xG7Y2l-c_ZMtdXfqqsgFptxhcq_cQnrlcPJ0DVESBq_D-81qNDQyOQ~~" />
|
||||
<div class="time">2025-8-11 01:30</div>
|
||||
<div class="flex1"></div>
|
||||
|
||||
<div class="view flexacenter">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/eye-icon.svg" />
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
|
||||
<div class="btn flexcenter" @click="cutShow">
|
||||
<img class="icon" src="https://app.gter.net/image/miniApp/offer/dot-dot-dot-gray.png" />
|
||||
</div>
|
||||
|
||||
<!-- <template v-if="show">
|
||||
<div class="mask" catch:tap="cutShow" catch:touchmove="touchmove"></div>
|
||||
<div class="operate" catch:tap="true">
|
||||
<div class="item" bind:tap="report">举报</div>
|
||||
<template v-if="ismanager">
|
||||
<div class="item" bind:tap="hide">{{ item.hidden == 0 ? '隐藏' : '显示' }}</div>
|
||||
<div class="item" bind:tap="recommend">{{ item.recommend == 1 ? '取消' : '' }}推荐</div>
|
||||
<div class="item" bind:tap="essence">{{ item.best == 1 ? '取消' : '' }}精华</div>
|
||||
</template>
|
||||
</div>
|
||||
</template> -->
|
||||
</div>
|
||||
|
||||
<div class="label flexflex">
|
||||
<img class="item icon" src="./img/recommend-icon.png" />
|
||||
<img class="item icon" src="./img/essence-icon.png" />
|
||||
<div class="item blue">香港</div>
|
||||
<div class="item">香港</div>
|
||||
</div>
|
||||
|
||||
<div class="title">【干货】香港留学费用准备</div>
|
||||
|
||||
<div class="message">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div>
|
||||
|
||||
<div class="comment flexacenter">
|
||||
<img class="icon" src="https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC1UltTF6WOikN42jDKLNjtax7Hc44zLpaKSdU9oWFhY2E~/small" />
|
||||
<div class="text one-line-display">在即将赴港的时候，很多同学好奇香港一年制硕士下来的整体费用大概是多少，其实主要包括学费，租房费和生活费三部分。学费的话根据不同香港来定，大概在10-30万港币之间，比较固定…</div>
|
||||
</div>
|
||||
|
||||
<div class="bottom flexacenter">
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/like-icon.png" />
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/collect-golden.svg" />
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/discuss-icon.png" />
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
<div class="bottom-item like flexacenter">
|
||||
<img class="icon" src="./img/share-gray.png" />
|
||||
<div class="text">3016</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="./js/index.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
2
js/axios.min.js
vendored
Normal file
2
js/axios.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
75
js/index.js
Normal file
75
js/index.js
Normal file
@@ -0,0 +1,75 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
let ongoingbj = ref({
|
||||
commentUser: [
|
||||
{
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC",
|
||||
},
|
||||
{
|
||||
avatar: "https://nas.gter.net:9008/avatar/97K4EWIMLrsbGTWXslC2WFVSEKWOikN42jDKLNjtax7HL4xtfMOJSdU9oWFhY2E~/mini?random=iyHTPLKnfrDC",
|
||||
},
|
||||
],
|
||||
comments: 5,
|
||||
created_at: "2025-08-22 16:01:34",
|
||||
description: "''",
|
||||
status: 1,
|
||||
title: "【征稿】第五届糖尿病与内分泌学国际研讨会(ICDE 2025)",
|
||||
topicid: 254293,
|
||||
uniqid: "C840eySXCXSn",
|
||||
});
|
||||
|
||||
console.log(ongoingbj);
|
||||
|
||||
let pastList = ref([
|
||||
{
|
||||
comments: 24,
|
||||
created_at: "2025-04-14 16:08:52",
|
||||
description: "''",
|
||||
status: 0,
|
||||
title: "25年4月美国无预警大量撤销留学生签证，撤销原因是哪些？我们的一些相关建议",
|
||||
topicid: 253942,
|
||||
uniqid: "uDqLzLTbK4Of",
|
||||
},
|
||||
{
|
||||
comments: 24,
|
||||
created_at: "2025-04-14 16:08:52",
|
||||
description: "''",
|
||||
status: 0,
|
||||
title: "25年4月美国无预警大量撤销留学生签证，撤销原因是哪些？我们的一些相关建议",
|
||||
topicid: 253942,
|
||||
uniqid: "uDqLzLTbK4Of",
|
||||
},
|
||||
{
|
||||
comments: 24,
|
||||
created_at: "2025-04-14 16:08:52",
|
||||
description: "''",
|
||||
status: 0,
|
||||
title: "25年4月美国无预警大量撤销留学生签证，撤销原因是哪些？我们的一些相关建议",
|
||||
topicid: 253942,
|
||||
uniqid: "uDqLzLTbK4Of",
|
||||
},
|
||||
{
|
||||
comments: 24,
|
||||
created_at: "2025-04-14 16:08:52",
|
||||
description: "''",
|
||||
status: 0,
|
||||
title: "25年4月美国无预警大量撤销留学生签证，撤销原因是哪些？我们的一些相关建议",
|
||||
topicid: 253942,
|
||||
uniqid: "uDqLzLTbK4Of",
|
||||
},
|
||||
{
|
||||
comments: 24,
|
||||
created_at: "2025-04-14 16:08:52",
|
||||
description: "''",
|
||||
status: 0,
|
||||
title: "25年4月美国无预警大量撤销留学生签证，撤销原因是哪些？我们的一些相关建议",
|
||||
topicid: 253942,
|
||||
uniqid: "uDqLzLTbK4Of",
|
||||
},
|
||||
]);
|
||||
|
||||
return { ongoingbj, pastList };
|
||||
},
|
||||
}).mount("#appIndex");
|
||||
9
js/sectionIndex.js
Normal file
9
js/sectionIndex.js
Normal file
@@ -0,0 +1,9 @@
|
||||
const { createApp, ref, onMounted, nextTick, onUnmounted, computed, watch } = Vue;
|
||||
|
||||
createApp({
|
||||
setup() {
|
||||
|
||||
|
||||
return { };
|
||||
},
|
||||
}).mount("#appIndex");
|
||||
18039
js/vue.global.js
Normal file
18039
js/vue.global.js
Normal file
File diff suppressed because it is too large
Load Diff
24
sectionIndex.html
Normal file
24
sectionIndex.html
Normal file
@@ -0,0 +1,24 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Document</title>
|
||||
<link rel="stylesheet" href="./css/sectionIndex.css" />
|
||||
<script src="./js/vue.global.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container" id="sectionIndex">
|
||||
<div class="head">
|
||||
<img class="logo" src="./img/logo.png" alt="" />
|
||||
<div class="flex1"></div>
|
||||
<div class="input-box">
|
||||
<input type="text" placeholder="大家都在搜：屯特" />
|
||||
<img class="icon" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script src="./js/sectionIndex.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user