Sfoglia il codice sorgente

task列表UI美化

hao lei 1 anno fa
parent
commit
8bca4b1431

+ 5 - 5
src/components/TabList/index.vue

@@ -86,9 +86,9 @@
             </div>
           </div>
         </div>
-        <div class="panel-bottom">
+        <!-- <div class="panel-bottom">
           <div class="bench-left-bottom-btn"></div>
-        </div>
+        </div> -->
       </div>
       <div class="tab-content" :class="tabClass" v-if="activeTab === 2">
         <div class="panel-container">
@@ -485,9 +485,9 @@
           </div>
           <div></div>
         </div>
-        <div class="panel-bottom" v-show="isShowTaskList">
+        <!-- <div class="panel-bottom" v-show="isShowTaskList">
           <div class="task-left-bottom-btn">+</div>
-        </div>
+        </div> -->
       </div>
     </div>
   </div>
@@ -794,7 +794,7 @@ export default {
   // overflow: scroll;
   // background-image: url(../../images/tab-content.png);
   background-size: 100% 100%;
-  padding: 1.75vh 1.51vw 0 1.51vw;
+  padding: 1.75vh 1.51vw;
   border-radius: 2.08vw;
 }
 .short {

+ 28 - 11
src/views/ordinaryPage/index.less

@@ -149,6 +149,9 @@
             margin-right: 0.2vw;
             padding: 0px 10px;
             width: max-content;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
           }
         }
       }
@@ -204,9 +207,12 @@
     border-radius: 20px 20px 20px 20px;
     opacity: 1;
     margin-bottom: 1.85vh;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
     .item-title {
       height: 4.17vh;
-      font-size: 24px;
+      font-size: 18px;
       font-family: PingFang SC-Bold, PingFang SC;
       font-weight: 400;
       color: #fbfbfb;
@@ -226,14 +232,21 @@
       display: flex;
       margin-top: 0.92vh;
       .tag {
-        padding: 0 1vw;
-        height: 2.96vh;
-        line-height: 2.96vh;
+        margin-bottom: 0.2vh;
+        //width: 3.13vw;
+        height: 1.96vh;
+        font-size: xx-small;
+        line-height: 1.96vh;
         text-align: center;
         background-color: #5d9a6d;
         border-radius: 10px;
         color: #f2f2f2;
-        margin-right: 1vw;
+        margin-right: 0.2vw;
+        padding: 0px 10px;
+        width: max-content;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
       }
     }
   }
@@ -255,16 +268,20 @@
 }
 
 .taskBtn {
-  padding: 5px 10px;
+  height: 30px;
+  width: 60px;
+  // padding: 5px 10px;
   border-radius: 30px;
-  height: 35px;
   color: #fff;
   font-weight: bold;
+  font-size: 14px;
   background: linear-gradient(180deg, #FBE383 0%, #D9A411 100%);
-  border-radius: 44px 44px 44px 44px;
-  opacity: 1;
-  border: 1px solid rgba(255,255,255,0.4);
-  float:right;
+  // border-radius: 44px 44px 44px 44px;
+  // opacity: 1;
+  // border: 1px solid rgba(255,255,255,0.4);
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 .issue-list {

+ 2 - 2
src/views/ordinaryPage/index.vue

@@ -1179,11 +1179,11 @@ export default {
         that.isShowTaskList = true;
       },
       taskRender(item) {
-        return `<div class="item-box" style="display:flex;align-items: top; justify-content: space-between;">
+        return `<div class="item-box">
               <div class="left">
                   <div style="">
                     <div class="item-title">${item.name}</div>
-                    <div class="item-title">${item.description}</div>
+                    <div class="item-description">${item.description}</div>
                   </div>
                   <div class="item-tag">
                       <div class="tag">${item.processor_name}</div>