Merge pull request 'fix:整体样式调整' (#206) from fix/change_task into test

Reviewed-on: #206

src/views/final/content/ListContent.vue

@@ -145,12 +145,12 @@ async function query(
     ...params,
   });
   const { data, pageCount, totalCount } = result;
-  console.log(data, pageCount, totalCount);
+  //console.log(data, pageCount, totalCount);
   let newlist = [];
   let oldlist = tableData.value;
   if (oldlist.length > 0) {
     oldlist.map((item) => {
-      console.log(item);
+      // console.log(item);
       if (item.length > 0) {
         item.map((itemx: any) => {
           itemx.showcheck = false;
@@ -494,15 +494,15 @@ function checkBottom() {
       <div>
         <div>
           <span>提报时间排序</span
-          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
         </div>
         <div>
           <span>相似度排序</span
-          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
         </div>
         <div>
           <span>提报人排序</span
-          ><SvgIcon style="margin-left: 8px" name="sort" size="12" />
+          ><SvgIcon style="margin-left: 6px" name="sort" size="13" />
         </div>
       </div>
       <div style="width: 3vw">
@@ -546,30 +546,30 @@ function checkBottom() {
         >
           <div class="top">
             <div
+              @click="goDetail(item)"
               class="img"
               :style="
                 item.serverThumbnailUrl != null
                   ? `background:url(${item.serverThumbnailUrl});background-size:100% 100%;background-repeat: no-repeat;`
                   : `background:url(${item.imgUrl});background-size:100% 100%;background-repeat: no-repeat;`
               "
-            >
-              <div class="check_box" v-show="item.states == 2">
-                <n-checkbox
-                  size="medium"
-                  label=" "
-                  @click="handleCheck(item, item.showcheck)"
-                  :checked="item.showcheck"
-                />
-              </div>
+            ></div>
+            <div class="check_box" v-show="item.states == 2">
+              <n-checkbox
+                size="medium"
+                label=" "
+                @click="handleCheck(item, item.showcheck)"
+                :checked="item.showcheck"
+              />
             </div>
             <div class="content" @click="goDetail(item)">
               <div class="title">
-                <n-ellipsis style="max-width: 8.5vw">
+                <n-ellipsis style="max-width: 100%">
                   任务ID：{{ item.fromtaskid }}
                 </n-ellipsis>
               </div>
               <div class="date">
-                <n-ellipsis style="max-width: 8.5vw"
+                <n-ellipsis style="max-width: 100%"
                   >{{ item.createdate }}
                 </n-ellipsis>
               </div>
@@ -693,6 +693,7 @@ function checkBottom() {
     }
 
     .xjcc {
+      //width: 226px;
       font-weight: bold;
       color: #507afd;
       margin-right: 20px;
@@ -757,13 +758,17 @@ function checkBottom() {
     padding: 12px 0px;
     > div {
       display: flex;
-      justify-content: space-between;
-      width: 20vw;
+
+      //  justify-content: space-between;
+      //width: 20vw;
       > div {
         cursor: pointer;
-        font-size: 0.8rem;
-        font-family: PingFang SC, PingFang SC-Regular;
-        font-weight: bolder;
+        margin-right: 30px;
+        font-size: 13px;
+        height: 18px;
+        line-height: 18px;
+        /* font-family: PingFang SC, PingFang SC-Regular; */
+        font-weight: 600;
         text-align: left;
         color: #666666;
         line-height: 0.88rem;
@@ -784,14 +789,14 @@ function checkBottom() {
     // flex: 1;
     .item {
       flex: 1;
-      min-width: 23%;
+      width: 23%;
       margin-left: 2.3%;
-      height: 12.4vh;
-     
+      height: 7rem;
+
       background: url("@/assets/images/cardbg.png");
       background-repeat: no-repeat;
       background-size: 100% 100%;
-    // border: 0.075rem solid #e8e8e8;
+      // border: 0.075rem solid #e8e8e8;
       border-radius: 0.18rem;
       padding: 0.5rem 0.625rem;
       // margin-right: 20px;
@@ -805,24 +810,28 @@ function checkBottom() {
         justify-content: flex-start;
         height: 75%;
         border-bottom: 0.05rem solid #e8e8e8;
+        position: relative;
         .img {
-          width: 35%;
-          //width: 5.25rem;
+          //width: 35%;
+
+          width: 5.25rem;
           height: 3.43rem;
           // height: auto;
           object-fit: cover;
           border-radius: 0.18rem;
-          .check_box {
-            margin-left: 0.5rem;
-          }
+        }
+        .check_box {
+          position: absolute;
+          left: 0.25rem;
+          top: 0.6rem;
         }
         .content {
           margin-left: 0.8rem;
+          width: calc(100% - 6rem);
           .title,
           .date {
             font-size: 0.68rem;
-              font-family: PingFang SC, PingFang SC-Medium;
-            font-weight: bolder;
+            font-weight: 500;
             text-align: left;
             color: #323233;
             line-height: 1rem;
@@ -833,17 +842,18 @@ function checkBottom() {
           flex-flow: row nowrap;
           align-items: center;
           justify-content: flex-start;
+          margin-top: 0.5rem;
           .tag_item {
-            min-width: 1.93rem;
+            min-width: 2rem;
             min-height: 0.875rem;
-            font-size: 0.625rem;
+            font-size: 0.52rem;
             padding: 0.0625rem 0.18rem;
             font-weight: bolder;
             text-align: left;
             //   color: #507afd;
             line-height: 0.875rem;
             letter-spacing: 0.006rem;
-            margin-right: 0.5rem;
+            margin-right: 0.2rem;
             // opacity: 0.1;
             background: #c0f7ec69;
             border-radius: 0.125rem;
@@ -920,5 +930,9 @@ function checkBottom() {
   ::-webkit-scrollbar-thumb:hover {
     background-color: #555;
   }
+  :deep(.n-checkbox .n-checkbox-box) {
+    width: 0.85rem;
+    height: 0.85rem;
+  }
 }
 </style>