详情页

src/assets/css/home-style.css

@@ -5,9 +5,9 @@
 }
 
 :root {
-
+    --theme-comment-color: rgba(178, 188, 250, 0.4);
     --theme-bg-color: rgba(16 18 27 / 40%);
-    --border-color: rgba(113 119 144 / 25%);
+    --border-color: rgba(28, 32, 37, 0.25);
     --theme-color: #f9fafb;
     --inactive-color: rgb(113 119 144 / 78%);
     --body-font: "Poppins", sans-serif;
@@ -24,6 +24,7 @@
 }
 
 .light-mode {
+    --theme-comment-color: rgba(255, 202, 145, 0.4);
     --theme-bg-color: rgb(255 255 255 / 31%);
     --theme-color: #3c3a3a;
     --inactive-color: #333333;
@@ -913,7 +914,7 @@ body.light-mode .video-bg:before {
 
 /*main-container结构下的标头格式*/
   .HeadLine{
-      margin-left:20px;
+      margin-left:5px;
       font-size:30px;
       display:flex;
       flex-direction:row;
@@ -923,7 +924,8 @@ body.light-mode .video-bg:before {
 /*main-container结构下的标头字体格式*/
   .TitleFont{
       margin-left:10px;
-      font-weight:600;
+      font-weight:550;
+      font-family: STHupo;
   }
 /*main-container结构下的标头矩形图案样式*/
   .HeadSquare{
@@ -933,3 +935,107 @@ body.light-mode .video-bg:before {
       margin-top:3px;
       background-color: #59a2a3;
   }
+/*详情页左侧部分*/
+.LeftPart{
+    display: flex;
+    flex-direction: column;
+}
+
+/*背景板*/
+.JustBack{
+    display: flex;
+    flex-direction: column;
+    color: var(--theme-color);
+    padding: 20px 40px;
+    height: 100%;
+    background-color: var(--theme-bg-color);
+}
+
+/** 总推荐标签 **/
+.RecAll{
+    display:flex;
+    flex-direction: row;
+}
+
+/** 单列推荐标签 **/
+.SingleLabel{
+    margin-top:2px;
+//background-color: rgba(217, 217, 217, 0.5);
+    width:210px;
+    height: 100%;
+    border-radius:10px;
+}
+/** 单推荐标签 **/
+#ALabel{
+    font-family: STXihei;
+    font-weight:600;
+    font-size:13px;
+    margin-top:8px;
+    margin-left:5px;
+    width:155px;
+    height:30px;
+    border-radius:10px;
+    color: var(--theme-color);
+}
+#ALabel :hover{
+    transform: scale(1.05);
+}
+
+
+
+#Rec{
+    border-color:var(--border-color);
+    border-width:5px;
+    border-style:solid;
+    height:250px;
+    width: 340px;
+    background-color: var(--theme-bg-color);
+}
+
+.little-Triangle{
+    text-align:center;
+    width:100px;
+    height:40px;
+    border-color:var(--border-color);
+    border-style:solid;
+    border-width: 5px;
+    border-radius:5px;
+    background-color: rgba(175, 175, 175, 0.31);
+}
+
+.little-Triangle :hover{
+    transform: scale(1.07);
+}
+
+.little-Circle{
+    text-align: center;
+    width:40px;
+    height:40px;
+    border-radius:40px;
+    border-color:var(--border-color);
+    border-style:solid;
+    background-color: rgba(175, 175, 175, 0.32);
+}
+#little-Circle-content{
+    font-size:25px;
+    z-index:999;
+
+}
+
+#readNum :hover{
+    transform: scale(1.25);
+}
+#Rank :hover{
+    transform: scale(1.25);
+}
+
+
+.NavInfo{
+    font-weight:550;
+    display: flex;
+    flex-direction:column;
+}
+
+
+
+