style:优化project/items 列表及预览

src/views/project/items/components/ProjectItemsCard/index.vue

@@ -9,21 +9,15 @@
             :hidden="['remove']"
             @close="deleteHanlde"
             @resize="resizeHandle"
-         ></mac-os-control-btn>
+          ></mac-os-control-btn>
         </div>
         <!-- 中间 -->
-        <div class="list-content-img" @click="resizeHandle">
+        <div
-          <n-image
+          class="list-content-img"
-            object-fit="contain"
+          @click="resizeHandle"
-            height="180"
+          :title="cardData.title"
-            preview-disabled
+          :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')}), url(${requireErrorImg()})`"
-            :src="
+        ></div>
-              requireUrl('project/moke-20211219181327.png')
-            "
-            :alt="cardData.title"
-            :fallback-src="requireErrorImg()"
-         ></n-image>
-        </div>
       </div>
       <template #action>
         <div class="go-flex-items-center list-footer" justify="space-between">
@@ -34,16 +28,8 @@
           <div class="go-flex-items-center list-footer-ri">
             <n-space>
               <n-text>
-                <n-badge
+                <n-badge class="go-animation-twinkle" dot :color="cardData.release ? '#34c749' : '#fcbc40'"></n-badge>
-                  class="go-animation-twinkle"
+                {{ cardData.release ? $t('project.release') : $t('project.unreleased') }}
-                  dot
-                  :color="cardData.release ? '#34c749' : '#fcbc40'"
-              ></n-badge>
-                {{
-                  cardData.release
-                    ? $t('project.release')
-                    : $t('project.unreleased')
-                }}
               </n-text>
 
               <template v-for="item in fnBtnList" :key="item.key">
@@ -85,7 +71,7 @@
 
 <script setup lang="ts">
 import { reactive, ref, PropType } from 'vue'
-import { renderIcon, renderLang,  requireErrorImg } from '@/utils'
+import { renderIcon, renderLang, requireErrorImg } from '@/utils'
 import { icon } from '@/plugins'
 import { MacOsControlBtn } from '@/components/Tips/MacOsControlBtn'
 import { Chartype } from '../../index.d'
@@ -145,9 +131,7 @@ const selectOptions = ref([
     key: 'd1'
   },
   {
-    label: props.cardData?.release
+    label: props.cardData?.release ? renderLang('global.r_unpublish') : renderLang('global.r_publish'),
-      ? renderLang('global.r_unpublish')
-      : renderLang('global.r_publish'),
     key: 'send',
     icon: renderIcon(SendIcon)
   },
@@ -219,13 +203,11 @@ $contentHeight: 180px;
     }
     &-img {
       height: $contentHeight;
+      background-size: cover;
+      background-position: center;
+      background-repeat: no-repeat;
       @extend .go-flex-center;
       @extend .go-border-radius;
-      @include deep() {
-        img {
-          @extend .go-border-radius;
-        }
-      }
     }
   }
   .list-footer {

src/views/project/items/components/ProjectItemsModalCard/index.vue

@@ -1,10 +1,6 @@
 <template>
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
-  <n-modal
+  <n-modal class="go-modal-box" v-model:show="modalShow" @afterLeave="closeHandle">
-    class="go-modal-box"
-    v-model:show="modalShow"
-    @afterLeave="closeHandle"
-  >
     <n-card hoverable size="small">
       <div class="list-content">
         <!-- 标题 -->
@@ -17,21 +13,14 @@
         </n-space>
         <!-- 顶部按钮 -->
         <n-space class="list-content-top">
-          <mac-os-control-btn
+          <mac-os-control-btn :narrow="true" :hidden="['close']" @remove="closeHandle"></mac-os-control-btn>
-            :narrow="true"
-            :hidden="['close']"
-            @remove="closeHandle"
-         ></mac-os-control-btn>
         </n-space>
         <!-- 中间 -->
-        <div class="list-content-img">
+        <div
-          <img
+          class="list-content-img"
-            :src="
+          :title="cardData?.title"
-              requireUrl('project/moke-20211219181327.png')
+          :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')})`"
-            "
+        ></div>
-            :alt="cardData?.title"
-          />
-        </div>
       </div>
       <template #action>
         <n-space class="list-footer" justify="space-between">
@@ -42,16 +31,8 @@
           <!-- 工具 -->
           <n-space>
             <n-text>
-              <n-badge
+              <n-badge class="go-animation-twinkle" dot :color="cardData?.release ? '#34c749' : '#fcbc40'"></n-badge>
-                class="go-animation-twinkle"
+              {{ cardData?.release ? $t('project.release') : $t('project.unreleased') }}
-                dot
-                :color="cardData?.release ? '#34c749' : '#fcbc40'"
-             ></n-badge>
-              {{
-                cardData?.release
-                  ? $t('project.release')
-                  : $t('project.unreleased')
-              }}
             </n-text>
 
             <template v-for="item in fnBtnList" :key="item.key">
@@ -143,13 +124,12 @@ $contentWidth: calc(82vw);
       width: $contentWidth;
     }
     &-img {
+      height: $contentHeight;
+      background-size: contain;
+      background-position: center;
+      background-repeat: no-repeat;
       @extend .go-flex-center;
-      img {
+      @extend .go-border-radius;
-        max-height: $contentHeight;
-        min-height: 200px;
-        max-width: 100%;
-        @extend .go-border-radius;
-      }
     }
   }
   .list-footer {