Merge branch 'main' of http://192.168.0.56:3000/bonus/Zlpt_Portal

src/compontents/equipCard.vue

@@ -0,0 +1,131 @@
+<template>
+    <div class="equipCard">
+        <div class="avatar">
+            <div class="showImg">
+                <img :src="url" class="">
+            </div>
+        </div>
+
+        <div class="desc">
+            <div class="title">
+                {{ name }}
+            </div>
+            <div class="tag">
+                <div class="item" v-for="(v,i) in tags" :key="i">
+                    {{ v }}
+                </div>
+            </div>
+            <div class="company">
+                {{ company }}
+            </div>
+            <div class="price">
+                ￥<span>{{price}}</span>/{{timeUnit}}
+            </div>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+    const props:any = defineProps({
+        url:{
+            type: String,
+            default: 'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=117e17eae3082b7b524f890245f7826f'
+        },
+        name:{
+          type: String,
+          default: '测试装备'
+        },
+        tags:{
+            type: Array,
+            default: ['待租','合肥市']
+        },
+        company:{
+            type: String,
+            default: '安徽某科技有限公司'
+        },
+        price:{
+            type: [String , Number],
+            default: 99
+        },
+        timeUnit:{
+            type: String,
+            default: '月'
+        }
+    })
+</script>
+<style lang="scss" scoped>
+.equipCard{
+    width: 100%;
+    background: #F7F9FA;
+    border-radius: 10px;
+    box-sizing: border-box;
+    padding: 15px 15px 8px 15px;
+    display: flex;
+    align-items: center;
+    .avatar{
+        width: 40%;
+        overflow: hidden;
+        border-radius: 15px;
+        .showImg{
+            width: 100%;
+            padding-bottom: 100%;
+            position: relative;
+            img{
+                position: absolute;
+                left: 0;
+                top: 0;
+                object-fit: cover;
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+    }
+    .desc{
+        box-sizing: border-box;
+        margin-left: 10px;
+        flex: 1;
+        overflow: hidden;
+        .title{
+            font-size: 20px;
+            font-weight: 400;
+            color: #333333;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .tag{
+            display: flex;
+            margin-top: 5px;
+            .item{
+                background: white;
+                font-size: 14px;
+                font-weight: 400;
+                color: #005AF2;
+                padding: 2px 3px;
+                border: 1px solid #005AF2;
+                margin-right: 10px;
+                border-radius: 4px;
+            }
+        }
+        .company{
+            margin-top: 10px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #A5A4A4;
+            line-height: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .price{
+            font-size: 14px;
+            font-weight: 400;
+            color: #FF4800;
+            margin-top: 20px;
+            span{
+                font-size: 33px;
+            }
+        }
+    }
+}
+</style>