style: horse

JX3BOX · Dec 20, 2023 · 05884d5 · 05884d5
1 parent e428afa
commit 05884d5
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 39 deletions.
diff --git a/src/assets/css/horse/broadcast.less b/src/assets/css/horse/broadcast.less
@@ -1,5 +1,5 @@
 .m-horse-broadcast {
-    .mb(40px);
+    .mt(40px);
     .m-horse-broadcast__header {
         .flex;
         align-items: flex-end;
@@ -40,6 +40,7 @@
             padding: 20px;
             background-color: #fff;
             box-sizing: border-box;
+            box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.1);
             .u-horse-map {
                 .size(306px,192px);
                 .r(10px);
@@ -121,6 +122,6 @@
         display: flex;
         justify-content: center;
         align-items: center;
-        min-height: 150px;
+        min-height: 317px;
     }
 }
diff --git a/src/assets/css/horse/card.less b/src/assets/css/horse/card.less
@@ -7,6 +7,7 @@
     box-sizing: border-box;
     padding: 20px;
     color: #24292e;
+    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.1);
 
     .u-image {
         .size(160px);
@@ -21,10 +22,9 @@
         font-weight: 700;
     }
     .u-desc {
-        .fz(14px,1.2);
+        .fz(12px,1.2);
         width: 100%;
         font-weight: 400;
-        color: #999;
     }
     .u-img {
         .flex;
@@ -36,14 +36,9 @@
         overflow-x: auto;
     }
 
-    &:hover {
-        .u-image {
-            transform: scale(1.05);
-        }
-    }
     .u-attr-icon {
         .size(30px);
-        box-sizing: border-box; 
+        box-sizing: border-box;
     }
     .u-attr-wrap {
         display: flex;
@@ -57,6 +52,17 @@
             }
         }
     }
+    .u-more {
+        .flex;
+        .r(3px);
+        .w(100%);
+        font-weight: 400;
+        cursor: default;
+        align-items: center;
+        justify-content: center;
+        color: #999;
+        background-color: #f3f4f5;
+    }
 }
 
 @media screen and (max-width: @phone) {

diff --git a/src/assets/css/horse/index.less b/src/assets/css/horse/index.less
@@ -2,7 +2,16 @@
     .pt(40px);
     position: relative;
     .list-wrapper {
-        .pt(20px);
+        .m-horse-broadcast__header {
+            .mb(10px);
+        }
+        .m-horse-broadcast .m-horse-broadcast__header .el-select input {
+            background-color: #f1f1f1;
+        }
+        .m-horse-broadcast .list {
+            padding: 10px;
+            .ml(-10px);
+        }
     }
     .operate-wrap {
         display: flex;
@@ -47,12 +56,11 @@
     .list-wrapper {
         min-height: 300px;
         .list-item-wrapper {
-            margin-bottom: 40px;
             .title-header {
+                margin: 40px 0 20px 0;
                 display: flex;
                 justify-content: space-between;
                 align-items: flex-end;
-                margin-bottom: 20px;
                 .title {
                     font-weight: 700;
                     font-size: 28px;

diff --git a/src/components/horse/HorseCard.vue b/src/components/horse/HorseCard.vue
@@ -6,33 +6,11 @@
             </div>
         </el-image>
         <item-icon v-else :item_id="String(item.ItemID)" :isLink="false" :size="160" :onlyIcon="true"></item-icon>
-        <!-- <div v-else class="u-image"></div> -->
+
         <div class="u-name">{{ item.Name }}</div>
         <div class="u-desc">ID: {{ item.ID }}</div>
-        <!-- <div class="u-desc">{{ getType(item) + (item.SubType === 15 ? (" · " + item.modeName + " · " + item.speed) : "") }}</div> -->
-        <!-- <div class="u-desc">等级: {{ item.Level }}</div> -->
-        <!-- <div v-if="item.SubType === 15" class="u-desc">{{ item.MoveSpeedDesc }}</div> -->
         <div class="u-img">
-            <!-- <horse-cross :width="15" :gap="2" :radius="3" :list="item.MagicAttributes || []">
-                <template v-slot="data">
-                    <el-tooltip trigger="hover" placement="top">
-                        <div class="u-attr-pop" slot="content">
-                            <div class="u-attr-name" v-if="data.item.name">
-                                {{ (data.item.name || "") + (Number(data.item.level) ? data.item.level + "级" : "") }}
-                            </div>
-                            <div class="u-attr-desc">{{ data.item.desc }}</div>
-                        </div>
-                        <img class="u-attr-icon" :src="data.item.iconUrl" :alt="data.item.name" />
-                    </el-tooltip>
-                </template>
-            </horse-cross> -->
-
-            <el-tooltip
-                trigger="hover"
-                placement="top"
-                v-for="(data, index) in item.MagicAttributes || []"
-                :key="index"
-            >
+            <el-tooltip trigger="hover" placement="top" v-for="(data, index) in MagicAttributes" :key="index">
                 <div class="u-attr-pop" slot="content">
                     <div class="u-attr-name" v-if="data.name">
                         {{ (data.name || "") + (Number(data.level) ? data.level + "级" : "") }}
@@ -41,13 +19,13 @@
                 </div>
                 <img class="u-attr-icon" :src="data.iconUrl" :alt="data.name" />
             </el-tooltip>
+            <span class="u-more" v-if="count">+{{ count }}</span>
         </div>
     </a>
 </template>
 
 <script>
 import ItemIcon from "../common/item_icon.vue";
-// import HorseCross from "@/components/horse/HorseCross.vue";
 export default {
     props: {
         item: {
@@ -57,7 +35,6 @@ export default {
     },
     components: {
         ItemIcon,
-        // HorseCross,
     },
     inject: ["__imgRoot", "__imgRoot2"],
     data: function () {
@@ -67,6 +44,12 @@ export default {
         client() {
             return this.$store.state.client;
         },
+        MagicAttributes() {
+            return this.item.MagicAttributes.slice(0, 3) || [];
+        },
+        count() {
+            return this.item.MagicAttributes.slice(2, -1).length;
+        },
     },
     methods: {
         replaceByDefault(e) {