add resource detail and user part interface
Change-Id: I83541b5dc80bde465878cdccdbc77431b56dbff6
diff --git "a/src/app/resource/resource-detail/\133resourceId\135/resource-detail.scss" "b/src/app/resource/resource-detail/\133resourceId\135/resource-detail.scss"
new file mode 100644
index 0000000..3df502d
--- /dev/null
+++ "b/src/app/resource/resource-detail/\133resourceId\135/resource-detail.scss"
@@ -0,0 +1,266 @@
+//全局容器样式
+.resource-detail-container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 0 2rem;
+
+ //资源标题样式
+ .resource-header {
+ font-size: 34px;
+ color: rgba(63, 74, 73, 1);
+ margin-top: 22px;
+ margin-bottom: 20px;
+ }
+
+ //资源信息样式
+ .resource-info {
+ display: flex;
+
+ .resource-info-detail {
+ display: flex;
+ flex-direction: column;
+ margin-left: 35px;
+ justify-content: space-around;
+
+ //资源热度样式
+ .resource-hot {
+ display: flex;
+
+ .resource-hot-data {
+ font-size: 28px;
+ color: rgba(255, 87, 51, 1);
+ margin: auto 0 auto 20px;
+ }
+ }
+
+ //资源标签样式
+ .resource-label {
+ .resource-label-button {
+ margin-right: 15px;
+ width: 80px;
+ height: 34px;
+ border-radius: 15px;
+ border: 1px solid rgba(166, 166, 166, 1);
+ background-color: rgba(166, 166, 166, 1);
+ }
+ }
+
+ //浏览量和下载量样式
+ .resource-data {
+ //margin-top: 10px;
+ color: rgba(82, 102, 101, 1);
+
+ .pi-eye {
+ font-size: 21px;
+ }
+
+ .pi-download {
+ font-size: 21px;
+ }
+
+ .resource-data-container-number{
+ font-size: 24px;
+ margin-left: 8px;
+ }
+ }
+
+ //发布时间和更新时间样式
+ .resource-time {
+ //margin-top: 10px;
+ color: rgba(82, 102, 101, 1);
+ }
+ }
+ }
+
+
+ //资源简介
+ .resource-summary {
+ margin-top: 15px;
+ margin-bottom: 15px;
+ color: rgba(28, 46, 43, 1);
+ font-size: 18px;
+ }
+
+ //资源详情样式
+ .resource-detail {
+ white-space: pre-line; /* 保留换行符 */
+ line-height: 25px; /* 增加行高增强可读性 */
+ }
+
+ //资源操作部分的样式
+ .resource-operation {
+ display: flex;
+ justify-content: space-between;
+ margin-bottom: 40px;
+ margin-top: 40px;
+
+ .resource-author {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ width: 380px;
+
+ .resource-author-name {
+ display: flex;
+ justify-content: center;
+ font-size: 19px;
+ color: rgba(82, 102, 101, 1);
+ width: 200px;
+ }
+
+ button {
+ height: 40px;
+ width: 110px;
+ background-color: rgba(82, 102, 101, 1);
+ border: 1px solid rgba(82, 102, 101, 1);
+ border-radius: 15px;
+ }
+ }
+
+ .resource-operation-detail {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ //height: 44px;
+
+ .resource-operation-detail-data {
+ margin-right: 55px;
+ display: flex;
+ align-items: center;
+
+ span{
+ margin-left:4px;
+ font-size: 17px;
+ }
+ }
+ }
+ }
+
+ //资源详情样式
+ .resource-detail {
+ .resource-detail-title {
+ color: rgba(82, 102, 101, 1);
+ margin-bottom: 25px;
+ margin-left: 0;
+ }
+
+ .resource-detail-text {
+ padding-left: 30px;
+ color: rgba(28, 46, 43, 1);
+ }
+ }
+
+ // 评论区域
+ .comments-section {
+ .comments-header {
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+
+ h2 {
+ font-size: 1.5rem;
+ color: #2d3748;
+ margin-bottom: 1.5rem;
+ }
+ }
+
+ // 评论输入区
+ .comments-input {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ padding: 1rem;
+ border-radius: 0.5rem;
+
+ .p-inputtext {
+ flex: 1; // 输入框占据剩余空间
+ height: 3rem;
+ }
+
+ .p-button {
+ height: 3rem;
+ }
+ }
+
+ // 评论列表
+ .comments-list {
+ display: flex;
+ flex-direction: column;
+ margin-top: 1rem;
+ gap: 0.5rem;
+
+ .comment-item {
+ padding: 1.5rem;
+ border-radius: 0.5rem;
+
+ .comment-user {
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ margin-bottom: 1rem;
+
+ .comment-meta {
+ display: flex;
+ align-items: center;
+ width: 100%;
+ justify-content: space-between;
+ gap: 0.5rem;
+
+ .comment-time {
+ justify-content: space-between;
+ gap: 0.75rem
+ }
+
+ .username {
+ margin-left: 0.5rem;
+ font-weight: 600;
+ color: #2d3748;
+ }
+
+ .floor {
+ color: #718096;
+ margin-right: 0.75rem;
+ font-size: 0.875rem;
+ }
+
+ .time {
+ color: #a0aec0;
+ font-size: 0.875rem;
+ }
+ }
+ }
+
+ .comment-content {
+ padding-left: 3.5rem;
+
+ .reply-to {
+ display: inline-block;
+ color: #93C4C1;
+ font-size: 0.875rem;
+ margin-bottom: 0.5rem;
+ }
+
+ p {
+ color: #4a5568;
+ margin: 0;
+ line-height: 1.5;
+ }
+ }
+ }
+ }
+ }
+
+ // 购买弹窗样式
+ .purchase-dialog {
+ .form-text {
+ }
+ }
+}
+
+// 取消进入社区的下划线
+.no-underline {
+ text-decoration: none;
+ color: rgba(0, 186, 173, 1);
+ font-size: 18px;
+}
+