From f46cd7b905fff78e78e8f54dea400ed92cabc2d4 Mon Sep 17 00:00:00 2001
From: BianLzhaoMin <11485688+bianliangzhaomin123@user.noreply.gitee.com>
Date: Fri, 22 Nov 2024 18:03:09 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E7=AD=89=E6=A8=A1=E5=9D=97?=
 =?UTF-8?q?=E5=AE=8C=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components.d.ts                       |   1 +
 src/assets/icon/cart.svg              |   1 +
 src/components/equipCardNew/index.vue | 187 ++++++++++++++++++++++++++
 src/http/api/equip.ts                 |   8 +-
 src/layout/header.vue                 |  42 +++---
 src/views/home/index.vue              | 113 +++++++++-------
 6 files changed, 282 insertions(+), 70 deletions(-)
 create mode 100644 src/assets/icon/cart.svg
 create mode 100644 src/components/equipCardNew/index.vue

diff --git a/components.d.ts b/components.d.ts
index d030040..37c1ff3 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -39,6 +39,7 @@ declare module 'vue' {
     ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
     ElUpload: typeof import('element-plus/es')['ElUpload']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
+    EquipCardNew: typeof import('./src/components/equipCardNew/index.vue')['default']
     EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']
     FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']
     FormComponent: typeof import('./src/components/FormComponent/index.vue')['default']
diff --git a/src/assets/icon/cart.svg b/src/assets/icon/cart.svg
new file mode 100644
index 0000000..3e4508a
--- /dev/null
+++ b/src/assets/icon/cart.svg
@@ -0,0 +1 @@
+<svg t="1732269368665" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3110" width="200" height="200"><path d="M845.4 383H758c-16.6 0-30-13.4-30-30s13.4-30 30-30h87.4c16.6 0 30 13.4 30 30s-13.5 30-30 30zM662.3 383H263.1c-16.6 0-30-13.4-30-30s13.4-30 30-30h399.2c16.6 0 30 13.4 30 30s-13.5 30-30 30z" fill="#33CC99" p-id="3111"></path><path d="M433.2 873.2m-55 0a55 55 0 1 0 110 0 55 55 0 1 0-110 0Z" fill="#FFB89A" p-id="3112"></path><path d="M854.5 873.2m-55 0a55 55 0 1 0 110 0 55 55 0 1 0-110 0Z" fill="#FFB89A" p-id="3113"></path><path d="M889.8 722.1h-511c-37.7 0-68.4-30.7-68.4-68.4v-1.4L274.5 270v-0.2-0.2l-6-55.4c-8.6-86.8-57.6-117.5-97.3-128.1L101.5 69c-16.1-4-32.3 5.9-36.3 22s5.9 32.3 22 36.3l68.9 16.9c16.2 4.3 28.1 12.4 36.6 24.7 8.6 12.4 14 29.7 16.1 51.4l6 55.6 35.6 379.3c0.8 70.1 58.1 126.9 128.4 126.9h511c16.6 0 30-13.4 30-30s-13.4-30-30-30z" fill="#45484C" p-id="3114"></path><path d="M840.3 197.8H381c-16.6 0-30 13.4-30 30s13.4 30 30 30h459.3c30.2 0 54.9 24.3 55.5 54.3l-19.9 226.5-0.1 1.3v1.3c0 30.6-24.9 55.5-55.5 55.5H436c-16.6 0-30 13.4-30 30s13.4 30 30 30h384.3c63.2 0 114.7-51.1 115.5-114.1L955.7 316l0.1-1.3v-1.3c0-63.8-51.8-115.6-115.5-115.6z" fill="#45484C" p-id="3115"></path><path d="M408.5 842.1c7.2 0 13.1 5.9 13.1 13.1s-5.9 13.1-13.1 13.1-13.1-5.9-13.1-13.1 5.9-13.1 13.1-13.1m0-60c-40.4 0-73.1 32.7-73.1 73.1s32.7 73.1 73.1 73.1 73.1-32.7 73.1-73.1-32.7-73.1-73.1-73.1zM823.1 842.1c7.2 0 13.1 5.9 13.1 13.1s-5.9 13.1-13.1 13.1-13.1-5.9-13.1-13.1 5.9-13.1 13.1-13.1m0-60c-40.4 0-73.1 32.7-73.1 73.1s32.7 73.1 73.1 73.1 73.1-32.7 73.1-73.1-32.7-73.1-73.1-73.1z" fill="#45484C" p-id="3116"></path></svg>
\ No newline at end of file
diff --git a/src/components/equipCardNew/index.vue b/src/components/equipCardNew/index.vue
new file mode 100644
index 0000000..90425be
--- /dev/null
+++ b/src/components/equipCardNew/index.vue
@@ -0,0 +1,187 @@
+<template>
+    <div class="equipCard" @click="cardClick">
+        <img
+            src="https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1"
+            alt=""
+        />
+
+        <div class="title">{{ name }}</div>
+
+        <ul class="item-details">
+            <li class="address">
+                <span>{{ company }}</span>
+                <span style="text-align: right; color: #ff4800">
+                    <i style="font-size: 10px">￥</i>
+                    <i style="font-size: 14px; font-weight: bold">{{ price }}</i>
+                    <i style="font-size: 10px">/ 天</i>
+                </span>
+            </li>
+            <li>
+                <span>13867865678</span>
+            </li>
+            <li>
+                <span>{{ company }}</span>
+                <el-button class="lessee-btn" @click.stop="onHandelLessee">立即承租</el-button>
+            </li>
+        </ul>
+    </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: '月',
+    },
+    id: {
+        type: [String, Number],
+        default: '',
+    },
+})
+
+const emit = defineEmits(['onClick'])
+const cardClick = () => {
+    const data = {
+        id: props.id,
+    }
+    emit('onClick', data)
+}
+
+const onHandelLessee = () => {
+    console.log('立即租赁')
+}
+</script>
+<style lang="scss" scoped>
+.equipCard {
+    width: 100%;
+    background: #f7f9fa;
+    display: flex;
+    flex-direction: column;
+
+    img {
+        height: 140px;
+    }
+
+    .title {
+        padding: 16px 2px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .item-details {
+        padding: 0 10px 15px 10px;
+
+        .address {
+            padding-right: 15px;
+        }
+        .address span {
+            width: 50%;
+        }
+    }
+    .item-details li {
+        padding: 4px 0;
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        font-size: 12px;
+
+        span:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+
+        .lessee-btn {
+            background-color: #1abc9c;
+            text-align: center;
+            padding: 10px 18px;
+            border-radius: 6px;
+            color: #fff;
+        }
+    }
+
+    .avatar {
+        width: 37%;
+        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;
+
+        .tag {
+            display: flex;
+            margin-top: 8px;
+            .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: 25px;
+                font-weight: 600;
+            }
+        }
+    }
+}
+</style>
diff --git a/src/http/api/equip.ts b/src/http/api/equip.ts
index dd5013e..dc75be4 100644
--- a/src/http/api/equip.ts
+++ b/src/http/api/equip.ts
@@ -4,7 +4,7 @@ import { post, get, put } from '../index'
 export const getList = (params = {}) => {
     return post('/zlpt-equip/dev/list', {
         ...params,
-        maStatus:16
+        maStatus: 16
     })
 }
 
@@ -14,10 +14,10 @@ export const getDetail = (id = '') => {
 }
 
 //获取  推荐装备列表
-export const getHotList = (params) => {
-    return get('/zlpt-equip/dev/hotList', {
+export const getHotList = (params: any) => {
+    return get('/material-mall/dev/hotList', {
         ...params,
-        maStatus:16
+        maStatus: 16
     })
 }
 
diff --git a/src/layout/header.vue b/src/layout/header.vue
index da3f132..993d2cb 100644
--- a/src/layout/header.vue
+++ b/src/layout/header.vue
@@ -51,6 +51,8 @@ const inputRef: any = ref(null)
 //     return store.searchHistoryList.slice(0, 1)
 // })
 
+const searchHistoryList = ref(['挖掘机', '塔式起重机', '挖掘机', '吊机'])
+
 // 搜索按钮
 const searchKeywordBtn = () => {
     /* 去除空格 */
@@ -100,21 +102,24 @@ const onSelectRoles = (type: number) => {
     <div class="header-container">
         <div class="header-user-info">
             <div class="header-box wapper">
-                <div class="header-item">
+                <div class="header-item" v-if="isShowLogout">
                     <!-- <img src="../assets/img/home/star.png" alt="" /> -->
                     <a class="user-name">{{ store.userInfo.nickName }}</a>
                 </div>
                 <div class="header-item">
-                    <span v-if="!isShowLogout">
-                        <a class="a-border-none" @click="$router.push('/login')">登录</a>
-                        <span style="margin: 0 3px">/</span>
-                        <a style="padding: 0 20px 0 0" @click="$router.push('/register')">注册</a>
-                    </span>
-                    <span v-else>
-                        <a @click="handlerLogout">退出登录</a>
-                    </span>
+                    <a v-if="!isShowLogout" class="a-border-none" @click="$router.push('/login')"
+                        >登录</a
+                    >
+                    <span v-if="!isShowLogout" style="margin: 0 3px">/</span>
+                    <a
+                        v-if="!isShowLogout"
+                        style="padding: 0 20px 0 0"
+                        @click="$router.push('/register')"
+                        >注册</a
+                    >
+                    <a v-else @click="handlerLogout">退出登录</a>
                 </div>
-                <div class="header-item roles-check" @click="onRolesCheck">
+                <div class="header-item roles-check" @click="onRolesCheck" v-if="isShowLogout">
                     <!-- <img src="../assets/img/home/star.png" alt="" /> -->
                     <a style="display: flex; justify-content: center; padding-right: 10px">
                         {{ rolesName }}
@@ -165,7 +170,6 @@ const onSelectRoles = (type: number) => {
                 title="首页"
                 @click="$router.push('/home')"
             />
-
             <input
                 :placeholder="placeholderText"
                 type="text"
@@ -179,7 +183,7 @@ const onSelectRoles = (type: number) => {
 
             <div class="ipt-down">
                 <a
-                    v-for="item in store.searchHistoryList.slice(0, 4)"
+                    v-for="item in searchHistoryList.slice(0, 4)"
                     :key="item"
                     @click="handleHistory(item)"
                     class="history-box"
@@ -187,6 +191,11 @@ const onSelectRoles = (type: number) => {
                     {{ item }}
                 </a>
             </div>
+
+            <div class="cart-icon">
+                <!-- <svg class="cart"></svg> -->
+                预约车
+            </div>
         </div>
     </div>
 </template>
@@ -312,12 +321,13 @@ const onSelectRoles = (type: number) => {
     .logo-ipt-container {
         position: relative;
         display: flex;
+        align-items: center;
         background-color: #eeeff6;
         padding: 30px 0;
 
         img {
-            width: 240px;
-            height: 58px;
+            width: 210px;
+            height: 48px;
             cursor: pointer;
         }
 
@@ -343,7 +353,7 @@ const onSelectRoles = (type: number) => {
         .search-btn {
             width: 100px;
             height: 39px;
-            transform: translate(-110px, 4px);
+            transform: translate(-110px, 0);
             border-radius: 39px;
             background: linear-gradient(132deg, #22ab9b 0%, #0d7462 100%);
             box-shadow: 0px 2px 4px 0px rgba(20, 175, 255, 0.5);
@@ -355,7 +365,7 @@ const onSelectRoles = (type: number) => {
 
         .ipt-down {
             position: absolute;
-            bottom: 15px;
+            bottom: 5px;
             left: 22%;
             overflow: hidden;
 
diff --git a/src/views/home/index.vue b/src/views/home/index.vue
index eaa0a8c..e25f3f8 100644
--- a/src/views/home/index.vue
+++ b/src/views/home/index.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import EquipCard from 'components/equipCard.vue'
+import EquipCardNew from 'components/equipCardNew/index.vue'
 import NavMenu from 'components/Navmenu/index.vue'
 import { getGoodsClassListApi } from 'http/api/home'
 import { mainStore } from 'store/main'
@@ -65,7 +66,6 @@ const hotDeviceList: any = ref([])
 /* 获取热搜装备 */
 const getHotDeviceList = async () => {
     const res: any = await getHotList({ pageSize: 3 })
-
     hotDeviceList.value = res.rows
     console.log(res, '热搜装备111')
 }
@@ -130,6 +130,7 @@ const onClick = (val: any) => {
                                                     border-bottom: 1px solid #ccc;
                                                 "
                                                 class="last-level"
+                                                @click="handlerGoodsDetails(item, child, son)"
                                             >
                                                 {{ son_1.name }}
                                             </span>
@@ -173,24 +174,34 @@ const onClick = (val: any) => {
                 </div>
             </div>
             <!-- 热搜装备 -->
-            <div class="hot-equip">
-                <span>热搜装备</span>
-                <a>查看更多</a>
-            </div>
 
-            <ul class="equip-pic">
-                <li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer">
-                    <EquipCard
-                        @onClick="onClick"
-                        :company="item.companyName || '安徽博诺斯有限公司'"
-                        :price="item.monthLeasePrice"
-                        :tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
-                        :name="item.modelName + item.deviceName"
-                        :url="item.picUrl"
-                        :id="item.maId"
-                    />
-                </li>
-            </ul>
+            <div class="hot-equip-container">
+                <div class="hot-equip">
+                    <span>最新装备</span>
+                    <a>查看更多</a>
+                </div>
+
+                <ul class="equip-pic">
+                    <li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer">
+                        <!-- <EquipCardNew
+                            @onClick="onClick"
+                            :company="item.companyName || '安徽博诺斯有限公司'"
+                            :price="item.dayLeasePrice"
+                            :tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
+                            :name="item.modelName + item.deviceName"
+                            :url="item.picUrl"
+                            :id="item.maId"
+                        /> -->
+                        <EquipCardNew
+                            @onClick="onClick"
+                            :id="item.maId"
+                            :company="item.companyName"
+                            :name="item.deviceName"
+                            :price="item.dayLeasePrice"
+                        />
+                    </li>
+                </ul>
+            </div>
 
             <!-- 专题咨询 -->
 
@@ -348,30 +359,6 @@ const onClick = (val: any) => {
             .swiper-img {
                 flex: 1;
                 border-radius: 8px;
-
-                // .el-carousel {
-                //     height: 100%;
-
-                //     .el-carousel__container {
-                //         height: 100%;
-                //     }
-                // }
-
-                // .el-carousel__item h3 {
-                //     color: #475669;
-                //     opacity: 0.75;
-                //     line-height: 300px;
-                //     margin: 0;
-                //     text-align: center;
-                // }
-
-                // .el-carousel__item:nth-child(2n) {
-                //     background-color: #99a9bf;
-                // }
-
-                // .el-carousel__item:nth-child(2n + 1) {
-                //     background-color: #d3dce6;
-                // }
             }
         }
     }
@@ -384,13 +371,13 @@ const onClick = (val: any) => {
         justify-content: space-between;
 
         span {
-            font-size: 18px;
-            font-weight: bold;
-            color: #333333;
+            background-color: #1abc9c;
+            padding: 10px 18px;
+            color: #fff;
         }
 
         a {
-            color: #9d9d9d;
+            color: rgba(24, 103, 221, 0.8);
             font-size: 14px;
             cursor: pointer;
         }
@@ -398,11 +385,12 @@ const onClick = (val: any) => {
 
     .equip-pic {
         display: flex;
-        align-items: center;
+        flex-wrap: wrap;
         li {
-            width: calc((100% - 30px) / 3);
-            &:nth-child(2n) {
-                margin: 0 15px;
+            width: calc((100% - 100px) / 4);
+            margin: 8px 0 8px 20px;
+            &:nth-child(4n) {
+                margin-right: 20px;
             }
         }
     }
@@ -482,4 +470,29 @@ const onClick = (val: any) => {
 ::v-deep .el-carousel__container {
     height: 100%;
 }
+
+/* 适用于 Webkit 浏览器（Chrome, Edge, Safari, etc.） */
+::-webkit-scrollbar {
+    width: 6px; /* 滚动条宽度 */
+    height: 8px; /* 水平滚动条高度 */
+}
+
+::-webkit-scrollbar-track {
+    background: rgba(0, 0, 0, 0.1); /* 滚动条轨道背景颜色 */
+    border-radius: 6px; /* 轨道的圆角 */
+}
+
+::-webkit-scrollbar-thumb {
+    background-color: #138473; /* 滚动条滑块颜色 */
+    border-radius: 6px; /* 滑块的圆角 */
+    border: 1px solid rgba(0, 0, 0, 0.1); /* 滑块与轨道的边框 */
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background-color: #0f6e53; /* 鼠标悬浮时的滑块颜色，稍微加深 */
+}
+
+::-webkit-scrollbar-corner {
+    background-color: transparent; /* 滚动条和内容区的角落部分，通常用于表格等 */
+}
 </style>