bonus
/
Zlpt_Portal
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

首页等模块完善

This commit is contained in:
BianLzhaoMin 2024-11-22 18:03:09 +08:00
parent 8d89e1e291
commit f46cd7b905
6 changed files with 282 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components.d.ts vendored
View File

@ -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']

1
src/assets/icon/cart.svg Normal file
View File

@ -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>
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

187
src/components/equipCardNew/index.vue Normal file
View File

@ -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>

8
src/http/api/equip.ts
View File

@ -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
})
}

42
src/layout/header.vue
View File

@ -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;

113
src/views/home/index.vue
View File

@ -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>