sc

src/views/Home/index.vue

@@ -6,11 +6,16 @@
         v-for="item in appList"
         :key="item.id"
         shadow="hover"
-        class="width-200px"
+        class="app-card"
         @click="handleAppClick(item)"
       >
         <!-- card body -->
-        <el-image :src="item.clientLogo" fit="fill" :lazy="true" style="width: 180px" />
+        <el-image
+          :src="item.clientLogo"
+          fit="fill"
+          :lazy="true"
+          style="width: 180px; height: 180px; border-radius: 10px; background-color: #fff"
+        />
         <div class="cutout-text">{{ item.clientName }}</div>
 
         <template #footer v-if="item.clientDescription">
@@ -42,10 +47,14 @@ function handleAppClick(item) {
 </script>
 
 <style lang="scss" scoped>
+::v-deep(.app-card) {
+  cursor: pointer;
+}
 ::v-deep(.el-card__body) {
-  background-color: #001529;
+  background-color: #000;
   padding: 5px;
   text-align: center;
+  min-width: 260px;
 }
 
 .cutout-text {
@@ -53,7 +62,7 @@ function handleAppClick(item) {
   font-size: 40px;
   font-weight: bold;
   -webkit-text-stroke: 1px #9a9acc;
-  color: #001529;
+  color: #000;
   &::before {
     content: ' ';
     width: 100%;
@@ -72,7 +81,7 @@ function handleAppClick(item) {
     width: 200%;
     height: 100%;
     background: radial-gradient(circle, #fff, #000 50%);
-    background-size: 25% 30%;
+    background-size: 25% 1%;
     mix-blend-mode: color-dodge;
     animation: mix 4s linear infinite;
     background-repeat: repeat;