From 2760245a3b3ec65da63e1b1c9657468f3e9dd8f9 Mon Sep 17 00:00:00 2001
From: xushihao <mars.x@live.com>
Date: Tue, 25 Oct 2022 15:42:12 +0800
Subject: [PATCH] =?UTF-8?q?style:=E4=BC=98=E5=8C=96project/items=20?=
 =?UTF-8?q?=E5=88=97=E8=A1=A8=E5=8F=8A=E9=A2=84=E8=A7=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/ProjectItemsCard/index.vue     | 46 ++++++------------
 .../ProjectItemsModalCard/index.vue           | 48 ++++++-------------
 2 files changed, 28 insertions(+), 66 deletions(-)

diff --git a/src/views/project/items/components/ProjectItemsCard/index.vue b/src/views/project/items/components/ProjectItemsCard/index.vue
index b042d229..4fa0862c 100644
--- a/src/views/project/items/components/ProjectItemsCard/index.vue
+++ b/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">
-          <n-image
-            object-fit="contain"
-            height="180"
-            preview-disabled
-            :src="
-              requireUrl('project/moke-20211219181327.png')
-            "
-            :alt="cardData.title"
-            :fallback-src="requireErrorImg()"
-         ></n-image>
-        </div>
+        <div
+          class="list-content-img"
+          @click="resizeHandle"
+          :title="cardData.title"
+          :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')}), url(${requireErrorImg()})`"
+        ></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
-                  class="go-animation-twinkle"
-                  dot
-                  :color="cardData.release ? '#34c749' : '#fcbc40'"
-              ></n-badge>
-                {{
-                  cardData.release
-                    ? $t('project.release')
-                    : $t('project.unreleased')
-                }}
+                <n-badge class="go-animation-twinkle" 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
-      ? renderLang('global.r_unpublish')
-      : renderLang('global.r_publish'),
+    label: props.cardData?.release ? 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 {
diff --git a/src/views/project/items/components/ProjectItemsModalCard/index.vue b/src/views/project/items/components/ProjectItemsModalCard/index.vue
index 938f2e5c..e9539198 100644
--- a/src/views/project/items/components/ProjectItemsModalCard/index.vue
+++ b/src/views/project/items/components/ProjectItemsModalCard/index.vue
@@ -1,10 +1,6 @@
 <template>
   <!-- mask-closable 暂时是失效的，不知道为啥 -->
-  <n-modal
-    class="go-modal-box"
-    v-model:show="modalShow"
-    @afterLeave="closeHandle"
-  >
+  <n-modal 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
-            :narrow="true"
-            :hidden="['close']"
-            @remove="closeHandle"
-         ></mac-os-control-btn>
+          <mac-os-control-btn :narrow="true" :hidden="['close']" @remove="closeHandle"></mac-os-control-btn>
         </n-space>
         <!-- 中间 -->
-        <div class="list-content-img">
-          <img
-            :src="
-              requireUrl('project/moke-20211219181327.png')
-            "
-            :alt="cardData?.title"
-          />
-        </div>
+        <div
+          class="list-content-img"
+          :title="cardData?.title"
+          :style="`background-image: url(${requireUrl('project/moke-20211219181327.png')})`"
+        ></div>
       </div>
       <template #action>
         <n-space class="list-footer" justify="space-between">
@@ -42,16 +31,8 @@
           <!-- 工具 -->
           <n-space>
             <n-text>
-              <n-badge
-                class="go-animation-twinkle"
-                dot
-                :color="cardData?.release ? '#34c749' : '#fcbc40'"
-             ></n-badge>
-              {{
-                cardData?.release
-                  ? $t('project.release')
-                  : $t('project.unreleased')
-              }}
+              <n-badge class="go-animation-twinkle" 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 {
-        max-height: $contentHeight;
-        min-height: 200px;
-        max-width: 100%;
-        @extend .go-border-radius;
-      }
+      @extend .go-border-radius;
     }
   }
   .list-footer {