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

首页更新

This commit is contained in:
songyang 2023-12-02 14:18:00 +08:00
parent f6365299c1
commit 5a28fcd3b8
16 changed files with 542 additions and 171 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
.gitignore vendored
View File

@ -13,6 +13,7 @@ dist
dist-ssr
coverage
*.local
components.d.ts
/cypress/videos/
/cypress/screenshots/
@ -26,3 +27,4 @@ coverage
*.njsproj
*.sln
*.sw?
components.d.ts

2
components.d.ts vendored
View File

@ -15,8 +15,10 @@ declare module 'vue' {
ElInput: typeof import('element-plus/es')['ElInput']
ElMenu: typeof import('element-plus/es')['ElMenu']
ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
ElPagination: typeof import('element-plus/es')['ElPagination']
ElTable: typeof import('element-plus/es')['ElTable']
ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
ElTag: typeof import('element-plus/es')['ElTag']
RouterLink: typeof import('vue-router')['RouterLink']
RouterView: typeof import('vue-router')['RouterView']
}

87
src/App.vue
View File

@ -1,14 +1,44 @@
<script setup lang="ts">
import FooterInfo from './compontents/FooterInfo/index.vue'
const router = useRouter()
const route = useRoute()
// const footFlag = ref(route.path.indexOf('/myuser/baseInfo') > -1)
// 判断是否是个人中心页面 如果是则隐藏页脚
const isMyInfoPage = () => {
const currentPage = window.location.hash
if (currentPage.indexOf("myuser/baseInfo") > -1) {
if (route.path.indexOf("myuser") === -1) {
return true
} else {
return false
}
}
// 搜索查询绑定值
const keywordIptValue = ref('')
// 输入框下方历史搜索记录
const searchHistoryList = ref(
[
{ name: '220E履带挖掘机' },
{ name: '3443挖掘机' },
{ name: '塔式起重机' },
{ name: '轮式牵引铲运机' },
]
)
// 搜索按钮
const searchKeywordBtn = () => {
console.log('搜索关键字', keywordIptValue.value);
}
// 点击下方搜索记录时
const handleHistory = (hisValue: any) => {
keywordIptValue.value = hisValue
}
onMounted(() => {
})
@ -22,7 +52,8 @@ onMounted(() => {
<ul class="header-wapper">
<li>
<span>
登录
<a href="">登录</a>/
<a href="" style="color:#6D6D6D">注册</a>
</span>
</li>
<li>
@ -48,15 +79,21 @@ onMounted(() => {
<!-- 菜单 -->
<div class="shop-menu-box">
<div class="shop-menu">
<div class="left-logo">
<img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="">
<div class="left-logo" @click="$router.push('/home')">
<!-- 首页Logo -->
<img src="@/assets/img/home/2023_12_01_beijing2/logo.png" alt="首页" title="首页">
</div>
<input placeholder="输入设备关键词" type="text">
<button class="search-btn">搜索</button>
<input placeholder="输入设备关键词" type="text" v-model="keywordIptValue">
<button class="search-btn" @click="searchKeywordBtn">搜索</button>
<div class="erweima">
<div class="tilte">手机扫码登录</div>
<img src="" alt="">
</div>
<div class="ipt-down">
<a @click="handleHistory(item.name)" v-for="item in searchHistoryList" :key="item.name">{{ item.name }}</a>
</div>
</div>
</div>
@ -66,8 +103,8 @@ onMounted(() => {
<div class="container">
<RouterView />
</div>
<!-- <FooterInfo v-if="isMyInfoPage()" /> -->
<FooterInfo />
<FooterInfo v-if="isMyInfoPage()" />
<!-- <FooterInfo /> -->
</template>
@ -114,7 +151,6 @@ onMounted(() => {
span {
color: #6D6D6D;
font-size: 14px;
// padding: 0 20px;
padding: 0 20px 0 3px;
border-right: 1px solid #666655;
@ -122,10 +158,17 @@ onMounted(() => {
color: #2282FF;
}
a {
text-decoration: none;
color: #2282FF;
}
}
.last-span {
border: none;
padding: 0;
}
}
@ -138,8 +181,9 @@ onMounted(() => {
background-color: #edeef6;
.shop-menu {
position: relative;
width: 1200px;
height: 120px;
height: 140px;
margin: 0 auto;
display: flex;
align-items: center;
@ -153,6 +197,7 @@ onMounted(() => {
img {
width: 176px;
height: 58px;
cursor: pointer;
}
}
@ -194,6 +239,7 @@ onMounted(() => {
.erweima {
// display: none;
width: 100px;
height: 80px;
margin-left: -20px;
@ -206,6 +252,21 @@ onMounted(() => {
text-align: center;
}
}
.ipt-down {
position: absolute;
bottom: 20px;
left: 22%;
overflow: hidden;
a {
padding: 0 10px;
color: #727272;
font-size: 14px;
cursor: pointer;
}
}
}
}

1
src/compontents/FooterInfo/index.vue
View File

@ -52,7 +52,6 @@
<style lang="scss">
.footer-container {
margin-top: 40px;
width: 100%;
height: 650px;
border-top: 1px solid #979797;
background: url('../../assets/img/home/2023_12_01_beijing2/beijing2.png') no-repeat;

52
src/compontents/Navmenu/index.vue Normal file
View File

@ -0,0 +1,52 @@
<script setup lang="ts">
const router = useRouter()
const navMenuList = [
{ name: '首页', routerName: 'home' },
{ name: '自选直租', routerName: 'equipList' },
{ name: '寻源比价', routerName: '/home' },
{ name: '二手交易', routerName: '/home' },
{ name: '保险业务', routerName: '/home' },
{ name: '检验业务', routerName: '/home' },
{ name: '企业专区', routerName: '/home' },
]
const navMenuClick = (name) => {
router.push({ name })
}
</script>
<template>
<ul class="nav-menu">
<li v-for="item in navMenuList" :key="item.name" @click="navMenuClick(item.routerName)">{{ item.name }}</li>
</ul>
</template>
<style lang="scss" scoped>
.nav-menu {
height: 43px;
background-color: #f7f9fa;
border-radius: 8px;
display: flex;
align-items: center;
li {
color: #7D7D7D;
padding: 0 20px;
border-right: 1px solid #7D7D7D;
&:hover {
cursor: pointer;
color: #333333;
font-weight: bold;
}
&:last-child {
border: none;
}
}
}
</style>

10
src/router/index.ts
View File

@ -35,6 +35,8 @@ const routes: Array<RouteRecordRaw> = [
children: [...myInfo]
},
// 个人中心
{
path: '/myuser', // 主路由地址
name: 'myuser',
@ -122,6 +124,7 @@ const routes: Array<RouteRecordRaw> = [
path: '/',
redirect: '/home'
},
// 首页
{
path: '/home',
name: 'home',
@ -133,11 +136,12 @@ const routes: Array<RouteRecordRaw> = [
},
},
// 自选直租
{
path:'/equip',
name:'equip',
path: '/equip',
name: 'equip',
redirect: '/equip/list',
children:[
children: [
{
path: 'list',
name: 'equipList',

8
src/style/css/reset.css
View File

@ -146,3 +146,11 @@ table {
width: 1200px;
margin: 0 auto;
}
body {
overflow-x: hidden;
}
a {
text-decoration: none;
}

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

@ -1,6 +1,253 @@
<script setup lang="ts">
import EquipCard from '@/compontents/equipCard.vue'
import Navmenu from '@/compontents/Navmenu/index.vue'
import EquipCard from '../../compontents/equipCard.vue'
const leftNavList = [
{
name: '全部商品', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
{ goodsName: '履带挖掘机' },
{ goodsName: '履带挖掘机' },
{ goodsName: '履带挖掘机' },
{ goodsName: '履带挖掘机' },
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '挖掘机', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '土方机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '工程起重机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '动力设备', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '压实机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '路桥机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '混凝土机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
{
name: '桩工机械', children: [
{
title: '挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '开沟机',
children: [
{ goodsName: '履带挖掘机' },
]
},
{
title: '斗轮挖掘机',
children: [
{ goodsName: '履带挖掘机' },
]
}
]
},
]
const handlerGoodsDetails = () => {
console.log('去往商品详情页');
}
</script>
<template>
@ -9,26 +256,26 @@ import EquipCard from '../../compontents/equipCard.vue'
<!-- 商品菜单导航以及轮播图区域 -->
<div class="home-goods">
<ul class="left-nav">
<li>全部商品</li>
<li>挖掘机械</li>
<li>土方机械</li>
<li>工程起重机械</li>
<li>动力设备</li>
<li>压实机械</li>
<li>路桥机械</li>
<li>混凝土机械</li>
<li>桩工机械</li>
<!-- 左侧机械名称菜单按钮 -->
<li class="item-nav" v-for="item in leftNavList" :key="item.name">{{ item.name }}
<ul class="sub-goods">
<!-- 级联框内 类别名称 -->
<li v-for="child in item.children" :key="child.title">
<span>{{ child.title }}</span>
<span>
<!-- 小类名称 -->
<a v-for="son in child.children" :key="son.goodsName" @click="handlerGoodsDetails">{{
son.goodsName }}</a>
</span>
</li>
</ul>
</li>
</ul>
<div class="right-content">
<ul class="nva-items">
<li>首页</li>
<li @click="() => {$router.push({ name:'equipList' })}">自选直租</li>
<li>寻源比价</li>
<li>二手交易</li>
<li>保险业务</li>
<li>检验业务</li>
<li>企业专区</li>
</ul>
<!-- 轮播图上方导航按钮 -->
<Navmenu />
<!-- 轮播图 -->
<div class="swpier-img">
<el-carousel :interval="5000" arrow="always" height="437px">
<el-carousel-item v-for="item in 4" :key="item">
@ -139,7 +386,9 @@ import EquipCard from '../../compontents/equipCard.vue'
height: 500px;
display: flex;
.left-nav {
position: relative;
width: 200px;
height: 100%;
display: flex;
@ -147,16 +396,54 @@ import EquipCard from '../../compontents/equipCard.vue'
flex-direction: column;
justify-content: space-around;
li {
width: 100%;
.item-nav {
text-align: left;
padding-left: 50px;
color: #8B8B8B;
height: 36px;
line-height: 36px;
&:hover {
cursor: pointer;
color: #2282FF;
font-weight: bold;
background-color: #1abc9c;
.sub-goods {
display: block;
}
}
}
.sub-goods {
position: absolute;
display: none;
top: 0;
left: 200px;
width: 500px;
height: 100%;
background-color: #f5f4f4;
z-index: 999;
opacity: 0.9;
li {
margin: 15px 0;
color: #333;
font-weight: bold;
display: flex;
span:first-child {
width: 160px;
}
span a {
margin: 0 15px;
font-size: 14px;
font-weight: normal;
}
}
}
@ -167,33 +454,6 @@ import EquipCard from '../../compontents/equipCard.vue'
height: 100%;
margin-left: 20px;
.nva-items {
width: 100%;
height: 43px;
background-color: #f7f9fa;
border-radius: 8px;
display: flex;
align-items: center;
// padding-left: 30px;
li {
color: #7D7D7D;
padding: 0 20px;
border-right: 1px solid #7D7D7D;
&:hover {
cursor: pointer;
color: #333333;
font-weight: bold;
}
&:last-child {
border: none;
}
}
}
.swpier-img {
width: 100%;
height: 437px;
@ -258,7 +518,6 @@ import EquipCard from '../../compontents/equipCard.vue'
}
.consult-nav {
width: 100%;
height: 40px;
border-bottom: 1px solid #E0E0E0;

178
src/views/user/baseInfo/index.vue
View File

@ -6,53 +6,57 @@
<!-- 基础信息 -->
<div class="base-info">
<div class="title-info">
<!-- <span>132255xxxxxxxx</span>
<a class="edit-a">修改</a>
<span>免费用户/标准用户 xxxx-xxx</span>
<a class="logoff-a">账号注销</a> -->
<div class="number-box">
13585990498
</div>
<div class="user-name">
<span class="free-user">免费用户</span>/
<span class="free-user active-user">免费用户</span>/
<span class="standard-user">标准用户</span>
</div>
<div class="my-enterprise">
<span>我的企业：</span>
<span class="enterprise-name">安徽博诺斯信息科技有限公司</span>
</div>
<div class="btn-edit">
<span>
<EditPen style="width: 1em; height: 1em; "></EditPen>
修改
</span>
<span>
<SwitchButton style="width: 1em; height: 1em; " />
注销
</span>
</div>
</div>
<!-- <div class="myqiye">
<span>我的企业:</span>
<a>申请企业认证</a>
/
<a>xxxxxx公司</a>
</div> -->
<!-- 订单交易信息 -->
<div class="goods-box">
<span class="goods-pay">订单交易</span>
<ul class="goods-count">
<li>
<!-- <svg-icon icon-class="goods-submit" class="svgicon" /> -->
<span>已提交</span>
<img src="../../../assets/img/home/2023_12_01_beijing2/fankuixinxi.png" alt="">
<span class="item">已提交</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-ing" class="svgicon" /> -->
<span>进行中</span>
<img src="../../../assets/img/home/2023_12_01_beijing2/dingdanxinxi.png" alt="">
<span class="item">进行中</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-pass" class="svgicon" /> -->
<span>已完成</span>
<img src="../../../assets/img/home/2023_12_01_beijing2/lishijishi.png" alt="">
<span class="item">已完成</span>
<span>0</span>
</li>
<li>
<!-- <svg-icon icon-class="goods-icon" class="svgicon" /> -->
<span>全部</span>
<img src="../../../assets/img/home/2023_12_01_beijing2/fuwuxiangmu.png" alt="">
<span class="item">全部订单</span>
<span>0</span>
</li>
</ul>
@ -68,96 +72,76 @@
.title-info {
height: 40px;
height: 50px;
background-color: #f7f9fa;
border-radius: 10px;
display: flex;
align-items: center;
.number-box {
margin-left: 20px;
font-weight: bold;
color: #1B7EFF;
}
.user-name {
margin-left: 15px;
color: #1B7EFF;
}
.active-user {
color: #c8c9c9;
}
.my-enterprise {
font-size: 18px;
color: #1B7EFF;
margin-left: 20px;
.enterprise-name {
font-weight: bold;
}
}
.btn-edit {
margin-left: 60px;
display: flex;
align-items: center;
color: #c7c7c8;
span {
margin: 0 10px;
cursor: pointer;
display: flex;
align-items: center;
}
}
}
// .title-info,
// .myqiye {
// padding: 0 20px;
// display: flex;
// height: 56px;
// align-items: center;
// }
.goods-count {
display: flex;
padding-top: 30px;
// .edit-a {
// margin: 0 50px 0 10px;
// color: #0262db;
// }
li {
width: 120px;
display: flex;
flex-direction: column;
align-items: center;
// .logoff-a {
// flex: 1;
// text-align: right;
// }
img {
width: 30px;
height: 30px;
}
// .myqiye {
// // width: calc(100% - 15px);
// padding: 0;
// margin: 20px 0 0 20px;
// border-bottom: 1px solid #000;
span:last-child {
margin-top: 20px;
font-size: 18px;
}
}
// span {
// margin-right: 5px;
// }
// a {
// color: #0262db;
// }
// }
// .goods-box {
// padding: 20px;
// .goods-pay {
// display: inline-block;
// padding: 5px;
// height: 37px;
// line-height: 37px;
// color: #000;
// border-bottom: 1px solid #d90d1a;
// }
// .goods-count {
// // width: 100%;
// height: 140px;
// background-color: #f5f5f5;
// padding: 0;
// margin: 0;
// margin-top: 15px;
// list-style: none;
// display: flex;
// justify-content: space-around;
// .svgicon {
// width: 35px;
// height: 35px;
// }
// li {
// width: 140px;
// height: 140px;
// display: flex;
// flex-direction: column;
// align-items: center;
// justify-content: center;
// span {
// margin: 5px;
// }
// }
// }
// }
.item {
color: #2282FF;
margin-top: 5px;
}
}
</style>

2
src/views/user/goodsManagement/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 订单管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item label="编码：" prop="menuName">
<el-input />
</el-form-item>

2
src/views/user/goodsUpdown/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 订单管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item label="编码：" prop="menuName">
<el-input />
</el-form-item>

4
src/views/user/index.vue
View File

@ -81,8 +81,6 @@ const lesseeClick = () => {
<style lang="scss" >
.app-container {
// width: 100%;
// height: 100%;
background-color: #fff;
display: flex;
justify-content: space-between;
@ -90,6 +88,7 @@ const lesseeClick = () => {
.left-menu {
width: 260px;
height: 100%;
background-color: #f7f9fa;
border-radius: 5px;
margin-right: 15px;
@ -128,6 +127,7 @@ const lesseeClick = () => {
.right-content {
width: calc(100% - 260px);
height: 100%;
}
.active {

2
src/views/user/operatorManagement/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 机手管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item>
<el-button type="primary">新增</el-button>

2
src/views/user/orderManagement/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 订单管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item label="订单编号：" prop="menuName">
<el-input />
</el-form-item>

2
src/views/user/orderManagementCz/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 订单管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item label="订单编号：" prop="menuName">
<el-input />
</el-form-item>

2
src/views/user/subAccount/index.vue
View File

@ -29,7 +29,7 @@ const tableData = [
<template>
<!-- 子账号管理 -->
<el-form :model="queryParams" :inline="true">
<el-form :model="queryParams" :inline="true" label-width="auto" size="small">
<el-form-item>
<el-button type="primary">新增</el-button>
</el-form-item>